#sp-hide-menu{display:none}
#sp-nav,#sp-nav.wide{width:80%;overflow:hidden;position:absolute;top:0;left:0;height:100%}#sp-nav nav,#sp-nav.wide nav{display:block;background:black;color:white;z-index:5;height:100%}#sp-nav nav div,#sp-nav.wide nav div{z-index:5}
#sp-page{position:absolute;width:100%;height:100%;float:right;z-index:10;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition-duration:0.3s;transition-duration:0.3s}
#sp-nav.show,#sp-nav.show.wide{left:0px;overflow-x:hidden}
#sp-nav.show+#sp-page #sp-show-menu,#sp-nav.show.wide+#sp-page #sp-show-menu{display:none}
#sp-nav.show+#sp-page #sp-hide-menu,#sp-nav.show.wide+#sp-page #sp-hide-menu{display:inline}
#sp-nav.show+#sp-page,#sp-nav.show.wide+#sp-page{position:absolute;-webkit-transform:translateX(80%);transform:translateX(80%);-webkit-transition-duration:0.3s;transition-duration:0.3s;overflow-x:hidden;-webkit-overflow-scrolling:touch}
body{overflow-x:hidden}
@media (min-width:900px){#sp-nav{width:20%} #sp-nav.show+#sp-page{-webkit-transform:translateX(20%);transform:translateX(20%)}}