.hamburger-icon {
	background-color: transparent;
	border: 0;
	cursor: pointer;
	height: 40px;
	position: relative;
	width: 35px;

	> span {
		background: var(--global-font-color);
		display: block;
		height: 2px;
		left: 0;
		opacity: 1;
		pointer-events: none;
		position: absolute;
		transform: rotate(0deg);
		transition: all .3s ease-in-out;
		width: 100%;

		&:nth-child(1) { top: 8px; }

		&:nth-child(2),
		&:nth-child(3) { top: 20px; }

		&:nth-child(4) { top: 32px; }
	}

	&.-active {
		> span {
			&:nth-child(1) {
				left: 50%;
				top: 17px;
				width: 0%;
			}

			&:nth-child(2) {
				transform: rotate(45deg);
			}

			&:nth-child(3) {
				transform: rotate(-45deg);
			}

			&:nth-child(4) {
				left: 50%;
				top: 17px;
				width: 0%;
			}
		}
	}
}