align elements, colors

src/css/layout/_nav.scss

@@ -9,7 +9,7 @@
     height: 80px;
     position: fixed;
     width: 100%;
-    background: #f2f2f2;
+    background: _palette(bg);
 
     &.scrolled {
       background: _palette(white);
@@ -21,12 +21,13 @@
         @include vendor('transition', (
           'opacity #{_duration(transition2)} ease',
         ));
-        //display: none;
+        text-align: center;
         opacity: 0;
         position: fixed;
         color: _palette(white);
-        top: 50%;
-        left: 50%;
+        bottom: 100%;
+        right: 100%;
+        margin: 0 -50% -50% 0;
       }
 
       > span {
@@ -70,7 +71,7 @@
         cursor: pointer;
         height: 80px;
         padding: 10px 23.1px;
-        left: calc(50% - 40px);
+        left: calc(50% - 60px);
 
         &:hover {
           @include vendor('filter', 'grayscale(0)');
@@ -95,7 +96,6 @@
           &.bar {
             @include vendor('transition', (
               'transform #{_duration(transition2)} ease',
-              'transform-origin #{_duration(transition2)} ease',
               'width #{_duration(transition)} ease',
               'filter #{_duration(transition)} ease',
             ));
@@ -156,7 +156,7 @@
         > a > #logo > img {
           height: 60px;
           padding: 7.5px 17.3px;
-          left: calc(50% - 30px);
+          left: calc(50% - 45px);
         }
 
         > #menuToggle {

src/css/libs/_vars.scss

@@ -33,6 +33,8 @@
 		accent2: 			#d83c17,
 		menu:					#0e0e0e,
 		white:				#ffffff,
+		bg:						#f2f2f2,
+		
 	/*
 		bg:					#935d8c,
 		fg:					rgba(255,255,255,0.65),