:root {
    --marquee-width: 100vw;
    /*--marquee-height: 15px;*/
    --marquee-elements: 12;
    --marquee-elements-displayed: 8;
    --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
    --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}


.contenitore-marquee {
	overflow: hidden;
}

.marquee {
    width: calc(var(--marquee-width) - 0);
    /*height: var(--marquee-height);*/
    color: #eee;
    overflow: hidden;
    position: relative;
}


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

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

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

.marquee-content.stop {
    animation-play-state: paused;
}

.marquee-content>li {
    padding: 10px clamp(0.625rem, 0.186rem + 1.7873vw, 1.875rem);
}

.marquee-content img {
    width: 100%;
	filter: grayscale(1);
}

/*crea la sfumatura a destra e a sinistra*/
.marquee:before,
.marquee:after {
    position: absolute;
    top: 0;
    width: 10rem;
    height: 100%;
    content: "";
    z-index: 1;
}

.marquee:before {
    left: 0;
}
.faded-borders .marquee:before {
    background: linear-gradient(to right, #FFF 0%, transparent 100%);
}

.marquee:after {
    right: 0;
}
.faded-borders .marquee:after {
    background: linear-gradient(to left, #FFF 0%, transparent 100%);
}

.marquee:not(:focus-within):not(:hover) > .animation-btn {
    opacity: 0;
}
.animation-btn .animation {
    color: var(--e-global-color-text);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 0.25rem;
    z-index: 1;
}
.animation-btn .animation:focus {
    outline-offset: 2px;
    outline: 2px solid var(--e-global-color-text);
}
.animation-btn .animation.inactive {
    display: none;
}
.animation-btn .animation img {
    width: 1.2rem;
    height: 1.2rem;
}

.marquee-content li {
    display: flex;
    flex-shrink: 0;
    width: var(--marquee-element-width);
    max-height: clamp(6.1875rem, 5.1119rem + 4.3789vw, 9.25rem);
}
@media (min-width: 2000px) {
.marquee-content li {
    width:250px !important;
}
}

/*Breakpoint impostati:
+ di 1400
1400
1200
992
767*/

@media (max-width: 1400px) {

    :root {
        --marquee-width: 100vw;
        /*--marquee-height: 16vh;*/
        --marquee-elements-displayed: 6;
    }
}

@media (max-width: 1200px) {

    :root {
        --marquee-width: 100vw;
        /*--marquee-height: 16vh;*/
        --marquee-elements-displayed: 5;
    }
}

@media (max-width: 962px) {

    :root {
        --marquee-width: 100vw;
        /*--marquee-height: 16vh;*/
        --marquee-elements-displayed: 4;
    }
}

@media (max-width: 767px) {

    :root {
        --marquee-width: 100vw;
        /*--marquee-height: 16vh;*/
        --marquee-elements-displayed: 3;
    }

}