/* ZOOOM */
.social-zoom {
    --introduction-item-min-height: 400px;
    --introduction-item-max-height: 900px;
    --introduction-item-height-desktop: 83vh;
    --introduction-item-height-mobile: 82vh;

    transition: opacity 0.25s;
    z-index: 10000;
    background: rgba(56, 64, 71, 0.9);
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    opacity: 0;

    &.social-zoom-visible {
        opacity: 1;
    }

    a {
        text-decoration: none;
    }

    /* ZOOM CLOSE BUTTON */
    .social-zoom-close {
        transition: all .25s ease;
    }

    .social-zoom-close::before, .social-zoom-close::after {
        transition: all .25s ease;
    }


    .os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,
    .os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl {
        top: 2.3rem;
        bottom: 0.5rem;
    }

    /* DARK & LIGHT THEME: */
    .os-theme-dark,
    .os-theme-light {
        box-sizing: border-box;
        --os-padding-perpendicular: 2px;
        --os-padding-axis: 2px;
        --os-track-border-radius: 10px;
        --os-handle-interactive-area-offset: 4px;
        --os-handle-min-size: 3rem;
        --os-handle-max-size: 3rem;

        --os-handle-bg: transparent;
        --os-handle-bg-hover: rgba(255, 255, 255, 1);
        --os-handle-border: 1px solid rgba(255, 255, 255, 0.6);
        --os-size: 29px;
        --os-handle-border-radius: 12px;
        --os-handle-bg-active: rgba(255, 255, 255, 0.6);
    }

    .os-scrollbar-handle:after {
        content: '';
        position: absolute;
        display: block;
        top: 33.33%;
        left: 50%;
        width: 4px;
        height: 4px;
        margin-left: -2px;
        background: #fff;
        border-radius: 50%;
        animation: social-zoom-scroll-indicator 1.5s cubic-bezier(.32,0,.6,1.01) infinite;
        opacity: 0;
    }


    @-moz-keyframes social-zoom-scroll-indicator {
        0% {
            opacity:0.8;
            transform:scale(1) translateY(0)
        }
        90% {
            opacity:0;
            transform:scale(.7) translateY(0);
            top: 66%;
        }
        100% {
            opacity:0;
            transform:scale(1) translateY(0);
            top: 33%;
        }
    }
    @-webkit-keyframes social-zoom-scroll-indicator {
        0% {
            opacity:0.8;
            transform:scale(1) translateY(0)
        }
        90% {
            opacity:0;
            transform:scale(.7) translateY(0);
            top: 66%;
        }
        100% {
            opacity:0;
            transform:scale(1) translateY(0);
            top: 33%;
        }
    }

    .social-zoom-inner {
        margin: auto;
        position: relative;
        height: 100%;
        width: 50%;
        min-width: min(450px, 100%);
        max-width: calc(600px - 1rem);
    }

    .social-zoom-overflow {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        width: 100%;
        margin: auto;
        overflow: auto;
        padding: 0 2.5rem;
    }

    /* ZOOM CLOSE BUTTON */
    .social-zoom-close {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        z-index: 11;
        transform-origin: 50% 50%;
        transform: translate(-50%, 50%);
    }


    .social-zoom-items {
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        width: 100%;
    }

    .social-zoom-item-video {
        position: relative;
    }

    .social-zoom-item-video video {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .social-zoom-item-sound {
        background: rgba(0,0,0,0.6);
        border-radius: 50%;
        fill: #fff;
        position: absolute;
        width: 32px;
        height: 32px;
        bottom: 1rem;
        left: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
    }

    .social-zoom-item-sound-off,
    .social-zoom-item-sound-on {
        width: 16px;
        height: 16px;
    }

    .social-item > div > video,
    .social-item > div > img,
    .social-item > div > .sidecar {
        width: 100%;
    }

    .social-item > div > .sidecar {
        position: relative;
    }

    .social-item > div > .sidecar .sidecar-inner {
        /*display: flex;
        overflow: hidden;*/
        max-width: 400px;
    }

    .sidecar-item {
        flex: 1 0 auto;
        width: 100%;
        line-height: 0;
    }

    .sidecar-item.swiper-slide {
        height: auto;
        /*background-color: var(--color-silver);*/
    }

    .social-item > div > .sidecar {}

    .social-item video {
        border: none;
        outline: none;
        display: block;
    }

    .social-zoom-item-footer {
        border-top: 1px solid rgba(0,0,0,0.05);
    }

    /* ZOOOM */
    .social-item-text {
        line-height: 1.3em;
    }

    .social-zoom-item-sound {
        color: #fff;
    }

    .social-item-text-date {
        font-size: 0.75rem;
    }

    .slider .marquee-arrow-prev,
    .slider .marquee-arrow-next {
        --top-max: min(var(--introduction-item-height-desktop), var(--introduction-item-max-height));
        --top-min: max(var(--top-max), var(--introduction-item-min-height));
        top: calc(var(--top-min) * 0.5);
    }

    @media (max-width: 767px) {
        .slider .marquee-arrow-prev,
        .slider .marquee-arrow-next {
            --top-max: min(var(--introduction-item-height-mobile), var(--introduction-item-max-height));
            --top-min: max(var(--top-max), var(--introduction-item-min-height));
            top: calc(var(--top-min) * 0.5);
        }

        .slider .marquee-arrow-prev,
        .slider .marquee-arrow-next{
            transform: translateY(-50%) scale(0.5);
        }
        .slider .marquee-arrow-next {
            transform: translateY(-50%) scale(-0.5);
        }
    }

    .marquee-arrow-prev,
    .marquee-arrow-next {
        position: absolute;
        top: 50%;
        cursor: pointer;
        width: 50px;
        height: 80px;
        opacity: 0;
        z-index: 10;
        filter: invert(100%);
    }

    .marquee-arrow-prev img,
    .marquee-arrow-next img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .swiper:hover .marquee-arrow-prev,
    .swiper:hover .marquee-arrow-next {
        opacity: 1;
    }

    .marquee-arrow-prev {
        left: 0;
        transform: translate(1rem, -50%) ;
    }

    .marquee-arrow-next {
        right: 0;
        transform: translate(-1rem, -50%) scaleX(-1);
    }

    .marquee-arrow-prev,
    .marquee-arrow-next {
        transition: opacity 0.5s;
    }

    .swiper-pagination-bullet-active {
        width: 32px;
        border-radius: 1rem;
        background-color: #000;
    }

    .swiper-pagination-bullet {
        transition: all 0.5s;
    }

    @media (min-width: 992px) {
        .swiper-pagination {
            transition: opacity 0.4s;
            /*opacity: 0;*/
        }

        .swiper:hover .swiper-pagination {
            opacity: 1;
        }
    }

}