.hero {
  /* Override domain stylesheet */
  box-shadow: none;
  /* Let the hexes overflow the right edge without scroll */
  overflow: hidden;
}

@media (min-width: 890px) {

  .hero {
    /* iPad Fix (restore initial overflow setting) */
    overflow: visible;
  }

}


.hero__body {
  /* Add to stacking context so z-index works */
  position: relative;
  /* Position above all other hero elements */
  z-index: 0004;
}

@media (min-width: 600px) {

  .hero__body {
    /* Contrain size to fake columns */
    max-width: 41%;
  }

}

.hero__title {
  /* Basic styling */
  color: #00476B;
  font-size: 2.55em;
  text-transform: uppercase;
  /* Push content down from top of hero */
  padding-top: 2em;
}

@media (min-width: 890px) {

  .hero__title {
    /* Have a larger title on larger screens */
    font-size: 3em;
  }

}

.hero__title span {
  /* Highlight title text */
  /* Force highlight to start on new line */
  display: block;
  /* Basic styling */
  color: #006C95;
}

.hero__content {
  /* Basic styling */
  font-size: 1.2em;
  line-height: 1.5;
  /* Add separation with title */
  padding-top: 1.25em;
}

.hero__buttons {
  /* Add separation with content */
  margin-top: 1em;
}

/*
 * BG Hex
 */

/* Container */

.hero__background {
  /* Size hex */
  width: 29em;
  max-width: 66%;
  /* Position it
     Overhang the top right by default */
  position: absolute;
  top: -2em;
  right: -11em;
  /* Shrink it by default */
  -webkit-transform: scale(0.75, 0.75);
  transform: scale(0.75, 0.75);
}

@media (min-width: 890px) {

  .hero__background {
    /* Restore its natural position */
    top: 0;
    right: 0;
    /* Restore its natural size */
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }

}

.hero-bg {
  /* Hide the seam casued by subpixel rounding errors */
  box-shadow: inset 0 0 0 1px #fff;
}

/* IE Fix */

.hero-bg__hex-wrap {
  /* 0 height can fail to render in some browsers */
  height: 1px;
  /* Set aspect ratio box */
  padding-bottom: 140%;
  /* Hide some invisible overflow on IE */
  overflow-x: hidden;
}

@supports (display: grid) {
  /* The above IE fix breaks compliant browsers
     display: grid coincidentally targets all the
     browsers messed up by the fix */

  .hero-bg__bg-hex {
    /* Fill parent */
    position: absolute;
    top: 0;
    left: 0;
  }

}

/* Floating Hexes */

.hero-bg__hex {
  /* Make them able to be sized */
  display: block;
  /* Set up BG */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  /* Set up custom positioning */
  position: absolute;
}

.hero-bg__hex--lgrey,
.hero-bg__hex--white {
  /* Basic styling */
  background-image: url(https://www.modusadvanced.com/hubfs/raw_assets/public/MODUS/ASSETS/IMG/hex-lgrey.svg);
  /* Set size */
  width: 15em;
  height: 15em;
  /* Position the hex */
  bottom: 9em;
  left: -7em;
  /* Set its depth */
  z-index: 0003;
}

.hero-bg__hex--white {
  /* Basic styling */
  background-image: url(https://www.modusadvanced.com/hubfs/raw_assets/public/MODUS/ASSETS/IMG/hex-whites.svg);
}

@media (max-width: 600px) {

  .hero-bg__hex--lgrey,
  .hero-bg__hex--white {
    /* Pull up top on small screens */
    top: -3em;
    bottom: auto;
    /* Slightly shrink it as well */
    width: 12.5em;
    height: 12.5em;
  }

}

.hero-bg__hex--grey {
  /* Basic styling */
  background-image: url(https://www.modusadvanced.com/hubfs/raw_assets/public/MODUS/ASSETS/IMG/hex-grey.svg);
  /* Set size */
  width: 8em;
  height: 8em;
  /* Position the hex */
  bottom: 3em;
  left: -9em;
  /* Set its depth */
  z-index: 0001;
}

.hero-bg__hex--green {
  /* Basic styling */
  background-image: url(https://www.modusadvanced.com/hubfs/raw_assets/public/MODUS/ASSETS/IMG/hex-green.svg);
  /* Set size */
  width: 3.33em;
  height: 3.33em;
  /* Position the hex */
  bottom: 9.2em;
  left: -11.5em;
  /* Set its depth */
  z-index: 0002;
}

.hero--bg__logo {
  /* Fill parent
     Avoid going to the edges to simulate padding */
  position: absolute;
  top: 3em;
  right: 2em;
  bottom: 3em;
  left: 2em;
  /* Size BG */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Oversized hex */

@media (min-width: 980px) {

  .hero--bg-oversized {
    /* Hide the unneeded bit of hex */
    overflow: hidden;
  }

  .hero__background--oversized {
    /* Theming overrides */
    /* Make it a larger and relative size */
    width: 50%;
    max-width: 100%;
  }

  .hero--bg-oversized .hero-bg__hex--grey {
    /* Theming overrides */
    /* Resize the hex */
    width: 4em;
    height: 4em;
    /* Reposition the hex */
    left: 4em;
    top: 4em;
    bottom: auto;
  }

  .hero--bg-oversized .hero-bg__hex--green {
    /* Theming overrides */
    /* Resize the hex */
    width: 2em;
    height: 2em;
    /* Reposition the hex */
    left: 8em;
    top: 1.25em;
    bottom: auto;
  }

  .hero--bg-oversized .hero-bg__hex--lgrey,
  .hero--bg-oversized .hero-bg__hex--white {
    /* These hexes aren't used in this layout */
    display: none;
  }

}

.hero--video .video-wrapper {
  padding-top: 52.65%;
}

.hero__video {
  width: 100%;
  position: relative;
  margin-top: 2.33em;
}

@media (min-width: 960px) {

  .section-container--flex {
    display: flex;
  }
  
  .hero__video {
    width: 50%;
    padding-left: 4%;
    flex: 1;
    margin-top: 0;
  }
  
}