/*** ESSENTIAL STYLES ***/
.sf-menu {
  position: relative;
}
.sf-menu, .sf-menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li:not(.sf-mega-parent) {
	position: relative;
}

.sf-menu ul,
.sf-menu .sf-mega {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}
.sf-menu .sf-mega ul {
	position:static;
	display:block;
}
.sf-menu > li {
  float: left;
}
.sf-menu li:hover > .sf-mega,
.sf-menu li.sfHover > .sf-mega {
  display: block;
}

.sf-menu > li > a {
  display: block;
  position: relative;
}


/*** DEMO SKIN ***/
.sf-menu {
	display: block;
  float: left;
  width: 100%;
  background: #888;
  margin-bottom: 20px;
}
.sf-menu li:not(.sf-mega-parent) ul {
	min-width: 12em; *width: 12em;
}
.sf-menu .sf-mega {
	width: 100%;
}

.sf-menu li:not(.sf-mega-parent) ul,
.sf-menu .sf-mega  {
	-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}

.sf-menu > li > a {
  font-size: 15px; text-transform: uppercase; text-decoration: none; color: #FFF; font-weight: 400; line-height: 36px; zoom: 1; /* IE7 */
}
.sf-menu > li > a > i { margin-right:5px; }
.sf-menu > li {
  
  padding: 0 20px;
  border-right: 1px solid #BBB;
}
.sf-menu > li:hover,
.sf-menu > li.sfHover {
  -webkit-transition: none;
  transition: none;
  background: #663399;
}

.sf-menu > li.active { background: #663399; }

.sf-menu > li:last-child { border: 0; }

.sf-menu li:not(.sf-mega-parent) li a {
	background-color: #fff; color:#222; display:block; font-size:13px;
	text-transform: none; font-weight: normal;
	line-height:40px;height:40px;
	padding:0 10px;	border-bottom:1px solid #ddd;
}

.sf-menu li:not(.sf-mega-parent) li a:hover {
	background-color: #f9f9f9;
}

/*** mega menu dropdown ***/
.sf-mega {
  background-color: #fff;
  padding: 20px; padding-bottom:0;
  width: 100%;
}

.sf-mega .sf-mega-list a{ color: #111; font-weight: bold;}
.sf-mega .sf-mega-list a:hover{ color: #888;}


/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
  padding-right: 1em;
  *padding-right: 0; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
 content: '+';
	position: absolute;
	top: 0px;
	right: 0;
	color:#666
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
  border-top-color: white; /* IE8 fallback colour */
}
@media (max-width: 1199px) {

	.sf-menu > li { padding: 0 10px; }
	.sf-menu > li > a { font-size: 12px; }
	
}
@media (max-width: 768px) {

	.sf-menu { display: none; position: absolute; width: 100%; left: 0; padding: 0 20px; z-index: 999999; margin-top: -29px; background: none; }
	.sf-menu.open { display: block; }
	.sf-menu > li { display: block; border: 0; border-bottom: 1px solid #BBB; padding: 10px; float: none; background: #888; max-width: 510px; margin: 0 auto; }

}