.contact_form h2 {background: none repeat scroll 0 0 #F3F3F3;border-radius: 5px;color: #62bfe9;display: block;font-family: sans-serif;font-size: 20px;padding: 0px;width: 300px;}
/*--- estilos para los ul y li del formulario ---*/
.contact_form ul {width:550px;list-style-type:none;margin:10px;padding:0px;}
.contact_form li{padding:2px; border-bottom:1px solid #eee;position:relative;} 
.contact_form label {color: #555555;display: inline-block;float: left;font-family: sans-serif;font-size: 14px;font-weight: bold;padding: 2px;width: 300px;}
.contact_form input {height:20px; width:300px; padding:5px 8px;}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:250px;}
/*----- estilos visuales de los elementos --------*/
.contact_form input, .contact_form textarea { border:1px solid #aaa;box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;border-radius:2px;color: #888;font-size: 15px;padding-right:30px;-moz-transition: padding .25s; -webkit-transition: padding .25s; -o-transition: padding .25s;transition: padding .25s;}
.contact_form input:focus, .contact_form textarea:focus {background: #fff; border:1px solid #555; box-shadow: 0 0 3px #aaa; padding-right:55px;}
/* === Estilos de Validacion === */
.contact_form input:required:valid, .contact_form textarea:required:valid {box-shadow: 0 0 5px #5cd053;border-color: #28921f;}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {box-shadow: 0 0 5px #d45252;border-color: #b03535}
/* === Estilos del boton de Envio === */
button.submit {padding: 5px 17px 4px;font-family: Helvetica, Arial, sans-serif;font-weight: bold;line-height: 1;color: #3598c5;border: none;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);background-color: #fff;border: 1px solid #f1f1f1;border-radius: 10px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);}
button.submit:hover {opacity:.55;cursor: pointer; color: #000;}
button.submit:active {border: 1px solid #222;box-shadow: 0 0 10px 5px #444 inset; }
@media screen and (max-width:650px) {
.contact_form ul {width:550px;list-style-type:none;margin:5px;padding:5px;}
.contact_form li{padding:2px; border-bottom:1px solid #eee;position:relative;} 
.contact_form label {color: #555555;display: inline-block;float: left;font-family: sans-serif;font-size: 14px;font-weight: bold;padding: 2px;width: 400px;}
.contact_form input {height:20px; width:400px; padding:5px 8px;}
.contact_form textarea {padding:8px; width:400px;}
.contact_form button {margin-left:310px;}
}
@media screen and (max-width:480px) {
.contact_form h2 {width: 150px;}
.contact_form ul {width:420px;list-style-type:none;margin:5px;padding:0px;}
.contact_form li{padding:2px; border-bottom:1px solid #eee;position:relative;} 
.contact_form label {color: #555555;display: inline-block;float: left;font-family: sans-serif;font-size: 14px;font-weight: bold;padding: 2px;width: 300px;}
.contact_form input {height:20px; width:300px; padding:5px 8px;}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:220px;}
}
@media screen and (max-width:350px) {
.contact_form h2 {width: 200px;}
.contact_form ul {width:339px;list-style-type:none;margin:7px;padding:0px;}
.contact_form li{padding:2px; border-bottom:1px solid #eee;position:relative;} 
.contact_form label {color: #555555;display: inline-block;float: left;font-family: sans-serif;font-size: 14px;font-weight: bold;padding: 2px;width: 250px;}
.contact_form input {height:20px; width:250px; padding:5px 8px;}
.contact_form textarea {padding:8px; width:250px;}
.contact_form button {margin-left:150px;}
}