/* VIDEO HTML PLAY Block ****************************************************************/
.res-vid-container {
  position: relative;
  aspect-ratio: 16/9;
}
.res-vid-main {
  position: relative;
  z-index: 1;
  height: 100%;
}
.res-vid-overlay {
  position: relative;
  height: 100%;
}
.res-vid-overlay .res-video-autoplay, .res-vid-overlay .res-vid-poster {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.res-vid-overlay .res-vid-poster video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.res-vid-overlay .res-vid-poster img {
  object-fit: cover;
  /*object-fit: fill;*/
  width: 100%;
  height: 100%;
}
.res-vid-control {
  display: none;
  position: absolute;
  left: 2%;
  bottom: 6%;
  z-index: 1;
  font-size: 100%;
}
.res-vid-control i {
  color: #fff;
}
.res-vid-mute-btn, .res-vid-playback-btn, .res-vid-reset-btn {
  display: inline-block;
  padding: 5px 10px;
  cursor: pointer;
}
.res-vid-mute-btn:hover, .res-vid-playback-btn:hover, .res-vid-reset-btn:hover {
  opacity: 0.6;
}
.res-vid-reset-btn {
  /*    background-color: #fff;*/
  background-color: transparent;
}
.res-vid-reset-btn i {
  color: #eee; /* x close */
}
.res-vid-time {
  position: absolute;
  right: 3%;
  bottom: 6%;
  z-index: 1;
  font-size: 80%;
  color: #FFF;
}
.res-vid-progressbar-container {
  position: absolute;
  bottom: 0;
  height: 6px;
  background-color: #eee;
  left: 0;
  right: 0;
  z-index: 10;
}
.res-vid-progress {
  transition: width 0.2s linear;
  -webkit-transition: width 0.2s linear;
  height: 100%;
  background-color: #ed1c24; /* brandcolor */
  width: 0;
}
.res-vid-play-btn {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  /*bottom: -60px;*/
  bottom: 0;
  z-index: 10;
}
.res-vid-play-btn:after {
  content: "\f04b";
  font-size: 36px;
  padding-left: 8px;
  line-height: 400%;
  font-family: "Font Awesome 6 Pro";
  font-weight: 700;
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 1.0);
  margin-left: -70px;
  color: #ed1c24; /* brandcolor */
  top: 50%;
  left: 50%;
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  cursor: pointer;
}
.video-play {
  position: relative;
}
@media only screen and (max-width: 1100px) {
  .res-vid-play-btn:after {
    font-size: 270%;
    line-height: 280%;
  }
}
@media only screen and (max-width: 970px) {
  .res-vid-progressbar-container {
    height: 3px;
  }
  .res-vid-control {
    font-size: 75%;
  }
  .res-vid-mute-btn, .res-vid-playback-btn, .res-vid-reset-btn {
    padding: 2px 5px;
  }
  .res-vid-play-btn {
    bottom: 0;
    z-index: 10;
  }
  .res-vid-play-btn:after {
    width: 70px;
    height: 70px;
    font-size: 22px;
    line-height: 330%;
    margin-left: -45px;
    padding-left: 2px;
  }
}
@media only screen and (max-width: 480px) {
  .res-video-play-html .html-video {
    height: 50vw;
    position: relative;
  }
}
/* Mobile Video Replace */
@media only screen and (max-width: 970px) {
  .res-vid-mobile-fallback {
    aspect-ratio: unset;
  }
  .res-vid-mobile-fallback video {
    height: auto;
  }
  .res-vid-frame.videobox-clean {}
}
/*Custom Video-Style */
.videobox-custom {
  margin: 10px;
  padding: 10px;
  border: 1px solid #eee;
  box-shadow: 0 5px 10px -5px rgba(149, 153, 153, 0.6);
}
/* Youtube Video */
.videoplayer-container {
  overflow: hidden;
  width: 100%;
  /* Keep it the right aspect-ratio */
  aspect-ratio: 16/9;
}
.videoplayer-container iframe {
  width: 100%;
  height: 100%;
}
.videoplayer-container.youtube-video.no-controls {
  overflow: hidden;
  width: 100%;
  /* Keep it the right aspect-ratio */
  aspect-ratio: 16/9;
  /* No clicking/hover effects */
  pointer-events: none;
}
.videoplayer-container.youtube-video.no-controls iframe {
  /* Extend it beyond the viewport... */
  width: 300%;
  height: 100%;
  /* ...and bring it back again */
  margin-left: -100%;
}
/* ------------  CMS Backend Preview ---------------- */
.acf-block-preview .res-video-play-html .res-vid-play-btn:after {
  background-color: #fff;
  border: 0;
  opacity: 0.9;
  width: 35px;
  height: 40px;
  display: flex;
  justify-content: center;
  content: '•';
  font-family: 'arial';
  font-size: 30px;
  line-height: 40px;
}
.acf-block-preview .res-video-play-html .res-vid-container {
  background: #000;
}
.acf-block-preview .res-video-play-html .res-vid-frame {
  max-height: 350px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #eee;
}
/* keine externen Videos abspielen im CMS Backend */
.acf-block-preview .res-video-play-html iframe {
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  display: none;
}