html,body{background:  #222}
html{font-size: 62.5%}
body{font-family: "Oxygen", Arial, Helvetica, sans-serif;color: #444; padding:0; margin: 0; font-weight: 300; min-width: 320px}


.trackPhone{text-decoration: none; cursor: text; color: inherit}
.big{font-size: 28px; padding: 0 10px; color: #e11}

.contactPhone::before{content: "tel.:\0000a0"}

.wrapper{width: 100%; float: left; position: relative; font-size: 16px; line-height: 1.5; clear: both}
#header,#wrapper,#footer{width: 100%; max-width: 1000px; margin: 0 auto; position: relative;clear: left}
#wrapper{background: #fff; margin-bottom: 10px}
#content,#left_panel,#right_panel{position: relative; padding-bottom: 2em}
#header_wrapper{background-color: #eee; background: linear-gradient(#fff 0%, #eee 100%);  position: fixed; left: 0; top:0;z-index:100; border-bottom: 1px dotted #444; border-top: 2px solid #a11}
#empty_wrapper{height: 123px}
#outer_wrapper{background: #eee; overflow: hidden; background: linear-gradient(#fff 0px, #fff 128px, #eee 100%)}
#content_main{width: 90%; padding: 0 5% 2em 5%}
#content{width: 68%; padding: 0 2% 2em 2%; float: left}
#left_panel{width: 24%; float: left; padding: 0 2% 2em 2%}
#right_panel{width: 24%; float: right; padding: 0 2% 2em 2%}

#logo{line-height:0; margin-left: 20px; padding: 15px 0}
#logo img{width: 25%; max-width: 125px; min-width: 50px}

#slogan{position: absolute; top: 15px; left: 170px}

.wrapper img{ max-width: 100%; height: auto}
#map_canvas img{ max-width: none}

b,strong{font-weight: 700}

#footer_wrapper{border-top: 2px solid #444}
#footer{padding: 15px 0 25px 0; color: #999}
#site_footer{text-align: center; color: #999}
#created_by{color: #777; text-align: center}
#created_by a{color: #777}


/*predefiniowane style dla opływania obrazków*/
.imgleft{float: left; margin: 2% 5% 2% 0}
.imgright{float: right; margin: 2% 0 2% 5%}


h1{font-size: 2.0em; line-height: normal; padding: 0 0 0.25em 30px; margin: 1em 0 0.25em 0; color: #444; background: url(/img/sprite.png) no-repeat 0px 11px}
h2{font-size: 1.75em; line-height: normal; margin: 1.5em 0 0.5em 0; color: #666}
h3{font-size: 1.5em; line-height: normal; margin: 1.5em 0 0.5em 0; color: #666}
p{margin: 1em 0;}
a{color: #e11}
a img{border: none}
img{line-height: 0}

/*ogólne ustawienia dla menu*/
.menu{clear: both}
.menu a{display: block}
.menu ul{list-style: none; padding:0; margin: 0}
.menu li{padding:0; margin: 0}

/*menu w nagłówku*/

#menu_icon{position: absolute; top: 0; right: 0;padding: 22px 10px; display: none; cursor: pointer; height: 48px; width: 48px}

/*Hide checkbox*/
#header input[type=checkbox]{display: none;-webkit-appearance: none}

/*Show menu when invisible checkbox is checked*/
#header input[type=checkbox]:checked ~ .header_menu{display: block}


.header_menu{position: absolute; bottom: 20px; right: 0}
.header_menu ul{float: left}
.header_menu li{float: left;  background: url(/img/sprite.png) no-repeat right -311px}
.header_menu a{padding: 6px 10px; margin: 0 5px; color: #888; text-decoration: none; border-radius: 4px}
.header_menu li.last{background: none}
.header_menu a:hover{color: #555}
.header_menu a.active{background: #e11; color: #fff}


/*formularze */
.error,.info{padding: 10px; border: 1px dashed #ccc; margin: 10px 0}
.error{color: red}
.info{color: green}

.data_field{border: 1px solid #ccc; background: #f8f8f8; padding: 5px; color: #666; font: inherit;margin: 5px 0}
.label{font-style: italic; color: #999}
.textarea{width: 90%; height: 100px; max-width: 480px}
.invalid{outline: none; box-shadow: 0 0 4px orange}

textarea, input, button { outline: none; }
#submitBtn{margin: 10px 0}

/*wpisy*/
.clear{clear: both}
.intro{cursor: pointer; float: left; margin-bottom: 20px; margin-top: 10px;width: 100%}
.full{width: 30%; margin-right: 5%}
.intro_image{line-height:0; margin: 5px 15px 10px 0; width: 240px; float: left; box-shadow: 0 5px 7px #aaa;}

.full .intro_image{margin: 5px 0 10px 0; width: 100%; float: none}


.intro_date,.date, .foot{color: #999; font-style: italic; line-height: 1.3em; padding-top: 0.25em}
.date{text-align: right}

.intro_title{margin: 10px 0; padding: 0; font-size: 18px; text-align: left}
.intro_title a{color: inherit; text-decoration: none;}
.intro_desc p{margin: 0; padding: 0}
.intro_readmore{padding: 20px 0;text-align: right}

.intro.porady{float: none; width: 100%; margin: 10px 0 20px 0; text-align: left}
.intro.porady .intro_title{margin: 30px 0 10px 0; padding: 0; font-size: 1em; text-align: left;  border-left: 3px solid #e11;  padding-left: 5px;}


#content_image{margin: 0 auto; max-width: 600px; line-height: 0}



/*galeria zdjęć*/
.gallery ul{list-style:none;margin:20px auto; padding:0}
.image{float: left; width: 30%; margin-right: 5%; margin-bottom: 25px;    box-shadow: 0 0 3px #ccc;}
.image_wrapper{line-height: 0; position: relative; cursor: pointer}
.image img, .image a{line-height: 0; text-decoration: none; display: block}
.image > img{border-bottom: 1px solid #fff}
.imgrid3_3{margin-right: 0}

.image_title, .image_title a{display: none; color: #ccc; line-height: 24px; text-align: center; font-size: 15px; font-style: italic; overflow: hidden}

.offer{margin: 20px 5% 20px 0; cursor: pointer; float: left; width: 30%; max-width: 450px; text-align: center}

.offer_image{max-width: 400px; line-height:0; text-align: center; margin: auto;  box-shadow: 0 5px 7px #aaa; position: relative}
.offer_title{color: #222; margin: 0 auto; max-width: 400px; padding: 15px 0 0 0; font-size: 18px; font-weight: bold; text-align: center}
.offer_title a{color: inherit; text-decoration: none}
.offer_desc{text-align: left}
.offer_desc ul{padding: 0; margin: 10px 0 15px 20px}

.image_mask{position: absolute; top: 0; left: 0; background: url(/img/mask.png); width: 100%; height: 100%; opacity: 0; transition: opacity 0.25s linear }

.pointer_plus{position: absolute;  top: 50%; left: 50%; background: url(/img/sprite.png) no-repeat 0 -620px;  width: 64px; height: 64px; margin-left: -32px; margin-top: -32px}
.pointer_arrow{position: absolute;  top: 50%; left: 50%; background: url(/img/sprite.png) no-repeat 0 -700px;  width: 60px; height: 80px; margin-left: -30px; margin-top: -40px}

.image_mask:hover{opacity: 1}




.button{display: inline-block; background: #fff; color: #e11; border: 1px solid #e11; text-decoration: none;  padding: 10px 20px; font: inherit; cursor: pointer; transition: all 0.25s ease}
.button:hover{color: #fff; background: #e11}



.link{font-size: 15px; color: #e11; font-weight: bold; text-align: right; margin-right: 20px}

.grid3_1{clear: left}
.grid3_3{margin-right: 0}


#getMoreContent{display: none; clear: both; background: #e11; padding: 18px 50px; cursor: pointer; color: #fff; font-size: 18px; margin: 10px auto; border: none}


.foot{clear: both; line-height: 32px}

.comment_meta a{color: #222; text-decoration: none}
.comment,.moderate{border-bottom: 1px dashed #eee; padding: 10px 0}





/*slider*/
#slider{width: 100%; height: auto; position: relative; overflow: hidden;background: #fff;border-bottom: 2px solid #999;display:none}
#slider_wrapper{width: 10000px}
.slide{float: left; position: relative;line-height:0; font-size: 18px}
.slide_img{height: auto}


.slide_desc_wrapper{position: absolute;top: 0; left: 0;  width: 100%; height: 100%; text-align: center; color: #fff; }
.slide_image_mask{position: absolute; top: 0; left: 0;  width: 100%; height: 100%; background: url(/img/mask.png)}
.slide_desc{position: absolute; margin: auto;width: 100%; text-align: center; top: 45%; -ms-transform: translateY(-50%); -webkit-transform:  translateY(-50%); transform: translateY(-50%)}
.slide_desc_title{line-height: 1.25em; font-size: 4em; color: #fff}
.slide_desc_content{line-height: 1.5em;font-size: 2em; color: #ddd; opacity: 0.8}
.slide_desc_readmore{line-height: 2.5em;margin-top: 1em;font-size: 1.3em;}
.slide_desc_readmore a{color: #fff; background: #e11; background: rgba(238,17,17,0.9); text-decoration: none; padding: 0em 1em; display: inline-block}


#slider_nav{position: absolute; bottom: 30px; left: 0; width: 100%; text-align: center;color: #fff;font-size: 80px}
.slider_nav{display:inline-block; cursor:pointer;opacity: 0.5;}
.slider_nav:hover{opacity: 0.7}
.slider_nav.active{color: #e11; opacity: 1}


#slide_next, #slide_prev{position: absolute; top:50%; opacity: 0.5; z-index: 50; margin-top: -50px; cursor: pointer; width: 40px; height: 100px}
#slide_next{right: 30px; background: url(/img/sprite.png) no-repeat 0 -410px}
#slide_prev{left: 30px; background: url(/img/sprite.png) no-repeat 0 -510px}
#slide_next:hover, #slide_prev:hover{opacity: 0.8}

/*lightbox*/
#overlay{position:absolute; left:0; top:0; width:100%; height: 100%; z-index:1000;font-size: 16px; font-size: 1.6rem}

#canvas{width: 100%; height: 100%; position:absolute; top:0; left: 0; text-align: center; background: #000}
#close{position:absolute;top:0px;right:0px;cursor:pointer;z-index: 200;padding: 2%; opacity: 0.75}
#close:hover{opacity: 1}
#img{position: relative;line-height:0}
#mylightbox_title{color:#999;  position:absolute; bottom: 0; left: 0;width: 100%;text-align: center; color: #ccc; background: rgba(0,0,0,0.8); padding: 5px 0; z-index: 200}
#mylightbox_title a{color: #999}

#loading{left:50%;margin-left:-16px;margin-top:-26px;position:absolute;top:50%}

#navPrev,#navNext{color:#ccc;cursor:pointer; position: absolute; top:0; width: 50%; height: 100%; opacity: 0.8}
#navPrev{left: 0}
#navNext{right: 0}
#navPrev div,#navNext div{position:absolute;top:50%;margin-top:-40px;font-size: 80px; line-height: 80px}
#navPrev div{left:4%}
#navNext div{right:4%}
#navPrev:hover,#navNext:hover{color: #fff}

.video { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



#ctaTop{position: absolute; top: 15px; right: 10px; line-height: 32px; height: 32px; color: #666; font-size: 22px; font-weight: 400}
#sendFormBtn{color: white; background: #e11; text-decoration: none; padding: 0 15px; display: inline-block; margin: 0 5px}
#phoneTop{color: #e11;font-weight: 400;display: inline-block; font-size: 26px; text-decoration: none; margin-left: 5px}



.cc_gallery{margin:0; padding: 0; list-style: none; position: relative}
.cc_gallery li{float: left;margin:0;padding:0;line-height:0; top:0; left: 0; display: none}
.cc_gallery img{width: 100%}
.cc_list{list-style: none; padding: 0; margin: 0; border-top: 1px dotted #ddd}
.cc_list li{padding: 5px 0; border-bottom: 1px dotted #ddd}
.cc_list a{display: block; background: url(/img/sprite.png) no-repeat 0 -291px;padding-left: 8px; text-decoration: none}
.cc_list a:hover{text-decoration: underline; background: url(/img/sprite.png) no-repeat 0 -191px}

#right_panel a{color: #666}


#cookie_msg{max-width: 1000px; margin:0 auto; font-size: 14px; color: #999;text-align: center; padding: 0.5em}
#cookie_msg span{color: #fff;background: #e11;cursor: pointer; padding: 2px 7px; display: inline-block}



.c_head,  #right_panel h3, #Formularz{color: #e11}
.news_header{    border-bottom: 1px dotted #ccc;  padding-bottom: 15px;}

table{text-align: center; border-collapse: collapse; margin: 10px auto; width: 100%; border-left: 1px solid #ddd; border-top: 1px solid #ddd; }
td{font: inherit}
table img{width: auto}
thead td{font-weight: bold; background: #f4f4f4; padding: 5px; border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;white-space: nowrap;}
tbody td{border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;  padding: 5px}

.im_left_wrapper{float: left; line-height:0; margin: 10px 30px 10px 0; width: 45%; max-width: 340px}
.im_right_wrapper{float: right; line-height:0; margin: 10px 0px 10px 30px; width: 45%; max-width: 340px}

#map_canvas h3{margin: 0; padding: 0}
#map_canvas p{margin: 0;padding: 0}
#map_get_direction{text-align: left; margin: 10px auto}
#map_get_direction a{text-decoration: none; max-width: 320px; margin: auto}

#backToTop{position: fixed; bottom: -10px; right: 9px;display:none}
#backToTop img{width: 48px; height: 48px}


.social{float: left; width: auto; line-height: 20px; padding-right: 10px}
#fb_page{margin-top: 30px}
#fb_like{position: absolute; top: 20px; right: 20px; width: 400px}

#search_results li{margin: 0; padding: 15px 10px; border-bottom: 1px dotted #eee}
#search_results li strong{font-size: 1.2em}
#search_results li:hover{background: #f8f8f8; cursor: pointer}
#search_results{margin: 0; padding: 0; list-style: none}

#search_box{height: 48px;position: absolute;top: 26px;right: 24px; width: auto }
#search_box input{border: 1px solid #ccc;display: block; background: #fefefe; height: 37px; padding: 0 46px 0 6px; width: 190px; font-size: 16px; margin:0; box-shadow: 0 0 4px #ccc;}
#search_msg{font-size: 13px; color: #d33; display: none; padding-left: 10px}

#search_btn{width: 40px; height: 38px; border: none; display: block; position: absolute; top: 0; right: 0; background-color: #444; cursor: pointer}
#search_btn img{width: 24px; height: 24px;line-height:0; padding:0; margin: 0}

#breadcrumbs{font-size: 0.85em; color: #999; font-style: italic; z-index: 1; position: relative; margin: 1em 2% -1.5em 2%}
#breadcrumbs a{color: inherit}


@media screen and (max-width: 1600px){
	.slide{font-size: 17px}
}

@media screen and (max-width: 1280px){
	.slide{font-size: 16px}
}

@media screen and (max-width: 1000px) {
	#slider_nav,#slide_next,#slide_prev{display: none}
	.slide{font-size: 1.6vw}
	#slider{padding-top: 0}
	#slogan{display: none}
}


@media screen and (max-width: 800px) {
	.full{width: 47%; margin-right: 6%}
	.image_title{display: none}
	.grid3_1{clear: none}
	.grid3_3{margin-right: 0}
	.intro_image{width: 30%}
	.intro_readmore{text-align: right}
	.grid2_1{clear: left}
	.grid2_2{margin-right: 0}
	.offer{float: none; width: 100%;margin: 0 auto 25px auto}

#menu_icon{display:block; top: 40px}
	.header_menu_wrapper{height: auto;}
	.header_menu{display: none;top: 0; position: relative;background: #fff}
	.header_menu ul{float: none}
	.header_menu li,.header_menu li.last{float: none; background: #eee; width: 100%;border-top: 1px solid #ccc;}
	.header_menu li a{ font-size: 18px; line-height: 3em; text-align: center; padding: 0; margin: 0; color: #666; border-radius: none}
	.header_menu li a:hover{color: inherit}
}

@media screen and (max-width: 700px) {
	#footer{font-size: 0.8em}
	#breadcrumbs{display: none}
	.full{width: 90%; margin:auto; max-width: 520px}
	
	
	.slide_desc_readmore{font-size: 1.75em}
	
	
	#search_box{display: none}
	#content_main,#content,#left_panel,#right_panel{width: 90%; padding: 0 5% 2em 5%; clear: both}
	
	#right_panel{background: #f8f8f8; border-top: 1px solid #eee}
	#cookie_msg{background: #eee}
	
	.cc_gallery li{float: left;width: 30%;margin: 0 3% 3% 0;min-width: 120px;}
	.cc_gallery .hide{display: block}

	.content .trackPhone{color: #fff; background: #e11; display: inline-block; padding: 0.5em 1em}
	.content .trackPhone::before{content: "\2706\0000a0"}

	.contactPhone{font-weight: bold; font-size: 18px}

	h1{font-size: 1.5em; background: none; padding: 0; margin: 1em 0 0.5em 0}
	h2{font-size: 1.35em}
	h3{font-size: 1.2em}
	
	
	.c_head,  #right_panel h3, #Formularz{background: url(/img/sprite.png) no-repeat 0 -70px}
	.news_header{background: url(/img/sprite.png) no-repeat 0 -65px}


        
}

@media screen and (max-width: 600px) {
	
	#ctaTop .hide1{display: none}

}

@media screen and (max-width: 520px) {
       .intro_image{width: 100%; float: none; margin: auto}
       .intro_readmore{text-align: center; margin-left: auto}
}
@media screen and (max-width: 480px) {
	
	#empty_wrapper{height: 0}
	#header_wrapper{position: relative}
	#ctaTop{display: none}
	#menu_icon{position: fixed; top: 10px}
	.cc_gallery li{float: left; width: 45%; margin: 0 5% 5% 0; min-width: 100px}
	.im_left_wrapper, .im_right_wrapper{float: none; width: 100%;margin: 0}

	.image{width: 47%; margin-right: 6%}
	.imgrid3_3{margin-right: 6%}

	.imgrid2_1{clear: left}
	.imgrid2_2{margin-right: 0}
	
}