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


.js-tab-face,
.js-tab-body{
  cursor:pointer;
}
.js-proc-row-1,
.js-proc-row-2,
.js-proc-row-3,
.js-proc-row-4{
  cursor:pointer;
  opacity:.6;
  position:relative;
  transition:opacity .2s ease;
}
.js-proc-row-1.active,
.js-proc-row-2.active,
.js-proc-row-3.active,
.js-proc-row-4.active{
  opacity:1;
}
.js-proc-row-1::after,
.js-proc-row-2::after,
.js-proc-row-3::after,
.js-proc-row-4::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-3px;
  height:1px;
  width:0%;
  background:#7F6F66;
  transition:width .35s ease;
}


.js-tab-female::after,
.js-tab-male::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  height:1px;
  background:#BAA599;
  transition:width .3s ease;
}
.js-tab-face::after,
.js-tab-body::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  height:1px;
  width:0%;
  background:#7F6F66;
  transition:width .3s ease;
}
.js-tab-face.active::after,
.js-tab-body.active::after{
  width:100%;
}

.js-proc-row-1.active::after,
.js-proc-row-2.active::after,
.js-proc-row-3.active::after,
.js-proc-row-4.active::after{
  width:100%;
}
.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:1px 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-stage-face-female,
.js-stage-body-female,
.js-stage-face-male,
.js-stage-body-male{
  opacity:1;
  transform:scale(1);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:auto;
}
.js-stage-face-female.is-hidden,
.js-stage-body-female.is-hidden,
.js-stage-face-male.is-hidden,
.js-stage-body-male.is-hidden{
  opacity:0;
  transform:scale(.97);
  pointer-events:none;
}

.js-tab-female,
.js-tab-male{
  cursor:pointer;
  padding-bottom:4px;
}
.js-tab-female::after,
.js-tab-male::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  height:1px;
  background:#BAA599;
  transition:width .3s ease;
}
.js-tab-female.active::after,
.js-tab-male.active::after{
  width:100%;
}