@charset "utf-8";
    
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap');

*{
    font: 16px Roboto, sans-serif;
    color:#2f2f2f;
    text-decoration: none;
    box-sizing:border-box;
    list-style: none;
}

.informacion i{
    
  position: relative;
  top: 5px;
  left: 5px;
    margin-left: 6px;
    margin-right: 16px;
    color:white;

}


body {
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #ffffff;
    padding: 0em;
    margin: 0em;
    
}

#logo {
    display: block;
    margin-left: 1em;
    width: 6em;
    padding:  .5em;
    
}



/* Menu */

label {
    
    background-color: rgba(71, 148, 198, 0.54);
    margin-right: 1.5em; 

    
}

#menu i {
         color: white;
       
}
#menu #ocultamenu {
    
    position: fixed;
    right: 0px;
    top: 1em;
    background: ;

}

header .contenedor {
    
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3em;
    padding-top: .8em;
    padding-bottom: .5em;
    box-shadow: .2em .2em 1em rgba(47, 47, 47, 0.31);
    background-color: #1f6b9d;
    

}

#menu ul {
    
    padding-left: 0em;
}

#menu hr {
    
    border: 1px solid rgba(255, 255, 255, 0.41);
    margin-left: 1.5em;
    margin-right: 2em;
}

#menu ul li a {
     
    font: 20px Roboto, sans-serif;
    font-weight: 550;
    color:#ffffff;
    display: flex;
    justify-content: flex-end;
    padding: 1em 2em 1em;

    font-size: 20px;
    text-shadow: 2px 2px 4px rgba(47, 47, 47, 0.49);

   
}
#menu ul li a:hover{ 
    
    background-color: rgba(16, 89, 137, 0.38);   
}


/* Despliegue - Menu */

header nav ul {
   
    position: fixed;
    left: 100%;
    bottom: -1em;
    height: 100vh;
    width: 50%;
    z-index: 9990;
    padding-top: 7em;
    transition: all .5s ease;
    background: rgba(71, 148, 198, 0.74);
}

#menu-toggle:checked + #llamamenu + #ocultamenu + ul {
    left: 50%;
    transition: all .25s ease;
}

/* Propiedades - Llama Menu */

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

header nav label {
    cursor: pointer;
    padding:   .8em 1em .8em 1em ;
    position: relative;
    z-index: 9999;
}


#menu-toggle:not(:checked) + #llamamenu,
#menu-toggle:checked + #llamamenu + #ocultamenu {
    display: flex;
}


#menu-toggle:checked + #llamamenu,
#menu-toggle:not(:checked) + #llamamenu + #ocultamenu {
    display: none;
}
  







main {
    flex-grow: 1;
}

h1 {
    font:32px Roboto, sans-serif;
    font-weight: 550;
    color:#2f2f2f;
    text-align: center;
    margin-bottom: 1.5em;
}
h2 {
  
    font:20px Roboto, sans-serif;
    font-weight: 580;
    color: #ffffff;
    background-color: #2a7aaf;
    padding: 0.2em;
    padding-bottom: 0.5em;
    border-radius: 13px;
}

h3 {
    font: 16px Roboto, sans-serif;
    font-weight: 540;
    color: #1f6b9d
    
}



section {
    margin: auto;
    margin-bottom: 3em;
    margin-top: 2.5em;
    background: linear-gradient(white 8%, #ddedf8);
    background-color: ;
    text-align: left;
    max-width: 40em;
    padding: 2em; 
}

section .perfil {
    
    margin-bottom: 4em;
}

section div > img {
    
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width:100%;
    height:auto;
    border-radius: 10em;
    border: .3em solid rgba(47, 47, 47, 0.41);
    box-shadow: .1em .4em 1em rgba(47, 47, 47, 0.42);
}

section a {
    color: #4a4a4a;
    font-weight: 550;

}

section a:hover {
    color:#4794c6;

}

.compañeros ul li, .propuesta ul li {
    margin-bottom: .5em;
    margin-left: -2em;
}


section #datos {
    margin-bottom: 2em
}

section #materias {
    margin-bottom: 2em
}


footer {

    text-align: center;
    margin-top: 5em;
    padding: 2em;
    background-color: #8bc3e6;
    
}

footer img {
    
    margin: 1em;

}

footer * {
    
    margin: auto;
    max-width: 100%;
    font-weight: 100;
    font-size: 14px;
    
}

footer #legales {
    
    margin-top: 2em;

}







@media (min-width: 60em) {
    

    #menu-toggle,
    #menu-toggle:checked + #llamamenu,
    #menu-toggle:not(:checked) + #llamamenu,
    #menu-toggle:checked + #llamamenu + #ocultamenu,
    #menu-toggle:not(checked) + #llamamenu + #ocultamenu ,hr {
        display: none;
    }
    
    #menu-toggle:not(:checked) + #llamamenu + #ocultamenu + ul,
    #menu-toggle:checked + #llamamenu + #ocultamenu + ul {
        display: flex;
        flex-wrap: wrap;
        background: none;
        position: relative;
        top: auto;
        left: auto;
        height: auto;
        width: 100%;
        padding-top: 0;
    }
    
    
    header nav {
        margin: auto;
        padding-bottom: 2em;

    }
    


   
    #menu ul li a {

    padding-right: 2.5em;
    padding-left: 2.5em;
    padding-top: .5em;
    padding-bottom: .5em;
    background-color: rgba(71, 148, 198, 0.54);
    text-shadow: none;
        
    }
    
   
}