/************************************************************************************

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 20px; background:url(../images/divider.png) center right no-repeat;}

.sf-menu li:last-child{ background:none; padding-right:0;}

/* nav link */

.sf-menu a {color:#1d1d1d; display: block; font-size: 15px; font-weight: 400; letter-spacing: 1px; padding: 18px 30px; border-radius:2px; text-transform: uppercase;}

.sf-menu a:hover{color:#fff; background:#158A0C;}

.sf-menu a.active{color:#fff; background:#158A0C;}

 

/* nav dropdown */

.sf-menu ul {

       background:#4CA533;

        position: absolute;

        display: none; /* hide dropdown */ width:280px;

        border-radius:2px 2px 4px 4px; padding-bottom:5px;

}

.sf-menu li ul li {

        float: none;

        margin:0; background:none; padding:0;}

.sf-menu li ul li a{border-bottom: 1px solid #0e8c04; color: #e6f5ff; display: block; font-size: 14px; letter-spacing: 0; line-height: 16px; padding: 12px 5px 12px 10px;}

.sf-menu li ul li a:hover{background:#158A0C;}

.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 li:hover > a{color:#fff; background:#158A0C;}

 

/************************************************************************************

MOBILE

*************************************************************************************/

@media screen and (max-width:1300px) {

.sf-menu a {padding:18px 18px;}

.sf-menu li{ padding:0 18px;}

}

@media screen and (max-width:1100px) {

.sf-menu li{ padding:0 10px;}

}

@media screen and (max-width:1000px) {

.sf-menu li{ padding:0 4px;}

.sf-menu a {padding:18px 12px;}

}

@media screen and (max-width:900px) {

.sf-menu li{ padding:0 4px;}

.sf-menu a {padding:18px 13px; font-size:14px; letter-spacing:0;}

}





@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:0; top:24px; right:0px; width:100%; 

        }

 

        /* menu icon */

        #menu-icon {

			background:url(../images/menu_icon.png) 0% 0% no-repeat; display:block; width:35px; height:25px; text-indent:-9999999em; padding:0; overflow:hidden; margin-right:15px; float:right; cursor:pointer; margin-top:15px;

        }

        #menu-icon:hover {

              

        }

        #menu-icon.active {

                background:url(../images/menu_close.png) center center no-repeat;

        }

 

        /* main nav */

		.sf-menu ul{display:block!important; visibility:visible!important; z-index:115; background:#000;}

        .sf-menu {background: #4ca533; clear: both; display: none; margin-right: 0; padding: 5px 0; position: absolute; right: 19px; top: 40px; width: 290px; z-index: 116;}

        .sf-menu li {

                clear: both;

                float: none;

                margin:0; border-bottom:1px solid #e8e8e8 !important;

				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; text-align:left; font-family: 'Roboto-Bold';

        }

        .sf-menu a:hover,

        .sf-menu ul a:hover {

                background:#ededed !important;

                color:#2C3E50 !important; border-bottom:none !important;

        }

 .sf-menu a.active{ background:#ededed !important; border-bottom:none !important; color:#2C3E50 !important;

}

        /* dropdown */

        .sf-menu ul {

                width: auto;

                position: static;

                display: block;

                border: none;

                background: inherit;

				padding:0px;

        }

        .sf-menu ul li {

                 padding:0px !important; width:100%;

				margin:0px !important;

        }

		.sf-menu li ul{ display:none !important;}

		.sf-menu li:hover ul{ display:block !important;}

}