@charset utf-8;
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Unica+One);
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* EQUIPO */

* {
margin: 0;
padding: 0;
width: 100%;
}

body {
margin: 0;
padding: 0;
width: 100%;
}

header {
height: 25pt;
width: 100%;
font-family: 'Unica One', sans-serif;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: white;
background-color: black;
}

header nav {
width: 80%;
display: flex;
flex-direction: row;
justify-content: space-around;
}


.areaportada {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: 'Unica One', sans-serif;
}

.portada h1 {
font-size: 30pt;
margin-top: 25pt;
margin-bottom: 0;
}

.portada h2 {
margin: 0;
}

.flechaabajo {
height: 30pt;
margin: 0;
}

.flechaabajo img {
max-height: 100%;
}

.rotulo {
background-color: #33a8f2;
color: white;
font-family: 'Unica One', sans-serif;
display: flex;
justify-content: center;
flex-direction: column;
width: 100%;
align-items: center;
height: 120pt;
margin-top: 20pt;
}

.rotulo p{
width: 60%;
text-align: center;
font-family: 'Unica One', sans-serif;
max-width: 60%;
margin-top: 10pt;
margin-bottom: 0;
}

.fotos {
margin-top: 0;
width: 100%;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.fotoequipo {
width: 100%;
height: 200pt;
display: flex;
justify-content: center;
align-items: center;
background-size: cover;
background-position: 50% 50%;
background-attachment: fixed;
background-repeat: no-repeat;
}

.nombrealumno {
background-color: #33a8f2;
color: white;
font-family: 'Unica One', sans-serif;
font-size: 20pt;
width: 60%;
}

#menta{
background-image: url(fotomenta.png)
}

a {
text-decoration: none;
color: inherit;
}

#briza {
background-image: url(fotobriza.png);
}

#ale {
background-image: url(fotoale.jpg);
}

#santi {
background-image: url(fotosanti.png);
}

footer {
background-color: black;
width: 100%;
height: 40pt;
display: flex;
justify-content: flex-end;
align-items: center;
margin: 0;
padding: 0;
}


.disclaimer {
width: 80%;
font-size: 6pt;
color: #afafaf;
text-align: right;
}

.arriba {
width: 20%;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}

.flechaarriba {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
}

.flechaarriba img{
height: 100%;
margin: 0;
padding: 0;
}

/* CARTA */

.carta {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 10pt;
}

.textocarta {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
}

.textocarta h1 {
font-family: 'Unica One', sans-serif;
margin: 0;
font-size: 16pt;
}

.textocarta p {
width: 90%;
text-align: center;
font-family: 'Unica One', sans-serif;
max-width: 60%;
margin: 0;
margin-top: 5pt;
margin-bottom: 5pt;
}

.imagenpromo {
margin-top: 40pt;
width: 100%;
height: 300pt;
background-image: url(tostado.jpg);
background-size: cover;
background-position: 50% 50%;
background-attachment: fixed;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}

#logopromo {
width: 60%;
}

img{
max-width: 100%;
} 

/* MAPA */

.areamapa {
font-family: 'Unica One', sans-serif;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: 20pt;
margin-bottom: 40pt;
} 

figcaption {
background-color: #33a8f2;
color: white;
padding-left: 10pt;
padding-right: 10pt;
}

.nivel1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20pt;
}

.separador {
width: 80%;
height: 1pt;
background-color: #afafaf;
}

.paginamapa {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 8pt;
}

.paginamapa h3 {
font-size: 8pt;
margin: 0;
}

.paginamapa h4 {
font-size: 6pt;
margin: 0;
}

.paginita {
width: 40pt;
}

.nivel2 {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
flex-wrap: wrap;
}

#nivelapp {
font-family: 'Unica One', sans-serif;
margin-bottom: 40pt;
}


/* ESCRITORIO */
@media all and (min-width: 768px) {

/* EQUIPO */
 
    header {
    height: 40pt;
    font-size: 16pt
    }
    
    .areaportada {
    margin-bottom: 20pt;
    }
    
    .rotulo {
    width: 20%;
    font-size: 10pt;
    height: 100%;
    margin: 0;
    text-align: left;
    }
    
    .rotulo p {
    text-align: left;
    }
    
    .areaequipo {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 300pt;
    }
    
    .fotos {
    flex-direction: row;
    height: 100%;
    }
    
    .fotoequipo {
    height: 100%;
    background-size: cover;
background-position: 50%;
background-attachment: local;
background-repeat: no-repeat;

    }
    
    .disclaimer {
    font-size: 6pt;
    width: 80%;
    text-align: left;
    }
    
    .disclaimer p {
    width: 40%;
    margin-left: 10pt;
    }
    
    
    .footer {
    justify-content: space-around;
    }
    
    .arriba {
    margin-right: 10pt;
    }
    
/* CARTA */    
    
    #logopromo {
    width: 40%;
    }
    
    .imagenpromo {
    height: 400pt;
    }
    
    .textocarta p {
    width: 40%;  
    margin-top: 10pt;
    
    }
}