Responsive menu

Especificos.css

@@ -22,13 +22,68 @@ html, body
 
 }
 
+@media(min-width: 671px){
+    #navbar #responsive{
+        display: none;
+    }
+}
+@media(max-width:670px){
+    #navbar #navlist{
+        display:none;
+    }
+
+
+    #navbar{
+        display: table;
+        width: 30% !important;
+        margin: 0px 0px !important;
+        padding-bottom: 10px;
+        font-family: 'Champagne and Limousine'!important;
+        font-size: 100%!important;    
+        color: #485260!important;
+        letter-spacing: 5px!important;
+    }
+    #responsive-menu{
+        font-family: 'Raleway';
+        font-size: 35px;
+    }
+    
+    ul#responsive, ul.menu{
+        margin: 0;
+        width: 170px;
+        padding-left: 20px;
+    }
+
+    ul#responsive li:link{
+        color:#485260;
+    }
+    ul#responsive li, ul#responsive.menu li {
+        list-style-type: none;
+        display: inline-block;
+        color:#485260;
+        width: 150px;
+    }
 
 
+    ul#responsive li a, ul#responsive.menu li a{
+        text-decoration: none;
+        display: inline-block;
+    }
+
+    ul#responsive li{
+        position: relative;
+    }
+
+    ul#responsive li ul.menu{
+        position:absolute;
+    }
+}
+
 
 /*************NAVBAR************/
 #top_wrapper
 {
-    background-color: #fff;
+    background-color: rgba(255,255,255,255);
     width: 100%;
     height: 55px;
     position: fixed;
@@ -43,7 +98,6 @@ html, body
     display: table;
     width: 90%;
     margin: 0px auto;
-    background-color:#FFF;
     padding-bottom: 10px;
     font-family: 'Champagne and Limousine';
     font-size: 100%;    
@@ -547,4 +601,4 @@ input#img-4:checked ~ .nav-dots label#img-dot-4,
 input#img-5:checked ~ .nav-dots label#img-dot-5,
 input#img-6:checked ~ .nav-dots label#img-dot-6 {
     background: rgba(0, 0, 0, 0.8);
-}
+}