/*** ESSENTIAL STYLES ***/
.sf-menu {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf-menu .sf-mega {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 100000;
}
.sf-menu > li {
  float: left;
  line-height:16px;
  padding-right:1px;
}
.sf-menu > li:hover
{
    background-color: #FF6633;
    background-color: rgba(241, 94, 50, 0.58);
}
.sf-menu > li.active
{
    background-color: #F15C31;
}
.sf-menu li:hover > .sf-mega,
.sf-menu li.sfHover > .sf-mega {
  display: block;
}
.sf-menu > li > a {
    display:block;
    position: relative;
/*    padding: 18px 18px 21px 18px;*/
    padding: 16px 11px 21px;
    color:#676767;
}
.sf-menu a {
  text-decoration:none;
  text-transform: uppercase;
  font: normal 14px Oswald;
}
.sf-menu > li:hover > a,
.sf-menu > li.active > a 
{
    color: #FFF;
}

/*** DEMO SKIN ***/
.sf-menu {
  float: left;
  width: 810px;
  overflow: visible;
}

/*** mega menu dropdown ***/
.sf-mega {
  background: #fff url(../image/bg-mega-menu.jpg) repeat-x;
  box-sizing: border-box;
  width: 1026px;
  border-top: 8px solid #F15C31;
  -moz-box-shadow: 0 8px 8px -3px #606060;
  -webkit-box-shadow: 0 8px 8px -3px #606060;
   box-shadow: 0 8px 8px -3px #606060;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
/*hack for chrome, needs more width*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .sf-mega {
        width: 1030px;
    }
}
.sf-mega-section {
    display: inline-block;
    display: -moz-inline-stack;
    text-align: center;
    zoom: 1; /*IE7*/
    *display: inline; /*IE7*/
    width: 127px; /*8 items*/
    height: 190px;
    vertical-align: top;
    margin-left: -4px; /* remove inline-block whitespace */
    background: transparent url(../image/mega-menu-item-divider.png) repeat-y right 0;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -o-transition: .2s all linear;
    transition: .2s all linear;	   
}
.sf-mega-section:first-child,
.first
{ 
    margin-left: 0;
}
.sf-mega-section > ul {
/*    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;*/
    padding: 15px 1em 10px;
}
.sf-mega-section:hover {
    background-color: #EDEDED; /*old browsers*/
    background-color: rgba(179, 179, 179, 0.23);
}
.sf-mega-section p {
    font-size: 12px;
    margin-bottom: 0;
}

/* var widths of dropdown items
----------------------------------*/
.items-3 .sf-mega-section {width: 342px;}
.items-4 .sf-mega-section {width: 215px;}
.items-5 .sf-mega-section {width: 169px;}
.items-7 .sf-mega-section {width: 147px;}
.items-8 .sf-mega-section {width: 130px;}
.items-9 .sf-mega-section {width: 113px;}
/*--------------------------*/

/* var widths of last dropdown item - to take up remaining space
------------------------------------------------------------*/
.items-3 .last {width: 344px;}
.items-7 .last {width: 150px;}
.items-8 .last {width: 122px;}
.items-9 .last {width: 130px;}
/*.items-11 .last { width: 144px; }*/
/*----------------------------------------------------*/

.sf-mega-section img {
  margin-bottom: 8px;
}
.items-8 .sf-mega-section img { width: 90px; }
.items-9 .sf-mega-section img { width: 80px; }

.sf-mega-section:hover a {
    color: #F15C31;
}
.sf-mega-section:last-child,
.last
{
  background-image: none;
  margin-right: 0;
}
/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
  padding-right: 2.5em;
  *padding-right: 1em; /* 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: 50%;
  right: 1em;
  margin-top: -3px;
  height: 0;
  width: 0;
  /* order of following 3 rules important for fallbacks to work */
  border: 5px solid transparent;
  border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
  border-top-color: rgba(255,255,255,.5);
}
.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 */
}