.aspect-ratio {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  @media screen and (orientation: portrait) {
    .aspect-ratio {
      width: 100%;
      aspect-ratio: 3 / 4;
    }
  }

#large-play-button{
    width: 163px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
#large-play-button::before{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    opacity: 0;
}
#large-play-button:hover{
    cursor: pointer;
}
@media(max-width: 1200px) {
    #large-play-button{
        width: 10%;
    }
}
  
#mute-button{
    width: 7%;
    position: absolute;
    left: 3.5%;
    top: 3.1%;
    z-index: 0;
    opacity: .8;
    transition: opacity .2s ease;
}
@media screen and (orientation: portrait) {
  #mute-button{
    top: 9.2%;
    width: 10%;
    left: 7.5%;
}
}
#mute-button:hover{
    opacity: 1;
}

#video-buttons #pause-button{
    display: none;
}
#video-buttons #play-button{
    display: block;
}
#video-buttons.playing #pause-button{
    display: block;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
#video-buttons.playing #play-button{
    display: none;
}

/*
 * VIDEO
 */
 .video-container{
    /* position: relative;
    overflow: hidden; */
    width: 100%;
  }
  .video-container-absolute{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    transition: opacity .4s ease;
  }
  .bg-video{
    width: 100%;
    height: auto;
  }
  .bg-video-absolute {
    width: auto;
    height: 100%;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .bg-video.show{
    opacity: 1;
  }
  #video-buttons{
    position: absolute;
    left: 50%;
    bottom: 2em;
    transform: translateX(-50%);
  }