@charset "utf-8";
/* CSS Document */

    .menu{ text-align: center; }
     
    .menu li{display: inline-block; padding-left:40px; padding-right:40px; /*line-height:100px;*/
    position: relative; 
    z-index:100;}
     
	.menu li:last-child { padding-right:0;}

    .menu li a {
    text-decoration:none;
  padding:0px 26px;
    display:block;
    color:#666; line-height:40px; /*line-height:52px; */
	
     
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;

    }

    
    .menu li a:hover, .menu li a.current, .menu li.current a { color:#c2d501; background-color:#666;  }
	.menu li:hover > a{color:#c2d501; background-color:#666666;   }
	.menu li.current:hover > a{color:#c2d501;  }
	.menu li a.current { color:#666;}
.menu li.current li.current a, .menu li.current li a:hover { color:#ffcc00; border:none; padding-bottom:11px;}
.menu li.current li a { color:#ff00cc;}

	
	    /* hide the second level menu */
    .menu ul {display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 40px;
   /* left: 0px;*/
    background:#40689a; padding:20px 0 5px 0; width:250px;
    }

	.menu ul.ult { right:0;}
     
    /* display second level menu on hover */
    .menu li:hover > ul{ display: block;}
     
    .menu ul li {display:block;
    float: none;
    background:none;
    margin:0;
    padding:0;
    }
     
    .menu ul li a { padding:0 20px 11px 20px; line-height:normal;
    display:block;
    color:#fff;
    /*background:#c5d23b;*/}
     
    .menu ul li a:hover, .menu ul li:hover > a{
    color:#abc2e5; border:none; padding-bottom:11px; 
    }
	
	
	    /* change level 3 menu positions */
    .menu ul ul {left: 150px;
    top: 0px;
    }
	.menu ul ul li a{ text-transform:none;}
	
	    .mobile-menu{display:none; line-height:40px;
    width:100%;
    padding: 0;
    color:#fff;
    text-transform:uppercase;
	text-align: right
    }
    .mobile-menu:hover{/*background:#646464;*/
    color:#abc2e5;
    text-decoration:none;
    }
	.mobile-menu img { height:30px; padding-left:5px; /*vertical-align: text-top;*/}
	

@media screen and (max-width: 970px){
.menu li { padding-right:4.5%;}
.menu li {  padding-left: 20px; }

@media screen and (max-width: 900px){
.menu li { padding-right:3%;}
}

@media screen and (max-width: 840px){
.menu li { padding-right:1.5%;}


    /* #nav { width:35%; float:right; text-align:right;}*/
    .menu{display:none; position: relative; width:20%; margin:0; top:-10px; left:0;  margin-left: auto;}
     
    .mobile-menu{display:block; 
    }
     
    #nav .menu li{display:block; padding-right:0;
    margin:0; z-index:99999;}
     
   .menu li a {background:#c2d501; padding:6px; line-height:normal; display:block; font-size:14px; 
    }
   
	 
    /*level 2 and 3 - make same width as all items*/
    .menu ul {display:block;
    position:relative;
    top:0;
    left:0; 
    width:100%; padding:8px 0 0px 0;}
     
    .menu ul ul {left:0; padding-left:10px;}
     
	 .menu ul li a { padding:0 20px 8px 26px; background:none;}
	
    }
	




@media (max-width: 480px) {
 .menu { width:30%; }
}

@media (max-width: 400px) {
 .menu { width:40%; }
}

@media (max-width: 384px) {
 .menu {
    width: 50%;
}
}