/* fullscreen video */
.vimeo-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}
.vimeo-wrapper iframe {
  pointer-events: none;
  width: 100vw;
  height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.vimeo-wrapper:hover .video-control, .vimeo-wrapper:hover .audio-control {
  opacity: 0.3;
}

/* controls */
.video-control {
  width: 44px; /*fallback*/
  height: 44px; /*fallback*/
  width: 10vw;
  height: 10vw;
  min-width: 44px;
  min-height: 44px;

  background-image: url('../images/icons/icon-play.svg');  
  background-size: contain;
  background-repeat: no-repeat;

  transition: opacity 0.3s;
}
.video-control:hover {
  opacity: 1 !important;
}
.video-control.playing {
  opacity: 0.3;
  background-image: url('../images/icons/icon-pause.svg');
}

.audio-control {
  /*display: block;*/
  width: 34px; /*fallback*/
  height: 34px; /*fallback*/
  width: 5vw;
  height: 5vw;
  min-width: 34px;
  min-height: 34px;

  background-image: url('../images/icons/icon-mute.svg');
  background-size: contain;
  background-repeat: no-repeat;

  transition: opacity 0.3s;
}
.audio-control:hover {
  opacity: 1 !important;
}
.playing > .audio-control {
  opacity: 0.3;
}
.audio-control.muted {
  background-image: url('../images/icons/icon-unmute.svg');
}

/* utilities */
.absolute-center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
.absolute-bottomleft {
  position: absolute;
  bottom: 10px;
  left: 10px;
}