/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./cartridges/app_custom_bbw/cartridge/client/default/scss/experience/components/commerceAssets/pdHlsVideo.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.pd-hls-video-container {
  position: relative;
}
.pd-hls-video-container .pd-hls-video,
.pd-hls-video-container .pd-hls-video-poster {
  aspect-ratio: 9/16;
}
@media screen and (min-width: 768px) {
  .pd-hls-video-container .pd-hls-video,
  .pd-hls-video-container .pd-hls-video-poster {
    aspect-ratio: 16/9;
  }
}
.pd-hls-video-container .pd-hls-video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}
.pd-hls-video-container .pd-hls-video-poster.visible {
  opacity: 1;
}
.pd-hls-video-container .pd-hls-video-volume,
.pd-hls-video-container .pd-hls-video-play-pause {
  position: absolute;
  bottom: 3rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.7);
  outline: none;
  border: none;
  border-radius: 1000px;
  width: 32px;
  height: 32px;
  padding: 0px 6px;
  backdrop-filter: blur(2px);
  z-index: 2;
}
.pd-hls-video-container .pd-hls-video-volume svg,
.pd-hls-video-container .pd-hls-video-play-pause svg {
  width: 20px;
  height: 20px;
}
@media screen and (min-width: 768px) {
  .pd-hls-video-container .pd-hls-video-volume,
  .pd-hls-video-container .pd-hls-video-play-pause {
    bottom: 3rem;
    right: 2rem;
  }
}
.pd-hls-video-container .pd-hls-video-volume:hover,
.pd-hls-video-container .pd-hls-video-play-pause:hover {
  background: rgba(255, 255, 255, 0.9);
}
.pd-hls-video-container .pd-hls-video-volume {
  right: 3.5rem;
}
@media screen and (min-width: 768px) {
  .pd-hls-video-container .pd-hls-video-volume {
    right: 4.5rem;
  }
}

/*# sourceMappingURL=pdHlsVideo.css.map*/