.e-hotspot {
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute
}

.e-hotspot--position-left.e-hotspot--position-top {
  transform:translate(calc(-1 * var(--hotspot-translate-x)),calc(-1 * var(--hotspot-translate-y)))
}
.e-hotspot--position-left.e-hotspot--position-bottom {
  transform:translate(calc(-1 * var(--hotspot-translate-x)),var(--hotspot-translate-y))
}
.e-hotspot--position-right.e-hotspot--position-top {
  transform:translate(var(--hotspot-translate-x),calc(-1 * var(--hotspot-translate-y)))
}
.e-hotspot--position-right.e-hotspot--position-bottom {
  transform:translate(var(--hotspot-translate-x),var(--hotspot-translate-y))
}
.e-hotspot--active {
  z-index:2
}
.e-hotspot__inner-circle,
.e-hotspot__outer-circle {
  content:"";
  display:inline-block;
  box-sizing:content-box;
  border-radius:50%
}
.e-hotspot__inner-circle {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background-color:var(--hotspot-color);
  padding:calc(var(--hotspot-size, 18px) / 2)
}
.e-hotspot__outer-circle {
  background-color:var(--hotspot-color);
  padding:var(--hotspot-padding,4px)
}
.e-hotspot--icon .e-hotspot__button,
.e-hotspot__outer-circle {
  width:var(--hotspot-size,18px);
  height:var(--hotspot-size,18px)
}
.e-hotspot--icon .e-hotspot__button {
  line-height:0;
  box-sizing:content-box;
  font-size:var(--hotspot-size,18px)
}
.e-hotspot__icon,
.e-hotspot__label {
  display:flex;
  justify-content:center;
  align-items:center
}
.e-hotspot__icon svg,
.e-hotspot__label svg {
  height:var(--hotspot-size,18px);
  width:auto
}
.e-hotspot__button {
  cursor:pointer;
  position:relative;
  display:grid;
  grid-auto-flow:column;
  justify-content:center;
  color:var(--hotspot-color);
  font-size:var(--hotspot-size,18px);
  min-width:var(--hotspot-button-width);
  min-height:var(--hotspot-button-height)
}
.e-hotspot__button:before {
  z-index:-2;
  content:"";
  width:100%;
  height:100%;
  left:-5px;
  top:-5px;
  position:absolute;
  padding:5px;
  box-sizing:content-box
}
.e-hotspot__button svg {
  fill:var(--hotspot-color)
}
.e-hotspot:not(.e-hotspot--circle) .e-hotspot__button {
  min-width:var(--hotspot-min-width);
  min-height:var(--hotspot-min-height);
  background-color:var(--hotspot-box-color);
  padding:var(--hotspot-padding,4px);
  border-radius:var(--hotspot-border-radius,3px)
}
.e-hotspot:not(.e-hotspot--circle) .e-hotspot__button:before {
  border-radius:var(--hotspot-border-radius,3px)
}
.e-hotspot:not(.e-hotspot--circle) .e-hotspot--expand:before {
  background-color:var(--hotspot-box-color)
}
.e-hotspot--overlay {
  opacity:.7;
  transition:opacity .2s
}
.e-hotspot--active .e-hotspot--overlay,
.e-hotspot--overlay:hover {
  opacity:1
}
.e-hotspot--soft-beat {
  animation:e-hotspot-soft-beat .7s infinite alternate;
  animation-timing-function:ease
}
.e-hotspot--expand .e-hotspot__outer-circle {
  animation:e-hotspot-expand 2s infinite
}
.e-hotspot:not(.e-hotspot--circle) .e-hotspot--expand:before {
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  z-index:-1;
  opacity:0;
  animation:e-hotspot-expand 2s infinite
}
.e-hotspot--sequenced {
  animation:fadeIn .3s;
  animation-iteration-count:1;
  animation-fill-mode:both
}
.e-hotspot__direction-mask {
  overflow:hidden;
  position:absolute;
  pointer-events:none;
}
.e-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);
  min-width:var(--tooltip-min-width);
  padding:var(--tooltip-padding,8px);
  border-radius:var(--tooltip-border-radius);
  background-color:var(--tooltip-color)
}
.e-hotspot__tooltip p:last-of-type {
  margin-bottom:0
}
.e-hotspot__direction-mask .e-hotspot__tooltip {
  box-shadow:none!important;
  position:static
}
.e-hotspot--active .e-hotspot__tooltip {
  pointer-events:visible
}
.e-hotspot--fade-in-out {
  opacity:0
}
.e-hotspot--active .e-hotspot--fade-in-out {
  opacity:1
}
.e-hotspot--fade-grow {
  opacity:0;
  transform:scale(0)
}
.e-hotspot--active .e-hotspot--fade-grow {
  opacity:1;
  transform:scale(1)
}
.e-hotspot--override-tooltip-animation-from-top,
.e-hotspot--tooltip-animation-from-top {
  transform:translateY(calc(-100% - 1px))
}
.e-hotspot--override-tooltip-animation-from-left,
.e-hotspot--tooltip-animation-from-left {
  transform:translate(calc(-100% - 1px))
}
.e-hotspot--override-tooltip-animation-from-right,
.e-hotspot--tooltip-animation-from-right {
  transform:translate(calc(100% + 1px))
}
.e-hotspot--override-tooltip-animation-from-bottom,
.e-hotspot--tooltip-animation-from-bottom {
  transform:translateY(calc(100% + 1px))
}
.e-hotspot--fade-direction {
  opacity:0
}
.e-hotspot--active .e-hotspot--fade-direction,
.e-hotspot--active .e-hotspot--slide-direction {
  transform:translate(0) scale(1);
  opacity:1
}
.e-hotspot--show-tooltip {
  transition:none;
  opacity:1;
  pointer-events:visible;
  transform:translate(0)
}

/*custom style*/
.dp-hotspot .e-hotspot__direction-mask .e-hotspot--slide-direction{
    visibility: hidden;
}
.dp-hotspot:hover {
  z-index: 100;
}
.dp-hotspot:hover .e-hotspot__direction-mask .e-hotspot--slide-direction{
  transform: translate(0) scale(1);
  opacity: 1;
  visibility: visible;
}

.dp-hotspot:hover .e-hotspot__direction-mask,
.dp-hotspot .e-hotspot__tooltip{
    pointer-events: inherit;
	white-space: normal !important;
}

.dp-hotspot .dp-thumbnail a{
    display: block;
}
.dp-hotspot .dp-thumbnail img{
    width: 240px;
    height: 130px;
    object-fit: cover;
}

.dp-hotspot .dp-title-wrapper{
    text-align: center;
    padding: 15px 10px;
}
.dp-hotspot .dp-title-wrapper h2{
    color: #1F1F1D;
    font-family: Manrope;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.dp-hotspot .dp-title-wrapper h2 a{
    color: #1F1F1D;
}

.dp-hotspot .dp-title-wrapper span{
    color: #129B5F;
    font-family: Manrope;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
}

.dp-hotspot .e-hotspot__direction-mask{
    padding-bottom: 30px;
}
.dp-hotspot .e-hotspot__direction-mask .e-hotspot__tooltip {
    background-color: #fff;
    padding: 0;
    min-width: auto;
    width: 240px;
}
.dp-hotspot .e-hotspot__direction-mask .e-hotspot__tooltip::after{
    content: "";
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 10px solid #fff;
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
}
.dp-hotspot .e-hotspot__direction-mask {
    bottom: 20px;
}

.dp-hotspot .e-hotspot__button svg {
    fill: transparent;
    width: 20px;
    margin-top: 8px;
}

.dp-hotspot .e-hotspot__icon span{
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    background-color: #fff;
    display: block;
    border-radius: 50%;
    transition: all 400ms;
}

.dp-hotspot:hover .e-hotspot__icon span{
    transform: scale(1.5);
}



@media(max-width: 950px){
    .dp-hotspot .dp-thumbnail{
        display: none;
    }
    .dp-hotspot .e-hotspot__direction-mask h2 {
      font-size: 20px;
    }
}