.offcanvas {
  position: fixed;
  z-index: 1000;
  display: none;
  transform: translate3d(0, 0, 0);
  transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1);
	height:100%;
}

.offcanvas--top {
  top: -360px;
  left: 100px;
  width: 100vw;
  height: 360px
}

.offcanvas--top--active { transform: translate3d(0, 360px, 0) }

.offcanvas--right {
  top: 0;
  right: -360px;
  width: 320px;
  height: 100vh
}

.offcanvas--right--active { transform: translate3d(-360px, 0, 0) }

.offcanvas--bottom {
  bottom: -360px;
  left: 0;
  width: 100vw;
  height: 360px
}

.offcanvas--bottom--active { transform: translate3d(0, -360px, 0) }

.offcanvas--left {
  top: 0;
  left: -320px;
  width: 320px;
  height: 100vh
}

.offcanvas--left--active { transform: translate3d(360px, 0, 0) }

.offcanvas--initialized { display: block }