html, body, .container, .content-wrap { width: 100%; height: 100%; }
.container { background: #373a47; }
.menu-wrap a { color: #b8b7ad; }
.menu-wrap a:hover, .menu-wrap a:focus { color: #c94e50; }
.content-wrap { overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; }
.content { position: relative; background: #b4bad2; }
.content::before { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: rgba(0,0,0,0.3); content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s; transition: opacity 0.3s, transform 0s 0.3s; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
/* Menu Button */
.menu-button { position: fixed; z-index: 1000; margin: 0.5em; padding: 0; width: 2.5em; height: 2.0em; border: none; text-indent: 3.5em; font-size: 1.5em; color: transparent; background: transparent; }
.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%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%); content: ''; }
.menu-button:hover { opacity: 0.6; }
/* Close Button */
.close-button { width: 16px; height: 16px; position: absolute; right: 1em; top: 1em; overflow: hidden; text-indent: 16px; border: none; z-index: 1001; background: transparent; color: transparent; }
.close-button::before, .close-button::after { content: ''; position: absolute; width: 2px; height: 100%; top: 0; left: 50%; background: #95a5a6; }
.close-button::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.close-button::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
/* Menu */
.menu-wrap { position: fixed; z-index:10009; width: 200px; height:100%; font-size: 1.15em; -webkit-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; }
.menu { background: #373a47; height:100%; z-index:10001; }
.icon-list { width: 280px; }
.icon-list a { display: block; padding: 0.8em; }
.icon-list a i { opacity: 0.5; }
.icon-list a span { margin-left: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 0.75em; }
/* Morph Shape */
.morph-shape { position: absolute; width:50px; height: 100%; top: 0; right: 0; fill: #373a47; z-index: 1000; }
/* Shown menu */
.show-menu .menu-wrap { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.show-menu .content-wrap { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); }
.show-menu .content::before { opacity: 1; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }