.header-slider-bg-img {
    background: white;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 1920px auto;
    background-position: center center;
}

#sliderFade .carousel-control-next,
#sliderFade .carousel-control-prev {
    /*width: 4%;*/
    /*background-color: rgba(0, 0, 0, 0.2);*/
    transition: all 0.5s;
}

/* add more animations in this format #sliderFade.{animation-format} .header-slider-bg-img.animated-slide-bg-img*/
.slider-effect-after-loaded--zoom-in
{
    animation-name: slider-effect-after-loaded--zoom-in-animation;
    animation-duration: 7s;
    animation-fill-mode: forwards;
}

.slider-effect-after-loaded--zoom-out
{
    animation-name: slider-effect-after-loaded--zoom-out-animation;
    animation-duration: 7s;
    animation-fill-mode: forwards;
}

.slider-effect-after-loaded--zoom-in-out
{
    animation-name: slider-effect-after-loaded--zoom-in-out-animation;
    animation-duration: 10s;
    animation-fill-mode: forwards;
}

.slider-effect-after-loaded--zoom-out-in
{
    animation-name: slider-effect-after-loaded--zoom-out-in-animation;
    animation-duration: 10s;
    animation-fill-mode: forwards;
}

@keyframes slider-effect-after-loaded--zoom-in-animation {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.08, 1.08);
    }
    100% {
        transform: scale(1.08, 1.08);
    }
}

@keyframes slider-effect-after-loaded--zoom-out-animation {
    0% {
        transform: scale(1.08, 1.08);
    }
    50% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 1);
    }
}

@keyframes slider-effect-after-loaded--zoom-in-out-animation {
    0% {
        transform: scale(1, 1);
    }
    27% {
        transform: scale(1.07, 1.07);
    }
    73% {
        transform: scale(1.05, 1.05);
    }
}

@keyframes slider-effect-after-loaded--zoom-out-in-animation {
    0% {
        transform: scale(1.08, 1.08);
    }
    25% {
        transform: scale(1, 1);
    }
    30% {
        transform: scale(1, 1);
    }
}