/****************************
 * Loading Animation
****************************/
body.has-loading-animation {height:var(--vii-100vh); overflow:hidden;}
.vii-loading-animation {
    --duration-image:750ms;
    --duration-zoom:800ms;
    --duration-delay:300ms;
    --delay:0;
}
.vii-loading-animation__animated-image {
    transform:scale(0.425); clip-path:polygon(0 0, 100% 0, 100% 0, 0 0);
    transition:clip-path var(--duration-image) ease, transform var(--duration-zoom) ease;
}
.vii-loading-animation__animated-image:last-child img {
    transform:scale(1.5);
    transition:transform var(--duration-zoom) ease;
}

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

/*  first screen */
body.loading-animation-with-home-banner .vii-menu-row {
    transform:translateY(calc(var(--vii-header-height) * -1 - 10px));
    transition:transform 0.5s ease;
}
body.loading-animation-with-home-banner .vii-home-banner__content-title i {
    transform:translateY(100%); transition:transform 0.5s ease var(--delay);
}
body.loading-animation-with-home-banner .vii-home-banner__content-description {
    transform:translateY(calc(100% + var(--spacing-bottom) + var(--btn-scroll-down)));
    transition:0.8s ease 1.2s;
}
body.loading-animation-with-home-banner .vii-home-banner__btn-scroll-down {
    transform:translate(-50%, 100%);
    transition:transform 0.45s ease 0.6s;
}
body.loading-animation-with-home-banner .vii-home-banner__slide-inner:first-child:before,
body.loading-animation-with-home-banner .vii-home-banner__slide-inner:first-child .vii-home-banner__slide-media:before,
body.loading-animation-with-home-banner .vii-home-banner__slide-inner:first-child .vii-home-banner__slide-media:after {
    opacity:0;
    transition:opacity 0.45s ease;
}
body.loading-animation-with-home-banner .flickity-page-dots {
    transform:translate(150%, -50%);
    transition:transform 0.5s ease 1.2s;
}


/****************************
 * Animation
****************************/
/* show image */
.vii-loading-animation__animated-image.show {
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* show full image */
.vii-loading-animation.show-full-image .vii-loading-animation__animated-image {transform:scale(1);}
.vii-loading-animation.show-full-image .vii-loading-animation__animated-image:last-child img {
    transform:scale(1);
}

/* show menu button */
body.show-menu-button .vii-menu-row {transform:translateY(0)}
body.show-menu-button .vii-home-banner__btn-scroll-down {transform:translate(-50%, 0);}
body.show-menu-button .vii-home-banner__slide-inner:first-child:before,
body.show-menu-button .vii-home-banner__slide-inner:first-child .vii-home-banner__slide-media:before {opacity:1}
body.show-menu-button .vii-home-banner__slide-inner:first-child .vii-home-banner__slide-media:after {opacity:0.4;}
body.show-menu-button .flickity-page-dots {transform:translate(0, -50%)}

/* show content */
body.show-content .vii-home-banner__content-title i {transform:translateY(0)}
body.show-content .vii-home-banner__content-description {transform:translateY(0);}


/* menu */
@media only screen and (min-width:1025px) {
    body.loading-animation-with-home-banner.finish-loading {
        --vii-header-bg:transparent;
        --vii-header-color:var(--vii-color-white);
        --vii-header-color-hover:var(--vii-color-white);
        --vii-header-submenu-color:var(--vii-color-dark-gray);
        --vii-header-submenu-color-hover:var(--vii-color-primary);
        --vii-hambuger-bg:var(--vii-color-white);
    }
}
body.loading-animation-with-home-banner.finish-loading [data-menu*="sticky"] {transform:translateY(0);}


/****************************
 * Loading Animation - Responsive
****************************/
@media only screen and (max-width:1024px) {
    /* update duration */
    body.loading-animation-with-home-banner .vii-home-banner__btn-scroll-down {transition-delay:1.8s;}
    body.loading-animation-with-home-banner .flickity-page-dots {transition-delay:2.4s;}
}
@media only screen and (max-width:768px) {
    .vii-loading-animation__animated-image {
        transform:scale(0.6);
    }
    body.loading-animation-with-home-banner:not(.show-menu-button) .vii-home-banner:has(.vii-home-banner__slide:nth-child(2)) .vii-home-banner__btn-scroll-down {
        transform:translate(0, 100%);
    }
    body.loading-animation-with-home-banner .flickity-page-dots {transform:translate(-50%, 200%);}
    body.show-menu-button .flickity-page-dots {transform:translate(-50%, 0)}
}