/**
 * About Hero Styles
 *
 * @package PhilFred
 */

/* ==========================================================================
   HERO ABOUT
   ========================================================================== */

.hero-about {
  position: relative;
  height: 728px;
}

@media (max-width: 1440px) {
  .hero-about {
    height: calc(663px + 65 * (100vw - 390px) / 1050);
  }
}

.hero-about .plyr {
  height: 100%;
}

.hero-about .plyr--full-ui input[type=range] {
  color: rgb(230, 26, 60);
}

.hero-about .plyr__control--overlaid {
  background: rgba(230, 26, 60, 0.8);
}

.hero-about .plyr--video .plyr__control.plyr__tab-focus,
.hero-about .plyr--video .plyr__control:hover,
.hero-about .plyr--video .plyr__control[aria-expanded=true] {
  background: rgb(230, 26, 60);
}

.hero-about .plyr__control.plyr__tab-focus {
  -webkit-box-shadow: 0 0 0 0.3125rem rgba(230, 26, 60, 0.5);
  box-shadow: 0 0 0 0.3125rem rgba(230, 26, 60, 0.5);
}

.hero-about .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
  background: rgba(230, 26, 60, 0.8);
}

.hero-about__video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}