@import url("https://use.typekit.net/yzq8zgx.css");
:root {
  --rem: 22px;
  --pad-s: 3rem;
  --pad-t: .5rem;
  --pad-b: 3rem;
  --h2: 2.25rem;
  --h2margin: .2em 0;
  --h2lineheight: 1em;
  --h3: 1.5rem;
  --h3lineheight: 1.25em;
  --h3margin: .5em 0;
  --h4: 1.25rem;
  --h4lineheight: 1em;
  --h4margin: .5em 0;
  --h5: 1rem;
  --h5lineheight: 1em;
  --h5margin: .5em 0;
  --p: 1em;
  --footer: 12px;
  --btn: .75em;
  --plineheight: 1.5em;
  --pmargin: .75em 0;
  --pink1: #fa0d4b;
  --pink2: #AF0431;
  --pink3: #f7b7c3;
  --blue1: #231842;
  --blue2: #48397F;
  --blue3: #A2A8D8;
  --gold1: #fce5d5;
  --gold2: #ee7f2f;
  --gold3: #e74f29;
  --cyan: #7acbd6;
  --white: #ffffff;
  --gradient1: linear-gradient(var(--pink1) 0, var(--cyan) 10%, var(--cyan) 60%, var(--blue2)90%, var(--gold2) 97%) 0 100%;
  --gradient2: linear-gradient(to right, var(--cyan) 50%, var(--blue3) 85%, var(--pink3) 100%);
  --gradient3: linear-gradient(to right, var(--blue2) 65%, var(--cyan) 95%, var(--gold2) 100%);
  --gradient4: linear-gradient(to bottom, var(--pink1), var(--pink2));
  --font1: var(--white);
  --font2: var(--blue1);
  --font3: var(--blue2);
  --fontError: var(--pink2);
  --fontFam: proxima-nova-condensed, sans-serif;
  --headingFontFam: proxima-nova, sans-serif;
  --textShadow1: 0px 0px 7px rgba(0,0,0,.8);
  --textShadow2: 0px 0px 7px rgba(0,0,0,.6);
  --linkHover: var(--gold1);
  --linkHover2: var(--gold3);
  --introWidth: 50%;
  --introHeight: calc(50vh + 59px);
  --logoSVG-height: 250px;
  --mainContentWidth: calc(100% - var(--navWidth));
  --navWidth: 33%;
  --navPad: var(--pad-t) 0 var(--pad-b) var(--pad-s);
  --navUlWidth: calc(50% - var(--pad-s));
  --navUlStart: 50%;
  --navULTextAlign: right;
  --footerWidth: calc(100% - var(--pad-s));
  --spotDetailWidth: calc(100vw - (var(--navWidth) + (2 * var(--pad-s))));
  --spotDetailHeight: calc(100vh - (var(--headerHeight) + var(--pad-t) + 2em + var(--pad-s)));
  --spotDetailPad: calc(var(--headerHeight) + var(--pad-t)) var(--pad-s) calc(var(--pad-b) + 2em) calc(var(--navWidth) + var(--pad-s));
  --spotDetailPosition: fixed;
  --spotDetailTextDisplay: flex;
  --spotColumnWidth: 50%;
  --pMaxWidth: 35rem;
  --aboutHLBoxWidth: 100%;
  --headerHeight: 80px;
  --headerSvgHeight: var(--headerHeight);
  --bgTransition: background-image 1s, background-color 1s;
  --certWidth: calc(var(--navWidth) - var(--pad-s));
}
@media (max-width: 1024px) {
  :root {
    --rem: 18px;
    --pad-s: 2rem;
    --pad-b: 2rem;
    --introWidth: 80%;
    --navWidth: 20%;
    --navUlStart: calc(var(--pad-s) / 2);
    --navULTextAlign: left;
    --spotColumnWidth: calc(50% - var(--pad-s));
    --spotDetailWidth: calc(100vw - (var(--navWidth) + (2.5 * var(--pad-s))));
    --spotDetailPad: calc(var(--headerHeight) + var(--pad-t)) var(--pad-s) var(--pad-b) calc(var(--navWidth) + (1.5 * var(--pad-s)));
  }
}
@media (max-width: 821px) {
  :root {
    --logoSVG-height: 180px;
    --spotColumnWidth: calc(100% - var(--pad-s));
    --spotDetailTextDisplay: unset;
  }
}
@media (max-width: 460px) {
  :root {
    --h2: 2rem;
    --h3: 1.5rem;
    --h4: 1rem;
    --h5: .88rem;
    --pad-s: 1.5rem;
    --fullwidth: calc(100% - (2 * var(--pad-s)));
    --introWidth: var(--fullwidth);
    --navWidth: var(--fullwidth);
    --navPad: var(--pad-t) var(--pad-s);
    --headerHeight: 2rem;
    --mainContentWidth: var(--fullwidth);
    --spotDetailWidth: var(--fullwidth);
    --spotDetailPadTop: calc((var(--headerHeight) * 2) + (2 * var(--pad-t)) + 5em);
    --spotDetailPadBottom: calc(var(--plineheight) + var(--pad-b) + .5em);
    --spotDetailPad: var(--spotDetailPadTop) var(--pad-s) var(--spotDetailPadBottom);
    --spotDetailHeight: calc(100% - var(--spotDetailPadTop) - var(--spotDetailPadBottom));
  }
}

/* Global */
html, body { margin: 0; overflow: hidden; font-family: var(--fontFam); position: relative; color: var(--font1); font-size: var(--rem); font-weight: 300;}
body {background-image: url('../img/fiestic-gradient-bkgd-dark.jpg'); background-size: cover; background-color: var(--blue3); transition: var(--bgTransition); background-position: center;}
body.contentActive {background-image: url('../img/fiestic-gradient-bkgd-med.jpg')}
canvas { /* width: 100vw!important; height: 100vw!important; */ position: absolute; z-index: 1; opacity: 0.25; transition: opacity 1s;}
section {position: relative; z-index: 1000; height: 100%; overflow: hidden; display: none;}
.mainContent {display: none; opacity: 0; transition: opacity .25s;}
.textblock {display: block; max-width: var(--pMaxWidth); margin-top: 80px;}
.textblock img {margin-bottom: 1rem;}

/* type */
h1, h2, h3, h4, h5 {font-family: var(--headingFontFam);}
h1 span {display: none;}
h2 {font-size: var(--h2); margin: var(--h2margin); line-height: var(--h2lineheight);}
h2 a {color: var(--gold1);}
h3 {font-weight: 300; font-size: var(--h3); line-height: var(--h3lineheight); margin: var(--h3margin);}
h4 {font-weight: 600; font-size: var(--h4); line-height: var(--h4lineheight); margin: var(--h4margin);}
p {margin: var(--pmargin); line-height: var(--plineheight);}
p.spotDescriptions::first-line {font-size: var(--h3); line-height: var(--h3lineheight); margin: var(--h3margin); font-weight: 500;}
p.footer {font-size: var(--footer); margin: 2rem 0;}
a {color: var(--font1); cursor: pointer; text-decoration: none; transition: color .25s;}
a:hover {text-decoration: underline;}
.spotlight1 .spot1Link, .spotlight2 .spot2Link, .spotlight3 .spot3Link, .spotlight4 .spot4Link, .spotlight5 .spot5Link {font-weight: 600; cursor: auto;}

/* intro */
body.introActive section.introContent {display: flex; opacity: 1; transition: opacity .25s;}
section.introContent .container {align-self: flex-end; width: var(--introWidth); min-height: var(--introHeight); padding: 0; text-align: center; margin: 0 auto;}
#fiesticMainLabel svg, #fiesticMainLabel img.logo {/*max-width: var(--logoSVG-height);*/ fill: var(--font1); height: 250px; margin-bottom: 1.5rem;}

/* Content Structure */
body.contentActive section.content, body.contentActive.spotlight div.mainContent.spotlightContent, body.contentActive.about div.mainContent.aboutContent, body.contentActive.office div.mainContent.officeContent, body.contentActive.contact div.mainContent.contactContent {display: flex; opacity: 1; transition: opacity .25s; overflow-y: scroll;}
section.content div.mainContent {width: var(--mainContentWidth); padding: var(--pad-t) var(--pad-s) var(--pad-b); flex-flow: wrap; align-content: space-between; }
section.content div.mainContent div.contentDetails {min-height: 50%;}
section.content p.footer {z-index: 1000; text-align: left; margin-bottom: 0;}

/* Content Side Nav */
section.content div.nav {width: var(--navWidth); padding: var(--navPad); border: 0; border-right: 2px solid; border-image: var(--gradient1); display: flex; flex-flow: wrap; align-content: space-between; z-index: 1000;}
section.content div.nav div.navContent {width: 100%;}
section.content div.nav .header {width: 100%; height: var(--headerHeight); display: flex;}
section.content div.nav .header svg {height: var(--headerSvgHeight); fill: var(--pink1); cursor: pointer;}
section.content div.nav .header svg:hover {fill: var(--gold1);}
section.content div.nav .header img {transition: all .5s;}
section.content div.nav .header img.light {display:none; opacity: 0;}
section.content div.nav .header img.dark {display: block; opacity: 1;}
body.spotlight section.content div.nav .header img.light {display: block; opacity: 1;}
body.spotlight section.content div.nav .header img.dark {display: none; opacity: 0;}
section.content div.nav ul {width: var(--navUlWidth); text-align: var(--navULTextAlign); padding-inline-start: var(--navUlStart); line-height: 1.6em; font-size: var(--h5);list-style: none;}
section.content div.nav ul li span {cursor: pointer; font-weight: 400; transition: color .25s; }
section.content div.nav ul li span:hover {color: var(--linkHover); text-decoration: underline; }
body.about section.content div.nav ul li span:hover, body.office section.content div.nav ul li span:hover, body.contact section.content div.nav ul li span:hover  {color: var(--linkHover2); text-shadow: unset; }
body.spotlight section.content div.nav ul li span.spotlight {font-weight: 600; cursor: auto; color: var(--font1); text-shadow: var(--textShadow2); text-decoration: none; font-family: var(--headingFontFam);}
body.about section.content div.nav ul li span.about, body.office section.content div.nav ul li span.office , body.contact section.content div.nav ul li span.contact {font-weight: 600; cursor: auto; color: var(--font2); text-decoration: none; font-family: var(--headingFontFam);}


/* Content heading */
.contentHeading {display: flex; flex-flow: row; width: 100%; height: var(--headerHeight); z-index: 1000; align-items: center; text-transform: uppercase; letter-spacing: 0.05em; border: 0px; border-bottom: 2px solid; border-image: var(--gradient2); border-image-slice: 1;}
.contentHeading h4 {font-weight: 600;}
.contentHeading ul {display: inherit; font-size: var(--h5); font-weight: 400; padding-inline-start: .3em;}
.contentHeading ul li {list-style: none; margin: 0 .3em; cursor: pointer; transition: color .25s;}
.contentHeading ul li:hover {color: var(--linkHover);}
body.spotlight .contentHeading h4 {text-shadow: var(--textShadow2);}
body.spotlight1 li.spot1Link, body.spotlight2 li.spot2Link, body.spotlight3 li.spot3Link, body.spotlight4 li.spot4Link, body.spotlight5 li.spot5Link {font-weight: 600; color: var(--font1); cursor: auto; text-shadow: var(--textShadow2);}

/* Spotlight */
body.contentActive.spotlight {background: #000000;}
body.contentActive.spotlight canvas {opacity: 0;}
.spotlight .spotDetail {display: flex; align-items: flex-end; height: var(--spotDetailHeight); opacity: 0; transition: opacity 1s; position: var(--spotDetailPosition); top: 0; left: 0; padding: var(--spotDetailPad); width: var(--spotDetailWidth); max-width: calc(2 * var(--pMaxWidth));}
.spotlight.spotlight1 .spotDetail.spot1, .spotlight.spotlight2 .spotDetail.spot2, .spotlight.spotlight3 .spotDetail.spot3, .spotlight.spotlight4 .spotDetail.spot4, .spotlight.spotlight5 .spotDetail.spot5 {opacity: 1; transition: opacity 1s;}
.spotlight .contentHeading { text-shadow: var(--textShadow1);}
.spotDetailText {display: var(--spotDetailTextDisplay); width: 100%; min-height: 30%; z-index: 1000;}
.spotDetailText h2 {width: var(--spotColumnWidth); padding-right: calc(var(--pad-s) / 2); text-shadow: var(--textShadow2);}
.spotDetailText .spotDescriptions {width: var(--spotColumnWidth); max-width: var(--pMaxWidth); text-shadow: var(--textShadow1);}
.spotBG {position: absolute; width: 100vw; height: 100vw; top: 0; left: 0; z-index: 1; background: rgba(0,0,0,0.4); opacity: 0.85;}
.spotBG video, .spotBG img {width: 100vw; height: 100vh; object-fit: cover; object-position: center center;}
.spotBG img.center-bottom {object-position: center bottom;}
.spotBG img.center-top {object-position: center top;}
.spotBG img.mobile {display:none;}
.spotlight section.content div.nav ul {text-shadow: var(--textShadow1);}

/* About & Contact */
body.contentActive.about canvas, body.contentActive.office canvas, body.contentActive.contact canvas {opacity: 0.35;}
body.contentActive.about section.content, body.contentActive.office section.content, body.contentActive.contact section.content {background: rgba(255,255,255,0.8); color: var(--font2);}
body section.content ul li a {font-weight: 300;}
body:not(.spotlight) section.content ul li a {color: var(--font2);}
body:not(.spotlight) section.content ul li a:hover {color: var(--linkHover2);}
body:not(.spotlight) section.content p a {color: var(--font2); font-weight:600; text-decoration: underline;}
body:not(.spotlight) section.content p a:hover {color: var(--linkHover2);}
row.aboutHighlights {border: 0; border-bottom: 2px solid; border-image: var(--gradient2); border-image-slice: 1; margin-top: 1em;}
row.aboutHighlights .aboutHLbox {width: var(--aboutHLBoxWidth); padding: .5em 0;}
input, textarea {border: 0; font-family: var(--fontFam); font-size: var(--p); color: var(--font2); background: rgba(255, 255, 255, 0.25); width: 100%; border-bottom: 2px solid; border-image: var(--gradient3); border-image-slice: 1; margin-bottom: 1.5em; backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);}
::placeholder {color: var(--gold3); font-size: var(--p);}
input {height: 2em;}
textarea {height: 6em;}
button.submitBtn {padding: .5em 3em; color: var(--white); font-weight: 600; background-image: var(--gradient4); border-radius: calc(2 * var(--btn)); border: 0; font-family: var(--fontFam); font-size: var(--btn); cursor: pointer;}
button.submitBtn:hover {background: var(--blue3);}
#response {color: var(--font3); font-weight: 600; margin: 1em 0;}
#response .error {color: var(--fontError);}
#response ul.error {margin: 0;}

/* Certified */
.certified {position: absolute; left: 0; bottom: 0; width: var(--certWidth); padding: var(--navPad); display: flex; flex-flow: column; text-align: right;}
.certified div {width: calc(100% - var(--pad-s)); margin: 30px 0 0;}
.certified div img {width: 150px;}
.certified div img.img-nmsdc {width: 100px;}

@media (max-width: 821px) {
  .certified {position: unset; left: unset; bottom: iunset; width: unset; padding: unset; display: flex; flex-flow: row; align-items: center; text-align: center;}
}

@media (max-width: 460px) {
  html, body {font-weight: 400;}
  section.content div.nav {border-right: unset; border-bottom: 2px solid; border-image: var(--gradient2); border-image-slice: 1; align-content: flex-start; position: absolute;}
  body.about section.content div.nav, body.office section.content div.nav, body.contact section.content div.nav{background: rgba(255,255,255,0.1); backdrop-filter: blur(10px) brightness(100%); -webkit-backdrop-filter: blur(10px) brightness(100%); }
  section.content .navContent {display: flex;}
  section.content div.nav .header {width: 36px; margin-right: 1em;}
  section.content div.nav ul {display: flex; width: 100%; height: var(--headerHeight); margin: 0;}
  section.content div.nav ul li { padding-right: 1em;}
  section.content div.nav ul li:first-child {display: none;}
  section.content div.mainContent {padding-top: calc(var(--headerHeight) + (2 * var(--pad-t)));}
  body.contentActive section.content, body.contentActive.spotlight div.mainContent.spotlightContent, body.contentActive.about div.mainContent.aboutContent, body.contentActive.contact div.mainContent.contactContent {flex-flow: column; height: 100%;}
  body.contentActive.office div.mainContent.officeContent, body.contentActive.contact div.mainContent.contactContent {z-index: 1;}
  section.content p.footer {padding-bottom: var(--pad-b); margin-bottom: 0;}
  section.content .spotlightContent p.footer {position: absolute; bottom: 0;}
  .contentHeading ul li {margin: 0 10%;}
  .spotBG img.mobile {display: unset;}
  .spotBG video {display: none;}
}

/* G Translate */
.gt_float_switcher .gt-selected .gt-current-lang {padding: 2px 8px !important;}
.gt_float_switcher img {width: 18px!important;}
.gt_float_switcher {font-size: 14px!important;}

/* ---- Case Studies panel (mirrors About) ---- */
section.content div.nav ul li span.casestudies {white-space: nowrap;}
body.contentActive.casestudies div.mainContent.casestudiesContent {display: flex; opacity: 1; transition: opacity .25s; overflow-y: scroll;}
body.casestudies section.content div.nav ul li span:hover {color: var(--linkHover2); text-shadow: unset;}
body.casestudies section.content div.nav ul li span.casestudies, body.casestudies section.content div.nav ul li span.casestudies span {font-weight: 600 !important; cursor: auto; color: var(--font2); text-decoration: none; font-family: var(--headingFontFam);}
body.contentActive.casestudies canvas {opacity: 0.35;}
body.contentActive.casestudies section.content {background: rgba(255,255,255,0.8); color: var(--font2);}
.nav-short {display: none;}
@media (max-width: 460px) {
  .nav-full {display: none;}
  .nav-short {display: inline;}
  section.content div.nav ul {font-size: 0.8em;}
  section.content div.nav ul li {padding-right: 0.7em; white-space: nowrap; font-size: 0.88rem !important;}
  body.casestudies section.content div.nav {background: rgba(255,255,255,0.1); backdrop-filter: blur(10px) brightness(100%); -webkit-backdrop-filter: blur(10px) brightness(100%);}
  body.contentActive.casestudies div.mainContent.casestudiesContent {flex-flow: column; height: 100%;}
}
@media (max-width: 380px) {
  section.content div.nav ul li {font-size: 0.8rem !important; padding-right: 0.55em;}
}