/*
	Theme Name: Krabbenbos Theme
	Author: Bart Merkus
	Author URI: https://www.bartmerkus.nl/
	Description: Een maatwerk Wordpress Thema voor Krabbenbos Leidekkersbedrijf.
	Version: 1.0
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Text Domain: kbl-theme
*/
@font-face {
    font-family: "Geologica";
    src: url("fonts/Geologica-VariableFont.ttf") format("truetype");
}
/*-------------------- VARIABLEN */
:root {
    --kleur-blauw-donker: #005b8d;
    --kleur-blauw-licht: #d5e7ed;
    --kleur-tekst-licht: #fff;
    --kleur-tekst-donker: #030303;
    --kleur-wit: #fff;
    --kleur-grijs: #f0f0f0;
    --header-font: "Geologica";
    --body-font: "Geologica";
    --font-size-hero-home: 70px;
    --font-size-hero-text: 22px;
    --font-size-large: 38px;
    --font-size-big: 26px;
    --font-size-nav: 20px;
    --font-size-button: 20px;
    --font-size-footer: 20px;
    --font-size-body-text: 16px;
    --font-size-tiny: 12px;
    --font-size-mobile-hero: 40px;
    --font-size-mobile-header: 30px;
    --font-weight-bold: 700;
    --font-weight-semi-bold: 600;
    --font-weight-regular: 400;
    --font-weight-light: 300;
    --font-weight-extra-light: 200;
    --line-height-hero-home-header: 90px;
    --line-height-mobile-hero: 50px;
    --line-height-hero-home-text: 40px;
    --line-height-large: 50px;
    --line-height-big: 34px;
    --line-height-body-text: 24px;
}

.mobileNavSwitch {
    display: none;
}

/*-------------------- ALGEMEEN */
* {
    font-family: var(--body-font);
    font-size: var(--font-size-body-text);
    color: var(--kleur-tekst-donker);
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.logged-in .headerFullWidth {
    top: 32px;
}

h1 {
    font-size: var(--font-size-large);
    line-height: var(--line-height-large);
    font-weight: var(--font-weight-bold);
    margin-bottom: 20px;
}

h2 {
    font-size: var(--font-size-large);
    line-height: var(--line-height-large);
    font-weight: var(--font-weight-bold);
    margin-bottom: 20px;
}

h3 {
    margin-bottom: 20px;
}

p {
    font-weight: var(--font-weight-extra-light);
    line-height: var(--line-height-body-text);
    margin-bottom: 20px;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
    margin-bottom: 20px;
}
table td {
    font-weight: var(--font-weight-extra-light);
}

ul {
    padding-left: 20px;
}
ul li {
    font-weight: var(--font-weight-extra-light);
    line-height: var(--line-height-body-text);
    margin-bottom: 5px;
}

.fullWidthContainer {
    width: 100%;
    padding: 100px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.contentFullWidth {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.normalContainer {
    position: relative;
    width: 100%;
    max-width: 1260px;
    padding: 0 20px;
    z-index: 2;
}

.kolomContainer {
    display: grid;
    grid-gap: 100px;
}

.kolom-1-1 {
    grid-template-columns: 1fr 1fr;
}

.kolom-1-1-1 {
    grid-template-columns: 1fr 1fr 1fr;
}

.kolom-1-1-2 {
    grid-template-columns: 1fr 1fr 2fr;
}

.kolom-1-1-1-1 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.kolom-1-3 {
    grid-template-columns: 1fr 3fr;
}

.kolom-2-1 {
    grid-template-columns: 2fr 1fr;
}

.button {
    display: inline-block;
    -ms-flex-item-align: baseline;
    align-self: baseline;
    position: relative;
    height: 56px;
    padding: 12px 50px 12px 20px;
    text-decoration: none;
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-light);
    margin-right: 20px;
}
.button:last-child {
    margin-right: 0;
}
.button.buttonLightBlue {
    background-color: var(--kleur-blauw-licht);
    color: var(--kleur-blauw-donker);
    border: 2px solid var(--kleur-blauw-licht);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.button.buttonLightBlue::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 16px;
    right: 15px;
    background-image: url(img/arrow-right-dark-blue.svg);
    background-size: cover;
    background-position: center;
}
.button.buttonLightBlue:hover {
    background-color: var(--kleur-blauw-donker);
    color: var(--kleur-blauw-licht);
    border: 2px solid var(--kleur-blauw-donker);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.button.buttonLightBlue:hover::after {
    background-image: url(img/arrow-right-light-blue.svg);
}
.button.buttonTransparentWhite {
    background-color: transparent;
    color: var(--kleur-blauw-licht);
    border: 2px solid var(--kleur-blauw-licht);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.button.buttonTransparentWhite::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 16px;
    right: 15px;
    background-image: url(img/arrow-right-light-blue.svg);
    background-size: cover;
    background-position: center;
}
.button.buttonTransparentWhite:hover {
    background-color: var(--kleur-blauw-licht);
    color: var(--kleur-blauw-donker);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.button.buttonTransparentWhite:hover::after {
    background-image: url(img/arrow-right-dark-blue.svg);
}
.button.buttonDarkBlue {
    background-color: var(--kleur-blauw-donker);
    color: var(--kleur-blauw-licht);
    border: 2px solid var(--kleur-blauw-donker);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.button.buttonDarkBlue::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 16px;
    right: 15px;
    background-image: url(img/arrow-right-light-blue.svg);
    background-size: cover;
    background-position: center;
}
.button.buttonDarkBlue:hover {
    background-color: var(--kleur-blauw-licht);
    color: var(--kleur-blauw-donker);
    border: 2px solid var(--kleur-blauw-licht);
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.button.buttonDarkBlue:hover::after {
    background-image: url(img/arrow-right-dark-blue.svg);
}

.buttonMogelijkhedenMail::after {
    content: "";
    top: 18px !important;
    width: 20px !important;
    height: 16px !important;
    background-image: url(img/icon-mail-light-blue.svg) !important;
}
.buttonMogelijkhedenMail:hover::after {
    background-image: url(img/icon-mail-dark-blue.svg) !important;
}

.textWhite {
    color: var(--kleur-tekst-licht);
}

.textDarkBlue {
    color: var(--kleur-blauw-donker);
}

.headerFullWidth {
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px 0;
    background-color: transparent;
    height: 150px;
    z-index: 999;
    -webkit-transition: 0.7s;
    transition: 0.7s;
}
.headerFullWidth .headerContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.headerFullWidth .headerContainer .headerContainerLeft .headerLogo {
    max-width: 240px;
}
.headerFullWidth .headerContainer .headerContainerRight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.headerFullWidth .headerContainer .headerContainerRight .menu-hoofdmenu-container ul {
    list-style-type: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.headerFullWidth .headerContainer .headerContainerRight .menu-hoofdmenu-container ul li {
    position: relative;
    overflow: hidden;
    margin: 0 20px;
}
.headerFullWidth .headerContainer .headerContainerRight .menu-hoofdmenu-container ul li:first-child {
    margin-left: 0;
}
.headerFullWidth .headerContainer .headerContainerRight .menu-hoofdmenu-container ul li:last-child {
    margin-right: 0;
}
.headerFullWidth .headerContainer .headerContainerRight .menu-hoofdmenu-container ul li a {
    color: var(--kleur-tekst-licht);
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-extra-light);
    line-height: 40px;
    text-decoration: none;
}
.headerFullWidth .headerContainer .headerContainerRight .menu-hoofdmenu-container ul li.current-menu-item a {
    font-weight: var(--font-weight-bold);
}
.headerFullWidth .headerContainer .headerContainerRight .menu-hoofdmenu-container ul li::before {
    content: "";
    position: absolute;
    left: -100%;
    bottom: 0;
    height: 5px;
    width: 100%;
    background-color: var(--kleur-blauw-licht);
    -webkit-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}
.headerFullWidth .headerContainer .headerContainerRight .menu-hoofdmenu-container ul li:hover::before {
    left: 0;
    -webkit-transition: 0.5s ease-out;
    transition: 0.5s ease-out;
}

.headerFullWidthScrollDown {
    top: -150px !important;
    -webkit-transition: 0.7s;
    transition: 0.7s;
}

.headerFullWidthScrollUp {
    top: 0px;
    background-color: rgba(0, 91, 141, 0.9);
    -webkit-transition: 0.7s;
    transition: 0.7s;
}

.heroLargeFullWidth {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100svh;
    background-color: var(--kleur-blauw-donker);
    background-size: cover;
    background-position: top right;
    padding: 200px 0 200px 0;
}
.heroLargeFullWidth .heroLargeFullWidthOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 91, 141, 0.9);
    z-index: 0;
}
.heroLargeFullWidth .heroLargeContainer {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    z-index: 1;
}
.heroLargeFullWidth .heroLargeTopContainer {
    max-width: 70%;
}
.heroLargeFullWidth .heroLargeTopContainer h1 {
    font-size: var(--font-size-hero-home);
    line-height: var(--line-height-hero-home-header);
    color: var(--kleur-tekst-licht);
    margin-bottom: 40px;
}
.heroLargeFullWidth .heroLargeTopContainer p {
    color: var(--kleur-tekst-licht);
    font-size: var(--font-size-hero-text);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-hero-home-text);
    margin-bottom: 40px;
}
.heroLargeFullWidth .heroLargeBottomContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 60px;
}
.heroLargeFullWidth .heroLargeBottomContainer .heroLargeBelContainer .homeHeroBelButton {
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-light);
    color: var(--kleur-blauw-licht);
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.heroLargeFullWidth .heroLargeBottomContainer .heroLargeBelContainer .homeHeroBelButton img {
    margin-left: 20px;
    width: 50px;
    height: 50px;
}

.homeSectie2FullWidth {
    position: relative;
    background-position: 90% center;
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden;
}
.homeSectie2FullWidth .homeSection2Background {
    position: absolute;
    top: 0;
    right: -200px;
    z-index: -1;
}
.homeSectie2FullWidth .kolomHomeSectie2Content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-right: 100px;
}

.uspFullWidth {
    position: relative;
}
.uspFullWidth .uspBackgroundOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    z-index: 1;
}
.uspFullWidth .uspKolom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.uspFullWidth .uspKolom .iconUSP {
    margin-bottom: 20px;
}
.uspFullWidth .uspKolom h3 {
    color: var(--kleur-blauw-donker);
    font-size: var(--font-size-big);
    line-height: var(--line-height-big);
    font-weight: var(--font-weight-semi-bold);
    text-align: center;
}

.nieuwsSliderFullWidth {
    position: relative;
    overflow: hidden;
}
.nieuwsSliderFullWidth .nieuwsSliderContainer {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}
.nieuwsSliderFullWidth .kolomContainer {
    grid-gap: 0;
}
.nieuwsSliderFullWidth .nieuwsSliderInleidingKolom {
    position: relative;
    background-color: var(--kleur-wit);
    min-width: 320px;
    width: 35% !important;
    padding-right: 50px;
    z-index: 10;
}
.nieuwsSliderFullWidth .nieuwsSliderInleidingKolom::before {
    content: "";
    position: absolute;
    top: 0;
    left: -400px;
    width: 400px;
    height: 100%;
    background-color: var(--kleur-wit);
    opacity: 1;
    z-index: 5;
}
.nieuwsSliderFullWidth .nieuwsSliderKolom {
    width: 65% !important;
    max-width: 800px;
    padding: 20px 0;
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-carousel {
    display: block;
    width: 100%;
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-stage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-stage .owl-item {
    opacity: 0.3;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-stage .owl-item.active {
    opacity: 1;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-stage .nieuwsSliderItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: var(--kleur-wit);
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-stage .nieuwsSliderItem .nieuwsSliderItemTop {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-stage .nieuwsSliderItem .nieuwsSliderItemBottom {
    padding: 40px;
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-stage .nieuwsSliderItem .nieuwsSliderItemBottom .nieuwsSliderDatum {
    text-transform: uppercase;
    font-weight: var(--font-weight-extra-light);
    font-size: var(--font-size-tiny);
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-stage .nieuwsSliderItem .nieuwsSliderItemBottom a {
    text-decoration: none;
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-stage .nieuwsSliderItem .nieuwsSliderItemBottom a h3 {
    font-size: var(--font-size-big);
    font-weight: var(--font-weight-semi-bold);
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-nav {
    display: none;
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-dots {
    margin-top: 20px;
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-dots .owl-dot {
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid var(--kleur-blauw-donker);
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-dots .owl-dot:last-child {
    margin-right: 0;
}
.nieuwsSliderFullWidth .nieuwsSliderKolom .owl-dots .active {
    background-color: var(--kleur-blauw-donker);
}

.mogelijkhedenFullWidthBlue {
    position: relative;
}
.mogelijkhedenFullWidthBlue .mogelijkhedenBackgroundOverlayBlue {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(24, 98, 139, 0.75);
}
.mogelijkhedenFullWidthBlue .mogelijkhedenContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.mogelijkhedenFullWidthBlue .mogelijkhedenContainer p {
    color: var(--kleur-tekst-licht);
}

.mogelijkhedenFullWidthWhite {
    position: relative;
}
.mogelijkhedenFullWidthWhite .mogelijkhedenBackgroundOverlayWhite {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.75);
}
.mogelijkhedenFullWidthWhite .mogelijkhedenContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.mogelijkhedenFullWidthWhite p {
    color: var(--kleur-blauw-donker);
}

.projectenFullWidth .projectenContainer {
    display: grid;
}
.projectenFullWidth .projectenContainer .projectRow {
    display: grid;
    grid-gap: 20px;
    grid-template-rows: 350px;
    margin-bottom: 20px;
}
.projectenFullWidth .projectenContainer .projectRow .projectGridSpaceItem {
    width: 100%;
    height: 100%;
}
.projectenFullWidth .projectenContainer .projectRow .projectGridSpaceItem .projectGridItem {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.projectenFullWidth .projectenContainer .projectRow .projectGridSpaceItem .projectGridItem .projectGridItemOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 75, 116, 0)), to(rgb(0, 75, 116)));
    background: linear-gradient(rgba(0, 75, 116, 0) 0%, rgb(0, 75, 116) 100%);
    z-index: 0;
}
.projectenFullWidth .projectenContainer .projectRow .projectGridSpaceItem .projectGridItem .projectGridItemContent {
    position: relative;
    padding-right: 80px;
    z-index: 1;
}
.projectenFullWidth .projectenContainer .projectRow .projectGridSpaceItem .projectGridItem .projectGridItemContent h3 {
    font-size: var(--font-size-big);
    line-height: var(--line-height-big);
    font-weight: var(--font-weight-semi-bold);
    margin-bottom: 10px;
}
.projectenFullWidth .projectenContainer .projectRow .projectGridSpaceItem .projectGridItem .projectGridItemContent .projectGridItemLocatie {
    text-transform: uppercase;
    font-size: var(--font-size-tiny);
    margin-bottom: 0;
}
.projectenFullWidth .projectenContainer .projectRow .projectGridSpaceItem .projectGridItem .projectGridItemLink {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--kleur-blauw-licht);
    border: 2px solid var(--kleur-blauw-licht);
    background-image: url(img/arrow-right-dark-blue.svg);
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 1;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.projectenFullWidth .projectenContainer .projectRow .projectGridSpaceItem .projectGridItem .projectGridItemLink:hover {
    background-color: transparent;
    border: 2px solid var(--kleur-blauw-licht);
    background-image: url(img/arrow-right-light-blue.svg);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.projectenFullWidth .projectenContainer .projectRow-1-1-1 {
    grid-template-columns: 2fr 2fr 2fr;
}
.projectenFullWidth .projectenContainer .projectRow-2-2 {
    grid-template-columns: 3fr 3fr;
}
.projectenFullWidth .projectenContainer .projectRow-1-3 {
    grid-template-columns: 2fr 4fr;
}

.heroMediumFullWidth {
    position: relative;
    width: 100%;
    height: 350px;
    background-color: var(--kleur-blauw-donker);
    background-size: cover;
    background-position: top right;
    padding: 50px 0;
}
.heroMediumFullWidth .heroMediumFullWidthOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 91, 141, 0.9);
    z-index: 0;
}
.heroMediumFullWidth .heroMediumContainer {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    z-index: 1;
}
.heroMediumFullWidth .heroMediumContainer h1 {
    font-size: var(--font-size-large);
    color: var(--kleur-tekst-licht);
    font-weight: var(--font-weight-bold);
}
.heroMediumFullWidth .heroMediumContainer .heroTelButton {
    position: absolute;
    bottom: -75px;
    right: 20px;
    width: 50px;
    height: 50px;
}

.nieuwsGridContainer {
    display: grid;
    grid-gap: 40px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nieuwsGridContainer .nieuwsGridItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: var(--kleur-wit);
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
    -ms-flex-item-align: start;
    align-self: start;
}
.nieuwsGridContainer .nieuwsGridItem .nieuwsGridItemTop {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
}
.nieuwsGridContainer .nieuwsGridItem .nieuwsSGridItemBottom {
    padding: 40px;
}
.nieuwsGridContainer .nieuwsGridItem .nieuwsSGridItemBottom .nieuwsGridDatum {
    text-transform: uppercase;
    font-weight: var(--font-weight-extra-light);
    font-size: var(--font-size-tiny);
}
.nieuwsGridContainer .nieuwsGridItem .nieuwsSGridItemBottom a {
    text-decoration: none;
}
.nieuwsGridContainer .nieuwsGridItem .nieuwsSGridItemBottom a h3 {
    font-size: var(--font-size-big);
    font-weight: var(--font-weight-semi-bold);
}

.heroSmallFullWidth {
    position: relative;
    width: 100%;
    height: 150px;
    background-color: var(--kleur-blauw-donker);
    background-size: cover;
    background-position: top right;
    padding: 0;
}
.heroSmallFullWidth .heroSmallFullWidthOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 91, 141, 0.9);
    z-index: 0;
}
.heroSmallFullWidth .heroSmallContainer {
    position: relative;
    max-width: 850px;
}
.heroSmallFullWidth .heroSmallContainer .heroTelButton {
    position: absolute;
    bottom: -25px;
    right: 20px;
    width: 50px;
    height: 50px;
}
.heroSmallFullWidth .heroProjectContainer {
    position: relative;
}
.heroSmallFullWidth .heroProjectContainer .heroTelButton {
    position: absolute;
    bottom: -25px;
    right: 20px;
    width: 50px;
    height: 50px;
}

.singleNieuwsContentFullWidth .singleNieuwsContentContainer {
    max-width: 850px;
}
.singleNieuwsContentFullWidth .singleNieuwsContentContainer .singleNieuwsAfbeelding {
    margin-bottom: 20px;
}
.singleNieuwsContentFullWidth .singleNieuwsContentContainer .singleNieuwsDatum {
    font-size: var(--font-size-tiny);
    text-transform: uppercase;
}
.singleNieuwsContentFullWidth .singleNieuwsContentContainer .singleNieuwsTitel {
    font-size: var(--font-size-big);
    font-weight: var(--font-weight-semi-bold);
    margin-bottom: 20px;
}
.singleNieuwsContentFullWidth .singleNieuwsContentContainer .singleNieuwsInhoudContainer {
    margin-bottom: 50px;
}

.projectButtonContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.projectGalerijFullWidth {
    padding-top: 0;
}
.projectGalerijFullWidth .projectGalerijContainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
.projectGalerijFullWidth .projectGalerijContainer .projectGalerijFoto {
    cursor: pointer;
}

.lightboxBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.75);
}
.lightboxBackground .buttonLightboxClose {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--kleur-blauw-licht);
    background-image: url(img/icon-lightbox-close.svg);
    background-position: center;
    background-size: 20px;
    background-repeat: no-repeat;
    border: 0;
    cursor: pointer;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.lightboxBackground .buttonLightboxClose:hover {
    background-color: var(--kleur-blauw-donker);
    background-image: url(img/icon-lightbox-close-light.svg);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.lightboxBackground .lightBoxContainer {
    position: relative;
    width: 80%;
    height: 80%;
    padding: 0 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.lightboxBackground .lightBoxContainer .lightBoxButton {
    position: absolute;
    top: calc(50% - 25px);
    width: 50px;
    height: 50px;
    background-color: var(--kleur-blauw-licht);
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid var(--kleur-blauw-licht);
    cursor: pointer;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.lightboxBackground .lightBoxContainer .lightBoxButtonPrev {
    left: 20px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    background-image: url(img/arrow-right-dark-blue.svg);
}
.lightboxBackground .lightBoxContainer .lightBoxButtonPrev:hover {
    background-color: var(--kleur-blauw-donker);
    border: 2px solid var(--kleur-blauw-donker);
    background-image: url(img/arrow-right-light-blue.svg);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.lightboxBackground .lightBoxContainer .lightBoxButtonNext {
    right: 20px;
    background-image: url(img/arrow-right-dark-blue.svg);
}
.lightboxBackground .lightBoxContainer .lightBoxButtonNext:hover {
    background-color: var(--kleur-blauw-donker);
    border: 2px solid var(--kleur-blauw-donker);
    background-image: url(img/arrow-right-light-blue.svg);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.lightboxBackgroundOpen {
    opacity: 1;
    pointer-events: auto;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.dienstenInhoudSectie {
    margin-bottom: 70px;
}

.dienstenEigenschappenContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.dienstenEigenschappenContainer .dienstenEigenschappenContainerTop {
    width: 100%;
    min-height: 250px;
    background-size: cover;
    background-position: center;
}
.dienstenEigenschappenContainer .dienstenEigenschappenContainerBottom {
    background-color: var(--kleur-blauw-licht);
    padding: 40px;
}
.dienstenEigenschappenContainer .dienstenEigenschappenContainerBottom h3 {
    font-size: var(--font-size-big);
    margin-bottom: 40px;
}
.dienstenEigenschappenContainer .dienstenEigenschappenContainerBottom .diensteEigenschapLijst {
    padding-left: 0;
    list-style-type: none;
}
.dienstenEigenschappenContainer .dienstenEigenschappenContainerBottom .diensteEigenschapLijst li {
    position: relative;
    padding-left: 30px;
    font-weight: var(--font-weight-extra-light);
    margin-bottom: 30px;
}
.dienstenEigenschappenContainer .dienstenEigenschappenContainerBottom .diensteEigenschapLijst li:last-child {
    margin-bottom: 0;
}
.dienstenEigenschappenContainer .dienstenEigenschappenContainerBottom .diensteEigenschapLijst li::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    background-image: url(img/icon-usp.svg);
    background-size: cover;
    background-position: center;
}

.contentContainer {
    max-width: 850px;
}
.contentContainer .contentAfbeelding {
    margin-bottom: 20px;
}

.contactFullWidth {
    padding-bottom: 0;
}
.contactFullWidth .contactContainer {
    max-width: 850px;
}
.contactFullWidth .contactContainer .contactGegevensContainer {
    margin-bottom: 40px;
}
.contactFullWidth .contactContainer .contactGegevensContainer p {
    margin-bottom: 0;
}
.contactFullWidth .contactContainer .contactAfbeelding {
    margin-bottom: 40px;
}
.contactFullWidth .contactContainer .contactFormulierContainer {
    margin-top: 40px;
}
.contactFullWidth .contactContainer .contactFormulierContainer .nf-before-form-content {
    display: none;
}
.contactFullWidth .contactContainer .contactFormulierContainer label {
    font-weight: var(--font-weight-extra-light);
}
.contactFullWidth .contactContainer .contactFormulierContainer input,
.contactFullWidth .contactContainer .contactFormulierContainer textarea {
    border: 0;
    background-color: var(--kleur-grijs);
    padding: 10px;
    font-weight: var(--font-weight-regular);
    color: var(--kleur-tekst-donker);
}
.contactFullWidth .contactContainer .contactFormulierContainer .buttonLightBlue {
    background-color: var(--kleur-blauw-licht) !important;
    color: var(--kleur-blauw-donker) !important;
    border: 2px solid var(--kleur-blauw-licht) !important;
    cursor: pointer;
}

.contactRouteTitelFullWidth {
    padding-bottom: 0;
}

.contactRouteMapFullWidth {
    position: relative;
    min-height: 500px;
}
.contactRouteMapFullWidth iframe {
    border: none;
}

.footerFullWidth {
    background-color: var(--kleur-blauw-donker);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 20px;
}
.footerFullWidth .footerTopContainer {
    margin-bottom: 50px;
}
.footerFullWidth .footerTopContainer .kolomFooter {
    padding-top: 40px;
}
.footerFullWidth .footerTopContainer .kolomFooter h4 {
    font-size: var(--font-size-footer);
    color: var(--kleur-tekst-licht);
    font-weight: var(--font-weight-extra-light);
    margin-bottom: 20px;
}
.footerFullWidth .footerTopContainer .kolomFooter .footerLijst {
    list-style-type: none;
}
.footerFullWidth .footerTopContainer .kolomFooter .footerLijst li {
    color: var(--kleur-tekst-licht);
    font-weight: var(--font-weight-extra-light);
    font-size: var(--font-size-footer);
}
.footerFullWidth .footerTopContainer .kolomFooter .footerLijst li a {
    color: var(--kleur-tekst-licht);
    font-weight: var(--font-weight-extra-light);
    font-size: var(--font-size-footer);
    text-decoration: none;
}
.footerFullWidth .footerTopContainer .kolomFooter .footerLijst .footerContactItem {
    padding-left: 30px;
    margin-bottom: 20px;
}
.footerFullWidth .footerTopContainer .kolomFooter .footerLijst .footerContactItemAdres {
    position: relative;
}
.footerFullWidth .footerTopContainer .kolomFooter .footerLijst .footerContactItemAdres::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 18px;
    background-image: url(img/icon-footer-adres.svg);
    background-position: center;
    background-size: cover;
}
.footerFullWidth .footerTopContainer .kolomFooter .footerLijst .footerContactItemTelefoon {
    position: relative;
}
.footerFullWidth .footerTopContainer .kolomFooter .footerLijst .footerContactItemTelefoon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    height: 16px;
    background-image: url(img/icon-footer-tel.svg);
    background-position: center;
    background-size: cover;
}
.footerFullWidth .footerTopContainer .kolomFooter .footerLijst .footerContactItemMail {
    position: relative;
}
.footerFullWidth .footerTopContainer .kolomFooter .footerLijst .footerContactItemMail::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 18px;
    height: 14px;
    background-image: url(img/icon-footer-mail.svg);
    background-position: center;
    background-size: cover;
}
.footerFullWidth .footerBottomContainer {
    border-top: 1px solid var(--kleur-blauw-licht);
    padding: 40px 0 0 0;
    max-width: 1220px;
}
.footerFullWidth .footerBottomContainer p,
.footerFullWidth .footerBottomContainer a {
    color: var(--kleur-tekst-licht);
    text-decoration: none;
    font-size: var(--font-size-tiny);
}

@media (max-width: 1300px) {
    .headerFullWidth .headerContainer .headerContainerLeft .headerLogo {
        position: relative;
        max-width: 180px;
        z-index: 9999;
    }
    .footerFullWidth .footerBottomContainer {
        padding: 40px 20px 0 20px;
    }
    .homeSection2Background {
        opacity: 0.3;
    }
    .projectInhoudFullWidth .kolom-1-1 {
        grid-template-columns: 2fr 1fr;
    }
}
@media (max-width: 1050px) {
    .kolomContainer {
        grid-gap: 40px;
    }
    .kolom-1-1-1-1 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .kolom-1-1-2,
    .kolom-1-3 {
        grid-template-columns: 1fr;
    }
    .projectRow {
        grid-template-rows: 300px !important;
    }
    .projectRow-1-1-1 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: 200px 300px !important;
        grid-template-areas: "gridTop1 gridTop1" "gridTop2 gridTop3";
    }
    .projectRow-1-1-1 .projectGridSpaceItem1 {
        grid-area: gridTop1;
    }
    .projectRow-1-1-1 .projectGridSpaceItem2 {
        grid-area: gridTop2;
    }
    .projectRow-1-1-1 .projectGridSpaceItem3 {
        grid-area: gridTop3;
    }
    .projectRow-2-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: 300px;
    }
    .projectRow-1-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: 300px;
    }
    .headerFullWidth {
        padding: 0;
        height: 100px;
    }
    .mobileNavSwitch {
        display: block;
        position: relative;
        width: 50px;
        height: 50px;
        background-color: var(--kleur-blauw-licht);
        border: 0;
        cursor: pointer;
        z-index: 9999;
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .mobileNavSwitch .mobileNavBar {
        position: absolute;
        width: 26px;
        height: 4px;
        right: 12px;
        background-color: var(--kleur-blauw-donker);
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .mobileNavSwitch .mobileNavBar1 {
        top: 15px;
    }
    .mobileNavSwitch .mobileNavBar2 {
        top: 23px;
    }
    .mobileNavSwitch .mobileNavBar3 {
        top: 30px;
        width: 20px;
    }
    .mobileNavSwitch:hover > .mobileNavBar1 {
        width: 17px;
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .mobileNavSwitch:hover > .mobileNavBar2 {
        width: 17px;
        right: 17px;
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .mobileNavSwitch:hover > .mobileNavBar3 {
        width: 17px;
        right: 22px;
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .mobileNavSwitchOpen .mobileNavBar1 {
        top: 23px;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .mobileNavSwitchOpen .mobileNavBar2 {
        opacity: 0;
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .mobileNavSwitchOpen .mobileNavBar3 {
        top: 23px;
        width: 26px;
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .mobileNavSwitchOpen:hover > .mobileNavBar1 {
        top: 23px;
        width: 26px;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .mobileNavSwitchOpen:hover > .mobileNavBar2 {
        opacity: 0;
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .mobileNavSwitchOpen:hover > .mobileNavBar3 {
        top: 23px;
        right: 12px;
        width: 26px;
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .menu-hoofdmenu-container {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background-color: var(--kleur-blauw-donker);
        background-image: url(img/navBackground.jpg);
        background-size: auto;
        background-position: center;
        background-repeat: no-repeat;
        padding: 100px 20px 20px 20px;
        opacity: 0;
        pointer-events: none;
        z-index: 9998;
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .menu-hoofdmenu-container .menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-left: 0;
    }
    .menu-hoofdmenu-container .menu li {
        -ms-flex-item-align: start;
        align-self: flex-start;
        margin: 0 !important;
    }
    .menu-hoofdmenu-container .menu li a {
        font-size: var(--font-size-button);
    }
    .mobileNavOpen {
        right: 0;
        pointer-events: auto;
        opacity: 1;
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .heroLargeFullWidth .heroLargeTopContainer {
        max-width: 100%;
    }
    .heroLargeFullWidth .heroLargeTopContainer h1 {
        font-size: var(--font-size-mobile-hero);
        line-height: var(--line-height-mobile-hero);
    }
    .heroLargeFullWidth .heroLargeBottomContainer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .heroLargeFullWidth .heroLargeBottomContainer .heroLargeButtonContainer {
        margin-bottom: 40px;
    }
    .homeSectie2FullWidth .homeSection2Background {
        right: -470px;
    }
    .nieuwsSliderFullWidth .nieuwsSliderContainer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 40px 20px;
    }
    .nieuwsSliderFullWidth .nieuwsSliderContainer .nieuwsSliderInleidingKolom {
        width: 100% !important;
        margin-bottom: 40px;
    }
    .nieuwsSliderFullWidth .nieuwsSliderContainer .nieuwsSliderKolom {
        max-width: none !important;
        width: 100% !important;
    }
    .projectenFullWidth .projectenContainer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .projectInhoudFullWidth .kolom-1-1 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    .mogelijkhedenFullWidthWhite .mogelijkhedenContainer,
    .mogelijkhedenFullWidthBlue .mogelijkhedenContainer {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .nieuwsGridContainer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dienstenEigenschappenContainer .dienstenEigenschappenContainerBottom {
        padding: 20px;
    }
    .dienstenEigenschappenContainer .dienstenEigenschappenContainerBottom ul {
        padding-left: 0;
    }
    .projectGalerijFullWidth .projectGalerijContainer {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 700px) {
    h2 {
        font-size: var(--font-size-mobile-header);
        line-height: var(--line-height-big);
    }
    .heroMediumFullWidth .heroMediumContainer h1 {
        font-size: var(--font-size-mobile-hero);
        line-height: var(--line-height-hero-home-text);
    }
    .kolom-1-1,
    .kolom-1-1-1,
    .kolom-1-1-1-1,
    .kolom-2-1 {
        grid-template-columns: 1fr !important;
    }
    .projectRow-1-1-1,
    .projectRow-2-2,
    .projectRow-1-3 {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }
    .heroLargeFullWidth {
        padding: 150px 0 100px 0;
    }
    .heroLargeFullWidth .heroLargeButtonContainer .button {
        width: 100%;
    }
    .heroLargeFullWidth .heroLargeButtonContainer .button:first-child {
        margin-bottom: 20px;
    }
    .homeSectie2FullWidth .kolomHomeSectie2Content {
        padding-right: 0;
    }
    .mogelijkhedenButtonContainer {
        margin-top: 20px;
    }
    .mogelijkhedenButtonContainer .button {
        width: 100%;
    }
    .mogelijkhedenButtonContainer .button:first-child {
        margin-bottom: 20px;
    }
    .projectenFullWidth .projectenContainer .projectRow .projectGridSpaceItem .projectGridItem {
        min-height: 300px;
    }
    .projectInhoudFullWidth .kolom-1-1 .projectButtonContainer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .projectInhoudFullWidth .kolom-1-1 .projectButtonContainer .button {
        width: 100%;
        max-width: 400px;
        margin-bottom: 20px;
    }
    .projectGalerijFullWidth .projectGalerijContainer {
        grid-template-columns: 1fr;
    }
    .projectGalerijFullWidth .projectGalerijContainer .projectGalerijFoto {
        pointer-events: none;
    }
}