.containerSlider {
  width: 100%; /* O el ancho deseado */
  overflow: hidden; /* Oculta las imágenes que se salen del contenedor */
  position: relative; /* Para posicionar elementos dentro */
}

/* Contenedor del slider */
.slider-wrapper {
  display: flex; /* Alinea las imágenes una al lado de la otra */
  width: 300%; /* 100% de ancho por el número de imágenes (ej: 4 imágenes * 100%) */
  animation: slide 15s infinite linear; /* Nombre, duración, y repetición de la animación */
}

/* Estilos de cada imagen */
.slide {
  width: 100%; /* Cada imagen ocupa el 100% del contenedor padre */
}

.slide img {
  width: 100%; /* La imagen ocupa el 100% del ancho de su div */
  height: auto; /* Mantiene la proporción de la imagen */
}

/* Animación para el slider */
@keyframes slide {
    0% {margin-left: 0;}
    30% {margin-left: 0;}
    
    35% {margin-left: -100%;}
    65% {margin-left: -100%;}
    
    70% {margin-left: -200%;}
    100% {margin-left: -200%;}
  }
}


  









/**************************************************************************************************
                                        MEDIA QUERIES DE TABLETA
**************************************************************************************************/

/* Media Queries para la tableta */
@media only screen and (min-width:720px) and (max-width:1023px){
#centrar_sociales, #centrar_main, #centrar_contacto #centrar_footer {
    width: 720px;
    /*background-color: rgba(210, 146, 222, 0.5);*/
}

    

}    


/**************************************************************************************************
                                        MEDIA QUERIES DE MOBILE
**************************************************************************************************/

@media only screen and (min-width:320px) and (max-width:719px){    
#centrar_sociales, #centrar_main, #centrar_contacto #centrar_footer {
    width: 320px;
    /*background-color: rgba(122, 146, 226, 0.5);*/
}
    
    
    
    
}