* { 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;
    
}

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

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

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

nav { 
        margin: 0;
        margin-top: 5%;
        flex-basis: calc(100%-8em);
                
    }

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;
    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;
    
}

h2 { color: #707173;
     font-size: 220%;
    text-decoration: underline;
}

.titulopf { margin-left: 18%;
            margin-right: 18%; 
            text-align: center;
    
}

.titulopf p { font-weight: 500;
              font-size: 115%;
    
}

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

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

.contenedor1{ text-align: center;
    
}

.contenedor2{ display: flex;
              padding: 0%;
              margin-left: 8%;
              margin-right: 8%;
              
    
}

.contenedor2 img { width: 12%;
                       height: auto;
                       padding: 0;
                       
    }

.texto1pf { margin-top: 30px;
            margin-bottom: 30px;
            margin-right: 2%;
    
}

.texto2pf {  margin-top: 30px;
             margin-bottom: 30px;
             margin-left: 2%;
    
}


.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;
            
    }
    
    .contenedor2 { display: block;
                   padding: 5%;
        
    }
    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;
    }
    
    
    .contenedor2 { display: block;
                   padding: 5%;
        
    }
footer {display: none;
        
    }

     
}


@media only screen and (max-width: 45em){
    .contenedor2 { display: block;
                   padding: 8%;
        
    }
    
    
}


@media only screen and (max-width: 70em){
    .contenedor2{ padding: 2%;
        
    }
    
    
    
}