/* prep, resets */
.monav.mobile-mode, .monav.mobile-mode * { box-sizing: border-box; }
.monav.mobile-mode a { cursor: pointer; color: #E6B174; }
.monav.mobile-mode a:hover { color: #edefdd; }

/* container, i.e. nav tag */
.monav.mobile-mode { position: absolute; right: 1em; top: 1em; background: #888; overflow: hidden; transition: background .5s; }
.monav.mobile-mode:not(.open) { overflow: hidden; width: 44px; height: 44px; color: white; cursor: pointer; }
.monav.mobile-mode:not(.open):hover { background: #555; }
.monav.mobile-mode.open { width: calc(100% - 2em); max-width: 300px; padding: 1em; background: #555; }

/* three lines */
.monav.mobile-mode .lines { border-top: solid 4px white; width: 30px; height: 50%; margin: 12px 0 0 7px; position: relative; }
.monav.mobile-mode.open .lines { display: none; }
.monav.mobile-mode .lines::before, .monav.mobile-mode .lines::after { position: absolute; width: 100%; content: ''; background: white; height: 4px; top: 5px; }
.monav.mobile-mode .lines::after { top: 14px; }

/* close button */
.monav .close { display: none; position: absolute; right: .7em; top: .85em; color: white; font-size: 1.5em; font-weight: bold; line-height: 0; cursor: pointer; color: #edefdd !important; }
.monav.mobile-mode.open .close { display: block; }

/* nav content */
.monav.mobile-mode:not(.open) > *:not(.lines) { visibility: hidden; }
.monav.mobile-mode.open > * { visibility: visible; }

/* nav with lists */
.monav.mobile-mode ul { position: relative; width: 100%; padding: 0; list-style: none; margin: 1em 0 0 0; }
.monav.mobile-mode li { position: relative; }
.monav.mobile-mode .has-kids::after { content: '\25BA'; position: absolute; right: 0; top: .5em; cursor: pointer; color: #edefdd; }
.monav.mobile-mode ul ul { margin-top: 25px; }
.monav.mobile-mode .has-kids ul::before { content: '\25BA'; position: absolute; left: 0; top: -30px; transform: rotate(180deg); font-size: 1.5em; cursor: pointer; color: #edefdd; }
.monav.mobile-mode ul ul { position: absolute; top: 0; left: 500px; }

/* nav with direct anchors, i.e. no lists */
.monav.mobile-mode > a { display: block; }

/* styling for both approaches */
.monav.mobile-mode li, .monav.mobile-mode > a { height: 36px; padding: .5em; }
.monav.mobile-mode li:nth-child(even), .monav.mobile-mode a:nth-child(even) { background: rgba(0, 0, 0, .2); }