.slide-menu { position:fixed; width:320px; max-width:100%; height:100vh; top:0; right:0; display:none; overflow:hidden; box-sizing:border-box; transform:translateX(100%); overflow-y:auto; z-index:999999; }
.slide-menu,.slide-menu .slide-menu__slider { transition:transform .3s ease-in-out; will-change:transform; }
.slide-menu .slide-menu__slider { width:100%; transform:translateX(0); }
.slide-menu ul { position:relative; width:100%; margin:0; padding-left:0; list-style:none; }
.slide-menu ul ul { position:absolute; top:0; left:100%; display:none; }
.slide-menu ul a { display:block; }
.slide-menu a { cursor:pointer; }

:active,:focus { outline:none!important; }

.icon { height:.6em; margin:0 .1em; }

.slide-menu { width:340px; background-color:#eeeeee; }
.slide-menu,.slide-menu a { color:#222; }
.slide-menu li a { padding:0.9em 1.5em !important; border-bottom:1px solid #dddddd; text-decoration:none; font-weight:300; }
.slide-menu a:hover { background-color:#ccc; }
.slide-menu .controls { display:flex; margin-bottom:1em; }
.slide-menu .btn { padding:.75em 1.5em; flex:1 0 auto; font-size:90%; color:#fff; background-color:#4375b4; text-transform:uppercase; border-radius:0 !important; }
.slide-menu .btn:first-of-type { text-align:left; }
.slide-menu .btn:first-of-type:before { content:"\f0d9"; margin-right:.5em; font-family:'Font Awesome 5 Free'; font-weight:900; }
.slide-menu .btn:last-of-type { text-align:right; }
.slide-menu .btn:last-of-type:before { content:"\f00d"; margin-right:.5em; font-family:'Font Awesome 5 Free'; font-weight:900; }
.slide-menu .slide-menu__backlink { text-transform:uppercase; }
#test-menu-left p { font-size:110%; padding-left:1.25em; padding-right:1.25em; }

button.slide-btn { position:absolute; right:15px; top:25px; font-size: 18px; color: #333; background: transparent; border: 0; outline:0; text-transform:uppercase; }