/*********************************************
 * Home Banner
**********************************************/
.vii-home-banner--height {height:100vh !important; min-height:500px; width:100%;}

/* dots */
.vii-home-banner .flickity-page-dots {
    position:absolute; top:50%; right:var(--vii-gap-container);
    transform:translateY(-50%); width:auto; padding:8px; min-height:60px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; border-radius:40px;
    background:#fff; box-shadow:0 0 5px 0 rgba(0, 0, 0, .1);
}
.vii-home-banner .flickity-page-dots .dot {background:#d0d5dd;}
.vii-home-banner .flickity-page-dots .dot.is-selected {background:#101828;}

/* overlay */
.vii-home-banner__slide-media:before {
    background:linear-gradient(10deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)); z-index:2;
}

/* scroll down */
.vii-home-banner__scroll-down {bottom:20px; transform:translateX(-50%);}
.vii-home-banner__scroll-down button {background:transparent; gap:5px;}
.vii-home-banner__scroll-down button:hover i {transform:translateY(3px);}

/* scroll down arrows */
.vii-home-banner_scroll-down-arrows i {animation:arrow 2s infinite;}
.vii-home-banner_scroll-down-arrows i:not(:last-child) {margin-bottom:-7px;}

.vii-home-banner_scroll-down-arrows i:nth-child(1) {animation-delay:-1s;}
.vii-home-banner_scroll-down-arrows i:nth-child(2) {animation-delay:-0.5s;}
.vii-home-banner_scroll-down-arrows i:nth-child(3) {animation-delay:0s;}

@keyframes arrow {
    0% {opacity:0}
    40% {opacity:1}
    80% {opacity:0}
    100% {opacity:0}
}

/*********************************************
 * Home Banner > Slide
**********************************************/
.vii-home-banner__slide {width:100%;}

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

/* content */
.vii-home-banner__slide-content {
    padding-top:var(--vii-spacing-60);
    max-width:765px;
}

/* For touch device */
html.safari.vc_mobile .vii-home-banner--height {height:calc(100vh - 40px) !important;}

/*********************************************
 * Home Banner Responsive
**********************************************/
@media only screen and (max-width:768px) {
    /* Iphone Device */
    html.iphone .vii-home-banner--height {height:calc(100vh - 74px) !important;}
    html.chrome.android.vc_mobile .vii-home-banner--height {height:calc(100vh - 56px) !important;}

    /* dots */
    .vii-home-banner .flickity-page-dots {
        top:unset; right:unset;
        left:50%; bottom:30px; transform:translateX(-50%) rotate(-90deg);
    }

    /* content */
    .vii-home-banner__slide-content {text-align:center;}
    .vii-home-banner__slide-content br {display:none;}
}