.c-world-map {
	position: relative;
	background-color: palette(secondary, 950);
	padding: 40px 0;

	&:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0.1;
		background-image: url("/img/wave.svg");
		background-size: 90px;
	}
}

.c-world-map__main {
	position: relative;
	z-index: 1;
}

.c-world-map__marker {
	position: fixed;
	pointer-events: none;
	z-index: 2;
	display: inline-block;
	padding: 2px 8px 6px;
	line-height: 1;
	border-radius: 4px;
	background-color: white;
	opacity: 1;
	transform: translate3d(-50%, calc(-100% - 10px), 0);
	transition: opacity 0.3s, transform 0.3s ease-in-out;

	&:before{
		content: attr(data-name);
		font-size: 0.7rem;
		line-height: 1.1;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1.8px;
		color: palette(secondary, 200);
	}

	&:after {
		content: '';
		display: inline-block;
		position: absolute;
		left: 50%;
		bottom: -5px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 6px 0 6px;
		border-color: white transparent transparent transparent;
		transform: translateX(-50%);
	}

	&[data-name=""],
	&.fade-out
	{
		opacity: 0;
		transform: translate3d(-50%, calc(-100% - 30px), 0);
	}
}

.c-world-map__main g > * {
	fill: transparent;
}

.c-world-map__main g.clickable {
	cursor: pointer;
}

.c-world-map__canvas {
	.start {
		stop-color:currentColor;
		stop-opacity: 1;
		//color: #4e4376;
		color: #705eaf;
	}
	.stop {
		stop-color:currentColor;
		color:#2b5876;
		stop-opacity: 1;
	}
}