:root {
        --mb-button-size:60px;
        --mb-bar-width:0.6;
        --mb-bar-height:4px;
        --mb-bar-spacing:10px;
        --mb-animate-timeout:0.4s
    }

 

    .mburger {
        background:0 0;
        border:none;
        border-radius:0;
        color:inherit;
        display: block;
        position:relative;
        box-sizing:border-box;
        height:var(--mb-button-size);
        padding:0 0 0 var(--mb-button-size);
        margin:0;
        line-height:var(--mb-button-size);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline:0;
        cursor:pointer
    }
    .mburger strong {
        display:block;
        position:absolute;
        left:calc(var(--mb-button-size) * ((1 - var(--mb-bar-width))/ 2));
        width:calc(var(--mb-button-size) * var(--mb-bar-width));
        height:var(--mb-bar-height);border-radius:calc(var(--mb-bar-height)/ 2);
        background:currentColor;
        color:inherit;
        opacity:1
    }
    .mburger strong:nth-of-type(1) {
        bottom:calc(50% + var(--mb-bar-spacing));
        transition:bottom .2s ease,transform .2s ease,width .2s ease
    }
    .mburger strong:nth-of-type(2) {
        top:calc(50% - (var(--mb-bar-height)/ 2));
        transition:opacity .2s ease
    }
    .mburger strong:nth-of-type(3) {
        top:calc(50% + var(--mb-bar-spacing));
        transition:top .2s ease,transform .2s ease,width .2s ease
    }

    .mm-wrapper_opening .mburger strong:nth-of-type(1) {
        bottom:calc(50% - (var(--mb-bar-height)/ 2));
        transform:rotate(45deg)
    }
    .mm-wrapper_opening .mburger strong:nth-of-type(2) {
        opacity:0
    }
    .mm-wrapper_opening .mburger strong:nth-of-type(3) {
        top:calc(50% - (var(--mb-bar-height)/ 2));
        transform:rotate(-45deg)
    }

    .mburger--spin strong:nth-of-type(1) {
        transition-delay:.2s,0s
    }
    .mburger--spin strong:nth-of-type(2) {
        transition-duration:0s;transition-delay:.2s
    }
    .mburger--spin strong:nth-of-type(3) {
        transition-delay:.2s,0s
    }

    .mm-wrapper_opening .mburger--spin strong:nth-of-type(1) {
        transform:rotate(135deg);
        transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .2s)
    }
    .mm-wrapper_opening .mburger--spin strong:nth-of-type(2) {
        transition-delay:calc(var(--mb-animate-timeout) + 0s)
    }
    .mm-wrapper_opening .mburger--spin strong:nth-of-type(3) {
        transform:rotate(225deg);
        transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .2s)
    }
    
    .mm-wrapper_opening .mburger {
        background-color: rgba(255, 255, 255, 1);

    }
    .mm-wrapper_opening .mburger--spin strong {
        background-color: var(--ci002);
    }