nav{position:relative;z-index:99; width:940px; margin:0 auto; padding:21px 0 21px 1px;}
.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
.sf-menu li {float:left; position:relative; margin-right:6px; padding-top:12px;}
	.sf-menu li a { position:relative; display:block;padding:14px 16px 14px 15px;}
	.sf-menu li a span{display:block; position:absolute; bottom:0; top:0; left:0; right:0;z-index:4;border:6px solid #fff;box-shadow:1px 1px rgba(0,0,0,0.05);border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
		.sf-menu li a span em{ display:block;position:absolute; bottom:0; top:0; left:0; right:0;z-index:5;}
	.sf-menu li a strong{ position:relative; z-index:6;font:17px/26px 'Oswald', sans-serif; color:#fff; text-transform:uppercase;}
	.m1 span em{ background:url(../images/m1.jpg) 0 0 repeat-x #9cbb20;}
	.m2 span em{ background:url(../images/m2.jpg) 0 0 repeat-x #ffa401;}
	.m3 span em{ background:url(../images/m3.jpg) 0 0 repeat-x #cc3737;}
	.m4 span em{ background:url(../images/m4.jpg) 0 0 repeat-x #12b0d0;}
		.sf-menu .current{padding-top:0px !important;}
		.sf-menu .current a{padding:26px 16px 14px 15px !important;}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	z-index:		99;
	width:			104px; 
	display:none;
	background:#ffa500;
	padding:6px 8px 8px 12px;
	border-radius:5px;
}
.sf-menu li li{padding:0 !important; margin:0 !important; width:100%;}
	.sf-menu li li a, .sf-menu .current li a{padding:0 !important; border:none; box-shadow:none;color:#fff; text-transform:uppercase; font:12px/25px "Trebuchet MS", Arial, Helvetica, sans-serif;}
		.sf-menu li li.sfHover > a, .sf-menu li li a:hover{ text-decoration:underline;}
.sf-menu ul ul {
	position:		absolute;
	top:			-999em;
	z-index:		99;
	width:			104px;
	display:none;
	background:#ffa500;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0px;
	top:			69px; /* match top ul list item height */
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			115px; /* match ul width */
	top:			-6px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			00px;
}

@media only screen and (max-width: 995px){
	nav{max-width:530px;}
	.menu li {font-size:13px !important; line-height:16px !important;}
	.menu > li > a {padding:31px 5px 27px;}
	.menu .menu-arrow{display:block; width:100%; height:6px; overflow:hidden; text-indent:-999em; font-size:0; line-height:0; background:url(../images/menu-arrow.gif) center top no-repeat; margin-bottom:-6px;}
	/***submenu***/
	.menu li:hover ul, .menu li.sfHover ul {top:85px;}
}

@media only screen and (max-width: 767px) {
	nav{width:100%;}
	.menu > li {float:none; margin-right:0px;}
	.menu > li > a{padding:15px 20px !important;}
		.menu > li > a:hover, .menu > li.sfHover > a, .menu > li.current > a {padding:11px 16px !important; border-width:4px; border-style:solid;}
			.menu > li > a.bg-color1:hover, .menu > li.sfHover > a.bg-color1, .menu > li.current > a.bg-color1 {border-color:#88a70e;}
			.menu > li > a.bg-color2:hover, .menu > li.sfHover > a.bg-color2, .menu > li.current > a.bg-color2 {border-color:#cf8300;}
			.menu > li > a.bg-color3:hover, .menu > li.sfHover > a.bg-color3, .menu > li.current > a.bg-color3 {border-color:#af1e1e;}
			.menu > li > a.bg-color4:hover, .menu > li.sfHover > a.bg-color4, .menu > li.current > a.bg-color4 {border-color:#0ba1c0;}
			.menu > li > a.bg-color5:hover, .menu > li.sfHover > a.bg-color5, .menu > li.current > a.bg-color5 {border-color:#cc8899;}

	.menu .menu-arrow{display:inline-block; width:9px; margin:0 0 0 5px; vertical-align:middle;}
	/***submenu***/
	.menu ul {position:static; width:auto;}
	.menu li li{margin-bottom:15px;}
}

@media only screen and (max-width: 479px) {
nav{max-width:100%; margin:0 auto; padding:5px 0 115px 1px;}
.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
.sf-menu li {float:left; position:relative; margin-right:6px; padding-top:12px;}
	.sf-menu li a { position:relative; display:block;padding:14px 16px 14px 15px;}
	.sf-menu li a span{display:block; position:absolute; bottom:0; top:0; left:0; right:0;z-index:3;border:6px solid #fff;box-shadow:1px 1px rgba(0,0,0,0.05);border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
}