@-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_cop31.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-BRUSSELS   { bottom: 43.2%;  left: 30.9%; }
	.pin-BURDUR     { bottom:  9.8%;  left: 66.5%; }
	.pin-İZMİR      { bottom: 11.6%;  left: 62.2%; } /* reference */
	.pin-KADIKÖY    { bottom: 19.1%;  left: 64.7%; }
	.pin-MALMÖ      { bottom: 55.2%;  left: 44.0%; } /* reference */
	.pin-MARSEILLE  { bottom: 24.0%;  left: 32.5%; } /* reference */
	.pin-MUĞLA      { bottom:  8.6%;  left: 64.2%; }
	.pin-TURKU      { bottom: 69.3%;  left: 52.0%; } /* reference */
	.pin-YALOVA     { bottom: 17.3%;  left: 65.1%; }
	.pin-CEMR-PLATFORMA-BRUSSELS { bottom: 43%; left: 31.3%; }
}

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