.toggle {
    width: 50px;
    height: 50px;
/*    background: black;*/
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.toggle::before,
.toggle::after,
.toggle .middle-line {
    content: '';
    position: absolute;
    width: 28px;
    height: 4px;
    background: white;  /* Blake Lives Matter Yellow */
    transition: 0.2s;
}
.toggle::before {
    transform: translateY(-10px);
}
.toggle::after {
    transform: translateY(10px);
}
.toggle.active::before {
    transform: translateY(0px) rotate(45deg);
}
.toggle.active::after {
    transform: translateY(0px) rotate(-45deg);
}
.toggle.active .middle-line {
    opacity: 0;
}
.toggle.active::before, .toggle.active::after, .toggle.active .middle-line {
    background: white;
}
.toggle:hover::before,
.toggle:hover::after,
.toggle:hover .middle-line {
    background: #ffb906;
}

/*.toggle {
	width: 50px;
	height: 50px;
	background: black;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.toggle::before,
.toggle::after,
.toggle .middle-line {
  content: '';
  position: absolute;
  width: 28px;
  height: 4px;
  background: white;
  transition: 0.2s;
}
.toggle::before {
	transform: translateY(-10px);
}
.toggle::after {
	transform: translateY(10px);
}
.toggle.active::before {
	transform: translateY(0px) rotate(45deg);
}
.toggle.active::after {
	transform: translateY(0px) rotate(-45deg);
}
.toggle.active .middle-line {  Added 
  opacity: 0;
}
.toggle.active::before, .toggle.active::after, .toggle.active .middle-line {
  background: white;
}*/