/**

Hippo Offcanvas

styling: selectors

.hippo-offcanvas-contents

*/

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

.hippo-offcanvas-contents {
    /* overflow-y : scroll;
 background : #f3efe0; */
    }

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

    }

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

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

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

.hippo-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;
    }

.hippo-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;
    }

.hippo-offcanvas-open .hippo-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;
    }

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

.hippo-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;
    }

.hippo-offcanvas-open .hippo-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;
    }

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

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

/*.hippo-offcanvas-container > div::-webkit-scrollbar{
    width: 5px;
}

.hippo-offcanvas-container > div::-webkit-scrollbar-track{
    background-color: #1F1F23;
}

.hippo-offcanvas-container > div::-webkit-scrollbar-thumb{
    background-color: #808080;
}*/

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

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

/* Individual effects */

/*
 Effect 1: Slide in on top
 Name: slide-in-on-top
*/

.hippo-offcanvas-left.slide-in-on-top.hippo-offcanvas-open .hippo-offcanvas-container,
.hippo-offcanvas-right.slide-in-on-top.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-left.slide-in-on-top .hippo-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);
    }

.hippo-offcanvas-right.slide-in-on-top .hippo-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 .hippo-offcanvas-container::after {
    display : none;
    }

/* Effect 2: Reveal : done */

.hippo-offcanvas-left.reveal.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-right.reveal.hippo-offcanvas-open .hippo-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 .hippo-offcanvas-container {
    z-index    : 0;
    visibility : hidden;
    opacity: 0;
    }

.reveal.hippo-offcanvas-open .hippo-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 .hippo-offcanvas-container::after {
    display : none;
    }

/* Effect 3: Push done */

.hippo-offcanvas-left.push-down.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-right.push-down.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-left.push-down .hippo-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);
    }

.hippo-offcanvas-right.push-down .hippo-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.hippo-offcanvas-open .hippo-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 .hippo-offcanvas-container::after {
    display : none;
    }

/* Effect 4: Slide along : done*/

.hippo-offcanvas-left.slide-along.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-right.slide-along.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-left.slide-along .hippo-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);
    }

.hippo-offcanvas-right.slide-along .hippo-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.hippo-offcanvas-open .hippo-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 .hippo-offcanvas-container::after {
    display : none;
    }

/* Effect 5: Reverse slide out  done */
.hippo-offcanvas-left.reverse-slide-out.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-right.reverse-slide-out.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-left.reverse-slide-out .hippo-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);
    }

.hippo-offcanvas-right.reverse-slide-out .hippo-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.hippo-offcanvas-open .hippo-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);
    }

/* Effect 6: Rotate pusher   done */

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

.hippo-offcanvas-left.rotate-pusher .hippo-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;

    /* -webkit-transform-style  : preserve-3d;
     transform-style          : preserve-3d;*/
    }

.hippo-offcanvas-right.rotate-pusher .hippo-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;

    /*-webkit-transform-style  : preserve-3d;
    transform-style          : preserve-3d;*/
    }

.hippo-offcanvas-left.rotate-pusher.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-right.rotate-pusher.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-left.rotate-pusher .hippo-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;
    }

.hippo-offcanvas-right.rotate-pusher .hippo-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;
    }

.hippo-offcanvas-left.rotate-pusher.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-right.rotate-pusher.hippo-offcanvas-open .hippo-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 .hippo-offcanvas-container::after {
    display : none;
    }

/* Effect 7: 3D rotate in done */

.hippo-offcanvas-left.three-d-rotate-in.hippo-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%;
    }

.hippo-offcanvas-right.three-d-rotate-in.hippo-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 .hippo-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;
    }

.hippo-offcanvas-left.three-d-rotate-in.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-right.three-d-rotate-in.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-left.three-d-rotate-in .hippo-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;
     transform-style          : preserve-3d;*/
    }

.hippo-offcanvas-right.three-d-rotate-in .hippo-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;
     transform-style          : preserve-3d;*/
    }

.hippo-offcanvas-left.three-d-rotate-in.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-right.three-d-rotate-in.hippo-offcanvas-open .hippo-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);
    }

/* Effect 8: 3D rotate out  done */

.hippo-offcanvas-left.three-d-rotate-out.hippo-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%;
    }

.hippo-offcanvas-right.three-d-rotate-out.hippo-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 .hippo-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;
    }

.hippo-offcanvas-left.three-d-rotate-out.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-right.three-d-rotate-out.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-left.three-d-rotate-out .hippo-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;
    }

.hippo-offcanvas-right.three-d-rotate-out .hippo-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;
    }

.hippo-offcanvas-left.three-d-rotate-out.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-right.three-d-rotate-out.hippo-offcanvas-open .hippo-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 .hippo-offcanvas-container::after {
    display : none;
    }

/* Effect 9: Scale down pusher  done */
.scale-down-pusher.hippo-offcanvas-wrapper {
    -webkit-perspective : 1000px;
    -moz-perspective    : 1000px;
    -ms-perspective     : 1000px;
    -o-perspective      : 1000px;
    perspective         : 1000px;
    }

.scale-down-pusher .hippo-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.hippo-offcanvas-open .hippo-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;
    }

.hippo-offcanvas-left.scale-down-pusher .hippo-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);
    }

.hippo-offcanvas-right.scale-down-pusher .hippo-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.hippo-offcanvas-open .hippo-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 .hippo-offcanvas-container::after {
    display : none;
    }

/* Effect 10: Scale up  done */

.scale-up.hippo-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%;
    }

.hippo-offcanvas-left.scale-up.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-right.scale-up.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-left.scale-up .hippo-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);
    }

.hippo-offcanvas-right.scale-up .hippo-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.hippo-offcanvas-open .hippo-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);
    }

/* Effect 11: Scale and rotate pusher  done */

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

.scale-rotate-pusher .hippo-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;
    }

.hippo-offcanvas-left.scale-rotate-pusher.hippo-offcanvas-open .hippo-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;
    }

.hippo-offcanvas-right.scale-rotate-pusher.hippo-offcanvas-open .hippo-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;

    }

.hippo-offcanvas-left.scale-rotate-pusher .hippo-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);
    }

.hippo-offcanvas-right.scale-rotate-pusher .hippo-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.hippo-offcanvas-open .hippo-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 .hippo-offcanvas-container::after {
    display : none;
    }

/* Effect 12: Open door  done*/

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

.hippo-offcanvas-left.open-door .hippo-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;
    }

.hippo-offcanvas-right.open-door .hippo-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;
    }

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

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

.hippo-offcanvas-left.open-door .hippo-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);
    }

.hippo-offcanvas-right.open-door .hippo-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.hippo-offcanvas-open .hippo-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 .hippo-offcanvas-container::after {
    display : none;
    }

/* Effect 13: Fall down  done */

.fall-down.hippo-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%;
    }

.hippo-offcanvas-left.fall-down.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-right.fall-down.hippo-offcanvas-open .hippo-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 .hippo-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.hippo-offcanvas-open .hippo-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;
    }

/* Effect 14: Delayed 3D rotate */

.hippo-offcanvas-left.delayed-three-d-rotate.hippo-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%;
    }

.hippo-offcanvas-right.delayed-three-d-rotate.hippo-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 .hippo-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;
    }

.hippo-offcanvas-left.delayed-three-d-rotate.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-right.delayed-three-d-rotate.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-left.delayed-three-d-rotate .hippo-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;
    }

.hippo-offcanvas-right.delayed-three-d-rotate .hippo-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;
    }

.hippo-offcanvas-left.delayed-three-d-rotate.hippo-offcanvas-open .hippo-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);
    }

.hippo-offcanvas-right.delayed-three-d-rotate.hippo-offcanvas-open .hippo-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);
    }

/*IE fix*/
.ie9 .reveal .hippo-offcanvas-container,
.ie10 .reveal .hippo-offcanvas-container,
.ie11 .reveal .hippo-offcanvas-container {
    display : none !important;
    }

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