.nav {
position: absolute;
z-index: 99;
width: 100%;
margin-top: 2em;
}
.logo-mobile {
width: 40%;
margin: 4% auto 0
}
.logo-mobile img {
width: 100%
}
.nav .main-nav .hamburger-nav::after {
font-family: fontawesome;
content: "\f0c9";
color: #81b84d;
font-size: 3rem;
position: absolute;
top: 15%;
right: 20px;
cursor: pointer
}
.nav .main-nav .menu {
display: none;
list-style: none;
position: absolute;
top: 100%;
padding-left: 0;
width: 100%;
overflow: hidden;
margin-top: 1.1em;
}
.nav .main-nav .menu a {
display: block;
background: #083d5f;
text-decoration: none;
text-align: center;
padding: 8px;
color: #fff;
border-bottom: .5px solid rgba(36, 86, 114, .8)
}
.nav .main-nav .menu a:hover {
background: #81b84d;
transition: background .3s ease;
color: #fff;
}
.nav .main-nav .menu a:hover li {
color: #333
}
.nav .main-nav .menu a li {
color: #001544;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: .8rem;
letter-spacing: 1px
}
@media (min-width:768px) and (max-width:899px) {
.logo-mobile {
width: 25%;
margin: 3% auto 0
}
}
@media (min-width:600px) and (max-width:767px) {
.logo-mobile {
width: 20%;
margin: 2% auto 0
}
}
@media (min-width:480px) and (max-width:599px) {
.logo-mobile {
width: 28%;
margin: 3% auto 0
}
}