/* used for background slides on shortcode [kb-slide_images] */

.bg-fade-wrapper {
    position:relative;
    overflow:hidden;
    --bg-slider-duration:16s;
    --bg-animation-delay:8s;
}

.bg-fade-wrapper .bg-fade {
    position:absolute;
    content: '';
    width: 100%;
    height:100%;
    inset:0;
    background-size:cover;
    background-position:center center;
    opacity:0;
    animation-name: fade-zoom;
    animation-duration:var(--bg-slider-duration);
    animation-iteration-count: infinite;
}

.bg-fade-wrapper .bg-fade:after {
    position:absolute;
    content:'';
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
    background:linear-gradient(90deg,rgba(0,0,0,0.5) 0%, rgba(0,0,0,0)100%);

}

.bg-fade-wrapper:hover .bg-fade {
    animation-play-state:paused;
}

.bg-fade-wrapper .bg-fade:nth-child(2) {
    animation-delay:0s;
}

.bg-fade-wrapper .bg-fade:nth-child(3) {
    animation-delay:calc(var(--bg-animation-delay) * 1);
}

.bg-fade-wrapper .bg-fade:nth-child(4) {
    animation-delay:calc(var(--bg-animation-delay) * 2);
}

.bg-fade-wrapper .bg-fade:nth-child(5) {
    animation-delay:calc(var(--bg-animation-delay) * 3);
}
.bg-fade-wrapper .bg-fade:nth-child(6) {
    animation-delay:calc(var(--bg-animation-delay) * 4);
}

/* uses bg-static if only 1 bg image*/
.bg-fade-wrapper .bg-static {
    position:absolute;
    content: '';
    width: 100%;
    height:100%;
    inset:0;
    background-size:cover;
    background-position:center center;
}

.bg-fade-wrapper .bg-static:after {
    position:absolute;
    content:'';
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
    background:linear-gradient(90deg,rgba(0,0,0,0.5) 0%, rgba(0,0,0,0)100%);

}


@keyframes fade-zoom {
    0% {
        opacity:0;
        transform:scale(100%);
    }
    16% {
        opacity:1;
    }
    33.33% {
        opacity:1;
    }
    48.66% {
        opacity:.5;
    }
    100% {
        opacity:0;
        transform:scale(110%);
    }

}