/* CAROUSEL VIDEO */

.section-carousel {
    background: #ddd2bf;
    -webkit-transition: background-color 1000ms ease-out;
    -ms-transition: background-color 1000ms ease-out;
    transition: background-color 1000ms ease-out;
}

.full-carousel-video-container {
    padding-top: var(--main-padding-top);
}

.carousel-wrapper-video {
    pointer-events: all;
    height: var(--main-height);
    width: 100vw;
    cursor: grab;
    transform: translateY(0%) scale(1)
}

.carousel {
    /* --main-height: max(50vh, 300px); */
    --width: calc(var(--main-height) / 1.61);
    --origin: calc(var(--main-height) * 5.5);
}

.carousel-zone {
    width: 100vw;
    height: 300%;
    position: absolute;
    left: 0px;
}

.carousel-middle {
    width: var(--width);
    height: 100vh;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.carousel-inner-container {
    transform-origin: calc(var(--width) / 2) var(--origin);
    transform: rotate(-0.7008rad);
}

.slide-preview {
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.video-main-video {
    height: 100%;
    position: absolute;
    top: 0;
    /* left: 0; */
    z-index: 1000;
    pointer-events: all;
    left: 50%;
    transform: translateX(-50%);
}

.video-off {
    display: none;
}

.play {
    width: 20%;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    /* transform: translateX(-50%); */
    /* border-radius: 50%;
    background: rgba(255,255,255,0.5); */
    pointer-events: all;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-animation: scale-up-center 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.video-play-button {
    display: block;
    width: 56;
    height: 56;
    margin: -40px 0 0 -40px;
    cursor: pointer;
  }
  
  .video-play-circle {
    stroke-dasharray: 315;
    stroke-dashoffset: 315;
    transition: stroke-dashoffset .5s;
  }
  
  .video-play-button svg {
    display: block;
    transform: rotate(-90deg);
    transition: transform .3s;
  }
  
  .video-play-button:hover .video-play-circle {
    stroke-dashoffset: 0;
  }
  
  .video-play-button:active .video-play-outline {
    transform: scale(1.5);
    opacity: 0;
  }
  
  .video-play-button:active svg {
    transform: rotate(-90deg) scale(.95);
  }

.play-mobile {
    display: none;
}

.slide-tag {
    background: black;
    color: var(--main-white);
    min-width: 65%;
    position: absolute;
    top: -15px;
    height: 30px;
    border-radius: 5px;
    padding: 2PX 10PX;
    LEFT: 50%;
    TRANSFORM: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: var(--font-size-2);
}

.slides {
    position: absolute;
    top: 0px;
    left: 0px;
    height: var(--main-height);
    width: var(--width);
    transform-origin: 50% var(--origin);
    /* overflow: hidden; */
    border-radius: 15px;
}

.slide0 {
    transform: rotate(0deg);
}
.slide1 {
    transform: rotate(10deg);
}
.slide2 {
    transform: rotate(20deg);
}
.slide3 {
    transform: rotate(30deg);
}
.slide4 {
    transform: rotate(40deg);
}
.slide5 {
    transform: rotate(50deg);
}
.slide6 {
    transform: rotate(60deg);
}
.slide7 {
    transform: rotate(70deg);
}
.slide8 {
    transform: rotate(80deg);
}
.slide9 {
    transform: rotate(90deg);
}