/* NAVIGATION top */
.main-header-wrapper { max-width: 968px; width: 100%; margin: 15px auto }
.header-top-wrapper {  }
.header-top-slogan-menu { display: flex; flex-wrap: wrap; /* margin-right: -15px; margin-left: -15px; */ justify-content: flex-end }
.header-slogan { max-height: 37px; display: flex; align-items: center; }
.header-slogan p { font-size: 14.5px; font-weight: 400; font-style: italic; padding: 0 16px; }
.corporate-nav-wrapper { display: flex; padding: 0 0 0 20px; max-height: 37px; z-index: 9999; position: relative;  }
.corporate-menu::before { 
	max-height: 37px; content: " "; position: absolute; background-color: #38d32f; width: 100vw; top: 0; left: 0;
	transform: skew(-16deg); height: 100%; z-index: -1; max-width: 490px }
.corporate-menu::after { max-height: 37px; content: ''; position: absolute; top: 0; right: 0; width: 30%; height: 100%; background-color: #38d32f;  z-index: -1;  }

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

.srt-menu li a img { display: inline-block; width: 10px; vertical-align: middle }

/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
*{ box-sizing:border-box; -moz-box-sizing:border-box }

/*MAIN MENU*/
.srt-menu { display: none; line-height: 1 }	
.srt-menu { clear:both; margin-bottom:0px }
.srt-menu a, .srt-menu a:visited { color: #ffffff }
.srt-menu li a { text-align: left; background: transparent; display:block; margin: 0; padding: 5px; text-decoration:none; font-size: 17px }
.srt-menu li a:hover { background: transparent; color: #005cb9 }
.scrolled .srt-menu li a:hover { color:#ffffff }
.srt-menu li li a { background: transparent; padding-left:40px; font-weight: normal }
.srt-menu li li li a { background:#fff; padding-left:80px }

/*SECONDARY MENU*/
#secondary-navigation { margin-bottom:60px }
#secondary-navigation ul { margin:0; padding:0 }
#secondary-navigation ul li a {  background:#E6E6E6; display:block; margin:5px 0;  padding:10px; text-decoration:none }
#secondary-navigation ul li a:hover, #secondary-navigation ul li.current a { background:#03498f; color:#fff }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.rightfloat { float:right }
.leftfloat { float:left }

/*
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) {

	#navigation	{ background: transparent; font-size: 16px; float: right; min-height: 37px }

	/*** MAIN MENU - ESSENTIAL STYLES ***/
	#menu-main-navigation{ display:block }

	.srt-menu, .srt-menu * { margin: 0; padding: 0; list-style: none }
	.srt-menu ul { 
		position: absolute; display:none; width: auto; /* left offset of submenus need to match (see below) */
		/* border-top: 2px solid #ededed; */
	}
	.srt-menu ul li { width: 100%; white-space: nowrap }
	.srt-menu li:hover { visibility: inherit }
	.srt-menu li { display: inline-block; float: none; position: relative; margin-left:1px; height: 37px }
	.srt-menu li li { margin-left:0px; height: auto }
	.srt-menu a { display: block; position: relative }
	.srt-menu li:hover ul, .srt-menu li.sfHover ul {
		display:block; left: 0;
		top: 37px; /* 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.srt-menu li:hover li ul, ul.srt-menu li.sfHover li ul { top: -999em }
	ul.srt-menu li li:hover ul, ul.srt-menu li li.sfHover ul {
		left: 18.4em; /* match ul width */
		top: 0;
	}
	ul.srt-menu li li:hover li ul, ul.srt-menu li li.sfHover li ul { top: -999em }
	ul.srt-menu li li li:hover ul, ul.srt-menu li li li.sfHover ul {
		left: 10em; /* match ul width */
		top: 0;
	}

	/*** DEMO1 SKIN ***/
	#topnav, .srt-menu { margin-right: auto; margin-left: auto }
	.srt-menu a { text-decoration:none }
	.srt-menu li:hover { }
	.srt-menu li a {
		background: transparent; letter-spacing: 0px; margin:0; padding:10px 10px;
		height: 30px; /* match .srt-menu li:hover ul top */
	}
	.srt-menu a, .srt-menu a:visited  { color: #ffffff }
	.scrolled .srt-menu a, .scrolled .srt-menu a:visited  { color: #ffffff }
	.scrolled .srt-menu li li a, .scrolled .srt-menu li li a:visited { color: #005cb9 }
	.srt-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 }
	.srt-menu ul li:first-child a { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.9) }
	.srt-menu ul li:last-child a { padding-bottom: 20px }

	.srt-menu li li a:visited { color: #005cb9 }
	.srt-menu li li li a,
	.srt-menu li.current * li a { padding-left: 20px; /* background:rgba(0,0,0,.6); */ background:#cfd5e3 }
	.srt-menu li:hover > a, .srt-menu li.current a { color: #ffffff; background: transparent }
	.scrolled .srt-menu li:hover > a, .scrolled .srt-menu li.current a { color: #005cb9 }
	.scrolled .srt-menu li li:hover > a { color: #38d32f }
	.srt-menu li li:hover > a,
	.srt-menu li li.current a { color:#38d32f; background:rgba(255,255,255,.9) }
	.srt-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) { 
}