/* 
    Handcoded by JAC - Johnny Alimoot C.
*/
:root{
    --slideImage1 : url('../art/hero1.webp');
    --slideImage2 : url('../art/hero2.webp');
    --slideImage3 :url('../art/hero3.webp');
}

@-webkit-keyframes hero-slideshow {
    0%{ background-size: 100%; }
    0%, 15% {
        background-image: var(--slideImage1)
    }
    18%, 48% {
        background-image: var(--slideImage2)
    }
    50%{ background-size: 150%; }
    51%, 82% {
        background-image: var(--slideImage3)
    }
    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)
    }
    18%, 48% {
        background-image: var(--slideImage2)
    }
    50%{ -moz-background-size: 150%; background-size: 150%; }
    51%, 82% {
        background-image: var(--slideImage3)
    }
    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)
    }
    18%, 48% {
        background-image: var(--slideImage2)
    }
    50%{ -o-background-size: 150%; background-size: 150%; }
    51%, 82% {
        background-image: var(--slideImage3)
    }
    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)
    }
    18%, 48% {
        background-image: var(--slideImage2)
    }
    50%{ -moz-background-size: 150%; -o-background-size: 150%; background-size: 150%; }
    51%, 82% {
        background-image: var(--slideImage3)
    }
    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%, 15% {
            background-image: var(--slideImage1)
        }
        18%, 48% {
            background-image: var(--slideImage2)
        }
        51%, 82% {
            background-image: var(--slideImage3)
        }
        85%, 100% {
            background-image: var(--slideImage1)
        }
    }
    @-moz-keyframes hero-slideshow {
        0%, 15% {
            background-image: var(--slideImage1)
        }
        18%, 48% {
            background-image: var(--slideImage2)
        }
        51%, 82% {
            background-image: var(--slideImage3)
        }
        85%, 100% {
            background-image: var(--slideImage1)
        }
    }
    @-o-keyframes hero-slideshow {
        0%, 15% {
            background-image: var(--slideImage1)
        }
        18%, 48% {
            background-image: var(--slideImage2)
        }
        51%, 82% {
            background-image: var(--slideImage3)
        }
        85%, 100% {
            background-image: var(--slideImage1)
        }
    }
    @keyframes hero-slideshow {
        0%, 15% {
            background-image: var(--slideImage1)
        }
        18%, 48% {
            background-image: var(--slideImage2)
        }
        51%, 82% {
            background-image: var(--slideImage3)
        }
        85%, 100% {
            background-image: var(--slideImage1)
        }
    }
    
}