/*************************************
 * Home banner
 ************************************/
/* Variable */
.twc-hero-banner {
    --hb-spacing-content-bottom:55px;
    --hb-spacing-dots-bottom:60px;
    position:relative; overflow:hidden;
}

/* slider */
.twc-hero-banner__slider {height:100vh;}
.twc-hero-banner__slide {width:100%;}
.twc-hero-banner__slide-inner {
    position:relative; min-height:100vh; overflow:hidden;
    padding:calc(var(--twc-header-height) + var(--twc-gap-container)) 0 var(--hb-spacing-content-bottom);
}
.twc-hero-banner__slide-bg {
    height:100%;
    transition:transform 10s ease; transform:scale(1.2);
}
.twc-hero-banner__slide-bg:before,
.twc-hero-banner__slide-bg:after {pointer-events:none; opacity:0.5;}
.twc-hero-banner__slide-bg:before {background:linear-gradient(rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);}
.twc-hero-banner__slide-bg:after {background:#000;}

/* Content */
.twc-hero-banner__item-content {
    --twc-spacing-heading:35px;
    position:relative; z-index:5;
}
.twc-hero-banner__item-content-inner, .twc-hero-banner__title {max-width:calc(100% - 180px);}

/* animation */
.is-selected .twc-hero-banner__slide-bg {transform:scale(1);}

/* Dots*/
.twc-hero-banner__dots {
    position:absolute; z-index:5;
    bottom:var(--hb-spacing-dots-bottom); right:var(--twc-gap-side);
}
.twc-hero-banner__dots ul {
    list-style:none; margin:0;
    display:flex; position:relative;
}

.twc-hero-banner__dots ul li {padding:0;}
.twc-hero-banner__dots ul li:not(:last-child) {margin-right:20px;}
.twc-hero-banner__dots ul li button {
    background:rgba(255, 255, 255, 0);
    color:rgba(255, 255, 255, .5); letter-spacing:.1em; font-size:var(--twc-size-16);
    position:relative; padding:0 10px 10px;
}
.twc-hero-banner__dots ul li button:before {
    content:""; display:block;
    width:100%; height:3px; background:rgba(255, 255, 255, .5);
    position:absolute; bottom:0; left:0;
}

/* hover - focus - active */
.twc-hero-banner__dots ul li button:hover,
.twc-hero-banner__dots ul li button:focus,
.twc-hero-banner__dots ul li.active button {color:#fff;}
.twc-hero-banner__dots ul li button:hover:before,
.twc-hero-banner__dots ul li button:focus:before,
.twc-hero-banner__dots ul li.active button:before {background:#fff;}

/* Option has same content */
.twc-hero-banner__heading {
    width:100%;
    position:absolute; inset:auto 0 var(--hb-spacing-content-bottom);
}
.twc-hero-banner__title-buttons ul {list-style:none; margin:-16px;}
.twc-hero-banner__title-buttons ul li {padding:16px;}


/*************************************
 * Home banner - Responsive
 ************************************/
/* Touch devices */
@media only screen and (max-width:1180px) {
    .twc-hero-banner {
        --hb-spacing-content-bottom:calc(var(--twc-gap-container) + 35px + 25px);
        --hb-spacing-dots-bottom:var(--twc-gap-container);
    }

    /* Content */
    .twc-hero-banner__item-content-inner, .twc-hero-banner__title {max-width:100%;}
}

/* Tablet horizontal */
@media only screen and (max-width:1024px) {
    .twc-hero-banner__slider {min-height:calc(100vh - 55px); height:auto;}
    html.safari .twc-hero-banner__slider {min-height:calc(100vh - 55px - 59px);}
    html.brave .twc-hero-banner__slider {min-height:calc(100vh - 55px - 45px);}

    .twc-hero-banner__slide-inner {min-height:calc(100vh - 55px); height:100%;}
    html.safari .twc-hero-banner__slide-inner {min-height:calc(100vh - 55px - 59px);}
    html.brave .twc-hero-banner__slide-inner {min-height:calc(100vh - 55px - 45px);}

    /* Title button */
    .twc-hero-banner__title-buttons ul {margin:-10px;}
    .twc-hero-banner__title-buttons ul li {padding:10px;}
}

/* Mobile */
@media only screen and (max-width:480px) {
    .twc-hero-banner__slide.has-mobile-image .twc-hero-banner__slide-bg:not(.mobile) {display:none;}

    /* Title button */
    .twc-hero-banner__title-buttons ul {margin:-6px;}
    .twc-hero-banner__title-buttons ul li {padding:6px;}
}