img {
  display: flex;
  max-width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 35px;
}

.container {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}
main .container {
  padding: 0;
}
main figure {
  margin: 0;
}

.hotspots {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.hotspots .hotspot {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.hotspots .hotspot.spot1 .trigger {
top: 70%;
  left: 10%;
}
.hotspots .hotspot.spot2 .trigger {
  top: 70%;
  left: 20%;
}

.hotspots .hotspot.spot3 .trigger {
  top: 65%;
  left: 25%;
}
.hotspots .hotspot.spot4 .trigger {
  top: 70%;
  left: 30%;
}
.hotspots .hotspot.spot5 .trigger {
  top: 65%;
  left: 37%;
}
.hotspots .hotspot.spot6 .trigger {
   top: 70%;
  left: 42%;
}

.hotspots .hotspot.spot7 .trigger {
   top: 65%;
  left: 50%;
}
.hotspots .hotspot.spot8 .trigger {
  top: 70%;
  left: 57%;
}
.hotspots .hotspot.spot9 .trigger {
 top: 70%;
  right: 35%;
}
.hotspots .hotspot.spot10 .trigger {
  top: 65%;
  right: 25%;
}
.hotspots .hotspot.spot11 .trigger {
  top: 50%;
  right: 20%;
}
.hotspots .hotspot.spot12 .trigger {
  top: 65%;
  right: 18%;
}

.hotspots .hotspot.spot13 .trigger {
 top: 70%;
  right: 10%;
}
.hotspots .hotspot.spot14 .trigger {
  top: 8%;
  left: 31%;
}
.hotspots .hotspot.spot15 .trigger {
  top: 33%;
  left: 71%;
}
.hotspots .hotspot.spot16 .trigger {
  top: 43%;
  left: 52%;
}

.hotspots .hotspot.spot17 .trigger {
  top: 22%;
  left: 55%;
}
.hotspots .hotspot.spot18 .trigger {
  top: 33%;
  left: 33%;
}
.hotspots .hotspot.spot19 .trigger {
  top: 18%;
  left: 71%;
}
.hotspots .hotspot.spot20 .trigger {
  top: 25%;
  left: 33%;
}
.hotspots .hotspot.spot21 .trigger {
  top: 45%;
  left: 13%;
}
.hotspots .hotspot.spot22 .trigger {
  top: 47%;
  right: 3%;
}
.hotspots .hotspot.spot23 .trigger {
  top: 10%;
  left: 60%;
}
.hotspots .hotspot.spot24 .trigger {
  top:35%;
  right: 30%;
}
.hotspots .hotspot.spot25 .trigger {
  top: 70%;
  right: 30%;
}
.hotspots .hotspot.spot26 .trigger {
  top: 40%;
  right: 5%;
}
.hotspots .hotspot.spot27 .trigger {
  top: 8%;
  right: 5%;
}
.hotspots .hotspot.spot28 .trigger {
  top: 45%;
  right: 27%;
}
.hotspots .hotspot.spot29 .trigger {
  top: 35%;
  right: 35%;
}
.hotspots .hotspot.spot30 .trigger {
  top: 55%;
  right: 15%;
}
.hotspots .hotspot.spot31 .trigger {
  top: 58%;
  right: 35%;
}
.hotspots .hotspot.spot32 .trigger {
  top: 58%;
  left: 1%;
}
.hotspots .hotspot.spot33 .trigger {
  top: 38%;
  left: 36%;
}
.hotspots .hotspot.spot34 .trigger {
  top: 58%;
  left: 46%;
}
.hotspots .hotspot.spot35 .trigger {
  top: 8%;
  left: 45%;
}
.hotspots .hotspot.spot36 .trigger {
  top: 38%;
  right: 45%;
}
.hotspots .hotspot.spot37 .trigger {
  top: 68%;
  left: 48%;
}
.hotspots .hotspot.spot38 .trigger {
  top: 78%;
  left: 18%;
}
.hotspots .hotspot.spot39 .trigger {
  top: 20%;
  right: 22%;
}
.hotspots .hotspot.spot41 .trigger {
  top: 67%;
  left: 50%;
}
.hotspots .hotspot.spot40 .trigger {
  top: 8%;
  right: 50%;
}
.hotspots .hotspot.spot41 .trigger {
  top: 20%;
  left: 10%;
}
.hotspots .hotspot.spot42 .trigger {
  top: 60%;
  left: 50%;
}
.hotspots .hotspot.spot43 .trigger {
  top: 15%;
  right: 10%;
}

.hotspots .hotspot .trigger {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: #e30613;
  color: #EEE6F0;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 0 0 0 #ff2255;
  transition: box-shadow 0.4s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 0.7;
}
.hotspots .hotspot .trigger:after {
 background: #774542;
 box-shadow: 0 0 0 8px rgba(255, 34, 85, 0.5);
}

.hotspots .hotspot .trigger:hover {
  box-shadow: 0 0 0 8px rgba(255, 34, 85, 0.5);
}
.hotspots .hotspot .content {
  position: absolute;
  bottom: 60%;
  left: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s;
}

.hotspots .hotspot .content figure {
  position: relative;
  width: 100%;
  z-index: 2;
  opacity: 0;
  -webkit-transform: translate(0, -10%);
  transform: translate(0, -10%);
  transition: opacity 0.6s, -webkit-transform 0.6s;
  transition: transform 0.6s, opacity 0.6s;
  transition: transform 0.6s, opacity 0.6s, -webkit-transform 0.6s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hotspots .hotspot .content figure::before {
  content: "\f057";
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 12px;
  right: 12px;
  color: #EEE6F0;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  background: rgba(227, 6, 19, 0.8);
  font-size: 20px;
  pointer-events: all;
  cursor: pointer;
  font-family: "Font Awesome 5 Free";
}
.hotspots .hotspot .content figure img {
  width: 100%;
}
.hotspots .hotspot .content figure figcaption {
  position: aboslute;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  top: 80%;
  width: 100%;
  padding: 16px;
  background: rgba(227, 6, 19, 0.8);
  color: white;
  pointer-events: none;
  font-size: 18px;
}
.hotspots .hotspot.reveal {
  z-index: 1;
  pointer-events: all;
}
.hotspots .hotspot.reveal .content {
  opacity: 1;
}
.hotspots .hotspot.reveal .content::before {
  opacity: 1;
}
.hotspots .hotspot.reveal .content figure {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  transition-delay: 0.4s;
  pointer-events: all;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hotspots .hotspot.reveal .content figure figcaption {
  pointer-events: all;
}


@media( max-width: 768px ){
  .hotspots .hotspot .content figure {
    width: 100%; 
  }
  .hotspots .hotspot .content figure figcaption {
    position: relative;
  }
  .hotspots .hotspot .content figure::before {
    top: -30px;
    right: auto;
  }
}