/*=== TOOTLTIPS ===*/

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

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

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

   --color__brand1: #54BDBD;
   --color__brand2: #F7B800;
   --color__brand3: #54BDBD;
   --color__brand4: #FFE599;
}

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

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

.tootltips__dot {
   --color-tooltip: var(--color__brand2);
   position: absolute;
   display: block;
   width: 8.5%;
   height: 5.6%;
   border-radius: 50%;
}

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

.tootltips__dot:hover {
   cursor: pointer;
}

.tootltips__dot:before {
   --size-tooltip: 40px;
   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: 20px;
   }
}

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

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

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

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

/*-- Tootltip 1 --*/

.tootltips--1 .dot1 {
   top: 17.5%;
   left: 23.5%;
}

.tootltips--1 .dot2 {
   top: 8.3%;
   left: 52.8%;
}

.tootltips--1 .dot3 {
   top: 27.8%;
   left: 79.6%;
}

.tootltips--1 .dot4 {
   top: 62%;
   left: 79.4%;
}

.tootltips--1 .dot5 {
   top: 82.5%;
   left: 52.6%;
}

.tootltips--1 .dot6 {
   top: 73.5%;
   left: 22.5%;
}

.tootltips--1 .dot7 {
   top: 44.1%;
   left: 9.2%;
}

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