/* ==========================
    STYLING HOTSPOT
============================*/
.ihwt-hotspot-wrapper.ihwt-hotspot-wrapper .HotspotPlugin_Hotspot:not(.ihwtHotspotImageMarker):after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: var(--yellow) !important;
    border: 2px solid var(--white);
}

body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot:not(.ihwtHotspotImageMarker) {
    z-index: 2;
}

.ihwt-hotspot-wrapper .HotspotPlugin_Hotspot:not(.ihwtHotspotImageMarker):before {
    opacity: 0;
}

/* active */
.ihwt-hotspot-wrapper.ihwt-hotspot-wrapper .HotspotPlugin_Hotspot.active:not(.ihwtHotspotImageMarker):after {
    background: var(--blue-550) !important;
}

.ihwt-hotspot-wrapper .HotspotPlugin_Hotspot:after {
    content: ''; 
}

.content-side-floor {
    display: none;
}

.content-side-floor.active {
    display: block;
} 

.row-layout-hotspot .ihwt-hotspot-wrapper:before {
    position: absolute;
    content: '';
    background: var(--pattern-square-dots) center/contain no-repeat;
}

.ihwt-hotspot-wrapper-wrapper,
.vc_row.row-layout-hotspot>.wpb_column:nth-child(2)>.vc_column-inner>.wpb_wrapper {
    position: relative;
}

.row-layout-hotspot .image-absolute-hotspot {
    position: absolute;
    top: 36px;
    left: -44px;
}

.row-layout-hotspot .btn-action-wrapper {
    position: absolute;
}

.row-layout-hotspot .btn-action-wrapper button {
    padding: 0;
    font-size: 0;
    width: 15px;
    height: 15px;
}

.row-layout-hotspot .btn-action-wrapper button {
    background: var(--icon-pattern-arrow-blue) center/contain no-repeat;
}

.row-layout-hotspot .btn-action-wrapper button.prev-btn {
    -webkit-transform: scale(-1);
       -moz-transform: scale(-1);
        -ms-transform: scale(-1);
         -o-transform: scale(-1);
            transform: scale(-1);
}

.row-layout-hotspot .btn-action-wrapper .prev-btn.disabled {
    opacity: .3;
}

.row-layout-hotspot .content-side-floor h3 {
    margin-bottom: 4px;
}

body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot > div.hidden {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(-50%) scale(.85);
  -moz-transform: translateX(-50%) scale(.85);
  -o-transform: translateX(-50%) scale(.85);
  -ms-transform: translateX(-50%) scale(.85);
      transform: translateX(-50%) scale(.85);
}

body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot:not(.ihwtHotspotImageMarker)>div {
  margin: 0;
  padding: 0;
  overflow: visible;
}

body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot > div {
  font-size: 16px;
  display: block;
  position: absolute;
  top: -webkit-calc(100% - 17px);
  top: -moz-calc(100% - 17px);
  top: calc(100% - 17px);
  left: 50%;
  margin-top: 10px;
  padding: 25px 20px;
  overflow: auto;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
  -moz-transform: translateX(-50%) scale(1);
  -o-transform: translateX(-50%) scale(1);
  -webkit-transform: translateX(-50%) scale(1);
      -ms-transform: translateX(-50%) scale(1);
          transform: translateX(-50%) scale(1);
  -webkit-transition: none;
  -o-transition: none;
  -moz-transition: none;
  transition: none;
  z-index: 3;
  background-color: var(--transparent);
}

body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot > div > .Hotspot_Title {
   color: var(--white);
   font-family: var(--fontfamily-sans);
   font-weight: 400;
}

body .ihwt-hotspot-wrapper .ihwt-action-click .HotspotPlugin_Hotspot > div > .close-item {
    display: none;
}


body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot > div > .Hotspot_Title + .Hotspot_Message {
  margin: 0;
  height: 0;
  width: 0;
  display: none;
}

/* =====================================
        STYLING RESPONSIVE
=======================================*/
@media all and (min-width: 601px) {
    body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot.active:not(.ihwtHotspotImageMarker) {
        width: 36px;
        height: 36px;
    }
    
    body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot.active > div > .Hotspot_Title {
        font-size: var(--text-xl);
    }
}

@media all and (min-width: 601px) and (max-width: 900px) {
    body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot > div > .Hotspot_Title {
        font-size: var(--text-sm);
        margin-top: 3px;
    }
   
    body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot.active > div > .Hotspot_Title {
        margin-top: -7.5px;
    }
}


@media all and (min-width: 901px) {
    body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot:not(.ihwtHotspotImageMarker) {
        width: 29px;
        height: 29px;
    }

    body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot.active:not(.ihwtHotspotImageMarker) {
        width: 47px;
        height: 47px;
    }

    .vc_row.row-layout-hotspot>.wpb_column:nth-child(1)>.vc_column-inner>.wpb_wrapper {
        max-width: 427px;
    }

    .vc_row.row-layout-hotspot .ihwt-hotspot-wrapper {
        max-width: 590px;
        margin-left: auto;
    }

    .row-layout-hotspot .btn-action-wrapper {
        right: 55px;
        bottom: 78px;
    }

    .row-layout-hotspot .btn-action-wrapper button.prev-btn {
        margin-right: 15px;
    }
    
    body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot.active > div > .Hotspot_Title {
        margin-top: -12.5px;
    }

    .row-layout-hotspot .ihwt-hotspot-wrapper:before {
        bottom: 33px;
        left: -41px;
        width: 192px;
        height: 192px;
        opacity: .3;
    }

}

@media all and (max-width: 900px) {
    .vc_row.row-layout-hotspot {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: column-reverse;
           -moz-box-orient: vertical;
           -moz-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }

    .vc_row.row-layout-hotspot>.wpb_column:nth-child(2)>.vc_column-inner {
        padding: 0;
    }

    .vc_row.row-layout-hotspot>.wpb_column:nth-child(2)>.vc_column-inner>.wpb_wrapper {
        margin: 0 -8px;
    }

    .row-layout-hotspot .ihwt-hotspot-wrapper {
        overflow: hidden;
    }

    .row-layout-hotspot .ihwt-hotspot-image-cover {
        margin: 0 -15px;
    }

    .row-layout-hotspot .btn-action-wrapper {
        right: 22px;
        bottom: 45px;
    }

    .row-layout-hotspot .image-absolute-hotspot {
        position: absolute;
        top: 97%;
        left: 25px;
        width: 113px;
        -webkit-transform: rotate(-152.842deg);
           -moz-transform: rotate(-152.842deg);
            -ms-transform: rotate(-152.842deg);
             -o-transform: rotate(-152.842deg);
                transform: rotate(-152.842deg);
    }

    .content-side-floor h3 {
        --text-2xl : var(--text-xl);
    }

    .content-side-floor p {
        font-size: var(--text-sm);
    }

    .row-layout-hotspot .btn-action-wrapper button.prev-btn {
        margin-right: 10px;
    }

    .content-side-floor {
        margin-bottom: 69px;
    }

    .row-layout-hotspot .ihwt-hotspot-wrapper:before {
        width: 142px;
        height: 96px;
        bottom: 38px;
        left: -63px;
        background-image: var(--pattern-square-dots-mobile);
        opacity: .5;
    }

}

@media all and (max-width: 600px) {
    body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot:not(.ihwtHotspotImageMarker) {
        width: 18px;
        height: 18px;
    }

    body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot.active:not(.ihwtHotspotImageMarker) {
        width: 30px;
        height: 30px;
    }

    body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot > div > .Hotspot_Title {
        font-size: var(--text-xs);
        margin-top: 5.5px;
    }
    
    body .ihwt-hotspot-wrapper .HotspotPlugin_Hotspot.active > div > .Hotspot_Title {
        font-size: var(--text-lg);
        margin-top: -4px;
    }
}