@charset "utf-8";


@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

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

body {
    background-color:white;
   
    
   } 

header {
    padding: 1em;
    margin: 1em;
    width: 15%; 
}
nav {
    justify-content:space-between;
    margin-right: 2em;
      width: 75%;
}

body nav ul li a {
    background-color: gainsboro;
    list-style: none;
    color: black;   
    padding: .7em;
    width: 100%;
    text-decoration: none;
    text-align: center;
    margin-top: 2em;
    margin-bottom: 1em;     
    font-family: "muli", sans-serif;
    font-size: 1.2em;
    border-radius: 1em;

}

ul li {
    padding: 1em;
    width: 4em;
    list-style: none;
    font-family: "muli", sans-serif;
    font-size: 1em;
}
ul {
    padding: .1em;
    }
h1 {
    margin: .5em;
    color: white;
    padding: .1em;  
    align-content: center;
    font-family: "muli", sans-serif;
    font-weight: bolder

}
p {
    color: black;   
    font-family: "muli", sans-serif;
    font-size: 1em;
    padding: .1em;
    margin: 1em;
 }  

h2 {
    color: white;
    background-color: rgb(3,102,53);
   font-family: "muli", sans-serif;
    padding: .5em;
    width: 10em;
    margin: .5em;
    align-content: center;
    font-weight:bold;
    border-radius: 1em;
    display: flex;
    justify-content: center
     }

footer{
    color: black;
    font-size: .75em;
    font-family: "muli", sans-serif;
     padding: 1em;
       background-color: darkseagreen;
    
}     

.personales{
     background-color: gainsboro;
    list-style: none;
    color:black;   
    font-size: 1em;
      padding: 1em;   
    width: 12em;
    font-family: "muli", sans-serif;   
    align-content: flex-start;
    text-decoration: none;
    border-radius: 1em;
       margin: 1em;
    
    
}


main img {
    padding: .2em;
    margin: 1em;
    }
    
div {
    margin 1em;
    font-size: 1em;
   
    border-radius: 1em;
    margin: 1em;
    font-size: .7em;
    padding: .5em;
    width: 70%
    
    
}
 

img {
    width: 22em;
    max-width: 150%;
    height: auto;
    align-items: center;
   
}

.map {
    width: 30em;
    margin: auto;
    max-width: 100%;
    height: auto;
   
}



    
a{
    color: black;
    list-style: none;
    text-decoration: none;
    
}


.botones{
   
    font-size: .9em;
    column-count: 2;
    
    
}
    
/* ----------- MEDIA DESKTOP --------- */



@media ( min-width: 30em ) {
    

        .foto {
               width: 50%;

    }
    
    #botones2{
    display: flex;
    justify-content:space-between;
    flex-direction: row;
    font-size: 1em;
    
        }
    body{
      width: 60%;
        margin: auto;
        
    }
    
    main{
        width: 60%;
        margin: auto;
        
       
        
    }
}