:root {
    --marquee-width: 100%;
    /* --marquee-height: 20vh; */
    /* --marquee-elements: 12; */
    /* defined with JavaScript */
    --marquee-elements-displayed-client: 7;
    --marquee-element-width-client: calc(var(--marquee-width) / var(--marquee-elements-displayed-client));
    --marquee-animation-duration-client: calc(var(--marquee-elements-client) * 3s);

    --marquee-elements-displayed-partner: 7;
    --marquee-element-width-partner: calc(var(--marquee-width) / var(--marquee-elements-displayed-partner));
    --marquee-animation-duration-partner: calc(var(--marquee-elements-partner) * 3s);
}

.client-marquee,
.partner-marquee {
    /* border: 1px solid red; */
    width: var(--marquee-width);
    height: var(--marquee-height);
    background-color: #fff;
    color: #222;
    overflow: hidden;
    position: relative;
}

.client-marquee:before,
.client-marquee:after,
.partner-marquee:before,
.partner-marquee:after {
    position: absolute;
    top: 0;
    width: 10rem;
    height: 100%;
    content: "";
    z-index: 1;
}

.client-marquee:before,
.partner-marquee:before {
    left: 0;
    background: linear-gradient(to right, #fff 0%, transparent 100%);
}

.client-marquee:after,
.partner-marquee:after {
    right: 0;
    background: linear-gradient(to left, #fff 0%, transparent 100%);
}

.marquee-client {
    list-style: none;
    height: 100%;
    display: flex;
    animation: scrolling-client var(--marquee-animation-duration-client) linear infinite;
}

.marquee-partner {
    list-style: none;
    height: 100%;
    display: flex;
    animation: scrolling-partner var(--marquee-animation-duration-partner) linear infinite;
}

.div-partner {
    /* border: 1px solid green; */
    width: 100%;
}


/* .marquee-client:hover {
  animation-play-state: paused;
} */
@keyframes scrolling-client {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-1 * var(--marquee-element-width-client) * var(--marquee-elements-client)));
    }
}

@keyframes scrolling-partner {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-1 * var(--marquee-element-width-partner) * var(--marquee-elements-partner)));
    }
}

.marquee-client li {
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    flex-shrink: 0;
    width: var(--marquee-element-width-client);
    max-height: 100%;
    font-size: calc(var(--marquee-height)*3/4);
    /* 5rem; */
    white-space: nowrap;
    padding: 20px;
}

.marquee-partner li {
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    flex-shrink: 0;
    width: var(--marquee-element-width-partner);
    max-height: 100%;
    font-size: calc(var(--marquee-height)*3/4);
    /* 5rem; */
    white-space: nowrap;
    padding: 20px;
}

.marquee-client li img,
.marquee-partner li img {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

    width: 100%;
}

.marquee-client li img:hover,
.marquee-partner li img:hover {
    scale: 110%;
}

/* @media (max-width: 600px) {
    :root {
        --marquee-width: 100vw;
        --marquee-height: 16vh;
        --marquee-elements-displayed-client: 3;
        --marquee-elements-displayed-partner: 3;
    }

    .client-marquee:before,
    .client-marquee:after,
    .partner-marquee:before,
    .partner-marquee:after {
        width: 5rem;
    }
} */


/* !================================================ M O B I L E ================================================ */
/* !============================================================================================================= */

@media only screen and (max-width: 991px) {
    :root {
        --marquee-width: 100%;
        --marquee-height: 10vh;
        /* --marquee-elements: 12; */
        /* defined with JavaScript */
        --marquee-elements-displayed-client: 3;
        --marquee-element-width-client: calc(var(--marquee-width) / var(--marquee-elements-displayed-client));
        --marquee-animation-duration-client: calc(var(--marquee-elements-client) * 3s);

        --marquee-elements-displayed-partner: 3;
        --marquee-element-width-partner: calc(var(--marquee-width) / var(--marquee-elements-displayed-partner));
        --marquee-animation-duration-partner: calc(var(--marquee-elements-partner) * 3s);
    }



    .client-marquee,
    .partner-marquee {
        width: var(--marquee-width);
        height: var(--marquee-height);
        background-color: #fff;
        color: #222;
        overflow: hidden;
        position: relative;
    }

    .client-marquee:before,
    .client-marquee:after,
    .partner-marquee:before,
    .partner-marquee:after {
        position: absolute;
        top: 0;
        width: 5rem;
        height: 100%;
        content: "";
        z-index: 1;
    }

    .client-marquee:before,
    .partner-marquee:before {
        left: 0;
        background: linear-gradient(to right, #fff 0%, transparent 100%);
    }

    .client-marquee:after,
    .partner-marquee:after {
        right: 0;
        background: linear-gradient(to left, #fff 0%, transparent 100%);
    }

    .marquee-client {
        list-style: none;
        height: 100%;
        display: flex;
        animation: scrolling-client var(--marquee-animation-duration-client) linear infinite;
    }

    .marquee-partner {
        list-style: none;
        height: 100%;
        display: flex;
        animation: scrolling-partner var(--marquee-animation-duration-partner) linear infinite;
    }

    .div-partner {
        /* border: 1px solid green; */
        width: 100%;
    }

    /* .marquee-client:hover {
      animation-play-state: paused;
    } */
    @keyframes scrolling-client {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-1 * var(--marquee-element-width-client) * var(--marquee-elements-client)));
        }
    }

    @keyframes scrolling-partner {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-1 * var(--marquee-element-width-partner) * var(--marquee-elements-partner)));
        }
    }

    .marquee-client li {
        display: flex;
        justify-content: center;
        align-items: center;
        /* text-align: center; */
        flex-shrink: 0;
        width: var(--marquee-element-width-client);
        max-height: 100%;
        font-size: calc(var(--marquee-height)*3/4);
        /* 5rem; */
        white-space: nowrap;
        padding: 10px;
        /* border: 1px solid blue; */
    }

    .marquee-partner li {
        display: flex;
        justify-content: center;
        align-items: center;
        /* text-align: center; */
        flex-shrink: 0;
        width: var(--marquee-element-width-partner);
        max-height: 100%;
        font-size: calc(var(--marquee-height)*3/4);
        /* 5rem; */
        white-space: nowrap;
        padding: 10px;
        /* border: 1px solid blue; */
    }

    .marquee-client li img,
    .marquee-partner li img {
        /* width: 100%; */
        /* height: 100%; */
        /* border: 2px solid #eee; */
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;

        width: 100%;
    }

    .marquee-client li img:hover,
    .marquee-partner li img:hover {
        scale: 110%;
    }


}