.menu a {
 color: #fff;
 text-decoration: none;
}
.menu a:hover {
 color: #ffd700;
 outline: none;
}
/* Menu Button */
.menu-button {
 position: fixed;
 z-index: 1000;
 margin: 1em;
 padding: 0;
 width: 2.5em;
 height: 2.25em;
 border: none;
 text-indent: 2.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(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
 background: -webkit-linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
 content: '';
}
.menu-button:hover {
 opacity: 0.7;
 filter:alpha(opacity=70);
 -moz-opacity: 0.7;
}
/* Close Button */
.close-button {
 width: 2em;
 height: 2em;
 position: absolute;
 right: 2em;
 top: 2em;
 overflow: hidden;
 text-indent: 1em;
 font-size: 0.75em;
 border: none;
 background: transparent;
 color: transparent;
}
.close-button::before, .close-button::after {
 content: '';
 position: absolute;
 width: 3px;
 height: 100%;
 top: 0;
 left: 50%;
 background: #bdc3c7;
}
.close-button::before {
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}
.close-button::after {
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
 position: absolute;
 z-index: 1001;
 width: 300px;
 height: 100%;
 background: #373a47;
 padding: 5em 1.5em 0;
 font-size: 1.15em;
 -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: 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:nth-child(2) {
 -webkit-transform: translate3d(0, 1000px, 0);
 transform: translate3d(0, 1000px, 0);
}
.icon-list a:nth-child(3) {
 -webkit-transform: translate3d(0, 1500px, 0);
 transform: translate3d(0, 1500px, 0);
}
.icon-list a:nth-child(4) {
 -webkit-transform: translate3d(0, 2000px, 0);
 transform: translate3d(0, 2000px, 0);
}
.icon-list a:nth-child(5) {
 -webkit-transform: translate3d(0, 2500px, 0);
 transform: translate3d(0, 2500px, 0);
}
.icon-list a:nth-child(6) {
 -webkit-transform: translate3d(0, 3000px, 0);
 transform: translate3d(0, 3000px, 0);
}
.icon-list a span {
 margin-left: 10px;
 font-weight: 700;
}
/* 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);
}
 @media screen and (max-width: 480px) {
.menu-wrap {
 position: absolute;
 z-index: 1001;
 width: 100%;
 height: 100%;
 background: #373a47;
 padding: 4em 1.5em 0;
 font-size: 1.5em;
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 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);
}
}