/*=== 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: #016d38;

   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__brand1);
   position: absolute;
   display: block;
   width: 7%;
   height: 6.5%;
   border-radius: 50%;
}

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

.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.2rem;
   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: #016d38;
}

.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: #;
}

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

/*-- Tootltip 1 --*/

.tootltips1--2 .dot1 {
   top: 0%;
   left: 61.3%;
}

.tootltips1--2 .dot2 {
   top: 17%;
   left: 86%;
}

.tootltips1--2 .dot3 {
   top: 34%;
   left: 87.5%;
}

.tootltips1--2 .dot4 {
   top: 42.5%;
   left: 94%;
}

.tootltips1--2 .dot5 {
   top: 50.3%;
   left: 90.6%;
}

.tootltips1--2 .dot6 {
   top: 58.1%;
   left: 94.1%;
}

.tootltips1--2 .dot7 {
   top: 69.6%;
   left: 88%;
}

.tootltips1--2 .dot8 {
   top: 86%;
   left: 77.1%;
}

.tootltips1--2 .dot9 {
   top: 92%;
   left: 19%;
}

.tootltips1--2 .dot10 {
   top: 87%;
   left: 11.5%;
}

.tootltips1--2 .dot11 {
   top: 66.1%;
   left: 0.2%;
}

.tootltips1--2 .dot12 {
   top: 39%;
   left: 4.4%;
}

.tootltips1--2 .dot13 {
   top: 4%;
   left: 10%;
}

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