/*MENU*/
.menu { list-style: none; line-height: 35px; margin: auto; /*outline: 1px solid red;*/ padding: 0; width: 18em; background: #f4f4d7;}
.menu a {
  background: url(icons.png) no-repeat left top;
  color: #8d0518;
  text-decoration: none;
  text-transform:capitalize;
  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: 0px;
  padding-left: .5em; border-bottom:1px solid #ececbb;
  -webkit-transition: all .5s;
  -o-transition: all .5s; font-family: 'Josefin Sans', sans-serif; font-weight:bold;
  transition: all .5s;/*outline: 1px solid green*/
}
.menu li:hover { box-shadow: 18em 0 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*/
nav {
  background: #f4f4d7;
  padding-right: 0em;
  position: absolute;
  left: -18em;
  top: 0;
  padding-top: 5em;
  box-sizing: border-box;
  z-index: 20;
  height: 100%; margin:0;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
nav.active { left: 0; }
#mobile-nav {
  background: url(menu-icon.png);
  cursor: pointer;
  left: 2em;
  height: 30px;
  position: absolute;
  top: 2em;
  width: 30px;
  z-index: 30;
}