.ds-image-hotspot > img {
    width: 100%;
    display: block;
}
.ds_image_hotspot  .ds-image-hotspot img {
  border-style: solid;
}
.ds-image-hotspot-on-top {
  z-index: 9999 !important;
  }
  .ds-image-hotspot-on-top-removing {
  z-index: 9990 !important;
  }
  .ds-image-hotspot-on-top header .et_builder_inner_content {
    z-index: 10000;
  }
@media all and (max-width: 767px){
    .ds-image-hotspot {
        position: relative;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .ds_image_hotspot_child .ds-tooltip-wrap.ds-tooltip-wrap {
        max-width: calc(100vw - 20px);
        position: fixed; 
        transform: translateY(-40%) translateX(-50%);
        margin: 0;
        left: 50%;
        bottom: auto;
    }
    [class^='ds-image-hotspot-zindex'],
    .ds-image-hotspot-on-top-removing,
    .ds-image-hotspot-on-top {
      filter: none !important; /* To make position:fixed working */
    }
}
/*
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

 
.fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
}
*/
@keyframes fadeInUpShortXCenter {
  from {
    opacity: 0;
    transform: translate3d(-50%, 10px, 0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
@-webkit-keyframes fadeInUpShortXCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 10px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(-50%);
  }
}


.ds-tooltip-position-top.fadeInUpShort,
.ds-tooltip-position-bottom.fadeInUpShort
{
  -webkit-animation-name: fadeInUpShortXCenter;
  animation-name: fadeInUpShortXCenter;
}


@keyframes fadeInDownShortXCenter {
  from {
    opacity: 0;
    transform: translate3d(-50%, -10px, 0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
  
@-webkit-keyframes fadeInDownShortXCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, -10px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(-50%);
  }
}

.ds-tooltip-position-top.fadeInDownShort,
.ds-tooltip-position-bottom.fadeInDownShort
 {
  animation-name: fadeInDownShortXCenter;
  -webkit-animation-name: fadeInDownShortXCenter;
}

@keyframes fadeInLeftShortXCenter {
  from {
    opacity: 0;
    transform: translate3d(calc(-10px - 50%), 0, 0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@-webkit-keyframes fadeInLeftShortXCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(calc(-10px - 50%), 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(-50%);
  }
}
.ds-tooltip-position-top.fadeInLeftShort,
.ds-tooltip-position-bottom.fadeInLeftShort
{
  animation-name: fadeInLeftShortXCenter;
  -webkit-animation-name: fadeInLeftShortXCenter;
}

@keyframes fadeInRightShortXCenter {
  from {
    opacity: 0;
    transform: translate3d(calc(10px - 50%), 0, 0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
@-webkit-keyframes fadeInRightShortXCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(calc(10px - 50%), 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateX(-50%);
  }
}
.ds-tooltip-position-top.fadeInRightShort,
.ds-tooltip-position-bottom.fadeInRightShort {
  animation-name: fadeInRightShortXCenter;
  -webkit-animation-name: fadeInRightShortXCenter;
}

@keyframes zoomInShortXCenter {
  from {
    opacity: 0;
    transform: translateX(-50%)  scale3d(.95, .95, .95);
  }

  50% {
    opacity: 1;
  }
}
@-webkit-keyframes zoomInShortXCenter {
  from {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale3d(.95, .95, .95);
  }

  50% {
    opacity: 1;
  }
}
.ds-tooltip-position-top.zoomInShort,
.ds-tooltip-position-bottom.zoomInShort {
  animation-name: zoomInShortXCenter;
  -webkit-animation-name: zoomInShortXCenter;
}


@keyframes fadeInUpShortYCenter {
  from {
    opacity: 0;
    transform: translate3d(0, calc(-50% + 10px), 0);
  }

  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}
@-webkit-keyframes fadeInUpShortYCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, calc(-50% + 10px), 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(-50%);
  }
}


.ds-tooltip-position-left.fadeInUpShort,
.ds-tooltip-position-right.fadeInUpShort
{
  -webkit-animation-name: fadeInUpShortYCenter;
  animation-name: fadeInUpShortYCenter;
}


@keyframes fadeInDownShortYCenter {
  from {
    opacity: 0;
    transform: translate3d(0, calc(-50% - 10px), 0);
  }

  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}
  
@-webkit-keyframes fadeInDownShortYCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, calc(-50% - 10px), 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(-50%);
  }
}

.ds-tooltip-position-left.fadeInDownShort,
.ds-tooltip-position-right.fadeInDownShort
 {
  animation-name: fadeInDownShortYCenter;
  -webkit-animation-name: fadeInDownShortYCenter;
}

@keyframes fadeInLeftShortYCenter {
  from {
    opacity: 0;
    transform: translate3d(-10px, -50%, 0);
  }

  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

@-webkit-keyframes fadeInLeftShortYCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10px, -50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(-50%);
  }
}
.ds-tooltip-position-left.fadeInLeftShort,
.ds-tooltip-position-right.fadeInLeftShort
{
  animation-name: fadeInLeftShortYCenter;
  -webkit-animation-name: fadeInLeftShortYCenter;
}

@keyframes fadeInRightShortYCenter {
  from {
    opacity: 0;
    transform: translate3d(10px, -50%, 0);
  }

  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}
@-webkit-keyframes fadeInRightShortYCenter {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10px, -50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(-50%);
  }
}
.ds-tooltip-position-left.fadeInRightShort,
.ds-tooltip-position-right.fadeInRightShort {
  animation-name: fadeInRightShortYCenter;
  -webkit-animation-name: fadeInRightShortYCenter;
}

@keyframes zoomInShortYCenter {
  from {
    opacity: 0;
    transform: translateY(-50%)  scale3d(.95, .95, .95);
  }

  50% {
    opacity: 1;
  }
}
@-webkit-keyframes zoomInShortYCenter {
  from {
    opacity: 0;
    -webkit-transform: translateY(-50%) scale3d(.95, .95, .95);
  }

  50% {
    opacity: 1;
  }
}
.ds-tooltip-position-left.zoomInShort,
.ds-tooltip-position-right.zoomInShort {
  animation-name: zoomInShortYCenter;
  -webkit-animation-name: zoomInShortYCenter;
}

@media (max-width: 767px) {
  /*@keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-40%) translateX(-50%);
    }
  
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }*/
  @keyframes fadeInUpShortXCenter
  {
    from {
      opacity: 0;
      transform: translate3d(-50%, 10px, 0);
    }
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
  @keyframes fadeInDownShortXCenter
  {
    from {
      opacity: 0;
      transform: translate3d(-50%, -10px, 0);
    }
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
  @keyframes fadeInLeftShortXCenter
  {
    from {
      opacity: 0;
      transform: translate3d(calc(-10px - 50%), 0, 0);
    }
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
  @keyframes fadeInRightShortXCenter
  {
    from {
      opacity: 0;
      transform: translate3d(calc(10px - 50%), 0, 0);
    }
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
  @keyframes fadeInUpShortYCenter
  {
    from {
      opacity: 0;
      transform: translate3d(0, calc(-50% + 10px), 0);
    }
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
  @keyframes fadeInDownShortYCenter
  {
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
  @keyframes fadeInLeftShortYCenter
  {
    from {
      opacity: 0;
      transform: translate3d(0, calc(-50% - 10px), 0);
    }
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
  @keyframes fadeInRightShortYCenter
  {
    from {
      opacity: 0;
      transform: translate3d(20px, -50%, 0);
    }
    to {
      opacity: 1;
      transform: translateY(-40%) translateX(-50%);
    }
  }
}

.ds_image_hotspot .ds-tooltip-on-top {
  z-index: 9999 !important;
}


.ds-hidetooltip-on .ds-tooltip-wrap {
  display: none !important;
}




.ds_image_hotspot .ds-hotspot{
    cursor: pointer;
    line-height: 100%;
}

.ds_image_hotspot .ds_image_hotspot_child {
	position: absolute !important;
}

.ds_image_hotspot_child .ds-hotspot-icon {
	font-size: 24px;
    position: relative;
    z-index: 2;
}

.ds_image_hotspot_child .ds-tooltip-icon {
    font-size: 40px;
}

.ds_image_hotspot_child .ds-hotspot > img {
    border-style: solid;
    width: 100px;
    height: auto;
}

.ds_image_hotspot .ds-tooltip-wrap {
    width: 300px;
    padding: 10px;
    /*visibility: hidden;*/
    display: none;
    background: #fff;
    position: absolute;
    transform: translate(-50%);
    z-index: 99999999999;
    border-style: solid;
    transition: all 0.3s ease-in-out;
    overflow: visible !important;
}

/*.ds-image-hotspot-child:hover .ds-tooltip-wrap {
	opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out;
} */
.ds-image-hotspot-child .ds-tooltip-wrap {
    transition: all 0.3s ease-in-out;
}

.ds_image_hotspot .ds-tooltip-arrow::before {
    border: 10px solid transparent;
    content: '';
    position: absolute;
    display: block;    
    width: 0px;
}

.ds_image_hotspot .ds-tooltip-arrow-left::before {
    border-right: 0;
    border-left: 10px solid #000;
    right: 0;
    top: 50%;
    transform: translate(100%, -50%);
}

.ds_image_hotspot .ds-tooltip-arrow-right::before {
    border-left: 0;
    border-right: 10px solid #000;
    left: 0;
    top: 50%;
    transform: translate(-100%, -50%);
}

.ds_image_hotspot .ds-tooltip-arrow-top::before {
    left: 50%;
    bottom: 0;
    border-bottom: 0;
    border-top: 10px solid #000;
    transform: translate(-50%, 100%);
}

.ds_image_hotspot .ds-tooltip-arrow-bottom::before {
    left: 50%;
    top: 0;
    border-top: 0;
    border-bottom: 10px solid #000;
    transform: translate(-50%, -100%);
}

.ds_image_hotspot .ds-tooltip-position-left {
    transform: translateY(-50%);
    right: 100%;
    top: 50%;
    margin-right: 15px;
}

.ds_image_hotspot .ds-tooltip-position-right {
    transform: translateY(-50%);
    top: 50%;
    left: 100%;
    margin-left: 15px;
}

.ds_image_hotspot .ds-tooltip-position-top {
    transform: translateX(-50%);
    bottom: 100%;
    left: 50%;
    margin-bottom: 15px;
}

.ds_image_hotspot .ds-tooltip-position-bottom {
    transform: translateX(-50%);
    top: 100%;
    left: 50%;
    margin-top: 15px;
}

.ds_image_hotspot .ds-tooltip-image-icon,
.ds_image_hotspot .ds-tooltip-desc,
.ds_image_hotspot .ds-tooltip-button-wrap {
	margin-bottom: 15px !important;
}

.ds_image_hotspot .ds-tooltip-image-icon > img {
    border-style: solid;
    width: 100px;
    height: auto;
}

.ds_image_hotspot .ds-tooltip-button-wrap {
    width: 100%;
}
.ds_image_hotspot .ds_image_hotspot_child .ds-hotspot img.ds-hotspot-image[src=""] {
    width: 0 !important
}
@media (max-width: 767px) {
    .ds_image_hotspot  .ds-tooltip-position-right {
        transform: translateX(-50%);
        top: 100%;
        left: 0;
        margin-top: 20px;
    }
    .ds_image_hotspot .ds-tooltip-position-left {
        transform: translateX(-50%);
        top: 100%;
        left: 50%;
        margin-top: 20px;
    }
    .ds_image_hotspot .ds-tooltip-arrow-right:before, 
    .ds_image_hotspot .ds-tooltip-arrow-left:before,
    .ds_image_hotspot .ds-tooltip-arrow-top:before, 
    .ds_image_hotspot .ds-tooltip-arrow-bottom:before,
    .ds_image_hotspot .ds-tooltip-arrow::before {  
        display: none;  
    }
}


.ds_image_hotspot  .ds-tooltip-wrap.animated {
    animation-duration: 0.8s;
    animation-fill-mode: both;
  }

/* interactivity */
.ds_image_hotspot  .ds-tooltip-wrap:after {
    content: " ";
    position: absolute;
    display: block;
}
.ds_image_hotspot  .ds-tooltip-wrap.ds-tooltip-position-right:after {
    width: 15px;
    height: 100%;
    top: 0;
    left: -15px;
}
.ds_image_hotspot  .ds-tooltip-wrap.ds-tooltip-position-left:after {
    width: 15px;
    height: 100%;
    top: 0;
    right: -15px;
}
.ds_image_hotspot  .ds-tooltip-wrap.ds-tooltip-position-top:after {
    width: 100%;
    height: 15px;
    left: 0;
    bottom: -15px;
}

.ds_image_hotspot  .ds-tooltip-wrap.ds-tooltip-position-bottom:after{
    width: 100%;
    height: 15px;
    left: 0;
    top: -15px;
}

.ds-svg-sonar-container
{
        pointer-events: none;
    position: absolute;
    top: 51%;
    left: 51%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.ds-sonar-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;

    border-radius: 50%;
    border: 1px solid #fff;

    width: 20px;
    height: 20px;

    animation-name: ds-svg-sonar-animation;
    opacity: 0;
    animation-duration: 1.8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-origin: 0 0;
}
 
.ds-sonar-circle:nth-child(2) {animation-delay: .6s;}
.ds-sonar-circle:nth-child(3) {animation-delay: 1.2s;}
.ds-sonar-circle:nth-child(4) {animation-delay: 1.8s;}


@keyframes ds-svg-sonar-animation{
    0% {
        transform: scale(0) translate(-50%,-50%);
        opacity: 0;
    }
    50% {
        transform: scale(1.5) translate(-50%,-50%);
        opacity: 0.5;
    }
    100% {
        transform: scale(3) translate(-50%,-50%);
        opacity: 0;
    }
}
  
/* .ds-svg-sonar-container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.ds-svg-sonar g{
    animation-name: ds-svg-sonar-animation;
    opacity: 0;
    animation-duration: 1.8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .ds-svg-sonar g:nth-child(2){animation-delay: .6s;}
  .ds-svg-sonar g:nth-child(3){animation-delay: 1.2s;}
  .ds-svg-sonar g:nth-child(4){animation-delay: 1.8s;}
  @keyframes ds-svg-sonar-animation{
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
      opacity: 0;
      -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }
    50% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      opacity: 1;
      -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    }
    100% {
      -webkit-transform: scale(3);
      transform: scale(3);
      opacity: 0;
      -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }
  } */
.ds-layoutcomponent-notice {
    background-color: #fff9f9;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #888;
    border: 1px solid #ffe6e6;
    margin-bottom: 15px;
}