@import url(../estilos.css);
@import url(/css/index/bannerclientes.css);
@import url(/css/index/bannerserv.css);
@import url(/css/index/slogan.css);

.contenedor{
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 2em;
    margin-bottom: 2em;
}
.contenido{
    display: flex;
    position: relative;
    width: 300%;
    margin: 0;
    padding: 0;
    height:800px;
}

.banner{
    padding-top: 5%;
    position: relative;
    top: 25%;
    height: 60%;
    width: 33.5%;
    background-color: rgba(85, 85, 85, 0.5);    
}

.banner h2{
    color: #ffffff;
    text-align: center;
}

.banner p{
    top: -5%;
    padding: 10%;
    text-align: justify;
    font-size: 1.2rem;
    color: #ffffff;
}

.imagenes{
    position: relative;
    width: 100%;
    height: 100%; 
}

.imagenes img{
    position: absolute;
    width: 100%;
    height: 100%;
}

.contenido {
    transition: 10ms;
    animation: imagen 35s infinite;
}

@keyframes imagen{
    0% { margin-left: 0;}
    20% { margin-left: 0;}

    25%{ margin-left: -100%;}
    40%{ margin-left: -100%;}

    50%{ margin-left: -200%;}
    70%{ margin-left: -200%;}
}

@media (max-width: 1400px){
    .contenido{
        height: 630px;
    }
}