html,body{margin:0;padding:0;overflow-x:hidden}

.tk-scroll-slider{
    position:relative;
    width:100vw;
    height:var(--tk-height,100vh);
    min-height:100vh;
    margin-left:calc(50% - 50vw);
    overflow:hidden;
    background:#111;
    isolation:isolate;
}

.tk-scroll-slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    visibility:hidden;
    z-index:0;
    overflow:hidden;
    transition:
        opacity 1.8s cubic-bezier(.22,.61,.36,1),
        visibility 0s linear 1.8s;
}

.tk-scroll-slide.is-active{
    opacity:1;
    visibility:visible;
    z-index:1;
    transition:
        opacity 1.8s cubic-bezier(.22,.61,.36,1),
        visibility 0s;
}

.tk-scroll-slide img{
    position:absolute;
    top:0;
    left:-6%;
    width:112%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center center;
    will-change:transform;
    transform:translate3d(0,0,0) scale(var(--tk-zoom,1.06));
}

.tk-scroll-slide.is-active img{
    animation:tkSlowScroll var(--tk-duration,9000ms) cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes tkSlowScroll{
    from{transform:translate3d(-2.5%,0,0) scale(var(--tk-zoom,1.06))}
    to{transform:translate3d(2.5%,0,0) scale(var(--tk-zoom,1.06))}
}

.tk-scroll-slider[data-direction="right"] .tk-scroll-slide.is-active img{
    animation-name:tkSlowScrollReverse;
}

@keyframes tkSlowScrollReverse{
    from{transform:translate3d(2.5%,0,0) scale(var(--tk-zoom,1.06))}
    to{transform:translate3d(-2.5%,0,0) scale(var(--tk-zoom,1.06))}
}

@media(max-width:768px){
    .tk-scroll-slider{
        height:var(--tk-mobile-height,100svh);
        min-height:100svh;
    }

    .tk-scroll-slide img{
        left:-10%;
        width:120%;
    }

    @keyframes tkSlowScroll{
        from{transform:translate3d(-2%,0,0) scale(var(--tk-zoom,1.06))}
        to{transform:translate3d(2%,0,0) scale(var(--tk-zoom,1.06))}
    }

    @keyframes tkSlowScrollReverse{
        from{transform:translate3d(2%,0,0) scale(var(--tk-zoom,1.06))}
        to{transform:translate3d(-2%,0,0) scale(var(--tk-zoom,1.06))}
    }
}

@media(prefers-reduced-motion:reduce){
    .tk-scroll-slide.is-active img{animation:none}
}