Modificación Responsive menu (ahora iconos)

Contact Form

Especificos.css

@@ -1,4 +1,4 @@
-@font-face {
+@font-face{
     font-family: 'Analogue Reduced 45 Light';
     src: url('http://www.fontsaddict.com/fontface/essencesans-regular.ttf');
 }
@@ -9,88 +9,154 @@
 }
 
 @font-face {
-	font-family: 'Raleway';
+    font-family: 'Raleway';
 	src: url('/Fonts/Raleway-Regular.ttf');
 }
 html, body
 {
     margin: 0px auto;
-    font-family: 'Raleway';    
+    font-family: 'Raleway'sans-serif;    
 /*font-family: 'Franklin Gothic Book','Helvetica Neue',Helvetica,Arial,sans-serif;
     */-webkit-font-smoothing: antialiased;
     -webkit-text-stroke: 0.50px;
+    position: relative;
 
+}       
+#overlay-contact {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 10;
+    margin-top: -30px; 
 }
 
-@media(min-width: 671px){
-    #navbar #responsive{
-        display: none;
-    }
+#exit{
+    width: 30px;
+    height: 30px;
+    margin: 0 auto;
+    cursor: pointer;
+    float: right;
+}
+#mensaje{ resize:both; overflow:auto;}
+
+
+/* Basic Grey */
+.basic-grey {
+    width: 50%;
+    position: fixed;
+    left: 50%;
+    margin: 0 0 0 -25%;
+    /*position: fixed;
+    width: 650px;
+    margin-right: auto;
+    margin-left: auto;*/
+    z-index: 11;
+    background: #465A68;
+    padding: 20px 30px 20px 30px;
+    font-family: 'Champagne and Limousine';
+    font-size: 12px;
+    letter-spacing: 2px;
+    color: #BCC9CC ;
+    border:1px solid #DADADA;
+    -webkit-text-stroke: 0.50px;
+}
+
+
+.basic-grey label {
+    display: block;
+    margin: 0px 0px 5px;
+}
+.basic-grey label>span {
+    float: left;
+    width: 80px;
+    text-align: right;
+    padding-right: 10px;
+    margin-top: 10px;
+    color: #BCC9CC ;
+    -webkit-text-stroke: 0.50px;
+}
+.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea,.basic-grey select{
+    border: 1px solid #DADADA;
+    color: #888;
+    height: 24px;
+    margin-bottom: 16px;
+    margin-right: 6px;
+    margin-top: 2px;
+    outline: 0 none;
+    padding: 3px 3px 3px 5px;
+    width: 70%;
+    font-family: 'Champagne and Limousine';
+    font-size: 12px;
+}
+
+.basic-grey textarea{
+    height:100px;
+    letter-spacing: 2px;
+}
+.basic-grey .button {
+    background: #BCC9CC;
+    border: none;
+    padding: 10px 25px 10px 25px;
+    color: #465A68;
+}
+.basic-grey .button:hover {
+    opacity: 0.5;
+    transition: opacity 0.2s ease-in-out;
 }
-@media(max-width:670px){
-    #navbar #navlist{
-        display:none;
-    }
+
+@media(min-width: 801px){
+    #navbar #responsive{ display: none; }
+}
+@media(max-width:800px){
+    #navbar #navlist{ display:none; }
 
 
     #navbar{
         display: table;
-        width: 30% !important;
-        margin: 0px 0px !important;
+        width: 70% !important;
+        margin: 0px auto !important;
         padding-bottom: 10px;
         font-family: 'Champagne and Limousine'!important;
-        font-size: 100%!important;    
+        font-size: 120%!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;
+    #responsive img{
+        width: 100%;
+        height: auto;
     }
-
-    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;
+    #responsive
+    {
+        text-transform: uppercase;
+        text-align:center;
+        width: 70%;
+        padding-bottom: 30px;
+        display: table-row;
     }
 
-    ul#responsive li ul.menu{
-        position:absolute;
+    #responsive li
+    {
+        vertical-align: middle;
+        display: table-cell;
+        text-align: center;
+        width: 0%;
     }
 }
 
-
 /*************NAVBAR************/
 #top_wrapper
 {
     background-color: rgba(255,255,255,255);
     width: 100%;
-    height: 55px;
     position: fixed;
     top: 0px;
     box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
     border-bottom: 2px solid ;
-    padding-top: 15px;
+    padding-top: 10px;
+    height: 65px;
 }
 #navbar
 {
@@ -98,12 +164,13 @@ html, body
     display: table;
     width: 90%;
     margin: 0px auto;
+    background-color:#FFF;
     padding-bottom: 10px;
     font-family: 'Champagne and Limousine';
     font-size: 100%;    
 	color: #485260;
     letter-spacing: 5px;
-    -webkit-font-smoothing: antialiased;
+
 }
 
 #navlist
@@ -124,7 +191,6 @@ html, body
 }
 
 
-
 /*************PAGINAS¨*******************/
 #paginas_wrapper
 {
@@ -132,10 +198,7 @@ html, body
     float: left;
 }
 
-.pagina
-{
-    height: 470px;
-}
+.pagina{ height: 470px; }
 
 #paginas_list
 {
@@ -213,7 +276,7 @@ html, body
     height: 90%;
     max-height: 100%;
     text-align: center;
-    margin:70px auto;    
+    margin:30px auto;    
     font-family: 'Champagne and Limousine';
     font-size: 300%;
     color: White;
@@ -233,7 +296,7 @@ html, body
 	height: auto;
 	text-align: center;
 	margin: 70px auto;
-	
+	border-bottom: 2px solid #475A68;
 }
 
 
@@ -294,29 +357,15 @@ tbody, td
 #ok:hover, #ok:active, #ok
 {
     background-color:#BCC9CC;
-	-webkit-border-top-left-radius:0px;
-	-moz-border-radius-topleft:0px;
-	border-top-left-radius:0px;
-	-webkit-border-top-right-radius:0px;
-	-moz-border-radius-topright:0px;
-	border-top-right-radius:0px;
-	-webkit-border-bottom-right-radius:0px;
-	-moz-border-radius-bottomright:0px;
-	border-bottom-right-radius:0px;
-	-webkit-border-bottom-left-radius:0px;
-	-moz-border-radius-bottomleft:0px;
-	border-bottom-left-radius:0px;
-	text-indent:0px;
-	display:inline-block;
-	color:#475A68;
-	font-size:18px;
-	font-weight:normal;
-	font-style:normal;
-	height:30px;
-	line-height:30px;
-	width:56px;
-	text-decoration:none;
-	text-align:center;
+    text-indent:0px;
+    display:inline-block;
+    color:#475A68;
+    font-size:18px;
+    font-weight:normal;
+    font-style:normal;
+    width:56px;
+    text-align:center;
+    height: 31px;
 }
 #footer-outer
 {
@@ -360,13 +409,16 @@ tbody, td
     margin-top: 20px;
 }
 
+#input-footer{
+
+}
 /*************HEADERS STYLE************/
 
 hr
 {
     color: #465A68;
     background-color: #465A68;
-    height: 2px;
+    height: 1px;
 }    
 
 h2
@@ -404,8 +456,7 @@ h1
    text-align: center; 
    border-bottom: 2px solid #465A68; 
    line-height: 0.1em;
-   /*font-family:'Franklin Gothic Book','Helvetica Neue',Helvetica,Arial,sans-serif;
- */  font-family:  'Champagne and Limousine';
+   font-family:  'Champagne and Limousine';
    margin: 30px auto;  
    color: #465A68;
    font-size: 190%;
@@ -438,11 +489,12 @@ h4
 
 h5
 {
-    font-size: 50px;
-    color:White;
-    text-align: center;
+    font-size: 30px;
+    color:#BCC9CC;
+    text-align: left;
     font-family: 'Champagne and Limousine';
-  
+    font-weight: normal;
+    margin: 0 0;
 }
 p
 {
@@ -545,15 +597,7 @@ li:hover
     font-family: "Varela Round", sans-serif;
     margin: auto auto;
     margin-top: 170px;
-    /*display: none;
-    line-height: 380px;
-    opacity: 0;
-    transition: opacity .2s;
-    background-color: rgba(255, 255, 255, .3);
-    text-shadow: 0px 0px 15px rgb(119, 119, 119);
-    width: 60px;
-    height: 50px;
-    */
+
 }
 
 .slide:hover + .nav label { opacity: 0.5; }