.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);
    box-sizing: border-box
}

.offcanvas--top {
    bottom: 100%;
    left: 0;
    width: 100%
}

.offcanvas--top--active {
    transform: translate3d(0, 100%, 0)
}

.offcanvas--right {
    top: 0;
    left: 100%;
    height: 100%
}

.offcanvas--right--active {
    transform: translate3d(-100%, 0, 0)
}

.offcanvas--bottom {
    top: 100%;
    left: 0;
    width: 100%
}

.offcanvas--bottom--active {
    transform: translate3d(0, -100%, 0)
}

.offcanvas--left {
    top: 0;
    right: 100%;
    height: 100%
}

.offcanvas--left--active {
    transform: translate3d(100%, 0, 0)
}

.offcanvas--initialized {
    display: block
}