ul {list-style-type: none; 
    padding: 1em; 
    margin: 1em;
    background: #A8383B;


}


/* Esto es para sacarle los espacios y las marcas a las listas */


h1 {font-size: 4em; 
    color: #D3696C; 
    position: absolute;
    left: 7%;
    top: 750px;
    z-index: 0;
    text-shadow: 2px 0 0 #000000, -2px 0 0 #000000, 0 2px 0 #000000, 0 -2px 0 #000000, 1px 1px #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000}


li {padding: 1em; color: #7E1518}  



body {background: #A8383B; padding: 4%; font-size: 15px}


@media only screen and (max-width: 800px) {

   body { font-size: 0.5em; }

}




a {text-decoration: none; color: #D3696C; font-family: roboto2; font-size: 4em; width: 100%}

li:hover {}


a:hover {color: #FDA9AB}

/* Esto es para que los links esten horizontales y tengan el mismo ancho */    



.imagen1 {background-image: url(imagen1.jpeg); margin: auto 0; height: 250px}





@font-face {
font-family: roboto;
    src: url(Roboto-Condensed.ttf);

}

@font-face {
font-family: roboto2;
    src: url(Bevan.ttf);

}






#menu-container div{
    position: relative;
     font-family: roboto1;
    height: 75px;
    width: 200px;
    color: #FDA9AB;
    left: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
        position: relative;

}





#menu-container div:hover{
    color: #FDA9AB;
    background-color: none;
    left: 20px;
    padding-left: -20px;
}




.caja1 {position: inherit; 
    height: 180px; 
    width: 25%; 
    background-image: url(Alumn2.jpg); 
    left: 25px; top: 15px; margin-bottom: 15px; }


.caja2 {position: inherit; 
    height: 180px; 
    width: 25%; 
    background: white; 
    left: 330px; top: -570px; margin-bottom: 15px}


.caja3 {position: inherit; 
    height: 180px; 
    width: 25%; 
    background: white; 
    left: 620px; top: -1155px; margin-bottom: 15px}
        
.unodos {height: 100%; width: 100%}

.unodos:hover {
    opacity: 0.4
}










aside {position: relative; top: -520px; left: 25%; width: 75%}



/* abajo está el codigo para cambiar imagenes ON HOVER 1 */


.articulo {background: none; width: 20%; height: auto}


.articulo img {position:absolute;
  left:30%;
    height: auto;
    top: 4%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    
    
}

.articulo img.top:hover {
  opacity:0;
}



/* abajo está el codigo para cambiar imagenes ON HOVER 2  */


.articulo2 {background: none; width: 20%; height: auto}


.articulo2 img {position:absolute;
  left:50%;
    height: auto;
    top: 4%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    
    
}

.articulo2 img.top:hover {
  opacity:0;
}

/* abajo está el codigo para cambiar imagenes ON HOVER 3  */
    
    
    
    .articulo3 {background: none; width: 20%; height: auto}


.articulo3 img {position:absolute;
  left:70%;
    height: auto;
    top: 4%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    
    
}

.articulo3 img.top:hover {
  opacity:0;
}









    .articulo4 {background: none; width: 20%; height: auto}


.articulo4 img {position:absolute;
  left:70%;
    height: auto;
    top: 37%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    
    
}

.articulo4 img.top:hover {
  opacity:0;
}




.articulo5 {background: none; width: 20%; height: auto}


.articulo5 img {position:absolute;
  left:50%;
    height: auto;
    top: 37%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    
    
}

.articulo5 img.top:hover {
  opacity:0;
}





.articulo6 {background: none; width: 20%; height: auto}


.articulo6 img {position:absolute;
  left:30%;
    height: auto;
    top: 37%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    
    
}

.articulo6 img.top:hover {
  opacity:0;
}


**


    .articulo9 {background: none; width: 20%; height: auto}


.articulo9 img {position:absolute;
  left:70%;
    height: auto;
    top: 71%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    
    
}

.articulo9 img.top:hover {
  opacity:0;
}




.articulo8 {background: none; width: 20%; height: auto}


.articulo8 img {position:absolute;
  left:50%;
    height: auto;
    top: 71%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    
    
}

.articulo8 img.top:hover {
  opacity:0;
}





.articulo7 {background: none; width: 20%; height: auto}


.articulo7 img {position:absolute;
  left:30%;
    height: auto;
    top: 71%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    
    
}

.articulo7 img.top:hover {
  opacity:0;
}



.circular {width: 400px;
	height: 400px;
	border-radius: 250px;
	-webkit-border-radius: 250px;
    -moz-border-radius: 250px}



footer {position: absolute; left: 36%; top: 2100px}



.ale {position: relative; top: -425px; left: 45%; width: 50%}




.informacion {position: relative; top: 380px; left: 35%; font-size: 0.8em}