.triple-reels-widget{

    /* ==========================
       Navigation Variables
    ========================== */

    --tr-arrow-size:24px;
    --tr-arrow-width:48px;
    --tr-arrow-height:48px;
    --tr-arrow-radius:50%;
    --tr-arrow-offset:30px;

    --tr-arrow-bg:#ffffff;
    --tr-arrow-color:#000000;
    --tr-arrow-border:#dddddd;
    --tr-arrow-border-width:1px;

    --tr-arrow-hover-bg:#000000;
    --tr-arrow-hover-color:#ffffff;
    --tr-arrow-hover-border:#000000;
    --tr-arrow-hover-scale:1.08;

    /* ==========================
       Dot Variables
    ========================== */

    --tr-dot-width:18px;
    --tr-dot-height:4px;
    --tr-dot-active-width:36px;
    --tr-dot-radius:20px;
    --tr-dot-gap:8px;
    --tr-dot-margin-top:20px;

    --tr-dot-color:#999999;
    --tr-dot-active-color:#000000;
    --tr-dot-hover-color:#666666;

    --tr-dot-opacity:.5;
    --tr-dot-active-opacity:1;
}

/* ==========================
   Widget
========================== */

.triple-reels-widget{
    width:100%;
    overflow:hidden;
}

.triple-reels-stage{
    position:relative;
    width:100%;
    height:650px;
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:1200px;
    overflow:hidden;
}

.triple-reels-track{
    position:relative;
    width:100%;
    max-width:1600px;
    height:600px;
    margin:0 auto;
}

/* ==========================
   Slides
========================== */

.triple-reels-slide{

    position:absolute;
    top:0;
    left:50%;

    width:400px;
    height:600px;

    overflow:hidden;
    border-radius:20px;
    background:#000;

    opacity:0;
    pointer-events:none;

    transform:
        translateX(-50%)
        scale(.55);

    transition:
        transform .6s ease,
        opacity .4s ease,
        filter .4s ease;

    filter:brightness(.52) saturate(.72);
}

.triple-reels-slide video{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

}

/* Active */

.triple-reels-slide.active{

    opacity:1;
    z-index:5;
    pointer-events:auto;

    transform:
        translateX(-50%)
        scale(1);

    filter:brightness(1);

}

/* Left */

.triple-reels-slide.prev{

    opacity:.92;
    z-index:4;
    pointer-events:auto;

    transform:
        translateX(calc(-50% - 330px))
        scale(.78)
        rotateY(15deg);

}

/* Right */

.triple-reels-slide.next{

    opacity:.92;
    z-index:4;
    pointer-events:auto;

    transform:
        translateX(calc(-50% + 330px))
        scale(.78)
        rotateY(-15deg);

}

/* Far Left */

.triple-reels-slide.far-prev{

    opacity:.45;
    z-index:2;

    transform:
        translateX(calc(-50% - 560px))
        scale(.60)
        rotateY(18deg);

}

/* Far Right */

.triple-reels-slide.far-next{

    opacity:.45;
    z-index:2;

    transform:
        translateX(calc(-50% + 560px))
        scale(.60)
        rotateY(-18deg);

}

/* Hidden */

.triple-reels-slide.hidden{

    opacity:0;
    pointer-events:none;

}

/* ==========================
   Navigation
========================== */

.triple-reels-prev,
.triple-reels-next{

    position:absolute;
    top:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    width:var(--tr-arrow-width);
    height:var(--tr-arrow-height);

    padding:0;

    border:var(--tr-arrow-border-width) solid var(--tr-arrow-border);
    border-radius:var(--tr-arrow-radius);

    background:var(--tr-arrow-bg);
    color:var(--tr-arrow-color);

    cursor:pointer;

    z-index:20;

    transform:translateY(-50%);
    transition:all .3s ease;

}

.triple-reels-prev{

    left:var(--tr-arrow-offset);

}

.triple-reels-next{

    right:var(--tr-arrow-offset);

}

.triple-reels-prev:hover,
.triple-reels-next:hover{

    background:var(--tr-arrow-hover-bg);
    color:var(--tr-arrow-hover-color);
    border-color:var(--tr-arrow-hover-border);

    transform:
        translateY(-50%)
        scale(var(--tr-arrow-hover-scale));

}

.triple-reels-prev i,
.triple-reels-next i,
.triple-reels-prev svg,
.triple-reels-next svg{

    width:var(--tr-arrow-size);
    height:var(--tr-arrow-size);

    font-size:var(--tr-arrow-size);

    fill:currentColor;

}

/* ==========================
   Pagination
========================== */

.triple-reels-dots{

    display:flex;
    justify-content:center;
    align-items:center;

    gap:var(--tr-dot-gap);

    margin-top:var(--tr-dot-margin-top);

}

.triple-reels-dot{

    width:var(--tr-dot-width);
    height:var(--tr-dot-height);

    border-radius:var(--tr-dot-radius);

    background:var(--tr-dot-color);

    opacity:var(--tr-dot-opacity);

    cursor:pointer;

    transition:all .3s ease;

}

.triple-reels-dot:hover{

    background:var(--tr-dot-hover-color);

}

.triple-reels-dot.active{

    width:var(--tr-dot-active-width);

    background:var(--tr-dot-active-color);

    opacity:var(--tr-dot-active-opacity);

}

/* ==========================
   Mobile
========================== */

@media (max-width:768px){

    .triple-reels-stage{

        height:450px;

    }

    .triple-reels-track{

        height:420px;

    }

    .triple-reels-slide{

        width:260px;
        height:420px;

    }

    .triple-reels-slide.prev{

        transform:
            translateX(calc(-50% - 170px))
            scale(.70)
            rotateY(10deg);

    }

    .triple-reels-slide.next{

        transform:
            translateX(calc(-50% + 170px))
            scale(.70)
            rotateY(-10deg);

    }

    .triple-reels-slide.far-prev{

        transform:
            translateX(calc(-50% - 280px))
            scale(.52)
            rotateY(10deg);

    }

    .triple-reels-slide.far-next{

        transform:
            translateX(calc(-50% + 280px))
            scale(.52)
            rotateY(-10deg);

    }

}