body { margin: 0; }
div#slider {
  overflow: hidden;
  width: 340px;
} /* las imágenes no van a salir del márgen de la pantalla*/
div#slider figure img { width: 15%; float: left; }

div#slider figure {
  position: relative;
  width: 666% !important;
  margin-left:  0px;
  margin-top: auto;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 25s slidy infinite; /*el movimiento se va a mantener de forma indefinida -infinito-*/
}


/*esta parte del código define el movimiento de las imágenes a la izquierda*/
@keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}

@media screen and (max-width: 414px) and (min-width:360px){
  div#slider figure {
    display: none !important;
  }
}

@media screen and (max-width: 1440px) and (min-width:640px){
  div#slider figure {
    position: relative;
    width: 400%;
    height: 100px;
    margin-left:  0px;
    margin-top: 0%;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 25s slidy infinite; /*el movimiento se va a mantener de forma indefinida -infinito-*/
  }
}