*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.menu-border{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    height: 56px;
    width: 70px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    /*border: 2px solid black;*/
}

.menu-lines{
    height: 2px;
    width: 20px;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    background-color: black;
    border-radius: 1px;
}

.menu-lines::before,
.menu-lines::after{
    content:'';
    position: absolute;
    height: 2px;
    width: 20px;
    transition: all 0.5s ease-in-out;
    background-color: black;
    border-radius: 1px;
}

.menu-lines::before{
    transform: translateY(-6px);
}

.menu-lines::after{
    transform: translateY(6px);
}

.menu-border.open .menu-lines{
    background: transparent;
}

.menu-border.open .menu-lines::before{
    transform: rotate(45deg);
}

.menu-border.open .menu-lines::after{
    transform: rotate(-45deg);
}