@charset "utf-8";
@import url ("https://fonts.googleapis.com/css?family=Lato:300,400,700,900" > );

* {box-sizing: border-box;
    list-style: none;
    margin: 0.1em;
padding: 0;}

header h1 {
    
    font-family: 'Lato', sans-serif;
    font-weight:400;
  text-align: center;       
    color: rgb(96 , 225, 242);
    font-size:2em;
    padding: 1.5em;
    }
header h2 {
    display: flex;
    font-family: 'Lato', sans-serif;
    font-weight:400; 
     color: rgb(59, 61, 73);
    font-size:0.8em;
    margin-top: -3.5em;
    margin-bottom: 3.5em;
    justify-content: center;    
    }


.barras{
    list-style: none;
    font-family: 'Lato', sans-serif;
    text-align: center;
    background-color: rgb(96 , 225, 242);
    display: flex;
    flex-direction: column;
    align-content: center;  
    padding: 0.2em;
    margin: 0.2em 0.2em 0.2em 0.2em;
     
}


.barra3{
    text-align: center;
    text-decoration: none;
    color: aliceblue;
    
}

.barra3:hover {color: rgb(59, 61, 73)}

.barra2{
    list-style: none;
    font-family: 'Lato', sans-serif;
    text-align: center;
    background-color: rgb(113, 113, 116);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-content: center;    
 padding: 0.3em;
    
      
}

.grupal{
    color: rgb(96 , 225, 242);
    text-decoration: none;
    text-align: center;
    font-weight: 700;
        
}

.destacado{
    color: rgb(96 , 225, 242);
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    
}

.grupal:hover {color: aliceblue}
.destacado:hover { color: aliceblue}



main section div img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 15em;    
    margin-top:1em;
    max-width: 100%;
    align-content: center;
    align-items: center;
    margin: auto;
    margin-bottom: 1em;
    margin-top: 1em;
        
}



aside h3 {
    font-family: 'Lato', sans-serif;
    font-weight:500;
    color: rgb(96 , 225, 242);
    font-size: 1.4em;
    text-align: center;
    border: 0.08em solid rgb(59, 61, 73);
    padding: 0.3em 3em 0.3em 3em;
    margin-top: 2em;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    }

    
}
aside p {
        
    color: rgb(59, 61, 73);
    font-size: 0.9em;    
    }
aside p{
    font-family: 'Lato', sans-serif;
    font-weight:300;
    text-align: center;
    margin-bottom: 2.5em;
    margin-top: -2em
}
aside nav ul {
    
    display: block;
    text-align: center;
    list-style: none;
    align-content: space-around;
    justify-content: space-around;    
        
}
aside nav ul a {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 0.9em;
    color: rgb(65, 158, 170);
    text-decoration: none;
    text-align: center;
    margin-bottom: 3em;
       
}

.destacado2 {
    font-size: 0.8em; 
    font-family: 'Lato', sans-serif;
    font-weight:600;
    color: rgb(59, 61, 73);
    
        
}

footer {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
text-align: center;
    font-size: 0.8em;
    color: rgb(59, 61, 73);
    margin-top: 8em;

}




@media screen and (min-width:50em) {
    main{
        display: flex;
        flex-direction: column;
    }
    
    nav ul {
        display: flex;
        flex-direction: column;
    }
    nav ul li {
        flex-grow:1;
    }
    .barra {
        display: flex;
        flex-direction: column;
        
    }
   
  .barra2 {
      flex-grow: 1;
              display: flex;
        flex-direction: row;
        justify-content: center;
  
    }
    
    main section div  {
        
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
                justify-content: space-around;
            
    
    }
    
    main section div img{
        width: 10em;
        height: 10em;
        max-width:50%;
    }
    
    
    }



@media screen and (min-width:70em) {
    main{
        display: flex;
        flex-direction: column;
    }
    
    nav ul {
        display: flex;
        flex-direction: column;
    }
    nav ul li {
        flex-grow:1;
    }
    .barra {
        display: flex;
        flex-direction: column;
        
    }
   
  .barra2 {
      flex-grow: 1;
              display: flex;
        flex-direction: row;
        justify-content: center;
  
    }
    
    main section div  {
        
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
                justify-content: space-around;
            
    
    }
    
    main section div img{
        width: 15em;
        height: 15em;
        max-width:50%;
    }
    
    
    }

@media screen and (min-width:100em) {
    main{
        display: flex;
        flex-direction: column;
    }
    
    nav ul {
        display: flex;
        flex-direction: column;
    }
    nav ul li {
        flex-grow:1;
    }
    .barra {
        display: flex;
        flex-direction: column;
        
    }
   
  .barra2 {
      flex-grow: 1;
              display: flex;
        flex-direction: row;
        justify-content: center;
  
    }
    
    main section div  {
        
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
                justify-content: space-around;
            
    
    }
    
    main section div img{
        width: 25em;
        height: 25em;
        max-width:50%;
    }
    
    
    }