/*  
Theme Name:  KULIKOWSKI-IT.pl
Theme URI: http://www.kulikowski-it.pl
AGENCJA INTERAKTYWNA KULIKOWSKI-IT
Author: AGENCJA INTERAKTYWNA KULIKOWSKI-IT
Author URI: http://www.kulikowski-it.pl
Description: Realizacja witryny internetowej wykonana przez firmę "KULIKOWSKI-IT" Adam Kulikowski. ©2015 All rights reserved. Wszystkie prawa zastrzezone. 
*/
	
	/* Reset CSS */
		html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } 
		body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }
		nav ul { list-style:none;} blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }		
		table { border-collapse:collapse; border-spacing:0; }
		hr { display:block; height:1px; border:0; border-top:1px solid #dddddd; margin:1em 0; padding:0; }
		input, select { vertical-align:middle; }

	/* Project CSS */


		@font-face {
			font-family: 'Conv_Gotham-Light';
			src: url('fonts/Gotham-Light.eot');
			src: local(''), url('fonts/Gotham-Light.woff') format('woff'), url('fonts/Gotham-Light.ttf') format('truetype'), url('fonts/Gotham-Light.svg') format('svg');
			font-weight: normal;
			font-style: normal;
		}

		@font-face {
			font-family: 'Conv_Gotham-Bold';
			src: url('fonts/Gotham-Bold.eot');
			src: local(''), url('fonts/Gotham-Bold.woff') format('woff'), url('fonts/Gotham-Bold.ttf') format('truetype'), url('fonts/Gotham-Bold.svg') format('svg');
			font-weight: normal;
			font-style: normal;
		}

		@font-face {
			font-family: 'Conv_Gotham-Medium';
			src: url('fonts/Gotham-Medium.eot');
			src: local(''), url('fonts/Gotham-Medium.woff') format('woff'), url('fonts/Gotham-Medium.ttf') format('truetype'), url('fonts/Gotham-Medium.svg') format('svg');
			font-weight: normal;
			font-style: normal;
		}




	body { font-family: 'Conv_Gotham-Medium'; font-size: 1em; color: #69696a; background: #fff;}		
		
		
			
		#topsite { float: left; width: 100%; padding: 0px 0px 20px 0px; }		
		#header { float: left; width: 100%;  background: url('images/bgtop.png') top left no-repeat; padding-top:30px; }
			#logo { float: left; width: 20%; }
				#logo img { max-width: 100%; height: auto; }
			#menu { float: right; width: 80%; }
		.container { margin: 0 auto; }  
	
		
			#contactphone { float: right; height: 20px;  margin-top: 5px; }
			#contactphone p { font-size: 1.0em; color: #b7b7b7; padding-left: 33px; background: url('images/tel.png') left center no-repeat; }
			
			
			
			
			
			#slider  { width: 100%; float: left; margin-top: 10px; padding-top: 2px; border: 0; }
				#sliderbg { width: 100%; float: left;  }
				.slideranimcontent { width:1100px; height:480px; max-width: 1100px; }

				
				
				#middlecontent { float: left; width: 100%; margin: 0; padding: 0; width: 100%; background: #222222; padding: 50px 0px 20px 0px; margin-bottom: 100px; }
		
		
		
		
			#content, #pagecontent { float: left; width: 100%; } #pagecontent { padding: 30px 0px 50px 0px; }
			
				#content h1, #content h2, #content h3, #content h4, #content h5 { margin: 15px 0px 15px 0px; font-weight: normal;  font-family: 'Conv_Gotham-Light';} 
					
				#content img.alignleft { float: left; margin: 5px 20px 20px 0px; }    
				#content img.alignright { float: right; margin: 5px 0px 20px 20px;  }  
				
				#content img.alignleft, #content img.alignright { max-width: 50%; height: auto; border: 5px solid #eee; }  
				#content img.alignnone { max-width: 100%; height: auto; }
				
				#content h1 { color: #222222; font-size: 2em; } 
				#content h2 { color: #222222; font-size: 1.5em;} 
				#content h3, #content h4, #content h5 { color: #222222; font-size: 1.3em;} 
				
				#content p { font-family: 'Conv_Gotham-Light'; font-size: 0.9em; color: #222222; margin: 10px 0px 10px 0px; text-align: justify; line-height: 1.5em;  } 	
				#content ul, #content ol { margin-left: 20px; font-family: 'Conv_Gotham-Light'; font-size:1em; line-height: 1.5em; color:#222222; } 	
				
				
				#content table { width: 100%;  }
				#content table td { padding: 3px; border-bottom: 1px solid #ddd; }

			
			
				.sloganhome { float: left; width: 100%; padding: 0px 0px 50px 0px; } 
				.sloganhome h3 { text-align: center; color: #FFF; font-weight: normal; font-size: 2.2em; font-family: 'Conv_Gotham-Light'; padding: 10px 25px 10px 25px;  }
				
				
				
				.offer { 
					float: left; width: 300px; min-height: 280px; float: left; cursor: pointer; 
				}
				
				.offer1s, .offer2s, .offer3s, .offer4s { margin-left: -40px;  }
				.offer1s { margin-left: 0px; }
				
				.offer h1 { color: #FFF; font-size: 1em; float: left; position: absolute; font-weight: normal; text-transform:uppercase; text-align: center; margin-left: 20px; float: left; margin-top: 255px; z-index: 11; width: 240px;  }

				.offerline { float: left; position: absolute; margin-top: 295px; height: 2px; background: #e51b23; width: 100px; margin-left: 85px;  }
				
				
				.offer:hover .offerline {  width: 160px; margin-left: 55px; }
				
					
				.offer img {
						float: left; position: absolute; max-width:100%; height: auto;
				}
				
				
				.offer img.imgtoanimmask
				{

					  -webkit-filter: grayscale(100%);
					  -webkit-transition: .3s ease-in-out;
					  -moz-filter: grayscale(100%); 
					  -moz-transition: .3s ease-in-out;
					  -o-filter: grayscale(100%); 
					  -o-transition: .3s ease-in-out;
					  filter: grayscale(100%) drop-shadow(1px 1px 3px #000); 				
					
				}
				
				
				.offer:hover img.imgtoanim { opacity: 0; }
				
				.offer:hover .offerline { background:#FFF;  height: 3px; }
				
				
				ul.offlistitem { color: #FFF; opacity: 0; float: left; position: absolute; z-index: 1111; line-height: 1.6em; margin: 80px 0px 0px 0px; }
				.offlistitem li.offlistitem1 { margin-left: 90px; }
				.offlistitem li.offlistitem2 { margin-left: 85px; }
				.offlistitem li.offlistitem3 { margin-left: 80px; }
				.offlistitem li.offlistitem4 { margin-left: 75px; }
				.offlistitem li.offlistitem5 { margin-left: 70px; }
				.offlistitem li:hover { text-decoration: underline; }
				
				.offer:hover  ul.offlistitem, ul.offlistitem:hover  { opacity: 1;  color: #FFF;}

				
				.offer:hover  ul.offlistitem, .offer  ul.offlistitem { 
										-webkit-transition: all 220ms ease-in-out;
										-moz-transition: all 220ms ease-in-out;
										-o-transition: all 220ms ease-in-out;
										transition: all 220ms ease-in-out;	 
				}
				
				
				.offer:hover img.imgtoanimmask {
					  -webkit-filter: grayscale(0%);
					  -webkit-transition: .2s ease-in-out;
					  -moz-filter: grayscale(0%);
					  -moz-transition: .2s ease-in-out;
					  -o-filter: grayscale(0%);
					  -o-transition: .2s ease-in-out;
					  filter: grayscale(0%) drop-shadow(5px 5px 7px #000); 	
					

				}
			
	
			

				.offer:hover, .offer, .offer img:hover, .offer img, .offer:hover .offerline, .offer .offerline {
										-webkit-transition: all 220ms ease-in-out;
										-moz-transition: all 220ms ease-in-out;
										-o-transition: all 220ms ease-in-out;
										transition: all 220ms ease-in-out;	 
				 
				 }
			
			#middlefooter { float: left; width: 100%; padding: 30px 0px 30px 0px; color:#222222; }
				#middlefooter h2 { text-align: center; font-weight: normal; font-family: 'Conv_Gotham-Light'; font-size: 2em; }
				.threeicons { float: left; width: 100%; padding: 35px 0px 20px 0px; }
				.col33 { float: left; width: 30%; margin: 1% 1.5% 1% 1.5%; }
				.col33 p { text-align: center; }
				.col33 p img { max-width: 100%; height: auto; }
				
				

				
				.col33 h3 { font-family: 'Conv_Gotham-Bold'; font-weight: normal; text-align: center; margin: 20px 0px 20px 0px; font-size: 1.1em; text-align: center; text-transform: uppercase; color:#222222; }
				.col33 p { margin: 30px 0px 0px 0px; font-family: 'Conv_Gotham-Light'; font-size: 0.95em; line-height: 1.3em; color:#585858; }
				.col33rline { height: 2px; background: #e51b23; width: 40%; margin: 0% 30% 0% 30%; }
				.col33 a img:hover { opacity: 1;     
					-webkit-transition-duration: 0.5s;
					-moz-transition-duration: 0.5s;
					-o-transition-duration: 0.5s;
					transition-duration: 0.5s;
					-webkit-transition-property: -webkit-transform;
					-moz-transition-property: -moz-transform;
					-o-transition-property: -o-transform;
					transition-property: transform;
				}
				.col33 a img:hover { -webkit-transform:rotate(360deg);   -moz-transform:rotate(360deg);    -o-transform:rotate(360deg); }
				.col33 a.readmore { color:#585858; text-decoration: none; -moz-border-radius: 15px;  -webkit-border-radius: 15px; border-radius: 15px; background: #f1f1f1; font-size: 0.9em; padding: 6px 10px;  }
				.col33 a.readmore:hover { background: #e51b23; color: #FFF; }
		
				#greycontent a.btnmessage, #greycontent a.btnmessage:hover, .col33 a.readmore:hover, .col33 a.readmore {
							-webkit-transition: all 200ms ease-in-out;
							-moz-transition: all 200ms ease-in-out;
							-o-transition: all 200ms ease-in-out;
							transition: all 200ms ease-in-out;	 
				 }


					
				#contact_left { float: left; width: 35%; }
					#contact_left a  { color:#e51b23; }
				#formular_right { float: right; width: 45%; padding-bottom: 30px; }
				
					#formular_right label { float: left; width: 96%; margin: 1% 1% 1% 1%; text-align: center;  font-size: 0.9em;  }
					#formular_right label span { color: red; }
					#formular_right select, #formular_right textarea, #formular_right input { float: left; width: 96%; margin: 1% 1% 1% 1%; padding: 1%; font-family: 'Conv_Gotham-Light'; }
					#formular_right select  { width: 98%; } 
					#formular_right textarea { resize: none; }
					#formular_right input.btn_send { background: #de1209; width: 98%; padding:2% 3%; font-size: 0.9em; text-transform: uppercase; color: #FFF; border: 0; cursor: pointer; font-family: 'Conv_Gotham-Light'; }
					#formular_right input.btn_send:hover { background: #fb5139; }
				
				
					
				
			#footer { float: left; width: 100%; padding: 30px 0px 100px 0px; }
				#formular { float: left; height: 250px; width: 40%; padding: 5%; background: url('images/redmap.png') top center no-repeat; background-size: cover; }
					#formular h3 { font-family: 'Conv_Gotham-Light'; font-weight: normal; font-size: 2em; color: #FFF; }
					#formular h2 { font-family: 'Conv_Gotham-Light'; font-weight: normal; font-size: 2em; color: #FFF; }
					
					
					#greycontent { float: left; width: 75%; padding: 5% 10% 0% 10%; margin: 50px 5% -110px 5%; background: #222 url('images/contact.png') top right no-repeat; color: #FFF;  }
					#greycontent h4 { color:#FFF;  font-family: 'Conv_Gotham-Light';  font-size: 1em; line-height: 1.4em; margin: 10px 0px 10px 0px;}
					
					#greycontent p { color:#9b9b9b; font-family: 'Conv_Gotham-Light'; font-size: 0.9em; line-height: 1.4em; margin: 10px 0px 10px 0px;}
					#greycontent p a { color: #e51b23; text-decoration: none; }
					#greycontent a.btnmessage { -moz-border-radius: 25px;  -webkit-border-radius: 25px; border-radius: 25px; float: left; width: 80%; background: #fff url('images/cmsg.png') center right no-repeat;  text-decoration: none; color: #000; font-family: 'Conv_Gotham-Bold'; font-size: 0.8em; text-transform: uppercase; padding: 12px 8px 12px 25px; margin: 25px 0px 40px 0px; }
					#greycontent a.btnmessage:hover { background: #ddd url('images/cmsg.png') center right no-repeat; }
					
				#sidegooglemap { float: right; width: 50%; height: 360px; background: url('images/map_au.jpg'); background-size: cover; }
				.mapagoogle { height: 360px; } 
				
				
				
						#animfooterlogos { float: left; width: 100%; }
						
						
						
				#footer2 { float: left; width: 100%; font-family: 'Conv_Gotham-Light'; font-size: 0.9em; line-height: 1.3em; margin: 50px 0px 80px 0px;}
				#footer2 p { color:#8e8e8e; } 
				#footer2 span, #footer2 a { color: #e51b23; text-decoration: none; }
				#footer2l { float: left; width: 50%; }
				#footer2r { float: right; width: 50%; }  
				#footer2r p { text-align: right; }  


/* RWD elements DIV */	

		@media (min-width: 1280px) {
			.container  {width:1100px;}
			#logo { width: 20%; float: left; }
			#menu { width: 80%; float: right;  }

				ul#navmenu-h { margin-top: 18px; }
				ul#navmenu-h li a { padding:10px 4px; font-size: 0.9em; }
				
				.offer1s, .offer2s, .offer3s, .offer4s { margin-left: -40px; }
				.offer1s { margin-left: 0px; }

		}
		
		
		
		@media (max-width: 1280px) and (min-width: 1024px) {
			.container  {width:1000px;}
			#logo { width: 20%; float: left; }
			#menu { width: 80%; float: right;  }
			
				ul#navmenu-h { margin-top: 15px; }
				ul#navmenu-h li a { padding:10px 3px; font-size: 0.8em; }
				
				#sidegooglemap { height: 350px;  }
				.mapagoogle { height: 350px; } 
				
				.offer { 
					float: left; width: 268px; min-height: 275px; float: left; cursor: pointer; 
				}
				
				.offer1s, .offer2s, .offer3s, .offer4s { margin-left: -40px;  }
				.offer1s { margin-left: 0px; }
	

		}
		
		@media (max-width: 1024px) and (min-width: 768px) {
			.container  {width:740px;}
			#logo { width: 20%; float: left; }
			#menu { width: 100%; float: right;  }
			
				ul#navmenu-h { margin-top: 10px; float: left;}
				ul#navmenu-h li a { padding:10px 5px; font-size: 0.7em; }
				ul#navmenu-h li {   margin-left: 0px; }	


				#sidegooglemap { height: 324px;  }
				.mapagoogle { height: 324px; } 	
				
				#formular_right {  width: 55%; }
				
				

		}

		@media (max-width: 768px) and (min-width: 480px) {
			.container   { width:90%; }
			#logo { width: 40%; float: left; }
			#menu { width: 100%; float: left; }
			
			
			#formular { float: left; height: auto; width: 90%; padding: 5%; position: relative; z-index: 11; }
			#sidegooglemap { float: left; width: 100%; height: 350px;  }			
			.mapagoogle { height: 450px;  }



		}
		
		@media (max-width: 480px) {
			.container   {width:90%;}
			#logo { width: 50%; float: left; }
			#menu { width: 100%; float: left; }
			
				#contactphone { display: none; }
				
			#formular { float: left; height: auto; width: 90%; padding: 5%; position: relative; z-index: 11; }
			#sidegooglemap { float: left; width: 100%; height: 350px; }	


		}		
				
				
						
						
				@media (max-width: 768px) {

						#logo { width: 200px; height: auto; float: left; height: 1px; padding: 1% 0% 0% 1%; }
							#logo img { float: left; position: relative; z-index: 99999; }
							#menu { width: 100%; float: left; position: relative; padding: 5px 0px; z-index: 9998; margin-right: 1%; }
												
							.col33 { float: left; width: 97%; margin: 1% 1.5% 1% 1.5%; }
							
			
								
								#footer2r, #footer2l { float: left; width: 100%; }
								#footer2r { margin-top: 20px; }
								#footer2 p { text-align: center; }  			

			
								#formular_right { float: left; width: 100%; padding: 20px 0px 20px 0px; }
								#contact_left {  float: left; width: 100%; }								

				}		

				@media (max-width: 1024px) {
				
					.offer { 
						float: left; width: 300px; min-height:360px; float: left; cursor: pointer; 
					}
					
					.offer1s, .offer2s, .offer3s, .offer4s { margin-left: 33px;  }
					.offer h1 {font-size: 1em; }
					.offerline {	margin-left: 80px;	}	
				
				}
				
				@media (max-width: 640px) {
				
					.offer1s, .offer2s, .offer3s, .offer4s { margin-left: 15%;  }

				
				}
			
				
				@media (max-width: 480px) {
				
					.offer1s, .offer2s, .offer3s, .offer4s { margin-left: 20px;  }

				
				}
			
			
		/* COOKIES */

		.cc-cookies { width: 90%; left: 0; top: 0; padding: 0.5em 5%; background: #444; color: #fff; font-size: 0.75em; z-index: 99999999; text-align: center; color: #fff; opacity:0.85; }
		.cc-cookies a, .cc-cookies a:hover { color: #fff; text-decoration: underline; }
		.cc-cookies a:hover { text-decoration: none; }
		.cc-overlay { height: 100%; padding-top: 25%; }
		.cc-cookies-error { float: left; width: 90%; text-align: center; margin: 1em 0 2em 0; background: #fff; padding: 2em 5%; border: 1px solid #ccc; font-size: 18px; color: #333; }
		.cc-cookies a.cc-cookie-accept, .cc-cookies-error a.cc-cookie-accept, .cc-cookies a.cc-cookie-decline, .cc-cookies-error a.cc-cookie-decline, .cc-cookies a.cc-cookie-reset { 
			display: inline-block; color: #fff; text-decoration: none; 
			background: #e51b23; 
			padding: 0.5em 0.75em; border-radius: 3px; box-shadow: 0 0 2px rgba(0,0,0,0.25); text-shadow: 0 -1px 0 rgba(0,0,0,0.35); -o-transition: background 0.5s ease-in; -webkit-transition: background 0.25s ease-in; -moz-transition: background 0.25s ease-in; 
		}
		.cc-cookies a.cc-cookie-decline, .cc-cookies-error a.cc-cookie-decline { background: #af3b3b; margin-left: 0.5em; }
		.cc-cookies a.cc-cookie-reset { background: #f15b00; }
		.cc-cookies a:hover.cc-cookie-accept, .cc-cookies-error a:hover.cc-cookie-accept, .cc-cookies a:hover.cc-cookie-decline, .cc-cookies-error a:hover.cc-cookie-decline, .cc-cookies a:hover.cc-cookie-reset  { background: #000; -o-transition: background 0.5s ease-in; -webkit-transition: background 0.25s ease-in; -moz-transition: background 0.25s ease-in; }
		.cc-cookies-error a.cc-cookie-accept, .cc-cookies-error a.cc-cookie-decline { display: block; margin-top: 1em; }
		.cc-cookies.cc-discreet { width: auto; padding: 0.5em 1em; left: auto; top: auto; }
		.cc-cookies.cc-discreet a.cc-cookie-reset { background: none; text-shadow: none; padding: 0; text-decoration: underline; }
		.cc-cookies.cc-discreet a:hover.cc-cookie-reset { text-decoration: none; }

		@media screen and (max-width: 768px) {
		.cc-cookies a.cc-cookie-accept, .cc-cookies a.cc-cookie-decline, .cc-cookies a.cc-cookie-reset { display: block; margin: 1em 0; }
		}

		@media screen and (max-width: 480px) {
		.cc-cookies { position: relative; float: left; }
		}

		
		
		
		
		
	#facebook-slider {
		float:left;	width:355px; height:350px; 
		background: url(images/fbboxbg.png) no-repeat top right;
		display:block; left:-325px; padding:0; position: fixed; top:30%; z-index:1999;
	}

	.fbslide {
		font-size: 8px; margin-right: 30px; text-decoration: none; background: #fff;
		border: 1px #3b5998 solid;

	}	

	#fb_likeslider { padding: 10px; border: none; width: 300px; height: 220px;}
	

figcaption.ngg-figcaption {
    background: none;
   text-shadow: 3px 3px 4px red;
}

#contact_left h2
{
color:#222222;
  font-size:1.3em;
}

@media (max-width: 801px) {
	.slide__details {
		display: none !important;
	}
}