/*

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

Probeer deze aan te houden als responsive maten

*/


/* Mobile Responsive */
@media screen and (max-width: 600px){	
	/* Algemeen */
	.smaller-h1 h1 {
		font-size: 2rem;
	}
	/* home */
	#aanbod .aanbod-container {
		min-width: 100% !important;
	}
	#home-video .w-video > .w-video-h {
		padding: 0 !important;
		height: 100%;
	}
	#home-video iframe {
		height: 400px !important;
	}

	/* Aanbod */
	.shape-links-long:before {
		width: 305px !important;
		height: 276px !important;
	}
	.mobile-column {
		display: block !important;
	}

	/* Overige */
	.overige-informatie-grid {
		grid-template-columns: repeat(1, 1fr) !important;
		grid-gap: 1rem !important;
	}
	.overige-informatie-grid .informatie-blok {
		padding: 1rem !important;
	}

	/* Contact */
	.faq-tab .accordion {
		display: grid !important;
		grid-template-columns: 4fr 1fr !important;
		gap: unset !important;
		grid-gap: 1rem !important;
	}
	.faq-tab .accordion:after {
		margin-left: auto !important;
	}

	/* Mogelijkheden */
	#mogelijkheden-knoppen {
		flex-wrap: wrap;
	}
	#mogelijkheden-knoppen > a {
		width: 100%;
		padding: 1.25rem !important;
		justify-content: flex-start !important;
	}
	#mogelijkheden-knoppen i {
		min-width: 3.5rem;
	}

	/* Verhalen */
	#verhaal-grid .g-filters {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
	}
	#verhaal-grid .g-filters-item {
		flex: 1;
		min-width: fit-content;
	}
}

/* Tablet Responsive */
@media screen and (min-width: 601px) and (max-width: 1024px){
	/* Algemeen */
	/* 	main:not(.home main) > section:first-child {
	margin-top: unset !important;
	padding-top: calc(var(--header-height) + 2.5rem);
} */



	.tablet-100 .wpb_column {
		width: 100%;
	}
	.tablet-100 .wpb_column:first-child {
		margin-bottom: 2rem;
	}


	/* Menu */




	/* Home */
	#aanbod .aanbod-container {
		min-width: 100% !important;
		max-height: 250px !important;
	}
	#aanbod .aanbod-container img {
		width: 100% !important;
	}
	#home-video .w-video > .w-video-h {
		padding: 0;
		height: 100%;
	}
	#home-cta-werken {
		display: block;
	}
	#home-cta-werken > div {
		width: 100%;
	}
	#home-cta-werken > div:first-child {
		margin-bottom: 1.5rem;
	}

	/* Aanbod */
	#aanbod-navigatie .g-cols > .wpb_column > .vc_column-inner{
		padding: 0 0.5rem;
	}
	#aanbod-navigatie a {
		font-size: 0.9rem;
		padding: 1rem 0.5rem !important;
	}

	/* Overig */
	.overige-informatie-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		grid-gap: 2rem !important;
	}
	.overige-informatie-grid .informatie-blok {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* Mogelijkheden */
	#mogelijkheden-knoppen > a {
		padding: 1.25rem !important;
	}
	#mogelijkheden-knoppen i {
		min-width: 3.5rem !important;
	}

	/* Verhalen */
	#verhaal-grid .g-filters-item {
		flex: 1;
	}

	/* Single verhaal */
	#laatste-nieuws:after {
		left: 97.5% !important;
	}

	/* Single vacature */
	#waarom-comfor .vc_col-sm-3 {
		width: 50%;
		margin-bottom: 1rem;
	}
	.extra-arrow:after {
		left: 95% !important;
	}

	#footer .g-cols > div:first-child {
		width: 100%;
		margin-bottom: 2rem;
	}
	#footer .g-cols > div:nth-child(2),
	#footer .g-cols > div:nth-child(3) {
		width: 50%;
	}

}

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

	/* Algemeen */
	.align-center {
		display: flex;
		align-items: center;
	}


	/* Menu */
	#mobile-menu > ul {
		background: var(--secondary-color);
		color: #fff;
	}
	#mobile-menu ul#menu-main-menu-mobile > li {
		margin-bottom: 1.5rem;
		font-size: 1.25rem;
	}
	#mobile-menu ul#menu-main-menu-mobile > li:last-child {
		margin-top: 2.75rem;
	}
	#mobile-menu ul#menu-main-menu-mobile > li:last-child > a {
		padding: 0.8em 1.8em;
		border: solid 2px #fff;
		border-radius: 50px;
		margin-top: 0.75rem;
	}
	#mobile-menu .desktop-hidden a {
		font-size: 1.25rem;
		font-weight: 700;
		background: var(--main-color);
		padding: 0.8rem 1.8rem;
		border-radius: 50px;
	}
}

/* Not mobile/tablet*/
@media screen and (min-width: 1025px) {
	.desktop-hidden {
		display: none !important;
	}
} 

/* Laptop Responsive */
@media screen and (min-width: 1025px) and (max-width: 1536px){

}

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

}

/* Vanaf laptop */
@media screen and (min-width: 1025px){
	.h2-groter h2 {
		font-size: 4rem;
	}
	
	header .w-nav-list.level_1 > li > a { display: flex; align-items: center; }
}