.asidebox {
    text-align:left;
    border-bottom: 1px solid #cccccc;
    padding: 0;
}



.aside {
  min-width: 250px;
  width: 10%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #fafafa;
  font-family: Open Sans;
  border-right: 1px solid #333;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  z-index: 2000;
  width: 0px;
  min-width: 0px;
  overflow: hidden;
  transition: 0.35s width ease, 0.35s min-width ease;
}

.aside .aside-header {
  background-color: #fab52e;
  padding: 8px 0 6px 20px;
  border-bottom: 1px solid #404040;
  font-family:Open Sans;
  font-size: 1.50em;
  letter-spacing: -0.040em;
  color: #2a2b67;
  font-weight: 900;
}

.aside .aside-header .close {
  float: right;
  cursor: pointer;
}

.aside .aside-contents {
  color: #404040;
  font-size: 1.00em;
  font-weight: 400;
  line-height: 2.00em;
  letter-spacing: -0.025em;
  margin: 0;
  padding: 12px 0 0 18px;
}

.aside .aside-contents a:hover {
  color: red;
  font-weight: 600;
  text-decoration: none;
  padding-left: 3px;
}

.aside p {
  color: #404040;
  font-size: 1.00em;
  font-weight: 400;
  line-height: 1.30em;
  letter-spacing: -0.025em;
  margin: 0;
  padding:3px 0 3px 2px;
}

.aside a {
  color: #404040;
  text-decoration: none;
}

.aside a:hover {
  color: red;
  border-bottom-color: transparent;
}

.aside.in {
  width: 10%;
  min-width: 250px;
}

.aside-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
  transition: 0.2s opacity ease;
  opacity: 0;
  display: none;
}

.aside-backdrop.in {
  display: block;
  opacity: 0.5;
}







$asidebar-min-width: 250px;
$asidebar-width: 10%;
$asidebar-background: #FFF;

@mixin make-aside-header($color: red) {
  background-color: $color;
  padding: 1em;
  padding-left: 0.5em;
  border-bottom: 1px solid darken($color, 12%);
  font-size: 1.2em;
  @if (lightness($color) < 50) {
    color: white;
  } @else {
    color: black;
  }
}

@mixin make-aside(
  $background: $asidebar-background,
  $min-width: $asidebar-min-width,
  $width: $asidebar-width
) {
  min-width: $min-width;
  width: $width;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;

  background-color: $background;
  font-family: Helvetica, Arial, sans-serif;

  border-right: 1px solid #333;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  z-index: 2000;
}

.aside {
  @include make-aside;
  width: 0px;
  min-width: 0px;
  overflow: hidden;
  transition: 0.90s width ease, 0.35s min-width ease;

  .aside-header {
    @include make-aside-header;
    .close {
      float: right;
      cursor: pointer;
    }
  }
  .aside-contents {
    padding: 0.5em;
    padding-bottom: 1em;
  }

  &.in {
    width: $asidebar-width;
    min-width: $asidebar-min-width;
  }
}
.aside-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
  transition: 0.2s opacity ease;
  opacity: 0;
  display: none;

  &.in {
    display: block;
    opacity: 0.5;
  }
}

.asidebar-enter { opacity: 0.01; }
.asidebar-enter-active { opacity: 1; }
.asidebar-leave { opacity: 1; }
.asidebar-leave-active { opacity: 0; }