@media(min-width: 769px){ 
    #sp-nav {
        display:none;
    }
}

#sp-hide-menu{display:none;}
#sp-nav,#sp-nav.wide{width:80%;overflow:hidden;position:absolute;top:0;left:20%;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:1.3s;transition-duration:1.3s;
}
#sp-nav.show,#sp-nav.show.wide{left:20%;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;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
body{overflow-x:hidden;}

#sp-nav {
    display:none;
}

#sp-nav.show {
	position: absolute;
    display:block;
}

@media(max-width: 768px){ 
    #sp-nav+#sp-page {
    	transition: all .3s ease-in-out;
        -webkit-transition: all .3s ease-in-out; /** Chrome & Safari **/
        -moz-transition: all .3s ease-in-out; /** Firefox **/
        -o-transition: all .3s ease-in-out; /** Opera **/
    }
    #sp-nav.show+#sp-page {
        transform: translate(-30%,0);
        -webkit-transform: translate(-30%,0); /** Safari & Chrome **/
        -o-transform: translate(-30%,0); /** Opera **/
        -moz-transform: translate(-30%,0); /** Firefox **/
    }
    #sp-nav.show,#sp-nav.wide.show{width:30%;left:70%;}
}

@media(max-width: 480px){  
    #sp-nav.show+#sp-page {
    	transform: translate(-80%,0);
        -webkit-transform: translate(-80%,0); /** Safari & Chrome **/
        -o-transform: translate(-80%,0); /** Opera **/
        -moz-transform: translate(-80%,0); /** Firefox **/
    }

    #sp-nav.show,#sp-nav.wide.show{width:80%;left:20%;}

}