.main-content
{
	min-height : 600px;
}

#kontaktContainer h1
{
	font-size : 130%;
}

#formularz
{
	margin-left : 20%;
	text-align : left;
	width : 30%;
	padding : 2.5%;
	font-size : 150%;	
	float:left;
	background-color : rgb(231,231,231, 0.9);
	border-radius : 10px;
	border-style : solid;
	border-width : 2px;
}


#formularz h1
{
	font-size : 120%;
	line-height : 140%;
	padding : 10px;
	color : #76323f;
}

.kontaktBox
{
	padding-bottom : 10px;
	width : 100%;
}

.kontaktBox input,
.kontaktBox textarea
{
	width : 100%;

	font-size : 90%;
	padding : 10px;
	border-style : none;
	background : #cacaca;
	border-radius : 5px;
}

.kontaktBox textarea
{
	resize : vertical;
	min-height : 150px;
}


button
{
	justify-content : right;
	margin-top : 1%;
	padding : 2%;	
	cursor : pointer;
	width : 150px;
	height : auto;
	font-size : 130%;
}

button:hover
{
	cursor : pointer;

}


.msg-status 
{
	display : none;
	padding : 2%;
	width : 20%;
	margin-left : 40%;
	border-radius : 20px;
	justify-content : center;
	position : absolute;
	top : 50px;
	font-size : 150%;
}

.success
{
	display : flex;
	background-color : hsl(143,83%,85%);
}

.error
{
	display : flex;
	background-color : hsl(9,100%,64%);
}



#kontaktInfo
{

	float : left;
	margin-left : 5%;
	width : 25%;
	padding : 2%;
	background-color : rgb(231,231,231, 0.9);

	display : flex;
	flex-direction : column;	
	border-radius : 10px;
	border-style : solid;
	border-width : 2px;
	font-size : 150%;
	line-height : 150%;
}


#kontaktInfo h1
{
	color : #76323f;	
}

#kontaktInfo p
{
	font-weight : bold;
}






/*-------------- Responsywność  ------------------*/

@media only screen and (max-width: 1050px)
{
	#formularz
	{
		width : 90%;
		margin-left : 5%;
		padding-left : 0px;
		padding-right : 0px;
		text-align : center;
		clear : both;
		margin-bottom : 5%;
	}
	
	#formularz h1
	{
		line-height : 90%;
		font-size : 130%;
	}	
	
	#buttonDiv
	{
		text-align : center;	
	}
	
	button
	{
		font-size : 90%;
		width : 40%;
	}

	.kontaktBox
	{
		font-size : 140%;
	}	

	#kontaktInfo
	{
		clear : both;
		width : 90%;
		margin-left : 5%;
		margin-bottom : 5%;
		padding-left : 0;
		padding-right : 0;
		text-align : center;
		font-size : 150%;
	}
}

@media only screen and (max-width: 900px)
{
	#formularz
	{
		width : 90%;
		margin-left : 5%;
		padding-left : 0px;
		padding-right : 0px;
		text-align : center;
		clear : both;
		margin-bottom : 5%;
	}
	
	#formularz h1
	{
		line-height : 90%;
		font-size : 120%;
	}	
	
	#buttonDiv
	{
		text-align : center;	
	}
	
	button
	{
		font-size : 90%;
		width : 40%;
	}

	.kontaktBox
	{
		font-size : 100%;
	}	

	#kontaktInfo
	{
		clear : both;
		width : 90%;
		margin-left : 5%;
		margin-bottom : 5%;
		padding-left : 0;
		padding-right : 0;
		text-align : center;
		font-size : 100%;
	}
}

@media only screen and (max-width: 800px)
{
	#formularz
	{
		width : 90%;
		margin-left : 5%;
		padding-left : 0px;
		padding-right : 0px;
		text-align : center;
		clear : both;
		margin-bottom : 5%;
	}
	
	#formularz h1
	{
		line-height : 90%;
		font-size : 120%;
	}	
	
	#buttonDiv
	{
		text-align : center;	
	}
	
	button
	{
		font-size : 90%;
		width : 40%;
	}

	.kontaktBox
	{
		font-size : 100%;
	}	

	#kontaktInfo
	{
		clear : both;
		width : 90%;
		margin-left : 5%;
		margin-bottom : 5%;
		padding-left : 0;
		padding-right : 0;
		text-align : center;
		font-size : 120%;
	}
}

@media only screen and (max-width: 550px)
{
	#formularz
	{
		width : 90%;
		margin-left : 5%;
		padding-left : 0px;
		padding-right : 0px;
		text-align : center;
		clear : both;
		margin-bottom : 5%;
	}
	
	#formularz h1
	{
		line-height : 90%;
		font-size : 120%;
	}	
	
	#buttonDiv
	{
		text-align : center;	
	}
	
	button
	{
		font-size : 90%;
		width : 40%;
	}

	.kontaktBox
	{
		font-size : 100%;
	}	

	#kontaktInfo
	{
		clear : both;
		width : 90%;
		margin-left : 5%;
		margin-bottom : 5%;
		padding-left : 0;
		padding-right : 0;
		text-align : center;
		font-size : 100%;
	}	
}	

@media only screen and (max-width: 450px)
{
	#formularz
	{
		width : 90%;
		margin-left : 5%;
		padding-left : 0px;
		padding-right : 0px;
		text-align : center;
		clear : both;
		margin-bottom : 5%;
	}
	
	#formularz h1
	{
		line-height : 90%;
		font-size : 120%;
	}	
	
	#buttonDiv
	{
		text-align : center;	
	}
	
	button
	{
		font-size : 90%;
		width : 40%;
	}

	.kontaktBox
	{
		font-size : 100%;
	}	

	#kontaktInfo
	{
		clear : both;
		width : 90%;
		margin-left : 5%;
		margin-bottom : 5%;
		padding-left : 0;
		padding-right : 0;
		text-align : center;
		font-size : 100%;
	}
}	

@media only screen and (max-width: 400px)
{
	#formularz
	{
		width : 90%;
		margin-left : 5%;
		padding-left : 0px;
		padding-right : 0px;
		text-align : center;
		clear : both;
		margin-bottom : 5%;
	}
	
	#formularz h1
	{
		line-height : 90%;
		font-size : 120%;
	}	
	
	#buttonDiv
	{
		text-align : center;	
	}
	
	button
	{
		font-size : 90%;
		width : 40%;
	}

	.kontaktBox
	{
		font-size : 100%;
	}	

	#kontaktInfo
	{
		clear : both;
		width : 90%;
		margin-left : 5%;
		margin-bottom : 5%;
		padding-left : 0;
		padding-right : 0;
		text-align : center;
		font-size : 100%;
	}
}	

@media only screen and (max-width: 350px)
{	
	#formularz
	{
		width : 90%;
		margin-left : 5%;
		padding-left : 0px;
		padding-right : 0px;
		text-align : center;
		clear : both;
		margin-bottom : 5%;
	}
	
	#formularz h1
	{
		line-height : 90%;
		font-size : 120%;
	}	
	
	#buttonDiv
	{
		text-align : center;	
	}
	
	button
	{
		font-size : 90%;
		width : 40%;
	}

	.kontaktBox
	{
		font-size : 100%;
	}	

	#kontaktInfo
	{
		clear : both;
		width : 90%;
		margin-left : 5%;
		margin-bottom : 5%;
		padding-left : 0;
		padding-right : 0;
		text-align : center;
		font-size : 100%;
	}
}