@media (max-width:767px)
{
	#navbar-hoofdmenu{
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 100;
		width: min(100%, 42rem);
		height: 100dvh;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background: var(--beige);
		box-shadow: -1.5rem 0 3rem rgb(0 0 0 / 12%);
		transform: translateX(100%);
		transition: transform 0.3s ease-in-out;
	}

	#navbar-hoofdmenu.collapse{
		display: block;
	}

	#navbar-hoofdmenu.show,
	#navbar-hoofdmenu.showmenu{
		transform: translateX(0);
	}

	#trigger-overlay,
	#navbar-hoofdmenu .navbar-toggler{
		position: absolute;
        top: 3.1rem;
        right: 1.8rem;
		z-index: 50;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 4.4rem;
		height: 4.4rem;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 1rem !important;
		background: #fff;
		box-shadow: 0 0.3rem 0.15rem rgb(0 0 0 / 5%);
		outline: none !important;
	}

	#trigger-overlay .navbar-toggler-icon{
		width: 1.8rem;
		height: 1.8rem;
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
		background-size: contain;
	}

	#navbar-hoofdmenu .navbar-toggler-icon{
		width: 1.8rem;
		height: 1.8rem;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23000000' d='M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.5 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z'/%3E%3C/svg%3E");
		background-size: contain;
	}

	#hoofdmenu{
		position: relative;
		display: block;
		width: 100%;
		min-height: 100dvh;
		height: 100dvh;
		margin: 0;
		padding: 8.8rem 0 3rem;
		overflow-x: hidden;
		overflow-y: auto;
		background: var(--beige);
		border-radius: 0;
		transition: transform 0.3s ease-in-out;
	}

	#hoofdmenu > li,
	#hoofdmenu li ul li{
		position: static;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	#hoofdmenu > li + li,
	#hoofdmenu li ul li:not(.submenu-back-button) + li:not(.submenu-back-button){
		border-top: 0.1rem solid rgb(0 0 0 / 10%);
	}

	#hoofdmenu li.submenu-back-button + li{
		border-top: 0;
	}

	#hoofdmenu li a{
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 5.6rem;
		padding: 1.4rem 2.4rem;
		float: none;
		background: transparent;
		color: #000 !important;
		font-size: 2rem;
		font-weight: 300;
		line-height: 1.4;
		text-decoration: none !important;
		text-shadow: none;
		white-space: normal;
		transition: color 0.3s, background-color 0.3s;
	}

	#hoofdmenu > li:hover > a,
	#hoofdmenu > li.current-menu-item > a,
	#hoofdmenu > li.current-menu-ancestor > a,
	#hoofdmenu > li.current-menu-parent > a,
	#hoofdmenu li ul li:hover > a,
	#hoofdmenu li ul li.current-menu-item > a,
	#hoofdmenu li ul li.current-menu-ancestor > a,
	#hoofdmenu li ul li.current-menu-parent > a{
		color: var(--oranje) !important;
	}

	#hoofdmenu li.menu-item-has-children > a{
		gap: 1.5rem;
	}

	#hoofdmenu li.menu-item-has-children > a:after{
		content: "\f105" !important;
		margin-left: auto;
		color: var(--oranje);
		font-family: 'Font Awesome 6 Pro';
		font-weight: 400;
		line-height: 1;
	}

	#hoofdmenu > li.menu_button{
		padding: 2rem 2.4rem 0;
		border-top: 0;
	}

	#hoofdmenu > li.menu_button > a{
		justify-content: center;
		min-height: 5rem;
		padding: 0.8rem 2rem;
		border-radius: 1rem;
		background: var(--groen);
		color: #fff !important;
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1.4;
	}

	#hoofdmenu > li.menu_button > a:before{
		content: "\f232";
		font-family: 'Font Awesome 6 Brands';
		font-size: 2.4rem;
		font-weight: 400;
		line-height: 3.4rem;
	}

	#hoofdmenu > li.menu_button:hover > a,
	#hoofdmenu > li.menu_button.current-menu-item > a,
	#hoofdmenu > li.menu_button.current-menu-ancestor > a,
	#hoofdmenu > li.menu_button.current-menu-parent > a{
		background: oklch(from var(--groen) calc(l - 0.08) c h);
		color: #fff !important;
	}

	#hoofdmenu > li.menu_button > a:after{
		display: none !important;
	}

	#hoofdmenu li > ul{
		position: absolute !important;
		inset: 0;
		z-index: 2;
		display: block !important;
		width: 100%;
		height: 100dvh;
		margin: 0;
		padding: 8.8rem 0 3rem;
		overflow-x: hidden;
		overflow-y: auto;
		list-style: none;
		background: var(--beige) !important;
		box-shadow: none;
		transform: translateX(100%);
		transition: transform 0.3s ease-in-out;
	}

	#hoofdmenu > li.open > ul,
	#hoofdmenu li > ul > li.open > ul{
		transform: translateX(0);
	}

	#hoofdmenu li > ul > li.menu-item-has-children > ul{
		z-index: 3;
		padding-left: 0 !important;
		background: var(--beige) !important;
	}

	#hoofdmenu > li > ul:before{
		display: none;
	}

	.submenu-back-button{
		display: block;
		margin-bottom: 0.4rem !important;
		border-bottom: 0.1rem solid rgb(0 0 0 / 10%);
	}

	#hoofdmenu button,
	#hoofdmenu button:focus{
		display: flex;
		align-items: center;
		gap: 1rem;
		width: 100%;
		min-height: 5.6rem;
		margin: 0;
		padding: 1.4rem 2.4rem;
		border: 0;
		background: transparent;
		box-shadow: none;
		color: var(--oranje);
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1.4;
		text-align: left;
		outline: none;
	}

	#hoofdmenu button i{
		margin-right: 0;
	}

	#hoofdmenu li ul li a{
		padding-right: 2.4rem;
		padding-left: 2.4rem;
	}

	.submenu-back-button i:before{
		content: "\f104";
	}

	.openChild > li > a{
		opacity: 0;
		pointer-events: none;
	}

	.showmenu-bg{
		position: fixed;
		inset: 0;
		z-index: 99;
		width: 100%;
		height: 100%;
		background: rgb(0 0 0 / 45%);
		opacity: 0;
	}

	.navbar-header{
		position: relative;
		width: auto;
	}

	#navbar{
		border: none;
	}

	body{
		position: relative;
	}

	body.collapsed,
	html.no-scroll{
		overflow: hidden;
	}
}