media-player {
  aspect-ratio: 16 / 9;
  --video-border-radius: 0rem;
  --video-border: none;
  width: 100%;
}

    .vds-buffering-spinner {
    display: flex;
  }

  .vds-video-layout {
    --video-brand: hsl(0, 0%, 96%);
    /* Layout: https://vidstack.io/docs/player/components/layouts/default-layout#video-layout  */
    /* Components: https://www.vidstack.io/docs/player/components/layouts/default-layout#components */
  }

  .vds-audio-layout {
    --audio-brand: hsl(0, 0%, 96%);
    /* Layout: https://vidstack.io/docs/player/components/layouts/default-layout#audio-layout */
    /* Components: https://www.vidstack.io/docs/player/components/layouts/default-layout#components */
  }

  /* custom indremission */
media-provider div.cookienotice {
  width: 426px;
  height: 130px;
  z-index: 2;
  margin: auto;
  background: white;
  border-radius: 0.5rem;
}

div.cookienotice .cc-text {
  color: #1e3948;
}


media-player[data-can-play] .vds-poster img {
  filter: initial;
  
}
media-player .vds-poster img {
  filter: blur(0.3rem) saturate(80%);
}


media-player[data-service="youtube"] {
  display: block;
}




@media (min-width: 768px) and (max-width: 1920px) {
  media-player .vds-video-layout[data-sm] .vds-controls .vds-play-button {
    background-color: var(--video-sm-play-button-bg,rgb(255, 255, 255));
    width: 6rem;
    height: 6rem;
    border-radius: 13%;
    display: none;
  }
}  

@media (min-width: 300px) and (max-width: 767px) {
  media-player .vds-video-layout[data-sm] .vds-controls .vds-play-button {
    background-color: var(--video-sm-play-button-bg,rgb(255, 255, 255));
    width: 3rem;
    height: 3rem;
    border-radius: 13%;
    position: relative;
    top: 10px;
    display: none;
  }
}  




/* media-player .vds-button {
  color: #8cffb0;
} */

media-player :where(.vds-video-layout[data-sm] .vds-controls .vds-play-button) {
  --media-button-hover-transform: scale(1.1);
}

media-player media-play-button {
  transition: transform 0.3s ease-in-out;
  transform: scale(1);
}

media-player:hover media-play-button {
  transform: scale(1.1);
}

  
 /* Fix overflow space after video on ios */
[data-media-player] { 
  contain: layout; 
}

/* Force ratio on Wide mobile devices in fullscreen */
@media (min-aspect-ratio: 100/47) {
  media-player[data-fullscreen] iframe.vds-youtube {
    padding: 0 calc((100vw - 100vh * 1.77) / 2);
  }
}

/* Remove media-time */
media-time {
  display: none;
}

@media (min-width: 768px) {

  media-player media-provider::before {
    display: none;
  }

  media-player[data-can-play] media-provider::before {
    display: block;
  }
  
  
  .playbutton {
    position: absolute;
    width: 15%;
    height: auto;
    min-width: 40px;
    max-width: 120px;
    top: 50%;
    right: 50%;
    transform: translateY(-50%) translateX(50%);
    transition: all 0.3s ease-in-out;
    fill: #386B5B;
  }

  media-player[data-paused] media-provider::before {
    content:  url("/_assets/2ea2109ac9c5531d03efd5c6eb18fab5/Images/vidstack-play-button.svg");
    height: 5rem;
    width: 5rem;
    padding: 0.4rem;
    background: #386b5b;
    position: absolute;
    border-radius: 100%;
    opacity: 1;
    transition: opacity 0.4s ease-in, transform 0.2s ease-out;
    z-index: 2;
    left: calc( 50% - 3rem );
  }

  media-player[data-buffering] media-provider::before {
    transition: opacity 0.4s ease-out;
    opacity: 0;
  }

  media-player[data-hocus] media-provider::before {
    transition: transform 0.3s ease-in-out;
    transform: scale(1.1);
  }
  
  media-player[data-hocus] media-provider {
    cursor: pointer;
  }

}

@media (max-width: 767px) {
  media-player .vds-play-button {
    color: #8cffb0;
  }
}

figure.video media-provider media-poster img {
  border-radius: 0;
}