/*------------------Icon Style/Icon-Animationen------------------*/
div.icon_size {
	border-radius: 50%;
	display: block;
	position: absolute;
	z-index: 10;
	width: 2.9%;
	height: 5.1%;
	background: none;
}

div.icon_size svg {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
} 

.clickicon,
.hotspoticon,
.infoiicon {
	animation: pulse2 2s infinite;
}

div.dragiconleft {
	animation: xAxisL 3.25s infinite ease;
}

div.dragiconright {
	animation: xAxisR 3.25s infinite ease;
}

div.dragiconup {
	animation: yAxisU 3.25s infinite ease;
}

div.dragicondown {
	animation: yAxisD 3.25s infinite ease;
}

@keyframes pulse2 {
	0% {
		animation-timing-function: ease;
		-moz-box-shadow: 0 0 0px 0 rgba(0, 153, 153, 0.4);
		box-shadow: 0 0 0px 0 rgba(0, 153, 153, 0.4);
		transform: scale(1);
	}

	70% {
		-moz-box-shadow: 0 0 15px 15px rgba(119, 170, 187, 0);
		box-shadow: 0 0 15px 15px rgba(119, 170, 187, 0);
		transform: scale(0.96);
	}

	100% {
		-moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0);
		box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0);
		transform: scale(1);
	}
}

@keyframes xAxisL {
	0% {
		transform: scale(1);
	}

	5% {
		box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.4);
		transform: scale(0.95);
	}

	50% {
		box-shadow: 0 0 10px 10px rgba(123, 123, 123, 0);
		transform: translateX(-20px);
	}

	70% {
		box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0);
	}

	100% {
		animation-timing-function: ease-in;
		transform: translateX(+20px);
		transform: scale(1);
	}
}

@keyframes xAxisR {
	0% {
		transform: scale(1);
	}

	5% {
		box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.4);
		transform: scale(0.92);
	}

	50% {
		box-shadow: 0 0 10px 10px rgba(123, 123, 123, 0);
		transform: translateX(+20px);
	}

	80% {
		box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0);
	}

	100% {
		animation-timing-function: ease-in;
		transform: translateX(-20px);
		transform: scale(1);
	}

}

@keyframes yAxisU {
	0% {
		transform: scale(1);
	}

	5% {
		box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.4);
		transform: scale(0.92);
	}

	50% {
		box-shadow: 0 0 10px 10px rgba(123, 123, 123, 0);
		transform: translateY(-20px);
	}

	80% {
		box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0);
		/* transform: scale(1); */
	}

	100% {
		animation-timing-function: ease-in;
		transform: translateY(-20px);
		transform: scale(1);
	}
}

@keyframes yAxisD {
	0% {
		transform: scale(1);
	}

	5% {
		box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.4);
		transform: scale(0.92);
	}

	50% {
		box-shadow: 0 0 10px 10px rgba(123, 123, 123, 0);
		transform: translateY(+20px);
	}

	80% {
		box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0);
	}

	100% {
		animation-timing-function: ease-in;
		transform: translateY(-20px);
		transform: scale(1);
	}
}