#nav, #nav ul, #nav li {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  box-sizing: border-box;
}

#nav {
  position: relative;
  min-height: 60px;
  max-width: 100%;
  color: #fff;
  margin-top: 60px;
  margin-bottom: 60px;
}

@media screen and (min-width: 650px) {
 #nav { display: inline-block; }
}

@media screen and (max-width: 650px) {
	#nav { display: block; }
}

#nav li { position: relative; }

#nav a {
  text-decoration: none;
  height: 100%;
  display: block;
  padding: 0 20px;
}

@media screen and (min-width: 650px) {
	#nav a:focus { outline: none; }
}

.plusMark {
  margin-left: 10px;
  font-size: 20px;
  font-weight: 700;
}

@media screen and (min-width: 650px) {
	#nav li {
  	text-align: left;
  	width: 200px;
	}
}

@media screen and (max-width: 650px) {
	#nav li {
  	text-align: center;
  	width: 100%;
	}
}
/* Any sub menu */
@media screen and (min-width: 650px) {
	a + ul { position: absolute; }
	a + ul:not(.js-showElement) { display: none; }
}

@media screen and (max-width: 650px) {
	a + ul { position: relative; }
	a + ul:not(.js-hideElement) { display: block; }
}


/* The Main Navigation Bar - Navigation Level One */

#nav > ul, .fa {
  height: 100%;
  line-height: 60px;
  display:block;
}

#nav > ul > li {
  position: relative;
  text-align: center;
}

@media screen and (min-width: 650px) {
	#nav > ul > li {
  	float: left;
  	width: auto;
	}
}

@media screen and (max-width: 650px) {
	#nav > ul > li {
  	float: none;
  	display: block;
  	width: 100%;
	}
}

#nav > ul > li > a, #nav #toggleMenu.js-open a,#nav > ul > li > ul > li > a, #nav > ul > li > ul > li > ul > li > a   {
		--pico-background-color: var(--pico-primary-background);
		--pico-border-color: var(--pico-primary-border);
		--pico-color: var(--pico-primary-inverse);
		--pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
		padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
		border: var(--pico-border-width) solid var(--pico-border-color);
		border-radius: var(--pico-border-radius);
		outline: 0;
		background-color: var(--pico-background-color);
		box-shadow: var(--pico-box-shadow);
		color: var(--pico-color);
		font-weight: var(--pico-font-weight);
		font-size: 1rem;
		line-height: var(--pico-line-height);
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;
		transition:background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition)
	}
 }

#nav > ul > li > a:hover, #nav > ul > li > a:focus, #nav > ul > li > a.js-openSubMenu, #nav > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > a:focus, #nav > ul > li > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > ul > li > a:focus {
	--pico-background-color: var(--pico-primary-hover-background);
	--pico-border-color: var(--pico-primary-hover-border);
	--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
	--pico-color:var(--pico-primary-inverse)
}

#nav > ul > li:not(#toggleMenu):not(.js-showElement) { /* first level nav li except toggleMenu icon */ }

@media screen and (min-width: 650px) {
	#nav > ul > li: not(#toggleMenu): not(.js-showElement) { display: inline-block; }
}

@media screen and (max-width: 650px) {
	#nav > ul > li: not(#toggleMenu): not(.js-showElement) { display: none; }
}

@media screen and (min-width: 650px) {
	#nav #toggleMenu { display: none; }
}

@media screen and (max-width: 650px) {
	#nav #toggleMenu {
  	display: block;
  	width: 100%;
	}

	#nav #toggleMenu.js-open .fa-times { display: block; }

	#nav #toggleMenu.js-open .fa-bars { display: none; }

	#nav #toggleMenu:not(.js-open) .fa-times { display: none; }

	#nav #toggleMenu:not(.js-open) .fa-bars { display: block; }
}

span#toggleMenu-text {
  position: absolute;
  opacity: 0;
}

/* Second Level Dropdown */


@media screen and (min-width: 650px) {
	#nav > ul > li > ul {
		top: 60px;
		left: 0;
	}
}

@media screen and (max-width: 650px) {
	#nav > ul > li > ul {
  	width: 100%;
  	position: relative;
	}

	#nav > ul > li > ul:not(.js-showElement) { display: none; }
}



/* Third Level Dropdown */

@media screen and (min-width: 650px) {
	#nav > ul > li > ul > li > ul {
  	top: 0;
  	left: 200px;/* width of ul */
	}
}

@media screen and (max-width: 650px) {
	#nav > ul > li > ul > li > ul {
  	width: 100%;
  	position: relative;
	}

	#nav > ul > li > ul > li > ul:not(.js-showElement) { display: none; }
}




/* Javascript classes */



#nav .js-hideElement { display: none; }

#nav .js-showElement { display: block; }