.Stories mux-player .hideControls {
  /* Hide all controls at once */
  --play-button: none;
  --live-button: none;
  --seek-backward-button: none;
  --seek-forward-button: none;
  --mute-button: none;
  --captions-button: none;
  --airplay-button: none;
  --pip-button: none;
  --fullscreen-button: none;
  --cast-button: none;
  --playback-rate-button: none;
  --volume-range: none;
  --time-display: none;
  --rendition-selectmenu: none;
  --media-range-track-height: 6px;
}

.Stories mux-player::part(center),
.Stories mux-player::part(play-button),
.Stories mux-player::part(pre-play) {
  display: none !important;
}
.Stories mux-player::part(bottom time range) {
  width: 100%;
  left: 0px;
  padding: 0px;
  opacity: 1;
}

.Stories .mobileChrome mux-player::part(bottom time range) {
  width: 100%;
  left: 0px;
  padding: 0px;
  opacity: 1;
  bottom: 37px;
}


.Stories .hideControls mux-player::part(control-bar bottom){
  display: none !important;
}

.HideBottomForTrim mux-player::part(control-bar bottom){
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
  pointer-events: none !important;
  display: none !important;
}

.Stories .showControls mux-player::part(control-bar bottom){
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  pointer-events: auto;
}

.Stories,  .zoomIn {
  animation-name: zoomIn;
}

.Stories, .zoomOut {
  animation-name: zoomOut;
  transform: scale(1.5);
}

.Stories .panRotate {
  animation-name: panRotate;
  transform: translateY(20px)  translateX(20px);
}

.Stories .panRotateScale {
  animation-name: panRotateScale;
  transform: scale(1.5) translateY(20px)  translateX(20px);
}


.Stories, .ImageEnhancer .panAcross {
  animation-name: panAcross;
  transform: translateX(0px);
}

.Stories .panAcrossScale {
  animation-name: panAcrossScale;
  transform: scale(1.5)  translateX(0px);
}

.backdropFilter {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.textShadow {
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25), 0px 0px 4px rgba(0, 0, 0, 0.25), 0px 0px 16px rgba(0, 0, 0, 0.50);
}

:host {
  position: unset !important;
  display: unset !important;
  z-index: unset !important;
}

@keyframes zoomIn {
  0% {
    transform: scale(1.0); 
  }

  100% {
    transform: scale(1.5); 
  }
}


@keyframes zoomOut {
  0% {
    transform: scale(1.5); 
  }

  100% {
    transform: scale(1); 
  }
}
@keyframes panRotate {
  0% {
    transform: rotate(10deg) translateY(-30px)  translateX(-30px);
  }

  100% {
    transform: rotate(0deg) translateY(20px)  translateX(20px);
  }

}

@keyframes panRotateScale {
  0% {
    transform: rotate(10deg) scale(1.5) translateY(-30px)  translateX(-30px);
  }

  100% {
    transform: rotate(0deg) scale(1.5) translateY(20px)  translateX(20px);
  }

}

@keyframes panAcross {
  0% {
    transform: translateX(-60px);
  }

  50% {
    transform: translateX(60px);
  }


  100% {
    transform: translateX(0px);
  }
}


@keyframes panAcrossScale {
  0% {
    transform: scale(1.5)   translateX(-60px);
  }

  50% {
    transform: scale(1.5) translateX(60px);
  }


  100% {
    transform: scale(1.5)  translateX(0px);
  }
}

.addOpactiy {
  animation: addOpacityFrames 400ms;   
}

@keyframes addOpacityFrames {
 from {
   opacity: 0;
 }
 to {
   opacity: 1;
 }
}

.removeOpactiy {
  animation: removeOpactiyFrames 400ms;   
}

@keyframes removeOpactiyFrames {
 from {
   opacity: 1;
 }
 to {
   opacity: 0;
 }
}

.autoScroll {
  animation: scroll 25s linear infinite;
}


@keyframes scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-100%));
  }
}

.backgroundOverlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0.00) 8.67%), linear-gradient(360deg, rgba(0, 0, 0, 0.90) 4%, rgba(0, 0, 0, 0) 50%)
}

.failedAutoPlaybackground {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.00) 20.44%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 67.35%, rgba(0, 0, 0, 0.60) 99.95%);
}

.storyBlur {
  -webkit-filter: blur(40px);
  filter: blur(40px);
}

.Stories mux-player::part(poster-layer) {
  display: none;
}
/*
 mux-player::part(video) {
  --media-webkit-text-track-transform: translateY(-80%) !important;
}


mux-player::part(video) > video::cue {
  display: none;
  font-size: 14px !important;
}

mux-player::part(video) video::cue {
  font-size: 14px !important;
}

/**
* safari specific 
*/


.Stories mux-player::part(video) {
  object-fit: cover;
}

mux-player::part(video) {
  --media-webkit-text-track-transform: translateY(0%) !important;
}
mux-player::part(video) {
  --pip-button: none;
}
mux-player::part(video) {
  font-size: 14px !important;
}

mux-player::part(video)::-webkit-media-text-track-display {
  position: relative !important;
  top: 80px !important;
  font-size: 20px !important;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

.flipLogic:hover .flipBox{
  transform: rotateY(180deg);
}