@-webkit-keyframes hotspotEffect {
	0% {
		-webkit-box-shadow: 0 0 0 0 #002866;
	}
	70% {
		-webkit-box-shadow: 0 0 0 8px rgba(#002866, .2);
	}
	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(#002866, .2);
	}
}
@keyframes hotspotEffect {
	0% {
		box-shadow: 0 0 0 0 #002866;
	}
	70% {
		box-shadow: 0 0 0 8px rgba(#002866, .2);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(#002866, .2);
	}
}

.elementor-image-hotspot {
	position: relative;
	img {
		width: 100%;
		height: auto;
	}
	&__item {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		&.active {
			.elementor-image-hotspot {
				&__content,
				&__icon:before {
					opacity: 1;
					visibility: visible;
				}
			}
		}
	}
	&__content {
		position: absolute;
		bottom: 100%;
		left: 50%;
		width: 200px;
		font-size: 16px;
		line-height: 1.5;
		text-align: center;
		color: #FFFFFF;
		background: $main-color;
		padding: 12px;
		border-radius: 4px;
		z-index: 3;
		opacity: 0;
		visibility: hidden;
		-webkit-transform: translate(-50%, -14px);
		transform: translate(-50%, -14px);
		-webkit-transition: opacity .3s, visibility .3s;
		transition: opacity .3s, visibility .3s;
	}
	&__icon {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		font-size: 14px;
		color: #FFFFFF;
		background: $main-color;
		cursor: pointer;
		border-radius: 30px;
		animation: hotspotEffect 2s infinite;
		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: 12px;
			height: 12px;
			background: $main-color;
			opacity: 0;
			visibility: hidden;
			-webkit-transform: translate(-50%, -20px) rotate(45deg);
			transform: translate(-50%, -20px) rotate(45deg);
			-webkit-transition: opacity .3s, visibility .3s;
			transition: opacity .3s, visibility .3s;
		}
		svg {
			fill: #FFFFFF;
			width: 14px;
			height: auto;
		}
	}
}