* {
    margin: 0em;
    padding: 0em;
    box-sizing: border-box;
}


/*-----------Body--------------*/

body {
    background-color: rgba(221, 218, 221, 0.58);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*-----------Navegación--------------*/


header {

    background-color: rgba(57, 0, 37, 0.24);
    font-family: 'Lato', sans-serif;
    font-size: 1.1em;
}


.barra {
    display: flex;
    padding: 1rem;
    align-items: center;
    height: 4em;
}

.barra nav {
    width: 100%;
}


.barra nav ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    justify-content: space-evenly;

}

.barra nav ul li {
    background-color: rgba(128, 35, 95, 0.2);
    flex-basis: 18%;
    text-align: center;
    box-shadow: .08em .08em rgba(0, 0, 0, 0.2);
}


.barra nav ul li a {
    display: block;
    color: black;
    padding: .3em;
    text-decoration: none;
}

.escudopadilla {
    height: 100%;
    width: auto;
}


/*----------------Paloma D'Urbano--------------*/


.avatar {
    max-width: 100%;
    height: auto;
    border-radius: 5em;
    margin: 2.6em auto -1em auto;
    display: block;
}

.titulo {
    font-family: 'Poppins', sans-serif;
    color: rgba(57, 0, 37, 0.87);
    text-align: center;
    font-size: 3em;
    line-height: 1em;
    text-transform: uppercase;
    max-width: 100%;
    margin-bottom: 0.5em;
    margin-top: 1em;
}

.informacion {
    max-width: 80%;
    font-family: 'Lato', sans-serif;
    font-size: 1em;
    color: rgba(47, 47, 47, 0.87);
    text-align: center;
    padding-bottom: 1.3em;
    margin: -1em auto 0em auto;

}

.individual {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    list-style: none;
    max-width: 80%;
    margin: auto;
}

.individual li {
    background-color: rgba(128, 35, 95, 0.2);
    text-align: center;
    flex-grow: 1;
    margin: .5em .5em;
    box-shadow: .1em .15em .2em rgba(0, 0, 0, 0.2);
}

.individual li a {
    display: block;
    font-family: 'Lato', sans-serif;
    color: rgba(47, 47, 47, 0.87);
    font-size: 1.2em;
    text-decoration: none;
    padding: .4em;
}



/*----------------Materias--------------*/

.titulodos {
    max-width: 80%;
    margin: auto;
    font-family: 'poppins', sans-serif;
    font-size: 1.5em;
    text-align: center;
    padding: 1em 0em 0em 0em;
    color: rgba(57, 0, 37, 0.87);
    text-transform: uppercase;
    border-bottom: .05em solid rgba(57, 0, 37, 0.87);
    line-height: 1.2em;

}


.materias,
.porcentaje,
.aprobadas {
    text-align: center;
    background-color: rgba(214, 51, 156, 0.12);
    width: 80%;
    font-family: 'Lato', sans-serif;
    color: rgba(47, 47, 47, 0.87);
    font-size: 1em;
    list-style: none;
    line-height: 1.5em;
    margin: 1em auto;
    padding: 1rem;
    font-size: 1em;
}



/*----------------Grupo VM81--------------*/


.grupo {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    list-style: none;
    max-width: 80%;
    margin: 1em auto;
}

.grupo li {
    background-color: rgba(128, 35, 95, 0.2);
    text-align: center;
    margin: .5em auto;
    min-width: 100%;
    box-shadow: .1em .15em .2em rgba(0, 0, 0, 0.2);
}


.grupo li a {
    display: block;
    font-family: 'Lato', sans-serif;
    color: rgba(47, 47, 47, 0.87);
    font-size: 1.2em;
    text-decoration: none;
    padding: .6em;
}




/*----------------Club Padilla--------------*/

.padilla {
    max-width: 80%;
    margin: 1em auto;
    font-family: 'Lato', sans-serif;
    color: rgba(47, 47, 47, 0.87);
    font-size: 1em;
    text-align: center;
}

.escudo {
    max-width: 100%;
    height: auto;
    margin: 1.5em auto;
    display: block;
}

/*----------------Datos Docentes--------------*/
.datosdocentes {
    margin: auto;
    text-align: center;
}

.dgpc {
    width: 17%;
    height: auto;
    margin-top: 1em;
}

.academico {
    list-style: none;
    font-family: 'Lato', sans-serif;
    color: rgba(47, 47, 47, 0.87);
    font-size: 1em;
    text-align: center;
    margin: -.8em auto 2em auto;
    max-width: 80%;
}

.titulotres {
    font-size: 1.4em;
    margin: 1em auto;
    font-family: 'Lato', sans-serif;
    color: rgba(47, 47, 47, 0.87);
    font-size: 1em;
    max-width: 80%;
}


/*----------------Plan--------------*/

.plan3 > .informacion {
    background-color: rgba(199, 195, 198, 0.62);
    padding: 2em;
    margin-top: 1em;
    font-size: 1.2em;
    line-height: 1.3em;
    text-align: center;
    max-width: 75%;
}

.webapp {
    margin-bottom: 4em;
}

.webapp .usuario a {
    color: rgba(47, 47, 47, 0.87);
    text-decoration: underline;
}

.secciones,
.objetivos,
.usuario {
    list-style: disc;
    font-family: 'Lato', sans-serif;
    color: rgba(47, 47, 47, 0.87);
    font-size: 1.2em;
    margin: auto;
    max-width: 80%;
    line-height: 1.6em;
}

span {
    color: black;
}


/*---------Mapa---------*/

#mapa3 {
    min-height: 100vh;
}

.mapa {
    max-width: 70%;
    height: auto;
    margin: 1.9em auto 0em auto;
    display: block;
}

/*- Prototipo--*/

.prototipocelular {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
     max-width: 80%;
    height: auto;
    margin: 1em auto;
}



/*- Prototipo--*/


.prototipocompu {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}


.prototipocompu > figure {
    max-width: 90%;
    height: auto;
    margin: 2em auto;
    flex-wrap: wrap;

}

figcaption {font-family: 'Lato', sans-serif;
    color: rgba(47, 47, 47, 0.87);
    font-size: 1em;}


/*----------------Footer--------------*/

footer {
    font-family: 'Lato', sans-serif;
    color: rgba(10, 10, 10, 0.87);
    background-color: rgba(57, 0, 37, 0.24);
    width: 100%;
    font-size: 0.8em;
    font-style: normal;
    text-align: center;
    padding: 1.3em;
}

/*-----------*/

a:hover {
    background-color: #ffffff;
    color: rgba(172, 5, 113, 0.87);
}

img {
    max-width: 100%;
    height: auto;
}






/* MEDIA QUERIES */


@media (max-width:17em) {

    .titulo,
    .titulo2 {
        max-width: 100%;
        font-size: 2em;
    }

}

 @media (max-width:25em) {
    .escudopadilla {margin-right: .5em;}

}

  
    .secciones,
    .objetivos,
    .usuario {
        font-size: 1em;
    }

.escudo {max-width: 40%;}

/* MEDIA QUERIES */


@media (min-width: 30em) {

    .prototipocelular {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }


    .prototipocelular > figure {
        max-width: 80%;
        height: auto;
        margin: 1em auto;
        flex-wrap: wrap;
    }



    header {
        font-size: 1.3em;
    }

    .barra nav ul li {
        flex-basis: 22%;
    }


    .titulo {
        max-width: 60%;
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: 3.5em;
    }


    .titulodos {
        font-size: 1.7em;
    }

    .titulotres {
        font-size: 1.2em;
    }

    .individual {
        max-width: 88%;
        padding: .6em;
        margin-top: 0em;
    }

    .individual li {
        width: 45%;
        font-size: 1.1em;
    }

    .grupo li a {
        font-size: 1.3em;
    }


    .informacion,
    .padilla,
    .materias,
    .academico,
    .aprobadas,
    .porcentaje
    {
        font-size: 1.1em;
    }

    
    .secciones,
    .objetivos,
    .usuario {
        font-size: 1em;
    }
    
    
    .materias {
        padding: 1.2em;
    }


    

    footer p {
        font-size: 1.1em;
    }

}


/* MEDIA QUERIES */

@media (min-width: 50em) {

    .escudo {max-width: 40%;}

    .prototipocelular {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }


    .prototipocelular > figure {
        max-width: 45%;
        height: auto;
        margin: 1em auto;
        flex-wrap: wrap;
    }

    .plan3 > .informacion {
        max-width: 70%;
    }


    .titulo {
        max-width: 70%;
    }

    .titulodos {
        font-size: 1.9em;
        max-width: 70%;

    }

    .titulotres {
        font-size: 1.3em;
        max-width: 70%;
    }


    .individual {
        max-width: 65%;
    }

    .grupo {
        max-width: 60%;
    }


    .informacion,
    .padilla,
    .materias,
    .porcentaje,
    .aprobadas,
    .academico,
    .secciones,
    .objetivos,
    .usuario {
        font-size: 1.15em;
        max-width: 60%;
    }


    footer p {
        max-width: 80%;
        display: block;
        text-align: center;
        margin: auto;
    }

}


/* MEDIA QUERIES */


@media (min-width: 69em) {

    header {
        font-size: 1.4em;
    }

    .individual {
        max-width: 50%;
    }

    .titulo {}

    .titulodos {
        max-width: 65%;

    }

    .informacion,
    .materias,
    .porcentaje,
    .aprobadas,
    .titulodos,
    .titulotres,
    .padilla,
    .secciones,
    .objetivos,
    .usuario {
        max-width: 60%;
    }


    .grupo {
        flex-direction: row;
        flex-wrap: nowrap;
        width: 13.8%;
        justify-content: space-evenly;

    }

    .grupo li {
        margin: 1em .8em auto .8em;
    }


   

    .padilla {
        max-width: 60%;
    }


    .plan3 > .informacion {
        max-width: 60%;
    }
}