/* Css para manejar cambio de imagenes cada cierto tiempo en publicidad (sin JS) */

/* Para manejar el rotador de publicidad que tiene 2 imagenes */
.css-slideshow1{
    max-width: 495px;
    height: 500px;
}
.css-slideshow1 figure{
    margin: 0;
    height: 500px;
    position: absolute;
}
.css-slideshow1 img{
    box-shadow: 0 0 2px #666;
}

.css-slideshow1 figure{
    opacity:0;
}

.css-slideshow1 figure:nth-child(1) {
    animation: xfade1 14s 7s infinite;
}
.css-slideshow1 figure:nth-child(2) {
    animation: xfade1 14s 0s infinite;
}

@keyframes xfade1{
    0%{
        opacity: 1;
        z-index: 99999;
    }
    10.5% {
         opacity: 1;
        z-index: 99999;
     }

    48.5% {
        opacity: 1;
        z-index: 99999;
    }
    50%{
        opacity: 0;
        z-index: -99999;
    }
    98% {
        opacity: 0;
        z-index: -99999;
    }
    100% {
        opacity: 1;
        z-index: 99999;
    }
}

/*-------------------------------------------------------------------------------------*/

/* Para manejar el rotador de publicidad que tiene 3 imagenes */
.css-slideshow2{
    max-width: 495px;
    height: 500px;
}
.css-slideshow2 figure{
    margin: 0;
    height: 500px;
    position: absolute;
}
.css-slideshow2 img{
    box-shadow: 0 0 2px #666;
}

.css-slideshow2 figure{
    opacity:0;
}

.css-slideshow2 figure:nth-child(1) {
    animation: xfade2 21s 14s infinite;
}
.css-slideshow2 figure:nth-child(2) {
    animation: xfade2 21s 7s infinite;
}

.css-slideshow2 figure:nth-child(3) {
    animation: xfade2 21s 0s infinite;
}

@keyframes xfade2{
    0%{
        opacity: 1;
        z-index: 99999;
    }
    10.5% {
        opacity: 1;
        z-index: 99999;
    }

    32% {
        opacity: 1;
        z-index: 99999;
    }

    33%{
        opacity: 0;
        z-index: -99999;
    }

    50%{
        opacity: 0;
        z-index: -99999;
    }

    98% {
        opacity: 0;
        z-index: -99999;
    }

    100% {
        opacity: 0;
        z-index: -99999;
    }
}