.c3-navigation-button {
    display: block;
    position: relative;
    padding: 10px;
    border: 0;
    background-color: transparent;
    outline: 0;
    cursor: pointer;
}

.c3-navigation-button:hover,
.c3-navigation-button:focus {
    background-color: transparent;
    outline: 0;
}

.c3-navigation-button__icon {
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transition: transform 250ms ease;
    -webkit-transition: transform 250ms ease;
}

@media (max-width: 767px) {
    .c3-navigation-button__icon {
        width: 20px;
        height: 20px;
    }
}

.c3-navigation-button--clicked .c3-navigation-button__icon {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.c3-navigation-button__icon-line {
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    background-color: #fff;
    transition: transform 250ms ease, background-color 250ms ease;
    -webkit-transition: transform 250ms ease, background-color 250ms ease;
}

.c3-navigation-button--clicked .c3-navigation-button__icon-line,
.elementor-editor-active .c3-navigation-button__icon-line,
.c3-elementor-location-header--sticky:not(.elementor-editor-active) .c3-navigation-button__icon-line {
    background-color: var(--e-global-color-accent);
}

.c3-navigation--open .c3-navigation-button--clicked .c3-navigation-button__icon-line,
.c3-navigation--open .c3-navigation-button--clicked:hover .c3-navigation-button__icon-line {
    background-color: #fff;
}

@media (min-width: 1025px) {
    .c3-navigation-button:hover .c3-navigation-button__icon-line {
        background-color: var(--e-global-color-accent);
    }
}

.c3-navigation-button__icon-line:nth-child(1) {
    top: 30%;
}

.c3-navigation-button__icon-line:nth-child(2) {
    top: 50%;
}

.c3-navigation-button__icon-line:nth-child(3) {
    top: 70%;
}

.c3-navigation-button--clicked .c3-navigation-button__icon-line:nth-child(1),
.c3-navigation-button--clicked .c3-navigation-button__icon-line:nth-child(3) {
    top: 50%;
}

.c3-navigation-button--clicked .c3-navigation-button__icon-line:nth-child(2) {
    transform: translateY(-50%) rotate(90deg);
    -webkit-transform: translateY(-50%) rotate(90deg);
}