body.offcanvas-active {
	overflow:hidden;
}

.offcanvas-header { display:none; }

.mobile-offcanvas {
	
}

.screen-darken {
	height: 100%; width:0%;
	z-index: 30;
	position: fixed; top: 0; right: 0; 
	opacity:0; visibility:hidden;
	background-color: rgba(34, 34, 34, 0.6);
	transition:opacity .2s linear, visibility 0.2s, width 2s ease-in;
}

.screen-darken.active {
	z-index:10; 
	transition:opacity .3s ease, width 0s;
	opacity:1;
	width:100%;
	visibility:visible;
}

@media (max-width: 992px) {
	.offcanvas-collapse {
		position: fixed;
		top: 67.5px; /* Height of navbar */
		bottom: 0;
		left: 100%;
		width: 100%;
		padding-right: 1rem;
		padding-left: 1rem;
		overflow-y: auto;
		visibility: hidden;
		background-color: #07000B;
		border-top: 1px white;
		transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
		z-index: 1040;

	}

	.offcanvas-collapse.open {
		visibility: visible;
		transform: translateX(-50%);
	}

	.mobile-offcanvas {
		background-color: #07000B;
	}

}