/* =============================================================================
- Hotspot
============================================================================= */
.e-con-inner > .elementor-widget-gwel-hotspot {
	width: var(--container-widget-width);
	--flex-grow: var(--container-widget-flex-grow);
}

/*! pro-elements - v3.17.0 - 01-11-2023 */
 @keyframes gwel-hotspot-soft-beat{
	0%{
		transform:scale(1)
	}
	to{
		transform:scale(1.1)
	}
}
@keyframes gwel-hotspot-expand{
	0%{
		transform:scale(.5);
		opacity:1
	}
	to{
		transform:scale(1.5);
		opacity:0
	}
}

.gwel-hotspot-element {
	display:flex;
	justify-content:var(--background-align);
	.gwel-hotspot-inner {
		position: relative;
		width: var(--container-width);
		max-width: var(--container-max-width);
		height: var(--container-height);
		> img {
			display:block;
			width: var(--image-width,auto);
			height: var(--container-height);
			opacity: var(--opacity,1);
		}
	}
}
.gwel-hotspot {
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
}
.gwel-hotspot--position-left {
	&.gwel-hotspot--position-top {
		transform: translate(calc(-1 * var(--hotspot-translate-x)),calc(-1 * var(--hotspot-translate-y)));
	}
	&.gwel-hotspot--position-bottom {
		transform: translate(calc(-1 * var(--hotspot-translate-x)),var(--hotspot-translate-y));
	}
}
.gwel-hotspot--position-right {
	&.gwel-hotspot--position-top {
		transform: translate(var(--hotspot-translate-x),calc(-1 * var(--hotspot-translate-y)));
	}
	&.gwel-hotspot--position-bottom {
		transform: translate(var(--hotspot-translate-x),var(--hotspot-translate-y));
	}
}

.gwel-hotspot--active {
	z-index: 2;
}
.gwel-hotspot-inner-circle,
.gwel-hotspot-outer-circle {
	content: "";
	display: inline-block;
	box-sizing: content-box;
	border-radius: 50%;
}
.gwel-hotspot-inner-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: var(--hotspot--background-color);
	padding: calc(var(--hotspot-size, 18px) / 2);
}
.gwel-hotspot-outer-circle {
	background-color: var(--hotspot--background-color);
	padding: var(--hotspot-padding, 4px);
}
.gwel-hotspot--icon .gwel-hotspot-button,
.gwel-hotspot-outer-circle {
	width: var(--hotspot-size,18px);
	height: var(--hotspot-size,18px);
}
.gwel-hotspot--icon .gwel-hotspot-button {
	line-height: 0;
	box-sizing: content-box;
	font-size: var(--hotspot--icon-size,18px);
	color: var(--hotspot--icon-color,#fff);
}
.gwel-hotspot-icon,
.gwel-hotspot-label {
	display: flex;
	justify-content: center;
	align-items: center;
}
.gwel-hotspot-icon svg,
.gwel-hotspot-label svg {
	height: var(--hotspot--icon-size,18px);
	width: auto;
	fill: var(--hotspot--icon-color,#fff);
}
.gwel-hotspot-button {
	cursor: pointer;
	position: relative;
	display: grid;
	grid-auto-flow: column;
	justify-content: center;
	color: var(--hotspot--text-color);
	min-width: var(--hotspot-button-width);
	min-height: var(--hotspot-button-height);
	&:before {
		z-index: -2;
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		box-sizing: content-box;
	}
	svg,
	svg g {
		fill: var(--hotspot--icon-color,#fff);
	}
}

.gwel-hotspot {
	&:not(.gwel-hotspot--circle) {
		.gwel-hotspot-button {
			min-width: var(--hotspot-min-width);
			min-height: var(--hotspot-min-height);
			background-color: var(--hotspot--background-color);
			padding: var(--hotspot-padding,4px);
			border-radius: var(--hotspot-border-radius,3px);
			&:before {
				border-radius: var(--hotspot-border-radius, 3px);
			}
		}
		.gwel-hotspot--expand:before {
			background-color: var(--hotspot--background-color);
		}
	}
}

.gwel-hotspot--overlay {
	opacity: .7;
	transition: opacity .2s
}
.gwel-hotspot--active .gwel-hotspot--overlay,
.gwel-hotspot--overlay:hover {
	opacity: 1;
}
.gwel-hotspot--soft-beat {
	animation: gwel-hotspot-soft-beat .7s infinite alternate;
	animation-timing-function: ease;
}
.gwel-hotspot--expand .gwel-hotspot-outer-circle {
	animation: gwel-hotspot-expand 2s infinite;
}
.gwel-hotspot:not(.gwel-hotspot--circle) .gwel-hotspot--expand:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	opacity: 0;
	animation: gwel-hotspot-expand 2s infinite;
}
.gwel-hotspot--sequenced {
	animation: fadeIn .3s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}
.gwel-hotspot__direction-mask {
	overflow: hidden;
	position: absolute;
	pointer-events: none;
}
.gwel-hotspot-tooltip {
	white-space: var(--white-space,nowrap);
	transition-property: transform,opacity;
	transition-duration: var(--tooltip-transition-duration,.5s);
	transform-origin: center center;
	position: absolute;
	pointer-events: none;
	color: var(--tooltip-text-color,#fff);
	text-align: var(--tooltip-align);
	width: var(--tooltip-min-width);
	padding: var(--tooltip-padding,8px);
	border-radius: var(--tooltip-border-radius);
	background-color: var(--tooltip-color);
}
.gwel-hotspot-tooltip p:last-of-type {
	margin-bottom: 0;
}
.gwel-hotspot__direction-mask .gwel-hotspot-tooltip {
	box-shadow: none!important;
	position: static;
}
.gwel-hotspot--active .gwel-hotspot-tooltip {
	pointer-events: visible;
}
.gwel-hotspot--fade-in-out {
	opacity: 0;
}
.gwel-hotspot--active .gwel-hotspot--fade-in-out {
	opacity: 1;
}
.gwel-hotspot--fade-grow {
	opacity: 0;
	transform: scale(0);
}
.gwel-hotspot--active .gwel-hotspot--fade-grow {
	opacity: 1;
	transform: scale(1);
}
.gwel-hotspot--override-tooltip-animation-from-top,
.gwel-hotspot--tooltip-animation-from-top {
	transform: translateY(calc(-100% - 1px));
}
.gwel-hotspot--override-tooltip-animation-from-left,
.gwel-hotspot--tooltip-animation-from-left {
	transform: translate(calc(-100% - 1px));
}
.gwel-hotspot--override-tooltip-animation-from-right,
.gwel-hotspot--tooltip-animation-from-right {
	transform: translate(calc(100% + 1px));
}
.gwel-hotspot--override-tooltip-animation-from-bottom,
.gwel-hotspot--tooltip-animation-from-bottom {
	transform: translateY(calc(100% + 1px));
}
.gwel-hotspot--fade-direction {
	opacity: 0;
}
.gwel-hotspot--active .gwel-hotspot--fade-direction,
.gwel-hotspot--active .gwel-hotspot--slide-direction {
	transform: translate(0) scale(1);
	opacity: 1;
}
.gwel-hotspot--show-tooltip {
	transition: none;
	opacity: 1;
	pointer-events: visible;
	transform: translate(0);
}