/*
 * Off Canvas
 * ------------------------------------------------------------
 */

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

.overlay {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	background: #000;
    opacity: 0;
	position: fixed;
	visibility: hidden;
	z-index: 999; /* Modal: 1040 */

	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}

.overlay.active {
	opacity: 0.2;
	visibility: visible;
}

.overlay-right.active {
	right: 50%;
}

.overlay-left.active {
	left: 50%;
}

@media screen and (max-width: 767px)
{

	.row-offcanvas {
		position: relative;
		-webkit-transition: all 0.25s ease-out;
		-moz-transition: all 0.25s ease-out;
		transition: all 0.25s ease-out;
	}

	.canvas-right {
		right: 50%;
	}

	.canvas-left {
		left: 50%;
	}

	.sidebar-offcanvas-right {
		right: -50%;
	}

	.sidebar-offcanvas-left {
		left: -50%;
	}

	.sidebar-offcanvas {
		position: absolute;
		top: 0;
		width: 50%;
	}
}

@media screen and (min-width: 768px) and (max-width: 991px)
{
	.container {
		width: 100% !important; /* The container has to be close to the page border */
		padding-right: 15px;
		padding-left: 25px; /* 15 > 25 because of custom gutter in bootstrap */
		margin-right: auto;
		margin-left: auto;
	}

	.navbar-header {
		float: none;
	}

	.navbar-toggle.pull-right {
		display: block;
	}

	.row-offcanvas {
		position: relative;
		-webkit-transition: all 0.25s ease-out;
		-moz-transition: all 0.25s ease-out;
		transition: all 0.25s ease-out;
	}

	.canvas-right {
		right: 50%;
	}

	.sidebar-offcanvas-right {
		right: -50%;
	}

	.sidebar-offcanvas.sidebar-offcanvas-right {
		position: absolute;
		top: 0;
		width: 50%;
	}

	.overlay-left {
		display: none !important; /* Hide overlay if viewport does not allow canvas, but canvas is active */
	}
}

@media screen and (min-width: 992px)
{
	.overlay-left,
	.overlay-right {
		display: none !important; /* Hide overlay if viewport does not allow canvas, but canvas is active */
	}
}

/*
 * No script classes (keep this page working with disabled JS)
 * ------------------------------------------------------------
 */

.no-js .navbar-toggle {
	display: none !important;
}

.no-js #canvas-right {
	float: left;
}