.breadcrumbs {
    margin-bottom: 24px
}

.breadcrumbs .site-nav {
    display: flex;
    gap: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 0;
    margin-bottom: 0
}

@media (min-width: 992px) {
    .breadcrumbs .site-nav {
        padding-top: 24px;
        padding-bottom: 24px;
        justify-content: flex-end
    }
}

.breadcrumbs .site-nav li {
    padding: 0;
    display: flex;
    align-items: center
}

.breadcrumbs .site-nav li a {
    font-size: 14px;
    font-size: .875rem;
    line-height: normal;
    color: #555;
    text-decoration: none;
    display: flex;
    gap: 8px;
    align-items: center
}

@media (min-width: 992px) {
    .breadcrumbs .site-nav li a {
        font-size: 20px;
        font-size: 1.25rem
    }
}

@media (min-width: 992px) {
    .breadcrumbs .site-nav li a:hover {
        color: #0063af;
        text-decoration: underline
    }
}

@media (min-width: 992px) {
    .breadcrumbs .site-nav li a:hover span {
        color: #0063af
    }
}

.breadcrumbs .site-nav li a i {
    font-size: 16px;
    font-size: 1rem
}

@media (min-width: 992px) {
    .breadcrumbs .site-nav li a i {
        font-size: 24px;
        font-size: 1.5rem
    }
}

.breadcrumbs .site-nav li a i:before {
    display: inline-block
}

.breadcrumbs .site-nav li a span {
    display: flex
}

.breadcrumbs .alert {
    opacity: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    height: 0;
    bottom: 16px;
    visibility: hidden;
    background-color: #59b95d;
    border: none;
    padding: 16px;
    transition: opacity .3s ease-out
}

.breadcrumbs .alert.active {
    opacity: 1;
    visibility: visible;
    height: auto;
    transition: opacity .15s ease-out
}

.breadcrumbs .alert p {
    margin-bottom: 0;
    color: #fff;
    display: flex;
    gap: 8px;
    align-items: center
}

.breadcrumbs .alert p i {
    font-size: 24px;
    font-size: 1.5rem
}

.breadcrumb {
    padding: 8px 0;
    margin-bottom: 0
}

@media (min-width: 992px) {
    .breadcrumb {
        padding: 24px 0
    }
}

.breadcrumb .breadcrumb-item {
    padding: 0 4px 0 0;
    display: flex;
    align-items: center
}

.breadcrumb .breadcrumb-item.active {
    color: #555
}

.breadcrumb .breadcrumb-item:before {
    color: #004994;
    padding-right: 8px
}

.breadcrumb .breadcrumb-item a:hover {
    text-decoration: underline;
    color: #0063af
}

.breadcrumb .breadcrumb-item, .breadcrumb a {
    font-size: 14px;
    font-size: .875rem;
    line-height: normal;
    color: #004994;
    text-decoration: none
}

@media (min-width: 992px) {
    .breadcrumb .breadcrumb-item, .breadcrumb a {
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 140%
    }
}

.breadcrumb-item + .breadcrumb-item:before {
    background-image: url(../Icons/CaretRightBoldGrau.svg);
    background-size: 12px;
    background-repeat: no-repeat;
    display: inline-block;
    width: 12px;
    height: 12px;
    content: "";
    margin-right: 4px
}

@media (min-width: 992px) {
    .breadcrumb-item + .breadcrumb-item:before {
        background-size: 16px;
        height: 16px;
        width: 16px
    }
}

.breadcrumb-item + .breadcrumb-item.active:before {
    background-image: url(../Icons/CaretRightBoldGrau.svg)
}