* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
}

body {
    background: rgb(22,65,127);
background: linear-gradient(0deg, rgba(22,65,127,1) 0%, rgba(81,151,181,1) 50%, rgba(255,255,255,1) 100%);
    font-family: 'Titillium Web', sans-serif;
}




/*----menu¨------*/



a {
    text-decoration: none;
    color: navy
}

a:hover {
    color: #5197b5;
}



#logo {
    display: block;
    margin: auto;
    background-color: none;
    width: 4em;
 }



header {

    background-color: #16417f;
    text-align: left;
    padding-left: .5em;
    padding-right: .5em;
    width: 100%;
    height: 3em;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 9999;
    box-shadow: 0 .05em .5em .05em rgba(0, 0, 0, 0.68);

}







.menu li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: .9em 1.5em;
    

}


.menu li a:hover {
    background-color: #5197b5;
    color: white;
    border-radius: 15px;
    padding: 0.5em 1em 0.5em 1em;
    font-weight: 600;
    

    

}


.contenedor {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;

}


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

#menudesplegable:not(:checked) + #hamburguesa,
#menudesplegable:checked + #hamburguesa + #menuabierto {
    display: flex;
}

#menudesplegable:checked + #hamburguesa,
#menudesplegable:not(:checked) + #hamburguesa + #menuabierto {
    display: none;
}



.menu {
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    flex-direction: column;
    padding-top: 2em;
    padding-bottom: 1em;
    width: 100%;
    position: fixed;
    right: 100%;
    top: 0;
    transition: all .5s ease;
    
}




#menudesplegable:checked + #hamburguesa + #menuabierto + .menu {
    left: 0;
    background-color: rgba(22, 65, 127, 0.83);
    width: 100%;
    margin-top: 3em;
    padding-top: .7em;
    box-shadow: 0 .5em .5em silver;
    transition: all .25s ease;
}

#menuabierto {color: white;}





/*----contenido------*/

main {
    margin: 3em 1.5em 2em 1.5em;
    padding: 1em 0 3em 0;
}


.rotulo {
    background: white;
    border-radius: 1em;
    padding: 1.4em;
    margin: 1em auto 1em auto;
    max-width: 40em;
    border: solid .08em #5197b5;
    text-align: center;
    
   
}

.rotulo img {
    width: 40%;
}


#info1 {
    font-size: 1em;
    line-height: 1.5em;
    padding: 1em 0 1em 0;
    color: #262626;
    text-align: left;
    margin-bottom: 2em;
}

#info2 {
    font-size: 1em;
    line-height: 1.5em;
    padding: 1em 0 1em 0;
    color: #262626;
    text-align: left;
}

img {
    max-width: 100%;
}



.objetivos {
    font-size: 1.2em;
    color: #16417f;
    text-align: left;
    padding-bottom: .5em;
    border-bottom: solid .03em #5197b5;
    align-self: flex-start;
    margin-bottom: 1em;
    align-items: center;
    
   
}


.rotulo i {
    padding-right: .4em;
    font-size: 1em;

   
}

span {
    font-weight: 700;
    margin-right: .2em;
}

/*-----integrantes-----*/

.jt85 {
   background: white;
    border-radius: 1em;
    padding: 1.4em;
    margin: 0 auto 1em auto;
    max-width: 40em;
    border: solid .08em #5197b5;
}


.jt85 i {
    padding-right: .4em;
    font-size: 1em;

   
}

.equipo {
    font-size: 1.1em;
    color: #16417f;
    text-align: left;
    padding-bottom: .5em;
    border-bottom: solid .03em #5197b5;
    align-self: flex-start;
    margin-bottom: 1em;
}

#nombres {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: 1em;
   
}



main .integrantes img {
    display: block;
    height: 7rem;
    border-radius: 50%;
    border: solid #5197b5 .16em;
    margin-bottom: .7em;
}


main .integrantes a {
    margin-bottom: 1em;
    color:#262626;
}



/*-----academicos-----*/



.datosacademicos li{
    margin-bottom: 2em;
}




#acade {
    font-size: 1em;
}



.logos {
 
    padding-top: 1em;
    font-size: 1em;
    color: #5197b5;

}


#imagenuba {
    width: 5em;
    height: auto;
    margin: .8em 0 .3em 0;
    

}

#mapa
{
    text-align: center;
    margin-top: 2em;
}
#imagenfadu {
    width: 9em;
    height: auto;
    margin: .8em 0 .3em 0;

}

#imagendgpc {
    width: 6em;
    height: auto;
    margin: .8em 0 .3em 0;

}

/*-------footer-----*/


footer {
    background-color: #262626;
    color: white;
}

footer p {
    margin: 0 auto 0 auto;
    width: 60em;
    max-width: 100%;
    padding: 2em;
    max-width: 
    text-align: left;
    font-size: .8em;

}





/*-------media-----*/

@media (min-width: 50em){
    
    header {
      padding-right: 4em;
        padding-left: 4em;
}

.integrantes {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
   
     }
     }



@media (min-width: 59em) {



    #menudesplegable,
    #menudesplegable:checked + #hamburguesa,
    #menudesplegable:not(:checked) + #hamburguesa,
    #menudesplegable:checked + #hamburguesa + #menuabierto,
    #menudesplegable:not(checked) + #hamburguesa + #menuabierto {
        display: none;
    }

    .contenedor {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-content: space-between;


    }

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

    }
    
    
     }