* {

    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    text-decoration: none;
    font-family: open sans, sans-serif;
    list-style: none;


}

a {
    color: #425657
}

/*----------INDEX-------*/

body {
    background-color: #ededed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

img {
    max-width: 100%;
}

header {
    background-color: #649b9d;
    margin: 0;
    padding: 1em;
    display: flex;
    justify-content: flex-end;
    position: fixed;
    width: 100%;
    height: 3em;
    z-index: 9999;
}

#abremenu {
    color: white;
}

#cierramenu {
    color: white;
}

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    display: none;
}

#menudesplegable:not(:checked) + #abremenu,
#menudesplegable:checked + #abremenu + #cierramenu {
    display: flex;
}

#menudesplegable:checked + #abremenu,
#menudesplegable:not(:checked) + #abremenu + #cierramenu {
    display: none;
}


.menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    margin: 0;
    position: fixed;
    top: 0;
    left: 105%;
    width: 30%;
    z-index: 9990;
    padding-top: 3em;
    transition: all .4s ease;
    box-shadow: 0 .5em .5em rgba(0, 0, 0, 0.55);
}

#menudesplegable:checked + #abremenu + #cierramenu + ul {
    left: 0;
  top: 0;
    background-color: rgba(100, 155, 157, .98);
    color: white;
    width: 100%;
    margin-top: 3em;
    padding-bottom: 1.5em;
    padding-top: 0;
    align-content: center;
    justify-content: center;
    align-items: center;

}

.menu li {
    display: block;
    width: 80%;
    text-align: center;
      border-bottom: solid white .05em;

}


#menuestilo {
    display: block;
    color: white;
    font-size: 1em;
    text-align: center;
    align-content: center;
    width: 100%;
    padding: 1em;
    padding: .7em 0 .7em 0;
    height: 3.1em
}

.menu li:last-child {
   
    border-bottom: none;
   
}


#menuestilo:hover {
    background-color: white;
    color: rgba(100, 155, 157, .98);
}


.encabezado {
    background-color: #d8ebe9;
    list-style: none;
    padding: 3em 1em 1em 1em;
    margin: 3em 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    align-content: center;
    text-align: center;
}


#avatar {
    width: 50%;
    border-radius: 100%;
    border: .2em;
    border-color: white;
    border-style: solid;
    margin: 0 auto;

}

#perfil {
    background-color: #649b9d;
    font-size: 1.4em;
    color: white;
    margin: .5em auto;
    padding: .5em 1em;
    font-family: poppins, opensans, sans-serif;
    font-weight: lighter;
    font-stretch: condensed;
    line-height: 1.2em;
}

.links {
    list-style: none;
    filter: grayscale();
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: .5em auto;
    padding: 0;

}


.links img {
    width: 2em;
    margin: 0 1em;
}


.milink {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin:0 2em;

}

.milink li {
    background-color:  #649b9d;
    margin: 2em .5em 0 .5em;
    width: 80%;
    text-align: center;
}

.milink li a {
    display: block;
    color: white;
    margin: 0;
    padding: .7em;
    }

.milink li a:hover {
    background-color: white;
    color: #649b9d;
}
    


h4 {
    list-style: none;
    font-size: 1.2em;
    padding-bottom: .3em;
    margin: 1.5em 1em 1em 1em;
    color: #649b9d;
    text-align: left;
    font-weight: 100;
    border-bottom: solid #649b9d .07em;
}

h3 {

    font-size: 1em;
    color: #649b9d;
    text-align: left;
    margin-bottom: .5em;
    border-bottom: solid #649b9d .07em;

}


/*----------MATERIAS-------*/

.materias {
    list-style: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    font-size: 1em;
    justify-content: center;
    align-content: center;
    margin: 1em;
    position: relative;
}



.niveluno {
    position: relative;
    background-color: #d8ebe9;
    margin: 0 1em 1em 1em;
    padding: 1em;

}


.niveldos {
    background-color: #bbe0dc;
    margin: 0 1em 1em 1em;
    padding: 1em;
    width: 60%;
}

.niveltres {
    background-color: #9bd9d3;
    margin: 0 1em 1em 1em;
    padding: 1em;
    width: 60%;
}

#equipo {
    background-color: #d8ebe9;
    padding: 1em;
    margin: 0 1em 1em 1em;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    text-align: center;
}

#equipo li{
   display: block;
    text-align: center;
    font-size: .9em;
    font-weight: lighter;
    margin: .7em;
    width: 10em;
}




.fotoequipo {
    filter: grayscale();
    border-radius: 100%;
    border: .2em;
    border-style: solid;
    border-color: white;
    height: 7em;
    margin: .5em auto 1em auto;
    display: block;
}



#datosacademicos {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    font-size: 1em;
    margin: 1em;
    text-align: center;
}


h5 {
    list-style: none;
    font-size: .8em;
    font-weight: bold;
    text-align: left;
    margin: 0 0 .5em 1.2em;
    text-align: left;
}

.pacademica {
    list-style: none;
    text-align: center;
    font-size: .8em;
    text-align: left;
    margin-left: 1.2em;
}

#imgacademica {
    max-width: 100%;
    max-height: 2.6em;

}


#uba {
    list-style: none;
    border: solid#9bd9d3 .08em;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 1em;
}


#fadu {
    list-style: none;
    border: solid#9bd9d3 .08em;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 1em;
    padding: 1em;
}


#dgpc {
    list-style: none;
    border: solid#9bd9d3 .08em;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 1em 0 2em 0;
    padding: 1em;
}

footer {
    background-color: #dddddd;
    padding: 2.5em;
    font-size: .7em;
    align-self: flex-end;
    
}






/*----------PLAN-------*/


#linkmapaplan {
    margin: 3em;
    margin-bottom: 0;
}

.miplan {
    list-style: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-evenly;

}


#h1plan {
    border: .08em;
    border-bottom-style: solid;
    border-bottom-color: #649b9d;
    font-size: 1.6em;
    color: #649b9d;
    margin: 0 1em 1em 1em;
    font-family: opensans, sans-serif;
    font-weight: lighter;
    font-size: 1.4em;

}

.planmain {
    background-color: #deebea;
    margin: 0 1em 1em 1em;
    padding: 2em 1em 1.5em 1em;
    list-style: none;
    font-size: 1em;
    margin: .8em 1em 1em 1em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}



.cuerpoplan {
    list-style: none;
    display: flex;
    flex-direction: column;
    font-size: 1em;

}

h7 {
    list-style: none;
    font-size: 1.3em;
    padding: .5em;
    color: #649b9d;
    text-align: left;
    font-weight: bold;

}

.funcionesprincipales {
    list-style: none;
    background-color: #bbe0dc;
    margin: 1em 0;
    padding: .6em 1em;
    max-width: 100%;
}

.usuario {
    list-style: none;
    background-color: #9bd9d3;
    margin-bottom: 1em;
    padding: .6em 1em;
    max-width: 100%
}


#pplan {
    margin: .5em .5em 1.3em 1em;
    padding: 1.3em 1em 1.3em 0;
    font-size: .9em;
    font-family: open sans, sans-serif;
    line-height: 1.3em;
    text-align: left;
    border-bottom: solid #649b9d .07em;
    border-top: solid #649b9d .07em;

}

.listado {
    list-style: circle;
    padding: 0 0 .7em 1em;
    font-size: .9em;
    margin: .8em 0 .5em 0;
    font-weight: 400;
    text-align: left;

}

.cuerpoplan ul li {
    list-style: circle;
}


/*----------MAPA-------*/


#mapa {
    width: 23em;
}

#mapados {
    width: 40%;
}

h8 {
    font-size: 1em;
    color: #649b9d;
    text-align: left;
    margin: 1em;
    font-weight: bold;
}

.pantallas {
    background-color: #bbe0dc;
    padding: 2em 1em;
    display: flex;
    flex-direction: column;
    list-style: none;
    font-size: 1em;
    margin: .8em 1em 1em 1em;
    box-sizing: border-box;
}

.pantallaclass {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
    align-items: center;
}


.pantallas ul li {
    width: 13em;
    margin: .3em 0 0 0;
    padding: .3em 0 0 0;
    display: flex;
    flex-direction: column;
}


@media (min-width: 30em) {

    #avatar {
        width: 14em;
    }

    .milink li {
        width: 10em;
    }

    .materias {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        margin: 0 5em 0 5em;
    }

    .niveluno {
        margin: .5em .5em .5em .5em;
        padding: 1em;
        width: 16em;
    }

    .niveldos {
        margin: .5em .5em .5em .5em;
        padding: 1em;
        width: 16em;
    }

    .niveltres {
        margin: .5em .5em .5em .5em;
        padding: 1em;
        width: 16em;
    }

    #equipo {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        font-size: 1em;
        text-align: center;
    }

    .cuerpoplan {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        font-size: 1em;
        text-align: center;

    }

    .funcionesprincipales {
        margin: 1em 1em 1em 0;
        padding: .6em 1em .6em 1em;
        max-width: 20em
    }

    .usuario {
        margin: 1em 1em 1em 0;
        padding: .6em 1em .6em 1em;
        max-width: 20em
    }


    #pplan {
        max-width: 28em;
        padding: 1em;
        margin: 0;

    }

    .pantallas ul li {
        width: 13em;
        margin: .3em 1em 0 1em;
        padding: .3em 0 0 0;


    }

    .pantallaclass {
        flex-direction: row;

    }
    
    }

@media (min-width: 37em) {
    
#menudesplegable,
    #menudesplegable:checked + #abremenu,
    #menudesplegable:not(:checked) + #abremenu,
    #menudesplegable:checked + #abremenu + #cierramenu,
    #menudesplegable:not(checked) + #abremenu + #cierramenu {
        display: none;
    }

    header nav {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
          }

    .menu {
        left: 0;
        right: 0;
        top: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
         align-items: center;
        width: 30em;
        height: 3em;
        margin: 0 auto 0 auto;
        padding: 0;
        transition: none;
        box-shadow: none;

    }
    
    .menu li {
      border-bottom: none;

}
    
        .menu li a {
            border: none;

}
    

    
   
    
  
}