@charset "utf-8";
/* CSS Document */
/* COLORES 
-AZUL: #1D3365
-FUCSIA: #EF1166
-VIOLETA: #742EFF
-VERDE AGUA: #27F6CA
-BLANCO: #FFFFFF  */

*{margin: 0; padding: 0%;}
body{ font-family: 'Roboto', sans-serif; font-weight: 500; background: #8B00FF; font-size:18px;}

/* Centrado de pagina */
.pagina{ max-width: 48rem; margin: 0 auto;  background: #020646;}

nav {background-color:#27F6CA;}

nav ul li{
    color: white;
    text-decoration: none;
	list-style-type:none;
	height: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
	font-size:18px;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);
	}
	
nav ul li a{
    color: white;
    text-decoration: none;}
	
nav ul li a:hover {color:#27F6CA;}

.topmenu{color: #27F6CA;
    font-size:18px;
	height: 10%;
	display: flex;
	padding-right:10px;
    justify-content: space-between;
    align-items: center;}

/* opcionverde2 es para cuando son 3 opciones verdes */
.opcionverde{
	background-color:#27F6CA;
	color: white;
	font-size:18px;
    text-decoration: none;
	height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
.opcionverde ul li{list-style-type:none;}
.opcionverde ul li a{color: white;text-decoration: none; }
.opcionverde ul li a:hover {color: #1D3365;}

/* opcionverde2 es para cuando son 5 opciones verdes */
.opcionverde1{
	background-color:#27F6CA;
	color: white;
	font-size:18px;
    text-decoration: none;
	height: 18%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
.opcionverde1 ul li{list-style-type:none;}
.opcionverde1 ul li a{color: white;text-decoration: none; }
.opcionverde1 ul li a:hover {color: #1D3365;}

/* opcionverde2 es para cuando son 4 opciones verdes */
.opcionverde2{
	background-color:#27F6CA;
	color: white;
	font-size:18px;
    text-decoration: none;
	height: 22.5%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
.opcionverde2 ul li{list-style-type:none;}
.opcionverde2 ul li a{color: white;text-decoration: none; }
.opcionverde2 ul li a:hover {color: #1D3365;}

.subtituloverde{
	background-color:#27F6CA;
	color: white;
	font-size:18px;
    text-decoration: none;
	height: 8%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
	
/* opcionblanca2 es para cuando son 2 opciones blancas */
.opcionblanca2{
	background-color:#fff;
	color: #EF1166;
	font-size:18px;
	text-decoration: none;
	height: 41%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
.opcionblanca2 a{text-decoration: none;}
.opcionblanca2:hover {background-color: #EF1166; color:#fff;}

/* opcionblanca3 es para cuando son 3 opciones blancas */
.opcionblanca3{
	background-color:#fff;
	color: #EF1166;
	font-size:18px;
	text-decoration: none;
	height: 27.33%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
.opcionblanca3 a{text-decoration: none;}
.opcionblanca3:hover {background-color: #EF1166; color:#fff;}

/* opcionblanca4 es para cuando son 4 opciones blancas */
.opcionblanca4{
	background-color:#fff;
	color: #EF1166;
	font-size:18px;
	text-decoration: none;
	height: 20.5%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
.opcionblanca4 a{text-decoration: none;}
.opcionblanca4:hover {background-color: #EF1166; color:#fff;}

/* opcionblanca es para cuando son 5 o + opciones blancas */
.opcionblanca{
	background-color:#fff;
	color: #EF1166;
	font-size:18px;
	text-decoration: none;
	height: 18%;
    display: flex;
    justify-content: center;
    align-items: center;
	/* esto es para que tengan sombrita abajo */ box-shadow: 0px 12px 32px 3px rgba(0,0,0,0.29);}
.opcionblanca a{text-decoration: none;}
.opcionblanca:hover {background-color: #EF1166; color:#fff;}



.contador{background-color:#EF1166;
	color: #fff;
	font-size:36px;
	height: 82%;
    display: flex;
    justify-content: center;
    align-items: center;
	}
	
.formularioformato{background:#EF1166;
	color: #fff;
	font-size:36px;
	height: 41%;
    display: flex;
    justify-content: center;
    align-items: center;
	border: 0; padding: 0.5rem;
	}
.formulario .btn{ background: #EF1166; border: 0; padding: 1rem; color: #fff; 
font-family: 'Roboto', sans-serif; font-weight: 500; font-size:18px;}
.formulario .numeros{ background: #742EFF; border: 0; padding: 1rem; color: #27F6CA; 
font-family: 'Roboto', sans-serif; font-weight: 300; font-size:18px;}

/*pagina de iniciar sesion*/
.iniciarsesion{
	background-color:#27F6CA;
	color:#fff;
	height:75%;
	 display: flex;
    justify-content: center;
    align-items: center;
	text-decoration:none;}

.iniciarsesion2{
	background-color:#27F6CA;
	color:#fff;
	height:15%;
	 display: flex;
    justify-content: center;
    align-items: center;
	text-decoration:none;}
.iniciarsesion2 h4 { color:#1D3365; font-weight: 300i;}
.iniciarsesion2 h4 a{text-decoration:none; color:#1D3365;}
.iniciarsesion2 h4 a:hover{color:#EF1166;}
	
.forminiciarsesion .campo{ 
padding: 0.5rem; 
border-left: none;
border-top: none; 
border-right: none;
background-color:transparent;
border-bottom-color:#Fff;
align-items: center;
display: flex;
justify-content: center;
color:#EF1166;
font-family: 'Roboto', sans-serif; font-weight: 400;}
.forminiciarsesion .boton{ background: #000; border: 0; padding: 1rem;  color: #fff;}

.forminiciarsesion .checkbox{border:none;
	}