fix css + fix contact on mobile

css/especificos.css

@@ -49,13 +49,12 @@ right: 20px;
 
 #message{ resize: vertical; overflow:auto; max-height: 200px;}
 
-
-
 #basic-grey {
-    width: 50%;
-    position: fixed;
+	position:fixed;
+	top: 50%;
     left: 50%;
-    margin: 0 0 0 -25%;
+	transform: translate(-50%, -50%);
+    width: 50%;
     z-index: 11;
     background: #465A68;
     padding: 20px 30px 20px 30px;
@@ -65,7 +64,6 @@ right: 20px;
     color: #BCC9CC ;
     border:1px solid #DADADA;
 	display: none;
-    -webkit-text-stroke: 0.50px;
 }
 
 
@@ -114,102 +112,6 @@ right: 20px;
 
 /******************RESPONSIVE MENU******************/
 
-@media (max-width: 1100px){
-    #navbar { letter-spacing: 0px!important; }
-	#navlist li { width: auto !important;}
-	
-}
-@media (min-width: 791px){
-    #navbar #responsive{ display: none; }
-}
-@media (max-width:790px){
-    #navbar #navlist{ display:none; }
-
-#usIcon{
-    width:60px;
-    height: 60px;
-    background:url(../Images/icons/icons.png) 0 0px;
-}
-
-#productIcon{
-    width:60px;
-    height: 60px;
-    background:url(../Images/icons/icons.png) 0 -60px;
-}
-
-#activityIcon{
-    width:60px;
-    height: 60px;
-    background:url(../Images/icons/icons.png) 0 -120px;
-}
-
-#logoIcon{
-    width:60px;
-    height: 60px;
-    background:url(../Images/icons/icons.png) 0 -180px;
-}
-
-#coursesIcon{
-    width:60px;
-    height: 60px;
-    background:url(../Images/icons/icons.png) 0 -240px;
-}
-
-#buyIcon{
-    width:60px;
-    height: 60px;
-    background:url(../Images/icons/icons.png) 0 -300px;
-}
-
-#contactIcon{
-    width:60px;
-    height: 60px;
-    background:url(../Images/icons/icons.png) 0 -360px;
-}
-
-#footer-outer {
-    background-color: #475A68;
-    font-family: 'Open Sans';
-    font-size: 26px;
-    color: #BCC9CC;
-    width: 100%;
-    height: 300px!important;
-}
-    #navbar{
-        display: table;
-        width: 70% !important;
-        margin: 0px auto !important;
-        padding-bottom: 10px;
-        font-family: 'Champagne and Limousine'!important;
-        font-size: 120%!important;    
-        color: #485260!important;
-        letter-spacing: 5px!important;
-    }
-    #responsive img{
-        width: 55px;
-        height: auto;
-    }
-    #responsive
-    {
-        text-transform: uppercase;
-        text-align:center;
-        width: 70%;
-        padding-bottom: 30px;
-        display: table-row;
-    }
-
-    #responsive li
-    {
-        vertical-align: middle;
-        display: table-cell;
-        text-align: center;
-        width: 0%;
-    }
-	#top_wrapper{
-	height: 71px!important;
-	}
-}
-
 
 /*************NAVBAR************/
 #top_wrapper
@@ -644,10 +546,116 @@ b { font-weight: bold; }
 .titulin { font-size: 23px; font-weight: bold;}
 #curso .titulos {max-width:90%; margin:0px auto; color:white;}
 #exit{ width: 90%; height: 30px; margin: 0 auto; cursor: pointer; float: right !important; text-align:right; }
+
+
+
+@media (max-width: 1100px){
+    #navbar { letter-spacing: 0px!important; }
+	#navlist li { width: auto !important;}
+	#basic-grey { width: 80%; }
+	
+}
+
+
+
 @media screen and (max-width:890px) {
 	#distribuidoras .tabla { display: none; } 
 	#distribuidoras select { display: block; min-width: 50%; text-align: center; margin: 10px auto; padding:5px; font-size:16px; }
 }
+
+@media (min-width: 791px){
+    #navbar #responsive{ display: none; }
+}
+@media (max-width:790px){
+    #navbar #navlist{ display:none; }
+
+	#usIcon{
+	    width:60px;
+	    height: 60px;
+	    background:url(../Images/icons/icons.png) 0 0px;
+	}
+	
+	#productIcon{
+	    width:60px;
+	    height: 60px;
+	    background:url(../Images/icons/icons.png) 0 -60px;
+	}
+	
+	#activityIcon{
+	    width:60px;
+	    height: 60px;
+	    background:url(../Images/icons/icons.png) 0 -120px;
+	}
+	
+	#logoIcon{
+	    width:60px;
+	    height: 60px;
+	    background:url(../Images/icons/icons.png) 0 -180px;
+	}
+	
+	#coursesIcon{
+	    width:60px;
+	    height: 60px;
+	    background:url(../Images/icons/icons.png) 0 -240px;
+	}
+	
+	#buyIcon{
+	    width:60px;
+	    height: 60px;
+	    background:url(../Images/icons/icons.png) 0 -300px;
+	}
+	
+	#contactIcon{
+	    width:60px;
+	    height: 60px;
+	    background:url(../Images/icons/icons.png) 0 -360px;
+	}
+	
+	#footer-outer {
+	    background-color: #475A68;
+	    font-family: 'Open Sans';
+	    font-size: 26px;
+	    color: #BCC9CC;
+	    width: 100%;
+	    height: 300px!important;
+	}
+    #navbar{
+        display: table;
+        width: 70% !important;
+        margin: 0px auto !important;
+        padding-bottom: 10px;
+        font-family: 'Champagne and Limousine'!important;
+        font-size: 120%!important;    
+        color: #485260!important;
+        letter-spacing: 5px!important;
+    }
+    #responsive img{
+        width: 55px;
+        height: auto;
+    }
+    #responsive
+    {
+        text-transform: uppercase;
+        text-align:center;
+        width: 70%;
+        padding-bottom: 30px;
+        display: table-row;
+    }
+
+    #responsive li
+    {
+        vertical-align: middle;
+        display: table-cell;
+        text-align: center;
+        width: 0%;
+    }
+	#top_wrapper{
+		height: 71px!important;
+	}
+
+	#btnconsulta { width: 100%; position:relative; display:block; right:auto; bottom:auto;}
+	#basic-grey input, #basic-grey textarea {width: 100% !important; }
+}
 @media screen and (max-width:670px){
 	.seccion{ padding-top: 30px; }
 	#responsive img { width:48px; }
@@ -664,10 +672,12 @@ b { font-weight: bold; }
 	#footer-inner-right{ float:none; width:98%; padding: 1%; display:block; text-align:left;}
 
 
-	#basic-grey{width:90%;left:0px;margin:0px;padding:0px 5%; height:100%;}
+	#basic-grey{width:90%;margin:0px;padding:0px 5%; height:80%;}
 	#basic-grey input[type="text"], #basic-grey input[type="email"], #basic-grey textarea, #basic-grey select {
-		width:95%;
+		width:100%;
 	}
 	#basic-grey span{text-align:left !important; }
 
 }
+
+@media screen and (max-width:400px) { #basic-grey { height:100%; } }

index.php

@@ -21,7 +21,6 @@ header('Content-language: es');
 
     <div id="basic-grey">
     <h5 id="exit">X</h5>
-    <div class="STYLE-NAME">
     <h5>Contacto</h5><br>
     Un equipo de profesionales está a su servicio para responder sus consultas.<br><br>
     Leopoldo Marechal 914, CABA (C1405BMD), Buenos Aires, Argentina.<br><br>
@@ -38,7 +37,6 @@ header('Content-language: es');
 
     <input id="btnconsulta" type="button" class="button" value="Enviar" /> 
     <div id="respuestacontacto"></div>
-	</div>
 </div>
 
 
@@ -61,7 +59,7 @@ header('Content-language: es');
             <li><a href="#top_wrapper"><div id="logoIcon"></div></a></li>
 			<li><a href="#cursos"><div id="coursesIcon"></div></a></li>
             <li><a href="#distribuidoras"><div id="buyIcon"></div></a></li>
-            <li><a href="#contacto"><div id="contactIcon"></div></a></li>
+            <li><a href="#footer-outer"><div id="contactIcon"></div></a></li>
         </ul>
     </div>
 </div>