/*** ESSENTIAL STYLES ***/
.sf-menu {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  height:80px;
  font-size:16px;
    font-family:'TitilliumText22L5';
}
.sf-menu .sf-mega {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99; 
}
.sf-menu > li {
  float: left;
  position:relative;
}
.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 {
  float: left;
  margin-bottom: 1em;
  width: 100%;
}
.sf-menu .sf-mega {
  box-shadow: 2px 3px 6px rgba(0,0,0,.2);
 /* allow long menu items to determine submenu width */
}
.sf-menu > li > a {
    padding: 30px 30px 30px 30px;
  text-decoration: none;
  zoom: 1; /* IE7 */
  color: #fff;
}

.sf-menu > li 
{
     border-left: 1px solid #000;
     border-right: 1px solid #363636;
  background: transparent;
  -webkit-transition: background .2s;
  transition: background .2s;
  height:100%;
}
.sf-menu > li:first-child
{
    border-left:none;
}
.sf-menu > li:last-child
{
    border-right:none;
}
.sf-menu > li:hover,
.sf-menu > li.sfHover {
  background:url(../../Styles/Images/nav-bg-hover.jpg) repeat-x;
 
  /* only transition out, not in */
  -webkit-transition: none;
  transition: none;
}

.sf-menu > li > a:hover
{
     color:#2D4201;
}

/*** mega menu dropdown ***/
.sf-mega 
{
    background: none repeat scroll 0 0 #323232;
    border: medium none;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 0;
    margin: 0 0 0 1px; 
  padding:15px 0px 15px 5px;
  box-sizing: border-box; 
     font-family:TitilliumText22L4;
     font-size:14px;
}
.sf-mega-section {
  float: left;
  width: 8em; /* optional */
  
 
  border-right: 1px 
  solid #b4c8f5;
}

.sf-mega-h4
{
    margin:0;
    border-bottom: 1px solid #8ECD06;
    color: #BEFF28;
    margin-bottom: 10px;
    padding-bottom:10px;
}

.sf-mega-h4_1
{
    margin:0;
    border-bottom: 1px dashed #595959;
    color: #A9C26B;
    margin-bottom: 5px;
    padding-bottom:5px;
}

.sf-mega-div_1
{
    width:450px;
    float:left;
}

.sf-mega-div_1_1
{
    padding:0;
    float: left;    
    width:150px;
    padding-right:10px;
}

.sf-mega-div_1_2
{     
    float: left; 
    width:280px;
}

.sf-mega-div_2
{
      width:330px;
    float:left;
}

.sf-mega-div_2_1
{
     padding:0;
    float: left;    
    width:160px;
    padding-right:10px;
}

.sf-mega-div_2_2
{
      width:150px;
    float:left;
}

.sf-mega-div_3
{
    width:470px;
    float:left;
}

.sf-mega-div_3_1
{
    width:450px;
    float:left;
}

.sf-mega-div_3_1 li
{
    width:150px;
}

.sf-mega-div_3_2
{
    width:450px;
    float:left;
}

.sf-mega-div_3_2_column
{
    width:140px;
    float:left;
}

.sf-mega-div_4
{
    width:500px;
    float:left;
}

.sf-mega-div_4_1
{
    width:480px;
    float:left;
    margin-bottom:10px;
}

.sf-mega-div_4_1_column
{
   width:150px;
    float:left;
    margin-right:10px;
}

.sf-mega-div_4_2
{
    width:150px;
    float:left;
    margin-right:10px;
}

.ul_sf_mega
{
    padding:0;
    list-style:none;   
}

.ul_sf_mega li
{
  
   padding-bottom:4px;
   padding-top:4px;   
}

.ul_sf_mega li:hover
{
  
    padding-top:4px;
   padding-bottom:4px;
    background:#8ECD06 no-repeat;
    color:#456500;   
}

.ul_sf_mega li a
{
    padding-left:4px;
    color:#fff;   
    text-decoration:none;   
    display:block;
}
.ul_sf_mega li a:hover
{
   color:#456500;
}

/*** 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: -8px;


  /* order of following 3 rules important for fallbacks to work */
  border: 10px solid transparent;
 
  
  border-top-color: transparent;
    background:url(../../Styles/Images/drop.png)no-repeat left;
    padding-left:3px;
}
.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: transparent; /* IE8 fallback colour */
     background:url(../../Styles/Images/drop-h.png)no-repeat left;
}