/* CommunityOS hero animation only. */

.k_hero_stage {
    --hero-slide-p: 100%;
    --hero-stage-h: 200vw;
    height: var(--hero-stage-h);
}
.k_hero_slide {
    width: var(--hero-slide-p);
    height: 100%;
    background-position: center;
    transition: width 1.2s ease, height 1.2s ease;
}
.k_hero_slide5,
.k_hero_slide6,
.k_hero_slide7 {
    width: 0;
    height: 0;
}
.k_hero_slide1 {
    animation: kHeroMobileSlide1 42s infinite;
}
.k_hero_slide2 {
    animation: kHeroMobileSlide2 42s infinite;
}
.k_hero_slide3 {
    animation: kHeroMobileSlide3 42s infinite;
}
.k_hero_slide4 {
    animation: kHeroMobileSlide4 42s infinite;
}
.k_hero_slide5 {
    animation: kHeroMobileSlide5 42s infinite;
}
.k_hero_slide6 {
    animation: kHeroMobileSlide6 42s infinite;
}
.k_hero_slide7 {
    animation: kHeroMobileSlide7 42s infinite;
}

@media (min-width: 769px) and (max-width: 1199px) {
    .k_hero_stage {
        --hero-slide-p: 50%;
        --hero-stage-h: 100vw;
    }
    .k_hero_slide1 {
        animation: kHeroTabletSlide1 42s infinite;
    }
    .k_hero_slide2 {
        animation: kHeroTabletSlide2 42s infinite;
    }
    .k_hero_slide3 {
        animation: kHeroTabletSlide3 42s infinite;
    }
    .k_hero_slide4 {
        animation: kHeroTabletSlide4 42s infinite;
    }
    .k_hero_slide5 {
        animation: kHeroTabletSlide5 42s infinite;
    }
    .k_hero_slide6 {
        animation: kHeroTabletSlide6 42s infinite;
    }
    .k_hero_slide7 {
        animation: kHeroTabletSlide7 42s infinite;
    }
}

@media (min-width: 1200px) {
    .k_hero_stage {
        --hero-slide-p: 25%;
        --hero-stage-h: 50vw;
    }
    .k_hero_slide1 {
        animation: kHeroSlideOut1 42s infinite;
    }
    .k_hero_slide2 {
        animation: kHeroSlideOut2 42s infinite;
    }
    .k_hero_slide3 {
        animation: kHeroSlideOut3 42s infinite;
    }
    .k_hero_slide4 {
        animation: none;
    }
    .k_hero_slide5 {
        animation: kHeroSlideIn1 42s infinite;
    }
    .k_hero_slide6 {
        animation: kHeroSlideIn2 42s infinite;
    }
    .k_hero_slide7 {
        animation: kHeroSlideIn3 42s infinite;
    }
}

@keyframes kHeroSlideOut1 {
    0%, 17% { width: var(--hero-slide-p); height: 100%; }
    23%, 68% { width: 0; height: 0; }
    74%, 100% { width: var(--hero-slide-p); height: 100%; }
}
@keyframes kHeroSlideOut2 {
    0%, 33% { width: var(--hero-slide-p); height: 100%; }
    39%, 76% { width: 0; height: 0; }
    82%, 100% { width: var(--hero-slide-p); height: 100%; }
}
@keyframes kHeroSlideOut3 {
    0%, 50% { width: var(--hero-slide-p); height: 100%; }
    56%, 84% { width: 0; height: 0; }
    90%, 100% { width: var(--hero-slide-p); height: 100%; }
}
@keyframes kHeroSlideIn1 {
    0%, 17% { width: 0; height: 0; }
    23%, 68% { width: var(--hero-slide-p); height: 100%; }
    74%, 100% { width: 0; height: 0; }
}
@keyframes kHeroSlideIn2 {
    0%, 33% { width: 0; height: 0; }
    39%, 76% { width: var(--hero-slide-p); height: 100%; }
    82%, 100% { width: 0; height: 0; }
}
@keyframes kHeroSlideIn3 {
    0%, 50% { width: 0; height: 0; }
    56%, 84% { width: var(--hero-slide-p); height: 100%; }
    90%, 100% { width: 0; height: 0; }
}
@keyframes kHeroTabletSlide1 {
    0%, 12% { width: var(--hero-slide-p); height: 100%; }
    15%, 82% { width: 0; height: 0; }
    85%, 100% { width: var(--hero-slide-p); height: 100%; }
}
@keyframes kHeroTabletSlide2 {
    0%, 26% { width: var(--hero-slide-p); height: 100%; }
    29%, 100% { width: 0; height: 0; }
}
@keyframes kHeroTabletSlide3 {
    0%, 12% { width: 0; height: 0; }
    15%, 40% { width: var(--hero-slide-p); height: 100%; }
    43%, 100% { width: 0; height: 0; }
}
@keyframes kHeroTabletSlide4 {
    0%, 26% { width: 0; height: 0; }
    29%, 54% { width: var(--hero-slide-p); height: 100%; }
    57%, 100% { width: 0; height: 0; }
}
@keyframes kHeroTabletSlide5 {
    0%, 40% { width: 0; height: 0; }
    43%, 68% { width: var(--hero-slide-p); height: 100%; }
    71%, 100% { width: 0; height: 0; }
}
@keyframes kHeroTabletSlide6 {
    0%, 54% { width: 0; height: 0; }
    57%, 82% { width: var(--hero-slide-p); height: 100%; }
    85%, 100% { width: 0; height: 0; }
}
@keyframes kHeroTabletSlide7 {
    0%, 68% { width: 0; height: 0; }
    71%, 100% { width: var(--hero-slide-p); height: 100%; }
}
@keyframes kHeroMobileSlide1 {
    0%, 11% { width: var(--hero-slide-p); height: 100%; }
    14%, 97% { width: 0; height: 0; }
    100% { width: var(--hero-slide-p); height: 100%; }
}
@keyframes kHeroMobileSlide2 {
    0%, 11% { width: 0; height: 0; }
    14%, 25% { width: var(--hero-slide-p); height: 100%; }
    28%, 100% { width: 0; height: 0; }
}
@keyframes kHeroMobileSlide3 {
    0%, 25% { width: 0; height: 0; }
    28%, 39% { width: var(--hero-slide-p); height: 100%; }
    42%, 100% { width: 0; height: 0; }
}
@keyframes kHeroMobileSlide4 {
    0%, 39% { width: 0; height: 0; }
    42%, 53% { width: var(--hero-slide-p); height: 100%; }
    56%, 100% { width: 0; height: 0; }
}
@keyframes kHeroMobileSlide5 {
    0%, 53% { width: 0; height: 0; }
    56%, 67% { width: var(--hero-slide-p); height: 100%; }
    70%, 100% { width: 0; height: 0; }
}
@keyframes kHeroMobileSlide6 {
    0%, 67% { width: 0; height: 0; }
    70%, 81% { width: var(--hero-slide-p); height: 100%; }
    84%, 100% { width: 0; height: 0; }
}
@keyframes kHeroMobileSlide7 {
    0%, 81% { width: 0; height: 0; }
    84%, 97% { width: var(--hero-slide-p); height: 100%; }
    100% { width: 0; height: 0; }
}