/* Base */

html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	font-family: Helvetica, Arial, sans-serif;
	background:#333;
}

#page {
	position: relative; /* Set the position property so z-index will apply */
	z-index: 20; /* Make sure this is higher than #menu */

	padding: 20px;

	background: #fff;
	min-height: 100%;
}

.toggle-menu {
	display:none;
}
.toggle-menu.btn {
	padding: 15px 10px;
	border: 1px solid #eee;
	background:#fff;
}
@media screen and (max-width:767px) {
	.toggle-menu {
		display:block;
	}
}
#toggle-menu {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index:99999;
}

#mobilemenu {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	height:100%;
	overflow:hidden;
	overflow-y:scroll;

	background: #333;
	z-index: 10; /* Make sure the z-index is lower than the #page */
}

#mobilemenu ul {
	width: 240px;
	padding: 15px 25px;
	margin: 0;

	list-style: none;
}

#mobilemenu a {
	display: block;
	color: #fff;
	padding: 15px 0;
	border-bottom: 1px solid #fff;
}

/* Animations */

#page, #mobilemenu {
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

/* Hide the menu unless it's animating or visible */
.animating #mobilemenu, .menu-visible #mobilemenu {
	display: block;
}

/***
* If the animating class is present then apply
* the CSS transition to #page over 250ms.
*/
.animating #page {
	transition: transform .25s ease-in-out;
	-webkit-transition: -webkit-transform .25s ease-in-out;
}

/***
* If the left class is present then transform
* the #page element 240px to the left.
*/	
.animating.left #page {
	transform: translate3d( 240px, 0, 0 );
	-webkit-transform: translate3d( 240px, 0, 0 );
}

/***
* If the right class is present then transform
* the #page element 240px to the right.
*/
.animating.right #page {
	transform: translate3d( -240px, 0, 0 );
	-webkit-transform: translate3d( -240px, 0, 0 );
}

/***
* If the menu-visible class is present then
* shift the #page 240px from the right edge
* via position: absolute to keep it in the 
* open position. When .animating, .left and
* .right classes are not present the CSS
* transform does not apply to #page.
*/
.menu-visible #page {
	left: 240px;
}

#mobilemenu .nav-item {
	position:relative;
}
#mobilemenu .nav-item .nav-link.sub {
	padding-right:30px;
}

#mobilemenu .nav-item .collapser {
	width:30px;
	height:30px;
	margin:0;
	text-align:center;
	display:block;
	position:absolute;
	top:10px;
	right:0;
	z-index:40;
	cursor:pointer;
}
#mobilemenu .nav-item .collapser:after {
	content:"\f107";
	font:normal normal normal 14px/1 FontAwesome;
	text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font-size:2em;
	line-height:30px;
	display:block;
}
#mobilemenu .nav-item.opened > .collapser:after {
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}

#mobilemenu .nav-item ul {
	display:none;
}