body { background-color:#ef2a34; 
       max-width:1100px; 
       margin:5% auto; 
       font-family: 'Roboto Condensed', sans-serif;
       
}

.caja { background-color: whitesmoke;  max-width:1100px; 
       margin:5% auto; opacity: 30%; }

.arriba { background-image: url(imagenes/FADU4.jpg);
          width:100%px;
          opacity:30%;
          height: 20%;
          /*margin: 2%;*/ 
          padding: 2%;
          background-image: no-repeat

}

h1 {
    color: white; /*font-family: sans-serif 'helvetica' ;*/
    display:block; 
    font-size:7.5rem; 
    text-align: center; 
    /*margin:2%;*/ 
    padding: 2%; 
    position: relative; top: 2%;
}

.epigrafetitulo { color:#fff; height: 30%; /*width: 100%;*/ font-size: 0,5rem; text-align:center; background-color:#ef2a34; padding:0.6%;
display:block; }

}



header { width: 100% ; height: 30%; background-color: blue; margin: 2%; padding: 4%;


}



.item {list-style:none; 
        text-transform:uppercase; 
        display:inline-block; 
        padding:1.5% 3%;  
        color:#ef2a34;
        border: 1px solid #ef2a34; 
        /*background-color: #44928C;*/
        margin:1% 1%; 
        font-size: 12px;
        letter-spacing: 0.10em;
        position: relative; 
         margin-left: 6.5%;
}



 .item:hover {opacity:30%; /*background-color:#ef2a34;background-color: #FCC447;*/
             color:#ef2a34;
             border: 5px solid #ef2a34;
}



 .item {text-decoration: none; 
      
}

article{display: inline-block ; position: relative; left: 1%; margin: 2%; float:inherit; width: 20%;}

img { width: 100%; height: 100%; margin: 2%; position: relative; display: inline-block; box-shadow: 1rem; border-radius: 5% }

.nombre { list-style:none; 
        text-transform:uppercase; 
        display:inline-block; 
        padding:1.5% 3%;  
       color: black; 
         margin:1% 2%; 
        font-size: 12px;
        letter-spacing: 0.10em;
    position: relative;
    margin-left: 10%;
    
    font-family:sans-serif; font-family: 'Helvetica';


}

.nombre:hover {opacity:30%; background-color: #FCC447;}


.epigrafe {  font-weight: 400;
     background-color:#D4E9FF;
    width: 95%;
    padding: 1%;
    text-transform:none;
    font-size: 0,3rem;
    letter-spacing: 0.1em;
    margin:0 auto;
    text-align:justify;
    
 font-family:sans-serif; font-family: 'Helvetica'; }

.texto {margin:0 auto; text-align:center; max-width:978px;
    
    font-family:sans-serif; font-family: 'Helvetica';}


 h2 {font-weight: 400;
    border: 1px solid #44928C;
    background-color: #90C6C2;
    color:black; 
    width: 88.5%;
    padding: 1% 0;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.1em;
    margin:0 auto;
    text-align: center;
    
    font-family:sans-serif; font-family: 'Helvetica';
    
}


h3 {font-size: 14px;
    
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:black;
    text-align: center;
}



h4 {font-weight: 400;
    color:black; 
    width: 88.5%;
    padding: 1% 0;
    text-transform:none;
    font-size: 0,5rem;
    letter-spacing: 0.1em;
    margin:0 auto;
    text-align:center;
    
    font-family:sans-serif; font-family: 'Helvetica';



} 


    
    
    
 p {font-weight: 400;
    color:black; 
    width: 88.5%;
    padding: 1% 0;
    text-transform:none;
    font-size: 0,3rem;
    letter-spacing: 0.1em;
    margin:0 auto;
    text-align:center;
    font-family:sans-serif; font-family: 'Helvetica'; }


p {font-weight:200; font-size:14px; line-height:20px; letter-spacing:0.07em}



<---! roturlo individual ----> 


.miinformacion { display: inline-block ; margin: inherit; padding-left: 2%; width: 600px;

}

.masinfo { display: inline-block; width: 330%; padding: 10%; background-color: #D4E9FF ;


}
    
#yo { color: #ef2a34; font-size: 2rem;text-transform: uppercase  }
#cajaimagen { bottom:380px; background-color: #D4E9FF; position: relative; 


}