/*
*Template Name: Unship
*Description: HTML5 / CSS3 Multi Page
*Version: 1.0
*Author: uiCookies.
**************************************
*/

/*-----------------------------------
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 > .offcanvas-wrap {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
   /* visibility : hidden;    Remove or Comments for windows scroll */;
}

.hippo-offcanvas-container > div > div {
  visibility: visible;
}

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

/*End of Offcanvas Menu Core Styels*/



/* ----------------------------------------------------------------
Offcanvas Style For Customization
-------------------------------------------------------------------*/
.hippo-offcanvas-container {
  background: #27272C;
}

.hippo-offcanvas-pusher::after {
  z-index: 1200;
}

.offcanvas-menu {
  left: -1000px;
}

.offcanvas-menu .off-canvas-header {
  height: auto;
  overflow: hidden;
}

#off-canvas-close-btn {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  width: 50px;
  height: 50px;
  text-shadow: none;
  opacity: 1;
}

#off-canvas-close-btn:hover,
#off-canvas-close-btn:focus {
  background: #1a8ae1;
  outline: none;
}

#offcanvasMenu li a {
  position: relative;
  display: block;
  padding: 20px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
}

#offcanvasMenu li a .fa {
  position: absolute;
  right: 20px;
  font-size: 18px;
  line-height: 30px;
}

#offcanvasMenu li li a {
  font-size: 12px;
  font-weight: 400;
  padding-left: 30px;
}

#offcanvasMenu li a:hover,
#offcanvasMenu li.active a {
  background: #1a8ae1;
  color: #fff;
  text-decoration: none;
}

#offcanvasMenu >li ul {
  display: none;
}

#offcanvasMenu li.open ul {
  display: block;
}

#offcanvasMenu li.open > a > i {
  transform: rotateZ(90deg);
}

.offcanvas-widgets {
  padding: 0 10px;
  color: #727e89;
}

.offcanvas-widgets #twitterWidget {
  margin-bottom: 30px;
}

.offcanvas-widgets h2 {
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  color: #fff;
}