.si-main-menu {
list-style: none;
font-family: var(--e-global-typography-primary-font-family);
padding: 0;
margin: 0;
position: relative;
display: flex;
}
.si-main-menu>.menu-item {
display: block;
position: relative;
}
.si-main-menu>.menu-item>a {
color: var(--e-global-color-primary);
display: inline-block;
padding: 12px 15px 12px 15px;
cursor: pointer;
font-size: 15px;
font-weight: 400;
text-decoration: none;
}
.si-main-menu>.menu-item>a .fas {
padding-left: 9px;
font-size: 13px;
}
.si-main-menu>.menu-item:hover {
background-color: var(--e-global-color-secondary);
}
.si-main-menu>.menu-item:hover>a {
color: white;
}
.si-main-menu .sub-menu {
display: none;
z-index: 2;
}
.si-main-menu .mega-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
list-style-type: none;
padding: 0;
margin: 0;
} .si-main-menu .menu-item .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
list-style-type: none;
padding: 0;
margin: 0;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
min-width: 230px;
background-color: #F8F8F8;
border-style: solid;
border-width: 0px 0px 0px 0px;
border-color: rgb(200, 200, 200);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}
.si-main-menu .menu-item .sub-menu>.menu-item {
display: block;
}
.si-main-menu .menu-item .sub-menu>.menu-item>a {
font-size: 14px;
display: block;
text-decoration: none;
color: var(--e-global-color-primary);
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: rgb(200, 200, 200);
padding: 10px 20px;
margin: 0px 0px 0px 0px;
}
.si-main-menu .menu-item .sub-menu>.menu-item>a:hover {
background-color: #00000012;
} .si-main-menu .menu-item:not(.mega-menu-parent):hover .sub-menu {
display: block;
} .si-main-menu .menu-item .sub-menu .menu-item .sub-menu {
top: 0;
left: 100%;
}
.menu-toggle {
display: none;
font-size: 26px;
padding: 10px;
background: rgb(243, 243, 243);
border-radius: 3px;
} .si-main-menu .menu-item.mega-menu-parent {
position: static;
}
.si-main-menu .mega-menu {
display: none;
flex-wrap: wrap;
gap: 15px;
border-style: solid;
border-width: 2px 2px 2px 2px;
border-color: var(--e-global-color-secondary);
padding: 15px 15px 15px 15px;
background: white;
z-index: 2;
}
.si-main-menu .mega-menu-parent:hover .mega-menu {
display: flex;
}
.si-main-menu .mega-menu>div {
width: calc(25% - 15px);
display: flex;
gap: 15px;
}
.si-main-menu .mega-menu .si-p-mega-menu-title a {
color: #E30513;
font-weight: bold;
font-size: 14px;
}
.si-main-menu .mega-menu .si-p-mega-menu-text {
font-size: 13px;
}
.si-main-menu .mega-menu .si-p-mega-menu-text a {
color: #777;
text-decoration: none;
white-space: nowrap;
}
.si-main-menu .mega-menu .si-p-mega-menu-text a:hover {
text-decoration: underline;
}
.si-main-menu .mega-menu .si-p-mega-menu-img {
flex-shrink: 0;
}
.si-main-menu .sub-toggle {
display: none;
padding: 12px 35px 12px 35px;
float: right;
border-left: 1px solid rgb(200, 200, 200);
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
.si-main-menu .sub-toggle .fas {
transition: transform 0.3s ease-in-out;
}
.si-main-menu .menu-item:hover .sub-toggle {
border-left-color: #D3010F;
color: white;
}
@media (max-width: 1024px) and (min-width: 768px) {
.si-main-menu>.menu-item>a {
padding: 9px 12px 9px 12px;
font-size: 14px;
}
.si-main-menu .menu-item .sub-menu>.menu-item>a {
padding: 7px 17px;
font-size: 13px;
}
} @media (max-width: 767px) {
.si-main-menu .menu-item:not(.mega-menu-parent):not(.open):hover .sub-menu {
display: none;
}
.si-main-menu .sub-toggle {
display: inline-block;
}
.si-main-menu .menu-item.mega-menu-parent {
position: relative;
}
.menu-toggle {
display: inline-block;
}
.si-main-menu {
transition: transform 0.4s ease-in-out;
position: absolute;
right: -10px;
overflow-y: auto;
background-color: #F8F8F8;
z-index: 2;
margin-top: 10px;
display: none; }
.si-main-menu>.menu-item {
color: var(--e-global-color-primary);
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: rgb(200, 200, 200);
}
.si-main-menu>.menu-item>a>.fas {
display: none;
}
.si-main-menu .menu-item .sub-menu {
display: none;
position: static;
top: 100%;
left: 0;
list-style-type: none;
padding: 0;
overflow: hidden;
margin: 0;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
min-width: 230px;
background-color: #F8F8F8;
border-style: solid;
border-width: 0px 0px 0px 0px;
border-color: rgb(200, 200, 200);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}
.si-main-menu .menu-item.open .sub-menu {
display: block;
}
.si-main-menu .menu-item.open .sub-toggle .fas {
transform: rotate(180deg);
}
.si-main-menu .mega-menu-parent.mega-menu {
display: none;
}
.si-main-menu .mega-menu-parent:hover .mega-menu {
display: none;
}
.mega-menu-content {
display: none;
}
}