/*
FONTS

font-family: neue-haas-grotesk-display;
font-family: civane-normal;

*/


/* VARIABLES */

:root {
  --default-font: neue-haas-grotesk-display;
  --default-font-size: 20px;
  --default-line-height: 2.5;

  --default-input-font: neue-haas-grotesk-display;
  --default-input-font-size: 20px;
  --dim-input-height: 48px;
  
  --button-input-font: neue-haas-grotesk-display;
  --button-font-size: 15px;
  --button-height: 60px;

  --col-primary: #000000;
  --col-accent: #EDEDED;
  --col-burger: #425A69;
  --col-text: #000;
  --col-page-bg: #fff;
  --col-border: #CCCCCC;
  --col-input: #000;
  --col-placeholder: #000;
  --col-input-bg: #fff;
  --col-button: #fff;
  --col-button-bg: #425A69;
  --col-link: #000;
  --col-link-hover: #000000;

  --col-error: #ff6633;
  --col-attention: #ff6633;
  --col-warning: #f5b00e;
  --col-missing: #ff6633;

  --col-primary-rgb: 66,90,105;
  --col-accent-rgb: 0, 0, 0;
  --col-button-rgb: 255, 255, 255;
  --col-link-rgb: 0,0,0;
  --col-link-hover-rgb: 0, 0, 0;
  --col-error-rgb: 255, 51, 0;
  --col-attention-rgb: 255, 51, 0;
  --col-warning-rgb: 245, 176, 14;
  --col-border-rgb: 190, 190, 190;
  --col-missing-rgb: 255, 51, 0;

  --dim-site-width: 1920px;
  --dim-default-space: 100px;

  --vh: 1vh;
}

/* theme */


/*CORE HTML*/

p { margin-bottom: 40px; font-weight: 300; color:#fff}
p a:hover { color: #aaa;}
a.underline { text-decoration: underline}

h1 {  font-size: 30px; margin: 0 auto; text-align: center; color: #000; line-height: 1.2; font-family: civane-normal; text-transform: uppercase; margin-bottom: 0px; font-weight: 300; letter-spacing: 3px;}
h2 {  font-size: 50px; margin: 0 auto; text-align: center; color: #fff; line-height: 1; font-family: civane-normal; margin-bottom: 40px; font-weight: 300;  letter-spacing: 3px; text-transform: uppercase; }

h3 {  font-size: 16px; margin: 0 auto; text-align: center; color: var(--col-primary); line-height: 1; font-family: neue-haas-grotesk-display; margin-bottom: 20px; font-weight: 600; text-transform: uppercase; }
h4 {  font-size: 16px; margin: 0 auto; text-align: center; color: var(--col-primary); line-height: 1.4; font-family: neue-haas-grotesk-display; margin-bottom: 10px; font-weight: 300; text-transform: uppercase; }

p.larger { font-size: 30px; line-height: 1.33}
p.shorter { max-width: 868; margin-left: auto; margin-right: auto}
p.shortest { max-width: 540px; margin-bottom: 20px}
p.short { max-width: 540px; margin-left: auto; margin-right: auto}

p.strong {font-size: 40px;font-family: neue-haas-grotesk-display; font-weight: 400;}
p.light { font-size: 16px; font-family: neue-haas-grotesk-display; font-weight: 300; line-height: 1.9 }
p.medium { font-size: 20px; font-weight: 300;}

/*CONTAINERS*/

html, body {background: #000}
article { padding-top: 0px; background: #000}

/*BUTTONS*/

a.btn { text-transform: uppercase; color: #fff; background: transparent; border-bottom: 1px solid #fff; line-height: 1; font-size: 25px; font-family: neue-haas-grotesk-display; display: table; margin: 20px auto 0; padding: 0px 0 3px; letter-spacing: 1px; font-weight: 600; letter-spacing: 3px}

/*HEADER AND NAV*/

header { max-width: 1920px; position: relative; top: 0; left: 0%;  z-index: 5; transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) ; padding-top: 0px; border-bottom: 1px solid #000; margin: 0 auto;}
header > div { margin: 0 auto; position: relative; display: flex; gap: 0px; justify-content: space-between; align-items: center;}
header div.logo { width: 360px; padding: 0; position: absolute; top: 36px; left: 50%; transform: translateX(-50%);}
header div.logo img { width: 100%; display: block}
header nav { display: flex; justify-content: space-between; align-items: center;padding: 0 40px; width: 100%; }

header nav > div { display: flex; gap: 70px; align-items: center;}
header nav > div a { font-size: 16px; font-weight: 500; color: #000; padding-top: 50px; padding-bottom: 30px;}
header nav > div.links-left { justify-content: flex-start;}
header nav > div.links-right { justify-content: flex-end;}


footer { padding: 0px;  max-width: 100%; margin: 0 auto; border-bottom: 1px solid #414141; padding-bottom: 35px; margin-bottom: 35px}
footer div.nav { border-top: 1px solid #414141; border-bottom: 1px solid #414141; display: flex; margin: 0 auto 25px; }
footer div.logo { width: 300px; padding: 35px 35px; border-right: 1px solid #414141; }
footer div.share { width: 212px; padding: 35px 23px; border-left: 1px solid #414141; text-align: center; color: #fff; font-size: 15px; }
footer div.share a { display: flex; gap: 20px; color: #fff; font-size: 15px; text-transform: uppercase; }
footer div.share img { width: 68px}
footer div.social { width: 138px; padding: 35px 35px; display: flex; justify-content: space-between; border-left: 1px solid #414141; }
footer div.social a { color: #fff; font-size: 20px;}
footer div.links { display: flex; justify-content: space-between; width: calc(100% - 650px); padding: 0 40px; opacity: 0}
footer div.links a { font-size: 15px; font-weight: 500; color: #fff; text-transform: uppercase; padding: 35px 0;}

footer div.disclaimer, footer div.disclaimer2 {text-align: center; margin: 0 auto; max-width: 1264px; text-align: left; padding: 0 20px;}
footer div.disclaimer2 {margin-top: 35px; }
footer div.disclaimer p, footer div.disclaimer2 p {font-size: 15px; font-family: neue-haas-grotesk-display; text-align: left; line-height: 1.33;}


/*ELEMENTS*/
.c-primary { color: var(--col-primary) !important}
.c-black { color: #000 !important}
.b-primary { background-color: var(--col-primary) !important}
.b-black { background-color: #000 !important}

/*CONTENT*/

section { max-width: 1920px; }
div.content { max-width: 1480px; text-align: center; padding: 0px 20px}
div.content p { width: 100%; max-width: 728px; text-align: center; margin-left: auto; margin-right: auto}

section.masked:after {content:""; position: absolute; display: block; width: 100%; height: 100%; bottom: 0; left: 0; z-index: 2; background: url(/img/mask.png) repeat-x center bottom; background-size: contain;}
img.full-image { display: block; width: 100%;}
div.caption-masthead { position: absolute; top: 0px; left: 0; width: 100%; text-align: center; display: flex; gap: 100px; flex-direction: column; justify-content: space-between; padding: 200px 20px; height: 100%; z-index: 6}
div.caption-masthead > div { display: block; width: 100%; text-align: center; }

div.caption-masthead img.builder-logo {width: 460px; display: block; margin: 0 auto; }
div.caption-masthead div.title {margin: 60px auto; display: block;  text-align: center; font-size: 18px; font-weight: 500; color:#000; text-transform: uppercase; letter-spacing: 2px}
div.caption-masthead img.logo {width: 1300px; margin: 0 auto; display: block;}
div.intro p {width: 780px; max-width: 100%; margin: 0 auto 90px; display: block; font-size: 20px; font-weight: 500; color: #fff}
h1 {margin-top: 74px}

div.video iframe { position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 100%;}
div.video > img { position: relative; z-index: 4; left: 0; top: 0; width: 100%; height: 100%;}
div.video a { position: absolute; z-index: 5; left: 50%; top: 50%; width: 52px; height: 45px; margin-left: -26px; margin-top: 22px; display: block;}
div.video a img { display: block; width: 100%; }

div.photo { width: 1440px; display: block; margin: 80px auto 0; max-width: 100%}
div.photo img { width: 100%; display: block; margin: 0px auto;}
div.map img { width: 100%; display: block; margin: 0px auto;}

div.amenities { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 35px 80px; text-transform: uppercase; max-width: 1140px; margin: 60px auto; border-top: 1px solid #414141; border-bottom: 1px solid #414141; padding: 35px 0;}
div.amenities span { font-size: 20px; color: #fff; font-weight: 400; }

div.slideshow { max-width: 1440px; margin: 0 auto; padding-bottom: 43px;}
button.slick-arrow { background-image: url(/img/right.svg); width: 30px; height: 60px; }
button.slick-arrow.slick-prev { background-image: url(/img/left.svg); left: -80px;}
button.slick-arrow.slick-next { right: -80px;}
ul.slick-dots { bottom: -42px}
ul.slick-dots li button { width: 30px; height: 2px; border-top: 1px solid #000; margin: 0 5px; background: #848484; opacity: 1; border-radius: 0}
ul.slick-dots li.slick-active button { border-top: 1px solid #fff; background: #fff; }

a.floating-register { position: fixed; top: 50%; right: -5px; transform: rotate(270deg); transform-origin: right bottom; background: #000; color: #fff; font-size: 24px; text-transform: uppercase;  font-weight: 600; z-index: 9; line-height: 40px; padding: 0 25px; border-radius: 15px 15px 0 0; border: 1px solid #333; transition: right .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) }
a.floating-register:hover { right: 0px; }

#registration-popup { position: fixed; top: 50%; left: 50%; transform: translate3D(-50%, -50%, 0); opacity: 0; left: 2000vw; padding: 50px; background: #000; z-index: 1000; width: 900px; max-width: 100%; max-height: 80vw; overflow: auto;}
#registration-popup.active { opacity: 1; left: 50%;  transition: opacity .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) }

div.labels-slider { max-width: 80%; margin: 80px auto 0; display: flex; justify-content: space-evenly;}
div.labels-slider div { width: 25%;}
div.labels-slider a { text-align: center; text-transform: uppercase; font-size: 26px; font-weight: 300; color: #fff; padding-top: 45px; position: relative; border-top: 1px solid #fff; display: block; width: 100%; cursor: pointer;}
div.labels-slider a.active:after {content:""; position: absolute; top: -5px; height: 12px; width: 100%; border-radius: 12px;  background: #fff; left: 0; display: block; z-index: 3;}

a.scroll-down { width: 90px; display: block; margin: 50px auto 0;}
a.scroll-down img {position: relative; animation: bounce 5s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite;}
@keyframes bounce {
	0%  { transform: translateY(0px); }
	20%  { transform: translateY(30px); }
	100%  { transform: translateY(0px); }
}
/*FORMS*/
form { max-width: 600px; margin: 0 auto 150px}
input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], textarea { font-weight: 300; padding: 0 0 0 20px }
div.field.form-footer { display: flex; justify-content: space-between; gap: 30px; align-items: center; margin-top: 0px}
form button[type="submit"], form button[type="button"] { border-radius: 0px; padding: 0 20px; text-transform: uppercase; font-size: 20px; line-height: 62px; width: 100%; background: #000; color: #fff; font-weight: 300;}
form button[type="submit"]:hover, form button[type="button"]:hover { background: #fff; color: var(--col-primary); border: 1px solid var(--col-primary)}
div.checkbox label:before { width: 30px; height: 30px; border-radius: 0px; background: #fff;}
div.checkbox label { padding-left: 50px;font-size: 15px; padding-top: 10px}
*::-webkit-input-placeholder {  text-transform: normal; text-align: center; font-weight: 400; font-size: 18px !important; text-align: left !important}
*::-moz-placeholder {  text-transform: normal; text-align: center; font-weight: 400;  font-size: 18px !important; text-align: left !important}
*:-ms-input-placeholder {  text-transform: normal; text-align: center; font-weight: 400; font-size: 18px !important; text-align: left !important}
input[type="text"]:focus, input[type="search"], input[type="tel"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus { box-shadow:none; background: #fafafa;}

div.lp-form-field { position: relative; margin-bottom: 10px !important}
.microsite-contact-form label, .newsletter-form label { color:#fff; font-family: neue-haas-grotesk-display !important; position: absolute; top: 0; left: -10px; font-size: 0 !important}
.microsite-contact-form label span { font-size: 20px !important; position: absolute; top: 0; }
.microsite-contact-form .lp-form-field > span { font-size: 16px !important; position: absolute; top: 0; left: -10px}
.microsite-contact-form input, .microsite-contact-form select, .microsite-contact-form textarea { padding: 0 0 0 20px !important; font-size: 20px !important; text-align: left !important}
#registration-popup .microsite-contact-form input { margin-bottom: 0 !important; margin-top: 0 !important; font-family: neue-haas-grotesk-display !important}
#registration-popup .microsite-contact-form select { margin-bottom: 0 !important; font-family: neue-haas-grotesk-display !important;  font-size: 20px !important}
#registration-popup input.lp-form-fieldInput[type="checkbox"] { border-radius: 0 !important; border: 0 !important}
#registration-popup input.lp-form-fieldInput[type="checkbox"] + label{ font-size: 18px !important; padding-left: 46px !important; padding-top: 5px !important; text-transform: none !important; letter-spacing: 1px !important; font-weight: 400 !important}
.wrapperContainer p { line-height: 1.4; font-size: 16px; margin-top: 10px !important}
#validation-summary p { line-height: 1.4; font-size: 16px; margin-bottom: 10px}
#validation-summary { margin-bottom: 30px}
#registration-popup .microsite-contact-form { max-width: 800px !important; width: 100%!important}
/*#registration-popup button .lp-form-button-arrow { display: none;}*/
/*#registration-popup button { background: transparent !important; display: table !important; width: auto !important; margin: 0 auto !important; line-height: 1 !important; border: 0 !important; border-bottom: 1px solid #fff !important; padding: 0 0 3px !important; text-align: left !important; min-height: 0 !important; height: auto !important; margin-top: 40px !important}*/
/*#registration-popup button span.lp-form-button-text{ color: #fff !important; font-family: neue-haas-grotesk-display !important;  font-size: 25px !important; width: auto !important}*/
div.onFormSubmittedFeedback  {background: #000; height: auto !important}
.onFormSubmittedFeedback .onFormSubmittedFeedbackMessage { color: #fff !important; font-family: neue-haas-grotesk-display !important;  font-size: 20px !important}

fieldset { margin-bottom: 0}

div.reveal-response p { text-align: center; font-size: 24px; line-height: 1.5; padding-bottom: 100px}

.select2-results__option { margin-bottom: 0; line-height: 40px; padding-left: 10px; font-size: 18px;}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--col-primary); color: #fff; }

/*ANIMATIONS*/

.slide-in-bottom { transform: translateY(300px); opacity: 0;}
.slide-in-top { transform: translateY(-300px); opacity: 0;}
.in-better-view.slide-in-bottom {opacity: 1;	animation: slide-in-bottom 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.in-better-view .slide-in-bottom {	opacity: 1; animation: slide-in-bottom 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.in-better-view .slide-in-top {	opacity: 1;animation: slide-in-top 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@keyframes slide-in-top {
  0% { transform: translateY(-300px); opacity: 0;}
  100% {transform: translateY(0);opacity: 1;}
}

@keyframes slide-in-bottom {
  0% {transform: translateY(300px);opacity: 0;  }
  100% { transform: translateY(0);opacity: 1;
  }


}



@media only screen and (max-width: 1900px) {
	div.caption-masthead { ; padding: 60px 20px 100px; height: 100%;  }
		div.caption-masthead img.logo { width: 960px; max-width: 80%}
		h1 { margin-top: 40px; font-size: 26px}
			div.caption-masthead img.builder-logo { width: 320px;}
	div.caption-masthead div.title { margin: 40px auto}

}
@media only screen and (max-width: 1780px) {


	div.intro p { font-size: 18px; margin-bottom: 60px;}

	h1 {  font-size: 26px; ;}
	h2 {  font-size: 42px; }


}

@media only screen and (max-width: 1600px) {
	div.caption-masthead { ; padding: 60px 20px; height: 100%; }
	div.caption-masthead img.logo { width: 800px; max-width: 90%;}
	div.caption-masthead img.builder-logo { width: 360px;}
	div.caption-masthead div.title { font-size: 16px; margin: 30px auto}
	div.intro p { font-size: 18px; margin-bottom: 40px;}
	a.scroll-down { width: 60px; margin-top: 30px}
}

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

	div.caption-masthead { ; padding: 50px 20px; height: 100%; }
	div.caption-masthead img.builder-logo { width: 320px;}
	div.caption-masthead div.title { font-size: 14px; margin: 30px auto}
	div.intro p { font-size: 16px; margin-bottom: 30px;}
	h1 {  font-size: 22px; margin-top: 30px}

	a.btn { font-size: 20px}

	p {font-size: 18px;}
	
	div.amenities span { font-size: 18px; }

	a.floating-register { font-size: 16px;}

	footer { padding-bottom: 20px; margin-bottom: 20px}
	footer div.nav { margin: 0 auto 20px; }
	footer div.logo { width: 240px; padding: 20px; }
	footer div.share { width: 150px; padding: 20px 15px; font-size: 13px; }
	footer div.share a { gap: 15px; font-size: 13px; }
	footer div.share img { width: 56px}
	footer div.social { width: 100px; padding: 20px; }
	footer div.social a { font-size: 16px;}
	footer div.links { width: calc(100% - 490px); padding: 0 30px;}
	footer div.links a { font-size: 14px; padding: 20px 0;}

	footer div.disclaimer2 {margin-top: 25px; }
	footer div.disclaimer p, footer div.disclaimer2 p {font-size: 14px; }

	div.labels-slider { max-width: 90%; margin-top: 40px}
	div.labels-slider a { font-size: 20px; padding-top: 30px; }
	div.labels-slider a.active:after {top: -3px; height: 7px; border-radius: 7px; }

}

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

	a.btn { font-size: 18px}
	h1 {  font-size: 20px; ;}
	h2 {  font-size: 36px; margin-bottom: 30px}

	div.amenities { gap: 25px 50px; margin: 50px auto; padding: 25px 0;}
	div.amenities span { font-size: 18px; }

	div.video a { width: 40px; height: 38px; margin-left: -20px; margin-top: 22px; }
	footer div.nav { flex-wrap: wrap}
	footer div.nav div.logo { width: 100%; border-bottom: 1px solid #414141}
	footer div.nav div.logo img { width: 230px; margin: 0 auto;}
	footer div.links a { display: none;}
	footer div.share, footer div.social { width: 50%}
	footer div.social { justify-content: space-around; gap: 0px; border: 0; padding: 0}
	footer div.social a { border-left: 1px solid #414141; padding: 20px 0; display: block; width: 50%}
	footer div.social a svg { display: block; margin: 0 auto}

	#registration-popup  { padding: 25px; max-height: 80vh; overflow: auto}
}

@media only screen and (max-width: 760px) {
	:root {
				--dim-default-space: 60px;
			}

	div.caption-masthead { ; padding: 70px 20px 50px; }
	div.caption-masthead img.logo { width: 290px; max-width: 86%;}
	p { line-height: 1.66;}
	div.intro p { font-size: 15px;}

		h1 {  font-size: 16px; ;}
		h2 {  font-size: 24px; }
		a.btn { font-size: 15px}
		p {font-size: 15px;}
		div.amenities span { font-size: 14px; }
		a.floating-register { font-size: 15px;}

		div.amenities { gap: 20px 20px; margin: 50px auto; padding: 20px 0;}

	footer div.links { display: none;}

	div.slideshow { padding-bottom: 0px;}
	button.slick-arrow { width: 12px; height: 24px; }
	button.slick-arrow.slick-prev { left: 10px;}
	button.slick-arrow.slick-next { right: 10px;}
	ul.slick-dots { bottom: 10px}
	ul.slick-dots li button { width: 10px; margin: 0 2px; }

	div.overlay a.close-overlay {top: 15px; right: 15px;} 
	#registration-popup  { padding: 25px; max-height: calc(100 * var(--vh) - 80px); overflow: auto; width: 100%; transform: none; top: 70px; }
	#registration-popup.active  { left: 0}

	a.scroll-down { display: none;}

	div.labels-slider { max-width: 94%; margin-top: 30px}
	div.labels-slider a { font-size: 12px; padding-top: 15px; }
	div.labels-slider a.active:after {top: -2px; height: 4px; border-radius: 4px; }

}