/*body1 - Logo*/
body {font-family: 'Roboto', sans-serif;background-color: #F3E2A9; }
#texto1 {font-family: 'Roboto', sans-serif; font-size: 32px;text-align: center; padding: 5%;}
#logo1 {width: 55%; margin-top: 20%; margin-left: 22%;}
footer {font-size: 13px; color: #848484; background-color: #F3E2A9; margin-top: 8%; margin-left: 3%; margin-bottom: 2%; margin-right: 3%;}
#caja3 {width: 80%;font-size: 50px; background: #F36E5B; text-align: left; padding: 10%; margin-bottom: 0;font-weight: bold;}
#caja4 {width: 80%;font-size: 50px; background: #2E64FE; text-align: left; padding: 10%; margin-top: 0;font-weight: bold;}
#botoninicial {padding-top: 5%; padding-bottom: 5%; padding-right: 75%; text-decoration: none; color: aliceblue;}
#cuerpopadre2 {background-color: #F3E2A9; border-bottom: 0; width: 100%; height: 650px;}
#iconoinicio1 {width: 15%; float: right; margin-top: -3%;}
#iconoinicio2 {width: 15%; float: right; margin-top: -3%;}


/*body2 - Menu*/
#menu {width: 17%; margin-top: 4%; margin-right: 3%;float: right;}
#logo2 {width: 15%; margin-top: 4%; float: left; margin-left: 3%; margin-bottom: 4%;}
#imagenes {display: flex;flex-direction: column; margin-top: 30%; width: 100%; position: relative/* ó FLOAT LEFT*/}
#cursos {width: 30%;}
#descarga {width: 30%;}
#bolsa {width: 30%;}
#texto2 {font-size: 60px; margin-bottom: 0%; display: inline-flex; position: absolute; padding-top: 6%; padding-left: 2%;}
div {background: #F5ECCE; width: 100%; border-bottom: 3px solid #F5DA81;}
#pie {font-size: 13px; color: #848484; background-color: #F3E2A9; margin-left: 3%; margin-right: 3%; clear: both;}
figure {margin: 0;}
#etiq {text-decoration: none; color: black;}

/*body3 - Registrate*/
#centro {width: 15%; margin-left: 23%; margin-top: 4%; padding-bottom: 4%;}
#centro:hover {transform: scale(1.3);}
#flecha {width: 17%;margin-top: 4%;float: left;}
#cuerpopadre3 {position: relative; background-color: #F3E2A9; border-bottom: 0; height: 300px;}
#registro {font-size: 65px; margin-top:15%; margin-left: 3%; background: #D8D8D8; border-radius: 15px; padding: 6%; width: 82%; height:20%; position: absolute; }
form {width: 92%; margin-left: 3%; margin-top: 10%;}
h1 {font-size: 14px; margin-bottom: 1%; margin-top: 1%; margin-left: 1%;}
input {width: 100%; margin-bottom: 5%; font-size: 50px; border: none; padding: 7px;}
#boton {background: #F36E5B; color: azure; padding: 2%; margin-top: 3%; width: 101%;}
#boton:hover {cursor: pointer;}
#puerta {width: 12%; align-self: flex-end; margin-left: 50%; position: absolute; top:20px; right: 30px;}
form input  {font-size: 40px; padding: 2%; width: 97%;}
#camararegistrate {width: 40%; margin-left: 30%; margin-top: 13%;}

/*body4 - Registrate-Aceptar*/
#texto {font-size:15px; text-align: left; margin-left: 3%; margin-right: 3% ;padding-top: 20%; padding-left: 2%; clear: both; width: 90%;}
#compartir2 {margin-top: 15%; margin-bottom: 15%; width: 90%; position: relative; left:47px;; background: #0AB4AF; border-radius: 95px;}

div.acordeon {width: 900px; min-height: 100px; background-color: #F3E2A9; overflow: hidden; border-radius: 55px; margin: 40px auto; border-bottom: 0; margin-top: 15%; margin-bottom: 15%;}
div.subapartado {width: 900px; min-height: 50px; background-color:cadetblue; border-bottom: 0;}
div.titulo {width: 900px; height: 150px; background-color: #0AB4AF; overflow: hidden; border-bottom: 0;}
.titulo2 { color: white; text-align: right; margin-right: 6%; font-size: 45px; font-weight: bold; margin-top: -9%;}
.info {width: 900px; height: 0px; background-color: #F3E2A9; overflow: hidden; transition: height 0.2s; font-size: 40px; border-bottom: 0;}
.info2 { text-align: center; background: #28AAE1;}
div.subapartado:hover .info {height: 280px;}
#imcompartir {width: 12%; margin-left: 6%; margin-top: 2%; ;}
#iconotw {width: 10%;}
#iconofb {width: 9%; margin-right: 3%;}
#iconowp {width: 10%;}
.info3 {text-align: center; background: #3B579D;}
.info4 {text-align: center; color: white; background: #54CC61;}


/*body7 - Ingresar*/
#ingresar {font-size: 65px;; width: 20%; margin-top:15%; margin-left: 3%; background: #D8D8D8; border-radius: 15px; padding: 6%;width: 82%; height:20%; position: absolute;}
#llave {width: 12%; align-self: flex-end; margin-left: 50%; position: absolute; top:32px; right: 34px;}
#ingresarfb {background: #4D63A7; width: 90%; height: 65px;border-radius: 50px; text-align: center; font-size: 35px; color: aliceblue; padding-top: 3%; margin: auto; margin-top: 10%;}
#ingresarfb: hover {background: #131F75;}
#ingresargo {background: #E0493D; width: 90%; height: 65px;border-radius: 50px; text-align: center; font-size: 35px; color: aliceblue; padding-top: 3%; margin: auto; margin-top: 5%;}
#inicioforma { font-size: 40px; font-weight: bold; margin-left: 5%; margin-bottom: 1%; margin-top: 20%;}
.checkbox {background-color: #F3E2A9; border-bottom: 0; margin-bottom: 3%;}
[type="checkbox"]{display: none;}
label {padding-left: 60px; position: relative; font-size: 13px;}
[type="checkbox"]+ label {cursor: pointer;}
label:before {content: ""; background: #F3E2A9; border: solid 1px #000000; border-radius: 3px; width: 40px; height: 40px; position: absolute; left: 0px; }
[type="checkbox"]:checked + label:before {content: "✓"; font-size: 38px; font-weight: bold; font-family: ""; color: #000000;}
#formularioingresar {position: relative;}
#usuarioingresar {position:absolute; width: 7%; top: 10px; left: 15px;}
#usuariocontraseña {position:absolute; width: 7%; top: 135px; left: 15px;}


/*body5 - Menu secundario*/
#iconos {width: 12%;padding-left: 6%; padding-right: 5%;}
header {width:100%; background-color:#F7D358; display: flex; height: 10%;}
#btn-menu{display:none;}
header label {margin-top: 5%;margin-bottom: 5%; display: none;}
header nav {width: 98%; max-width: 1000px; background:#F7D358; margin-right: 0;}
header nav ul {list-style: none;font-size: 47px; display: flex;padding-top: 15%; flex-direction: column; overflow: hidden;}
header nav ul li {border-bottom: 6px solid #FFBF00; margin-bottom: 2%;padding-bottom: 2%;}
header nav ul li a {display: block; padding: 15px 20px; text-decoration: none; color: black;}
header nav ul li a:hover {background: #F3E2A9; cursor: pointer;}

@media(max-width:768px){
    header label {display:block;}
    header nav {position: absolute;background: #F7D358; width: 70%;margin-left: -70%; transition:  all 0,5s;}
    header nav ul{flex-direction: column;}
    #btn-menu:checked ~
    header nav{margin: 0;}
}

/*body6 - Descarga de material*/
#download {font-size: 65px; width: 35%; margin-top:15%; margin-left: 3%; clear: both; background: #D8D8D8; border-radius: 15px; padding: 6%; width: 82%;}
#doc1 {margin-left: 1%;list-style: none;font-size: 25px; color: azure; text-align: left; background: #04B4AE; margin-bottom: 0; width: 81%; padding: 6%; margin-top: 10%;}
#doc2 {margin-left: 1%; margin-right: 3%;list-style: none;font-size: 25px; color: azure; text-align: left; background: #2E64FE; margin-bottom: 0%; width: 81%; padding: 6%; }
#doc3 {margin-left: 1%; margin-right: 3%;list-style: none;font-size: 25px; color: azure; text-align: left; background: #F36E5B; margin-bottom: 0%; width: 81%; padding: 6%;}
#doc4 {margin-left: 1%; margin-right: 3%;list-style: none;font-size: 25px; color: azure; text-align: left; background: #DDC423; margin-bottom: 10%; width: 81%; padding: 6%;}
#gancho {width: 6%; float: right; margin-right: 3%; margin-top: -2%;}
#nube {width: 15%; float: right; margin-right: 3%;}
#textodescarga {font-size: 14px; padding-left: 4%; padding-right: 4%;}

.checkbox2 {background-color: #F3E2A9; border-bottom: 0; margin-bottom: 3%; margin-left: 4%; margin-right: 5%; width: 85%;}
[type="checkbox"]{display: none;}
label {padding-left: 60px; position: relative; font-size: 13px;}
[type="checkbox"]+ label {cursor: pointer;}
label:before {content: ""; background: #F3E2A9; border: solid 1px black; border-radius: 3px; width: 40px; height: 40px; position: absolute; left: 0px; }
[type="checkbox"]:checked + label:before {content: "✓"; font-size: 38px; font-weight: bold; font-family: ""; color: #000000;}

/*body7 - Preguntas frecuentes*/
#preguntas {font-size: 45px; width: 35%; margin-top:15%; margin-left: 3%; clear: both; background: #D8D8D8; border-radius: 15px; padding: 6%; width: 82%;}
#cartapreg {width: 15%; float: right; margin-right: 2%; margin-top: -2%;}

.acordeon2 {width: 900px; min-height: 100px; background-color: #F3E2A9; margin: 15% auto 10%; overflow: hidden;}
.subapartado2 {width: 900px; min-height: 50px; background: #F3E2A9;}
.titulo3 {width: 900px; height: 100px; background-color: #2E64FE; overflow: hidden;}
.preg {margin: 13px; color: white; font-size: 45px; font-weight: bold; margin-left: 3%;}
.resp1 {width: 900px; height: 0px; background-color: #F5ECCE; overflow: hidden; transition: height 0.2s}
.respuesta1 {margin: 20px; text-align: left; color: black; font-size: 30px;}
.subapartado2:hover .resp1 {height: 250px;}

#contacta {margin-bottom: 2%; margin-left: 1%; font-size: 20px; font-weight: bold; color: #F36E5B}
textarea {width: 101%; margin-bottom: 20px; padding: 7px; font-size: 35px; border: none; box-sizing: border-box; box-sizing: border-box;}
textarea {min-height: 200px; max-height: 300px; max-width: 110%;}
.mayorinfo {margin-left: 3%; font-size: 20px; font-weight: bold; color: #F36E5B; margin-top: 5%;}
.conta {margin-left: 3%; font-size: 13px;}