/* CSS Document */

html{
	margin:0;
	width:100%;
	height:100%;
	overflow:visible;
	background-color:#FBFDFE;
	background-image:url(../img/fondo-01.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	background-attachment: fixed;
	}
body{
	font-family:sans-serif;
	}


/*Menu principal*/
#main-menu{
	display:block;
	background-color:#f3f4f4;
	position:relative;
	width:100%;
	padding:0;
	padding-left:20px;
	top:0px;
	z-index:2000;
	}
#main-menu > ul{
	overflow:visible;
	height:30px;
	margin:0;
}
#main-menu ul{
	display:block;
	padding:0;
	list-style:none;
	}
#main-menu ul li{
	float:left;
	height:100%;
	padding-left:20px;
	color:#036;
	}
#main-menu ul li a{
	display:block;
	width:inherit;
	height:inherit;
	text-decoration:none;
	color:#036;
}
#main-menu > ul li{
	background-color:#f3f4ff;
	width:160px;
	height:30px;
	line-height:30px;
}
#main-menu > ul > li{
	background-color:inherit;
	
}
#main-menu > ul li:hover{
	background-color:#036;
	color:#fff;
}
#main-menu > ul li:hover > a{
	color:#fff;
	}
#main-menu > ul > li ul{
	display:none;
	background-color:aqua;
	margin-left:-20px;
	position:absolute;
	width:inherit;
	box-shadow: 12px 12px 24px #0006;
	overflow:hidden;
	width:180px;
}
#main-menu > ul >li:hover ul{
	display:block;
}

.large{
	width:700px !important;
	}
/*ingreso_clave*/
#ingreso_clave,
.form{
	width:400px;
	position:absolute;
	margin:auto;
	margin-top:100px;
	left:0;
	right:0;
	background-color:#DDD;
	padding:40px;
	border-radius:20px;
	}
#ingreso_clave h2,
.form h2{
	text-align:center;
	margin-bottom:40px;
	}
#ingreso_clave input,
.form input{
	width: 100%;
	height:40px;
	font-size:24px;
	border:none;
	color:#06C;
	text-align:center;
	margin-bottom:40px;
	}
#ingreso_clave textarea,
.form textarea{
	width:100%;
	height:300px;
	}
#ingreso_clave button,
.form button{
	width:100%;
	height:40px;
	font-size:24px;
	}
	
/*cuestionario*/	
#cuestionario{
	display:block;
	width:650px;
	background-color:#DDD;
	position:absolute;
	margin:auto;
	margin-top:70px;
	left:0;
	right:0;
	padding:40px;
	border-radius:20px;
	}
#cuestionario form p{
	text-align:center;
	font-size:18px;
	margin-bottom:80px;
	margin-top:40px;
	color:#036;
	}
#cuestionario > p{
	text-align:center;
	font-size:11px;
	}
#cuestionario input{
	display:none;
	}
#cuestionario div{
	width:120px;
	float:left;
	margin:5px;
	margin-bottom:80px;
	}
#cuestionario div:last-of-type{
	width:inherit;
	float:none;
	}
#cuestionario button{
	width:100%;
	height:40px;
	}
#cuestionario input + label{
	background-color:#FFF;
	display:block;
	width:40px;
	height:40px;
	line-height:40px;
	font-size:16px;
	text-align:center;
	border-radius:40px;
	padding:20px;
	transition:all .3s ease;
	cursor:pointer;
	}
#cuestionario input + label:hover{
	background-color:#FF0;
	}
#cuestionario input:checked + label{
	background-color:#FF0;
	}

/*registro*/
#registro{
	display:block;
	width:650px;
	background-color:#DDD;
	position:absolute;
	margin:auto;
	left:0;
	right:0;
	padding:40px;
	border-radius:20px;
	}

#registro h2{
	text-align:center;
	margin-bottom:40px;
	}
#registro input{
	width: 100%;
	height:40px;
	font-size:24px;
	border:none;
	color:#06C;
	text-align:center;
	margin-bottom:40px;
	}
#genero{
	position:relative;
	height:100px;
	margin-bottom:20px;
	overflow:hidden;
	}
#genero input{
	display:none;
	}
#genero input + label{
	display:block;
	width:80px;
	height:80px;
	border-radius:50%;
	background-color:#FFF;
	float:left;
	margin:12px;
	position:relative;
	text-align:center;
	line-height:80px;
	}
#genero input:checked + label{
	background-color:#F63;
	}
#registro button{
	width:100%;
	height:40px;
	font-size:24px;
}

/*instrucciones*/
#instrucciones{
	width:60vw;
	position:relative;
	margin:auto;
	left:0;
	right:0;
	background-color:#DDD;
	padding:40px;
	border-radius:20px;
	top:0;
	bottom:0;
	overflow: hidden;
	}
#instrucciones h1{
	text-align: center;
}
#instrucciones ul{
	padding: 0;
	list-style: none;
}
#instrucciones li{
	text-align: justify;
	margin-bottom: 40px;
}
#instrucciones li button{
	width:100%;
	height:40px;
	font-size:24px;
	}

/*RESET*/
#reset{
	width:200px;
	position:relative;
	left:0;
	right:0;
	margin:auto;
	margin-top:200px;
}
#reset button{
	width:100%;
	height:40px;
	font-size:15px;
}

/*menu_gestor*/
#menu_gestor{
	display:block;
	background-color:antiquewhite;

	}
#menu_gestor ul{
	display:block;
	padding:0;
	list-style:none;
	overflow:hidden;
	}
#menu_gestor ul li{
	float:left;
	}
#menu_gestor > ul li{
	width:140px;
}
#menu_gestor > ul > li{
	background-color:coral;
}
#menu_gestor > ul li:hover{
	background-color:chartreuse;
}
#menu_gestor > ul >li ul{
	display:none;
	background-color:aqua;
}
#menu_gestor > ul >li:hover ul{
	display:block;
}

/*Claves*/
.claves{
	background-color:#F3F4FF;
	padding:20px;
	margin:40px auto;
}
.claves > div{
	overflow:hidden;
	position:relative;
}
.claves > div > div{
	display:block;
	width:80px;
	float:left;
	position:relative;
	margin:6px;
	padding:6px;
	line-height:6px;
	border:1px solid #0003;
	border-radius:6px;
	text-align:center;
	color:#000a;
}