@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

.navigation-is-open {
	max-height: 100vh;
	overflow: hidden;
}

#container_menu_top, #apptitle, #header_top, .spacer, .mainmenucorner {
	display: none;
}

#container_menu_top.authenticated_True, #container_menu_top.authenticated_true {
    display: block;
    background: #FFF;
}

#container_menu_top {
    display: none;
	height: 24px;
}

#menu_top {
	display: flex;
    justify-content: flex-end;
}

#menu_top li {
	display: none;
	line-height: 20px;
}

#menu_top li.mnu_logout, #menu_top li.mnu_beheer, #menu_top li.mnu_account {
    display: block;
	margin-left: 20px;
}

#ctl00_btn_logout {
	display: flex;
	height: 100%;
	margin-top: 2px;
	gap: 0.2rem;
	align-items: center;
}

#ctl00_btn_logout span {
	order: 1;
}

#menu_top li a {
    font-size: 13px;
    text-decoration: none;
    color: #043BA9;
	font-family: 'Noto Sans', sans-serif, Arial, sans-serif;
	line-height: 20px;
}

#menu_top {
	display: flex;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

.b_menu-search-wrapper {
	position: relative;
}

#innercontainer > header {
	position: relative;
	z-index: 300;
	height: 142px;
	padding: 0;
	background: #FFF;
	line-height: 1.6;
	overflow: visible;
}

#innerheader {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.b_header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    padding: 1.3rem 0;
    margin: 0 auto;
}

#header {
	order: 2;
	width: calc(100% - 160px);
}

#header img {
	width: 94px;
}

.b_menu-search-container {
	width: 70px;
	order: 1;
}

.authenticated_False #menu_top {
	display: none;
}

.headertitle {
	font-size: 21px;
	font-weight: bold;
	font-family: 'Noto Sans', sans-serif, Arial, sans-serif;
	line-height: 33px;
}

#container_menu {
	overflow: visible;
}

#container_menu .menu {
	opacity: 0;
	position: absolute;
	left: 0px;
	top: 104px;
	height: calc(100vh - 166px);
	width: 500px;
	padding: 0;
	margin: 0;
	background: #FFF;
	list-style: none;
	box-shadow: 0 0 0 100vmax rgb(0 0 0 / 55%);
	clip-path: inset(0 -100vmax);
	visibility: hidden;
	transition: .25s ease-in-out;
	overflow: auto;
}

#container_menu .b_menu-open {
	opacity: 1;
	visibility: visible;
}

#container_menu .menu:before {
	content: "";
	position: fixed;
	left: 0;
	display: block;
	width: calc(50vw - 640px);
	height: 100%;
	z-index: -1;
	background: #FFF;
}

#pull {
	display: block;
	padding: 21px 20px;
	background: url(images/mnu_btn.svg) no-repeat center center;
	background-size: 80% auto;
	transition: .25s ease-in-out;
	box-sizing: border-box;
}

#pull[aria-expanded="true"] {
	background: url(images/mnu_btn-close.svg?v1) no-repeat center center;
	background-size: 80% auto;
	transition: .25s ease-in-out;
}

.menu-button {
	display: block;
	text-indent: -99999px;
}

.menu li a {
	display: flex;
	width: 100%;
	align-items: center;
	padding: 1.5rem 70px 1.5rem 70px;
	font-size: 2.5rem;
	text-align: left;
	text-decoration: none;
	font-family: serif;
	font-weight: bold;
	color: #043aa7;
}

.menu li a:hover:before {
	margin-right: 2rem;
	content: "\f178";
	font-family: "Font Awesome 6 Pro";
	font-size: 3rem;
	line-height: 1;
	color: #F38168;
	font-weight: 100;
}

#footer {
	display: none;
}

.grid {
    max-width: 1280px;
    margin: 0 auto;
}

.section {
    padding: 3rem 0;
}

@media screen and (max-width:1300px) {
	.b_header-wrapper {
		margin-right: 5%;
        margin-left: 5%;
    }

	#container_menu .menu:before {
		width: 5%;
	}

	.grid, #content {
		margin-right: 5%;
		margin-left: 5%;
	}
}

@media screen and (max-width:800px) {
    .grid {
        padding: 1.5rem 0;
    }
}

@media screen and (max-width:750px) {
	#innercontainer > header {
		height: 92px;
	}
	
	.b_header-wrapper {
		padding: 0.8rem 0;
	}

	#header img {
		width: 54px;
	}

	#header {
		width: calc(100% - 70px);
	}

	.b_menu-search-container {
		width: 40px;
	}

	#container_menu .menu {
		position: fixed;
		top: 92px;
		height: calc(100vh - 92px);
		overflow: auto;
	}

	.menu li a {
		font-size: 2rem;
	}

	.menu li a:hover:before {
		font-size: 2rem;
	}
}

@media screen and (max-width:580px) {
	#container_menu .menu {
		width: 100%;
	}
}