/* Hoja de estilos*/

html{
    background-color:rgb(0, 0, 0); 
    width: 100%;
    font-family:calibri, sans-serif;
    font-size: 120%;
}

body{
background-color:rgb(255,255,255);
margin: auto
}
/* menu */
header{ width: 100%;height: 100%;
background-color:rgb(0, 0, 0);
height: 100px;
margin: 0;
}
header #logo img{
margin-left: 5%;
width: 100px;
height: 100px;position: relative
}
header nav ul li{
list-style: none;
float: left;
margin-left: 1rem;
}
nav ul li a { 
text-decoration: none;
font-family: Calibri bold, sans-serif;
}
/* fin menu */
/* efecto menu */
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: Calibri bold, sans-serif;
font-size: 11pt;
color: white;

}
#menu div.barraMenu {position: absolute;top:20px;left: 140px;
text-align: left;
}
#menu div.barraMenu a.botonMenu {
background-color: rgb(2, 2, 2);
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}
#menu div.barraMenu a.botonMenu:hover {
background-color: #73cb28;
}
#menu div.barraMenu a.botonMenu:active {
background-color: #f4f8ef;
color: black;
} 

/* fin efecto menu */
/*redes*/

div#redes{float:right; height: 50px;width:200px; margin-top:15px;margin-right: 10px}
div#redes a {float: right;margin-top:10px;padding-top: 10px;width:35px}
div#redes img{height:30px;width: 40px; }

/*fin de redes*/
/*article*/

article #texto{background-color:rgba(88, 209, 43, 0.28);position: relative;width: 500px;height: 250px; margin-left: 50px;margin-top: 10px} 

h1{font-size: 30px; padding-left: 10px;}

article p{position: absolute; font-size: 13px;top:30px; padding: 8px}

#imag img{position:absolute; margin-left: 550px;top:126px;width: 400px }
#imag2 img{position:absolute; margin-left: 550px;top:250px;width: 400px }

section{position: relative;width: 700px;height: 350px;margin-left: 50px; background: #a7a7a7; margin-top: 30px;}

#libros a,#enlaces a,#revistas a{margin-left: 5px;}
section a{color:black;font-size: 20px;}
#libros h2,#enlaces h2,#revistas h2{margin-top:0px;font-size: 17px}

#libros {width: 50px; float: left;margin-left: 10px;}
#enlaces {width: 50px;float:left;margin-left: 180px}
#revistas {width: 50px;float: left;margin-left: 180px}





/*footer*/
footer{ma10px; background:rgb(0, 0, 0);
}

#mapa1{height: 100px;width:100px;position: absolute;margin-left: 50px;}
#mapa1 ul li a {font-family: calibri,sans-serif;color:#75ea66;font-size: 14px;}
#mapa2{height: 150px;width:200px;position: absolute;margin-left: 200px;}    
#mapa2 ul li a {font-family: calibri,sans-serif;color:#75ea66;font-size: 14px;}
#mapa3 {height: 150px;width:300px;position: absolute;margin-left: 400px;}    
#mapa3 ul li a {font-family: calibri,sans-serif;color:#75ea66;;font-size: 14px;}
    
#fadu img {width: 280px;float: right;margin-right: 50px; margin-top: 25px}
#pie p{position: absolute; font-family:helvetica, serif;color: white;font-size:10px;text-align: justify;margin-top: 170px;margin-left: 50px;margin-right: 50px;background: rgba(244, 248, 243, 0.38);padding-left: 10px;padding-right:10px;padding-top:3px; padding-bottom: 3px}

/*reduccion*/
@media all and (min-width: 321px) and (max-width: 640px) {
header{ 
height: 9rem;
}
header #logo img{margin-top:0;position: absolute;
margin-left: 0;
width: 9rem;
height: 9rem;
} 

.barraMenu nav ul li a{
text-align: center;
width:8rem;
float:left;margin-left:0px;
}      
div#redes img{
width: 2rem;height: 1.5rem;position:absolute;top:0px;
}
article{
margin-top: 0px;margin-right: 0px;margin-left: 0px;
}