/*
FONTS

font-family: niveau-grotesk;
font-family: bellefair;
font-family: nimbus-sans;
*/



/* VARIABLES */

:root {
  --default-font: niveau-grotesk;
  --default-font-size: 15px;
  --default-line-height: 2;

  --default-input-font: niveau-grotesk;
  --default-input-font-size: 15px;
  --dim-input-height: 42px;
  
  --button-input-font: niveau-grotesk;
  --button-font-size: 14px;
  --button-height: 40px;

  --col-primary: #000;
  --col-accent: #444;
  --col-burger: #fff;
  --col-text: #fff;
  --col-page-bg: #000;
  --col-border: #000;
  --col-input: #fff;
  --col-placeholder: #fff;
  --col-input-bg: #000;
  --col-button: #fff;
  --col-button-bg: #000;
  --col-link: #fff;
  --col-link-hover: #fff;

  --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: 1440px;
  --dim-default-space: 150px;

  --vh: 1vh;
}

/* theme */


/*CORE HTML*/
html,body,#mainbody, article { background: #000}

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

h1 {  font-size:50px; font-family: bellefair; margin: 0 auto 10px; color: #fff; line-height: 1.12; text-transform: uppercase; text-align: center; font-weight: 400; }
h2 {  font-size: 20px; margin: 0 auto 0px;  color: #fff; line-height: 1.1; text-transform: uppercase; font-weight: 400; text-align: center; letter-spacing: 4px; }
h3 {  font-size: 40px; font-family: bellefair; margin: 0 auto 40px; color: #fff; line-height: 1.12; text-transform: uppercase; text-align: center; font-weight: 400; }
h4 {  font-size: 80px;font-family: superior-title;  margin: 0 auto 82px;  color: var(--col-primary); line-height: 1; text-transform: uppercase; font-weight: 400; text-align: center; }

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: 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: niveau-grotesk; font-weight: 300; line-height: 1.9 }
p.medium { font-size: 20px; font-weight: 300;}

/*CONTAINERS*/

article { padding-top: 0px; }

/*BUTTONS*/

a.btn { text-transform: uppercase; background: transparent; line-height: 38px; font-size: 15px; display: table; margin: 0px auto 0; padding: 0px 36px ; letter-spacing: 3px; position: relative; border: 1px solid #fff; font-family: niveau-grotesk; font-weight: 300; }
a.btn:hover {  background: #fff; color: #000; 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: 232px; position: absolute; top: 85px; left: 164px; }
header div.logo img { display: block; width: 100%; }

footer { display: none; padding: 60px 40px 70px; background: var(--col-primary); }
footer div.disclaimer { justify-content: center; padding: 70px 0 0px; }
footer div.disclaimer p, footer div.disclaimer a { color: #fff; font-size: 10px; text-align: center;}
footer div.logo { width: 300px; margin: 0 auto 70px; }
footer div.logo a {display: block; max-width: 100%; }
footer div.logo a img {display: block; width: 100%; }
footer  div.builders { display: flex; justify-content: center; gap: 60px; align-items: center; margin: 60px auto 0}
footer  div.builders a:nth-child(1) { width: 113px;}
footer  div.builders a:nth-child(2) { width: 180px;}
footer  div.builders a:nth-child(3) { width: 113px;}

/*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*/

article { padding-top: 0px}
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)); display: flex; gap: 27px; justify-content: space-between; flex-direction: column; align-items: center; padding: 150px 40px 90px}

div.masthead div.logo img { width: 500px; display: block; max-width: 30vw; transform: scale(0.2); opacity: 0;}
.in-view div.masthead div.logo img { transform: scale(1); opacity: 1; transition: all .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) ; }

div.footer { color: #fff; font-size: 10px; line-height: 2; font-family: nimbus-sans; font-weight: 300; text-transform: uppercase; text-align: center; letter-spacing: 2px}
div.social { display: flex; justify-content: center; gap: 35px; margin-top: 20px}
div.social a { font-size: 20px; color: #fff}

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

div.form-holder { width: 100%;  display: flex; position: absolute; top:0px; left: -200vw; opacity: 0; transition: opacity 1s linear; height: 100%; padding-top: 80px; max-height: 600px;}
div.form-holder.active { left: 0; position: relative; opacity: 1;}
div.form-holder form { max-width: 800px; padding: 0px; margin: 0 auto; display: flex; gap: 40px; justify-content: space-between; align-items: center; flex-direction: column; height: 100%;}


div.body { height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
div.content { display: none; gap: 20px; justify-content: space-between; flex-direction: column; align-items: center;  height: 100%; padding-top: 20vh;}
div.content.active { display: flex;}

/*FORMS*/


input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], textarea { text-align: center; border: 0; border-bottom: 1px solid #fff; }
/**/
/*div.form-row-footer { padding-right: 160px}*/
form button[type="submit"], form button[type="button"] { padding: 0 18px; text-transform: uppercase; text-align: center; letter-spacing: 3px; border: 1px solid #fff; font-weight: 300; margin: 0 auto}
/*form button[type="submit"]:hover, form button[type="button"]:hover { background-color: #000; color: #fff}*/
div.checkbox label:before { width: 24px; height: 24px; border-radius: 0px; background: transparent;  border: 1px solid #fff;}
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: 35px;font-size: 14px; padding-top: 4px; color: #fff; display: table; width: auto; margin: 20px auto 0; }
*::-webkit-input-placeholder {  letter-spacing: 3px; text-transform: uppercase; font-weight: 300; }
*::-moz-placeholder {  letter-spacing: 3px; text-transform: uppercase;  font-weight: 300}
*:-ms-input-placeholder {  letter-spacing: 3px; text-transform: uppercase; font-weight: 300}

fieldset { margin: 0}

div.reveal-response p { text-align: center; font-size: 20px; line-height: 1.5; color: #fff; font-weight: 300; letter-spacing: 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-height:980px) {
	div.masthead { padding-top: 120px}
	div.content { padding-top: 16vh;}

}
@media only screen and (max-height:880px) {
	div.masthead { padding: 120px 40px 40px}
	div.content { padding-top: 0; height: auto; padding: 50px 0;}
	div.form-holder { height: auto; padding: 30px 0;
}


@media only screen and (max-height:780px) {
	div.masthead { padding: 60px 30px 40px}
	div.masthead div.logo img { width: 330px; max-width: 92vw; }
	div.content { padding-top: 0; height: auto; padding: 30px 0;}
}



	h1 {  font-size: 36px; }
	h2 {  font-size: 18px; }
	h3 {  font-size: 32px; }

}

@media only screen and (max-width: 1580px) {
h1 {  font-size: 42px; }
h2 {  font-size: 18px; }
h3 {  font-size: 36px; }


}

@media only screen and (max-width: 1340px) {
h1 {  font-size: 36px; }
h2 {  font-size: 18px; }
h3 {  font-size: 32px; }


}

@media only screen and (max-width: 1180px) {
	h1 { max-width: 680px}
	div.masthead div.logo img { max-width: 40vw;}
}


@media only screen and (min-width: 760px) {
	h2 br { display: none;}
}
@media only screen and (max-width: 760px) {
	div.masthead { padding: 120px 40px 40px}
	div.masthead div.logo img { width: 330px; max-width: 92vw; }
	h1 { font-size: 30px; margin-bottom: 20px}
	h2 { font-size: 15px; letter-spacing: 2px}
}

@media only screen and (max-width: 600px)  {
	div.masthead { padding: 80px 40px 40px}
}

@media only screen and (max-width: 370px)  {
	a.btn { letter-spacing: 2px; padding: 0 20px}
	div.masthead { padding: 40px 30px 40px}

}




@media only screen and (max-height:680px) {
	div.masthead { padding: 40px 30px 40px}
	div.masthead div.logo img { width: 240px; max-width: 92vw; }
	h2 { font-size: 14px; letter-spacing: 2px}
	p  { font-size: 14px;}

}

@media only screen and (max-height:620px) {
	div.masthead { gap: 10px; padding: 20px;}
}
@media only screen and (max-height: 570px) {
div.masthead  { height: auto;}
}