/*=== TOOTLTIPS ===*/

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

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

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

   50% {
      transform: scale(1.1);
   }

   100% {
      transform: scale(1);
   }

}

.tootltips1 {
   margin-top: 50px;
   margin-bottom: 50px;
   text-align: center;

   --color__brand1: #009925;
   --color__brand2: #009925;
   --color__brand3: #009925;
   --color__brand4: #009925;

   counter-reset: num;
}

.tootltips1__container {
   display: inline-block;
   position: relative;
   max-width: 100%;
   width: 650px;
}

.tootltips1__img {
   width: 100%;
   max-width: 100%;
}

.tootltips1__dot {
   --color-tooltip: var(--color__brand2);
   position: absolute;
   display: block;
   width: 11.5%;
   height: 8.6%;
   border-radius: 50%;
}

[data-tipped-options*="light"].tootltips1__dot {
   --color-tooltip: var(--color__brand3);
}

.tootltips1__dot:hover {
   cursor: pointer;
}

.tootltips1__dot::after {
   --size-tooltip: 90%;
   content: counter(num);
   counter-increment: num;
   color: #fff;
   font-weight: bold;
   font-size: 1.6rem;
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   left: 0;
   top: 0;
   width: var(--size-tooltip);
   height: 130%;
   border-radius: 50%;
   background-color: var(--color-tooltip);
   border: 4px solid #fff;
   animation: pulse2 1s infinite;
}

.anime.tootltips1__dot::after {
   animation: none;
}

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


.anime.tootltips1__dot:before {
   animation: none;
}


@media (max-width: 576px) {
   .tootltips1__dot::after {
      font-size: 1rem;
      border: 2px solid #fff;
   }
}

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

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

.tpd-skin-dark1 .tpd-background-content,
.tpd-skin-dark1 .tpd-background-title {
   background-color: #F8AA01;
}

.tpd-skin-dark2 .tpd-background-content,
.tpd-skin-dark2 .tpd-background-title {
   background-color: #FFDC5D;
}

.tpd-skin-dark3 .tpd-background-content,
.tpd-skin-dark3 .tpd-background-title {
   background-color: #49ADFD;
}

.tpd-skin-dark4 .tpd-background-content,
.tpd-skin-dark4 .tpd-background-title {
   background-color: #2F8F8A;
}

.tpd-skin-dark5 .tpd-background-content,
.tpd-skin-dark5 .tpd-background-title {
   background-color: #016D38;
}

.tpd-skin-dark6 .tpd-background-content,
.tpd-skin-dark6 .tpd-background-title {
   background-color: #4023B7;
}

.tpd-skin-dark7 .tpd-background-content,
.tpd-skin-dark7 .tpd-background-title {
   background-color: #195478;
}

.tpd-skin-dark8 .tpd-background-content,
.tpd-skin-dark8 .tpd-background-title {
   background-color: #840077;
}

.tpd-skin-dark9 .tpd-background-content,
.tpd-skin-dark9 .tpd-background-title {
   background-color: #D8394F;
}

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

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

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

.tpd-skin-dark1 .tpd-content,
.tpd-skin-dark1 .tpd-title,
.tpd-skin-dark1 .tpd-close {
   color: #333333;
}

.tpd-skin-dark2 .tpd-content,
.tpd-skin-dark2 .tpd-title,
.tpd-skin-dark2 .tpd-close {
   color: #333333;
}

.tpd-skin-dark3 .tpd-content,
.tpd-skin-dark3 .tpd-title,
.tpd-skin-dark3 .tpd-close {
   color: #333333;
}

/*-- Tootltip 1 --*/

.tootltips1--2 .dot1 {
   top: -0.1%;
   left: 57.3%;
}

.tootltips1--2 .dot2 {
   top: 15.9%;
   left: 80.8%;
}

.tootltips1--2 .dot3 {
   top: 44%;
   left: 90.6%;
}

.tootltips1--2 .dot4 {
   top: 71.2%;
   left: 81.1%;
}

.tootltips1--2 .dot5 {
   top: 88%;
   left: 59%;
}

.tootltips1--2 .dot6 {
   top: 90%;
   left: 31.5%;
}

.tootltips1--2 .dot7 {
   top: 71.5%;
   left: 8%;
}

.tootltips1--2 .dot8 {
   top: 45%;
   left: -0.9%;
}

.tootltips1--2 .dot9 {
   top: 16%;
   left: 9%;
}

.tootltips1--2 .dot10 {
   top: -0.9%;
   left: 32.4%;
}

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