nav { z-index: 99; }
nav ul li a:hover { filter: none; }
nav .mobile { filter: none; }
nav .menu .fa-angle-down { color: white; }
nav.scrolled .menu .fa-angle-down { color: black; }

/* NAVIGATION UNDERSCORE ANIMATION */
nav #menu-mainmenu .menu-item { position: relative; }
nav #menu-mainmenu .menu-item > a:after { 
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: solid 3px var(--wijzijn11-orange);
    transform: scaleX(0);  
    transition: all 300ms ease-in-out;
}

nav #menu-mainmenu .menu-item > a:hover:after, nav.scrolled .menu-item > a.current {
    transform: scaleX(1);
    color: var(--wijzijn11-orange);
}

nav .mobile { filter: none; }
.intro { position: relative; background: var(--wijzijn11-blue); z-index: -1; overflow: hidden; padding-inline: var(--Wijzijn11-outer-area); padding-top: 250px; padding-bottom: 42px; min-height: 70vh; }
.intro h2 { color: white; font-weight: bold; font-size: 44px; font-style: italic; }
.intro p { font-size: 20px; color: white; width: 70%; }
.intro a { display: block; width: fit-content; margin-top: 60px; background: transparent; border: 2px solid var(--wijzijn11-orange); color: var(--wijzijn11-orange); font-weight: bold; text-decoration: none; border-radius: 20px; padding-block: 15px; padding-inline: 15px; transition: all .25s ease-in-out;  }
.intro a:hover { background: var(--wijzijn11-orange); color: black; }
.team { position: relative; background: white;  }
.team-intro { padding-inline: var(--Wijzijn11-outer-area); padding-block: 60px; }
.team-intro h2 { display: block; text-align: center; color: var(--wijzijn11-orange); font-size: 44px; font-weight: bold; }
.team-intro div p { font-size: 20px; }

.medewerkers { padding-inline: var(--Wijzijn11-outer-area); background: var(--wijzijn11-orange); padding-block: 90px;  }
.medewerkers > h2, .webbouwers > h2 { font-size: 44px; font-weight: bold; margin-block: 60px; display: block; }


.splide__track { height: 100%; }
.slide_back { background: white; width: 100%; border-radius: 45px; position: relative; top: 0; left: 0; transition: all .25s ease-in-out; transition-delay: .05s; transform: translate(0, 0); text-decoration: none;  }
.slide_back .icon { width: 50px; height: 35px; display: block; margin-inline: auto; margin-bottom: 30px; margin-top: 15px; }
.slide_back { display: block; padding: 30px; padding-right: 45px; opacity: 1; align-content: center; font-size: 22px; color: black; text-align: center; transition: all .25s ease-in-out; transition-delay: .05s;  }
.slide_back h2 { font-size: 24px; font-weight: bold; }
.slide_front { position: relative; }
.slide { position: relative; /*flex: 0 1 25%;*/ margin-bottom: 30px; }
.slide_front img { position: relative; width: 100%; height: 350px; z-index: +1; object-fit: cover; object-position: bottom; border-radius: 45px; transform: translate(30px, 30px); filter: drop-shadow(2px 3px 3px #00000067); transition: all .25s ease-in-out; transition-delay: .05s; }
.slide_empty { padding: 0; flex: 1 1 30%; }

.slide { transition: all .3s ease-in-out;  height: calc(100% - 320px); }
.slide.active .slide_front { width: 30%; }
.slide.active img { position: relative; transform: translate(0, 0); transition-delay: 0s; }
.slide.active .slide_back { background: #ffffffe7; padding-left: 30%; width: unset; margin-right: 30px; margin-bottom: -300px; /*z-index: +1;*/ transform: translate(30px, -320px); filter: none; transition-delay: 0s; }
.slide.active .slide_back div { opacity: 1; }
.slide .top { display: flex; justify-content: start; gap: 1rem; }
.medewerker-rol h2 { display: block; }
.medewerker-bio p { font-size: 18px; text-align: start; }


.mail { height: fit-content; margin-left: auto; } 
.mail p { margin-block: auto; } 
.mail > img { height: 30px !important; } 

.meer { position: relative; background: white; padding-inline: var(--Wijzijn11-outer-area); }
.meer h2 { display: block; text-align: center; color: var(--wijzijn11-orange); font-size: 54px; font-weight: bold; margin-bottom: 60px; }
.onderdelen { display: flex; flex-wrap: wrap; gap: 30px; }
.onderdeel { flex: 1 1 25%; text-align: center; transition: all .6s ease-in-out; opacity: 0; transform: translateY(-100px); }
.onderdeel.active { opacity: 1; transform: translateY(0); }
.onderdeel h3 { font-size: 24px; }
.onderdeel p { text-align: left; font-size: 20px; }
.onderdeel img { width: 65%;  }


/************************ Responsive ************************/
@media screen and (max-width: 1150px) { 
    .slide.active .slide_front { width: 35rem; }
    .slide.active .slide_front img { object-position: center; }
    .slide.active .slide_back { padding-left: 30px; padding-right: 30px; padding-top: 22rem; width: unset; margin-right: 30px; }
}


@media screen and (max-width: 900px) {  
    .onderdeel { flex: 1 1 100%; }
    .onderdeel img { width: 260px; }
    .intro { padding-top: 200px; }

}

@media screen and (max-width: 800px) { 
    .slide.active .slide_front { width: 90%; }
}

@media screen and (max-width: 675px) { 
    .slide, .slide_empty { flex: 1 1 50%; }
    .intro p { width: 100%; }
    .intro a { text-align: center; }
    .slide .top { justify-content: center; flex-wrap: wrap; }
    .medewerker-info, .medewerker-icon { width: 100%; }
    .mail { margin-left: unset; }
    .slide_back .icon { margin-bottom: unset; margin-top: unset; }
}


@media screen and (max-width: 475px) {  
    .intro { padding-top: 130px; }
    .slide.active .slide_back { transform: translate(0, -320px); }
    .slide.active .slide_front { width: 100%; }
    .slide.active .slide_back { margin-right: 0; }
}