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

@media screen and (max-width: 991px) {
	.row-offcanvas {
		position: relative;
		-webkit-transition: all .25s ease-out;
		   -moz-transition: all .25s ease-out;
				transition: all .25s ease-out;
	}
	.toggle-container {
		height: 50px;
	}
	.toggle-link {
		background: #333;
		padding: 12px;
		position: absolute;
		top: 5px;
		text-decoration: none;
		color: #fff;
		font-size: 15px !important;
		z-index: 6;
	}
	.toggle-link:hover {
		text-decoration: none !important;
	}
	.left-toggle {
		left: 0;
	}
	.right-toggle {
		right: 0;
	}
	.left-toggle.left-toggle-fix {
		position: fixed;
		top: 0;
		left: 0;
	}
	.right-toggle.right-toggle-fix {
		position: fixed;
		top: 0;
		right: 0;
	}
	.left-open .left-toggle.left-toggle-fix {
		left: 270px;
	}
	.left-open .right-toggle.right-toggle-fix {
		right: -270px;
	}
	.right-open .right-toggle.right-toggle-fix {
		right: 270px;
	}
	.right-open .left-toggle.left-toggle-fix {
		left: -270px;
	}
	.toggle-link span {
		color: #fff;
		font-size: 15px;
	}
	.left-container {
		position: absolute;
		top: 0;
		left: -280px;
		width: 280px;
	}
	.row-offcanvas.left-open .center-container {
		right: -280px;
	}
	.row-offcanvas.left-open .left-container {
	  left: 0;
	}
	.right-container {
		position: absolute;
		top: 0;
		right: -280px;
		width: 280px;
	}
	.row-offcanvas.right-open .center-container {
		left: -280px;
	}
	.row-offcanvas.right-open .right-container {
	  right: 0;
	}

}

@media screen and (max-width: 767px) {
	.left-container {
		left: -270px;
		width: 270px;
	}
	.row-offcanvas.left-open .center-container {
		right: -270px;
	}
	.right-container {
		right: -270px;
		width: 270px;
	}
	.row-offcanvas.right-open .center-container {
		left: -270px;
	}
}

@media screen and (max-width: 450px) {
	.left-container {
		left: -260px;
		width: 260px;
	}
	.row-offcanvas.left-open .center-container {
		right: -260px;
	}
	.right-container {
		right: -260px;
		width: 260px;
	}
	.row-offcanvas.right-open .center-container {
		left: -260px;
	}
}
