/* 
#breadcrumbs{line-height: 1; z-index: 3; margin: max(1.5vw,15px) 0;}

#breadcrumbs > span {color: rgba(10,10,8,.41);}
.breadcrumbs-white #breadcrumbs > span {color: rgba(255,255,255,.7);}

#breadcrumbs > span > span{margin: 0 10px;}

#breadcrumbs > span > span:not(.breadcrumb_last) a{font-weight: 300; color: rgba(10,10,8,.41) !important; transition: all .15s ease-in-out; position: relative;}
#breadcrumbs > span > span:not(.breadcrumb_last) a::after{content: ''; position: absolute; bottom: -1px; left: 50%; transform: translate(-50%); width: 0; height: 1px; background: rgba(10,10,8,.6); transition: all .15s ease-in-out;}
.breadcrumbs-white #breadcrumbs > span > span:not(.breadcrumb_last) a{color: rgba(255,255,255,.7) !important;}
.breadcrumbs-white #breadcrumbs > span > span:not(.breadcrumb_last) a::after{background: rgba(255,255,255,1);}

#breadcrumbs > span > span:not(.breadcrumb_last) a:hover{color: rgba(10,10,8,.6) !important;}
#breadcrumbs > span > span:not(.breadcrumb_last) a:hover::after{width: 100%;}
.breadcrumbs-white #breadcrumbs > span > span:not(.breadcrumb_last) a:hover{color: rgba(255,255,255,1) !important;}

#breadcrumbs > span > span.breadcrumb_last{color: rgba(10,10,8,.6); font-weight: 500;}
.breadcrumbs-white #breadcrumbs > span > span.breadcrumb_last{color: rgba(255,255,255,1);} */

.s4-breadcrumbs {
    padding: 20px 30px 20px clamp(30px, 2.5vw, 50px);
    font-weight: 350;
}
.s4-breadcrumbs.breadcrumbs-bg-red {
    color: #fff;
    background: #c14b54;
    /* backdrop-filter: blur(30px) brightness(15); 
    -webkit-backdrop-filter: blur(30px) brightness(15);  */
}
.s4-breadcrumbs.breadcrumbs-bg-black {
    color: #fff;
    background: #2A2A2B;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}
.s4-breadcrumbs.breadcrumbs-bg-white {
    color: #000;
    background: #ffffff;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.s4-breadcrumbs #breadcrumbs a,
.s4-breadcrumbs #breadcrumbs .breadcrumb_last {
    font-size: max(1rem, 13px);
    opacity: 0.4;
    margin: 0 5px;
}

.s4-breadcrumbs #breadcrumbs a {
    text-decoration: none;
    position: relative;
    display: inline-block;
    color: inherit;
}

.s4-breadcrumbs #breadcrumbs a::after {
    content: '';
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    width: 0;
    height: 1.5px;
    background: currentColor;
    transition: width 0.3s ease;
}

.s4-breadcrumbs #breadcrumbs a:hover::after {
    width: 100%;
}

.s4-breadcrumbs #breadcrumbs .breadcrumb_last {
    opacity: 1;
}

@media screen and (max-width: 575px) {
    .s4-breadcrumbs {
        padding: 10px 20px;
    }
}