/**
    Hotspot trigger animations
*/


/* Animations */

    @-webkit-keyframes wdt-soft-beat {
        from { -webkit-transform: scale(1); transform: scale(1); }
        to { -webkit-transform: scale(1.1); transform: scale(1.1); }
    }

    @keyframes wdt-soft-beat {
        from { -webkit-transform: scale(1); transform: scale(1); }
        to { -webkit-transform: scale(1.1); transform: scale(1.1); }
    }

    @-webkit-keyframes wdt-expand {
        0% { -webkit-transform: scale(.5); transform: scale(.5); opacity: 1; }
        to { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; }
    }

    @keyframes wdt-expand {
        0% { -webkit-transform: scale(.5); transform: scale(.5); opacity: 1; }
        to { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; }
    }

    @keyframes ripple {
        0% { transform: scale(1); opacity: .8; }
        45% { transform: scale(1.75); opacity: 0; border-width: 10; }
    }

/* Soft Beat */

    .wdt-hotspot-soft-beat { -webkit-animation: wdt-soft-beat .7s infinite alternate; animation: wdt-soft-beat .7s infinite alternate; 
        -webkit-animation-timing-function: ease; animation-timing-function: ease; }

/* Expand */

    .wdt-hotspot-expand:before { -webkit-animation: wdt-expand 2s infinite; animation: wdt-expand 2s infinite; }
    .wdt-hotspot-expand:before { position: absolute; z-index: -1; width: 100%; height: 100%; 
        content: ''; opacity: 0; border-radius: inherit; background-color: inherit; }

/* Overlay */

    .wdt-hotspot-overlay { -webkit-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s; opacity: .7; }
    .wdt-hotspot-item-active .wdt-hotspot-overlay { opacity: 1; }

/* Ripple */

    .wdt-hotspot-ripple:before { -webkit-animation: ripple 3s ease-out infinite; animation: ripple 3s ease-out infinite; }
    .wdt-hotspot-ripple:before { position: absolute; z-index: -1; width: 100%; height: 100%; 
        content: ''; opacity: 0; border-width: 2px; border-style: solid; border-color: inherit; border-radius: inherit; }

    .wdt-hotspot-item-active .wdt-hotspot-item-trigger.wdt-hotspot-ripple:before { -webkit-animation-play-state: paused; animation-play-state: paused; }

/**
    Tooltip animations
*/

/* Scale */

    .tippy-box[data-animation=scale][data-placement*=top] { transform-origin: bottom; }
    .tippy-box[data-animation=scale][data-placement*=bottom] { transform-origin: top; }
    .tippy-box[data-animation=scale][data-placement*=left] { transform-origin: right; }
    .tippy-box[data-animation=scale][data-placement*=right] { transform-origin: left; }
    .tippy-box[data-animation=scale][data-state=hidden] { transform: scale(.5); opacity: 0; }

/* Perspective */

    .tippy-box[data-animation=perspective][data-placement^=top] { transform-origin: bottom; }
    .tippy-box[data-animation=perspective][data-placement^=top][data-state=visible] { transform: perspective(700px); }
    .tippy-box[data-animation=perspective][data-placement^=top][data-state=hidden] { transform: perspective(700px) translateY(8px) rotateX(60deg); }

    .tippy-box[data-animation=perspective][data-placement^=bottom] { transform-origin: top; }
    .tippy-box[data-animation=perspective][data-placement^=bottom][data-state=visible] { transform: perspective(700px); }
    .tippy-box[data-animation=perspective][data-placement^=bottom][data-state=hidden] { transform: perspective(700px) translateY(-8px) rotateX(-60deg); }

    .tippy-box[data-animation=perspective][data-placement^=left] { transform-origin: right; }
    .tippy-box[data-animation=perspective][data-placement^=left][data-state=visible] { transform: perspective(700px); }
    .tippy-box[data-animation=perspective][data-placement^=left][data-state=hidden] { transform: perspective(700px) translateX(8px) rotateY(-60deg); }

    .tippy-box[data-animation=perspective][data-placement^=right] { transform-origin: left; }
    .tippy-box[data-animation=perspective][data-placement^=right][data-state=visible] { transform: perspective(700px); }
    .tippy-box[data-animation=perspective][data-placement^=right][data-state=hidden] { transform: perspective(700px) translateX(-8px) rotateY(60deg); }

    .tippy-box[data-animation=perspective][data-state=hidden] { opacity: 0; }

/* Shift-away */

    .tippy-box[data-animation=shift-away][data-state=hidden] { opacity: 0; }
    .tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top] { transform: translateY(10px); }
    .tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom] { transform: translateY(-10px); }
    .tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left] { transform: translateX(10px); }
    .tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right] { transform: translateX(-10px); }

/* Shift-toward */

    .tippy-box[data-animation=shift-toward][data-state=hidden] { opacity: 0; }
    .tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=top] { transform: translateY(-10px); }
    .tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=bottom] { transform: translateY(10px); }
    .tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=left] { transform: translateX(-10px); }
    .tippy-box[data-animation=shift-toward][data-state=hidden][data-placement^=right] { transform: translateX(10px); }

/** 
    Others 
*/

    .wdt-hotspot-holder { position: relative; }
    .wdt-hotspot-holder .wdt-hotspot-repeater-item { position: absolute; }

    .wdt-hotspot-item-trigger { 
        position: relative; display: flex; align-items: center; flex-flow: row nowrap; -webkit-box-orient: horizontal; 
        -webkit-box-direction: normal; justify-content: center; border-radius: var(--wdtRadius_Zero); padding: 10px; 
        width: 36px; height: 36px; -webkit-transition: var(--wdt-Ad-Transition); transition: var(--wdt-Ad-Transition); 
        cursor: pointer; -webkit-transform: translateZ(0); transform: translateZ(0); 
        border-color: var(--wdt-elementor-color-primary); background-color: var(--wdt-elementor-color-primary); }

    .wdt-hotspot-item-active .wdt-hotspot-item-trigger { border-color: var(--wdtLinkHoverColor); background-color: var(--wdtLinkHoverColor); }

    .wdt-hotspot-item-trigger > *:not(:last-child) { margin: 0 10px 0 0; }

/** 
    Hotspot Item Default 
*/

    .wdt-hotspot-item-trigger div[class*="wdt-hotspot-item-"] { line-height: 1; display: inline-flex; align-items: center; 
        justify-content: center; -webkit-transition: var(--wdt-Ad-Transition); transition: var(--wdt-Ad-Transition); 
        color: var(--wdt-elementor-color-white); }

    .wdt-hotspot-item-active .wdt-hotspot-item-trigger .wdt-hotspot-item-default { -webkit-transform: rotate(45deg); transform: rotate(45deg); }

/** 
    Tool Tip 
*/

    .wdt-hotspot-item-tooltip { display: none; visibility: hidden; }

    .wdt-hotspot-holder .tippy-box { padding: 0; border-radius: var(--wdtRadius_Zero); background: transparent; }

    .wdt-hotspot-holder .tippy-box .tippy-content {padding: clamp(1.25rem, 1.0422rem + 0.694vw, 1.875rem);/* 20 - 30 */ border-radius: var(--wdtRadius_2X); background-color: var(--wdtSecondaryColor); }

    .wdt-hotspot-holder .tippy-box .tippy-content h5 { line-height: 1; margin: 0 0 15px; color: var(--wdt-elementor-color-primary);
        -webkit-transition: var(--wdt-Ad-Transition); transition: var(--wdt-Ad-Transition); }

    .wdt-hotspot-holder .tippy-box .tippy-content p { margin: 0; -webkit-transition: var(--wdt-Ad-Transition); 
        transition: var(--wdt-Ad-Transition); color: var(--wdtAccentTxtColor); line-height: var(--wdtLineHeight_Base);}

    .wdt-hotspot-holder .tippy-box .tippy-arrow { color: var(--wdtBodyBGColor); }

    @media screen and (min-width:1541px) {
        .wdt-hotspot-holder .tippy-box{
            max-width: 370px !important;
        }
    }

/* List */


.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-list{display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9375rem, 0.4181rem + 1.7349vw, 2.5rem);/* 15 - 40 */ margin:clamp(1.875rem, 0.4207rem + 4.8577vw, 6.25rem) 0 0;/* 30 - 100 */ padding: 0; list-style: none; }
.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-list-item{position: relative; padding: 0;border-radius: var(--wdtRadius_2X); overflow: hidden; width: 100%;}
.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-list-item .wdt-hotspot-image { position: absolute; top: 0;left: 0; height: 100%;width: 100%; z-index: -1;}

.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-list-item .wdt-hotspot-image * { display: block; width: 100%; height: 100%; }
.wdt-hotspot-list li:last-child:nth-child(4n - 3),
.wdt-hotspot-list li:last-child:nth-child(4n - 2),
.wdt-hotspot-list li:last-child:nth-child(4n - 1) {
    grid-column: 1 / -1;
    width: fit-content;
}

.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-list-item .wdt-hotspot-item-trigger{
    padding: clamp(1.5rem, 0.9183rem + 1.9431vw, 3.25rem) clamp(1.25rem, -0.0804rem + 2.7754vw, 3.25rem);/* 20 - 52 */
    margin: 0;
    border-radius: 0;
    background-color: rgb(var(--wdtHeadAltColorRgb), 0.9);
    width: 100%;
    font-family: var(--wdtFontTypo_Alt);
    font-size: clamp(0.875rem, 0.3348rem + 1.8043vw, 2.5rem);/* 14 - 40 */
    text-transform: capitalize;
    display: inline-flex;
    height: 100%;
    transition: var(--wdt-Ad-Transition);
}
.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-list-item:hover .wdt-hotspot-item-trigger,
.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-list-item.wdt-active .wdt-hotspot-item-trigger{background-color: var(--wdtPrimaryColor);}
.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-list-item .wdt-hotspot -image span img{height: 100%; width: 100%; object-fit: cover; object-position: center;}

.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-item-trigger {padding: 0; background-color: transparent;}
.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-item-trigger .wdt-content-icon span{ font-size: var(--wdtFontSize_H6); display: flex; height: 11px; width: 11px; background-color: var(--wdtPrimaryColor);border-radius: var(--wdtRadius_Full);}
.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-item-active .wdt-hotspot-item-trigger .wdt-content-icon span{  height: 100%; width: 100%; background-color: transparent;border-radius: none;}
.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-item-trigger .wdt-content-icon span svg{opacity: 0;}
.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-item-active .wdt-hotspot-item-trigger .wdt-content-icon span svg{opacity: 1;}
.wdt-hotspot-holder.wdt-display-mode-list > img{height: 100%; width: 100%; object-fit: contain; object-position: center;}
.wdt-hotspot-holder.wdt-display-mode-list div[id*="tippy-"] a{position: relative; color: var(--wdtAccentTxtColor); transition: var(--wdt-Ad-Transition);}
.wdt-hotspot-holder.wdt-display-mode-list div[id*="tippy-"] a:hover{ color: rgb(var(--wdtAccentTxtColorRgb),0.6);}
.wdt-hotspot-holder.wdt-display-mode-list div[id*="tippy-"] a::after{
    content: '';
    position: absolute;
    background-color: currentColor;
    height: 1px;
    width: 100%;
    bottom: -1px;
    left: 0;
    transition: var(--wdt-Ad-Transition);
}
.wdt-hotspot-holder.wdt-display-mode-list div[id*="tippy-"] a:hover::after{
    width: 0;
    right: 0;
    left: auto;
}
.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-items-holder > .wdt-hotspot-repeater-item {pointer-events: none;}
.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-item-active .wdt-hotspot-item-trigger .wdt-content-icon span svg{
  animation: hotspot-pulse 1.2s ease-in-out infinite;
  translate: 0;
}
@keyframes hotspot-pulse {
  0% {
    transform: translate(10px,-10px);
  }
  50% {
    transform: translate(0);
  }
  100% {
     transform: translate(10px,-10px);
  }
}


@media(max-width:767px){
    .wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-list{ grid-template-columns: repeat(3, 1fr);}
     .wdt-hotspot-holder .tippy-box .tippy-content p{font-size: calc(var(--wdtFontSize_Ext) - 2px);}
    .wdt-hotspot-holder .tippy-box .tippy-content{width: 250px;}
    .wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-item-trigger .wdt-content-icon span{height: 8px; width: 8px;}
    .wdt-hotspot-item-trigger,.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-item-active .wdt-hotspot-item-trigger .wdt-content-icon span{height: 20px; width: 20px;}
}

@media(max-width:479px){
    .wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-list{ grid-template-columns: repeat(2, 1fr);}
    .wdt-hotspot-holder .tippy-box .tippy-content{width: 250px; padding:10px; border-radius:10px;}
}