html,
body {
	overflow-x: hidden;
	/* Prevent scroll on narrow devices */
}

@media (max-width: 518px) {
	.offcanvas-collapse {
		width: 100%;
	}
}

@media (min-width: 519px) and (max-width: 991px) {
	.offcanvas-collapse {
		width: 44% !important;
		right: -16px;

	}
}

@media (max-width: 991px) {
	.offcanvas-collapse {
		position: fixed;
		top: 0;
		/* Height of navbar */
		padding-top: 56px;
		bottom: 0;
		/*width: 100%;*/
		padding-right: 1rem;
		padding-left: 1rem;
		overflow-y: auto;
		transition: -webkit-transform .3s ease-in-out;
		transition: transform .3s ease-in-out;
		transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
        z-index: 1;
	}
	.offcanvas-collapse.open {
		-webkit-transform: translateX(-1rem);
		transform: translateX(-1rem);
		/* Account for horizontal padding on navbar */
	}
}

@media (max-width: 782px) {
    .logged-in.admin-bar .offcanvas-collapse {
        top: 46px;
    }
}

@media (min-width: 783px) {
    .logged-in.admin-bar .offcanvas-collapse {
        top: 32px;
    }
}