html, body {
  background-color: white;
  box-sizing: border-box;
  width: 100vw;
  margin: 0;
  position: absolute;
  font-family: 'Muli', sans-serif;
  font-size: 10px;
  line-height: 2.8em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased; }
  @media screen and (max-width: 1000px) {
    html, body {
      font-size: 9px; } }
  @media screen and (max-width: 330px) {
    html, body {
      font-size: 8px; } }

.preload {
  opacity: 0;
  position: absolute;
  left: -9999em;
  top: -9999em; }

.transition-fade {
  transition: .2s;
  opacity: 1; }

html.is-animating .transition-fade {
  opacity: 0; }

a,
a:link,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: inherit;
  font-weight: inherit;
  cursor: pointer; }
  a.navAnchor,
  a:link.navAnchor,
  a:visited.navAnchor,
  a:hover.navAnchor,
  a:active.navAnchor {
    display: block;
    width: 100%;
    height: 100%; }

.wrapper {
  width: 100%;
  height: 100%; }

@media screen and (max-width: 1199px) {
  .desktop {
    display: none; } }

@media screen and (min-width: 1200px) {
  .mobile {
    display: none; } }

@-moz-document url-prefix() {
  body {
    font-weight: lighter !important; } }

.grid {
  position: absolute;
  width: 100%; }

.CopyWrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* justify-content: center;*/
  width: 700px;
  max-width: 100%;
  height: 100%; }

.Divider {
  width: 100%;
  height: 1px;
  margin: -5px 0 1em 0;
  border-bottom: 1px solid white; }
  .Divider.mini {
    margin: 3em 0 2em 0;
    width: 25%;
    opacity: 0.5; }

.CopyTitle {
  position: relative;
  font-size: 3em;
  letter-spacing: 0.03em;
  font-weight: 700;
  line-height: 1.2em;
  padding-bottom: 16px;
  border-bottom: 7px solid transparent; }
  @media screen and (max-width: 767px) {
    .CopyTitle .CopyLine {
      display: inline-block; } }
  .CopyTitle .LineFiller {
    position: relative;
    bottom: -18px;
    width: 0%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -5px;
    height: 5px;
    background-color: white;
    transition: width 0.2s linear; }
    .CopyTitle .LineFiller.show {
      width: 100%; }
    .CopyTitle .LineFiller.left {
      margin-left: 0; }
    @media screen and (max-width: 1000px) {
      .CopyTitle .LineFiller {
        margin-bottom: -4px;
        height: 5px; } }

.CopyBody {
  padding-top: 20px;
  letter-spacing: 0.04em;
  font-size: 2em;
  font-weight: 400;
  text-align: justify;
  text-justify: auto;
  opacity: 0;
  display: block;
  transition: opacity 0.3s linear; }
  .CopyBody.show {
    opacity: 1; }
  .CopyBody .heavy {
    font-weight: 800; }
  .CopyBody.small, .CopyBody.link {
    font-weight: 300;
    font-size: 1.8em;
    line-height: 1.3em;
    padding-top: 0; }
  .CopyBody.link {
    color: #1999d6 !important;
    cursor: pointer; }
    .CopyBody.link:hover {
      text-decoration: underline; }

#svg-mask, #svg-mask-mobile, #svg-logos {
  position: absolute;
  width: 0;
  height: 0; }

#edgeclipdefs {
  display: none; }

#brand-svg-element {
  display: none;
  /*position: relative;
  display: block;
  margin: 0 auto 20px;
  display: none;*/ }

#brand-svg-rect {
  -webkit-mask: url(#mask_desktop);
          mask: url(#mask_desktop);
  /*@media screen and (max-width: 1199px) {
    mask: url(#mask_mobile);
  }*/ }

.MainContainer {
  position: absolute;
  height: 100vh;
  width: 100vw; }

.ParallaxContainer {
  padding-top: 15vh;
  display: block;
  position: relative;
  height: 100%;
  width: 100%; }

.ImageClipper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0); }
  @supports (-ms-ime-align: auto) {
    .ImageClipper {
      overflow: hidden;
      -webkit-clip-path: url("#edgeclippath");
              clip-path: url("#edgeclippath"); } }

.ImageHolder {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0.3s linear; }
  .ImageHolder.show {
    opacity: 1 !important; }
  .ImageHolder.inset {
    margin: -15px; }

.PageSection {
  /*transform: translate3d(0,0,0);*/
  position: relative;
  width: 100%;
  height: auto;
  overflow: initial;
  /*clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);*/ }

#HeroSection {
  z-index: 2;
  height: 120vh;
  background-color: #1f3864;
  /*clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);*/ }

.HeroCopyContainer {
  position: absolute;
  top: 75vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white; }
  @media screen and (min-width: 768px) and (orientation: portrait) {
    .HeroCopyContainer {
      top: 80vh; } }
  @media screen and (max-width: 575px) {
    .HeroCopyContainer {
      top: 58vh; } }
  .HeroCopyContainer .CopyWrapper {
    max-width: 80%;
    align-items: center; }
  .HeroCopyContainer .CopyTitle {
    text-align: center;
    display: flex;
    flex-direction: column; }
  .HeroCopyContainer .CopyBody {
    text-align: center;
    font-weight: 400; }

#hero-bg,
#hero-bg-nav,
#hero-logo,
#hero-girl,
#hero-girl-nav,
.brand-image,
#hero-composite,
#hero-composite-nav,
#about-first-image-1,
#about-first-image-1-nav,
#about-first-image-2,
#about-first-image-2-nav,
#about-first-image-3,
#about-first-image-3-nav,
#about-second-image-1,
#about-second-image-1-nav,
#about-second-image-2,
#about-second-image-2-nav {
  position: fixed;
  top: 0;
  height: 120vh;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  /*background-attachment:fixed;*/ }
  #hero-bg.NavImage,
  #hero-bg-nav.NavImage,
  #hero-logo.NavImage,
  #hero-girl.NavImage,
  #hero-girl-nav.NavImage,
  .brand-image.NavImage,
  #hero-composite.NavImage,
  #hero-composite-nav.NavImage,
  #about-first-image-1.NavImage,
  #about-first-image-1-nav.NavImage,
  #about-first-image-2.NavImage,
  #about-first-image-2-nav.NavImage,
  #about-first-image-3.NavImage,
  #about-first-image-3-nav.NavImage,
  #about-second-image-1.NavImage,
  #about-second-image-1-nav.NavImage,
  #about-second-image-2.NavImage,
  #about-second-image-2-nav.NavImage {
    position: absolute; }

#hero-bg, #hero-bg-nav {
  background-image: url("/images/page1_hero_bg.jpg"); }

#hero-composite, #hero-composite-nav {
  background-image: url("/images/page1_hero_smaller.jpg"); }
  @media screen and (max-width: 991px) {
    #hero-composite, #hero-composite-nav {
      /*position:absolute;*/ } }

#hero-logo {
  /*background-image: url('/images/page1_hero_logo.png');*/
  position: absolute;
  width: 80%;
  top: 32vh;
  left: 10%; }
  #hero-logo .logo {
    fill: white; }
    @media screen and (min-width: 992px) {
      #hero-logo .logo.sm {
        display: none; } }
    @media screen and (max-width: 991px) {
      #hero-logo .logo.lg {
        display: none; } }

/*#hero-girl, #hero-girl-nav {
   background-image: url('/images/page1_hero_girl.png');
}*/
/*#HeroCopy {
  position:fixed;
  top:80vh;
}*/
.brand-image {
  height: 100vh;
  background-image: url("/images/page1_brand_bg.jpg");
  background-position: 50%; }
  @supports (-ms-ime-align: auto) {
    .brand-image {
      position: absolute;
      min-height: 100%; } }

#product-1 {
  height: 100%;
  background-image: url("/images/page1_products_oil.png");
  background-size: contain;
  background-position: center top; }

#product-2 {
  height: 100%;
  background-image: url("/images/page1_products_set.png");
  background-size: contain; }

#brand-blue, #brand-blue-nav, #brand-white, #brand-white-nav {
  position: absolute;
  height: 100vh;
  top: 0;
  /*background-color: rgba(150,50,150,0.5);*/
  width: 100vw; }

@supports (-ms-ime-align: auto) {
  #brand-blue-nav, #brand-white-nav {
    display: none; } }

@supports (-ms-ime-align: auto) {
  #brand-bg-nav {
    display: none; } }

.StickyHolder {
  position: absolute;
  width: 100%;
  height: 100%; }

#brand-blue, #brand-white {
  position: -webkit-sticky;
  position: sticky;
  top: 0; }
  #brand-blue.isChromeOnMac, #brand-white.isChromeOnMac {
    position: relative;
    height: 100%; }
  @media screen and (max-width: 1199px) {
    #brand-blue, #brand-white {
      position: relative;
      height: 100%; } }

#brand-blue-nav {
  background-color: rgba(31, 56, 100, 0.8); }

#brand-white-nav {
  background-color: rgba(255, 255, 255, 0.8); }

#ProductSection {
  position: relative;
  top: 0;
  z-index: 3;
  background-color: #efeeee;
  height: 150vh;
  overflow: hidden;
  -webkit-clip-path: initial;
          clip-path: initial; }
  #ProductSection.readyToScroll {
    overflow-y: scroll; }
  #ProductSection .Divider {
    border-bottom: 1px solid #1f3864; }
  #ProductSection .CopyTitle, #ProductSection .CopyBody {
    text-align: left;
    color: #1f3864; }
  #ProductSection .LineFiller {
    background-color: #1f3864; }

#product-svg-element {
  position: absolute; }
  @media screen and (min-width: 1200) {
    #product-svg-element .mobile {
      display: none; } }
  #product-svg-element .mobile.isChromeOnMac {
    display: initial !important; }
  @media screen and (max-width: 1199) {
    #product-svg-element .desktop {
      display: none; } }
  #product-svg-element .desktop.isChromeOnMac {
    display: none; }

#ProductContainer {
  position: relative;
  height: 100%;
  width: 90%;
  margin: auto;
  padding: 0; }
  #ProductContainer .grid {
    margin: 0; }

#ProductSVGGrid {
  position: absolute;
  height: 100%;
  width: 100%; }

#ProductGrid-1 {
  top: calc(50px + 5vh);
  height: 70vh; }
  @media screen and (max-width: 1200px) and (orientation: portrait) {
    #ProductGrid-1 {
      height: 50vh; } }
  @media screen and (max-width: 575px) {
    #ProductGrid-1 {
      top: 5vh; } }
  #ProductGrid-1 .grid {
    height: 100%; }

#ProductGrid-2 {
  top: calc(50px + 25vh); }
  @media screen and (min-width: 1200px) {
    #ProductGrid-2 {
      top: calc(50px + 15vh); } }
  @media screen and (min-width: 768px) and (orientation: portrait) {
    #ProductGrid-2 {
      top: calc(50px + 10vh); } }
  @media screen and (min-width: 576px) and (orientation: portrait) {
    #ProductGrid-2 {
      top: calc(50px + 5vh); } }

#ProductGrid-3 {
  height: 50vh; }
  @media screen and (orientation: portrait) {
    #ProductGrid-3 {
      height: 30vh; } }
  #ProductGrid-3 .grid {
    height: 100%; }

#BrandSection {
  z-index: 2;
  height: 190vh;
  overflow: inherit;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  z-index: 2; }
  @supports (-ms-ime-align: auto) {
    #BrandSection {
      -webkit-clip-path: url("#edgeclippath");
              clip-path: url("#edgeclippath"); } }
  #BrandSection #BrandContainer {
    position: relative;
    height: 100%;
    width: 90%;
    margin: auto;
    padding: 0; }
    #BrandSection #BrandContainer .grid {
      margin: 0;
      position: relative; }
  #BrandSection .Divider {
    border-bottom: 1px solid white; }
  #BrandSection .CopyTitle, #BrandSection .CopyBody {
    text-align: left;
    color: white; }
  #BrandSection .BrandCopy#BrandGrid-1 {
    top: 20vh; }
    @media screen and (max-width: 1199px) {
      #BrandSection .BrandCopy#BrandGrid-1 {
        top: 10vh; } }
  #BrandSection .BrandCopy#BrandGrid-2 {
    margin-top: 50vh; }
  #BrandSection #BrandMarkLogo {
    width: 80%;
    padding-bottom: 30%;
    margin-top: 4em;
    background-image: url("/images/lusaria_qa_mark.png");
    background-size: contain;
    background-repeat: no-repeat; }

.invisible {
  transition: opacity 0.5s ease;
  opacity: 0.0; }

.visible {
  transition: opacity 0.5s ease;
  opacity: 1.0; }

/* ABOUT PAGE */
/**************/
#AboutFirstSection {
  z-index: 2;
  height: 230vh;
  background-color: white;
  /*clip-path: inset(0 0 0 0);*/ }
  @media screen and (max-width: 575px) {
    #AboutFirstSection {
      height: 350vh; } }
  #AboutFirstSection #AboutHeroGrid {
    top: 50vh; }
    @media screen and (min-width: 576px) {
      #AboutFirstSection #AboutHeroGrid {
        display: none; } }
    #AboutFirstSection #AboutHeroGrid .CopyWrapper {
      height: auto;
      width: 100%;
      max-width: initial;
      align-items: center; }
    #AboutFirstSection #AboutHeroGrid .CopyTitle {
      font-size: 3.5em;
      font-weight: 800;
      color: white;
      padding-bottom: initial; }
  #AboutFirstSection .ImageHolder {
    transition: opacity 0.3s linear; }
    #AboutFirstSection .ImageHolder.show {
      opacity: 1 !important; }
  #AboutFirstSection .CopyTitle, #AboutFirstSection .CopyBody {
    z-index: 2;
    text-align: left;
    color: white;
    opacity: initial;
    padding: 15px; }
  #AboutFirstSection .expander .CopyBody {
    opacity: 0;
    transition: opacity 0.2s linear;
    transition-delay: 0s; }
    @media screen and (max-width: 575px) {
      #AboutFirstSection .expander .CopyBody {
        opacity: 1; } }
  #AboutFirstSection .expander .backer-1 {
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
    transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
    transition: transform 0.2s linear, -webkit-transform 0.2s linear;
    transition-delay: 0.2s; }
    @media screen and (max-width: 575px) {
      #AboutFirstSection .expander .backer-1 {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1); } }
  #AboutFirstSection .expander.show .CopyBody {
    opacity: 1;
    transition-delay: 0.3s; }
  #AboutFirstSection .expander.show .backer-1 {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    transition-delay: 0s; }
  #AboutFirstSection .yOffset-100 {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%); }
    @media screen and (max-width: 575px) {
      #AboutFirstSection .yOffset-100 {
        -webkit-transform: translateY(0);
                transform: translateY(0); } }
  #AboutFirstSection #AboutGrid-1 {
    top: 90vh; }
    @media screen and (max-width: 575px) {
      #AboutFirstSection #AboutGrid-1 {
        top: 100vh; } }
  #AboutFirstSection #AboutGrid-2 {
    top: 140vh; }
    @media screen and (max-width: 575px) {
      #AboutFirstSection #AboutGrid-2 {
        top: 200vh; } }
  #AboutFirstSection #AboutGrid-3 {
    top: 190vh; }
    @media screen and (max-width: 575px) {
      #AboutFirstSection #AboutGrid-3 {
        top: 300vh; } }

#AboutSecondSection {
  z-index: 3;
  height: 190vh;
  overflow: inherit;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0); }
  @supports (-ms-ime-align: auto) {
    #AboutSecondSection {
      -webkit-clip-path: url("#edgeclippath");
              clip-path: url("#edgeclippath"); } }
  #AboutSecondSection #AboutSecondContainer {
    position: relative;
    height: 100%;
    width: 90%;
    margin: auto;
    padding: 0; }
    #AboutSecondSection #AboutSecondContainer .grid {
      margin: 0;
      position: relative; }
  #AboutSecondSection .ImageHolder {
    transition: opacity 0.3s linear; }
    #AboutSecondSection .ImageHolder.show {
      opacity: 1 !important; }
  #AboutSecondSection .Divider {
    border-bottom: 1px solid white; }
  #AboutSecondSection .CopyTitle, #AboutSecondSection .CopyBody {
    text-align: left;
    color: #1999d6; }
  #AboutSecondSection .AboutSecondCopy#AboutSecondGrid-1 {
    top: 20vh; }
    @media screen and (max-width: 1199px) {
      #AboutSecondSection .AboutSecondCopy#AboutSecondGrid-1 {
        top: 10vh;
        /*@media screen and (max-width: 767px) and (orientation: portrait) {
          top:0vh;
        }*/ } }
  #AboutSecondSection .AboutSecondCopy#AboutSecondGrid-2 {
    margin-top: 50vh; }
    @media screen and (max-width: 575px) {
      #AboutSecondSection .AboutSecondCopy#AboutSecondGrid-2 {
        margin-top: 75vh; } }
  #AboutSecondSection .AboutSecondCopy#AboutSecondGrid-3 {
    margin-top: 20vh; }
    @media screen and (max-width: 575px) {
      #AboutSecondSection .AboutSecondCopy#AboutSecondGrid-3 {
        margin-top: 75vh; } }
  #AboutSecondSection #BrandMarkLogo {
    width: 100%;
    padding-bottom: 30%;
    margin-top: 5em;
    background-image: url("/images/lusaria_labs_mark.png");
    background-size: contain;
    background-repeat: no-repeat; }

#about-first-image-1, #about-first-image-1-nav {
  height: 100vh;
  background-position: 50%;
  background-image: url("/images/about-first-image-1.jpg"); }

#about-first-image-2, #about-first-image-2-nav {
  height: 100vh;
  background-position: 50%;
  background-image: url("/images/about-first-image-2.jpg");
  opacity: 0; }

#about-first-image-3, #about-first-image-3-nav {
  height: 100vh;
  background-position: 50%;
  background-image: url("/images/about-first-image-3.jpg");
  opacity: 0; }

#about-second-image-1, #about-second-image-1-nav {
  background-image: url("/images/about-second-image-1.jpg"); }
  @media screen and (min-width: 576px) and (max-width: 991px) {
    #about-second-image-1, #about-second-image-1-nav {
      background-position: 35%; } }
  @media screen and (max-width: 575px) {
    #about-second-image-1, #about-second-image-1-nav {
      background-position: 25%; } }

#about-second-image-2, #about-second-image-2-nav {
  background-image: url("/images/about-second-image-2.jpg");
  opacity: 0; }

@supports (-ms-ime-align: auto) {
  #about-second-image-1, #about-second-image-2 {
    position: absolute; } }

@supports (-ms-ime-align: auto) {
  #about-second-image-1-nav, #about-second-image-2-nav {
    display: none; } }

.CopyBackerHolder {
  height: 100%;
  width: 100%;
  position: absolute;
  opacity: 0.8; }
  .CopyBackerHolder .CopyBackerBox {
    margin: -15px 0 0 -15px;
    position: absolute;
    background-color: #1999d6; }
    .CopyBackerHolder .CopyBackerBox.backer-1 {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .CopyBackerHolder .CopyBackerBox.backer-2 {
      width: 50px;
      height: 50px; }
      @media screen and (max-width: 575px) {
        .CopyBackerHolder .CopyBackerBox.backer-2 {
          display: none; } }
    .CopyBackerHolder .CopyBackerBox#copy-1-backer-2 {
      right: -10px;
      bottom: -10px; }
    .CopyBackerHolder .CopyBackerBox#copy-2-backer-2 {
      left: -25px;
      bottom: -10px; }
    .CopyBackerHolder .CopyBackerBox#copy-3-backer-2 {
      right: -10px;
      bottom: -10px; }
    .CopyBackerHolder .CopyBackerBox#copy-1-backer-1, .CopyBackerHolder .CopyBackerBox#copy-3-backer-1 {
      -webkit-transform-origin: bottom right;
              transform-origin: bottom right; }
    .CopyBackerHolder .CopyBackerBox#copy-2-backer-1 {
      -webkit-transform-origin: bottom left;
              transform-origin: bottom left; }

#fastPortalHolder {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  /*overflow: hidden;*/ }
  #fastPortalHolder.white {
    opacity: 0.9; }
  #fastPortalHolder .portalBox {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0px solid;
    background-color: #1f3864; }
    #fastPortalHolder .portalBox.white {
      background-color: white; }
    #fastPortalHolder .portalBox.top {
      top: 0;
      border-color: blue;
      -webkit-transform-origin: top;
              transform-origin: top; }
    #fastPortalHolder .portalBox.right {
      right: 0;
      border-color: yellow;
      -webkit-transform-origin: right;
              transform-origin: right; }
    #fastPortalHolder .portalBox.bottom {
      bottom: 0;
      border-color: blue;
      -webkit-transform-origin: bottom;
              transform-origin: bottom; }
    #fastPortalHolder .portalBox.left {
      left: 0;
      border-color: yellow;
      -webkit-transform-origin: left;
              transform-origin: left; }
    #fastPortalHolder .portalBox.box1 {
      top: 0;
      right: 0;
      border-color: purple;
      -webkit-transform-origin: right top;
              transform-origin: right top; }
    #fastPortalHolder .portalBox.box2 {
      bottom: 0;
      left: 0;
      border-color: purple;
      -webkit-transform-origin: left bottom;
              transform-origin: left bottom; }
    #fastPortalHolder .portalBox.box3 {
      bottom: 0;
      right: 0;
      -webkit-transform-origin: right bottom;
              transform-origin: right bottom; }
      @media screen and (min-width: 1200px) {
        #fastPortalHolder .portalBox.box3 {
          display: none; } }
      #fastPortalHolder .portalBox.box3.isChromeOnMac {
        display: initial !important; }

#ContactHero {
  height: 60vh; }
  #ContactHero #ContactHeroGrid {
    bottom: 25%; }
  #ContactHero .CopyWrapper {
    height: auto;
    width: 100%;
    max-width: initial;
    align-items: center; }
  #ContactHero .CopyTitle {
    font-size: 3.5em;
    font-weight: 800;
    color: white;
    padding-bottom: initial; }

#contact-hero-image, #contact-hero-image-nav {
  position: fixed;
  top: 0;
  height: 80vh;
  background-size: cover;
  background-image: url("/images/contact-hero.jpg"); }

#contact-hero-image-nav {
  position: absolute; }

#ContactDetails, #OfficeDetails {
  background-color: #1f3864;
  padding: 0; }
  #ContactDetails .container, #OfficeDetails .container {
    position: relative;
    width: 90%;
    margin: auto;
    padding: 5vh 0 5vh 0; }
  #ContactDetails .grid, #OfficeDetails .grid {
    position: relative;
    margin: 0; }
  #ContactDetails .CopyBody, #OfficeDetails .CopyBody {
    color: white;
    opacity: 1;
    text-align: left; }
    #ContactDetails .CopyBody.small, #OfficeDetails .CopyBody.small {
      color: rgba(255, 255, 255, 0.5); }

#ContactDetailsNav .NavWrapper, #OfficeDetailsNav .NavWrapper {
  background-color: #1f3864; }

#OfficeDetails #OfficeDetailsGrid .office-col:nth-child(n+2) {
  border-left: 1px solid rgba(255, 255, 255, 0.5); }
  @media screen and (max-width: 575px) {
    #OfficeDetails #OfficeDetailsGrid .office-col:nth-child(n+2) {
      border-left: initial;
      border-top: 1px solid rgba(255, 255, 255, 0.5); } }

#OfficeDetails .CopyWrapper {
  text-align: center;
  align-items: initial; }

#OfficeDetails .CopyBody {
  text-align: center;
  text-align-last: initial;
  width: 100%; }
  #OfficeDetails .CopyBody.small .heavy {
    color: white; }

#OfficesHero {
  height: 40vh;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  pointer-events: none; }
  @supports (-ms-ime-align: auto) {
    #OfficesHero {
      overflow: hidden;
      -webkit-clip-path: url("#edgeclippath");
              clip-path: url("#edgeclippath"); } }
  #OfficesHero #OfficesHeroGrid {
    bottom: 25%; }
  #OfficesHero .CopyWrapper {
    height: auto;
    width: 100%;
    max-width: initial;
    align-items: center; }
  #OfficesHero .CopyTitle {
    font-size: 3.5em;
    font-weight: 800;
    color: white;
    padding-bottom: initial; }

#offices-hero-image, #offices-hero-image-nav {
  position: fixed;
  top: 0;
  height: 100vh;
  background-size: cover;
  background-image: url("/images/contact-offices-hero.jpg"); }
  @supports (-ms-ime-align: auto) {
    #offices-hero-image, #offices-hero-image-nav {
      position: absolute;
      min-height: 100%; } }

#offices-hero-image-nav {
  position: absolute; }

#OfficeDetails .CopyWrapper {
  padding: 10px 0 10px 0; }

/* NAV ELEMENTS */
/****************/
.NavOverlay {
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  z-index: 10;
  pointer-events: none; }
  @supports (-ms-ime-align: auto) {
    .NavOverlay {
      -webkit-clip-path: url("#edgeclippath");
              clip-path: url("#edgeclippath"); } }
  .NavOverlay * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
  .NavOverlay.first {
    position: fixed;
    -webkit-clip-path: initial;
            clip-path: initial; }

.NavMaskSection {
  /*display: none;*/
  background-color: #1f3864;
  position: fixed;
  width: 100%;
  height: 50px;
  top: 0;
  overflow: hidden;
  border: 0px solid coral;
  pointer-events: all;
  /*clip-path: inset(0 0 0 0);*/ }
  .NavMaskSection.grey {
    background-color: #efeeee; }
  .NavMaskSection.white {
    background-color: white; }

.NavWrapper {
  /*display: none;*/
  position: absolute;
  top: 0;
  width: 100%;
  height: 50px;
  /*clip-path: inset(0 0 0 0);*/
  z-index: 100;
  pointer-events: all; }
  .NavWrapper .NavHolder {
    position: fixed;
    top: 0;
    left: 5%;
    width: 90%;
    height: 50px;
    border-bottom: 1px solid white;
    overflow: hidden; }
    .NavWrapper .NavHolder .container, .NavWrapper .NavHolder .grid {
      position: relative;
      height: 100%;
      padding: 0; }
      .NavWrapper .NavHolder .container#NavMainGrid, .NavWrapper .NavHolder .grid#NavMainGrid {
        margin: 0; }
    .NavWrapper .NavHolder .NavLogo {
      position: relative;
      width: 100%;
      height: 100%;
      /*background-image: url('/images/nav_logo_white.png');*/
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-transform: translateY(40px);
              transform: translateY(40px);
      transition: -webkit-transform 0.1s linear;
      transition: transform 0.1s linear;
      transition: transform 0.1s linear, -webkit-transform 0.1s linear;
      /*margin-left:15px;*/ }
      .NavWrapper .NavHolder .NavLogo.showing {
        -webkit-transform: translateY(0px);
                transform: translateY(0px); }
      .NavWrapper .NavHolder .NavLogo .logo {
        fill: white; }
    .NavWrapper .NavHolder .NavButtons {
      width: 100%;
      /*height:calc(100% - 3px);*/
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 1.6em;
      letter-spacing: 0.05em;
      font-weight: 400;
      color: white;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      transition: border-bottom 0.05s linear; }
      .NavWrapper .NavHolder .NavButtons:hover {
        border-bottom: 3px solid white; }
    .NavWrapper .NavHolder.blue {
      border-bottom: 1px solid #1f3864; }
      .NavWrapper .NavHolder.blue .NavLogo .logo {
        fill: #1f3864; }
      .NavWrapper .NavHolder.blue .NavButtons {
        color: #1f3864; }
        .NavWrapper .NavHolder.blue .NavButtons:hover {
          border-bottom: 3px solid #1f3864; }
    .NavWrapper .NavHolder.lightblue {
      border-bottom: 1px solid #1999d6; }
      .NavWrapper .NavHolder.lightblue .NavLogo .logo {
        fill: #1999d6; }
      .NavWrapper .NavHolder.lightblue .NavButtons {
        color: #1999d6; }
        .NavWrapper .NavHolder.lightblue .NavButtons:hover {
          border-bottom: 3px solid #1999d6; }

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */ }