@charset "UTF-8";
/* CSS Document */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  scroll-behavior: smooth;
  font-family: quicksand;
}
/**** Colors : variables ****/
:root {
--azul: #011640; /*color principal*/
--azulgris: #024059; /*color principal*/
--verde: #00A48A; /*color principal*/
--amarillo: #EDBD45; /*color principal*/
--violeta: #4F66AE; /*color secundario*/
--violetaclaro: #6b7ebd; /*color secundario*/
--verdeclaro: #00b899; /*color secundario*/
--rojo: #EA4747; /*color secundario*/
--grisoscuro: #63797F; /*gris1*/
--grismedio: #A0A8AA; /*gris2*/
--grisclaro: #D9DBDB; /*gris3*/
--grismuyclaro: #f4f9f9; /*gris3*/
}
@font-face {
  font-family: quickbold;
  src: url("../typography/Quicksand-Bold.ttf");
}
@font-face {
  font-family: quicksemibold;
  src: url("../typography/Quicksand-SemiBold.ttf");
}
@font-face {
  font-family: quickregular;
  src: url("../typography/Quicksand-Regular.ttf");
}
/*link a carpeta con Index*/
@font-face {
  font-family: quickbold;
  src: url("../familyfont/Quicksand-Bold.ttf");
}
@font-face {
  font-family: quicksemibold;
  src: url("../familyfont/Quicksand-SemiBold.ttf");
}
@font-face {
  font-family: quickregular;
  src: url("../familyfont/Quicksand-Regular.ttf");
}
#ejemplo {
position:relative;
}
#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
  min-width: 100%;
  min-height: 100%;
  background-color: var(--azul);
  padding-bottom: 100px;
}
#bg2 {
  position: fixed;
  background-color: var(--azul);
  top: 0; 
  left: 0; 
  min-width: 100%;
  min-height: 100%;
}
#containervolverinicio {
	text-align: right;
	margin-top:10px;
}
#volverinicio {
position: relative;
	color:var(--verde);
	font-family: quicksemibold;
	letter-spacing: 0.5px;
	font-size: 1em;
	padding-right: 40px;
}
#volverinicio:hover {
	color:var(--amarillo);
	font-family: quickbold;
}
#logotipo {
	position: relative;
	margin:auto;
	display: block;
	width: 200px;
	margin-top:5px;
}
#form {
	position: relative;
	background-color: white;
	margin-top:25px;
	width: 400px;
	padding-top:30px;
	padding-bottom:30px;
	border-radius: 20px;
}
#containerform {
	margin:auto;
	display: block;
	width: 300px;
}
#tituloform {
	font-family: quickbold;
	font-size: 1.3em;
	color:var(--verde);
	margin-bottom: 10px;
	text-align: center;
	}
label {
	color:var(--grisoscuro);
	font-family: quickbold;
	font-size: 1em;
}
#nombre {
	width: 300px;
}
#empresa {
	width: 300px;
}
#email {
	width: 300px;
}
.hidden {
	font-size: 0.2em;
	display:none;
}

.btn{
	margin:auto;
	display: block;
	border-radius: 50px;
	background-color: var(--verde);
	border-color: var(--verde);
	font-family: quickbold;
	letter-spacing: 1px;
	font-size: 1.1em;
	margin-top:30px;
}
.btn:hover{
	background-color: var(--violeta);
	border-color: var(--violeta);
	letter-spacing: 1px;
}
@media screen and (max-width:  ≥ 1200) {}
@media screen and (max-width: 992px) {}
@media screen and (max-width: 768px) {
#volverinicio{
	text-align: center;
	padding-right: 10px;
}
#logotipo{
	margin-top:60px;
}
#form {
	position: relative;
	background-color: white;
	margin-top:35px;
	width: 450px;
	padding-top:25px;
	padding-bottom:25px;
	border-radius: 20px;
}
#nombre {
	width: 270px;
}
#empresa {
	width: 270px;
}
#email {
	width: 270px;
}
#telefono {
	width: 270px;
}
#tituloform {
	text-align: left;
}

}
@media screen and (max-width: 576px) {
#volverinicio{
	text-align: center;
	padding-right: 10px;
	font-size: 0.7em;
}
#logotipo{
	margin-top:30px;
	width: 120px;
}
#form {
	position: relative;
	background-color: white;
	margin-top:20px;
	width: 350px;
	padding-top:25px;
	padding-bottom:15px;
	border-radius: 10px;
}
#nombre {
	width: 280px;
}
#empresa {
	width: 280px;
}
#email {
	width: 280px;
}
#telefono {
	width: 280px;
}
.btn{
	margin-left: 75px;;
	border-radius: 50px;
	background-color: var(--verde);
	border-color: var(--verde);
	font-family: quickbold;
	letter-spacing: 1px;
	font-size: 1.1em;
	margin-top:10px;
}
.btn:hover{
	background-color: var(--violeta);
	border-color: var(--violeta);
	letter-spacing: 1px;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
#volverinicio {
	text-align: right;
	padding-right:50px;
	margin-top:30px;
	font-size: 1em;
}

#tituloform {
	text-align: center;
}
#logotipo {
	width: 300px;
	margin-top:20px;
}
#form {
	margin-top:50px;
	width: 500px;
}
#bg {
	min-width: 100%;
	min-height: 80%;
	padding-top:100px;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
#volverinicio {
	text-align: right;
	padding-right:50px;
	margin-top:30px;
	font-size: 1em;
}

#tituloform {
	text-align: center;
}
#logotipo {
	width: 300px;
	margin-top:80px;
}
#form {
	margin-top:120px;
	width: 500px;
}
}
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (hover: none) {}