.mainWrap
{
width:100%;
z-index:9999;
}

nav
{
display:block;
margin-top: 0px;
}

.menu
{
display:block;
}

.menu li
{
display: inline-block;
position: relative;
z-index:100;
}

.menu li:first-child
{
margin-left:0;
}

.menu li a 
{
text-decoration:none;
padding:40px 0px 40px 20px;
display:block;
color:#333;
font-size:95%;
font-weight:600;
}

.menu li a:hover, .menu li:hover > a
{
color:#8dc63f;
text-decoration:none;
}

.menu a.active
{
color:#fff;
background:#8dc63f;
}

.menu a:active
{
color:#fff;
background:#8dc63f;
}

.menu ul 
{
display: none;
margin: 0;
padding: 20px;
width: 300px;
position: absolute;
top: 80px;
left: 0px;
background: #fff;
}

.menu ul li 
{
display:block;
float: none;
background:none;
margin:0;
padding:0;
}

.menu ul li a 
{
font-size:95%;
display:block;
color:#333;
border-left:0px solid #555;
padding:8px 15px;
background:#fff;
text-align:left;
}

.menu ul li a:hover, .menu ul li:hover > a
{
background:#8dc63f;
color:#fff;
}

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

.menu ul ul 
{
left: 0;
top: 0px;
}

.mobile-menu
{
display:none;
width:100%;
padding:5px 0;
background:#fff;
color:#8dc63f;
text-transform:uppercase;
font-weight:600;
}

.mobile-menu:hover
{
background:#fff;
color:#8dc63f;
text-decoration:none;
}

@media (min-width:769px) and (max-width:960px)
{

.mainWrap
{
width:100%;
padding:0px;
margin-left:0;
background-color:#8dc63f;
}

.menu
{
display:none;
background-color:#8dc63f;
}

.mobile-menu
{
display:block;
font-size:150%;
color:#8dc63f;
padding:0;
}

nav
{
margin-top:10px;
background:none;
}

.menu li
{
display:block;
margin:0;
}

.menu li a 
{
background:#8dc63f;
padding:4%;
color:#fff;
text-align:left;
border-bottom:1px solid #fff;
}

.menu li a:hover, .menu li:hover > a
{
background:#8dc63f;
color:#fff;
}

.menu ul 
{
display:block;
position:relative;
top:0;
left:0;
background-color:#8dc63f;
width:90%;
}

.menu ul li 
{
display:block;
float: none;
background:none;
margin:0;
padding:0;
}

.menu ul li a 
{
font-size:95%;
display:block;
color:#fff;
padding:3% 0;
width:95%;
text-align:left;
background-color:#8dc63f;
border-bottom:1px dotted #fff;
}

}


@media screen and (min-width: 481px) and (max-width: 768px)
{

.mainWrap
{
width:96%;
padding:0 2%;
}

.menu
{
display:none;
background-color:#8dc63f;
}

.mobile-menu
{
display:block;
font-size:120%;
margin-right:2%;
background-color:#8dc63f;
color:#fff;
}

.mobile-menu:hover
{
display:block;
margin-right:2%;
background-color:#8dc63f;
color:#fff;
}

nav
{
background:none;
}

.menu li
{
display:block;
margin:0;
}

.menu li a 
{
background:#8dc63f;
padding:3% 4%;
color:#fff;
text-align:left;
border-bottom:1px solid #fff;
}

.menu li a:hover, .menu li:hover > a
{
background:#8dc63f;
color:#fff;
}

.menu ul 
{
display:block;
position:relative;
top:0;
left:0;
background-color:#8dc63f;
width:95%;
}

.menu ul li 
{
display:block;
float: none;
background:none;
margin:0;
padding:0;
}

.menu ul li a 
{
font-size:90%;
display:block;
color:#fff;
padding:3% 2%;
width:95%;
text-align:left;
background-color:#8dc63f;
border-bottom:1px dotted #fff;
}

}

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

.mainWrap
{
width:96%;
padding:0 2%;
}

.menu
{
display:none;
background-color:#8dc63f;
}

.mobile-menu
{
display:block;
font-size:120%;
margin-right:2%;
background-color:#8dc63f;
color:#fff;
}

.mobile-menu:hover
{
display:block;
margin-right:2%;
background-color:#8dc63f;
color:#fff;
}

nav
{
background:none;
}

.menu li
{
display:block;
margin:0;
}

.menu li a 
{
background:#8dc63f;
padding:3% 4%;
color:#fff;
text-align:left;
border-bottom:1px solid #fff;
}

.menu li a:hover, .menu li:hover > a
{
background:#8dc63f;
color:#fff;
}

.menu ul 
{
display:block;
position:relative;
top:0;
left:0;
background-color:#8dc63f;
width:95%;
}

.menu ul li 
{
display:block;
float: none;
background:none;
margin:0;
padding:0;
}

.menu ul li a 
{
font-size:90%;
display:block;
color:#fff;
padding:3% 2%;
width:95%;
text-align:left;
background-color:#8dc63f;
border-bottom:1px dotted #fff;
}



}