/*********************************************
 * Hero Banner
**********************************************/
body {
    --hero-banner-overlap:0;
}
.vii-hero-banner {
    --hb-height:calc(100vh - var(--vii-body-padding) * 2);
    margin-left:calc(-1 * var(--vii-gap-side)); margin-right:calc(-1 * var(--vii-gap-side));
    position:relative;
}
.vii-hero-banner__slider,
.vii-hero-banner__slide {width:100%; height:var(--hb-height);}
.vii-hero-banner__slide {padding-bottom:var(--hero-banner-overlap);}

/* bg */
.vii-hero-banner__slide-bg {transition:transform 10s ease; transform:scale(1.1);}
.is-selected .vii-hero-banner__slide-bg {transform:scale(1);}

/* indicator */
.vii-hero-banner__indicator {position:absolute; bottom:calc(var(--vii-spacing-45) + var(--hero-banner-overlap)); right:var(--vii-gap-side); z-index:2;}
.vii-hero-banner__indicator-sep {width:50px; height:1px; background-color:#fff; margin:2px 10px 0;}

/* arrow */
.vii-hero-banner .flickity-button {--flkt-position:50px;}

/* dots */
.vii-hero-banner .flickity-page-dots {position:absolute; bottom:15px; left:50%; transform:translateX(-50%);}

/* content */
.vii-hero-banner__item-content {
    position:relative; z-index:3;
    background:rgba(0, 0, 0, 0.05); border:1px solid rgba(255, 255, 255, 0.2);
    box-shadow:inset 56px -56px 56px rgba(0, 0, 0, 0.05), inset -56px 56px 56px rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
    max-width:calc(var(--vii-100vw) - var(--vii-gap-container));

    --corner-size:25px;
    clip-path:polygon(0 0, calc(100% - var(--corner-size)) 0, 100% var(--corner-size), 100% 100%, 0 100%);

    padding:var(--vii-spacing-25) var(--vii-spacing-80) var(--vii-spacing-25) var(--vii-gap-side);
}
.vii-hero-banner__item-content:before {
    content:""; position:absolute; top:0; right:0;
    width:0; height:0;
    border-top:var(--corner-size) solid rgba(255, 255, 255, 0.2);
    border-left:var(--corner-size) solid transparent;
}
.vii-hero-banner__item-content-inner {max-width:700px;}


/* Overlap */
@media only screen and (min-width:769px) {
    body.banner-has-overlap {--hero-banner-overlap:var(--vii-spacing-default);}
    .vii-hero-banner.has-overlap {margin-bottom:0;}
    .vii-image-content.has-overlap-on-banner {
        margin-top:calc(-1 * var(--hero-banner-overlap));
        padding-top:var(--hero-banner-overlap);
        background-color:#fff;
        position:relative;
    }
    .vii-image-content.has-overlap-on-banner:before {
        content:""; position:absolute; top:0; bottom:0; right:100%;
        width:var(--vii-gap-side); background-color:#fff;
    }
}


/*********************************************
 * Hero Banner Responsive
**********************************************/
@media only screen and (max-width:1024px) {
    .vii-hero-banner__indicator {display:none;}
    .vii-hero-banner__item-content {background:rgba(0, 0, 0, 0.25); --corner-size:20px;}
    .vii-hero-banner__item-content-inner {padding-bottom:30px;}
}
@media only screen and (max-width:480px) {
    .vii-hero-banner {--hb-height:calc(100vh - var(--vii-body-padding) * 2 - 113px);}
}