drawer {
  display: block;
  position: fixed;
  height: 100%;
  width: 270px;
  z-index: 100;
  background: #ffffff;
}

drawer.animate, .menu-animated {
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
}

drawer.left {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  box-shadow: 1px 0px 10px rgba(0,0,0,0.3);
}

drawer.right {
  right: 0;
  top: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  box-shadow: -1px 0px 10px rgba(0,0,0,0.3);
}

drawer.closed {
  box-shadow: none;
}

.drawer-overlay {
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.drawer-overlay.animate {
  -webkit-transition: 0.4s opacity ease-in-out;
  transition: 0.4s opacity ease-in-out;
}