/*MENU*/

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

.menu a {

  color: #FFFFFF;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  padding-left: 1.4em;
  width: 100%;
}

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

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

.menu li:hover { box-shadow: 15em  rgba(52,152,219,.2)inset; }

.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*/

as {
  background: #32394b;
  padding-right: .25em;
  position: absolute;
  left: -18em;
  top: 0;
  padding-top: 5em;
  box-sizing: border-box;
  z-index: 20;
  height: 100%;
  -webkit-transition: all .1s;
  -o-transition: all .1s;
  transition: all .1s;
}

as.active { left: 0; }

#mobile-nav {
  background: url(menu.png);
  cursor: pointer;
  float: right;
  left: 3px;
  height: 30px;
  position: absolute;
  top: 0.6em;
  width: 30px;
  z-index: 30;
}