/************************************************************************************
MOBILE
*************************************************************************************/

@media screen and (max-width:768px) {
	#navigation{ clear:both; float:none;  position:absolute; border-radius:0 0; padding:0 0;  z-index:111;  }
	.sf-menu li img.arrow{ display:none;}
 
        /* nav-wrap */
        #nav-wrap {
                position: absolute; z-index:9000000;height:50px; width:92%; left:4%; 
        }
 
        /* 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:8px; float: left; cursor:pointer; margin-top:-33px;
        }
        #menu-icon:hover {
              
        }
        #menu-icon.active {
                background:url(../images/menu_close.png) 50% 1% no-repeat;
        }
 
        /* main nav */
		.sf2-menu ul{display:block!important; visibility:visible!important; z-index:115; background:#000;}
        .sf2-menu {
                clear: both;
                position: absolute;
                top:-9px;
                width:292px;
                z-index: 116;
                background:#4D4D4D;        
       			border-bottom:4px solid #333333;
				border-radius:10px; padding:12px 0;
                display: none; /* visibility will be toggled with jquery */
        }
        .sf2-menu li {
                clear: both;
                float: none;
                margin: 5px 0 5px 15px;
				border:none;
				width:95%;
				text-align:left;
				padding-left:0px !important;
        }
        .sf2-menu a,
        .sf2-menu ul a {
                font: inherit;
                background: none;
                display: inline; padding:0px;
                color: #fff !important;
                border: none;
        }
        .sf2-menu a:hover,
        .sf2-menu ul a:hover {
                background: none;
                color: #d6eeff;
        }
 .sf2-menu a.active{ padding:2px 4px; background:url(../images/nav-hover-bg.png) repeat;
}
        /* dropdown */
        .sf2-menu ul {
                width:95%;
                position: static;
                display: block;
                border: none;
                background: inherit;
				margin:13px 0 20px 0px !important;
				padding:0px;
        }
        .sf2-menu ul li { font-family:Arial, Helvetica, sans-serif !important; padding:0px !important; width:100%;
				margin:0px !important;
        }
		.sf2-menu ul li a{ font-family:Arial, Helvetica, sans-serif !important; font-size:14px !important;
        } 
}
 
@media screen and (min-width: 768px) {
 
        /* ensure #nav is visible on desktop version */
 
}