@-webkit-keyframes swing {
    15% { -webkit-transform: translateY(5px); transform: translateY(5px); }
    30% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
    50% { -webkit-transform: translateY(3px); transform: translateY(3px); }
    65% { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
    80% { -webkit-transform: translateY(2px); transform: translateY(2px); }
    100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes swing {
    15% { -webkit-transform: translateY(5px); transform: translateY(5px); }
    30% { -webkit-transform: translateY(-5px); transform: translateY(-5px); }
    50% { -webkit-transform: translateY(3px); transform: translateY(3px); }
    65% { -webkit-transform: translateY(-3px); transform: translateY(-3px); }
    80% { -webkit-transform: translateY(2px); transform: translateY(2px); }
    100% { -webkit-transform: translateY(0); transform: translateY(0); }
}

.map {
	position: relative;
	background-image: url("/fileadmin/templates/iclei-europe/html/maps/map_lgds.png");
	padding-top: 65%;
	background-position: center;
	background-repeat: no-repeat;
	max-width: 5000px;
	background-size: contain;

	.pin {
		position: absolute;

		span {
			display: none;
		}

		&:hover {
			-webkit-animation: swing 1s ease;
		    animation: swing 1s ease;
		    -webkit-animation-iteration-count: 1;
		    animation-iteration-count: 1;
		    z-index: 2;

		    span {
		    	display: block;
		    	width: fit-content;
		    	padding: 5px;
		    	position: relative;
		    }
		}

		img {
			position: absolute;
			left: -50%;
			bottom: 0;
			filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
		}
	}

	.pin-member {
		z-index: 1;
		width: 24px;

		span {
			background-color: rgb(170, 207, 129);
			margin-left: 15px;
			top: -2px;
		}
	}
	.pin-non-member {
		width: 18px;

		span {
			background-color: rgb(63, 63, 63);
			margin-left: 12px;
			top: 6px;
		}
	}


	/* ── MEMBERS ── */
	/* Positions corrected via Mercator projection calibrated on Cork, Espoo, Ibiza references */
	.pin-AALBORG      { bottom: 58.5%; left: 40.4%; }
	.pin-AARHUS       { bottom: 56.7%; left: 40.7%; }
	.pin-ALBA-IULIA   { bottom: 30.8%; left: 57.4%; }
	.pin-AMSTERDAM    { bottom: 48.5%; left: 35.2%; }
	.pin-BRAGA        { bottom: 25.0%; left: 15.0%; }
	.pin-CORK         { bottom: 52.0%; left: 20.5%; } /*reference*/
	.pin-ESPOO        { bottom: 68.6%; left: 53.5%; } /*reference*/
	.pin-FIRENZE      { bottom: 25.2%; left: 40.8%; }
	.pin-GUIMARÃES    { bottom: 23.7%; left: 15.2%; }
	.pin-HELDELBERG   { bottom: 37.3%; left: 39.5%; }
	.pin-LARISSA      { bottom: 12.6%; left: 56.2%; }
	.pin-MANNHEIM     { bottom: 38.1%; left: 39%; }
	.pin-NICOSIA      { bottom:  2.9%; left: 71.5%; }
	.pin-PESCARA      { bottom: 22.1%; left: 42.8%; }
	.pin-ZARAGOZA     { bottom: 20.2%; left: 27.3%; }
	.pin-PORI         { bottom: 76.5%; left: 50.6%; }
	.pin-THESSALONIKI { bottom: 17.9%; left: 51.8%; }
	.pin-VALONGO      { bottom: 19.2%; left: 19.5%; }

	/* ── NON-MEMBERS ── */
	.pin-ALCOY                          { bottom: 15.6%; left: 25.7%; }
	.pin-ALMERIA                        { bottom:  8.5%; left: 20.7%; }
	.pin-ANTONY                         { bottom: 37.6%; left: 30.6%; }
	.pin-ARNSBERG                       { bottom: 45.1%; left: 39.5%; }
	.pin-ARTEIXO                        { bottom: 28.5%; left: 15.4%; }
	.pin-BACĂU                          { bottom: 34.0%; left: 60.9%; }
	.pin-BAMBERG                        { bottom: 40.7%; left: 42.6%; }
	.pin-BENIDORM                       { bottom: 12.2%; left: 24.5%; }
	.pin-BUSTO-ARSIZIO                  { bottom: 29.7%; left: 37.3%; }
	.pin-CÂMARA-DE-LOBOS                { bottom:  3.7%; left: 3.7%; }
	.pin-CASTELLDEFELS                  { bottom: 19.4%; left: 30.2%; }
	.pin-CAMPOBASSO                     { bottom: 17.0%; left: 45.3%; }
	.pin-CANTAZARO                      { bottom: 10.0%; left: 48.2%; }
	.pin-CHALKIDA                       { bottom: 11.0%; left: 57.5%; }
	.pin-CLUJ-NAPOCA                    { bottom: 34.5%; left: 57.4%; }
	.pin-COLLADO-VILLALBA               { bottom: 19.5%; left: 19.1%; }
	.pin-ESCH-SUR-ALZETTE               { bottom: 39.6%; left: 34.3%; }
	.pin-GALAȚI                         { bottom: 30.2%; left: 61.5%; }
	.pin-GDAŃSK                         { bottom: 52.2%; left: 49.4%; }
	.pin-GELSENKIRCHEN                  { bottom: 45.1%; left: 37.8%; }
	.pin-GLIWICE                        { bottom: 41.7%; left: 47.4%; }
	.pin-GRANADA                        { bottom: 10.2%; left: 20.2%; }
	.pin-HELMOND                        { bottom: 45.0%; left: 36.0%; }
	.pin-HERAKLION                      { bottom:  1.3%; left: 61.0%; }
	.pin-IBIZA                          { bottom: 12.8%; left: 26.7%; } /*reference*/
	.pin-KALAMATA                       { bottom:  4.9%; left: 55.9%; }
	.pin-KAVALA                         { bottom: 16.6%; left: 58.3%; }
	.pin-KOZANI                         { bottom: 16.1%; left: 55.6%; }
	.pin-LARNAKA                        { bottom:  0.4%; left: 72.8%; }
	.pin-LAS-ROZAS-DE-MADRID            { bottom: 19.1%; left: 19.7%; }
	.pin-LEGNANO                        { bottom: 29.6%; left: 38.4%; }
	.pin-LIMERICK                       { bottom: 54.3%; left: 21.3%; }
	.pin-MANTOVA                        { bottom: 29.6%; left: 40%; }
	.pin-MOLINA-DE-SEGURA               { bottom: 11.1%; left: 23.5%; }
	.pin-NORTH-WEST-IRELAND-CITY-REGION { bottom: 57.1%; left: 20.7%; }
}

@include whenScreenIsSmallerOrEqualTo($breakpoint-tablet-landscape) {
	.map {
		.pin {
			width: 18px;
		}
	}
}