* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
} .container2 {
width: 100%;
margin: 0 auto;
transition: all ease-in-out .5s;
} nav#main-navigation { } .sub-menu-wrapper {
display: none;
margin-top: -10px;
box-shadow: 0px 0px 20px rgb(0 26 51 / 9%);
} @media (min-width: 1080px) {
#main-menu {
list-style: none;
display: flex;
padding: 10px 20px;
}
#main-menu > li {
margin-right: 40px;
}
#main-menu > li a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: block;
font-size: 15px;
letter-spacing: 1px;
font-family: 'Poppins-Light';
}
.sub-menu-wrapper {
position: absolute;
top: 100%;
left: 0;
background: #fff;
white-space: nowrap;
z-index: 9999;
} .has-submenu:hover .sub-menu-wrapper,
.has-submenu .sub-menu-wrapper:hover {
display: block;
border-radius: 5px;
}
.sub-menu {
list-style: none;
list-style-type: none;
display: flex;
padding: 10px 20px;
list-style-type: none !important;
} .sub-menu li a {
list-style: none;
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: block;
color: #001a33 !important;
} #main-menu a:hover,
.sub-menu a:hover { }
} @media (max-width: 1079px) {
#main-menu {
list-style: none;
display: flex;
flex-direction: column;
padding: 10px;
}
#main-menu > li {
position: relative;
border-bottom: 1px solid #444;
}
#main-menu > li a {
color: #fff;
text-decoration: none;
padding: 10px;
display: block;
} .has-submenu > a::after {
content: "▼";
position: absolute;
right: 20px;
transition: transform 0.2s;
}
.has-submenu.open > a::after {
transform: rotate(-180deg);
}
.sub-menu-wrapper {
position: static;
width: 100%;
background: #fff;
}
.sub-menu {
list-style: none;
list-style-type: none !important;
display: flex;
flex-direction: column;
}
.sub-menu li {
border-bottom: 1px solid #555;
}
.sub-menu li a {
padding: 10px 20px;
} .has-submenu.open .sub-menu-wrapper {
display: block;
background-color: unset;
}
} .content {
padding: 20px;
}
.container2 {
height: 110px;
}
#main-navigation {
display: flex;
justify-content: space-between; align-items: center; padding: 0 20px; text-transform: uppercase;
} #main-navigation #main-menu {
display: flex;
margin: 0;
padding: 0;
list-style: none;
} #main-navigation #main-menu>li {
margin-left: 30px;
} #main-navigation .logo-container img {
max-height: 80px; width: auto;
}
#main-navigation .logo-container a {
display: block;
}
.menu-toggle {
display: none;
}
#main-navigation {
top: 0px; z-index: 100; transition: all 0.3s ease;
margin: auto;
}
#main-navigation #logoPellet {
filter: brightness(0) invert(1);
} @media (max-width: 1079px) { #main-navigation {
flex-direction: column;
align-items: flex-start; padding: 10px 20px; } #main-navigation .logo-container img {
max-height: 40px;
width: auto;
} #main-navigation #main-menu {
flex-direction: column;
width: 100%;
margin-top: 10px; } #main-navigation #main-menu>li {
width: 100%;
margin: 0;
}   body.menuOpen {
overflow: hidden;
height: 100vh; 
}
html.menuOpen{
overflow: hidden;
}
#main-navigation {
position: relative;
justify-content: flex-start;
padding: 20px 40px;
}
.container2 {
height: 90px;
} .menu-toggle {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 24px;
height: 20px;
background: none;
border: none;
cursor: pointer;
margin-left: auto; padding: 0;
position: absolute;
right: 30px;
top: 30px;
}
.menu-toggle span {
display: block;
height: 2px;
background: #fff;
border-radius: 1px;
transition: transform 0.3s ease, opacity 0.3s ease;
} #main-navigation #main-menu {
display: none;
flex-direction: column;
width: 100%;
margin-top: 10px;
} #main-navigation.active #main-menu {
display: flex;
}
#main-navigation.active {
height: 100vh;
background-color: #001a33;
} #menu-toggle.active span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
#menu-toggle.active span:nth-child(2) {
opacity: 0;
}
#menu-toggle.active span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
}
@media (min-width: 1080px) {
.has-submenu>a:hover::after {
content: ' ';
position: absolute;
width: 0;
height: 0;
bottom: 0px;
border-style: solid;
border-width: 0 15px 15px 15px;
box-shadow: 0px 0px 20px rgb(0 26 51 / 9%);
border-color: transparent transparent #fff transparent;
}
#left-area ul,
.entry-content ul,
.et-l--body ul,
.et-l--footer ul,
.et-l--header ul {
padding: 10px 0 10px 0;
}
.container2 {
position: absolute;
height: 100px;
top: 0px;
}
.sub-menu>li:not(:last-child) {
border-right: 1px solid #ccc;
}
#main-menu>li:last-child a {
height: 50px !important;
background-color: #F2B705;
color: #001a33;
border-radius: 5px;
}
#main-navigation.sticky #main-menu>li:last-child a{
border-radius: 0px;
height: 100% !important;
}
#container2.sticky {
background-color: #fff;
position: fixed;
box-shadow: 0px 0px 20px rgb(0 26 51 / 9%);
transition: all ease-in-out .5s;
}
#main-navigation {
width: 100%;
max-width: 1640px;
left: 50%;
position: absolute;
transform: translate(-50%, 0);
} #main-navigation.sticky #logoPellet {
filter: unset;
}
#main-navigation.sticky #main-menu>li a {
color: #001a33;
}
#main-navigation #main-menu>li {
display: flex; align-items: center; margin-left: 30px;
height: 100px;
margin-right: 0.5em;
margin-left: 0.5em;
}
#main-navigation #main-menu>li>a {
display: block;
width: 100%;
height: 107px;
display: flex; align-items: center; justify-content: center; height: 100px;
width: 100%;
text-align: center;
transition: letter-spacing ease-in-out .2s;  }
#main-navigation #main-menu>li>a:hover {
letter-spacing: 2px;
transition: letter-spacing ease-in-out .2s;
}
#main-navigation.sticky {
top: 0;
left: 50%;
right: 0;
z-index: 1000; transition: all 0.3s ease;
margin: auto;
} body.sticky-offset {
padding-top: 80px; }
}