@font-face{
	font-family:principal;
	src:url(fonts/lato/Lato-Regular.ttf);
	/*tipo de fuente principal*/ 
	/*Google fonts es una opcion o https://www.1001freefonts.com/*/
}
    /*estilo para el fondo de la pagina*/ 
html{
	background-image:url(../img/fondoform.jpg);
	background-position:center;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	background-attachment:fixed;
}
  /*estilo el formulario*/ 
#contenedor-form{
	width:350px;
	background-color:rgba(0,0,0,0.51);
	padding: 30px 40px 30px 45px;
	margin:auto;
	margin-top:60px;
	border-radius:9px;
	
}
 /*estilo para eel control de todos los inputs / entradas */ 
 .input{
	 color:#3c3c3c;
	 font-family:principal;
	 font-size:18px;
	 line-height:22px;
	 background-color:#fbfbfb;
	 padding: 13px 13px 13px 54px;
	 margin-bottom:10px;
	 width:100%;
	 box-sizing:border-box;
	 
 }
  /*estilo para cuando esta posiccioinado el cursor */ 
 .input:focus{
	 background-color:#fff;
	 border: 3px solid #3498db;
	 color:color:#1b8f31;
	 padding: 13px 13px 13px 54px;
	 
 }
 
 /*imagenes*/
  /*estilo para el recuadro nombre */ 
 #nombre{
	 background-image:url(../img/persona.png);
	 background-size: 30px 30px;
	 background-position: 11px 11px;
	 background-repeat: no-repeat;
	 
 }
  /*estilo para el recuadro email */ 
  #email{
	 background-image:url(../img/email.png);
	 background-size: 30px 30px;
	 background-position: 11px 11px;
	 background-repeat: no-repeat;
	 
 }
  /*estilo para el recuadro telefono */ 
  #telefono{
	 background-image:url(../img/telefono.png);
	 background-size: 30px 30px;
	 background-position: 11px 11px;
	 background-repeat: no-repeat;
	 
 }
 /*estilo para el recuadro mensaje */ 
  #mensaje{
	 background-image:url(../img/mensaje.png);
	 background-size: 30px 30px;
	 background-position: 11px 11px;
	 background-repeat: no-repeat;
	 
 }
 /*estilo para el recuadro AREA DE TEXTO (MENSAJE) */ 
 textarea{
	 width:100%;
	 height:150px;
	 line-height:150%;
	 resize:vertical;
	 
 }
 /*estilo para el BOTON ENVIAR*/ 
 #enviar{
	font-family:principal;
	float:left;
	width:100%;
	border: #fff solid 4px;
	cursor:pointer;
	background-color:#00a0f4;
	color:white;
	font-size:28px;
	font-weight:670;
	padding-top:22px;
	padding-bottom:22px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	 
 }
 /*estilo para el BOTON ENVUAR EFECTO */ 
 #enviar:hover{
	 background-color:rgba(0,0,0,0);
	 color: #000;
	 
 }
 /*estilo para el BOTON ENVIAR TRANSICION*/ 
 .transicion{
	 width:0px;
	 height:74px;
	 background-color#33de80;
	 -webkit-transition: .7s ease;
	  -moz-transition: .7s ease;
	  -o-transition: .7s ease;
	  -ms-transition: .7s ease;
	  transition: .7s ease;
 }
/*estilo para el BOTON ENVIAR CUANDO ESTA SOBRE EL EL  PUNTERO */ 
.enviar:hover .transicion{
	width:100%;
	background-color:#33de80;
	
}
/*estilo para CUANDO MUESTRE ERROR*/ 
input.error, textarea.error{
	 font-family:principal;
	 font-size:18px;
	 line-height:22px;
	 background-color:#F78181;
	 padding: 13px 13px 13px 54px;
	 margin-bottom:10px;
	 width:100%;
	 box-sizing:border-box;
	 border:0px;
}
/*estilo DE COLOR PARA LOS ERRORES EN NOMBRE, EMAIL Y TELEFONO  */ 
input.error::-webkit-input-placeholder{
	color:white;
}
}
/*estilo DE COLOR PARA LOS ERRORES EN EL AREA DE TEXTO (MENSAJE) */ 
textarea.error::-webkit-input-placeholder{
	color:white;
	
}
}
/*estilo ADICIONAL PARA LOGRAR LA CARACTERISTICA RESPONSIVE EN EL FORMULARIO */ 
@media only screen and (max-width: 580px) {
  #contenedor-form{
    left: 3%;
    margin-right: 3%;
    width: 88%;
    margin-left: 0;
    padding-left: 3%;
    padding-right: 3%;
  }
}