.videoOverlayImageDesktop {
  background-image: url("../images/click-to-continue.png");
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
  animation-name: scale;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-play-state: running;
  background-position: center;
  background-size: cover;
}

.videoOverlayImageMobile {
  background-image: url("../images/click-to-continue.png");
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
  animation-name: scale;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-play-state: running;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* .video-holder {
  max-width: 898px;
  margin: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
} */

.overlayDesktopVideo {
  position: absolute;
  z-index: 1;
}

.overlayMobileVideo {
  position: absolute;
  z-index: 1;
  object-fit: cover;
  object-position: top;
}

iframe#player {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.embedContainer {
  position: relative;
  display: block;
  height: 0;
  border-radius: 5px;
  box-shadow: 3px 3px 5px #98989873;
  border: 2px solid #ffffff;
  padding-bottom: 55.99%;
  overflow: hidden;
}

.playerClearOverlay {
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
  z-index: 1;
  background-color: black;
}

.playerPausedOverlay {
  background-image: url("../images/click-to-continue.png");
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  display: none;
  background-repeat: no-repeat;
  background-color: #00000063;
  cursor: pointer;
  animation-name: scaleLarger;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-play-state: running;
  background-position: center;
  background-size: contain;
}

@keyframes scale {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.01);
  }
}

@keyframes scaleLarger {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.05);
  }
}

/* @media stuff */
@media screen and (max-width: 500px) {
  .embedContainer {
    padding-bottom: 147.8%;
  }
}