.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)
}
.offcanvas--top{top:-360px;left:0;width:100vw;height:360px}
.offcanvas--top--active{transform:translate3d(0, 280px, 0)}
.offcanvas--right{top:0;right:-280px;width:280px;height:100vh}
.offcanvas--right--active{transform:translate3d(-280px, 0, 0)}
.offcanvas--bottom{bottom:-360px;left:0;width:100vw;height:360px}
.offcanvas--bottom--active{transform:translate3d(0, -280px, 0)}
.offcanvas--left{top:0;left:-280px;width:280px;height:100vh}
.offcanvas--left--active{transform:translate3d(280px, 0, 0)}
.offcanvas--initialized{display:block}