/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap { z-index:999999;
}
 
/* menu icon */
#menu-icon {
        display: none; /* hide menu icon initially */
}
 .sf-menu{ overflow:hidden !important;}
.sf-menu,
.sf-menu li {
        margin: 0;
        
}
.sf-menu li {
        display:block; float:left; padding:0 0 0 2px;
}
 
/* nav link */
.sf-menu a {color:#221e1f /*#fff*/; display: block; font-family: "BebasNeue"; font-size: 20px; letter-spacing: 1px; line-height: 20px; padding: 5px 15px; /*text-decoration: none;*/}
.sf-menu a span.sf-sub-indicator{display:none!important;}
.sf-menu a:hover {color:#0E16B0/*#fff*/;}
.sf-menu a.active{color:#0E16B0;}
.sf-menu > li > a:focus, .sf-menu > li > a:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #0E16B0 /*#fff*/;
}
 
/* nav dropdown */
.sf-menu ul { background:#000; border-radius: 2px 2px 4px 4px; display: none; opacity: 0.9; z-index:10; padding: 5px 10px; position: absolute;}
.sf-menu li ul li {
        float: none;
        margin: 0 0 0 0;
		
		 border-right:none;
		 padding-left:0 !important;
}
.sf-menu li ul li a{ padding:5px 5px 5px 10px; display:block; color:#e6f5ff !important; line-height:22px;}
.sf-menu li ul li a:hover{background:#0a81cc;}
.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;
}
 
/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width:1199px) {
.sf-menu a{padding: 1px 10px;}
}
@media screen and (max-width:1100px) {
.sf-menu a{padding: 1px 9px;}
}
@media screen and (max-width:991px) {
.sf-menu a{font-size: 16px; padding: 1px 6px;}
}

@media screen and (max-width:767px) {
	#navigation{ clear:both; float:none;  position:absolute; border-radius:0 0; padding:0 0;  z-index:111;  }
 
        /* nav-wrap */
        #nav-wrap {
                position: absolute; z-index:9000000;height:50px; top:-12px; right:0px; 
        }
 
        /* menu icon */
        #menu-icon {
			background:url(../images/menu_icon.png) 0% 0% no-repeat; display:block; width:34px; height:44px; text-indent:-9999999em; padding:0; overflow:hidden; margin-left:0px; float:right; cursor:pointer; margin-top:15px;
        }
        #menu-icon:hover {
              
        }
        #menu-icon.active {
                background:url(../images/menu_close.png) 50% 1% no-repeat;
        }
 
        /* main nav */
		.sf-menu ul{display:block!important; visibility:visible!important; z-index:115; background:#000;}
        .sf-menu {
                clear: both;
                position: absolute;
                top:40px; right:0;
                width:230px;
                z-index: 116;
                background:rgba(0, 0, 0, 0.9);        
       			border-bottom:4px solid #000;
				border-radius:10px; padding:2px 0;
                display: none; /* visibility will be toggled with jquery */
        }
        .sf-menu li {
                clear: both;
                float: none;
                margin:0;
				border:none;
				width:100%;
				text-align:left; padding-right:0px !important;
				padding-left:0px !important;
        }
        .sf-menu a,
        .sf-menu ul a {
                font: inherit;
                background: none;
                display:block; padding:8px 10px;
                color: #fff !important; width:100%;
                border-bottom:1px solid #666666; 
        }
        .sf-menu a:hover,
        .sf-menu ul a:hover {
                background:#333333;
                color:#fff;
        }
 .sf-menu a.active{ background:#a85500;
}
        /* dropdown */
        .sf-menu ul {
                width: auto;
                position: static;
                display: block;
                border: none;
                background: inherit;
				margin:13px 0 0 30px !important;
				padding:0px;
        }
        .sf-menu ul li {
                 padding:0px !important; width:100%;
				margin:0px !important;
        }
		.sf-menu ul li a{ font-size:15px !important;} 
		
}

@media screen and (max-width:600px) {
 #nav-wrap { top:5px;}
}
 
@media screen and (max-width:500px) {
 #nav-wrap { top:34px;}
}