@import url("reset.less");

/*------------------------------------------------------------------------ Global ------------------------------------------------------------------------*/
#header {
    position: fixed;
	top: 4rem;
    z-index: 999;
    width: 80%;
	margin-left: 10%;
    padding: 16px 12px 16px 28px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(2px);
	.transition;

	.navbar-brand {
		width: 100%;
		height: 36px;
		display: block;
		background-image: url('../images/logo_black.svg');
		background-size: contain;
		background-position: left;
		background-repeat: no-repeat;
		.transition;
	}

	#menu-hoodfmenu {
		list-style-type: none;
		padding: 0;
		margin: 0;
		display: flex;
		gap: 4px;
		overflow: hidden;

		&:hover {
			overflow: visible;
		}

		li {
			position: relative;
			
			&.menu-item-has-children {
				position: relative;
				cursor: pointer;

				> a {
					display: flex;
					align-items: center;
					gap: 7px;

					&::after {
						content: "";
						flex: none;
						width: 6px;
						height: 6px;
						margin-top: -3px;
						border-right: 1.5px solid currentColor;
						border-bottom: 1.5px solid currentColor;
						transform: rotate(45deg);
						.transition;
					}
				}

				&:hover {

					> a::after {
						margin-top: 3px;
						transform: rotate(-135deg);
					}

					.sub-menu {
						opacity: 1;
						// height: max-content;
						width: max-content;
					}
				}

				.sub-menu {
					list-style-type: none;
					padding: 1.5rem 0;
					margin: 0;
					background: @white;
					border-radius: 12px;
					position: absolute;
					top: 100%;
    				left: 50%;
					transform: translateX(-50%) translateY(24px);
					opacity: 0;
					height: max-content;
					width: max-content;
					.transition;

					&::after {
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						transform: translateY(-100%);
						height: 24px;
					}

					li {
						padding: 0;
						cursor: pointer;
						.transition;

						&:before {
							content: none;
						}

						a {
							display: block;
							width: 100%;
							color: @indigo;
							padding: 8px 24px;
							.body_medium;

							&:hover {
								background: none;
							}
						}

						&.current-menu-item,
						&.current_page_item {

							> a {
								color: @indigo;
								background: rgba(61, 68, 112, 0.12);
							}
						}

						&:last-child {

							a {
								border-bottom: none;
							}
						}
					}
				}
			}

			a {
				color: @indigo;
				padding: 12px;
				border-radius: 100px;
				display: block;
				width: max-content;
				.transition;

				&:hover {
					background: rgba(61, 68, 112, 0.25);
				}
			}

			&.current-menu-item,
			&.current-menu-parent,
			&.current-menu-ancestor,
			&.current_page_item,
			&.current_page_ancestor {

				> a {
					color: @white;
					background: @indigo;

					&:hover {
						background: @indigo;
					}
				}
			}
		}
	}

	.menu_toggle {
		display: flex;
		flex-direction: column;
		gap: 5px;
		background: none;
		border: none;
		padding: 10px 8px;
		cursor: pointer;

		span {
			display: block;
			width: 22px;
			height: 2px;
			background: @black;
			border-radius: 2px;
			.transition;
		}
	}

	.mobile_menu {
		display: grid;
		grid-template-rows: 0fr;
		.transition;

		.mobile_menu_inner {
			overflow: hidden;
			min-height: 0;
		}

		.mobile_primary {
			list-style-type: none;
			margin: 56px 0 20px;
			padding: 0 8px;
			display: flex;
			flex-direction: column;
			gap: 28px;

			.sub-menu {
				display: none;
			}

			li {

				a {
					color: @black;
					.subheading_large;
				}

				&.current-menu-item,
				&.current-menu-parent,
				&.current-menu-ancestor,
				&.current_page_item,
				&.current_page_ancestor {

					> a {
						color: @sienna;
					}
				}
			}
		}

		hr {
			margin: 0 8px 20px;
			border-top: 1px solid @black;
			opacity: 1;
		}

		.mobile_menu_bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 8px;

			.language {
				display: flex;
				align-items: center;
				gap: 8px;
				color: @black;

				.lang-switch {
					position: relative;

					.lang-switch__toggle {
						background: none;
						border: none;
						padding: 0;
						cursor: pointer;
						color: @black;
						.body_medium;
					}

					.lang-switch__list {
						display: none;
						position: absolute;
						bottom: 100%;
						left: 0;
						margin: 0 0 12px;
						padding: 8px 0;
						list-style-type: none;
						background: @white;
						border: 1px solid @gray_100;
						border-radius: 8px;
						min-width: 140px;

						a {
							display: block;
							padding: 8px 16px;
							color: @black;
						}
					}

					&.open {

						.lang-switch__list {
							display: block;
						}
					}
				}
			}

			.login_link {
				display: flex;
				align-items: center;
				gap: 8px;
				color: @black;
				.body_medium;
			}
		}
	}

	&.menu_open {
		background: @white;

		.mobile_menu {
			grid-template-rows: 1fr;
		}

		.menu_toggle {

			span {

				&:nth-child(1) {
					transform: translateY(7px) rotate(45deg);
				}

				&:nth-child(2) {
					opacity: 0;
				}

				&:nth-child(3) {
					transform: translateY(-7px) rotate(-45deg);
				}
			}
		}
	}
}

.button {
	padding: 16px 24px;
	border-radius: 100px;
	position: relative;
	display: block;
	width: max-content;

	&.small {
		padding: 12px 24px;
	}

	&.icon {
		
		svg {
			margin-left: 8px;
		}
	}

	&.icon_only {
		padding: 16px;
	}

	&.no_focus {

		&:focus {

			&:after {
				content: none;
			}
		}
	}

	&:focus {

		&:after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			width: 102%;
			height: 102%;
			transform: translate(-50%, -50%) scaleY(1) scaleX(1);
			border: 2px solid @terracotta;
			border-radius: 100px;
		}
	}

	&.solid_orange {
		background: @accentkleur;
		color: @white;
		.transition;

		&:hover {
			background: @cornflower;
		}
	}

	&.solid_black {
		background: @black;
		color: @white;
		.transition;

		&:hover {
			background: @accentkleur;
		}
	}

	&.solid_blue {
		background: @indigo;
		color: @white;
		.transition;

		&:hover {
			background: @cornflower;
		}
	}

	&.solid_white {
		background: @white;
		color: @indigo;
		.transition;

		&:hover {
    		background: rgb(201, 198, 205);
		}
	}

	&.ghost_blue {
		border: 1px solid @indigo;
		background: transparent;
		color: @indigo;
		.transition;

		svg {

			path {
				.transition;
			}
		}

		&:hover {
			background: @indigo;
			color: @white;

			svg {

				path {
					fill: @white;
				}
			}
		}
	}

	&.ghost_white {
		border: 1px solid @white;
		background: transparent;
		color: @white;
		.transition;

		svg {

			path {
				.transition;
			}
		}

		&:hover {
			background: @white;
			color: @indigo;

			svg {

				path {
					fill: @indigo;
				}
			}
		}
	}

	&.text_blue {
		padding: 0;
		color: @indigo;
		position: relative;
		.transition;

		&:after {
			content: "";
			position: absolute;
			top: 125%;
			left: 0;
			width: 0%;
			height: 1px;
			background: @indigo;
			.transition;
		}

		&:hover {

			&:after {
				width: 100%;
			}
		}
	}

	&.text_white {
		padding: 0;
		color: @white;
		position: relative;
		.transition;

		&:after {
			content: "";
			position: absolute;
			top: 125%;
			left: 0;
			width: 0%;
			height: 1px;
			background: @white;
			.transition;
		}

		&:hover {

			&:after {
				width: 100%;
			}
		}
	}
}

.gform_required_legend {
	display: none;
}

.gform_fields {
	row-gap: 16px !important;

	.gfield_error {

		label {
			color: #7A3222 !important;
		}

		input {
			background: #FFC9C2 !important;
			border: 1px solid #B45C44 !important;
			border-radius: 8px !important;
			box-shadow: none !important;
			padding: 12px 16px !important;
			height: 100% !important;

			&::placeholder {
				color: #7A3222 !important;
			}
		}

		select {
			background: #FFC9C2 !important;
			border: 1px solid #B45C44 !important;
			border-radius: 8px !important;
			box-shadow: none !important;
			padding: 1.25px 16px !important;
			height: 100% !important;

			&::placeholder {
				color: #7A3222 !important;
			}
		}
	}

	.ginput_container_consent {

		label {
			.body_small !important;
			margin-bottom: 0px !important;
		}
	}

	label {
		.subheading_small !important;
		gap: 2px !important;
		margin-bottom: 2px !important;
	}

	input {
		background: @white !important;
		border: 1px solid @gray_100 !important;
		border-radius: 8px !important;
		box-shadow: none !important;
		padding: 12px 16px !important;
    	height: 100% !important;

		&::placeholder {
			color: @gray_300 !important;
			.body_small !important;
		}
	}

	textarea {
		background: @white !important;
		border: 1px solid @gray_100 !important;
		border-radius: 8px !important;
		box-shadow: none !important;
		padding: 12px 16px !important;

		&::placeholder {
			color: @gray_300 !important;
			.body_small !important;
		}
	}

	select {	
	    background: @white !important;
		border: 1px solid @gray_100 !important;
		border-radius: 8px !important;
		box-shadow: none !important;
		padding: 1.25px 16px !important;
    	height: 100% !important;
	}

	input[type='checkbox'] {
		padding: unset !important;
		border-radius: 2px !important;
	}
}

input[type='submit'] {
	background: @gray_300 !important;
	padding: 19px 24px !important;
	border-radius: 100px !important;
	.button_large !important;
}

section {
	background: @linnen;
}

.slider {
    margin-bottom: 100px;
}

.page_content {
	overflow-x: hidden;
	
	.page_div {

		&.intro {
			color: @black;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			height: 100vh;

			.background {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				height: 400px;
				width: 60%;
				z-index: 1;
				border-radius: 500px;
				.background_style;
			}

			.content {
				position: relative;
				z-index: 2;
			}
		}

		&.intro_tekst {
			color: @black;

			.tekst {

				p {
					margin-bottom: 0;
				}
			}

			.item {
				margin-top: 80px;

				.afbeelding {
					width: 100%;
					aspect-ratio: 4/3;
					object-fit: cover;
					object-position: center;
					border-radius: 8px;
				}
			}

			.fotoreel_box {

				.afbeelding {
					width: 100%;
					aspect-ratio: 1;
					object-fit: cover;
					border-radius: 8px;
				}
			}
		}

		&.product_intro {
			color: @white;
			.background_style;
			position: relative;
			
			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #000;
				opacity: .3;
			}

			.row {
				position: relative;
				z-index: 10;
			}

			.tekst {

				p {
					.body_large;
				}
			}

			.banner {
				position: absolute;
				bottom: 60px;
				right: 40px;
				max-width: 550px;
				z-index: 10;
				padding: 24px;
				border-radius: 12px;
				backdrop-filter: blur(5px);
				-webkit-backdrop-filter: blur(5px);

				.afbeelding {
					width: 110px;
					aspect-ratio: 1;
					object-fit: cover;
					object-position: center;
					border-radius: 12px;
				}
			}
		}

		&.logos {

			.slick-track {
				display: flex;
				align-items: center;
			}

			.afbeeldingen {
				display: flex;
				align-items: center;
				gap: 80px;

				.afbeelding {
					width: 100%;
        			padding: 0 40px;
				}
			}
		}

		&.persona_gallery {
			color: @black;

			.item {
				background: @blush;
				padding: 40px 16px;
				border-radius: 24px;

				&.witte_achtergrond {
					background: @white;
				}

				.afbeelding {
					display: block;
					margin: 0 auto;
					border-radius: 100px;
					width: 50%;
					aspect-ratio: 2/3;
					object-fit: cover;
				}
			}
		}

		&.onze_pijlers {
			color: @black;

			&.gradient_01 {
				background-image: @gradient_functional_1;
			}
			&.gradient_02 {
				background-image: @gradient_functional_2;
			}
			&.gradient_03 {
				background-image: @gradient_functional_3;
			}
			&.gradient_04 {
				background-image: @gradient_functional_4;
			}

			.afbeelding_box {
				position: relative;
				height: 100%;
				width: 100%;

				.logo_animation {
					position: absolute;
					top: 30%;
					left: 50%;
					transform: translate(-50%, -50%);
					mix-blend-mode: lighten;
					width: 250px;
				}

				.afbeelding {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: 24px;
				}
			}

			.item {
				padding: 24px 16px;
				border-top: 1px solid @black;

				&:last-child {
					border-bottom: 1px solid @black;
				}

				.tekst {

					p {
						margin: 0;
					}
				}
			}
		}

		&.impact {
			color: @black;

			.item {
				padding: 24px;
				width: 100%;
				aspect-ratio: 1;
				border-radius: 24px;
				max-height: 300px;
			}
		}

		&.uitgelicht_artikel {

			.item_box {
				padding: 40px;
				border-radius: 24px;

				.item {
					position: relative;

					.afbeelding {
						width: 50%;
						border-radius: 16px;	
					}

					h4 {
						color: @indigo;
					}
					
				}
			}
		}

		&.laatste_nieuws {

			.slick-list {
				overflow: visible;
			}
			
			.item {
				color: @black;

				&:hover {
					
					.afbeelding_box {
						position: relative;

						.svg_box {
							opacity: 1;
							transform: translate(0, 0);
						}

						.afbeelding {
							transform: scale(1.1);
						}
					}
				}

				.afbeelding_box {
					position: relative;
					overflow: hidden;
					border-radius: 12px;

					.svg_box {
						background: @accentkleur;
						width: 48px;
						height: 48px;
						border-radius: 48px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						z-index: 10;
						top: 10px;
						right: 10px;
						opacity: 0;
						transform: translate(-5px, 5px);
						.transition;

						svg {

							path {
								fill: @white;
							}
						}
					}

					.afbeelding {
						width: 100%;
						aspect-ratio: 3/2;
						object-fit: cover;
						.transition;
					}
				}

				.auteur {
					display: flex;
					align-items: center;
					gap: 12px;

					img {
						height: 48px;
						width: 48px;
						border-radius: 50%;
						object-fit: cover;
					}

					.body_small {
						color: @gray_300;
					}
				}
			}
		}

		&.testimonials {
			position: relative;

			&.blauwe_bolletjes {

				.slick-dots li.slick-active button, .slick-dots li:hover button {
					background: @indigo !important;
				}
			}

			&.lichte_tekst {
				color: @white;

				.slick-dots li button {
					color: @white;
					background: @white;
				}

				.slick-dots li.slick-active button, .slick-dots li:hover button {
					background: @accentkleur;
				}
			}

			.slick-list {
				overflow: visible;
			}

			.item {

				.inner_box {
					width: 58.33%;
					padding: 40px;
					border-radius: 24px;
					color: @black;	
				}

				.afbeelding {
					width: 41.66%;
					max-height: 400px;
					object-fit: cover;
					border-radius: 24px;
				}
			}

			.button {
				position: absolute;
				top: 100%;
				left: 50%;
				transform: translate(-50%, 75px);
			}
		}

		&.intro_klantcase_img {
			height: 60vh;
			margin-bottom: 60px;
			.background_style;
		}

		&.intro_klantcase {
			color: @black;
			margin-bottom: 50px;

			.leestijd {
				width: max-content;
				background: @lavender;
				color: @white;
				padding: 10px;
				border-radius: 4px;
			}

			.auteur {
				display: flex;
				align-items: center;
				gap: 12px;

				img {
					height: 48px;
					width: 48px;
					border-radius: 50%;
					object-fit: cover;
				}

				.body_small {
					color: @gray_300;
				}
			}

			.socials {

				.body_small {
					color: @gray_300;
				}

				a {

					svg {

						path {
							.transition;
						}
					}

					&:hover {

						svg {

							path {
								fill: @indigo;
							}
						}
					}
				}
			}
		}

		&.intro_artikel {
			padding: 200px 0 100px 0;
			background: @blush;

			.afbeelding {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 24px;
			}

			.leestijd {
				width: max-content;
				background: @haze;
				color: @indigo;
				padding: 10px;
				border-radius: 4px;
			}

			.auteur {
				display: flex;
				align-items: center;
				gap: 12px;

				img {
					height: 48px;
					width: 48px;
					border-radius: 50%;
					object-fit: cover;
				}

				.body_small {
					color: @gray_300;
				}
			}

			.socials {

				.body_small {
					color: @gray_300;
				}

				a {

					svg {

						path {
							.transition;
						}
					}

					&:hover {

						svg {

							path {
								fill: @indigo;
							}
						}
					}
				}
			}
		}

		&.calculator {
			color: @black;

			.box {
				background: @white;
				border-radius: 16px;
				padding: 80px;
			}

			.calc_form {

				label {

					span {
						color: @accentkleur;
					}
				}

				input[type="number"] {
					width: 100%;
					background: @white;
					border: 1px solid @gray_100;
					border-radius: 8px;
					padding: 14px 16px;
					.body_medium;

					&:focus {
						outline: none;
						border-color: @indigo;
					}

					&::-webkit-outer-spin-button,
					&::-webkit-inner-spin-button {
						-webkit-appearance: none;
						margin: 0;
					}
				}

				.euro_veld {
					position: relative;

					span {
						position: absolute;
						top: 50%;
						left: 16px;
						transform: translateY(-50%);
					}

					input {
						padding-left: 40px;
						text-align: right;
					}
				}

				input[type="range"] {
					width: 100%;
					accent-color: @indigo;
					background: #e6e6f2;
					border-radius: 4px;
					cursor: pointer;
				}
			}

			.resultaat {
				overflow: hidden;

				.resultaat_top {
					background: @gray_100;
					color: @black;
					padding: 40px;
					.transition;
				}

				.button {
					background: @gray_300;
				}

				&.ingevuld {

					.resultaat_top {
						background: @cornflower;
						color: @white;
					}

					.button {
						background: @indigo;
					}
				}

				.resultaat_bottom {
					background: #DEE5FF;
					padding: 40px;

					.scheiding {
						color: @gray_300;
						margin: 0 8px;
					}

					.disclaimer {
						color: @gray_400;
						font-size: 12px !important;
						line-height: 160% !important;
						max-width: 260px;
					}
				}
			}
		}

		&.faq {
			color: @black;

			.item {
				border: 1px solid @black;
				color: @black;
				border-radius: 8px;
				padding: 24px 16px;
				cursor: pointer;

				.icon {
					position: relative;
					width: 16px;
					height: 16px;

					span {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 16px;
						height: 2px;
						background: @black;
						border-radius: 2px;
						.transition;

						&:last-child {
							transform: translate(-50%, -50%) rotate(90deg);
						}
					}
				}

				&.active {

					.icon {

						span {

							&:last-child {
								transform: translate(-50%, -50%) rotate(0deg);
							}
						}
					}

					.antwoord {
						grid-template-rows: 1fr;
						opacity: 1;
						margin-top: 8px;
					}
				}

				.antwoord {
					display: grid;
					grid-template-rows: 0fr;
					opacity: 0;
					margin-top: 0;
					transition: grid-template-rows .4s ease-in-out, opacity .4s ease-in-out, margin-top .4s ease-in-out;

					.antwoord_inner {
						overflow: hidden;
						min-height: 0;
					}

					p {
						margin-bottom: 0;
						.body_medium;
					}
				}
			}
		}

		&.onboarding {

			.tekst {

				p {
					.body_medium;
					margin-bottom: 0;
				}
			}

			.item {
				background: @haze;
				border-radius: 8px;
				padding: 40px 24px;
			}

			.button {
				margin: auto;
			}
		}

		&.compliance_overzicht {

			.item {
				padding: 24px;
				color: @indigo;
				border-radius: 8px;
				min-height: 120px;
				max-height: 120px;

				.tekst {

					p {
						.body_medium;
						margin-bottom: 0;
					}
				}
			}

			.button {
				margin: auto;
			}
		}

		&.tarieven {
			color: @black;

			.toggle {
				background: @white;
				width: max-content;
				margin: auto;
				padding: 6px 8px;
				border-radius: 100px;
				display: flex;
				align-items: center;
				gap: 4px;

				.button {
					padding: 11px 11.2px;
					color: @gray_300;
					background: transparent;
					border: none;
					.body_medium;
					.transition;

					&.active {
						padding: 11px 16px;
						background: @indigo;
						color: @white;
						.subheading_small;
					}
				}
			}

			.item,
			.item_instelling {
				background: @white;
				padding: 24px;
				border-radius: 16px;
				border: 1px solid @gray_100;
				position: relative;

				&.meest_gekozen {
					background: @gradient_functional_1;
					border: none;

					.label {
						position: absolute;
						top: 24px;
						right: 24px;
						background: #F4F1A2;
						border-radius: 12px;
						padding: 8px 24px;
					}
				}

				.features_box {
					margin-top: 80px;

					.icon {
						width: 24px;
						height: 24px;
    					aspect-ratio: 1;
						border-radius: 24px;
						background: @white;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.cta_box {
				background: @blush;
				padding: 40px 60px;
				border-radius: 24px;

				.tekst {

					p {
						margin: 0;
					}
				}

				.buttons {
					width: max-content;
					max-width: 100%;

					.button {
						display: block;
						width: max-content;
						min-width: 100%;
						text-align: center;
					}
				}
			}

			.disclamer {
				padding: 0 60px;

				.info {
					color: @gray_400;
					font-size: 12px !important;
					line-height: 160% !important;
				}
			}
		}

		&.promo_advies_gesprek {

			.cta_box {
				border-radius: 8px;
				padding: 60px;

				.content {
					max-width: 60%;

					.tekst {

						p {
							margin: 0;
						}
					}
				}

				.button {
					width: max-content;
					margin-left: auto;
					text-align: center;
				}
			}
		}

		&.team {

			h5 {
				color: @indigo;
			}

			.item {

				.img_box {
					background: @lavender;
					width: 100%;
					border-radius: 24px;

					img {
						width: 100%;
						object-fit: contain;
					}
				}

				.body_medium {
					color: @gray_300;
				}
			}
		}

		&.formulier {
			color: @black;
			position: relative;
			
			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 50%;
				height: 100%;
				background: @gradient_functional_1;
			}

			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				width: 50%;
				height: 100%;
				background: @white;
			}

			.row {
				position: relative;
				z-index: 10;
			}
		}

		&.samenvatting {
			background: @linnen;
			color: @black;

			.afbeelding { 
				width: 100%;
				border-radius: 24px;
				height: 460px;
				object-fit: cover;
			}

			.content {
				height: 100%;
				border-top: 1px solid @black;
				border-bottom: 1px solid @black;

				.titel {
					color: @gray_300;
				}

				.item {
					border-bottom: 1px solid @black;

					&:first-child {
					border-top: 1px solid @black;
					}

					&:last-child {
						border-bottom: none;
					}
				}
			}
		}

		&.tekst_afbeelding {
			background: @linnen;
			color: @black;

			.mobile_box {
				background: @blush;
				padding: 24px;
				border-radius: 24px;
			}

			.afbeelding {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 16px;
			}

			.video_box {
				position: relative;
				width: 100%;
				aspect-ratio: 16 / 9;
				border-radius: 16px;
				overflow: hidden;
				background: @black;

				.video_poster {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					padding: 0;
					border: none;
					background: none;
					cursor: pointer;

					img {
						display: block;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}

					.video_play {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 72px;
						height: 72px;
						border-radius: 100px;
						background: rgba(255, 255, 255, 0.9);
						display: flex;
						align-items: center;
						justify-content: center;
						.transition;

						svg {
							/* Optische centrering van de driehoek */
							margin-left: 4px;
						}
					}

					&:hover,
					&:focus-visible {

						.video_play {
							background: @white;
							transform: translate(-50%, -50%) scale(1.08);
						}
					}
				}

				iframe {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border: 0;
				}
			}

			h2 {
				color: @indigo;
			}

			.tekst {

				p {
					margin: 0;
				}
			}

			.button {
				width: 100%;
				text-align: center;
			}
		}

		&.tekstblok {
			color: @black;

			.tekst {

				p {
					margin: 0;
					.body_medium;
				}
			}
		}

		&.quote {

			.quote_box {
				padding: 80px 80px 40px 80px;
				background: @gradient_functional_1;
				border-radius: 24px;
			}
		}

		&.afbeelding {

			.afbeelding {
				width: 100%;
				object-fit: cover;
				border-radius: 24px;
			}
		}

		&.overzichtpagina {

			.filter {

				.filter_button {
					background: transparent;
					border: 1px solid @black;
					border-radius: 12px;
					padding: 14px 24px;
					color: @black;
					cursor: pointer;
					.body_medium;
					.transition;

					&:hover {
						background: rgba(155, 143, 191, 0.25);
					}

					&.active {
						background: @lavender;
						border-color: @lavender;
						.subheading_small;
					}
				}
			}

			.filter_dropdown {
				position: relative;

				.filter_dropdown_toggle {
					width: 100%;
					background-color: @white;
					border: none;
					border-radius: 12px;
					padding: 18px 56px 18px 24px;
					color: @gray_300;
					text-align: left;
					cursor: pointer;
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16' fill='none'%3E%3Cpath d='M2 6l4-4 4 4' stroke='%231F1E1D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 10l4 4 4-4' stroke='%231F1E1D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
					background-repeat: no-repeat;
					background-position: right 24px center;
					.body_medium;
				}

				.filter_dropdown_list {
					display: none;
					position: absolute;
					top: calc(~"100% + 8px");
					left: 0;
					right: 0;
					flex-direction: column;
					gap: 24px;
					background: @white;
					border-radius: 12px;
					padding: 32px 24px;
					box-shadow: 0 16px 40px rgba(31, 30, 29, 0.12);
					z-index: 50;
				}

				&.open {

					.filter_dropdown_list {
						display: flex;
					}
				}

				.filter_optie {
					display: flex;
					align-items: center;
					gap: 12px;
					background: none;
					border: none;
					padding: 0;
					color: @gray_300;
					text-align: left;
					cursor: pointer;
					.body_medium;

					&:before {
						content: "";
						width: 20px;
						height: 20px;
						flex-shrink: 0;
						border: 2px solid @gray_300;
						border-radius: 4px;
					}

					&.active {
						color: @black;
						.subheading_small;

						&:before {
							border-color: @black;
							background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%231F1E1D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
						}
					}
				}
			}

			.omschrijving {
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.item {
				color: @black;

				&:hover {
					
					.afbeelding_box {
						position: relative;

						.svg_box {
							opacity: 1;
							transform: translate(0, 0);
						}

						.afbeelding {
							transform: scale(1.1);
						}
					}
				}

				.afbeelding_box {
					position: relative;
					overflow: hidden;
					border-radius: 12px;

					.svg_box {
						background: @accentkleur;
						width: 48px;
						height: 48px;
						border-radius: 48px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						z-index: 10;
						top: 10px;
						right: 10px;
						opacity: 0;
						transform: translate(-5px, 5px);
						.transition;

						svg {

							path {
								fill: @white;
							}
						}
					}

					.afbeelding {
						width: 100%;
						aspect-ratio: 3/2;
						object-fit: cover;
						.transition;
					}
				}

				.auteur {
					display: flex;
					align-items: center;
					gap: 12px;

					img {
						height: 48px;
						width: 48px;
						border-radius: 50%;
						object-fit: cover;
					}

					.body_small {
						color: @gray_300;
					}
				}
			}
		}
	}
}

footer {
	background: @blush;
	color: @black;

	.breadcrumbs {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 12px;

		a {
			display: flex;
			align-items: center;
			gap: 8px;
			color: @gray_300;
			.body_small;
			.transition;

			svg {

				path {
					.transition;
				}
			}

			&:hover {
				color: @indigo;

				svg {

					path {
						fill: @indigo;
					}
				}
			}
		}

		.current {
			color: @black;
			.body_small;
		}

		.scheiding {
			flex-shrink: 0;
		}
	}

	.logo {
		width: 200px;
	}

	ul {
		list-style-type: none;
		padding: 0;
		margin: 0;

		li {

			a {
				color: @black;
				font-family: 'Inter_Regular' !important;
			}
		}
	}
	
	hr {
		color: @black;
		opacity: 1;
	}
}
/*---------------------------------------------------------------------- Responsive ----------------------------------------------------------------------*/

@media only screen and (min-width: 960px) and (max-width: 1199px) {

}

@media only screen and (max-width: 992px) {

	#header {
		top: 28px;
		width: 90%;
		margin-left: 5%;
		padding: 17px 12px;
		.transition;

		.navbar-brand {
			height: 32px;
		}
	}

	.slider,
	.slider_mobile {
		margin-bottom: 100px;
	}

	.page_content {

		.page_div {

			&.intro {
				display: unset;
				align-items: unset;
				justify-content: unset;
				position: relative;
				height: unset;

				.before {
					font-size: 28px !important;
				}

				.background {
					top: 0%;
					left: 50%;
					transform: translate(-50%, 0%);
					height: 400px;
					width: 60%;
				}

				.button {
					width: 100%;
					text-align: center;
				}
			}

			&.product_intro {
				color: @black;
				background-image: none !important;
				
				&:after {
					content: none;
				}
				.banner {
					display: none !important;
				}

				.mobile_img {
					height: 80vh;
					.background_style;
					position: relative;
			
					&:after {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: #000;
						opacity: .3;
					}
				}
			}

			&.intro_tekst {

				.item {
					margin-top: 40px;
				}

				.button {
					width: 100%;
					text-align: center;
				}
			}

			&.intro_artikel {
				padding: 0 0 50px 0;

				.mobile_img {
					height: 80vh;
					.background_style;
				}

				.auteur {
					width: 100%;
					gap: 24px;

					img {
						height: 80px;
						width: 80px;
					}
				}

				.socials {
					width: 100%;

					a {
						margin-top: 24px;

						svg {

							path {
								fill: @black;
							}
						}
					}
				}
			}

			&.onze_pijlers {

				.afbeelding_box {
					height: unset;
					aspect-ratio: 1;
				}

				.item {
					padding: 30px 16px;
				}
			}

			&.quote {

				.quote_box {
					padding: 40px 24px;
				}
			}

			&.impact {
				color: @black;

				.afbeelding {
					width: 100%;
					aspect-ratio: 1;
					border-radius: 24px;
					object-fit: cover;
				}

				.item {
					padding: 40px 24px;
					aspect-ratio: unset;
				}

				.waarde_achtervoegsel {
					font-size: 40px !important;
					line-height: 40px !important;
				}
			}

			&.uitgelicht_artikel {

				.item_box {
					padding: 24px;

					.item {

						.afbeelding {
							width: 100%;
							aspect-ratio: 1;
							object-fit: cover;	
						}

						.button {
							margin: auto;
						}
					}
				}
			}

			&.logos {

				.afbeeldingen {

					.afbeelding {
        				padding: 0 24px;
						aspect-ratio: 3/2;
						object-fit: contain;
					}
				}
			}

			&.laatste_nieuws {
				
				.item {

					&:hover {
						
						.afbeelding_box {

							.afbeelding {
								transform: scale(1);
							}
						}
					}

					.afbeelding_box {
						position: relative;
						overflow: hidden;
						border-radius: 12px;

						.svg_box {
							background: @white;
							opacity: 1;
							transform: translate(0, 0);
							.transition;

							svg {

								path {
									fill: @black;
								}
							}
						}
					}

					.auteur {
						display: flex;
						align-items: center;
						gap: 12px;

						img {
							height: 48px;
							width: 48px;
							border-radius: 50%;
							object-fit: cover;
						}

						.body_small {
							color: @gray_300;
						}
					}
				}
			}

			&.testimonials {

				.item {

					.inner_box {
						width: 100%;
					}

					.afbeelding {
						width: 100%;
						max-height: unset;
						aspect-ratio: 1;
					}
				}

				.button {
					position: relative;
					top: unset;
					left: unset;
					transform: translate(0, 0);
				}
			}

			&.intro_klantcase_img {
				height: 40vh;
				margin-bottom: 40px;
			}

			&.intro_klantcase {
				margin-bottom: 25px;

				.auteur {
					gap: 24px;

					img {
						height: 80px;
						width: 80px;
					}
				}

				.socials {

					a {
						margin-top: 24px;

						svg {

							path {
								fill: @black;
							}
						}
					}
				}
			}

			&.calculator {

				.box {
					padding: 0px;
					border-radius: 16px 16px 0 0;
					overflow: hidden;
				}

				.calc_form {
					margin-bottom: 40px;
				}

				.resultaat {

					.resultaat_bottom {
						padding: 24px;
					}
				}
			}

			&.tarieven {

				.items {
					position: relative;

					.item,
					.item_instelling {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
    					min-height: max-content;
						z-index: 10;

						&.first {
							position: relative;
						}
					}
				}

				.cta_box {
					padding: 40px 24px;
				}

				.disclamer {
					padding: 0;
				}
			}

			&.promo_advies_gesprek {

				.cta_box {
					padding: 40px 24px;

					.content {
						max-width: 100%;
					}

					.button {
						width: 100%;
					}
				}
			}

			&.formulier {
				
				&:before {
					content: none;
				}

				&:after {
					content: none;
				}

				.upper {
					background: @gradient_functional_1;
					padding: 50px 0;
				}

				.lower {
					background: @white;
					padding: 50px 0;
				}
			}

			&.samenvatting {

				.afbeelding { 
					height: unset;
					aspect-ratio: 1;
				}

				.content {
					height: 100%;
					border-top: 1px solid @black;
					border-bottom: 1px solid @black;

					.titel {
						color: @gray_300;
					}

					.item {
						border-bottom: 1px solid @black;

						&:first-child {
						border-top: 1px solid @black;
						}

						&:last-child {
							border-bottom: none;
						}

						.titel {
        					width: 50%;
						}
					}
				}
			}
		}
	}

	footer {

		.logo {
			width: 80%;
		}
	}
}

@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 480px) {

}