.offcanvas-overlay {
	background: rgba(0, 0, 0, .3);
	height: 100%;
	left: 0;
	opacity: 0;
	overflow: hidden;
	position: fixed;
	top: 0;
	transition: opacity .5s ease, visibility .5s ease;
	visibility: hidden;
	width: 100%;
}
.offcanvas-overlay.visible {
	cursor: pointer;
	opacity: 1;
	visibility: visible;
	z-index: 1;
}
.offcanvas-wrapper {
	overflow: hidden;
	position: relative;
}
.offcanvas-content {
	backface-visibility: hidden;
	transition: transform .5s ease;
}
.offcanvas {
	background: #222;
	color: #fff;
}
.offcanvas-content {

}
.offcanvas {
	position: fixed;
	transition: transform .5s ease;
	z-index: 1;
	backface-visibility: hidden;
}
.offcanvas.left {
	background: #333;
	top: 0;
	left: 0;
	width: 250px;
	height: 100%;
	transform: translate3d(-250px, 0, 0);
	overflow-y: auto;
}
.offcanvas.right {
	height: 100%;
	overflow-y: auto;
	right: 0;
	top: 0;
	transform: translate3d(250px, 0, 0);
	width: 250px;
}
.offcanvas.open {
	transform: translate3d(0, 0, 0);
}
.offcanvas.left.open ~
.offcanvas-content {
	transform: translate3d(250px, 0, 0);
}
.offcanvas.right.open ~
.offcanvas-content {
	transform: translate3d(-250px, 0, 0);
}
.offcanvas-is-open {
	overflow: hidden;
}