.site-banner {
    position: relative;
    z-index: 5
}

.site-banner-image {
    height: 400px;
    position: relative
}

.site-banner-image:before, .site-banner-image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.site-breadcrumbs-title {
    --breadcrumbs-height: 48px
}

.site-breadcrumbs-title:before {
    content: "";
    position: absolute;
    width: 100%;
    height: var(--breadcrumbs-height);
    bottom: 0;
    z-index: 2;
    background-color: var(--vii-color-blue);
    mix-blend-mode: multiply
}

.site-breadcrumbs {
    width: 100%;
    min-height: 48px
}

.site-breadcrumbs a {
    color: var(--vii-color-white);
    font-weight: 400
}

.site-breadcrumbs a:hover, .site-breadcrumbs a:focus {
    text-decoration: underline
}

.site-breadcrumbs .container {
    display: flex
}

.site-breadcrumbs .container>span {
    display: inline-block;
    white-space: nowrap;
    max-width: var(--vii-container);
    text-overflow: ellipsis;
    overflow: hidden
}

.site-breadcrumbs span.breadcrumb_last {
    text-transform: uppercase
}

.breadcrumb-sep {
    font-size: 1em;
    padding: 0 1px
}

.breadcrumb-sep~.breadcrumb-sep {
    padding: 0 5px
}

.site-blog-detail__category:hover, .site-blog-detail__category:focus {
    text-decoration: underline;
    color: var(--vii-color-blue) !important
}

.site-banner.-type-3 .page-title {
    font-size: 64px;
    font-family: var(--vii-font-primary)
}

.site-banner.-compact .site-banner-image {
    height: 48px
}

@media only screen and (max-width:1024px) {
    .site-banner.-type-3 .page-title {
        font-size: var(--vii-size-48)
    }
}

@media only screen and (max-width:768px) {
    .site-banner-image {
        height: 300px
    }
}

@media only screen and (max-width:480px) {
    .site-banner-image {
        height: 200px
    }

    .site-banner.-type-2 {
        padding-top: var(--vii-spacing-24);
        --vii-spacing-60: var(--vii-spacing-24)
    }

    .site-button-back {
        display: none
    }
}