/*------------------------------------*\
    MOBILE NAV
\*------------------------------------*/

#mobile-nav {
	position:fixed;
	height:100%;
	width:270px;
	top:0;
	background: #f19214;
		background: -moz-radial-gradient(center, ellipse cover,  #f19214 36%, #e0691f 100%);
		background: -webkit-radial-gradient(center, ellipse cover,  #f19214 36%,#e0691f 100%);
		background: radial-gradient(ellipse at center,  #f19214 36%,#e0691f 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f19214', endColorstr='#e0691f',GradientType=1 );
	z-index:11000;
	left:-270px;
	transition:all 0.4s ease;
	overflow-y:auto;
}

#mobile-nav.triggered {
	left:0;
}

#mobile-nav ul {
	padding:0;
	margin:0;
	width:100%;
	list-style:none;
}

#mobile-nav .sub-menu {
    background-color: rgba(51, 68, 110, 0.15);
    padding: 0 30px 0 30px;
}

#mobile-nav .sub-menu a {
    display: block;
    padding: 15px 0;
}

#mobile-nav .sub-menu li {
	border-bottom: 1px solid #fff;
	position:relative;
}

#mobile-nav .sub-menu li:last-child {
	border-bottom: none;
}

#mobile-nav .sub-menu li:before {
	border-color: transparent transparent transparent #fff;
    border-image: none;
    border-radius: 0;
    border-style: solid;
    border-width: 8px;
    content: "";
    height: 0;
    left: -16px;
    opacity: 0;
    position: absolute;
    top: 18px;
    width: 0;
	
}

#mobile-nav .sub-menu li:hover:before, #mobile-nav .sub-menu li.active:before {
    opacity:1;
}


#mobile-nav .menu > ul > li {
    font-size: 16px;
    max-height: 60px;
    overflow: hidden;
    transition:all 0.4s ease;
    position:relative;
    border-bottom: 1px solid #fff;
}

#mobile-nav li.level-2 {
   
    font-size:14px;
    transition:all 0.4s ease;
}

#mobile-nav li.level-2 a {
	color:#fff;
}

#mobile-nav li.level-2.active > a {
	color: #fff;	
	font-size:14px;
}


#mobile-nav .menu > ul > li.expanded {
	
}
#mobile-nav .menu > ul > li > a {
	padding:0px 15px;
	display:block;
	height:60px;
	line-height:60px;
	color:#fff;
}

#mobile-nav .menu > ul > li.active > a {
	background-color:#fff;
	color:#444;
	font-weight:normal;
}


#mobile-nav .menu > ul > li.has-children {
	position:relative;
}

.expand {
    height: 40px;
    position: absolute;
    right: 0;
    top: 10px;
    width: 40px;
    z-index:100;
    cursor:pointer;
}

.expand span {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	-webkit-transform:translate(-50%, -50%);
	height:2px;
	width:18px;
	background-color:#fff;
	transition:all 0.4s ease;
}

.expand .bar1 {
	transform:translate(-50%, -50%) rotate(90deg);
	-webkit-transform:translate(-50%, -50%) rotate(90deg);
}

.expanded > .expand span, .active > .expand span {
	background-color:#000;
}

.expanded > .expand .bar1 {
	transform:translate(-50%, -50%) rotate(0deg);
	-webkit-transform:translate(-50%, -50%) rotate(0deg);
}

#menu-trigger {
	width:40px;
	height:40px;
	position:fixed;
	top:0px;
	right:10px;
	z-index:10500;
}

.bar {
    background-color:#fff;
    display: block;
    height: 2px;
    left: 9px;
    position: absolute;
    width: 22px;
    z-index: 9999;
    opacity:1;
    transition:all 0.4s ease;
}

.triggered .bar {
	background-color:#fff;
}

.bar.top {
	top: 12px;
}

.bar.middle {
    top: 19px;
}

.bar.bottom {
    top: 26px;
}

.triggered .bar.top {
    top: 20px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.triggered .bar.middle {
    opacity: 0;
}

.triggered .bar.bottom {
    top: 20px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}


#overlay {
	width:100%;
	height:100%;
	position:fixed;
	z-index:10400;
	background-color:rgba(0,0,0,0.8);
	opacity:0;
	top:0;
	left:-100%;
	transition:opacity 0.4s ease, left 0s linear 0.4s;
}

#overlay.triggered {
	left:0;
	opacity:1;
	transition:opacity 0.4s ease;
}

#mobile-nav a:hover, #mobile-nav a:focus, #mobile-nav a:active {
	text-decoration:none;
}