/* SLIDING SUBMENU */
#mask {
	position: fixed;
	background-color: transparent;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	visibility: hidden;
	transition: background-color .4s;
}

.mnav .drawer {
	z-index: 99998;
	/*	height: calc(100% + 60px);*/
	height: 100%;
	position: fixed;
/* 	bottom: 0; */
    top: 0;
	left: 0;
	width: 270px;
	margin: 0 0 0 -270px;
/*	padding: .8em;*/
	transition: transform .4s;
/*	display: block;*/
	background: var(--bg);
	color: var(--fg);
	text-align: left;
	-webkit-overflow-scrolling: touch;
	will-change: transform;
}

.dopen .drawer {
	max-width: 90%;
	-webkit-transform: translateX(270px);
	transform: translateX(270px);
	box-shadow: 0 0 4px rgba(0,0,0,0.1);
	overflow: auto;
}

/* not sure which of these are needed */
/* .site-header li, */
.mnav .drawer .menu,/* this one overrides the negative margin on horizontal header navs in preceding rule */
.main-nav .menu-item {
	display: block;
	margin: 0;
}

#menu-close,
#menu-open {
	display: inline-block;
	padding: 14px 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

#menu-close {
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*	font: 100 24px/.7 sans-serif;*/
/*    padding: 12px 24px;*/
 	display: none;
}

.menubun {
	background: currentColor;
	width: 18px;
	height: 1px;
	margin: 4px;
}

/* Allow drawer menu to scroll, but not on bigger screens cause fixed headers shift when you hide desktop scrollbars */
/*@media (max-height:770px) {*/
	.mnav.dopen {
		overflow: hidden;
	}

/*}*/

/* only mobile screens */
.mnav.dopen #mask {
	background-color: rgba(0,0,0,.5);
	visibility: visible;
}
.mnav #menu-close {
    display: none;
}


/* HORIZONTAL MAIN NAV */

/* .dnav #menu-close, */
.dnav #menu-open,
.dnav .menutog,
.dnav .menuback,
.dnav .drawer-widget {
	display: none;
}

/* END DRAWER COMMON CSS */

/* HORIZONTAL HEADER SUBMENU */

.dnav .navdd {
	/* top: 100%; */
	/* left: 0; */
/*	left: -16em;*//* doesn't have to be exactly same as width, just 100% was sometimes too small */
/*	right: -16em;*/
/*	margin: 0  auto;*/
	width: max-content;
	/* white-space: pre; *//* instead of specifying a width */
	/* min-width: 12em; */
	position: absolute;
	z-index: 99;/* need anymore cause of parent z-index? */
	visibility: hidden;
	opacity: 0;
	transition: opacity 250ms;
	padding: 2rem;
	margin: -2rem;
}
.dnav .navdd:not(.sub-sub-menu) {
  margin-top: -1rem;
}
.dnav .navdd {
	font-size: .9rem;
    /* border-top: 1px solid #ddd; */
}

.dnav .menu-item:hover > .navdd,
.dnav .menu-item.focus > .navdd {
	visibility: visible;
	opacity: 1;
}

.dnav .navdd ul {
	top: 0;
	left: 99%;
/*	width: 100%;*/
}

/* END HORIZONTAL HEADER SUBMENU */

/* SUBMENU */
/* sliding nav sets height attribute via JS. This is to override if resizing browser to desktop size */
.dnav .main-nav {
    height: auto!important;
}
.menutog {
	padding: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

}
.menuback::before,
.menutog::after {
	content: "";
	border-right: 1px solid currentColor;
	border-top: 1px solid currentColor;
    vertical-align: middle;
    display: block;
	width: 6px;
	height: 6px;
    cursor: pointer;
	transform: rotate(45deg);
}
.menuback::before {
    transform: rotate(225deg);
    margin: 0 3px 0 2px;
}
.mnav .drawer .navdd {
    position: absolute;
    top: 0;
	left: 0;
    margin-left: 100%;
    width: 100%;
}
.mnav .navdd {
    transition: opacity .3s, transform .3s;
}
.navdd .navdd {
    /* transition: .3s; */
    visibility: hidden;
	opacity: 0;
}
.mnav .navdd.focus {
    transform: translate(-100%);
}
/* .main-nav .menu, */
.focus > .navdd {
    visibility:visible;
	opacity:1;
}

.mnav .main-nav {
    overflow: hidden;
	position: relative;
	transition: height .3s;
	margin: 12px 0;/* makes consistent spacing at top and bottom of nav drawer */
}
.mnav .drawer .menu-item {
	position: static;
	display: flex;
/*    justify-content: stretch;*/
   align-items: center;
}
.menuback {
    cursor: pointer;
    padding: 12px;
    display: block;
}

/*.current-menu-item:not(.seperate-tog),*/
/*.current-menu-item.seperate-tog > a,*/
.menuback:hover,
.menu-item:not(.seperate-tog):hover,
.seperate-tog > a:hover,
.seperate-tog > .menutog:hover {
/*    background: rgba(255, 255, 255, 0.1);*/
/*	-webkit-font-smoothing: antialiased;*/
}

navdd {
	padding: .25rem;
}