.menu-button {
width: 32px;
cursor: pointer;
z-index: 33;
display: block;
height: calc(12px + 8px);
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.menu-button__wrapper {
display:none;
z-index: 33;
width: 3rem;
height: 3rem;
}
.menu-button__bar {
background-color: white;
height: 4px;
width: 32px;
display: block;
position: absolute;
transition: all 0.4s ease;
}
.menu-button__bar:nth-of-type(2) {
top: 8px;
}
.menu-button__bar:nth-of-type(3) {
top: 16px;
}
.menu-button.active .menu-button__bar {
transform: translateY(8px) rotate(45deg);
}
.menu-button.active .menu-button__bar:nth-of-type(2) {
transform: translateX(2rem);
opacity: 0;
visibility: hidden;
}
.menu-button.active .menu-button__bar:nth-of-type(3) {
transform: translateY(-8px) rotate(-45deg);
}
.menu-overlay {
background-color: var(--orange);
right: 0;
height:0px;
transition: all 0.8s ease;
z-index: 22;
visibility:hidden;
width:80%;
display:none;
position:relative;
top:-500px;
height:0;
}
.menu-overlay.open {
visibility:visible;
transition: all 0.8s ease;
top:0;
height:400px;
}
.dropdownmenu__mobile ul {
list-style: none;
display: flex;
flex-direction: column;
}
.dropdownmenu__mobile li {
text-align:left;
color:white;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
padding:15px 0;
border-bottom:1px solid white;
}
.dropdownmenu__mobile a{
color: #FFFFFF;
font-family:'PoppinsExtraBold';
font-size:16px;
display: inline;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
padding: 5px 0;
}
.dropdownmenu__mobile li:hover a {
color:var(--noir);
border-bottom: none;
}
.dropdownmenu__mobile li:hover{
cursor:pointer;
color: var(--noir);
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;}
.sub-menu__mobile{
padding-left:30px;
& a li{
font-family:'PoppinsSemiBold';
font-size:14px;
display: inline;
text-decoration: none;
color:white;
border:none;
}
} @media screen and (max-width:1366px){
.menu-overlay{
display:inline;
}
.menu-button__wrapper{
display:block;
}
.dropdownmenu{
display:none;
}
header{
height:auto;
flex-direction: column;
align-items: center;
}
.header{
height:100px;
}
.logo-color{
display:none;
}
.logo-white{
display:inline;
}
.active-sub li{
background-color: none !important;
}
}
@media screen and (max-width:480px){
.dropdownmenu__mobile a{
font-size:14px;
}
.sub-menu__mobile a li{
font-size:12px;
}
.menu-overlay.open{
height:450px;
}
}