header {position:absolute; top:0; left:0; width:100%; height:120px; background:rgba(126, 55, 67, 0.9); z-index:99; transition-property:height, color; -webkit-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.6); -moz-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.6); box-shadow:0px 0px 10px 0px rgba(0,0,0,0.6);}
header.slidingHeader {position:fixed; top:-30px; left:0; height:80px; background:rgba(126, 55, 67,0.7); backdrop-filter:blur(5px);}
#header {float:left; position:relative;}
.slidingHeader #header {height:50px;}
#logo {position:absolute; left:0; width:auto; z-index:2;}
#logo img, #logo svg {width:100%; height:100%;}
#logo .logoB {fill:#FFF;}
#logo .logoT {fill:#EF9C20;}
#logo .logoL {fill:#C49989;}
.slidingHeader #logo {top:5px; height:40px;}

.showMenuBox {position:absolute; top:18px; left:20px; width:30px; height:24px;}

#topLine {position:absolute; background:#591F29; top:0; left:0; width:100%; height:30px; color:#FFF;}
#headerContact {float:left; height:30px; line-height:30px; font-size:14px; position:relative; white-space:nowrap; overflow:hidden;}
#headerContactCall {margin-right:40px;}
#headerContact a i {margin-right:6px;}
#headerContact a {color:#FFF;}
#headerContact a:hover {color:#EF9C20;}

#headerInfo {display:none;}

#headerSocial {float:right; height:30px; text-align:center; display:flex; align-items:center;}
#headerPF {float:left; height:30px; line-height:30px;}
#headerPF a {color:#FFF;}
#headerPF a:hover {color:#EF9C20;}
.socialLink {width:22px; height:22px; font-size:12px; line-height:20px; margin-right:8px;}

.showMenu {background:rgba(89, 31, 41, 0.75);}

.languages {position:absolute; margin:0; display:flex; justify-content:center; align-items:center; z-index:2; cursor:pointer;}
.languageHolder {float:left; width:24px; height:24px; margin:0; overflow:hidden; position:relative; z-index:2;}
.languageMenu {position:absolute; background:rgba(255,255,255,0.9); top:50px; left:0; width:40px; display:none; padding:5px 8px; webkit-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5); box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5); z-index:1045;}
.languageMenu .languageHolder {margin:4px 0 6px;}

main, footer {float:left; width:100%;}
main {min-height:110vh;}

h1, h2, h3, h4, h5, h6 {font-size:32px; margin:5px 0 10px;}

.formInput, .formSelect, .formRadio, .formInputW, .formCheckbox {float:left; width:100%; position:relative; margin:0 0 20px;}
.formInput {background:#FFF; border:1px solid #909090; padding:10px 0;}
.propFormRow .formInput {margin:0 0 8px;}
.formSelect {padding:0;}
.formSelect .ui-selectmenu-button {width:100% !important; border-top:none; border-left:1px solid #909090; border-right:1px solid #909090; border-bottom:1px solid #909090; padding:18px 14px; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;}
.twoBox .formInput, .threeBox .formInput, .fourBox .formInput {background:#FFF;}
.formInputHalf {width:49%;}
.formInputHalfL, .propFormInputHalfL {margin-right:2%;}
.formInput input, .formInput textarea, .formRadio input {width:100%; font-size:20px; color:#333; background:transparent; border:none; padding:0 10px; margin:0;}
.formInput input, .formRadio input {height:35px; line-height:35px;}
.formInputT input {width:calc(100% - 30px);}
.formRadio input[type="radio"] {float:left; width:20px; margin-right:10px; cursor:pointer;}
.radioLabel {float:left; width:calc(100% - 30px); line-height:35px; cursor:pointer;}
.radioLabel img {vertical-align:middle;}
.formInput.formError {border-color:#BB0003;}
.formInput textarea {height:187px; font-family:"Roboto", Arial, Verdana; resize:none;}
textarea.propertyAddress {height:112px;}
.formLabel {position:absolute; top:0; left:0; right:0; width:100%; height:16px; font-size:12px; display:flex; flex-flow:row nowrap;}
.formLabel::before, .formLabel::after {content: ""; background:#909090; display:inline-block; height:1px; top:0; width:7px;} 
.formError .formLabel::before, .formError .formLabel::after {background:#BB0003;}
.formLabel::after {flex:1 1 auto;}
.formLabel {line-height:16px !important;}
.formInput label, .formSelect label, .propertyContactInput label {position:absolute; color:#909090; left:5px; padding:0 5px; pointer-events:none; transition-duration:0.5s;}
.formInput label, .formSelect.emptyVal label {top:16px; font-size:18px;}
#bookingForm label {font-size:14px;}
.propertyContactInput label {top:9px;}
.formInput label, .propertyContactInput label {background:transparent;}
.formSelect.emptyVal label {background:#FFF; width:calc(100% - 30px);}
.formSelect.fiDark.emptyVal label {background:#FDFDFD;}
.formInput input:focus ~ label, .formInput textarea:focus ~ label, .formInput input:not(:placeholder-shown) ~ label, .formInput textarea:valid ~ label, .formSelect select ~ label, .propertyContactInput input:focus ~ label, .propertyContactInput textarea:focus ~ label, .propertyContactInput input:not(:placeholder-shown) ~ label, .propertyContactInput textarea:valid ~ label, #bookingForm input:focus ~ label, 
#bookingForm input:not(:placeholder-shown) ~ label {background:rgb(255,255,255); top:-10px; font-size:12px;}
.formInput.fiDark input:focus ~ label, .formInput.fiDark textarea:focus ~ label, .formInput.fiDark input:not(:placeholder-shown) ~ label, .formInput.fiDark textarea:valid ~ label, .formSelect.fiDark select ~ label {background:rgb(255,255,255); border-radius:3px 3px 0 0;}
.formLabel label {position:relative; top:-8px; color:#909090; padding:0 5px;}
.formLabel label span {color:#BB0003; margin-left:5px;}
.formInput input:focus, .formInput textarea:focus, #subEmail:focus, .selectInput:focus, .bFormInpW input:focus, .bFormInpW textarea:focus {outline:none !important;}

.formCheckbox {font-size:0.8em; text-align:left;}

.contactSubmit {float:left; width:100%; margin:15px 0; text-align:center;}
#loginContinue, .submitButton {background:#EF9C20; height:40px; line-height:36px; font-family:"Roboto", Arial, Verdana; font-weight:600; text-align:center; color:#FFF; padding:0 10px; border:1px solid rgba(0, 0, 0, 0.2); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; transition-duration:0.5s; cursor:pointer;}
#loginContinue {display:inline-block;}
#loginContinue:hover, .submitButton:hover {background:#977E34; color:#FFF; }
.submitButton:disabled {opacity:0.4; cursor:default !important;}

.formInput input:required ~ label:after, .formInput textarea:required ~ label:after, .formInputFull textarea:required ~ label:after, .propertyContactInput input:required ~ label:after {content:"*"; color:#BB0003; margin-left:3px;}

.formInput input:focus, .reserveInput input:focus, .formInput textarea:focus, .reserveInput textarea:focus, #homeSearch input:focus, #homeSearch select:focus {outline:none !important;}

.contactRow {display:flex;}
.contactCols {display:flex; flex-direction:column; padding-top:5px;}
#captchaVerification {float:left; background:#FFF; width:calc(100% - 2px); border:1px solid #A6A6A6; padding:10px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px;}
.imgCaptcha {background:none; width:200px; font-size:14px; margin:0 !important;}
.imgCaptcha h1 {margin:0 !important;}
#captchaVerification iframe {float:left;}
input.captchaResponse {clear:none !important;}

#whatsApp {position:fixed; background:rgba(235, 235, 235, 0.6); border:1px solid rgba(235, 235, 235, 0.4); transition-duration:0.8s; -webkit-box-shadow:-2px 2px 5px 0px rgba(117,117,117,0.8); -moz-box-shadow:-2px 2px 5px 0px rgba(117,117,117,0.8); box-shadow:-2px 2px 5px 0px rgba(117,117,117,0.8); overflow:hidden; z-index:99990; backdrop-filter:blur(5px);}
#whatsApp:hover {background:rgba(235, 235, 235, 0.95); border:1px solid #FFF;}
#whatsAppP {position:absolute; background:#FFF; width:54px; height:54px; top:5px; left:5px; webkit-box-shadow:0 0 0 0 rgba(255, 255, 255, 1); -moz-box-shadow:0 0 0 0 rgba(255, 255, 255, 1); box-shadow:0 0 0 0 rgba(255, 255, 255, 1); border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; z-index:-1;}
.waLoaded #whatsAppP {animation:pulse-white 2s infinite;}

footer {background:#7E3743; min-height:100px; color:#FFF; border-top:1px solid #591F29;}
#flContainer, #footerMenuContainer, .footerMenu {float:left;}
#footerLogo {height:auto;}
#footerLogo .logoB {fill:#FFF;}
#footerLogo .logoT {fill:#EF9C20;}
#footerLogo .logoL {fill:#C49989;}
.footerSocial {float:left; width:100%; height:30px; text-align:center; margin:15px 0 0;}
.footerSocial .socialLink {margin-top:0;}

.footerMenu {text-align:center; padding:0 20px;}
.footerMenu h6 {color:#FFF; font-size:24px; margin:0 0 10px;}
.footerMenu ul {float:left; width:100%; list-style:none; padding:0; margin:0 0 5px;}
.footerMenu p {color:#FFF; font-weight:600; margin:15px 0 5px;}
.footerMenu li {color:#FFF; margin:0 0 5px; font-size:14px; font-weight:300; padding:0;}
.footerMenu li.addressLI {margin-top:15px;}
.footerMenu i {margin-right:8px;}
.ddfMenu {float:left; width:100%; text-align:left; list-style:none; padding:0 0 0 25px !important;}
.ddfMenu li {font-weight:400 !important; padding:0 !important; margin:5px 0 0 !important; display:block !important;}
.telLang {width:18px; height:18px; margin-right:2px; overflow:hidden; position:relative; display:inline-block; vertical-align:middle;}
.telLang img {width:auto; height:18px; position:absolute;}
.telLang img.enLang {left:0;}
.telLang img.esLang {left:-19px;}
#footerMenuContainer a {color:#FFF; transition-duration:0.5s; cursor:pointer;}

#footerBottom {float:left; background:#591F29; width:100%;}
#footerLeft, #footerRight {float:left; height:40px; line-height:40px; font-size:10px;}
#footerRight {text-align:right;}
#footerLeft a, #footerRight a {color:#FFF;}
#footerMenuContainer a:hover, #footerLeft a:hover, #footerRight a:hover {color:#EF9C20; }

@media screen and (min-width: 1600px) {
	#header, #tlContainer, #homeGalleryOverlay, #mainContent, .container, #footer, #pageGalleryOverlay, #propertyGalleryOverlay {width:75%;}
	#header, header.slidingHeader #header {margin:30px 12.5% 0;}
	#tlContainer, #mainContent, .container, #footer {margin:0 12.5%;}
	#homeGalleryOverlay, #pageGalleryOverlay, #propertyGalleryOverlay {left:12.5%;}
}
@media only screen and (min-width: 1000px) and (max-width: 1599px) {
	#header, #tlContainer, #homeGalleryOverlay, #mainContent, .container, #footer, #pageGalleryOverlay, #propertyGalleryOverlay {width:90%;}
	#header, header.slidingHeader #header {margin:30px 5% 0;}
	#tlContainer, #mainContent, .container, #footer {margin:0 5%;}
}
@media screen and (min-width: 1550px) {
	#propertyCharacteristics ul {columns:4;}
}
@media screen and (min-width: 1320px) and (max-width: 1549px) {
	#propertyCharacteristics ul {columns:3;}
}
@media screen and (min-width: 1320px) {
	#mainPhotoOverlay {font-size:60px;}
	#propertyEnergy {width:400px; margin:0 0 15px 30px;}
}
@media screen and (max-width: 1319px) {
	#propertyEnergy {width:100%; margin:0 0 15px;}
}
@media screen and (min-width: 1300px) {
	.propListContainer, .propListSRContainer {width:calc(33% - 30px);}
}
@media screen and (min-width: 1171px) {
	#pageGalleryOverlay h1, #propertyGalleryOverlay h1 {font-size:40px; line-height:40px;}
	#propertyPrice, #projectPrice {font-size:60px; line-height:60px;}
}
@media screen and (max-width: 1170px) {
	#pageGalleryOverlay h1, #propertyGalleryOverlay h1 {font-size:36px; line-height:36px;}
	#propertyPrice, #projectPrice {font-size:40px; line-height:40px;}
}
@media screen and (min-width: 768px) and (max-width: 1319px) {
	#propertyCharacteristics ul {columns:2;}
	#mainPhotoOverlay {font-size:40px;}
}
@media screen and (min-width: 768px) and (max-width: 1299px) {
	.propListContainer, .propListSRContainer {width:calc(50% - 30px);}
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
	.galleryPhoto {width:33.3333%;}

	#searchContainer {width:calc(100% - 240px);}
	#searchFilterContainer {width:200px;}
	.projectListC {width:50%;}
}
@media screen and (min-width: 1800px) {
	#mainMenu {font-size:16px;}
	#mainMenu a {margin:0 12px;}
}
@media only screen and (min-width: 1600px) and (max-width: 1799px) {
	#mainMenu {font-size:14px;}
	#mainMenu a {margin:0 8px;}
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
	#mainMenu {font-size:14px;}
	#mainMenu a {margin:0 12px;}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	#mainMenu {font-size:12px;}
	#mainMenu a {margin:0 8px;}
}
@media only screen and (min-width: 1000px) and (max-width: 1199px) {
	#homeGalleryOverlay {left:5%;}
	#mainMenu {font-size: 10px;}
	#mainMenu a {margin:0 4px;}
}
@media only screen and (min-width: 1000px) and (max-width: 1599px) {
	#header, #tlContainer, #homeGalleryOverlay, #mainContent, .container, #footer, #pageGalleryOverlay, #propertyGalleryOverlay {width:90%;}
	#header, header.slidingHeader #header {margin:30px 5% 0;}
	#tlContainer, #mainContent, .container, #footer {margin:0 5%;}
	#homeGalleryOverlay {left:5%;}
}
@media only screen and (min-width: 1000px) {
	#header {height:92px;}
	#logo {top:8px; height:70px;}
	#headerSocial {margin-right:50px;}

	.showMenu {display:none;}
	nav {float:right; width:calc(100% - 278px); height:60px; margin:16px 0 16px 40px;}
	.slidingHeader nav {height:40px; margin:4px 0 0 40px;}
	#mainMenu {float:right; width:100%; min-height:60px; list-style:none; text-align:center; padding:0; margin:0 auto; position:relative;}
	#mainMenu ul {text-align:center; list-style:none; padding:0; margin:0;}
	#topMenu {float:right;}
	#mainMenu li {float:left; height:60px; list-style:none; display:inline-block; position:relative; padding:0; margin:0; cursor:pointer;}
	.slidingHeader #mainMenu, .slidingHeader #mainMenu li, .slidingHeader #mainMenu a {height:40px; min-height:40px;}
	#mainMenu li:last-child {margin-right:0 !important;}
	#mainMenu a {float:left; height:60px; line-height:58px; color:#FFF; text-align:center; position:relative;}
	.slidingHeader #mainMenu a {line-height:38px; font-size:0.95em;;}
	#mainMenu a:hover, #mainMenu a.selectedPage {color:#EF9C20;}
	#mainMenu ul.ddMenu {height:auto;}
	.ddMenu {left:50%; top:calc(100% + 8px); min-width:250px; background:rgba(126, 55, 67, 0.95); margin:0 0 0 -125px !important; webkit-box-shadow:1px 1px 3px rgba(51, 51, 51, 0.15); -moz-box-shadow:1px 1px 3px rgba(51, 51, 51, 0.15); box-shadow:1px 1px 3px rgba(51, 51, 51, 0.15); transition-duration:0.5s; transition-property:top;}
	.ddMenu a {width:calc(100% - 2px) !important; color:#FFF !important; margin:0 !important; text-shadow:none !important;}
	.ddMenu a:hover, .ddMenu a.selectedPage {color:#EF9C20 !important; text-shadow:none !important;}

	.languages {top:-46px; right:0; height:30px;}

	#flContainer {width:250px; margin-bottom:34px;}
	#footerMenuContainer {width:calc(100% - 290px); margin-left:40px;}
	.footerMenu {width:50%; margin:34px 0 20px;}
	#footerLogo {float:left; width:100%; margin:34px 0 0;}
}
@media only screen and (max-width: 999px) {
	#header, #tlContainer, #homeGalleryOverlay, #mainContent, .container, #footer, #pageGalleryOverlay, #propertyGalleryOverlay {width:96%;}
	#header, header.slidingHeader #header {margin:30px 2% 0;}
	#tlContainer, #mainContent, .container, #footer {margin:0 2%;}
	header {height:95px;}
	header.slidingHeader {height:80px;}
	#header {height:65px;}
	.slidingHeader #header {height:50px;}
	#tlContainer {width:98%; margin:0 1%;}
	#logo {top:7.55px; height:50px;}
	.slidingHeader nav {height:50px;}
	.slidingHeader .showMenuBox {top:11px;}
	nav {width:65px; height:65px;}
	.slidingHeader .showMenu {width:50px; height:50px;}
	.slidingHeader .showMenuBox {top:7px; left:10px;}

	#flContainer, #footerMenuContainer, .footerMenu {width:100%;}
	#flContainer, .footerMenu {margin-bottom:30px;}
	.footerMenu, .ddfMenu {text-align:center;}
	#footerLogo {width:150px; margin:30px auto 0;}
}
@media screen and (min-width: 768px) {
	#headerContact {width:calc(100% - 200px);}

	.formInput50 {width:49%;}
	.formInput50:nth-child(2) {margin:0 2% 20px 0;}
	.contactRow {flex-direction:row;}
	.contactCols {width:50%;}
	.contactCols:first-child, .popupForm .contactCols:nth-child(2) {padding-right:30px;}

	#whatsApp {right:-100px; top:calc(50vh - 33px); width:70px; height:66px; padding:5px 8px 5px 5px; border-right:none !important; border-radius:6px 0 0 6px; -moz-border-radius:6px 0 0 6px; -webkit-border-radius:6px 0 0 6px;}
	#whatsApp.waLoaded {right:0;}
}
@media only screen and (max-width: 767px) {
	#headerSocial {float:left;}
	#headerContactE, .languageTitle {display:none;}
	#headerContact {font-size:12px; margin-right:30px;}
	#headerContactCall, #headerPF {margin-right:15px;}
	.socialLink {margin-right:14px;}

	#whatsApp {left:10px; bottom:-200px; width:66px; height:67px; padding:5px 5px 8px; border-bottom:none !important; border-radius:6px 6px 0 0; -moz-border-radius:6px 6px 0 0; -webkit-border-radius:6px 6px 0 0;}
	#whatsApp.waLoaded {bottom:0;}
	#whatsApp.waLoaded.propertyWA {bottom:56px;}
	#whatsApp.waLoaded.propertyLWA {bottom:80px;}
}
@media only screen and (min-width: 606px) and (max-width: 767px) {
	.propListContainer, .propListSRContainer {width:calc(50% - 30px);}
}
@media only screen and (max-width: 605px) {
	.propListContainer, .propListSRContainer {width:calc(100% - 30px);}
}