.grid-container{display: grid; grid-gap: 30px;  margin: 20px 0;grid-template-columns: repeat(3, 1fr)}
#gallery.grid-container{grid-template-columns: repeat(5, 1fr);grid-gap: 10px;margin: 30px 0;}
.grid-container a{color: #333; text-decoration: none}
.grid-item{justify-content: center;  align-items: center; text-align: center; position: relative}

.grid-image{width: 100%; position: relative}
.grid-title{line-height: 120%; padding-top: 5px}
.grid-title.cat{font-size: 140%}
.grid-item a{line-height: 0; display: block}
.sold{position: absolute; bottom: 7%; right: 3%; color: #fff; opacity: 0.65; font-size: 20px}

.sold_header{font-weight: bold; font-size: 3rem; color: black}
#content_image .sold{font-size: 30px}

.signature_image{float: left; width: calc(25% - 20px)}

html{font-size: 10px; background: #000}
body{font-family: 'Roboto', sans-serif; color: #333; padding:0; margin: 0; font-weight: 300; min-width: 320px; font-weight: 300}

.big{font-size: 28px; padding: 0 10px; color: #9f7d32}
b,strong{font-weight: 500}

.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}
#content,#left_panel,#right_panel{position: relative; padding-bottom: 2em}
#header_wrapper{background: #000; position: fixed; left: 0; top:0;z-index:100}
#empty_wrapper{height: 147px; background: #fff}
#outer_wrapper{overflow: hidden;background: #fff}

#content{width: 68%; padding: 0 2% 2em 2%; float: left}
#content.full{width: 90%; padding: 0 5% 2em 5%}

#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: 20px 0}
#logo img{width: 120px}

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

#map_wrapper{width: 100vw; margin-left: -50vw; left: 50%;margin-bottom: -48px; position: relative}
#map_canvas img{ max-width: none}
#map_desc{font-size: 130%; line-height: 1.3em}
#map_canvas h3{margin: 0; padding: 10px 0 0 0}

#get_direction{padding: 10px}

#footer_wrapper{border-top: 2px solid #444}
#footer{padding: 20px 0 35px 0; color: #999}
#site_footer{text-align: right; color: #999; padding: 10px 10px 0 0}
#created_by{color: #777; text-align: right; padding: 0 10px 0 0}
#created_by a{color: #777}


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


h1{font-size: 2.25em; line-height: normal; padding: 0 0 0.5em 0; margin: 0.25em 0 0.75em 0; color: #444; text-align: center; color: #000; font-weight: 300}
h1:after{content: ""; display: block; border-bottom: 2px solid #9f7d32; width: 100px; margin: 10px auto auto auto}

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; font-weight: 300}
p{margin: 1em 0;}
a{color: #9f7d32}
a img{border: none}
img{line-height: 0}
.lightbox .grid-title{display: none}

/*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: 20px 10px; display: none; cursor: pointer; height: 40px; width: 40px}

/*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}

#chlang{position: absolute; top: 10px; right: 10px}

.header_menu{position: absolute; top: 25px; right: 40px}
.header_menu ul{float: left}
.header_menu li{float: left}
.header_menu li.last{background: none}
.header_menu a{padding: 6px 10px; margin: 0 5px; color: #ccc; text-decoration: none; border-radius: 3px}
.header_menu a:hover{color: #9f7d32}
.header_menu a.active{background: #9f7d32; background: linear-gradient( #9f7d32 45%, #785f26 60%); color: #fff}
.header_menu img{vertical-align: sub}


/*formularze */
.error,.info{padding: 10px; margin: 10px 0}
.error{border: 1px solid #ee1111; background: #ffe2e2}
.info{border: 1px solid #4ba40f; background: #e2ffce}

.form{width: 100%; text-align: center}
.form input{float: left; width: 30%; margin-right: 2%; width: calc( 32% - 12px ); margin-bottom: 15px }
.form input.last{margin-right: 0}

.data_field{border: 1px solid #ccc; background: #f8f8f8; padding: 5px; color: #666; font: inherit}

.textarea{width: 90%; width: calc( 100% - 12px );  height: 100px; clear: both}
.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%; border-top: 1px dotted #eee; padding-top: 40px}
#intro0{border: none; padding-top: 20px}

.intro_image{line-height:0; margin: 5px 15px 10px 0; width: 240px; float: left; position: relative}
.intro_image img{border-bottom: 2px solid #9f7d32}

.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}

#content_image{margin: 0 30px 0 0; width: 50%; line-height: 0; text-align: center; float: left; position: relative}

/*galeria zdjęć*/

.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;  border-bottom: 2px solid #9f7d32; position: relative}
.offer_title{color: #222; margin: 0 auto; max-width: 400px; padding: 15px 0 0 0; font-size: 18px; font-weight: 500; 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: #9f7d32; border: 1px solid #9f7d32; text-decoration: none;  padding: 10px 20px; font: inherit; cursor: pointer; transition: all 0.25s ease}
.button:hover{color: #fff; background: #9f7d32}

.buttonBig{color: #fff; background: #9f7d32; font-size: 22px; padding: 10px 30px}


.link{font-size: 15px; color: #9f7d32; font-weight: 500; text-align: right; margin-right: 20px}

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


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


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


/*slider*/
#slider{width: 100%; height: auto; position: relative; overflow: hidden;background: #fff; display:none}
#slider_wrapper{width: 10000px}
.slide{float: left; position: relative;line-height:0; font-size: 18px}
.slide_img{height: auto;-webkit-filter: sepia(25%);-moz-filter: sepia(25%);-o-filter: sepia(25%);-ms-filter: sepia(25%);filter: sepia(25%)}


.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); opacity: 0.75}


.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.35em; font-size: 4em; color: #9f7d32; font-weight: 300}
.slide_desc_content{line-height: 1.4em; font-size: 2em; color: #eee; font-weight: 100}
.slide_desc_readmore{line-height: 2.5em;margin-top: 1.25em;font-size: 1.3em;}
.slide_desc_readmore a{color: #fff; background: #9f7d32; background: #9f7d32; text-decoration: none; padding: 0em 1em; display: inline-block; font-weight: 100}

.slide_desc_title>a{font: inherit; text-decoration: none}

#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: #9f7d32; 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:-50px;font-size: 100px; line-height: 100px}
#navPrev div{left:4%}
#navNext div{right:4%}
#navPrev:hover,#navNext:hover{color: #fff}

.video iframe { width: 90vw; height: 90vw; max-width: 960px; max-height: 600px; min-width: 320px; padding: 0; margin: 0;}



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

.phone{text-decoration: none}
.phone.contact{color: inherit}
.phone.contact::before{content: "tel.\0000a0"}


.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; display: none}
#cookie_msg span{color: #fff;background: #9f7d32;cursor: pointer; padding: 2px 7px; display: inline-block}



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

table{text-align: left; border-collapse: collapse; margin: 10px 0}
td{font: inherit; padding: 10px 10px}
td p{padding: 0; margin: 0}
table img{width: auto; }
thead td{font-weight: 500; background: #9f7d32; color: #fff; border-bottom: 1px dotted #eee;white-space: nowrap;}
tbody td{ border-bottom: 1px dotted #eee;}
tr:nth-child(even) {background: #fff}
tr:nth-child(odd) {background: #f8f8f8}


.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}

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


.social{float: left; width: auto; line-height: 20px; padding-right: 10px}
#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: 85px; right: 15px; width: auto }
#search_box input{border: 1px solid #ccc;display: block; background: #fefefe; height: 36px; padding: 0 46px 0 6px; width: 210px; font-size: 16px; margin:0; border-radius: 5px}
#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: #bbb; font-style: italic; z-index: 1; position: relative; margin: 1em 2%}
#breadcrumbs a{color: inherit}

.box{padding-top: 30px}
.box h4{color: #999; font-weight: 500; font-size: 20px; margin:0; padding: 0}


#plgem{float: left; padding-left: 10px}
#plgem-img{float: left; padding-right: 10px}
#plgem-text{float: left; padding-top: 7px; color: #aaa; font-weight: 500}

#myCallHandset{display: none}




@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}
	#wrapper{margin-bottom: 0}
	.sold{font-size: 2vw}
	#content_image .sold{font-size: 3vw}
}


@media screen and (max-width: 800px) {

.signature_image{float: left; width: calc(30% - 15px)}

#gallery.grid-container{grid-template-columns: repeat(4, 1fr)}
#content_image{margin: 0 20px 0 0; width: 40%; max-width: 400px}
#content_image .sold{font-size: 3vw}

	.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{width: 46%; margin: 20px 2% 35px 2%}
	td{padding: 10px 5px; font-size: 90%}


}

@media screen and (max-width: 760px) {

	



	#footer{font-size: 0.8em}
	#breadcrumbs{font-size: 0.8em}

	.slide_desc_readmore{font-size: 1.75em}



	#content,#left_panel,#right_panel{width: 90%; padding: 0 5% 2em 5%; clear: both}

	#right_panel{background: #f8f8f8; border-top: 1px solid #eee}


	.cc_gallery li{float: left;width: 30%;margin: 0 3% 3% 0;min-width: 120px;}
	.cc_gallery .hide{display: block}



	.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}


	.imgleft{width: 30%}
	.imgright{width: 30%}


	h1{font-size: 2em}
	h2{font-size: 1.35em}
	h3{font-size: 1.2em}


	.phone{display: inline-block; color: #fff; background: #9f7d32;padding: 0.25em 1em; border-radius: 4px; font-size: 22px}
	.phone::before{content: "\2706\0000a0"}
	.phone.contact{color: #fff}


}

@media screen and (max-width: 640px) {

.signature_image{float: left; width: calc(50% - 5px); text-align: center}


#chlang{top: 60px; right: 18px}
#gallery.grid-container{grid-template-columns: repeat(3, 1fr)}
.grid-container{grid-template-columns: repeat(2, 1fr); font-size: 15px; grid-gap: 15px}
#content_image{margin: 0 auto 20px 0; width: 100%; max-width: 600px; text-align: center}
table{width: 100%;}

.sold{font-size: 3vw}
#content_image .sold{font-size: 5vw; right: 8%}

#search_box{top: 13px; right: 60px}
#search_box input{width: 150px}
#menu_icon{display:block;}
	.header_menu_wrapper{height: auto;}
	.header_menu{display: none;top: 0;right: 0; width: 100%; margin: 0; position: relative; background: #fff}
	.header_menu ul{float: none}
	.header_menu li,.header_menu li.last{float: none; background: #f4f4f4; width: 100%; border-top: 1px solid #ccc; margin: 0}
	.header_menu a{font-size: 15px; font-weight: 300; line-height: 3.5em; text-align: center; padding: 0; margin: 0; color: #666; border-radius: 0}

	#empty_wrapper{height: 0}
	#header_wrapper{position: relative}
	.hide{display: none}
	#ctaTop{right: 60px; top: 20px; line-height: 26px}
	#menu_icon{position: fixed; top: 0; padding: 12px 10px}
	#logo{width: 20%; max-width: 120px; min-width: 80px; padding: 10px 0}
	#logo img{width: 100%}
}

@media screen and (max-width: 600px) {

#myCallHandset{position: fixed; bottom: 10px; left: 50%; width: auto; border-radius: 10px; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 2px #999;transform: translateX(-50%);white-space: nowrap; margin-right: -50%; z-index: 50; display: block}
#myCallHandset img{width: 30px; height: 30px; padding: 10px 2px 10px 8px; float: left}
#phoneNumber{display: inline-block; font-size: 2.2rem; line-height: 5rem; opacity: 0.95; padding-right: 1rem; text-decoration: none; color: #fff; }
.gradient{background: #9f7d32; background: linear-gradient( #9f7d32 45%, #785f26 60%); color: #fff}
#footer{padding-bottom: 75px}

#plgem,#plgem-img,#plgem-text{float: none; text-align: center}
#site_footer{text-align: center}
#created_by{text-align: center}

	#ctaTop .hide{display: none}
	h1{font-size: 1.75em}
}

@media screen and (max-width: 520px) {
       .intro_image{width: 100%; float: none; margin: auto; text-align: center; }
	.intro_title{text-align: center}
	.intro_date{display: none}
       .intro_readmore{text-align: center; margin-left: auto}
}
@media screen and (max-width: 480px) {



#search_box{position: relative; width: 90%; margin: 0 5%; top:0; left: 0}
#search_box input{width: 80%}
	#gallery.grid-container{grid-template-columns: repeat(2, 1fr)}

	.offer{float: none; width: 90%; margin: 20px auto 35px auto}
	.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}

	.imgleft,.imgright{float: none; clear: both; margin: 0 auto; width: 100%; max-width: 200px; text-align: center;}
	.box h4{text-align: center}
	#ctaTop{line-height: 20px}
	#phoneTop{font-size: 20px}

	.form input{float: none; width: 90%; margin-right: 0; width: calc( 100% - 12px ) }
}