/* topnav styles - last edited on 08-23-18
----------------------------------------------- */
#topnav { color: #fff; background-color: rgba(13,44,81,0.93); min-width: 320px; width: 100%; max-width: 920px; height: 80px; margin: 0 auto; padding: 0; position: fixed; z-index: 100; top: 0; display: none; visibility: hidden; }
#topnav header#branding { width: 100%; }

#logo { margin: 0; padding: 0; width: 230px; height: auto; text-align: center; white-space: nowrap; z-index: 100; }
#logo img { margin: 0; padding: 0; width: 230px; height: auto; text-align: center; white-space: nowrap; display: block; }

#logo-mobile { margin: 0 0 0 80px; padding: 0; }
#logo-mobile, #logo-mobile img { height: 80px; width: auto; display: block; }

.title-graphic { position: absolute; top: 0; right: 15px; margin: 0; }
.title-graphic, .title-graphic img { height: 80px; width: auto; display: block; }


#menu ul li.topNav ul { display: none; }
#menu ul li.topNav ul { 
background-color: rgba(0,51,87,0.65); min-width: 275px; width: 100%; min-height: 100% !important; margin-top: -5px; float: left; position: absolute; z-index: 75000; 
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
#menu ul li.topNav ul li { font-family: 'Roboto', sans-serif; font-size: 17px !important; font-weight: 400 !important; text-align: left; text-transform: none; clear: both; height: auto !important; width: 100%; margin: 0px auto; padding: 0px; overflow: hidden; }
#menu ul li.topNav ul li a { font-size: inherit; padding: 11px 5% 11px 17px; width: 90% !important; height: auto !important; display: block; white-space: normal !important; }

/* drop-down menus */
.dropit { list-style: none; padding: 0; margin: 0; }
.dropit .dropit-trigger { position: relative; }
.dropit .dropit-submenu {    
    top: 100%;
    left: 0; /* dropdown left or right */    
    display: none;
    min-width: 150px;
    list-style: none;
	  padding: 0; margin: 0;
}
.dropit .dropit-open .dropit-submenu { display: block; border: solid 1px #ccdce6; margin: 0px 0px 1px 1%; padding: 1px 0 5px 0; height: auto !important; }
.dropit .dropit-open .dropit-submenu { border-top: solid 0px #ccdce6; }

.dropit-open a, .dropit-open a:hover { color: #f7893b !important; }

.dropit .dropit-open .dropit-submenu a { color: #fff !important; }
.dropit .dropit-open .dropit-submenu a:hover { color: #b4c9e5 !important; }
 
 

 
/* Responsive
---------------------------------------------------------------- */

@media only screen and (max-width: 920px) { 
#topnav  { display: block; visibility: visible; }

#menu ul li a { font-size: 17px; padding-right: 8px; padding-left: 8px; }
#menu ul li.topNav ul { margin-left: 0; margin-top: -3px; }

}

@media only screen and (max-width: 780px) { 
#menu ul li a { padding-right: 7px; padding-left: 7px; }

}

/* Change top nav to Mobile configuation --*/

@media only screen and (max-width: 759px) {
	
#logo-mobile-sm { float: left; clear: none; margin: 0 0 0 1px; padding: 0; display: block; visibility: visible; max-height: 120px !important; width: auto; }
#logo-mobile-sm a { display: block; position: relative; z-index: 100; padding-right: 3px; padding-left: 3px; max-height: 118px; overflow: hidden; }
#logo-mobile-sm img.logo { /* display: none; visibility: hidden; */ width: 250px; height: auto; margin: 21px 0 0 8px; }
#logo-mobile-sm img.logo-550 { display: none; visibility: hidden; } 

.mobile-menu-bg .logowrap { display: none; visibility: hidden; height: 1px !important; overflow: hidden; } 

#menu ul li .word2 { display: inline-block; }
  
.dropit-trigger a, .dropit-open a { padding-left: 34px !important; }
.dropit-trigger a:before { content: "\f078 "; font-family: FontAwesome; font-weight: 100; padding-right: 7px; margin-left: -20px; font-size: 95%; display: inline-block; }

.dropit-open a, .dropit-open a:hover { color: #f7893b !important; /* background-color: #260051 !important; */ }
.dropit-open a:before { content: "\f077 "; font-family: FontAwesome; font-weight: 100; padding-right: 7px; margin-left: -20px; font-size: 95%; display: inline-block; }

.dropit-trigger ul li a, .dropit-open ul li a { color: #fff !important; background-color: transparent !important; font-weight: 400 !important; padding-left: 32px !important; }
.dropit-trigger ul li a:before, .dropit-open ul li a:before { content: "\f0a9 "; padding-right: 6px; margin-left: -17px; }
 
}

@media only screen and (max-width: 640px) {

.title-graphic img { height: 60px; margin-top: 10px; }

}

@media only screen and (max-width: 599px) {
/* previous breakpoint for mobile nav */

}


@media only screen and (max-width: 580px) {
.title-graphic img { height: 50px; margin-top: 17px; }	
 
}


@media only screen and (max-width: 475px) {
#logo-mobile { position: absolute; right: 15px; z-index: 100; }
#logo-mobile img { height: 70px; margin-top: -4px; }
.title-graphic img { height: 49px; margin-top: 40px; }		

}

@media only screen and (max-width: 340px) {
  
}


/*--------------------------------------------------------------
END
--------------------------------------------------------------*/