.spnav { transition:none; transform-style:preserve-3d; overflow:hidden; margin:0 auto; width:100%; padding:0 20px; max-height:0; }
.spnav.show-menu { max-height:800px; overflow-y:scroll; background:#fff; position:relative; z-index:8000; }
.spnav--instant-close.hide-menu { transition:none !important; }
.spnav div.nav, div.inner-nav div.nav { font-size:100%; position:relative; overflow:hidden; }
.spnav div.nav a { display:block; color:#000; z-index:2; overflow:hidden; font-size:16px; border:0; border-bottom:1px dotted #000; padding:15px; position:relative; }
div.inner-nav { width:100%; padding-left:20px; }
div.inner-nav:not(.show-menu) { max-height:0; }
div.nav a + span.inner-nav-opener { z-index:10; position:absolute; right:10px; top:15px; width:30px; height:30px; }
div.nav a + span.inner-nav-opener:before { content:' '; display:block; width:12px; height:2px; background:#000; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(0deg); transition:all 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
div.nav a + span.inner-nav-opener:after { content:' '; display:block; width:12px; height:2px; background:#000; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(270deg); transition:all 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
div.nav a + span.inner-nav-opener.active:before { transform:translate(-50%, -50%) rotate(180deg); }
div.nav a + span.inner-nav-opener.active:after { transform:translate(-50%, -50%) rotate(0deg); }
.hide-menu { opacity:0; visibility:hidden; }
.show-menu { opacity:1; visibility:visible; }
.hide-menu, .show-menu { transition:all .4s ease-in-out; }
header { z-index:9999; }
header.fixed-header { position:fixed; width:100%; top:0; }
header.fixed-header .spnav.show-menu { height:calc(100vh - 72px); }