/* OLD */
body {
    padding-top: 0 !important;
    font-size: .875rem;
}

.nav-link {
    font-size: 1rem;
}

/* ZET */
.filter-logo {
    filter: brightness(0) saturate(100%) invert(85%) sepia(100%) saturate(1%) hue-rotate(324deg) brightness(95%) contrast(91%);
}

.btn-boat {
    border-width: 0 !important;
}

.carousel-control-prev-icon {
    width: 40px;
    height: 40px;
    background-image: url('/static/icon/arrow_left.svg');
}

.carousel-control-next-icon {
    width: 40px;
    height: 40px;
    background-image: url('/static/icon/arrow_right.svg');
}

.icon-boat {
    height: 1.5rem;
    width: 1.5rem;
}

.icon-arrow {
    height: 2rem;
    width: 2rem;
}

.h2 {
    font-family: "Titillium Web", serif;
    font-weight: bold;
    text-transform: uppercase;
}

.h3 {
    color: #ea2126;
    font-family: "Titillium Web", serif;
    font-weight: 600;
    text-transform: uppercase;
}

.h4-product {
    color: #ea2126;
    font-family: "Titillium Web", serif;
    font-weight: 600;
    text-transform: uppercase;
}

.btn-light {
    background-color: #e6e6e6;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-transform: uppercase;
    font-weight: bolder;
}

#coverPhoto {
    background-image:
            linear-gradient(black, black),
            url("/static/image/index/hp_header_foto_mobile.png");
    background-blend-mode: saturation;
    height: 42vh;
    min-height: 200px;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    transition-duration: 2s;
}

#coverPhoto:hover {
    background-image: url("/static/image/index/hp_header_foto_mobile.png");
}

@media (min-width: 992px) {
    #coverPhoto {
        background-image:
            linear-gradient(black, black),
            url("/static/image/index/hp_header_foto.png");
    }
    #coverPhoto:hover {
        background-image: url("/static/image/index/hp_header_foto.png");
    }
}

.photo {
    filter: grayscale(100%);
    transition-duration: 2s;
}

.photo:hover {
    filter: none;
}

#coverPhoto > div > img {
    height: 15vh;
    min-height: 75px;
}

#sectionCarousel {
    min-height: 55vh;
}

#sectionProducts {
    text-align: center;
    background-color: #e6e6e6;
}

.productCard {
    background-color: white;
    width: 324px;
    height: 410px;
    text-align: left;
}

.aboutUsCard {
    max-width: 30rem;
    text-align: left;
}

.divider {
    border-top: 1px solid #000000;
    background-color: #000000;
    max-height: 4px;
    opacity: 50%;
    filter: blur(2px);
}

#sectionAboutUs {
    text-align: center;
}

#sectionDealers {
    text-align: center;
}

#map {
    height: 60vh;
}

.people-photo {
    height: 20rem;
}

@media (min-width: 1500px) {
    .d-xxxl-block {
        display: block !important;
    }
}