/***********************************
* Logo Carousel
***********************************/
.vii-logo-carousel {
    --logo-w:168px;
    --logo-h:calc(var(--logo-w) * 78 / 168);
    --logo-gap: 12px;

    --number-logos: 10;
    --logo-move:0;
    --speed-move: 0.04;
}

/* layer blue */
.vii-logo-carousel:before, .vii-logo-carousel:after {
    content:"";
    width:clamp(100px, 25.76vw, 371px); height:112%; background: linear-gradient(to right, #fff 0%, rgba(238, 241, 245, 0) 100%);
    position:absolute; top:50%; transform:translateY(-50%); z-index:2; pointer-events:none;
}
.vii-logo-carousel:before {left:0;}
.vii-logo-carousel::after {right:0; transform:scaleX(-1) translateY(-50%)}
.vii-bg-tertiary .vii-logo-carousel:before,
.vii-bg-tertiary .vii-logo-carousel:after {
    background: linear-gradient(to right, var(--vii-color-tertiary) 0%, rgba(238, 241, 245, 0) 100%);
}

/* row */
.vii-logo-carousel__row {height:var(--logo-h)}
.vii-logo-carousel__row:not(:last-child) {margin-bottom:var(--logo-gap);}
.vii-logo-carousel__row-inner {
    width:calc(var(--number-logos) * var(--logo-w) + var(--logo-gap) * (var(--number-logos) - 1));
    gap:var(--logo-gap);
}

/* logo item */
.vii-logo-carousel__item {width:var(--logo-w); height:var(--logo-h); padding:16px;}

/* VC Row has bg */
.vc_row.vc_row-has-fill .vii-logo-carousel__item {background:#fff;}

/* animation > scroll to transform logo */
@media only screen and (min-width:921px) {
    .vii-logo-carousel__row:nth-child(odd) .vii-logo-carousel__row-inner {
        transform:translateX(calc(-50% - var(--logo-move) * 100% * var(--speed-move)));
    }
    .vii-logo-carousel__row:nth-child(even) .vii-logo-carousel__row-inner {
        transform:translateX(calc(-50% + var(--logo-move) * 100% * var(--speed-move)));
    }
}

/* animation auto slide */
@keyframes move-left-to-right {
    0% {transform:translateX(0);}
    100% {transform:translateX(calc(var(--vii-100vw) - 100%));}
}
@keyframes move-right-to-left {
    0% {transform:translateX(calc(var(--vii-100vw) - 100%));}
    100% {transform:translateX(0);}
}


/***********************************
* Logo Carousel - Responsive
***********************************/
@media only screen and (max-width:920px) {
    /* autoplay logos */
    .vii-logo-carousel__row-inner {
        left:0; transform:translateX(0);
        animation-duration:30s;
        animation-iteration-count:infinite;
        animation-timing-function:linear;
        animation-direction: alternate;
    }
    .vii-logo-carousel__row:nth-child(odd) .vii-logo-carousel__row-inner {animation-name:move-right-to-left;}
    .vii-logo-carousel__row:nth-child(even) .vii-logo-carousel__row-inner {animation-name: move-left-to-right;}
}
@media only screen and (max-width:480px) {
    .vii-logo-carousel {
        --logo-w:140px;
        --logo-gap: 8px;
    }
    .vii-logo-carousel__item {padding:12px;}
}