@import url("reset.less");

/*------------------------------------------------------------------------ Global ------------------------------------------------------------------------*/

#topbar {
	background: @lichterblauw;
	text-align: center;
	padding: .4rem 0;

	p {
		margin: 0;
		font-family: 'Poppins - Regular' !important;
		font-size: .8rem !important;
		color: @donkerblauw;

		strong {
			font-family: 'Poppins - Bold' !important;

			a {
				color: @donkerblauw;
				text-decoration: underline;

				&:hover {
					opacity: .7;
				}
			}
		}
	}
}

#header {
	position: fixed;
	top: 2rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
	background: transparent;
	width: 100%;
	max-width: 1320px;
	padding: 1rem 2rem;
	margin-bottom: 20px;
	.transition;

	.logo {
		width: 150px;
	}

	&.scrolled {
		top: 1rem;
		width: 90%;
		background: @white;
		.shadow_style;
		.transition;
	}
}

.primaire_button {
	background: @black;
	color: @white;
	padding: .5rem 1.5rem;
    border-radius: 50px;
	.transition;

	&:hover {
		background: @oranje;
		color: @white;
	}
}

.secundaire_button {
	color: @white;
	background: @black;
	padding: .5rem 1.5rem;
    border-radius: 50px;

	&.oranje {
		color: @oranje;
	}

	&.icon {
		display: flex;
		align-items: center;
		gap: .25rem;

		i {
			font-size: .8rem !important;
			transform: translateY(1px);
		}
	}

	&.outline {
		background: transparent;
		border: 1px solid @black;
		color: @black;
		padding: .5rem 1rem;
		.transition;

		&:hover {
			background: @black;
			color: @white;
		}
	}
}

.link_button {
	color: @donkerblauw;

	&.icon {
		display: flex;
		align-items: center;
		gap: .25rem;

		i {
			font-size: .8rem !important;
			transform: translateY(1px);
		}
	}
}

.stars {

	i {
		color: #F3C220;
	}
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
	background: @white !important;
    color: @donkerblauw !important;
    border: 1px solid #dad8d9 !important;
    border-radius: 0px !important;
    padding: 24px 12px !important;
    box-shadow: none !important;

	&::placeholder {
		color: @neutral !important;
		.small;
		line-height: 100% !important;
	}
}

select {
	background: @white !important;
    color: @donkerblauw !important;
    border: 1px solid #dad8d9 !important;
    border-radius: 0px !important;
    padding: 12px !important;
    box-shadow: none !important;
	
	&.large {
		color: @neutral !important;
		.small;
		line-height: 100% !important;
	}
}

.gchoice_13_5_0,
.gchoice_13_5_1 {
	border: 1px solid #000 !important;
	border-radius: 50px !important;
	padding: 10px !important;
	display: flex !important;
	align-items: center !important;
	gap: 0rem !important;
	transition: opacity .2s, border-color .2s;
	cursor: pointer;
	position: relative;

	label {
		cursor: pointer;
		flex: 1;
	}

	.gfield-choice-input {
		accent-color: #000 !important;
	}

	&.is-unselected {
		opacity: 0.4 !important;
		border-color: #ccc !important;
	}
}

input[type="submit"] {
	background: @lichterblauw !important;
	color: @black !important;
	padding: .5rem 1rem !important;
	border-radius: 0px !important;
	font-family: 'Poppins - Bold' !important;
}

body {
	overflow-x: hidden;
}

.page_kolom1 {
	padding: 200px 0;
	color: @black;
}

.page_content {
	background: @white;

	.page_div {

		&.intro {
			background: @white;
			color: @black;

			p {
				a {
					color: @black;
				}
			}

			.primaire_button {
				background: @black;
				color: @white;
				border-radius: 50px;
			}
			
			.intro__tekst {
				
				a {
					text-decoration: underline;
				}
			}

			.intro__content {

				h1 {
					color: @black;
					margin-bottom: 1rem !important;
				}

				.intro__usps {

					.item {

						i {
							font-size: 1.5rem !important;
							color: @oranje;
						}
					}
				}
			}

			.intro__media {
				position: relative;
				padding-right: 1.5rem;
				padding-bottom: 1.5rem;

				@media (max-width: 991px) {
					padding-right: 0;
					padding-bottom: 0;
				}

				.intro__media-bg {
					position: absolute;
					top: -2.5rem;
					right: 0;
					bottom: -1.5rem;
					left: -4%;
					background: #fdff8f;
					z-index: 0;

					@media (max-width: 991px) {
						display: none;
					}
				}

				.intro__media-card {
					position: relative;
					z-index: 1;

					.intro__badge {
						position: absolute;
						top: 1rem;
						left: 1rem;
						background: @white;
						padding: .4rem .75rem;
						z-index: 2;

						span {
							font-family: 'Poppins - Bold' !important;
							font-size: .8rem;
						}

						svg {
							flex-shrink: 0;
						}
					}

					.intro__afbeelding {
						width: 100%;
						display: block;
						aspect-ratio: 4/3;
						object-fit: cover;
					}

					.intro__video-wrap {
						position: relative;

						video {
							width: 100%;
							display: block;
							aspect-ratio: 4/3;
							object-fit: cover;
						}

						.intro__play {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							background: rgba(0, 0, 0, 0.4);
							border: none;
							width: 3.5rem;
							height: 3.5rem;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							z-index: 2;
							cursor: pointer;
							.transition;

							i {
								color: @white;
								font-size: 1.5rem !important;
								transform: translateX(2px);
							}

							&:hover {
								background: rgba(0, 0, 0, 0.65);
							}
						}
					}

					.intro__youtube-wrap {
						position: relative;
						width: 100%;
						overflow: hidden;
						cursor: pointer;

						.intro__youtube-thumb {
							width: 100%;
							display: block;
							aspect-ratio: 16/9;
							object-fit: cover;
						}

						.intro__youtube-play {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							background: transparent;
							border: 2px solid @white;
							width: 4rem;
							height: 4rem;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							cursor: pointer;
							.transition;

							i {
								color: @white;
								font-size: 1.5rem !important;
								transform: translateX(2px);
							}

							&:hover {
								background: rgba(255, 255, 255, 0.15);
							}
						}

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

			&.versie_2 {

				h3 {

					strong {
						background: @oranje;
						color: @white;
						padding: 4px .5rem;
						font-size: 1.5rem !important;
						line-height: 120% !important;
						font-family: 'Roboto Slab - Bold' !important;
					}
				}

				p {

					strong {
						color: @oranje;
					}
				}
			}
		}

		&.cta_blok {

			&.video {
				transform: scale(.85);
			}

			.frame {
				padding: 2rem;
			}

			.multiple {
				display: flex;

				.afbeelding {
					
					width: 50%;
					aspect-ratio: 1;

					&:last-child {
						transform: translateX(-5%);
					}
				}
			}

			.afbeelding {
				width: 100%;
				aspect-ratio: 6/5;
				object-fit: cover;
			}

			.video_wrapper {
				
				.video {
					width: 100%;
				}
			}

			.tekst {

				p {
					margin: 0;
				}

				ul {
					margin-top: 1rem;
					margin-bottom: 1rem;
					padding: 0;
					list-style-type: none;

					li {
						position: relative;
						margin-left: 30px;
						margin-bottom: .5rem;

						&:after {
							content: '';
							position: absolute;
							top: 50%;
							left: 0;
							width: 20px;
							height: 20px;
    						transform: translate(-30px, -40%);
							background-image: url('../images/check.svg');
							background-size: contain;
							background-repeat: no-repeat;
						}
					}
				}
			}
		}

		&.tekst_afbeelding {
			color: @black;

			.row > [class*="col-"] {
				@media (max-width: 991px) {
					&:not(:last-child) {
						margin-bottom: 2rem;
					}
				}
			}

			.tekst {
				
				h1, h2, h3, h4, h5, h6 {
					margin-bottom: 1rem !important;
				}
				
				li::marker {
					   color: #d1d5db;
				}

				&.margin_left {
					
					p, ul {
						margin-left: 100px;
					
						em {
					
							&:first-child {
								position: absolute;
								transform: translateX(-100px)translateY(100%);
								font-size: 2rem !important;
								line-height: 2rem !important;
								.bold;
							}
						}
					}
				}
			}

			p {

				&:last-child {
					margin-bottom: 0;
				}
			}

			.afbeelding {
				width: 80%;
				margin-left: 10%;

				&.groene_box {
					transform: scale(1.15) translateX(15%) translateY(-15%);

					@media (max-width: 991px) {
						transform: none;
					}
				}
			}

			.video-wrap {
				position: relative;

				video {
					width: 50%;
					margin-left: 25%;
					position: relative;

					@media (max-width: 991px) {
						width: 100%;
						margin-left: 0;
					}
				}
	
				.v-overlay-play {
					background: rgba(0, 0, 0, 0.35);
					backdrop-filter: blur(2px);
					padding: 10px;
					border: none;
					
					position: absolute;
					top: 50%;
					left: 50%;
					z-index: 99;
					transform: translate(-50%, -50%);

					i {
						color: @white;
						font-size: 4rem !important;
					}

					&.is-hidden {
						opacity: 0;
						pointer-events: none;
						.transition;
					}
				}

				.v-controls {
					position: absolute;
					bottom: 0%;
					left: 27%;
					width: 46%;
					transform: translateY(-50%);
					z-index: 99;

					.v-toggle {
						color: @white;
						border: none;
						background: none;
					}

					.v-progress {
						-webkit-appearance: none;
						background: none;
						width: 88%;
						margin-right: 2%;
						position: relative;

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

						&::-webkit-slider-thumb {
							-webkit-appearance: none;
							appearance: none;
							width: .5rem;
							height: .5rem;
							background: #fff;
							border-radius: 50%;
							cursor: pointer;
						}
					}

					.v-time {
						width: 100%;
						color: @white;
						.small;
					}

					.v-mute {
						color: @white;
						border: none;
						background: none;
					}

					.v-volume {
						-webkit-appearance: none;
						background: none;
						width: 50px;
						position: relative;

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

						&::-webkit-slider-thumb {
							-webkit-appearance: none;
							appearance: none;
							width: .5rem;
							height: .5rem;
							background: #fff;
							border-radius: 50%;
							cursor: pointer;
						}
					}

					@media (max-width: 991px) {
						left: 0;
						width: 100%;
					}
				}
			}

			.text_box {
				background: #004e48;
				color: @white;
				padding: 5rem;
				position: relative;
				z-index: 1;

				@media (max-width: 991px) {
					padding: 2rem;
				}

				.tekst {

					ul {
						padding: 0;
						list-style-type: none;
		
						li {
							margin-left: 2rem;
							margin-top: 1rem;
							position: relative;

							&:after {
								content: '';
								position: absolute;
								top: 0;
								left: 0;
								width: 20px;
								height: 20px;
								transform: translate(-2rem, .5rem);
								background-image: url('../images/check.svg');
								background-size: contain;
							}
						}
					}
				}
			}
		}

		&.tekst_afbeelding_2 {
			color: @black;
			background-color: #004e480d;

			.tekst {

				li::marker {
					   color: #d1d5db;
				}
				
				&.margin_left {
					
					p, ul {
						margin-left: 100px;
					
						em {
					
							&:first-child {
								position: absolute;
								transform: translateX(-100px)translateY(100%);
								font-size: 2rem !important;
								line-height: 2rem !important;
								.bold;
							}
						}
					}
				}
			}

			a {
				color: @black;
				text-decoration: underline;
			}

			p {

				&:last-child {
					margin-bottom: 0;
				}
			}

			.afbeelding {
				width: 100%;
			}

			.video-wrap {
				position: relative;

				video {
					width: 50%;
					margin-left: 25%;
					position: relative;
				}

				.v-overlay-play {
					background: rgba(0, 0, 0, 0.35);
					backdrop-filter: blur(2px);
					padding: 10px;
					border: none;

					position: absolute;
					top: 50%;
					left: 50%;
					z-index: 99;
					transform: translate(-50%, -50%);

					i {
						color: @white;
						font-size: 4rem !important;
					}

					&.is-hidden {
						opacity: 0;
						pointer-events: none;
						.transition;
					}
				}

				.v-controls {
					position: absolute;
					bottom: 0%;
					left: 27%;
					width: 46%;
					transform: translateY(-50%);
					z-index: 99;

					.v-toggle {
						color: @white;
						border: none;
						background: none;
					}

					.v-progress {
						-webkit-appearance: none;
						background: none;
						width: 88%;
						margin-right: 2%;
						position: relative;

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

						&::-webkit-slider-thumb {
							-webkit-appearance: none;
							appearance: none;
							width: .5rem;
							height: .5rem;
							background: #fff;
							border-radius: 50%;
							cursor: pointer;
						}
					}

					.v-time {
						width: 100%;
						color: @white;
						.small;
					}

					.v-mute {
						color: @white;
						border: none;
						background: none;
					}

					.v-volume {
						-webkit-appearance: none;
						background: none;
						width: 50px;
						position: relative;

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

						&::-webkit-slider-thumb {
							-webkit-appearance: none;
							appearance: none;
							width: .5rem;
							height: .5rem;
							background: #fff;
							border-radius: 50%;
							cursor: pointer;
						}
					}
				}
			}

			.text_box {
				background: transparent;
				color: @black;
				padding: 1rem;

				.tekst {

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

						li {
							// margin-left: 2rem;
							// margin-top: 1rem;
							// position: relative;

							// &:after {
							// 	content: '';
							// 	position: absolute;
							// 	top: 0;
							// 	left: 0;
							// 	width: 20px;
							// 	height: 20px;
							// 	transform: translate(-2rem, .5rem);
							// 	background-image: url('../images/check.svg');
							// 	background-size: contain;
							// }
						}
					}
				}
			}
		}

		

		&.tekst_afbeelding_2.is-variant {
			background-color: transparent;
			padding: 0 !important;
			overflow: hidden;

			.ta2-variant__afbeelding {
				width: 100%;
				height: 100%;
				min-height: 400px;
				object-fit: cover;
				display: block;
				padding-bottom: 10%;
			}

			.ta2-variant__box {
				background: @donkerblauw;
				color: @white;
				padding: 4rem;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				margin-top: 10%;
				margin-left: -3rem;
				position: relative;
				z-index: 1;

				h2, h3, h4 {
					color: @white;
				}

				p, div {
					color: @white;
				}

				.secundaire_button.outline {
					background: transparent;
					border: 1px solid @white;
					color: @white;
					padding: .5rem 1.5rem;
					border-radius: 50px;
					.transition;
					display: inline-block;

					&:hover {
						background: @white;
						color: @donkerblauw;
					}
				}
			}

			&.is-gele-box {

				.ta2-variant__box {
					background: #fdff8f;
					color: @black;

					h2, h3, h4 {
						color: @black;
					}

					p, div {
						color: @black;
					}

					.secundaire_button.outline {
						border-color: @black;
						color: @black;

						&:hover {
							background: @black;
							color: @white;
						}
					}
				}
			}

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

				.ta2-variant__afbeelding {
					min-height: 280px;
					padding-bottom: 0;
				}

				.ta2-variant__box {
					padding: 2.5rem;
					margin-top: 0;
					margin-left: 0;
				}
			}
		}

		&.kolom {
			color: @black;

			.tekst {

				a {
					color: @black;
					text-decoration: underline;
				}
			}
			
			h1, h2, h3, h4, h5, h6 {
				margin-bottom: 1rem !important;
			}

			.kolom__avatars {
				display: flex;
				justify-content: center;

				.kolom__avatar {
					width: 110px;
					height: 110px;
					border-radius: 50%;
					object-fit: cover;
					object-position: center top;
					border: 4px solid @white;
					margin-left: -22px;
					flex-shrink: 0;

					&:first-child {
						margin-left: 0;
					}
				}
			}
		}

		&.onze_experts {
			background: @white;
			color: @black;

			.experts {
				position: relative;

				.item {
					background: @lichterblauw;
					width: max-content;
					padding: 12px 30px 12px 12px;
					
					cursor: pointer;
	
					img {
						width: 60px;
						aspect-ratio: 1;
						object-fit: cover;
						object-position: 50%;
					}

					&.rechtsom {
						.transition;
	
						&:hover {
							position: relative;
							z-index: 10;
							transform: rotate(-5deg) scale(1.1);
							.soft_shadow_style;
						}
					}

					&.linksom {
						.transition;
	
						&:hover {
							position: relative;
							z-index: 10;
							transform: rotate(5deg) scale(1.1);
							.soft_shadow_style;
						}
					}
				}

				&.enkel {

					.item {
						width: 100%;
		
						img {
							width: 124px;
						}
					}
				}
			}
		}

		&.video,
		&.video_2 {
			color: @black;

			.video-wrap {
				position: relative;

				video {
					width: 100%;
					
					position: relative;
				}
	
				.v-overlay-play {
					background: rgba(0, 0, 0, 0.35);
					backdrop-filter: blur(2px);
					padding: 10px;
					border: none;
					
					position: absolute;
					top: 50%;
					left: 50%;
					z-index: 99;
					transform: translate(-50%, -50%);

					i {
						color: @white;
						font-size: 4rem !important;
					}

					&.is-hidden {
						opacity: 0;
						pointer-events: none;
						.transition;
					}
				}

				.v-controls {
					position: absolute;
					bottom: 0%;
					left: 2%;
					width: 96%;
					transform: translateY(-50%);
					z-index: 99;

					.v-toggle {
						color: @white;
						border: none;
						background: none;
					}

					.v-progress {
						-webkit-appearance: none;
						background: none;
						width: 88%;
						margin-right: 2%;
						position: relative;

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

						&::-webkit-slider-thumb {
							-webkit-appearance: none;
							appearance: none;
							width: .5rem;
							height: .5rem;
							background: #fff;
							border-radius: 50%;
							cursor: pointer;
						}
					}

					.v-time {
						width: 10%;
						color: @white;
						.small;
					}

					.v-mute {
						color: @white;
						border: none;
						background: none;
					}

					.v-volume {
						-webkit-appearance: none;
						background: none;
						width: 50px;
						position: relative;

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

						&::-webkit-slider-thumb {
							-webkit-appearance: none;
							appearance: none;
							width: .5rem;
							height: .5rem;
							background: #fff;
							border-radius: 50%;
							cursor: pointer;
						}
					}
				}
			}
		}

		&.reviews {
			color: @black;
			position: relative;

			.content {
				background: @lichterblauw;
				height: 100%;
				position: relative;
				z-index: 10;
				
				&:after {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-75%, -50%);
					width: 200%;
					height: 250%;
					background: @lichterblauw;
					z-index: -1;
				}
			}

			.reviews_viewport {
				padding: 100px 0;
				position: relative;

				&:after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 1%;
					height: 100%;
					background-image: linear-gradient(to right, @lichterblauw, transparent);
				}

				.reviews_track {

					.item {
						background: @white;
						// min-width: 400px;
						min-height: 500px;
						padding: 24px;
						

// 						&.rechtsom {
// 							.transition;
		
// 							&:hover {
// 								position: relative;
// 								z-index: 10;
// 								transform: rotate(-5deg) scale(1.05);
// 								.soft_shadow_style;
// 							}
// 						}
	
// 						&.linksom {
// 							.transition;
		
// 							&:hover {
// 								position: relative;
// 								z-index: 10;
// 								transform: rotate(5deg) scale(1.05);
// 								.soft_shadow_style;
// 							}
// 						}
					}
				}
			}
		}

		&.formulier {
			background: #d9ffd8;
			color: @black;

			span {
				color: @oranje;
			}

			p {

				a {
					font-family: 'Poppins - Regular' !important;
					text-decoration: underline;
					color: @black;
				}
			}

			input[type="text"],
			input[type="email"],
			input[type="tel"],
			textarea,
			select {
				background: transparent !important;
				border-radius: 6px !important;
    			border-color: #6b7280 !important;
    			color: #6b7280 !important;
				font-size: 1rem !important;

				&::placeholder {
					font-size: 1rem !important;
    				color: #6b7280 !important;
				}
			}


			input[type="submit"] {
				background: @black !important;
				color: @white !important;
				padding: .5rem 1.5rem !important;
				border-radius: 50px !important;
				.transition;

				&:hover {
					background: @oranje !important;
					color: @white !important;
				}
			}

			&.white_bg {
				background: #004e480d;
				color: @black;

				h1 {
					margin-bottom: 1.5rem !important;
				}

				.formulier_box {
					background: @white;
					padding: 2rem;
					.shadow_style;
				}

				.tekst {

					ul li::marker {
						color: #d1d5db;
					}
				}

				.gform_fields {
	
					.gfield_label {
						color: @black;
					}
	
					.gform-field-label {
						color: @black;
					}
				}

				input[type="text"],
				input[type="email"],
				input[type="tel"],
				textarea,
				select {
					background: @white !important;
					border-radius: 4px !important;
				}
			}

			.team {

				.teamlid {
					width: 75px;
					height: 75px;
					object-fit: cover;
					object-position: top;
					border-radius: 75px;

					&.tweede {
						transform: translateX(-25%);
					}

					&.derde {
						transform: translateX(-50%);
					}
				}
			}

			.gform_required_legend {
				display: none;
			}

			.gform_fields {
				row-gap: 10px;

				.gfield_label {
					color: @white;
					font-family: 'Poppins - Bold' !important;
				}

				.gfield_required {
					color: @oranje;
				}

				.gform-field-label {
					color: @white;
				}
			}

			.socials {

				a {
					border: 1px solid @oranje;
					color: @oranje;
					width: 2rem;
					height: 2rem;
					
					display: flex;
					align-items: flex-end;
					justify-content: center;
				}
			}
		}

		&.linkblokken {
			color: @black;

			.item {
				background: @white;
				color: @black;
				padding: 24px;
				border: 1px solid rgba(0, 0, 0, 0.1);
				

				img {
					margin-top: 1rem;
					width: 100px;
					object-fit: contain;
					object-position: left;
				}

				&.rechtsom {
					.transition;

					&:hover {
						position: relative;
						z-index: 10;
						transform: rotate(-2deg) scale(1.05);
						.soft_shadow_style;
					}
				}

				&.linksom {
					.transition;

					&:hover {
						position: relative;
						z-index: 10;
						transform: rotate(2deg) scale(1.05);
						.soft_shadow_style;
					}
				}

				.secundaire_button {
					width: max-content;
					margin-top: 1rem;
					background: #fff;
					padding: 0;
				}
			}
		}

		&.faq {
			background: @white;
			color: @black;

			.faq_items {
				border-top: 1px solid @lichtblauw;

				.faq_item {
					border-bottom: 1px solid @lichtblauw;

					.toggle_item {

						&.collapsed {
							
							.vraag {

								i {
									transform: rotate(0deg);
									.transition;
								}
							}
						}
		
						.vraag {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 1rem 0;
							color: @black;

							i {
								transform: rotate(180deg);
								.transition;
							}
						}
					}

					.antwoord {

						ul {
							padding: 0;
							margin-bottom: 2rem;
							list-style-type: none;
			
							li {
								margin-left: 2rem;
								margin-bottom: 1rem;
								position: relative;
		
								&:after {
									content: '';
									position: absolute;
									top: 0;
									left: 0;
									width: 20px;
									height: 20px;
									transform: translate(-2rem, .5rem);
									background-image: url('../images/check.svg');
									background-size: contain;
								}
							}
						}
					}
				}
			}
		}

		&.stappen {
			color: @black;
			position: relative;

			.content {
				background: @lichterblauw;
				height: 100%;
				position: relative;
				z-index: 10;
				
				&:after {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-75%, -50%);
					width: 200%;
					height: 250%;
					background: @lichterblauw;
					z-index: -1;
				}
			}

			.stappen_viewport {
				padding: 100px 0;
				position: relative;

				&:after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 10%;
					height: 100%;
					background-image: linear-gradient(to right, @lichterblauw, transparent);
				}

				.stappen_track {
					will-change: transform;

					.item {
						background: @white;
						min-width: 400px;
						padding: 24px;
						

						h4 {
							color: @oranje;
						}

						&:first-child {
							margin-left: 50px !important;
						}

						&.rechtsom {
							.transition;
		
							&:hover {
								position: relative;
								z-index: 10;
								transform: rotate(-5deg) scale(1.05);
								.soft_shadow_style;
							}
						}
	
						&.linksom {
							.transition;
		
							&:hover {
								position: relative;
								z-index: 10;
								transform: rotate(5deg) scale(1.05);
								.soft_shadow_style;
							}
						}
					}
				}
			}
		}

		&.stappen_zonder_slider {
			color: @black;

			.item {
				background: @white;
				padding: 24px;
				

				h4 {
					color: @oranje;
				}

				&.rechtsom {
					.transition;

					&:hover {
						position: relative;
						z-index: 10;
						transform: rotate(-5deg) scale(1.05);
						.soft_shadow_style;
					}
				}

				&.linksom {
					.transition;

					&:hover {
						position: relative;
						z-index: 10;
						transform: rotate(5deg) scale(1.05);
						.soft_shadow_style;
					}
				}
			}
		}

		&.onze_experts_2 {
			color: @black;

			.item {
				color: @black;
				height: 580px;
				width: 100%;
				.background_style;
				position: relative;

				a {
					color: @black;
				}

				.content {
					padding: 1.5rem;
					background: #fdff8f;
					position: absolute;
					bottom: 1rem;
					left: 1rem;
					right: 1rem;
					display: block;

					svg {
						width: 20px;
						.transition;
					}

					&:hover {

						svg {
							transform: translate(5px, -5px);
						}
					}
				}
			}
		}

		&.nieuwsberichten {

			.item {
				background: @white;
				color: @black;
				padding: 1rem;

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

				&.rechtsom {
					.transition;

					&:hover {
						position: relative;
						z-index: 10;
						transform: rotate(-2deg) scale(1.05);
						.soft_shadow_style;
					}
				}

				&.linksom {
					.transition;

					&:hover {
						position: relative;
						z-index: 10;
						transform: rotate(2deg) scale(1.05);
						.soft_shadow_style;
					}
				}
			}
		}

		&.usps {
			background: @white;
			color: @black;

			.usp_item {

				img {
					max-width: 150px;
				}
			}
		}

		&.tekst_tabel {
			color: @black;

			.tabel_box {
				background: @white;
				padding: 2rem;
				

				.tabel_item {
					padding: .5rem 0;
					border-bottom: 1px solid @lichtblauw;
				}
			}
		}

		&.rendement_section {
			background: @white;
			color: @black;

			.calc_box {
				background: @white;
				padding: 2rem;
				
				border: 1px solid @neutral_lighter;
				height: 100%;

				.form {

					input {
						background: @white !important;
						color: @donkerblauw !important;
						border: 1px solid #dad8d9 !important;
						border-radius: 0px !important;
						padding: 1rem !important;
						box-shadow: none !important;
						width: 100%;

						&::placeholder {
							color: @neutral_light !important;
						}
					}
				}

				.calc_buttons {

					button {
						background: @white;
						color: @black;
						padding: 12px 30px;
						border: 1px solid @lichtblauw;
						
						font-family: 'Poppins - Regular' !important;
						
						&.active {
							background: @donkerblauw;
							color: @white;
							border: 1px solid @donkerblauw;
						}
					}
				}

				.js-result {
					color: @neutral_light;

					&.is-value {
						color: @black;
					}
				}
			}

			.content_box {
				background: @white;
				padding: 2rem;
				
				border: 1px solid @neutral_lighter;
				height: 100%;
			}
		}

		&.vergelijk,
		&.linkblokken--vergelijk {
			color: @black;

			.vergelijk__kolom {
				padding: 2rem;

				@media (max-width: 991px) {
					padding: 1.25rem;
					margin-bottom: 1rem;
				}
				height: 100%;

				&--oud {
					background: @white;
					border: 1px solid rgba(0, 0, 0, 0.1);
				}

				&--nieuw {
					background: #D9FFD8;
				}
			}

			.vergelijk__header {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				gap: 1rem;
				margin-bottom: 1.5rem;

				h3 {
					color: @black;
					flex: 1;
				}
			}

			.vergelijk__badge {
				background: @white;
				color: @black;
				border: 1px solid rgba(0, 0, 0, 0.15);
				border-radius: 50px;
				padding: .3rem 1rem;
				font-family: 'Poppins - Regular' !important;
				font-size: .85rem !important;
				white-space: nowrap;
				flex-shrink: 0;
			}

			.vergelijk__lijst {

				p {
					position: relative;
					padding-left: 2rem;
					margin-bottom: 1.25rem;

					&:last-child {
						margin-bottom: 0;
					}

					&::before {
						position: absolute;
						left: 0;
						top: 0;
						font-size: 1rem !important;
						line-height: 1.75rem !important;
						font-family: 'Poppins - Bold' !important;
					}
				}

				&--kruis {

					p::before {
						content: '\00D7';
						color: @neutral;
					}
				}

				&--vink {

					p::before {
						content: '\2713';
						color: @donkerblauw;
						font-weight: bold;
					}
				}
			}
		}

		&.tekst_contact {
			color: @black;

			.tekst_contact__subtitel {
				color: @neutral;
				font-size: 1.25rem !important;
				margin-top: .5rem;
			}

			.tekst_contact__tekst {

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

					li {
						margin-left: 2rem;
						margin-bottom: 1rem;
						position: relative;

						&::before {
							content: '';
							position: absolute;
							top: 50%;
							left: -1.75rem;
							transform: translateY(-50%);
							width: 6px;
							height: 6px;
							border-radius: 50%;
							background: @oranje;
						}
					}
				}
			}

			.tekst_contact__card {
				background: @white;
				padding: 2.5rem;
				.shadow_style;
			}

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

				.tekst_contact__rechts {
					margin-top: 2rem;
				}

				.tekst_contact__card {
					padding: 1.5rem;
				}
			}
		}

		&.hypotheken_overzicht {
			background: @lichterblauw;
			color: @black;

			.item {
				background: @white;
				color: @black;
				padding: 24px;
				

				h4 {
					color: @oranje;
					text-transform: uppercase;
				}

				.item_inner {
					border-bottom: 1px solid @lichtblauw;
				}
			}
		}
	}
}

.mobile_footer {
    position: fixed;
    z-index: 999;
    top: 75%;
	transform: translateY(-50%);
    right: 0px;
    width: 50px;
    background: @oranje;

	.col-6 {
		
		&:first-child {

			.link {
				border-right: 1px solid @white;
			}
		}
	}

	.link {
		color: @white;
		padding: .5rem 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

footer {
	background: @donkerblauw;
	color: @white;
	padding-top: 6rem;
	padding-bottom: 6rem;

	@media (max-width: 991px) {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}

	.container {
		padding-bottom: 0;
	}

	.footer__afbeelding-wrap {
		margin-top: 4rem;
		margin-left: calc(50% - 50vw);
		width: 100vw;

		.footer__afbeelding {
			width: 100%;
			display: block;
			object-fit: cover;
			max-height: 400px;
		}
	}

	.logo_link {

		.logo {
			width: 100%;
		}
	}

	.footer_logo {
		width: 100%;
		object-fit: contain;
    	max-width: 200px;
	}

	.footer__logo {
		display: block;
		max-width: 163px;
		height: auto;
	}

	.socials {

		a {
			border: 1px solid @white;
			width: 2rem;
			height: 2rem;
			
			display: flex;
			align-items: flex-end;
			justify-content: center;
		}
	}

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

		li {

			a {
				text-decoration: none !important;
			}
		}
	}

	a {
		font-family: 'Poppins - Regular' !important;
		color: @white;
		text-decoration: underline !important;
	}

	.footer-nav {
		display: block !important;
		background: transparent !important;
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
		position: static !important;
		box-shadow: none !important;

		li {
			display: block !important;
			background: transparent !important;
			border: none !important;
			padding: 0 !important;
			margin: 0 !important;
			float: none !important;
			position: static !important;
			width: auto !important;

			a {
				display: block !important;
				background: transparent !important;
				color: @white !important;
				font-family: 'Poppins - Regular' !important;
				font-size: 1rem !important;
				text-decoration: none !important;
				padding: .2rem 0 !important;
				margin: 0 !important;
				border: none !important;
				line-height: 1.6 !important;

				&:hover {
					color: @lichterblauw !important;
					background: transparent !important;
				}
			}

			&.menu-item-has-children > a::after {
				display: none !important;
			}

			ul.sub-menu,
			ul.mega-sub-menu {
				display: none !important;
			}
		}
	}

	.disclamer {
		color: @lichtblauw;

		span {
			font-family: 'Poppins - Bold' !important;
			display: block;
		}
	}
}
.underfooter {
	background: @donkerblauw;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding: .75rem 0;

	span, a {
		font-family: 'Poppins - Regular' !important;
		font-size: .75rem !important;
		color: rgba(255, 255, 255, 0.6);
		text-decoration: none !important;
	}

	a:hover {
		color: @white;
	}
}

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

}

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

	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
		font-size: 1.5rem !important;
		height: 28px !important;
        margin: .5rem 0 !important;
		.bold;
	}

	#header {
		padding: .5rem 1rem;

		.logo {
        	width: 50px;
		}
	
		&.scrolled {
			top: .5rem;
			width: 94%;
		}
	}

	.page_content {

		.page_div {

			&.intro {

				.intro__media {
					padding-right: 0.75rem;
					padding-bottom: 0.75rem;

					.intro__media-bg {
						top: 0.75rem;
						left: 22%;
					}
				}
			}
            
            &.tekst_afbeelding_2,
            &.tekst_afbeelding{
           	
            	.tekst {
					
					&.margin_left {
						
						p, ul {
							margin-left: 50px;
						
							em {
						
								&:first-child {
									transform: translateX(-50px)translateY(100%);
									font-size: 1.5rem !important;
									line-height: 1.5rem !important;
								}
							}
						}
					}
                }
            }
            
            &.tekst_afbeelding_2 {
            
            	.tekst {
                
                	p {
                    
                    	em {
                        
                        	&:first-child {
                                position: unset;
                                transform: unset;
                            }
                        }
                    }
                }
            }

			&.onze_experts {

				.experts {
	
					.item {
						padding: 8px 30px 8px 8px;
						width: max-content !important;
	
						&.rechtsom {
		
							&:hover {
								position: unset;
								z-index: unset;
								transform: unset;
								box-shadow: none;
							}
						}
	
						&.linksom {
		
							&:hover {
								position: unset;
								z-index: unset;
								transform: unset;
								box-shadow: none;
							}
						}
					}
				}

				.slick-track {
					padding: 2rem 0;
				}
			}

			&.video {
	
				.video-wrap {
	
					video {
						height: 100%;
					}
	
					.v-controls {
						display: none;
					}
				}
			}

			&.reviews {
	
				.content {
					
					&:after {
						content: none;
					}
				}
	
				.reviews_viewport {
					padding: 50px 0;
	
					&:after {
						content: none;
					}

					.reviews_track {
	
						.item {
							min-width: unset;
	
							&:first-child {
								margin-left: 0 !important;
							}
	
							&.rechtsom {
		
								&:hover {
									position: unset;
									z-index: unset;
									transform: unset;
									box-shadow: none;
								}
							}
		
							&.linksom {
			
								&:hover {
									position: unset;
									z-index: unset;
									transform: unset;
									box-shadow: none;
								}
							}
						}
					}
				}
			}

			&.linkblokken {
			
				.item {
	
					&.rechtsom {
		
						&:hover {
							position: unset;
							z-index: unset;
							transform: unset;
							box-shadow: none;
						}
					}

					&.linksom {
	
						&:hover {
							position: unset;
							z-index: unset;
							transform: unset;
							box-shadow: none;
						}
					}
				}
			}

			&.stappen {

				.content {
					
					&:after {
						content: none;
					}
				}
	
				.stappen_viewport {
					padding: 50px 0;
	
					&:after {
						content: none;
					}

					.stappen_track {
	
						.item {
							min-width: unset;
	
							&:first-child {
								margin-left: 0;
							}
	
							&.rechtsom {
		
								&:hover {
									position: unset;
									z-index: unset;
									transform: unset;
									box-shadow: none;
								}
							}
		
							&.linksom {
			
								&:hover {
									position: unset;
									z-index: unset;
									transform: unset;
									box-shadow: none;
								}
							}
						}
					}
				}
			}

			&.onze_experts_2 {

				.item {
					background: @white;
					color: @black;
					padding: 1rem;
	
					img {
						width: 100%;
						aspect-ratio: 1;
					}
	
					&.rechtsom {
		
						&:hover {
							position: unset;
							z-index: unset;
							transform: unset;
							box-shadow: none;
						}
					}

					&.linksom {
	
						&:hover {
							position: unset;
							z-index: unset;
							transform: unset;
							box-shadow: none;
						}
					}
				}
			}

			&.cta_blok {

				&.video {
					transform: scale(.94);
				}
			}
		}
	}

}

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

}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item{
margin: 0px !important;

	.secundaire_button {
	color: @donkerblauw;

	&.oranje {
		color: @oranje;
	}

	&.icon {
		display: flex;
		align-items: center;
		gap: .25rem;

		i {
			font-size: .8rem !important;
			transform: translateY(1px);
		}
	}

	&.outline {
		border: 1px solid @donkerblauw;
		padding: .5rem 1rem;
		
		.transition;

		&:hover {
			background: @donkerblauw;
			color: @white;
		}
	}
}
}