@charset "utf-8";

@font-face {
    font-family: 'Libre Franklin', sans-serif;}


* 
{ font-family: "Libre Franklin", sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    font-size: 1em=16px;
text-decoration: none;
list-style: none;}

    
    /*RÓTULO INDIVIDUAL*/


<-------->

header {
    height: 1.5em;
    margin: 0px;
    position: relative;
    z-index: 1;
}

.paquetemenu {
    background-color: #F2666F;
    top: 0;
    left: 0;
    width: 100%;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 3.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 1em;

}

#iconomenu {
    cursor: pointer;
    font-size: 1.8em;
    margin-left: 0.2em;

}

#menu {

    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    color: #394759;
    background-color: #F2666F;
    width: 200px;
    display: none;
    position: fixed;
    left: 0em;
    padding: 0px;
    top: 3em;
    margin: 0px;
}

#menudesktop {
    display: none;
}

.linknav {
    font-family: roboto;
    font-size: 14px;
    font-weight: 300;
}

.limenu {
    padding: 1em;
    display: flex;
    align-items: center;
    color: #394759;
}


.limenu:hover {
    background: #394759;
    color: #fff;
    transition: all 0.5s ease-out;   
}

.limenu a:hover {
    font-weight: 300i;
    font-size: 16px;
}




/* FIN MENU */

main 
{background-color: #CCC2BC; }


hr {height: 1em}


.estudiante 
{background-color: #F2666F; 
text-align: center;}


.estudiante img
{ border-radius: 50%;
    max-width: 100%;
    padding: 1em;}

h1 
{background-color: #394759; font-weight: 400; color:#F0F2F2; }


h1, h3 
{font-family: "roboto", sans-serif;}
    


h2, h3 {color: #394759;
font-weight: 400;
line-height: 2em;
padding-left: 20%}


h4 {font-weight: 600;
line-height: 1.5em;}


.materias h2, .secciones h2 
{ text-indent: 1.3em;}


.dgpc, .lomasdelmirador, .proyecto, .aprobado, .curso 
{padding: 1em 2em;}




.equipo, .secciones 
{background-color: #CCC2BC;
font-size: 0.9em;}


.equipo h3 
{padding: 0.3em}




.integrantestitulo, .equipo h3 
{background-color: #394759; color:#F0F2F2;  margin: 0; font-weight: 300}


.integrantestitulo 
{text-align: center; padding: 0.5em;}


.listado 
{background-color: #F2666F;
text-align: center; 
padding: 1em;}


.listado img
{border-radius: 50%;
    max-width: 100%;
    padding: 0.3em;}


.listado ul li 
{list-style: none; text-decoration: none; color:#394759}


.listado ul li a 
{list-style: none; text-decoration: none; color:#F0F2F2}


.listado ul li a:hover 
{ background-color: rgba(0,0,0,0.5);
    color: #F0F2F2;}

.dgpc 
{font-weight: 500;
    font-size: 0.8em;}


.materiadgpc 
{font-weight: 700;}




footer 
{background-color: #A68F8A; 
font-size: 0.7em;
padding: 1em;}


/*MAPA*/

.mapa 
{max-width: 100%;
    padding: 1em;}




/*PLAN*/

.escudo 
{max-width: 500px; 
display:block;
margin:auto;}

.tituloplan {padding: 1em; font-weight: 500}

.club p, .usuario p {padding: 1em 2em}

.secciones h4, .secciones p {padding: 0em 2em }

.titulousuario, .tituloclub, .titulosecciones, .tituloplan {background-color: #394759; color:#F0F2F2;  margin: 0; text-indent: 1em; padding: 0.5em;  font-weight: 300}


.celular img {
    width: 200px;
    height: auto;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
justify-content: space-between;}

.pc img {width: 50%; height: auto; margin: auto; padding: 1em; display: block;}



/*RESPONSIVE*/


@media (min-width: 35em) {
 


 .materiasresponsive {display: flex; flex-direction: row; justify-content: space-between; }
    
    .aprobado, .lomasdelmirador {
        width: 30%;
        margin-left: 20%   
    }
    
    .curso, .proyecto {
        width: 30%;
        margin-right: 20%
        
    }


@media (min-width: 45em) {
    .equiporesponsive {display: flex; flex-direction: row; justify-content: space-between}

}

/* INICIO HEADER NAV MENU RESPONSIVE */

@media (min-width:869px) {

    #iconomenu {
        display: none;
    }

    #menudesktop {

        display: flex;
        align-items: center;
        align-content: space-between;
        padding: 0px;
        font-size: 14px;
        height: 100%;
    }

    #menudesktop .limenu {
        padding: 1em;

    }

    #menudesktop .limenu:hover {
        background: #394759;
        height: 100%;
        color: #fff;
        transition: all 0.5s ease-out;
    font-size: 16px;
    }

    /* FIN HEADER NAV MENU RESPONSIVE */