/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
       width:100%; float:left;
}
 
/* menu icon */
#menu-icon {
        display: none; /* hide menu icon initially */
}

.sf-menu,
.sf-menu li {
        margin: 0;
        padding: 0;
}
.sf-menu li {
        list-style: none;      
		position:relative;
		float: left;
		list-style: none;
		font:600 14px/18px 'Open Sans', sans-serif;
		text-transform:uppercase;	
		
}
.sf-menu li span{display:block; text-align:center; height:45px; transition: all 300ms ease-in-out;}
.sf-menu li span.menu1{background:url(../images/menu-icon1.png) 50% 0 no-repeat;}
.sf-menu li span.menu2{background:url(../images/menu-icon2.png) 50% 0 no-repeat;}
.sf-menu li span.menu3{background:url(../images/menu-icon3.png) 50% 0 no-repeat;}
.sf-menu li span.menu4{background:url(../images/menu-icon4.png) 50% 0 no-repeat;}
.sf-menu li span.menu5{background:url(../images/menu-icon5.png) 50% 0 no-repeat;}
.sf-menu li span.menu6{background:url(../images/menu-icon6.png) 50% 0 no-repeat;}

.sf-menu li span img{display:block; margin:0 auto;}
 .sf-menu li:first-child{background:none; border-left:0;}
/* nav link */
.sf-menu a {
       color:#FFF; padding:12px 30px; display:block; text-decoration:none;  
}
.sf-menu li li:first-child{border:0;}
.sf-menu li li {background:none; border:0; padding:0; margin:0;}

ul#main-nav li.sfHover a.sf-with-ul, .sf-menu li a:hover, .sf-menu li:hover a, ul#main-nav li a.active{color:#FFF; background:#ca2c1d; padding-bottom:19px;}
ul#main-nav li.sfHover a.sf-with-ul span, .sf-menu li a:hover  span, .sf-menu li:hover a  span, ul#main-nav li a.active span{ background-position:50% -45px;}

.sf-menu li li a,  .sf-menu li:hover li a{padding:10px 14px; font-size:12px; line-height:16px;}

.sf-sub-indicator{display:none!important;}
.sf-menu a:hover {}
 
/* nav dropdown */
.sf-menu ul {
        background: #e13120;
        padding:0;	
        position: absolute;
        display: none; /* hide dropdown */
        width:250px;
		left:0;
}

.sf-menu ul li {
        float: none;
        margin: 0;
        padding: 0; border:0;
}
.sf-menu a em{font-style:normal;}
.sf-menu ul li a, .sf-menu li:hover ul li a{background:none;}
.sf-menu li li a:hover, .sf-menu li:hover li a:hover{background:#ee3826;}
.sf-menu li:hover > ul {
        display: block; /* show dropdown on hover */
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
        left:                   200px; /* match ul width */
        top:                    0;
}
 
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
        margin:                 0;
        padding:                0;
        list-style:             none;
}
.sf-menu{padding:0;}

@media screen and (max-width:860px) {
	.sf-menu li{font-size:11px; line-height:15px;}
	.sf-menu a{padding:10px 21px;}
	ul#main-nav li.sfHover a.sf-with-ul, .sf-menu li a:hover, .sf-menu li:hover a{padding-bottom:15px;}
	.sf-menu li span{height:35px; background-size:100%;}
	.sf-menu li span.menu1, .sf-menu li span.menu2, .sf-menu li span.menu3, .sf-menu li span.menu4, .sf-menu li span.menu5, .sf-menu li span.menu6, ul#main-nav li a.active{background-size:auto 70px;}
	ul#main-nav li.sfHover a.sf-with-ul span, .sf-menu li a:hover  span, .sf-menu li:hover a  span, ul#main-nav li a.active span{ background-position:50% -35px;}
	ul#main-nav li.sfHover a.sf-with-ul, .sf-menu li a:hover, .sf-menu li:hover a, ul#main-nav li a.active{padding-bottom:15px;}
}
@media screen and (max-width: 651px) {
 
        /* nav-wrap */
		ul#main-nav li.sfHover a.sf-with-ul span, .sf-menu li a:hover  span, .sf-menu li:hover a  span, ul#main-nav li a.active span{ background-position:50% -30px;}

        #nav-wrap {
                position: relative; width:100%; margin-top:0; margin-left:0; border:0;
        }
 	.sf-menu ul{padding-top:3px; padding-bottom:3px;} 
        /* menu icon */
        #menu-icon {
                color: #000;
                width:34px;
                height:34px;
                background:url(../images/menu_icon.png) 50% 50% no-repeat;
                padding:0;
				text-indent:-9999em;
                cursor: pointer;
				overflow:hidden;
				line-height:normal;
                display: block; /* show menu icon */
				float:right;
				position:relative;
				z-index:101;
				top:2px; right:12px;
        }
        #menu-icon:hover {
               
        }
        #menu-icon.active {
             
        }
 
        /* main nav */
        ul#main-nav {
                clear: both;
                position: absolute;
                top:38px;
                width:100%;
                z-index: 10000;
                padding:0;
				left:0;
                background: #000;			
                display: none; /* visibility will be toggled with jquery */
		}
        .sf-menu{padding:0;}
	.sf-menu li{float:none; border-top:#111111 1px solid;}
	.sf-menu li:first-child{border-top:0;}
	.sf-menu li span{width:40px; float:left; height:30px; margin-right:15px; transition: all 0ms ease-in-out;}
	.sf-menu a{padding:8px 15px; height:32px; background:url(../images/menu-arrow.png) 94% 50% no-repeat;}
	ul#main-nav li.sfHover a.sf-with-ul, .sf-menu li a:hover, .sf-menu li:hover a{padding-bottom:8px;}
	.sf-menu li{font-size:16px; line-height:32px;}
	.sf-menu li em{display:none;}
	.sf-menu li span.menu1, .sf-menu li span.menu2, .sf-menu li span.menu3, .sf-menu li span.menu4, .sf-menu li span.menu5, .sf-menu li span.menu6{background-size: auto 60px;}
	ul#main-nav li.sfHover a.sf-with-ul span, .sf-menu li a:hover  span, .sf-menu li:hover a  span{ background-position:50% -30px;}
	ul#main-nav li.sfHover a.sf-with-ul, .sf-menu li a:hover, 	ul#main-nav li.sfHover a.sf-with-ul, .sf-menu li a:hover, .sf-menu li:hover a, ul#main-nav li a.active{background:url(../images/menu-arrow-hover.png) 94% 50% no-repeat #ee3826;}
	ul#main-nav li.sfHover a.sf-with-ul, .sf-menu li a:hover, .sf-menu li:hover a, ul#main-nav li a.active{padding-bottom:8px;}
}
  @media screen and (max-width:651px) {
 	
 }
 @media screen and (max-width: 400px) {
	
 }
@media screen and (min-width: 767px) {
 
        /* ensure #nav is visible on desktop version */
        .sf-menu {
                display: block !important;
        }
 
}