body {
	
	background: #FFF;
	color: #00345F; font: italic 20px Roboto, sans-serif;
}




h1 { 
	margin:0 0 50px 0;
	font-weight: 700; font-size: 48px; 
	text-align: center; text-transform: uppercase;
}

h2 { 
	margin:0 0 10px 0;
	font-weight: 700; font-size: 36px; 
	text-align: center; text-transform: uppercase;
}


p { margin-bottom: 20px; }


a { color: #00345F; }




/* BUTTON */

.button { 
	display: inline-block;
	margin-bottom: 10px; padding: 10px 20px;
	background: rgba(0, 52, 95, 1); 
	color: #FFF; text-decoration: none;
	cursor: pointer;
	transition: background-color 500ms;
	line-height: 1;
}

.button:hover {
	background: #111;
}


/* CONTAINER */

.container {
	position: relative;
	box-sizing: border-box;
	max-width: 980px; margin: 0 auto; padding: 100px 0;
	text-align: center;
}



/* HEADER */

header .container {
	padding: 15px 0;
	text-align: center;
}



/* BANNER */

#banner {
	background: url(../gfx/banner.jpg) no-repeat center top;
	color: #FFF; font-size: 22px;
}

#banner .container {
	padding: 120px 0;
	height: 600px;
}
#banner .container .claim {
	width: 700px; margin: 0 auto 60px auto;
	font-style: italic; font-weight: 700;
	text-align: center; text-transform: uppercase;
	text-shadow: 0 2px 5px rgba(0,0,0,0.7);
}
#banner .container .claim h1 { font-size: 56px; }
#banner .container .call-to-action {
	text-align: center;
}
#banner .container .call-to-action .button {
	display: inline-block; padding: 10px 50px;
	border: 3px solid #FFF;
	border-radius: 2px;
	cursor: pointer;
	background: rgba(0, 52, 95, 0.5); 
	font-size: 32px; font-weight: 700; 
	text-transform: uppercase;
} 





/* ICON LIST */

.icon-list { 
	display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-flow: wrap;
   flex-flow: wrap;
	font-size: 16px;
}
.icon-list li {
	list-style: none;
	padding: 20px;
	width: 24%; margin: 1px; height: 200px;
	box-sizing: border-box;
	background: #F1F1F1;
	text-align: center;
}
.icon-list li img {
	height: 96px;
	display: inline-block;
}




/* LAYERS */

#layer-wrapper { 
	display: none;
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.75); 

}
.layer {
	display: none;
	position: absolute; top: 10%; left: 50%;
	width: 600px;  min-height: 300px;
	margin: 0 0 0 -300px; 
	background: #FFF;
	box-shadow: 0 0 30px rgba(0,0,0,0.5);
	border: 1px solid #FFF; border-radius: 2px;
}
.layer .layer-header {
	position: relative;
	padding: 25px;
	border-bottom: 1px solid #DDD;
	color: #FFF; font-size: 22px; text-transform: uppercase;
	background-color: #00345F; 
}
.layer .layer-header .layer-close { 
	position: absolute; top: 25px; right: 25px;
	display: block; width: 28px; height: 28px;
	background: url(../gfx/close.svg) no-repeat center center;
	background-size: 28px;
	cursor: pointer;
}
.layer .layer-content { padding: 25px; }

.layer .vcard { 
	height: 138px; padding-bottom: 20px; 
}

.layer .vcard .pic {	
	float: left;
	width: 128px; height: 128px;
	margin: 0 20px 0 0;
	border-radius: 100%; overflow: hidden;
	border: 5px solid #DDD;
}
.layer .vcard .pic img { width: 100%; }
.layer .vcard .intro { 
	padding: 15px 0 0 0;
	font-size: 16px; 
}


.contact-form .form-row { 
	padding: 10px 10px 12px 10px;
	border-top: 1px solid #DDD; 
}
.contact-form label {
	display: inline-block;
	width: 250px;
}
.contact-form input[type="text"] {
	display: inline-block;
	width: 250px; padding: 10px;
	border: 1px solid #AAA;
	background: #EEE;
}
.contact-form input[type="submit"] {
	display: block; width: 100%;
	border: 0;
	 font: italic 20px Roboto, sans-serif;
}





/* ZOBACZ FILM */

#zobacz-film {
	background: url(../gfx/film.jpg) no-repeat center center;
	color: #FFF;
}
#zobacz-film .container {
	height: 800px; padding-top: 200px;
}
#zobacz-film .container .button {
	opacity: 0.75;
	box-sizing: border-box;
	display: block; margin: 60px auto 0 auto;
	width: 200px; height: 200px;
	padding: 110px 0 0 0;
	background: url(../gfx/movie.svg) no-repeat center 60px;
	background-size: 54px;
	border: 5px solid #FFF;
	border-radius: 100%;
	text-transform: uppercase;
}





/* ILE TO KOSZTUJE */

#ile-to-kosztuje { border-top: 1px solid #DDD; }





/* CHCESZ WIEDZIEĆ WIĘCEJ */

#chcesz-wiedziec-wiecej { border-top: 1px solid #DDD; }





/* SĄ JUŻ Z NAMI */

#sa-juz-z-nami {  background: #DDD; }  

#sa-juz-z-nami .wall {
	min-height: 700px; padding: 70px 0 0 0;
	text-align: center;
	background: #DDD url(../gfx/erka.jpg) no-repeat center 0;
}

.wall .box { 
	display: inline-block;
	margin: 10px;
	width: 160px; height: 100px;
	overflow: hidden; 
}


#sa-juz-z-nami .wall .logo {
	opacity: 0.85;
	width: 160px; height: 100px; 
	box-sizing: border-box;
	box-shadow: 0 5px 10px rgba(0,0,0,0.5);
	background: #FFF; font-size: 16px;
}
#sa-juz-z-nami .wall .logo.empty { opacity: 0.33; }
#sa-juz-z-nami .wall .logo img { width: 100%; display: block; }

#sa-juz-z-nami .wall .logo span {
	display: inline-block;
	vertical-align: middle;
	line-height: 22px;
}


/* FOOTER */

.footer {
	padding: 250px 0;
	text-align: center;
	color: #000;
	font: 300 normal 12px Roboto;
	
}




/* MOBILE STYLES */



@media(max-width: 768px) {
	
	/* CONTAINER */

	.container {
		padding: 100px 25px;
		text-align: center;
	}
	
	#banner { background-size: cover; }
	
	#banner .container .claim { width: auto; }
	
	#banner .container .claim h1 { font-size: 36px; }

	.icon-list { flex: none; }
	.icon-list li {
		list-style: none;
		padding: 20px;
		width: 48%; margin: 1px; height: 240px;
		box-sizing: border-box;
		background: #F1F1F1;
		text-align: center;
	}
	.icon-list li img {
		height: 128px;
		display: inline-block;
	}
	


	/* SĄ JUŻ Z NAMI */

	#sa-juz-z-nami {  background: #DDD; }  

	#sa-juz-z-nami .wall {
		display: block;
		padding: 20px 0;
		justify-content: center;
		min-height: 700px;
		background: #00345F;
	}

	#sa-juz-z-nami .wall .logo {
		opacity: 1;
		display: inline-block;
		width: 160px; height: 100px;
		margin: 10px;
		align-self: center;
		background: #FFF;
		box-shadow: 0 0 10px rgba(0,0,0,0.5);
		border: 1px solid #AAA;
	}

	
	
	
	/* CONTACT FORM */
	
	.layer .vcard .intro { font-size: 14px!important; }
	
	.contact-form .form-row { 
		padding: 5x;
		border-top: 1px solid #DDD; 
		font-size: 14px;
	}
	.contact-form label {
		display: block;
		width: 100%;
	}
	.contact-form input[type="text"] {
		display: block;
		width: 100%; padding: 10px;
		border: 1px solid #AAA;
		background: #EEE;
	}
	.contact-form input[type="submit"] {
		display: block; width: 100%;
		border: 0;
		font: italic 20px Roboto, sans-serif;
	}
	
	
	.layer {
		display: none;
		position: absolute; top: 10%; left: 50%;
		width: 468px;  min-height: 300px;
		margin: 0 0 0 -234px; 
		background: #FFF;
		box-shadow: 0 0 30px rgba(0,0,0,0.5);
		border: 1px solid #FFF; border-radius: 2px;
	}
	
	.error { text-align: center; color: #C00; }
	.success { text-align: center; color: #0C0; }
	
	

}


@media(max-width: 468px) {
	
	.icon-list li {
		list-style: none;
		padding: 20px;
		width: 100%; margin: 10px 0; height: 240px;
		box-sizing: border-box;
		background: #F1F1F1;
		text-align: center;
	}
	
	

	
}