#map {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
}

.map {
	width: 100%;
	height: 100vh;
	position: relative;
	&__form {
		z-index: 2;
		position: absolute;
		right: 50%;
		width: 32%;
		background: #fff;
		top: -50%;
		padding: 67px 60px;
		header {
			font-size: 22px;
			position: absolute;
			background: $main-dark-color;
			top: -72px;
			left: 65px;
			padding: 20px 25px;
			label {
				border-bottom: 1px solid #fff;
			}
		}
		&--blank {
			width: 100%;
			padding: 22.5px;
			float: left;
		}
		footer {
			button {
				border: none;
				font-size: 22px;
				position: absolute;
				background: $main-dark-color;
				right: 60px;
				padding: 18px 23px;
				bottom: -33px;
				border: 2px solid transparent;
				transition: all 0.3s ease;
				&:hover {
					border-color: $main-dark-color;
					background: #fff;
					color: $main-dark-color;
				}
			}
		}
	}
	&__infos {
		z-index: 2;
		position: absolute;
		top: 40%;
		right: 13%;
		width: 30%;
		padding: 20px 30px;
		background: $main-dark-color;
		font-family: $AkzidenzGroteskStd-Regular;
		header {
			width: 100%;
			height: 25px;
			img {
				width: 65px;
			}
		}
		&__content {
			padding-top: 20px;
			div:nth-child(1) {
				padding-right: 5px;
			}
			div:nth-child(2) {
				padding-left: 5px;
			}
			.title {
				display: block;
				border-bottom: 1px solid #fff;
			}
			.info {
				display: block;
				color: #fff;
			}
			&:nth-child(1) {
				padding-right: 15px;
			}
			&:nth-child(2) {
				padding-left: 15px;
			}
		}
	}
}


@media all and(max-width: $desktop-lg) {
	.map {
		height: 120vh;
		&__form {
			right: 50%;
			width: 32%;
			top: -20%;
			padding: 33px 30px;
			header {
				left: 30px;
			}
		}
		&__infos {
			padding: 15px 20px;
			&__content {
				
			}
		}
	}
}


@media all and(max-width: $desktop-sm) {
	#map {
		position: relative;
		height: 100vh;
	}
	.map {
		height: auto;
		&__form {
			position: relative;
			width: 80%;
			right: 0;
			margin: 0 auto;
			.wrapper {
				float: none;
			}
		}
		&__infos {
			display: none;
		}
	}
}

@media all and(max-width: $tablet) {
	.map {
		height: auto;
		margin-top: 72px;
		&__form {
			position: relative;
			width: 100%;
			right: 0;
			.wrapper {
				float: none;
			}
		}
	}
}