/*********************************************
 * Hero Banner
**********************************************/
.twc-hero-banner {
    --hero-banner-height:100vh;
    position:relative; padding:calc(var(--twc-header-height) + 40px) 0 170px;
    min-height:var(--hero-banner-height);
}

/* thumbnail */
.twc-hero-banner__bg:before {background:rgba(29, 27, 27, .7);}

/* content */
.twc-hero-banner__content {
    --twc-size-h1:var(--twc-size-60);
    position:relative; z-index:2;
}
.main_content .twc-hero-banner__content h1 {font-weight:500;}

/* Scroll down */
.twc-hero-banner__scroll-down-button {bottom:90px; width:100%;}
.twc-hero-banner__scroll-down-button span {
    font-size:15px; font-weight:500; line-height:1.2; letter-spacing:.15em;
    display:block; margin-bottom:15px;
}
.twc-hero-banner__scroll-down-button button {
    width:50px; height:50px; background:rgba(0, 0, 0, 0); border:1px solid #fff;
    display:flex; align-items:center; justify-content:center;
    margin:auto; color:var(--twc-color-primary); font-size:16px;
    transition:var(--twc-transition);
}
.twc-hero-banner__scroll-down-button button:hover {
    border-color:var(--twc-color-primary); background:var(--twc-color-primary);
    color:#fff;
}


/*********************************************
 * Hero Banner Responsive
**********************************************/
@media only screen and (max-width:1920px) and (min-width:481px) {
    .twc-hero-banner {padding-bottom:150px;}
    .twc-hero-banner__scroll-down-button {bottom:35px;}
}
@media only screen and (max-width:1024px) {
    .twc-hero-banner {--hero-banner-height:calc(100vh - 55px);}
    html.safari .twc-hero-banner {--hero-banner-height:calc(100vh - 55px - 59px);}
    html.brave .twc-hero-banner {--hero-banner-height:calc(100vh - 55px - 45px);}
}
@media only screen and (max-width:767px) {
    /* mobile image */
    .has-mobile-image .twc-hero-banner__slide-bg.desktop {display:none;}
    .has-mobile-image .twc-hero-banner__slide-bg.mobile.hidden {display:block;}

    /* Content */
    .twc-hero-banner__content br {display:none;}
}
@media only screen and (max-width:480px) {
    /* content */
    .twc-hero-banner__content {--twc-size-h1:var(--twc-size-45);}
    .main_content .twc-hero-banner__content h1 {--twc-size-h1:9.5vw;}

    /* thumbnail */
    .twc-hero-banner__bg {clip-path:polygon(0 0, 85% 0, 15% 100%, 0 100%);}
}