#sidebar.active {
    left: 0;
}

body.offcanvas-active{
	overflow:hidden;
}

.offcanvas-header{ 
	display:none; 
}

#topbar-closed{
	z-index: 100;
}

.screen-overlay {
  width:0%;
  height: 100%;
  z-index: 30;
  position: fixed;
  top: 0;
  left: 0;
  opacity:0;
  visibility:hidden;
  background-color: rgba(34, 34, 34, 0.6);
  transition:opacity .2s linear, visibility .1s, width 1s ease-in;
   }
.screen-overlay.show {
    transition:opacity .5s ease, width 0s;
    opacity:1;
	width:100%;
	height: 100%;
	visibility:visible;
	
}
	
@media (max-width:992px) { 
	
	.offcanvas-header{ display:block; }

	.mobile-offcanvas{
		visibility: hidden;
		transform:translateX(-100%);
	    border-radius:0; 
		display:block;
	    position: fixed;
	    top: 0; left:0;
	    height: 100%;
	    z-index: 10000;
	    width:40%;
	    overflow-x: hidden;
	    transition: visibility .2s ease-in-out, transform .2s ease-in-out;
	}

	.mobile-offcanvas.show{
		visibility: visible;
    	transform: translateX(0);
	}

	#topbar{
		display: none;
	}
}

@media all and (min-width:992px) { 
	#topbar-closed{
		display: none;
	}

	#navbar_main{
		display: none;
	}
}