@charset "utf-8";
/* CSS Document */
/* estilos formulario para celulares */
#fondo-form {
	background-color: #356548;
}
form {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	width: 94%;
	margin: 0% 3% 5% 3%;
	padding: 0px 0px 10px 0px;
	/*background-color: #669966;
	border: solid 2px #003300;*/
		}
label {
	float: left;
	width: 100%;
	font-size: 12px;
	letter-spacing: 2px;
	color: #fff;
	margin: 2% 0% 5% 0%;
		}
input, textarea {
	border: 0;
	outline: none;
		}
.field {
	width: 100%;
	border: solid 2px #356548;
	padding: 8px;
	margin: 0% 0% 0% 0%;
	color: #003300;	
		}
.field:focus {
	border: solid 2px #003300;
		}
.mensaje {
	width: 100%;
	margin: 0% 0% 4% 0%;
	}
.numero {
	width: 100%;	
	margin: 0% 0% 0% 0%;
	}
.numero2 {
	width: 100%;	
	}
.numero3 {
	width: 100%;	
	margin: 0% 0% 4% 0%;
	}
.numero4 {
	width: 100%;	
	margin: 0% 0% 4% 0%;
	}
input[type="number"] {
  background-color: #669966; /* Un ejemplo de color */
}
.btn-form {
	display: inline-block;
	width: 45%;
	height: 35px;
	background: #003300;
	font-family: "Copper Penny DTP"; 
	color: #fff;
	align-items: center;
	justify-content:center;
	font-size: 14px;
	letter-spacing: 2px;
	border: none;
	cursor: pointer;
	border-radius: 7px;
	transition: .3s ease all;
	position: relative;
	overflow: hidden;
	text-decoration: none;
}
/*fin de los estilos generales de todos los botones*/
/*estilos particulares de cada uno de los botones*/		
.btn-form.uno::after {
	content:"";
	width: 100%;
	height: 100%;
	background:#000;
	position: absolute;
	border-radius: 7px;
	z-index: 12;
	top: -78px;
	left: 0%;
	transition: .3s ease-in-out all;
	}
.btn-form.uno:hover::after {
	top: 0;
}
.btn-form span {
	position: relative;
	z-index: 13;
	transition: .3s ease all;	
		}
/* empieza Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */
@media only screen and (min-width: 481px) {
	form {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin: 0% 0% 5% 0%;
	padding: 0px 0px 10px 0px;
	/*background-color: #669966;
	border: solid 2px #003300;*/
		}
label {
	float: left;
	width: 33.33%;
	font-size: 10px;
	letter-spacing: 1px;
	color: #fff;
	margin: 0% 0% 4% 0%;
		}
input, textarea {
	border: 0;
	outline: none;
		}
.field {
	width: 98%;
	border: solid 2px #356548;
	padding: 8px;
	margin: 0% 0% 0% 0%;
	color: #003300;	
		}
.field:focus {
	border: solid 2px #003300;
		}
.mensaje {
	width: 67%;
	margin: 0% 0% 4% 0%;
	}
.numero {
	width: 11%;	
	}
.numero1 {
	width: 21%;	
	}
.numero2 {
	width: 22.80%;	
	}
.numero3 {
	width: 16%;	
	margin: 0% 0.3% 4% 0%;
	}
.numero4 {
	width: 33.5%;	
	margin: 0% 0% 4% 0%;
	}
input[type="number"] {
  background-color: #669966; /* Un ejemplo de color */
}
.btn-form {
	display: inline-block;
	width: 20%;
	height: 35px;
	background: #003300;
	font-family: "Copper Penny DTP"; 
	color: #fff;
	align-items: center;
	justify-content:center;
	font-size: 14px;
	letter-spacing: 2px;
	border: none;
	cursor: pointer;
	border-radius: 7px;
	transition: .3s ease all;
	position: relative;
	overflow: hidden;
	text-decoration: none;
}
/*fin de los estilos generales de todos los botones*/
/*estilos particulares de cada uno de los botones*/		
.btn-form.uno::after {
	content:"";
	width: 100%;
	height: 100%;
	background:#000;
	position: absolute;
	border-radius: 7px;
	z-index: 12;
	top: -78px;
	left: 0%;
	transition: .3s ease-in-out all;
	}
.btn-form.uno:hover::after {
	top: 0;
}
.btn-form span {
	position: relative;
	z-index: 13;
	transition: .3s ease all;	
		}
}
/* Diseño escritorio: de 769 px hasta un máximo de 1232 px.  Hereda estilos de: Diseño móvil y Diseño tableta. */
@media only screen and (min-width: 769px) {
form {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin: 0% 0% 7% 0%;
	padding: 10px 0px 10px 0px;
	/*background-color: #669966;
	border: solid 2px #003300;*/
		}
label {
	float: left;
	width: 33.33%;
	font-size: 12px;
	letter-spacing: 2px;
	color: #fff;
	margin: 0% 0% 4% 0%;
		}
.field {
	width: 98%;
	border: solid 2px #356548;
	padding: 8px;
	margin: 0% 0% 0% 0%;
	color: #003300;	
		}
.mensaje {
	width: 66.80%;
	margin: 0% 0% 4% 0.2%;
	}
.numero {
	width: 10%;	
	margin: 0% 1% 0% 0%;
	}
.numero1 {
	width: 20%;	
margin: 0% 0% 0% 2%;
	}
.numero2 {
	width: 22.80%;	
	}
.numero3 {
	width: 16.20%;	
	margin: 0% 0.3% 4% 0%;
	}
.numero4 {
	width: 33%;	
	margin: 0% 0% 4% 0%;
	}
.btn-form {
	display: inline-block;
	width: 20%;
	height: 35px;
	background: #003300;
	font-family: "Copper Penny DTP"; 
	color: #fff;
	align-items: center;
	justify-content:center;
	font-size: 14px;
	letter-spacing: 2px;
	border: none;
	cursor: pointer;
	border-radius: 7px;
	transition: .3s ease all;
	position: relative;
	overflow: hidden;
	text-decoration: none;
}
/*fin de los estilos generales de todos los botones*/
}