.headernav {
position:fixed;
top:0;
left:0;
width:100%;
height:auto;
z-index:100;
display:block;
}

.headermenu {
position:relative;
font-size:1em;
padding-top:0.5rem;
padding-bottom:0.5rem;
list-style-type:none;
list-style-position:inside;
background-color:var(--headerbgcolor);
display:flex;
flex-direction:row;
align-items:center;
justify-content:flex-start;
gap:0.5rem;
}
@media screen and (max-width: 900px) {
	.headermenu {
	font-size:0.8em;
	justify-content:space-between;
	gap:0;
	}
}
.headermenu .menu-item {
position:relative;
color:var(--navitemcolor);
text-align:center;
text-shadow:none;
line-height:2.5;
white-space:nowrap;
margin:0;
}
.headermenu .menu-item:first-child {
margin-right:auto;
}
@media screen and (max-width: 900px) {
	.headermenu .menu-item:first-child {
	margin-right:0;
	}
}
.headermenu .menu-item:before {
content:'';
}
.headermenu .menu-item:hover .submenu {
display:block;
}
.headermenu a.menu-itemlink, .headermenu .menu-itemlink, a.submenu-itemlink, .submenu-itemlink {
position:relative;
color:var(--navitemcolor);
text-align:center;
text-shadow:none;
line-height:2.5;
white-space:nowrap;
text-decoration:none !important;
padding:0 1.5rem;
background-color:var(--navitembgcolor);
background-image:var(--navitembgimage);
display:block;
}
.headermenu .submenu-item, .headermenu a.submenu-itemlink, .headermenu .submenu-itemlink {
text-align:left !important;
}
a.headermenu .menu-itemlink:hover, .headermenu .menu-itemlink:hover, a.submenu-itemlink:hover, .submenu-itemlink:hover {
color:var(--navitemcolorhover);
background-color:var(--navitembgcolorhover);
background-image:var(--navitembgimagehover);
text-decoration:none !important;
}
.headermenu a.on, .headermenu .on {
color:var(--navitemcolorhover);
background-color:var(--navitembgcolorhover);
}
.headermenu .menu-pijl {
font-size:0.8em;
transform:rotate(90deg);
margin-left:0.5rem;
display:inline-block;
}
.headermenu .submenu {
position:absolute;
min-width:100%;
font-size:0.9em;
list-style-type:none;
padding:0;
margin:0;
background-color:var(--subnavitembgcolor);
opacity:0;
animation:500ms ease 0s normal forwards 1 OpacityFadeIn;
z-index:20;
display:none;
}

.headermenu-logo {
position:relative;
width:auto;
height:1.5rem;
display:none;
}
.headermenu-logo-show {
animation:500ms ease 0s normal forwards 1 OpacityFadeIn;
display:block;
}
@media screen and (max-width: 900px) {
	.headermenu-logo-show {
	display:none;
	}
}
.headermenu-logo img {
width:auto;
height:100%;
display:block;
}

.headermenu-zoek {
position:relative;
width:auto;
height:auto;
min-height:2.5em;
padding-right:0.5rem;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
align-items:center;
justify-content:flex-end;
gap:0;
}
.headermenu-zoek .zoekinput {
width:auto;
min-width:0;
max-width:0;
height:auto;
font-size:1em;
padding:0.1rem 0.25rem 0.2rem 0.25rem;
margin:0;
background:rgb(255 255 255);
border:1px solid rgb(0 0 0);
border-radius:0.25rem;
opacity:0;
display:block;
transition:all 0.3s ease 0s;
}
@media screen and (max-width: 900px) {
	.headermenu-zoek .zoekinput {
	display:none;
	}
}
.headermenu-zoek:hover .zoekinput {
max-width:20ch;
opacity:1;
}
.headermenu-zoek .zoekicon {
width:1.5rem;
height:1.5rem;
border:none;
background-color:transparent;
background-image:url('../graphics/search-z.png');
background-size:90%;
background-position:center;
background-repeat:no-repeat;
}
.headermenu-zoek .zoekicon:hover {
cursor:pointer;
}

.navbutton {
position:relative;
width:auto;
height:auto;
color:var(--headercolor);
font-size:1em;
padding:0 0 0 2rem;
align-items:center;
gap:0.3rem;
z-index:100;
transition:all 0.3s ease 0s;
display:none;
}
@media screen and (max-width: 900px) {
	.navbutton {
	display:flex;
	}
}
.navbutton-show {
animation:500ms ease 0s normal forwards 1 OpacityFadeIn;
display:flex;
}

.navbutton-bars {
position:relative;
display:block;
z-index:10;
}
.navbutton-bars:hover {
cursor:pointer;
}
.bar1, .bar2, .bar3 {
width:20px;
height:4px;
background-color:var(--headercolor);
margin:3px 0;
transition:0.4s;
}
.navbutton-bars-on .bar1 {
position:relative;
top:1px;
transform:rotate(-45deg) translate(-4px, 4px);
}
.navbutton-bars-on .bar2 {
opacity:0;
}
.navbutton-bars-on .bar3 {
position:relative;
top:1px;
box-shadow:none;
transform:rotate(45deg) translate(-6px, -6px);
}

.header {
position:fixed;
top:2rem;
left:0;
right:0;
font-size:1em;
margin:0;
display:block;
z-index:10;
}
@media screen and (max-width: 900px) {
	.header {
	top:1rem;
	font-size:0.8em;
	}
}
.header-scroll {
top:1rem;
font-size:0.9em;
}
@media screen and (max-width: 900px) {
	.header-scroll {
	font-size:0.6em;
	}
}

.headerbox {
position:relative;
width:auto;
height:auto;
padding:1rem 0;
clip-path:polygon(4% 0%, 100% 0%, 100% 100%, 5% 100%);
background-color:var(--headerbgcolor);
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-items:center;
align-content:flex-start;
justify-content:flex-start;
gap:0;
}
@media screen and (max-width: 900px) {
	.headerbox {
	padding:1rem 0;
	}
}
.headerbox:first-child {
padding-left:5%;
}
@media screen and (max-width: 900px) {
	.headerbox:first-child {
	padding-left:0;
	}
}
.headerbox:last-child {
padding-right:5%;
}
@media screen and (max-width: 900px) {
	.headerbox:last-child {
	padding-right:0;
	}
}
.header-scroll .headerbox {
padding:0.5rem 0;
}
@media screen and (max-width: 900px) {
	.header-scroll .headerbox {
	padding:0.5rem 0;
	}
}

.headerbox h1 {
color:var(--headercolor);
font-size:1.5em;
font-weight:700;
margin:0 0 0.5em 0;
}
.headerbox h2 {
color:var(--headercolor);
font-size:1.5em;
font-weight:700;
margin:0 0 0.5em 0;
}
.headerbox p {
color:var(--headercolor);
font-size:1em;
line-height:1.5;
margin:0;
}
.headerbox a {
color:var(--headercolor);
}
.headerbox a:hover {
text-decoration:underline;
}

.headerlogo {
position:relative;
width:20%;
min-width:100px;
max-width:260px;
margin:0 auto;
height:auto;
display:block;
transition:all 1s ease 0s;
}
@media screen and (max-width: 900px) {
	.headerlogo {
	max-width:120px;
	}
}
.header-scroll .headerlogo {
width:120px;
}
@media screen and (max-width: 900px) {
	.header-scroll .headerlogo {
	width:80px;
	min-width:80px;
	max-width:120px;
	}
}
.headerlogo img {
width:100%;
height:auto;
display:block;
}

.headertitel {
position:relative;
width:100%;
height:auto;
margin:1rem 0;
display:block;
}
a.headertitel:hover {
text-decoration:none;
}
.headertitel h1 {
font-size:4em;
line-height:1;
font-weight:700;
text-transform:uppercase;
white-space:nowrap;
margin:0;
}

.headertext {
font-family:'Inter-medium';
position:relative;
width:auto;
height:auto;
font-size:2em;
text-align:center;
text-wrap:balance;
display:block;
flex:1;
transition:all 0.8s ease 0s;
}
@media screen and (max-width: 900px) {
	.headertext {
	font-size:1em;
	}
}
.header-scroll .headertext {
font-size:1.8em;
}
@media screen and (max-width: 900px) {
	.header-scroll .headertext {
	font-size:1em;
	}
}

.headertext-link {
position:relative;
width:100%;
height:auto;
text-decoration:none !important;
padding:0 0.3em;
}
.headertext-link::after {
position:absolute;
top:1.3em;
left:0;
right:0;
content:'';
width:0;
height:0.3em;
margin:0 auto;
background-color:var(--acolorhover);
}
a.headertext-link:hover::after {
width:100%;
transition:.5s;
}
.header-scroll .headertext-link::after {
top:1.25em;
height:0.3em;
}

.headertext-link-on {
position:relative;
width:100%;
height:auto;
text-decoration:none !important;
padding:0 0.3em;
}
.headertext-link-on::after {
position:absolute;
top:1.3em;
left:0;
right:0;
content:'';
width:100%;
height:0.3em;
margin:0 auto;
background-color:var(--acolorhover);
}