/**
 * Slideshow styles for the Easy Slide plugin.
 * Defines keyframes and image transitions for rotating banners.
 */

/** SLIDESHOW SETTINGS **/
 @keyframes slideimage {
    0% {
        /* comes on */
        display: block !important;
        left: -100%;
    }
    10% {
        /* stays for a bit */
        left: 0%;
    }
    25% {
        /*leaves */
        left: 0%;
    }
    35% {
        left: 100%;
        display: none;
    }
    100% {
        left: 100%;
        display: none;
    }
 }
 @-webkit-keyframes slideimage {
    0% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
 }

 @keyframes slideOn {
    0% {
        left: -100%;
        display: block !important;
    }
    100% {
        left: 0%;
    }
 }
 @keyframes slideOff {
    0% {
        left: 0%;
        visibility: visible;
    }
    100% {
        left: 100%;
    }
 }

 .slideshow img{
    border-radius: 8px;
    display: none;
 }
.slideshow img.slideon {
    -webkit-animation: slideOn 4s 1 linear;
    animation: slideOn 4s 1 linear;
    display: block;
    z-index: 1;
}
.slideshow img.slideoff {
    -webkit-animation: slideOff 4s 1 linear;
    animation: slideOff 4s 1 linear;
    display: block;
    visibility: hidden;
    z-index: -1;
}

/*
 .slideshow img:nth-child(5){
    -webkit-animation: slideimage 16s infinite linear;
    animation: slideimage 16s infinite linear;
 }
 .slideshow img:nth-child(4){
    -webkit-animation: slideimage 16s infinite linear;
    animation: slideimage 16s infinite linear;
    animation-delay: 4s;
    animation-fill-mode: backwards;
 }
 .slideshow img:nth-child(3){
    -webkit-animation: slideimage 16s infinite linear;
    animation: slideimage 16s infinite linear;
    animation-delay: 8s;
    animation-fill-mode: backwards;
 }
 .slideshow img:nth-child(2){
    -webkit-animation: slideimage 16s infinite linear;
    animation: slideimage 16s infinite linear;
    animation-delay: 12.1s;
    animation-fill-mode: backwards;
 }
    */