nav bar mobile styling colour edits

vue-theme/src/components/navigation/navigation.vue

@@ -127,7 +127,7 @@ nav.main
     .mobile-menu
         a
             text-decoration: none
-        /* cia logotype adjust for smaller screens */
+        /* cia logotype for smaller screens */
         img 
             margin: $ms--7 $ms--6 0 $ms-0
         h1
@@ -142,7 +142,7 @@ nav.main
             padding: $ms--4 $ms--2
             font-size: $ms-2
             &:hover
-                color: $primary-dark
+                color: $cia_darker
                 cursor: pointer
         /* make this menu style for $small min-width 480px screen */
         input
@@ -154,20 +154,19 @@ nav.main
                     position: absolute
                     width: 100%
         ul
-            /* background-color: $primary-dark */
-            background-color: $cia_grey
+            background-color: $cia_red
             display: none
-            margin: 1px 0 0 0
+            margin: 0.5px 0 0 0
             box-shadow: lightgrey $ms--7 $ms--7 $ms--7
             li  
                 /* color: $primary-light */
                 &:hover
-                    color: $primary-dark
-                    background-color: $primary-light
+                    /* color: $cia_red2 */
+                    background-color: $cia_red1
                     transition: $transition
                 h5
                     /* font-size: $ms-0 */
-                    /* color: $cia_black */
+                    color: $cia_white
                     padding: $ms--1
                     /* padding: 0 */
                     margin: 0