/*

Normale responsive maten:
Telefoon: 0px - 600px;
Tablet: 601px - 1024px;
Laptop: 1025px - 1536px
Desktop: 1537px en hoger

Probeer deze aan te houden als responsive maten

*/

@media screen and (max-width: 420px) {
	.l-header .mobile-logo-wrapper > .w-btn { padding: 0.5rem 1rem !important; }
}

@media screen and (max-width: 450px) {
	.l-header .mobile-logo-wrapper > .w-image,
	.l-header.sticky .mobile-logo-wrapper > .w-image {
		height: 15px !important;
	}
}
@media screen and (max-width: 500px) {
	.l-header .mobile-logo-wrapper > .w-image,
	.l-header.sticky .mobile-logo-wrapper > .w-image { height: 15px !important; }
}

/* Mobile Responsive */
@media screen and (max-width: 600px){	

	/* - Home - */
	/* Banner */
	#home-banner:before {
		background-size: contain !important;
		background-repeat: no-repeat !important;
		width: 45% !important;
		height: 50% !important;
		top: unset !important;
		bottom: 0 !important;
		left: 0 !important;
		z-index: 0 !important;
	}
	#home-banner:after {
		content: "";
		background: url(/wp-content/uploads/2023/08/polygon-31.svg) !important;
		background-size: contain !important;
		background-repeat: no-repeat !important;
		width: 80% !important;
		height: 100% !important;
		top: -20% !important;
		right: 5% !important;
		transform: rotate(35deg);
		
		display: none !important;
	}
	#home-banner .w-btn-wrapper,
	#home-banner .w-btn {
		width: 100%;
		margin: 0;
	}
	/* Nummer sectie */
	#nummer-sectie:before { display: none; }
	#nummer-sectie:after { display: none; }
	.nummers-afbeelding:before {
		content: "";
		background: var(--tertiary-color);
		border-radius: 16px 16px 80px 16px;
		position: absolute;
		top: 0.5rem;
		left: 0.5rem;
		width: 100%;
		height: 100%;
	}
	.nummers-afbeelding img { border-radius: 0 16px 80px 0; }
	#nummer-sectie .w-btn-wrapper {
		margin-right: 0;
		width: 100%;
	}
	.nummers-button-wrapper .w-btn-wrapper:first-child .w-btn { width: 100%; }

	/* Diensten knoppen */
	.groen-achtergrond:before {
		width: calc(100% - 1.5rem) !important;
		right: 0% !important;
		border-radius: 40px 0 0 16px !important;
	}
	.groen-achtergrond:after {
		height: 17.5% !important;
		width: 72.5% !important;
	}


	/* Doorkliksectie */
	#doorkliksectie::before {
		border-radius: 0 40px 16px 0 !important;
		height: 100% !important;
		width: 92.5% !important;
		top: 0 !important;
	}


	/* Header */
	#mobile-menu #menu-item-4288 { overflow: visible; }
	#mobile-menu #menu-item-4288:before {
		content: "";
		background: url(/wp-content/uploads/2023/08/group-34.png);
		background-size: contain;
		background-repeat: no-repeat;
		height: 100%;
		width: 120%;
		position: absolute;
		left: -20%;
		top: 0;
		z-index: -1;
		opacity: 0.75;
		
		display: none !important;
	}
	#mobile-menu .widget_nav_menu { padding: 0; }
	#mobile-menu .widget_nav_menu a {
		font-size: 1rem;
		font-family: 'aileron', sans-serif;
	}
	#mobile-menu .w-socials-list i {
		color: var(--main-color);
		border: solid 2px var(--main-color);
		border-radius: 50%;
		padding: 0;
		height: 3rem;
		width: 3rem;
		font-size: 1.25rem !important;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.mobile-logo-wrapper {
		width: 100%;
    	margin-right: 0 !important;
    	row-gap: 0.2rem;
	}
	.mobile-logo-wrapper .w-btn { padding-top: 0.5rem; padding-bottom: 0.5rem; }


	/* Footer */
	#cta .w-btn-wrapper,
	#cta .w-btn-wrapper > .w-btn {
		width: 100%;
	}
	#footer-mobile .accordion .w-tabs-section-control { color: var(--main-color); }
	#footer-mobile .accordion .w-tabs-section-control:before,
	#footer-mobile .accordion .w-tabs-section-control:after {
		width: 0.1em !important;
	}

	/* Content banner */
	.content-banner {
		z-index: 2;
		padding: 2rem 1.5rem !important;
	}
	.content-banner:before { display: none !important; }
	.content-banner:after {
		width: 45% !important;
		height: 120% !important;
		top: -20% !important;
		right: 0% !important;
		transform: rotate(35deg);
		z-index: -1;
	}

	/* Contentpagina's */
	.overflow-content:before {
		height: 120% !important;
		width: calc(100% - 1.5rem) !important;
		border-radius: 40px 0 0 40px !important;
		top: -12.5% !important;
		right: 0% !important;
	}


	/* - Herhalende content - */
	/* Verhalen blok */
	#verhalen:before { display: none; }
	/* Content 1 contentpagina's */
	.content-1-afbeelding > .vc_column-inner {
		padding-left: 0 !important;
		z-index: 2;
	}
	.content-1-afbeelding img { border-radius: 0 8px 80px 0; }
	.overflow-content > .vc_column-inner { margin-left: 1.5rem; }


	/* - Over ons - */
	/* Kernwaarden */
	#kernwaarden:before {
		width: calc(100% - 1.5rem) !important;
		border-radius: 0 8px 40px 0 !important;
		height: 82.5% !important;
		top: 15% !important;
	}
	#kernwaarden .dubbel .wpb_wrapper {
		display: flex;
		gap: 5%;
	}
	#kernwaarden .enkel .wpb_wrapper {
		width: 65%;
		margin: 0 auto;
	}
	/* Samenwerkingen */
	#samenwerkingen:before {
		width: 100% !important;
		right: 0 !important;
		transform: rotate(90deg) translateX(25%);
	}
	#samenwerking-carousel .slick-arrow:before {
		top: unset !important;
		bottom: -5%;
	}
	#samenwerking-carousel .slick-prev:before {
		content: "\f177";
		right: unset !important;
		left: 35%;
	}
	#samenwerking-carousel .slick-next:before { right: 35% !important; }

	/* Locaties */
	.filters { position: static !important; }
	#map-nav-3797 { grid-template-columns: repeat(1, 1fr) !important; }

	/* Single verhaal */
	#verhaal-afbeeldingen:before { display: none; }

	/* Contact */
	.contact-formulier:before {
		border-radius: 8px 8px 60px 8px !important;
		width: calc(100% - 3rem) !important;
		top: 5px !important;
		left: calc(1.5rem + 5px) !important;
	}

	/* - Kennisbank - */
	/* Knoppen */
	#kennisbank-knoppen .vc_col-sm-4 > .vc_column-inner { padding: 0 0.5rem !important; }
	#kennisbank-knoppen .vc_col-sm-4:not(:last-child) { width: 50% !important; }
	#kennisbank-knoppen .kennisbank-knop.kosten { aspect-ratio: 2/1 !important; }
	/* FAQ */
	#faq:before {
		width: calc(100% - 1.5rem) !important;
		border-radius: 0 8px 60px 0 !important;
	}
	#faq:after { display: none; }

	/* Kostencalculator */
	.pakketkolom {
		width: 100% !important;
		border-right: 0 !important;
	}
	
	/* Dag op... */
	#dagdeel-slider .owl-nav { display: block !important; }
	#dagdeel-slider .owl-prev {
		right: 52.5%;
		bottom: -4rem;
		top: unset;
		background: var(--main-color);
		color: #fff !important; 
	}
	#dagdeel-slider .owl-next {
		left: 52.5%;
		bottom: -4rem;
		top: unset;
		background: var(--main-color);
		color: #fff !important; 
	}
	
	.handpop-rechts::before {
		transform: translate(12rem, 16rem) rotateY(180deg) !important;
    	scale: 0.5 !important;
	}
	.koptelefoon-rechts::before {
		transform: translate(10rem, -15rem) !important;
		scale: 0.55 !important;
	}
	.octopus-arm-rechts::before {
		bottom: -8rem !important;
		right: -6.1rem !important;
    	scale: 0.5 !important;
	}
	.bazenbos-pagina h2,
	.clup-pagina h2 {
		font-size: 36px !important;
	}
	.bazenbos-pagina h3,
	.clup-pagina h3 {
		font-size: 2.5rem !important;
	}
	.object-fit-contain {
		object-fit: contain !important;
	}
	.object-fit-contain img { object-fit: contain !important; }

}

/* Tablet Responsive */
@media screen and (min-width: 601px) and (max-width: 1024px){
	/* Fonts */
	h2 { font-size: 2rem !important; }
	/* Algemeen */
	.tablet-image img {
		aspect-ratio: 1/2;
		object-fit: cover;
	}
	/* Contentpagina's */
	.overflow-content:before {
		height: 110% !important;
		border-radius: 120px 0 0 16px !important;
	}

	/* Home */
	#home-banner:before {
		background-size: contain !important;
		width: 35% !important;
		z-index: 0 !important;
	}
	#doorkliksectie::before {
		width: 97.5% !important;
	}
	.groen-achtergrond:before {
		width: 120% !important;
		height: 110% !important;
		top: -5% !important;
		right: -10% !important;
		z-index: -1 !important;
	}
	.groen-achtergrond:after {
		height: 30%;
		width: 30%;
		right: -7.5%;
		bottom: -2.5%;
	}
	#nummer-sectie:before {
		top: -63% !important;
		right: -10.25% !important;
	}

	/* Kennisbank */
	#faq:before { border-radius: 0 16px 80px 0 !important; }
	#documenten img { max-width: 120px !important; }

	/* Locatie */
	#map-nav-3797 { grid-template-columns: 1fr 1fr !important; }

	/* Samenwerkingen */
	#samenwerking-carousel .slick-prev:before { right: 15% !important; }

	/* Over ons */
	#kernwaarden:before {
		width: 97.5% !important;
		height: 77.5% !important;
		top: 17.5% !important;
	}
}

/* Mobile & Tablet */
@media screen and (max-width: 1024px){

	/* Header */
	/* Bazenbos locatie header */
	.bazenbos-locatie #page-header.id_6219 .w-search,
	.bazenbos-pagina #page-header.id_6219 .w-search  {
		margin: 0 !important;
	}


	/* Footer */
	#cta:before {
		content: "";
		background: var(--tertiary-color);
		width: 100%;
		height: 60%;
		border-radius: 16px 80px 16px 16px;
		position: absolute;
		top: -2%;
		right: -2%;
	}

	/* - Home - */
	/* Banner */
	#mobile-banner-popup button {
		font-size: 1rem !important;
		font-weight: 400 !important;
		padding: 1rem 2rem;
		border-radius: 50px;
		box-shadow: 0 1px 20px rgba(0,0,0,0.1);
		position: absolute;
		top: -3rem;
	}
	/* Doorkliksectie */
	.doorklik-mobile .w-btn-wrapper { width: 50%; }
	.doorklik-mobile a.w-btn {
		font-size: 15px;
		padding: 1.25em 0.5em;
		width: 100%;
		min-height: 75px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* Nummereen diensten */
	.diensten-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 5%;
		color: #fff;
	}
	.diensten-grid-item {
		width: 47.5%;
		aspect-ratio: 1;
		border-radius: 12px;
		background: red;
		position: relative;
		overflow: hidden;
		background-size: cover;
	}
	.diensten-grid-item:nth-child(1) { background-image: url("/wp-content/uploads/2023/09/pm_baby_dagopvang_binnen.jpg"); }
	.diensten-grid-item:nth-child(2) { background-image: url("/wp-content/uploads/2023/07/clup_voetballen_lente_buiten.jpg"); }
	.diensten-grid-item:nth-child(3) { background-image: url("/wp-content/uploads/2023/09/peuters_eten_binnen.jpg"); }
	.diensten-grid-item:nth-child(-n +2) {
		margin-bottom: 5%;
	}
	.diensten-grid-item.verwijzing {
		background: var(--secondary-color);
		padding: 1rem;
		display: flex;
		align-items: flex-end;
		border-radius: 16px 16px 40px;
	}
	.diensten-grid-item.verwijzing i:before {
		font-size: 1.25rem;
		color: var(--secondary-color);
		background: #fff;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		animation: moveLogo 4s linear infinite;
	}
	.diensten-link {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}
	.diensten-title {
		background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(255,255,255,0));
		padding: 2rem 1rem 1rem;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.diensten-grid h5 { color: #fff; }

	/* Verhalen */
	#verhalen-mobile:before {
		content: "";
		background: var(--color-content-bg-alt);
		height: 100%;
		width: 70%;
		border-radius: 16px 0 0 160px;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	.object-fit-contain {
		object-fit: contain !important;
	}
	.object-fit-contain img { object-fit: contain !important; }
	
	.page-id-9237 .l-header .w-nav-control { background: var(--color-clup-blauw) !important;}
	.page-id-9237 .l-subheader-h .mobile-logo-wrapper > .w-btn { background: var(--color-clup-blauw) !important;}
	.page-id-9557.clup-pagina .l-header .w-nav-control { background: var(--color-clup-blauw) !important;}

	/* Tablet stacking default */
	.tablet-stacking > .l-section-h > .g-cols > .wpb_column { width: 100%; }
	.tablet-stacking > .l-section-h > .g-cols > .wpb_column:nth-child(1) { margin-bottom: 1.5rem; }
	
	/* Tablet stacking reverse */
	.tablet-stacking.tablet-stacking-reverse > .l-section-h > .g-cols { flex-direction: column-reverse; }
	.tablet-stacking.tablet-stacking-reverse > .l-section-h > .g-cols > .wpb_column:nth-child(1) { margin-bottom: 0; }
	.tablet-stacking.tablet-stacking-reverse > .l-section-h > .g-cols > .wpb_column:nth-child(2) { margin-bottom: 1.5rem; }

	/* Tablet stacking (used in inner-rows / .g-cols) */
	.tablet-stacking > .wpb_column { width: 100%; }
	.tablet-stacking > .wpb_column:nth-child(1) { margin-bottom: 1.5rem; }
	
	/* Tablet stacking reverse (used in inner-rows / .g-cols) */
	.tablet-stacking.tablet-stacking-reverse { flex-direction: column-reverse; }
	.tablet-stacking.tablet-stacking-reverse > .wpb_column:nth-child(1) { margin-bottom: 0; }
	.tablet-stacking.tablet-stacking-reverse > .wpb_column:nth-child(2) { margin-bottom: 1.5rem; }
}

/* Laptop Responsive */
@media screen and (min-width: 1025px) and (max-width: 1536px){
	/* Contentpagina's */
	.overflow-content:before {
		border-radius: 120px 0 0 16px !important;
	}

	/* Home */
	#home-banner:before {
		background-size: contain !important;
		z-index: 0 !important;
	}
	#doorkliksectie::before {
		width: 100% !important;
	}
	.grid-button-container .grid-button-icon {
		padding-top: 2rem !important;
	}
	.groen-achtergrond:after {
		right: 0 !important;
	}
	#nummer-sectie:before {
		top: -68% !important;
		right: -6.25% !important;
	}
	#nummer-sectie:after {
		top: -68% !important;
	}
	#verhalen:before {
		height: 70% !important;
	}

	/* Kennisbank */
	#faq:before {
		width: 95% !important;
	}

	/* Over ons */
	#kernwaarden:before {
		width: 97.5% !important;
		height: 67.5% !important;
		top: 22.5% !important;
	}

	/* Contact */
	#gform_wrapper_1 {
		display: block !important;
	}
}

/* Desktop Responsive */
@media screen and (min-width: 1537px){

}

/* Vanaf laptop */
@media screen and (min-width: 1025px){

}

/* Alles boven telefoon */
@media screen and (min-width: 601px) {
	/* Dag op... */
	#dagdeel-slider .owl-nav {
		display: none !important;
	}
}

/* Mobiele menuknop (hamburger/X): altijd rechtsboven als tab, normaal én sticky, t/m tablet-breakpoint (1150px) */
@media screen and (max-width: 1150px) {
	header .w-nav-icon { color: #fff !important; }
	.l-header .w-nav-control {
		background: var(--main-color);
		border-radius: 0 0 0 15px;
		height: 57px !important;
		width: 57px !important;
		position: absolute !important;
		top: 0 !important;
		right: -3px !important;
		display: flex !important;
		justify-content: center;
		align-items: center;
	}
	.page-id-9237 .l-header .w-nav-control,
	.page-id-9557.clup-pagina .l-header .w-nav-control { background: var(--color-clup-blauw) !important; }
}

/* Laptop (1151-1360px): hoofdmenu compacter zodat het naast het logo past tot het tablet-breakpoint */
@media screen and (min-width: 1151px) and (max-width: 1360px) {
	.ush_menu_1 .w-nav-anchor.level_1:not(.w-btn) { padding-left: 14px !important; padding-right: 14px !important; }
	body.header_hor .ush_menu_1.type_desktop .w-nav-anchor.level_1.w-btn { margin-inline: 12px 22px !important; }
}