/**
    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: -webkit-box; display: -ms-flexbox; display: flex;
        -webkit-box-align: center; align-items: center; -ms-flex-align: center; -ms-flex-flow: row nowrap; 
        flex-flow: row nowrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-box-pack: center; 
        -ms-flex-pack: center; justify-content: center; border-radius: var(--wdtRadius_Zero); padding: 10px; 
        -webkit-transition: var(--wdt-Ad-Transition); transition: var(--wdt-Ad-Transition); 
        -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; }

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

    .tippy-content { padding: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem) 20px;border-radius: var(--wdtRadius_3X); background-color: var(--wdtPrimaryColor);}

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

    .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);   font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);/* 14 - 16 */ }

    .wdt-hotspot-holder .tippy-box .tippy-arrow { color: var(--wdtBodyBGColor); }
    [data-tippy-root] {
  z-index: 0 !important;
  
}


/* List */
.wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-list{display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.625rem, -0.8036rem + 2.2321vw, 1.875rem);/* 10 - 30 */ margin: 40px 0 0; 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-holder.wdt-display-mode-list .wdt-hotspot-list-item .wdt-hotspot-item-trigger{
    padding: clamp(1.25rem, 0.7rem + 2.75vw, 4rem);/* 20 - 64 */
    margin: 0;
    border-radius: 0;
    background-color: rgb(var(--wdtHeadAltColorRgb), 0.9);
    transition: var(--wdtAltTransition);
    width: 100%;
    font-family: var(--wdtFontTypo_Alt);
    font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);/* 18 - 24 */
}
.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: rgb(var(--wdtHeadAltColorRgb), 0.5);}
.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);}

.wdt-hotspot-holder.wdt-display-mode-list div[id*="tippy-"] {
    transform: unset !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
}
.wdt-hotspot-holder.wdt-display-mode-list > img{min-height: 300px; object-fit: cover; object-position: top;}
.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);}
}

@media(max-width:479px){
    .wdt-hotspot-holder.wdt-display-mode-list .wdt-hotspot-list{ grid-template-columns: repeat(2, 1fr);}
}



/* ----------------
Toggle Mode
---------------- */

.wdt-hotspot-holder.wdt-display-mode-list > .wdt-hotspot-list-wrapper.wdt-hotspot-dropdown-toggle {
    position: relative;
    height: calc(5.1em + 20px);
    margin-top: 60px;
}

.wdt-hotspot-holder.wdt-display-mode-list > .wdt-hotspot-list-wrapper.wdt-hotspot-dropdown-toggle > .wdt-hotspot-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    
    margin: 0;
    width: 100%;
    z-index: 99;

    position: absolute;
    top: 0;
    visibility: hidden;

    background: var(--wdtTertiaryColor);
    padding: 10px;
    border-radius: var(--wdtRadius_2X);
    -webkit-border-radius: var(--wdtRadius_2X);

    transition: var(--wdtAltTransition);
    -webkit-transition: var(--wdtAltTransition);
}

.wdt-hotspot-holder.wdt-display-mode-list > .wdt-hotspot-list-wrapper.wdt-hotspot-dropdown-toggle > .wdt-hotspot-list > .wdt-hotspot-list-item {
    visibility: hidden;
    order: 1;

    transition: var(--wdtAltTransition);
    -webkit-transition: var(--wdtAltTransition);
}

.wdt-hotspot-holder.wdt-display-mode-list > .wdt-hotspot-list-wrapper.wdt-hotspot-dropdown-toggle > .wdt-hotspot-list.wdt-open,
.wdt-hotspot-holder.wdt-display-mode-list > .wdt-hotspot-list-wrapper.wdt-hotspot-dropdown-toggle > .wdt-hotspot-list.wdt-open > .wdt-hotspot-list-item,
.wdt-hotspot-holder.wdt-display-mode-list > .wdt-hotspot-list-wrapper.wdt-hotspot-dropdown-toggle > .wdt-hotspot-list > .wdt-hotspot-list-item.wdt-active { visibility: visible; }

.wdt-hotspot-holder.wdt-display-mode-list > .wdt-hotspot-list-wrapper.wdt-hotspot-dropdown-toggle > .wdt-hotspot-list > .wdt-hotspot-list-item.wdt-active { order: 0; }
@media(max-width:767px){
    .wdt-hotspot-holder.wdt-display-mode-list > .wdt-hotspot-list-wrapper.wdt-hotspot-dropdown-toggle{ margin-top: 0; margin-bottom: 40px;}
}

/* arrow */
.wdt-hotspot-holder.wdt-display-mode-list > .wdt-hotspot-list-wrapper.wdt-hotspot-dropdown-toggle > .wdt-hotspot-list::before {
    content: "";
    position: absolute;
    right: 44px;
    top: 44px;

    visibility: visible;
    z-index: 1;
    pointer-events: none;

    border-style: solid;
    border-color: var(--wdtAccentTxtColor);

    height: 10px;
    width: 10px;

    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.wdt-hotspot-holder.wdt-display-mode-list > .wdt-hotspot-list-wrapper.wdt-hotspot-dropdown-toggle > .wdt-hotspot-list:not(.wdt-open)::before {
    border-width: 0 0 2px 2px;
}

.wdt-hotspot-holder.wdt-display-mode-list > .wdt-hotspot-list-wrapper.wdt-hotspot-dropdown-toggle > .wdt-hotspot-list.wdt-open::before {
    border-width: 2px 2px 0 0;
    top: 48px;
}