diff --git a/dev.less b/dev.less
index 9f43901..0349962 100644
--- a/dev.less
+++ b/dev.less
@@ -37,38 +37,47 @@ body::before {
 }
 */
 
-/*
-.navigation ul{
-    background-color: rgba(255,255,255,0) !important;
-}
-.navigation ul.level0{
-    background-color: rgba(255,255,255,0.75) !important;
-}
-*/
-
-
-.navigation ul ul ul{
-    box-shadow: none !important;
-    border: none !important;
-}
-.navigation li.level1>a{
-    font-weight: bold;
-}
 
 /* desktop */
 @media (min-width: 768px) { /* desktop */
+    /* transparent background */
+    .navigation ul{
+        background-color: rgba(255,255,255,0) !important;
+    }
+    .navigation ul.level0{
+        background-color: rgba(255,255,255,0.75) !important;
+    }
+
+    /* remove borders and shadow */
+    .navigation ul ul ul{
+        box-shadow: none !important;
+        border: none !important;
+    }
+
+    /* bold 1st level (headers) */
+    .navigation li.level1>a{
+        font-weight: bold;
+    }
+
+    /* make all parents static so absolute positions work */
     .navigation,
     .navigation>ul,
     .navigation>ul>.level0{
         position: static !important;
     }
+    /* put the sub menus into the layout columns */ 
+    .submenu.level1{
+        position: static !important;
+        display: block !important;
+    }
+
+    /* make the level 0 a flex layout so sub menus become columns */
+    /* and center it */
     .submenu.level0[aria-expanded="true"]{
         display: flex !important;
         left: 50% !important;
         transform: translateX(-50%);
     }
-    .submenu.level1{
-        position: static !important;
-        display: block !important;
-    }
+
+
 }