/* LEFT SUB-NAVIGATION */
/* ####################################################################*/

#section-nav {
	width:100%;
	position:relative;
	height:100%;
	padding:0;
	margin:20px 0;
	background-color:#fff;
	border-radius:2px;
	border-top:solid 4px #6a737e;
	box-shadow:0px 0px 1px 1px #ccc;
}

#section-nav h2 {
	display:none;
}

/* BASICS */
#section-nav ul.menu-sections,
#section-nav ul.menu-sections li {
	margin:0;
	padding:0;
	list-style:none;
}
#section-nav ul.menu-sections a,
#section-nav ul.menu-sections a:link,
#section-nav ul.menu-sections a:visited {
  font:400 16px "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	display:block;
	padding:.5em 10px;
	font-weight:400;
	color:#607d8b;
	text-decoration:none;
	border-left:solid 3px transparent;
	border-bottom:solid 1px #ccc;
	background-color:transparent;
	-webkit-transition: all 200ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
	   -moz-transition: all 200ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
		 -o-transition: all 200ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
			transition: all 200ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
	   -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
		 -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
			transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
	#section-nav ul.menu-sections a:hover,
	#section-nav ul.menu-sections a:active {
		background-color:#fff;
		color:#37474f;
		border-left:solid 3px #777;
	}

/* FIRST LEVEL */
#section-nav ul.menu-sections li.first > a,
#section-nav ul.menu-sections li.first > a:link,
#section-nav ul.menu-sections li.first > a:visited {
	font:300 20px "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:left;
	color:#333;
	background-color:#e2e2e4;
	border-left:none;
	text-decoration:none;
}
	#section-nav ul.menu-sections li.first > a:hover,
	#section-nav ul.menu-sections li.first > a:active {
		color:#111;
	}

/* SECOND LEVEL */

/* toggle */
#section-nav ul.menu-sections ul {
	display:none;
  padding:0;
}
#section-nav-toggle {
	position:absolute;
	z-index:1000;
	top:0;
	left:0;
	width:100%;
	color:#444;
	font-size:1.5em;
	cursor:pointer;
}
	#section-nav-toggle a {
		background-color:transparent;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		padding:3px 15px;
		text-decoration:none;
		text-align:right;
	}
		#section-nav-toggle a:hover {
			background:rgba(0,0,0,.02);
		}
	#section-nav-toggle span {
		width:initial;
		height:initial;
		color:transparent;
	}
	#section-nav-toggle i:before {
		color:#666;
		padding:.6em 0;
	}

/* second-level menu */

ul.menu-sections li.menu-item-has-children > a {
	border-bottom:solid 1px #ccc !important;
	display: block !important;
	background-color:  #FFF !important;
}

#section-nav ul.menu-sections a.active,
#section-nav ul.menu-sections li.first > a.active {
	border-left:solid 3px #777;
	color:#000 !important;
}
#section-nav ul.menu-sections li.first > a,
#section-nav ul.menu-sections li.first > a:link,
#section-nav ul.menu-sections li.first > a:visited {
	font:300 20px "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	display:block;
	border-left: none !important;
	padding:8px 10px;
	color:#333;
	text-decoration:none;
	border-bottom:solid 1px #ccc;
	background-color:#e2e2e4;
}
	#section-nav ul.menu-sections li.first > a:hover,
	#section-nav ul.menu-sections li.first > a:active {
		background-color:#fff;
		border-left:solid 3px #777;
		color:#000;
		text-decoration:none;
	}

/* THIRD LEVEL */
#section-nav ul.menu-sections ul ul {
	padding-left:5%;
}
	#section-nav ul.menu-sections ul ul a,
	#section-nav ul.menu-sections ul ul a:link,
	#section-nav ul.menu-sections ul ul a:visited {
		font-size:14px;
		border-left:none;
		padding:4px 10px !important;
	}
		#section-nav ul.menu-sections ul ul a:hover,
		#section-nav ul.menu-sections ul ul a:active {
			border-left:none;
			text-decoration:underline;
			color:#000;
		}
	#section-nav ul.menu-sections ul ul li.first > a,
	#section-nav ul.menu-sections ul ul li.first > a:link,
	#section-nav ul.menu-sections ul ul li.first > a:visited {
		font-size:14px;
		border-bottom:none;
		border-left:none;
	}
	#section-nav ul.menu-sections ul ul li.first > a:hover,
	#section-nav ul.menu-sections ul ul li.first > a:active {
		border-left:none;
		text-decoration:underline;
		color:#000;
	}
	#section-nav ul.menu-sections ul ul a.active,
	#section-nav ul.menu-sections ul ul li.first > a.active {
		border-left:none !important;
		color:#000 !important;
		text-decoration:underline !important;
	}


@media screen and (min-width : 768px) {

	#section-nav ul.menu-sections ul {
		display:block !important;
    padding-left:0;
	}
	#section-nav-toggle {
		display:none;
	}
}