:root {
	--menu-height: 5rem;
	--menu-padding: 3rem;
}

.nav-height {
	height: var(--menu-height);
	padding-left: var(--menu-padding);
	padding-right: var(--menu-padding);
}

.hamburger {
    position: relative;
    width: 26px;
    height: 22px;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
}
.hamburger span {
    display: block;
    height: 2px;
    background-color: #ced1da;
    position: absolute;
    left: calc(50% - 14px);
    opacity: 1;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
    width: 28px;
    border-radius: 6px;
}
.hamburger span:first-child {
    top: calc(50% - 6px);
}
.hamburger span:nth-child(2), .hamburger span:nth-child(3) {
    top: 50%;
}

.hamburger span:nth-child(4) {
    top: calc(50% + 6px);
    left: calc(50%);
    width: 14px;
}

.hamburger.active span:first-child {
    width: 0;
    top: 12px;
    left: 50%;
}
.hamburger.active span:nth-child(2) {
    transform: rotate(45deg);
}
.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg);
}
.hamburger.active span:nth-child(4) {
    width: 0;
    top: 12px;
    left: 50%;
}

@media (max-width: 540px) {
	:root {
		--menu-padding: 1rem;
	}
}