/*general*/
*{margin: 0; padding: 0; list-style: none; box-sizing: border-box;}
#cuerpobody{background-image: url(img/1.png);background-repeat:round;
  background-attachment: fixed;}
.contenedor{background-color: ghostwhite;width: 90%; max-width: 1000px; margin: auto;display: flex;flex-flow: row wrap;}
.contenedor1{width: 90%; max-width: 1000px; margin: auto;display: flex;flex-flow: row wrap;}
header{background-color:ghostwhite; width: 100%; padding: 20px; display: flex;justify-content: space-between;align-items: center; flex-direction: row; flex-wrap: wrap;}
header .logo img{vertical-align: baseline;}
header .logo a {line-height: 40px; }
header nav{ width:  75%; display: flex; flex-wrap: wrap; align-items: center;}
header nav a { font-family: 'Roboto', sans-serif;color:dimgray;font-weight: bold;text-align: center; text-decoration: none;padding: 10px; flex-grow: 1; }
header  nav :hover{ background-color: #fa29fe;color:white;}
#cfp{font-family: 'Oswald', sans-serif;font-size: 40px; font-weight: bold;text-decoration: none; color:#fa29fe; }
#btn-menu{display: none;}
#menubarras{display: none;}
footer{ font-family: 'Roboto', sans-serif; font-size: 12px;background-color: darkgrey; width: 100%; padding: 20px; display: flex;  flex-wrap: wrap; justify-content: space-between; color: dimgray}
footer .footexto{display: flex; flex-wrap: wrap; padding: 10px;}
footer .links{background-color: aqua; display: flex; flex-wrap: wrap;margin-top: 10px;}
footer .links a {flex-grow:  1; color: #fff; padding: 10px; text-align: center; text-decoration: none;}
footer .links a:hover{ background-color:blue;color:white;}
footer .social{background-color: #fa29fe; display: flex; flex-wrap: wrap;margin-top: 10px;}
footer .social a {flex-grow:  1; color: #fff; padding: 10px; text-align: center; text-decoration: none; display: inline-block;}
footer .social a:hover{ background-color: :cadetblue;color:black;}


@media(max-width:800px){
    .contenedor{flex-direction: column} header{padding: 0; }
    header .logo{margin: 20px 0;}
    header nav{ width: 90%;}
    
}

@media(max-width:600px){
 header{height: 70px; padding: 0;justify-content: space-around;}
    #cfp{text-align: center;}
    .contenedor{flex-direction:row;width: 100%;}
    .contenedor1{flex-direction:row;width: 100%;}
    header label{display: block;}
    #menubarras{display:flex;background-color:#fa29fe;}
    .menu{ position: fixed;top:70px;right: 0%; width: 50%;transform: translateX(200%);transition: all 0.6s; }header{ width: 100vw; }
   header nav {display: flex; background-color:rgba(51,51,51,0.9); flex-direction: column; position: fixed;padding: 30px;}
   header nav a {padding: 20px ;width: 100%;display: flex; text-align: left; color: ghostwhite;}
    #btn-menu:checked~ .menu{transform: translateX(0%);}
}


/*Home*/
.textobienvenida{background-color:rgba(51,51,51,0.9); margin-left: 50%; width: 40%; padding: 20px; margin-top: 5%;}
.bienvenidos{font-family: 'Oswald',sans-serif; font-size: 50px; color: white;}
.texto1{font-family: 'Roboto',sans-serif; font-size: 15px; color:aqua;}
.infohome{font-family: 'Roboto',sans-serif; font-size: 12px; color: white;margin-top: 5px;}
#box1{display: flex; flex-direction: row; flex-wrap: wrap; justify-content:center;margin-left: 20%; padding: 15px; margin-top: 5%;}
#box1 a{text-decoration: none;}

.institucion{background-color: aqua; width: 30%;padding: 15px;margin-right: 10px; }
.cursos{background-color: aqua; width: 25%;padding: 15px;margin-right: 10px;}
.bolsa{background-color: aqua; width: 25%;padding: 15px;}
.titulo1{font-family:'Oswald', sans-serif; font-size: 20px; color: white;}
.texto2 {font-family:'Roboto', sans-serif; font-size: 12px; color: white; margin-top: 10px;}
.institucion:hover {background-color: #fa29fe; }
.cursos:hover {background-color: #fa29fe; }
.bolsa:hover {background-color: #fa29fe; }

#app-play{margin-left: 28%; margin-top: 5%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content:space-around;background-color:rgba(51,51,51,0.9); width:64%;  margin-bottom: 5%;}
#googleplay { width: 100%; height: 30%;}

#descargalaapp {font-size: 20px; font-weight: bold; color: white;font-family: 'Oswald',sans-serif;background-color: #fa29fe;text-align: center;width: 100%;padding:10px;  }


@media(max-width:600px){
    #box1, .textobienvenida{width: 100%;margin: 0;}
    .institucion, .cursos, .bolsa{width: 100%; margin: 0; padding: 10px;border-bottom: solid 4px rgba(51,51,51,0.9);}
    #app-play{width: 100%;margin: 0;}
    
}




/*institucion*/
.titulo-pagina{width: 100%;background-color: #fa29fe;}
.ins-titulo{font-size: 40px; font-weight: bold; color: white;font-family: 'Oswald',sans-serif;padding: 30px;text-align: center;}

.contenedor{background-color: ghostwhite;width: 90%; max-width: 1000px; margin: auto;display: flex;flex-flow: row wrap;}

main { font-size: 13px;  background-color:aliceblue; padding: 10px; flex: 1 1 50%; }
h2{font-family: 'Oswald', sans-serif;font-weight: bold; font-size:35px; color:dimgray;margin: 20px;}
main article{ margin-bottom: 20px; padding-bottom: 20px;}

aside { background-color: white; flex: 1 1 50%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content:space-around; margin-top: 5%;}


.imagebox{position: relative;overflow: hidden;}
.imagebox img{width: 100%;transition: 0.5s ease;}
.textbox{position: absolute; top: 0; left:-100%;width: 100%;height: 100%; background-color: aqua; transition: 0.5s ease;}
.textbox h1{margin: 0; padding: 0; position: absolute; top: 50%; left: 50%;transform: translateX(-50%) translateY(-50%);color:#fff; font-family: 'Roboto', sans-serif;}
.imagebox:hover .textbox{left: 0%;}
.imagebox:hover img{transform: scale(1.2);}

.info1{margin: 20px;font-family: 'Roboto', sans-serif; font-size: 12px;}
.info2{margin: 20px;font-family: 'Roboto', sans-serif; font-size: 15px;font-weight: bold;}



@media(max-width:800px){
    .contenedor{flex-direction: column} 
    aside #imagenes{flex-grow: 1;}
    aside{flex-direction: row; flex: 0;}
}

@media(max-width:600px){
    
    aside{ flex-direction: row; width: 100% }
    .contenedor{flex-direction:row;width: 100%;}
    .ins-titulo{text-align: left;}
}

.textogaleria{font-family: 'Oswald', sans-serif; font-size: 30px; color: dimgray;margin-left:20px;margin-top: 5%;}
.galeria{width:  100%;margin-top: 5%;  margin-bottom: 5%;}
.slider {display: block; width: 100%;  overflow: hidden; }
 .slider #galeria {padding: 0; display: flex; width: 400%; animation: cambio 10s infinite; animation-direction: alternate;}  .slider #fotogaleria {list-style: none; width: 100%;}
    .slider img {width: 100%;}
     
    @keyframes cambio {
        0% {margin-left: 0;}
        20% {margin-left: 0;}
        
        25% {margin-left: -100%;}
        45% {margin-left: -100%;}
        
        50% {margin-left: -200%;}
        70% {margin-left: -200%;}
   
        75% {margin-left: -300%;}
        100% {margin-left: -300%;}
    }

/*cursos*/
.subapartado2:hover .res1 {height: 220px;}
.acordeon3 {width: 90%; min-height: 100px; background-color: gainsboro; margin: 15% auto 10%; overflow: hidden; margin-top: 6%;}
.res1 {width: 100%; height: 0px; background-color: gainsboro; overflow: hidden; transition: height 0.4s}
.respuesta5 {font-family: 'Roboto',sans-serif;width: 90%;margin: 10px; text-align: left; color: black; font-size: 13px;}
.respuesta6 {font-family: 'Roboto',sans-serif;margin: 10px;width: 90%; text-align: left; color: black; font-size: 16px; font-weight: bold;}
.subapartado2 {width: 100%; min-height: 50px; background: #F3E2A9;}
.titulo4 {width: 100%; height: 50px; background-color: aqua; overflow: hidden; border-bottom: solid 2px  rgba(51,51,51,0.5);}
.preg3 {margin: 13px; color: dimgray; font-size: 20px; font-weight: bold; margin-left: 3%; margin-top: 2%;font-family: 'Roboto',sans-serif;}

#botoncurso, #boton {background: #fa29fe; color: azure; padding: 2%; margin-top: 1%; margin-left: 45%; width: 50%; font-size: 20px;}
#botoncurso:hover {cursor: pointer;}
#formulario{display: block;}
.listadocursos {font-family: 'Roboto',sans-serif; font-size: 13px; margin-left: 9%; margin-right: 5%; margin-bottom: 5%; font-weight:bold; list-style: circle;}
#negrita {font-family: 'Roboto',sans-serif;font-weight: bold; font-size: 22px;  color:  #fa29fe;text-align: center;padding-top: 40px; width: 100%;}
#formulariocontacto2 {width: 100%;margin-top: 5%;}
#textoareacursos{font-family: 'Roboto',sans-serif;font-size: 15px; margin: 30px; padding:5px; width: 80%; height: 100px;}
#pregcursos{font-family: 'Roboto',sans-serif; font-size: 13px; padding: 40px; width: 100%;}

input {width: 80%;margin-left: 30px ; margin-right: 30px;font-size: 15px;}
#boton{margin-bottom: 30px;margin-left: 30px;}
#descargamat {font-size: 17px; font-family: 'Roboto',sans-serif; text-align: center; width: 160%; margin-bottom: 8%; background-color: aqua; padding: 2%; color: dimgray; font-weight: bold; margin-left: -38%; }
#desc {text-decoration: none;}



@media(max-width:800px){
    .contenedor{flex-direction: column} 
    aside #imagenes{flex-grow: 1;}
    aside{flex-direction: row; flex: 0;}

    
}

@media(max-width:600px){
    
    aside{ flex-direction: column; width: 100% }
    .contenedor{flex-direction:column;width: 100%;}
    .ins-titulo{text-align: left;}
    main{width: 100%;}
   #descargamat {font-size: 17px; font-family: 'Roboto',sans-serif; text-align: center; width: 89%; margin-bottom: 8%; background-color: aqua; padding: 2%; color: dimgray; font-weight: bold; margin-left: 5%;  margin-right: 3%; margin-top: 3%;}
   #desc {text-decoration: none;}

  
}





/*PREGUNTAS*/
.textbox1{width: 32%;margin: 5px; background-color: aqua;height: 200px;margin-top: 20px;}
.textbox3{width: 32%;margin: 5px;background-color: #fa29fe; height: 200px;margin-top: 20px; }


.pre-fre{font-family: 'Roboto',sans-serif;font-size: 15px;color: white;font-weight: bold;margin-left: 15px; margin-right: 15px; padding-top: 25%;text-align: center;}
h6{margin-top: 20%;}
.textbox3{position: relative;overflow: hidden;}
.textbox1{position: relative;overflow: hidden;}
.textbox1 .pregunta-fre{width: 100%;transition: 0.5s ease;}
.textbox3 .pregunta-fre1{width: 100%;transition: 0.5s ease;}
.textbox2{position: absolute; top: 0; left:100%;width: 100%;height: 100%; background-color: ghostwhite; transition: 0.5s ease;}
.textbox2 h6{margin: 0; padding: 0; position: absolute; top: 50%; left: 50%;transform: translateX(-50%) translateY(-50%);color:black; font-family: 'Roboto', sans-serif;font-size: 13px; width: 90%;}
.textbox1:hover .textbox2{left: 0%;}
.textbox1:hover pregunta-fre{transform: scale(1.2);}
.textbox3:hover pregunta-fre{transform: scale(1.2);}
.textbox3:hover .textbox2{left: 0%;}

@media(max-width:600px){
    
    .contenerdor1 {width: 100%;flex-direction: column;}
    .textbox3, .textbox1{width: 100%;}
    footer{margin-top: 2%;}
}


/*Descarga*/
#descargadedoc {display: flex;}
#descdoc {font-family: 'Roboto',sans-serif;font-size: 15px; background-color: aqua; padding: 1%; width: 55%; margin-left: 1%; margin-right: 1%; text-align: center; font-weight: bold; color: white; font-size: 18px; margin-bottom: 3%;}
#descdoc:hover {cursor: pointer;}
#infodocu {font-family: 'Roboto',sans-serif;font-size: 15px; margin-top: 1%; margin-bottom: 5%; padding-left: 1%; padding-right: 1%;}

@media(max-width:600px){
    #descargadedoc {flex-direction: column;}
    #descdoc {width: 98%;}
    
}

/*splash*/
#imagensplash {width: 55%; margin-top: 7%; margin-left: 22%;}
#texto0 {font-family: 'Roboto', sans-serif; color: black; font-size: 30px; text-align: center; padding: 5%; padding-left: 6%; padding-right: 6%; width: 70%; margin-left: 13%; margin-top: -2%;}
.footerindex {display: flex; flex-wrap: wrap; margin-top: 10px;}

@media(max-width:600px){
   #imagensplash {width: 75%; margin-top: 30%; margin-left: 13%;}
#texto0 {font-family: 'Roboto', sans-serif; color: black; font-size: 20px; text-align: center; padding: 5%; padding-left: 6%; padding-right: 6%; width: 70%; margin-left: 16%;}
.footerindex {display: flex; flex-wrap: wrap; margin-top: 10px;}

    
}