#main-menu {
position: relative;
border-bottom: solid 1px #ddd;
background: rgba(29,26,20,1);
color:#dbd3be;
}
.sticky {
position: fixed !important;
top: 0 !important;
left: 0;
width: 100%;
z-index: 6;
}
#main-menu .menu-box{
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem 0;
}
#main-menu ul {
display: flex;
justify-content: center;
margin: 0;
padding: 0;
}
#main-menu ul li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
#main-menu ul li a {
color: inherit;
line-height: 2.2rem;
margin: 0 1.5vw;
position: relative;
display: flex;
align-items: center;
height: 100%;
font-weight: 600;
text-transform: uppercase;
font-size: 0.8rem;
}
#main-menu ul li ul li a {
text-transform: none;
font-weight: normal;
font-size: smaller;
}
#main-menu ul li a:hover,
.current-menu-item a {
opacity: 0.7
}
#main-menu ul li.important:hover  {
background:#9E803C !important;
}
#main-menu ul li.important:hover a{
color:white !important
} 
.important.current-menu-item a {
color: #FFF !important;
}
#main-menu ul li ul li a {
white-space: nowrap;
}
.opener svg {
width: 0.5rem;
height: auto;
position: absolute;
right: 0;
top:45%
}
@media only screen and (min-width: 1281px) {
#main-menu ul li.important {
background:#9E803C !important;
color:white;
font-weight: normal !important
}
#main-menu ul li ul {
z-index: 10;
display: block;
overflow: hidden;
position: absolute;
left: -0.5vw;
background: linear-gradient(#444, #111);
top: 1.8em;
opacity: 0;
visibility: hidden;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border-radius: 5px
}
#main-menu ul > li:hover ul {
opacity: 1;
visibility: visible;
display: block;
top: 3rem;
}
#main-menu div > ul > li > a:before {
content: '';
position: absolute;
width: 0;
height: 2px;
background: var(--main-color);
display: block;
bottom: 0;
left: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#main-menu div > ul > li > a:hover:before {
width: 100%;
height: 2px;
}
#main-menu div ul li ul li:hover {
background: linear-gradient(#3CB2E9, #2C9BCE)
}
#main-menu ul li ul li {
width: 100%;
border-bottom: 1px solid black !important;
padding: 0.2vw 0.2vw
}
#main-menu ul li ul a{
font-weight: bold !important;
color:white !important
}
#main-menu ul li ul a:hover{
opacity: 1 !important
}
}
@media only screen and (max-width: 1280px) {
#main-menu .menu-box{
justify-content: flex-end;
}
#main-menu ul li.important a {
background: #18325B !important;
}
#main-menu nav{
position: absolute;
background: rgba(29,26,20,1);
color: #dbd3be;
top: 3rem;
right: 0;
width: 100%;
}
#top-head {
display: flex;
justify-content: space-between;
align-items: center;
}
#logo {
text-align: left;
}
#logo a {
margin: 0.5rem 0;
}
#hamburger {
height: 2rem;
width: 2.5rem;
padding: 0.5rem;
border-radius: 50%;
display: flex;
flex-flow: column;
justify-content: space-between;
margin: 0;
cursor: pointer;
position: relative;
}
#hamburger span {
position: relative;
display: block;
height: 2px;
background: #fff;
opacity: 1;
border-radius: 3px;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#hamburger span:nth-child(1) {
top: 0;
}
#hamburger span:nth-child(3) {
bottom: 0;
}
#hamburger.open span:nth-child(1) {
top: 50%;
margin-top: -1px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#hamburger.open span:nth-child(3) {
bottom: 50%;
margin-bottom: -1px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#hamburger.open span:nth-child(2) {
opacity: 0;
}
#main-menu ul {
overflow: hidden;
display: block;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
#main-menu ul.open,
#main-menu ul.sub-menu.open {
opacity: 1;
max-height: 1000px;
}
#main-menu ul.sub-menu,
#main-menu ul {
max-height: 0;
opacity: 0;
}
#main-menu ul li {
padding: 0 1rem;
text-align: left;
display: block;
}
#main-menu ul li:last-of-type a {
border: none;
}
#main-menu ul li a {
padding: 0.5rem;
margin: 0;
display: block;
color: white;
border-bottom: solid 1px #dddddd52;
}
#main-menu ul li ul li a {
padding: 0 15px;
border: none;
}
.opener {
right: 0px;
position: absolute;
top: 0px;
width: 2rem;
height: 2rem;
cursor: pointer;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.opener svg {
width: 50%;
height: auto;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.open.opener svg, .open .opener svg  {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
}