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

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

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

a.play-pause-button {
  width: 50px;
  height: 50px;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-container:hover + .video-control {
  opacity: 0.5;
}
.embed-container 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;
}
.video-control:hover {
  opacity: 1;
}
.video-control:before, .video-control:after {
  content: '';
  width: 100%;
  height: 100%;
  max-width: 131px;
  background-repeat: no-repeat;
  background-size: 100%;
  display: block;
  position: absolute;
}
.video-control:before {
  background-image: url("https://joekang.co/assets/image-hosting/video-buttons-white.png");
  background-position: 53% 98%;
  background-size: 332%;
  /*content: "\ea1c";*/
}
.video-control:after {
  background-image: url("https://joekang.co/assets/image-hosting/video-buttons-white.png");
  background-position: -292px -292px;
  background-size: 332%;
  /*content: "\ea1d";*/
}
.video-control.paused:after, .video-control.playing:before {
  opacity: 0;
}

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

/* audio button style */
.audio-control {
  opacity: 1;
  position: absolute;
  width: 6%;
  height: 6%;
  bottom: 3%;
  left: 2%;
  transition: opacity 0.3s;
}
.audio-control:hover {
  opacity: 1;
}
.audio-control:before, .audio-control:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  max-width: 36px;
  background-repeat: no-repeat;
  background-size: 100%;
  display: block;
}
.audio-control:before {
  background-image: url("https://joekang.co/assets/image-hosting/video-buttons-white.png");
  background-position: -1% -2%;
  background-size: 254%;
}
.audio-control:after {
  background-image: url("https://joekang.co/assets/image-hosting/video-buttons-white.png");
  background-position: 69% -1%;
  background-size: 254%;
}
.audio-control.unmuted:after, .audio-control.muted:before {
  opacity: 0;
}



.title-wrapper {
  text-align: center;
  margin: 3% 0;
  font-size: 2.5vw;
}
.title-wrapper span {
  color: #fff;
}