html,
body {
    font-family: "Zalando Sans Expanded", sans-serif;
}

.bg-dark {
    background-color: #CB2B28 !important;
}

.text-danger, .link-danger {
    color: #CB2B28 !important;
}

.link-dark:active, .link-dark:hover {
    text-decoration: underline !important;
}

.link-black:active {
    background-color: #CB2B28 !important;
}

.btn-dark {
    background-color: #000 !important;
    color: #FFF !important;
    border: solid 0px #000 !important;
}

.btn-dark:hover, .btn-dark:active {
    background-color: #FFF !important;
    color: #000 !important;
}

.btn-outline-dark {
    background-color: #000 !important;
    color: #FFF !important;
    border: solid 1px #FFF !important;
}

.btn-outline-dark:hover, .btn-outline-dark:active  {
    background-color: #CB2B28 !important;
    color: #FFF !important;
}

.btn-danger {
    background-color: #CB2B28 !important;
    color: #FFF !important;
}

.btn-danger:hover, .btn-danger:active {
    background-color: #000 !important;
    color: #FFF !important;
}

.carousel-caption {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.carousel-caption img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {

    .display-5 {
        font-size: 2.0rem !important;
    }

    .fs-3 {
        font-size: 1.1rem !important;
    }

    .fs-4 {
        font-size: 1.05rem !important;
    }

    .fs-5 {
        font-size: 1.0rem !important;
    }

    .carousel-caption {
        top: auto;
        bottom: 10%;
        transform: translateY(0);
    }

}

/* Nav */

.nav-link, .dropdown-item, nav .btn-group > .btn {
    font-size: 0.9em !important;
}

.nav-link:active, .dropdown-item:active, .nav-link:hover, .dropdown-item:hover, .link-light:hover {
    text-decoration: underline !important;
}

.circle-btn:hover .circle-icon {
    color: #9e9d9d !important;
}

/* Lightbox */

.sl-close {
    color: white !important;
}

.sl-prev, .sl-next {
    color: white !important;
}

.sl-overlay {
    background-color: rgba(0, 0, 0, 1) !important;
}

.gallery a img {
    transition: opacity 0.3s ease;
    opacity: 1; /* Full opacity by default */
}

.gallery a:hover img {
    opacity: 0.6; /* Less opacity on hover */
}

/* Comparison Slider */

.before,
.after {
    margin: 0;
}

.before figcaption,
.after figcaption {
    background: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 12px;
    color: #2e3452;
    opacity: 0.8;
    padding: 12px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 100%;
}

.before figcaption {
    left: 12px;
}

.after figcaption {
    right: 12px;
}