#mainnavicon {display:none;}
#mainmenu * {margin:0;padding:0;}
#mainmenu {background-color:#bdbdbd;font-size:10.5pt;width:100%;height:40px;}
#mainmenu ul {clear:both;list-style-type:none;margin-left:10px;float:left;}
#mainmenu ul li {color:#000000;display:block;height:40px;float:left;cursor:pointer;}

#mainmenu ul li a, #mainmenu ul li span {display:block;color:inherit;text-decoration:none;margin-top:3px;padding:8px 14px;border-right:1px #999999 solid;}
#mainmenu ul li:last-child a, #mainmenu ul li:last-child span {border-right:0;}

#mainmenu ul li:hover {background-color:#757575;color:#FFFFFF;}

#mainmenu ul li.parent > a::after, #mainmenu ul li.parent > span::after {content:"\25BC";font-size:0.8em;margin-left:7px;}
#mainmenu.responsive ul li.parent span.plus {display:none;}



    /** SUB MENU FOR FULL MENU **/
    @media screen and (min-width: 1000px) {
      #mainmenu ul.nav-child {background-color:#757575;padding:5px 0;display:none;position:absolute;z-index:99;margin:0;min-width:140px;}
      #mainmenu li:hover > ul.nav-child {display:block;}
      #mainmenu ul.nav-child li {display:block;width:100%;clear:left;padding:0;height:auto;}
      #mainmenu ul.nav-child li a, #mainmenu ul.nav-child li span {padding:5px 10px;display:block;color:#FFFFFF;}
      #mainmenu ul.nav-child li:hover, #mainmenu ul.nav-child li:hover {background-color:#bdbdbd;}
      #mainmenu ul.nav-child li:hover a, #mainmenu ul.nav-child li:hover span {color:#000000;}

      /** THIRD LEVEL **/
      #mainmenu ul.nav-child li.parent > a::after, #mainmenu ul.nav-child li.parent > span::after {content:"\25BA";float:right;font-size:0.8em;margin-left:5px;}
      #mainmenu ul.nav-child ul {left:calc(100%);margin-top:-30px;padding:0;min-width:140px;white-space: nowrap;}
      #mainmenu ul.nav-child li:hover li a, #mainmenu ul.nav-child li:hover li span {color:#FFFFFF;}
      #mainmenu ul.nav-child li:hover li:hover a, #mainmenu ul.nav-child li:hover li:hover span {color:#000000;}

    } 
    
    /** MOBILE SCREENS **/
    @media screen and (max-width: 999.9px) {
      content {padding:10px;}

      #mainnavicon {display:block;cursor:pointer;height:40px;}
      #mainnavicon span {display:blcok;color:#000000;padding:10px;}
      #mainnavicon span.text {float:left;font-weight:bold;}
      #mainnavicon span.bars {float:right;margin:-8px 15px 0 0;font-size:24px;}
      
      #mainmenu ul {display:none;margin:0;}

      #mainmenu.responsive ul {display:block;z-index:150;width:100%;clear:both;float:none;position:relative;background-color:#bdbdbd;padding:0px 0;}
      #mainmenu.responsive ul li {display:block;clear:right;float:none;border-top:1px #666666 solid;height:auto;}
      #mainmenu.responsive ul li:last-child {border-bottom:1px #666666 solid;}
      #mainmenu.responsive ul li.parent > a::after, #mainmenu.responsive ul li.parent > span::after {content:"";}
      #mainmenu.responsive ul li.parent span.plus {display:block;clear:right;float:right;font-size:18px;content:'+';border-left:1px #666666 solid;padding:8px 15px;background-color:#aaaaaa;width:22px;text-align:center;margin:0;}

      /** MOBILE SUB NAV **/
      #mainmenu.responsive ul ul {display:none;}
      #mainmenu.responsive ul ul.responsive {display:block;height:auto;}
      #mainmenu.responsive ul ul.responsive li:last-child {border-bottom:0;}
      #mainmenu.responsive ul ul.responsive li a, #mainmenu.responsive ul ul.responsive li span {padding-left:30px;}

      /** THIRD LEVEL **/
      #mainmenu.responsive ul ul ul.responsive li a, #mainmenu.responsive ul ul ul.responsive li span {padding-left:60px;}
    }


/* Down arrow: &#9660; OR \25BC
/* Right arrow: &#9658; OR \25BA
*/
