html, 
body, 

.container, 
.content-wrap {overflow: hidden;width: 100%;height: 100%;}
.container {background:#151515;}
.content-wrap {overflow-y: scroll;-webkit-overflow-scrolling: touch;}
.content {width:100%;position: relative;background: #FFF; overflow:hidden}
.content::before {position: absolute;top: 0;left: 0;z-index:1000;width: 100%;
height: 100%;background: rgba(0,0,0,0.3);content: '';opacity: 0.5;
-webkit-transform: translate3d(100%,0,0);transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;transition: 
opacity 0.4s, transform 0s 0.4s;-webkit-transition-timing-function: 
cubic-bezier(0.7,0,0.3,1);transition-timing-function: cubic-bezier(0.7,0,0.3,1);}


.menu-wrap a {color: #FFF;}
.menu-wrap a:hover,
.menu-wrap a:focus {color: #FFF;}

/* Menu Button */
.menu-button {position: relative;z-index:9; cursor:pointer; width:15px; height:25px}
.menu-button::before {position: absolute;top: 0.5em;right: 0.5em;bottom: 0.5em;left: 0.5em;background: linear-gradient(#FFF 20%, transparent 20%, transparent 40%, #373a47 40%, #FFF 60%, transparent 60%, transparent 80%, #FFF 80%);
	content: '';}
.menu-button:hover {opacity: 0.6;}

/* Menu */
.menu-wrap {position: absolute;z-index:1001;width: 200px;height: 100%;overflow-y: scroll;background:#151515;padding: 4% 4%;font-size:14px;-webkit-transform: translate3d(-320px,0,0);transform: translate3d(-320px,0,0);-webkit-transition: -webkit-transform 0.4s;transition: transform 0.4s;-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);transition-timing-function: cubic-bezier(0.7,0,0.3,1); }
.menu, 
.icon-list {height: 100%;}
.icon-list {-webkit-transform: translate3d(0,100%,0);transform: translate3d(0,100%,0);}
.icon-list a {display: block;padding:5px 0.8em;-webkit-transform: translate3d(0,500px,0);transform: translate3d(0,500px,0);}
.icon-list,
.icon-list a {-webkit-transition: -webkit-transform 0s 0.4s;transition: transform 0s 0.4s;-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);transition-timing-function: cubic-bezier(0.7,0,0.3,1);}
.icon-list a span {}

/* Shown menu */
.show-menu .menu-wrap {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);-webkit-transition: -webkit-transform 0.8s;transition: transform 0.8s;-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);transition-timing-function: cubic-bezier(0.7,0,0.3,1);}
.show-menu .icon-list,
.show-menu .icon-list a {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);-webkit-transition: -webkit-transform 0.8s;transition: transform 0.8s;-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);transition-timing-function: cubic-bezier(0.7,0,0.3,1);}
.show-menu .icon-list a {-webkit-transition-duration: 0.9s;transition-duration: 0.9s;}
.show-menu .content::before {opacity: 1;-webkit-transition: opacity 0.8s;transition: opacity 0.8s;-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);transition-timing-function: cubic-bezier(0.7,0,0.3,1);-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}