/*=====CSS para el carrusel de marcas=====*/
.logos
{
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    white-space: nowrap;
    grid-column: 1 / -1;
    width: 100%;
    background: var(--bg-light);
    border-radius: 25px;
}
.logos::after,
.logos::before
{
    position: absolute;
    top: 0;
    width: 300px;
    height: 100%;
    content: "";
    z-index: 2;
}
.logos:before
{
    left: 0;
    background: linear-gradient(to left, transparent, var(--bg-dark));

}
.logos::after
{
    right: 0;
    background: linear-gradient(to right, transparent, var(--bg-dark));

}
.logosSlide
{

    animation: 15s slide infinite linear;
    display: inline-block;
}
.logosSlide i
{
    font-size: 80px;
    margin: 0 40px;
}
.logosSlide img
{
    width: 80px;
    margin: 0 40px;
    border-radius: 15px;
}
/*animaciones*/
@keyframes slide 
{
    from {transform: translateX(0);}
    to   {transform: translateX(-100%);}    
}
.logos:hover .logosSlide {
    animation-play-state: paused;
}
/*Responsive*/
@media (max-width: 964px) 
{   
    .logos::after,
    .logos::before
    {
        width: 80px;
        height: 100%;
    }
}
@media (max-width: 767px) 
{   
    .logos::after,
    .logos::before
    {
        width: 35px;
        height: 100%;
    }
}