@charset "UTF-8";

div.hero div.heroes
{
   height: calc(100vh - 54px);
   width: 100%;
   margin-top: 54px;
   position: relative;
   overflow-x: hidden;
   text-align: center;
}

div.hero div.heroes img.banner,
div.hero div.heroes img.mobile
{
   position: absolute;
   width: auto;
   height: 100%;
   top: 0;
   left: 50%;
   opacity: 0;
   transition: opacity 1000ms ease;
   z-index: 10;

   object-fit: cover;
   min-width: 100%;
   min-height: 100%;
   transform: translateX(-50%);
}

div.hero div.heroes div.banner,
div.hero div.heroes div.mobile
{
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   transition: opacity 1000ms ease;
   z-index: 10;
   min-width: 100%;
   min-height: 100%;
}

div.hero div.heroes img.banner.top,
div.hero div.heroes img.mobile.top,
div.hero div.heroes div.banner.top
{
   opacity: 1;
}

div.hero div.heroes img.banner,
div.hero div.heroes div.mobile,
div.hero div.heroes div.mobile.top
{
   display: none;
}

div.hero div.heroes div.banner > .site-video--background
{
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   aspect-ratio: auto;
}

div.hero div.heroes div.banner > .site-video--background .site-video__media
{
   top: 50%;
   left: 50%;
   right: auto;
   bottom: auto;
   width: max(100%, 177.777778vh);
   height: max(56.25vw, 100vh);
   min-width: 0;
   min-height: 0;
   aspect-ratio: 16 / 9;
   transform: translate(-50%, -50%);
}

div.hero div.indicators
{
   position: absolute;
   z-index: 20;
   bottom: 18px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   width: 100%;
   height: auto;
}

div.hero div.indicators a.indicator
{
   height: 13px;
   width: 13px;
   background-image: url('../../indicator-hollow.png');
   background-repeat: no-repeat;
   background-size: contain;
   background-blend-mode: screen;
   display: inline-block;
   margin-left: 7px;
   margin-right: 7px;
   cursor: pointer;
}

div.hero div.indicators a.indicator.top
{
   background-image: url('../../indicator-solid.png');
}

div.hero div.caption
{
   position: absolute;
   left: 40%;
   bottom: 84px;
   width: 60%;
   height: auto;
   z-index: 30;
   opacity: 0.9;
}

div.hero div.caption h2
{
   position: relative;
   width: 100%;
   bottom: 0;
   left: 0;
}

div.hero div.caption h2 a
{
   display: block;
   font-family: HN57;
   font-size: 18px;
   font-weight: normal;
   line-height: 1.35em;
   text-align: left;
   vertical-align: middle;
   color: #000000;
   position: absolute;
   left: 0;
   bottom: 0;
   background-color: #FFFFFF;
   width: 84%;
   padding-top: 24px;
   padding-right: 8%;
   padding-left: 8%;
   padding-bottom: 24px;
   visibility: hidden;
}

div.hero div.caption h2 a.top
{
   visibility: visible;
}

div.hero div.caption h2 a span
{
   display: block;
   background-color: #FFDF00;
   transition: background-color 500ms ease-in-out;
   width: 100%;
   height: 3px;
   margin-top: 8px;
}

div.hero div.caption h2 a:hover span
{
   background-color: #BBBBBB;
}

@media (min-width: 767px) {

   div.hero div.indicators
   {
      position: absolute;
      z-index: 20;
      bottom: 18px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      width: 100%;
      height: auto;
   }

   div.hero div.indicators a.indicator
   {
      height: 13px;
      width: 13px;
      background-image: url('../../indicator-hollow.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-blend-mode: screen;
      display: inline-block;
      margin-left: 7px;
      margin-right: 7px;
      cursor: pointer;
   }

   div.hero div.indicators a.indicator.top
   {
      background-image: url('../../indicator-solid.png');
   }

   div.hero div.heroes
   {
      height: calc(100vh - 72px);
      margin-top: 72px;
   }

   div.hero div.heroes img.banner
   {
      display: block;
   }

   div.hero div.heroes img.mobile
   {
      display: none;
   }

   div.hero div.caption
   {
      left: 72%;
      bottom: 142px;
      width: 28%;
   }

   div.hero div.caption h2 a
   {
      font-size: 24px;
      line-height: 1.5em;
      width: 72%;
      padding-right: 20%;
   }
}