/* NAVIGATION banners */
#banner-navigation ul { list-style-image: none; list-style-position: outside; list-style-type: none }

.banner-wrapper { display: flex; flex-wrap: wrap; justify-content: start; max-width: 750px; padding-top: 20px }

#banner-navigation { background: transparent; float: none; min-height: 37px; margin-top: 0 }
/* #navigation	{ background: transparent; font-size: 16px; float: right; min-height: 37px } */

.ban-menu li a img { display: inline-block; width: 10px }
.banner-tagline { padding-left: 5px; color: #61d04e; font-size: 24px; font-style: italic; line-height: 1 }

/*MAIN MENU*/
.menu-toggle { display:block; padding: 4px; margin:20px 0 0; background: transparent; color:#005cb9; cursor:pointer; text-transform:uppercase; font-size: 26px }
.menu-toggle.toggled-on { background: transparent }
.ban-menu, .ban-menu .menu-spacer { display: none }	
.ban-menu.toggled-on { font-size: 14px; display:block; position:relative; z-index:10; padding: 10px 0 20px 10px; background:transparent; line-height: 15px }
.ban-menu { clear:both; margin-bottom:0px }
.ban-menu a, .ban-menu a:visited { color: #005cb9 }
.ban-menu li a { text-align: left; background: transparent; display:block; margin: 0; padding: 5px; text-decoration:none; font-size: 17px }
.ban-menu.toggled-on li a { font-size: 15px }
.ban-menu li a:hover { background: transparent; color:#38d32f }
.scrolled .ban-menu li a:hover { color:#38d32f }
.scrolled .ban-menu li a.nolink:hover { color:#005cb9 }
.ban-menu li li a { background: transparent; padding-left:40px; font-weight: normal }
.ban-menu li li li a { background: #fff; padding-left: 80px }

.menu-toggle {
	/*make menu float right, instead of sitting under the logo*/
	margin-top: 0; /*this depends on the height of the logo*/
	/* clear: both;
	float:left;  */
	float: right;
	padding: 0;
}
.menu-toggle:hover { color: #38d32f }
.menu-toggle.toggled-on { background:transparent; color: #38d32f }

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 750px) {
	
	#banner-navigation { background: transparent; font-size: 16px; float: right; min-height: 37px; margin-top: 22px }

	/*** MAIN MENU - ESSENTIAL STYLES ***/
	.menu-toggle { display: none }
	#menu-banner-navigation { display: block }
	.ban-menu, .ban-menu * { margin: 0; padding: 0; list-style: none }
	.menu-spacer { display: inline-block; padding: 0 0 0 10px }
	.ban-menu ul {
		position: absolute;
		display: none;
		width: auto; /* left offset of submenus need to match (see below) */
	}
	.ban-menu ul li { width: 100%; white-space: nowrap }
	.ban-menu li:hover { visibility: inherit }
	.ban-menu li { display: inline-block; float: none; position: relative; margin-left: 1px; height: 44px }
	.ban-menu li.mobile { display: none }
	.menu-toggle .ban-menu li { text-align: left }
	.ban-menu li li { margin-left: 0px; height: auto }
	.ban-menu a { display: block; position: relative }
	.ban-menu li:hover ul, .ban-menu li.sfHover ul {
		display:block; left: 0;
		top: 44px; /* match top ul list item height */
		z-index: 99;
		-webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
    	box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
	}
	ul.ban-menu li:hover li ul, ul.ban-menu li.sfHover li ul { top: -999em }
	ul.ban-menu li li:hover ul, ul.ban-menu li li.sfHover ul {
		left: 18.4em; /* match ul width */
		top: 0;
	}
	ul.ban-menu li li:hover li ul, ul.ban-menu li li.sfHover li ul { top: -999em }
	ul.ban-menu li li li:hover ul, ul.ban-menu li li li.sfHover ul {
 		left: 10em; /* match ul width */
		top: 0;
	}

	/*** DEMO1 SKIN ***/
	.ban-menu { margin: 0 auto; max-width: 280px }
	.ban-menu a { text-decoration: none }
	.ban-menu li:hover { }
	.ban-menu li a {
		background: transparent; letter-spacing: 0px; margin: 0; padding: 10px 5px;
		height: 30px;		/* match .ban-menu li:hover ul top */
	}
	.ban-menu a, .ban-menu a:visited  { color: #ffffff }
	.scrolled .ban-menu a, .scrolled .ban-menu a:visited  { color: #005cb9 }
	.ban-menu li li a { 
		padding-left:20px; height:auto; background:rgba(255,255,255,.9); color:	#005cb9; font-size: 14px;
		letter-spacing: 0px; text-transform: none; font-weight: normal; padding: 10px 20px; border-top: 1px solid #e2e2e2 }
	.ban-menu ul li:first-child a { border-top: 1px solid rgba(255,255,255,.9) }
	.ban-menu ul li:last-child a { padding-bottom: 20px }
	.ban-menu li li a:visited { color: #005cb9 }
	.ban-menu li li li a,
	.ban-menu li.current * li a { padding-left: 20px; background:#cfd5e3 }
	.ban-menu li:hover > a, .ban-menu li.current a { color: #ffffff; background: transparent }
	.scrolled .ban-menu li:hover > a, .scrolled .ban-menu li.current a { color: #38d32f }
	.ban-menu li li:hover > a,
	.ban-menu li li.current a { color:#38d32f; background:rgba(255,255,255,.9) }
	.ban-menu li li li:hover > a{ color:#38d32f; background:rgba(255,255,255,.9) }
}

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1030px) {
} 

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {
} 

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {
} 

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 
}