.la-image-with-hotspots {
  position: relative;
  line-height: 0;
  &.no-img {
    background-color: #333;
    width: 75%;
    height: 400px;
  }
  img {
    max-width: none;
    width: 100%;
    margin-bottom: 0;
  }
  .la_hotspot_wrap{
    position: absolute;
    width: 30px;
    height: 30px;
    .nttip {
      position: relative;
      display: block;
      opacity: 0;
      cursor: default;
      background-color: #fff;
      padding: 23px;
      max-width: 250px;
      transition: opacity 0.3s;
      -webkit-transition: opacity 0.3s;
      color: #666666;
      pointer-events: none;
      @include border-radius(4px);
      h4,
      h3{
        margin-bottom: 4px;
      }
      &[data-tooltip-position="bottom"] {
        margin-top: 42px;
        margin-left: 6px;
        @include translate2d(-50%,0);
      }
      &[data-tooltip-position="top"] {
        margin-top: -20px;
        margin-left: 6px;
        @include translate2d(-50%,-100%);
      }
      &[data-tooltip-position="left"] {
        margin-left: -20px;
        margin-top: 6px;
        @include translate2d(-100%,-50%);
      }
      &[data-tooltip-position="right"] {
        margin-left: 42px;
        margin-top: 6px;
        @include translate2d(0,-50%);
      }
      &.force-top {
        margin-top: -20px;
        margin-left: 6px;
        @include translate2d(-50%,-100%);
      }
      &.force-left {
        margin-left: -20px;
        margin-top: 6px;
        @include translate2d(-100%,-50%);
      }
      &.force-right {
        margin-left: 42px !important;
        margin-top: 6px !important;
        @include translate2d(0,-50%);
      }
    }
  }
  &[data-tooltip-func="click"]{
    .la_hotspot_wrap{
      .nttip {
        @include single-transition(opacity, 0.2s);
      }
    }
  }
  &[data-tooltip_shadow="small_depth"]{
    .la_hotspot_wrap{
      .nttip {
        @include box-shadow(0px 1px 4px rgba(0, 0, 0, 0.15));
      }
    }
  }
  &[data-tooltip_shadow="medium_depth"]{
    .la_hotspot_wrap{
      .nttip {
        @include box-shadow(#{'0 20px 40px rgba(0, 0, 0, 0.16), 0 10px 25px rgba(0, 0, 0, 0.1)'});
      }
    }
  }
  &[data-tooltip_shadow="large_depth"]{
    .la_hotspot_wrap{
      .nttip {
        @include box-shadow(#{'0 30px 102px rgba(0, 0, 0, 0.33), 0 20px 51px rgba(0, 0, 0, 0.18)'});
      }
    }
  }
}

.nttip.empty-tip {
  display: none !important;
}

@media (min-width: $screen-sm-min) {
  .la-image-with-hotspots{
    &[data-tooltip-func="hover"]{
      .la_hotspot{
        &:hover{
          + .nttip {
            opacity: 1;
          }
          span {
            @include rotate(90deg);
          }
        }
      }
    }
    &[data-tooltip-func="click"]{
      .la_hotspot{
        &.open{
          span{
            @include rotate(45deg);
          }
        }
      }
    }
    &[data-animation="true"]{
      .la_hotspot_wrap{
        opacity: 0;
        @include translate2d(0,80px);
        &.animated-in {
          -webkit-animation: LaHotSpotBounceIn .8s ease-out forwards;
          animation: LaHotSpotBounceIn .8s ease-out forwards;
        }
      }
    }
    &[data-tooltip-func="always_show"]{
      .la_hotspot_wrap {
        .nttip {
          opacity: 1;
        }
      }
    }
  }
}

.la-image-with-hotspots{
  .nttip.open {
    opacity: 1 !important;
  }
  &[data-hotspot-icon="plus_sign"]{
    .la_hotspot{
      span {
        display: block;
        pointer-events: none;
        width: 22px;
        height: 22px;
        @include single-transition(transform, 0.3s);
        &:after {
          position: absolute;
          display: block;
          height: 10px;
          width: 2px;
          left: 10px;
          top: 6px;
          content: ' ';
          background-color: #fff;
        }
        &:before {
          position: absolute;
          display: block;
          height: 2px;
          width: 10px;
          left: 6px;
          top: 10px;
          content: ' ';
          background-color: #fff;
        }
      }
    }
    &[data-tooltip-func="click"]{
      .la_hotspot{
        span {
          @include single-transition(transform, 0.2s);
        }
      }
    }
  }
  .la_hotspot {
    height: 22px;
    width: 22px;
    border-radius: 100px;
    position: absolute;
    z-index: 100;
    cursor: pointer;
    line-height: 22px;
    text-align: center;
    color: #fff;
    font-size: 11px;
    display: block;
  }
  &[data-style="color_pulse"]{
    .la_hotspot {
      background-color: #27CFC3;
      &:before {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        content: '';
        width: 22px;
        height: 22px;
        margin: -11px auto auto -11px;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        border-radius: 50%;
        background-color: inherit;
        opacity: 1;
        z-index: -1;
        pointer-events: none;
      }
    }
  }
}


.la-image-with-hotspots[data-style="color_pulse"][data-hotspot-icon="numerical"] .la_hotspot.pulse:before,
.la-image-with-hotspots[data-style="color_pulse"][data-hotspot-icon="plus_sign"] .la_hotspot:before {
  -webkit-animation: pulsate 3s cubic-bezier(0.2, 1, 0.2, 1) infinite;
  animation: pulsate 3s cubic-bezier(0.2, 1, 0.2, 1) infinite;
}

@-webkit-keyframes pulsate {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

@keyframes pulsate {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

@keyframes LaHotSpotBounceIn {
  0% {
    transform: translateY(80px);
    opacity: 0;
  }
  33% {
    transform: translateY(-13px);
    opacity: 1;
  }
  66% {
    transform: translateY(4px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@-webkit-keyframes LaHotSpotBounceIn {
  0% {
    transform: translateY(80px);
    opacity: 0;
  }
  33% {
    transform: translateY(-13px);
    opacity: 1;
  }
  66% {
    transform: translateY(4px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@media (min-width: $screen-sm-min) {
  .la-image-with-hotspots{
    &[data-size="medium"]{
      .la_hotspot {
        height: 30px;
        width: 30px;
        line-height: 30px;
        font-size: 14px;
      }
      &[data-hotspot-icon="plus_sign"]{
        .la_hotspot {
          span {
            height: 30px;
            width: 30px;
            &:before {
              height: 2px;
              width: 12px;
              left: 9px;
              top: 14px;
            }
            &:after {
              height: 12px;
              width: 2px;
              left: 14px;
              top: 9px;
            }
          }
        }
      }
      .la_hotspot_wrap{
        .nttip{
          &[data-tooltip-position="bottom"] {
            margin-top: 60px;
            margin-left: 15px;
          }
          &[data-tooltip-position="top"] {
            margin-top: -30px;
            margin-left: 15px;
          }
          &[data-tooltip-position="left"] {
            margin-left: -30px;
            margin-top: 15px;
          }
          &[data-tooltip-position="right"] {
            margin-left: 60px;
            margin-top: 15px;
          }
        }
      }
    }
  }
}