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


body {
    font-family: 'Raleway', sans-serif;
    background-color: whitesmoke;
    color: #818486;
    font-weight: 400;
    
}

#contenedor {
    background-color: white;
    max-width: 75em;   
    width: 70%;
    margin: auto;
    align-items: center;
    text-align: center;

}

a {
    text-decoration: none;
    
}

img {
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

#fotoperfil { max-width: 180px;
    
}

h1 { color: rgb(122, 227, 183);
     font-size: 200%;
     font-weight: bold;
    
}

h2, p { margin-bottom:  9px;
        margin-top: 9px;
}

p { margin-left: 3px;
    margin-right: 3px;
    font-size: 80%;
}

header { 
    text-align: center;
}

h2 {
    font-size: 150%;
    color:rgb(122, 227, 183);
    margin-top: 1em;
    text-decoration: underline;
}

#materiasaprobadas h4 { font-size: 15px;
                       font-weight: 600;
                       margin-top: -10px;
    
}




h3 {
    font-size:100%;
    color: rgb(122, 227, 183);
    font-weight: 500;
}

#fotos {    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;
        
    }

h5 { font-weight: 500;
    
}

#mastp h2 { color: gray;
            font-size: 20px;
    
}

h4 { font-size: 13px;
     font-weight:lighter;
}

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

li  {
    display: inline-block;
    margin: 0;
    padding: :60px 60px;
    color: #ffffff;
    
    
}

nav ul {
    list-style: none;
    border-radius:0px; 
    
}

nav ul li {
    margin-bottom: 0.5em;
    
}

nav ul li a {    color: white;
    padding: 10px 20px;
    display: block;
    width: 180px;
    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;
    
}

#menu1 { display: inline-block;
    width: 180px;
    text-align: center;
    
    
}

#menu1 nav ul li a { color: #8d9295;
              background-color: rgb(248, 203, 183) ;
              font-size: 17px;
                   
    
}

#menu1 nav ul li a:hover {
    color:#ffffff;
    background-color: gray;
    
}

#menu2 nav ul li a {  margin-top: 10px;
                      color:  gray;
                      width: 140px;
                      font-weight: 600;
                      font-size: 15px;
                      text-decoration: underline;
                         
                   
    
}

#menu2 nav ul li a:hover {
    color:#ffffff;
    background-color: gray;
    
}

#info {
    font-size: 19px;
    color: rgb(122, 227, 183);
    font-weight: 600;
}

#menu3 nav ul li a {  color:  rgb(237, 169, 139);
                      width: 182px;
                      font-weight: 600;
                      font-size: 15px;
                      text-decoration: underline;
                         
                   
    
}

#menu3 nav ul li a:hover {
    color:#ffffff;
    background-color: gray;
    
}

footer {
    padding: 1 em;
    background-color:gainsboro;
    text-align: center;
    margin-top: 10px;
    
    }

#logodgpc { max-width: 110px;
    
}

#logouba { max-width: 110px;
    
}

footer p { padding: 10px;
    
}


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

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

@media only screen and (max-width: 45em){
      
    #fotos {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;
           
        
    }

}

@media only screen and (max-width: 55em){
   
    #fotos {    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;
        
    }
    
   }


@media only screen and (max-width: 70em){

  #fotos {    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;
        
    }
}


@media screen and (min-width: 600px) {
  .nav li {
    width: 100px;
    border-bottom: none;
    height: 40px;
    line-height: 40px;
    font-size: 1em;
  }
 
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
}

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