.carousel-liveTime {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    overflow: hidden;
}

.carousel-container-liveTime {
    width: 100%;
    max-width: 800px;
    height: 500px;
    position: relative;
    overflow: hidden;
}

.carousel-liveTime {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    transition: opacity 1s ease-in-out, left 1s ease-in-out;
}


.carousel-image-liveTime {
    position: absolute;
    transition: transform 1s ease, opacity 0.8s ease-in-out;
    cursor: pointer;
    height: auto;
}

.left-liveTime {
    width: 21%;
    transform: rotate(-7deg) translateX(-150%);
    z-index: 1;
    margin-left: 150px;
    animation: float-left 3s ease-in-out infinite;
}

@keyframes float-left {
    0% {
        transform: rotate(-7deg) translateX(-150%) translateY(0);
    }

    50% {
        transform: rotate(-7deg) translateX(-150%) translateY(-20px);
    }

    100% {
        transform: rotate(-7deg) translateX(-150%) translateY(0);
    }
}

.center-liveTime {
    width: 25%;
    transform: rotate(0deg) translateX(0);
    z-index: 2;
    animation: float-center-liveTime 3s ease-in-out infinite;
}

@keyframes float-center-liveTime {
    0% {
        transform: rotate(0deg) translateX(0) translateY(0);
    }

    50% {
        transform: rotate(0deg) translateX(0) translateY(-10px);
    }

    100% {
        transform: rotate(0deg) translateX(0) translateY(0);
    }
}



.right-liveTime {
    width: 21%;
    transform: rotate(7deg) translateX(150%);
    z-index: 1;
    margin-left: -150px;
    animation: float-right-liveTime 3s ease-in-out infinite;
}

@keyframes float-right-liveTime {
    0% {
        transform: rotate(7deg) translateX(150%) translateY(0);
    }

    50% {
        transform: rotate(7deg) translateX(150%) translateY(-20px);
    }

    100% {
        transform: rotate(7deg) translateX(150%) translateY(0);
    }
}

/* Animação para mover o carrossel atual para a esquerda */
.slide-out-left-liveTime {
    animation: slideOutLeft-liveTime 0.8s forwards;
}

@keyframes slideOutLeft-liveTime {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* Animação para trazer o novo carrossel da direita */
.slide-in-right-liveTime {
    animation: slideInRight-liveTime 0.8s forwards;
}

@keyframes slideInRight-liveTime {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}





/* Estilo do segundo slider */
.simple-slider-container-liveTime {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-weight: 500;
    margin-top: -20px;
}

.simple-slider-liveTime {
    width: 100%;
    max-width: 450px;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide-content-liveTime {
    width: 100%;
    text-align: center;
    font-size: 2.0em;
    color: black;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    line-height: 1em;
}

.slide-image-liveTime {
    max-width: auto;
    height: 50px;
    cursor: pointer;
}

.slide-image-play-liveTime {
    max-width: auto;
    height: 49px;
    cursor: pointer;
}





.image-container-liveTime {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 20vh;
    color: black;
    font-weight: 600;
    font-size: 1.5em;
    flex-direction: column;
    overflow-x: hidden;
}

.logo-LapTime-liveTime {
    max-width: 100%;
    height: auto;
}



@media (max-width: 768px) {
    .carousel-liveTime {
        transform: scale(1.2);
    }

    .simple-slider-container-liveTime {
        margin-top: -80px;
    }

    .carousel-liveTime-slider-liveTime {
        margin-top: -50px;
    }
}