body {
    background-image:url(imagenes/fondo1.jpg);
    background-size: cover;
    height: 100%;
    font-family: Nunito;
    font-size: 100%;
    margin: auto;
        text-decoration: none;
}

#pagina {
    width: 50%;
    margin: auto;
    }

header  {
    background-image:url(imagenes/109.jpg);
    background-size: cover;
    height: 10rem;
    width: 100%;
    margin: auto 0;
    display: inline-block;
     text-decoration: none;
}

.logo {
    margin-top: 1rem;
    margin-left: 2rem;
    height: 8rem;

}

h1 {    
    font-size: 170%;
    margin-bottom: 3px;
}

nav {
    float: right;
    margin-top: 5%;
    margin-right: 11%;
     text-decoration: none;
    
}
.menu1 {
        float: right;
    text-decoration: none;
    text-align: center;
}

nav ul li {
    background-color: rgba(50,50,50,1);
    display: inline;
    margin: auto;
    padding: 1rem;
    	border-radius: 4px;
    height: 5px;
    padding-bottom: 0,5rem;
    color: white;
         text-decoration: none;

}

nav ul li:hover {
    background-color: crimson;
   color: white;
}

nav ul a {
    text-decoration: none;
    display: inline;
     width: 75px;
    color: white;
    
 }

hr {
 width: 80%;
    margin: auto;
}

#centro {
    background-color: crimson;
    width: 100%;
    overflow: auto;
}

#nombres {
    float: left;
    margin-top: 2rem;
    margin-left: 2rem;
        width: 40%;
        text-align: center;
    color: white;
    margin-bottom: 1.5rem;
}

#nombres a {
      text-decoration: none;
    margin: auto;
    font-size: 120%;
    color: white;
}

.daniel {
    	border-radius: 4px;
    background-image: url(imagenes/1.jpg);  
   -webkit-filter: grayscale(50%);   
    background-size: cover;
    background-position: center;
    padding: 2rem;
        text-align: center;
 }

.daniel:hover {
    background-image: url(imagenes/1.jpg);     
    -webkit-filter: grayscale(0%);    
}

.delfina {
    	border-radius: 4px;
    margin-top: 5%;
    background-image: url(imagenes/2.jpg);  
    background-size: cover;
    background-position: center;
   -webkit-filter: grayscale(50%); 
    padding: 2rem;
}

.delfina:hover { 
    background-image: url(imagenes/2.jpg);   
    -webkit-filter: grayscale(0%);  
    }

.francisco {
    	border-radius: 4px;
    margin-top: 5%;
    background-image: url(imagenes/3.jpg); 
   -webkit-filter: grayscale(50%); 
background-size: cover;
    background-position: center;
     padding: 2rem;
}


.francisco:hover {
    background-image: url(imagenes/3.jpg);   
    -webkit-filter: grayscale(0%);
}
    
.sabrina {
    	border-radius: 4px;
    margin-top: 5%;
    background-image: url(imagenes/4.jpg);
    background-size:cover;
    background-position: center;
   -webkit-filter: grayscale(50%);  
     padding: 2rem;
}

.sabrina:hover {
    background-image: url(imagenes/4.jpg);    
    -webkit-filter: grayscale(0%);     
}

#datos {
    margin-top: 1.2rem;
    position: relative;
    float: right;
    width: 45%;
    color: white;
    font-size: 45%;
    margin-right: 2rem;
    margin-left: 2rem;
}

#mapa {
    color: white;
 margin: auto;   
    text-align: center;
    
}

#mapa h1 {
 margin: auto;   
    
}

.linea {
    position: relative;
    clear: both;
    width: 60%;
}

footer {
    position: relative;
    margin-top: 80%;
    width: 100%;
    color: white;
    font-size: 80%;
    margin: auto;
}



@media screen and (max-width: 480px) {
    #pagina {
    width: 100%;
    }
    
    nav { 
        clear: both;
        margin: auto;
        width: 80%;
        margin-top: 1rem;
    }
    nav ul {
        width: 100%;
        height: auto;
    }
    
    nav ul li {
        width: 50%;
        margin-bottom: 0.5rem;
        float: left;
        vertical-align: middle;
        text-align: center;
        font-size: 0.7rem;
    }

    nav ul a {
       vertical-align: middle;
        text-align: center;
        width: 100%;
        
    }
    
     #centro { 
         vertical-align: middle;
         margin: auto;
        margin-top: 10rem;
        width: 100%;
         max-width: 100%;
    }
    
    #nombres {
    display: inline-block;
    position: absolute;
    margin: auto;
    text-align: center;
    color: white;
    font-size: 0.7rem;
        width: 100%;

    }
    
    #datos {
    display: inline-block;
        width: 100%;
    text-align: center;
    margin: auto;   
    position: absolute;
    margin-top: 25rem;
    color: white;
    font-size: 0.5rem;        
    }
    
    h1 {
        font-size: 150%;
        }
    
     h2 {
        font-size: 125%;
        }
    
    
    .linea {
    margin-top: 48rem;
    position: relative;
    clear: both;
}
        
    footer {
        width: 80%;
        font-size: 0.7rem;
        margin-top: 1rem;
    }
}