:root { --main-color: #d83b6f;
--text-color: #052745;
}
#main-menu {
position: relative;
}
#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;
display: inline-block;
text-transform: uppercase;
position: relative;
}
#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 {
color: var(--main-color);
}
#main-menu ul li ul li a {
white-space: nowrap;
}
.opener {
right: 0px;
position: absolute;
top: 0px;
width: 1rem;
height: 2rem;
cursor: pointer;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.opener svg {
width: 0.5rem;
height: auto;
}
@media only screen and (min-width: 961px) {
#main-menu ul li ul {
z-index: 10;
display: block;
overflow: hidden;
position: absolute;
left: -0.5vw;
background: #fff;
top: 1.8em;
padding: 0.5vw 0.5vw;
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;
}
#main-menu ul > li:hover ul {
opacity: 1;
visibility: visible;
display: block;
top: 2.2rem;
}
#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 ul li ul li {
width: 100%;
}
}
@media only screen and (max-width: 1135px) {
header .content-box {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100% !important;
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box;
}
#top-head {
display: flex;
justify-content: space-between;
align-items: center;
width: 100% !important;
}
#logo {
text-align: left !important;
margin: 0;
}
#logo a {
margin: 0.5rem 0;
}
#hamburger {
height: 2rem;
width: 2rem;
padding: 0.5rem;
background: var(--main-color);
border-radius: 50%;
display: flex;
flex-flow: column;
justify-content: space-between;
margin: 0 0 0 auto !important; 
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 {
position: relative !important;
width: auto !important;
}
#main-menu ul {
display: none !important;
flex-direction: column !important;
position: absolute !important;
top: 100% !important;
left: auto !important;
width: 280px !important; 
right: 0 !important;
background: #fff !important;
box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
padding: 1rem 1.5rem !important;
z-index: 9999 !important;
margin: 0 !important;
}
#hamburger.open ~ #main-menu ul,
#main-menu ul.open,
#main-menu ul.sub-menu.open {
display: flex !important;
}
#main-menu ul li {
display: block !important;
width: 100% !important;
text-align: left !important;
}
#main-menu ul li:last-of-type a {
border: none;
}
#main-menu ul li a {
display: block !important;
padding: 0.5rem 0 !important;
margin: 0 !important;
}
#main-menu ul li ul li a {
padding: 0 15px;
border: none;
}
#menu-item-518 {
text-align: center !important;
}
#menu-item-518 a {
display: inline-block !important;
margin: 0.5rem auto !important;
text-align: center !important;
}
.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 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
}