.key_features_blok.jumbotron{
	--key-features-list-padding-top: var(--jumbotron-standard-margin);
	--key-features-list-padding-bottom: var(--jumbotron-standard-margin);
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
}

.key_features_blok.pt-sm{ --key-features-list-padding-top: var(--jumbotron-margin-sm); }
.key_features_blok.pt-md{ --key-features-list-padding-top: var(--jumbotron-margin-md); }
.key_features_blok.pt-xl{ --key-features-list-padding-top: var(--jumbotron-margin-xl); }
.key_features_blok.pt-xxl{ --key-features-list-padding-top: var(--jumbotron-margin-xxl); }
.key_features_blok.pb-sm{ --key-features-list-padding-bottom: var(--jumbotron-margin-sm); }
.key_features_blok.pb-md{ --key-features-list-padding-bottom: var(--jumbotron-margin-md); }
.key_features_blok.pb-xl{ --key-features-list-padding-bottom: var(--jumbotron-margin-xl); }
.key_features_blok.pb-xxl{ --key-features-list-padding-bottom: var(--jumbotron-margin-xxl); }

body.heeft_key_features_blok #site-footer{
	display: none;
}

body.heeft_key_features_blok.key_features_blok_lijst_actief #site-footer{
	display: block;
}

body.key_features_blok_panel_actief{
	overflow: hidden;
}

.key_features_blok.row_1{
	margin-top: calc(-1 * var(--body-padding, 0rem));
}

.key_features_blok .container,
.key_features_blok .row,
.key_features_blok [class*="col-"],
.key_features_blok .content_gekaderd_inner{
	position: static;
}

.key_features_blok_stage{
	position: relative;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	background-color: inherit;
	color: var(--donker-grijs);
	touch-action: none;
}

.key_features_blok_stage.is-list-view{
	height: auto;
	overflow: visible;
	background-color: var(--donker-grijs);
	touch-action: auto;
}

.key_features_blok_viewport{
	position: absolute;
	inset: 0;
	overflow: hidden;
	cursor: grab;
}

.key_features_blok_viewport[hidden],
.key_features_blok_list_view[hidden]{
	display: none;
}

.key_features_blok_stage.is-dragging .key_features_blok_viewport{
	cursor: grabbing;
}

.key_features_blok_view_switcher{
	position: absolute;
	top: calc(var(--body-padding, 0rem) + 2rem);
	left: 50%;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	color: #fff;
	font-size: 1.3rem;
	line-height: 1.3;
	transform: translateX(-50%);
	white-space: nowrap;
}

.key_features_blok_view_switcher_buttons{
	display: flex;
	align-items: center;
}

.key_features_blok_view_switcher button{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 1rem 2.5rem;
	border: 0.1rem solid #818180;
	color: var(--groen);
	background-color: var(--donker-grijs);
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.1;
}

.key_features_blok_view_switcher button:first-child{
	border-radius: 5rem 0 0 5rem;
}

.key_features_blok_view_switcher button:last-child{
	border-radius: 0 5rem 5rem 0;
}

.key_features_blok_view_switcher button.is-active{
	color: #fff;
	background-color: #818180;
}

.key_features_blok_view_switcher i{
	font-size: 2rem;
	line-height: 1;
}

.key_features_blok_world{
	--key-features-cell: 35rem;
	--key-features-gutter: 15rem;
	--key-features-cols: 9;
	--key-features-rows: 5;
	--key-features-edge: 18rem;
	position: absolute;
	top: var(--key-features-edge);
	left: var(--key-features-edge);
	width: calc((var(--key-features-cell) * var(--key-features-cols)) + (var(--key-features-gutter) * (var(--key-features-cols) - 1)) + (var(--key-features-edge) * 2));
	height: calc((var(--key-features-cell) * var(--key-features-rows)) + (var(--key-features-gutter) * (var(--key-features-rows) - 1)) + (var(--key-features-edge) * 2));
	opacity: 0;
	transform: translate3d(0, 0, 0);
	transform-origin: center center;
	transition: opacity 1200ms ease;
	will-change: transform;
}

.key_features_blok_world.is-moving{
	transition: opacity 1200ms ease, transform 2000ms ease-in-out;
}

.key_features_blok_stage.is-ready .key_features_blok_world{
	opacity: 1;
}

.key_features_blok_grid{
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.key_features_blok_grid span{
	position: absolute;
	top: calc(var(--key-features-edge) + ((var(--grid-row, 1) - 0.5 + var(--grid-offset-y, 0)) * (var(--key-features-cell) + var(--key-features-gutter))));
	left: calc(var(--key-features-edge) + ((var(--grid-col, 1) - 0.5) * (var(--key-features-cell) + var(--key-features-gutter))));
	width: var(--key-features-cell);
	height: var(--key-features-cell);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.key_features_blok_center{
	position: absolute;
	top: calc(var(--key-features-edge) + ((3 - 0.5) * (var(--key-features-cell) + var(--key-features-gutter))));
	left: calc(var(--key-features-edge) + ((5 - 0.5) * (var(--key-features-cell) + var(--key-features-gutter))));
	width: 34rem;
	text-align: center;
	color: var(--groen);
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 8;
}

.key_features_blok_center h2{
	margin: 0;
	color: currentColor !important;
	font-family: var(--heading-font);
	font-size: 3.6rem;
	font-weight: 400;
	line-height: 1.1;
}

.key_features_blok_center_content{
	margin-top: 1.5rem;
	color: var(--donker-grijs);
	font-size: 1.6rem;
	line-height: 1.3;
}

.key_features_blok_center_content:first-child{
	margin-top: 0;
}

.key_features_blok_item{
	position: absolute;
	display: grid;
	justify-items: center;
	width: 20rem;
	padding: 0;
	border: 0;
	color: var(--donker-grijs);
	background: transparent;
	text-align: center;
	transform: translate(-50%, -50%);
	cursor: pointer;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	z-index: 2;
}

.key_features_blok_stage.is-ready .key_features_blok_item{
	animation: key_features_blok_item_in 520ms ease both;
	animation-delay: var(--key-feature-delay, 0ms);
}

.key_features_blok_item_groot{
	width: 35rem;
}

.key_features_blok_bol{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20rem;
	height: 20rem;
	padding: 1rem;
	border: 0.3rem solid var(--groen);
	border-radius: 50%;
	background-color: transparent;
	box-shadow: none;
	overflow: visible;
	transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.key_features_blok_item_groot .key_features_blok_bol{
	width: 35rem;
	height: 35rem;
	padding: 1.9rem;
}

.key_features_blok_item.is-viewed .key_features_blok_bol{
	border-color: var(--grijs);
}

.key_features_blok_item:is(:hover, :focus-visible) .key_features_blok_bol{
	box-shadow: 0 0 3.8rem color-mix(in srgb, var(--groen) 45%, transparent);
	transform: scale(1.015);
}

.key_features_blok_bol:before{
	content: none;
}

.key_features_blok_bol_img,
.key_features_blok_bol img,
.key_features_blok_bol picture,
.key_features_blok_panel_icon img{
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	background-color: var(--grijs-10);
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

.key_features_blok_bol picture{
	display: flex;
	overflow: hidden;
}

.key_features_blok_bol picture img{
	width: 100%;
	height: 100%;
}

.key_features_blok_bol .key_features_blok_img_svg{
	padding: 3.5rem;
	object-fit: contain;
	border-radius: 50%;
}

.key_features_blok_item_groot .key_features_blok_bol .key_features_blok_img_svg{
	padding: 7rem;
}

.key_features_blok_panel_icon .key_features_blok_img_svg{
	padding: 2.5rem;
	object-fit: contain;
	border-radius: 0;
}

.key_features_blok_label{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 3;
	margin-top: -1.4rem;
	padding: 0.2rem 0.7rem;
	color: var(--grijs-10);
	background-color: var(--donker-grijs);
	font-size: 1.3rem;
	line-height: 1.3;
	white-space: nowrap;
}

.key_features_blok_progress{
	position: absolute;
	left: 50%;
	bottom: 2rem;
	z-index: 7;
	display: grid;
	gap: 1.5rem;
	width: 63rem;
	color: #fff;
	font-size: 1.3rem;
	line-height: 1.3;
	transform: translateX(-50%);
	pointer-events: none;
}

.key_features_blok_progress > span:first-child{
	display: block;
	color: #fff;
	line-height: 1.3;
}

.key_features_blok_progress_track{
	position: relative;
	display: block;
	width: 100%;
	height: 0.6rem;
	border-radius: 3rem;
	background-color: var(--grijs);
	overflow: hidden;
}

.key_features_blok_progress_track span{
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background-color: var(--groen);
	transition: width 220ms ease;
}

.key_features_blok_drag_hint{
	position: absolute;
	top: 2rem;
	left: 50%;
	z-index: 7;
	margin: 0;
	padding: 0.4rem 1rem;
	color: var(--donker-grijs);
	background-color: var(--groen);
	font-size: 1.3rem;
	line-height: 1.3;
	transform: translateX(-50%);
	pointer-events: none;
}

.key_features_blok_backdrop{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1499;
	background-color: #000000;
	opacity: 0;
	pointer-events: none;
	transition: 0.3s opacity;
}

.key_features_blok_stage.has-open-panel .key_features_blok_backdrop,
.key_features_blok_backdrop.is-open{
	opacity: 0.5;
	pointer-events: all;
}

.key_features_blok_panel{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 52.6vw;
	height: 100vh;
	height: 100dvh;
	padding: 0;
	background-color: #fff;
	color: var(--donker-grijs);
	box-shadow: 0.5rem 0 2.1rem color-mix(in srgb, var(--donker-grijs) 10%, transparent);
	overflow: visible;
	opacity: 0;
	transform: translateX(-102%);
	transition: opacity 280ms ease, transform 280ms ease;
	pointer-events: none;
}

.key_features_blok_panel.is-open{
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}

.key_features_blok_panel_inner{
	height: 100%;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 4.5rem 6.4rem;
}

.key_features_blok_close{
	position: fixed;
	top: 50%;
	left: 52.6vw;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.8rem;
	height: 5.8rem;
	border: 0;
	border-radius: 50%;
	color: var(--donker-grijs);
	background-color: var(--groen);
	transform: translate(-50%, -50%);
}

.key_features_blok_panel:not(.is-open) .key_features_blok_close{
	display: none;
}

.key_features_blok_panel_icon{
	width: 13.5rem;
	height: 13.5rem;
	aspect-ratio: 1;
	margin-bottom: 4rem;
	border-radius: 50%;
	overflow: hidden;
	background-color: transparent;
}

.key_features_blok_panel_content > h2{
	margin: 0;
	color: var(--donker-grijs) !important;
	font-family: var(--heading-font);
	font-size: clamp(4rem, 2.72rem + 4vw, 8rem);
	font-weight: 700;
	line-height: 1.1;
}

.key_features_blok_panel_content_editor{
	margin-top: 3rem;
}

.key_features_blok_stage.is-list-view .key_features_blok_progress,
.key_features_blok_stage.is-list-view .key_features_blok_drag_hint{
	display: none;
}

.key_features_blok_list_view{
	display: grid;
	gap: var(--jumbotron-margin-xxl);
	padding: calc(var(--body-padding, 0rem) + var(--key-features-list-padding-top)) clamp(2rem, calc(((100vw - var(--container-width, 129rem)) / 2) + var(--bs-gutter-x, .75rem)), 31.5rem) 0;
	background-color: var(--donker-grijs);
	color: #fff;
	overflow: visible;
}

.key_features_blok_list_header{
	color: var(--groen);
}

.key_features_blok_list_header h1{
	color: var(--groen) !important;
}

.key_features_blok_list_item{
	align-items: center;
}

.key_features_blok_list_image{
	aspect-ratio: 519 / 545;
	background-color: var(--grijs-10);
}

.key_features_blok_list_img,
.key_features_blok_list_image img,
.key_features_blok_list_image picture{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.key_features_blok_list_image picture{
	display: flex;
}

.key_features_blok_list_content{
	display: grid;
	justify-items: start;
	gap: 3rem;
	align-content: center;
}

.key_features_blok_list_content h3,
.key_features_blok_more h3{
	margin: 0;
	color: #fff !important;
	font-size: clamp(2.4rem, 2.208rem + 0.6vw, 3rem);
	line-height: 1.1;
}

.key_features_blok_list_text{
	font-size: 1.6rem;
	line-height: 1.3;
}

.key_features_blok_list_text > *:last-child{
	margin-bottom: 0;
}

.key_features_blok_more{
	display: none;
	gap: 3rem;
	margin-top: 0;
	padding: var(--jumbotron-margin-xxl) clamp(2rem, calc(((100vw - var(--container-width, 129rem)) / 2) + var(--bs-gutter-x, .75rem)), 31.5rem) var(--key-features-list-padding-bottom);
	overflow: hidden;
	background-color: var(--donker-grijs);
	color: #fff;
}

.key_features_blok_stage.is-list-view .key_features_blok_more{
	display: grid;
}

.key_features_blok_more_items{
	touch-action: pan-y;
}

.key_features_blok_more_slider:not(.tns-slider){
	display: flex;
	gap: 3rem;
	overflow: hidden;
}

.key_features_blok_more_slide{
	flex: 0 0 auto;
	width: 17.4rem;
	padding-bottom: 2rem;
}

.key_features_blok_more .tns-slider > .tns-item{
	box-sizing: content-box;
}

.key_features_blok_more_item{
	display: grid;
	justify-items: center;
	width: 17.4rem;
	padding: 0;
	border: 0;
	color: var(--donker-grijs);
	background: transparent;
	text-align: center;
	cursor: pointer;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

.key_features_blok_more_item.is-viewed .key_features_blok_bol{
	border-color: var(--grijs);
}

.key_features_blok_more_item:is(:hover, :focus-visible) .key_features_blok_bol{
	box-shadow: 0 0 3.8rem color-mix(in srgb, var(--groen) 45%, transparent);
	transform: scale(1.015);
}

.key_features_blok_more_item .key_features_blok_bol{
	width: 17.4rem;
	height: 17.4rem;
	padding: 0.9rem;
}

.key_features_blok_more_item .key_features_blok_label{
	white-space: normal;
	text-wrap: balance;
}

.key_features_blok_more .tns-ovh{
	overflow: visible !important;
}

@media (max-width:767px) {
	.key_features_blok_world{
		--key-features-cell: 24rem;
		--key-features-gutter: 10rem;
		--key-features-edge: 12rem;
	}

	.key_features_blok_item,
	.key_features_blok_item_groot{
		width: 18rem;
	}

	.key_features_blok_bol,
	.key_features_blok_item_groot .key_features_blok_bol{
		width: 18rem;
		height: 18rem;
	}

	.key_features_blok_progress{
		width: calc(100% - 4rem);
	}

	.key_features_blok_panel{
		width: 100%;
	}

	.key_features_blok_panel_inner{
		padding: 4rem 2rem;
	}

	.key_features_blok_close{
		top: 2rem;
		right: 2rem;
		left: auto;
		transform: none;
	}

	.key_features_blok_center{
		width: 24rem;
	}

	.key_features_blok_center h2{
		font-size: 2.6rem;
	}

	.key_features_blok_view_switcher{
		top: calc(var(--body-padding, 0rem) + 2rem);
		width: calc(100% - 4rem);
		justify-content: center;
		white-space: normal;
	}

	.key_features_blok_view_switcher > span{
		display: none;
	}

	.key_features_blok_view_switcher button{
		padding: 1rem 1.5rem;
		font-size: 1.5rem;
	}

	.key_features_blok_more_slide{
		width: 16.5rem;
		padding-bottom: 2rem;
	}

	.key_features_blok_more_item{
		width: 16.5rem;
	}

	.key_features_blok_more_item .key_features_blok_bol{
		width: 16.5rem;
		height: 16.5rem;
	}

	.key_features_blok_more_item .key_features_blok_label{
		max-width: 16.5rem;
	}

	.key_features_blok_list_view{
		gap: var(--jumbotron-margin-xl);
		padding: calc(var(--body-padding, 0rem) + var(--key-features-list-padding-top)) 2rem 0;
	}

	.key_features_blok_more{
		padding: var(--jumbotron-margin-xl) 2rem var(--key-features-list-padding-bottom);
	}

	.key_features_blok_stage.is-list-view .key_features_blok_list_header{
		padding-top: 6rem;
	}

	.key_features_blok_list_item{
		row-gap: 3rem;
	}

	.key_features_blok_list_image{
		margin-bottom: var(--default-margin-bottom);
	}
}

@media (min-width:768px) and (max-width:991px) {
    .key_features_blok_panel{
        width: 100%;
    }

    .key_features_blok_panel_inner{
        padding: 4rem 2rem;
    }

    .key_features_blok_close{
        top: 2rem;
        right: 2rem;
        left: auto;
        transform: none;
    }

	.key_features_blok_stage.is-list-view .key_features_blok_list_header{
		padding-top: 5rem;
	}

	.key_features_blok_list_image{
		margin-bottom: var(--default-margin-bottom);
	}
}

@media (min-width:992px) and (max-width:1199px) {
    .key_features_blok_panel{
        width: 65vw;
    }

    .key_features_blok_close{
        left: 65vw;
    }
}

@keyframes key_features_blok_item_in{
	from{
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.65);
	}

	to{
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}
