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

body { font-family: 'Raleway', sans-serif;
    background-color: rgb(222, 222, 222);
    color:#707173;
    font-weight: 400;
   
}

#contenedor { width: 100%;
    
}

a {
    text-decoration: none;
    
}

header { display: flex;
            justify-content: space-between;
            align-items: center; 
    }

#arriba { display: flex;
              background-image: url(tumblr_nuj9zwCwCd1r6ljjno1_1280.jpg);
              width: 100%;
              align-content: center;
}
    
.menu { padding: 25px;
        margin-top: 35px;
}

.menu nav ul li a  { font-weight: 600;
    
}  

#boton {
    color:#ffffff;
    background-color: gray;
}  

li  {
    display: inline-block;
    margin: 0;
    padding: :60px 60px;
    color: #fff;
    
    
}
nav ul {
    list-style: none;
    border-radius:0px; 
}
nav ul li {
    margin-bottom: 0.5em;
}
nav ul li a {
    
    background-color: #fce5df;
    color: #58585a;
    padding: 10px 20px;
    display: block;
    width: 205px;
    border-radius:0px;
    border-bottom: solid #ffff 2px ;
    text-align: center;
    font-size: 15px;
    font-weight: 400
}
nav ul li a:hover {
    color:#ffffff;
    background-color: gray;
}
nav ul li a:active {
    color:#81878b;
    background-color: #818486;
    
}

#titulosobre { text-align: center;
               align-items: center;
               
       
}

#titulosobre p { font-weight: 500;
                 font-size: 115%;
                 margin-left: 18%;
                 margin-right: 18%;
    
}

h3 { font-size: 35px;
     text-align: center; 
     text-decoration: underline;
}


#contenedorgral { background-color: whitesmoke;
    max-width: 90%;   
    width: 90%;
    margin: auto;
    margin-top: 10px;
    align-items: center;
    text-align: center;
    
}

hr {
    
    background-color: #707173;
     height: 5px;
  margin-left: 8%;
  margin-right: 8%
}

.texto { padding: 30px;

}

.texto h4 {color: #73c7a8;
    font-weight: 800;
    text-decoration: underline;
    font-size: 120%
}


h5 { font-size: 170%;
     color: #efa28e;
     padding: 10px;
    
}
h6 { font-weight: 500;
     font-size: 120%;
     margin-left: 18%;
     margin-right: 18%; 
    
}
#rotulos {  display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            align-items: center;
            text-align: center;  
                
              }   
.responsive { align-items: center;
              margin: auto;
                        
    }
.responsive img { max-width: 250px;
           align-items: center;
        
    }
h4 a {color: #707173;
      font-weight: 700;
    
}
.iconos { justify-content: space-between;    
}

.iconos a {color: #707173;
    
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

footer { display: flex;
    background-color: #fce5df;
    text-align: center;
    margin-left: 30px;
    margin-right: 30px;
    align-items: center;
    
    }
footer img { max-width: 70px;
             margin-left: 20px;
    }
    
footer p { font-size: 8pt;
           align-items: center;
           text-align: center;
           margin-right: 20px;
}







@media only screen and (max-width: 18em){
    #arriba { display: flex;
                flex-wrap: wrap;
                align-items: center;
                }
    
    header { align-items: center;
    }  
    
    .menu { align-items: center;
            
    }
    
   #rotulos {  display: flex;
                flex-wrap: wrap;
                align-items: center;
                text-align: center; 
                margin: 0 auto;
              }
    
    .responsive { align-items: center;
                  padding: 9px;
                        
    }
    .img { max-width: 250px;
           align-items: center;
        
    }
    
    footer { display: none;
    }
}

@media only screen and (max-width: 30em){
    #arriba { display: flex;
                flex-wrap: wrap;
                align-items: center;
                }
    
    header { margin: auto;
             image-orientation: center;
            
    }  
    
    .menu { margin-left: auto;  
            text-align: center;
    }
    

     #rotulos {  display: flex;
                flex-wrap: wrap;
                align-items: center;
                text-align: center; 
                
              }
    
    .responsive { align-items: center;
                  margin: auto;
                        
    }
    .img { max-width: 250px;
           align-items: center;
           margin: auto;
        
    }
        
    
    footer { display: none;
    }
    
}

@media only screen and (max-width: 45em){
      
    #rotulos {display: flex;
                 flex-wrap: wrap;
                 margin: 0 auto;
                 align-items: center;
                 text-align: center;  
                
              }
    
    .responsive { align-items: center;
                  margin: auto;
                        
    }
    .img { max-width: 250px;
           align-items: center;
           
        
    }

}

@media only screen and (max-width: 55em){
   
    #rotulos {    display: flex;
                flex-wrap: wrap;
                 margin: 0 auto;
                align-items: center;
                text-align: center;  
                
              }
  
    .responsive { align-items: center;
                  margin: auto;
                        
    }
    .img { max-width: 250px;
           align-items: center;
        
    }
    
   }

@media only screen and (max-width: 70em){
    
    
    #quienessomos { text-align: center;
        
    }
    

  #rotulos {    display: flex;
                flex-wrap: wrap;
                 margin: 0 auto;
                align-items: center;
                text-align: center;  
                
              }
    
    .responsive { align-items: center;
                  margin: auto;
                        
    }
    .img { max-width: 250px;
           align-items: center;
        
    }
}