/************************************************************************************
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 13px/20px 'Open Sans', sans-serif;
	
		
}
 .sf-menu li:first-child{background:none; margin-left:0; border-left:0;}
/* nav link */
.sf-menu a {color:#FFF;  padding:17px 23px; display:block; text-decoration:none; transition: all 300ms ease-in-out; }
.sf-menu li li {background:none; border:0; padding:0; margin:0;}
.sf-menu li li:first-child{border:0;}
.sf-menu li li a{padding:9px 20px; font-size:16px; text-transform:none;}

.sf-menu li a:hover, .sf-menu li:hover a{color:#FFF; background:#0082c8;}

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

.sf-menu ul li {
        float: none;
        margin: 0;
        padding: 0; border:0; border-top:#529ad9 1px solid; 
}
.sf-menu ul li a, .sf-menu li:hover ul li a{background:none; font-size:13px; line-height:18px;}
.sf-menu li li a:hover, .sf-menu li:hover li a:hover{background:#468ecd;}
.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 (min-width: 860px) {
.sf-menu .mega-menu{clear:both;}
.sf-menu li:hover .mega-menu ul{visibility:visible; display:block; width:960px; left:-103px; clear:both;}
.sf-menu li:hover .mega-menu ul li{width:33.33%; border:0; float:left;}
.sf-menu li:hover .mega-menu ul li a{padding:6px 14px;}
.sf-menu .mega-menu ul li ul{display:none!important;}
}

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 860px) {
	#nav-wrap{float:left; border-right:0;}	
	.main-nav{position:relative;}
	ul#main-nav {top:34px; height:auto;}
}
@media screen and (max-width: 860px) {
 
        /* nav-wrap */
        #nav-wrap {
                position: relative; width:auto; 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;
				margin:11px 0 0 10px;
				text-indent:-9999em;
                cursor: pointer;
				overflow:hidden;
				line-height:normal;
                display: block; /* show menu icon */
        }
        #menu-icon:hover {
               
        }
        #menu-icon.active {
                background:url(../images/menu_cross.png) 50% 50% no-repeat;
        }
 
        /* main nav */
        ul#main-nav {
                clear: both;
                position: absolute;
                top:54px;
				border-radius:0;
                width:280px;
                z-index: 10000;
                padding:5px;
				left:0;
                background: #387fbd;			
                display: none; /* visibility will be toggled with jquery */
        }
        .sf-menu li {
                clear: both;
                float: none;
                margin:3px 5px 2px;
				background:none; font-size:13px;
				border:0;
				border-top:#529ad9 1px solid;
        }
		.sf-menu li:first-child{margin-left:5px;}
		.sf-menu li li:first-child{margin-left:0;}
		.sf-menu li li:hover {background:none;}
		ul#main-nav li.sfHover a.sf-with-ul, .sf-menu li a:hover{color:#FFF; background:none;}
		.sf-menu li li{border:0;}
		.sf-menu li:first-child{border-top:0;}
        .sf-menu a,
        .sf-menu ul a {
                font: inherit;
                background: none;
                display:block;
                padding:5px;
                color: #E5F3FE;
                border: none;
				font-size:16px; line-height:20px;
        }
        .sf-menu li li a:hover,
        .sf-menu ul li li a:hover {
                background: #468ecd;
                color: #FFF;
        }
 
        /* dropdown */
        .sf-menu ul {
                width: auto;
                position: static;
                display: block!important;
				visibility:visible!important;
                border: none;
                background: inherit;
				
        }

        .sf-menu ul li {
                margin: 0 0 1px; border:0;
        }
		.sf-menu ul li a, .sf-menu li:hover li a, .sf-menu li:hover a, ul#main-nav li.sfHover a.sf-with-ul, .sf-menu li a:hover {background:#468ecd; padding:5px 5px  5px 20px;}
		.sf-menu ul li a, .sf-menu li:hover ul li a{background:#468ecd;}
		.sf-menu li li a:hover, .sf-menu li:hover li a:hover{background:#468ecd; padding-left:30px;}
 		.sf-menu ul ol, .sf-menu ul ol.first{width:48%; border:0;}
}
@media screen and (max-width: 768px) {
	.sf-menu .mega-menu ul li ul{display:none!important;}
}
  @media screen and (max-width: 599px) {
 	.sf-menu li{font-size:12px;}
	.sf-menu .mega-menu ul li ul{display:none!important;}
 }
 @media screen and (max-width: 400px) {
	 ul#main-nav{width:266px;}
 }
@media screen and (min-width: 860px) {
 
        /* ensure #nav is visible on desktop version */
        .sf-menu {
                display: block !important;
        }
 
}