header {
	position: relative;
	z-index: 100;
	display: flex;
	background: #fff;

	h1 {
		padding: 20px 50px;
		position: relative;
		transition: padding 250ms ease-out;

		:after {
			content: '';
			position: absolute;
			right: -10px;
			top: 0;
			width: 10px;
			height: 100%;
			background: rgba(0, 0, 0, 0.05);
			pointer-events: none;
		}

		a {
			display: block;
			text-indent: -99999px;
			width: 180px;
			height: 100px;
			background: url(../img/layout/logo.svg) no-repeat;
			background-size: 100% auto;
		}
	}

	.burger-wrapper {
		display: none;
	}

	.menu-wrapper {
		width: 100%;
		background: #f8f8f8;
	}

	.info {
		background: #0a2b4e;
		display: flex;
		justify-content: flex-end;
		padding-right: 50px;
		height: 50px;
		line-height: 50px;
		font-size: 14px;

		.whatts {
			display: flex;
			margin-right: 50px;

			.whatts-item {
				display: inline-flex;
				align-items: center;
				transition: all 250ms ease-out;
				color: #fff;

				&:hover {
					color: #ed2f59;

					.whatts-item__icon {
						background: url(../img/content/whatts-icon-red.svg)
							no-repeat;
						background-size: 100%;
						width: 40px;
						height: 40px;
					}
				}

				&__icon {
					background: url(../img/content/whatts-icon.svg) no-repeat;
					background-size: 100%;
					width: 40px;
					height: 40px;
					margin-right: 5px;
					transition: all 250ms ease-out;
				}
			}

			p {
				font-size: 16px;
				line-height: 1.38;
			}
		}

		.social {
			a {
				width: 28px;
				height: 28px;
			}
		}

		> a {
			padding-right: 30px;
			color: #fff;
			letter-spacing: 1px;
		}
	}

	.container-menu {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 15px 0 15px 80px;
	}

	.menu {
		display: flex;
		justify-content: space-between;
		align-items: center;

		max-width: 1052px;
		padding-right: 50px;
		height: calc(100% - 50px);
		margin: auto;
		padding-left: 2vw;
		// padding-left: 10vw;

		li {
			a {
				position: relative;
				display: block;
				color: #2f4f7e;
				padding: 20px;
				font-size: 14px;
				text-transform: uppercase;
				letter-spacing: 1px;

				&:after {
					content: '';
					position: absolute;
					bottom: 10px;
					left: 0;
					right: 100%;
					height: 2px;
					background: #ed2f59;
					transition: all 250ms ease-out;
				}

				&:hover {
					color: #ed2f59;

					&:after {
						left: 20px;
						right: 20px;
					}
				}
			}

			&:last-of-type {
				a {
					padding-right: 0;

					&:hover:after {
						right: 0px;
					}
				}
			}
		}
	}

	.btn-menu {
		background-color: #e60043;
		border: none;
		border-radius: 4px;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		transition: 0.3s color ease-in-out, 0.3s background-color ease-in-out;
		padding: 10px 20px;

		&:hover {
			color: #fff;
			background-color: #971531;
		}
	}
}

@media screen and (max-width: 1280px) {
	header {
		h1 {
			padding: 25px 90px;
		}

		.menu {
			padding-left: 50px;

			li a {
				letter-spacing: 0px;
				padding: 20px 15px;

				&:hover:after {
					left: 15px;
					right: 15px;
				}
			}
		}
	}
}

@media screen and (max-width: 1306px) {
	header {
		top: -100%;

		&.fixed {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background: #fff;
			border-bottom: 1px solid rgba(42, 72, 119, 0.06);
			transition: top 500ms ease-out 80ms;
		}

		h1 {
			padding: 20px 30px;

			a {
				width: 100px;
				height: 65px;

				&:after {
					display: none;
				}
			}
		}
		.burger-wrapper {
			display: flex;
			align-items: center;
			position: absolute;
			top: 50%;
			right: 30px;
			transform: translateY(-50%);
			height: 50px;
			width: 50px;
			border-radius: 100%;
			background: #2f4f7e;
			cursor: pointer;

			.burger {
				display: block;
				width: 25px;
				height: 18px;
				position: relative;
				left: 50%;
				z-index: 1;
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg) translateX(-50%);
				cursor: pointer;
			}
			.burger span {
				display: block;
				position: absolute;
				height: 2px;
				width: 100%;
				background: #ed2f59;
				border-radius: 4px;
				opacity: 1;
				left: 0;
				transform: rotate(0deg);
				transition: all 200ms ease-out;
			}
			.burger span:nth-child(1) {
				top: 0px;
			}
			.burger span:nth-child(2),
			.burger span:nth-child(3) {
				top: 8px;
			}
			.burger span:nth-child(4) {
				top: 16px;
			}

			.burger.open span:nth-child(1) {
				width: 0%;
				top: 15px;
				left: 50%;
			}
			.burger.open span:nth-child(2) {
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}
			.burger.open span:nth-child(3) {
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}
			.burger.open span:nth-child(4) {
				width: 0%;
				top: 15px;
				left: 50%;
			}
		}

		.menu-wrapper {
			opacity: 0;
			transform: translateY(-115%);
			pointer-events: none;

			display: flex;
			flex-direction: column;
			position: absolute;
			z-index: 2;
			top: 100%;
			width: 100%;
			height: calc(100vh - 100%);
			padding: 50px 0;

			background: #2f4f7e url(../img/layout/logo-image.svg) no-repeat left -50px
				bottom;
			background-size: 530px auto;

			.menu {
				flex-direction: column;
				align-items: end;
				margin: 0;
				flex-grow: 1;
				height: auto;

				li {
					flex-grow: 1;
					display: flex;

					a {
						color: #fff;
						padding: 0;
						font-size: 3vh;
						font-weight: 700;
						text-transform: none;
						margin-bottom: 2vh;

						&:after {
							display: none;
						}
					}
				}
			}

			.info {
				background: none;
				order: 2;
				display: block;
				height: auto;
				padding: 2vh 50px 0;

				> a {
					display: block;
					color: #061a3a;
					font-size: 3vh;
					font-weight: 700;
					line-height: 5vh;
					letter-spacing: 0;
					margin-bottom: 2vh;
					padding: 0;
				}

				.whatts {
					margin-bottom: 30px;
					margin-right: 0;
				}

				.social {
					padding-top: 2vh;

					a {
						width: 45px;
						height: 45px;
					}
				}
			}

			&.open {
				opacity: 1;
				transform: translateY(0);
				pointer-events: all;
				transition: all 300ms ease-out;
			}
		}
	}
}

@media screen and (max-width: 850px) {
	header .menu-wrapper {
		background-size: 85% auto;
	}
}

@media screen and (max-width: 550px) {
	header .menu-wrapper .info > a {
		font-size: 5.5vw;
	}

	header .container-menu {
		align-items: flex-end;
		flex-direction: column;
		margin: 0;
	}

	header .btn-menu {
		margin: 0 50px 40px auto;
	}

	footer h2 {
		font-size: 8.7vw;
		line-height: 11.9vw;
		margin-bottom: 17vw;
	}
}
