simpler menu animations

index.html

@@ -302,7 +302,7 @@ nav > .detail
 {
     display:block;
     position:absolute;
-    width:33px;
+    width:40px;
     right:0;
     transition: width 0.4s 0.4s;
 }
@@ -311,11 +311,6 @@ nav > .detail
 {
     height:100%;
 }
-[nav-open] nav > .detail
-{
-    width:100%;
-
-}
 nav > .detail.cap
 {
     height:33px;
@@ -370,62 +365,59 @@ nav .button
 }
 nav .button::before, nav .button::after
 {
-    
     display:block;
     position:absolute;
     top:20px;
     left:0;
     width:100%;
-    text-align: center;
+    box-sizing: border-box;
+    padding-right:48px;
+    text-align: right;
     text-transform:uppercase;
     font-weight:900;
-    transition:left 0.4s;
+    transition:left 0.4s, top 0.4s;
 }
 nav .button::before
 {
-    box-sizing: border-box;
     content:"Menu";
-    transition-delay:0.4s;
-    text-align:right;
-    padding-right:45px;
 }
 nav .button::after
 {
     content:"Close";
-    left:100%;
-    transition-delay: 0.4s;
-    text-align:left;
-    padding-left:45px;
+    top:180%;
 }
 [nav-open] nav .button::before
 {
-    left:100%;
+    left:180%;
 }
 [nav-open] nav .button::after
 {
-    left:0%;
+    top:28px;
 }
 nav > ul
 {
     position: absolute;
-    padding: 31px;
-    margin: 0;
     top: 50vh;
-    left:100%;
+    left:0;
     width:100%;
+
+    box-sizing: border-box;
+    padding: 0 48px 0 0;
+    margin: 0;
+
     transform: translateY(-50%);
     transition:left 0.4s 0.5s;
     list-style-type: none;
+    text-align: right;
 }
 nav > ul a
 {
+    display:block;
+    padding:10px 0 10px 0;
     text-decoration: none !important;
+    text-transform: uppercase;
     color:black !important;
 }
-[nav-open] nav > ul
-{
-    left:0%;
-}
 
 .Dim
 {
@@ -437,7 +429,7 @@ nav > ul a
     height: 65px;
     width: 100%;
     background: #fff;
-    opacity: 0.8;
+    opacity: 0.9;
     transition: height 0.4s;
 }
 [nav-open] .Dim