/*
Theme Name:   Kleefkracht Salient Child
Theme URI:    https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Description:  Child theme for Salient
Author:       Dennis van Homoet
Author URI:   https://www.kleefkracht.nl
Template:     kk
Version:      1.0.0
License:      Custom license
License URI:  http://themeforest.net/licenses/terms/regular
Text Domain:  salient-child
*/

/* Brandon Grotesque Black */
/* Grote koppen */
/* font-family: brandon-grotesque, sans-serif;
font-weight: 900;
font-style: normal; */

/* font-family: brandon-grotesque, sans-serif;
font-weight: 400;
font-style: italic; */

/* lopende tekst */
/* Neue Haas Grotesk Display */
/* Roman */
/* font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal; */

/* medium */
/* font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600;
font-style: normal; */

/* bold */
/* font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 700;
font-style: normal; */


/* colors */
/* black: #000000 */
/* red: #e30613 */
/* green: #7fc292 */
/* greendark: #00786a; */
/* yellow: #ecd09c */
/* purple :#8286c0; */
/* pink: #f4b1b1; */
/* gray: #555a5a */
/* lightgray: ##aaa9aa */
/* lightgray: #e1e0e1 */


/* Add your custom styles below this line */
body {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 16px !important;
    color: #000000;
}

h1,
h2.font-brandon {
    color: #000000;
    font-family: brandon-grotesque, sans-serif;
    font-weight: 900;
    font-style: normal;
    text-transform: uppercase;
}

h2,
h3,
h4,
h5,
h6,
.nectar-slide-heading {
    color: #000000;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
}


.product-header h2 {
    font-size: 1.2rem !important;
    line-height: 1.2 !important;
    margin-top: 20px !important;
}

/* desktop */
@media only screen and (min-width: 1000px) {

    /*  */
    .container {
        max-width: 1350px;
    }


    /* carousel */
    .row.portfolio-items {
        margin-bottom: 2rem !important;
    }

    .swiper-slide .content h1 {
        font-weight: 700;
        text-transform: uppercase;
        text-wrap: pretty;
        max-width: 20ch;
        text-shadow: #0000008a 1px 1px 2px;
    }

    .swiper-slide .content p {
        margin-inline-start: 8rem !important;
        font-weight: 600;
        max-width: 35ch;
        line-height: 1.2;
        text-shadow: #0000008a 1px 1px 2px;
    }

    /* navigatie  */
    body[data-header-color="custom"]:not(.material) #header-secondary-outer nav>ul>li>a,
    body[data-header-color="custom"]:not(.material) #header-secondary-outer,
    body[data-header-color="custom"]:not(.material) #header-secondary-outer nav>ul>li:last-child,
    #header-outer nav>ul> :where(li:not(:last-child)) {
        border: none !important;
    }

    #top nav ul li a {
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: black !important;
    }

    #top nav {
        margin: auto 0 !important;
        max-height: 20px !important;
    }

    /* mega menu aligining  */
    #header-outer:not([data-format="left-header"]) #top nav>ul>li#menu-item-2913 {
        position: relative;
    }

    #header-outer nav>ul>.megamenu>.sub-menu {
        margin-top: 5px;
        width: 650px;
        left: -540px;
    }

    #header-outer nav>ul> :where(li:not(:last-child)) {
        --tw-divide-x-reverse: 0;
        border-inline-style: solid;
        border-inline-end-width: 2px;
    }

    #header-outer:not(.transparent) li.menu-item-2535>a>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-2913>a>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-2915>a>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-2539>a>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-2541>a>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-4123>a>.menu-title-text {
        color: #000000 !important;
    }

    #header-outer:not(.transparent) li.menu-item-2535>a:hover>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-2913>a:hover>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-2915>a:hover>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-2539>a:hover>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-2541>a:hover>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-4123>a:hover>.menu-title-text {
        color: #000000 !important;
    }

    #header-outer:not(.transparent) li.menu-item-2535[class*="current"]>a>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-2913[class*="current"]>a>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-2915[class*="current"]>a>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-2539[class*="current"]>a>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-2541[class*="current"]>a>.menu-title-text,
    #header-outer:not(.transparent) li.menu-item-4123[class*="current"]>a>.menu-title-text {
        color: #e30613 !important;
    }

    #header-outer[data-lhe="animated_underline"]:not(.transparent) #top nav>ul>li.menu-item-2535>a>.menu-title-text::after {
        border-color: #e30613 !important;
    }

    #header-outer .sf-menu li ul li a {
        font-size: 0.875rem !important;
        line-height: 1.1 !important;
    }

    #top .sf-menu li ul .current-menu-item>a,
    #top #header-outer nav>ul>.megamenu>ul ul .current-menu-item>a,
    #header-outer:not([data-format="left-header"]) #top nav>ul>li:not(.megamenu) .current-menu-item>a,
    #header-outer:not([data-format="left-header"]) #top nav>ul>li:not(.megamenu) ul .current-menu-item>a,
    body:not([data-header-format="left-header"]) #header-outer nav>ul>.megamenu>ul ul .current-menu-item>a,
    #top .sf-menu li ul li a:hover,
    #header-outer .sf-menu li ul li.menu-item a:hover,
    #header-outer:not([data-format="left-header"]) #top nav>ul>li:not(.megamenu) ul a:hover {
        background-color: transparent !important;
    }


    /* klantenlogos homepage */
    #klantenlogos {
        padding-left: 90px !important;
    }

    /* footer */
    .footer-address-block {
        padding-left: 8rem !important;
    }
}


/* mobile */
@media screen and (max-width: 999px) {

    /* carousel */
    .swiper-slide .content h1 {
        font-weight: 700;
        text-transform: uppercase;
        text-wrap: pretty;
        max-width: 20ch;
        text-shadow: #0000008a 1px 1px 2px;
    }

    .swiper-slide .content p {
        font-weight: 600;
        max-width: 35ch;
        line-height: 1.2;
        text-shadow: #0000008a 1px 1px 2px;
    }

}

#slide-out-widget-area .inner .off-canvas-menu-container li a {
    font-family: "neue-haas-grotesk-display", sans-serif !important;
    font-weight: 600 !important;
    font-style: normal;
}

/* reviews */
.nectar-highlighted-text[data-color="#e30613"]:not([data-style="text_outline"]) em {
    background-image: linear-gradient(to right, #e30613 0, #e30613 100%);
    color: #ffffff !important;
}

.testimonial_slider blockquote p {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.4rem !important;

    .open-quote,
    .close-quote {
        font-size: 30px;
    }
}

.testimonial_slider blockquote>span {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.3rem !important;
    display: inline !important;
    opacity: 1 !important;
}


.testimonial_slider .controls {
    display: none !important;
}

.testimonial_slider[data-style="minimal"] .testimonial-next-prev .prev,
.testimonial_slider[data-style="minimal"] .testimonial-next-prev .next {
    font-size: 40px !important;
}

.testimonial_slider[data-style="minimal"] .testimonial-next-prev .next:hover::after,
.testimonial_slider[data-style="minimal"] .testimonial-next-prev .prev:hover::after {
    opacity: 0 !important;
}



/* buttons */
.wp-block-button__link,
a.nectar-button,
input[type="submit"] {
    font-family: brandon-grotesque, sans-serif !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-size: 1.125rem !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding-block: 10px !important;
}

.wp-block-button__link {
    font-size: 0.875rem !important;
}

.nectar-button.has-icon:hover span,
.nectar-button.has-icon span {
    transform: translateX(-18px);
}

nectar-button i,
.nectar-button i[class*="fa-"] {
    opacity: 1 !important;
    transform: translateX(6px);
    font-size: 2rem !important;
    margin-top: -11px !important;
}


/* faq overrides */
.toggle h3 a {
    font-weight: 700;
    text-transform: none;
    color: #000000;
}

/* Hide Font Awesome icon */
.toggle h3 a i.fa-plus-circle,
.toggle h3 a i.fa-minus-circle {
    display: none;
}

/* Add custom SVG */
.toggle h3 a::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 60"><path fill="currentColor" fill-rule="evenodd" d="M38.699 29.548 9.211 59.036.786 50.611l21.063-21.063L.786 8.486 9.211.061l21.063 21.062 8.425 8.425Z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 8px;
    vertical-align: middle;
    position: absolute;
    right: 0;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.toggle.open h3 a::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 60"><path fill="%23e30613" fill-rule="evenodd" d="M38.699 29.548 9.211 59.036.786 50.611l21.063-21.063L.786 8.486 9.211.061l21.063 21.062 8.425 8.425Z"/></svg>');
    transform: translateY(-50%) rotate(90deg);
}

/* portfolio */
.portfolio-items .work-meta p {
    display: none !important;
}

.portfolio-items[data-ps="9"] .col:hover img {
    transform: none !important;
    box-shadow: none !important;
}

.nectar-fancy-box[data-style="image_above_text_underline"] .image-wrap,
.portfolio-items[data-ps="9"] .work-item {
    position: relative !important;
    z-index: 0 !important;
}

.nectar-fancy-box[data-style="image_above_text_underline"] .image-wrap::before,
.portfolio-items[data-ps="9"] .work-item::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 60"><path fill="%23ffffff" fill-rule="evenodd" d="M38.699 29.548 9.211 59.036.786 50.611l21.063-21.063L.786 8.486 9.211.061l21.063 21.062 8.425 8.425Z"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 10px;
    top: calc(100% - 45px);
    z-index: 100;
    pointer-events: none;
    opacity: 1;
    transform: translateX(0px);
    transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nectar-fancy-box[data-style="image_above_text_underline"]:hover .image-wrap::before,
.portfolio-items[data-ps="9"] .work-item:hover::before {
    opacity: 0.8;
    transform: translateX(10px);
}

.portfolio-filters-inline .container>ul a {
    background-color: #aaa9aa !important;
    color: white !important;
    text-transform: uppercase !important;
    padding: 8px 10px 8px 10px !important;
    margin-right: 10px;
}

.portfolio-filters-inline .container ul li .active {
    background-color: #e30613 !important;
    color: white !important;
}

body .container-wrap .portfolio-filters-inline.non-fw {
    margin-left: 10px !important;
}

#page-header-bg h1 {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 2rem !important;
    text-transform: uppercase;
    max-width: 20ch;
    line-height: 1.2 !important;
    text-shadow: #0000008a 1px 1px 2px;
    text-align: left !important;
    text-wrap: pretty !important;
}


@media only screen and (min-width:640px) {
    #page-header-bg h1 {
        font-size: 3rem !important;
    }
}

@media only screen and (min-width:1000px) {
    #page-header-bg h1 {
        font-size: 3.375rem !important;
    } 
}

@media only screen and (max-width: 1399px) {

    body #top #logo img,
    #header-outer #logo img {
        height: 150px !important;
    }
}

@media only screen and (min-width: 1400px) {

    /* header */
    #header-outer #logo {
        position: relative;
        top: 0;
    }

    #header-outer #logo {
        position: absolute;
        top: -46px;
        margin: 0 !important;
        padding-left: 15px !important;

        img {
            height: 232px;
        }
    }

    header#top .container {
        min-height: 130px !important;
        padding-top: 60px;
        padding-left: 0;
        padding-right: 0;
        max-width: 1500px;
    }

}

/* portfolio */
.bottom_controls {
    display: none !important;
}

#footer-outer[data-cols="1"] #copyright .social li a {
    background-color: #e30613 !important;
    border-radius: 100% !important;
}

@media only screen and (min-width: 768px) {

    body #footer-outer[data-cols="1"][data-disable-copyright="false"] .row {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    #footer-outer[data-cols="1"] #copyright {
        padding-top: 10px !important;
    }
}

.swiper-slide .slide-bg-wrap .slide-bg-overlay {
    opacity: 0.1
}

/* formulier */
.form-hint {
    font-size: 0.875rem;
    color: #555a5a;
    margin-top: -1.5rem;
}

p.c4wp-display-captcha-form label {
    text-transform: none;
}

/* team members */
.nectar_team_member_overlay {
    z-index: 9999 !important;
}

/* producten */
.nectar-underline h3 {
    background-image: none !important;
    font-size: 1.125rem !important;
    line-height: 1.1 !important;
}

.nectar-fancy-box[data-style="image_above_text_underline"] .text {
    padding-top: 25px !important;
}

.nectar-fancy-box[data-style="image_above_text_underline"]:hover .box-bg {
    transform: none !important;
}

.vc_column-inner{
    width:100%;
    height: 100%;
}