Responsive nav (no animation...)

css/main.css

@@ -74,7 +74,7 @@ header {
     content: "";
     display: block;
     position: absolute;
-    bottom: 40vh;
+    bottom: calc(100% - 60vh);
     left: 0;
     right: 0;
     top: 0;
@@ -109,6 +109,23 @@ header {
     background-color: rgba(254, 254, 254, 0.25);
 }
 /* ---- Navbar ----- */
+.h-nav {
+    min-width: 280px;
+    padding-left: 10px;
+    height: 100vh;
+    margin: 0;
+    left: 0;
+    position: absolute;
+    z-index: 11;
+}
+.h-nav a {
+    display: block;
+    color: #333;
+    text-decoration: none;
+    margin-left: 30px;
+    padding: 10px 0;
+    transition: ease-in 1s;
+}
 .nav-menu {
     text-align: right;
 }
@@ -134,6 +151,20 @@ header {
     vertical-align: middle;
     line-height: 2.3rem;
 }
+#nav i {
+    padding-top: 1.5rem;
+    vertical-align: middle;
+    cursor: pointer;
+    z-index: 10;
+}
+#close-nav {
+    padding: 0px;
+    margin: 0px 0 20px 0;
+    font-size: 1.2rem;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-weight: 400;
+    cursor: pointer;
+}
 #nav.border {
     border-bottom: 1px solid rgba(204,204,204,1);
 }
@@ -147,10 +178,15 @@ header {
 .nav-dark a:hover {
     color: #000;
 }
-/* #links a:hover {
-    color: #fff;
-    text-decoration: none;
-} */
+body.opaque::after {
+    z-index: 8;
+    content: '';
+    height: 100%;
+    width: 100%;
+    background-color: rgb(26, 21, 21);
+    opacity: 0.7;
+    position: fixed;
+}
 /** Footer **/
 footer {
     min-height: 5rem;
@@ -203,6 +239,14 @@ section .container ul {
 section .container img {
     width: 100%;
 }
+section.prj-logos img {
+    max-height: 110px;
+    max-width: 410px;
+}
 #vagg {
     padding-bottom: 2rem;
+}
+#potlach {
+    max-width: 110px;
+    margin: 0 25%;
 }