@import url("reset.less");

/*------------------------------------------------------------------------ Global ------------------------------------------------------------------------*/
.home {

	#header {
		position: fixed;
		top: 0rem;
		z-index: 999;
		background: transparent;
		width: 100%;
		margin: 0 0 20px 0;
		padding: 1rem 2rem;
		.transition;
		animation: .3s loading_header 1.9s ease-out forwards;
	
		@keyframes loading_header {
			to {
				background: @lichterblauw;
				border-radius: 8px;
			}
		}
	}
}

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

	.logo {
		width: 100px;
	}

	&.scrolled {
		top: 1rem;
		width: 90%;
		border-radius: 8px;
		background: @lichterblauw;
		.shadow_style;
		.transition;
	}
}

.primaire_button {
	background: @oranje;
	color: @white;
	padding: .5rem 1rem;
	border-radius: 100px;
}

.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;
		border-radius: 100px;
		.transition;

		&:hover {
			background: @donkerblauw;
			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: 4px !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: 4px !important;
    padding: 12px !important;
    box-shadow: none !important;
	
	&.large {
		color: @neutral !important;
		.small;
		line-height: 100% !important;
	}
}

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

body {
	overflow-x: hidden;
}

.page_content {
	background: @lichterblauw;

	.page_div {

		&.intro {
			position: relative;
			overflow: hidden;
			color: @white;
			border-radius: 0;
			min-height: 100vh;
			display: flex;
			align-items: center;
			.transition;
			animation: .3s loading_intro 2s ease-out forwards;

			@keyframes loading_intro {
				to {
					margin-top: 2.5rem;
					border-radius: 20px 20px 8rem 20px;
					min-height: 75vh;
					transform: scale(0.85);
				}
			}
			
			.content {
				animation: .3s loading_intro_content 2s ease-out forwards;
				
				@keyframes loading_intro_content {
					to {
						transform: scale(1.1765);
					}
				}

				.primaire_button,
				.secundaire_button {
					animation: .3s loading_intro_content_button 2s ease-out forwards;
				
					@keyframes loading_intro_content_button {
						to {
							transform: scale(1.182);
						}
					}
				}
			}

			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				width: 100%;
				height: 100%;
				background: @black;
				opacity: .45;
			}

			.video {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
				width: 100%;
			}

			.row {
				position: relative;
				z-index: 10;
				transform: translateY(50px);
				opacity: 0;
				.transition;
				animation: .3s fade_up .3s ease-out forwards;

				@keyframes fade_up {
					to {
						transform: translateY(0);
						opacity: 1;
					}
				}
			}

			.usps {

				.item {

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

			&.met_afbeelding {
				position: unset;
				overflow: unset;
				background: @white;
				color: @donkerblauw;
				border-radius: 0 0 11rem 0;
				min-height: unset;
				animation: none;
				
				.content {
					animation: none;
				}

				&:after {
					content: none;
				}

				.afbeelding {
					width: 100%;
					border-radius: 20px 20px 8rem 20px;
				}

				.afbeelding_box {
					color: @white;
					padding-left: 50px;
					padding-right: 50px;
					border-radius: 20px 20px 8rem 20px;
					position: relative;
					.background_style;

					&:after {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-image: linear-gradient(to right, @donkerblauw, transparent);
						border-radius: 20px 20px 8rem 20px;
						opacity: .65;
					}

					.afbeelding {
						display: none;
					}
				}
			}

			&.versie_2 {

				h3 {

					strong {
						background: @oranje;
						color: @white;
						border-radius: 2px;
						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;
				border-radius: 0 0 0 4rem;
			}

			.multiple {
				display: flex;

				.afbeelding {
					border-radius: 100px;
					width: 50%;
					aspect-ratio: 1;

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

			.afbeelding {
				width: 100%;
				aspect-ratio: 6/5;
				object-fit: cover;
				border-radius: 0 0 0 3rem;
			}

			.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: @donkerblauw;

			p {

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

			.afbeelding {
				width: 100%;
				border-radius: 0 0 110px 0;
			}

			.video-wrap {
				position: relative;

				video {
					width: 50%;
					margin-left: 25%;
					border-radius: 24px;
					position: relative;
				}
	
				.v-overlay-play {
					background: rgba(0, 0, 0, 0.35);
					backdrop-filter: blur(2px);
					padding: 10px;
					border: none;
					border-radius: 100px;
					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;
						}
					}
				}
			}

			iframe {
				border-radius: 24px;
			}

			.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;
						}
					}
				}
			}
		}

		&.kolom {
			color: @donkerblauw;
		}

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

			.experts {
				position: relative;

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

					&.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;
							border-radius: 124px;
						}
					}
				}
			}
		}

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

			iframe {
				border-radius: 24px;
			}

			.video-wrap {
				position: relative;

				video {
					width: 100%;
					border-radius: 24px;
					position: relative;
				}
	
				.v-overlay-play {
					background: rgba(0, 0, 0, 0.35);
					backdrop-filter: blur(2px);
					padding: 10px;
					border: none;
					border-radius: 100px;
					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: @donkerblauw;
			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;
						border-radius: 2rem;

// 						&.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: @donkerblauw;
			color: @lichterblauw;

			span {
				color: @oranje;
			}

			p {

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

			&.white_bg {
				background: @white;
				color: @donkerblauw;

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

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

				input[type="text"],
				input[type="email"],
				input[type="tel"],
				textarea,
				select {
					background: @neutral_lightest !important;
				}
			}

			.gform_required_legend {
				display: none;
			}

			.gform_fields {
				row-gap: 24px;

				.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;
					border-radius: 100px;
					display: flex;
					align-items: flex-end;
					justify-content: center;
				}
			}
		}

		&.linkblokken {
			
			.item {
				background: @white;
				color: @donkerblauw;
				padding: 24px;
				border-radius: 2rem;

				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;
					}
				}
			}
		}

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

			.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: @donkerblauw;

							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: @donkerblauw;
			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;
						border-radius: 2rem;

						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: @donkerblauw;

			.item {
				background: @white;
				padding: 24px;
				border-radius: 2rem;

				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 {

			.item {
				background: @white;
				color: @donkerblauw;
				padding: 1rem;
				border-radius: 0 0 48px 0;

				img {
					width: 100%;
					aspect-ratio: 1;
					object-fit: cover;
					object-position: 50% 30%;
					border-radius: 0 0 4rem 0;
				}

				&.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;
					}
				}
			}
		}

		&.nieuwsberichten {

			.item {
				background: @white;
				color: @donkerblauw;
				padding: 1rem;
				border-radius: 0 0 48px 0;

				img {
					width: 100%;
					aspect-ratio: 3/2;
					object-fit: cover;
					border-radius: 0 0 4rem 0;
				}

				&.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: @donkerblauw;
			color: @white;

			.usp_item {

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

		&.tekst_tabel {
			color: @donkerblauw;

			.tabel_box {
				background: @white;
				padding: 2rem;
				border-radius: 24px;

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

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

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

				.form {

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

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

				.calc_buttons {

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

				.js-result {
					color: @neutral_light;

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

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

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

			.item {
				background: @white;
				color: @donkerblauw;
				padding: 24px;
				border-radius: 2rem;

				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;
    border-radius: 20px 0px 0px 20px;
    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_extra;
	color: @white;

	.logo_link {

		.logo {
			width: 100%;
			border-radius: .25rem;
			background: @white;
			padding: 1.5rem 1.25rem;
		}
	}

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

	.socials {

		a {
			border: 1px solid @white;
			width: 2rem;
			height: 2rem;
			border-radius: 100px;
			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;
	}

	.disclamer {
		color: @lichtblauw;

		span {
			font-family: 'Poppins - Bold' !important;
			display: block;
		}
	}
}
/*---------------------------------------------------------------------- Responsive ----------------------------------------------------------------------*/

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

}

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

	#header {
		padding: .5rem 1rem;

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

	.page_content {

		.page_div {

			&.intro {
	
				@keyframes loading_intro {
					to {
						border-radius: 10px 10px 4rem 10px;
						min-height: 80vh;
						transform: scale(0.9);
					}
				}
				
				.content {

					@keyframes loading_intro_content {
						to {
							transform: scale(0.9);
						}
					}

					.primaire_button,
					.secundaire_button {
					
						@keyframes loading_intro_content_button {
							to {
								transform: scale(1);
							}
						}
					}
				}
	
				.video {
					width: unset !important;
					height: 100%;
				}
	
				&.met_afbeelding {
					border-radius: 0 0 4rem 0;
	
					.afbeelding {
						border-radius: 10px 10px 4rem 10px;
					}
	
					.afbeelding_box {
						padding-left: 25px;
						padding-right: 25px;
						border-radius: 0 0 4rem 0;
	
						&:after {
							background-image: linear-gradient(to right, @donkerblauw, @donkerblauw);
							border-radius: 0 0 4rem 0;
						}
					}
				}
			}

			&.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: @donkerblauw;
					padding: 1rem;
					border-radius: 0 0 2rem 0;
	
					img {
						width: 100%;
						aspect-ratio: 1;
						border-radius: 0 0 2rem 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;
						}
					}
				}
			}

			&.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;
		border-radius: 100px;
		.transition;

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