:root {
    --slideImage1: url('../img/topcarousel/a1.jpg');
    --slideImage2: url('../img/topcarousel/a2.jpg');
    --slideImage3: url('../img/topcarousel/a3.jpg');
    --slideImage4: url('../img/topcarousel/a4.jpg');
}

@-webkit-keyframes hero-slideshow {
    0% {
        background-size: 100%;
    }

    0%, 12% {
        background-image: var(--slideImage1)
    }

    15%, 38% {
        background-image: var(--slideImage2)
    }

    40% {
        background-size: 150%;
    }

    41%, 62% {
        background-image: var(--slideImage3)
    }

    62% {
        background-size: 150%;
    }

    64%, 84% {
        background-image: var(--slideImage4)
    }

    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%, 72% {
        background-image: var(--slideImage3)
    }

    73%, 84% {
        background-image: var(--slideImage4)
    }

    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%, 72% {
        background-image: var(--slideImage3)
    }

    73%, 84% {
        background-image: var(--slideImage4)
    }

    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%, 72% {
        background-image: var(--slideImage3)
    }

    73%, 84% {
        background-image: var(--slideImage4)
    }

    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)
        }
    }
}