header {
	background: var(--color__black);
	position: sticky;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 10;

	.wrapper {
		align-items: flex-end;
		display: flex;
		flex-flow: row wrap;
	}

	.header__logo {
		/* display: none; */

		a {
			display: block;
			height: 100%;
			width: 100%;

			img {
				display: block;
				height: 100%;
				width: 100%;
			}
		}
	}

	/* .header__utilities {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-end;
		width: 100%;
		gap: 15px;

		p {
			margin-bottom: 0;
		}

		.menu__social {
			flex: initial;
		}
	} */

	.header__menu {
		display: flex;
		flex: 1;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		gap: 1rem;
	}

	.menu__items {
		/* flex: 1; */
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: space-around;
		gap: 30px;
		padding: 30px 0;

		&.menu__main {
			flex: 1;
		}
	}

	.menu__item {

		&.menu__item--submenu {
			position: relative;

			&:hover .submenu__items {
				opacity: 1;
				pointer-events: initial;
				transform: translateX(-50%);
			}
		}
	}

	.menu__link {
		font-size: 24px;
		font-weight: 700;
		color: var(--color__white);
		transition: var(--transition);
		text-decoration: none;
		position: relative;

		&::after {
			background: var(--color__white);
			content: '';
			height: 2px;
			border-radius: 2px;
			position: absolute;
			bottom: -15px;
			left: 50%;
			width: 0;
			transform: translateX(-50%);
			transition: var(--transition);
		}

		&:hover {
			color: var(--color__main);

			&::after {
				width: 100%;
				background: var(--color__main);
			}
		}
	}

	.menu__logo {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 2rem;
	}

	.submenu__items {
		background: var(--color__main);
		position: absolute;
		z-index: 5;
		padding: 30px;
		left: 50%;
		min-width: 100%;
		width: fit-content;
		top: calc(100% + 30px);
		transform: translate(-50%,30px);
		pointer-events: none;
		opacity: 0;
		transition: var(--transition);

		&::before {
			content: '';
			display: block;
			width: 100%;
			height: 30px;
			top: -30px;
			left: 0;
			position: absolute;
		}
	}

	.submenu__item {
		
	}

	.submenu__link {
		color: var(--color__black);
		font-weight: 400;
		white-space: nowrap;
		text-decoration: none;
		transition: var(--transition);

		&:hover {
			color: var(--color__white);
		}
	}

	.header__button {
		display: none;

		button {
			height: 45px;
			width: 45px;
			padding: 5px;
			overflow: hidden;
			position: relative;
			border: 1px solid var(--color__main);
			border-radius: 10px;

			span {
				background: var(--color__main);
				position: absolute;
				left: 50%;
				top: 50%;
				width: calc(100% - 10px);
				transform: translate(-50%,-50%);
				height: 4px;
				pointer-events: none;
				transition: var(--transition);

				&::before,
				&::after {
					background: var(--color__main);
					content: '';
					display: block;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					transform-origin: center;
					transition: var(--transition);
				}

				&::before {
					transform: translate(-50%, calc(-50% - 10px));
				}

				&::after {
					transform: translate(-50%, calc(-50% + 10px));
				}
			}
		}
	}
}

@media screen and (max-width: 1200px) {
	header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;

		.wrapper {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			align-content: space-between;
			padding: 15px 30px;
			width: 100%;
		}

		.header__logo {
			max-width: 90px;
			min-width: initial;
			order: 1;
			transition: var(--transition);
		}

		.header__menu {
			flex: initial;
			align-self: flex-start;
			order: 3;
			width: 100%;
			transform: translateY(calc(-100% - 30px));
			position: fixed;
		}

		.header__button {
			align-self: center;
			display: block;
			order: 2;
		}

		&.block__header--scrolling {

			.header__logo {
				max-width: 60px;
			}

		}
	}

	body.toggle--menu {
		position: absolute;
		overflow: hidden;

		header {
			display: flex;

			.header__menu {
				position: relative;
				transform: initial;
				transition: var(--transition);
			}


			.header__button {

				button {

					span {
						background: transparent;

						&::before {
							transform: translate(-50%,-50%) rotate(-45deg);
						}

						&::after {
							transform: translate(-50%,-50%) rotate(45deg);
						}

					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	header {

		.header__menu {
			flex-direction: column;
		}

		.menu__items {
			flex-direction: column;
		}

		.submenu__items {
			background: transparent;
			position: relative;
			opacity: 1;
			padding: 15px 15px 0;
			transform: translateX(-50%);
			text-align: center;
			pointer-events: initial;

			&::before {
				display: none;
			}
		}

		.submenu__link {
			color: var(--color__white);
		}

	}
}