/* CONTROLS */

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

.controls {
position:relative;
font-size:1em;
padding-top:0.5rem;
padding-bottom:0.5rem;
list-style-type:none;
list-style-position:inside;
display:flex;
flex-direction:row;
align-items:center;
justify-content:flex-start;
gap:0.5rem;
	@media screen and (max-width:900px) {
	font-size:0.8em;
	justify-content:space-between;
	gap:0;
	}
}
.controls .menu-item {
position:relative;
color:var(--navitemcolor);
text-align:center;
text-shadow:none;
line-height:2.5;
white-space:nowrap;
margin:0;
}
.controls .menu-item:first-child {
margin-right:auto;
	@media screen and (max-width:900px) { margin-right:0; }
}
.controls .menu-item:before {
content:'';
}
.controls .menu-item:hover .submenu {
display:block;
}
.controls a.menu-itemlink, .controls .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);
border:none;
display:block;
}
a.controls .menu-itemlink:hover, .controls .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;
cursor:pointer;
}
.controls a.on, .controls .on {
color:var(--navitemcolorhover);
background-color:var(--navitembgcolorhover);
}

.controls .menu-pijl {
font-size:0.8em;
transform:rotate(90deg);
margin-left:0.5rem;
display:inline-block;
}
.controls .submenu {
position:absolute;
min-width:100%;
font-size:0.9em;
list-style-type:none;
padding:0;
margin:0;
opacity:0;
animation:500ms ease 0s normal forwards 1 OpacityFadeIn;
z-index:20;
display:none;
}
.controls .submenu-item, .controls a.submenu-itemlink, .controls .submenu-itemlink, .controls .submenu-itemlink button {
text-align:left !important;
}

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

.controls-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;
}
.controls-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) {
	.controls-zoek .zoekinput { display:none; }
}
.controls-zoek:hover .zoekinput {
max-width:20ch;
opacity:1;
}
.controls-zoek .zoekicon {
width:1.5rem;
height:1.5rem;
border:none;
background-color:transparent;
background-image:var(--zoekicon);
background-size:90%;
background-position:center;
background-repeat:no-repeat;
}
.controls-zoek .zoekicon:hover {
cursor:pointer;
}

.controls-light-dark {
position:relative;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
.light-button, .dark-button {
width:2.5em;
height:2.5em;
background-color:transparent;
background-repeat:no-repeat;
background-size:80%;
background-position:center center;
border:none;
transition:all 0.3s ease 0s;
}
.light-button {
background-color:rgb(0 0 0);
background-image:url('../graphics/light-dark-w.png');
}
.light-button:hover {
background-color:rgb(255 255 255);
background-image:url('../graphics/light-dark-z.png');
cursor:pointer;
}
.dark-button {
background-color:rgb(255 255 255);
background-image:url('../graphics/light-dark-z.png');
}
.dark-button:hover {
background-color:rgb(0 0 0);
background-image:url('../graphics/light-dark-w.png');
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) { 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);
}