* {
    transition-timing-function: ease-in-out;
    transition-duration: 0.3s;
    transition-delay: 0s;
    outline: none !important;
}

a {
    text-decoration: none;
}

:root {
    --ultra-licht-blauw: rgba(130,198,218,1);
    --licht-blauw: rgba(218,242,242,1);
    --blauw: rgba(0,139,179,1);
    --blauw-30: rgba(0,139,179,0.3);
    --donker-blauw: rgba(27,84,128,1);
    --donker-blauw-80: rgba(27,84,128,0.8);
    --fel-blauw: rgba(20,164,199,1);
    --groen: rgba(6,214,125,1);
    --groen-30: rgba(6,214,125,0.3);
    --donker-grijs-80: rgba(100,122,122,0.8);
    --review-naam: 14px/24px 'Internacional-Light';
    --review-tekst: 19px/23px 'Internacional-Black';
    --quote: var(--review-tekst);
    --usp-onder-home: var(--review-naam);
    --dienst-naam-in-blok: 13px/16px 'Internacional-Black';
    --dienst-blok-tekst: 14px/24px 'Internacional-Light';
    --h1-groot: 62px/74px 'Abstract-Regular';
    --h1-groot-dik: 53px/64px 'Internacional-Black';
    --h1-klein: 44px/53px 'Abstract-Regular';
    --h1-klein-dik: 35px/42px 'Internacional-Black';
    --h2: 31px/37px 'Internacional-Black';
    --h3: 24px/normal 'Internacional-Black';
    --h4: 17px/normal 'Internacional-Black';
    --default-tekst-groot: 17px/30px 'Internacional-Light';
    --default-tekst-groot-dik: 17px/30px 'Internacional-Black';
    --default-tekst-klein: 14px/30px 'Internacional-Light';
    --footer-services: 14px/24px 'Internacional-Light';
    --topbar: 12px/normal 'Internacional-Light';
    --navigatie: 13px/normal 'Internacional-Black';
    --button-tekst: 13px/normal 'Internacional-Black';
    --subNavigatie-tekst: var(--button-tekst);
    --button-height: 50px;
    --wrapper-width: 1180px;
    --padding: 20px;
    --navBar-height: 50px;
    --slider-header-link: var(--review-naam);
    --foto-bijschrift: 14px/24px 'Internacional-LightIt';
    --header-titel: 30px/35px 'Abstract-Regular';
    --header-subtitel: 25px/30px 'Internacional-Black';
    --header-tekst: 15px/30px 'Internacional-Light';
    --header-link: 17px/20px 'Internacional-Light';
}

body {
    margin: 0;
    padding: 0;
    font: var(--default-tekst-groot);
    color: var(--donker-blauw);
}

strong {
    font-weight: normal;
    font-family: 'Internacional-Black';
}

h1, h2, h3, h4 {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

h1 {
    font: var(--h1-groot)
}

    h1 span {
        font: var(--h1-groot-dik)
    }

.volgpagina h1 {
    font: var(--h1-klein)
}

    .volgpagina h1 span {
        font: var(--h1-klein-dik)
    }

.introBlok h1 {
    margin: 0 0 50px;
}

h2 {
    font: var(--h2)
}

.dienstOverzicht .dienstItem .dienstItemTekst h2, .contentTekst h2 {
    font: var(--default-tekst-groot-dik);
}

.introBlok h2 {
    font: var(--h4);
}

.twoCol h2 {
    margin: 0 0 10px;
}

h3 {
    font: var(--h3)
}

h4 {
    font: var(--h4)
}

.wrapper {
    margin: 0 auto;
    width: var(--wrapper-width);
    display: flex;
    flex-wrap: wrap;
}

.btn {
    position: relative;
    display: inline-flex;
    align-content: center;
    align-items: center;
    padding: 0 25px;
    font: var(--button-tekst);
    height: var(--button-height);
    text-transform: uppercase;
    transition-property: all;
    margin: 0;
    text-decoration: none !important;
}

    .btn.lichtBlauw {
        background: var(--licht-blauw);
        color: var(--donker-blauw);
    }

        .btn.lichtBlauw:hover, .btn.lichtBlauw.active {
            background: var(--groen);
            color: #FFF;
        }

    .btn.blauw {
        background: var(--blauw);
        color: #FFF;
    }

        .btn.blauw:hover {
            background: var(--groen);
            color: #FFF;
        }

    .btn.groen {
        background: var(--groen);
        color: #FFF !important;
    }

        .btn.groen:hover {
            color: var(--groen) !important;
            background: #FFF;
        }

    .btn.wit {
        color: var(--blauw);
        background: #FFF;
    }

        .btn.wit:hover {
            color: #FFF;
            background: var(--blauw);
        }

    .btn.shadow {
        box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
    }

    .btn span {
        transition: none;
    }

    .btn.btnSocial {
        width: 50px;
        padding: 0;
        justify-content: center;
    }

.bgFelBlauw {
    background: var(--fel-blauw);
    color: #FFF;
}

.bgLichtBlauw {
    background: var(--licht-blauw);
}

.bgDonkerBlauw {
    background: var(--donker-blauw);
    color: #FFF;
}

.fotoBackground {
    background: url('/img/foto_background.jpg') no-repeat center center;
    background-size: cover;
}

header {
    position: relative;
}

    header .topBar {
        position: relative;
        width: 100%;
        height: 30px;
        font: var(--topbar);
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        padding: 0 var(--padding);
        background: var(--licht-blauw);
        box-sizing: border-box;
    }

        header .topBar .topMenu {
            margin-left: auto;
            text-align: right;
        }

        header .topBar a {
            color: var(--donker-blauw);
            transition-property: color;
            margin-left: 15px;
        }

            header .topBar a:hover, header .topBar a.active {
                color: var(--groen);
            }

    header .navContainer {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        height: var(--navBar-height);
        padding: var(--padding);
    }

        header .navContainer .logo, header .navContainer nav {
            height: 50px;
        }

            header .navContainer nav ul {
                list-style: none;
                display: flex;
                margin: 0;
                padding: 0;
                height: var(--navBar-height);
            }

                header .navContainer nav ul li {
                    margin: 0;
                }

                    header .navContainer nav ul li a {
                        display: inline-flex;
                        align-items: center;
                        align-content: center;
                        padding: 0 25px;
                        height: var(--navBar-height);
                        font: var(--navigatie);
                        color: var(--donker-blauw);
                        transition-property: color;
                        text-transform: uppercase;
                        border-right: 1px solid var(--blauw-30);
                    }

                    header .navContainer nav ul li:last-of-type a {
                        border: 0;
                    }

                    header .navContainer nav ul li a:hover {
                        color: var(--blauw);
                    }
                    header .navContainer nav ul li a.active {
                        color: var(--groen);
                    }
                    header .navContainer nav ul li .submenu {
                        position: absolute;
                        left: var(--padding);
                        top: calc(var(--navBar-height) + var(--padding));
                        border-top: var(--padding) solid #FFF;
                        background: var(--blauw);
                        width: calc(100% - var(--padding) - var(--padding));
                        padding: 90px 0;
                        z-index: 9999;
                        color: #FFF;
                        display: none;
                    }

                    header .navContainer nav ul li:hover .submenu {
                        display: block;
                    }

                    header .navContainer nav ul li .submenu .col4 {
                        padding-top: 45px;
                    }
                        header .navContainer nav ul li .submenu .col4 p{
                            margin:0;
                            display:inline;
                        }
                        header .navContainer nav ul li .submenu .col8 {
                            display: flex;
                            justify-content: flex-end;
                            margin-left: auto;
                        }

                        header .navContainer nav ul li .submenu .col8 .diensten {
                            display: flex;
                            justify-content: flex-start;
                            flex-wrap: wrap;
                            width: calc(4 * 170px);
                        }

                    header .navContainer nav ul li .submenu .closeMenu {
                        font-size: 7px;
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        bottom: 25px;
                        cursor: pointer;
                    }

        header .navContainer .alignRight {
            height: var(--navBar-height);
            margin-left: auto;
            display: flex;
        }

            header .navContainer .alignRight .btn {
                display: flex;
            }

                header .navContainer .alignRight .btn:first-of-type {
                    border-right: 1px solid var(--blauw-30);
                }

            header .navContainer .alignRight .award {
                position: relative;
                margin: -40px 50px 0 0;
            }

    header .fotoHeader {
        position: relative;
        width: 100%;
        height: 690px;
        display: flex !important;
        flex-wrap: wrap;
        padding: 0 var(--padding);
        box-sizing: border-box;
    }

    header.volgpagina .fotoHeader, header.contentPagina .fotoHeader {
        height: 500px;
    }

    header .fotoHeader .sfeerFoto {
        position: relative;
        width: calc(100% - (100% * 0.33));
        height: 100%;
        background-size: cover;
        background-position: center center;
    }

    header.contentPagina .fotoHeader .sfeerFoto {
        margin: 75px auto 0;
        width: var(--wrapper-width);
        height: calc(100% - 75px);
    }

    header.contentPagina .fotoHeader:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 280px;
        content: '';
        display: block;
        background: var(--blauw);
    }

    header .fotoHeader .dienstFoto {
        position: relative;
        width: calc(100% * 0.33);
        height: 100%;
        background: var(--blauw);
        background-size: cover;
        background-position: center center;
    }

    header.contentPagina .fotoHeader .dienstFoto {
        display: none;
    }

    header .headerInfo {
        position: absolute;
        bottom: -100px;
        right: calc(((100% - var(--wrapper-width)) / 2) - 60px);
        background: #FFF;
        box-shadow: 0px 0px 5.66px rgba(0, 0, 0, 0.2);
        filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000000');
        width: 500px;
        min-height: 350px;
        padding: 35px;
        box-sizing: border-box;

    }
    header .headerInfo.flex {
        display: flex;
        align-items: center;
    }
        header .headerInfo .headerTekst ul {
            list-style: none;
            padding: 0;
            margin: 20px 0 0;
        }

            header .headerInfo .headerTekst ul li:before {
                content: "\e918";
                display: inline-block;
                font-size: 15px;
                margin: 0 15px 0 0;
                color: var(--blauw);
            }

        header .headerInfo .dienstSoort {
            font: var(--header-titel);
            color: var(--blauw);
        }

        header .headerInfo .dienstHeaderTitel {
            font: var(--header-subtitel);
            color: var(--blauw);
        }

        header .headerInfo .headerTekst {
            font: var(--header-tekst);
        }

        header .headerInfo .headerButton {
            font: var(--header-link);
            color: var(--blauw);
            display: flex;
            align-content: center;
            align-items: center;
        }

            header .headerInfo .headerButton:hover {
                color: var(--groen);
            }

            header .headerInfo .headerButton.contact {
                margin-top: 30px;
            }

            header .headerInfo .headerButton span {
                font-size: 13px;
                margin: 0 0 0 20px;
            }

    header.contentPagina .headerInfo {
        display: none;
    }

    header .headerInfo .btn {
        margin: 15px 15px 0 0;
    }
    header .headerInfo .itemSliderHeaderContainer {
        text-align:center
    }

        header .headerInfo .itemSliderHeaderContainer.itemSliderContainer {
            margin: 0;
            height:100%;
        }
            header .headerInfo .itemSliderHeaderContainer.itemSliderContainer .itemSlider .itemSlide.active {
                width:auto;
            }
                header .headerInfo .itemSliderHeaderContainer.itemSliderContainer .itemSlider .itemSlide.active .itemSlideTekstContainer{
                    background:none;
                }
            header .headerInfo .itemSliderContainer .itemSlider .itemSlide, header .headerInfo .itemSliderContainer .itemSlider .itemSlide .sterContainer, header .headerInfo .itemSliderContainer .itemSlider .itemSlide .itemSlideTekstContainer, header .headerInfo .itemSliderHeaderContainer.itemSliderContainer .itemSlider .sterren, header .headerInfo .itemSliderHeaderContainer.itemSliderContainer .itemSlider .reviewer {
                display: block;
                width: 100%;
                margin: 0;
                padding: 0;
                border: 0;
            }
                header .headerInfo .itemSliderContainer .itemSlider .itemSlide .itemSlideTekstContainer strong{
                    font-size:20px;
                    padding:0 20px;
                }
                header .headerInfo .itemSliderContainer ul {
                    list-style: none;
                    display: flex;
                    justify-content: center;
                    width: 100%;
                    margin: 40px 0;
                    padding: 0;
                }
        header .headerInfo .itemSliderContainer ul button{
            display:none;
        }
        header .headerInfo .itemSliderContainer ul li {
            margin: 0 2px;
            padding: 0;
            width: 25px;
            height: 2px;
            background: var(--licht-blauw);
        }
                    header .headerInfo .itemSliderContainer ul li:hover {
                        background: var(--groen-30);
                    }
                        header .headerInfo .itemSliderContainer ul li.slick-active {
                background: var(--donker-blauw);
            }
            .uspBar {
            position: relative;
            width: 100%;
        }
header .headerInfo .prevSlide, header .headerInfo .nextSlide {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    font-size:30px;
    height:30px;
    color:var(--donker-blauw);
    cursor:pointer;
}
    header .headerInfo .prevSlide:hover, header .headerInfo .nextSlide:hover {
        color:var(--groen);
    }
    header .headerInfo .prevSlide {
    left: -20px;
}
header .headerInfo .nextSlide {
    right:-20px;
}
    .uspBar .wrapper {
    align-content: center;
    align-items: center;
    height: 100px;
}

    .uspBar .usp {
        margin: 0 45px 0 0;
        font: var(--usp-onder-home);
        display: flex;
        align-content: center;
        align-items: center;
    }

        .uspBar .usp span {
            font-size: 30px;
            margin: 0 15px 0 0;
            color: var(--blauw);
        }

.dienstenSliderContainer {
    position: relative;
    margin: 100px 0 0;
}

    .dienstenSliderContainer .dienstCategorie {
        position: relative;
        font: var(--h4);
        text-transform: uppercase;
        color: var(--blauw);
        margin: 0 20px 40px 0;
        cursor: pointer;
        transition-property: color;
    }

        .dienstenSliderContainer .dienstCategorie:hover {
            color: var(--groen);
        }

        .dienstenSliderContainer .dienstCategorie:after, .itemSliderContainer .itemSliderHeader h4:after, .formulier .typeContactContainer .typeContact:after {
            position: absolute;
            display: block;
            content: '';
            bottom: -3px;
            height: 1px;
            width: 50px;
            background-color: transparent;
            transition-property: background-color;
        }

        .dienstenSliderContainer .dienstCategorie.active {
            color: var(--donker-blauw);
        }

            .dienstenSliderContainer .dienstCategorie.active:after, .itemSliderContainer .itemSliderHeader h4:after {
                background-color: var(--donker-blauw);
            }

    .dienstenSliderContainer .dienstenSliderWrapper {
        position: relative;
        width: calc(100% - ((100% - var(--wrapper-width)) / 2));
        margin: 0 0 0 calc((100% - var(--wrapper-width)) / 2);
        height: 270px;
        display: flex;
        flex-wrap: wrap;
    }


        .dienstenSliderContainer .dienstenSliderWrapper .dienstSlider {
            width: calc(100% - 270px);
        }

        .dienstenSliderContainer .dienstenSliderWrapper .dienstCategorieIntro, .dienstenSliderContainer .dienstenSliderWrapper .dienstSlide, .dienstOverzicht .dienstItem .dienstItemFoto .dienstItemIcon, header .navContainer nav ul li .submenu .dienst, .dienstOverzichtSlide {
            height: 270px;
            width: 270px;
            background: var(--licht-blauw);
            padding: 30px;
            box-sizing: border-box;
            font: var(--dienst-blok-tekst);
            border-right: 1px solid #FFF;
        }

.dienstOverzichtSlide {
    border-bottom: 1px solid #FFF;
}

.dienstenSliderContainer .dienstenSliderWrapper .dienstSlide, .dienstOverzicht .dienstItem .dienstItemFoto .dienstItemIcon, header .navContainer nav ul li .submenu .dienst, .dienstOverzichtSlide {
    font: var(--dienst-naam-in-blok);
    color: var(--blauw);
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-transform: uppercase;
    cursor: pointer;
}

header .navContainer nav ul li .submenu .dienst {
    width: 170px;
    height: 170px;
    border-color: var(--blauw);
    border-bottom: 1px solid var(--blauw);
    font: var(--button-tekst);
    text-align: center;
}

    .dienstenSliderContainer .dienstenSliderWrapper .dienstSlide span, .dienstOverzicht .dienstItem .dienstItemFoto .dienstItemIcon span, header .navContainer nav ul li .submenu .dienst span, .dienstOverzichtSlide span {
        color: var(--donker-blauw);
        font-size: 75px;
        margin: 0 0 50px;
    }

    header .navContainer nav ul li .submenu .dienst span {
        font-size: 80px;
        margin: 0 0 20px;
    }

.dienstenSliderContainer .dienstenSliderWrapper .dienstSlide:hover, .dienstOverzicht .dienstItem .dienstItemFoto .dienstItemIcon:hover, .dienstOverzichtSlide:hover, header .navContainer nav ul li .submenu .dienst:hover {
    background: var(--groen);
    color: #FFF;
}

    .dienstenSliderContainer .dienstenSliderWrapper .dienstSlide:hover span, .dienstOverzichtSlide:hover span, header .navContainer nav ul li .submenu .dienst:hover span {
        color: #FFF;
    }

.introBlok {
    position: relative;
    margin: 90px 0 100px;
}

    .introBlok.volgpagina {
        margin: 90px 0 70px;
    }

    .introBlok .col5, .introBlok .col7 {
        padding: 0 0 0 calc((100% / 12) * 1);
    }

        .introBlok .col7 p, .content .contentTekst {
            margin: 0;
        }

.overOnsPromo .introBlok {
    padding: 90px 0 0;
    margin: 0;
    color: #FFF;
}

.introBlok .wrapper, .content .wrapper {
    flex-direction: column;
}

.content .wrapper {
    flex-direction: row;
}

.content {
    margin: 0 0 135px;
}
    .content.berichtDetail {
        margin: 75px 0 135px;
    }
    .content .contentTekst img {
        width: 100%;
        display: block;
    }

    .content .contentTekst .fotoBijschrift {
        position: relative;
        width: 100%;
        background: var(--licht-blauw);
        padding: 15px;
        box-sizing: border-box;
        font: var(--foto-bijschrift);
        min-height: 90px;
        margin: 0 0 60px;
    }

    .content .subNavigatie {
        padding: 0 0 0 calc((100% / 12) * 1);
    }

    .content .contentTekst, .contentBlokkenContainer .col7 {
        padding: 0 calc((100% / 12) * 1) 0 0;
    }
    .content .col7.formulier {
        background: var(--licht-blauw);
        padding:30px 30px 35px;
    }
        .overOnsPromo .content {
            padding: 0 0 135px;
            margin: 0;
            color: #FFF;
        }

.content .subNavigatie ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--donker-blauw);
}

.overOnsPromo .content .subNavigatie ul {
    border-color: #FFF;
}

.content .subNavigatie ul li {
    padding: 0 0 0 10px;
}

.content .subNavigatie ul a {
    color: var(--fel-blauw);
    font: var(--subNavigatie-tekst);
    transition-property: color;
    text-transform: uppercase;
}

.overOnsPromo .content .subNavigatie ul a {
    color: var(--ultra-licht-blauw);
}

.content .subNavigatie ul a.active {
    color: var(--donker-blauw);
}

.overOnsPromo .content .subNavigatie ul a.active {
    color: #FFF;
}

.content .subNavigatie ul a:hover, .content .btnContainer a:hover, .content .btnContainer a {
    color: var(--groen);
}

.content .btnContainer, .twoCol .tekstCol .btnContainer {
    position: relative;
    margin: 40px 0 0;
    width: 100%;
    text-align: right;
}

    .content .btnContainer a {
        color: var(--donker-blauw);
        transition-property: color;
    }

    .content .btnContainer.opdrachtAanmelden, .vacature .btnContainer.solliciteerDirect, .headerInfo .btnContainer.opdrachtAanmelden {
        text-align: left;
        display: flex;
    }

.vacature .btnContainer.solliciteerDirect, .headerInfo .btnContainer.opdrachtAanmelden {
    margin: 40px 0 0;
}

    .content .btnContainer.opdrachtAanmelden .opmerking, .vacature .btnContainer.solliciteerDirect .opmerking, .headerInfo .btnContainer.opdrachtAanmelden .opmerking {
        display: flex;
        align-content: center;
        align-items: center;
        margin: 0 20px;
        font-size: 11px;
        line-height: 15px;
    }

    .vacature .btnContainer.solliciteerDirect .opmerking {
        font: var(--default-tekst-groot-dik);
        margin: 0;
    }

.overOnsPromo .content .btnContainer a {
    color: #FFF;
}

.vacature .btnContainer.solliciteerDirect a {
    margin: 0 25px;
}

.content .btnContainer a:hover {
    color: var(--groen);
}

.content .btnContainer a span {
    font-size: 13px;
    margin: 0 0 0 10px;
    transition: none;
}

.twoCol {
    position: relative;
    width: 100%;
    padding: 0 var(--padding);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    font: var(--default-tekst-klein);
}

    .twoCol .fotoCol {
        background-size: cover;
        background-position: center center;
    }

    .twoCol .tekstCol {
        padding: 150px 145px 130px 130px;
        box-sizing: border-box;
    }

    .twoCol.lessPadding .tekstCol {
        padding: 90px 145px 130px 130px;
    }

    .twoCol .formCol {
        padding: 80px 90px 90px 130px;
        box-sizing: border-box;
    }

    .twoCol .tekstCol .btnContainer {
        text-align: left;
    }

    .twoCol .tekstCol ul {
        list-style-type: none;
        padding: 0;
        margin: 50px 0 0;
    }

        .twoCol .tekstCol ul li {
            position: relative;
            display: flex;
            align-content: center;
            align-items: center;
        }

            .twoCol .tekstCol ul li:before {
                content: "\e918";
                display: inline-block;
                font-size: 15px;
                margin: 0 15px 0 0;
            }

    .twoCol.lessPadding .tekstCol a {
        display: inline-flex;
        align-content: center;
        align-items: center;
        color: #FFF;
    }

        .twoCol.lessPadding .tekstCol a span {
            font-size: 10px;
            margin: 0 0 0 10px;
            transition: none;
        }

.itemSliderContainer {
    position: relative;
    width: 100%;
    margin: 120px 0 135px;
    box-sizing: border-box;
    font: var(--default-tekst-klein);
}

    .itemSliderContainer .itemSliderHeader {
        display: flex;
        align-content: flex-end;
        align-items: flex-end;
        margin: 0 0 45px;
        padding-left: calc((100% - var(--wrapper-width)) / 2);
    }

        .itemSliderContainer .itemSliderHeader h4 {
            position: relative;
            text-transform: uppercase;
        }

        .itemSliderContainer .itemSliderHeader a {
            font: var(--slider-header-link);
            color: var(--donker-blauw);
            display: flex;
            align-content: center;
            align-items: center;
            margin: 0 0 0 40px;
        }

            .itemSliderContainer .itemSliderHeader a span {
                font-size: 10px;
                margin: 0 0 0 10px;
                transition: none;
            }


            .itemSliderContainer .itemSliderHeader a:hover {
                color: var(--groen);
            }

    .itemSliderContainer .itemSlider {
        position: relative;
        padding-left: calc((100% - var(--wrapper-width)) / 2);
        margin: 0 0 40px;
    }

        .itemSliderContainer .itemSlider .itemSlide {
            width: 260px;
            transition-property: all;
            cursor: pointer;
            border-right: 1px solid #FFF;
        }

    .itemSliderContainer .slick-track {
        transition-delay: 0.3s !important;
    }

    .itemSliderContainer .itemSlider .itemSlide.active {
        width: 540px;
    }

    .itemSliderContainer .itemSlider .itemSlide .itemSlideFoto {
        height: 260px;
        width: 100%;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: rgba(218, 242, 242, 1);
        background-blend-mode: luminosity;
        transition-property: all;
    }

        .itemSliderContainer .itemSlider .itemSlide .itemSlideFoto.caseFoto {
            height: 340px;
            display: flex;
            align-content: flex-end;
            align-items: flex-end;
        }

        .itemSliderContainer .itemSlider .itemSlide .itemSlideFoto .caseLogo {
            background: var(--donker-grijs-80);
            padding: 15px;
            width: calc((var(--wrapper-width) / 12) * 2);
            height: calc((var(--wrapper-width) / 12) * 2);
        }

            .itemSliderContainer .itemSlider .itemSlide .itemSlideFoto .caseLogo img {
                object-fit: contain;
                object-position: center center;
                height: 100%;
                width: 100%;
            }

    .itemSliderContainer .itemSlider .itemSlide.active .itemSlideFoto .caseLogo {
        background: var(--donker-blauw-80);
    }

    .itemSliderContainer .itemSlider .itemSlide.active .itemSlideFoto {
        background-blend-mode: normal;
    }

    .itemSliderContainer .itemSlider .itemSlide .itemSlideTekstContainer {
        position: relative;
        background: #FFF;
        box-sizing: border-box;
        padding: 25px 20px 40px;
    }

    .itemSliderContainer .itemSlider .itemSlide.active .itemSlideTekstContainer {
        background: var(--licht-blauw);
        padding: 25px 15px 70px;
    }

    .itemSliderContainer .itemSlider .itemSlide .itemSlideTekstLoading {
        position: absolute;
        background: transparent;
        width: calc(100% - 30px);
    }

        .itemSliderContainer .itemSlider .itemSlide .itemSlideTekstLoading .itemSlideTekstLoadingRule {
            height: 10px;
            border-radius: 5px;
            background: var(--licht-blauw);
            margin: 0 0 10px;
        }

    .itemSliderContainer .itemSlider .itemSlide.active .itemSlideTekstLoading .itemSlideTekstLoadingRule {
        background: transparent;
    }

    .itemSliderContainer .itemSlider .itemSlide .itemSubTitel {
        font-size: 13px;
        font: var(--button-tekst);
        display: block;
        color: var(--fel-blauw);
    }

    .itemSliderContainer .itemSlider .itemSlide .tekstContainer {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        opacity: 0;
    }

    .itemSliderContainer .itemSlider .itemSlide.active .tekstContainer {
        opacity: 1;
    }

    .itemSliderContainer .itemSlider .itemSlide .btnContainer {
        position: absolute;
        bottom: 25px;
        right: 40px;
        display: none;
        width: calc(100% - 40px);
        text-align: right;
    }

        .itemSliderContainer .itemSlider .itemSlide .btnContainer a, .contactGegevensItem a, .footerNavigatie a {
            color: var(--donker-blauw);
            display: inline-flex;
            align-content: center;
            align-items: center;
        }

    .itemSliderContainer .itemSlider .itemSlide.active .btnContainer {
        display: block;
    }

    .itemSliderContainer .itemSlider .itemSlide .btnContainer a span, .contactGegevensItem a span, .footerNavigatie a span {
        font-size: 10px;
        margin: 0 0 0 10px;
        transition: none;
    }

    .itemSliderContainer .itemSlider .itemSlide .btnContainer a:hover {
        color: var(--groen);
    }

    .itemSliderContainer .itemSlider .itemSlide .sterContainer {
        margin: 10px 0 0;
    }

    .itemSliderContainer .itemSlider .itemSlide.active .sterContainer {
        margin: 40px 0 0;
        display: flex;
        flex-wrap: wrap;
    }

    .itemSliderContainer .itemSlider .itemSlide .sterContainer .sterren {
        color: var(--groen);
    }

        .itemSliderContainer .itemSlider .itemSlide .sterContainer .sterren .leeg {
            color: var(--licht-blauw);
        }

    .itemSliderContainer .itemSlider .itemSlide .sterContainer .reviewer {
        display: none;
    }

    .itemSliderContainer .itemSlider .itemSlide.active .sterContainer .reviewer {
        display: inline-block;
    }

.itemSliderControls {
    font-size: 30px;
}

    .itemSliderControls div {
        margin-right: 10px;
        color: var(--donker-blauw);
        cursor: pointer;
    }

        .itemSliderControls div:hover {
            color: var(--groen)
        }

.contactBar {
    position: relative;
    padding: 150px 0 130px;
}

    .contactBar .wrapper {
        justify-content: center;
        align-items: center;
    }

    .contactBar .btn {
        margin: 0 10px;
    }

    .contactBar img {
        height: 40px;
        margin: 0 20px 0 0;
    }

.contactGegevens {
    position: relative;
    padding: 110px 0 40px;
    font: var(--footer-services);
}

    .contactGegevens .col4 {
        padding: 0 0 0 calc((var(--wrapper-width) / 12) * 1);
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .contactGegevens .contactGegevensItem .contactGegevensItemHeader {
        font: var(--h4);
        text-transform: uppercase;
        color: var(--blauw);
        margin: 0 0 35px;
        border-bottom: 1px solid var(--blauw);
        padding: 0 0 5px;
    }

    .contactGegevens .contactGegevensItem {
        display: flex;
        flex-wrap: wrap;
        margin: 0 0 50px;
    }

        .contactGegevens .contactGegevensItem.alignBottom {
            margin-top: auto;
        }

        .contactGegevens .contactGegevensItem strong, .footerNavigatie strong {
            text-transform: uppercase;
            margin: 0 0 10px;
            display: inline-block;
        }

.footerNavigatie {
    position: relative;
    padding: 40px 0 60px;
    font: var(--footer-services);
}

    .footerNavigatie strong {
        font-size: 11px;
    }

    .footerNavigatie .footerSpacer {
        height: 70px;
    }

    .footerNavigatie img {
        width: 150px;
    }

.bottomBar {
    position: relative;
    height: 50px;
    margin: 0 var(--padding) var(--padding);
    width: calc(100% - (var(--padding) * 2));
}

    .bottomBar .wrapper {
        align-content: center;
        align-items: center;
        height: 100%;
        font-size: 12px;
    }

    .bottomBar .btnUp {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        padding: 0;
        width: 50px;
        justify-content: center;
        font-size: 10px;
    }

    .bottomBar .wrapper .sep {
        margin: 0 15px;
    }

    .bottomBar .wrapper a {
        color: var(--donker-blauw);
        transition-property: color;
    }

        .bottomBar .wrapper a:hover {
            color: var(--groen);
        }

.col12.spacer {
    height: 135px;
}

.dienstOverzicht {
    position: relative;
    width: calc(100% - (var(--padding)*2));
    margin: 0 auto;
}

    .dienstOverzicht .dienstItem {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        padding-left: calc((100% - var(--wrapper-width)) / 2);
        box-sizing: border-box;
        width: 100%;
        height: 690px;
        margin: 0 0 135px;
    }

        .dienstOverzicht .dienstItem:nth-child(even) {
            padding-left: 0;
            padding-right: calc((100% - var(--wrapper-width)) / 2);
        }

        .dienstOverzicht .dienstItem .dienstItemTekst {
            position: relative;
            width: calc(((var(--wrapper-width) / 12) * 5));
            padding: 0 30px 0 0;
            box-sizing: border-box;
            margin-top: auto;
        }

        .dienstOverzicht .dienstItem:nth-child(even) .dienstItemTekst {
            padding: 0 0 0 30px;
            order: 1;
        }

        .dienstOverzicht .dienstItem .dienstItemTekst .btnContainer {
            margin: 60px 0 0;
        }

        .dienstOverzicht .dienstItem:nth-child(even) .btnContainer {
            text-align: right;
        }

        .dienstOverzicht .dienstItem .dienstItemFoto {
            position: relative;
            width: calc(100% - ((var(--wrapper-width) / 12) * 5));
            background-size: cover;
            background-repeat: no-repeat;
        }

            .dienstOverzicht .dienstItem .dienstItemFoto .dienstItemIcon {
                border: 0;
                transform: translateX(-50%);
            }

        .dienstOverzicht .dienstItem:nth-child(even) .dienstItemFoto .dienstItemIcon {
            position: absolute;
            right: 0;
            transform: translateX(50%);
        }

.formulier {
    position: relative;
    margin: 70px 0 0;
    display: flex;
    flex-wrap: wrap;
}

    .formulier label {
        width: 200px;
        padding: 0 10px 0 0;
        margin: 0 0 10px;
        font: var(--default-tekst-klein);
        height: 50px;
        line-height: 50px;
        box-sizing: border-box;
    }
        .formulier label .icon-info {
            position: relative;
            cursor: pointer;
        }
        .formulier label .tooltiptext {
            position: absolute;
            background: var(--fel-blauw);
            padding: 20px;
            top: 5px;
            z-index: 999;
            margin-left: 5px;
            color: #FFF;
            font: var(--review-naam);
            display: none;
            width:270px;
        }
            .formulier label .icon-info:hover .tooltiptext{
                display:inline-block;
            }
            .formulier .box {
                position: relative;
                width: calc(100% - 200px);
                box-sizing: border-box;
                display: block;
                background-color: #FFF;
                font: var(--default-tekst-klein);
                color:var(--donker-blauw);
                height: 50px;
                line-height: 50px;
                border: 0;
                margin: 0 0 10px;
                padding:0 20px;
            }

    .formulier textarea.box {
        height: 140px;
    }

    .formulier label.checkBoxContainer {
        position: relative;
        width: auto;
        margin: 20px 0 20px 200px;
        height: auto;
        line-height: normal;
        padding: 0 0 0 30px;
    }

    .formulier a {
        text-decoration: underline;
        color: var(--donker-blauw);
    }

        .formulier a:hover {
            color: var(--groen);
        }

    .formulier .btnContainer {
        position: relative;
        text-align: right;
        width: 100%;
    }

    .formulier .typeContactContainer {
        padding: 0 0 0 200px;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        margin: 0 0 45px;
        font: var(--button-tekst);
        color: var(--fel-blauw);
        text-transform: uppercase;
    }

        .formulier .typeContactContainer .typeContact {
            position: relative;
            margin: 0 20px 0 0;
            cursor: pointer;
        }

            .formulier .typeContactContainer .typeContact:hover {
                color: var(--groen);
            }

            .formulier .typeContactContainer .typeContact.active {
                color: var(--donker-blauw);
            }

            .formulier .typeContactContainer .typeContact:after {
                width: 20px;
            }

            .formulier .typeContactContainer .typeContact.active:after {
                background: var(--donker-blauw)
            }

.twoCol .formulierUitspraak {
    padding: 60px 25px 60px 60px;
    box-sizing: border-box;
    font: var(--h1-groot-dik);
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

    .twoCol .formulierUitspraak .dienstThumb {
        position: relative;
        width: 250px;
        height: 250px;
        background: #FFF;
        border-radius: 100%;
        background-size: cover;
        background-position: center;
    }

    .twoCol .formulierUitspraak .formulierUitspraakTekst {
        width: calc(100% - 250px);
        padding: 35px 35px 0;
        box-sizing: border-box;
    }

        .twoCol .formulierUitspraak .formulierUitspraakTekst span {
            font: var(--h1-groot);
        }

.contentBlokkenContainer .wrapper {
    justify-content: flex-end;
    margin-bottom: 150px;
}

.contentBlokkenContainer .contentBlokken {
    list-style-type: none;
    padding: 0 0 0 0;
    margin-top: 0;
    border-bottom: 1px var(--blauw) solid;
}

    .contentBlokkenContainer .contentBlokken li {
        position: relative;
    }

        .contentBlokkenContainer .contentBlokken li.contentBlokTitel span {
            font-size: 14px;
            margin: 0 0 0 10px;
        }

        .contentBlokkenContainer .contentBlokken li.contentBlokTitel.activeTitel span {
            display: none;
        }

        .contentBlokkenContainer .contentBlokken li.contentBlokTitel.activeTitel.vacature span {
            display: block;
            transform: rotate(90deg);
        }

        .contentBlokkenContainer .contentBlokken li.contentBlokTitel.activeTitel {
            color: var(--donker-blauw) !important;
            padding-bottom: 0;
        }

        .contentBlokkenContainer .contentBlokken li.contentBlokTitel {
            padding: 25px 0 25px 0;
            border-top: 1px var(--blauw) solid;
            cursor: pointer;
            display: flex;
            align-content: center;
            align-items: center;
            transition-property: color;
            z-index: 1;
        }

            .contentBlokkenContainer .contentBlokken li.contentBlokTitel.vacature, .contentBlokkenContainer .contentBlokken li.contentBlokTekstContainer.vacature {
                padding-left: 25px;
                padding-right: 25px;
                transform: none;
            }

                .contentBlokkenContainer .contentBlokken li.contentBlokTitel.vacature.activeTitel, .contentBlokkenContainer .contentBlokken li.contentBlokTekstContainer.vacature.active {
                    background: var(--licht-blauw);
                }

            .contentBlokkenContainer .contentBlokken li.contentBlokTitel:hover {
                color: var(--groen);
            }

            .contentBlokkenContainer .contentBlokken li.contentBlokTitel h4 {
                text-transform: uppercase;
            }

            .contentBlokkenContainer .contentBlokken li.contentBlokTitel.hasImage {
                margin: 25px 0 0 0;
                padding: 25px 0 0 200px;
                box-sizing: border-box;
            }
                .contentBlokkenContainer .contentBlokken li.contentBlokTitel.hasImage.last {
                    padding: 25px 0 25px 200px;
                }
                .contentBlokkenContainer .contentBlokken li.contentBlokTekstContainer {
            max-height: 0;
            overflow: hidden;
            transition-property: max-height;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            align-items: flex-start;
            transform: translateY(-25px);
        }

            .contentBlokkenContainer .contentBlokken li.contentBlokTekstContainer.showIntro:after {
                position: absolute;
                bottom: 0;
                left: 200px;
                background: #FF0000;
                width: calc(100% - 200px);
                height: 100px;
                content: "\e910";
                display: flex;
                align-items: flex-end;
                justify-content: center;
                background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
                font-size: 6px;
                cursor: pointer;
                color: var(--donker-blauw);
                transition-property: color;
            }

            .contentBlokkenContainer .contentBlokken li.contentBlokTekstContainer .contentBlokTekst {
                width: 100%;
                padding: 30px 0 50px;
            }

                .contentBlokkenContainer .contentBlokken li.contentBlokTekstContainer .contentBlokTekst.vacature {
                    padding-top: 0;
                }

            .contentBlokkenContainer .contentBlokken li.contentBlokTekstContainer.hasImage .contentBlokTekst {
                width: calc(100% - 200px);
            }



            .contentBlokkenContainer .contentBlokken li.contentBlokTekstContainer .contentBlokTekst .btnClose {
                display: block;
                width: 100%;
                text-align: center;
                margin: 20px 0 0;
                font-size: 6px;
                cursor: pointer;
                transition-property: color;
            }

            .contentBlokkenContainer .contentBlokken li.contentBlokTekstContainer.vacature .contentBlokTekst .btnClose {
                display: none;
            }

            .contentBlokkenContainer .contentBlokken li.contentBlokTekstContainer .contentBlokTekst .btnClose:hover, .contentBlokkenContainer .contentBlokken li.contentBlokTekstContainer.showIntro:hover:after {
                color: var(--groen);
            }

            .contentBlokkenContainer .contentBlokken li.contentBlokTekstContainer.active {
                max-height: 1200px !important;
            }

                .contentBlokkenContainer .contentBlokken li.contentBlokTekstContainer.active.showIntro:after {
                    display: none;
                }

            .contentBlokkenContainer .contentBlokken li.contentBlokTekstContainer img {
                width: 170px;
                margin: 0 30px 0 0;
            }
.berichtOverzicht{
    position:relative;
}
    .berichtOverzicht .wrapper{
        box-sizing:border-box;
        padding:0 var(--padding);
    }
    .berichtOverzicht .bericht {
        padding: 0 15px 80px;
        box-sizing: border-box;
        font: var(--header-tekst);
    }
        .berichtOverzicht .bericht:hover .foto{
            opacity:0.7;
        }
        .berichtOverzicht .bericht .foto {
            width: 100%;
            height: 260px;
            background-color: rgba(218, 242, 242, 1);
            background-blend-mode: luminosity;
            transition-property: all;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            margin: 0 0 30px 0;
            transition:ease-in-out opacity 0.3s;
        }
    .berichtOverzicht .bericht .buttonContainer{
        width:100%;
        text-align:right;
        margin:30px 0 0;
    }
        .berichtOverzicht .bericht .buttonContainer a{
            color:var(--donker-blauw);
            display:inline-flex;
            align-content:center;
            align-items:center;
        }
            .berichtOverzicht .bericht .buttonContainer a:hover, .berichtOverzicht .bericht .buttonContainer a:hover span {
                color: var(--groen);
            }
            .berichtOverzicht .bericht .buttonContainer a span {
                font-size: 10px;
                margin: 0 0 0 10px;
            }