.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
.main-menu{ float:right; padding:45px 10px 0 0; width:556px\9}
.sf-menu li {position:relative; text-transform:uppercase; float:left; border-left:1px solid #363636;}
.sf-menu li:first-child{ border-left:none;}
	.sf-menu li a {display:block; color:#fff; padding:25px 22px 20px 21px; background:#000; font-size:22px; line-height:1.3px;}
		.sf-menu li.current a,.sf-menu li.sfHover a,.sf-menu li a:hover{ background:#fff; color:#000; text-decoration:none;}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	z-index:		99;
	width:			117px; 
	display:none;
	background:#fff9d6;
	padding:10px 19px;
}
.sf-menu li li{width:100%;padding:7px 0 3px; background:url(../images/submenu-line.jpg) 0 0 repeat-x;border:none; text-transform:none;}
.sf-menu li li:first-child{ background:none;}
	.sf-menu li li a,.sf-menu li.sfHover li a,.sf-menu li.current li a{ display:inline-block; padding:0; background:none; font:14px/18px Arial, Helvetica, sans-serif; margin-left:12px; color:#000;}
		.sf-menu li li a:hover,.sf-menu li li.sfHover a,.sf-menu li li.current a{color:#d77831;}
.sf-menu ul ul {
	position:		absolute;
	top:			-999em;
	z-index:		99;
	width:			128px; 
	display:none;
	background:#fff9d6;
	padding:10px 14px;
}
	.sf-menu li li li{}
	.sf-menu li li li a,.sf-menu li li.sfHover li a,.sf-menu li li.current li a{ color:#000;}
		.sf-menu li li li a:hover,.sf-menu li li li.current a{color:#d77831;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			83px; /* 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:			137px; /* match ul width */
	top:			-10px;
}
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;
}
.sf-menu li a span.arrow{ display:inline-block; background:url(../images/menu-arrow.png) 0 -7px no-repeat; width:11px; height:7px; margin:5px 0 0 10px;}
.sf-menu li li a span.arrow{margin:5px 0 0 5px;}
.sf-menu li a:hover span.arrow,.sf-menu li.current a span.arrow,.sf-menu li.sfHover a span.arrow{ background-position:0 0;}
@media only screen and (min-width: 768px) and (max-width: 995px) {
	.main-menu{ float:right; padding:40px 5px 0 0;}
	.sf-menu li a {display:block; color:#fff; padding:25px 12px 20px 11px;}
.main-menu{width:556px\9}
}
@media only screen and (max-width: 767px) {
	.main-menu{ float:none !important; padding:0;margin-left:-10px;}
	.sf-menu{ float:none;}
	.sf-menu li{padding:0;float: none; min-width:100%; width:320px; margin-bottom:3px; border:none;}
	.sf-menu li a{ display:block; position:relative;padding:20px 22px 17px 21px;}
	.sf-menu ul,.sf-menu ul ul{ min-width:100%; padding:0;position: relative; left: 0 !important; top:0px !important; box-shadow:none !important; border-radius:0; border:none;}
	.sf-menu li li a{ padding-left:20px !important;}
	.sf-menu li li li a{ padding-left:40px !important;}
.main-menu{width:100%}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.main-menu{ margin-left:-15px;}
	.sf-menu li{ width:450px;}}