@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Work Sans', sans-serif;

}

body {
    height: 100%;
    width: 100%;
}

.titulo {
    box-sizing: border-box;
    width: 60%;
    margin: auto;
      
}

.cabecera {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 5px solid #107389; 
    
}

.flecha {
    padding: .5em;
    list-style: none; 
    
}

.perfil {
    width: 15%;
    height: 15%;
    border-radius: 50%;
    align-self: flex-start;
    
}

.resumen {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .8rem;
    background-color: rgba(144, 144, 144 ,.1);
    width: 100%;
}

.entrada {
    display: flex;
    justify-content: center;
    align-items: center;
}

.datos {
    margin-left: 1em;
    align-items: center;
    justify-content: center;
    padding-right: 1.2em;
}

.acciones {
    padding: 0 2em 0 2em;
    border-left: 3px solid rgba(16, 115, 137, .1);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    
}

header nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    align-items: center;
}

.login img {
    list-style: none;
    width: 50%;

}

.mensajes img {
    list-style: none; 
    width: 50%;
    
}

.login {
    padding-left: .8em;
}

.mensajes {
    padding-right: .8em;
}


.resumen h1 {
    font-weight: 400;
    font-size: 1.2em;
    color: #107389;
}
.resumen h2 {
    font-size: 1em;
    margin-bottom: .5em;
    color: #107389;
    font-weight: 400;
}
.resumen h3 {
    font-weight: 300;
}

main nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main nav ul li {
    text-align: center;
}

main nav ul li a {
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 300;
    color: white;  
}

.cursada {
    background-color: rgba(46, 214, 255, .7);
    padding: .4em;
    list-style: none;
    width: 100%;

}
.tramites {
    padding: .4em;
    background-color: rgba(0, 167, 208, .8);
    list-style: none;
    width: 100%;

}
.servicios {
    padding: .4em;
    background-color: rgba(28, 15, 60, .7);
    list-style: none;
    width: 100%;

  }

footer {
    margin-top: 1rem;
    margin-bottom: .5rem;
    font-size: .8rem;
    font-weight: 400;
    text-align: center;
    color: white;
    padding: .3em;
    background-color: #107389;
 
}


.contraseña {
    box-sizing: border-box;
    background-color: white;
    max-width: 175px;
    font-size: .9rem;
    padding: .3em;
    box-shadow: .2rem .2rem .5rem silver;
    font-style: italic;
}

main h1 {
    text-align: center;
    font-size: 1.4em;
    font-weight: 300;
    padding: .3em;
    color: white;
    margin-top: .4em;
}

.materias, .examenes, .depor {
    display: flex;
    justify-content: space-around;
    text-align: center;
    flex-wrap: wrap;
    padding: .1em;
    
}

.materias h3, .examenes h3, .depor h3 {
    font-weight: 300;
    font-size: 1.5em;
    letter-spacing: .1em;
}

.materias h4, .examenes h4, .depor h4 {
    font-weight: 300;
    font-size: 1.1em;
    
}

.materias h5, .examenes h5, .depor h5 {
    font-weight: 400;
    font-size: 1.1em;
    
}

.mate {
    padding: .5em 1em 1em 1em;
    border: 1px solid rgba(46, 214, 255, .3);
    margin: .5em 0;
    color: midnightblue;
    flex-basis: 32%; 
    background-color: rgba(46, 214, 255, .2);
}

.socio, .ectc {
    flex-basis: 46%;
    padding: .5em 1em 1em 1em;
    margin: .6em 0 .3em 0;
    color: midnightblue;
    background-color: rgba(46, 214, 255, .2);
    border: 1px solid rgba(46, 214, 255, .3);
}

.mitad {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 1em;
}

.mitad h1 {
    text-align: center;
    font-size: 1.3em;
    font-weight: 400;
    padding: .3em;
    background-color: rgba(19, 231, 173, .5);
    color: white;
    margin-top: .4em;   
}

.parte {
    width: 48%;
    padding: .6em;
}

.partes {
    width: 95%;
}

.cuads img {
    width: 70%;
    padding: .5em 0 0;
    
}
.parte h3 {
    text-align: center;
    border-bottom: 2px solid rgba(28, 15, 60, .7);
    margin: .4em 1em;
    font-size: 1.2em;
    font-weight: 300;
}

.parte h4 {
    font-size: 1em;
    font-weight: 400;
    text-align: center;
    padding: .3em;
}

.parte h5 {
    font-size: 1em;
    font-weight: 300;
    padding: .3em 1.1em;
    text-align: center;
}

.solo {
    padding: 1em;
    border: 1px solid rgba(102, 45, 255, .3);
    margin: .5em;
    color: midnightblue;
    width: 70%; 
    background-color: rgba(28, 15, 60, .1);;
    line-height: 1.6rem;
}

.recuadro {
    background-color: rgba(28, 15, 60, .7);
    margin: 2.1em 2em;
    padding: .5em;
    border: 2px solid rgba(102, 45, 255, .3);
    color: white;
}

.recuadro h2 {
    text-align: center;
    font-size: 1.6em;
    font-weight: 400;
    padding: .2em;
}

.recuadro h3 {
    font-size: 1.3em;
    text-align: center;
    padding: .2em;
    font-weight: 300;
    
}

.violeta {
    background-color: rgba(28, 15, 60, .6);
}

.c {
    text-align: center;
    font-size: 1.5em;
    font-weight: 300;
    padding: .3em;
    background-color: rgba(46, 214, 255, .5); 
    color: white;
    margin-top: .2em;
}

.parte .c {
    text-align: center;
    font-size: 1.2em;
    font-weight: 200;
    padding: .3em;
    background-color: rgba(46, 214, 255, .5); 
    color: white;
    margin-top: .4em;
}
.parte .s {
    text-align: center;
    font-size: 1.2em;
    font-weight: 200;
    padding: .3em;
    background-color: rgba(28, 15, 60, .6); 
    color: white;
    margin-top: .4em;
}

.parte .se {
    text-align: center;
    border-bottom: 2px solid rgba(28, 15, 60, .5);
    margin: .4em 1em;
    font-size: 1.2em;
    font-weight: 400; 
    padding: .2em;
}

.cuads {
    padding: .5em 1em 1em 1em;
    border: 1px solid rgba(28, 15, 60, .5);
    margin: .5em;
    color: midnightblue;
    width: 45%; 
    background-color: rgba(28, 15, 60, .1);
}

.parte .cuads h3 {
    text-align: center;
    border-bottom: 2px solid rgba(28, 15, 60, .5);
    margin: .4em 1em;
    font-size: 1.2em;
    font-weight: 300; 
}

.parte .cuads h5 {
    padding: .1em;
}

.partes .cuads h3 {
    text-align: center;
    border-bottom: 2px solid rgba(28, 15, 60, .5);
    margin: .4em 1em;
    font-size: 1.2em;
    font-weight: 300; 
}

.partes .cuads h5 {
    padding: .1em;
    font-size: 1em
}

.partes .tr {
    text-align: center;
    border-bottom: 2px solid rgba(0, 167, 208, .8);
    margin: .4em 1em;
    font-size: 1.2em;
    font-weight: 300; 
    padding: .2em;
}

.cuadt {
    padding: .1em;
    border: 1px solid rgba(0, 167, 208, .6);
    margin: .5em;
    color: midnightblue;
    flex-basis: 30%; 
    background-color: rgba(0, 167, 208, .1);
}

.cuadt h3, .bloqueo h3{
    text-align: center;
    align-content: center;
    vertical-align: middle;
    justify-content: center;
    margin: auto;
    margin: .4em 1em;
    font-size: 1.2em;
    font-weight: 300;
    border: none;
}

.bloqueo {
    padding: .1em;
    border: 1px solid darkgrey;
    margin: .5em;
    color: darkgrey;
    flex-basis: 30%; 
    background-color: gainsboro;
}

.t {
    text-align: center;
    font-size: 1.4em;
    font-weight: 200;
    padding: .3em;
    background-color: rgba(0, 167, 208, .5); 
    color: white;
    margin-top: .4em;
}

.subcursada{
    display: none;
}

.cursada:hover .subcursada{
    display: block;
}
.subtramites{
    display: none;
}

.tramites:hover .subtramites{
    display: block;
}
.subservicios{
    display: none;
}

.servicios:hover .subservicios{
    display: block;
}

.destacado {
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    padding: .3em;
    color: white;
    background-color:rgba(255, 87, 51, .6);
    width: 80%;
    margin: auto;
}

.arriba {
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    padding: .3em;
    color: rgba(255, 87, 51, .6);
    width: 80%;
    margin: auto;
}

.llamado {
    background-color: rgba(255, 87, 51, .6);
    width: 50%;
    margin: auto;
    border-radius: .8em;
    font-weight: 400;
    color: white;
}

.parteuno {
    width: 65%;
    padding: .8em;
}

.parteuno h3 {
    text-align: center;
    border-bottom: 2px solid rgba(28, 15, 60, .7);
    margin: .4em 2em;
    font-size: 1.2em;
    font-weight: 400;
    text-decoration: none;
    width: 70%;
}

.parteuno h4 {
    font-size: 1em;
    font-weight: 400;
    text-align: center;
    padding: .3em;
}

.parteuno h5 {
    font-size: 1em;
    font-weight: 300;
    padding: .3em 1.1em;
    text-align: center;
}

.parteuno li {
    list-style: none;
}

.parteuno li a {
    text-decoration: none;
    text-align: center;
    border-bottom: 2px solid rgba(28, 15, 60, .7);
    color: black;
}

.division {
    display: flex;
    flex-direction: row;
    width: 98%;
    background-color:rgba(255, 87, 51, .1);
    margin: 1em;
}

.apoyo {
    width: 100%;
}

.apoyo img {
    width: 90%;
    margin: 1em;
    
}

.otros {
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    padding: .3em;
    color: rgba(16, 115, 137, .7);   
}

#activar ~ .desplegable {
    display: none;
    overflow: hidden;
} 

#activar:checked ~ .desplegable {
    display: block;
}

#activar {
    display: none;
}

#activar ~ .desplegable {
    display: none;
    overflow: hidden;
    padding: .3em;
}
#activar:checked ~ .desplegable {
    display: block;
}

.inputlabel {
    display: block;
    text-align: center;
    border-radius: .4em;
    background-color:rgba(255, 82, 45, .8);
    color: white;
    font-size: 1.2em;
    font-weight: 400;
    width: 93%;
    padding: .3em;
    margin: .5em 2em .5em;
}

#activaruno ~ .desplegableuno {
    display: none;
    overflow: hidden;
} 

#activaruno:checked ~ .desplegableuno {
    display: block;
}

#activaruno {
    display: none;
}

#activaruno ~ .desplegableuno {
    display: none;
    overflow: hidden;
    padding: .3em;
}
#activaruno:checked ~ .desplegableuno {
    display: block;
}

.inputlabeluno {
    display: block;
    text-align: center;
    border-radius: .4em;
    background-color:rgba(255, 82, 45, .8);
    color: white;
    font-size: 1.2em;
    font-weight: 400;
    width: 93%;
    padding: .3em;
    margin: 0 2em .5em;
}

#activardos ~ .desplegabledos {
    display: none;
    overflow: hidden;
} 

#activardos:checked ~ .desplegabledos {
    display: block;
}

#activardos {
    display: none;
}

#activardos ~ .desplegabledos {
    display: none;
    overflow: hidden;
    padding: .3em;
}
#activardos:checked ~ .desplegabledos {
    display: block;
}

.inputlabeldos {
    display: block;
    text-align: center;
    border-radius: .8em;
    background-color:rgba(255, 82, 45, .4);
    color: white;
    margin: auto;
    margin-top: .5em;
    margin-bottom: .5em;
    font-size: 1.2em;
    font-weight: 400;
    width: 85%;
    padding: .3em;
}

#activartres ~ .desplegabletres {
    display: none;
    overflow: hidden;
} 

#activartres:checked ~ .desplegabletres {
    display: block;
}

#activartres {
    display: none;
}

#activartres ~ .desplegabletres {
    display: none;
    overflow: hidden;
    padding: .3em;
}
#activartres:checked ~ .desplegabletres {
    display: block;
}

.inputlabeltres {
    display: block;
    text-align: center;
    border-radius: .8em;
    background-color:rgba(255, 82, 45, .4);
    color: white;
    margin: auto;
    margin-top: .5em;
    margin-bottom: .5em;
    font-size: 1.2em;
    font-weight: 400;
    width: 85%;
    padding: .3em;
}

#activarcuatro ~ .desplegablecuatro {
    display: none;
    overflow: hidden;
} 

#activarcuatro:checked ~ .desplegablecuatro {
    display: block;
}

#activarcuatro {
    display: none;
}

#activarcuatro ~ .desplegablecuatro {
    display: none;
    overflow: hidden;
    padding: .3em;
}
#activarcuatro:checked ~ .desplegablecuatro {
    display: block;
}

.inputlabelcuatro {
    display: block;
    text-align: center;
    border-radius: .8em;
    background-color:rgba(255, 82, 45, .4);
    color: white;
    margin: auto;
    margin-top: .5em;
    margin-bottom: .5em;
    font-size: 1.2em;
    font-weight: 400;
    width: 85%;
    padding: .3em;
}

#activarcinco ~ .desplegablecinco {
    display: none;
    overflow: hidden;
} 

#activarcinco:checked ~ .desplegablecinco {
    display: block;
}

#activarcinco {
    display: none;
}

#activarcinco ~ .desplegablecinco {
    display: none;
    overflow: hidden;
    padding: .3em;
}
#activarcinco:checked ~ .desplegablecinco {
    display: block;
}

.inputlabelcinco {
    display: block;
    text-align: center;
    border-radius: .5em;
    background-color:rgba(255, 82, 45, .8);
    color: white;
    margin: auto;
    margin-top: .5em;
    margin-bottom: .5em;
    font-size: 1.2em;
    font-weight: 200;
    width: 95%;
    padding: .3em;
}

#activarseis ~ .desplegableseis {
    display: none;
    overflow: hidden;
} 

#activarseis:checked ~ .desplegableseis {
    display: block;
}

#activarseis {
    display: none;
}

#activarseis ~ .desplegableseis {
    display: none;
    overflow: hidden;
    padding: .3em;
}
#activarseis:checked ~ .desplegableseis {
    display: block;
}

#activarsiete ~ .desplegablesiete {
    display: none;
    overflow: hidden;
} 

#activarsiete:checked ~ .desplegablesiete {
    display: block;
}

#activarsiete {
    display: none;
}

#activarsiete ~ .desplegablesiete {
    display: none;
    overflow: hidden;
    padding: .3em;
}
#activarsiete:checked ~ .desplegablesiete {
    display: block;
}

#activarocho ~ .desplegableocho {
    display: none;
    overflow: hidden;
} 

#activarocho:checked ~ .desplegableocho {
    display: block;
}

#activarocho {
    display: none;
}

#activarocho ~ .desplegableocho {
    display: none;
    overflow: hidden;
    padding: .3em;
}
#activarocho:checked ~ .desplegableocho {
    display: block;
}

#activarnueve ~ .desplegablenueve {
    display: none;
    overflow: hidden;
} 

#activarnueve:checked ~ .desplegablenueve {
    display: block;
}

#activarnueve {
    display: none;
}

#activarnueve ~ .desplegablenueve {
    display: none;
    overflow: hidden;
    padding: .3em;
}
#activarnueve:checked ~ .desplegablenueve {
    display: block;
}

#activardiez ~ .desplegablediez {
    display: none;
    overflow: hidden;
} 

#activardiez:checked ~ .desplegablediez {
    display: block;
}

#activardiez {
    display: none;
}

#activardiez ~ .desplegablediez {
    display: none;
    overflow: hidden;
    padding: .3em;
}
#activardiez:checked ~ .desplegablediez {
    display: block;
}

.inputlabelseis, .inputlabelsiete, .inputlabelocho, .inputlabelnueve {
    display: block;
    text-align: center;
    border-radius: .5em;
    background-color:rgba(255, 82, 45, .8);
    color: white;
    margin: auto;
    margin-top: .5em;
    margin-bottom: .5em;
    font-size: 1.2em;
    font-weight: 200;
    width: 95%;
    padding: .3em;
}

.video {
    position: relative;
    margin: .3em;
    box-sizing: border-box;
    height: 0;
    padding-bottom: 56.25%;
    width: 98%;
}

.video iframe {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}

.videomas {
    position: relative;
    margin: 0 auto;
    height: 0;
    padding-bottom: 28.125%;
    width: 50%
}

.videomas iframe {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}

.vertical {
    display: flex;
    flex-direction: column;
}

.verticalsimple {
    display: flex;
    flex-direction: column;
    margin: 0 .5em .5em .5em;
    border: 2px solid rgba(144, 144, 144, .5);
    box-shadow: .2em .2em .8em silver;

}

.verticaluno {
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
}

.horizontal {
    display: flex;
    flex-direction: row;
    margin: .5em;
    padding: .3em;
    border: 2px solid rgba(144, 144, 144, .5);
    box-shadow: .2em .2em .8em silver;
}

.zocalolargo {
    display: flex;
    flex-direction: row;
    padding: .5em;
    width: 100%;
    justify-content: space-between;
}

.zocalo {
    width: 25%;
    height: 25%;   
}

.titulado {
    display: flex;
    flex-direction: column;
}

.titulado h4 {
    text-align: left;
    font-weight: 600;
    font-size: 1.1em;
    padding: .2em;
}

.titulado h5 {
    text-align: left;
    padding: .2em;
}

.zocalodos {
    width: 55%;
    height: auto;
    align-self:flex-end;
    margin: .5em;
    box-sizing: border-box;
    
    
}

.verticaluno h4 {
    text-align: left;
    font-weight: 600;
    font-size: 1.1em;
    padding: .6em;
}

.verticaluno h5 {
    text-align: left;
    padding: .6em;
}

.ver {
    color: white;
    background-color: rgba(255, 82, 45, 1);
    width: 42%;
    border-radius: .5em;
    font-size: 1.1em;
    align-self: flex-end;
    margin: .5em;
    padding: .5em 1.6em;
}

.inputlabeldiez, .inputlabelonce, .inputlabeldoce {
    display: block;
    text-align: center;
    border-radius: .4em;
    background-color:rgba(255, 82, 45, .8);
    color: white;
    font-size: 1.2em;
    font-weight: 400;
    width: 93%;
    padding: .3em;
    margin: 0 2em .5em;
}

#activaronce ~ .desplegableonce {
    display: none;
    overflow: hidden;
} 

#activaronce:checked ~ .desplegableonce {
    display: block;
}

#activaronce {
    display: none;
}

#activaronce ~ .desplegableonce {
    display: none;
    overflow: hidden;
    padding: .3em;
}
#activaronce:checked ~ .desplegableonce {
    display: block;
}

#activardoce ~ .desplegabledoce {
    display: none;
    overflow: hidden;
} 

#activardoce:checked ~ .desplegabledoce {
    display: block;
}

#activardoce {
    display: none;
}

#activardoce ~ .desplegabledoce {
    display: none;
    overflow: hidden;
    padding: .3em;
}
#activardoce:checked ~ .desplegabledoce {
    display: block;
}