/* Hoja de estilos*/

body, html{
    background-color:rgb(0, 0, 0); 
    width: 100%;
    height: 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; }

article{
background-color:rgba(88, 209, 43, 0.28);
margin-top: 50px;margin-right: 50px;margin-left: 50px;height:300px;position: relative
}  
#slider {
box-shadow: 0px 3px 9px 3px #13bf21;
margin-top: 10px;margin-right:10px;margin-left:10px; position: absolute
}
#slider ul{position: absolute;	
margin-top:0px;
padding:0px;
list-style:none;
}
#slider li, #slider1 li, #slider2 li,#slider3 li,#slider4 li{
width:580px;
height:280px;
overflow:hidden;
margin-left:0px;
margin-bottom: auto}	

/* numeros */	
ol#controls{
margin-left: 185px;
position:absolute;
float:left;
list-style:none;
}
ol#controls li{	
margin:0 8px 0 0;
padding:0;
float:left;
list-style:none;
}
ol#controls li a{	
background:rgb(0, 0, 0);
color: #FFF;
font-family:calibri,sans-serif;
font-size:12px;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
font-family: calibri,sans-serif;
background:#54B847;
color:#fff;
}
/* fin numeros */
/*aside*/

aside{width: 300px;height: 300px;float:right;
background-color:#54B847;
} 
#nombre{
width: 270px;
height: 270px;
float:right; 
font-family: calibri bold, sans-serif;
padding: 15px}

#nombre p{ margin-top: 10px;
height: 40px;
color:rgb(0, 0, 0);
font-size: 56px;
text-align: center; 
}

p1{position: absolute; margin-top: 30px; font-size: 76px;
text-align:center;
margin-left: 50px;
color:#b5e895;
}

section{
background-color: rgba(88, 209, 43, 0.31);
margin-top: 10px;margin-right: 50px;margin-left: 50px;height:150px;
 }
    
#proy1 a img{
height:120px;width: 200px; float: left; 
padding-left: 25px; padding-bottom: 15px;
padding-top: 15px; padding-right: 15px;cursor: auto
}
#proy2 a img{
height:120px;width: 200px; float: left;
padding-left: 1px; padding-bottom: 15px;
padding-top: 15px; padding-right: 15px;
}
#proy3 a img{
height:120px;width: 200px; float: left;
padding-left: 1px; padding-bottom: 15px;
padding-top: 15px; padding-right: 15px;cursor: auto
}
#proy4 a img{
height:120px;width: 200px; float: left;
padding-left: 1px; padding-bottom: 15px;
padding-top: 15px; padding-right: 10px;cursor: auto; 
}


footer{margin-top:20px ; background:rgb(0, 0, 0);
height: 200px}

#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}


@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;
}