#active-offsetcanvas {
  position: relative;
  z-index: 10100;
}

#sidebar-offsetcanvas{
  top: 0%;
  position: fixed;
  z-index: 10025;
}

/* BOTON ACTION OFFSET CANVAS */
#sidebar-offsetcanvas {
   display: inline-block;
   overflow: hidden;
   transition: 1s all;
   transition-property: all;
   transition-duration: 1s;
   transition-timing-function: cubic-bezier(0.57, 0.93, 0.29, 0.66);
   transition-delay: 0s;
}

#sidebar-offsetcanvas.clicked {
	overflow-y: scroll;
}

#sidebar-offsetcanvas::-webkit-scrollbar {
	width: 15px;
}

/*IZQUIERDA - DERECHA*/
#sidebar-offsetcanvas.left {
 left: -100vw;
}

#sidebar-offsetcanvas.left.clicked {
  left: 0vw;
}

/*DERECHA - IZQUIERDA*/
#sidebar-offsetcanvas.right {
 right: -100vw;
}

 #sidebar-offsetcanvas.right.clicked {
   right: 0vw;
 }

 /*ARRIBA - ABAJO*/
 #sidebar-offsetcanvas.top {
  top: -100vh;
 }

 #sidebar-offsetcanvas.top.clicked {
  top: 0vh;
 }

 /* IMAGEN BOTON */
#active-offsetcanvas img {
  width: 100%;
  height: auto;
}