.w3-bar-item {
	position: relative;
	overflow: hidden;
}
.w3-bar-item:after,
.w3-bar-item:before {
	position: absolute;
	left: 20%;
	width: 60%;
	height: 2px;
	background: #302f2f;
	content: "";
	opacity: 0;
	transition: 0.3s;
}
.w3-bar-item:before {
	top: 10px;
	transform: translateY(-5px);
}
.w3-bar-item:after {
	bottom: 10px;
	transform: translateY(5px);
}
.w3-bar-item:hover:after,
.w3-bar-item:hover:before {
	opacity: 1;
	transform: translateY(0);
}
@media (max-width: 990px) {
	.w3-bar-item:hover:after,
	.w3-bar-item:hover:before {
		opacity: 0;
		transform: translateY(5px);
		transition: none;
	}
}
.section-appear {
	opacity: 0;
	transition: opacity 3s ease-out, transform 3s ease-out;
}
.section-appear.visible {
	opacity: 1;
}
.navbars-container {
	display: inline-block;
	cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
	width: 35px;
	height: 5px;
	background-color: #333;
	margin: 6px 0;
	transition: 0.4s;
}
.change .bar1 {
	transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
	opacity: 0;
}
.change .bar3 {
	transform: translate(0, -11px) rotate(45deg);
}