.burger {
    height: 3em;
    width: 3em;
    position: relative;
    font-size: 12px;
    cursor: pointer;
    -webkit-transition: .2s all;
    -o-transition: .2s all;
    transition: .2s all;
    -webkit-tap-highlight-color: transparent;
}

    .burger .burger-lines:after {
        left: 0;
        top: -1em;
    }

    .burger .burger-lines:before {
        left: 1em;
        top: 1em;
        background-color: red;
    }

    .burger:after {
        content: '';
        display: block;
        position: absolute;
        height: 150%;
        width: 150%;
        top: -25%;
        left: -25%;
    }

    .burger .burger-lines {
        top: 50%;
        margin-top: -0.125em;
    }

        .burger .burger-lines, .burger .burger-lines:after, .burger .burger-lines:before {
            pointer-events: none;
            display: block;
            content: '';
            width: 100%;
            border-radius: 0.25em;
            background-color: black;
            height: 0.25em;
            position: absolute;
            -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
            transform: rotate(0);
        }

            .burger .burger-lines:after {
                left: 0;
                top: -1em;
            }

            .burger .burger-lines:before {
                left: 1em;
                top: 1em;
            }