.plyr {
  --icon-size: 26px;
  --scale: .8;
  --play-btn-padding: 11px;
  --play-btn-margin: 22px;
  --plyr-color-main: #fdd43a;
  --plyr-range-track-height: 1px;
  --plyr-font-family: Lato;
  --plyr-control-icon-size: calc(var(--icon-size) * var(--scale));
  --plyr-control-spacing: calc(10px * var(--scale));
}

.plyr--video {
  --plyr-video-range-track-background: #fff;
  --plyr-video-controls-background: none;
  --plyr-video-background: none;
  --plyr-video-control-background-hover: none;
}

.plyr--audio {
  --plyr-audio-controls-background: none;
  --plyr-audio-control-color: #fff;
  --plyr-audio-range-track-background: #fff;
  --plyr-audio-range-thumb-active-shadow-color: rgba(255, 255, 255, .5);
  --plyr-audio-control-background-hover: none;
}

@media screen and (min-width: 600px) and (orientation: portrait),
  screen and (min-height: 600px) and (orientation: landscape) {
  .plyr {
    --scale: 1;
  }
}

/** This sets the padding between the controls and the edge of the player. */
.plyr__controls {
  padding-right: 24px !important;
  padding-left: 18px !important;
  padding-bottom: 10px !important;
}

.plyr--audio .plyr__controls {
  padding: 0 !important;
  padding-right: 6px !important;
}

/** This renders a rounded gray rectangle underneath the controls.  */
.plyr__controls:before {
  content: "";
  display: block;
  position: absolute;
  height: calc(40px * var(--scale));
  left: calc((((var(--play-btn-padding) * 2) + var(--play-btn-margin) + var(--icon-size)) * var(--scale)) + 10px);
  right: 18px;
  bottom: 14px;
  background: #898989;
  opacity: 0.41;
  border-radius: 14px;
  z-index: -1;
}

.plyr--audio .plyr__controls:before {
  left: calc((((var(--play-btn-padding) * 2) + var(--play-btn-margin) + var(--icon-size)) * var(--scale)) - 8px);
  right: 0;
  bottom: 4px;
}

/** This bolds the player time font. */
.plyr__controls__item.plyr__time--current.plyr__time {
  font-weight: bold;
}

.plyr__control {
  /** This disables the tap highlight color on mobile. */
  -webkit-tap-highlight-color: transparent;

  /**
   * By default, the margin is not 0 which causes vertical alignment issues on
   * Safari.
   */
  margin-top: 0;
  margin-bottom: 0;
}

/** The play button is a bit larger than the rest of the controls. */
.plyr__control[data-plyr="play"] {
  --plyr-control-radius: 50%;
  background: var(--plyr-color-main);
  padding: calc(var(--play-btn-padding) * var(--scale));
  margin-right: calc(var(--play-btn-margin) * var(--scale)) !important;
}

.plyr__control[data-plyr="play"] .icon--not-pressed {
  position: relative;
  left: calc(4px * var(--scale));
}

.plyr__control[data-plyr="play"]:hover {
  /**
   * This was calculated by darkening the main color (#FDD43A) by 15 points.
   * https://sassme.jim-nielsen.com/
   */
  background: #e8b802;
}

/** The rewind icon has an odd aspect ratio that needs special sizing. */
.plyr__control[data-plyr="rewind"] svg {
  --rewind-icon-height: calc(18px * var(--scale));
  height: var(--rewind-icon-height);
  /** The original icon size is 61w and 28h. */
  width: calc((61 / 28) * var(--rewind-icon-height));
}