.home {
	.map-wrapper {
		height: 70vh;
		position: relative;
		min-height: 450px;
		> img {
			position: relative;
			height: 50vh;
			margin: 0 auto;
			margin-top: -38vh;
			z-index: 1;
		}
		.map {
			z-index: 2;
		}
		#map {
			width: 100%;
			height: 100%;
			position: relative;
		}
		.navigating {
			background: #fff;
			font-size: 0.4em;
			height: 100%;
			left: 0;
			position: absolute;
			text-align: left;
			top: 0;
			width: 30%;
			z-index: 3;
			.item {
				background: #fff;
				color: #464646;
				font-family: $BrownRegular;
				padding: 7%;
				border-bottom: 1px solid $main-color;
				cursor: pointer;
				transition: all 0.3s;
				> * {
					color: inherit;
					cursor: inherit;
				}
				.date {
					font-family: $BrownBold;
				}
				.description {
					margin-top: 5px;
					margin: 0;
				}
				.hours {
					display: block;
					margin-top: 25px;
				}
				&-active {
					background: $main-color;
					color: #fff;
				}
				&:hover {
					background: $main-color;
					color: #fff;
				}
			}
		}
		.arrows {
			display: -ms-flexbox;
			display: flex;
			height: 10%;
			-ms-flex-pack: center;
				justify-content: center;
			margin-top: -2%;
			position: absolute;
			width: 30%;
			z-index: 3;
			> div {
				background: $main-color;
				-ms-flex-align: center;
					align-items: center;
				display: -ms-flexbox;
				display: flex;
				height: 100%;
				-ms-flex-pack: center;
					justify-content: center;
				margin: 0 2%;
				padding: 2%;
				width: 17%;
				cursor: pointer;
				img {
					height: auto;
					width: 100%;
				}
			}
			.up {
				transform: rotateX(180deg);
			}
		}
	}
}

@media (max-width: 800px) {
	.home {
		margin-bottom: 180px !important;
		.map-wrapper {
			.navigating {
				position: relative;
				width: 100%;
				height: 88px;
				.item {
					padding: 10px;
				}
			}
			.arrows {
				display: none;
			}
			> img {
			    margin-top: -260px;
			    height: 350px;
			}
		}
	}
}