/*** ESSENTIAL STYLES ***/
.sf-menu {
  position: relative;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: table;
  float:right;
}
.sf-menu .sf-mega {
  position: absolute;
  display: none;
  top: 100%;
  left: 15px;
  z-index: 99;
  display: block;
}

.sf-menu > li {
  float: left;
}
.sf-menu li:hover > .sf-mega,
.sf-menu li.sfHover > .sf-mega {
  display: block;
  background-color:#e54d2c;
}

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


/*** DEMO SKIN ***/
.sf-menu .sf-mega {
 margin-top: 10px;
  -moz-box-shadow: 0px 3px 8px rgb(100,100,100);
-webkit-box-shadow: 0px 3px 8px rgb(100,100,100);
box-shadow: 0px 3px 8px rgb(100,100,100);
}
.sf-menu a {
padding: 0.7em 1.5em 0.7em 0.7em;
margin: 0;
margin-left: 1em;
text-decoration: none;
text-transform:uppercase;
zoom: 1;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
color: #fff;
font-size: 1.6em;
font-weight: 300;
transform: skew(20deg); -webkit-transform: skew(20deg);
}
.sf-menu li {
	white-space: nowrap; /* no need for Supersubs plugin */
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
	-webkit-transition: background .2s;
	transition: background .2s;
}
.sf-menu li a:hover,
#.sf-menu li.sfHover a {
	/* only transition out, not in */
	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;
	
background-color:#e54d2c;
}

/*** mega menu dropdown ***/
.sf-mega {
background-color: #fafafa;
border-radius:0px 0px 2px 2px;
background-repeat: repeat-x;;
margin: 0px 0 0 0;
padding: 32px 36px;
position: absolute;
left: -999em;
z-index: 999;
  padding: 1em 2em;
  box-sizing: border-box;
}
.sf-mega-section {
  float: left;
  width: 8em; /* optional */
  padding: 0 1em 1em 0;
  margin-right: 1em;
  border-right: 1px solid #b4c8f5;
}
.sf-mega *,
.sf-mega a {
 margin: 0;
 padding: 0;
 text-align: left;
 text-decoration: none;
 font-size: 13px;
}


.sf-mega a:hover,
.sf-mega a:focus,
.sf-mega a:active,
.sf-mega a:hover h4,
.sf-mega a:focus h4,
.sf-mega a:active h4 {
   color: #59a72d;
   	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;
}

.sf-mega ul {
	list-style-type: none;
	padding-left: 20px;
}
.sf-mega h4 {
	margin: 0.3em 0;
}
.col {
	margin-bottom: 10px;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {

}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content: '';
	position: absolute;
	bottom: -25px;
	margin-top: 10px;
	margin-left: -45%;
	height: 0;
	width: 0;
	/* order of following 3 rules important for fallbacks to work */
	border: 8px solid transparent;
	border-top-color: #59a72d; /* edit this to suit design (no rgba in IE8) */
	/* border-top-color: rgba(255,255,255,.5); */
	z-index: 999;
}
.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: none; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	margin-top: -5px;
	margin-right: -3px;
	border-color: transparent;
	border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
	border-left-color: white;
}