.offcanvas-active{overflow:hidden;}
.screen-overlay { width:100%; height: 100%;z-index:50000; position: fixed; top: 0; left: 0; opacity:0;
  visibility:hidden; background-color: rgba(0, 0, 0, 0.6); transition:opacity .2s linear, visibility .1s, width 1s ease-in;  }
.opt { background-color: rgba(0, 0, 0, 0.0);}

.screen-overlay.show { transition:opacity .5s ease, width 0s;  opacity:1; width:100%; visibility:visible;}

.offcanvas{	width:270px; height:100%; visibility: hidden;	transform:translateX(-100%);transition:all .2s;
  border-radius:0; 	display:block;
  position: fixed; top: 0; left: 0;  overflow-y: scroll; overflow-x: hidden;z-index:60000;
 
  }

.offcanvas-right { right: -15px; left: auto; transform: translateX(100%);  }

.offcanvas.show{visibility: visible;  transform: translateX(0); transition: transform .2s;}
.offcanvas .btn-close { position: absolute; left:0px; top:50px; color:#fff;  }
.offcanvas .btn-close i { font-size:2rem }