/* HOJA DE ESTILOS */

body{
   width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color:777575;
    margin: auto;
    text-align: center;
    background: rgba(94, 251, 223, 0.23);
}
botonera ul {
    
}
    nav ul li   {font-size: 20px}
.barra ul li {
    list-style-type: none;
    background-color: #AF5DEF;
    width: auto;
    padding: 10px;
    display: inline-block;
    margin-top: 15px;
    border-radius: 2px;
    transition: all .2s ease;
    }
p{ color: 777575}
ul{list-style: none}

h1{ font-size: 36px}
h2{font-size: 16px}
h3{ font-size: 18px}
ul{font-size: 16px}


.logos { display: flex;
    flex-direction: row;
justify-content: space-between;}

.logo{ display: flex;
flex-direction: column;
max-width:30%;
align-items: center;
font-size: 20px;
padding-top: 30px}

.logo img{ max-width: 40%;
align-items: center;
}

footer{ font-size: 12px;
max-width: 500px;
margin: auto;
margin-top: 35px;}

.materias {display: flex;
flex-direction: row;
justify-content: space-around}

.foto{height: 150px;
width: 150px;
border-radius: 50%;
margin-top: 10px;
margin-right: 15;}

.ppio {display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 30px
    
}
.texto { max-width: 300px;}

/* plan */
.objetivos { margin: auto;
max-width: 60%;}

/* mapa */
.mapa {display: flex;
    flex-direction: row;}
.mapa2 {display: flex;
    flex-direction: column;
}
 .mapa3{max-width: 50%}

.contenedortexto{ max-width: 600px;
margin: auto;}

@media (max-width: 768px) /* media del responsive*/{
    .ppio {display: flex;
    flex-direction: column;
    padding-bottom: 30px}
    
    .foto{height: 300px;
width: 300px;
border-radius: 50%;
margin-top: 30px;}
    
 .texto { max-width: 500px;
    margin: auto;} 
    
.logos { display: flex;
    flex-direction: column;
    margin: auto;
    width: 80%;}
    
    .logo{ display: flex;
flex-direction: column;
max-width:80%;
margin: auto;
        justify-content: space-between;
font-size: 16px;
padding-top: 30px}
    .fotol{ height: 100px}

    .fotol1{ height: 70px}
    
.materias {display: flex;
flex-direction: column;
justify-content: space-around;
    margin: auto;
    width: 80%}
    
    .mapa {display: flex;
    flex-direction: column;
    margin: auto;}
.mapa2 {display: flex;
    flex-direction: column;
    margin: auto;
}

    footer{ font-size: 10px;
max-width:90%;
margin: auto;
margin-top: 35px;}
  
    .barra ul li {
    list-style-type: none;
    background-color: #AF5DEF;
    padding: 10px;
    width: auto;
    display: inline-block;
    margin-top: 15px;
    border-radius: 5px;
    transition: all .2s ease;
    }
      .mapa3{max-width: 90%}
}