@import url("https://fonts.googleapis.com/css?family=Arimo:400,700&display=swap");
body {
  font-family: 'Montserrat', sans-serif;
}

.u-a1 {
  font-size: 17px;
  color: #fff;
text-shadow: rgb(0, 0, 0) 3px 0px 0px, 
rgb(0, 0, 0) 2.83487px 0.981584px 0px, 
rgb(0, 0, 0) 2.35766px 1.85511px 0px, 
rgb(0, 0, 0) 1.62091px 2.52441px 0px, 
rgb(0, 0, 0) 0.705713px 2.91581px 0px, 
rgb(0, 0, 0) -0.287171px 2.98622px 0px, 
rgb(0, 0, 0) -1.24844px 2.72789px 0px, 
rgb(0, 0, 0) -2.07227px 2.16926px 0px, 
rgb(0, 0, 0) -2.66798px 1.37182px 0px, 
rgb(0, 0, 0) -2.96998px 0.42336px 0px, 
rgb(0, 0, 0) -2.94502px -0.571704px 0px, 
rgb(0, 0, 0) -2.59586px -1.50383px 0px, 
rgb(0, 0, 0) -1.96093px -2.27041px 0px, 
rgb(0, 0, 0) -1.11013px -2.78704px 0px, 
rgb(0, 0, 0) -0.137119px -2.99686px 0px, 
rgb(0, 0, 0) 0.850987px -2.87677px 0px, 
rgb(0, 0, 0) 1.74541px -2.43999px 0px, 
rgb(0, 0, 0) 2.44769px -1.73459px 0px, 
rgb(0, 0, 0) 2.88051px -0.838247px 0px
}

.u-b0 {
  font-size: 14px;
  opacity: 0.56;
}

.o-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-hotspot-image {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.c-hotspot-image__visual {
  position: relative;
  z-index: 1;
}
.c-hotspot-image__visual img {
  display: block;
  width: 100%;
}
.c-hotspot-image__hotspots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.c-hotspot-image__hotspots canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 4;
}

.c-hotspot {
  pointer-events: initial;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 35px;
  top: 26%;
  left: 26%;
}
.c-hotspot__circle {
  display: inline-block;
  margin: 0 auto;
  width: 30px;
  height: 30px;
  position: relative;
}
.c-hotspot__circle-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  border: 0px solid #fff0;
  background-color: #ff01a600;
  transition: all 0.3s ease-in-out;
  animation: pulse 1.4s infinite;
}
.c-hotspot__text {
  pointer-events: none;
  display: block;
  width: 250px;
  position: absolute;
  left: 0;
  top: 100%;
}
.c-hotspot__text article {
  transform: translateY(-0%) translateX(0%);
  padding: 0px 60px;
}
.c-hotspot__text .u-a1 {
  margin-bottom: 0.4em;
  opacity: 0;
  margin-left: -30px;
  transform-origin: left;
  visibility: hidden;
  transform: rotate(-1.5deg);
  transition: all 0.3s ease-out;
}
.c-hotspot__text .u-b2 {
  max-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform-origin: left;
  transform: translateY(10px) rotate(2.5deg);
  transition: all 0.3s 0.1s ease-out;
}

.c-hotspot--top .c-hotspot__text {
  top: auto;
  bottom: 60%;
}
.c-hotspot--bottom .c-hotspot__text {
  bottom: auto;
  top: 50%;
  left: -25%;
}
.c-hotspot--bottom .c-hotspot__text article {
  transform: translateY(50%) translateX(25%);
}

.c-hotspot--1 .c-hotspot__text {
  top: auto;
  bottom: 26px;
  left: -350%;
}

.c-hotspot--1-2 .c-hotspot__text {
    top: -28px;
    bottom: auto;
    left: -336%;
}

.c-hotspot--2 .c-hotspot__text {
  left: -383%;
  top: -47px;
}

.c-hotspot--3 .c-hotspot__text {
  left: -3%;
}

.c-hotspot--4 .c-hotspot__text {
  top: 83%;
  left: -128px;
}


.c-hotspot--5 .c-hotspot__text {
  top: auto;
  bottom: -40px;
  left: -364%;
}

.c-hotspot--6 .c-hotspot__text {
  top: 61px;
  bottom: auto;
  left: -74px;
}

.c-hotspot--7 .c-hotspot__text {
  top: auto;
  bottom: -110%;
  left: -200%;
}

.c-hotspot--8 .c-hotspot__text {
  top: -37px;
  bottom: 16%;
  left: -290%;
}

.c-hotspot--9 .c-hotspot__text {
  top: 12px;
  bottom: auto;
  left: 10px;
  }

.c-hotspot--10 .c-hotspot__text {
  top: 50px;
  bottom: auto;
  left: -310%;
}

.c-hotspot--11 .c-hotspot__text {
  top: -46px;
  bottom: 57%;
  left: -357%;
}

.c-hotspot--12 .c-hotspot__text {
top: -68px;
bottom: -81%;
left: -200%;
}

.c-hotspot--13 .c-hotspot__text {
  top: -58px;
  bottom: -104%;
  left: -130%;
}

.c-hotspot--14 .c-hotspot__text {
  top: -106px;
  bottom: 34%;
  left: -330%;
}

.c-hotspot--15 .c-hotspot__text {
  top: 15px;
  bottom: -45%;
  left: -165%;
}
.c-hotspot--16 .c-hotspot__text {
  top: 64px;
  bottom: -184%;
  left: -210%;
}
.c-hotspot--17 .c-hotspot__text {
  top: auto;
  bottom: -105%;
  left: -150%;
}
.c-hotspot--18 .c-hotspot__text {
  top: -138px;
  bottom: -41%;
  left: -499%;
}
.c-hotspot--19 .c-hotspot__text {
  top: auto;
  bottom: -90%;
  left: -268%;
}
.c-hotspot:hover .c-hotspot__circle-inner {
  animation: none;
}
.c-hotspot:hover .u-a1 {
  opacity: 1;
  visibility: visible;
  transform: rotate(0);
}
.c-hotspot:hover .u-b2 {
  opacity: 0.5;
  visibility: visible;
  transform: translateY(0) rotate(0);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(216, 32, 43, 0.4);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(216, 32, 43, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(216, 32, 43, 0);
  }
}




/*Escritorio*/
@media (min-width: 1199.98px)  {
    .u-a1 {
  font-size: 17px;}
}
/*Fin Escritorio*/

/*Tablet*/
/*Portrait*/
@media (min-width: 576px) and (max-width: 991.98px) and (orientation:portrait) {
    .u-a1 {
  font-size: 10px;}
}

/*landscape*/
@media (min0-width: 991.98px) and (max-width: 1199.98px)and (orientation:landscape) {
    .u-a1 {
  font-size: 15px;}
}
/*fin tablet*/

/*movil*/
/*Portrait*/
/*Default*/
@media (max-width: 575.98px)and (orientation:portrait) {
    .u-a1 {
  font-size: 9px;}
 }
/*landscape*/
@media (min-width: 576px) and (max-width: 991.98px) and (orientation:landscape) {
    .u-a1 {
  font-size: 7px;}
}
/*fin movil*/