/* ------------------------------ */
/* --------- Breadcrumb --------- */
/* ------------------------------ */

nav.breadcrumb {
    padding-top: var(--spacing-4);
}

header:not(.header--cover) + main nav.breadcrumb {
    padding-top: calc(var(--logo-height) + var(--spacing-4));
}
  
nav.breadcrumb + .section, nav.breadcrumb + div + section {
    padding-top: var(--spacing-9);
}

nav.breadcrumb ol {
   margin: 0;
   padding: 0;
}

nav.breadcrumb ol li {
    position: relative;
    display: inline-block;
    padding-left: 0;
    padding-right: 10px;
    margin-right: 10px;
}

nav.breadcrumb ol li:last-child {
    padding-right: 0;
}

nav.breadcrumb ol li::after {
    content: "–";
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
            transform: translateX(50%);
    color: var(--color-battelship-grey);
}

nav.breadcrumb ol li:last-child::after {
    display: none;
}

nav.breadcrumb ol li, nav.breadcrumb ol li a {
    font-size: var(--font-size-1);
    border-bottom: 0;
}

nav.breadcrumb ol li.current span {
    color: var(--color-battelship-grey);
}

nav.breadcrumb ol li a {
    text-decoration: none;
    -webkit-transition: opacity var(--transition-1);
    -o-transition: opacity var(--transition-1);
    transition: opacity var(--transition-1);
}

.no-touchevents nav.breadcrumb ol li a:hover {
    opacity: var(--opacity-1);
}

nav.breadcrumb .arrow {
    font-size: var(--font-size-3);
    padding-right: var(--spacing-2);
    opacity: var(--opacity-1);
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (max-width: 991.98px) {

    nav.breadcrumb ol li::after {
        top: -1px;
    }

}


@media all and (max-width: 767.98px) {

    .breadcrumb {
        position: relative;
    }

    .breadcrumb::before, .breadcrumb::after {
        content: "";
        position: absolute;
        top: 0;
        z-index: 2;
        display: block;
        width: 12px;
        height: 100%;
    }

    .breadcrumb::before {
        left: 0;
        background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .85) 49%, rgba(255, 255, 255, 0) 100%);
        background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 1)), color-stop(49%, rgba(255, 255, 255, .85)), to(rgba(255, 255, 255, 0)));
        background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .85) 49%, rgba(255, 255, 255, 0) 100%);
    }

    .breadcrumb::after {
        right: 0;
        background: -o-linear-gradient(right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
        background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)));
        background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    }

    .breadcrumb__inside {
        overflow-x: scroll;
        scrollbar-width: none;
    }

    .breadcrumb__inside ol {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }

}