.mainWrap{margin:0;
float:left;
display:inline-block;
}

nav{margin:0;
background:none;
float:left;
}

.menu {display:block;}
 
ul.menu {margin-left:-2%;}

.menu li{display: inline-block;
position: relative;
z-index:100;}
 
.menu li a {
font-style: normal;
text-decoration:none;
color:#007fad;
padding:5px;
padding-left:0px;
padding-right:15px;
display:block;
}
 
.menu li a:hover, .menu li:hover > a{color:#69b900;}


/* hide the second level menu */
.menu ul {display: none;
margin: 0;
padding: 0;
position: absolute;
color:#007fad;
top: 25px;
left: 0px;
min-width:200px;
text-align:left;
}

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

.menu ul li a {
display:block;
color:#007fad;
padding:0;
margin:0;

}
 
.menu ul li a:hover, .menu ul li:hover > a{
color:#69b900;
}

/* display second level menu on hover */
.menu li:hover > ul{ display: block;}
 


/* change level 3 menu positions */
.menu ul ul {left: 149px;
	top: 0px;
}


/* Here’s the CSS mobile menu button properties: */

.mobile-menu{
display:none;
width:100%;
background:#c7e3ee;
color:#007fad;
text-transform:uppercase;
font-style: normal;
text-decoration:none;
}
.mobile-menu:hover{color:#cdcdcd;background-color:#4c79a5;
text-decoration:none;
}


@media screen and (max-width:1060px) {
 
.sup {visibility:visible;}

.mainWrap{
margin:0;
width:100%;
display:block;
}


.menu{display:none;}
 
.mobile-menu{
display:block;
margin-top:12px;
width:100%;
text-align:left;
height:30px;
vertical-align:middle;
}

nav{
margin:0;
background:#c7e3ee;
width:100%;
text-align:left;
}

.menu {
margin-left:-50px;
margin-bottom:0px;
margin-top:0px;
}

.menu li{
display:block;
margin:0;
width:100%;
}
 
 
.menu li a {
font-style: normal;
text-decoration:none;
color:#007fad;
padding-left:5%;
width:95%;
}
 
.menu li a:hover, .menu li:hover > a{
color:#69b900;
}

/*level 2 and 3 - make same width as all items*/
.menu ul {display:block;
position:relative;
padding:0px;
top:0;
left:40px;
width:100%;
font-style: italic;
color:#007fad;
}
 


}