@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);

body { background-color:#ef2a34; /* #D4E9FF #7dcfc3; #3E2052; */
       max-width:1100px; 
       margin:5% auto; 
       font-family: 'Roboto Condensed', sans-serif;
       
}

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

.arriba { background: url(imagenes/FADU4.jpg) no-repeat ;
          width:100%;
          padding: 2% 0;
          background-size: cover ;
          background-position: center;
    
}

section { text-align: center;} 


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%;
    
}    
    
a  { text-decoration: none;   
        

}

.contenedor {

height: 20%;

}

.epigrafetitulo { color:#fff; height: 30%; /*width: 100%;*/ font-size: 0,5rem; text-align:center; background-color:#ef2a34; padding:0.6%; margin:0 2%;
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: 10%;
}



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

}



 .item {text-decoration: none; 
      
          
}

article{display: inline-block ; margin: 2%; 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:5%; background-color: #ef2a34;}


.epigrafe { font-weight: 400;
            background-color: #D4E9FF;
            width: 90%;
            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 #ef2a34;
    background-color: #D4E9FF;
    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}





<---! estilos Carta ----> 

section {background-color:whitesmoke;
         height:450px;
         padding: 3%}

p .textocarta {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: justify;
               font-family:sans-serif; font-family: 'Helvetica';}

div .contenedorcaja { margin: 1%;
                      padding:1%;}

section h3 .titulocaja {text-transform: uppercase;
             font-size: 1rem;
             margin: 1%;
             padding:3%;
             text-decoration: underline}

<---! estilos Mapa ---->


.mapa {width: 80%}


.titulomapasitio {text-transform: uppercase;
                     font-size: 1rem;
                     padding:3%;
                     text-decoration: underline;
                     text-align: center}

.mapasitio {text-align: center;
                 width: 80%}





<---! 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;  }
#cajaimagen { bottom:380px; background-color: aqua; position: relative; 


}