/*
FONTS

font-family: helvetica-neue-lt-pro;

*/



/* VARIABLES */

:root {
  --default-font: helvetica-neue-lt-pro;
  --default-font-size: 25px;
  --default-line-height: 1.4;

  --default-input-font: helvetica-neue-lt-pro;
  --default-input-font-size: 25px;
  --dim-input-height: 40px;
  
  --button-input-font: helvetica-neue-lt-pro;
  --button-font-size: 18px;
  --button-height: 50px;

  --col-primary: #000;
  --col-accent: #fff;
  --col-burger: #000;
  --col-text: #000;
  --col-page-bg: #fff;
  --col-border: #000;
  --col-input: #000;
  --col-placeholder: #000;
  --col-input-bg: #fff;
  --col-button: #000;
  --col-button-bg: #fff;
  --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-site-inner-width: 1640px;
  --dim-default-space: 160px;
  --dim-alt-space: 200px;

  --vh: 1vh;
}

/* theme */


/*CORE HTML*/

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

h1 {  font-size:58px; margin: 0 auto 0px; line-height: 1.1; text-transform: uppercase; text-align: center; }
h2 {  font-size: 58px; margin: 0 auto 120px 0; line-height: 1.3; text-transform: uppercase; text-align: left; }
h3 {  font-size: 50px; margin: 0 auto 36px 0; line-height: 1.3; font-weight: 300; text-align: left; }
h4 {  font-size: 50px; }


p.larger { font-size: 2em; line-height: 1.3 }
p.shorter { max-width: 1190px; margin: 0 auto 94px 0}
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-weight: 400;}
p.light { font-size: 16px; font-family: helvetica-neue-lt-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 { padding: 0 35px; text-transform: uppercase; margin: 40px auto 0 0; background: transparent;}
a.btn.white { color:#fff; border: 1px solid #fff; }
a.btn.white:hover { background-color:#BB9467; border: 1px solid #BB9467; color: #fff;}
/*a.btn:hover {  background: var(--col-accent); color: #fff; transition: background linear .15s}*/

/*HEADER AND NAV*/

header { position: absolute; top: 0; left: 0; display: block; width: 100%; z-index: 5; }
header div.logo { display: block; width: 45px; position: absolute; top: 70px; left: 140px; }
header div.logo img { display: block; width: 100%; }

header nav {display: flex; gap: 100px; justify-content: center; padding-top: 70px; width: 50%; position: absolute; right: 0; top: 0; }
header nav a {font-size: 18px; color: var(--col-text); text-transform: uppercase; letter-spacing: 5px;}
body.article-white-menu header nav a {color: #fff; }
header nav a:hover { color: #BB9467; }

footer { display: block; padding: 150px 30px 50px; background: #000; color: #fff;}
footer p, footer a { color: #fff; font-size: .75em;}
footer div.footer { max-width: var(--dim-site-inner-width); margin: 0 auto; display: block}

div.footer-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 300px; row-gap: 120px; width: auto; margin: 0 auto 0 0; align-self: start; justify-self: start;}
div.footer-grid p { line-height: 2.25; color: #fff;}

footer div.logo { width: 100%; margin: 130px auto 50px;}
footer div.logo img { width: 100%; display: block}

footer div.disclaimer { justify-content: space-between; border-top: 1px solid #fff; padding: 40px 0 0 0; display: flex; }


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

article { background-color: #fff}
section { max-width: var(--dim-site-inner-width); }
section.masthead { max-width: 100%; }
section.full { max-width: 100%; }

div.masthead { width: 100vw; height: calc(100 * var(--vh)); }

div.founder { width: 50%; height: 100%;}
div.founder img { width: 100%; height: 100%; object-fit: cover; object-position: center center;}
div.masthead div.logo { width: 72.91%; position: absolute; bottom: 40px; left: 19.73%;}
div.masthead div.logo img { width: 100%; display: block}

div.content-1 { padding: var(--dim-alt-space) 0 var(--dim-alt-space); max-width: var(--dim-site-inner-width); margin: 0 auto;}

div.stats { display: flex; gap: 200px; justify-content: flex-start; align-items: flex-start; font-size: 0.75em; color: #fff; margin-bottom: 140px; text-transform: uppercase;}
div.stats span { font-size: 7em;font-weight: 300; display: block; margin-bottom: 5px; line-height: 1;}


div.projects { width: calc(100% + 50px); margin-left: -25px; margin-bottom: 50px;}
div.projects + p { font-size: 18px}
div.project { padding: 0 25px;}
div.project img { display: block; width: 100%; margin: 0 auto 50px; filter: grayscale(100%); transition: filter .5s cubic-bezier(0.250, 0.460, 0.450, 0.940)}
div.project:hover img { filter: none;}
div.project div.title { display: block; font-weight: 500; text-transform: uppercase;}
div.project div.city { display: block; font-size: 0.75em; margin-top: 10px}
button.slick-arrow { background-image: url(/img/svg/arrow.svg) !important; top: -150px; width: 30px; height: 18px;}
button.slick-arrow.slick-next { right: 25px; }
button.slick-arrow.slick-prev { left: auto; right: 63px; transform: rotate(180deg);}

div.services { border-bottom: 1px solid #000}
.ui-accordion-header { padding: 20px 50px 20px 275px; position: relative; font-size: 50px; font-weight: 300; margin-bottom: 15px; line-height: 1.3; border-top: 1px solid #000}
.ui-accordion-header:after { content: attr(data-id); left: 0; top: 20px; width: 75px; text-align: left; font-size: 1em; line-height: 1.3; position: absolute; display: block}
.ui-accordion-header span { width: 35px; position: absolute; right: 0; top: 0px; height: 100%; display: block; background: url(/img/svg/plus.svg) no-repeat center center; background-size: contain;}
.ui-accordion-content  { padding: 0px 50px 100px 275px ;  color: var(--col-text); }
.ui-accordion-content  p { max-width: 874px; margin-left: 0; margin-right: auto}

ul li {font-size: 1em; font-weight: 400; line-height: 1.4; margin-bottom: 10px; }
ul { list-style-position: inside; margin-bottom: 40px}

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


div.grid-1 {display: flex; gap: 0px; }
div.grid-1 > div {width: 50%;}
div.grid-1 > div:last-child {padding-left: 100px;}

div.grid-2 {gap: 0;  margin-bottom: 0px; display: flex; align-items: center; justify-content: space-between}
div.grid-2 > div {width: 50%;}
div.grid-2 > div:last-child { padding-left: 0px;}
div.grid-2 img { width: 100%; height: 100%; object-fit: cover; object-position: center center;}

div.grid-3, div.grid-4 { display: flex; gap: 280px;}
div.grid-3 > div, div.grid-4 > div { width: 50%; text-align: left;}
div.grid-3 > div img, div.grid-4 > div img { width: 100%; display: block}
div.grid-4 { align-items: center;}

div.grid-5 { display: flex; gap: 100px; justify-content: space-between; align-items: flex-start;}
div.grid-5 > div:first-child { width: 450px;}
div.grid-5 > div:last-child { width: calc(100% - 550px); padding-top: 10px}



/*FORMS*/


input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], textarea { background-color: transparent; border: 1px solid var(--col-border)}
div.form-row {padding-bottom: 40px; gap: 0px}

form button[type="submit"], form button[type="button"] { font-size: 18px; line-height: 51px; background-color: transparent; padding: 0 35px; letter-spacing: 2px; text-transform: uppercase; border: 1px solid var(--col-border)}
/*form button[type="submit"]:hover, form button[type="button"]:hover { color: #aaa; background: transparent}*/
div.checkbox { padding-top: 30px}
div.checkbox label:before { width: 25px; height: 25px; border-radius: 0px; background: transparent; font-weight: 300}
div.checkbox input:checked + label:before { background: url(/lib/img/white/checkmark.svg) transparent no-repeat center center;border-color: #fff; background-size: 14px 12px;}
div.checkbox label { padding-left: 48px;font-size: 12px; padding-top: 0px; color: var(--col-text);}
*::-webkit-input-placeholder {  text-align: left;  letter-spacing: 2px; font-weight: 300; font-size: 0 !important}
*::-moz-placeholder {  text-align: left; letter-spacing: 2px; font-weight: 300; font-size: 0 !important}
*:-ms-input-placeholder {  text-align: left; letter-spacing: 2px; font-weight: 300; font-size: 0 !important}
div.field > label { display: block;  text-align: left;  letter-spacing: 2px; margin-bottom: 16px; font-size: 0.75em; text-transform: uppercase; }

.select2-container--default .select2-selection--single { background: transparent; border: 0; border-bottom: 1px solid var(--col-border)}
.select2-container--default .select2-selection--single .select2-selection__placeholder { font-weight: 300; font-size: 0}
.select2-container--default .select2-selection--single .select2-selection__arrow { background-image: url(/lib/img/white/arrow-down.svg)}
.select2-container--default .select2-results__option {background-color: var(--col-primary); color: #fff}
.select2-container--default .select2-results__option--highlighted[aria-selected] {color: var(--col-primary); background-color: #fff}
.select2-container--default .select2-results__option[aria-selected=true] {color: #fff; background-color:var(--col-primary); }
.select2-container--default .select2-results__option[aria-selected=true]:hover {background-color: #fff; color:var(--col-primary); }
.select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 0}

fieldset { margin-bottom: 0}

div.reveal-response p { text-align: left; font-size: 32px; line-height: 1.5; color: var(--col-text); font-weight: 300}



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

	:root {
	  --default-font-size: 20px;
	  --default-input-font-size: 20px;
	  --dim-input-height: 40px;
	  --button-font-size: 18px;
	  --button-height: 50px;

	  --dim-default-space: 100px;
	  --dim-alt-space: 120px;

	}

	header nav { gap: 30px; justify-content: center;}
	header nav a { letter-spacing: 3px}
	header div.logo {top: 40px; left: 40px}

	section:not(.masthead):not(.full):not(.max) { padding: 0 30px;}
	div.content-1 { padding-left: 30px; padding-right: 30px;}
	div.projects {    width: 100%; margin-left: 0px;}


	h1 {  font-size:50px; padding: 0 30px}
	h2 {  font-size: 50px; margin: 0 auto 80px 0; }
	h3 {  font-size: 42px; margin: 0 auto 30px 0; }
	h4 {  font-size: 42px; }

a.btn { padding: 0 25px; }

footer { padding: 100px 30px 20px; }
div.footer-grid { column-gap: 100px; row-gap: 50px; }
div.footer-grid p { line-height: 2; }
footer div.logo { margin: 80px auto 30px;}
footer div.disclaimer { padding: 30px 0 0 0; }

div.stats { gap: 120px; margin-bottom: 100px; }

div.project { padding: 0 10px;}
div.project img { margin: 0 auto 30px;}
div.project div.city { margin-top: 6px}
button.slick-arrow { top: -80px; }

.ui-accordion-header { padding: 20px 40px 20px 150px; font-size: 42px; margin-bottom: 15px; }
.ui-accordion-header:after {  top: 20px; width: 60px; font-size: 1em; }
.ui-accordion-header span { width: 30px; }
.ui-accordion-content  { padding: 0px 40px 60px 150px ;  }

ul { margin-bottom: 30px}

div.grid-1 > div:last-child { padding-left: 60px;}

div.grid-3, div.grid-4 { gap: 100px;}

div.grid-5 { gap: 60px; }
div.grid-5 > div:first-child { width: 450px;}
div.grid-5 > div:last-child { width: calc(100% - 510px); }


div.form-row {padding-bottom: 30px; }

form button[type="submit"], form button[type="button"] { font-size: 18px; line-height: 51px; padding: 0 35px; letter-spacing: 2px; }
div.checkbox { padding-top: 30px}
div.checkbox label:before { width: 25px; height: 25px; }
div.checkbox input:checked + label:before { background-size: 14px 12px;}
div.checkbox label { padding-left: 48px;}
*::-webkit-input-placeholder {  letter-spacing: 1px; }
*::-moz-placeholder {  letter-spacing: 1px; }
*:-ms-input-placeholder {  letter-spacing: 1px; }
div.field > label { letter-spacing: 1px; margin-bottom: 16px; }


div.reveal-response p { font-size: 38px; }


}



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



	h1 {  font-size: 40px; }
	h2 {  font-size: 40px; margin: 0 auto 50px 0; }
	h3 {  font-size: 32px; margin: 0 auto 30px 0; }
	h4 {  font-size: 32px; }



	div.stats { gap: 80px; margin-bottom: 100px; }

div.project img { margin: 0 auto 20px;}
div.project div.city { margin-top: 5px}

.ui-accordion-header { padding: 12px 40px 12px 60px; font-size: 32px; margin-bottom: 10px; }
.ui-accordion-header:after {  top: 15px; width: 40px; font-size: 1em; }
.ui-accordion-header span { width: 20px; }
.ui-accordion-content  { padding: 0px 40px 60px 60px ;  }

ul { margin-bottom: 30px}

div.grid-1 > div:last-child { padding-left: 40px;}
div.grid-3, div.grid-4 { gap: 60px;}

div.grid-5 { gap: 40px; }
div.grid-5 > div:first-child { width: 30%;}
div.grid-5 > div:last-child { width: calc(70% - 40px); }

div.reveal-response p { font-size: 32px; }


}

@media only screen and (max-width: 1080px) {
	div.burger { display: block; left: auto; right: 0; top: 0;}
	header.active div.burger ul li { background: #fff}
	body.article-white-menu header div.burger ul li { background: #fff}
	body.article-no-masthead header div.burger ul li { background: #000}
	body.article-no-masthead header.active div.burger ul li { background: #fff}
	header nav { position: fixed; right: -200vw; width: 300px; max-width: 100%;  opacity: 0; top: 0; justify-content: center; align-items: flex-end; flex-direction: column; gap: 40px; height: calc(100 * var(--vh)); background: #000;}
	header.active nav { right: 0; opacity: 1}
	header nav a { font-size: 28px; color: #fff; padding-right: 30px}
}


@media only screen and (max-width: 760px) {
:root {
  --default-font-size: 18px;
  --dim-default-space: 80px;
  --dim-alt-space: 80px;
}
	h1 {  font-size: 40px; }
	h2 {  font-size: 36px; margin: 0 auto 30px 0; }
	h3 {  font-size: 28px; margin: 0 auto 20px 0; }
	h4 {  font-size: 28px; }

	div.founder { width: 100%;}
	header div.burger ul li { background: #fff}
	header div.logo {top: 16px; left: 16px}
	p.larger { font-size: 1.5em}
	p.shorter { margin-bottom: 50px}

	div.masthead div.logo { width: 100%; left: 0; padding: 0 30px}

	div.stats { gap: 30px; margin-bottom: 50px; }
	div.stats > div { font-size: 10px}
/*	div.stats span { font-size: 5em}*/

	.ui-accordion-header { padding: 12px 30px 12px 40px; font-size: 24px; }
	.ui-accordion-header:after {  top: 12px; width: 24px; font-size: 1em; }
	.ui-accordion-header span { width: 16px; }
	.ui-accordion-content  { padding: 0px 30px 60px 40px ;  }

	div.grid-1 { flex-direction: column; gap: 40px}
	div.grid-1 > div { width: 100% !important; padding: 0 !important}
	div.grid-3, div.grid-4 { gap: 40px; flex-direction: column;}
	div.grid-4 { flex-direction: column-reverse;}
	div.grid-5 { gap: 0px; flex-direction: column;}
	div.grid-3 > div, div.grid-4 > div, div.grid-5 > div{ width: 100% !important;}

	div.grid-2 > div { width: 100%;}
	div.grid-2 > div:last-child { position: absolute; bottom: 0; left: 0; padding-bottom: 30px}

	div.reveal-response p {  font-size: 20px; }

	button.slick-arrow { top: -30px;}
	button.slick-arrow.slick-next { right: 10px;}
	button.slick-arrow.slick-prev { right: 53px;}
}