#header {
	@extend %header;
	background-color: transparent;
	position: fixed;
	transition: all 0.48s ease;
	z-index: 490;

	.logo {
		position: relative;
		width: 230px;
		height: 35px;
		z-index: 300;

		img {
			position: absolute;
			height: 100%;

			top: 0;
			right: 0;
		}
	}

	&.regular-bg {
		background-color: $body-bg
	}

	.menu-button {
		display: flex;
		align-items: flex-end;
		transition: all 0.48s ease;

		&__hamburger {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			margin-right: 10px;
			z-index: 490;
		}

		&__text {
			font-size: 1.3rem;
			line-height: 1.25rem;
			color: $body-bg;

			transition: all 0.48s ease;
			display: flex;

			&.regular-bg {
				color: $black;
			}
		}
	}
}

@media screen and (max-width: 768px) {
	#header {
		height: $header-mobile-height;

		.logo {
			height: 23px;
		}
	}
}