@import url(http://fonts.googleapis.com/css?family=Open+Sans);
/* Si quisiera establecer otra fuente alternativa:
@import url('https://fonts.googleapis.com/css?family=Lacquer&display=swap');
*/

body {
    /* Color rojo de fondo de la página original */
    background: #6d0e11;
}


h1 {
    /* Para establecer la fuente en el literal "Galería de Carteles", se necesita la sgte línea, y el import
       de la primera línea de este archivo: @import url(http://fonts.googleapis.com/css?family=Open+Sans); */
    font-family: 'Open Sans', sans-serif;
    /* Fuente alternativa:
    font-family: 'Lacquer', sans-serif;
    */
}


.slider {
    /* Para establecer la fuente del texto "Año 20XX" justo encima de la foto del cartel, se necesita la sgte línea, y el import
       de la primera línea de este archivo: @import url(http://fonts.googleapis.com/css?family=Open+Sans); */
    font-family: 'Open Sans', sans-serif;
    /* Fuente alternativa:
    font-family: 'Lacquer', sans-serif;
    */

    width: 95%;
    margin: auto;
    overflow: hidden;

}


.slider ul {
    display: flex;
    padding: 0;


    /* Para 4 pines:
    width: 400%;
    animation: cambio 20s infinite; */

    /* Para 10 pines:
    width: 1000%;
    animation: cambio 50s infinite; */

    /* Para 25 pines con el del 2020:*/
    width: 2500%;
    animation: cambio 74s infinite;

    /* Para cualquier nº de pines, para que cuando llegue a la última imagen regrese hacia la anterior y no vaya bruscamente a la 1ª*/
    animation-direction: alternate;
}


.slider li {
    width: 100%;
    list-style: none;
}


.slider img {
    width: 40%;
    /* Las 2 sgtes lineas para que se centre la imagen*/
    display:block;
    margin:auto;
}


@keyframes cambio {
   /* Para 4 pines, tiene que etener en en .slider ul {
                                                       width: 400%;
                                                       animation: cambio 20s infinite;
   0% {margin-left: 0;}
   20% {margin-left: 0;}

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

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

   75% {margin-left: -300%;}
   100% {margin-left: -300%;}
   */

   /* Para 10 pines, tiene que etener en en .slider ul {
                                                        width: 1000%;
                                                        animation: cambio 50s infinite;
   0% {margin-left: 0;}
   8% {margin-left: 0;}

   10% {margin-left: -100%;}
   18% {margin-left: -100%;}

   20% {margin-left: -200%;}
   28% {margin-left: -200%;}

   30% {margin-left: -300%;}
   38% {margin-left: -300%;}

   40% {margin-left: -400%;}
   48% {margin-left: -400%;}

   50% {margin-left: -500%;}
   58% {margin-left: -500%;}

   60% {margin-left: -600%;}
   68% {margin-left: -600%;}

   70% {margin-left: -700%;}
   78% {margin-left: -700%;}

   80% {margin-left: -800%;}
   88% {margin-left: -800%;}

   90% {margin-left:  -900%;}
   100% {margin-left: -900%;}
   */



   /* Para 25 pines, tiene que etener en en .slider ul {
                                                        width: 2500%;
                                                        animation: cambio 74s infinite;*/

   0% {margin-left: 0;}
   3% {margin-left: 0;}

   4% {margin-left: -100%;}
   7% {margin-left: -100%;}

   8% {margin-left: -200%;}
   11% {margin-left: -200%;}

   12% {margin-left: -300%;}
   15% {margin-left: -300%;}

   16% {margin-left: -400%;}
   19% {margin-left: -400%;}

   20% {margin-left: -500%;}
   23% {margin-left: -500%;}

   24% {margin-left: -600%;}
   27% {margin-left: -600%;}

   28% {margin-left: -700%;}
   31% {margin-left: -700%;}

   32% {margin-left: -800%;}
   35% {margin-left: -800%;}

   36% {margin-left: -900%;}
   39% {margin-left: -900%;}

   40% {margin-left: -1000%;}
   43% {margin-left: -1000%;}

   44% {margin-left: -1100%;}
   47% {margin-left: -1100%;}

   48% {margin-left: -1200%;}
   51% {margin-left: -1200%;}

   52% {margin-left: -1300%;}
   55% {margin-left: -1300%;}

   56% {margin-left: -1400%;}
   59% {margin-left: -1400%;}

   60% {margin-left: -1500%;}
   63% {margin-left: -1500%;}

   64% {margin-left: -1600%;}
   67% {margin-left: -1600%;}

   68% {margin-left: -1700%;}
   71% {margin-left: -1700%;}

   72% {margin-left: -1800%;}
   75% {margin-left: -1800%;}

   76% {margin-left: -1900%;}
   79% {margin-left: -1900%;}

   80% {margin-left: -2000%;}
   83% {margin-left: -2000%;}

   84% {margin-left: -2100%;}
   87% {margin-left: -2100%;}

   90% {margin-left: -2200%;}
   93% {margin-left: -2200%;}

   94% {margin-left: -2300%;}
   97% {margin-left: -2300%;}

   98%  {margin-left: -2400%;}
   100% {margin-left: -2400%;}

}


/* Nuevo para responsivar las fotos verticales de los sliders  */
@media (min-width:480px) {
    .slider {
        width: 90%;
    }
}


@media (min-width:768px) {
   .slider {
        /*width: auto;*/
         width: 50%;
    }
}


@media (min-width:1024px) {
   .slider {
        /*width: auto;*/
	width: 50%;
    }
}