nav#main {
   margin: 0;
   height: auto;
   z-index: 100;
   float: none;
   top: 0;
   position: relative;
   background: rgba(255,255,255,1); 
   // set animation
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out; }

body#interior.action nav#main { display: none; }
body#simple nav#main { display: none; }
  
nav ul#menu { 
   list-style: none; 
   margin: 0 auto; 
   float: none; 
   margin-top: 32.5px;
   display: flex;
    flex-direction: row;
    justify-content: space-around;}

nav ul#menu  li {      
   float: none; 
   position: relative;
   display: inline-block;
   padding: 0; } 
nav ul#menu  li.nav-menu { display: none; }
nav ul#menu  li:last-child { border-right: 0; }

nav ul#menu li a {
   height: 19px;
   padding: 15px 3px 3px 3px;
   background-color: none;
   font-size: 18px;
   font-weight: 700;
   line-height: 18px;
   color: #17152c;
   border-bottom: 5px #fffc solid;
   display: inline-block;
   font-family: 'Montserrat', sans-serif;
   letter-spacing: 0;
   -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 ul#menu li:hover a { border-bottom: 5px #17152c solid; } 
nav ul#menu li:active a { border-bottom: 5px #d7262a solid; color: #d7262a; }

nav ul#menu li a.icons {
   border-bottom: 0; }
   
nav ul#menu li a:hover.icons {
   border-bottom: 0; color: #d7262a; }
   
nav ul#menu li a:active.icons {
   border-bottom: 0; color: #d7262a; }

/* --- Donate Button --- */
nav ul#menu li a#donate {
   color: #d7262a } 
   
nav ul#menu li a#donate:hover {
   color: #4e82e1;
   border-bottom: 5px #4e82e1 solid; }
   
   
/* Section Nav
------------------------------------ */

#snav { 
   text-align: left;
   background: #1b355c;
   width: 86%;
   padding: 7%;
   right: 0;
   margin: 0 0 1em 0;
   height: auto;
   position: relative;}

#snav ul { list-style: none; }   
#snav li { margin: 0 auto; }  
#snav li a { 
   position: relative;
   background: rgba(193,14,53,0);
   padding: 0.25em 5px; 
   margin: 1px 0;
   border-bottom: 1px #159bc2 solid;
   display: block;
   font: 400 22px/1 "Roboto Condensed", sans-serif;
   letter-spacing: 1px;
   text-transform: uppercase !important;
   color: white;    
   -webkit-transition: all .25s ease-in-out;
   -moz-transition:    all .25s ease-in-out;
   -o-transition:      all .25s ease-in-out;
   -ms-transition:     all .25s ease-in-out;
   transition:         all .25s ease-in-out; }  
#snav li a:hover { 
  background: rgba(255,0,54,.6);  }
#snav li a:active { 
  background: rgba(255,0,54,1); }

#snav li a:before { font-family: 'trilogyicons'; font-size: 10px; color: #159bc2; content: ">"; position: relative; top: -2px; left: 0px;}

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

#snav li:last-child a { border-bottom: 0; }


/* --- Device and Mobile Menu --- */
nav ul#menu li#top-menu  { 
   display: none !important;
   background: none;
   height: 100%;
   width: 70px;
   position: absolute;
   top: 0px;
   right: 0px;
   color: #18162e;
   border-right: 0;
   z-index: 10000; }
   
header.sticky nav ul#menu li#top-menu  { width: 50px; height: 50px; }

#home-button a,
nav ul#menu li#top-menu  > a {
   background-repeat: no-repeat;
   width: 50px;
   height: 100%;
   position: relative; }
   
header.sticky #home-button a, header.sticky nav ul#menu li#top-menu  > a { width: 50px; }
      
#home-button > a {  
   background-image: url(/theme/mobile/img/home.png);
   background-position: center center; }
   
nav ul#menu li#top-menu > a { 
   width: 100%;
   height: 50px !important;
   padding: 0 !important;
   font-size: 30px !important;
   vertical-align: middle;
   line-height: 50px !important;
   color: #18162e !important;
   text-transform: uppercase;
   font-weight: 700;
   letter-spacing: 1px;
   webkit-border-radius: 0 !important;
   border-radius: 0 !important;
   background: white; 
   border: 0;
   -webkit-transition: all .25s ease-in-out;
   -moz-transition:    all .25s ease-in-out;
   -o-transition:      all .25s ease-in-out;
   -ms-transition:     all .25s ease-in-out;
   transition:         all .25s ease-in-out; }
nav ul#menu li#top-menu > a:hover { 
   color: white !important;
   background: #18162e; }
   
nav ul#menu li#top-menu > a span.icon:before {
   font-family: 'trilogyicons';
   font-size: 30px;
   vertical-align: middle;
   line-height: 50px;
   content: "m";
   border: 0;
   -webkit-transition: all .25s ease-in-out;
   -moz-transition:    all .25s ease-in-out;
   -o-transition:      all .25s ease-in-out;
   -ms-transition:     all .25s ease-in-out;
   transition:         all .25s ease-in-out; }
   
nav ul#menu li#top-menu > a:hover span.icon:before { color: #159bc2 !important; }

nav ul#menu li#top-menu.active > a  { background: #18162e; }
nav ul#menu li#top-menu.active a span.icon:before,
nav ul#menu li#top-menu a:active span.icon:before { color: #fff !important; background-color: #18162e; font-size: 24px; padding: 3px; content: "x"; }

nav ul#menu li#top-menu.active a:hover span.icon:before { color: #d52729 !important; background-color: none;  }


nav ul#menu li#top-menu #top-dropdown {
  background-color: #18162e;
  color: white;
  padding: 10px;
  width: 250px;      
  box-shadow:            0 4px 3px rgba(0, 0, 0, 0.25);       
  -moz-box-shadow:    0 4px 3px rgba(0, 0, 0, 0.25);  
  -webkit-box-shadow: 0 4px 3px rgba(0, 0, 0, 0.25);   
  display: none; 
  margin: 0;
  position: absolute;
  top: 50px; 
  right: 0px;
  left: initial;
  z-index: 9999; }
      
nav ul#menu li#top-menu #top-dropdown li { 
  width: 100%;
  padding: 0 !important;
  border: 0;
  background: none;
  color: white;
  margin: 0 0 2px 0; }
nav ul#menu li#top-menu #top-dropdown li:last-child { border-bottom: 0; }
   
nav ul#menu li#top-menu #top-dropdown li a { 
  width: 94%;
  background: none !important;
  border: 0;
  color: white;
  height: auto;
  padding: .5em 3% !important;
  line-height: 1 !important;
  webkit-border-radius: 0 !important;
  border-radius: 0 !important;}
nav ul#menu li#top-menu #top-dropdown li:last-child a {}

nav ul#menu li#top-menu #top-dropdown li a:active {   
   background: rgba(255,255,255,.4) !important;
   color: #fff !important; }
   
nav ul#menu li#top-menu #top-dropdown li.close a { 
   background: none; 
   color: #fff; }
nav ul#menu li#top-menu #top-dropdown li.close a:active { background: none; }


nav ul#menu ol {
  display: none;
}


@media only screen and (min-width: 1100px){
  nav ul#menu ol {
    width: 100%;
    min-width: 14em;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 100000; 
    display: block;
    visibility: hidden;
    margin: 0 auto;
  	opacity: 0;    
    -moz-transition:    all 0.3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
    -o-transition:      all 0.3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
    -webkit-transition: all 0.3s cubic-bezier(0.75, -0.25, 0.25, 0.75);
    transition:         all 0.3s cubic-bezier(0.75, -0.25, 0.25, 0.75);    
  }
  nav ul#menu li:hover ol {
  	visibility: visible;
  	opacity: 1;
  }
  nav ul#menu ol li {
  	width: 100%;
  	padding: 0;
  	float: none;
  	display: block;
  	border-bottom: none !important;
  }
  nav ul#menu ol li a {
    background: #000 !important;   
  	width: 100% !important;
  	height: auto !important;
  	padding: .9em .7em !important;
  	display: block;
  	float: none;   
  	text-align: left;
  	font-size: 1em !important;
    font-weight: 300 !important;
  	line-height: 1;
    border-bottom: 0 !important;
  	color: #fff !important;
  }   	
  nav ul#menu ol li:hover a {
  	background: #d7262a !important;
  }
  nav ul#menu ol li:active a {
  	background: #4354b1 !important; 
  }
}