/*=== 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: #439B35;
   --color__brand4: #9B6314;
}

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

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

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

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

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

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

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

.tpd-skin-green .tpd-background-content,
.tpd-skin-green .tpd-background-title {
   background-color: #439B35;
}

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

.tpd-skin-brown .tpd-background-content,
.tpd-skin-brown .tpd-background-title {
   background-color: #9B6314;
}

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

/*-- Tootltip 1 --*/

.tootltips--1 .dot1 {
   top: 5%;
   left: 44.2%;
}

.tootltips--1 .dot2 {
   top: 5%;
   left: 55.8%;
}

.tootltips--1 .dot3 {
   top: 37%;
   left: 75.6%;
}

.tootltips--1 .dot4 {
   top: 53%;
   left: 75.6%;
}

.tootltips--1 .dot5 {
   top: 88%;
   left: 56%;
}

.tootltips--1 .dot6 {
   top: 88%;
   left: 44.5%;
}

.tootltips--1 .dot7 {
   top: 42.5%;
   left: 21%;
}

.tootltips--1 .dot8 {
   top: 54.4%;
   left: 21%;
}
/*=== FIN TOOLTIPS ===*/