nav { z-index: 99; }
nav ul li a { color: black; }
nav ul li a:hover { filter: none; }
nav .mobile { filter: none; }
#navToggle span { background: black; }
nav .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);
}

.intro { padding-inline: var( --Wijzijn11-outer-area); position: relative; background: white; padding-top: 250px; padding-bottom: 30px; }
.intro > div > h2 { display: block; text-align: center; color: var(--wijzijn11-blue); font-weight: bold; font-size: 44px; font-style: italic; margin-bottom: 30px; }
.intro p { font-size: 20px; padding-right: 20px; }

.cases-single { position: relative; overflow: hidden; display: flex; justify-content: center; flex-wrap: wrap; background: white; padding-inline: var(--Wijzijn11-outer-area); padding-bottom: 30px; padding-top: 30px; }
.splide { visibility: visible; }


.splide__track { height: 100%; }
.slide_back { background: var(--wijzijn11-orange); width: 100%; height: 400px; border-radius: 45px; position: absolute; top: 0; left: 0; transition: all .25s ease-in-out; transition-delay: .05s; transform: translate(0, 0); text-decoration: none;  }

.slide_back p { font-size: 18px; } 
.slide_back div { display: block; height: 88%; padding: 30px; opacity: 0; align-content: center; font-size: 22px; color: black; text-align: center; transition: all .25s ease-in-out; transition-delay: .05s;  }
.slide_back div h2 { font-size: 28px; font-weight: bold; font-style: italic; }
.slide_back div h3 { font-size: 20px; font-weight: normal; }
.slide_front { position: relative; }
.slide { position: relative; flex: 1 1 25%; height: 400px; margin-right: 60px; margin-bottom: 60px; }
.slide:nth-last-child(-n + 2) { flex: 0 0 28.4%; }
.slide_front img { position: relative; width: 100%; height: 400px; z-index: +1; object-fit: cover; border-radius: 45px; transform: translate(30px, 30px); filter: drop-shadow(2px 3px 3px #00000067); transition: all .25s ease-in-out; transition-delay: .05s; }

.icon-card { position: absolute !important; opacity: 0; transition: all .25s ease-in-out; transition-delay: .05s; }

.slide:hover .slide_front > img { position: relative; transform: translate(0, 0); height: 400px; filter: none; transition-delay: 0s; }
.slide:hover .slide_back { background: #ff8009e6; z-index: +1; height: 400px; transform: translate(30px, 30px); filter: drop-shadow(2px 3px 4px #00000067); transition-delay: 0s; }
.slide:hover .slide_back .icon-card, .slide:hover .slide_back div { opacity: 1; transform: translateX(0) !important; } 

.case-empty { width: 300px !important; height: 400px; margin-right: 60px; margin-bottom: 60px;  }

.map_wrapper { filter: drop-shadow(2px 3px 3px #00000067); }
.projecten { position: relative; background: var(--wijzijn11-blue); padding-bottom: 90px; overflow: hidden; z-index: -1; }
.projecten .mapContainer { padding-top: 60px; }
.projecten h2 { display: block; text-align: center; color: white; font-size: 48px; font-weight: bold; padding-top: 60px; }



/************************ SINGLE ************************/

.single-intro { position: relative; background: white; padding-top: 260px; padding-inline: var(--Wijzijn11-outer-area); padding-bottom: 60px; }
.single-intro h2 { display: block; color: var(--wijzijn11-blue); font-size: 44px; font-weight: bold; font-style: italic; text-align: center; }
.single-intro h3 { display: block; color: var(--wijzijn11-orange); font-size: 36px; text-align: center; font-weight: normal; margin: 0; }
.single-intro p, .single-intro li { font-size: 20px; }

.before-after { position: relative; background: white; display: flex; justify-content: space-between; padding-inline: var( --Wijzijn11-outer-area);  }
.before-after img, .before-after > .before-after1, .before-after > .before-after2 { width: 30%;  padding-bottom: 60px;  } 
.before-after2 { margin-top: 20px; }

.afbeelding { width: 100%; height: 600px; }
.afbeelding img { position: fixed; z-index: -2; top: 105px; width: 100%; height: 845px; object-fit: cover; }


.blauw-mid { position: relative; background: var(--wijzijn11-blue); color: white; padding-inline: var(--Wijzijn11-outer-area); padding-block: 90px; }
.blauw-mid h2 { font-size: 36px; }
.blauw-mid p { font-size: 20px; }

.inhoud { position: relative; background: white; padding-inline: var(--Wijzijn11-outer-area); padding-block: 90px; }
.inhoud h2 { display: block; text-align: center; color:var(--wijzijn11-orange); font-weight: bold; font-size: 44px; margin-bottom: 60px; }
.inhoud .flex-container { display: flex; justify-content: space-between; gap: 60px; }
.inhoud .flex-container > img, .inhoud > .flex-container > .before-after3 { min-width: 535px; width: 670px; height: 600px; object-fit: cover; border-radius: 50px; }
.inhoud .flex-container > div { width: 60%; }
.inhoud .flex-container p { font-size: 20px; }
.inhoud .flex-container div a { display: block; width: 45%; text-align: center; margin-top: 60px; float: right; border: 2px solid var(--wijzijn11-blue); color: var(--wijzijn11-blue); font-size: 20px; font-weight: bold; text-decoration: none; border-radius: 20px; padding: 15px; transition: all .25s ease-in-out;  }
.inhoud .flex-container div a:hover { background: var(--wijzijn11-blue); color: white; } 

.cases { padding-top: 60px; }
.cases .titel, .cases .sub-titel { display: none; }
.cases-titel { position: relative;  padding-inline: var(--Wijzijn11-outer-area); background: white; display: block; color: var(--wijzijn11-blue); text-align: center; font-size: 44px; font-weight: bold; padding-top: 60px; font-style: italic; }

.highlights { position: relative; background: var(--wijzijn11-orange); padding-block: 90px; padding-inline: var(--Wijzijn11-outer-area); }
.highlights h2 { display: block; text-align: center; color: white; font-weight: bold; font-size: 44px; margin-bottom: 60px;  }
.highlights .items { display: flex; justify-content: center; gap: 30px; }
.highlights .items .item { display: flex; gap: 30px; min-width: 25%; }
.highlights .items .item img { width: 100px; height: 100px; object-fit: contain; }
.highlights .items .item p { font-size: 20px; color: white; } 



/************************ Responsive ************************/
@media screen and (max-width: 1700px) { 
	.inhoud .flex-container { flex-wrap: wrap; }
	.inhoud > .flex-container > .before-after3 { margin-inline: auto; margin-bottom: 30px; }
	.inhoud > .flex-container > img { margin-inline: auto; }
	.inhoud .flex-container > div:last-child { width: 80%; margin-inline: auto; } 
}

@media screen and (max-width: 1310px) { 
	.inhoud .flex-container > div:last-child { width: 100%; } 
} 

@media screen and (max-width: 1275px) {  
    nav ul li a { color: white; }
    #navToggle.open span { background: white; }
}

@media screen and (max-width: 1050px) {  
    .inhoud .flex-container, .highlights .items { flex-wrap: wrap; }
    .inhoud .flex-container > div, .inhoud .flex-container > img, .highlights .items .item { width: 100% !important; }
    .slide:nth-last-child(-n + 2), .slide { flex: 1 1 30%; }
    
}

@media screen and (max-width: 900px) { 
	.before-after { flex-wrap: wrap; }
	.before-after > .before-after1, .before-after > .before-after2, .before-after > img { width: 75%; margin-inline: auto; margin-bottom: 60px; } 
	.inhoud .flex-container { gap: 0; }
	.inhoud .flex-container > img { margin-bottom: 30px; }
    .intro { padding-top: 200px; }
    
} 

@media screen and (max-width: 675px) { 
    /*.cases { padding-inline: 0; padding-left: 0; padding-right: var(--Wijzijn11-outer-area); }*/
    .slide:nth-last-child(-n + 2), .slide { flex: 1 1 100%; }
    .single-intro h3 { font-size: 22px; }
	.inhoud .flex-container > img, .inhoud > .flex-container > .before-after3 { min-width: unset; height: unset; width: 100%; }
    .highlights h2 { font-size: 28px; }
}

@media screen and (max-width: 475px) {  
    .cases { justify-content: start; /*padding-inline: 0;*/ }
    .intro { padding-top: 130px; }
	.slide { margin-right: var(--Wijzijn11-outer-area); }
    .inhoud .flex-container div a { width: fit-content; }
    .cases-single { justify-content: unset;}
    .single-intro { padding-top: 130px; }
	.before-after > .before-after1, .before-after > .before-after2, .before-after > img { width: 90%; }
	.single-intro h2 { font-size: 32px; } 
	.inhoud h2 { font-size: 34px; }
	.highlights .items .item { flex-wrap: wrap; justify-content: center; }
	.highlights .items .item p { text-align: center; }
	.highlights .items .item div { width: 100%; } 
    

	
}