/* 
    Handcoded by JAC - Johnny Alimoot C.
*/
:root{
    --slideImage1 : url('../art/bg21.jpg');
    --slideImage2 : url('../art/bg2.jpg');
    --slideImage3 : url('../art/bg22.jpg');
    --slideImage4 :url('../art/bg7.jpeg');
    --slideImage5 : url('../art/bg23.jpg');
}

@-webkit-keyframes hero-slideshow {
    0%{ background-size: 100%; }
    0%, 15% {
        background-image: var(--slideImage1)
    }
    12%, 35% {
        background-image: var(--slideImage2)
    }

    30%, 49% {
        background-image: var(--slideImage3)
    }
    50%{ background-size: 150%; }
    51%, 70% {
        background-image: var(--slideImage4)
    }
    68%, 85% {
        background-image: var(--slideImage5)
    }
    85%, 100% {
        background-image: var(--slideImage1)
    }
    100%{ background-size: 100%; }
}

@-moz-keyframes hero-slideshow {
    0%{ -moz-background-size: 100%; background-size: 100%; }
    0%, 15% {
        background-image: var(--slideImage1)
    }
    12%, 35% {
        background-image: var(--slideImage2)
    }

    30%, 49% {
        background-image: var(--slideImage3)
    }
    50%{ -moz-background-size: 150%; background-size: 150%; }
    51%, 70% {
        background-image: var(--slideImage4)
    }
    68%, 85% {
        background-image: var(--slideImage5)
    }
    85%, 100% {
        background-image: var(--slideImage1)
    }
    100%{ -moz-background-size: 100%; background-size: 100%; }
}

@-o-keyframes hero-slideshow {
    0%{ -o-background-size: 100%; background-size: 100%; }
    0%, 15% {
        background-image: var(--slideImage1)
    }
    12%, 35% {
        background-image: var(--slideImage2)
    }

    30%, 49% {
        background-image: var(--slideImage3)
    }
    50%{ -o-background-size: 150%; background-size: 150%; }
    51%, 70% {
        background-image: var(--slideImage4)
    }
    68%, 85% {
        background-image: var(--slideImage5)
    }
    85%, 100% {
        background-image: var(--slideImage1)
    }
    100%{ -o-background-size: 100%; background-size: 100%; }
}

@keyframes hero-slideshow {
    0%{ -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; }
    0%, 15% {
        background-image: var(--slideImage1)
    }
    12%, 35% {
        background-image: var(--slideImage2)
    }

    30%, 49% {
        background-image: var(--slideImage3)
    }
    50%{ -moz-background-size: 150%; -o-background-size: 150%; background-size: 150%; }
    51%, 70% {
        background-image: var(--slideImage4)
    }
    68%, 85% {
        background-image: var(--slideImage5)
    }
    85%, 100% {
        background-image: var(--slideImage1)
    }
    100%{ -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; }
}

@-webkit-keyframes fade {
    0%{ opacity: 1; }
    50%{ opacity: 1; }
    100%{ opacity: 0; }
}

@-moz-keyframes fade {
    0%{ opacity: 1; }
    50%{ opacity: 1; }
    100%{ opacity: 0; }
}

@-o-keyframes fade {
    0%{ opacity: 1; }
    50%{ opacity: 1; }
    100%{ opacity: 0; }
}

@keyframes fade {
    0%{ opacity: 1; }
    50%{ opacity: 1; }
    100%{ opacity: 0; }
}



@media only screen and (max-width: 992px) {
    @-webkit-keyframes hero-slideshow {
       
        0%, 13% {
            background-image: var(--slideImage1)
        }
        12%, 30% {
            background-image: var(--slideImage2)
        }
    
        20%, 48% {
            background-image: var(--slideImage3)
        }

        51%, 72% {
            background-image: var(--slideImage4)
        }
        65%, 80% {
            background-image: var(--slideImage5)
        }
        85%, 100% {
            background-image: var(--slideImage1)
        }
    }
    @-moz-keyframes hero-slideshow {
       
        0%, 13% {
            background-image: var(--slideImage1)
        }
        12%, 30% {
            background-image: var(--slideImage2)
        }
    
        20%, 48% {
            background-image: var(--slideImage3)
        }

        51%, 72% {
            background-image: var(--slideImage4)
        }
        65%, 80% {
            background-image: var(--slideImage5)
        }
        85%, 100% {
            background-image: var(--slideImage1)
        }
    }
    @-o-keyframes hero-slideshow {
        
        0%, 13% {
            background-image: var(--slideImage1)
        }
        12%, 30% {
            background-image: var(--slideImage2)
        }
    
        20%, 48% {
            background-image: var(--slideImage3)
        }

        51%, 72% {
            background-image: var(--slideImage4)
        }
        65%, 80% {
            background-image: var(--slideImage5)
        }
        85%, 100% {
            background-image: var(--slideImage1)
        }
    }
    @keyframes hero-slideshow {
       
        0%, 13% {
            background-image: var(--slideImage1)
        }
        12%, 30% {
            background-image: var(--slideImage2)
        }
    
        20%, 48% {
            background-image: var(--slideImage3)
        }

        51%, 72% {
            background-image: var(--slideImage4)
        }
        65%, 80% {
            background-image: var(--slideImage5)
        }
        85%, 100% {
            background-image: var(--slideImage1)
        }
    }
    
}