a {
  color: inherit; }

/*
 *	Accessible Multi-Level Dropdown Navigation Menu
 *	Created by Ire Aderinokun
 *
 */
/* Resets */






#nav, #nav ul, #nav li {
  margin: auto auto;
  padding: 0;
  border: 0;
  list-style: none;
  box-sizing: border-box; 
	text-align: center !important;
	color: #ffffff !important;
	width: 100%;
	transition-delay: 5s;
}

#nav {
  position: relative;
  min-height: 20px !important;
  width: 100%;
	max-width: 100%;
  background-color: #156eb4;
  color: #ffffff !important;
  border: 1px solid #156eb4; 
	
	margin: auto auto;
  padding: 0.3em 0.2em;
  text-align: center !important;
				
	transition-delay: 5s;



}
  @media screen and (min-width: 1024px) {
    #nav {
      display: block;
			transition-delay: 5s;
    } }
  @media screen and (max-width: 1024px) {
    #nav {
      display: inline-block;
			color: #ffffff !important;
			transition-delay: 5s;
    } }

#nav li {
  position: relative; 
	text-align: center !important;
	margin: auto auto !important;
	color: #ffffff !important;
	background: #156eb4 !important;
	display: inline-block;
	width: 100%;

	transition-delay: 5s;
}




span#toggleMenu-text {
	color: #ffffff !important;
	background: inherit;
}

span#toggleMenu-text:hover {
	color: #ffffff !important;
	background: inherit !important;
}

#nav a {
  text-decoration: none;
  height: 100%;
  display: inline-block;
  padding: 0 20px !important; 
	text-align: center !important;
	color: #ffffff !important;
	z-index: 25 !important;
	background: #156eb4;
	width: 100%;
	transition: all 0.5s ease;
}

#nav a:hover {
  text-decoration: none;
  height: 100%;
  display: inline-block;
  padding: 0 20px !important; 
	text-align: center !important;
	color: #ffffff !important;
	background: #156eb4 !important;
	z-index: 25 !important;
	transition: all 0.5s ease;
	width: 100%;
}

@media screen and (min-width: 1024px) {
  #nav a:focus {
    outline: none;
		display: inline-block;
		width: 100%;
		transition: all 0.5s ease;
  } }

/*
.plusMark {
  margin-left: 10px;
  font-size: 20px;
  font-weight: 700;
	color: #ffffff !important;
	display: inline-block;
}

*/

@media screen and (min-width: 1024px) {
  #nav li {
    text-align: left;
    width: 100% !important; 
		display: inline-block;
		background: #156eb4;
		transition: all 0.5s ease;
  } }
@media screen and (max-width: 1024px) {
  #nav li {
    text-align: center;
    width: 100%;
		color: #ffffff !important;
		display: block;
		z-index: 25;
		transition: all 0.5s ease;
  } 
}

/* Any sub menu */
@media screen and (min-width: 1024px) {
  a + ul {
    position: absolute;
		color: #ffffff !important;
		display: inline-block;
		transition: all 0.5s ease;
  }
    a + ul:not(.js-showElement) {
      display: none;
			transition: all 0.5s ease;
    } }

@media screen and (max-width: 1024px) {
  a + ul {
    position: relative;
		color: #ffffff !important;
		display: inline-block;
		transition: all 0.5s ease;
  }
    a + ul:not(.js-hideElement) {
      display: inline-block; 
			color: #ffffff !important;
			transition: all 0.5s ease;
    } }




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

#nav > ul, .fa {
  height: 100%;
  line-height: 1.2; 
	text-align: center !important;
	display: inline-block;
	color: #ffffff !important;
	transition: all 0.5s ease;
}

#nav > ul > li {
  position: relative;
  text-align: center; 
	color: #ffffff !important;
	transition: all 0.5s ease;
}
  @media screen and (min-width: 1024px) {
    #nav > ul > li {
      float: none;
      width: auto; } }
  @media screen and (max-width: 1024px) {
    #nav > ul > li {
      float: none;
      display: inline-block;
      width: 100%;
			color: #ffffff !important;
    } }

#nav > ul > li > a {
  background-color: #156eb4; 
	text-align: center !important;
	color: #ffffff !important;
	display: inline-block;
	transition: all 0.5s ease;
}
  #nav > ul > li > a:hover, #nav > ul > li > a:focus, #nav > ul > li > a.js-openSubMenu {
    background: #00adee !important; 
		text-align: center !important;
		z-index: 25 !important;
		color: #ffffff !important;
		display: inline-block;
		transition: all 0.5s ease;
  }

#nav > ul > li:hover > a, #nav > ul > li:focus > a {
  background-color: #00adee !important;
	text-align: center !important;
	z-index: 25 !important;
	color: #ffffff !important;
	display: inline-block;
	transition: all 0.5s ease;
}

@media screen and (min-width: 1024px) {
  #nav > ul > li:not(:last-child) {
    border-right: none;
    border-bottom: none;
		display: inline-block;
		transition: all 0.5s ease;
  } }


@media screen and (max-width: 1024px) {
  #nav > ul > li:not(:last-child) {
    border-right: none;
		color: #ffffff !important;
		display: inline-block;
		z-index: 25;
		transition: all 0.5s ease;
  }
    #nav > ul > li:not(:last-child):not(:first-child) {
      border-bottom: none;
			color: #ffffff !important;
			display: inline-block;
			z-index: 25;
			transition: all 0.5s ease;
    } }

#nav > ul > li:not(#toggleMenu):not(.js-showElement) {
	color: #ffffff !important;
	display: inline-block;
	z-index: 25;
	transition: all 0.5s ease;
}

	
	
	
	
	
	
	/* first level nav li except toggleMenu icon */ 

  @media screen and (min-width: 1024px) {
    #nav > ul > li:not(#toggleMenu):not(.js-showElement) {
      display: inline-block;
			color: #ffffff !important;
    } }
  
	@media screen and (max-width: 1024px) {
    #nav > ul > li:not(#toggleMenu):not(.js-showElement) {
      display: none;
			color: #ffffff !important;
    } }





@media screen and (min-width: 1024px) {
  #nav #toggleMenu {
    display: none;
		color: #ffffff !important;
  } }
@media screen and (max-width: 1024px) {
  #nav #toggleMenu {
    display: inline-block;
    width: 100%; 
		color: #ffffff !important;
		z-index: 25;
  }
    #nav #toggleMenu.js-open {
      border-bottom: none;
			color: #ffffff !important;
			display: inline-block;
			z-index: 25;
    }
      #nav #toggleMenu.js-open .fa-times {
        display: inline-block;
				color: #ffffff !important;
				z-index: 25;
      }
      #nav #toggleMenu.js-open .fa-bars {
        display: none;
				color: #ffffff !important;
				z-index: 25;
      }
     
			 #nav #toggleMenu.js-open a:hover {
				color: #ffffff !important;
        background-color: #00adee;
				display: inline-block;
				z-index: 25;
			 }
    #nav #toggleMenu:not(.js-open) .fa-times {
      display: none;
			color: #ffffff !important;
			z-index: 25;
    }
    #nav #toggleMenu:not(.js-open) .fa-bars {
      display: inline-block;
			color: #ffffff !important;
			z-index: 25;
    } }


	



 /*Second Level Dropdown*/ 

#nav > ul > li > ul {
  background-color: #156eb4 }
  @media screen and (min-width: 1024px) {
    #nav > ul > li > ul {
      top: 2.2em;
      left: 0; } }
  @media screen and (max-width: 1024px) {
    #nav > ul > li > ul {
      width: 100%;
      position: relative;
    }
      #nav > ul > li > ul:not(.js-showElement) {
        display: none; } }

#nav > ul > li > ul > li > a {
  background-color: #156eb4;
	display: inline-block;
}
  
#nav > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > a:focus {
    background-color: #00adee !important;
		z-index: 25 !important;
		display: inline-block;
  }

#nav > ul > li > ul > li:not(:last-child) a {
  border-bottom: 1px solid #00adee;
	display: inline-block !important;
}
	





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

/*
@media screen and (max-width: 1024px) {
  #nav > ul > li > ul > li > ul {
    width: 100%;
    position: relative; }
    #nav > ul > li > ul > li > ul:not(.js-showElement) {
      display: none; } }

#nav > ul > li > ul > li > ul > li > a {
  background-color: #23282d; }
  #nav > ul > li > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > ul > li > a:focus {
    background-color: #00adee;
		z-index: 25 !important;
  }

#nav > ul > li > ul > li > ul > li:not(:last-child) > a {
  border-bottom: 1px solid #00adee; }
	*/


/* Javascript classes */
#nav .js-hideElement {
  display: none; }

#nav .js-showElement {
  display: inline-block;
	z-index: 25 !important;
}

/* Fallback for users without javascript */
html.no-js li:hover > a + ul, html.no-js li:focus > a + ul {
  display: inline-block;
	z-index: 25 !important;
}
@media screen and (max-width: 1024px) {
  html.no-js #nav:hover > ul > li:not(#toggleMenu), html.no-js #nav:focus > ul > li:not(#toggleMenu) {
    display: block;
		z-index: 25 !important;
  }
  html.no-js #nav:hover li:hover > a + ul, html.no-js #nav:hover li:focus > a + ul, html.no-js #nav:focus li:hover > a + ul, html.no-js #nav:focus li:focus > a + ul {
    display: inline-block;
		z-index: 25 !important;
  } }