body{

    margin: 0;

    padding: 0;

    background: #ff5c40;

}

.icon{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    width: 80px;

    height: 80px;

    cursor: pointer;

    background: #000;

}

.hamburger{

    width: 50px;

    height: 6px;

    background: #fff;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    box-shadow: 0 2px 5px rgb(0,0,0,.2);

    transition: .5s;

}

.hamburger:before,

.hamburger:after{

    content: '';

    position: absolute;

    width:  50px;

    height: 6px;

    background: #fff;

    box-shadow: 0 2px 5px rgb(0,0,0,.2);

    transition: 5s;

}



.hamburger:before{

    top: -16px;

}

.hamburger:after{

    top: 16px;

}

.icon.active .hamburger{

    background: rgba(0,0,0,0);

    box-shadow: 0 2px 5px rgb(0,0,0,0);

}

.icon.active .hamburger:before{

    top: 0;

    transform: rotate(45deg);

}

.icon.active .hamburger:after{

    top: 0;

    transform: rotate(135deg);

}