.hamburger-icon-container {
    color: transparent;
    height: 25px;
    width: 34px;
    position: relative;
    cursor: pointer;
    background: currentColor;
    border: 0 solid currentColor;
    border-radius: 3px;
}
.hamburger-icon-container .hamburger-icon,
.hamburger-icon-container .hamburger-icon:before,
.hamburger-icon-container .hamburger-icon:after {
    content: "";
    position: absolute;
    height: 3px;
    width: 34px;
    background: var(--text-color-soft);
    transition: all 0.2s ease;
}
.hamburger-icon-container .hamburger-icon {
    top: 11px;
    width: 34px;
}
.hamburger-icon-container .hamburger-icon:before {
    top: -11px;
}
.hamburger-icon-container .hamburger-icon:after {
    top: 11px;
    width: 34px;
}

.hamburger-active .hamburger-icon-container {
    color: transparent;
}
.hamburger-active .hamburger-icon {
    background: transparent;
    transform: rotate(-135deg);
    width: 34px;
}
.hamburger-active .hamburger-icon:before,
.hamburger-active .hamburger-icon:after {
    top: 0;
    width: 34px;
}
.hamburger-active .hamburger-icon:before {
    transform: rotate(90deg);
}

/*
@media (min-width: 1024px) {
    .hamburger-icon-container {
        color: transparent;
        height: 51px;
        width: 60px;
        position: relative;
        cursor: pointer;
        background: currentColor;
        border: 0px solid currentColor;
        border-radius: 0px;

        .hamburger-icon,
        .hamburger-icon:before,
        .hamburger-icon:after {
            content: '';
            position: absolute;
            height: 10px;
            width: 60px;
            background: var(--color-turquoise);
            transition: all .2s ease;
        }

        .hamburger-icon {
            top: 20.5px;
            width: 50px;
        }

        .hamburger-icon:before {
            top: -20.5px;
        }

        .hamburger-icon:after {
            top: 20.5px;
            width: 40px;
        }
    }

    .hamburger-active {
        .hamburger-icon-container {
            color: transparent;
        }

        .hamburger-icon {
            background: transparent;
            transform: rotate(-135deg);
            width: 60px;
        }

        .hamburger-icon:before,
        .hamburger-icon:after {
            top: 0;
            width: 60px;

        }

        .hamburger-icon:before {
            transform: rotate(90deg);

        }
    }
}
*/