.page-hexagon-title { width: 5.104167vw; }

@keyframes scene-transition {0%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff -10deg,transparent 10deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff -10deg,transparent 10deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}2.7027027027%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 0deg,transparent 20deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 0deg,transparent 20deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}5.4054054054%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 10deg,transparent 30deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 10deg,transparent 30deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}8.1081081081%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 20deg,transparent 40deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 20deg,transparent 40deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}10.8108108108%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 30deg,transparent 50deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 30deg,transparent 50deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}13.5135135135%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 40deg,transparent 60deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 40deg,transparent 60deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}16.2162162162%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 50deg,transparent 70deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 50deg,transparent 70deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}18.9189189189%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 60deg,transparent 80deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 60deg,transparent 80deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}21.6216216216%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 70deg,transparent 90deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 70deg,transparent 90deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}24.3243243243%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 80deg,transparent 100deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 80deg,transparent 100deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}27.027027027%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 90deg,transparent 110deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 90deg,transparent 110deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}29.7297297297%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 100deg,transparent 120deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 100deg,transparent 120deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}32.4324324324%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 110deg,transparent 130deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 110deg,transparent 130deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}35.1351351351%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 120deg,transparent 140deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 120deg,transparent 140deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}37.8378378378%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 130deg,transparent 150deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 130deg,transparent 150deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}40.5405405405%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 140deg,transparent 160deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 140deg,transparent 160deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}43.2432432432%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 150deg,transparent 170deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 150deg,transparent 170deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}45.9459459459%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 160deg,transparent 180deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 160deg,transparent 180deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}48.6486486486%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 170deg,transparent 190deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 170deg,transparent 190deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}51.3513513514%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 180deg,transparent 200deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 180deg,transparent 200deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}54.0540540541%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 190deg,transparent 210deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 190deg,transparent 210deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}56.7567567568%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 200deg,transparent 220deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 200deg,transparent 220deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}59.4594594595%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 210deg,transparent 230deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 210deg,transparent 230deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}62.1621621622%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 220deg,transparent 240deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 220deg,transparent 240deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}64.8648648649%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 230deg,transparent 250deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 230deg,transparent 250deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}67.5675675676%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 240deg,transparent 260deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 240deg,transparent 260deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}70.2702702703%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 250deg,transparent 270deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 250deg,transparent 270deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}72.972972973%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 260deg,transparent 280deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 260deg,transparent 280deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}75.6756756757%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 270deg,transparent 290deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 270deg,transparent 290deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}78.3783783784%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 280deg,transparent 300deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 280deg,transparent 300deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}81.0810810811%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 290deg,transparent 310deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 290deg,transparent 310deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}83.7837837838%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 300deg,transparent 320deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 300deg,transparent 320deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}86.4864864865%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 310deg,transparent 330deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 310deg,transparent 330deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}89.1891891892%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 320deg,transparent 340deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 320deg,transparent 340deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}91.8918918919%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 330deg,transparent 350deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 330deg,transparent 350deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}94.5945945946%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 340deg,transparent 360deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 340deg,transparent 360deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}97.2972972973%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 350deg,transparent 370deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 350deg,transparent 370deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}100%{-webkit-mask-image:conic-gradient(#fff 0deg,#fff 360deg,transparent 380deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg);mask-image:conic-gradient(#fff 0deg,#fff 360deg,transparent 380deg,transparent 360deg),conic-gradient(transparent 360deg,#fff 30deg)}}

@keyframes linear-gradient-transition {
  0% {
      -webkit-mask-image: linear-gradient(to left, transparent 48%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 48%, #fff 0%);
  }
  5% {
      -webkit-mask-image: linear-gradient(to left, transparent 45.6%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 44%, #fff 0%);
  }
  10% {
      -webkit-mask-image: linear-gradient(to left, transparent 40%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 40%, #fff 0%);
  }
  15% {
      -webkit-mask-image: linear-gradient(to left, transparent 43.2%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 36%, #fff 0%);
  }
  20% {
      -webkit-mask-image: linear-gradient(to left, transparent 40.8%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 32%, #fff 0%);
  }
  25% {
      -webkit-mask-image: linear-gradient(to left, transparent 38.4%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 28%, #fff 0%);
  }
  30% {
      -webkit-mask-image: linear-gradient(to left, transparent 36%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 24%, #fff 0%);
  }
  35% {
      -webkit-mask-image: linear-gradient(to left, transparent 33.6%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 20%, #fff 0%);
  }
  40% {
      -webkit-mask-image: linear-gradient(to left, transparent 31.2%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 16%, #fff 0%);
  }
  45% {
      -webkit-mask-image: linear-gradient(to left, transparent 28.8%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 12%, #fff 0%);
  }
  50% {
      -webkit-mask-image: linear-gradient(to left, transparent 26.4%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 8%, #fff 0%);
  }
  55% {
      -webkit-mask-image: linear-gradient(to left, transparent 24%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 4%, #fff 0%);
  }
  60% {
      -webkit-mask-image: linear-gradient(to left, transparent 21.6%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 2%, #fff 0%);
  }
  65% {
      -webkit-mask-image: linear-gradient(to left, transparent 19.2%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 1%, #fff 0%);
  }
  70% {
      -webkit-mask-image: linear-gradient(to left, transparent 16.8%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 0%, #fff 0%);
  }
  75% {
      -webkit-mask-image: linear-gradient(to left, transparent 12%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 0%, #fff 0%);
  }
  80% {
      -webkit-mask-image: linear-gradient(to left, transparent 9.6%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 0%, #fff 0%);
  }
  85% {
      -webkit-mask-image: linear-gradient(to left, transparent 7.2%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 0%, #fff 0%);
  }
  90% {
      -webkit-mask-image: linear-gradient(to left, transparent 4.8%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 0%, #fff 0%);
  }
  95% {
      -webkit-mask-image: linear-gradient(to left, transparent 2.4%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 0%, #fff 0%);
  }
  100% {
      -webkit-mask-image: linear-gradient(to left, transparent 0%, #fff 0%);
      mask-image: linear-gradient(to left, transparent 0%, #fff 0%);
  }
}

@keyframes linear-gradient-transition-left {
  0% {
      -webkit-mask-image: linear-gradient(to right, transparent 48%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 48%, #fff 0%);
  }
  5% {
      -webkit-mask-image: linear-gradient(to right, transparent 45.6%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 44%, #fff 0%);
  }
  10% {
      -webkit-mask-image: linear-gradient(to left, transparent 40%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 40%, #fff 0%);
  }
  15% {
      -webkit-mask-image: linear-gradient(to right, transparent 43.2%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 36%, #fff 0%);
  }
  20% {
      -webkit-mask-image: linear-gradient(to right, transparent 40.8%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 32%, #fff 0%);
  }
  25% {
      -webkit-mask-image: linear-gradient(to right, transparent 38.4%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 28%, #fff 0%);
  }
  30% {
      -webkit-mask-image: linear-gradient(to right, transparent 36%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 24%, #fff 0%);
  }
  35% {
      -webkit-mask-image: linear-gradient(to right, transparent 33.6%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 20%, #fff 0%);
  }
  40% {
      -webkit-mask-image: linear-gradient(to right, transparent 31.2%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 16%, #fff 0%);
  }
  45% {
      -webkit-mask-image: linear-gradient(to right, transparent 28.8%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 12%, #fff 0%);
  }
  50% {
      -webkit-mask-image: linear-gradient(to right, transparent 26.4%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 8%, #fff 0%);
  }
  55% {
      -webkit-mask-image: linear-gradient(to right, transparent 24%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 4%, #fff 0%);
  }
  60% {
      -webkit-mask-image: linear-gradient(to right, transparent 21.6%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 2%, #fff 0%);
  }
  65% {
      -webkit-mask-image: linear-gradient(to right, transparent 19.2%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 1%, #fff 0%);
  }
  70% {
      -webkit-mask-image: linear-gradient(to right, transparent 16.8%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 0%, #fff 0%);
  }
  75% {
      -webkit-mask-image: linear-gradient(to right, transparent 12%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 0%, #fff 0%);
  }
  80% {
      -webkit-mask-image: linear-gradient(to right, transparent 9.6%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 0%, #fff 0%);
  }
  85% {
      -webkit-mask-image: linear-gradient(to right, transparent 7.2%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 0%, #fff 0%);
  }
  90% {
      -webkit-mask-image: linear-gradient(to right, transparent 4.8%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 0%, #fff 0%);
  }
  95% {
      -webkit-mask-image: linear-gradient(to right, transparent 2.4%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 0%, #fff 0%);
  }
  100% {
      -webkit-mask-image: linear-gradient(to right, transparent 0%, #fff 0%);
      mask-image: linear-gradient(to right, transparent 0%, #fff 0%);
  }
}

@keyframes linear-gradient-transition-bottom {
  0% {
      -webkit-mask-image: linear-gradient(to top, transparent 100%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 100%, #fff 0%);
  }
  5% {
      -webkit-mask-image: linear-gradient(to top, transparent 95%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 95%, #fff 0%);
  }
  10% {
      -webkit-mask-image: linear-gradient(to top, transparent 90%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 90%, #fff 0%);
  }
  15% {
      -webkit-mask-image: linear-gradient(to top, transparent 85%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 85%, #fff 0%);
  }
  20% {
      -webkit-mask-image: linear-gradient(to top, transparent 80%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 80%, #fff 0%);
  }
  25% {
      -webkit-mask-image: linear-gradient(to top, transparent 75%, #fff 25%);
      mask-image: linear-gradient(to top, transparent 75%, #fff 0%);
  }
  30% {
      -webkit-mask-image: linear-gradient(to top, transparent 70%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 70%, #fff 0%);
  }
  35% {
      -webkit-mask-image: linear-gradient(to top, transparent 65%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 65%, #fff 0%);
  }
  40% {
      -webkit-mask-image: linear-gradient(to top, transparent 60%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 60%, #fff 0%);
  }
  45% {
      -webkit-mask-image: linear-gradient(to top, transparent 55%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 55%, #fff 0%);
  }
  50% {
      -webkit-mask-image: linear-gradient(to top, transparent 50%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 50%, #fff 0%);
  }
  55% {
      -webkit-mask-image: linear-gradient(to top, transparent 45%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 45%, #fff 0%);
  }
  60% {
      -webkit-mask-image: linear-gradient(to top, transparent 40%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 40%, #fff 0%);
  }
  65% {
      -webkit-mask-image: linear-gradient(to top, transparent 35%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 35%, #fff 0%);
  }
  70% {
      -webkit-mask-image: linear-gradient(to top, transparent 30%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 30%, #fff 0%);
  }
  75% {
      -webkit-mask-image: linear-gradient(to top, transparent 25%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 25%, #fff 0%);
  }
  80% {
      -webkit-mask-image: linear-gradient(to top, transparent 20%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 20%, #fff 0%);
  }
  85% {
      -webkit-mask-image: linear-gradient(to top, transparent 15%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 15%, #fff 0%);
  }
  90% {
      -webkit-mask-image: linear-gradient(to top, transparent 10%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 10%, #fff 0%);
  }
  95% {
      -webkit-mask-image: linear-gradient(to top, transparent 5%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 5%, #fff 0%);
  }
  100% {
      -webkit-mask-image: linear-gradient(to top, transparent 0%, #fff 0%);
      mask-image: linear-gradient(to top, transparent 0%, #fff 0%);
  }
}

.page-hexagon-title { left: 8.333333vw; }

.process-wrapper { width: 64.583333vw; margin-top: -6vh; }

.process-title { font-size: 1.458333vw; }

.process-list-wrap { position: relative; }

.process-list-wrap--before {
  position: absolute; top: 16.5%; left: 11.5%;
  width: 100%; height: 57%; pointer-events: none; 
}

.process-list-wrap--before > svg {
  display: block; height: 100%; margin-left: auto;
}

.process-list { margin-top: 9.259259vh; }

.process-list + .process-list { margin-top: 6.388888vh; }

.process-item { position: relative; }

.process-item + .process-item { padding: 0px 0px 0px 3.645833vw; }

.process-item + .process-item::before,
.process-list + .process-list .process-item + .process-item::after {
  content: ""; pointer-events: none; 
  position: absolute; top: 38%; left: 0;
  width: 3.645833vw; height: 1.5px;
  background-image: linear-gradient(to right, black 50%, transparent 50%);
  background-size: 6px 100%;
}

.process-list + .process-list .process-item + .process-item {
  padding: 0px 3.645833vw 0px 0px;
}

.process-list + .process-list .process-item + .process-item::before { content: unset; }

.process-list + .process-list .process-item + .process-item::after { left: unset; right: 0; }

.process-item [aspect-ratio="1/1"] { width: 7.708333vw; }

.process-item .process-item-content { font-size: 1.25vw; padding: 5px; }

.process-item .process-circle {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border: 1px solid #992C2C; 
  border-radius: 50%; padding: 5px;
  pointer-events: none;
}

.process-item .process-inner-circle {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px dashed #992C2C;
}

.process-item .process-item-title {
  width: 3.3em; text-align: center;
}

.process-item .process-item-number {
  font-size: 1.25vw; text-align: center; margin-top: 0.925926vh;
}

.process-item .process-item-title,
.process-item .process-item-number,
.loaded .process-list-wrap--before > svg { visibility: hidden; opacity: 0; }

.process-item .process-circle {
  -webkit-mask-image:
    conic-gradient(#fff 0deg, #fff -20deg, transparent 0deg, transparent 360deg),
    conic-gradient(transparent 360deg, #fff 30deg);
  mask-image:
    conic-gradient(#fff 0deg, #fff -20deg, transparent 0deg, transparent 360deg),
    conic-gradient(transparent 360deg, #fff 30deg);

  -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}

.process-list .process-item::before {
  -webkit-mask-image: linear-gradient(to left, transparent 48%, #fff 0%);
  -webkit-mask-size: 210%;
  -webkit-mask-position: right;
  mask-image: linear-gradient(to left, transparent 48%, #fff 0%);
  mask-size: 210%;
  mask-position: right;
}

.process-list + .process-list .process-item::after {
  -webkit-mask-image: linear-gradient(to right, transparent 48%, #fff 0%);
  -webkit-mask-size: 210%;
  -webkit-mask-position: left;
  mask-image: linear-gradient(to right, transparent 48%, #fff 0%);
  mask-size: 210%;
  mask-position: left;
}

.loaded .process-item .process-circle {
  -webkit-animation: scene-transition 1s linear forwards;
  animation: scene-transition 1s linear forwards;
}

.loaded .process-list .process-item::before {
  -webkit-animation: linear-gradient-transition 0.5s linear forwards;
  animation: linear-gradient-transition 0.5s linear forwards;
}

.loaded .process-list + .process-list .process-item::after {
  -webkit-animation: linear-gradient-transition-left 0.5s linear forwards;
  animation: linear-gradient-transition-left 0.5s linear forwards;
}

.loaded .process-item .process-item-title,
.loaded .process-item .process-item-number,
.loaded .process-list-wrap--before > svg {
  -webkit-animation: fadeIn 1s ease-in-out forwards;
  animation: fadeIn 1s ease-in-out forwards;
}

.loaded .process-list-wrap--before > svg {
  -webkit-animation-delay: 8s; animation-delay: 8s;
}

.loaded .process-item:nth-child(1) .process-item-title,
.loaded .process-item:nth-child(1) .process-item-number {
  -webkit-animation-delay: .5s; animation-delay: .5s;
}

.loaded .process-item:nth-child(2)::before {
  -webkit-animation-delay: 1s; animation-delay: 1s;
}

.loaded .process-item:nth-child(2) .process-circle {
  -webkit-animation-delay: 1.5s; animation-delay: 1.5s;
}

.loaded .process-item:nth-child(2) .process-item-title,
.loaded .process-item:nth-child(2) .process-item-number {
  -webkit-animation-delay: 2s; animation-delay: 2s;
}

.loaded .process-item:nth-child(3)::before {
  -webkit-animation-delay: 2.5s; animation-delay: 2.5s;
}

.loaded .process-item:nth-child(3) .process-circle {
  -webkit-animation-delay: 3s; animation-delay: 3s;
}

.loaded .process-item:nth-child(3) .process-item-title,
.loaded .process-item:nth-child(3) .process-item-number {
  -webkit-animation-delay: 3.5s; animation-delay: 3.5s;
}

.loaded .process-item:nth-child(4)::before {
  -webkit-animation-delay: 4s; animation-delay: 4s;
}

.loaded .process-item:nth-child(4) .process-circle {
  -webkit-animation-delay: 4.5s; animation-delay: 4.5s;
}

.loaded .process-item:nth-child(4) .process-item-title,
.loaded .process-item:nth-child(4) .process-item-number {
  -webkit-animation-delay: 5s; animation-delay: 5s;
}

.loaded .process-item:nth-child(5)::before {
  -webkit-animation-delay: 5.5s; animation-delay: 5.5s;
}

.loaded .process-item:nth-child(5) .process-circle {
  -webkit-animation-delay: 6s; animation-delay: 6s;
}

.loaded .process-item:nth-child(5) .process-item-title,
.loaded .process-item:nth-child(5) .process-item-number {
  -webkit-animation-delay: 6.5s; animation-delay: 6.5s;
}

.loaded .process-item:nth-child(6)::before {
  -webkit-animation-delay: 7s; animation-delay: 7s;
}

.loaded .process-item:nth-child(6) .process-circle {
  -webkit-animation-delay: 7.5s; animation-delay: 7.5s;
}

.loaded .process-item:nth-child(6) .process-item-title,
.loaded .process-item:nth-child(6) .process-item-number {
  -webkit-animation-delay: 8s; animation-delay: 8s;
}

.loaded .process-list + .process-list .process-item:nth-child(1) .process-circle {
  -webkit-animation-delay: 9s; animation-delay: 9s;
}

.loaded .process-list + .process-list .process-item:nth-child(1) .process-item-title,
.loaded .process-list + .process-list .process-item:nth-child(1) .process-item-number {
  -webkit-animation-delay: 9.5s; animation-delay: 9.5s;
}

.loaded .process-list + .process-list .process-item:nth-child(2)::after {
  -webkit-animation-delay: 10s; animation-delay: 10s;
}

.loaded .process-list + .process-list .process-item:nth-child(2) .process-circle {
  -webkit-animation-delay: 10.5s; animation-delay: 10.5s;
}

.loaded .process-list + .process-list .process-item:nth-child(2) .process-item-title,
.loaded .process-list + .process-list .process-item:nth-child(2) .process-item-number {
  -webkit-animation-delay: 11s; animation-delay: 11s;
}

.loaded .process-list + .process-list .process-item:nth-child(3)::after {
  -webkit-animation-delay: 11.5s; animation-delay: 11.5s;
}

.loaded .process-list + .process-list .process-item:nth-child(3) .process-circle {
  -webkit-animation-delay: 12s; animation-delay: 12s;
}

.loaded .process-list + .process-list .process-item:nth-child(3) .process-item-title,
.loaded .process-list + .process-list .process-item:nth-child(3) .process-item-number {
  -webkit-animation-delay: 12.5s; animation-delay: 12.5s;
}

.loaded .process-list + .process-list .process-item:nth-child(4)::after {
  -webkit-animation-delay: 13s; animation-delay: 13s;
}

.loaded .process-list + .process-list .process-item:nth-child(4) .process-circle {
  -webkit-animation-delay: 13.5s; animation-delay: 13.5s;
}

.loaded .process-list + .process-list .process-item:nth-child(4) .process-item-title,
.loaded .process-list + .process-list .process-item:nth-child(4) .process-item-number {
  -webkit-animation-delay: 14s; animation-delay: 14s;
}

.loaded .process-list + .process-list .process-item:nth-child(5)::after {
  -webkit-animation-delay: 14.5s; animation-delay: 14.5s;
}

.loaded .process-list + .process-list .process-item:nth-child(5) .process-circle {
  -webkit-animation-delay: 15s; animation-delay: 15s;
}

.loaded .process-list + .process-list .process-item:nth-child(5) .process-item-title,
.loaded .process-list + .process-list .process-item:nth-child(5) .process-item-number {
  -webkit-animation-delay: 15.5s; animation-delay: 15.5s;
}

.loaded .process-list + .process-list .process-item:nth-child(6)::after {
  -webkit-animation-delay: 16s; animation-delay: 16s;
}

.loaded .process-list + .process-list .process-item:nth-child(6) .process-circle {
  -webkit-animation-delay: 16.5s; animation-delay: 16.5s;
}

.loaded .process-list + .process-list .process-item:nth-child(6) .process-item-title,
.loaded .process-list + .process-list .process-item:nth-child(6) .process-item-number {
  -webkit-animation-delay: 17s; animation-delay: 17s;
}

.loaded.played .process-item .process-item-title,
.loaded.played .process-item .process-item-number,
.loaded.played .process-item .process-circle,
.loaded.played .process-item::before,
.loaded.played .process-item::after {
  -webkit-animation: none !important; animation: none !important;
}

.loaded.played .process-item .process-item-title,
.loaded.played .process-item .process-item-number,
.loaded.played .process-list-wrap--before > svg { visibility: visible; opacity: 1; }

.loaded.played .process-list .process-item::before,
.loaded.played .process-list .process-item::after {
  -webkit-mask-image: none !important;
  -webkit-mask-size: 210%;
  -webkit-mask-position: right;
  mask-image: none !important;
  mask-size: 210%;
  mask-position: right;
}

.loaded.played .process-list + .process-list .process-item::before,
.loaded.played .process-list + .process-list .process-item::after {
  -webkit-mask-image: none !important;
  -webkit-mask-size: 210%;
  -webkit-mask-position: left;
  mask-image: none !important;
  mask-size: 210%;
  mask-position: left;
}

.loaded.played .process-item .process-circle {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

@media screen and (max-width: 1024px) {
  .process-item .process-item-title { width: 3.4em; }
}

@media screen and (max-width: 768px) {
  .page-hexagon-title { width: 175px; }

  .fullpage { overflow-y: auto; height: auto; }

  .page-wrapper { height: auto; background-attachment: scroll; }

  .page-content { flex-direction: column; padding: 140px 0px; }

  .process-wrapper { width: calc(100% - 24px); margin: 30px auto 0px; }

  .process-title { font-size: 16px; }

  .process-list { margin-top: 50px; flex-wrap: wrap; justify-content: center; }

  .process-item + .process-item { padding-left: 8vw; }

  .process-list + .process-list { margin-top: 8vw; }

  .process-list + .process-list .process-item + .process-item { padding: 0px 0px 0px 8vw; }

  .process-item + .process-item::before,
  .process-list + .process-list .process-item + .process-item::after {
    width: 8vw; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
  }

  .process-list + .process-list .process-item + .process-item::after { left: 0; }

  .process-item [aspect-ratio="1/1"] { width: 100px; }

  .process-item .process-item-content { font-size: 16px; }

  .process-item .process-item-title { width: 4em; }

  .process-item .process-item-number,
  .process-list-wrap--before { display: none; }

  .process-list .process-item:nth-child(n + 4) { margin-top: 8vw; }

  .process-list .process-item:nth-child(4) { order: 6; }

  .process-list .process-item:nth-child(5) { order: 5; }

  .process-list .process-item:nth-child(6) { order: 4; padding-left: 0px; }

  .process-list + .process-list .process-item:nth-child(6) { padding: 0px; }

  .process-list .process-item:nth-child(6)::before,
  .process-list + .process-list .process-item:nth-child(6)::after { content: unset; }

  .process-list .process-item:nth-child(6)::after,
  .process-list .process-item:nth-child(4)::after,
  .loaded .process-list + .process-list .process-item:nth-child(4)::before {
    content: ""; position: absolute; top: 0; left: 63%;
    width: 1.5px; height: 8vw;
    background-image: linear-gradient(to bottom, black 50%, transparent 50%);
    background-size: 100% 6px;
    transform: translate(0, -100%);
  }

  .process-list .process-item:nth-child(6)::after {
    top: unset; left: 50%; bottom: 0; transform: translate(0, 100%);
  }

  .process-list.flex-row-reverse { flex-direction: row; }

  .process-list .process-item:nth-child(n + 4)::before {
    -webkit-mask-image: linear-gradient(to right, transparent 48%, #fff 0%);
    -webkit-mask-size: 210%;
    -webkit-mask-position: left;
    mask-image: linear-gradient(to right, transparent 48%, #fff 0%);
    mask-size: 210%;
    mask-position: left;
  }

  .loaded .process-item:nth-child(n + 4)::before {
    -webkit-animation: linear-gradient-transition-left 0.5s linear forwards;
    animation: linear-gradient-transition-left 0.5s linear forwards;
  }

  .process-list .process-item:nth-child(6)::after,
  .loaded .process-item:nth-child(4)::after,
  .loaded .process-list + .process-list .process-item:nth-child(4)::before {
    -webkit-mask-image: linear-gradient(to top, transparent 100%, #fff 0%);
    -webkit-mask-size: 210%;
    -webkit-mask-position: left;
    mask-image: linear-gradient(to top, transparent 100%, #fff 0%);
    mask-size: 210%;
    mask-position: left;
  }

  .process-list .process-item:nth-child(6)::after,
  .loaded .process-item:nth-child(4)::after,
  .loaded .process-list + .process-list .process-item:nth-child(4)::before {
    -webkit-animation: linear-gradient-transition-bottom 0.5s 4s linear forwards;
    animation: linear-gradient-transition-bottom 0.5s 4s linear forwards;
  }
  
  .loaded .process-item:nth-child(4) .process-circle {
    -webkit-animation-delay: 4.5s; animation-delay: 4.5s;
  }
  
  .loaded .process-item:nth-child(4) .process-item-title,
  .loaded .process-item:nth-child(4) .process-item-number {
    -webkit-animation-delay: 5s; animation-delay: 5s;
  }

  .loaded .process-item:nth-child(4)::before {
    -webkit-animation-delay: 5.5s; animation-delay: 5.5s;
  }

  .loaded .process-item:nth-child(5) .process-circle {
    -webkit-animation-delay: 6s; animation-delay: 6s;
  }
  
  .loaded .process-item:nth-child(5) .process-item-title,
  .loaded .process-item:nth-child(5) .process-item-number {
    -webkit-animation-delay: 6.5s; animation-delay: 6.5s;
  }

  .loaded .process-item:nth-child(5)::before {
    -webkit-animation-delay: 7s; animation-delay: 7s;
  }

  .loaded .process-item:nth-child(6) .process-circle {
    -webkit-animation-delay: 7.5s; animation-delay: 7.5s;
  }
  
  .loaded .process-item:nth-child(6) .process-item-title,
  .loaded .process-item:nth-child(6) .process-item-number {
    -webkit-animation-delay: 8s; animation-delay: 8s;
  }

  .loaded .process-list .process-item:nth-child(6)::after {
    -webkit-animation-delay: 8.5s; animation-delay: 8.5s;
  }

  .loaded .process-list + .process-list .process-item:nth-child(1) .process-circle {
    -webkit-animation-delay: 9s; animation-delay: 9s;
  }

  .loaded .process-list + .process-list .process-item:nth-child(1) .process-item-title,
  .loaded .process-list + .process-list .process-item:nth-child(1) .process-item-number {
    -webkit-animation-delay: 9.5s; animation-delay: 9.5s;
  }

  .process-list + .process-list .process-item:nth-child(2):after,
  .process-list + .process-list .process-item:nth-child(3):after {
    -webkit-mask-image: linear-gradient(to left, transparent 48%, #fff 0%);
    -webkit-mask-size: 210%;
    -webkit-mask-position: right;
    mask-image: linear-gradient(to left, transparent 48%, #fff 0%);
    mask-size: 210%;
    mask-position: right;
  }

  .loaded .process-list + .process-list .process-item:nth-child(2)::after {
    -webkit-animation: linear-gradient-transition 0.5s 10s linear forwards;
    animation: linear-gradient-transition 0.5s 10s linear forwards;
  }

  .loaded .process-list + .process-list .process-item:nth-child(2) .process-circle {
    -webkit-animation-delay: 10.5s; animation-delay: 10.5s;
  }

  .loaded .process-list + .process-list .process-item:nth-child(2) .process-item-title,
  .loaded .process-list + .process-list .process-item:nth-child(2) .process-item-number {
    -webkit-animation-delay: 11s; animation-delay: 11s;
  }

  .loaded .process-list + .process-list .process-item:nth-child(3)::after {
    -webkit-animation: linear-gradient-transition 0.5s 11.5s linear forwards;
    animation: linear-gradient-transition 0.5s 11.5s linear forwards;
  }

  .loaded .process-list + .process-list .process-item:nth-child(3) .process-circle {
    -webkit-animation-delay: 12s; animation-delay: 12s;
  }
  
  .loaded .process-list + .process-list .process-item:nth-child(3) .process-item-title,
  .loaded .process-list + .process-list .process-item:nth-child(3) .process-item-number {
    -webkit-animation-delay: 12.5s; animation-delay: 12.5s;
  }

  .loaded .process-list + .process-list .process-item:nth-child(4)::before {
    -webkit-animation: linear-gradient-transition-bottom 0.5s 13s linear forwards;
    animation: linear-gradient-transition-bottom 0.5s 13s linear forwards;
  }

  .loaded .process-list + .process-list .process-item:nth-child(4) .process-circle {
    -webkit-animation-delay: 13.5s; animation-delay: 13.5s;
  }
  
  .loaded .process-list + .process-list .process-item:nth-child(4) .process-item-title,
  .loaded .process-list + .process-list .process-item:nth-child(4) .process-item-number {
    -webkit-animation-delay: 14s; animation-delay: 14s;
  }

  .loaded .process-list + .process-list .process-item:nth-child(4)::after {
    -webkit-animation-delay: 14.5s; animation-delay: 14.5s;
  }

  .loaded .process-list + .process-list .process-item:nth-child(5) .process-circle {
    -webkit-animation-delay: 15s; animation-delay: 15s;
  }
  
  .loaded .process-list + .process-list .process-item:nth-child(5) .process-item-title,
  .loaded .process-list + .process-list .process-item:nth-child(5) .process-item-number {
    -webkit-animation-delay: 15.5s; animation-delay: 15.5s;
  }

  .loaded .process-list + .process-list .process-item:nth-child(5)::after {
    -webkit-animation-delay: 16s; animation-delay: 16s;
  }

  .loaded .process-list + .process-list .process-item:nth-child(6) .process-circle {
    -webkit-animation-delay: 16.5s; animation-delay: 16.5s;
  }

  .loaded .process-list + .process-list .process-item:nth-child(6) .process-item-title,
  .loaded .process-list + .process-list .process-item:nth-child(6) .process-item-number {
    -webkit-animation-delay: 17s; animation-delay: 17s;
  }
}