#hamburgermenu_icon {
    display: none;
    position:absolute;
    z-index: 999999999;
    top:0;
    right:0;
    width:3rem;
    height:3rem;
    background-image:url(../res/hamburgermenu_icon.svg);
    background-repeat: no-repeat;
    background-size:cover;
    cursor:pointer;
}

#menuMain {max-width:60%; position: absolute;
    left:20rem; top: 0;
    padding-top:3.4rem;
    z-index: 999999991;
}

/* STYLE */

#menuMain a,
#menuMain a:visited {color: #0373B0; font-weight: bold;}
#menuMain a:focus,
#menuMain a:focus-visible {text-decoration: underline;}
#menuMain li {line-height: 2rem;}

#menuMain a:hover {background-image: url(/res/arrow-down.png);
    background-size: 1rem; position:relative; z-index:999;
    background-repeat: no-repeat;
    background-position: right top;
	padding-right: 1.25rem;
border-bottom: #0373B0 4px solid; padding-bottom: 1rem; text-decoration: none;
}

/* NIVEAU 1 */

li.level1 {
    display: inline-block;
    margin-right: 1rem;
    vertical-align: top;
    text-align: left;
    text-wrap: nowrap;
}

/* NIVEAU 1 - met submenu */

li.level1.has-submenu > ul.level2_panel {
    position: absolute;
    display: none;
    box-sizing: border-box;
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.05), 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
    background: #ffffff;
    color: #0373B0;
	border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
	margin-left: -1rem;
    margin-right: 0;
	padding-top: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}

li.level1.has-submenu.open > ul.level2_panel {display: block;}
li.level1 a.active{border-bottom: #0373B0 4px solid; padding-bottom: 1rem; text-decoration: none;}
/* NIVEAU 2 */

ul.level2_panel>li {display: flex;}
ul.level2_panel a {font-weight: 500 !important;}
ul.level2_panel a:hover {font-weight: bold !important; background-image: url(/res/arrow-right.png) !important; border-bottom: #0373B0 0px solid !important; padding-bottom: 0px !important; background-position: right center !important;}
/* NIVEAU 2 - met submenu */

ul.level3_panel {
    display: none;
    position: absolute;
    left: 100%;
    background-color: #d4eefa;
    color: #0373B0;
    border-bottom-left-radius: unset;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.level2.has-submenu.open > ul.level3_panel {display: block;}

/* NIVEAU 3 */

li.level3 {
    padding-left: 1rem;
    padding-right: 1rem;
}
ul.level3_panel a:hover {background-image: none !important;}
/* BREEKPUNT BEPALEN IVM MOBIEL GEBRUIK */

@media screen and (max-width: 1160px) {
	#menuMain {padding-top:1rem;}
}

@media screen and (max-width: 900px) {

    #hamburgermenu_icon {display: block;}
    #menuMain {
        position: absolute;
        max-width:100%;
        background-color:#ffffff;
        left:0;
        top: 0;
        padding-top:3.4rem;
    }

    #menuMain[data-state="closed"] {display: none;}
    #menuMain[data-state="open"] {display: block;}

    /* STYLE */
    
    #menuMain a {
        width:100%;
    }
    
    li.level1 {
        display: block;
    }
    
    /* NIVEAU 1 - met submenu */
    
    li.level1.has-submenu > ul.level2_panel {
        position: unset;
        display: block;
        padding-top:unset;
        padding-bottom:unset;
        margin-left:1rem;
    }
    
    li.level1.has-submenu.open > ul.level2_panel {display: block;}
    
    /* NIVEAU 2 */
    
    ul.level2_panel > li {display: block;}
    
    /* NIVEAU 2 - met submenu */
    
    ul.level3_panel {
        display: block;
        position: unset;
        background-color: unset;
        left: 0;
        margin-left:1rem;
        padding-top:unset;
        padding-bottom:unset;
    }
    
    .level2.has-submenu.open > ul.level3_panel {display: block;}
    
    /* NIVEAU 3 */
    
    li.level3 {padding-left: unset; padding-right: unset;}
	.header-top {height: 3rem; text-align: center;}
	.logoMain {position:relative; width: auto; height: unset; aspect-ratio: 1998 / 450; left: unset; top: 0.5rem; max-width: 25%; margin-right:0px; max-height:2.2rem;}
	#menuMain{padding-left: 2rem; }
	img.headerLogo {display: block; height: unset; margin-left: 0.5rem; top: 0.5rem; position: absolute; max-width: 25%; max-height:2.2rem; aspect-ratio: 262 / 64;}
	#menuMain a:hover {background-image: none; border-bottom:0px solid; padding-bottom: 1rem; text-decoration: underline;}
	
}