@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 9 carteles:*/
    width: 900%;
    animation: cambio 44s 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 9 carteles pines, tiene que etener en en .slider ul {
                                                                width: 900%;
                                                                animation: cambio 44s infinite; */
    0% {margin-left: 0;}
   10% {margin-left: 0;}

   12% {margin-left: -100%;}
   22% {margin-left: -100%;}

   24% {margin-left: -200%;}
   34% {margin-left: -200%;}

   36% {margin-left: -300%;}
   46% {margin-left: -300%;}

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

   60% {margin-left: -500%;}
   70% {margin-left: -500%;}

   72% {margin-left: -600%;}
   82% {margin-left: -600%;}

   84% {margin-left: -700%;}
   94% {margin-left: -700%;}

   96% {margin-left: -800%;}
   100% {margin-left: -800%;}



}


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



@media (min-width:1080px) {
   .slider {
	width: 45%;
    }
}