.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 i
{
font-size:90%;
color:#fff;
}

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

.menu li a 
{
text-decoration:none;
padding:41px 10px;
display:block;
color:#dedede;
font-size:90%;
font-weight:600;
}

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

.menu ul 
{
display: none;
margin: 0;
padding: 10px;
width: 300px;
position: absolute;
top: 90px;
left: 0px;
background: #313131;
}

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

.menu ul li a 
{
font-size:95%;
display:block;
color:#fff;
border-left:0px solid #555;
padding:8px 15px;
background:#313131;
text-align:left;
font-weight:400;
transition-duration:0.5s;
}

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

.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:#44aa00;
text-transform:uppercase;
font-weight:600;
}

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

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

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

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

.mobile-menu
{
display:block;
font-size:120%;
color:#fff;
padding:0;
background-color:#313131;
}

.mobile-menu:hover
{
background:#313131;
color:#009fe3;
text-decoration:none;
}

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

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

.menu li a 
{
background:#fff;
padding:2%;
color:#555;
text-align:left;
border-bottom:1px solid #ccc;
}

.menu li a:hover
{
background:#009fe3;
color:#fff;
}

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

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

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

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

}


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

.mainWrap
{
width:96%;
padding:0px;
margin-left:2%;
}

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

.mobile-menu
{
display:block;
font-size:100%;
color:#fff;
padding:1% 0;
background-color:#313131;
}

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

nav
{
margin-top:0;
background:none;
}

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

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

.menu li a:hover, .menu li:hover > a
{
background:#009fe3;
color:#fff;
}

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

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

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

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

}

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

.mainWrap
{
width:96%;
margin-left:2%;
}

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

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

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

nav
{
background:none;
}

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

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

.menu li a:hover, .menu li:hover > a
{
background:#009fe3;
color:#fff;
}

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

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

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

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

}