#side-menu.fixedTop {
  position: fixed;
  top: 0;
}
.toolbar-fixed #side-menu.fixedTop {
  top: 40px;
}
.toolbar-tray-open.toolbar-horizontal.toolbar-fixed #side-menu.fixedTop {
  top: 80px;
}
#side-menu.fixedBottom {
  position: absolute;
  bottom: 0;
}
@media (max-width: 767px) {
  #side-menu {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translate(98%,-50%);
    width: 50%;
    z-index: 1000;
  }
  #side-menu .button {
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 20px;
    -webkit-border-top-left-radius: 20px;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 20px;
    -moz-border-radius-topleft: 20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    height: 40px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 35px;
    z-index: -1;
  }
  #side-menu .button.close {
    background: #f3f3f3;
    transform: translate(0,-50%);
  }
  #side-menu .button.close .line {
    background-color: black;
    height: 1px;
    left: 9px;
    position: absolute;
    top: 20px;
    width: 22px;
  }
  #side-menu .button.close .line.a {
    transform: rotate(45deg);
  }
  #side-menu .button.close .line.b {
    transform: rotate(-45deg);
  }
  #side-menu .button.open {
    background: #c64c3a;
    transform: translate(-35px,-50%);
  }
  #side-menu .button.open .part {
    border-bottom: 1px solid white;
    height: 0;
    position: absolute;
    top: 0;
  }
  #side-menu .button.open .part.even {
    width: 5px;
    left: 10px;
  }
  #side-menu .button.open .part.odd {
    width: 12px;
    left: 17px;
  }
  #side-menu .button.open .part.top {
    top: 12px;
  }
  #side-menu .button.open .part.middle {
    top: 20px;
  }
  #side-menu .button.open .part.bottom {
    top: 28px;
  }
  #side-menu.show {
    animation: menuShow 1s ease-in-out forwards;
  }
  #side-menu.show .button.close {
    animation: buttonShow 1s ease-in-out forwards;
  }
  #side-menu.show .button.open {
    animation: buttonHide 1s ease-in-out forwards;
  }
  #side-menu.hide {
    animation: menuHide 1s ease-in-out forwards;
  }
  #side-menu.hide .button.close {
    animation: buttonHide 1s ease-in-out forwards;
  }
  #side-menu.hide .button.open {
    animation: buttonShow 1s ease-in-out forwards;
  }
  #side-menu .vm-content-list {
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-topleft: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: #f3f3f3;
    padding: 20px;
  }
  @keyframes menuShow {
    from {
      transform: translate(98%,-50%);
    }
    to {
      transform: translate(0,-50%);
    }
  }
  @keyframes menuHide {
    from {
      transform: translate(0,-50%);
    }
    to {
      transform: translate(98%,-50%);
    }
  }
  @keyframes buttonShow {
    from {
      transform: translate(0,-50%);
    }
    to {
      transform: translate(-35px,-50%);
    }
  }
  @keyframes buttonHide {
    from {
      transform: translate(-35px,-50%);
    }
    to {
      transform: translate(0,-50%);
    }
  }
}