/* variabelen voor het inspringen van mobile menu  items*/

.menu-knop-class {
    display:none;
}

/* begin layout smal menu */

#header-menu{
    width: calc(var(--menu-smal-breedte) + 20px);  /* + 20px is de padding left */
    height: 25px;
    position: relative;
    top: 10px;
    padding: 10px;
    background-color: var(--menu-bg);
}

.menu-header{
    display:none;
}

.menu-smal-change{
    display: block;
}


/*  begin code voor de menu pijl op of neer  */ 
.menu-dropbtn {
	position: relative;
	display: inline-block;
	padding-left: 15px; 
	color:var(--menu-tekst);
	border: none;
    text-align: left;
	cursor: pointer;
    border-top-style: solid;
    border-top-width: var(--menu-smal-lijndikte);
    border-top-color: var(--menu-bg-lijntje);
}

.triangle-down {
    display: inline;
    float: right;
    padding-right: 22px;
    margin-left: 6px;
}

.triangle-up {
    display: none;
    float: right;
    padding-right: calc(var(--menu-smal-rechterkantlijn-padding));
    margin-left: 6px;
    }


.menu-btn-niveau-2 .triangle-down {
    display: inline;
    float: right;
    padding-right: calc(calc(var(--menu-smal-rechterkantlijn-padding)) - var(--menu-rand-lijndikte) - var(--menu-smal-rechterkantlijn));
}

.menu-btn-niveau-2 .triangle-up {
    display: none;
    float: right;
    padding-right: calc(calc(var(--menu-smal-rechterkantlijn-padding)) - var(--menu-rand-lijndikte) - var(--menu-smal-rechterkantlijn));
    }

.menu-pijl-op .triangle-down {
    display: none;
}

.menu-pijl-op .triangle-up {
    display: inline;
}


/*  einde code voor de menu pijl op of neer  */ 

/*  begin menu in en uitklappen */
/* klap alle groepen in bij pagina laden */  
.menu-knop-class{
	display:none;
} 

/* laat menu onder menuknop zien */
.show{
	display:block;
} 

#menu-nav a {
    display: inline-block;
    height: 100%;
    text-decoration: none;
    padding-left: 15px;
    padding-right: 15px;
    width: var(--menu-smal-breedte);
    color: var(--menu-tekst);
    border-top-style: solid;
    border-top-width: var(--menu-smal-lijndikte);
    border-top-color: var(--menu-bg-lijntje);
    height: var(--menu-regel-hoogte);
    line-height: var(--menu-regel-hoogte-2);
}

.menu-btn-niveau-1 {
    width: var(--menu-smal-breedte);
    background-color: var(--menu-bg);
    height:var(--menu-regel-hoogte);
    line-height: var(--menu-regel-hoogte);

}

#menu-nav .menu-niveau-1 {	
    margin-left: var(--menu-smal-inspring);
	background-color: var(--menu-bg-2);
    width: calc(var(--menu-smal-breedte) - var(--menu-smal-inspring) - var(--menu-smal-rechterkantlijn));
    color: var(--menu-tekst);
    /* border-left-style: solid;
    border-left-width: var(--menu-smal-lijndikte);
    border-left-color: var(--menu-bg-lijntje); */
    border-style: solid;
    border-width: var(--menu-rand-lijndikte);         
    border-color: var(--menu-rand-rondom);   
}

#menu-nav .menu-niveau-1 a {
    display: block;
    width: calc(var(--menu-smal-breedte) - var(--menu-smal-inspring) - var(--menu-smal-lijndikte) - 2*var(--menu-rand-lijndikte));
    height:var(--menu-regel-hoogte);
    line-height: var(--menu-regel-hoogte);
}

.menu-btn-niveau-2 {
    width: calc(var(--menu-smal-breedte) - var(--menu-smal-inspring) - var(--menu-smal-lijndikte) - 2*var(--menu-rand-lijndikte) - var(--menu-smal-rechterkantlijn));
    background-color: var(--menu-bg-2);
}

#menu-nav .menu-niveau-1 .menu-niveau-2 {
    margin-left: var(--menu-smal-inspring);
    width: calc(var(--menu-smal-breedte) - 2*var(--menu-smal-inspring) - 1*var(--menu-smal-lijndikte) - 1*var(--menu-rand-lijndikte) - var(--menu-smal-rechterkantlijn));
	background-color: var(--menu-bg-3);
    color: var(--menu-tekst);
    /* border-left-style: solid;
    border-left-width: var(--menu-smal-lijndikte);
    border-left-color: var(--menu-bg-lijntje); */
    border-style: solid;
    border-width: var(--menu-rand-lijndikte);         
    border-color: var(--menu-rand-rondom);   
}

#menu-nav .menu-niveau-1 .menu-niveau-2 a {
    width: calc(var(--menu-smal-breedte) - 2*var(--menu-smal-inspring) - 2*var(--menu-smal-lijndikte) - 1*var(--menu-rand-lijndikte));
}

.menu-btn-niveau-3 {
    width: calc(var(--menu-smal-breedte) - 2*var(--menu-smal-inspring) - 2*var(--menu-smal-lijndikte) - 2*var(--menu-rand-lijndikte));
    background-color: var(--menu-bg-3);
}

#menu-nav .menu-niveau-1 .menu-niveau-2 .menu-niveau-3 {
    margin-left: var(--menu-smal-inspring);
    width: calc(var(--menu-smal-breedte) - 3*var(--menu-smal-inspring) - 3*var(--menu-smal-lijndikte) - 6*var(--menu-rand-lijndikte));
	background-color: var(--menu-bg-4);
    color: var(--menu-tekst);
    border-left-style: solid;
    border-left-width: var(--menu-smal-lijndikte);
    border-left-color: var(--menu-bg-lijntje);
}

#menu-nav .menu-niveau-1 .menu-niveau-2 .menu-niveau-3 a {
    width: calc(var(--menu-smal-breedte) - 3*var(--menu-smal-inspring) - 3*var(--menu-smal-lijndikte) - 6*var(--menu-smal-randdikte));
}

.menu-btn-niveau-4 {
    width: calc(var(--menu-smal-breedte) - 3*var(--menu-smal-inspring) - 3*var(--menu-smal-lijndikte) - 8*var(--menu-smal-randdikte));
    background-color: var(--menu-bg-4);
}

#menu-nav .menu-niveau-1 .menu-niveau-2 .menu-niveau-3 .menu-niveau-4 {
    margin-left: var(--menu-smal-inspring);
    width: calc(var(--menu-smal-breedte) - 4*var(--menu-smal-inspring) - 4*var(--menu-smal-lijndikte));
	background-color: var(--menu-bg-5);
    color: var(--menu-tekst);
    border-left-style: solid;
    border-left-width: var(--menu-smal-lijndikte);
    border-left-color: var(--menu-bg-lijntje);
}

#menu-nav .menu-niveau-1 .menu-niveau-2 .menu-niveau-3 .menu-niveau-4 a {
    width: calc(var(--menu-smal-breedte) - 4*var(--menu-smal-inspring) - 4*var(--menu-smal-lijndikte));
}

.menu-btn-niveau-5 {
    width: calc(var(--menu-smal-breedte) - 4*var(--menu-smal-inspring) - 4*var(--menu-smal-lijndikte));
    background-color: var(--menu-bg-5);
}

#menu-nav .menu-niveau-1 .menu-niveau-2 .menu-niveau-3 .menu-niveau-4 .menu-niveau-5{
    margin-left: var(--menu-smal-inspring);
    width: calc(var(--menu-smal-breedte) - 5*var(--menu-smal-inspring) - 5*var(--menu-smal-lijndikte));
	background-color: var(--menu-bg-6);
    color: var(--menu-tekst);
    border-left-style: solid;
    border-left-width: var(--menu-smal-lijndikte);
    border-left-color: var(--menu-bg-lijntje);
}

#menu-nav .menu-niveau-1 .menu-niveau-2 .menu-niveau-3 .menu-niveau-4 .menu-niveau-5 a {
    width: calc(var(--menu-smal-breedte) - 5*var(--menu-smal-inspring) - 5*var(--menu-smal-lijndikte));
}

#menu-nav{
    max-height: calc(100vh - 120px) ;
    overflow-x: hidden;
    background-color: var(--menu-bg);
}

/*  einde menu in en uitklappen */


@media screen and (min-width: 900px) {
.menu-header{
    display:block;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: auto;
    margin-bottom: 0px;

}

#header-menu{
    color: var(--menu-tekst);
    text-align: center;
    height: 25px;
    width: 100%;
    top: 0px;
    padding: 0px;
    background-color: var(--menu-bg);
}

#menu-nav {
    display:flex; 
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    margin-top: auto;
    margin-bottom: 3px;
    justify-content: center;
    /* height: 25px;
    line-height: 25px; */
}

#menu-nav a {
    border-top-style: none;
    width: auto;
    color: var(--menu-tekst);
    height: 25px;
    line-height: 25px;
  
}

.menu-breed {
    float: left;
    overflow: hidden;
}

.menu-btn-niveau-1 {
    border-top-style: none;
    width: auto;
    color: var(--menu-tekst);
    height:25px;
    line-height: 25px;

}

.menu-niveau-1 {
    display: none;
    position: absolute;
}

.menu-niveau-1 a{
    float:none;
    display: block;
    text-align: left;
}

#menu-nav .menu-breed a{
    border-top-style: solid;
}

.show {
    display:block;
}

.triangle-down {
    padding-right: 1px;

}

.triangle-up {
    padding-right: 1px;
}

}

/* Start  >> Maak een menu icon inplaats van de tekst voor de zoek pagina 
     in menu editor:
     Rechtsboven → Scherminstellingen  
    Vink aan: CSS‑klassen 
    Open het menu‑item → vul bij CSS‑klasse in: menu-search-icon
*/
.menu-search-icon > a {
    font-size: 0; /* tekst verbergen */
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.menu-search-icon > a:before {
    content: "\1F50D"; /* 🔍 */
    font-size: 20px;
    line-height: 24px;
    position: absolute;
    top: 0;
    left: 0;
}

/* Einde  >> Maak een menu icon inplaats van de tekst voor de zoek pagina */