/*
FONTS

font-family: articulat-cf;
font-family: articulat-heavy-cf;
font-family: span;
font-family: span-compressed;
font-family: span-condensed;

Span Thin
font-family: "span", serif;
font-weight: 200;
font-style: normal;
Span Light
font-family: "span", serif;
font-weight: 300;
font-style: normal;
Span Regular
font-family: "span", serif;
font-weight: 400;
font-style: normal;
Span Bold
font-family: "span", serif;
font-weight: 700;
font-style: normal;
Span Compressed Thin
font-family: "span-compressed", serif;
font-weight: 200;
font-style: normal;
Span Compressed Light
font-family: "span-compressed", serif;
font-weight: 300;
font-style: normal;
Span Compressed Regular
font-family: "span-compressed", serif;
font-weight: 400;
font-style: normal;
Span Compressed Bold
font-family: "span-compressed", serif;
font-weight: 700;
font-style: normal;
Span Condensed Thin
font-family: "span-condensed", serif;
font-weight: 200;
font-style: normal;
Span Condensed Light
font-family: "span-condensed", serif;
font-weight: 300;
font-style: normal;
Span Condensed Regular
font-family: "span-condensed", serif;
font-weight: 400;
font-style: normal;

*/



/* VARIABLES */

:root {
  --default-font: articulat-cf;
  --default-font-size: 30px;
  --default-line-height: 1.2;

  --default-input-font: articulat-cf;
  --default-input-font-size: 20px;
  --dim-input-height: 34px;
  
  --button-input-font: articulat-cf;
  --button-font-size: 17px;
  --button-height: 35px;

  --col-primary: #030035;
  --col-accent: #BBBDBF;
  --col-burger: #fff;
  --col-text: #030035;
  --col-page-bg: #fff;
  --col-border: #000;
  --col-input: #575F71;
  --col-placeholder: #000;
  --col-input-bg: transparent;
  --col-button: #000;
  --col-button-bg: transparent;
  --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: 1520px;
  --dim-default-space: 160px;

  --vh: 1vh;
}

/* theme */


/*CORE HTML*/

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

h1 {  font-size: 163px; font-family: span; font-weight: 200; margin: 0 auto 60px; color: var(--col-text); line-height: 1; text-transform: uppercase;text-align: center;}
h2 {  font-size: 18px; margin: 0 auto 40px;  font-family: span; color: var(--col-text); line-height: 1; letter-spacing: 0px; font-weight: 300;}
h3 {  font-size: 50px; margin: 0 auto 16px; color: var(--col-text); line-height: 1.1; font-family: span; font-weight: 200;  text-transform: uppercase; }
h3.extra-spaced { margin-bottom: 40px;}
h3.short { max-width: 940px; margin-right: auto; margin-left: 0;}
h4 {  font-size: 163px; font-family: span; font-weight: 200; margin: 0 auto 60px; color: var(--col-text); line-height: 1; text-transform: uppercase;text-align: center;}
/*h4 {  font-size: 16px; margin: 0 auto; text-align: center; color: var(--col-primary); line-height: 1.4; font-family: eurostile; 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: 1052px; 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: articulat-cf; font-weight: 300; line-height: 1.9 }
p.medium { font-size: 20px; font-weight: 300;}

/*CONTAINERS*/

article { padding-top: 0px; background: #F2F2F2;}

/*BUTTONS*/

a.btn { text-transform: uppercase; color: var(--col-text); background: transparent; line-height: 22px; font-size: 17px; display: table; margin: 35px auto 0 0; padding: 0px; position: relative; border-bottom: 1px solid var(--col-text)}
a.btn.white { color: #f2f2f2; border-color: #BBBDBF;}
a.btn:hover {  color: var(--col-text); }

a.caption-btn { text-transform: uppercase; color: #fff; background: var(--col-primary); font-size: 27px; width: auto; margin: 0 auto; padding: 0px; position: relative; line-height: 60px; padding: 0 20px; display: table}
a.caption-btn:hover { background-color: #fff; color: var(--col-primary); }

a.btn:after {  content: ""; width: 0px; height: 1px; bottom: -1px; left: 0px; transition: width .3s linear; display: block; background: #f2f2f2; position: absolute; z-index: 2;}
a.btn:before {  content: ""; width: 0px; height: 1px; bottom: -1px; left: 0px; transition: width .3s linear .3s; display: block; background: var(--col-text); position: absolute; z-index: 3;}
a.btn.white:after {  background: var(--col-text); }
a.btn.white:before {  background: var(--col-accent); }
a.btn:hover:after { width: 100%;}
a.btn:hover:before { width: 100%;}

a.btn2 { color: #fff; line-height: 35px; font-size: 17px; font-weight: 400; padding-right: 45px; position: relative; display: table; width: auto}
a.btn2:after { content:""; display: block; position: absolute; right: 0; top: 0; width: 35px; height: 100%; background: url(/img/svg/arrow-blue.svg) no-repeat center center; background-size: contain;}

a.btn3 { color: var(--col-primary); line-height: 88px; font-size: 50px; font-weight: 200; font-family: span;  padding-right: 80px; position: relative; display: block; width: 100%; width: 1200px; max-width: calc(100vw - 80px); padding-bottom: 16px; border-bottom: 1px solid #575F71; margin: 140px auto 0; text-transform: uppercase; }
a.btn3:after { content:""; display: block; position: absolute; right: 0; top: 0; width: 56px; height: 100%; background: url(/img/svg/arrow.svg) no-repeat center center; background-size: contain; transform: scale(1); transition: all .4s cubic-bezier(0.250, 0.460, 0.450, 0.940);; }
a.btn3:after:hover { transform: scale(1.05)}

div.buttons { display: flex; justify-content: flex-start; gap: 30px}
div.buttons a.btn { margin: 0}

/*HEADER AND NAV*/

header { position: absolute; top: 0; left: 0; display: block; width: 100%; z-index: 5; }
header div.burger { top: 30px; left: 30px; display: block; }
body.article-home header div.burger li { background-color: #030035}
header div.logo { display: block; width: 158px; position: absolute; top: 50px; left: 111px; z-index: 10}
header div.logo img { display: block; width: 100%;}
header div.logo img:nth-child(1) { display: none;}
body.article-home header div.logo img:nth-child(1) { display: block;}
body.article-home header div.logo img:nth-child(2) { display: none;}
header div.quick-links { position: absolute; display: flex; right: 50px; top: 50px; justify-content: flex-end; gap: 45px;}
header div.quick-links a { color: #fff; line-height: 35px; font-size: 17px; font-weight: 400; padding-right: 50px; position: relative; display: block;}
header div.quick-links a:after { content:""; display: block; position: absolute; right: 0; top: 0; width: 35px; height: 100%; background: url(/img/svg/arrow-blue.svg) no-repeat center center; background-size: contain;  transition: all .4s cubic-bezier(0.250, 0.460, 0.450, 0.940);; transform: scale(1)}
header div.quick-links a:hover:after { transform: scale(1.05)}
body.article-home header div.quick-links a { color: var(--col-primary); }
body.article-home header div.quick-links a:after { background-image: url(/img/svg/arrow.svg);}
header nav { position:fixed; top: 0; left: -200vw; background: #575F71; height: 70vh; max-height: 737px; min-height: 600px; width: 100vw; display: flex; padding: 85px 110px; align-items: flex-end; justify-content: space-between; z-index: 9}
header nav > div.nav { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 16px;}
header nav > div.nav a { display: block; color: #fff; font-size: 60px; line-height: 1.1; font-weight: 200; font-family: span; text-transform: uppercase; transition: all .4s linear; position: relative; }
header nav > div.nav a:before { content:""; position: absolute; display: block; height: 1px; top: 0; right: 0; width: 0px; background: #fff; transition: all .2s linear; opacity: 0; z-index: 3;}
header nav > div.nav a:after { content:""; position: absolute; display: block; height: 1px; bottom: 0; left: 0; width: 0px; background: #fff; transition: all .2s linear; opacity: 0}
header nav > div.nav a:hover:after, header nav > div.nav a:hover:before {width: 100%; opacity: 1}
header nav > div.contact { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 90px}
header nav > div.contact p { color: #fff; font-size: 20px; margin-bottom: 25px;}
header nav > div.contact p a { color: #fff; }
header nav > div.contact p small { font-size: .9em;}
header.active nav { left: 0; opacity: 1}
header.active div.logo img:nth-child(1) { display: none !important;} 
header.active div.logo img:nth-child(2) { display: block !important;} 
header.active div.burger li { background-color: #fff !important}

header.attached { position: fixed; transform: translateY(-300px); opacity: 0; background: var(--col-primary); height: 60px; transition: all .4s cubic-bezier(0.250, 0.460, 0.450, 0.940);;; }
header.attached.visible { transform: translateY(0px); opacity: 1}
header.attached.visible div.burger { top: 0; left: 0}
header.attached.visible div.logo { top: 22px; left: 60px; width: 140px}
header.attached.visible div.quick-links  { top: 12px; right: 20px}
header.attached.visible div.logo img:nth-child(1) { display: none !important;} 
header.attached.visible div.logo img:nth-child(2) { display: block !important;} 
header.attached.visible div.burger li { background-color: #fff !important}
body.article-home header.attached.visible div.quick-links a { color: #fff; }
body.article-home header.attached.visible div.quick-links a:after { background-image: url(/img/svg/arrow-blue.svg);}


footer { display: block; padding-top: 140px; background: var(--col-primary); border-top: 1px solid #F2F2F2;}
footer > div { max-width: 1600px; padding: 0 40px; margin: 0 auto}
footer div.footer-content { display: flex; gap: 140px; justify-content: space-between;}
footer div.footer-content > div { width: 500px; }
footer div.footer-content > div:first-child { width: calc(100% - 640px); display: flex; flex-direction: column; justify-content: space-between; gap: 60px; }
footer div.footer-content div.nav { display: flex; gap: 10px; justify-content: space-between;}
footer div.footer-content div.nav a { display: block; color: #fff; font-size: 17px; text-transform: uppercase; font-weight: 400; letter-spacing: 2px}
footer div.footer-content div.logo { width: 252px; margin: 0 auto 34px 0;}
footer div.footer-content div.logo img { width: 100%; display: block;}
footer div.footer-content div.logo { width: 252px; margin: 0 auto 34px 0;}
footer div.title { color: #fff; font-size: 40px; font-family: span; font-weight: 200; margin-bottom: 20px;}
footer div.contact-info { display: flex; gap: 10px; justify-content: space-between;}
footer div.contact-info p { color: #fff; font-size: 20px; }
footer div.contact-info a { color: #fff; }
div.footer-content div.social { display: flex; justify-content: flex-start; gap: 24px}
div.footer-content div.social a { font-size: 24px; color: #fff}

footer div.disclaimer { display: flex; justify-content: space-between; padding: 100px 40px 100px; gap: 140px; }
footer div.disclaimer p, footer div.disclaimer a { color: #575F71; font-size: 15px; text-align: left; }
footer div.disclaimer > p { width: 500px; }
footer div.disclaimer > p:first-child { width: calc(100% - 640px); }

 
/*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}
.white { color: #F2F2F2 !important}
.b-white { background-color: #F2F2F2 !important}

/*CONTENT*/

article { padding-top: 0px}
section { max-width: var(--dim-site-inner-width); z-index: 2;}
section.higher-index { z-index: 3;}
section.masthead { max-width: 100%; }
section.full { max-width: 100%; }
section.padded { padding-top: 80px; padding-bottom: 80px;}
section.padded-top { padding-top: 80px; }
section.padded-bottom { padding-bottom: 80px; }
section.section-1 { padding: 407px 0 172px}
section.section-2 { padding: 150px 0;}
section.section-3 { padding: 80px 0 480px;}
section.section-4 { padding: 240px 0 160px;}

div.content-1 {width: 100%; max-width: var(--dim-site-inner-width); margin: 0 auto;}
div.content-2 {width: 100%; max-width: var(--dim-site-inner-width); margin: 0 auto; padding: 100px 0;}

div.masthead { width: 100%; height: calc(100 * var(--vh))}
div.slideshow { width: 100%; height: 100%; padding-bottom: 100px; position: relative;}
div.masthead-nav { width: 100%; height: 100px; background: #fff; ; display: flex; gap:90px; justify-content: center; align-items: center; padding-top: 0px; position: absolute; bottom: 0; left: 0}
div.masthead-nav a { display: block; line-height: 58px; color: var(--col-primary); text-transform: uppercase; font-size: 30px; width: 440px; text-align: center; border-bottom: 1px solid var(--col-primary);; border-top: 1px solid var(--col-primary);; position: relative; font-family: span; font-weight: 200}
div.masthead-nav a.active:after { content:""; display: block; height: 9px; top: -1px; width: 23px; position: absolute; left: 50%; margin-left: -12px; background: url(/img/svg/marker2.png) #fff no-repeat center center; background-size: cover;}
div.masthead div.image-holder {width: 100vw; height: calc(100 * var(--vh))}
div.masthead div.image-holder img {width: 100%; height: 100%; object-fit: cover;}
div.masthead div.caption { position: absolute; top: 50%; left: 50%; transform: translate3D(-50%, -50%, 0); width: 810px; max-width: 50%; background: url(/img/home/mask.png) no-repeat center top; background-size: contain; text-align: center; padding: 71px 0 0;}
div.masthead div.caption div.title { font-size: 60px; font-family: span; font-weight: 200; color: #fff; margin-bottom: 30px}
div.masthead div.caption div.title small { font-size: 24px; font-family: articulat-cf;; font-weight: 700; color: #fff; display: block; text-transform: uppercase; margin-top: 10px}
div.masthead div.logo { display: block; max-width: 590px; width: 100%; margin: 0 auto;}
div.masthead div.logo > img { display: block; width: 100%; margin: 0 auto 35px;}
div.masthead div.logo  a:not(.caption-btn) { display: block; width: 72px;; margin: 0 auto;transition: all .4s linear;}
div.masthead div.logo  a img { display: block; width: 100%;; transition: all .4s linear;  transform: scale(1)}
div.masthead div.logo  a:hover img { transform: scale(1.1)}

div.masthead  ul.slick-dots { text-align: center; bottom: 120px;}
div.masthead  ul.slick-dots li { margin: 0 14px}
div.masthead  ul.slick-dots li button { background: #575F71; width: 15px; height: 15px; border-radius: 15px}
div.masthead  ul.slick-dots li.slick-active button { background: #BBBDBF;}


div.masthead2 { width: 100%; height: calc(100 * var(--vh))}
div.masthead-grid { display: flex; gap: 0; justify-content: space-between; background: var(--col-primary)}
div.masthead-grid > div { width: 80%}
div.masthead-grid > div:first-child { width: 20%}
div.masthead-grid > div:first-child > div { display: table; margin: 0 auto; text-align: left; position: absolute; bottom: 127px; left: 50%; transform: translateX(-50%)}
div.masthead-grid h1 { display: none}
div.masthead2-nav { display: flex; flex-direction: column; gap: 0; transform: translateY(-300px); opacity: 0; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.in-view div.masthead2-nav { transform: translateY(0px); opacity: 1; }
div.masthead2-nav a { font-size: 37px; color: #fff; font-family: span; font-weight: 200; transition: all .4s linear;}
div.masthead2-nav  a:hover { transform: scale(1.1)}
img.masthead-floating { transform: translate3D(0, 0px, 0); transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); opacity: 0; left: 210px;}
.in-view img.masthead-floating { transform: translate3D(0px, 180px, 0); opacity: 1}
a.masthead-arrow { position: absolute; bottom: 95px; left: 50%; margin-left: -20px; display: table; animation: bounce 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite;}


img.full { display: block; width: 100%;}
div.caption-1 { position: absolute; width: 100%; max-width: var(--dim-site-inner-width); top: 72px; left: 50%; transform: translateX(-50%); text-align: left;}
div.caption-1 h3, div.caption-1 p { max-width: 790px; margin-right: auto; margin-left: 0}

div.news { display: flex; gap: 90px; justify-content: space-between;}
div.news div.photo { display: block; margin-bottom: 27px;}
div.news div.photo img { display: block; width: 100%;}
div.news div.date { font-size: 17px; color: #fff; margin-bottom: 10px;}
div.news p { font-family: span; font-weight: 200; color: #fff;}

div.grid-1 { display: flex; gap: 0px; justify-content: space-between; align-items: flex-end;}
div.grid-1 > div { width: 50%}
div.grid-1 > div:first-child { padding-right: 116px}
div.grid-2 { display: flex; gap: 0px; justify-content: center; padding-top: 112px; flex-direction: column}
div.grid-2 > div:first-child { padding-right: 76px; width: 50%; position: relative}
div.grid-2 > div:first-child:after { content:""; position: absolute; height: 70%; width: 1px; right: 0; top: 0; background: var(--col-primary); display: block;}
div.grid-2 > div:last-child { padding-left: 50%; padding-right: 40px;}
div.grid-2 h3 { text-transform: none; max-width: 800px; margin: 0 0 0 auto; }
div.grid-2 p { text-align: left; margin: 0 auto 0 0; max-width: 757px }

div.accordion-1 { max-width: var(--dim-site-inner-width); }
h6.ui-accordion-header {color: #fff; font-family: span; font-weight: 200; font-size: 50px; padding-right: 70px; position: relative; line-height: 1.1; padding: 20px 70px 20px 0; border-bottom: 1px solid #575F71;}
h6.ui-accordion-header span {position: absolute; width: 56px; height: 56px; background: url(/img/svg/arrow-blue.svg) no-repeat center center; background-size: contain; top: 20px;right: 0; display: block; transform: rotate(90deg);}
div.ui-accordion-content { padding: 45px 0;}
div.grid-3 { display: flex; gap: 60px; justify-content: space-between; align-items: flex-start;}
div.grid-3 > div { width: 410px;}
div.grid-3 > div:last-child { width: calc(100% - 470px);}

div.pillars { width: 5000px; max-width: 9999px; margin-top: 50px; margin-bottom: 35px;}
div.pillars h1 { text-align: left;}
div.pillars > div { display: flex; gap: 300px; justify-content: flex-start; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); cursor: url(/img/svg/drag3.svg), pointer; }
div.pillars > div > div { padding-left: 112px;}
div.pillars p { padding-left: 260px; max-width: 1000px; margin: 0 auto 0 0}
div.pillars-progress { width: 100%; max-width: var(--dim-site-inner-width); display: block; margin: 0 auto; height: 1px; background: #BBBDBF; position: relative}
div.pillars-progress span { position: absolute; height: 3px; width: 60%; background: var(--col-primary); display: block; top: -1px; left: 0; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); }

div.category-title { padding: 0 0 16px 0; border-bottom: 1px solid var(--col-primary); font-size: 50px; max-width: var(--dim-site-inner-width); margin: 0 auto 80px; color: var(--col-text); line-height: 1.1; font-family: span; font-weight: 200;  text-transform: uppercase; text-align: left;}
div.projects { display: flex; flex-direction: column; gap: 112px; align-items: flex-start; justify-content: flex-start; max-width: var(--dim-site-inner-width); margin: 0 auto}
div.project { display: block; width: 100%}
div.project-info {display: flex; justify-content: space-between; margin-bottom: 50px; gap: 120px}
div.project-info > div { width: 260px;}
div.project-info > div:first-child { width: calc(100% - 260px);}
div.project-info div.title {font-size: 72px; color: var(--col-text); line-height: 1.1; font-family: span; font-weight: 200;  text-transform: uppercase;}
div.project-info div.location {font-size: 35px; color: var(--col-text); line-height: 1.1; text-transform: uppercase;}
div.project-info div.status {font-size: 30px; color: var(--col-text); line-height: 1.8; text-align: right}
div.project-slides { width: 9999px; max-width: 9999px; margin-bottom: 45px;}
div.project-slides > div { display: flex; gap: 16px; justify-content: flex-start; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); cursor: url(/img/svg/drag3.svg), pointer; }
div.project-slides > div > div { width: 664px; height: 443px; cursor: url(/img/svg/drag4.svg), pointer; }
div.project-slides > div > div img { width: 100%; height: 100%; object-fit: cover;}
div.project-details {display: flex; gap: 16px; justify-content: flex-start;}
div.project-details > div {width: 664px;}
div.project-details div.project-stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 22px; width: auto; max-width: 580px;}
div.project-details div.project-stats span, div.project-details > div p { font-size: 30px;}
div.project-details > div.description p { font-size: 23px;}
div.project-details ul { list-style-position: inside;}
div.project-details li { font-size: 23px; margin-bottom: 8px}
div.project-details + div.project-details { margin-top: 90px; align-items: flex-end}
div.project-dots { position: absolute; display: flex; right: 0; justify-content: flex-end; gap: 30px; z-index: 3; bottom: 0px; display: none}
div.project-dots span { display: block; width: 15px; height: 15px; display: block; border-radius: 15px; background-color: var(--col-primary); transition: background .3s linear}
div.project-dots span.active { background-color: #BBBDBF;}

div.ask-away { padding: 80px 40px 120px 50%; position: relative;}
div.ask-away div.title { color: #fff; font-size: 163px; font-family: span; font-weight: 200; margin: 0 auto 12px; line-height: 1; }
div.ask-away p { color: #fff; font-size: 23px; max-width: 680px; margin: 0 auto 17px 0}
div.ask-away img { position: absolute; width: 706px; max-width: 40%; top: 70px; right: calc(50% + 100px); }

div.join-team { display: flex; justify-content: center; gap: 16px; max-width: 1620px;}
div.join-team > div { width: 943px;}
div.join-team > div:first-child { width: calc(100% - 960px);}

div.grid-contact { display: flex; gap: 100px; max-width: var(--dim-site-inner-width);  margin: 100px auto 0; justify-content: space-between;}
div.grid-contact div.address { display: flex; gap: 112px; justify-content: flex-start;}

/*SLIDERS*/
img.floating { position: absolute; transition: top 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940); }
img.floating-1 { top: 593px; left: 406px; width: 180px; }
.in-view img.floating-1 { top: 293px; left: 106px; }
img.floating-2 { top: -373px; right: -331px; width: 154px; }
.in-view img.floating-2 { top: 73px; right: 331px; }
img.floating-3 { top: 881px; right: 500px; width: 341px}
.in-view img.floating-3 { top: 381px; right: 0px; }
img.floating-5 { top: -594px; left: 0px; width: 868px}

div.infinite {  max-width: 20000px; height: 678px; padding-bottom: 120px; overflow: visible; width: 20000px}
div.infinite-2 {  max-width: 20000px; width: 20000px;  height: 576px; }


div.drag-slider { display: flex; justify-content: flex-start; width: auto; }
div.drag-slider > div { position: relative; }
div.drag-slider > div:after {content:""; display: block; opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0;  background: #575F71; transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940); z-index: 2;}
div.drag-slider > div > div { opacity: 0; position: absolute; bottom: 50px; left: 50px; text-align: left; width: calc(100% - 100px); background: #575F71; transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940); z-index: 3;}
div.drag-slider > div:hover > div { opacity: 1; }
div.drag-slider > div:hover:after { opacity: 1; }
div.drag-slider p { font-size: 20px; color: #fff}

div.drag-slider-1 {  gap: 116px; align-items: flex-start; width: auto; position: absolute; left: 0; top: 0; transition: left .5s linear; cursor: url(/img/svg/drag3.svg), pointer; }
div.drag-slider-1 > div  {  cursor: url(/img/svg/drag4.svg), pointer; }
div.drag-slider-1 > div:nth-child(1) img { max-width: 1160px;}
div.drag-slider-1 > div:nth-child(2) img { max-width: 742px;}
div.drag-slider-1 > div:nth-child(3) img { max-width: 506px;}
div.drag-slider-1 > div:nth-child(4) img { max-width: 1160px;}
div.drag-slider-1 > div:nth-child(5) img { max-width: 742px;}

div.drag-slider-2 { gap: 116px; align-items: flex-end; margin-top: 90px; width: auto; position: absolute; left: 0; top: 0; transition: left .5s linear; cursor: url(/img/svg/drag3.svg), pointer; }
div.drag-slider-2 > div  {  cursor: url(/img/svg/drag4.svg), pointer; }
div.drag-slider-2 > div:nth-child(1) img { max-width: 766px;}
div.drag-slider-2 > div:nth-child(2) img { max-width: 732px;}
div.drag-slider-2 > div:nth-child(3) img { max-width: 766px;}
div.drag-slider-2 > div:nth-child(4) img { max-width: 452px;}
div.drag-slider-2 > div:nth-child(5) img { max-width: 766px;}

img.drag-1 { display: block; position: absolute; left: 50%; margin-left: -17px; bottom: -280px}
img.drag-2 { display: block; margin: 200px auto 0}
img.drag-3 { display: block; margin: 0px auto 200px}


div.slider-2 { padding-top: 115px}
div.slider-2 ul.slick-dots { text-align: left; bottom: -50px;}
div.slider-2 ul.slick-dots li { margin: 0 15px 0 0}
div.slider-2 ul.slick-dots li button { background: #575F71; width: 15px; height: 15px; border-radius: 15px}
div.slider-2 ul.slick-dots li.slick-active button { background: #BBBDBF;}
div.slider-2 div.legend { position: absolute; bottom: 0; left: 0; padding: 30px; text-align: left; color: #fff; font-size: 16px; width: 100%; background: rgba(3,0,53,0.3)}


/*FORMS*/
form#frmFooter { margin: 0px auto 0px}
form#frmContact { max-width: 600px;}

div.form-row-footer { padding-right: 160px}
input[type="text"], footer input[type="email"], footer textarea { padding-left: 0px; border-top: 0; border-left: 0; border-right: 0; background: transparent; color: var(--col-primary); ; border-color: #575F71;}
form button[type="submit"], form button[type="button"] { border: 0 ; width: auto; font-family: articulat-cf; font-size: 17px; font-weight: 400; text-transform: none; color: var(--col-primary); display: table; padding: 0 53px 0 0; margin: 0 0 0 auto; position: relative; line-height: 35px; background: transparent;}
form button[type="submit"]:after { content:""; display: block; position: absolute; right: 0; top: 0; width: 35px; height: 100%; background: url(/img/svg/arrow.svg) no-repeat center center; background-size: contain; transition: .3s all linear}
form button[type="submit"]:hover:after { transform: scale(1.05);}
form button[type="submit"]:hover, form button[type="button"]:hover { background-color: transparent; color: var(--col-primary); }
div.checkbox label:before { width: 20px; height: 20px; border-radius: 0px; background: transparent;border-color: var(--col-primary); }
div.checkbox label { padding-left: 30px;font-size: 12px; color: var(--col-primary); }
*::-webkit-input-placeholder {  text-align: left;  color: #575F71; text-transform: uppercase;}
*::-moz-placeholder {  text-align: left; color: #575F71; text-transform: uppercase;}
*:-ms-input-placeholder {  text-align: left; color: #575F71; text-transform: uppercase;}

.select2-container--default .select2-selection--single { background: transparent; border: 0; border-bottom: 1px solid #575F71}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #575F71; line-height: 34px; padding-left: 0}
.select2-container--default .select2-selection--single .select2-selection__placeholder{ color: #575F71; line-height: 34px; text-transform: uppercase;}
.select2-container--default .select2-selection--single .select2-selection__arrow {background-image: url(/img/svg/arrow3.svg)}
div.form-row { margin-bottom: 15px}

fieldset { margin-bottom: 0}

div.reveal-response p { text-align: center; font-size: 32px; line-height: 1.5; color: #000;}
footer div.reveal-response p { text-align: left;  color: #fff;}

/*footer *::-webkit-input-placeholder {  text-align: left;  color: #575F71; text-transform: uppercase;}*/
/*footer *::-moz-placeholder {  text-align: left; color: #575F71; text-transform: uppercase;}*/
/*footer *:-ms-input-placeholder {  text-align: left; color: #575F71; text-transform: uppercase;}*/
footer div.checkbox label:before { border-color: #fff;}
footer div.checkbox input:checked + label:before  { background-image: url(/lib/img/white/checkmark.svg)}
footer div.checkbox label { color: #fff; }
footer input[type="text"], footer input[type="email"], footer textarea { color: #fff; }
footer form button[type="submit"], form button[type="button"] { color: #fff; }
footer form button[type="submit"]:after { background: url(/img/svg/arrow-blue.svg) no-repeat center center; background-size: contain;}
footer form button[type="submit"]:hover, footer form button[type="button"]:hover { background-color: transparent; color: #fff}
/*footer .select2-container--default .select2-selection--single { background: transparent; border: 0; border-bottom: 1px solid #575F71}*/
/*footer .select2-container--default .select2-selection--single .select2-selection__rendered { color: #575F71; line-height: 34px; padding-left: 0}*/
/*footer .select2-container--default .select2-selection--single .select2-selection__placeholder{ color: #575F71; line-height: 34px; text-transform: uppercase;}*/
/*footer .select2-container--default .select2-selection--single .select2-selection__arrow {background-image: url(/img/svg/arrow3.svg)}*/
/*footer div.form-row { margin-bottom: 15px}*/


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


}


/*div,p {border: 2px solid #000}*/

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

.in-view img.floating-1 { top: 143px; left: 26px; }
.in-view img.floating-2 { top: 73px; right: 131px; }
.in-view img.floating-3 { top: 481px; right: -150px; }

}

@media only screen and (max-width: 1920px) {
	div.grid-2 > div:first-child	 { padding-left: 40px}
}

@media only screen and (max-width: 1740px) {
.in-view img.floating-1, .in-view img.floating-2 { display: none;}
}

@media only screen and (max-width: 1640px) {
		:root {
		  --default-font-size: 24px;
		    --dim-default-space: 120px;
		  }
		
		h1 {  font-size: 120px; margin: 0 auto 40px; }
		h3 {  font-size: 36px; }
		h4 {  font-size: 120px; margin: 0 auto 40px; }

		h6.ui-accordion-header {font-size: 36px; padding: 14px 50px 14px 0; }
		h6.ui-accordion-header span {width: 36px; height: 36px; top: 12px;}
		div.ui-accordion-content { padding: 40px 0;}
		div.category-title { font-size: 36px; margin: 0 auto 60px; }
		div.project-info div.title {font-size: 48px; }
		div.project-info div.location {font-size: 28px; }
		div.project-info div.status {font-size: 24px; }
		div.project-details div.project-stats span, div.project-details > div p { font-size: 24px;}
		div.project-details > div.description p { font-size: 18px;}
		div.project-details li { font-size: 18px; margin-bottom: 8px}
		div.ask-away { padding: 60px 40px 100px 50%; }
		div.ask-away div.title { font-size: 120px; }
		div.ask-away p { font-size: 18px; }
		div.ask-away img { width: 35vw; max-width: 40%; top: 5vw; right: calc(50% + 100px); }

		div.masthead-nav { gap: 60px; padding: 0 20px}
		div.masthead-nav a { font-size: 24px}

		.in-view img.floating-1 { top: -60px; left: -60px; }
		.in-view img.floating-2 { top: 33px; right: 10px; }
		.in-view img.floating-3 { top: 381px; right: -150px; display: none;}

		section.section-1 { padding: 10vw 0 0px;}
		div.slider-2 {    padding-top: 50px; }
		
		div.infinite { height: 35vw;}
		div.drag-slider-1 {  gap: 60px; }
		div.drag-slider-1 > div:nth-child(1) img { max-width: 55vw;}
		div.drag-slider-1 > div:nth-child(2) img { max-width: 40vw;}
		div.drag-slider-1 > div:nth-child(3) img { max-width: 30vw;}
		div.drag-slider-1 > div:nth-child(4) img { max-width: 55vw;}
		div.drag-slider-1 > div:nth-child(5) img { max-width: 40vw;}

		div.infinite-2 { height: 35vw;}
		div.drag-slider-2 { gap: 60px; }
		div.drag-slider-2 > div:nth-child(1) img { max-width: 40vw;}
		div.drag-slider-2 > div:nth-child(2) img { max-width: 38vw;}
		div.drag-slider-2 > div:nth-child(3) img { max-width: 40vw;}
		div.drag-slider-2 > div:nth-child(4) img { max-width: 27vw;}
		div.drag-slider-2 > div:nth-child(5) img { max-width: 40vw;}

		footer div.title {font-size: 32px;} 
		footer div.contact-info p {font-size: 18px;}
		footer div.footer-content div.nav a { font-size: 16px;}

		div.pillars p { padding-left: 160px;}
		div.pillars > div { gap: 150px}

		div.news { gap: 20px}

		div.grid-1 > div:first-child { padding-right: 60px}

		img.masthead-floating {    left: 160px;}
		.in-view img.masthead-floating {    transform: translate3D(0px, 140px, 0);}

		img.drag-1 { bottom: -120px;}
}

@media only screen and (max-width: 1600px) {
		:root {
			  --dim-site-inner-width: calc(100vw - 80px);
			  }

}

@media only screen and (max-height: 1040px) {
	img.masthead-floating {    left: 210px;}
	.in-view img.masthead-floating { transform: translate3D(0px, 100px, 0); }
	a.masthead-arrow { bottom: 30px;}
}

@media only screen and (max-width: 1440px) {
	header nav { padding: 50px; }
	header nav > div.nav a { font-size: 40px}
	header nav > div.contact { gap: 40px}

	footer div.footer-content { gap: 50px;}
	footer div.disclaimer > p, footer div.footer-content > div { width: 500px}
	footer div.disclaimer > p:first-child, footer div.footer-content > div:first-child { width: calc(100% - 500px)}
		
		

}


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

		h6.ui-accordion-header {font-size: 28px; padding: 10px 42px 10px 0; }
		h6.ui-accordion-header span {width: 28px; height: 28px; top: 10px;}
		div.ui-accordion-content { padding: 40px 0;}
		div.category-title { font-size: 28px; margin: 0 auto 60px; }

		div.ask-away { padding: 60px 40px 100px 50%; }
		div.ask-away div.title { font-size: 80px; }
		div.ask-away p { font-size: 18px; }
		div.ask-away img { width: 35vw; max-width: 40%; top: 5vw; right: calc(50% + 100px); }

		div.masthead-nav { gap: 30px; padding: 0 20px}
		div.masthead-nav a { font-size: 20px}

		.in-view img.floating-1 { top: -60px; left: -60px; }
		.in-view img.floating-2 { top: 33px; right: 10px; }
		.in-view img.floating-3 { top: 381px; right: -150px; display: none;}

		section.section-1 { padding: 10vw 0 0px;}
		div.slider-2 {    padding-top: 50px; }
		
		div.infinite { height: 35vw;}
		div.drag-slider-1 {  gap: 30px; }
		
		div.infinite-2 { height: 35vw;}
		div.drag-slider-2 { gap: 30px; }
		

		footer { padding-top: 80px;}
		footer div.title {font-size: 24px;} 
		footer div.contact-info p {font-size: 15px;}
		footer div.footer-content div.nav { gap: 10px}
		footer div.footer-content div.nav a { font-size: 12px;}
		footer div.disclaimer { padding: 80px 40px 50px; gap: 50px}
		footer div.contact-info { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 30px}

		div.pillars { margin-bottom: 50px}
		div.pillars > div > div { padding-left: 40px; width: 75vw;}
		div.pillars p { padding-left: 60px;}
		div.pillars > div { gap: 80px}

		div.grid-1 > div:first-child { padding-right: 40px}

		img.masthead-floating {    left: 100px;}
		.in-view img.masthead-floating {    transform: translate3D(0px, 140px, 0);}


		div.project-slides { margin-bottom: 20px}
		div.project-slides > div { gap: 10px; }
		div.project-slides > div > div {width: 40vw; height: 26vw;}
		div.project-details { gap: 10px}
		div.project-details > div { width: 40vw;}
		div.project-details > div:last-child { width: calc(100% - 40vw - 10px);}
		div.project-details + div.project-details { margin-top: 20px}
		div.project-details div.project-stats { column-gap: 20px; row-gap: 20px}
		div.project-info { gap: 40px}
		div.project-info div.title {font-size: 40px; }
		div.project-info div.location {font-size: 24px; }
		div.project-info div.status {font-size: 20px; }
		div.project-details div.project-stats span { font-size: 16px;}
		div.project-details > div p { font-size: 18px;}
		div.project-details > div.description p { font-size: 16px;}
		div.project-details li { font-size: 18px; margin-bottom: 8px}

		div.join-team { padding: 0 40px;}
		div.join-team > div { width: 70vw;}
		div.join-team > div:first-child { width: 30vw;}
		img.floating-5 { top: -42vw;}
		section.section-3 { padding-bottom: 30vw;}

		div.grid-contact { gap: 60px}
		div.grid-contact div.address { gap: 40px}

		img.drag-1, img.drag-2, img.drag-3 { display: none;}

}

@media only screen and (max-width: 1080px) {
		footer div.footer-content div.nav { display: none;}

}

@media only screen and (max-width: 980px) {
	div.ask-away img { width: calc(50vw - 80px); left: 40px; top: 40px}
	div.grid-contact { flex-direction: column;}
	div.grid-contact div.address { gap: 60px}

	header div.quick-links { gap: 20px; right: 20px; top: 20px}
	header div.burger { top: 0; left: 0;}
	header div.logo { top: 22px; left: 60px;}

	footer div.contact-info { grid-template-columns: 1fr; }
	footer div.disclaimer > p:first-child, footer div.footer-content > div:first-child { gap: 30px}

	div.drag-slider > div > div { left: 20px; bottom: 20px; width: calc(100% - 40px); }
	div.drag-slider p { font-size: 16px;}
}

@media only screen and (max-width: 880px) {
	footer div.footer-content { gap: 50px; flex-direction: column;}
	footer div.disclaimer > p, footer div.footer-content > div { width: 100% !important}
	footer div.disclaimer { gap: 10px; justify-content: flex-start;}
	footer div.disclaimer > p { width: auto !important; margin-bottom: 0}

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

		:root {
			  --default-font-size: 18px;
			  --dim-default-space: 80px;
			  --dim-site-inner-width: calc(100vw - 60px);
		  }
		
		header div.quick-links { display: none; top: auto !important; bottom: 0 !important; right: auto!important; left: 0 !important; position: fixed; background: var(--col-primary)}
		header.attached.visible div.quick-links { top: auto; bottom: 0; right: auto; left: 0}
		header.active {height: auto !important}
		header.active div.quick-links { display: block;  width: 100%; z-index: 15}
		header.active > div {height: calc(100 * var(--vh));}
		header.active div.quick-links a { line-height: 100px; color: #fff !important; padding-left: 36px; width: auto !important; font-size: 22px; display: table; padding-right: 65px}
		header.active div.quick-links a:after { background: url(/img/svg/arrow-blue.svg) no-repeat center center !important; background-size: contain !important; width: 43px; height: 100%;}
		header.active div.quick-links a:first-child{ display: none}
		header nav { max-height: calc(100 * var(--vh)); height: calc(100 * var(--vh));flex-direction: column; gap: 40px; align-items: flex-start; justify-content: flex-end; padding: 60px 30px 120px;}
		header nav:after { content:""; position: absolute; left: 0; top: 60px; background: #fff; width: 100%; height: 1px; display: block}
		header nav > div { width: 100% !important; }
		header nav > div.nav a { font-size: 40px}
		header nav > div.contact { gap: 40px}
		header.active div.logo, header.active div.burger { position: fixed;}
		header nav > div.contact p { font-size: 18px}

		footer div.disclaimer { gap: 0px; justify-content: flex-start; flex-direction: column; align-items: flex-start;}
		footer div.disclaimer > p { width: auto !important; margin-bottom: 0}
		footer div.footer-content { gap: 80px}


		h1 {  font-size: 48px; margin: 0 auto 30px; text-align: left;}
		h3 {  font-size: 24px; text-align: left;}
		h3.center {  text-align: left !important;}
		h4 {  font-size: 48px; margin: 0 auto 30px; text-align: left;}

		h6.ui-accordion-header {font-size: 20px; padding: 10px 30px 10px 0; }
		h6.ui-accordion-header span {width: 20px; height: 20px; top: 5px;}
		div.ui-accordion-content { padding: 30px 0;}
		div.category-title { font-size: 20px; margin: 0 auto 40px; }

		div.masthead-nav { flex-direction: column; gap: 25px; padding: 30px 35px; height: auto}
		div.masthead div.slideshow { padding-bottom: 0;}
		div.masthead div.image-holder { height: calc(100 * var(--vh) )}
		div.masthead div.logo a:not(.caption-btn) { width: 40px}
		div.masthead div.caption { max-width: 80%}
		div.masthead div.caption p { font-size: 24px; margin-bottom: 20px}
		div.masthead-nav { display: none;}

		#home-intro {padding-top: 140px;}
		#home-intro h1 { margin-bottom: 220px;}

		.in-view img.floating-1 { top: -60px; left: 60px; width: 114px;display: block;}
		.in-view img.floating-2 { top: 307px; right: auto; left: -20px; width: 100px; display: block;}
		.in-view img.floating-3 { top: 208px; right: 0px; display: block; width: 195px}

		div.infinite { height: 44vw;}
		div.drag-slider-1 {  gap: 10px; }
		div.drag-slider-1 > div:nth-child(1) img { max-width: 66vw;}
		div.drag-slider-1 > div:nth-child(2) img { max-width: 48vw;}
		div.drag-slider-1 > div:nth-child(3) img { max-width: 36vw;}
		div.drag-slider-1 > div:nth-child(4) img { max-width: 66vw;}
		div.drag-slider-1 > div:nth-child(5) img { max-width: 48vw;}

		div.infinite-2 { height: 45vw;}
		div.drag-slider-2 { gap: 10px; margin-top: 40px}
		div.drag-slider-2 > div:nth-child(1) img { max-width: 48vw;}
		div.drag-slider-2 > div:nth-child(2) img { max-width: 46vw;}
		div.drag-slider-2 > div:nth-child(3) img { max-width: 48vw;}
		div.drag-slider-2 > div:nth-child(4) img { max-width: 33vw;}
		div.drag-slider-2 > div:nth-child(5) img { max-width: 48vw;}



		div.caption-1 { top: 30px; left: 30px; max-width: calc(100% - 60px); transform: none;}

		div.news { flex-direction: column; gap: 50px}

		div.masthead2 { height: auto;}
		div.masthead-grid { flex-direction: column-reverse; padding-top: 60px; background: var(--col-primary)}
		div.masthead-grid > div { width: 100% !important}
		img.masthead-floating { transform: none !important; left: 0 !important}
		div.masthead-grid > div:first-child > div { position: relative; bottom: 0; left: 0; transform: none; display: flex; padding: 40px 30px; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
		div.masthead-grid > div:first-child > div h2 { text-align: left; width: 100%; margin-bottom: 30px}
		a.masthead-arrow { display: none !important;}
		div.masthead div.caption div.title { font-size: 40px; }
		div.masthead div.caption div.title small { font-size: 18px; }
		div.masthead div.caption { background: none;}

		div.grid-1 > div:first-child { padding-right: 20px;}
		div.grid-2 { flex-direction: column; padding: 40px 30px 0; gap: 20px}
		div.grid-2 > div { width: 100% !important; text-align: left; padding: 0 !important; }
		div.grid-2 > div:first-child:after {display: none;}

		section.section-2 { padding: 50px 0}
		div.grid-3 { flex-direction: column; gap: 20px}
		div.grid-3 > div:first-child { width: 60%}
		div.grid-3 > div:last-child { width: 100%}

		div.pillars > div { gap: 40px}
		div.pillars > div > div { padding-left: 30px}
		div.pillars p { padding-left: 0}
		div.pillars h1 {font-size: 40px}


		div.projects { gap: 50px}
		div.project-slides > div > div {width: 80vw; height: 52vw;}
		div.project-details { gap: 20px; flex-direction: column; }
		div.project-details > div { width: 100% !important;}
		div.project-details + div.project-details { margin-top: 20px}
		div.project-details div.project-stats { column-gap: 20px; row-gap: 20px}
		div.project-info { gap: 12px; margin-bottom: 20px; flex-direction: column; align-items: flex-start;}
		div.project-info div.title {font-size: 28px; }
		div.project-info div.location {font-size: 16px; }
		div.project-info div.status {font-size: 16px; text-align: left;}
		div.project-details div.project-stats span { font-size: 16px;}
		div.project-info > div:first-child {width: 100%}
		div.project-details > div p { font-size: 16px;}
		div.project-details > div.description p { font-size: 16px;}
		div.project-details li { font-size: 16px; margin-bottom: 5px}
		div.project-dots { bottom: -20px; gap: 6px; right: -20px; display: none}
		div.project-dots span { width: 6px; height: 6px}

		div.ask-away { padding: 50px 30px }
		div.ask-away div.title { font-size: 48px; }
		div.ask-away p { font-size: 18px; }
		div.ask-away img { width: 100%; position: relative; top: 0; left: 0; max-width: 100%; margin-bottom: 40px}

		div.grid-1.margin-top-150 { margin-top: 50px !important}
		section.section-3 {padding-top: 0; padding-bottom: 80px}
		div.join-team { flex-direction: column; gap: 0px;}
		div.join-team > div { width: 100% !important; }
		div.join-team h1 { text-align: left;}
		img.floating-5 { top: 0; position: relative; margin-top: 30px}
		section.section-4 { padding-top: 80px; padding-bottom: 80px}

		a.btn3 { font-size: 20px; line-height: 32px; margin-top: 40px; padding-right: 40px;padding-bottom: 6px; padding-top: 6px}
		a.btn3:after { width: 24px; top: 0; height: 100%;}

		div.grid-contact { margin: 50px auto;}
		div.grid-contact div.address { gap: 50px; flex-direction: column}
		div.grid-contact div.address > div { width: 100%}


		div.drag-slider-1 {  transition: left .2s linear; }
		div.drag-slider-2 { transition: left .2s linear; }
		div.pillars > div { transition: all .2s cubic-bezier(0.250, 0.460, 0.450, 0.940); }
		div.pillars-progress span { transition: all .2s cubic-bezier(0.250, 0.460, 0.450, 0.940); }
		div.project-slides > div { transition: all .2s cubic-bezier(0.250, 0.460, 0.450, 0.940); }

		div.slider-2 ul.slick-dots li { margin: 0 12px 0 0}
		div.slider-2 ul.slick-dots li button { width: 12px; height: 12px; border-radius: 12px}

		div.masthead  ul.slick-dots { bottom: 20px;}
		div.masthead  ul.slick-dots li { margin: 0 6px}
		div.masthead  ul.slick-dots li button { width: 12px; height: 12px; border-radius: 12px}

		div.reveal-response p { text-align: center; font-size: 32px; line-height: 1.5; color: #000;}

		div.drag-slider > div > div { left: 10px; bottom: 10px; width: calc(100% - 20px); }
		div.drag-slider p { font-size: 14px; margin-bottom: 10px}

}



@media only screen and (max-width: 760px) and (max-height: 840px) {
	
	header.active div.quick-links a { line-height: 60px}
	header nav { padding-bottom: 80px; gap: 30px}
	header nav > div.contact { gap: 20px;}
	header nav > div.contact p { font-size: 16px; margin-bottom: 10px}
	header nav > div.nav a { font-size: 32px}
	header nav > div.nav { gap: 10px;}
}

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

	header nav > div.nav a { font-size: 30px}
	header nav { padding-bottom: 80px; gap: 25px}

}