/*=== TOOTLTIPS ===*/

@keyframes pulse {
   0% {
      transform: scale(1);
      opacity: 1;
   }

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

.tootltips {
   text-align: center;
}

.tootltips__container {
   display: inline-block;
   position: relative;
   max-width: 500px;
}

.tootltips__img {
   width: 100%;
}

.tootltips__dot {
   --color-tooltip: #fdd02a;
   position: absolute;
   display: block;
   width: 5%;
   height: 7%;
   border-radius: 50%;
   border: 3px solid var(--color-tooltip);
}

@media (max-width: 576px) {
   .tootltips__dot {
      border: 2px solid var(--color-tooltip);
   }

}

[data-tipped-options*="light"].tootltips__dot {
   --color-tooltip: #016d38;
}

.tootltips__dot:hover {
   cursor: pointer;
}

.tootltips__dot:before {
   --size-tooltip: 20px;
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: var(--size-tooltip);
   height: var(--size-tooltip);
   border-radius: 50%;
   background-color: var(--color-tooltip);
   animation: pulse 1s infinite;
   transition: visibility .5s;
}

@media (max-width: 576px) {
   .tootltips__dot:before {
      --size-tooltip: 10px;
   }
}

.tootltips__dot:hover:before {
   visibility: hidden;
}

.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
   background-color: #fdd02a;
}

.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close {
   color: #016d38;
}

.tpd-skin-light .tpd-background-content,
.tpd-skin-light .tpd-background-title {
   background-color: #016d38;
}

.tpd-skin-light .tpd-content,
.tpd-skin-light .tpd-title,
.tpd-skin-light .tpd-close {
   color: #fff;
}

/*-- Tootltip 1 --*/

.tootltips--1 .dot1 {
   top: 32%;
   left: 6%;
}

.tootltips--1 .dot2 {
   top: 32%;
   left: 15%;
}

.tootltips--1 .dot3 {
   top: 42%;
   left: 6%;
}

.tootltips--1 .dot4 {
   top: 42%;
   left: 15%;
}

.tootltips--1 .dot5 {
   top: 52%;
   left: 6%;
}

.tootltips--1 .dot6 {
   top: 52%;
   left: 15%;
}

.tootltips--1 .dot7 {
   top: 62%;
   left: 6%;
}

.tootltips--1 .dot8 {
   top: 62%;
   left: 15%;
}

/*-- Fin Tootltip 1 --*/

/*=== FIN TOOLTIPS ===*/