$size: 300px;

.drawer {
  position: fixed;
  background-color: #FFF;
  -webkit-box-shadow: -5px 0px 5px -5px rgba(0,0,0,0.55);
  -moz-box-shadow: -5px 0px 5px -5px rgba(0,0,0,0.55);
  box-shadow: -5px 0px 5px -5px rgba(0,0,0,0.55);
  /* animate.css */
  -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
  animation-duration: 0.5s;
}

.drawer-top {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: $size;
}

.drawer-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: $size;
}

.drawer-left {
  top: 0;
  left: 0;
  width: $size;
  height: 100%;
}

.drawer-right {
  top: 0;
  right: 0;
  width: $size;
  height: 100%;
}


.hidden {
  display: none;
}

.overlay {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background:rgba(0,0,0,.75);
  /* animate.css */
  -webkit-animation-duration: 0.4s; /* Chrome, Safari, Opera */
  animation-duration: 0.2s;
}