.menu {
     position: fixed;
     width: 300px;
     top: 3em;
     bottom: 3em;
     left: 0;
     z-index: 100;
     overflow: hidden;
     -webkit-transform: translate3d(-150px, 0, 0);
     transform: translate3d(-150px, 0, 0);
     -webkit-transition: -webkit-transform 0.6s;
     transition: transform 0.6s;
}
 .menu.menu--open {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
}
 .main {
     -webkit-transition: opacity 0.6s;
     transition: opacity 0.6s;
}
 .menu.menu--open + .main {
     opacity: 0.3;
     pointer-events: none;
}
 .menu__inner {
     width: calc(100% + 25px);
     padding: 0 140px 2em 0;
     overflow-y: auto;
     height: 100%;
     position: relative;
     z-index: 100;
}
 .menu ul {
     list-style: none;
     padding: 0;
     margin: 0;
}
 .menu ul li {
     margin: 0 0 2em 0;
     -webkit-transform: translate3d(-150px, 0, 0);
     transform: translate3d(-150px, 0, 0);
     -webkit-transition: -webkit-transform 0.6s;
     transition: transform 0.6s;
}
 .menu.menu--anim ul li {
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
}
 .menu ul li:first-child {
     -webkit-transition-delay: 0.3s;
     transition-delay: 0.3s;
}
 .menu ul li:nth-child(2) {
     -webkit-transition-delay: 0.2s;
     transition-delay: 0.2s;
}
 .menu ul li:nth-child(3) {
     -webkit-transition-delay: 0.1s;
     transition-delay: 0.1s;
}
 .menu ul li a {
     display: block;
     outline: none;
}
 .menu ul li .fa {
     font-size: 2.5em;
     display: block;
     margin: 0 auto;
     color: #5f656f;
}
 .menu ul li span {
     font-weight: bold;
     font-size: 0.75em;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
 .menu__handle {
     background: #2f3238;
     border: none;
     width: 30px;
     height: 24px;
     padding: 0;
     outline: none;
     position: absolute;
     top: 3px;
     right: 70px;
     z-index: 2000;
}
 .menu__handle::before, .menu__handle::after, .menu__handle span {
     background: #5f656f;
}
 .menu__handle::before, .menu__handle::after {
     content: '';
     position: absolute;
     height: 2px;
     width: 100%;
     left: 0;
     top: 50%;
     -webkit-transform-origin: 50% 50%;
     transform-origin: 50% 50%;
     -webkit-transition: -webkit-transform 0.25s;
     transition: transform 0.25s;
}
 .menu__handle span {
     position: absolute;
     width: 100%;
     height: 2px;
     left: 0;
     overflow: hidden;
     text-indent: 200%;
     -webkit-transition: opacity 0.25s;
     transition: opacity 0.25s;
}
 .menu__handle::before {
     -webkit-transform: translate3d(0, -10px, 0);
     transform: translate3d(0, -10px, 0);
}
 .menu__handle::after {
     -webkit-transform: translate3d(0, 10px, 0);
     transform: translate3d(0, 10px, 0);
}
 .menu--open .menu__handle span {
     opacity: 0;
}
 .menu--open .menu__handle::before {
     -webkit-transform: rotate3d(0, 0, 1, 45deg);
     transform: rotate3d(0, 0, 1, 45deg);
}
 .menu--open .menu__handle::after {
     -webkit-transform: rotate3d(0, 0, 1, -45deg);
     transform: rotate3d(0, 0, 1, -45deg);
}
 .morph-shape {
     position: absolute;
     width: 240px;
     height: 100%;
     top: 0;
     right: 0;
}
 .morph-shape svg path {
     stroke: #5f656f;
     stroke-width: 5px;
}
 @media screen and (max-width: 63em) {
     .main {
         padding: 0 2em;
         -webkit-transition: opacity 0.6s;
         transition: opacity 0.6s;
    }
     .menu {
         -webkit-transform: translate3d(-170px, 0, 0);
         transform: translate3d(-170px, 0, 0);
    }
     .menu.menu--open + .main {
         opacity: 0.05;
    }
}