.hamburger-button {
    display: flex;
    width: 21px;
    height: 21px;
    position: absolute;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    z-index: 9;
    top: 50%;
    left: 45px;
    transform: translateY(-50%);
    margin-top: 0 !important;
}

span.line-dote,span.line-dote::before,span.line-dote::after {
    width: 5px;
    height: 5px;
    background: var(--wp--preset--color--black);
    border-radius: 100%;
    display: block;
    transition: .25s all
}

span.line-dote::before {
    content: "";
    position: absolute;
    left: 0
}

span.line-dote::after {
    content: "";
    position: absolute;
    right: 0
}

body.menu-open   div.hamburger-button.active .line-dote {
    background:var(--wp--preset--color--custom-color-8) !important;
}

/* .hamburger-button .line-dote,  .hamburger-button span.line-dote::before,  .hamburger-button span.line-dote::after,.home.menu-fixed   .hamburger-button span.line-dote::after,.home.menu-fixed   .hamburger-button .line-dote,.home.menu-fixed   .hamburger-button span.line-dote::before {
    background: #fff!important
} */

.hamburger-button.active .line-dote {
    background: var(--wp--preset--color--custom-color-8) !important;
}

.header-front-page .hamburger-button.active .line-dote:nth-child(2)::before, .header-front-page .hamburger-button.active .line-dote:nth-child(2)::after {
    background: var(--wp--preset--color--custom-color-8) !important;
}

body.menu-open   .hamburger-button.active .line-dote:nth-child(2)::before,body.menu-open   .hamburger-button.active .line-dote:nth-child(2)::after {
    background: var(--wp--preset--color--custom-color-8) !important;
}

.hamburger-button.active .line-dote,.hamburger-button.active .line-dote:nth-child(2)::before,.hamburger-button.active .line-dote:nth-child(2)::after {
    background: var(--wp--preset--color--custom-color-8) !important;
}

.active span.line-dote:first-child:before {
    width: 10px;
    transform: rotate(45deg);
    top: 2.5px;
    left: 0;
    height: 4px;
    border-radius: 0
}

.active span.line-dote:first-child:after {
    width: 10px;
    transform: rotate(-45deg);
    top: 2.5px;
    right: 0;
    height: 4px;
    border-radius: 0
}

.active span.line-dote:last-child:before {
    width: 10px;
    transform: rotate(-45deg);
    bottom: 2.5px;
    left: 0;
    height: 4px;
    border-radius: 0
}

.active span.line-dote:last-child:after {
    width: 10px;
    transform: rotate(45deg);
    bottom: 2.5px;
    right: 0;
    height: 4px;
    border-radius: 0
}