.tooltip_content {
  animation-duration: 0.6s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}

.ssp_ih_container[data-trigger="hover"][data-animation="none"] .tooltip_content,
.ssp_ih_container[data-trigger="click"][data-animation="none"] .tooltip_content {
  display: none;
  animation: none;
}

.ssp_ih_container[data-trigger="hover"][data-animation="none"] .tooltip_content.show,
.ssp_ih_container[data-trigger="click"][data-animation="none"] .tooltip_content.show {
  display: flex;
}

/* fade */
.ssp_ih_container[data-trigger="hover"][data-animation="fade"] .tooltip_content,
.ssp_ih_container[data-trigger="click"][data-animation="fade"] .tooltip_content {
  animation: fadeR 0.3s ease forwards;
}

@keyframes fadeR {
  from { opacity: 1; }
  to { opacity: 0; }
}

.ssp_ih_container[data-trigger="hover"][data-animation="fade"] .tooltip_content.show,
.ssp_ih_container[data-trigger="click"][data-animation="fade"] .tooltip_content.show {
  animation: fade 0.3s ease forwards;
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* fadeleft */
.ssp_ih_container[data-animation="fadeleft"] .tooltip_content {
  animation: fadeLeftR 0.3s ease forwards;
}
.ssp_ih_container[data-animation="fadeleft"] .tooltip_content.show {
  animation: fadeLeft 0.3s ease forwards;
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(calc(-50% - 20px)); }
  to { opacity: 1; transform: translateX(-50%); }
}

@keyframes fadeLeftR {
  from { opacity: 1; transform: translateX(-50%); }
  to { opacity: 0; transform: translateX(calc(-50% - 20px)); }
}

/* fadeRight */
.ssp_ih_container[data-animation="faderight"] .tooltip_content {
  animation: fadeRightR 0.3s ease forwards;
}

.ssp_ih_container[data-animation="faderight"] .tooltip_content.show {
  animation: fadeRight 0.3s ease forwards;
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(calc(-50% + 20px)); }
  to { opacity: 1; transform: translateX(-50%); }
}

@keyframes fadeRightR {
  from { opacity: 1; transform: translateX(-50%); }
  to { opacity: 0; transform: translateX(calc(-50% + 20px)); }
}


.ssp_ih_container[data-animation="fadetop"] .tooltip_content {
  animation: fadeTopR 0.3s ease forwards;
}

.ssp_ih_container[data-animation="fadetop"] .tooltip_content.show {
  animation: fadeTop 0.3s ease forwards;
}

@keyframes fadeTop {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes fadeTopR {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-20px); }
}


/* fadebottom */
.ssp_ih_container[data-animation="fadebottom"] .tooltip_content {
  animation: fadeBottomR 0.3s ease forwards;
}
.ssp_ih_container[data-animation="fadebottom"] .tooltip_content.show {
  animation: fadeBottom 0.3s ease forwards;
}
@keyframes fadeBottom {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}
@keyframes fadeBottomR {
  from { 
    opacity: 1; 
    transform: translateY(0); 
  }
  to { 
    opacity: 0; 
    transform: translateY(20px); 
  }
}

.ssp_ih_container[data-animation="slide"] .tooltip_content {
  animation: slideR 0.3s ease forwards;
}
.ssp_ih_container[data-animation="slide"] .tooltip_content.show {
  animation: slide 0.3s ease forwards;
}
@keyframes slide {
  from { transform: translateY(20px); }
  to { transform: translateY(0); }
}
@keyframes slideR {
  from { transform: translateY(0); }
  to { transform: translateY(20px); }
}


.ssp_ih_container[data-animation="slideinleft"] .tooltip_content {
  animation: slideInLeftR 0.3s ease forwards;
}
.ssp_ih_container[data-animation="slideinleft"] .tooltip_content.show {
  animation: slideInLeft 0.3s ease forwards;
}
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes slideInLeftR {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.ssp_ih_container[data-animation="slideinright"] .tooltip_content {
  animation: slideInRightR 0.3s ease forwards;
}

.ssp_ih_container[data-animation="slideinright"] .tooltip_content.show {
  animation: slideInRight 0.3s ease forwards;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideInRightR {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}


.ssp_ih_container[data-animation="slideintop"] .tooltip_content {
  animation: slideInTopR 0.3s ease forwards;
}

.ssp_ih_container[data-animation="slideintop"] .tooltip_content.show {
  animation: slideInTop 0.3s ease forwards;
}

@keyframes slideInTop {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

@keyframes slideInTopR {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}


.ssp_ih_container[data-animation="slideinbottom"] .tooltip_content {
  animation: slideInBottomR 0.3s ease forwards;
}

.ssp_ih_container[data-animation="slideinbottom"] .tooltip_content.show {
  animation: slideInBottom 0.3s ease forwards;
}

@keyframes slideInBottom {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes slideInBottomR {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

.ssp_ih_container[data-animation="horizontalflip"] .tooltip_content {
  animation: horizontalFlipR 0.3s ease forwards;
  transform-origin: center;
}

.ssp_ih_container[data-animation="horizontalflip"] .tooltip_content.show {
  animation: horizontalFlip 0.3s ease forwards;
  transform-origin: center;
}
@keyframes horizontalFlip {
  from { opacity: 0; transform: rotateY(90deg); }
  to { opacity: 1; transform: rotateY(0); }
}
@keyframes horizontalFlipR {
  from { opacity: 1; transform: rotateY(0); }
  to { opacity: 0; transform: rotateY(90deg); }
}

.ssp_ih_container[data-animation="verticalflip"] .tooltip_content {
  animation: verticalFlipR 0.3s ease forwards;
  transform-origin: center;
}
.ssp_ih_container[data-animation="verticalflip"] .tooltip_content.show {
  animation: verticalFlip 0.3s ease forwards;
  transform-origin: center;
}

@keyframes verticalFlip {
  from { opacity: 0; transform: rotateX(90deg); }
  to { opacity: 1; transform: rotateX(0); }
}

@keyframes verticalFlipR {
  from { opacity: 1; transform: rotateX(0); }
  to { opacity: 0; transform: rotateX(90deg); }
}


/* EXIT */
.ssp_ih_container[data-animation="zoomin"] .tooltip_content {
  animation: zoomInR 0.3s ease forwards;
}

/* ENTER */
.ssp_ih_container[data-animation="zoomin"] .tooltip_content.show {
  animation: zoomIn 0.3s ease forwards;
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes zoomInR {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.7); }
}


.ssp_ih_container[data-animation="zoominleft"] .tooltip_content {
  animation: zoomInLeftR 0.3s ease forwards;
}

.ssp_ih_container[data-animation="zoominleft"] .tooltip_content.show {
  animation: zoomInLeft 0.3s ease forwards;
}

@keyframes zoomInLeft {
  from { opacity: 0; transform: scale(0.7) translateX(-40px); }
  to { opacity: 1; transform: scale(1) translateX(0); }
}

@keyframes zoomInLeftR {
  from { opacity: 1; transform: scale(1) translateX(0); }
  to { opacity: 0; transform: scale(0.7) translateX(-40px); }
}


.ssp_ih_container[data-animation="zoominright"] .tooltip_content {
  animation: zoomInRightR 0.3s ease forwards;
}

.ssp_ih_container[data-animation="zoominright"] .tooltip_content.show {
  animation: zoomInRight 0.3s ease forwards;
}

@keyframes zoomInRight {
  from { opacity: 0; transform: scale(0.7) translateX(40px); }
  to { opacity: 1; transform: scale(1) translateX(0); }
}

@keyframes zoomInRightR {
  from { opacity: 1; transform: scale(1) translateX(0); }
  to { opacity: 0; transform: scale(0.7) translateX(40px); }
}


.ssp_ih_container[data-animation="zoominup"] .tooltip_content {
  animation: zoomInUpR 0.3s ease forwards;
}

.ssp_ih_container[data-animation="zoominup"] .tooltip_content.show {
  animation: zoomInUp 0.3s ease forwards;
}

@keyframes zoomInUp {
  from { opacity: 0; transform: scale(0.7) translateY(-40px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes zoomInUpR {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(0.7) translateY(-40px); }
}


.ssp_ih_container[data-animation="zoomindown"] .tooltip_content {
  animation: zoomInDownR 0.3s ease forwards;
}

.ssp_ih_container[data-animation="zoomindown"] .tooltip_content.show {
  animation: zoomInDown 0.3s ease forwards;
}

@keyframes zoomInDown {
  from { opacity: 0; transform: scale(0.7) translateY(40px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes zoomInDownR {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(0.7) translateY(40px); }
}


/* EXIT */
.ssp_ih_container[data-animation="bouncein"] .tooltip_content {
  animation: bounceInR 0.4s ease forwards;
}

/* ENTER */
.ssp_ih_container[data-animation="bouncein"] .tooltip_content.show {
  animation: bounceIn 0.4s ease forwards;
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes bounceInR {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.3); }
}


.ssp_ih_container[data-animation="bounceinleft"] .tooltip_content {
  animation: bounceInLeftR 0.4s ease forwards;
}

.ssp_ih_container[data-animation="bounceinleft"] .tooltip_content.show {
  animation: bounceInLeft 0.4s ease forwards;
}

@keyframes bounceInLeft {
  0% { opacity: 0; transform: translateX(-200px); }
  60% { opacity: 1; transform: translateX(30px); }
  100% { transform: translateX(0); }
}

@keyframes bounceInLeftR {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-200px); }
}


.ssp_ih_container[data-animation="bounceinright"] .tooltip_content {
  animation: bounceInRightR 0.4s ease forwards;
}

.ssp_ih_container[data-animation="bounceinright"] .tooltip_content.show {
  animation: bounceInRight 0.4s ease forwards;
}

@keyframes bounceInRight {
  0% { opacity: 0; transform: translateX(200px); }
  60% { opacity: 1; transform: translateX(-30px); }
  100% { transform: translateX(0); }
}

@keyframes bounceInRightR {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(200px); }
}


.ssp_ih_container[data-animation="bounceinup"] .tooltip_content {
  animation: bounceInUpR 0.4s ease forwards;
}

.ssp_ih_container[data-animation="bounceinup"] .tooltip_content.show {
  animation: bounceInUp 0.4s ease forwards;
}

@keyframes bounceInUp {
  0% { opacity: 0; transform: translateY(200px); }
  60% { opacity: 1; transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

@keyframes bounceInUpR {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(200px); }
}


.ssp_ih_container[data-animation="bounceindown"] .tooltip_content {
  animation: bounceInDownR 0.4s ease forwards;
}

.ssp_ih_container[data-animation="bounceindown"] .tooltip_content.show {
  animation: bounceInDown 0.4s ease forwards;
}

@keyframes bounceInDown {
  0% { opacity: 0; transform: translateY(-200px); }
  60% { opacity: 1; transform: translateY(30px); }
  100% { transform: translateY(0); }
}

@keyframes bounceInDownR {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-200px); }
}


.ssp_ih_container[data-animation="flash"] .tooltip_content {
  animation: flashOut 0.3s ease forwards;
}

.ssp_ih_container[data-animation="flash"] .tooltip_content.show {
  animation: flashIn 0.6s ease forwards;
}

@keyframes flashIn {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes flashOut {
  from { opacity: 1; }
  to { opacity: 0; }
}


.ssp_ih_container[data-animation="pulse"] .tooltip_content {
  animation: pulseOut 0.3s ease forwards;
}

.ssp_ih_container[data-animation="pulse"] .tooltip_content.show {
  animation: pulseIn 0.6s ease forwards;
}

@keyframes pulseIn {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes pulseOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.9); }
}


.ssp_ih_container[data-animation="shake"] .tooltip_content {
  animation: shakeOut 0.3s ease forwards;
}

.ssp_ih_container[data-animation="shake"] .tooltip_content.show {
  animation: shakeIn 0.6s ease forwards;
}

@keyframes shakeIn {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes shakeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}


.ssp_ih_container[data-animation="swing"] .tooltip_content {
  animation: swingOut 0.3s ease forwards;
  transform-origin: top center;
}

.ssp_ih_container[data-animation="swing"] .tooltip_content.show {
  animation: swingIn 0.7s ease forwards;
  transform-origin: top center;
}

@keyframes swingIn {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0); }
}

@keyframes swingOut {
  from { opacity: 1; transform: rotate(0); }
  to { opacity: 0; transform: rotate(-10deg); }
}


.ssp_ih_container[data-animation="tada"] .tooltip_content {
  animation: tadaOut 0.3s ease forwards;
}

.ssp_ih_container[data-animation="tada"] .tooltip_content.show {
  animation: tadaIn 0.7s ease forwards;
}

@keyframes tadaIn {
  0% { transform: scale(1); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes tadaOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.8); }
}


.ssp_ih_container[data-animation="wobble"] .tooltip_content {
  animation: wobbleOut 0.3s ease forwards;
}

.ssp_ih_container[data-animation="wobble"] .tooltip_content.show {
  animation: wobbleIn 0.8s ease forwards;
}

@keyframes wobbleIn {
  0% { transform: none; }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: none; }
}

@keyframes wobbleOut {
  from { opacity: 1; }
  to { opacity: 0; }
}


.ssp_ih_container[data-animation="lightspeedin"] .tooltip_content {
  animation: lightSpeedOut 0.3s ease-in forwards;
}

.ssp_ih_container[data-animation="lightspeedin"] .tooltip_content.show {
  animation: lightSpeedIn 0.6s ease-out forwards;
}

@keyframes lightSpeedIn {
  from {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    transform: skewX(-5deg);
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(100%) skewX(30deg); }
}

.ssp_ih_parent.et_pb_module .et-pb-icon.ETmodules {
    font-family: ETmodules !important;
}

.ssp_ih_parent.et_pb_module .et-pb-icon.normal {
    font-weight: 400 !important;
}

.ssp_ih_parent.et_pb_module .et-pb-icon.FontAwesome {
    font-family: FontAwesome !important;
}

.ssp_ih_parent.et_pb_module .et-pb-icon.bold {
    font-weight: 900 !important;
}

.ssp_ih_child.et_pb_module {
  position: absolute;
}

.ssp_ih_container {
  position: relative;
}

.tooltip_container {
  display: flex;
}

.tooltip_container.top{
  flex-direction: column;
}

.tooltip_container.bottom {
  flex-direction: column-reverse;
}

.tooltip_container.left{
  flex-direction: row;
}

.tooltip_container.right {
  flex-direction: row-reverse;
}

.hotspot_container .hotspot_icon_area {
  display: none;
}

.tooltip_content.show + .hotspot_container .hotspot_icon_area,
.hotspot_container:hover .hotspot_icon_area {
  display: block;
}

.tooltip_container.bottom .hotspot_icon_area {
  width: 200%;
  height: 20px;
  top: 100%;
  left: -50%;
  position: absolute;
}

.tooltip_container.top .hotspot_icon_area {
  width: 200%;
  height: 20px;
  bottom: 100%;
  left: -50%;
  position: absolute;
}

.tooltip_container.left .hotspot_icon_area {
  width: 20px;
  height: 200%;
  right: 100%;
  top: -50%;
  position: absolute;
}

.tooltip_container.right .hotspot_icon_area {
  width: 20px;
  height: 200%;
  left: 100%;
  top: -50%;
  position: absolute;
}

.tooltip_container.pointer_on .tooltip_content:before{
  border: 10px solid transparent;
  content: "";
  position: absolute;
  display: block;
  width: 0
}

.tooltip_container.top .tooltip_content:before{
  left: 50%;
  bottom: 0;
  border-bottom: 0;
  border-top: 10px solid #000;
  -webkit-transform: translate(-50%,100%);
  transform: translate(-50%,100%);
}

.tooltip_container.bottom .tooltip_content:before{
  left: 50%;
  top: 0;
  border-top: 0;
  border-bottom: 10px solid #000;
  -webkit-transform: translate(-50%,-100%);
  transform: translate(-50%,-100%);
}

.tooltip_container.left .tooltip_content:before{
  border-right: 0;
  border-left: 10px solid #000;
  right: 0;
  top: 50%;
  -webkit-transform: translate(100%,-50%);
  transform: translate(100%,-50%);
}

.tooltip_container.right .tooltip_content:before{
  border-left: 0;
  border-right: 10px solid #000;
  left: 0;
  top: 50%;
  -webkit-transform: translate(-100%,-50%);
  transform: translate(-100%,-50%);
}

.tooltip_container.top .tooltip_content{
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 100%;
  left: 50%;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 15px;
}

.tooltip_container.bottom .tooltip_content{
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 100%;
  left: 50%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 15px;
}

.tooltip_container.left .tooltip_content{
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 100%;
  top: 50%;
  margin-left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 15px;
}

.tooltip_container.right .tooltip_content{
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  left: 100%;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 15px;
}

.tooltip_container .tooltip_content {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.hotspot_container {
  width: fit-content !important;
  line-height: 0 !important;
  position: relative;
  cursor: pointer;
}

.hotspot_container .hotspot_icon_area {
  cursor: auto;
}

.hotspot_container .hotspot_icon{
  z-index: 2;
  position: relative;
}

.hotspot_container .ssp_ih_pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 90, 95, 0.6);
  border-radius: 50%;
  animation: ssp-ih-pulse-animation 2.5s infinite ease-out;
  z-index: 1;
  pointer-events: none;
}


@keyframes ssp-ih-pulse-animation {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }

  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.hotspot_container.front .hotspot_icon {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.hotspot_container.back {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.tooltip_container .tooltip_button_wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}


.tooltip_container .tooltip_title {
  padding: 0;
}