/* -------------------------
----- Video container ------
------------------------- */

.video-container{
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: -1;
}

/* -------------------------------------------------------
--- Video Styles for BG Video with sound off/on button ---
------------------------------------------------------- */

.video-container{
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: -1;
}

#bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#mute-button::before {
  content:  '\f028';
}

#mute-button.muted::before {
  content:  '\f026';
}

#mute-button {
  position: absolute;
  top: 8rem;
  left: 75px;
  background: rgba(0,0,0,.5);
  border: none;
  color: #fff;
  z-index: 5;
  font-size: 2rem;
  border-radius: 2rem;
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
}

@media (min-aspect-ratio: 16/9) {
  .video-container #bg-video {
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-container #bg-video {
    width: 177.78vh;
  }
}

@media (max-width: 1195px) {
  #mute-button {
    left: 25px;
  }
}