:root {
	--color1: hsl(141, 33%, 18%);/*ciemnozielony;rgb(31, 61, 41);#1f3d29*/
	--color2: hsl(141, 33%, 30%);/*średnio zielony;#336645;rgb(51, 102, 69);*/
	--color3: hsl(211, 43.8%, 60.2%);/*niebieski*/
	--color4: hsl(31.7, 43.8%, 60.2%);/*beżowy*/
	--color5: hsl(34, 50%, 30%);/*beżowy ciemniejszy*/
	--color6: hsl(34, 100%, 13%);/*brązowy*/
	--color7: hsl(61.3, 43.8%, 60.2%);/*jasnozielony*/
	--color8: hsl(61.3, 43.8%, 88.2%);/*bardzo jasnozielony*/
}	
html{
	font-size:16px;
}	
body{
	margin:0;
	padding:0;
	color:#1A1A1A;
	font-family: 'Lato', sans-serif;
	line-height:150%;
	background-attachment:fixed;
}	
.balancer{
	width:90%;
	margin:0 auto;
}

.balancer.additionalMarginTop{
	margin-top:150px;
}	
.balancerWider{
	width:90%;
	margin-left:5%;
	margin-right:5%; 
}	
header{
	margin-top:0px;
	overflow:hidden;
	height:100%;
	position:relative;
}
header #overlay{
	position:absolute;
	top:0px;
	width:100%;
	height:100%;
	background:rgba(0,0,0, 0.4);
	z-index:10;
}		
header img{
	max-height:100vh;
}
header .opis{
	display:flex;
	flex-direction:column;
	color:var(--color8);
	justify-content:center;
	position:absolute;
	bottom:10%;
	height:120px;
	width:90%;
	margin-left:5%;
	margin-right:5%;
	box-sizing:border-box;
	-moz-user-select: none; /* nie pozwól na zaznaczenia */
	user-select: none; /* nie pozwól na zaznaczenia */
	z-index:97;
    }
header .opis h1{
	font-family: "Playfair Display", serif;	
	text-align:left;
	letter-spacing:1px;
	opacity:1;
	margin-bottom:5px;
	font-size:1.2rem;
	line-height:160%;
	text-align:center;
}	
.title1,.title2,.title3,.title4{
	opacity:0;
	position:absolute;
	font-size:0.9rem;
	letter-spacing:1px;
	text-align:center;
	line-height:160%;
	
}	
.title1 {
	animation: 17.2s slideDown 0.1s infinite;
}	
.title2 {
	animation: 17.2s slideDown 4.7s infinite;
}	 
.title3 {
	animation: 17.2s slideDown 9.2s infinite;
}	  
.title4 {
	animation: 17.2s slideDown 13.4s infinite;
}	

  
h1{
	font-size:1.4rem;
	margin-bottom:40px;
	text-align:center;
	line-height:200%;
	font-family: "Playfair Display", serif;
}	

h1#homeTitle{
	margin-bottom:20px;	
	color: var(--color2);
	font-family: "Playfair Display", serif;		
}	

h3{
    font-family: "Playfair Display", serif;
	margin-top:0px;
}	


#intro{
	padding-bottom:20px;	
}	
.rslides,.rslides1, .rslides2, .rslides3, .rslides4, .rslides5 {
	position: relative;
	list-style: none;
	overflow: hidden;
	width: 100%;
	padding: 0;
	margin: 0;

}
.rslides li,.rslides1 li, .rslides2 li, .rslides3 li, .rslides4 li, .rslides5 li{
	-webkit-backface-visibility: hidden;
	position: absolute;
	display: none;
	width: 100%;
	left: 0;
	top: 0;
}
.rslides li:first-child,.rslides1 li:first-child, .rslides2 li:first-child, .rslides3 li:first-child, .rslides4 li:first-child, .rslides5 li:first-child {
	position: relative;
	display: block;
	float: left;
}
.rslides img,.rslides1 img, .rslides2 img, .rslides3 img, .rslides4 img, .rslides5 img {
	display: block;
	height: auto;
	float: left;
	width: 100%;
	border: 0;
} 
.centered-btns_nav {
	z-index:99;
	position: absolute;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	top: 50%;
	left: 0;
	opacity: 0.3;
	text-indent: -9999px;
	overflow: hidden;
	text-decoration: none;
	height: 61px;
	width: 38px;
	background: transparent url("themes.gif") no-repeat left top;
	margin-top: -45px;
}
.centered-btns_nav:active {
	opacity: 1.0;
}
.centered-btns_nav.next {
	left: auto;
	background-position: right top;
	right: 0;
} 
#apartments{
	background:var(--color1);
	padding-top:20px;
	padding-bottom:10px;
}
.apartment{
	margin-bottom:30px;
	margin-top:15px;
	background:white;
	padding:25px;
	box-sizing:border-box;
	width:100%;
	user-select: none;	
	border:1px solid var(--color1);
	
}		
.apartmentImg{
	width:100%;
	display:block;
	margin-left:auto;
	margin-right:auto;
	box-sizing:border-box;
	position:relative;
}

.unavailable{
	position:absolute;
	bottom:0px;
	width:100%;
	z-index:3;
	
}	
.unavailable p{
	text-align:center;
	color:#f99141;
	font-weight:bold;
	font-size:20px;
	padding:15px;	
}	


.apartmentDescription{
	width:100%;
	display:block;
	position:relative;
	box-sizing:border-box;
	padding-top:0px;

}
.apartmentDescription h2{
	font-family: "Playfair Display", serif;		
	font-size:1.2rem;
	margin-bottom:0.1rem;
	color:var(--color1);

}	
.apartmentDescription h3{
	font-family: "Playfair Display", serif;
	margin-top:0.6rem;
	margin-bottom:0.7rem;
	color:var(--color2);
	line-height:160%;
}	
.apartmentDescription ul{
	padding-left:0px;
	display:inline;
	margin-top:20px;	
	display:block;
}
.apartmentDescription ul li{
	display:inline;
	margin-right:10px;
}	
.apartmentDescription ul li img{
	width:25px;
}	

.apartmentPrice{
	text-align:center;
	
	
}	
.apartmentPrice div.price{
	display:none;
}	

.apartmentPrice span{
	color:var(--color2);
	display:none;
}	

a.fullOffer{
	width:100%;
	text-decoration:none;
	text-align:center;
	border:none;
	background:var(--color5);
	display:block;
	box-sizing:border-box;
	color:var(--color8);
	font-size:0.7rem;
	margin-top:25px;
	height:50px;
	line-height:50px;
}	
a.fullOffer:hover{
	background:var(--color4);
}	
a.checkAvail{
	width:85px;
	text-decoration:none;
	text-align:center;
	border:none;
	background:var(--color4);
	display:block;
	box-sizing:border-box;
	color:var(--color1);
	font-size:0.5rem;
	margin:10px;
	height:50px;
	line-height: 18px;
    padding: 7px;

}	
hr.shortLine{
	border-color:var(--color4);
	opacity:0.3;
}	

.centralContent{
	font-size:0.8rem;	
}	

#benefitsWrapper{
	position:relative;
}	

.itemBenefits img{
	padding-right:0px;
}	

#content-icons{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	position:relative;
	margin-bottom:-30px;
	margin-top:25px;
	margin-left:5%;
	margin-right:5%;
}	
.item-icon{
	width:100%;
	margin:0px;
	border:1px solid #ccc;
	margin-bottom:60px;
	position:relative;
	text-align:center;
	font-size:16px;
	padding:15px;
	padding-bottom:40px;
	box-sizing:border-box;
	background:#FCFCFC;
}	

.item-icon h2{
	text-align:center;
	padding-top:0px;
	margin-bottom:0px;
	margin-top:10px;
	padding-bottom:0px;
	font-weight:normal;
	font-size:22px;
	font-family: 'Lato', 'Arial', sans-serif;
	color:var(--color5);
	line-height:100%;
}	
.item-icon img{
	position:absolute;
	top:calc(100% - 40px);
	left:calc(50% - 40px);	
	width:80px;
	height:80px;
}
.benefits4LargeScreen{
	display:none;	
}
#benefitsWrapper div.balancer{
	color:var(--color8);
	position:relative;
	z-index:11;
}	
div.centralContent{
	text-align:center;
	display:block;
	font-size:1rem;
}	
div.centralContent h2{
	font-family: "Playfair Display", serif;	
	font-size:1.5rem;
	margin-top:2.5rem;
	margin-bottom:2rem;
	color:var(--color4);
}	
div.centralContent h3{
	font-weight:normal;
	padding-bottom:0.7rem;
	line-height:180%;
}	
section#locations h2{
	font-family: "Playfair Display", serif;	
	padding-top:1rem;
    font-size: 1.5rem;	
	color:var(--color2);
}	
div.contentLocations{
	width:111%;
	box-sizing:border-box;
	margin-left:-6%;
	display:flex;
	flex-direction:column;
	user-select: none;
	background:var(--color1);
	padding-top:25px;
}	
div.cardLocations1,div.cardLocations2,div.cardLocations3,div.cardLocations4{
	width:90%;
	margin-left:auto;
	margin-right:auto;
	height:auto;
	margin-bottom:30px;
	padding:25px;
	box-sizing:border-box;
	border:1px solid var(--color1);
	background:white;
}	
div.cardLocations3{
	margin-top:-25px;
}	
img.imgLocations{
	width:100%;
	height:auto;
	box-sizing:border-box;
}
div.slidedDescription1,div.slidedDescription2,div.slidedDescription3,div.slidedDescription4{
	background:white;
	margin-top:10px;
}	
div.nameLocations{
	font-family: "Playfair Display", serif;	
    background:white;
	width:100%;
	height:60px;
	line-height:60px;
	font-size:1rem;
	text-align:center;
	box-sizing:border-box;
	display:block;
	margin-top:-6px;
	border-left:1px solid var(--color4);
	border-right:1px solid var(--color4);
	border-bottom:1px solid var(--color4);
	color:var(--color1);	
}	
section#contactInformation{
	margin-bottom:40px;
}	
section#contactInformation h3{
	font-family: "Playfair Display", serif;	
	margin-top:0px;
	margin-bottom:7px;
	color:var(--color2);
	font-size:1.2rem;
}	
section#contactInformation span{
	display:block;
}	

section#contact form{
	background:var(--color8);
	padding:50px;
	padding-bottom:40px;

}

section#contact .formPart{
	margin-bottom:30px;
}
section#contact input{
	width:100%;
	font-size:0.8rem;	
	margin-bottom:0px;
	line-height:240%;
	box-sizing:border-box;
	padding-left:20px;
	padding-right:20px;	
	outline:none;
	border:1px solid var(--color5);
	color:var(--color6);
}	

section#contact input::-webkit-outer-spin-button,
section#contact input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

section#contact input::placeholder{
	color:var(--color4);
}	

section#contact span{
	font-size:0.8rem;
}	
section#contact textarea{
	width:100%;
	height:200px;
	font-size:0.8rem;	
	line-height:240%;
	font-family: 'Lato', sans-serif!important;
	padding-left:20px;
	padding-right:20px;

	box-sizing:border-box;
	outline:none;
	border:1px solid var(--color5);	
	color:var(--color6);
}
section#contact textarea::placeholder{
	color:var(--color4);
}	
section#contact button{
	width:100%;
	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	background:var(--color6);
	border:1px solid var(--color5);
	color:var(--color8);
	font-size:0.8rem;
	line-height:240%;
	cursor:pointer;
}	
section#contact button:hover{
	background:var(--color5);	
}	
gmp-map {
    height: 600px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}
.gallery{
	max-width:100%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	margin-bottom:10px;
}
#imageOffer {	
	width:100%;
}
#imageOfferForSmallAndLarge{
	width:100%;
}	
#imageOfferForMedium{
	display:none;
}	
#descriptionOffer h3{
	margin-top:20px;
	
}










#priceTable{
	width:100%;	
}	
#priceTable span{
	font-size:0.7rem;	
	color:#999;
	line-height:120%;
}	
#priceTableInfo{
	margin-top:10px;	
	margin-bottom:10px;	
}	
#priceTable table,th,td {
	border:1px solid var(--color1);
	text-align:center;
	border-collapse:collapse;
	
}
#priceTable th{
	background-color:var(--color1);
	color:#ddd;
	font-weight:bold;
	letter-spacing:1px;
	
}
#priceTable #seasons td{
	font-size:0.8rem;
	padding:7px;
	background:var(--color8);
	line-height:140%;
	
}	
#priceTable #dates td{
	font-size:12px;
	padding:7px;
	line-height:170%;
}	

img#divaSwimmingPool{
	margin-bottom:10px;
	max-width:100%;
}	

#latarnia{
	width:100%;	
}	

#statek{
	width:100%;
}	
#molo{
	width:100%;
}
.balancerFullScreen{
	overflow:hidden;
	margin-bottom:30px;
}	

.imageAttrForSmallAndLarge{
	max-width:100%;
}	
.descriptionAttr h2{
	margin-top:10px;
	font-size:1.1rem;
}	


@media (min-width:500px){

header .opis{
	top:65%;	
}	

header .opis h1{
	font-size:1.6rem;
}	

.title1,.title2,.title3,.title4{
	font-size:1.2rem;
	line-height:160%;
}	
}
@media (min-width:550px){
#priceTable td {

    width:300px;
}
a.checkAvail{
	margin-left:auto;
	margin-right:auto;
}	


#imageOfferForSmallAndLarge{
	display:none;
}	
#imageOfferForMedium{
	display:block;
	width:100%;
}	


}		
@media (min-width:600px){
header{
	height:500px;
}	
header img{
	min-height:500px;
}	

header .opis h1{
	font-size:1.3rem;
}	

.title1,.title2,.title3,.title4{
	font-size:1.2rem;
}	


}
@media (min-width:700px){
header{
	height:600px;
}	
header img{
	min-height:600px;
}	

header .opis h1{
	font-size:2rem;	
	line-height:130%;
	margin-top:10px;
	margin-bottom:20px;
	letter-spacing:2px;
}		

.title1,.title2,.title3,.title4{
	opacity:0;
	font-size:1.2rem;

	line-height:160%;
	letter-spacing:1px;
	width:100%;
}	
.attrPart1,.attrPart2{
	position:relative;
	display:flex;	
	overflow:hidden;	
}	

.imageAttr {	
	width:48%;
	order:1;
	margin-top:60px;
	margin-bottom:60px;
	
}
.descriptionAttr{
	width:52%;
	order:2;
	padding-left:30px;
	box-sizing:border-box;
	padding-top:60px;

}	

.imageAttr.toRight {	
	order:2;	
	padding-left:43px;
	box-sizing:border-box;
	margin-top:65px;
}
.descriptionAttr.toRight {
	order:1;
	padding-left:0px;
	padding-right:30px;
	box-sizing:border-box;
}

.descriptionAttr h2{
	margin-top:0px;
	
}
}

@media (min-width:1200px){
html{
	font-size:18px;
}	
header{
  width: 100%;
  height: calc(100% - 70px);
  position:relative;
}	
header img{
	margin-top:0px;
}	
.headerImg{
	max-height:100vh;
}	

header .opis{
	top:55%;	
	left:calc(50% - 560px);
	width:500px;
	height:250px;
	font-size:13px;	
	z-index:101;
	
}

header .opis h1{
	text-align:left;
	
}	

.title1,.title2,.title3,.title4{
	text-align:left;
}	
.balancer{
	width:1100px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}	
.balancerWider{
	width:1100px;
	margin-left:auto;
	margin-right:auto; 

}	
#intro{
	min-height:440px;
	padding:70px;
	padding-bottom:0px;
	text-align:center;
	line-height:170%;
}	
#intro h1{
	font-size:1.6rem;
	line-height:170%;
	margin-bottom:50px;
}	
#apartments{
	background:none;
}	
.apartment{
	width:1100px;
	height:345px;
	padding-top:0px;	
	margin-bottom:0px;
	margin-top:0px;
	border:none;
	padding: 30px;
	box-sizing:border-box;
}	
.apartmentImg{
	width:380px;
	float:left;	
}	
.apartmentDescription{
	float:left;	
	width:450px;
	height:300px;
	margin-top:0px;
	font-size:17px; 
	border-left:none;
	padding-left:30px;
	line-height:140%;
}
.apartmentDescription h2{
	margin-top:0px;
}	
.apartmentDescription ul{
	margin-top:20px;
}	
.apartmentPrice{
	width:160px;
	float:left;
	margin-left:45px;
	text-align:center;
	color:
}
.apartmentPrice div.price{
	display:block;
}		
.apartmentPrice span{
	line-height:100%;
	display:block;
	padding-top:18px;
	padding-bottom:40px;
}	
.price p{
	color:var(--color5);
	font-size:1.5rem;
	margin:10px;	
	font-weight:bold;
}	

.price{
	height:105px;
	border-top:3px solid var(--color7);
	border-bottom:3px solid var(--color7);
	padding-top:10px;
	padding-bottom:20px;
	font-size:0.7rem;
	color:var(--color4);
}	

.benefits4SmallScreen{
	display:none;
	
}
.benefits4LargeScreen{
	display:block;	
}



#benefits{
	width:100%;	
	height:850px;
	background-size:cover;
	background-position:center;	
	z-index:1;
}	

#overlay{
	background: linear-gradient(0deg,rgba(20, 51, 30, 1) 0%, rgba(31, 61, 41, 0.94) 30%);
	z-index:2;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
}	

#benefits h2{
	padding-top:60px;
	padding-bottom:40px;
	z-index:900;

}	
img#benefitsLogo{
	width:90px;
	position:absolute;
	top:30px;
	margin-left:-45px;
	opacity:0.3;
	z-index:10;
}	
#hub{
	width:1100px;
	height:300px;
	margin-left:auto;
	margin-right:auto;	
}
.itemBenefits{
	display:flex;
	align-items:center;	
	margin-bottom:30px;
}	
.itemBenefits img{
	width:45px;	
}
.itemBenefits span{
	margin-left:20px;
	font-size:15px;
	color:var(--color4);
}

div.centralContent{
	width:100%;
	margin:0 auto;
	z-index:10;
}	
#infoExtansion{
	position:absolute;
	top:0;
	left:0;
	z-index:999;
	width:400px;
	height:480px;
	background:rgba(0,0,0,0.75);
	padding:40px;
	box-sizing:border-box;
	margin:30px;
	font-size:20px;
	color:var(--color8);
	line-height:160%;

}


section#benefits .balancer p{
	position:relative;
	z-index:10;
}	
section#locations{
	padding-bottom:50px;
}	

div.contentLocations{
	width:100%;
	flex-direction:row;
	justify-content:space-between;
	margin-top:0px;
	margin-bottom:5px;
	margin-left:0px;
	background:none;
}


div.cardLocations1, div.cardLocations2, div.cardLocations3, div.cardLocations4 {
	width:520px;
	height:400px;
	padding:0px;
	border:none;
	position:relative;
	overflow:hidden;
	margin-bottom:-30px;
}	

div.cardLocations3{
	
	margin-top:0px;
}	

img.imgLocations{
	width:520px;
	height:300px;
	margin-bottom:0px;
	padding-bottom:0px;	
}	
div.slidedDescription1, div.slidedDescription3 {
	width:520px;
	height:300px;
	position:absolute;
	top:-10px;
	left:520px;	
	background: linear-gradient(270deg, var(--color1), var(--color2));
	opacity:0.96;
	color:#edf7ef;
	transition: 0.5s;
	transition-timing-function: ease-in-out;
	padding:35px;
	box-sizing:border-box;
	font-size:0.7rem;
	
}	

div.slidedDescription2, div.slidedDescription4{
	width:520px;
	height:300px;
	position:absolute;
	top:-10px;
	right:520px;	
	background: linear-gradient(270deg, var(--color2), var(--color1));
	opacity:0.96;
	color:#edf7ef;
	transition: 0.5s;
	transition-timing-function: ease-in-out;	
	padding:35px;
	box-sizing:border-box;
	font-size:0.7rem;
}	

div.slidedOn{
	left:0;
	

}	
div.slidedOn2{
	right:0px;
	

}	
div.nameLocations{
	width:520px;
	padding-left:20px;
	display:block;
	box-shadow: 2px 2px 12px -2px #aaa;
	margin-top:15px;
	border-top:1px solid var(--color4);

}	
section#contactInformation{
	float:left;
	width:50%;
	margin-bottom:70px;
	line-height:180%;
}	

section#contact{
	float:left;
	width:40%;	
	margin-bottom:10px;
	margin-left:10%;
	
}	


#imageOffer {	
	width:45%;
	float:left;	
}

#imageOfferForMedium{
	display:none;	
}	

#imageOfferForSmallAndLarge{
	display:block;
}	

#descriptionOffer{
	width:55%;
	float:left;		
	padding-left:50px;
	box-sizing:border-box;
}	
#descriptionOffer h3{
	margin-top:0px;
	
}

.balancerFullScreen{
	position:relative;
	width:100%;
	margin-bottom:80px;	
}	
	
.backgroundRectangle1{
	width: calc(50% + 400px);
	position:absolute;
	top:0px;
	right:0px;
	height:480px;
	background:#eeeed4;
	z-index:-1;
	opacity:0.8;	
}	

.backgroundRectangle2{
	width: calc(50% + 400px);
	position:absolute;
	top:0px;
	left:0px;
	height:480px;
	background:#eeeed4;
	z-index:-1;
	opacity:0.4;	
}	








#priceTable{
	float:left;
	width:50%;
	margin-top:10px;	
	margin-bottom:15px;	
	}
#priceTableInfo{
	float:left;	
	width:50%;
	padding-top:10px;
	text-align:center;
	margin-top:10px;
	margin-bottom:15px;	
}

#priceTable #seasons td{
	font-size:0.8rem;
	padding:7px;
	background:var(--color8);
	min-width:132px;
	line-height:140%;
}	
#priceTable #seasons td#emptyCell{
	min-width:70px;
	max-width:70px;
	width:70px!important;
}	

#priceTable #dates td{
	font-size:12px;
	padding:7px;
	line-height:170%;
}	
a.checkAvail{
	margin:10px;
}
img#divaSwimmingPool{
	max-width:1100px;
	
}	

#latarnia{
	float:right;
	width:400px;
	padding-left:5px;	
}	
#statek{
	float:right;
	width:400px;
	height:300px;
    padding-left:5px;	
}		
#molo{
	float:right;
	width:400px;
	padding-left:5px;	
}	


}
@media (min-width:1500px){
.balancerWider{
	width:1360px;
	margin-left:auto;
	margin-right:auto;

}	

header .opis{
	top:45%;	
	left:calc(50% - 780px);
	font-size:13px;	
}


	
}	
	
@keyframes slideDown {
	0% {
	  opacity:0;
	  bottom: 60px;
	}
	
	
	3% {
	  bottom: 30px;
	  opacity:1;
	}
	
	20% {
	  bottom: 30px;
	  opacity:1;		
	}
	
	25% { 
	  opacity: 0;
	  bottom: 0px;
	  
	}	
}