.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
.main-menu{background:#3b3b3b; width:100%;}
.sf-menu li {position:relative; float:left; font-size:20px; line-height:1.2em; text-transform:uppercase; background:#3b3b3b url("http://crowdappeal.imgix.net/pic/menu-line.jpg") 0 0 no-repeat; padding-left:2px;}
.sf-menu li:first-child{ background:none; padding-left:0;}
.sf-menu li.li-form{ padding:15px 0 12px 18px;}
	.sf-menu>li>a {display:block; background:#3b3b3b; color:#fff; padding:22px 27px 20px 28px; position:relative;
		-webkit-transition:background 0.5s ease;-moz-transition:background 0.5s ease;-o-transition:background 0.5s ease;transition:background 0.5s ease;}
		.sf-menu li.sfHover a,.sf-menu li a:hover,.sf-menu li.current a{ background:#fff; color:#3b3b3b;}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	z-index:		99;
	width:			212px; 
	display:none;
	background:#3b3b3b;
	border-top:4px solid #2c2c2c;
	padding:15px 0 20px;
}
.sf-menu li li{width:100%;padding:0; font-size:18px; margin-bottom:1px;}
	.sf-menu li li a,.sf-menu li.sfHover li a,.sf-menu li.current li a{ background:#3b3b3b;color:#fff; display:block; padding:10px 5px 8px 25px; margin:0 5px;
		-webkit-transition:background 0.5s ease;-moz-transition:background 0.5s ease;-o-transition:background 0.5s ease;transition:background 0.5s ease;}
		.sf-menu li li a:hover,.sf-menu li li.sfHover a,.sf-menu li li.current a{ background:#fff;color:#3b3b3b;}
.sf-menu ul ul {
	position:		absolute;
	top:			-999em;
	z-index:		99;
	width:			212px; 
	display:none;
	background:none;
	background:#3b3b3b;
	border-top:none;
	padding:5px 0;
}
	.sf-menu li li li a,.sf-menu li li.sfHover li a,.sf-menu li li.current li a{ background:#3b3b3b;color:#fff; display:block; padding:10px 5px 8px 25px; margin:0 5px;}
		.sf-menu li li li a:hover,.sf-menu li li li.current a{ background:#fff;color:#3b3b3b;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0px;
	top:			66px; /* 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:			213px; /* match ul width */
	top:			-5px;
}
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:block; background:url("http://crowdappeal.imgix.net/pic/arrow.png") 0 -8px no-repeat; width:13px; height:8px; position:absolute; top:45%; right:8px;}
.sf-menu li a:hover span.arrow,.sf-menu li.sfHover a span.arrow,.sf-menu li.current a span.arrow{ background-position:0 0;}
@media only screen and (min-width: 768px) and (max-width: 995px) {
	.sf-menu>li>a{padding:22px 17px 20px 15px;}	
	.sf-menu li.li-form{ padding:15px 0 12px 12px;}
	.sf-menu li a span.arrow{right:2px;}
}
@media only screen and (max-width: 767px) {
	.sf-menu{ float:none; background:none;}
	.sf-menu li{ padding:0;float: none; min-width:100%; border-top:1px solid #474747; border-bottom:1px solid #2f2f2f;}
	.sf-menu li:first-child{ border-top:none;}
	.sf-menu li.li-form{ padding:15px 0 12px 18px; min-width:282px;}
	.sf-menu li a{}
	.sf-menu ul,.sf-menu ul ul{ min-width:100%; padding:0;position: relative; left: 0 !important; top:0px !important;}
	.sf-menu li a span.arrow{left:120px;}
	.sf-menu li li{ border:none;}
	.sf-menu li li li a{ padding-left:40px !important;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.sf-menu li.li-form{ padding:15px 0 12px 18px; min-width:402px;}
}