* {
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
a {
    text-decoration: none;
    color: inherit;
}
header {
    display: flex;
    justify-content: space-between;
    margin: 1em;
    text-align: center;
    align-items: center;
}
header img {
    height: 3em;
    width: auto;
}
.contenedor{
    width: 60em;
    margin: 0 auto;
    padding: 1em;
    display: flex;
    flex-wrap: wrap;
}
nav {
    display: flex;
    width: 100%;
}
nav a {
    width: 33.3%;
    text-align: center;
    list-style: none;
}
nav div:hover{
    background-color: #87d8fc;
    color: white;
}
.alumnos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.alumno {
    margin: 1em;
}
.alumno, .card{
    width: 25em;
    height: 12em;
}
.card {
    position: relative;
}
.dorso {
    width: 23em;
    height: 10em;
    background-color: #87d8fc;
    position: absolute;
    top: 1.4em;
    left: 1.4em;
    filter: blur(1em);
    z-index: -1;
}
.frente {
    width: 25em;
    height: 12em;
    background-color: white;
    border-radius: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.frente:hover{
    background-color: #87d8fc
}
.informacion {
    display: flex;
    align-items: center;
    
}
.informacion img {
    height: 9em;
    margin: 1em;
}
footer {
    margin: 1em 0 1em 0;
}
footer p{
    font-size: .7em;
    text-align: center;
}

.seccion {
    margin-top: 1em;
    font-weight: bold;
    font-size: 1.5em;
    color: #87d8fc;
    margin-left: 1em;
}
hr:last-of-type {
    margin: .5em 0;
}
.paquetex {
    background-color: #87d8fc;
    color: white;
    margin-top: 1em;
}
.paquete {
    padding: 1em;
    border-radius: 1em;
}
.titulo {
    font-size: 1.5em;
    margin-bottom: .5em;
}
.navdiv {
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contenedorr {
    width: 60em;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.contenedorr img {
    width: 40em;
}
.baner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 1em;
}


@media (max-width:45em) {
header img {
    width: 5em;
}
header h1 {
    font-size: 1em;
}
.contenedor{
        width: 100%;
    }
    .contenedorr{
        width: 100vw;
    }
    .scroll {
        width: 23em;
        overflow: scroll;
    }
    .mapa{
        width: 5em;
    }
nav {
    width: 100%;
}
.alumnos {
        width: 100%;
    }
.alumno, .card{
        width: 100%;
    }
.frente {
        width: 20em;
    }
.dorso {
        width: 18em;
    }
footer {
        margin: 0em .5em .5em .5em
    } 
    }