﻿.STitle {
    text-align: center;
    margin-bottom: 1%;
    width: 100%;
    justify-content: space-evenly;
}

.Sponsor {
    width: fit-content;
}

.SponsorImage {
    width: 200px;
}

.SponsorStripHolder {
    padding-top: 2%;
}

.loop-carousel {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
    padding-top: 2%;
    padding-bottom:2%;
}

.loop-track {
    display: flex;
    animation: scrollLoop 60s linear infinite;
}

.loop-track img {
    height: 80px;
    margin-right: 50px;
    border-radius: 6px;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: grayscale(100%);
    opacity: 0.7;
}

.loop-track img:hover {
    transform: scale(1.05);
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes scrollLoop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width:1024px){
    .Sponsor{
        margin-right: 2%;
        margin-left: 2%;
    }
}


@media (max-width:800px){
    .Sponsor {
        margin-right: unset;
        margin-left: unset;
        margin-top: 5%;
    }
}


@media (max-width:426px) {
    .SponsorStripHolder {
        padding-top: 10%;
        padding-bottom: 10%;
    }

    .SponsorImage {
        width: 150px;
    }

    .loop-track img {
        height: 50px;
        animation: scrollLoop 120s linear infinite;
    }

    @keyframes scrollLoop {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-490%);
        }
    }
}

@media (max-width:321px) {
    .SponsorImage {
        width: 130px;
    }
}

