/* Common styles of menus */

.dl-menuwrapper {visibility:hidden;opacity:0;position:fixed;top:117px;left:0;width: 100%;height:calc(100% - 117px);-webkit-perspective: 1000px;perspective: 1000px;-webkit-perspective-origin: 50% 200%;perspective-origin: 50% 200%;background:#fff;}
.dl-menuwrapper.active {visibility:visible;opacity:1;}
.dl-menuwrapper:first-child {margin-right: 100px;}
.dl-menuwrapper ul {padding: 0;list-style: none;}
.dl-menuwrapper li {position: relative;}
.dl-menuwrapper li a {display: block;position: relative;padding: 15px 20px;font-size: 2.0rem;line-height: 30px;font-weight:400;color: var(--color-navy);outline: none;}
.no-touch .dl-menuwrapper li a:hover {background:var(--color-grey);}

.dl-menuwrapper > ul > li > a {font-weight: 700;}

.dl-menuwrapper li.dl-back > a {padding-left: 40px;background: rgba(0,0,0,0.1);}
.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {position: absolute;top: 0;line-height:60px;font-family: 'Material Symbols Outlined';font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;speak: none;-webkit-font-smoothing: antialiased;content: "\f46a";font-size:3.0rem;}
.dl-menuwrapper li.dl-back:after {left: 10px;color: var(--color-navy);-webkit-transform: rotate(180deg);transform: rotate(180deg);}

.dl-menuwrapper li > a:after {right: 10px;color: var(--color-navy);}

.dl-menuwrapper .dl-menu {position: absolute;width: 100%;opacity: 0;pointer-events: none;-webkit-backface-visibility: hidden;backface-visibility: hidden;}

.dl-menuwrapper .dl-menu.dl-menuopen {opacity: 1;pointer-events: auto;}

/* Hide the inner submenus */
.dl-menuwrapper li .sub-menu {display: none;}

/*
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link.
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
	display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .sub-menu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .sub-menu,
.dl-menu.dl-subview li.dl-subviewopen > .sub-menu > li {
	display: block;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .sub-menu {
	position: absolute;
	width: 100%;
	top: 50px;
	left: 0;
	margin: 0;
}

/* Animation classes for moving out and in */

.dl-menu.dl-animate-out-1 {
	-webkit-animation: MenuAnimOut1 0s;
	animation: MenuAnimOut1 0s;
}

@-webkit-keyframes MenuAnimOut1 {
	0% { }
	50% {}
	75% {opacity: .5;}
	100% {opacity: 0;}
}


@keyframes MenuAnimOut1 {
	0% { }
	50% {}
	75% {opacity: .5;}
	100% {opacity: 0;}
}


.dl-menu.dl-animate-in-1 {
	-webkit-animation: MenuAnimIn1 0s;
	animation: MenuAnimIn1 0s;
}


@-webkit-keyframes MenuAnimIn1 {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}


@keyframes MenuAnimIn1 {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

.dl-menuwrapper > .sub-menu.dl-animate-in-1 {
	-webkit-animation: SubMenuAnimIn1 0s ease;
	animation: SubMenuAnimIn1 0s ease;
}


@-webkit-keyframes SubMenuAnimIn1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}



@keyframes SubMenuAnimIn1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


.dl-menuwrapper > .sub-menu.dl-animate-out-1 {
	-webkit-animation: SubMenuAnimOut1 0s ease;
	animation: SubMenuAnimOut1 0s ease;
}


@-webkit-keyframes SubMenuAnimOut1 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}


@keyframes SubMenuAnimOut1 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu {
	position: relative;
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}

.no-js .dl-menuwrapper li .sub-menu {
	display: block;
}

.no-js .dl-menuwrapper li.dl-back {
	display: none;
}

.no-js .dl-menuwrapper li > a:not(:only-child) {
	background: rgba(0,0,0,0.1);
}

.no-js .dl-menuwrapper li > a:not(:only-child):after {
	content: '';
}