#cssmenu {
  position: relative;
  font-size: inherit;
  height: inherit;
  align-items: inherit;
  /*height: 44px;*/
  /*background: #2b2f3a;*/
  /*width: auto;*/
}
#cssmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}
#cssmenu > ul {
  position: relative;
  display: block;
  /*background: #2b2f3a;*/
  width: 100%;
  z-index: 500;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

/*#cssmenu.align-right > ul > li {
  float: right;
}    
PRC- replaced with the following. This moves the menu to the right side but doesn't reverse the order of li elements left to right*/
#cssmenu.align-right {
    text-align: right;
}
#cssmenu.align-center ul {
  text-align: center;
}

#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu > ul > li {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
}
#cssmenu > ul > #menu-button {
  display: none;
}
#cssmenu ul li a {
  display: block;
  /*font-family: Helvetica, sans-serif;*/
  text-decoration: none;
}
#cssmenu > ul > li > a {
  /*font-size: 14px;
  font-weight: bold;*/
  padding: 15px 8px;
  /*color: #7a8189;*/
  /*text-transform: uppercase;*/
  -webkit-transition: color 0.25s ease-out;
  -moz-transition: color 0.25s ease-out;
  -ms-transition: color 0.25s ease-out;
  -o-transition: color 0.25s ease-out;
  transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
}
#cssmenu li.has-sub::after {
  display: block;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
#cssmenu > ul > li.has-sub::after {
  right: 10px;
  top: 20px;
  border: 5px solid transparent;
    /*  overridden by csbMaterialDesign color*/
  border-top-color: #7a8189;
}
#cssmenu > ul > li:hover::after {
    /*  overridden by csbMaterialDesign color*/
  border-top-color: #ffffff;
}
#indicatorContainer {
  position: absolute;
  height: 12px;
  width: 100%;
  bottom: 0px;
  overflow: hidden;
  z-index: -1;
}
#pIndicator {
  position: absolute;
  height: 0;
  width: 10%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  z-index: -2;
  -webkit-transition: left .25s ease;
  -moz-transition: left .25s ease;
  -ms-transition: left .25s ease;
  -o-transition: left .25s ease;
  transition: left .25s ease;
}
#cIndicator {
  position: absolute;
  height: 0;
  width: 100%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  top: -12px;
  right: 100%;
  z-index: -2;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  top: 70px;
  opacity: 0;
  -webkit-transition: opacity .3s ease, top .25s ease;
  -moz-transition: opacity .3s ease, top .25s ease;
  -ms-transition: opacity .3s ease, top .25s ease;
  -o-transition: opacity .3s ease, top .25s ease;
  transition: opacity .3s ease, top .25s ease;
  z-index: 1000;
}
#cssmenu ul ul ul {
  top: 37px;
  padding-left: 5px;
}
#cssmenu ul ul li {
  position: relative;
}
#cssmenu > ul > li:hover > ul {
  left: auto;
  top: 44px;
  opacity: 1;
}

#cssmenu.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
  opacity: 1;
}
#cssmenu ul ul li:hover > ul {
  left: 220px;
  top: 0;
  opacity: 1;
}
#cssmenu.align-right ul ul li:hover > ul {
  left: auto;
  right: 170px;
  top: 0;
  opacity: 1;
  padding-right: 5px;
}
/*PRC: Added the following, as the right aligned menu has submenus appear too far to the right. This seemed to fix it*/
#cssmenu.align-right ul ul li a {
    width: 130px;
}
#cssmenu ul ul li a {
  width: 180px;
  box-sizing: initial;
  /*border-bottom: 1px solid #eeeeee;*/
  padding: 10px 20px;
  /*font-size: 12px;*/
  /*color: #9ea2a5;
  background: #ffffff;*/
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  -ms-transition: all .35s ease;
  -o-transition: all .35s ease;
  transition: all .35s ease;
}
#cssmenu.align-right ul ul li a {
  text-align: right;
}
#cssmenu ul ul li:hover > a {
  background: #f2f2f2;
  color: #8c9195;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
  border-bottom: 0;
}
#cssmenu > ul > li > ul::after {
  content: '';
  border: 6px solid transparent;
  width: 0;
  height: 0;
  border-bottom-color: #ffffff;
  position: absolute;
  top: -12px;
  left: 30px;
}
#cssmenu.align-right > ul > li > ul::after {
  left: auto;
  right: 30px;
}
#cssmenu ul ul li.has-sub::after {
  border: 4px solid transparent;
  border-left-color: #9ea2a5;
  right: 10px;
  top: 12px;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub::after {
  border-left-color: transparent;
  border-right-color: #9ea2a5;
  right: auto;
  left: 10px;
}
#cssmenu ul ul li.has-sub:hover::after {
  border-left-color: #ffffff;
    z-index:1001;
  right: -5px;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
#cssmenu.align-right ul ul li.has-sub:hover::after {
  border-right-color: #ffffff;
  border-left-color: transparent;
  left: -5px;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}



/*
    PRC
    Quartz Menu used to break down using some media logic.
    I've replaced it with this mobile class, so adding the mobile class will change the menu to hamburger
    this allowed us to us ng-class and detect the size using angular methods, allowing for consistency between when other things
    on the page appear and disappear
*/

  #cssmenu.mobile {
    /*width: auto;*/
  height: inherit;
max-height:44px;
  }
  #cssmenu.align-center.mobile ul {
    text-align: left;
  }
  #cssmenu.align-right.mobile > ul > li {
    float: none;
    text-align:left;
  }
  #cssmenu.mobile ul {
    width: auto;
  }
  #cssmenu.mobile .submenuArrow,
  #cssmenu.mobile #indicatorContainer {
    display: none;
  }
  #cssmenu.mobile > ul {
    height: auto;
    display: block;
  }
  #cssmenu.mobile > ul > li {
    float: none;
  }
  #cssmenu.mobile li,
  #cssmenu.mobile > ul > li {
    display: none;
  }
  #cssmenu.mobile ul ul,
  #cssmenu.mobile ul ul ul,
  #cssmenu.mobile ul > li:hover > ul,
  #cssmenu.mobile ul ul > li:hover > ul,
  #cssmenu.mobile.align-right ul ul,
  #cssmenu.mobile.align-right ul ul ul,
  #cssmenu.mobile.align-right ul > li:hover > ul,
  #cssmenu.mobile.align-right ul ul > li:hover > ul {
    position: relative;
    left: auto;
    top: auto;
    opacity: 1;
    padding-left: 0;
    padding-right: 0;
    right: auto;
  }
  #cssmenu.mobile ul .has-sub::after {
    display: none;
  }
  #cssmenu.mobile ul li a {
    padding: 12px 20px;
  }
  #cssmenu.mobile ul ul li a {
    border: 0;
    background: none;
    width: auto;
    padding: 8px 35px;
  }
  #cssmenu.mobile.align-right ul ul li a {
    text-align: left;
  }
  #cssmenu.mobile ul ul li:hover > a {
    background: none;
    color: #8c9195;
  }
  #cssmenu.mobile ul ul ul a {
    padding: 8px 50px;
  }
  #cssmenu.mobile ul ul ul ul a {
    padding: 8px 65px;
  }
  #cssmenu.mobile ul ul ul ul ul a {
    padding: 8px 80px;
  }
  #cssmenu.mobile ul ul ul ul ul ul a {
    padding: 8px 95px;
  }
  #cssmenu.mobile > ul > #menu-button {
    display: block;
    cursor: pointer;
    /*min-width:inherit;
    width: initial;*/
  }
  #cssmenu.mobile #menu-button > a {
    padding: 8px 20px 8px 0px;
  
  }
  /*copy selector from above to simplify the transition*/
  #cssmenu.mobile > ul > li:not(#menu-button) {
        /*
            fade-out does not work...nothing does here
            because the display:none does not support...
            would have to get more cleverer
        */
  }
  #cssmenu.mobile > ul.open > li:not(#menu-button) {
    -moz-animation: fadeIn 0.4s ease-in;
    -webkit-animation: fadeIn 0.4s ease-in;
    animation: fadeIn 0.4s ease-in;
  }
  @-moz-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
    }
 @-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes fadeIn {
        from { opacity: 0; }
          to { opacity: 1; }
    }

  #cssmenu.mobile ul.open li,
  #cssmenu.mobile > ul.open > li {
    display: block;
  }
  #cssmenu.mobile > ul.open > li#menu-button > a {
    color: #fff;
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
  }
  #cssmenu.mobile > ul.open > li#menu-button > a > i {
    
    -webkit-transition: -webkit-transform .3s ease 0.05s;
    -ms-transition: -ms-transform .3s ease 0.05s;
    -moz-transition: -moz-transform .3s ease 0.05s;
    transition: transform .3s ease 0.05s;

  -webkit-transform: rotateZ(90deg);
  -ms-transform: rotateZ(90deg);
  -moz-transform: rotateZ(90deg);
  -o-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
  }
  #cssmenu.mobile > ul > li#menu-button > a > i {
    
    -webkit-transition: -webkit-transform .3s ease 0.05s;
    -ms-transition: -ms-transform .3s ease 0.05s;
    -moz-transition: -moz-transform .3s ease 0.05s;
    transition: transform .3s ease 0.05s;

  -webkit-transform: rotateZ(0deg);
  -ms-transform: rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -o-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
  }

  #cssmenu.mobile ul ul::after {
    display: none;
  }
  
  #cssmenu.mobile ul.open #menu-button::after,
  #cssmenu.mobile ul.open #menu-button::before {
    border-color: #fff;
  }

  #cssmenu.mobile.align-right {
      text-align:left !important;
  }

  #cssmenu .showMobile {
      visibility:hidden;
  }

  #cssmenu.mobile .showMobile {
      visibility: visible;
  }

  #cssmenu .hideMobile{
      visibility: visible;
  }

  #cssmenu.mobile .hideMobile {
      visibility: hidden;
  }

  #cssmenu .noMobile{
      display: inherit;
  }

  #cssmenu.mobile .noMobile {
      display:none !important;
  }