/*------------------------------------*\
    OFF-CANVAS-STYLES
\*------------------------------------*/
.off-canvas-wrap {
  -webkit-backface-visibility: hidden;
  position: relative;
  width: 100%;
  overflow: hidden; 
}
.inner-wrap {
  position: relative;
  width: 100%;
  -webkit-transition: -webkit-transform 300ms ease-in-out;
  -moz-transition: -moz-transform 300ms ease-in-out;
  -ms-transition: -ms-transform 300ms ease-in-out;
  -o-transition: -o-transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out; 
  z-index: 1001;
}
.off-canvas-wrap.move-right, .off-canvas-wrap.move-left {
  min-height: 100%;
  -webkit-overflow-scrolling: touch; 
}
.inner-wrap::before, .inner-wrap::after {
  content: " ";
  display: table; 
}
.inner-wrap::after {
  clear: both;
}
.move-right > .inner-wrap {
  -ms-transform: translate(77%, 0);
  -webkit-transform: translate3d(77%, 0, 0);
  -moz-transform: translate3d(77%, 0, 0);
  -ms-transform: translate3d(77%, 0, 0);
  -o-transform: translate3d(77%, 0, 0);
  transform: translate3d(77%, 0, 0); 
}
.move-right .exit-off-canvas {
  -webkit-backface-visibility: hidden;
  transition: background 300ms ease;
  cursor: pointer;
  box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1002;
  -webkit-tap-highlight-color: transparent; 
  
}
.move-right .exit-off-canvas:hover {
  background: rgba(255, 255, 255, 0.05); 
}


.left-off-canvas-menu {
  -webkit-backface-visibility: hidden;
  width: 77%;
  top: 0;
  bottom: 0;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  background: lightgrey;
  z-index: -1;
  box-sizing: content-box;
  transition: transform 300ms ease-in-out 0s;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  left: 0; 
}
.left-off-canvas-menu * {
  -webkit-backface-visibility: hidden; 
}
.right-off-canvas-menu {
  -webkit-backface-visibility: hidden;
  width: 77%;
  top: 0;
  bottom: 0;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  background: lightgrey;
  z-index: 1001;
  box-sizing: content-box;
  transition: transform 500ms ease 0s;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -ms-transform: translate(100%, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  right: 0; 
}

.right-off-canvas-menu * {
  -webkit-backface-visibility: hidden; 
}
.move-left > .inner-wrap {
  -ms-transform: translate(-77%, 0);
  -webkit-transform: translate3d(-77%, 0, 0);
  -moz-transform: translate3d(-77%, 0, 0);
  -ms-transform: translate3d(-77%, 0, 0);
  -o-transform: translate3d(-77%, 0, 0);
  transform: translate3d(-77%, 0, 0); }

.move-left .exit-off-canvas {
  -webkit-backface-visibility: hidden;
  transition: background 300ms ease;
  cursor: pointer;
  box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1002;
  -webkit-tap-highlight-color: transparent; 
}

@media only screen and (min-width: 992px) {
  .move-left .exit-off-canvas:hover {
    background: rgba(255, 255, 255, 0.05); 
  } 
  .offcanvas-overlap .exit-off-canvas:hover {
    background: rgba(255, 255, 255, 0.05); 
  }
  .offcanvas-overlap-left .exit-off-canvas:hover {
    background: rgba(255, 255, 255, 0.05); 
  }
  .offcanvas-overlap-right .exit-off-canvas:hover {
    background: rgba(255, 255, 255, 0.05); 
  }
}
.offcanvas-overlap-left .right-off-canvas-menu {
  -ms-transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -o-transform: none;
  transform: none;
  z-index: 1003; 
}
.offcanvas-overlap-left .exit-off-canvas {
  -webkit-backface-visibility: hidden;
  transition: background 300ms ease;
  cursor: pointer;
  box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1002;
  -webkit-tap-highlight-color: transparent; 
}
.offcanvas-overlap-right .left-off-canvas-menu {
  -ms-transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -o-transform: none;
  transform: none;
  z-index: 1003; }
.offcanvas-overlap-right .exit-off-canvas {
  -webkit-backface-visibility: hidden;
  transition: background 300ms ease;
  cursor: pointer;
  box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1002;
  -webkit-tap-highlight-color: transparent; }
/*current-menu-parents and current-menu-ancestors of the current-menu-items stays opened in offcanvas nav*/
aside .opened > .sub-menu {
  display: block !important;
  margin-left: 1em; 
  margin-bottom: 1em;
  border-left: 2px solid rgba(68, 68, 68, 0.2);
}
.sub-menu .menu-item {
  border-top: none;
  border-left: 2px solid rgba(68, 68, 68, 0.1);
}
aside .nav ul .menu-item.current-menu-ancestor > .sub-menu, aside .current-menu-parent > .sub-menu  {
  display: block;
}