/*MENU*/

.menu {
  list-style: none;
  line-height: 42px;
  margin: auto;
  /*outline: 1px solid red;*/
  padding-right: 0;
  width: 25em;
}

.menu a {
 /* background: url(icons.png) no-repeat left top;*/
  color: #ddd;
  text-decoration: none;
   /*text-transform: uppercase;*/
  display: block;
  padding-left: 3em;
  width: 100%;
}

.menu a:hover {
  margin-left: 1em;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.menu li {
 /* box-shadow: 3px 0 rgba(52,152,219,.2) inset;
  margin-bottom: 5px;*/
  padding-left: .5em;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;/*outline: 1px solid green*/
}

/*.menu li:hover { box-shadow: 15em 0 rgba(107,195,221,.2)inset; }*/
.menu li:hover { color:rgba(204,229,255,1) }

.menu li:nth-child(2) a { background-position: 0 -42px; }

.menu li:nth-child(3) a { background-position: 0 -84px; }

.menu li:nth-child(4) a { background-position: 0 -126px; }

.menu li:nth-child(5) a { background-position: 0 -168px; }

.menu li:last-child a { background-position: 0 -210px; }

/*FIN MENU*/


/*Posicion Responsive Menu*/

nav {
  background: rgba(7,62,97,1);
  padding-left: .25em;
  position: absolute;
  right: -28em;
  top: 0;
  padding-top: 2em;
  box-sizing: border-box;
  z-index: 9999;
  height: 100%;
  min-height:1000px;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  overflow-y: auto;
}

nav.active { right: 0; }

#mobile-nav {
  background: rgba(1, 1, 1, 1) url(menu-icon.png);
  cursor: pointer;
  right: 2em;
  height: 62px;
  position: absolute;
/*  top: 4em;*/
  width: 90px;
  z-index: 99999;
  margin-top: -0.8%;
 overflow-y: auto;
}

/* Media CSS */	
@media only screen and (max-width:868px) {
	nav {
		top: 4em; overflow-y: auto; height: 150px;

	    }	

#mobile-nav {
	top: 5em; 
	

	}	

}


 @media only screen and (max-width:640px) {
	nav {
		top: 4em; overflow-y: auto; height: 150px;

	    }
	
#mobile-nav {
	top: 3em;
	right: 2em; 
	

	    }
					
}