/*
html {
  font-family: 'Muli', sans-serif; }
*/

a {
  color: inherit; }

/*
 *	Accessible Multi-Level Dropdown Navigation Menu
 *	Created by Ire Aderinokun
 *
 */
/* Resets */
#nav, #nav ul, #nav li {
  width:100%;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  box-sizing: border-box; }


#nav {
  position: relative;
  min-height: 50px;
  max-width: 100%;
  background-color: #555555;
  color: #FFF;
  margin-bottom: 2em;
  border-bottom:1px solid #FFF;}
  @media screen and (min-width: 980px) {
    #nav {
      display: inline-block; } }
  @media screen and (max-width: 980px) {
    #nav {
      display: block; } }

#nav li {
  position: relative; }

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

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

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

@media screen and (min-width: 980px) {
  #nav li {
    text-align: left;
    width: 18em; /*width of subnav level 2*/
    } }
@media screen and (max-width: 980px) {
  #nav li {
    text-align: left;
    width: 100%; } }
/* /////////////////////////////////////////////// */
/* Any sub menu */
@media screen and (min-width: 980px) {
  a + ul {
    position: absolute; }
    a + ul:not(.js-showElement) {
      display: none; } }
@media screen and (max-width: 980px) {
  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: 50px;
  }

#nav > ul > li {
  position: relative;
  text-align: left; }
/* text-align: left moves all links to left */
/* ... but keep the MENU link in center. */
#nav > ul > li#toggleMenu {
  text-align: center;
}

/* a little space between the fa.icon and the text */
ul li a i.fa {margin-right: 0.1em;}
ul.level-two li a i.fa {margin-left: 0.5em;}
/* /////////////////////////////////////////////// */
ul li.level-one {font-weight: bold; font-size:1.0em;}
ul.level-two li {font-weight: normal; font-size: 1.0em;}
/* /////////////////////////////////////////////// */  
  @media screen and (min-width: 980px) {
    #nav > ul > li {
      float: left;
      width: auto; } }
  @media screen and (max-width: 980px) {
    #nav > ul > li {
      float: none;
      display: block;
      width: 100%; } }

#nav > ul > li > a {
  background-color: #555555; }
  #nav > ul > li > a:hover, #nav > ul > li > a:focus, #nav > ul > li > a.js-openSubMenu {
    background-color: #898F92; }

#nav > ul > li:hover > a, #nav > ul > li:focus > a {
  background-color: #898F92; }

@media screen and (min-width: 980px) {
  #nav > ul > li:not(:last-child) {
    border-right: 1px solid #898F92;
    border-bottom: none; } }
@media screen and (max-width: 980px) {
  #nav > ul > li:not(:last-child) {
    border-right: none; }
    #nav > ul > li:not(:last-child):not(:first-child) {
      border-bottom: 1px solid #898F92; } }

#nav > ul > li:not(#toggleMenu):not(.js-showElement) {
  /* first level nav li except toggleMenu icon */ }
  @media screen and (min-width: 980px) {
    #nav > ul > li:not(#toggleMenu):not(.js-showElement) {
      display: inline-block; } }
  @media screen and (max-width: 980px) {
    #nav > ul > li:not(#toggleMenu):not(.js-showElement) {
      display: none; } }

@media screen and (min-width: 980px) {
  #nav #toggleMenu {
    display: none; } }
@media screen and (max-width: 980px) {
  #nav #toggleMenu {
    display: block;
    width: 100%; }
    #nav #toggleMenu.js-open {
      border-bottom: 1px solid #898F92; }
      #nav #toggleMenu.js-open .fa-times {
        display: block; }
      #nav #toggleMenu.js-open .fa-bars {
        display: none; }
      #nav #toggleMenu.js-open a {
        background-color: #898F92; }
    #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 */
#nav > ul > li > ul {
  background-color: #898F92; }
  @media screen and (min-width: 980px) {
    #nav > ul > li > ul {
      top: 50px;
      left: 0; } }
  @media screen and (max-width: 980px) {
    #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: #898F92; }
  #nav > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > a:focus {
    background-color: #555555; }

#nav > ul > li > ul > li:not(:last-child) a {
  border-bottom: 1px solid #555555; }
/* /////////////////////////////////////////////// */
/* Third Level Dropdown */
@media screen and (min-width: 980px) {
  #nav > ul > li > ul > li > ul {
    top: 0;
    left: 200px;
    /* width of ul */ } }
@media screen and (max-width: 980px) {
  #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: #555555; }
  #nav > ul > li > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > ul > li > a:focus {
    background-color: #898F92; }

#nav > ul > li > ul > li > ul > li:not(:last-child) > a {
  border-bottom: 1px solid #898F92; }
/* /////////////////////////////////////////////// */
/* Javascript classes */
#nav .js-hideElement {
  display: none; }

#nav .js-showElement {
  display: block; }
/* /////////////////////////////////////////////// */
/* Fallback for users without javascript */
html.no-js li:hover > a + ul, html.no-js li:focus > a + ul {
  display: block; }
@media screen and (max-width: 980px) {
  html.no-js #nav:hover > ul > li:not(#toggleMenu), html.no-js #nav:focus > ul > li:not(#toggleMenu) {
    display: block; }
  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: block; } }
/* /////////////////////////////////////////////// */
/* /////////////////////////////////////////////// */