/*
FONTS

font-family: alverata;
font-family: embarcadero-mvb-pro;

*/



/* VARIABLES */

:root {
  --default-font: embarcadero-mvb-pro;
  --default-font-size: 22px;
  --font-size-1: 58px;
  --default-line-height: 1.9;

  --default-input-font: embarcadero-mvb-pro;
  --default-input-font-size: 22px;
  --dim-input-height: 88px;
  
  --button-input-font: embarcadero-mvb-pro;
  --button-font-size: 25px;
  --button-height: 55px;

  --col-primary: #CDDAA2;
  --col-accent: #2A3F18;
  --col-burger: #fff;
  --col-text: #231F20;
  --col-page-bg: #fff;
  --col-border: #707070;
  --col-input: #000;
  --col-placeholder: #000;
  --col-input-bg: #fff;
  --col-button: #231F20;
  --col-button-bg: #CDDAA2;
  --col-link: #000;
  --col-link-hover: #000000;

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

  --col-primary-rgb: 205,218,162;
  --col-accent-rgb: 42, 63, 24;
  --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: 140px;

  --vh: 1vh;
}

/* theme */


/*CORE HTML*/

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

h1 {  font-size: 27px; margin: 0 auto; line-height: 1.2; text-transform: uppercase; text-align: center; font-weight: 300; font-family: alverata; color: #fff}
h2 {  font-size: var(--font-size-1); margin: 0 auto 50px; line-height: 1.2; text-align: center; font-weight: 300; font-family: alverata; }

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

p.smaller { font-size: 24px;}
p.smallest { font-size: 22px;}

p.strong {font-size: 35px;font-family: eurostile; font-weight: 400;}
p.light { font-size: 16px; font-family: embarcadero-mvb-pro; font-weight: 300; line-height: 1.9 }
p.medium { font-size: 20px; font-weight: 300;}

p.center { letter-spacing: 1px;}

p.uc { text-transform: uppercase;}

/*CONTAINERS*/

article { padding-top: 0px; }

/*BUTTONS*/

a.btn { text-transform: uppercase; color: #000; line-height: 2.2; font-size: 25px; font-weight: 500;  display: table; margin: 40px auto 0; padding: 0px 50px; letter-spacing: 3px; position: relative; }
a.btn:hover span { color: #fff}
.b-primary a.btn { background-color: var(--col-accent); color: var(--col-primary)}
.b-primary a.btn:hover span { color: #000}
a.btn2 { text-transform: uppercase; color: var(--col-primary); line-height: 1.5; font-size: 30px; display: table; margin: 0 auto; padding-bottom: 0px; position: relative; border-bottom: 5px solid var(--col-primary); transition: color .2s linear;}
a.btn2:after { height: 5px; content:""; display: block; position: absolute; left: 0; bottom: -5px; width: 0; z-index: 4; background: #fff; transition: width .2s linear;}
a.btn2:hover { color: #fff}
a.btn2:hover:after { width: 100%; }
a.btn span, a.btn2 span { position: relative; z-index: 3;}

a.btn:after, .b-primary a.btn:after  { content:""; position: absolute; top: 0; left: 0; height: 100%; width: 0; display: block; transition: all .2s linear; opacity: 0 ; z-index: 2; background: var(--col-accent)}
.b-primary a.btn:after  { background: var(--col-primary)}
a.btn:hover:after, .b-primary a.btn:hover:after { width: 100%; opacity: 1}

/*HEADER AND NAV*/

header { position: absolute; top: 0; left: 0; display: block; width: 100%; z-index: 5; }

footer { display: block; padding: 70px 50px 130px; background: url(/img/motif.png) var(--col-primary) no-repeat right top; background-size: contain; position: relative; z-index: 3;}
footer div.footer { max-width: var(--dim-site-inner-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: 70px;}
footer div.footer > div { display: flex; flex-direction:column; justify-content: space-between; }
footer div.footer > div:nth-child(even) { padding-left: 90px}
footer div.footer > div.contact { gap: 150px;}
footer div.footer div.logo {max-width: 624px; width: 90%;}
div.disclaimer {padding-right: 25px; text-align: left}
div.disclaimer p, div.disclaimer a, div.copyright p {font-size: 18px; }
div.tagline {font-size: var(--font-size-1); font-family: alverata; font-weight: 300; margin: 0 auto 0 0;}
div.contact-info div.title {font-size: 42px; font-family: alverata; font-weight: 300; margin: 0 auto 22px 0;}
div.contact-info p {font-size: 25px; line-height: 1.5}

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

/*CONTENT*/

article {margin-top: calc(100 * var(--vh));  }
section { max-width: var(--dim-site-inner-width); background: #fff; z-index: 3;}
section.masthead { max-width: 100%; z-index: 2}
section.full { max-width: 100%; }
section.registration { padding: var(--dim-default-space) 100px}

div.masthead {position: fixed; top: 0; left: 0; height: calc(100 * var(--vh));  }
div.masthead > img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
div.masthead div.caption { padding: 100px 32px 40px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; align-items: center; }
div.masthead div.caption > div { text-align: center; width: 100%;}
div.masthead div.caption div.logo img  { display: block; width: 100%;}
div.bedroom-options { display: flex; gap: 100px; justify-content: center; align-items: flex-start; margin: 50px auto}
div.bedroom-options div { font-size: 38px; color: #fff; position: relative; text-align: center; font-weight: 500;transition: transform 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) }
div.bedroom-options div:hover { transform: scale(1.03); }
div.bedroom-options div span { font-size: 1.5em; font-weight: 400; padding-right: 67px; display: block; margin-bottom: 0.15em; padding-right: 0px !important; }
div.bedroom-options div img { width: 48px; display: block; position: absolute; top: 0.2em; right: 0; display: none !important}
div.bedroom-options div:after { height: 50%; top: 25%; right: -50px; width: 2px; background: #fff; display: block; position: absolute; content:""; }
div.bedroom-options div:last-child:after { display: none}


section.b-primary.flush {padding: var(--dim-default-space) 0;}
div.content {max-width: 1020px; margin: 0 auto; text-align: center;}

div.image-1 { margin: 0 auto 100px; max-width: 426px; width: 70%; display: block}
div.image-1 img { width: 100%; display: block}

div.image-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; column-gap: 8px; row-gap: 8px}
div.image-grid img { display: block; width: 100%; height: 100%; object-fit: cover;}
div.image-grid div { position: relative; opacity: 0}
div.image-grid .x5 { grid-column: span 5; left: -50%; top: 50%;}
div.image-grid .x7 { grid-column: span 7; left: -50%; top: 40%}
div.image-grid .x7:nth-child(3) { top: -80%; left: 40%}
div.image-grid .x3 { grid-column: span 3; left: 40%; top: 0}
div.image-grid .x4 { grid-column: span 4; left: -30%; top: 20%;}
div.image-grid .y2 { grid-row: span 2; top: 0; bottom: 30%; left: -30%}
.in-view div.image-grid div { left: 0 !important; top: 0 !important; bottom: 0 !important; right: 0 !important; opacity: 1; transition: all 1.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s}

div.bedrooms { border-top: 1px solid var(--col-text); padding: var(--font-size-1) 20px 0; text-align: center; display: table; width: auto; margin: 0 auto 40px}
div.bedrooms span { display: block; font-size: 28px; font-family: alverata; font-weight: 300; line-height: 1.66}

p.short { max-width: 712px; margin-left: auto; margin-right: auto}

a.first-avenue { display: block; width: 161px; margin: 0 auto 50px; }
a.first-avenue img { display: block; width: 100%}

div.form-holder { width: 100%; max-width: 1540px; padding: 0 50px; display: flex; gap: 8px; justify-content: space-between; align-items: stretch;}
div.form-holder > div { width: 50%; }
div.form-holder > div img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center;}
div.form-holder form {margin: 0 auto}
div.form { max-width: 542px; margin: 0 auto; padding: 100px 30px; text-align: center;}
div.form h2 { color: var(--col-primary); }
div.form p { color: #fff}

/*FORMS*/
input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], textarea { padding-left: 25px; border: 0; }
form button[type="submit"], form button[type="button"] { margin: 0 0 0 auto; text-transform: uppercase; font-weight: 500; font-size: 25px; letter-spacing: 2px}
form button[type="submit"] span { z-index: 3; position: relative}
form button[type="submit"]:after {content:""; width: 0; height: 100%; position: absolute; display: block; top: 0; right: 0; z-index: 2; background: #fff; transition: all .2s cubic-bezier(0.250, 0.460, 0.450, 0.940) }
form button[type="submit"]:hover:after {width: 100%; }
form button[type="submit"]:hover span { color: var(--col-accent)}
div.checkbox label:before { width: 20px; height: 20px; border-radius: 0px; background: #fff; font-weight: 300}
div.checkbox input:checked + label:before { background: url(/lib/img/dark/checkmark.svg) #fff no-repeat center center;border-color: #fff; background-size: 14px 12px;}
div.checkbox label { padding-left: 28px;font-size: 13px; padding-top: 0px; color: #fff;}


h2 { transform: translateY(40px); opacity: 0; transition: all 2.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s }
.in-view h2 { transform: translateY(0px); opacity: 1; }
div.content p {transform: translateY(-80px); opacity: 0; transition: all 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s; line-height: 1.5; }
.in-view div.content p {transform: translateY(0px); opacity: 1; line-height: 2;}
div.image-holder {overflow: hidden; transform: scale(0.95) translateY(-100px); transition: all 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s }
.in-view div.image-holder {transform: scale(1) translateY(0px)}
div.bedroom-options { transform: translateY(20px); opacity: 0; transition: all 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) }
.in-view div.bedroom-options { transform: translateY(0px); opacity: 1; }
div.masthead a.btn2 { transform: translateY(-20px); opacity: 0; transition: all 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) }
.in-view div.masthead a.btn2 { transform: translateY(0px); opacity: 1; }


@keyframes bounce {
	0%  { transform: translateY(0px); }
	20%  { transform: translateY(30px); }
	100%  { transform: translateY(0px); }
}



/*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: 1440px) {

	:root {
	  --default-font-size: 20px;
	  --font-size-1: 48px;
	  --default-line-height: 1.66;

	  --default-input-font-size: 20px;
	  --dim-input-height: 60px;
	  
	  --button-font-size: 20px;
	  --button-height: 48px;

	  --dim-default-space: 100px;

	}
	
	h1 {  font-size: 24px; }
	h2 {  margin: 0 auto 40px; }

	footer { padding: 50px 30px 30px; }
	footer div.footer { row-gap: 50px;}
	footer div.footer > div:nth-child(even) { padding-left: 30px}
	footer div.footer > div.contact { gap: 100px;}
	div.disclaimer p, div.disclaimer a, div.copyright {font-size: 16px; }

	a.btn { font-size: 20px; padding: 0px 40px; letter-spacing: 2px; }
	a.btn2 { font-size: 25px; border-bottom: 4px solid var(--col-primary);}

	div.contact-info div.title {font-size: 34px; margin: 0 auto 20px 0;}
	div.contact-info p {font-size: 22px; }
	div.masthead div.caption { padding: 50px 30px 30px; }
	div.bedroom-options { gap: 60px; margin: 40px auto}
	div.bedroom-options div { font-size: 30px; }
	div.bedroom-options div span { font-size: 1.5em; padding-right: 50px; }
	div.bedroom-options div img { width: 32px; }
	div.bedroom-options div:after { right: -30px; }

	div.image-1 { margin: 0 auto 80px; }

	div.bedrooms { padding: 48px 20px 0; }
	div.bedrooms span { font-size: 24px; }

	div.form { padding: 50px 30px; }
	div.form p { color: #fff}
	input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], textarea { padding-left: 20px; }
	form button[type="submit"], form button[type="button"] { font-size: 22px; letter-spacing: 1px}

	div.content p {line-height: 1.66; }
	.in-view div.content p {line-height: 1.66;}



}

@media only screen and (max-width: 1080px) {
	:root {
	  --default-input-font-size: 18px;
	  --dim-input-height: 48px;
	}
	div.content { padding: 0 30px;}
}

@media only screen and (max-width: 980px) {
	section.registration { margin: 0; padding: 0}
	div.form-holder { flex-direction: column-reverse; gap: 0; padding: 0}
	div.form-holder > div { width: 100% !important;}	
	div.form-holder > div img { width: 100%; height: auto; display: block; object-fit: inherit;}

	div.bedroom-options { gap: 60px; margin: 20px auto}
	div.bedroom-options div { font-size: 18px; }
	div.bedroom-options div span { font-size: 1.5em; padding-right: 0px; }
	div.bedroom-options div img { width: 24px; position: relative; margin: 0 auto 10px; }
	div.bedroom-options div:after { top: 15%; height: 70%; width: 1px }

}

@media only screen and (max-width: 760px) {
	:root {
	  --default-font-size: 18px;
	  --font-size-1: 34px;

	  --default-input-font-size: 16px;
	  --dim-input-height: 40px;
	  
	  --dim-default-space: 80px;

	}

/*	div.masthead { height: 600px;}*/
/*	div.masthead > img { height: 100%; width: 100%; object-fit: cover;}*/

	div.masthead div.caption { padding: 40px 20px 10px; }
	div.bedroom-options { gap: 60px; margin: 20px auto}
	div.bedroom-options div { font-size: 18px; }
	div.bedroom-options div span { font-size: 1.5em; padding-right: 0px; }
	div.bedroom-options div img { width: 24px; position: relative; margin: 0 auto 10px; }
	div.bedroom-options div:first-child:after { top: 15%; height: 70%; width: 1px }

	h1 {  font-size: 24px; }
	h2 {   margin: 0 auto 40px; }

	footer { background-position: right bottom }
	footer div.footer { grid-template-columns: 1fr}
	footer div.footer > div { padding: 0 !important}
	footer div.footer div.logo { margin: 0 auto}
	footer div.footer > div.contact { gap: 40px; align-items: center;}
/*	footer div.footer > div:nth-child(even) { padding-left: 30px}*/
/*	footer div.footer > div.contact { gap: 100px;}*/
	div.disclaimer p, div.disclaimer a, div.copyright p {text-align: center; font-size: 14px}
	div.tagline {text-align: center; font-size: 30px; width: 100%}
	div.contact-info div.title {text-align: center; font-size: 28px}
	div.contact-info p {text-align: center; font-size: 20px}

	a.btn { font-size: 18px; padding: 0px 24px; letter-spacing: 1px; }
	a.btn2 { font-size: 20px; border-bottom: 2px solid var(--col-primary);}

	div.image-1 { margin: 0 auto 50px; }

	div.bedrooms { padding: 20px 0px 0; }
	div.bedrooms span { font-size: 21px; }

	input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], textarea { padding-left: 12px; }
	form button[type="submit"], form button[type="button"] { font-size: 18px; letter-spacing: 1px}

}

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

	div.bedroom-options { gap: 24px; }
	div.bedroom-options div { font-size: 16px; }
	div.bedroom-options div span { font-size: 1.2em; padding-right: 0px; }
/*	div.bedroom-options div img { width: 24px; position: relative; margin: 0 auto 10px; }*/
	div.bedroom-options div:after { right: -12px}

}