.interactive-map {
	display: flex;
	position: relative;

	video {
		margin: 0;
		aspect-ratio: 16 / 9;
		position: relative;
		z-index: 1;
	}

	&__background {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;

		&__poster {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: auto;
		}
	}

	.zoomVideo {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		z-index: -1;
		opacity: 0;

		&.active {
			z-index: 1;
			opacity: 1;
		}
	}

	.loading-wrapper {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	.markers {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: opacity $transition-speed ease;
		z-index: 2;

			&-enter,
			&-appear {
				opacity: 0;
			}
			&-enter-active,
			&-appear-active {
				opacity: 1;
				transition: opacity ease 300ms;
			}
			&-exit {
				opacity: 1;
				pointer-events: none;
			}
			&-exit-active,
			&-exit-done {
				opacity: 0;
				pointer-events: none;
				transition: opacity ease 300ms;
			}

			@include media-breakpoint-down(sm) {
				display: none;
			}

    .marker {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(255,255,255, 0.9);
		text-decoration: none;
		border-radius: 0px 50px 50px 0px;
		color: #455c6e;
		cursor: pointer;
		padding: 5px 10px 4px 10px;
		transform: translateX(15px);
		line-height: 1;

			&:hover {
				background: #e94d19;
				color: #fff;

			.icon.hover {
				opacity: 1;
				color: #fff;
			}

			.label {
				color: #fff;
			}
		}

		.icon {
			position: absolute;
			left: 0;
			top: 50%;
			transform: translate(-50%, -50%);

				&:before {
					display: block;
					content: "";
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 90%;
					height: 90%;
					border-radius: 50%;
					background-color: #fff;
				}

				&.hover {
					opacity: 0;
					transition: opacity $transition-speed ease;
				}
	}

    .label {
		margin: 0;
        font-size: 12px;
		font-weight: normal;
        text-align: left;
        text-decoration: none;
        color: #000;
        line-height: normal;
		transition: color .3s ease;
		font-family: 'Helvetica Neue', Arial, sans-serif;
      }
    }
  }
}
.svg {
	display: flex;
	position: relative;
  
	svg {
		position: relative;
	}
		&.configure svg {
			top: -2px;
			width: 18px;
		}
		&.forward svg {
			top: -2px;
			width: 18px;
		}

		&.close-big {
			&:hover svg {
				fill: #004882;
			}
	}
}