:root{
  --plyr-video-control-background-hover: #d7cebde3;
  --plyr-color-main: #ede6d9;
}
.videoProductsContainer h3{ margin:18px 0;}
.modalVideoProduct.open{opacity:1; transform: translateY(0);}
.modalVideoProduct {width: 369px !important;height: 656px !important;}
.modalVideoProduct { transform: translateY(105%); opacity: 0;  min-width: 269px !important;min-height: 479px !important;max-width: 350px !important;max-height: 960px !important; position: relative;   right: 25px!important;bottom: 25px!important; position: fixed !important;top: auto !important;box-sizing: border-box !important;z-index: 2147483649 !important;border-radius: 10px !important;transition: .3s !important; transition-delay: .3s !important; line-height: 0 !important;}
.modalVideoProduct .closeContainer{display: flex !important;justify-content: center !important;align-items: center !important;position: absolute !important;border-radius: 100px !important;cursor: pointer !important;padding: 0 !important;top: 16px !important;left: 8px !important;backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);background: rgba(0, 0, 0, .2);z-index: 999999 !important;transition: .15s;width: 40px !important;height: 40px !important;}
.video-carousel { max-width: 600px;margin: 0 auto;}
.video-carousel .plyr{border-radius: 20px;}
.video-carousel .plyr video{object-fit: cover;}
.video-carousel .slick-slide {padding: 10px;}
.video-carousel .slick-arrow {background-color: #000;color: #fff;padding: 10px;}
.video-carousel .slick-slide  {padding: 0 !important;}
.arrowContainer{position: absolute; top: calc(50% - 60px); right: 20px; z-index: 2;}
.arrowContainer button{display: block; opacity:1; position:relative;  border-radius: 100px;backdrop-filter: blur(10px);right:0; left:0; visibility:visible; transition: 0.3s;width: 40px;height: 40px; background: transparent; border: 0; outline: unset;}
.arrowContainer button.slick-arrow:hover{background: #d5d5d594;}
.arrowContainer button.slick-prev{transform: rotate(-90deg);}
.arrowContainer button:before{content:unset !important; display:none;}
.arrowContainer button.slick-next{transform: rotate(90deg); margin-top: 20px;}
.arrowContainer button svg{fill: white;}

.thumbnail-carousel {display: block; width: 100%;}
.thumbnail-carousel .slick-track{margin-left:0;}
.thumbnail-carousel img { width: 100%;object-fit: cover; aspect-ratio:1/1;  border: 2px solid transparent;transition: border-color 0.3s; padding: 5px; background-color: white; border-radius: 50%;}
.thumbnail-carousel .slick-slide {margin: 0 5px;cursor: pointer; padding: 0 10px;}
.thumbnail-carousel .slick-current img {border-color: #353433;}

.containerThumbnail{position: relative;max-width: 650px; width:100%;}
.containerThumbnail .speech-bubble { animation: plyrfadeIn 0.5s;animation-direction: alternate; animation-duration: 0.5s;animation-timing-function: ease-in;animation-fill-mode: both; animation-delay: 2s;  position: absolute;background: #000000;border-radius: .4em;padding: 0px 20px;top: -20px;color: white;left: 7%; display: none;}
.containerThumbnail .speech-bubble *{z-index: 1;}
.containerThumbnail .speech-bubble p{z-index: 1; position:relative; margin:0}
.containerThumbnail .speech-bubble.open{display: block;}
.containerThumbnail .speech-bubble .close{position: absolute;fill: black;right: 0;display: flex;justify-content: center;align-items: center;top: -6px;background: white;border-radius: 50%;width: 24px;height: 24px;}
.containerThumbnail .speech-bubble:after {content: '';position: absolute;bottom: 4px;left: 6%;width: 0; z-index: 0; height: 0;border: 32px solid transparent;border-top-color: #000000;border-bottom: 0;border-left: 0;margin-left: -14px;margin-bottom: -16px}

@media only screen and (max-height: 450px) {
  .plyr video{height: calc(100vh - 40px);}  
  .modalVideoProduct {min-height: 0 !important;}
}  
@media only screen and (max-height: 700px) {
  .modalVideoProduct{ height: calc(100% - 20px) !important;}
}

@media only screen and (max-width: 550px) {
  .modalVideoProduct{right: 0 !important; bottom: 0 !important;}
  .video-carousel { max-width: 100%;margin: 0;}
  .video-carousel .plyr{max-height: 100vh;}
  .video-carousel .plyr{border-radius: 0;}
  .containerThumbnail .speech-bubble{left: 30%;}
  .plyr video{width: 100%;object-fit: cover;  width: 100vw;height: calc(100vh - 60px);}
  .modalVideoProduct{width: 100% !important;min-width: 100% !important;height: 100% !important;min-height: 100% !important;}
}
  
@keyframes plyrfadeIn {
 0% {opacity: 0;}
 100% {opacity: 1;}
}