@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


:root {
	--primary-color: #3F51B5;

	--light-grey: #ECEFF1;
	--default-white: #FFF;
	--default-black: #212121;
	--error-color: #B30000;

	/* Focus colors */
	--focus-outline-color: currentColor;
	--focus-outline-offset: 0.1rem;
	--focus-outline-style: solid;
	--focus-outline-width: 2px;
}


/* skiplinks */
.a-skiplink {
	background-color: #fff;
	border: 2px solid #999;
	display: block;
	left: -1000em;
	padding: .5em;
	position: absolute;
	z-index: 10;
	transition: none;
}

.a-skiplink:focus {
	left: 1em;
	top: 126px;
	z-index: 1000;
}

.open-sans-regular {
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

#content,
.grid {
	max-width: 1460px;
	margin: 0 auto;
	padding: 64px 30px;
}

#container_menu_top {
	position: relative;
	max-width: 1140px;
	margin: 0 auto;
}

#apptitle {
	display: none;
}

#menu_top {
	position: absolute;
	top: 13px;
	right: 0;
	display: flex;

	li {
		display: none;
	}

	.mnu_lang {
		display: block;

		a {
			display: flex;
			padding: .5rem 1rem;
			background: #FFF;
			color: var(--primary-color);
			text-transform: uppercase;
			font-family: Roboto, sans-serif;
			font-weight: 700;
			text-decoration: none;
			line-height: 26px;
			text-indent: -9999px;

			&:before {
				display: block;
				text-indent: 0;
			}

			&[aria-label="Verander taal naar Français"]:before {
				content: "FR";
			}

			&[aria-label="Verander taal naar Nederlands"]:before {
				content: "NL";
			}
		}
	}

	.lang--active {
		a {
			background: var(--primary-color);
			color: #fff;
		}
	}
}

#pull,
#p1,
#p107 {
	display: none;
}

#innerheader img {
	height: 60px;
}

.logo-small {
	display: none;
}

.b_header-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1140px;
	padding-right: 140px;
	margin: 16px auto;

	#header_top {
		display: none;
	}

	p {
		margin: 0;
	}

	.menu {
		display: flex;
		gap: 16px;
		padding: 0;
		margin: 0;
		list-style: none;

		li {
			a {
				background-color: #3F51B5;
				color: #FFF;
				font-family: Roboto, sans-serif;
				border: none;
				text-transform: uppercase;
				font-weight: 700;
				border-radius: 102px;
				display: inline-block;
				text-decoration: none;
				font-size: .64rem;
				padding: 10px 15px;
				height: 32px;
				display: flex;
				justify-content: center;
				align-items: center;
				min-width: 81px;
			}
		}
	}
}

.user-info {
	display: none;
}

html:lang(nl) {

	#p103,
	#p104 {
		display: none;
	}
}

html:lang(fr) {

	#p105,
	#p106 {
		display: none;
	}
}


@media screen and (max-width: 1050px) {
	.b_header-wrapper {
		.menu {
			display: none;
			background-color: #3f51b5;
			position: absolute;
			flex-direction: column;
			z-index: 99;


			li {
				a {
					border-radius: 0;
				}
			}
		}

		.b_menu-open {
			display: flex;
		}
	}

	#pull {
		display: inline-block;
		font-size: 20px;
		font-weight: 400;
		cursor: pointer;
		text-decoration: none;
		color: var(--primary-color);
	}

	.menu-button::after {
		display: inline-block;
		margin-left: 0.5rem;
		font-weight: 600;
		font-size: 16px;
		content: "\f0c9";
		width: 15px;
		font-family: "Font Awesome 6 Pro";
	}

	#container_menu a[aria-expanded="true"] .menu-button::after {
		content: "\f00d";
	}
}

@media only screen and (max-width: 767px) {
	.logo-large {
		display: none;
	}

	.logo-small {
		display: block;
	}
}

@media only screen and (max-width: 420px) {
	#pull {
		right: 10px;
	}

	.b_menu-open {
		margin-top: 288px;
	}
}