
.mainNav {}
.mainNav ul {margin: 0; padding: 0; list-style: none;}
.mainNav ul.sf-menu {}
.mainNav ul.sf-menu li {position: static;}
.mainNav ul.sf-menu li a,
.mainNav ul.sf-menu li a:link,
.mainNav ul.sf-menu li a:visited {display:block; position:relative; text-decoration: none; }
.mainNav ul.sf-menu li a:hover,
.mainNav ul.sf-menu li a:active {}

.mainNav ul.sf-menu > li ul {}
.mainNav ul.sf-menu > li ul li {}


/* 16px baseline (180px - 767px) */
@media only screen and (min-width:11.250em) and (max-width:47.938em) {	
	.menuLink-wrapper {position: absolute; top: 15px; right: 10px;-webkit-box-shadow: 0 0 8px -3px rgba(1,1,1,1); box-shadow: 0 0 8px -3px rgba(1,1,1,1); z-index: 100;}	
	.menuLink {
		cursor: pointer;
		display: inline-block;
		height: 20px;
		position: relative;
		vertical-align: middle;
		width: 20px;
		z-index: 9000;
		padding: 5px;
		background: #f27b37;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		text-indent: -9999em;
	}
	.menuLink .menuIcon:before {
	    background: #ffffff;
		content: "";
		display: block;
		height: 2px;
		left: 0;
		position: absolute;
		top: -7px;
		-webkit-transition: transform 0.4s ease 0s;
		transition: transform 0.4s ease 0s;
		width: 20px;
	}
	.menuLink .menuIcon {
		background: #ffffff;
		content: "";
		display: block;
		height: 2px;
		left: 5px;
		position: absolute;
		top: 50%;
		-webkit-transition: all 0.2s linear 0s;
		transition: all 0.2s linear 0s;
		width: 20px;
	}
	.menuLink .menuIcon:after {
	    background: #ffffff none repeat scroll 0 0;
		content: "";
		display: block;
		height: 2px;
		left: 0;
		position: absolute;
		top: 7px;
		-webkit-transition: transform 0.4s ease 0s;
		transition: transform 0.4s ease 0s;
		width: 20px;
	}
	.menuLink.activeMenu {background: #b34a0e;}
	.menuLink.activeMenu .menuIcon::before {left: 0;top: 0;-webkit-transform: rotate(45deg); transform: rotate(45deg);}
	.menuLink.activeMenu .menuIcon{background: transparent none repeat scroll 0 0;}
	.menuLink.activeMenu .menuIcon::after {right: 0;top: 0;-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
	
	.mainNav { background: #9db8d4; margin: 0; position: absolute; top: 130px; width: 100%; display: none; -webkit-box-shadow: 0 10px 8px -8px rgba(1,1,1,0.5); box-shadow: 0 10px 8px -8px rgba(1,1,1,0.5); z-index: 2;}
	
	
	.mainNav ul.sf-menu {}
	.mainNav .sf-menu > li { border-top: 1px solid #8099ab; border-bottom: 1px solid #afc7e0;}
	.mainNav ul.sf-menu > li > a,
	.mainNav ul.sf-menu > li > a:link,
	.mainNav ul.sf-menu > li > a:visited {color: #0f3e61; font-size: 1.125em; font-weight: 600; padding: 10px 15px; display: block; position: relative; margin-right: 60px; min-height: 26px;}
	
	.mainNav .sf-menu .navMore {position: absolute; width: 60px; height: 45px; right: -60px; top: 0; display: block; z-index: 1;}
	.mainNav .sf-menu .navMore:after {
		border-left: 6px solid Transparent; 
		border-right: 6px solid Transparent; 
		border-top: 6px solid #0f3e61; 
		left: 50%;
		margin-left: -6px;
		top: 50%; 
		width: 0; 
		height: 0;
		display:inline-block;
		position: absolute;
		content: '';
		z-index: 2;
		margin-top: -2px;
	}
	.mainNav .sf-menu li .subNav {display: none !important;}
	.mainNav .sf-menu li.navActive .subNav {display: block !important;}
	.mainNav .sf-menu li.navActive > a > .navMore {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
	.mainNav .sf-menu li.navActive > a > .navMore:after {border-top: 0 none; border-bottom: 6px solid #0f3e61;-webkit-transform: rotate(180deg); transform: rotate(180deg); }
	
	.mainNav .sf-menu li ul {display: none !important; background: #ffffff; border-top: 1px solid #e8e8e8;}
	.mainNav .sf-menu .navActive > ul,
	.mainNav .sf-menu .navActive .subNav > ul {display:block !important; visibility:visible !important;}
	.mainNav .sf-menu li ul li {border-bottom: 1px solid #e8e8e8; }
	.mainNav .sf-menu li ul a,
	.mainNav .sf-menu li ul a:link,
	.mainNav .sf-menu li ul a:visited {font-size: 1em; font-weight: 600; display: block; padding: 10px 15px;  margin-right: 60px;  min-height: 26px;}
	.mainNav .sf-menu li ul > li:nth-child(even) > a {background: #ffffff;}
	
	.mainNav .sf-menu li ul ul {background: #f8f8f8; border-bottom: 1px solid #e8e8e8;}
	.mainNav .sf-menu li ul ul li:nth-child(even) a {background: #ffffff;}
	.mainNav .sf-menu li ul ul a,
	.mainNav .sf-menu li ul ul a:link,
	.mainNav .sf-menu li ul ul a:visited {font-size: 0.875em; font-weight: 400; padding-left: 20px; margin-right: 0;}
	
	.mainNav .sf-menu li ul ul ul li a,
	.mainNav .sf-menu li ul ul ul li a:link,
	.mainNav .sf-menu li ul ul ul li a:visited {background: #000; font-size: 0.813em;}

	.mainNav .sf-menu a, .mainNav .sf-menu a:link, .mainNav .sf-menu a:visited {display: block;}
	
	.subNav-ad {text-align: center; padding: 10px 0 0;}
}

/* 16px baseline (768px) */
@media only screen and (min-width:48em) {	
	.mainNav {min-height: 0 !important;}
    .navMore,
	.menuLink {display: none;}

	.mainNav {position:relative; min-height:1px; margin-bottom:0px; z-index:100; text-align: center; display: block !important}
	.mainNav > ul.sf-menu {display: inline-block; padding: 0 40px; text-align: left; margin-bottom: -4px;}
	
	.mainNav > ul.sf-menu > li {float: left;}
	.mainNav > ul.sf-menu > li > a,
	.mainNav > ul.sf-menu > li > a:link,
	.mainNav > ul.sf-menu > li > a:visited {padding: 10px 15px 5px; color: #ffffff; font-weight: 700; text-transform: uppercase; border-bottom: 10px solid #0e3c5f;}
	.mainNav .subNav {
		background: hsla(0, 0%, 100%, 0.93) none repeat scroll 0 0;
		border-bottom: 3px solid #312e85;
		box-shadow: 0 3px 0 0 hsla(0, 0%, 100%, 0.93), 0 3px 5px 0 rgba(0, 0, 0, 0.6);
		left: 0;
		padding: 15px 0 20px;
		position: absolute;
		top: -1000px;
		width: 100%;
		z-index: 200;
	}
	.mainNav ul.sf-menu > li > a:hover,
	.mainNav ul.sf-menu > li > a:active,
	.mainNav ul.sf-menu > li.sfHover > a {border-bottom: 10px solid #9db8d4;}
	
	.mainNav li:hover .subNav,
	.mainNav li.sfHover .subNav { top: 47px;}

	.mainNav .subNav ul { display:block !important; visibility:visible !important;}
	.mainNav .subNav a { color: #312E85; text-transform: none; height: auto; padding: 10px 5px;}
	.mainNav .subNav a:hover,
	.mainNav .subNav a:focus { background: hsla(0, 0%, 0%, 0.15); }
	
	.mainNav .subNav > ul > li { float: left; width: 25%; padding: 10px 20px 20px; -webkit-box-sizing: border-box; box-sizing: border-box;}
	.mainNav .subNav > ul > li > a {font-weight: bold;}
	
	.mainNav .subNav ul ul a { padding-top: 7px; padding-bottom: 7px; border-bottom: 1px solid #F58025; font-weight: normal; font-size: 0.875em;}
	.mainNav .subNav ul ul li:first-child a { border-top: 1px solid #F58025;}
	
	.subNav-ad { float: right; margin: 10px 20px 0px;}

    .orange-bowl-community .mainNav > ul.sf-menu  {padding: 10px 0 0;}
    .orange-bowl-community .mainNav > ul.sf-menu > li > a,
	.orange-bowl-community .mainNav > ul.sf-menu > li > a:link,
	.orange-bowl-community .mainNav > ul.sf-menu > li > a:visited {padding: 10px 8px 5px;}
	.orange-bowl-community .mainNav li:hover .subNav,
	.orange-bowl-community .mainNav li.sfHover .subNav {top: 67px;}

}

/* 16px baseline (960px) */
@media only screen and (min-width: 60.000em) {
	.mainNav {text-align: left; }
	.mainNav > ul.sf-menu {float: left; margin-bottom: 0; padding: 0 0 0 30px}
	
	.orange-bowl-community .mainNav > ul.sf-menu  {padding: 0;}
	.orange-bowl-community .mainNav > ul.sf-menu > li > a,
	.orange-bowl-community .mainNav > ul.sf-menu > li > a:link,
	.orange-bowl-community .mainNav > ul.sf-menu > li > a:visited {padding: 10px 15px 5px;}
	.orange-bowl-community .mainNav li:hover .subNav,
	.orange-bowl-community .mainNav li.sfHover .subNav {top: 47px;}
	
}

/* 16px baseline (1000px +) */
@media only screen and (min-width:62.500em){
	.mainNav {text-align: left; float: none;}
	.mainNav > ul.sf-menu {float: right; padding: 0 40px}
}