.elementor-widget-sk-touchpoint:hover {
	z-index: 9
}

.elementor-widget-sk-touchpoint{
   display:inline;
    width:auto!important; 
}


.sk-touchpoint-wrapper {
	--ht-primary-color: #fff;
	--ht-secondary-color: #000;
	--ht-size: 40px;
	--pn-primary-color: #fff;
	--pn-secondary-color: #000;
	/* --pn-width: 270px; */

	--pn-width: auto;

	--pn-arrow-size: 6px;
	--pn-height: auto;
}

.sk-touchpoint-wrapper.sk-touchpoint-type--icon .sk-touchpoint {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: var(--ht-size);
	color: var(--ht-secondary-color);
	position: relative
}

.sk-touchpoint-wrapper.sk-touchpoint-type--icon .sk-touchpoint i {
	display: block;
	font-size: .25em;
	color: inherit;
	position: relative
}

.sk-touchpoint-wrapper.sk-touchpoint-type--icon .sk-touchpoint:before,
.sk-touchpoint-wrapper.sk-touchpoint-type--icon .sk-touchpoint:after {
	content: '';
	position: absolute;
	left: calc(50% - .5em);
	top: calc(50% - .5em);
	width: inherit;
	height: inherit;
	border-radius: inherit
}

.sk-touchpoint-wrapper.sk-touchpoint-type--icon .sk-touchpoint:before {
	background-color: var(--ht-primary-color);
	-webkit-transition: -webkit-transform 0.3s var(--easeOutCubic);
	transition: -webkit-transform 0.3s var(--easeOutCubic);
	transition: transform 0.3s var(--easeOutCubic);
	transition: transform 0.3s var(--easeOutCubic), -webkit-transform 0.3s var(--easeOutCubic)
}

.sk-touchpoint-wrapper.sk-touchpoint-type--icon .sk-touchpoint:after {
	-webkit-box-shadow: 0px 5px 10px var(--ht-primary-color);
	box-shadow: 0px 5px 10px var(--ht-primary-color);
	-webkit-transition: opacity 0.3s var(--easeOutCubic);
	transition: opacity 0.3s var(--easeOutCubic);
	opacity: .4
}

.sk-touchpoint-wrapper.sk-touchpoint-type--icon:hover .sk-touchpoint:before {
	-webkit-transform: scale(1.2);
	transform: scale(1.2)
}

.sk-touchpoint-wrapper.sk-touchpoint-type--icon:hover .sk-touchpoint:after {
	opacity: .6
}

.sk-touchpoint-wrapper.sk-touchpoint-type--image .sk-touchpoint {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: var(--ht-size);
	border-radius: 1em;
	position: relative
}

.sk-touchpointHelper { 

	position: absolute;
	left: 0;
	top: 0; right:0; bottom:0;
	
	border: none;
	
	/* border-radius: 100px; */
	
	-webkit-transition: 0.3s var(--easeOutCubic);
	transition: 0.3s var(--easeOutCubic);
	-webkit-transition-property: opacity, -webkit-transform;
	transition-property: opacity, -webkit-transform;
	transition-property: opacity, transform;
	transition-property: opacity, transform, -webkit-transform;
	opacity: 0.3;
	pointer-events: none
}

.premium-image-hotspots-anim .sk-touchpointHelper {

  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  pointer-events: none;
  -webkit-animation: sk-pulse 2s infinite;
          animation: sk-pulse 2s infinite;
    border: none;
    background: grey;
}


    
.sk-touchpoint-style--default:hover .sk-touchpointHelper {
	opacity: .6;
	-webkit-transform: scale(0.5);
	transform: scale(0.5)
}

.sk-touchpoint-panel {
	position: absolute;
	width: var(--pn-width);
	height: var(--pn-height);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: 0.5s var(--easeOutCubic);
	transition: 0.5s var(--easeOutCubic);
	-webkit-transition-property: opacity, visibility;
	transition-property: opacity, visibility;
	z-index:100;
}
.sk-touchpoint-panel .sk-touchpoint-panelInner{
	height: var(--pn-height);
}

@media (max-width: 767px) {
	.sk-touchpoint-panel {
		padding-top: 15px
	}
}

.sk-touchpoint-panel .sk-touchpoint-panelInner {
	color: var(--pn-secondary-color);
	padding: 25px;
	position: relative;
	background-color: var(--pn-primary-color);
	color: var(--pn-secondary-color);
	-webkit-transition: -webkit-box-shadow 0.3s var(--easeOutCubic);
	transition: -webkit-box-shadow 0.3s var(--easeOutCubic);
	transition: box-shadow 0.3s var(--easeOutCubic);
	transition: box-shadow 0.3s var(--easeOutCubic), -webkit-box-shadow 0.3s var(--easeOutCubic);
	-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	-webkit-transition: -webkit-transform 0.5s var(--easeOutCubic);
	transition: -webkit-transform 0.5s var(--easeOutCubic);
	transition: transform 0.5s var(--easeOutCubic);
	transition: transform 0.5s var(--easeOutCubic), -webkit-transform 0.5s var(--easeOutCubic);
	-webkit-transform: translateY(calc(var(--ht-size)/2));
	transform: translateY(calc(var(--ht-size)/2))
}

.sk-touchpoint-panel .sk-touchpoint-panelInner h1, .sk-touchpoint-panel .sk-touchpoint-panelInner h2, .sk-touchpoint-panel .sk-touchpoint-panelInner h3 {
	color: var(--pn-secondary-color);
}

.touchpoint--arrow .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
	content: '';
	border-width: var(--pn-arrow-size);
	border-style: solid;
	border-color: transparent;
	position: absolute
}

.sk-touchpoint-wrapper:hover .sk-touchpoint-panel, .sk-touchpoint-wrapper.opened_tooltip .sk-touchpoint-panel {
	opacity: 1;
	visibility: visible
}

.sk-touchpoint-wrapper:hover .sk-touchpoint-panel .sk-touchpoint-panelInner,
.sk-touchpoint-wrapper.opened_tooltip .sk-touchpoint-panel .sk-touchpoint-panelInner  {
	-webkit-transform: translateY(0px);
	transform: translateY(0px)
}


@media (min-width: 400px) {
	.sk-touchpoint-pos--right.sk-touchpoint-align--start .sk-touchpoint-panel {
		/*-webkit-transform: translateY(calc( -1 * ( var(--ht-size) /2)));
		transform: translateY(calc( -1 * ( var(--ht-size) /2)));*/
		top:0;
	}
	.sk-touchpoint-pos--right.sk-touchpoint-align--start .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		top: calc((var(--ht-size)/2) - var(--pn-arrow-size))
	}
	.sk-touchpoint-pos--right.sk-touchpoint-align--middle .sk-touchpoint-panel {
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%)
	}
	.sk-touchpoint-pos--right.sk-touchpoint-align--middle .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		top: calc(50% - var(--pn-arrow-size))
	}
	.sk-touchpoint-pos--right.sk-touchpoint-align--end .sk-touchpoint-panel {
		-webkit-transform: translateY(calc( -100% + (var(--ht-size)/2)));
		transform: translateY(calc( -100% + (var(--ht-size)/2)))
	}
	.sk-touchpoint-pos--right.sk-touchpoint-align--end .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		bottom: calc( (var(--ht-size)/2) - var(--pn-arrow-size))
	}
	.sk-touchpoint-pos--right .sk-touchpoint-panel {
		left: 100%;
		top: 50%;
		padding-left: 20px
	}
	.sk-touchpoint-pos--right .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		right: 100%;
		border-right-color: var(--pn-primary-color)
	}
}

@media (min-width: 400px) {
	.sk-touchpoint-pos--left.sk-touchpoint-align--start .sk-touchpoint-panel {
		-webkit-transform: translateY(calc( -1 * ( var(--ht-size) /2)));
		transform: translateY(calc( -1 * ( var(--ht-size) /2)))
	}
	.sk-touchpoint-pos--left.sk-touchpoint-align--start .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		top: calc((var(--ht-size)/2) - var(--pn-arrow-size))
	}
	.sk-touchpoint-pos--left.sk-touchpoint-align--middle .sk-touchpoint-panel {
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%)
	}
	.sk-touchpoint-pos--left.sk-touchpoint-align--middle .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		top: calc(50% - var(--pn-arrow-size))
	}
	.sk-touchpoint-pos--left.sk-touchpoint-align--end .sk-touchpoint-panel {
		-webkit-transform: translateY(calc( -100% + (var(--ht-size)/2)));
		transform: translateY(calc( -100% + (var(--ht-size)/2)))
	}
	.sk-touchpoint-pos--left.sk-touchpoint-align--end .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		bottom: calc( (var(--ht-size)/2) - var(--pn-arrow-size))
	}
	.sk-touchpoint-pos--left .sk-touchpoint-panel {
		right: 100%;
		/*top: 50%;*/
		top: 20px;
		padding-right: 20px
	}
	.sk-touchpoint-pos--left .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		left: 100%;
		border-left-color: var(--pn-primary-color)
	}
}

@media (min-width: 400px) {
	.sk-touchpoint-pos--top.sk-touchpoint-align--start .sk-touchpoint-panel {
		-webkit-transform: translateX(calc( -1 * ( var(--ht-size) /2)));
		transform: translateX(calc( -1 * ( var(--ht-size) /2)))
	}
	.sk-touchpoint-pos--top.sk-touchpoint-align--start .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		left: calc((var(--ht-size)/2) - var(--pn-arrow-size))
	}
	.sk-touchpoint-pos--top.sk-touchpoint-align--middle .sk-touchpoint-panel {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%)
	}
	.sk-touchpoint-pos--top.sk-touchpoint-align--middle .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		left: calc(50% - var(--pn-arrow-size))
	}
	.sk-touchpoint-pos--top.sk-touchpoint-align--end .sk-touchpoint-panel {
		-webkit-transform: translateX(calc( -100% + (var(--ht-size)/2)));
		transform: translateX(calc( -100% + (var(--ht-size)/2)))
	}
	.sk-touchpoint-pos--top.sk-touchpoint-align--end .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		right: calc( (var(--ht-size)/2) - var(--pn-arrow-size))
	}
	.sk-touchpoint-pos--top .sk-touchpoint-panel {
		bottom: 100%;
		left: 20px;
		padding-bottom: 20px
	}
	.sk-touchpoint-pos--top .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		top: 100%;
		border-top-color: var(--pn-primary-color)
	}
}

@media (min-width: 400px) {
	.sk-touchpoint-pos--bottom.sk-touchpoint-align--start .sk-touchpoint-panel {
		-webkit-transform: translateX(calc( -1 * ( var(--ht-size) /2)));
		transform: translateX(calc( -1 * ( var(--ht-size) /2)))
	}
	.sk-touchpoint-pos--bottom.sk-touchpoint-align--start .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		left: calc((var(--ht-size)/2) - var(--pn-arrow-size))
	}
	.sk-touchpoint-pos--bottom.sk-touchpoint-align--middle .sk-touchpoint-panel {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%)
	}
	.sk-touchpoint-pos--bottom.sk-touchpoint-align--middle .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		left: calc(50% - var(--pn-arrow-size))
	}
	.sk-touchpoint-pos--bottom.sk-touchpoint-align--end .sk-touchpoint-panel {
		-webkit-transform: translateX(calc( -100% + (var(--ht-size)/2)));
		transform: translateX(calc( -100% + (var(--ht-size)/2)))
	}
	.sk-touchpoint-pos--bottom.sk-touchpoint-align--end .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		right: calc( (var(--ht-size)/2) - var(--pn-arrow-size))
	}
	.sk-touchpoint-pos--bottom .sk-touchpoint-panel {
		top: 100%;
		/*left: 50%;*/
		left: 20px;
		padding-top: 20px
	}
	.sk-touchpoint-pos--bottom .sk-touchpoint-panel .sk-touchpoint-panelInner:before {
		bottom: 100%;
		border-bottom-color: var(--pn-primary-color)
	}
}

.sk-touchpoint-type--image img {
	width: 100%
}