.slicknav_menu {
	display:none;
}

#menu > ul {
	width: 650px; /* taken out and replaced with > ul > li widths of 100px*/
	/*margin: 0 auto;*/
	margin: 12px 0 0 0;
	padding: 0; 
	list-style: none; 
	display: table;
	}
	
#menu > ul > li > ul{
	list-style: none;
	}
	
  #menu > ul > li {
	  display: table-cell; 
	  margin: 0; 
	  padding: 0; 	 
	  /*background: #000;*/ 
	  /*color: #fff;*/
	  color: #000; 
	  position: relative;
	  /*width:100px;*/
	   width:auto; /* mine added to make the menu not go over two lines*/
	  
	  }
    #menu ul > li a {
		color: #000;		
		text-decoration: none; 
		height: 40px; 
		line-height: 40px; 
		display: block; 
		text-align: center; 
		width: 100%;
		font-size:13px;
		/*font-family: 'Oswald', serif;*/		
		/*font-family: "proxima-nova-alt-condensed";*/
		font-family: "proxima-nova-sc-osf",sans-serif;
		text-transform:uppercase;
		padding:0 5px;		
		}
		
      #menu ul > li a:hover {
	
	-webkit-transition: all 0.8s ease-out;  /* Chrome 1-25, Safari 3.2+ */
	-moz-transition: all 0.8s ease-out;  /* Firefox 4-15 */
	-o-transition: all 0.8s ease-out;  /* Opera 10.50–12.00 */
	transition: all 0.8s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
	background-color: #88c440;
	color:#FFF;
	
		  }
		  
	
#menu ul > li ul {
  background: #31869f none repeat scroll 0 0;
  display: none;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 40px;
  width: 100%;
  z-index: 999999 !important;
  min-width: 240px;
  color: #33c4f3
}

#menu ul > li:hover ul {
	display: block;
	}

@media screen and (max-width: 40em) {
	.js #menu {
		display:none;
	}
	
	.js .slicknav_menu {
		display:block;
	}
}