.circle-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 46vw;
  height: 46vw;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 100%;
}
.circle-container:active .circle-1 {
  width: 15.42%;
  height: 15.42%;
  opacity: 1;
}
.circle-container:active .circle-2 {
  width: 43%;
  height: 43%;
  opacity: 0.6;
}
.circle-container:active .circle-3 {
  width: 90%;
  height: 90%;
  opacity: 0.3;
}

.circle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  -webkit-transition: height 0.15s ease-in-out, width 0.15s ease-in-out;
  transition: height 0.15s ease-in-out, width 0.15s ease-in-out;
}

.circle-1 {
  width: 18.42%;
  height: 18.42%;
  opacity: 1;
}

.circle-2 {
  width: 50%;
  height: 50%;
  opacity: 0.6;
}

.circle-3 {
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

.swipe-area {
  width: 100%;
  height: 100vh;
  z-index: 2;
  position: absolute;
}/*# sourceMappingURL=touch.css.map */