@charset "utf-8";

*{margin: 4; padding: 0;}

html{
    height: 100%}

body {
   
   font-family: 'Open Sans', sans-serif;;
    color: white;
    background-color: black;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
   text-align: center; 
    max-width: 100%;
    
    }



.barra{list-style:none;
    background:#F1FFF8;padding: 20px 5px; margin: 0px;
   display: flex;
    justify-content: center; align-items: center
        }


.barra li {display: flex; display: inline-block; flex-wrap: wrap; justify-content: center
    
   
}
.barra li a {padding: 0px;margin:0px 30px; display: inline-block; color: black;text-decoration: none; width: 100%; height: 100%;
;font-size:15px; display: flex; font-weight: bold; }

.barra li a:hover {color:gray; }

 header div img{   margin:  20px 585px;  }
.avatar { display: flex; flex-wrap: wrap; justify-content: center;}


h2{background-color: azure;color:black; width: 8em; text-align:center;padding: 5px 0px;  display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto;}

h1{font-size: 45px;text-align: center; }





main {display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column;  align-content: center; flex-grow: 1 }

main p{text-align: center; display: flex; flex-wrap: wrap; justify-content: center;}

.comision{ }


.grupo{; display:inline-block; list-style:none;padding: 10px; margin: 0px; flex-wrap: wrap; justify-content: center;}
.grupo li{ display: flex; 
    display:inline-flex;
justify-content: space-between;
flex-direction: row;
    list-style: none;}

.grupo li a{padding: 20px 20px;;text-align: center; display:inline-block; flex-wrap: wrap; justify-content: center; color:gainsboro; text-decoration: none; font-size: 20px; }
.grupo h4{text-align: center; }


.materias { padding: 40px 0; margin: 0 30px  }

.materias h4{background-color: azure;color: darkslategray; width: 12em; text-align:center;padding: 5px 0px;   display:flex; flex-wrap: wrap; justify-content: center; margin: auto; border-radius: 20px} 



.materias ul li{text-align: center; list-style:none; display: flex; flex-wrap: wrap; justify-content: center;}



footer{
    background-color:darkslategray;
    padding: 1em;
    margin: 2em 0 0 0;
   
    }

footer img{ width: 20%; display: flex; flex-wrap: wrap; justify-content: center; margin: auto}

footer p{
    font-size: 0.7em;
    text-align: center;
    margin: 1em;
}





/* reglas de mapa.html */

.menu{list-style:none;
    background:#F1FFF8;padding: 20px 5px; margin: 0px;
   display: flex;
    justify-content: center; flex-wrap: wrap; align-items: center
        }


.menu li {display: flex; display: inline-block; flex-wrap: wrap; justify-content: center
    
   
}
.menu li a {padding: 0px;margin:0px 30px; display: inline-block; color: black;text-decoration: none; width: 100%; height: 100%;
;font-size:15px; display: flex; font-weight: bold; }

.menu li a:hover {color:gray; }
    

.mapa img  {display: flex; flex-wrap: wrap; justify-content: center; margin: auto; padding: 2em; max-width: 100%; height: auto}



/* reglas de plan.html */
.persona img { max-width: 100%}
.pilar img { max-width: 100%}
.rocio img { max-width: 100%}
.flor img { max-width: 100%}
.flor vicky { max-width: 100%}

@media screen and (max-width:1100px) {
    
    .barra li a {padding: 0px;margin:0px 15px;  }