#img1b {
    background-color: black;
    height: 40px;
    width: 40px;
}

#button1c {
    border-radius: 10px;
    position: relative;
    padding: 0px;
    width: 50px; height: 50px;
    background-color: #FFF;
    overflow: hidden;
}

#button2 {
    position: relative;
    padding: 0px;
    width: 50px; height: 50px;
    background-color: #FFF;
    overflow: hidden; 
}

#button3 {
    position: relative;
    padding: 0px;
    width: 50px; height: 50px;
    background-color: #FFF;
    overflow: hidden;
}

.blc1, .blc2, .blc3 {
    transition: all .6s ease-in-out;
}

.menu1cClosed .blc1, .menu1cClosed .blc2, .menu1cClosed .blc3 {
    width: 50px; height: 10px;
    background-color: black;
    position: absolute;
}

.menu1cClosed .blc1 {
    left: 0px; top: 0px;
}

.menu1cClosed .blc2 {
    left: 0px; top: 20px;
}

.menu1cClosed .blc3 {
    left: 0px; top: 40px;
}

.menu1cOpen .blc1, .menu1cOpen .blc2, .menu1cOpen .blc3 {
    width: 50px; height: 10px;
    background-color: black;
    position: absolute;
}

.menu1cOpen .blc1 {
    left: 0px; top: 20px;
    transform: rotate(225deg);
}

.menu1cOpen .blc2 {
    left: 100px;
    top: 20px;
}

.menu1cOpen .blc3 {
    left: 0px; top: 20px;
    transform: rotate(-225deg);
}

.menu2Closed .blc1, .menu2Closed .blc2, .menu2Closed .blc3 {
    width: 50px; height: 10px;
    background-color: black;
    position: absolute;
}

.menu2Closed .blc1 {
    left: 0px; top: 0px;
}

.menu2Closed .blc2 {
    left: 0px; top: 20px;
}

.menu2Closed .blc3 {
    left: 0px; top: 40px;
}

.menu2Open .blc1, .menu2Open .blc2, .menu2Open .blc3 {
    width: 50px; height: 10px;
    background-color: black;
    position: absolute;
}

.menu2Open .blc1 {
    left: 0px; top: 20px;
    transform: rotate(225deg);
}

.menu2Open .blc2 {
    left: 0px;
    top: 20px;
    transform: rotate(-405deg);
}

.menu2Open .blc3 {
    left: 0px; top: 20px;
    transform: rotate(-225deg);
}

.menu3Closed .blc1, .menu3Closed .blc2, .menu3Closed .blc3 {
    width: 50px; height: 10px;
    background-color: black;
    position: absolute;
}

.menu3Closed .blc1 {
    left: 0px; top: 0px;
}

.menu3Closed .blc2 {
    left: 0px; top: 20px;
}

.menu3Closed .blc3 {
    left: 0px; top: 40px;
}

.menu3Closed:hover .blc1 {
    width: 40px;
    left: 5px; top: 0px;
}

.menu3Closed:hover .blc2 {
    width: 35px;
    left: 7.5px; top: 20px;
}

.menu3Closed:hover .blc3 {
    width: 40px;
    left: 5px; top: 40px;
}

.menu3Closed:hover .blc1, .menu3Closed:hover .blc2, .menu3Closed:hover .blc3 {
    transition: all .3s ease-in-out;
}


.menu3Open .blc1, .menu3Open .blc2, .menu3Open .blc3 {
    width: 50px; height: 10px;
    background-color: black;
    position: absolute;
}

.menu3Open .blc1 {
    left: 0px; top: 20px;
    transform: rotate(225deg);
}

.menu3Open .blc2 {
    left: 0px;
    top: 20px;
    transform: rotate(-405deg);
}

.menu3Open .blc3 {
    left: 0px; top: 20px;
    transform: rotate(-225deg);
}


