.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;
}
.qDiffFinder .qAlteredImg span[data-diff-id=d01] {
  left: 47%;
  top: 84%;
  width: 11%;
  height: 11.601%;
}
.qDiffFinder .qAlteredImg span[data-diff-id=d02] {
  top: 65%;
  left: 61%;
  width: 11%;
  height: 11.601%;
}
.qDiffFinder .qAlteredImg span[data-diff-id=d03] {
  top: 21%;
  left: 20%;
  width: 53%;
  height: 12%;
}
.qDiffFinder .qAlteredImg span[data-diff-id=d04] {
  top: 0;
  left: 80%;
  height: 41%;
  width: 12%;
}
.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: #76BD22;
}
@media (max-width: 767.98px) {
  .qDiffFinder {
    display: block;
  }
  .qDiffFinder .qDiffImg {
    width: 100%;
  }
  .qDiffFinder .qAlteredImg {
    margin-top: 15px;
  }
}

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