.mgE {
    width: 40px;
    height: 40px;
    padding: 10px;
    cursor: pointer;
    position: relative;
}

.mgE hr {
    left: 15px;
    border: none;
    margin: 0;
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: #FFF;
    transition: transform .3s, opacity .3s, width .3s, left .3s, top .3s, background-color .3s;
}

.mgE hr { top: 29px; }

.mgE hr:first-child { top: 19px; }

.mgE hr:last-child { top: 39px; }

body.nav .mgE hr:first-child,
body.nav .mgE hr:last-child {
    width: 0;
    opacity: 0;
    top: 29px;
    left: 30px;
}

body.nav .mgE hr:nth-child(2) {
    background-color: #000;
    transform: rotate(45deg);
}

body.nav .mgE hr:nth-child(3) {
    background-color: #000;
    transform: rotate(-45deg);
}