#open_close_container
{
    width: 50px;
    height: 50px;
}

.open_close_box
{
    background: #999999;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
}
    .ocb-line
    {
        background: white;
        width: 80%;
        height: 10%;
        position: absolute;
        left: 10%;
        border-radius: 1000px;
    }

    .open .ocb1
    {
        top: 20%;
        transform: rotate(0deg);
        transition: .25s transform, .25s top .25s;
    }
    .open .ocb2
    {
        top: 45%;
        opacity: 1;
        transition: .1s opacity .25s;
    }
    .open .ocb3
    {
        bottom: 20%;
        transform: rotate(0deg);
        transition: .25s transform, .25s bottom .25s;
    }

    .close .ocb1
    {
        top: 45%;
        transform: rotate(45deg);
        transition: .25s top, .25s transform .25s;
    }
    .close .ocb2
    {
        bottom: 45%;
        opacity: 0;
        transition: .1s opacity .25s;
    }
    .close .ocb3
    {
        bottom: 45%;
        transform: rotate(-45deg);
        transition: .25s bottom, .25s transform .25s;
    }