.contact_form {
	margin:30px auto;
    min-width: 100%;
} 
.contact_form h2 {
    color: #000000;
    display: block;
    font-family: 'abril_fatfaceregular',sans-serif;
    font-size: 3em;
    padding: 0px;
    min-width: 100%;
	text-align:center;
	border:none;
}
/*--- estilos para los ul y li del formulario ---*/
.contact_form ul {
    min-width:525px;
    list-style-type:none;
	margin:0 auto;
	border:none;

}
.contact_form li{
	max-width:475px;
	border-bottom:1px solid #eee;
	position:relative;
margin:0 auto;
} 
.contact_form label {
    color: #000000;
    display: inline-block;
    float: left;
    font-family: 'Raleway', sans-serif;
    font-size: 1em;
    font-weight: bold;
    margin-top: 3px;
    padding: 3px 0 3px 10px;
    width: 84px;
}
.contact_form input {
	height:20px; 
	width:330px; 
	padding:5px 0px;
	border:none;
}
.contact_form textarea {
	padding:8px 0px; 
	width:330px;
	border:none;
}
.contact_form button {
	display:block;
	margin:5px auto;
}

@media screen and (max-width:500px) {
.contact_form ul {
    min-width:330px;
	}
.contact_form li{
	width:300px;
	} 
.contact_form label {
    width: 84px;
	}
.contact_form input {
	width:270px; 
	}
.contact_form textarea {
	width:270px;
	}
.contact_form {
	margin:0 auto;
	width: 330px;
	} 
.contact_form h2 {
   width: 330px;
	margin:30px 0 35px -15px ;
	align-text:center;
	}
}


/*----- estilos visuales de los elementos --------*/

.contact_form input, .contact_form textarea { 

	color: #555;
	font-size: 1em;
	padding-right:3%;
	-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:0px solid #555; 
	box-shadow: 0 0 3px #ccc; 
	padding-right:10%;
}

/* === Estilos de Validacion === */	

.contact_form input:required:valid, .contact_form textarea:required:valid {
	box-shadow: 0 0 5px #cccccc;
	border-color: #555555;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
	box-shadow: 0 0 2px #555555;
	border-color: #555555;
}

/* === Estilos del boton de Envio === */
button.submit {
    padding: 9px 27px;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: 600;
   font-size: 1em;
text-transform:uppercase;
   line-height: 1;
   color: #000;
   border: none;
   text-shadow: 0 1px 1px rgba(250, 250, 250, .5);

   background-color: #fdd42b;

   border-radius: 0px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);

}
button.submit:hover {
   text-shadow: 0 1px 1px rgba(250, 250, 250, .85);
	opacity:.90;
	cursor: pointer; 
	color: #fff;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
button.submit:active {
	border: 1px solid #222;
	box-shadow: 0 0 10px 5px #fdbb2b inset; 
}
