/*********************************************
 * Home Banner
**********************************************/
/* General */
.vii-home-banner {
    --hb-padding:8px;
    margin-top:calc(-1 * var(--vii-header-height)); padding:0 var(--hb-padding) var(--hb-padding);
}

/* banner height */
.vii-home-banner--height {
    height:calc(var(--vii-100vh) - var(--hb-padding) - var(--admin-bar-height));
    width:100%;
}

/* dots */
.vii-home-banner .flickity-page-dots {position:absolute;}
.vii-home-banner .flickity-page-dots .flickity-page-dot {box-shadow:none; margin:0;}
.vii-home-banner .flickity-page-dots .flickity-page-dot.is-selected,
.vii-home-banner .flickity-page-dots .flickity-page-dot:hover {background:var(--vii-color-primary);}
@media only screen and (min-width:769px) {
    .vii-home-banner .flickity-page-dots {
        position:absolute; top:50%; right:calc(var(--vii-gap-container) / 2 - 8px);
        transform:translateY(-50%); width:auto; padding:8px; min-height:60px;
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:8px; border-radius:40px;
        background:#fff; box-shadow:0 0 5px 0 rgba(0, 0, 0, .1);
    }
}

/* overlay */
.vii-home-banner__slide-media:before {
    top:50%;
    background:linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
    opacity:0.6; z-index:2;
}

/* separate content */
.vii-home-banner__content {
    max-width:690px; padding-right:var(--vii-gap-container);
    left:clamp(var(--vii-gap-container), 48px, var(--vii-gap-side)); bottom:var(--vii-spacing-56);
}

/* scroll down button */
[data-scroll-down] {
    width:56px; aspect-ratio:1;
    bottom:var(--vii-spacing-56); right:clamp(var(--vii-gap-container), 48px, var(--vii-gap-side));
}
[data-scroll-down] span {width:24px;}
[data-scroll-down] i {
    font-size:14px; display:flex;
    animation:moveDown 5s infinite ease;
}
[data-scroll-down] i.first {transform:translate(-50%, -150%); opacity:0; animation-delay:2.5s}
[data-scroll-down]:hover,
[data-scroll-down]:focus {background:var(--vii-color-blue); color:var(--vii-color-white)}
@keyframes moveDown {
    0% {transform:translate(-50%, -120%); opacity:0}
    10% {transform:translate(-50%, -50%); opacity:1}
    40% {transform:translate(-50%, -50%); opacity:1}
    60% {transform:translate(-50%, 120%); opacity:1}
    70% {transform:translate(-50%, 120%); opacity:0}
    80% {transform:translate(-50%, -50%); opacity:0}
    90% {transform:translate(-50%, 0%); opacity:0}
    100% {transform:translate(-50%, -120%); opacity:0}
}


/*********************************************
 * Home Banner Responsive
**********************************************/
@media only screen and (max-width:1180px) {
    .vii-home-banner {
        --hb-padding:0px;
        margin-top:0;
    }

    /* banner height */
    .vii-home-banner--height {height:calc(var(--vii-100vh) - var(--vii-header-height) - var(--admin-bar-height));}
    .vii-home-banner__slide-media {border-radius:0;}

    .vii-home-banner__content {max-width:800px; padding-right:70px; bottom:20px;}
    .vii-home-banner__content-text {margin-bottom:24px;}
    [data-scroll-down] {bottom:20px; width:50px;}

    /* dots */
    .vii-home-banner .flickity-page-dots {right:var(--vii-gap-side);}
}
@media only screen and (max-width:768px) {
    .vii-home-banner {
        --height-media:clamp(300px, calc(var(--vii-100vw) * 1024 / 768), calc(var(--vii-100vh) - var(--vii-header-main-height)));
    }
    .vii-home-banner--height {height:auto !important; min-height:var(--height-media);}

    /* dots */
    .vii-home-banner .flickity-page-dots {
        bottom:auto; top:calc(var(--height-media) - 32px); right:0;
        padding-top:0; gap:10px;
    }
    .vii-home-banner .flickity-page-dots .flickity-page-dot {width:10px; height:10px; background:rgba(0,0,0,0); border-color:#fff;}
    .vii-home-banner .flickity-page-dots .flickity-page-dot.is-selected,
    .vii-home-banner .flickity-page-dots .flickity-page-dot:hover {background:#fff;}

    /* separate content */
    .vii-home-banner__content {
        position:relative; right:var(--vii-gap-side); bottom:unset;
        padding:var(--vii-spacing-32) 0 0; width:var(--vii-container);
    }

    /* scroll down button */
    [data-scroll-down] {
        top:calc(var(--height-media) - 50px); bottom:auto; right:10px;
        width:40px; font-size:12px;
    }
}


/*********************************************
 * Home Banner > Slide
**********************************************/
.vii-home-banner__slide {width:100%; padding-top:var(--vii-header-top-height)}

/* image */
body:not(.page-width-loading) .vii-home-banner__slide-media.-image img {transition:transform 10s ease;}
body:not(.page-width-loading) .vii-home-banner__slide:not(.is-selected) .vii-home-banner__slide-media.-image img {transform:scale(1.1);}

/* content */
.vii-home-banner__slide-inner {padding:calc(var(--vii-spacing-56) - var(--hb-padding)) calc(var(--vii-gap-side) - var(--hb-padding));}
.vii-home-banner__slide-content {max-width:765px;}

/* show/hide image desktop/mobile */
.vii-home-banner__slide-media.-image img.is-mobile {display:none;}
@media only screen and (max-width:768px) {
    .vii-home-banner__slide-media.-image.has-image-mobile img.is-desktop {display:none;}
    .vii-home-banner__slide-media.-image.has-image-mobile img.is-mobile {display:block;}
}

/* responsive */
@media only screen and (max-width:768px) {
    .vii-home-banner__slide-inner {display:block; padding:0;}
    .vii-home-banner__slide-media {position:relative; height:var(--height-media);}
    .vii-home-banner__slide .vii-home-banner__slide-content {padding-right:0; padding-left:0;}

    /* content */
    .vii-home-banner__slide-content {padding:var(--vii-spacing-32) var(--vii-gap-side) 0;}
    .vii-home-banner__slide-content br {display:none;}
}