body {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}



.js-dot{
  cursor:pointer;
  border-radius:50%;
  transition:transform .25s ease;
}
.js-dot:hover{
  transform:scale(1.15);
}
.js-dot.active{
  transform:scale(1.3);
}

.js-dot::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:34px;
  height:34px;
  border:1.5px solid #F9F6F4;
  border-radius:50%;
  background:transparent;
  transform:translate(-50%, -50%) scale(0);
  opacity:0;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
  pointer-events:none;
}
.js-dot.active::after{
  transform:translate(-50%, -50%) scale(1);
  opacity:1;
}

.js-popup{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.js-popup.is-open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.js-proc-row-1.active,
.js-proc-row-2.active,
.js-proc-row-3.active{
  background:#bda08a;
}