.toggle {
	width: 50px;
	height: 50px;
	background: black;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transition: all 0.3s ease-in-out;
}
.toggle::before,
.toggle::after,
.toggle .middle-line { /* Added */
  content: '';
  position: absolute;
  width: 28px;
  height: 4px;
	background: #f5f5f5;
  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 { /* Added */
	background: #f3b104;
}
.toggle:hover::before,
.toggle:hover::after,
.toggle:hover .middle-line {
	background-color: #131315;
}
.toggle:hover {
	background-color: #f3b104;
/*	border: solid #f3b104 2px;*/
}