.icon {
background-color: black;
border: 0;
height: 55px;
width: 79px;
border-radius: 50%;
cursor: pointer;
position: relative;
overflow: visible;
}

.icon span {
right: 0;
display: block;
height: 3px;
width: 24px;
background-color: #ffffff;
position: absolute;
-webkit-transition: -webkit-transform 0.3s;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.icon span:first-child {
top: 28px;
}
.icon span:nth-child(2) {
top: 37px;
}
.icon span:last-child {
top: 46px;
}
.icon--active span:first-child {
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
position: absolute;
top: 37px;
}
.icon--active span:last-child {
-webkit-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
transform: rotate(-50deg);
position: absolute;
top: 37px;
}
.icon--active span:nth-child(2) {
opacity: 0;
}

.icon--transparent {
background-color: transparent;
}
.icon--transparent span {
background-color: black;
}