@keyframes movepoint {
  to {
    transform: translate(-571px, 89px);
  }
}
@keyframes fadein {
  to {
    opacity: 1;
  }
}
@keyframes fadeinwithclip {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
  }
}
@keyframes fadeout {
  to {
    opacity: 0;
  }
}
@keyframes fadeinout {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    clip-path: inset(0);
  }
  55% {
    opacity: 0;
    clip-path: inset(45% 0 55% 0);
  }
}
@keyframes fadeinouttext {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes partialfadeinouttext {
  0% {
    opacity: 0.5;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes rotatedial {
  0% {
    transform: rotate(30deg);
  }
  30% {
    transform: rotate(160deg);
  }
  40% {
    transform: rotate(160deg);
  }
  80% {
    transform: rotate(-100deg);
  }
  100% {
    transform: rotate(-100deg);
  }
}
@keyframes risklevelbar {
  0% {
    clip-path: polygon(0px 0px, 0px 332px, 6px 332px, 6px 6px, 83px 6px, 83px 150px, 6px 150px, 6px 332px, 89px 332px, 89px 0px);
  }
  30% {
    clip-path: polygon(0px 0px, 0px 332px, 6px 332px, 6px 6px, 83px 6px, 83px 326px, 6px 326px, 6px 332px, 89px 332px, 89px 0px);
  }
  40% {
    clip-path: polygon(0px 0px, 0px 332px, 6px 332px, 6px 6px, 83px 6px, 83px 326px, 6px 326px, 6px 332px, 89px 332px, 89px 0px);
  }
  80% {
    clip-path: polygon(0px 0px, 0px 332px, 6px 332px, 6px 6px, 83px 6px, 83px 6px, 6px 6px, 6px 332px, 89px 332px, 89px 0px);
  }
  100% {
    clip-path: polygon(0px 0px, 0px 332px, 6px 332px, 6px 6px, 83px 6px, 83px 6px, 6px 6px, 6px 332px, 89px 332px, 89px 0px);
  }
}
@keyframes equityallocationbar {
  0% {
    scale: 1;
  }
  30% {
    scale: 0.8;
  }
  40% {
    scale: 0.8;
  }
  80% {
    scale: 1.3;
  }
  100% {
    scale: 1.3;
  }
}
@keyframes treasuriesallocationbar {
  0% {
    scale: 1;
  }
  30% {
    scale: 1.3;
  }
  40% {
    scale: 1.3;
  }
  80% {
    scale: 0.8;
  }
  100% {
    scale: 0.8;
  }
}
body {
  margin: 0;
}

#scene-howitworks {
  height: 300vh; /* scene duration */
  overflow: visible; /* allows sticky to stop being sticky at the bottom of container */
  view-timeline-name: --section-pin-tl; /* name of scroll animation timeline */
  view-timeline-axis: block;
}

.box {
  height: 100vh;
  background-color: white;
  position: sticky;
  top: 0;
  overflow-x: hidden; /* hide horizontal overflow of child container */
}

.scene-fadein {
  opacity: 0;
  will-change: opacity;
  animation: linear fadein forwards;
  animation-timeline: --section-pin-tl;
}

.scene-fadeout {
  will-change: opacity;
  animation: linear fadeout forwards;
  animation-timeline: --section-pin-tl;
}

.scene-fadeinwithclip {
  opacity: 0;
  will-change: opacity, clip-path;
  animation: linear fadeinwithclip forwards;
  animation-timeline: --section-pin-tl;
}

.scene-rotate-dial {
  transform: rotate(30deg);
  transform-origin: 255px -113px;
  will-change: transform;
  animation: ease-out rotatedial forwards;
  animation-timeline: --section-pin-tl;
  animation-range: contain 20% contain 95%;
}

.scene-risklevelbar {
  clip-path: polygon(0px 0px, 0px 332px, 6px 332px, 6px 6px, 83px 6px, 83px 150px, 6px 150px, 6px 332px, 89px 332px, 89px 0px);
  will-change: clip-path;
  animation: linear risklevelbar forwards;
  animation-timeline: --section-pin-tl;
  animation-range: contain 20% contain 95%;
}

.scene-equity-allocation-bar {
  scale: 1;
  transform-origin: 773px 104px;
  will-change: scale;
  animation: linear equityallocationbar forwards;
  animation-timeline: --section-pin-tl;
  animation-range: contain 20% contain 95%;
}

.scene-treasuries-allocation-bar {
  scale: 1;
  transform-origin: 773px 296px;
  will-change: clip-path;
  animation: linear treasuriesallocationbar forwards;
  animation-timeline: --section-pin-tl;
  animation-range: contain 20% contain 95%;
}

.cls-18 {
  fill: #343333;
  font-size: 16px;
  font-weight: 700;
}

.cls-19 {
  fill: #666766;
  font-size: 13px;
  font-weight: 700;
}

.cls-20 {
  font-size: 16px;
  font-weight: 700;
  fill: #fff;
}

.cls-21 {
  fill: #fff;
  font-size: 17px;
  font-weight: 700;
}

.cls-22 {
  fill: #fff;
  font-size: 16px;
}