/*
FONTS

  font-family: forum;
  font-family: sora;

*/



/* VARIABLES */

:root {
  --default-font: sora;
  --default-font-size: 23px;
  --default-line-height: 1.5;

  --default-input-font: sora;
  --default-input-font-size: 18px;
  --dim-input-height: 50px;
  
  --button-input-font: sora;
  --button-font-size: 23px;
  --button-height: 68px;

  --col-primary: #313C38;
  --col-accent: #CDD7AE;
  --col-accent2: #f0f3e7;
  --col-burger: #000;
  --col-text: #000;
  --col-page-bg: #fff;
  --col-border: #000;
  --col-input: #000;
  --col-placeholder: #000;
  --col-input-bg: transparent;
  --col-button: #fff;
  --col-button-bg: #313C38;
  --col-link: #000;
  --col-link-hover: #000000;

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

  --col-primary-rgb: 49, 60, 56;
  --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-site-inner-width: 1440px;
  --dim-default-space: 100px;

  --vh: 1vh;
}

/* THEME */

p { font-weight: 300; }

h1 {font-family: forum; font-size: 85px; letter-spacing: 1px; text-transform: uppercase; margin: 0 auto; line-height: 1.1; text-align: center;}
h2 {font-family: forum; font-size: 85px; letter-spacing: 1px; text-transform: uppercase; margin: 0 auto 40px; line-height: 1.1; text-align: center;}
h2.small {font-size: 60px; }
h2.mark:before {content:""; display: block; width: 100%; margin-bottom: 35px; width: 100%; height: 50px; background: url(/img/mark.svg) no-repeat center center; background-size: contain;}
h2 small {font-size: 0.66em; display: block; margin-top: 7px;}


/*CONTAINERS*/


/*BUTTONS*/
a.btn { padding: 0 34px; font-size: 23px; color: #fff; text-transform: uppercase; line-height: 73px; transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940)}
a.btn:hover { background: var(--col-accent); color: #000}

p { overflow: hidden}
p > img { transition: all .99s cubic-bezier(0.250, 0.460, 0.450, 0.940)}
p:hover > img { transform: scale(1.03); }

/*HEADER AND NAV*/

header { position: absolute; top: 0; left: 0; width: 100%; padding: 140px 30px 0; height: 0; z-index: 9}
header div.logo { display: block;margin: 0 auto 35px; width: 100px;}
header div.logo-brand { display: block;margin: 0 auto 50px; width: 380px;}
header nav {display: flex; justify-content: center; gap: 70px; align-items: center;}
header nav a {font-size: 14px; font-weight: 600; color: #000; text-transform: uppercase;}



body.article-white-nav header nav a { color: #fff}
body.article-white-nav header div.logo, body.article-white-nav header div.logo-brand { filter: invert(1);}

header nav a.active {color: #CDD7AE !important}

footer {background: var(--col-primary); padding: 70px 30px 50px;}
footer div.logo {display: block; margin: 0 auto 75px; width: 174px; }
footer div.logo-brand {display: block; margin: 0 auto 50px; width: 800px; max-width: 60%;}
footer div.contact-header {display: block; margin: 15px auto; width: 400px; max-width: 80%; color: #fff; font-size: 24px; text-transform: uppercase; text-align: center; font-weight: 300}
footer div.contact-header img { display: block; width: 100%;}
footer div.contact { display: flex; justify-content: center; gap: 20px; margin: 0 auto 50px;}
footer div.contact a { font-size: 25px; color: #fff; text-decoration: underline}
footer div.social { display: flex; justify-content: center; gap: 30px; margin: 0 auto 65px;}
footer div.social a { font-size: 30px; color: #fff;}
footer div.disclaimer { text-align: center;}
footer div.disclaimer * { color: #fff; font-size: 15px; }


div.hst-promo { position: absolute; top: 0; left: 0; width: 100%; z-index: 3; background: var(--col-accent2); display: flex; justify-content: space-between; gap: 20px; padding: 15px 30px; align-items: center; }
div.hst-promo > div:first-child { font-size: 42px; font-family: forum; color: #000; text-transform: uppercase;}
div.hst-promo > div:last-child { display: flex; justify-content: flex-end; align-items: center; gap: 30px; font-size: 23px; color: #000;}
div.hst-promo > div:last-child a { display: table; line-height: 60px; background: transparent; font-size: 19px; padding: 0 25px; width: auto; text-transform: uppercase; color: #000; border: 1px solid #000; }


/*ELEMENTS*/
.c-primary { color: var(--col-primary) !important}
.c-black { color: #000 !important}
.b-primary { background-color: var(--col-primary) !important}
.b-accent { background-color: var(--col-accent) !important}
.b-accent2 { background-color: var(--col-accent2) !important}
.b-black { background-color: #000 !important}
.b-gray { background-color: #EBEBEB !important}
.white { color: #fff !important}
.b-white { background-color: #fff !important}
.c-white { color: #fff !important}

.b-brown {background-color: #BBB085 !important}

/*CONTENT*/

section.padded { padding-top: 190px; padding-bottom: 190px}

.std { max-width: 1480px; margin-left: auto; margin-right: auto}
.short { max-width: 1280px; margin-left: auto; margin-right: auto}
.shorter { max-width: 980px; margin-left: auto; margin-right: auto}
.shortest { max-width: 600px; margin-left: auto; margin-right: auto}

div.masthead div.caption { top: 400px; left: 0; text-align: center;}
div.masthead a.scrolling { margin: 60px auto 0; width: 22px; display: block;}
div.masthead a.scrolling img { display: block; width: 100%;}
div.masthead-white { padding: 400px 0 70px;}
div.masthead-white a.scrolling { margin: 60px auto 0; width: 22px; display: block;}
div.masthead-white a.scrolling img { display: block; width: 100%;}
div.masthead > img { display: block; width: 100%;}
div.masthead > picture { display: block; width: 100%;}
div.masthead > picture img { display: block; width: 100%;}

div.inner-nav {display: flex; justify-content: center; gap: 200px; align-items: center; margin: 0 auto; padding: 40px 20px; max-width: 1380px;}
div.inner-nav > a {flex: 1; text-transform: uppercase; display: flex; justify-content: flex-start; gap: 140px;}
div.inner-nav > a:hover {color: var(--col-primary); }
div.inner-nav > a:first-child { justify-content: flex-end}
div.inner-nav > a:first-child img {transform: rotate(180deg);}
div.inner-nav > span {width: 2px; background: #000; height: 32px;}

div.grid-1 { display: flex; justify-content: center; gap: 16px;  margin: 60px auto 190px}
div.grid-1.grid-1b { max-width: 940px;}
div.grid-1 > div { flex: 1; display: flex; justify-content: space-between; gap: 0; flex-direction: column;}
div.grid-1 div.info { padding: 35px 20px 35px; text-align: center; flex: 1}
div.grid-1 div.title { font-size: 40px; font-family: forum; text-transform: uppercase; letter-spacing: 7px; line-height: 1.25; margin-bottom: 0; color: var(--col-primary)}
div.grid-1 p { font-weight: 300;  color: var(--col-primary)}
div.grid-1:not(.grid-1b) > div:last-child div.title, div.grid-1:not(.grid-1b) > div:last-child p { color: #BBB085;}
div.grid-1 a { display: table; margin: 0 auto; padding: 0 25px; background: transparent; border: 1px solid #000; text-transform: uppercase;}
div.grid-1.grid-1b a { color: #000; }

div.grid-2 { display: flex; justify-content: space-between; gap: 20px; margin: 90px auto 0}
div.grid-2 > div { flex: 1; text-align: center;}
div.grid-2 p  { margin-top: 20px}
div.grid-2 + p  { margin-top: 20px}

div.grid-3 { display: grid; gap: 0; grid-template-columns: 1fr 1fr 1fr; gap: 70px 16px;}
div.grid-3 > div { text-align: center;}
div.grid-3 p  { margin-top: 20px}

div.featured-card { display: block; text-align: center; margin: 0 auto 50px; }
div.featured-card div.title { display: block; text-align: center; font-size: 45px; font-weight: 300; margin: 0 auto 35px; text-transform: uppercase;}
div.featured-card div.info { display: block; text-align: center; font-size: 26px; font-weight: 300; line-height: 1.33; text-transform: uppercase;}
div.grid-featured-plans { align-items: flex-end; gap: 80px}
div.grid-featured-plans > div { flex: 1;}

div.fp-table { display: grid; gap: 0; grid-template-columns: 2fr 2fr 2fr 1fr 1fr 2fr;}
div.fp-table div { padding: 30px 10px; border-bottom: 1px solid var(--col-border); font-size:25px; text-transform: uppercase; color: #000; font-weight: 400; line-height: 70px;}
div.fp-table div.th { font-weight: 600; text-transform: none;}
div.fp-table a.btn { font-size: 0.9em; font-weight: 300; background: #BBB085; border: 0; line-height: 70px; white-space: nowrap; margin: 0}

div.floorplan-levels { display: flex; justify-content: space-between; gap: 40px; margin: 120px auto 80px;}
div.floorplan-levels > div:first-child { width: 470px;}
div.floorplan-levels > div:last-child { flex: 1}
div.floorplan-levels > div:last-child img { display: block; width: 100%; }
div.level-index { display: flex; justify-content: flex-start; gap: 15px; flex-direction: column; align-items: flex-start; }
div.level-index a { display: block; padding-left: 30px; position: relative; font-size: 25px; font-weight: 300; color: #848688; text-transform: uppercase;}
div.level-index a.active { color: #000;}
div.level-index a.active:before { content:""; display: block; width: 17px; height: 100%; background: url(/img/svg/triangle.svg) no-repeat center center; background-size: contain; position: absolute; top: 0; left: 0; } 

div.transit-options {display: flex; justify-content: space-between; gap: 0}
div.transit-options p {flex: 1; text-align: center; padding: 0 20px}

.slick-slide p { text-align: center; margin-top: 20px; padding-bottom: 52px}
button.slick-arrow {top: auto; bottom: 0; right: auto; left: 50% !important; margin-left: -50px; height: 22px; width: 11px}
button.slick-arrow.slick-next {margin-left: 50px}

a.read-more { text-decoration: underline}
.concealed { display: none;}
.concealed.visible { display: block;}

/*FORMS*/
#registration { max-width: 1100px; padding: 0 30px; margin: 0 auto}
input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text] { border: 0; border-bottom: 1px solid #000; padding-left: 0}
div.radios { justify-content: space-between; gap: 30px;}
div.radios > div { display: flex; justify-content: space-between; gap: 30px;}
div.radio label { line-height: 40px; padding: 0 15px; border: 1px solid #fff; cursor: pointer;}
div.radio label:before { display: none;}
div.radio label:after { display: none}
div.radio input:checked + label { border: 1px solid #000; ;}
button[type=submit] {text-transform: uppercase;}
div.form-row-footer { padding-top: 30px}

/*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 bounce {
	0%  { transform: translateY(0px); }
	40%  { transform: translateY(20px); }
	100%  { transform: translateY(0px); }
}

@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 (min-width: 761px) {
		body.fully-scrolled header.attached {position: fixed; top: -60px; background: var(--col-primary); opacity: 0; }
		body.fully-scrolled header.attached.visible {top: 0; opacity: 1; transition: all .2s linear; padding-top: 50px}
		body.fully-scrolled header.attached.visible div.logo { display: none;}
		body.fully-scrolled header.attached.visible div.logo-brand { position: absolute; top: 10px; left: 20px; width: 190px}
		body.fully-scrolled header.attached.visible nav { position: absolute; right: 0; top: 0; padding: 0 20px; justify-content: flex-end; gap: 20px;}
		body.fully-scrolled header.attached.visible nav a { line-height: 60px; font-size: 14px; color: #fff !important}
		body.fully-scrolled header.attached.visible nav a.active { color: var(--col-accent) !important}
		body.fully-scrolled:not(.article-white-nav) header div.logo-brand { filter: invert(1);}
		header.attached div.hst-promo {display: none;}
}

@media only screen and (max-width: 1680px) {
		section.padded { padding-top: 100px; padding-bottom: 100px}

		div.hst-promo { padding: 10px 30px; }
		div.hst-promo > div:first-child { font-size: 28px; }
		div.hst-promo > div:last-child { gap: 20px; font-size: 18px; }
		div.hst-promo > div:last-child a { line-height: 50px; font-size: 16px; padding: 0 15px; }

}

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

	:root {
	  --default-font-size: 20px;
	  --button-font-size: 20px;
	  --dim-default-space: 80px;
	}

	section.padded, section:not(.max):not(.masthead) { padding-left: 30px; padding-right: 30px;}

	h1 {font-size: 60px; }
	h2 {font-size: 60px; }
	h2.small {font-size: 48px; }
	h2.mark:before {margin-bottom: 30px; height: 40px; }
	a.btn { padding: 0 25px; font-size: 20px; line-height: 60px;}
	header { padding: 100px 30px 0; }
	header div.logo { margin: 0 auto 30px; width: 90px;}
	header div.logo-brand { margin: 0 auto 30px; width: 300px;}
	header nav {gap: 40px; }

	footer {padding: 50px 30px 30px;}
	footer div.logo {margin: 0 auto 60px; width: 160px; }
	footer div.logo-brand {margin: 0 auto 40px; width: 600px; max-width: 60%;}
	footer div.contact { margin: 0 auto 40px;}
	footer div.contact a { font-size: 20px; }
	footer div.social { gap: 20px; margin: 0 auto 50px;}
	footer div.social a { font-size: 24px; }
	footer div.disclaimer * { font-size: 12px; }
	section.padded { padding-top: 80px; padding-bottom: 80px}

	div.masthead div.caption { top: 280px; }
	div.masthead a.scrolling { margin: 50px auto 0; }
	div.masthead-white { padding: 280px 0 30px;}
	div.masthead-white a.scrolling { margin: 50px auto 0; }

	div.inner-nav {gap: 100px; padding: 30px 20px; }
	div.inner-nav > a {gap: 100px;}
	div.inner-nav > span {width: 1px; height: 28px;}

	div.grid-1 { gap: 12px;  margin: 50px auto 80px}
	div.grid-1 > div { flex: 1; display: flex; justify-content: space-between; gap: 0; flex-direction: column;}
	div.grid-1 div.info { padding: 25px 20px 25px; }
	div.grid-1 div.title { font-size: 32px; letter-spacing: 5px; }
	div.grid-1 a { padding: 0 15px; }

	div.grid-2 { margin: 50px auto 0}
	div.grid-2 p  { margin-top: 10px}
	div.grid-2 + p  { margin-top: 10px}

	div.grid-3 { gap: 50px 12px;}
	div.grid-3 p  { margin-top: 10px}

	.slick-slide p { margin-top: 10px; padding-bottom: 52px}
	button.slick-arrow {margin-left: -30px; }
	button.slick-arrow.slick-next {margin-left: 30px}

	/*FORMS*/
	div.radios { gap: 20px;}
	div.radios > div { gap: 20px;}
	div.radio label { line-height: 32px; padding: 0 12px; }
	div.form-row-footer { padding-top: 20px}
}

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

		div.hst-promo > div:first-child { font-size: 22px; }
		div.hst-promo > div:last-child { gap: 20px; font-size: 15px; }
		div.hst-promo > div:last-child a { line-height: 40px; font-size: 14px; padding: 0 15px; }

		div.fp-table div { padding: 20px 5px; font-size: 18px; line-height: 50px;}
		div.fp-table a.btn { font-size: 0.9em; line-height: 50px; }

		div.floorplan-levels { gap: 0px; margin: 50px auto;}
		div.floorplan-levels > div:first-child { width: 240px;}
		div.level-index { gap: 10px; }
		div.level-index a { padding-left: 20px; font-size: 20px; }
		div.level-index a.active:before { width: 10px; } 

}


@media only screen and (max-width: 980px) {
	div.grid-1 div.title { font-size: 24px; letter-spacing: 3px; }
		div.hst-promo > div:last-child { font-size: 0px; }

}

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

	:root {
	  --default-font-size: 17px;
	  --button-font-size: 17px;
	  --dim-default-space: 70px;
	}


	header {padding-top: 126px;}
	header div.burger { display: block; left: 50%; margin-left: -30px; top: 43px}
	header.active div.burger { left: auto; margin: 0; right: 0;}
	header nav {position: fixed; top: 0; left: -200vw; opacity: 0; flex-direction: column; padding: 100px 0; background: var(--col-accent); gap: 36px; width: 100vw; height: calc(100 * var(--vh));}
	header.active nav {opacity: 1; left: 0}
	header nav a {font-size: 23px; text-align: center; width: 100%; display: block;}
	header div.logo { margin: 0 auto 20px; width: 60px;}
	header div.logo-brand { margin: 0 auto 0px; width: 220px;}


	div.hst-promo {padding: 5px 20px; gap: 4px}
	div.hst-promo > div:first-child { font-size: 14px; }
	div.hst-promo > div:last-child a { line-height: 32px; font-size: 10px; padding: 0 10px; }


	h1 {font-size: 35px; }
	h2 {font-size: 35px; }
	h2.small {font-size: 30px; }
	h2.mark:before {margin-bottom: 30px; height: 40px; }
	a.btn { padding: 0 20px; font-size: 15px; line-height: 42px;}

	footer div.logo {; width: 94px; }
	footer div.logo-brand {width: 100%; max-width: 92%;}
	footer div.contact { margin: 0 auto 28px; flex-direction: column; align-items: center; gap: 10px}
	footer div.social { margin-bottom: 30px;}
	footer div.contact-header { font-size: 16px}
	footer div.contact a { font-size: 16px}
	footer div.contact-header img { margin-bottom: 10px}

	section.padded { padding-top: 80px; padding-bottom: 80px}

	div.masthead div.caption { top: 220px; }
	div.masthead a.scrolling { margin: 20px auto 0; }
	div.masthead-white { padding: 220px 0 30px;}
	div.masthead-white a.scrolling { margin: 20px auto 0; }

	div.masthead > img { display: block; width: 100%; height: 60vh; object-fit: cover;}

	div.inner-nav {gap: 20px; padding: 30px 20px; }
	div.inner-nav > a {gap: 20px; justify-content: flex-end; }
	div.inner-nav > a span { line-height: 24px; font-size: 16px}
	div.inner-nav > a img { width: 10px}
	div.inner-nav > span {display: none}
	div.inner-nav > a:first-child { justify-content: flex-start}


	div.grid-1 { gap: 10px;  flex-direction: column}

	div.grid-2 { margin: 50px auto 0; flex-direction: column}

	div.grid-3 { gap: 50px 12px; grid-template-columns: 1fr;}

	div.transit-options {flex-direction: column; gap: 0px}
/*	div.transit-options p {flex: 1; text-align: center; padding: 0 20px}*/

	img.m-enlarge { height: 260px; object-fit: cover;}

	div.featured-card { }
	div.featured-card div.title { font-size: 28px; margin: 0 auto 20px; }
	div.featured-card div.info { font-size: 16px; }
	#registration {padding: 0}

	div.fp-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;}
	div.fp-table { min-width: 980px;}

	div.floorplan-levels { flex-direction: column; }
	div.floorplan-levels > div:first-child { width: 100%; flex: 1;}
	div.level-index { gap: 15px; flex-direction: row; justify-content: space-between;}
	div.level-index a { padding-left: 0px; font-size: 14px; }
	div.level-index a.active:before { display: none} 


	/*FORMS*/
	div.form-row { flex-direction: column}
	div.radios { gap: 10px;}
	div.radios > div { gap: 10px;}
	div.radio label { line-height: 28px; padding: 0 5px; }
	div.form-row-footer { padding-top: 20px}
}