.tooltip {
  z-index: 999;
  width: 2.2em;
  height: 2.2em;
  cursor: pointer;
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
  margin-top: -62px;
  position: relative;
}

/* Trigger item */

.tooltip-item {
  width: 40px;
  height: 40px;
  left: 50%;
  top: 50%;
  margin: -18px 0 0 -15px;
  position: absolute;
  border-radius: 50%;
  border: 5px solid #ffd800;
  -webkit-animation: pulse 0.6s infinite alternate;
  animation: pulse 0.6s infinite alternate;
  cursor: pointer;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(0.5, 0.5, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tooltip:hover .tooltip-item {
  border-color: #ffd800;
}

.tooltip:first-child {
  top: -188px;
  left: -85px;
}

.tooltip:nth-child(2) {
  top: 50%;
  left: 10%;
}

.tooltip:nth-child(3) {
  top: 40%;
  left: 50%;
}

.tooltip:nth-child(4) {
  top: 70%;
  left: 70%;
}

/* Tooltip */

.tooltip-content {
  position: absolute;
  background: #e35583;
  z-index: 9999;
  width: 300px;
  bottom: 110%;
  margin-bottom: -1em;
  padding: 30px;
  border-radius: 100px;
  font-size: 1.6em;
  text-align: center;
  color: #fff;
  opacity: 0;
  cursor: default;
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
  -webkit-transition:
    opacity 0.3s,
    -webkit-transform 0.3s;
  transition:
    opacity 0.3s,
    transform 0.3s;
  corner-shape: squircle;
}

.tooltip-west .tooltip-content {
  left: 4em;
  -webkit-transform-origin: -2em 50%;
  transform-origin: -2em 50%;
  -webkit-transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, 30deg);
  transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, 30deg);
}

.tooltip-east .tooltip-content {
  right: 4em;
  -webkit-transform-origin: calc(100% + 2em) 50%;
  transform-origin: calc(100% + 2em) 50%;
  -webkit-transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, -30deg);
  transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, -30deg);
}

.tooltip:hover .tooltip-content {
  opacity: 1;
  -webkit-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 0, 0);
  transform: translate3d(0, 50%, 0) rotate3d(0, 0, 0, 0);
  pointer-events: auto;
}

/* Gap "bridge" and arrow */

.tooltip-content::before,
.tooltip-content::after {
  content: "";
  position: absolute;
}

.tooltip-content::before {
  height: 100%;
  width: 3em;
}

.tooltip-content::after {
  width: 2em;
  height: 2em;
  top: 50%;
  margin: -1em 0 0;
  background: url(../img/tooltip2.svg) no-repeat center center;
  background-size: 100%;
}

.tooltip-west .tooltip-content::before,
.tooltip-west .tooltip-content::after {
  right: 99%; /* because of FF, otherwise we have a gap */
}

.tooltip-east .tooltip-content::before,
.tooltip-east .tooltip-content::after {
  left: 99%; /* because of FF, otherwise we have a gap */
}

.tooltip-east .tooltip-content::after {
  -webkit-transform: scale3d(-1, 1, 1);
  transform: scale3d(-1, 1, 1);
}