.mgE {
    width: 30px;
    height: 30px;
    padding: 15px;
    cursor: pointer;
    position: relative;
}

.mgE hr {
    border: none;
    margin: 0;
    position: absolute;
    width: 30px;
    height: 2px;
    background-color: #fff;
    transition: all .25s ease;
}

.mgE hr { top: 24px; }

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

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

body.left .mgE hr:first-child,
body.left .mgE hr:last-child,
.show .mgE hr:first-child,
.show .mgE hr:last-child {
    width: 0;
    top: 15px;
    margin: 15px;
    opacity: 0;
}

.show .mgE hr:nth-child(2),
body.left .mgE hr:nth-child(2) { transform: rotate(45deg); }

.show .mgE hr:nth-child(3),
body.left .mgE hr:nth-child(3) { transform: rotate(-45deg); }