.qDiffFinder {
  width: 90%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.qDiffFinder .qDiffImg {
  width: calc(50% - 10px);
}
.qDiffFinder .qDiffImg img {
  display: block;
  width: 100%;
}
.qDiffFinder .qAlteredImg {
  position: relative;
}
.qDiffFinder .qAlteredImg span {
  width: 32px;
  height: 32px;
  position: absolute;
  border: 2px solid;
  opacity: 0;
  transition: 0.3s ease;
  border-radius: 50%;
}
.qDiffFinder .qAlteredImg span[data-diff-id=d01] {
  left: 71%;
    top: 10%;
  /* width: 17%; */
  width: 52px;
  height: 52px;
  /* height: 11.601%; */
  width: 52px;
  height: 52px;
}
.qDiffFinder .qAlteredImg span[data-diff-id=d02] {
  top: 40%;
  left: 78%;
  width: 52px;
  height: 52px;
  width: 52px;
  height: 52px;
}
.qDiffFinder .qAlteredImg span[data-diff-id=d03] {
  top: 49%;
  left: 58%;
  width: 52px;
  height: 52px;
  width: 52px;
  height: 52px;
}
.qDiffFinder .qAlteredImg span[data-diff-id=d04] {
  top: 55%;
  left: 32%;
  width: 52px;
  height: 52px;
  width: 52px;
  height: 52px;
}
.qDiffFinder .qAlteredImg span[data-diff-id=d05] {
  top: 19%;
  left: 4%;
  width: 52px;
  height: 52px;
  width: 52px;
  height: 52px;
}
.qDiffFinder .qAlteredImg span[data-wrong-click] {
  opacity: 1;
  border-color: #C80000;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.qDiffFinder .qAlteredImg span[data-diff-found=true] {
  opacity: 1;
  pointer-events: none;
  border-color: #00e47c;
}
@media (max-width: 767.98px) {
  .qDiffFinder {
    display: block;
  }
  .qDiffFinder .qDiffImg {
    width: 100%;
  }
  .qDiffFinder .qAlteredImg {
    margin-top: 15px;
  }
}

/*# sourceMappingURL=quiz-diff-finder.css.map */