:root {
    --slide3d-width: 45vw;
    --slide3d-height: 45vw;
    --slide3d-transition-duration: 1000ms;
    --slide3d-transition-easing: ease;
    --slide3d-animation-bottom: 2%;
    --slideImg-width: 50vw;
    --slideImg-height: 40vw;
    --slideImg-transition-duration: 1000ms;
    --slideImg-transition-easing: ease;
    --slideImg-animation-bottom: 2%;
}

@media only screen and (min-width: 1200px) {
     :root {
        --slide3d-width: 30vw;
        --slide3d-height: 30vw;
        --slideImg-width: 35vw;
        --slideImg-height: 30vw;
    }
}

.slide3d {
    position: relative;
    width: 100%;
    height: 70vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* overflow: hidden; */
}

@media (min-width: 992px) {
    .slide3d {
        width: 80%;
        height: 70vw;
        margin: 0 auto;
    }
}

@media (min-width: 1400px) {
    .slide3d {
        height: 65vw;
    }
}

.slide3d .slide3d-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    z-index: 2;
}

.slide3d .itm {
    --slide3d-translateY-offset: 100vh;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, 0) translateX(var(--slide3d-translateX-offset)) rotateY(var(--slide3d-rotation-offset)) scale(var(--slide3d-scale-offset));
    display: inline-block;
    width: var(--slide3d-width);
    height: var(--slide3d-height);
    max-height: var(--slide3d-height);
    transition: transform var(--slide3d-transition-duration) var(--slide3d-transition-easing);
    user-select: none;
    opacity: 0.9;
}

.slide3d .itm .itm-image {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide3d .itm .itm-image video {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 2;
}

.slide3d .itm .itm-image img {
    width: 60%;
    position: absolute;
    bottom: -40%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
    opacity: 0.5;
}

.slide3d .itm .itm-image img[data-type="3"] {
    bottom: -65%;
}

@media (min-width: 1200px) {
    .slide3d .itm .itm-image img[data-type="3"] {
        bottom: -50%;
    }
}

@media (min-width: 1660px) {
    .slide3d .itm .itm-image img[data-type="2"] {
        bottom: -40%;
    }
    .slide3d .itm-image img[data-type="3"] {
        bottom: -60%;
    }
}

.slide3d .itm.current-itm {
    --current-slide3d-rotation-offset: 0;
    --slide3d-translateX-offset: 0;
    --slide3d-rotation-offset: var(--current-slide3d-rotation-offset);
    --slide3d-scale-offset: 1.2;
    --opacity: 0.8;
    animation: slideDown 3s forwards;
}

.slide3d .itm.previous-itm {
    --slide3d-translateX-offset: calc(-1 * var(--slide3d-width) * .8);
    --slide3d-rotation-offset: 25deg;
}

.slide3d .itm.next-itm {
    --slide3d-translateX-offset: calc(var(--slide3d-width) * .8);
    --slide3d-rotation-offset: -25deg;
}

.slide3d .itm.previous-itm,
.slide3d .itm.next-itm {
    --slide3d-scale-offset: 0.9;
    --opacity: 0.4;
    top: 0;
}

.slide3d .itm.previous-itm img,
.slide3d .itm.next-itm img,
.slide3d .itm.previous-itm video,
.slide3d .itm.next-itm video {
    opacity: 0.4;
}

.slide3d .slide3d-footer {
    position: absolute;
    bottom: -2rem;
    width: 100%;
    text-align: center;
    z-index: 3;
}

.slide3d-footer label {
    font-family: 'Pieces of Eight';
    font-size: 1.5rem;
    line-height: 1;
    text-align: center;
    color: #FFFEB7;
    background-size: 0.825rem auto !important;
}

.slide3d-footer .btn-left,
.slide3d-footer .btn-right {
    position: absolute;
    top: -1.75rem;
    z-index: 5;
}

.slide3d-footer .btn-left {
    left: 23%;
}

.slide3d-footer .btn-right {
    right: 23%;
}

.slide3d-footer .btn-left img,
.slide3d-footer .btn-right img {
    width: 1.75rem;
    cursor: pointer;
}

@media (min-width: 992px) {
    .slide3d .slide3d-footer {
        bottom: 2%;
    }
    .slide3d-footer label {
        margin-top: 1.5rem;
    }
    .slide3d-footer .btn-left {
        left: 30%;
    }
    .slide3d-footer .btn-right {
        right: 30%;
    }
    .slide3d-footer .btn-left img,
    .slide3d-footer .btn-right img {
        width: 2.25rem;
    }
}

@media (min-width: 1660px) {
    .slide3d-footer .btn-left,
    .slide3d-footer .btn-right {
        top: -4rem;
    }
    .slide3d-footer .btn-left img,
    .slide3d-footer .btn-right img {
        width: auto;
    }
}

.slide3d .img {
    --slideImg-translateY-offset: 100vh;
    --slideImg-rotation-offset: var(--current-slideImg-rotation-offset);
    --current-slideImg-rotation-offset: 0;
    position: absolute;
    left: 50%;
    top: 8%;
    transform: translate(-50%, 0) translateX(var(--slideImg-translateX-offset)) rotateY(var(--slideImg-rotation-offset)) scale(var(--slideImg-scale-offset));
    display: inline-block;
    width: var(--slideImg-width);
    height: var(--slideImg-height);
    max-height: var(--slideImg-height);
    transition: transform var(--slideImg-transition-duration) var(--slideImg-transition-easing);
    user-select: none;
    opacity: 1;
    cursor: pointer;
}

.slide3d .img.current-itm {
    --slideImg-translateX-offset: 0;
    --slideImg-scale-offset: 1;
    --opacity: 0.9;
    z-index: 5;
}

.slide3d .img.previous-itm {
    --slideImg-translateX-offset: calc(-1 * var(--slideImg-width) * .6);
}

.slide3d .img.next-itm {
    --slideImg-translateX-offset: calc(var(--slideImg-width) * .6);
}

.slide3d .img.previous-itm,
.slide3d .img.next-itm {
    --slideImg-scale-offset: 0.8;
    --opacity: 0.4;
    opacity: 0.4;
}

.slide3d .img .itm-image {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide3d .img .itm-image img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    object-fit: cover;
}