.banner-container {
  width: 100%;
  max-width: 1200px;
  position: relative;
  margin: 0 auto;
}

.bkgd-image-style {
  position: relative;
  width: 100%;
}

.video-wrapper {
  width: 49.6%;
  position: absolute;
  top: 0px;
  height: auto;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;

  iframe, object, embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }


  iframe #player .controls-wrapper {
    display: none;
  }
}

/* video button style */

.video-control {
  opacity: 0;
  position: absolute;
  width: 22.5%;
  height: 40%;
  top: 31%;
  left: 38%;
  transition: opacity 0.3s;

  &:hover {
    opacity: 1;
  }

  &:before, &:after {
    content: '';
    width: 100%;
    height: 100%;
    max-width: 131px;
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: absolute;
  }

  &:before {
    background-image: url("img/video-buttons-black.png");
    background-position: 53% 98%;
    background-size: 332%;

    /*content: "\ea1c";*/
  }

  &:after {
    background-image: url("img/video-buttons-black.png");
    background-position: -292px -292px;
    background-size: 332%;

    /*content: "\ea1d";*/
  }

  &.paused:after, &.playing:before {
    opacity: 0;
  }
}

.video-control-show {
  opacity: 0.5;
}

/* audio button style */

.audio-control {
  opacity: 1;
  position: absolute;
  width: 6%;
  height: 9%;
  bottom: 3%;
  left: 2%;
  transition: opacity 0.3s;
  z-index: 9999;
}

.unmuted {
  opacity: 0.25;
}