body, ul {
  margin: 0;
  padding: 0;
}

/* Decor */
body {
  background: #45163E;
}

.drawer {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  height: 100%;
  padding: .4em 0;
  background: #7D294E;
  color: white;
  text-align: center;
  /* Remove 4px gap between <li> */
  font-size: 0;
}
.drawer li {
  pointer-events: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  list-style: none;
  line-height: 100%;
  transform: translateZ(0);

}
.drawer a {
  pointer-events: auto;
  position: relative;
  display: block;
  min-width: 5em;
  margin-bottom: .4em;
  padding: .4em;
  line-height: 100%;
  /* Reset font-size */
  font-size: 16px;
  text-decoration: none;
  color: white;
  transition: background 0.3s;
}
.drawer a:active, .drawer a:focus {
  background: #B44659;
}
.drawer i {
  display: block;
  margin-bottom: .2em;
  font-size: 2em;
}
.drawer span {
  font-size: .625em;
  font-family: Raleway;
  text-transform: uppercase;
}
.drawer li:hover ul {
  /* Open the fly-out menu */
  transform: translateX(0);
  background: #B44659;
  /* Enable this if you wish to replicate hoverIntent */
}
.drawer > li {
  display: block;
  /* Add a shadow to the top-level link */
  /* Show the shadow when the link is hovered over */
  /* Fly out menus */
}
.drawer > li > a {
  background: #7D294E;
}
.drawer > li:hover {
  z-index: 100;
}
.drawer > li:hover a {
  background: #B44659;
}
.drawer > li a:hover {
  background: #F56356;
}
.drawer > li > a:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 4px;
  opacity: 0;
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, transparent));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
  transition: opacity 0.5s;
}
.drawer > li:hover a:after {
  opacity: 1;
}
.drawer > li ul {
  position: absolute;
  /* Stack below the top level */
  z-index: -1;
  top: 0;
  left: 100%;
  height: 100%;
  width: auto;
  white-space: nowrap;
  /* Close the menus */
  transform: translateX(-100%);
  background: #B44659;
  transition: 0.5s transform;
}