/*
Theme Name:  Salient
Description: Styles for the "Image with Hotspots" page builder element.
*/

.nectar_image_with_hotspots.no-img{
   background-color:#333;
    width:75%;
    height:400px
}
.row .col .nectar_image_with_hotspots img:not([srcset]) {
    max-width: 100%;
}
.row .nectar_image_with_hotspots img{
   max-width:none;
    width:100%;
    margin-bottom:0
}
.nectar_image_with_hotspots{
   position:relative;
    line-height:0
}
.nectar_image_with_hotspots .nectar_hotspot_wrap{
   position:absolute;
   width:30px;
   height:30px
}
@media only screen and (min-width: 690px) {
  .nectar_image_with_hotspots[data-tooltip-func="click"] .nectar_hotspot_wrap {
    pointer-events: none;
  }
  .nectar_image_with_hotspots[data-tooltip-func="click"] .nectar_hotspot {
    pointer-events: all;
  }
}
.nectar_image_with_hotspots .nectar_hotspot_wrap .nttip{
   position:relative;
    display:block;
    opacity:0;
    z-index:900;
    cursor:default;
    background-color:#fff;
    padding:23px;
    max-width:250px;
    transition:opacity 0.3s;
    -webkit-transition:opacity 0.3s;
    line-height:22px;
    font-size:14px;
    color:#666;
    border-radius:10px;
    pointer-events:none
}
.nectar_image_with_hotspots[data-tooltip-func="click"] .nectar_hotspot_wrap .open.nttip {
    pointer-events: auto;
    cursor: auto;
}
.nectar_image_with_hotspots[data-tooltip-func="click"] .nectar_hotspot_wrap .nttip{
   transition:opacity 0.2s;
    -webkit-transition:opacity 0.2s
}
.nectar_image_with_hotspots[data-tooltip_shadow="small_depth"] .nectar_hotspot_wrap .nttip{
   box-shadow:0px 1px 4px rgba(0,0,0,0.15)
}
.nectar_image_with_hotspots[data-tooltip_shadow="medium_depth"] .nectar_hotspot_wrap .nttip{
   box-shadow:0 20px 40px rgba(0,0,0,0.16),0 10px 25px rgba(0,0,0,0.1)
}
.nectar_image_with_hotspots[data-tooltip_shadow="large_depth"] .nectar_hotspot_wrap .nttip{
   box-shadow:0 30px 102px rgba(0,0,0,0.33),0 20px 51px rgba(0,0,0,0.18)
}
.nectar_image_with_hotspots .nectar_hotspot_wrap .nttip h4, 
.nectar_image_with_hotspots .nectar_hotspot_wrap .nttip h3{
   margin-bottom:4px
}
.nectar_image_with_hotspots .nectar_hotspot_wrap .nttip[data-tooltip-position="bottom"]{
    margin-top:42px;
    margin-left:6px;
    -ms-transform:translateX(-50%);
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%)
}
.nectar_image_with_hotspots .nectar_hotspot_wrap .nttip[data-tooltip-position="top"]{
    margin-top:-20px;
    margin-left:6px;
    -ms-transform:translateX(-50%) translateY(-100%);
    transform:translateX(-50%) translateY(-100%);
    -webkit-transform:translateX(-50%) translateY(-100%)
}
body .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip[data-tooltip-position].force-top{
    margin-top:-20px;
    margin-left:6px;
    -ms-transform:translateX(-50%) translateY(-100%);
    transform:translateX(-50%) translateY(-100%);
    -webkit-transform:translateX(-50%) translateY(-100%)
}
.nectar_image_with_hotspots .nectar_hotspot_wrap .nttip[data-tooltip-position="left"]{
    margin-left:-20px;
    margin-top:6px;
    -ms-transform:translateX(-100%) translateY(-50%);
    transform:translateX(-100%) translateY(-50%);
    -webkit-transform:translateX(-100%) translateY(-50%)
}
body .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip[data-tooltip-position].force-left{
    margin-left:-20px;
    margin-top:6px;
    -ms-transform:translateX(-100%) translateY(-50%);
    transform:translateX(-100%) translateY(-50%);
    -webkit-transform:translateX(-100%) translateY(-50%)
}
.nectar_image_with_hotspots .nectar_hotspot_wrap .nttip[data-tooltip-position="right"]{
    margin-left:42px;
    margin-top:6px;
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%)
}
body .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip[data-tooltip-position].force-right {
    margin-left:42px;
    margin-top:6px;
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%)
}
.nttip.empty-tip{
   display:none!important
}


@media only screen and (min-width:690px){
   .nectar_image_with_hotspots[data-tooltip-func="hover"] .nectar_hotspot:hover+.nttip{
       opacity:1
   }
    .nectar_image_with_hotspots[data-tooltip-func="hover"] .nectar_hotspot:hover span{
       transform:rotate(90deg);
        -webkit-transform:rotate(90deg)
   }
    .nectar_image_with_hotspots[data-tooltip-func="click"] .nectar_hotspot.open span{
       transform:rotate(45deg);
        -webkit-transform:rotate(45deg)
   }
    .nectar_image_with_hotspots[data-animation="true"] .nectar_hotspot_wrap{
       opacity:0;
        transform:translateY(80px);
        -webkit-transform:translateY(80px)
   }
    .nectar_image_with_hotspots[data-animation="true"] .nectar_hotspot_wrap.animated-in{
       -webkit-animation:nectarBounceIn .8s ease-out forwards;
        animation:nectarBounceIn .8s ease-out forwards
   }
    .nectar_image_with_hotspots[data-tooltip-func="always_show"] .nectar_hotspot_wrap .nttip{
       opacity:1;
       width: 250px!important;
   }
}
.nectar_image_with_hotspots .nttip.open{
   opacity:1!important
}
.nectar_image_with_hotspots[data-hotspot-icon="plus_sign"] .nectar_hotspot span{
   display:block;
    pointer-events:none;
    transition:transform 0.3s;
    -webkit-transition:-webkit-transform 0.3s;
    width:22px;
    height:22px
}
.nectar_image_with_hotspots[data-hotspot-icon="plus_sign"][data-tooltip-func="click"] .nectar_hotspot span{
   transition:transform 0.2s;
    -webkit-transition:-webkit-transform 0.2s
}
.nectar_image_with_hotspots[data-hotspot-icon="plus_sign"] .nectar_hotspot span:before{
   position:absolute;
    display:block;
    height:2px;
    width:10px;
    left:6px;
    top:10px;
    content:' ';
    background-color:#fff
}
.nectar_image_with_hotspots[data-hotspot-icon="plus_sign"] .nectar_hotspot span:after{
   position:absolute;
    display:block;
    height:10px;
    width:2px;
    left:10px;
    top:6px;
    content:' ';
    background-color:#fff
}
.nectar_image_with_hotspots .nectar_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
}

.nectar_image_with_hotspots[data-stlye="color_pulse"] .nectar_hotspot: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
}
.nectar_image_with_hotspots[data-stlye="color_pulse"][data-hotspot-icon="numerical"] .nectar_hotspot.pulse:before, 
.nectar_image_with_hotspots[data-stlye="color_pulse"][data-hotspot-icon="plus_sign"] .nectar_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
}

@media only screen and (min-width:690px){
    .nectar_image_with_hotspots[data-size="medium"] .nectar_hotspot{
       height:30px;
        width:30px;
        line-height:30px;
        font-size:14px
   }
    .nectar_image_with_hotspots[data-size="medium"][data-hotspot-icon="plus_sign"] .nectar_hotspot span{
       height:30px;
        width:30px
   }
    .nectar_image_with_hotspots[data-size="medium"][data-hotspot-icon="plus_sign"] .nectar_hotspot span:before{
        height:2px;
        width:12px;
        left:9px;
        top:14px
   }
    .nectar_image_with_hotspots[data-size="medium"][data-hotspot-icon="plus_sign"] .nectar_hotspot span:after{
        height:12px;
        width:2px;
        left:14px;
        top:9px
   }
    .nectar_image_with_hotspots[data-size="medium"] .nectar_hotspot_wrap .nttip[data-tooltip-position="bottom"]{
        margin-top:60px;
        margin-left:15px
   }
    .nectar_image_with_hotspots[data-size="medium"] .nectar_hotspot_wrap .nttip[data-tooltip-position="top"]{
        margin-top:-30px;
        margin-left:15px
   }
    .nectar_image_with_hotspots[data-size="medium"] .nectar_hotspot_wrap .nttip[data-tooltip-position="left"]{
        margin-left:-30px;
        margin-top:15px
   }
    .nectar_image_with_hotspots[data-size="medium"] .nectar_hotspot_wrap .nttip[data-tooltip-position="right"]{
        margin-left:60px;
        margin-top:15px
   }
}

@media only screen and (max-width : 690px) {
    body .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip {
        position: fixed!important;
        left: 0!important;
        top: 0!important;
        width: 100%!important;
        max-width: none!important;
        margin: 0!important;
        height: 100%;
        box-shadow: none!important;
        border-radius: 0;
        text-align: center;
        transform: none!important;
        -webkit-transform: none!important;
        z-index: 999;
   }
    .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip .inner {
        transform: translateY(-50%) translateX(-50%) scale(0.8);
        -webkit-transform: translateY(-50%) translateX(-50%) scale(0.8);
        -webkit-transition: all 0.2s ease-in-out!important;
        transition: all 0.2s ease-in-out!important;
        top: 50%;
        left: 50%;
        position: absolute;
        width: 60%;
        text-align: center;
   }
    .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip.open .inner {
        transform: translateY(-50%) translateX(-50%) scale(1);
        -webkit-transform: translateY(-50%) translateX(-50%) scale(1);
   }
    .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip.open {
        pointer-events: auto!important;
   }
    .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip .tipclose {
        position: absolute;
        top: -50px;
        left: 50%;
        margin-left: -11px;
        height: 22px;
        width: 22px;
        line-height: 22px;
        border: 2px solid #000;
        border-radius: 100px;
   }
    .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip .tipclose span {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        display: block;
        height: 18px;
        width: 18px;
        transform-origin: center;
   }
    .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip .tipclose span:before {
        position: absolute;
        display: block;
        height: 2px;
        width: 10px;
        left: 4px;
        top: 8px;
        content: ' ';
   }
    .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip .tipclose span:after {
        position: absolute;
        display: block;
        height: 10px;
        width: 2px;
        left: 8px;
        top: 4px;
        content: ' ';
   }
}