.menu-button-rometheme{
transition: all 0.5;
background-color: #00cea6;
padding: 10px;
display: flex;
align-items: center;
border: none;
}
.rkit-offcanvas-icon {
color: black;
fill: black;
}
li.submenu-item {
padding-left: 0.5rem;
padding-right: 0.5rem
}
div.header {
display: flex;
justify-content: space-around;
align-items: center;
}
div.mobile-header {
display: none;
}
nav.off-canvas {
display: none;
}
div.menu-offcanvas {
display: none;
}
.rkit-offcanvas-close {
position: relative;
float: right;
z-index: 9999;
display: flex;
align-items: center;
border: none;
background: transparent;
color: black;
fill: black;
}
.rkit-offcanvas-close:hover {
background: transparent;
color: black;
fill: black;
}
a.menu-button {
text-decoration: none;
border-bottom: none;
}
.dropdown-content {
opacity: 0;
margin-top: 20px;
animation: fade_in 1s;
}
.offcanvas-navmenu-rometheme {
width: 100%;
position: fixed;
display: flex;
top: 0;
height: 100%;
z-index: 999;
visibility: hidden;
}
.overlay-rometheme {
background-color: rgba(0, 0, 0, 0.328);
position: absolute;
top: 0;
width: 100%;
height: 100vh;
z-index: 998;
transition: all 0.7s ease-in-out; }
.menu-offcanvas-rometheme {
z-index: 9999;
background-color: white;
width: 75%;
height: 100vh;
transition: all 0.7s ease-in-out; }
.rkit-btn-container{
display: flex;
}
.rkit-offcanvas-header {
width: 100%;
}
.rkit-offcanvas.offcanvas-show .offcanvas-navmenu-rometheme {
visibility: visible;
}
.rkit-offcanvas.left .offcanvas-navmenu-rometheme {
left: 0;
}
.rkit-offcanvas.right .offcanvas-navmenu-rometheme {
right: 0;
justify-content: end;
}
.rkit-offcanvas.left .menu-offcanvas-rometheme , .rkit-offcanvas.left .overlay-rometheme {
transform: translateX(-100%);
}
.rkit-offcanvas.right .menu-offcanvas-rometheme , .rkit-offcanvas.right .overlay-rometheme {
transform: translateX(100%);
}
.rkit-offcanvas.offcanvas-show.right .menu-offcanvas-rometheme,
.rkit-offcanvas.offcanvas-show.left .menu-offcanvas-rometheme,
.rkit-offcanvas.offcanvas-show.right .overlay-rometheme,
.rkit-offcanvas.offcanvas-show.left .overlay-rometheme {
transform: translateX(0); }