/* ZOOOM */
.social-zoom {
    transition: opacity 0.25s;
}
.social-zoom 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;
}


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

/* DARK & LIGHT THEME: */
.social-zoom .os-theme-dark,
.social-zoom .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);
}

.social-zoom .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%;
    }
}

/* ZOOOM */
.social-zoom {
    z-index: 10000;
    background: rgba(56, 64, 71, 0.9);
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    opacity: 0;
}

.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;
}

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

/* 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 .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-zoom .social-item > div > video,
.social-zoom .social-item > div > img,
.social-zoom .social-item > div > .sidecar {
    width: 100%;
}

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

.social-zoom .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-zoom .social-item > div > .sidecar {}

.social-zoom .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-zoom .social-item-text {
    line-height: 1.3em;
}

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

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