:root {
    --white: rgba(255, 255, 255, 1);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-12: rgba(255, 255, 255, 0.12);
    --white-60: rgba(255, 255, 255, 0.6);
    --bg-color-grey: #F5F5F5;
    --bg-blue-dark: #21244D;
    --bg-blue-darker: #191C3B;
    --bg-blue-extra-dark: #1D1F40;
    --bg-green-light: #9CC09E;
    --bg-green-dark: #94B696;
    --text: #101010;
    --black: #000;
    --bg-input: rgba(16, 16, 16, 0.02);
    --bg-blue-dark-06: rgba(33, 36, 77, 0.06);
}

h1 {
    font-family: "agency-fb-wide", sans-serif;
    font-size: 1.625rem;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    text-transform: uppercase;
    
    @media screen and (max-width: 767px) {
        font-size: 1.125rem;
        line-height: 1.3125rem;
    }
}

h2 {
    color: var(--text);
    font-family: "agency-fb-wide", sans-serif;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem;
    text-transform: uppercase;
}

h3 {
    color: var(--text);
    font-family: "titillium-web", sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3125rem;
}

h4 {
    font-family: "agency-fb-wide", sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    text-transform: uppercase;
    color: var(--bg-blue-dark);
    
    @media screen and (max-width: 767px) {
        line-height: 1.3125rem;
    }
}

p {
    color: var(--text);
    font-family: "titillium-web", sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.5rem;
    
    @media screen and (max-width: 767px) {
        line-height: 1.3125rem;
    }
}

p strong {
    color: var(--text);
    font-family: "titillium-web", sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
    
    @media screen and (max-width: 767px) {
        line-height: 1.3125rem;
    }
}

a,
strong a {
    color: var(--text);
    font-family: "titillium-web", sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3125rem;
    text-transform: uppercase;
}

body {
    position: relative;
}

#whiteline {
    width: 100%;
    height: 120px;
    position: fixed;
    top: 0px;
    background-color: unset;
    z-index: 30;
    border-bottom: 1px solid var(--white-12);
    transition: background-color .3s ease-in-out;

    @media screen and (max-width: 767px) {
        width: 100vw;
    }

    .logo {
        width: auto;
        background-color: transparent;
        margin-top: 28px;
        position: relative;
        z-index: 600;
        
        img {
            padding: 0;
        }
        
        @media screen and (max-width: 1220px) {
            width: 115px;
            margin-top: 20px;
            margin-left: 20px;
        }
    }
    
    .logo-is-scrolled {
        display: none;
    }
    
    nav {
        #menu_top {
            @media screen and (max-width: 1220px) {
                margin: 25px 20px 0 0;
            }
            
            @media screen and (max-width: 894px) {
                display: flex;
                flex-directuon: row;
                gap: 9px;
                justify-content: flex-end;
            }
            
            .phone {
                width: 55px;
                height: 55px;
                background-color: var(--bg-blue-extra-dark);
                border: 5px solid var(--bg-blue-dark);
                border-radius: 50%;
                position: relative;
                pointer-events: none;
                z-index: 600;
                
                @media screen and (min-width: 894px) {
                    display: none;
                }
                
                a {
                    display: block;
                    width: 100%;
                    height: 100%;
                    pointer-events: auto;
                }
                
                &:before {
                    content: "";
                    width: 24px;
                    height: 24px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);                  
                    background-image: url(/assets/templates/img/phone-white.png);
                    background-size: cover;
                    background-repeat: no-repeat;
                }
            }
            
            .mobile-menu {
                width: 94px;
                height: 55px;
                background-color: var(--bg-green-dark);
                border-radius: 99px;
                border: 6px solid var(--bg-green-light);
                color: var(--white);
                font-family: "titillium-web", sans-serif;
                font-size: 0.875rem;
                font-style: normal;
                font-weight: 600;
                line-height: 1.25rem;
                /* margin: 25px 20px 0 0; */
                
                @media screen and (max-width: 894px) {
                    display: block;
                }
            }
            
            .menu-main {
                @media screen and (max-width: 894px) {
                    width: 0;
                    height: 0;
                    opacity: 0;
                    transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out;
                    
                    &.show {
                        width: 100%;
                        position: fixed;
                        top: 0;
                        left: 0;
                        background: var(--bg-blue-dark);
                        /* height: 582px; */
                        min-height: fit-content;
                        z-index: 500;
                        padding-top: 80px;
                        padding-bottom: 48px;
                        border-radius: 0 0 16px 16px;
                        opacity: 1;
                        
                        &::after {
                            @media screen and (max-width: 767px) {
                                content: "";
                                position: absolute;
                                background: url("/assets/templates/img/transparent-logo.png");
                                background-repeat: no-repeat;
                                background-size: contain;
                                z-index: 510;
                                width: 239px;
                                height: 182px;
                                bottom: -38px;
                                right: -27px;
                                opacity: .1;
                            }
                        }
                    }
                }
                
                .mobile-close-button {
                    display: none;
                    width: 94px;
                    height: 55px;
                    background-color: var(--bg-green-dark);
                    border-radius: 99px;
                    border: 6px solid var(--bg-green-light);
                    color: var(--white);
                    font-family: "titillium-web", sans-serif;
                    font-size: 0.875rem;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 1.25rem;
                    
                    @media screen and (max-width: 894px) {
                        /* display: block; */
                    }
                }
                
                &.show .mobile-close-button {
                    display:block;
                }
                
                .menu {
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    
                    @media screen and (max-width: 894px) {
                        display: flex;
                        flex-direction: column;
                        gap: 48px;
                        margin-top: 77px;
                    }
                    
                    .menu-item {
                        display: flex;
                        align-items: center;
                        padding: 0;
                        
                        a {
                            color: var(--white);
                            font-family: "titillium-web", sans-serif;
                            font-size: 1rem;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 1.25rem;
                            text-decoration: none;
                            border-bottom: none;
                            text-transform: none;
                            margin: 10px 0;
                            
                            @media screen and (max-width: 894px) {
                                margin: 0 !important;
                                font-size: 1.5rem;
                                font-weight: 600;
                            }
                        }
                        
                        &:last-child {
                            width: 210px;
                            height: 43px;
                            margin-left: 11px;
                            padding: 0 0 0 20px;
                            background-color: var(--bg-green-light);
                            display: flex;
                            align-items: center;
                            position: relative;
                            border-radius: 99px;
                            font-weight: 600;
                            
                            a {
                                font-weight: 600;
                            }
                            
                            @media screen and (max-width: 894px) {
                                margin-left: 0;
                                a {
                                    font-size: 1rem;
                                    font-style: normal;
                                    font-weight: 600;
                                    line-height: 1.25rem;
                                }
                                
                            }
                            
                            &::before {
                                content: "";
                                width: 45px;
                                height: 31px;
                                position: absolute;
                                top: 50%;
                                right: 6px;
                                transform: translateY(-50%);
                                border-radius: 99px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                background-color: #94B696;
                                background-image: 
                                    url("/assets/templates/img/svg/button-arrow.svg"),
                                    url("/assets/templates/img/svg/button-arrow.svg");
                                background-repeat: no-repeat;
                                background-size: 12px 11px;
                                background-position: 
                                    center center,
                                    calc(0% - 12px) center;
                                transition: background-position 0.3s ease;
                            }
                            
                            &:hover::before {
                                background-position:
                                    calc(100% + 12px) center, 
                                    center center;            
                            }
                            
                            a {
                                padding: 0;
                                background-color: var(--bg-green-light);
                            }
                        }
                    }
                }
            }
        }
    }
}

.offerte-page #whiteline {
    background-color: var(--bg-color-grey);

    nav {
        #menu_top {
            .menu-main {
                .menu {
                    .menu-item {
                        a {
                            color: var(--text);
                            
                            @media screen and (max-width: 894px) {
                                color: var(--white);
                            }
                        }
                        
                        &.last {
                            a {
                                color: var(--white);
                            }
                        }
                    }
                }
            }
        }
    }
}


#slider {
    position: relative;
    width: 100%;
    min-width: 900px;
    height: 609px !important;
    position: fixed;
    top: 0;
    left: 0;

    
    @media screen and (max-width: 767px) {
        height: 325px !important;
        min-width: 100%;
        max-width: 100vw;
    }
    
    @media screen and (min-width: 768px) and (max-width: 1219px) {
        background-color: blue;
        height: 467px;
    }
    
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) -70.85%, rgba(0, 0, 0, 0.50) 100%);
        pointer-events: none;
        z-index: 500;
    }
    
    &::after {
        content: "";
        position: absolute;
        background: url("/assets/templates/img/transparent-logo.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 610px;
        height: 463px;
        bottom: -108px;
        right: -43px;
        z-index: 510;
        
        @media screen and (max-width: 767px) {
            width: 239px;
            height: 182px;
            bottom: -38px;
            right: -27px;
        }
    }
    
    .bg_images {
        display: none;
    }
    
    .rev_slider_wrapper {
        @media screen and (max-width: 767px) {
            height: 325px;
        }
        
        @media screen and (min-width: 768px) and (max-width: 1219px) {
            height: 467px;
        }
        
        .rev_slider {
            @media screen and (max-width: 767px) {
                height: 325px !important;
            }
            
            @media screen and (min-width: 768px) and (max-width: 1219px) {
                height: 476px !important;
            }
        }
        
        .tp-bullets.simplebullets.round {
            display: block !important;
            width: 100% !important;
            max-width: 1220px !important;
            margin-left: 0 !important;
            bottom: 29px !important;
            left: 50% !important;
            transform: translateX(-50%);
            
            @media screen and (max-width: 1220px) {
                margin-left: 20px !important;
                bottom: 20px !important;
            }
            
            .bullet {
                width: 8px;
                height: 8px;
                border: none !important;
                background: var(--white-60);
                background-image: none !important;
                margin-left: 4px !important;
                border-radius: 50%;
                
                &.selected {
                    width: 24px !important;
                    background: var(--white) !important;
                    border-radius: 999px;
                }
            }
        }
    }
}

#bg_color {
    background-color: var(--bg-color-grey) !important;
    
    @media screen and (max-width: 767px) {
        margin-top: 325px !important;
        width: 100vw;
    }
    
    @media screen and (min-width: 768px) and (max-width: 1219px) {
        margin-top: 470px !important;
    }
    
    #content {
        justify-content: center;
        
        @media screen and (max-width: 767px) {
            width: 100vw;
            overflow: hidden;
        }
        
        @media screen and (max-width: 1220px) {
            max-width: 1110px;
        }
        
        @media screen and (max-width: 939px) {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 500px;
        }
        
        #content_container {
            margin-top: 0;
            margin-bottom: 0;
            background-color: var(--bg-color-grey);
            padding: 80px 0 80px 0;
            max-width: 711px;
            
            
            @media screen and (max-width: 1220px) {
                padding: 56px 0 0 0;
            }
            
            a {
                color: inherit;
            }
            
            h1 {
                @media screen and (max-width: 767px) {
                    font-size: 1.125rem;
                }
            }
        }
        
        #content_right {
            
            @media screen and (max-width: 767px) {
                width: 100%;
                max-width: 350px;
            }
            
            .wrapper-top {
                position: relative;
                width: 385px;
                height: 110px;
                padding: 24px 24px 0 24px;
                margin-top: 80px;
                background-color: var(--bg-blue-dark);
                
                @media screen and (max-width: 767px) {
                    margin-top: 64px;
                    width: 100%;
                    max-width: 350px;
                    padding: 22px 20px 0 20px;
                }
                
                .contact-image {
                    width: 140px;
                    height: 134px;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                }
                
                .link_text {
                    padding: 0;
                    margin: 0;
                    max-width: 227px;
                    background-color: transparent;
                    color: var(--white);
                    font-family: "agency-fb-wide", sans-serif;
                    font-size: 0.8125rem;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 1.25rem;
                    text-transform: uppercase;
                    
                    @media screen and (max-width: 767px) {
                        font-size: 0.75rem;
                        line-height: 1.125rem;
                    }
                }
                
                .link_name_text {
                    max-width: 227px;
                    background-color: transparent;
                    color: var(--white);
                    margin-top: 7px;
                    font-family: "titillium-web", sans-serif;
                    font-size: 0.875rem;
                    font-style: normal;
                    font-weight: 300;
                    line-height: 1.125rem;
                    
                    span {
                        color: inherit;
                        font-family: inherit;
                        font-size: inherit;
                        font-style: inherit;
                        line-height: inherit;
                        font-weight: 600;
                    }
                }
            }
            
            .wrapper-bottom {
                width: 385px;
                height: 54px;
                margin-bottom: 56px;
                display: flex;
                color: #FFF;
                font-family: "titillium-web", sans-serif;
                font-size: 1rem;
                font-style: normal;
                font-weight: 300;
                line-height: 1.25rem;
                
                @media screen and (max-width: 767px) {
                    width: 100%;
                    max-width: 350px;
                }
                                
                
                .link_telefoon {
                    position: relative;
                    width: 50%;
                    margin-bottom: 0;
                    background-color: var(--bg-blue-darker);
                    background-image: none;
                    font-weight: inherit;
                    font-family: inherit;
                    font-size: inherit;
                    font-style: inherit;
                    line-height: inherit;
                    
                    @media screen and (max-width: 767px) {
                        line-height: 1.25rem;
                    }
                    
                    &::after {
                        content: "";
                        width: 1px;
                        height: 22px;
                        background-color: var(--white-10);
                        position: absolute;
                        top: 50%;
                        right: 0;
                        transform: translateY(-50%);
                    }
                    
                    span {
                        color: var(--white);
                        font-weight: inherit;
                        font-family: inherit;
                        font-size: inherit;
                        font-style: inherit;
                        line-height: inherit;
                    }
                }
                
                .email {
                    width: 50%;
                    background-color: var(--bg-blue-darker);
                    color: var(--white);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-weight: inherit;
                    font-family: inherit;
                    font-size: inherit;
                    font-style: inherit;
                    line-height: inherit;
                    
                    
                    
                    @media screen and (max-width: 767px) {
                        line-height: 1.25rem;
                    }
                    
                    span {
                        color: var(--white);
                        font-weight: inherit;
                        font-family: inherit;
                        font-size: inherit;
                        font-style: inherit;
                        line-height: inherit;
                        text-transform: lowercase;
                    }
                }
            }
            
            .contact {
                /* max-width: 200px; */
                max-width: unset;
                margin-left: 0;
                
                span,
                div,
                span.bold,
                span a {
                    color: var(--text);
                    font-family: "titillium-web", sans-serif;
                    font-size: 1rem;
                    font-style: normal;
                    font-weight: 300;
                    line-height: 1.5rem;
                    
                    @media screen and (max-width: 767px) {
                        line-height: 1.3125rem;
                    }
                }
                
                span.bold {
                    font-weight: 600;
                }
                
                .wrapper-phone {
                    margin-top: 29px;
                    display: flex;
                    align-items: center;
                    gap: 14px;
                    
                    img {
                        width: 24px;
                        height: 24px;
                    }
                    
                    span {
                        transition: transform 0.3s ease;
                        
                        &:hover {
                            transform: translateX(-8px);
                        }
                    }
                }
                
                .wrapper-email {
                    margin-top: 12px;
                    display: flex;
                    align-items: center;
                    gap: 14px;
                    
                    img {
                        width: 24px;
                        height: 24px;
                    }
                    
                    span {
                        transition: transform 0.3s ease;
                        
                        &:hover {
                            transform: translateX(-8px);
                        }
                        
                        a {
                            text-transform: lowercase;
                            font-family: "titillium-web", sans-serif;
                            font-size: 1rem;
                            font-style: normal;
                            font-weight: 300;
                            line-height: 1.5rem;
                        }
                    }
                }
            }
        }
        
        .homepageaanbod {
            margin-top: 26px;
            margin-bottom: 124px;
            padding: 0;
            
            @media screen and (max-width: 939px) {
                max-width: 385px;
                margin-top: 64px;
                margin-bottom: 64px;
            }
            
            @media screen and (min-width: 940px) and (max-width: 1220px) {
                padding-top: 64px;
                margin-bottom: 64px;
            }
            
            ul {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                margin-bottom: 0;
                gap: 32px;
                
                
                li.aanbodoverzicht {
                    width: 385px;
                    height: 412px;
                    margin: 0;
                    
                    @media screen and (max-width: 767px) {
                        width: 100%;
                        max-width: 350px;
                        height: 360px;
                    }
                    
                    a {
                        display: block;
                        width: 100%;
                        height: 100%;
                        text-decoration: none;
                        
                        .image {
                            position: relative;
                            height: 200px;
                            
                            @media screen and (max-width: 767px) {
                                height: 182px;
                            }
                            
                            img {
                                @media screen and (max-width: 767px) {
                                    height: 100%;
                                }
                            }
                            
                            .link-wrapper {
                                width: 65px;
                                height: 37px;
                                background-color: var(--bg-green-light);
                                border-radius: 99px;
                                position: absolute;
                                bottom: -18.5px;
                                right: 20px;
                                pointer-events: none;
                                
                                &:before {
                                    content: "";
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    width: 100%;
                                    height: 100%;
                                    transform: translate(-50%, -50%);
                                    background-image: 
                                        url("/assets/templates/img/svg/button-arrow.svg"),
                                        url("/assets/templates/img/svg/button-arrow.svg");
                                    background-repeat: no-repeat;
                                    background-size: 68px 17px;
                                    background-position: 
                                        center center,
                                        calc(0% - 44px) center;
                                    transition: background-position 0.3s ease;
                                }
                            }
                        }
                    }
                    
                    .aanbod-info {
                        padding: 31px 32px;
                        
                        @media screen and (max-width: 767px) {
                            padding: 32px 24px;
                        }
                        
                        h2 {
                            margin: 0;
                            color: var(--text);
                            font-family: "agency-fb-wide", sans-serif;
                            font-size: 1.125rem;
                            font-style: normal;
                            font-weight: 700;
                            line-height: 1.5rem;
                            text-transform: uppercase;
                            
                            @media screen and (max-width: 767px) {
                                font-size: 0.875rem;
                                line-height: 1.25rem;
                            }
                        }
                        
                        .korte_tekst {
                            display: block;
                            margin-top: 14px;
                            color: var(--text);
                            font-family: "titillium-web", sans-serif;
                            font-size: 1rem;
                            font-style: normal;
                            font-weight: 300;
                            line-height: 1.5rem;
                            text-transform: none;
                        }
                    }
                }
                
                li.aanbodoverzicht:hover a .image .link-wrapper::before {
                    background-position:
                        calc(100% + 44px) center, 
                        center center;
                }
            }
        }
    }
}

#bg_color #content_container {
    padding-bottom: 124px !important;
    
    @media screen and (max-width: 767px) {
        padding-bottom: 60px !important;
    }
}

.page-id-6 #bg_color #content #content_container {
    max-width: 711px;
}

.page-id-9 #bg_color #content #content_container {
    max-width: 780px;
}

.page-id-10 #bg_color #content #content_container {
    max-width: 650px;
}

.page-id-11 #bg_color #content #content_container {
    max-width: 780px;
}

.page-id-12 #bg_color #content #content_container {
    max-width: 650px;
}

.page-id-13 #bg_color #content #content_container {
    padding-bottom: 110px !important;
    
    @media screen and (max-width: 767px) {
         padding-bottom: 26px !important;
    }
}

#footer_white {
    @media screen and (max-width: 767px) {
        padding-bottom: 64px;
    }
    
    h3 {
        color: var(--text);
        font-family: "agency-fb-wide", sans-serif;
        font-size: 1.625rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: uppercase;
        padding-bottom: 32px;
        
        @media screen and (max-width: 767px) {
            margin-top: 23px;
            font-size: 1.125rem;
        }
    }
    
    input,
    textarea {
        color: var(--black);
        font-family: "titillium-web", sans-serif;
        font-size: 1rem;
        font-style: normal;
        font-weight: 300;
        line-height: 1.3125rem;
        background-color: var(--bg-input);
    }
    
    .wpcf7 {
        position: relative;
    }
    
    .mdc-line-ripple {
        background-color: var(--text);
    }
    
    .form-left {
        .mdc-text-field {
            margin-bottom: 24px;
            
            &:last-of-type {
                margin-bottom: 0;
            }
            
            label {
                color: var(--black);
                font-family: "titillium-web", sans-serif;
                font-size: 1rem;
                font-style: normal;
                font-weight: 300;
                line-height: 1.3125rem;
            }
        }
        
        button {
            position: absolute;
            left: 0;
            margin-top: 33px;
            margin-left: 0;
            width: 153px;
            height: 43px;
            padding: 0 0 0 20px;
            background-color: var(--bg-green-light);
            display: flex;
            align-items: center;
            position: relative;
            border-radius: 99px;
            color: var(--white);
            font-family: "titillium-web", sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 600;
            line-height: 1.25rem;
            
            &:before {
                content: "";
                width: 45px;
                height: 31px;
                position: absolute;
                top: 50%;
                right: 6px;
                transform: translateY(-50%);
                border-radius: 99px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #94B696;
                /* background-image: url("/assets/templates/img/svg/button-arrow.svg" ); */
                background-image: 
                    url("/assets/templates/img/svg/button-arrow.svg"),
                    url("/assets/templates/img/svg/button-arrow.svg");
                background-repeat: no-repeat;
                background-size: 12px 11px;
                /* background-position: center center; */
                background-position: 
                    center center,
                    calc(0% - 12px) center;
                transition: background-position 0.3s ease;
            }
            
            &:hover::before {
                background-position:
                    calc(100% + 12px) center, 
                    center center;            
            }
            
            &:after {
                display: none;
            }
        }
    }
    
    .form-right {
        .mdc-text-field.textarea {
            padding: 0;
            height: 228px;
            margin-bottom: 0;
            
            @media screen and (max-width: 639px) {
                margin-top: 24px;
            }
            
            textarea {
                height: 100%;
            }
            
            label {
                color: var(--black);
                font-family: "titillium-web", sans-serif;
                font-size: 1rem;
                font-style: normal;
                font-weight: 300;
                line-height: 1.3125rem;
            }
        }
    }
    
    .contact {
        margin-top: 0;
        margin-left: 126px;
        
        @media screen and (max-width: 767px) {
            margin-left: 0;
            margin-top: 56px;
        }
        
        span {
            color: var(--text);
            font-family: "titillium-web", sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 300;
            line-height: 1.5rem;
            
            @media screen and (max-width: 767px) {
                line-height: 1.3125rem;
            }
        }
        
        .name {
            margin-top: 18px;
            font-weight: 600;
            
            @media screen and (max-width: 767px) {
                margin-top: 22px;
            }
        }
        
        .address {
           display: block;
           margin-bottom: 22px;
        }
        
        .wrapper-phone {
            margin-top: 29px;
            display: flex;
            align-items: center;
            gap: 14px;
            
            @media screen and (max-width: 767px) {
                margin-top: 22px;
            }
            
            img {
                width: 24px;
                height: 24px;
            }
            
            span {
                transition: transform 0.3s ease;
                
                &:hover {
                    transform: translateX(-8px);
                }
            }
        }
        
        .wrapper-email {
            margin-top: 12px;
            display: flex;
            align-items: center;
            gap: 14px;
            
            img {
                width: 24px;
                height: 24px;
            }
            
            span {
                transition: transform 0.3s ease;
                
                &:hover {
                    transform: translateX(-8px);
                }
                
                a {
                    text-transform: lowercase;
                    font-family: "titillium-web", sans-serif;
                    font-size: 1rem;
                    font-style: normal;
                    font-weight: 300;
                    line-height: 1.5rem;
                }
            }
        }
    }
}

#footer_blue {
    height: 202px;
    padding: 0 20px;
    background-color: var(--bg-blue-dark);
    display: flex;
    align-items: center;
    
    @media screen and (max-width: 767px) {
        height: unset;
        align-items: flex-start;
    }
    
    .footer_line {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        
        @media screen and (max-width: 767px) {
            flex-direction: column-reverse;
            padding-bottom: 48px;
        }
        
        .logo {
            position: relative;
            top: unset;
            right: unset;
            
            img {
                @media screen and (max-width: 767px) {
                    margin: 48px auto 54px;
                }
            }
        }
        
        ul {
            display: flex;
            
            @media screen and (max-width: 767px) {
                flex-direction: column;
            }
            
            li {
                margin-left: 32px;
                
                @media screen and (max-width: 767px) {
                    margin-left: 0;
                    margin-bottom: 32px;
                }
                
                &:last-of-type {
                    margin-bottom: 0;
                }
                
                a,
                a:hover {
                    color: var(--white);
                    font-family: "titillium-web", sans-serif;
                    font-size: 1rem;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 1.25rem;
                    text-transform: unset;
                }
            }
            
            li.current-menu-item a {
                font-weight: 600;
            }
        }
    }
}

.footer-bottom {
    background-color: var(--bg-blue-darker);
    
    p {
        color: var(--white);
        font-size: 0.875rem;
        
        @media screen and (max-width: 767px) {
            line-height: 1.25rem;
        }
    }
}

.sidebar_content {
    /* .B_crumbBox {
        margin-bottom: 16px;
        
        @media screen and (max-width: 939px) {
            display: none;
        }
        
        li a span {
            color: var(--text);
            font-family: "titillium-web", sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1.5rem;
            text-transform: uppercase;
        }
        
        & > span {
            position: relative;
            color: transparent;
            
            &::after {
                content: "";
                position: absolute;
                width: 0.0625rem;
                height: 0.75rem;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background-color: var(--text);
                
            }
        }
    } */
    
    h1 {
        font-size: 1.625rem;
        line-height: 2.1125rem;
    }
    
    p {
        font-size: 1rem;
        
    }
}

ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0;
    gap: 32px;
    
    li.aanbodoverzicht {
        width: 385px;
        height: 412px;
        margin: 0;
        
        @media screen and (max-width: 767px) {
            width: 100%;
            max-width: 350px;
            height: 360px;
        }
        
        .image {
            position: relative;
            
            a {
                display: block;
                height: 200px;
                
                @media screen and (max-width: 767px) {
                    height: 182px;
                }
                
                img {
                    @media screen and (max-width: 767px) {
                        height: 100%;
                    }
                }
            }
            
            .link-wrapper {
                width: 65px;
                height: 37px;
                background-color: var(--bg-green-light);
                border-radius: 99px;
                position: absolute;
                bottom: -18.5px;
                right: 20px;
                pointer-events: auto;
                
                &:hover {
                    cursor: pointer;
                }
                
                &::before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 100%;
                    height: 100%;
                    transform: translate(-50%, -50%);
                    /* background-image: url("/assets/templates/img/svg/button-arrow.svg" ); */
                    background-image: 
                        url("/assets/templates/img/svg/button-arrow.svg"),
                        url("/assets/templates/img/svg/button-arrow.svg");
                    background-repeat: no-repeat;
                    background-size: 68px 17px;
                    /* background-position: center center; */
                    background-position: 
                        center center,
                        calc(0% - 44px) center;
                    transition: background-position 0.3s ease;
                }
                
                &:hover::before {
                    background-position:
                        calc(100% + 44px) center, 
                        center center;            
                }
                
                a {
                    height: 100%;
                }
            }
        }
        
        .aanbod-info {
            padding: 0 32px 47px 32px;
            
            @media screen and (max-width: 767px) {
                padding: 0 24px 40px 24px;
            }
            
            a {
                h2,
                h2.title {
                    color: var(--text);
                    font-family: "agency-fb-wide", sans-serif;
                    font-size: 1.125rem;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 1.5rem;
                    text-transform: uppercase;
                    
                    @media screen and (max-width: 767px) {
                        font-size: 0.875rem;
                        line-height: 1.25rem;
                    }
                }
            }
            
            .korte_tekst {
                color: var(--text);
                font-family: "titillium-web", sans-serif;
                font-size: 1rem;
                font-style: normal;
                font-weight: 300;
                line-height: 1.5rem;
            }
        }
    }
}

.home ul {
    gap: 32px;
    justify-content: center;
    
    li.aanbodoverzicht {
        width: 385px;
    }
}

.page-id-9 ul {
    gap: 24px;
    justify-content: flex-start;
    
    li.aanbodoverzicht {
        width: 378px;
        /* pointer-events: none; */
    }
}

.page-id-11 ul {
    gap: 24px;
    justify-content: flex-start;
    
    li.aanbodoverzicht {
        width: 378px;
        height: 340px;
    }
}

.page-id-10 .gallary_container,
.page-id-13 .gallary_container {
    .gallary {
        position: relative;
        width: 100%;
        height: 333px;
        overflow: hidden;
        object-fit: cover;
        object-position: center;
        
        @media screen and (max-width: 1200px) {
            height: 250px;
        }
        
        img {
            height: 100%;
            object-fit: cover;
        }
    }
}

.page-id-10 #wpsimplegallery_container,
.page-id-13 #wpsimplegallery_container {
    display: none;
}

.page-id-10 .gallery-nav,
.page-id-13 .gallery-nav {
    width: 65px;
    height: 37px;
    background-color: var(--bg-green-light);
    border-radius: 99px;
    position: absolute;
    border: none;
    z-index: 1000;
    
    &:hover {
        cursor: pointer;
    }
    
    &:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        background-image: url("/assets/templates/img/svg/button-arrow.svg" );
        background-repeat: no-repeat;
        background-size: 68px 17px;
        background-position: center center;
    }
    
    a {
        height: 100%;
    }
    
    &.gallery-prev {
        right: 104px;
        bottom: 25px;
        transform: scaleX(-1);
    }
    
    &.gallery-next {
        right: 25px;
        bottom: 25px;
    }
}

/*  */

.page-id-12 .gallary_container {
    .gallary {
        background-color: var(--white);
        position: relative;
        
        #big_img {
            width: 100%;
            height: 333px;
            object-fit: cover;
            object-position: center;
        }
        
        #wpsimplegallery_container {
            ul {
                margin: 0;
                padding: 32px;
                display: flex;
                gap: 12px;
                justify-content: flex-start;
                
                &::before {
                    display: none;
                }
                
                li {
                    margin: 0;
                    width: 87px;
                    height: 87px;
                    
                    a {
                        width: 87px;
                        height: 87px;
                        padding: 0;
                        
                        img {
                            width: 87px;
                            height: 87px;
                        }
                    }
                }
            }
        }
    }
}

.page-id-13 .gallary_container {
    margin-top: 32px;
    
    .gallary {
        height: 390px;
        
        @media screen and (max-width: 1200px) {
            height: 250px;
        }
    }
}

.page-id-12 .gallery-nav {
    width: 65px;
    height: 37px;
    background-color: var(--bg-green-light);
    border-radius: 99px;
    position: absolute;
    border: none;
    z-index: 1000;
    
    &:hover {
        cursor: pointer;
    }
    
    &:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        background-image: url("/assets/templates/img/svg/button-arrow.svg" );
        background-repeat: no-repeat;
        background-size: 68px 17px;
        background-position: center center;
    }
    
    a {
        height: 100%;
    }
    
    &.gallery-prev {
        right: 104px;
        top: 271px;
        transform: scaleX(-1);
    }
    
    &.gallery-next {
        right: 25px;
        top: 271px;
    }

}

.downloads {
    .category-row {
        border-bottom: 2px solid #f0f0f0;
        padding-bottom: 4px;
        margin-bottom: 32px;
        
        h2 {
            color: var(--text);
            font-family: "titillium-web", sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 600;
            line-height: 1.3125rem;
            border-bottom: none;
            
            &::after {
                width: 27px;
                height: 27px;
                background-image: url(/assets/templates/img/svg/arrow-up.svg);
            }
        }
        
        li {
            border-bottom: none;
            padding: 15px 0 10px 40px;
        }
        
        li::after {
            width: 28px;
            height: 28px;
            border-radius: 4px;
            background-image: url(/assets/templates/img/svg/download.svg);
        }
    }
}

.offerte-page {
    #bg_color {
        margin-top: 120px;
        
        @media screen and (max-width: 767px) {
            margin-top: 40px !important;
        }
        
        @media screen and (min-width: 768px) and (max-width: 1219px) {
            margin-top: 80px !important;
        }
    }    
}

#footer_white.contact-form {
    padding-top: 120px;
    background-color: var(--bg-color-grey);
    
    .row {
        @media screen and (max-width: 1110px) {
           display: flex;
           flex-direction: column;
           align-items: flex-start;
           
           .sidebar_content {
               margin-top: 32px;
           }
           
           .contact {
               margin-left: 0;
           }
        }
    }
    
    h3 {
        margin-top: 0;
        color: var(--text);
        font-family: "agency-fb-wide", sans-serif;
        font-size: 1.625rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: uppercase;
    }
    
    input,
    textarea {
        background-color: var(--white);
    }
    
    .sidebar_content {
        max-width: 385px;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .wrapper-top {
        position: relative;
        width: 385px;
        height: 110px;
        padding: 24px 24px 0 24px;
        margin-top: 0;
        background-color: var(--bg-blue-dark);
        
        @media screen and (max-width: 767px) {
            margin-top: 64px;
            width: 100%;
            max-width: 350px;
            padding: 22px 20px 0 20px;
        }
        
        .contact-image {
            width: 140px;
            height: 134px;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        
        .link_text {
            padding: 0;
            margin: 0;
            max-width: 227px;
            background-color: transparent;
            color: var(--white);
            font-family: "agency-fb-wide", sans-serif;
            font-size: 0.8125rem;
            font-style: normal;
            font-weight: 700;
            line-height: 1.25rem;
            text-transform: uppercase;
            
            @media screen and (max-width: 767px) {
                font-size: 0.75rem;
                line-height: 1.125rem;
            }
        }
        
        .link_name_text {
            max-width: 227px;
            background-color: transparent;
            color: var(--white);
            margin-top: 7px;
            font-family: "titillium-web", sans-serif;
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 300;
            line-height: 1.125rem;
            
            span {
                color: inherit;
                font-family: inherit;
                font-size: inherit;
                font-style: inherit;
                line-height: inherit;
                font-weight: 600;
            }
        }
    }
    
    .wrapper-bottom {
        width: 385px;
        height: 54px;
        margin-bottom: 0;
        display: flex;
        color: #FFF;
        font-family: "titillium-web", sans-serif;
        font-size: 1rem;
        font-style: normal;
        font-weight: 300;
        line-height: 1.25rem;
        
        @media screen and (max-width: 767px) {
            width: 100%;
            max-width: 350px;
        }
                        
        .link_telefoon {
            position: relative;
            width: 50%;
            margin-bottom: 0;
            background-color: var(--bg-blue-darker);
            background-image: none;
            font-weight: inherit;
            font-family: inherit;
            font-size: inherit;
            font-style: inherit;
            line-height: inherit;
            color: var(--white);
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            
            @media screen and (max-width: 767px) {
                line-height: 1.25rem;
            }
            
            span {
                color: var(--white);
                font-weight: inherit;
                font-family: inherit;
                font-size: inherit;
                font-style: inherit;
                line-height: inherit;
                text-transform: lowercase;
            }
            
            &::after {
                content: "";
                width: 1px;
                height: 22px;
                background-color: var(--white-10);
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
            }
        }
        
        .email {
            width: 50%;
            background-color: var(--bg-blue-darker);
            color: var(--white);
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: inherit;
            font-family: inherit;
            font-size: inherit;
            font-style: inherit;
            line-height: inherit;
            text-decoration: none;
            
            @media screen and (max-width: 767px) {
                line-height: 1.25rem;
            }
            
            span {
                color: var(--white);
                font-weight: inherit;
                font-family: inherit;
                font-size: inherit;
                font-style: inherit;
                line-height: inherit;
                text-transform: lowercase;
            }
        }
    }
}

.page-contact #footer_white.contact-form {
    background-color: var(--white);
    padding-top: 80px;

    input,
    textarea {
        background-color: var(--bg-input);
    }
    
}

.B_crumbBox {
    margin-bottom: 16px;
    
    @media screen and (max-width: 939px) {
        display: none;
    }
    
    li a span {
        color: var(--text);
        font-family: "titillium-web", sans-serif;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5rem;
        text-transform: uppercase;
    }
    
    & > span {
        position: relative;
        color: transparent;
        
        &::after {
            content: "";
            position: absolute;
            width: 0.0625rem;
            height: 0.75rem;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: var(--text);
            
        }
    }
}

#whiteline.is-scrolled {
    background-color: var(--white);
    height: 100px;
    
    .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100px;
    }
    
    .logo {
        display: none;
    }
    
    .logo-is-scrolled {
        display: block;
        margin-top: 0;
        width: auto;
        max-height: 80px;
        
        @media screen and (max-width: 767px) {
            width: 115px;
            margin-top: 20px;
            margin-left: 20px;
            
            img {
                width: 100%;
                height: auto;
            }
        }
        
        img {
            width: 115px;
            max-height: 80px;
        }
    }

    nav {
        height: 100%;
        
        & #menu_top {
            margin-top: 30px;
            
            & .menu-main {
                & .menu {
                    & .menu-item {
                        a {
                            color: var(--text);
                        }
                        
                        &:last-child a {
                            color: var(--white);
                        }
                    }
                }
            }
        }
    }    
}

li.aanbodoverzicht {
    width: 385px;
    height: 412px;
    margin: 0;
    
    @media screen and (max-width: 767px) {
        width: 100%;
        max-width: 350px;
        height: 360px;
    }
    
    a {
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        
        .image {
            position: relative;
            height: 200px;
            
            @media screen and (max-width: 767px) {
                height: 182px;
            }
            
            img {
                @media screen and (max-width: 767px) {
                    height: 100%;
                }
            }
            
            .link-wrapper {
                width: 65px;
                height: 37px;
                background-color: var(--bg-green-light);
                border-radius: 99px;
                position: absolute;
                bottom: -18.5px;
                right: 20px;
                pointer-events: none;
                
                &:before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 100%;
                    height: 100%;
                    transform: translate(-50%, -50%);
                    background-image: 
                        url("/assets/templates/img/svg/button-arrow.svg"),
                        url("/assets/templates/img/svg/button-arrow.svg");
                    background-repeat: no-repeat;
                    background-size: 68px 17px;
                    background-position: 
                        center center,
                        calc(0% - 44px) center;
                    transition: background-position 0.3s ease;
                }
            }
        }
    }
    
    .aanbod-info {
        padding: 31px 32px !important;
        
        @media screen and (max-width: 767px) {
            padding: 32px 24px !important;
        }
        
        h2,
        h2.title {
            margin: 0 !important;
            color: var(--text) !important;
            font-family: "agency-fb-wide", sans-serif !important;
            font-size: 1.125rem !important;
            font-style: normal;
            font-weight: 700;
            line-height: 1.5rem !important;
            text-transform: uppercase;
            
            @media screen and (max-width: 767px) {
                font-size: 0.875rem;
                line-height: 1.25rem;
            }
        }
        
        .korte_tekst {
            display: block;
            margin: 14px 0 0 0 !important;
            color: var(--text);
            font-family: "titillium-web", sans-serif;
            font-size: 1rem;
            font-style: normal;
            font-weight: 300;
            line-height: 1.5rem;
            text-transform: none;
        }
    }
}

li.aanbodoverzicht:hover a .image .link-wrapper::before {
    background-position:
        calc(100% + 44px) center, 
        center center;
}

.hover-animation {
     display: inline-flex !important;
     /* display: flex; */
     justify-content: center;
     align-items: center;
     overflow: hidden;
}

.hover-animation span {
    position: relative;
    transition: all 0.25s ease-in-out;
    display: inline-block;
}

.hover-animation span:after {
    content: attr(data-title);
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.25s ease-in-out;
    transform: translateY(54px);
}

.hover-animation:hover span {
    transform: translateY(-54px);
}

.hover-animation:hover span:after {
    transform: translateY(54px);
}

.hover-animation.link_telefoon {
    padding: 0 !important;
}

.downloads .category-row.open li {
    display: flex;
    align-items: center;
    padding: 15px 0 15px 40px;
}

.downloads .category-row.open li a {
    text-transform: none;
    color: var(--text);
    font-family: "titillium-web", sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.5rem;
}

.offerte-page #whiteline {
    border-bottom: 1px solid var(--bg-blue-dark-06);
}

.offerte-page #whiteline .logo {
    @media screen and (min-width: 768px) {
        background-color: var(--bg-color-grey);
    }
}

#whiteline.menu-open.is-scrolled {
    height: 120px;
    
    .row {
        height: 80px;
    }
    
    .logo {
        width: 115px;
        margin-top: 20px;
        margin-left: 20px;
        display: block;
    }
    
    .logo-is-scrolled {
        display: none;
    }
    
    nav #menu_top {
        margin-top: 25px;
    }
    
    nav #menu_top .menu-main .menu .menu-item a {
        color: var(--white);
    }
}