.mobile { display: block; z-index: 101;}
.desktop { display: none; z-index: 101;}

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
   .mobile { display: none; }
   .desktop { display: block; }
}


nav#main { 
   background: none;   
   padding: 0;
   margin: 0;
   position: absolute;
   display: none;
   font-weight: 500;
   vertical-align: middle;
   float: none;
   top: 45%;
   left: 0;}
          
    
nav#main ul { 
   list-style: none;
   display: inline-block; 
    position: relative;
    width: 100%;
    padding: 0;}
   
nav#main ul li {
   background: none;      
   float: left; 
   position: relative;
   display: inline-block;
   padding: 0;
   margin-right: 7em; } 
   
   nav#main ul li:last-child { margin-right: 0; }
   
nav#main ul li a {
   padding: 0;
   font-size: 110%;
   font-weight: 500;
   line-height: 1;
   color: #000;
   display: inline-block;
   text-transform: none;
   letter-spacing: 0px;
   -webkit-transition: all .1s ease-in-out;
   -moz-transition: all .1s ease-in-out;
   -ms-transition: all .1s ease-in-out;
   -o-transition: all .1s ease-in-out;
   transition: all .1s ease-in-out; }

   .home nav#main ul li a {  }
   
   .ie nav#main ul li a { }

   header.sticky nav#main ul li a, .interior header nav#main ul li a {  }

nav#main ul li a:hover { color: #357fae !important; }
nav#main ul li a:active { color: #00af41 !important;  }

   header.sticky nav#main ul li a:hover, .interior header nav#main ul li a:hover {  }
   header.sticky nav#main ul li a:active, .interior header nav#main ul li a:active { }

nav#main ul > li:hover a.dropdown {
   color: #fff; } 
   
nav#main .align-right { float: right; }

nav#main a.more::after {
   content: "6";
   font-family: 'trilogyicons';
   color: white;
   font-size: 11px;
   font-weight: 400;
   margin: 0 0 0 5px; 
   -webkit-transition: all .1s ease-in-out;
   -moz-transition: all .1s ease-in-out;
   -ms-transition: all .1s ease-in-out;
   -o-transition: all .1s ease-in-out;
   transition: all .1s ease-in-out; }
   
   nav#main a.more:hover::after { color: #fac018; }
   nav#main a.more:active::after { color: #c02828; }
   
   header.sticky nav#main a.more::after, .interior header nav#main a.more::after { color: #444; }
   header.sticky nav#main a.more:hover::after, .interior header nav#main a.more:hover::after { color: #c02828; }
   header.sticky nav#main a.more:active::after, .interior header nav#main a.more:active::after { color: #fac018; }

header.sticky nav#main ul li a.register:hover, header.sticky nav#main ul li a.active:hover { color: #fff !important; }
.interior nav#main ul li a.register:hover, .interior nav#main ul li a.active:hover { color: #fff !important; }

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {
   nav#main { display: inline-block; left: 1em; }
}

@media only screen and (min-width: 1400px) and (min-device-width: 480px) {
   nav#main { left: 0em; }
}


 /* Submenu
------------------------------------ */

nav#main ol { 
   background: #fff;
   list-style: none;
   width: 100%;
   min-width: 200px;
   margin: 0;
   padding: 0;
   display: none;
   position: absolute; 
   left: 0;
      top: 100%;
      z-index: 100;
   border: 0;
   font-size: 1;
   line-height: 1;
   text-transform: none;
   -webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,.2);
   box-shadow: 0 0 3px 0 rgba(0,0,0,.2);
   -webkit-transition: all .35s ease-in-out;
   -moz-transition:    all .35s ease-in-out;
   -o-transition:      all .35s ease-in-out;
   -ms-transition:     all .35s ease-in-out;
   transition:         all .35s ease-in-out; }

nav#main li:hover ol,
nav#main li.over ol { display: block; }
   
nav#main ol li {
   background: none;
   padding: 0px !important;
   border: 0;
   text-align: left; 
   float: none;
   display: block;
   margin: 0; }
   
nav#main ol li a {
   background-color: none;
   color: #545454 !important;
   width: auto;
   height: auto;
   padding: .75em 1.0em !important;
   display: block;
   float: none;   
   text-indent: 0;
   font-size: 1;
   -webkit-transition: all .35s ease-in-out;
   -moz-transition:    all .35s ease-in-out;
   -o-transition:      all .35s ease-in-out;
   -ms-transition:     all .35s ease-in-out;
   transition:         all .35s ease-in-out; }

nav#main ol li a:hover { 
   color: #c02828 !important;
	background-color: rgba(0,0,0,.1); }
nav#main ol li a:active { 
   color: #444 !important;
	background-color: rgba(0,0,0,.2);}



nav .share {
   margin-left: 2em;
   display: inline-block; 
   vertical-align: middle; 
   top: 3px;
   position: relative;}
   
   nav .share span {
      font-size: 150%;
      font-weight: 300;
      line-height: 1;
      color: var(--link-color);    
      text-transform: none;
      letter-spacing: -.5px; }   
      
   nav .share .icons {
      color: var(--link-color);
      font-size: 130%; }
      
   nav .share .icons:hover {
      color:  var(--link-color); }


 /* Section Nav
------------------------------------ */

#snav { 
   padding: 0 0 10px 0;
   text-align: left; }
   
#snav h3 {
    line-height: 1;
    margin-bottom: .5em; }
    
#snav ul { list-style: none; }   
#snav li { 
   margin: 2px auto; }  
#snav li a { 
   background: rgba(0,0,0,.05);
   padding: 8px; 
   display: block;
   color: #183f6f;
   -webkit-transition: all .35s ease-in-out;
   -moz-transition:    all .35s ease-in-out;
   -o-transition:      all .35s ease-in-out;
   -ms-transition:     all .35s ease-in-out;
   transition:         all .35s ease-in-out; }  
#snav li:hover a { 
   background: #1f99b9;
   color: #fff;  }
#snav li:active a { 
   background: #51cab2;
   color: #fff; }    
   
#snav li:hover a:after { content: " »" }

#snav li.active a { color: #ff7100; }
#snav li.active:hover a { color: #fff; }

#snav li.active a:before { content: " »" }


/* --- Primary Nav --- */
nav.nav {
   position: absolute;
   right: 2em;
   top: 40%;}

nav #menu-button {
    -moz-border-radius:    2px;
    -webkit-border-radius: 2px;
    border-radius:         2px;
    position: relative; 
    text-transform: uppercase;
    font-size: 110%;
    line-height: 14px;
    padding: 5px 10px;
    margin: 5px 3px;
    background: none;
    color: #555; 
    -webkit-transition: all .5s ease-in-out;
    -moz-transition:    all .5s ease-in-out;
    -o-transition:      all .5s ease-in-out;
    -ms-transition:     all .5s ease-in-out;
    transition:         all .5s ease-in-out;  }
    
@media only screen and (min-width: 800px) and (min-device-width: 480px) {
   nav #menu-button { font-size: 125%; }
}
    
    header.sticky nav #menu-button, .interior header nav #menu-button  { color: #555; }
   
nav #menu-button:hover { background: #357fae; color: #fff !important; }

nav #menu-button.active, nav #menu-button:active  { 
    background-color: #1e3d64 !important;
    color: #fff !important; }


#menu.mobile {
   padding: 2em 0 0 0;
   background: #1e3d64;
   width: 70%;
   z-index: 1001;
   position: absolute;
   right: 150%;
   top: 0;
   min-height: 100%;
   -webkit-box-shadow: 0 0 80px 0 rgba(0,0,0,.8);
   box-shadow: 0 0 80px 0 rgba(0,0,0,.8);
   -webkit-transition: all .3s ease-in-out;
   -moz-transition:    all .3s ease-in-out;
   -o-transition:      all .3s ease-in-out;
   -ms-transition:     all .3s ease-in-out;
   transition:         all .3s ease-in-out; }
    
#menu.mobile.active {
    right: 30%; }

#menu.mobile ol { 
    width: 100%; 
    margin:auto;   }
    
#menu.mobile ol li { 
    list-style: none;
    font-size: 150%; }

#menu.mobile ol li a { 
    padding: .5em 1em; 
    font-size: 90%;
    display:block; 
    -webkit-transition: background .3s ease-in-out; 
    -moz-transition: background .3s ease-in-out; 
    -o-transition: background .3s ease-in-out; 
    -ms-transition: background .3s ease-in-out; 
    transition: background .3s ease-in-out; 
    color: white !important;
    }    
    
#menu.mobile ol li a:active {
    color: white !important; 
    background : #666;
    }
    
#menu.mobile ol li.donate {
   background: #fcc014;
   margin: 1em;
   text-align: center;   
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  nav#main { left: 400px; }
  nav#main ul li { margin-right: 3em; } 
}