/****************************
 * Header
*****************************/
/* General */
.site-banner {
    position:relative; overflow:hidden;
    --sb-spacing-bottom:60px;
    --sb-spacing-shape:40px;
}
.site-banner:before {background:#f2f4f6;}
.site-breadcrumbs-title {position:relative; z-index:2;}
.site-breadcrumbs-wrapper {min-height:315px;padding:var(--sb-spacing-bottom) 0;}
.site-breadcrumbs {
    font-size:12px; letter-spacing:.05em; font-weight:500;
    color:rgba(9, 53, 72, .5);
}
.site-breadcrumbs a {font-weight:400; color:rgba(9, 53, 72, .25);}
.site-breadcrumbs a:hover {color:var(--twc-color-primary);}

/* Option has excerpt */
.has-excerpt .site-title, .has-excerpt .site-excerpt {width:50%;}
.has-excerpt .site-title {padding-right:60px;}
.breadcrumb-sep {margin:25px; border-right:1px solid rgba(9, 53, 72, .25);}

/* Option has thumbnail */
.has-thumbnail.site-banner:before,
.has-thumbnail .site-banner__light-layer {bottom:calc(var(--sb-spacing-bottom) + var(--sb-spacing-shape));}
.has-thumbnail .site-banner__content {margin-right:-50px;}
.has-thumbnail .site-banner__content-text {width:60%; padding:0 140px var(--twc-spacing-120) 0; height:fit-content;}
.has-thumbnail .site-banner__image {width:40%; margin-top:25px;}
.has-thumbnail .site-title, .has-thumbnail .site-excerpt {width:100%;}
.has-thumbnail .site-title {--twc-spacing-heading:45px; padding-right:0;}
.has-thumbnail .site-excerpt {padding-left:50px;}
.has-thumbnail .site-banner__image-bg {
    min-height:275px; max-height:430px; height:30vw;
    border-radius:5px;
}

/* trapezoid shape */
.site-banner__light-layer {height:55vw; top:auto;}
.site-banner .trapezoid-shape__wrapper {height:100%; bottom:50px;}
.site-banner .trapezoid-shape {transform:translateX(calc(var(--twc-gap-side) + var(--twc-gap-container)));}


/****************************
 * Header - Responsive
*****************************/
@media only screen and (max-width:1439px) {
    /* Option has thumbnail */
    .has-thumbnail .site-banner__content {margin-right:0;}
    .has-thumbnail .site-title {--twc-spacing-heading:30px;}
    .has-thumbnail .site-excerpt {padding-left:var(--twc-gap-container);}
    .has-thumbnail .site-banner__content-text {padding-right:var(--twc-gap-container);}
    .has-thumbnail .site-banner__image {margin-top:0;}
}
@media only screen and (max-width:1180px) {
    .site-breadcrumbs-wrapper {min-height:200px; padding:40px 0;}
    .site-banner .trapezoid-shape__wrapper {bottom:var(--twc-gap-container);}

    /* Option has excerpt */
    .has-excerpt .site-title {padding-right:30px;}

    /* Option has thumbnail */
    .has-thumbnail.site-banner:before, .has-thumbnail .site-banner__light-layer {bottom:0;}
}
@media only screen and (max-width:768px) {
    /* Option has excerpt */
    .has-excerpt .site-banner__content-text {flex-direction:column;}
    .has-excerpt .site-title, .has-excerpt .site-excerpt {width:100%;}
    .has-excerpt .site-title {padding-right:0;}

    /* Option has thumbnail */
    .has-thumbnail .site-banner__content {flex-direction:column;}
    .has-thumbnail .site-banner__content-text {width:100%; padding:0; margin-bottom:35px;}
    .has-thumbnail .site-banner__image {width:100%;}
    .has-thumbnail .site-excerpt {padding-left:0;}
    .has-thumbnail .site-title {--twc-spacing-heading:25px;}
    .has-thumbnail .site-banner__light-layer {height:100%;}
}
@media only screen and (max-width:480px) {
    /* trapezoid shape */
    .site-banner__light-layer {height:100%;}
    .site-banner .trapezoid-shape__wrapper {bottom:0;}
}