/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 2 version
*/

.sr-only:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.worldmap-wrapper {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.worldmap-clip {
	position: relative;
}

.worldmap-pins .pin {
	width: 3%;
	width: max( 3%, 16px);
	position: absolute;
	z-index: 1;
	-webkit-transform: translate(-50%, -130%);
	transform: translate(-50%, -130%);
	border-radius: 9999px;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
	transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
}

.worldmap-pins .pin:before,
.worldmap-pins .pin:after {
	border-radius: 9999px;
	content: "";
	display: block;
}

.worldmap-pins .pin:before {
	padding-bottom: 100%;
	height: 0;
}

.worldmap-pins .pin:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg width='32' viewBox='0 0 184.787 256.172' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill:%23ffffff;stroke:none' d='M142 32.428C117.317 36.608 97.021 46.068 81.754 64c-41.612 49.663-15.229 108.154 14.438 156 11.548 18.624 25.091 35.948 38.809 53 4.149 5.157 10.258 15.656 17.999 14.728 6.465-.775 11.441-9.094 15.196-13.728 11.559-14.264 22.868-28.768 33.134-44 20.34-30.178 42.431-66.514 43.627-104C246.665 72.443 195.586 24.755 142 32.428m5 45.861c57.762-7.506 71.014 84.051 13 92.411-48.969 7.056-75.39-58.228-33-85.596 5.903-3.81 13.071-5.914 20-6.815z' transform='translate(-60.212 -31.613)'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	opacity: .8;
	-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.7));
	        filter: drop-shadow(1px 1px 1px rgba(0,0,0,.7));
	-webkit-transition: opacity .2s ease-in-out;
	transition: opacity .2s ease-in-out;
}

.worldmap-pins .pin:hover,
.worldmap-pins .pin.hover {
	z-index: 99;
}

.worldmap-pins .pin:hover:after,
.worldmap-pins .pin.hover:after {
	opacity: 1;
}

.worldmap-pins .pin .tooltip {
	position: absolute;
	top: 100%;
	right: 100%;
	background-color: rgba(255, 255, 255, .85);
	color: #666;
	padding: .5em 1em;
	border-radius: 6px;
	margin-top: .8em;
	font-size: 14px;
	font-size: min(3vw, 14px);
	white-space: nowrap;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
	transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
}

.worldmap-pins .pin .tooltip:before {
	content: "";
	display: block;
	position: absolute;
	bottom: 100%;
	margin-bottom: -1px;
	left: 100%;
	height: 0;
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
	-webkit-transform: translateX(-110%) rotate(45deg);
	transform: translateX(-110%) rotate(45deg);
	border: 4px solid transparent;
	border-left-color: white;
}

.worldmap-pins .pin:hover .tooltip,
.worldmap-pins .pin.hover .tooltip {
	visibility: visible !important;
	opacity: 1;
}

.worldmap-pins .pin[data-rel="US"] {
	margin-top: 3%;
	margin-left: 1%;
}

.worldmap-pins .pin[data-rel="DE"] {
	z-index: 2;
}

.worldmap-pins .pin[data-rel="BE"] {
	margin-top: .4%;
}

.worldmap-pins .pin[data-rel="CN"] {
	margin-top: 2.5%;
	margin-left: 6.7%;
}
