.offcanvas-wrapper,
.offcanvas-pusher,
.offcanvas-contents {
    height : 100%;
    }

.offcanvas-contents {

    }

.offcanvas-open .offcanvas-contents,
.offcanvas-open .offcanvas-contents-inner {

    }

.offcanvas-html-open, .offcanvas-body-open {
    height : 100%
    }

.offcanvas-contents,
.offcanvas-contents-inner {
    position : relative;
    }

.offcanvas-wrapper {
    position : relative;
    overflow : hidden;
    }

.offcanvas-pusher {
    position           : relative;
    left               : 0;
    z-index            : 99;
    height             : 100%;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    }

.offcanvas-pusher::after {
    position           : absolute;
    top                : 0;
    right              : 0;
    width              : 0;
    height             : 0;
    background         : rgba(0, 0, 0, 0.5);
    content            : '';
    opacity            : 0;
    -webkit-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    -moz-transition    : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    -o-transition      : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition         : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    z-index            : 999;
    }

.offcanvas-open .offcanvas-pusher::after {
    width              : 100%;
    height             : 100%;
    opacity            : 1;
    -webkit-transition : opacity 0.5s;
    -moz-transition    : opacity 0.5s;
    -o-transition      : opacity 0.5s;
    transition         : opacity 0.5s;
    }

.offcanvas-container {
    position           : absolute;
    top                : 0;
    left               : 0;
    z-index            : 100;
    visibility         : hidden;
    width              : 300px;
    height             : 100%;
    background         : #27272C; 
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    -o-transition      : all 0.5s;
    transition         : all 0.5s;
    }

.offcanvas-container::after {
    position           : absolute;
    top                : 0;
    right              : 0;
    width              : 100%;
    height             : 100%;
    background         : rgba(0, 0, 0, 0.5);
    content            : '';
    opacity            : 1;
    -webkit-transition : opacity 0.5s;
    -moz-transition    : opacity 0.5s;
    -o-transition      : opacity 0.5s;
    transition         : opacity 0.5s;
    }

.offcanvas-open .offcanvas-container::after {
    width              : 0;
    height             : 0;
    opacity            : 0;
    -webkit-transition : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    -moz-transition    : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    -o-transition      : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition         : opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    }

.offcanvas-container > div {
    overflow-y : scroll;
    overflow-x : hidden;
    height     : calc(100% - 0px);
    visibility : visible;
    }

.offcanvas-container > div::-webkit-scrollbar {
    width : 0px;
    }


.offcanvas-left .offcanvas-container {
    left : 0;
    }

.offcanvas-right .offcanvas-container {
    left  : auto;
    right : 0;
    }


.offcanvas-left.slide-in-on-top.offcanvas-open .offcanvas-container,
.offcanvas-right.slide-in-on-top.offcanvas-open .offcanvas-container {
    visibility        : visible;
    -webkit-transform : translate3d(0, 0, 0);
    -moz-transform    : translate3d(0, 0, 0);
    -ms-transform     : translate(0, 0);
    -o-transform      : translate3d(0, 0, 0);
    transform         : translate3d(0, 0, 0);
    }

.offcanvas-left.slide-in-on-top .offcanvas-container {
    -webkit-transform : translate3d(-100%, 0, 0);
    -moz-transform    : translate3d(-100%, 0, 0);
    -ms-transform     : translate(-100%, 0);
    -o-transform      : translate3d(-100%, 0, 0);
    transform         : translate3d(-100%, 0, 0);
    }

.offcanvas-right.slide-in-on-top .offcanvas-container {
    -webkit-transform : translate3d(100%, 0, 0);
    -moz-transform    : translate3d(100%, 0, 0);
    -ms-transform     : translate(100%, 0);
    -o-transform      : translate3d(100%, 0, 0);
    transform         : translate3d(100%, 0, 0);
    }

.slide-in-on-top .offcanvas-container::after {
    display : none;
    }


.offcanvas-left.reveal.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.reveal.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.reveal .offcanvas-container {
    z-index    : 0;
    visibility : hidden;
    /*opacity: 0;*/
    }

.reveal.offcanvas-open .offcanvas-container {

    z-index            : 1;
    visibility         : visible;
    /*opacity: 1;*/
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    }

.reveal .offcanvas-container::after {
    display : none;
    }


.offcanvas-left.push-down.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.push-down.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.offcanvas-left.push-down .offcanvas-container {
    -webkit-transform : translate3d(-100%, 0, 0);
    -moz-transform    : translate3d(-100%, 0, 0);
    -ms-transform     : translate(-100%, 0);
    -o-transform      : translate3d(-100%, 0, 0);
    transform         : translate3d(-100%, 0, 0);
    }

.offcanvas-right.push-down .offcanvas-container {
    -webkit-transform : translate3d(100%, 0, 0);
    -moz-transform    : translate3d(100%, 0, 0);
    -ms-transform     : translate(100%, 0);
    -o-transform      : translate3d(100%, 0, 0);
    transform         : translate3d(100%, 0, 0);
    }

.push-down.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    }

.push-down .offcanvas-container::after {
    display : none;
    }


.offcanvas-left.slide-along.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.slide-along.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.offcanvas-left.slide-along .offcanvas-container {
    z-index           : 1;
    -webkit-transform : translate3d(-50%, 0, 0);
    -moz-transform    : translate3d(-50%, 0, 0);
    -ms-transform     : translate(-50%, 0);
    -o-transform      : translate3d(-50%, 0, 0);
    transform         : translate3d(-50%, 0, 0);
    }

.offcanvas-right.slide-along .offcanvas-container {
    z-index           : 1;
    -webkit-transform : translate3d(50%, 0, 0);
    -moz-transform    : translate3d(50%, 0, 0);
    -ms-transform     : translate(50%, 0);
    -o-transform      : translate3d(50%, 0, 0);
    transform         : translate3d(50%, 0, 0);
    }

.slide-along.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -webkit-transform 0.5s;
    -ms-transition     : -webkit-transform 0.5s;
    -o-transition      : -webkit-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(0, 0, 0);
    -moz-transform     : translate3d(0, 0, 0);
    -ms-transform      : translate(0, 0);
    -o-transform       : translate3d(0, 0, 0);
    transform          : translate3d(0, 0, 0);
    }

.slide-along .offcanvas-container::after {
    display : none;
    }

.offcanvas-left.reverse-slide-out.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.reverse-slide-out.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.offcanvas-left.reverse-slide-out .offcanvas-container {
    z-index           : 1;
    -webkit-transform : translate3d(50%, 0, 0);
    -moz-transform    : translate3d(50%, 0, 0);
    -ms-transform     : translate(50%, 0);
    -o-transform      : translate3d(50%, 0, 0);
    transform         : translate3d(50%, 0, 0);
    }

.offcanvas-right.reverse-slide-out .offcanvas-container {
    z-index           : 1;
    -webkit-transform : translate3d(-50%, 0, 0);
    -moz-transform    : translate3d(-50%, 0, 0);
    -ms-transform     : translate(-50%, 0);
    -o-transform      : translate3d(-50%, 0, 0);
    transform         : translate3d(-50%, 0, 0);
    }

.reverse-slide-out.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(0, 0, 0);
    -moz-transform     : translate3d(0, 0, 0);
    -ms-transform      : translate(0, 0);
    -o-transform       : translate3d(0, 0, 0);
    transform          : translate3d(0, 0, 0);
    }


.rotate-pusher.offcanvas-wrapper {
    -webkit-perspective : 1500px;
    -moz-perspective    : 1500px;
    -ms-perspective     : 1500px;
    -o-perspective      : 1500px;
    perspective         : 1500px;
    }

.offcanvas-left.rotate-pusher .offcanvas-pusher {
    -webkit-transform-origin : 0% 50%;
    -moz-transform-origin    : 0% 50%;
    -ms-transform-origin     : 0% 50%;
    -o-transform-origin      : 0% 50%;
    transform-origin         : 0% 50%;
    -webkit-perspective      : 1200px;
    -moz-perspective         : 1200px;
    -ms-perspective          : 1200px;
    -o-perspective           : 1200px;
    perspective              : 1200px;

    }

.offcanvas-right.rotate-pusher .offcanvas-pusher {
    -webkit-transform-origin : 100% 50%;
    -moz-transform-origin    : 100% 50%;
    -ms-transform-origin     : 100% 50%;
    -o-transform-origin      : 100% 50%;
    transform-origin         : 100% 50%;

    -webkit-perspective      : 1200px;
    -moz-perspective         : 1200px;
    -ms-perspective          : 1200px;
    -o-perspective           : 1200px;
    perspective              : 1200px;

    }

.offcanvas-left.rotate-pusher.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0) rotateY(-15deg);
    -moz-transform    : translate3d(300px, 0, 0) rotateY(-15deg);
    -ms-transform     : translate3d(300px, 0, 0) rotateY(-15deg);
    -o-transform      : translate3d(300px, 0, 0) rotateY(-15deg);
    transform         : translate3d(300px, 0, 0) rotateY(-15deg);
    }

.offcanvas-right.rotate-pusher.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0) rotateY(15deg);
    -moz-transform    : translate3d(-300px, 0, 0) rotateY(15deg);
    -ms-transform     : translate3d(-300px, 0, 0) rotateY(15deg);
    -o-transform      : translate3d(-300px, 0, 0) rotateY(15deg);
    transform         : translate3d(-300px, 0, 0) rotateY(15deg);
    }

.offcanvas-left.rotate-pusher .offcanvas-container {
    -webkit-transform        : translate3d(-100%, 0, 0);
    -moz-transform           : translate3d(-100%, 0, 0);
    -ms-transform            : translate(-100%, 0);
    -o-transform             : translate3d(-100%, 0, 0);
    transform                : translate3d(-100%, 0, 0);
    -webkit-transform-origin : 100%;
    -moz-transform-origin    : 100%;
    -ms-transform-origin     : 100%;
    -o-transform-origin      : 100%;
    transform-origin         : 100%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-right.rotate-pusher .offcanvas-container {
    -webkit-transform        : translate3d(100%, 0, 0);
    -moz-transform           : translate3d(100%, 0, 0);
    -ms-transform            : translate(100%, 0);
    -o-transform             : translate3d(100%, 0, 0);
    transform                : translate3d(100%, 0, 0);
    -webkit-transform-origin : 0%;
    -moz-transform-origin    : 0%;
    -ms-transform-origin     : 0%;
    -o-transform-origin      : 0%;
    transform-origin         : 0%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-left.rotate-pusher.offcanvas-open .offcanvas-container {
    visibility        : visible;
    -webkit-transform : translate3d(-100%, 0, 0) rotateY(15deg);
    -moz-transform    : translate3d(-100%, 0, 0) rotateY(15deg);
    -ms-transform     : translate3d(-100%, 0, 0) rotateY(15deg);
    -o-transform      : translate3d(-100%, 0, 0) rotateY(15deg);
    transform         : translate3d(-100%, 0, 0) rotateY(15deg);
    }

.offcanvas-right.rotate-pusher.offcanvas-open .offcanvas-container {
    visibility        : visible;

    -webkit-transform : translate3d(100%, 0, 0) rotateY(-15deg);
    -moz-transform    : translate3d(100%, 0, 0) rotateY(-15deg);
    -ms-transform     : translate3d(100%, 0, 0) rotateY(-15deg);
    -o-transform      : translate3d(100%, 0, 0) rotateY(-15deg);
    transform         : translate3d(100%, 0, 0) rotateY(-15deg);
    }

.rotate-pusher .offcanvas-container::after {
    display : none;
    }


.offcanvas-left.three-d-rotate-in.offcanvas-wrapper {
    -webkit-perspective        : 1500px;
    -moz-perspective           : 1500px;
    -ms-perspective            : 1500px;
    -o-perspective             : 1500px;
    perspective                : 1500px;
    -webkit-perspective-origin : 0% 50%;
    -mos-perspective-origin    : 0% 50%;
    -ms-perspective-origin     : 0% 50%;
    -o-perspective-origin      : 0% 50%;
    perspective-origin         : 0% 50%;
    }

.offcanvas-right.three-d-rotate-in.offcanvas-wrapper {
    -webkit-perspective        : 1500px;
    -moz-perspective           : 1500px;
    -ms-perspective            : 1500px;
    -o-perspective             : 1500px;
    perspective                : 1500px;
    -webkit-perspective-origin : 100% 50%;
    -moz-perspective-origin    : 100% 50%;
    -ms-perspective-origin     : 100% 50%;
    -o-perspective-origin      : 100% 50%;
    perspective-origin         : 100% 50%;
    }

.three-d-rotate-in .offcanvas-pusher {
    -webkit-transform-style : preserve-3d;
    -moz-transform-style    : preserve-3d;
    -ms-transform-style     : preserve-3d;
    -o-transform-style      : preserve-3d;
    transform-style         : preserve-3d;
    }

.offcanvas-left.three-d-rotate-in.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.three-d-rotate-in.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.offcanvas-left.three-d-rotate-in .offcanvas-container {
    -webkit-transform        : translate3d(-100%, 0, 0) rotateY(-90deg);
    -moz-transform           : translate3d(-100%, 0, 0) rotateY(-90deg);
    -ms-transform            : translate(-100%, 0) rotateY(-90deg);
    -o-transform             : translate3d(-100%, 0, 0) rotateY(-90deg);
    transform                : translate3d(-100%, 0, 0) rotateY(-90deg);
    -webkit-transform-origin : 100% 50%;
    -moz-transform-origin    : 100% 50%;
    -ms-transform-origin     : 100% 50%;
    -o-transform-origin      : 100% 50%;
    transform-origin         : 100% 50%;

    }

.offcanvas-right.three-d-rotate-in .offcanvas-container {
    -webkit-transform        : translate3d(100%, 0, 0) rotateY(90deg);
    -moz-transform           : translate3d(100%, 0, 0) rotateY(90deg);
    -ms-transform            : translate(100%, 0) rotateY(90deg);
    -o-transform             : translate3d(100%, 0, 0) rotateY(90deg);
    transform                : translate3d(100%, 0, 0) rotateY(90deg);
    -webkit-transform-origin : 0% 50%;
    -moz-transform-origin    : 0% 50%;
    -ms-transform-origin     : 0% 50%;
    -o-transform-origin      : 0% 50%;
    transform-origin         : 0% 50%;

    }

.offcanvas-left.three-d-rotate-in.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(-100%, 0, 0) rotateY(0deg);
    -mos-transform     : translate3d(-100%, 0, 0) rotateY(0deg);
    -ms-transform      : translate(-100%, 0) rotateY(0deg);
    -o-transform       : translate3d(-100%, 0, 0) rotateY(0deg);
    transform          : translate3d(-100%, 0, 0) rotateY(0deg);
    }

.offcanvas-right.three-d-rotate-in.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(100%, 0, 0) rotateY(0deg);
    -moz-transform     : translate3d(100%, 0, 0) rotateY(0deg);
    -ms-transform      : translate(100%, 0) rotateY(0deg);
    -o-transform       : translate3d(100%, 0, 0) rotateY(0deg);
    transform          : translate3d(100%, 0, 0) rotateY(0deg);
    }


.offcanvas-left.three-d-rotate-out.offcanvas-wrapper {
    -webkit-perspective        : 1500px;
    -moz-perspective           : 1500px;
    -ms-perspective            : 1500px;
    -o-perspective             : 1500px;
    perspective                : 1500px;
    -webkit-perspective-origin : 0% 50%;
    -moz-perspective-origin    : 0% 50%;
    -ms-perspective-origin     : 0% 50%;
    -o-perspective-origin      : 0% 50%;
    perspective-origin         : 0% 50%;
    }

.offcanvas-right.three-d-rotate-out.offcanvas-wrapper {
    -webkit-perspective        : 1500px;
    -moz-perspective           : 1500px;
    -ms-perspective            : 1500px;
    -o-perspective             : 1500px;
    perspective                : 1500px;
    -webkit-perspective-origin : 100% 50%;
    -moz-perspective-origin    : 100% 50%;
    -ms-perspective-origin     : 100% 50%;
    -o-perspective-origin      : 100% 50%;
    perspective-origin         : 100% 50%;
    }

.three-d-rotate-out .offcanvas-pusher {
    -webkit-transform-style : preserve-3d;
    -moz-transform-style    : preserve-3d;
    -ms-transform-style     : preserve-3d;
    -o-transform-style      : preserve-3d;
    transform-style         : preserve-3d;
    }

.offcanvas-left.three-d-rotate-out.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.three-d-rotate-out.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.offcanvas-left.three-d-rotate-out .offcanvas-container {
    -webkit-transform        : translate3d(-100%, 0, 0) rotateY(90deg);
    -moz-transform           : translate3d(-100%, 0, 0) rotateY(90deg);
    -ms-transform            : translate(-100%, 0) rotateY(90deg);
    -o-transform             : translate3d(-100%, 0, 0) rotateY(90deg);
    transform                : translate3d(-100%, 0, 0) rotateY(90deg);
    -webkit-transform-origin : 100% 50%;
    -moz-transform-origin    : 100% 50%;
    -ms-transform-origin     : 100% 50%;
    -o-transform-origin      : 100% 50%;
    transform-origin         : 100% 50%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-right.three-d-rotate-out .offcanvas-container {
    -webkit-transform        : translate3d(100%, 0, 0) rotateY(-90deg);
    -moz-transform           : translate3d(100%, 0, 0) rotateY(-90deg);
    -ms-transform            : translate(100%, 0) rotateY(-90deg);
    -o-transform             : translate3d(100%, 0, 0) rotateY(-90deg);
    transform                : translate3d(100%, 0, 0) rotateY(-90deg);
    -webkit-transform-origin : 0% 50%;
    -moz-transform-origin    : 0% 50%;
    -ms-transform-origin     : 0% 50%;
    -o-transform-origin      : 0% 50%;
    transform-origin         : 0% 50%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-left.three-d-rotate-out.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(-100%, 0, 0) rotateY(0deg);
    -moz-transform     : translate3d(-100%, 0, 0) rotateY(0deg);
    -ms-transform      : translate(-100%, 0) rotateY(0deg);
    -o-transform       : translate3d(-100%, 0, 0) rotateY(0deg);
    transform          : translate3d(-100%, 0, 0) rotateY(0deg);
    }

.offcanvas-right.three-d-rotate-out.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(100%, 0, 0) rotateY(0deg);
    -moz-transform     : translate3d(100%, 0, 0) rotateY(0deg);
    -ms-transform      : translate(100%, 0) rotateY(0deg);
    -o-transform       : translate3d(100%, 0, 0) rotateY(0deg);
    transform          : translate3d(100%, 0, 0) rotateY(0deg);
    }

.three-d-rotate-out .offcanvas-container::after {
    display : none;
    }

.scale-down-pusher.offcanvas-wrapper {
    -webkit-perspective : 1000px;
    -moz-perspective    : 1000px;
    -ms-perspective     : 1000px;
    -o-perspective      : 1000px;
    perspective         : 1000px;
    }

.scale-down-pusher .offcanvas-pusher {
    -webkit-transform-style : preserve-3d;
    -moz-transform-style    : preserve-3d;
    -ms-transform-style     : preserve-3d;
    -o-transform-style      : preserve-3d;
    transform-style         : preserve-3d;
    }

.scale-down-pusher.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(0, 0, -300px);
    -moz-transform    : translate3d(0, 0, -300px);
    -ms-transform     : translate3d(0, 0, -300px);
    -o-transform      : translate3d(0, 0, -300px);
    transform         : translate3d(0, 0, -300px);
    overflow          : hidden;
    }

.offcanvas-left.scale-down-pusher .offcanvas-container {
    opacity           : 1;
    -webkit-transform : translate3d(-100%, 0, 0);
    -moz-transform    : translate3d(-100%, 0, 0);
    -ms-transform     : translate(-100%, 0);
    -o-transform      : translate3d(-100%, 0, 0);
    transform         : translate3d(-100%, 0, 0);
    }

.offcanvas-right.scale-down-pusher .offcanvas-container {
    opacity           : 1;
    -webkit-transform : translate3d(100%, 0, 0);
    -moz-transform    : translate3d(100%, 0, 0);
    -ms-transform     : translate(100%, 0);
    -o-transform      : translate3d(100%, 0, 0);
    transform         : translate3d(100%, 0, 0);
    }

.scale-down-pusher.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -webkit-transform 0.5s;
    -ms-transition     : -webkit-transform 0.5s;
    -o-transition      : -webkit-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(0, 0, 0);
    -moz-transform     : translate3d(0, 0, 0);
    -ms-transform      : translate(0, 0);
    -o-transform       : translate3d(0, 0, 0);
    transform          : translate3d(0, 0, 0);
    }

.scale-down-pusher .offcanvas-container::after {
    display : none;
    }


.scale-up.offcanvas-wrapper {
    -webkit-perspective        : 1000px;
    -moz-perspective           : 1000px;
    -ms-perspective            : 1000px;
    -o-perspective             : 1000px;
    perspective                : 1000px;
    -webkit-perspective-origin : 0% 50%;
    -moz-perspective-origin    : 0% 50%;
    -ms-perspective-origin     : 0% 50%;
    -o-perspective-origin      : 0% 50%;
    perspective-origin         : 0% 50%;
    }

.offcanvas-left.scale-up.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.scale-up.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.offcanvas-left.scale-up .offcanvas-container {
    z-index           : 1;
    opacity           : 1;
    -webkit-transform : translate3d(0, 0, -300px);
    -moz-transform    : translate3d(0, 0, -300px);
    -ms-transform     : translate3d(0, 0, -300px);
    -o-transform      : translate3d(0, 0, -300px);
    transform         : translate3d(0, 0, -300px);
    }

.offcanvas-right.scale-up .offcanvas-container {
    z-index           : 1;
    opacity           : 1;
    -webkit-transform : translate3d(150%, 0, -300px);
    -moz-transform    : translate3d(150%, 0, -300px);
    -ms-transform     : translate3d(150%, 0, -300px);
    -o-transform      : translate3d(150%, 0, -300px);
    transform         : translate3d(150%, 0, -300px);
    }

.scale-up.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(0, 0, 0);
    -moz-transform     : translate3d(0, 0, 0);
    -ms-transform      : translate(0, 0);
    -o-transform       : translate3d(0, 0, 0);
    transform          : translate3d(0, 0, 0);
    }


.scale-rotate-pusher.offcanvas-wrapper {
    -webkit-perspective : 1000px;
    -moz-perspective    : 1000px;
    -ms-perspective     : 1000px;
    -o-perspective      : 1000px;
    perspective         : 1000px;
    }

.scale-rotate-pusher .offcanvas-pusher {
    -webkit-transform-style : preserve-3d;
    -moz-transform-style    : preserve-3d;
    -ms-transform-style     : preserve-3d;
    -o-transform-style      : preserve-3d;
    transform-style         : preserve-3d;
    }

.offcanvas-left.scale-rotate-pusher.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(100px, 0, -600px) rotateY(-20deg);
    -moz-transform    : translate3d(100px, 0, -600px) rotateY(-20deg);
    -ms-transform     : translate3d(100px, 0, -600px) rotateY(-20deg);
    -o-transform      : translate3d(100px, 0, -600px) rotateY(-20deg);
    transform         : translate3d(100px, 0, -600px) rotateY(-20deg);
    overflow          : hidden;
    }

.offcanvas-right.scale-rotate-pusher.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-100px, 0, -600px) rotateY(20deg);
    -moz-transform    : translate3d(-100px, 0, -600px) rotateY(20deg);
    -ms-transform     : translate3d(-100px, 0, -600px) rotateY(20deg);
    -o-transform      : translate3d(-100px, 0, -600px) rotateY(20deg);
    transform         : translate3d(-100px, 0, -600px) rotateY(20deg);
    overflow          : hidden;

    }

.offcanvas-left.scale-rotate-pusher .offcanvas-container {
    opacity           : 1;
    -webkit-transform : translate3d(-100%, 0, 0);
    -moz-transform    : translate3d(-100%, 0, 0);
    -ms-transform     : translate(-100%, 0);
    -o-transform      : translate3d(-100%, 0, 0);
    transform         : translate3d(-100%, 0, 0);
    }

.offcanvas-right.scale-rotate-pusher .offcanvas-container {
    opacity           : 1;
    -webkit-transform : translate3d(100%, 0, 0);
    -moz-transform    : translate3d(100%, 0, 0);
    -ms-transform     : translate(100%, 0);
    -o-transform      : translate3d(100%, 0, 0);
    transform         : translate3d(100%, 0, 0);
    }

.scale-rotate-pusher.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(0, 0, 0);
    -moz-transform     : translate3d(0, 0, 0);
    -ms-transform      : translate(0, 0);
    -o-transform       : translate3d(0, 0, 0);
    transform          : translate3d(0, 0, 0);
    }

.scale-rotate-pusher .offcanvas-container::after {
    display : none;
    }


.open-door.offcanvas-wrapper {
    -webkit-perspective : 1000px;
    -moz-perspective    : 1000px;
    -ms-perspective     : 1000px;
    -o-perspective      : 1000px;
    perspective         : 1000px;
    }

.offcanvas-left.open-door .offcanvas-pusher {
    -webkit-transform-origin : 100% 50%;
    transform-origin         : 100% 50%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-right.open-door .offcanvas-pusher {
    -webkit-transform-origin : 0% 50%;
    -moz-transform-origin    : 0% 50%;
    -ms-transform-origin     : 0% 50%;
    -o-transform-origin      : 0% 50%;
    transform-origin         : 0% 50%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-left.open-door.offcanvas-open .offcanvas-pusher {
    -webkit-transform : rotateY(-10deg);
    -moz-transform    : rotateY(-10deg);
    -ms-transform     : rotateY(-10deg);
    -o-transform      : rotateY(-10deg);
    transform         : rotateY(-10deg);
    overflow          : hidden;
    }

.offcanvas-right.open-door.offcanvas-open .offcanvas-pusher {
    -webkit-transform : rotateY(10deg);
    -moz-transform    : rotateY(10deg);
    -ms-transform     : rotateY(10deg);
    -o-transform      : rotateY(10deg);
    transform         : rotateY(10deg);
    overflow          : hidden;
    }

.offcanvas-left.open-door .offcanvas-container {
    opacity           : 1;
    -webkit-transform : translate3d(-100%, 0, 0);
    -moz-transform    : translate3d(-100%, 0, 0);
    -ms-transform     : translate(-100%, 0);
    -o-transform      : translate3d(-100%, 0, 0);
    transform         : translate3d(-100%, 0, 0);
    }

.offcanvas-right.open-door .offcanvas-container {
    opacity           : 1;
    -webkit-transform : translate3d(100%, 0, 0);
    -moz-transform    : translate3d(100%, 0, 0);
    -ms-transform     : translate(100%, 0);
    -o-transform      : translate3d(100%, 0, 0);
    transform         : translate3d(100%, 0, 0);
    }

.open-door.offcanvas-open .offcanvas-container {
    visibility         : visible;
    -webkit-transition : -webkit-transform 0.5s;
    -moz-transition    : -moz-transform 0.5s;
    -ms-transition     : -ms-transform 0.5s;
    -o-transition      : -o-transform 0.5s;
    transition         : transform 0.5s;
    -webkit-transform  : translate3d(0, 0, 0);
    -moz-transform     : translate3d(0, 0, 0);
    -ms-transform      : translate(0, 0);
    -o-transform       : translate3d(0, 0, 0);
    transform          : translate3d(0, 0, 0);
    }

.open-door .offcanvas-container::after {
    display : none;
    }


.fall-down.offcanvas-wrapper {
    -webkit-perspective        : 1500px;
    -moz-perspective           : 1500px;
    -ms-perspective            : 1500px;
    -o-perspective             : 1500px;
    perspective                : 1500px;
    -webkit-perspective-origin : 0% 50%;
    -moz-perspective-origin    : 0% 50%;
    -ms-perspective-origin     : 0% 50%;
    -o-perspective-origin      : 0% 50%;
    perspective-origin         : 0% 50%;
    }

.offcanvas-left.fall-down.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.fall-down.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.fall-down .offcanvas-container {
    z-index           : 1;
    opacity           : 1;
    -webkit-transform : translate3d(0, -100%, 0);
    -moz-transform    : translate3d(0, -100%, 0);
    -ms-transform     : translate(0, -100%);
    -o-transform      : translate3d(0, -100%, 0);
    transform         : translate3d(0, -100%, 0);
    }

.fall-down.offcanvas-open .offcanvas-container {
    visibility                         : visible;
    -webkit-transition-timing-function : ease-in-out;
    transition-timing-function         : ease-in-out;
    -webkit-transition-property        : -webkit-transform;
    transition-property                : transform;
    -webkit-transform                  : translate3d(0, 0, 0);
    -moz-transform                     : translate3d(0, 0, 0);
    -ms-transform                      : translate(0, 0);
    -o-transform                       : translate3d(0, 0, 0);
    transform                          : translate3d(0, 0, 0);
    -webkit-transition-speed           : 0.2s;
    transition-speed                   : 0.2s;
    }


.offcanvas-left.delayed-three-d-rotate.offcanvas-wrapper {
    -webkit-perspective        : 1500px;
    -moz-perspective           : 1500px;
    -ms-perspective            : 1500px;
    -o-perspective             : 1500px;
    perspective                : 1500px;
    -webkit-perspective-origin : 0% 50%;
    -moz-perspective-origin    : 0% 50%;
    -ms-perspective-origin     : 0% 50%;
    -o-perspective-origin      : 0% 50%;
    perspective-origin         : 0% 50%;
    }

.offcanvas-right.delayed-three-d-rotate.offcanvas-wrapper {
    -webkit-perspective        : 1500px;
    -moz-perspective           : 1500px;
    -ms-perspective            : 1500px;
    -o-perspective             : 1500px;
    perspective                : 1500px;
    -webkit-perspective-origin : 100% 50%;
    -moz-perspective-origin    : 100% 50%;
    -ms-perspective-origin     : 100% 50%;
    -o-perspective-origin      : 100% 50%;
    perspective-origin         : 100% 50%;
    }

.delayed-three-d-rotate .offcanvas-pusher {
    -webkit-transform-style : preserve-3d;
    -moz-transform-style    : preserve-3d;
    -ms-transform-style     : preserve-3d;
    -o-transform-style      : preserve-3d;
    transform-style         : preserve-3d;
    }

.offcanvas-left.delayed-three-d-rotate.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(300px, 0, 0);
    -moz-transform    : translate3d(300px, 0, 0);
    -ms-transform     : translate(300px, 0);
    -o-transform      : translate3d(300px, 0, 0);
    transform         : translate3d(300px, 0, 0);
    }

.offcanvas-right.delayed-three-d-rotate.offcanvas-open .offcanvas-pusher {
    -webkit-transform : translate3d(-300px, 0, 0);
    -moz-transform    : translate3d(-300px, 0, 0);
    -ms-transform     : translate(-300px, 0);
    -o-transform      : translate3d(-300px, 0, 0);
    transform         : translate3d(-300px, 0, 0);
    }

.offcanvas-left.delayed-three-d-rotate .offcanvas-container {
    -webkit-transform        : translate3d(-100%, 0, 0) rotateY(90deg);
    -moz-transform           : translate3d(-100%, 0, 0) rotateY(90deg);
    -ms-transform            : translate(-100%, 0) rotateY(90deg);
    -o-transform             : translate3d(-100%, 0, 0) rotateY(90deg);
    transform                : translate3d(-100%, 0, 0) rotateY(90deg);
    -webkit-transform-origin : 0% 50%;
    -moz-transform-origin    : 0% 50%;
    -ms-transform-origin     : 0% 50%;
    -o-transform-origin      : 0% 50%;
    transform-origin         : 0% 50%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-right.delayed-three-d-rotate .offcanvas-container {
    -webkit-transform        : translate3d(100%, 0, 0) rotateY(-90deg);
    -moz-transform           : translate3d(100%, 0, 0) rotateY(-90deg);
    -ms-transform            : translate(100%, 0) rotateY(-90deg);
    -o-transform             : translate3d(100%, 0, 0) rotateY(-90deg);
    transform                : translate3d(100%, 0, 0) rotateY(-90deg);
    -webkit-transform-origin : 100% 50%;
    -moz-transform-origin    : 100% 50%;
    -ms-transform-origin     : 100% 50%;
    -o-transform-origin      : 100% 50%;
    transform-origin         : 100% 50%;
    -webkit-transform-style  : preserve-3d;
    -moz-transform-style     : preserve-3d;
    -ms-transform-style      : preserve-3d;
    -o-transform-style       : preserve-3d;
    transform-style          : preserve-3d;
    }

.offcanvas-left.delayed-three-d-rotate.offcanvas-open .offcanvas-container {
    visibility                         : visible;
    -webkit-transition-delay           : 0.1s;
    transition-delay                   : 0.1s;
    -webkit-transition-timing-function : ease-in-out;
    transition-timing-function         : ease-in-out;
    -webkit-transition-property        : -webkit-transform;
    transition-property                : transform;
    -webkit-transform                  : translate3d(-100%, 0, 0) rotateY(0deg);
    -moz-transform                     : translate3d(-100%, 0, 0) rotateY(0deg);
    -ms-transform                      : translate(-100%, 0) rotateY(0deg);
    -o-transform                       : translate3d(-100%, 0, 0) rotateY(0deg);
    transform                          : translate3d(-100%, 0, 0) rotateY(0deg);
    }

.offcanvas-right.delayed-three-d-rotate.offcanvas-open .offcanvas-container {
    visibility                         : visible;
    -webkit-transition-delay           : 0.1s;
    transition-delay                   : 0.1s;
    -webkit-transition-timing-function : ease-in-out;
    transition-timing-function         : ease-in-out;
    -webkit-transition-property        : -webkit-transform;
    transition-property                : transform;
    -webkit-transform                  : translate3d(100%, 0, 0) rotateY(0deg);
    -moz-transform                     : translate3d(100%, 0, 0) rotateY(0deg);
    -ms-transform                      : translate(100%, 0) rotateY(0deg);
    -o-transform                       : translate3d(100%, 0, 0) rotateY(0deg);
    transform                          : translate3d(100%, 0, 0) rotateY(0deg);
    }


.ie9 .reveal .offcanvas-container,
.ie10 .reveal .offcanvas-container,
.ie11 .reveal .offcanvas-container {
    display : none !important;
    }

.ie9 .reveal.offcanvas-open .offcanvas-container,
.ie10 .reveal.offcanvas-open .offcanvas-container,
.ie11 .reveal.offcanvas-open .offcanvas-container {
    display : block !important;
    }