#loader-wrapper {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      transition: opacity 1s ease;
    }

    #loader-wrapper.fade-out {
      opacity: 0;
      pointer-events: none;
    }
    #loader-wrapper svg {
        width:50%;
    }
    .bar {
      transform-box: fill-box;
      opacity: 0;
    }
    .grow-bottom {
      transform-origin: bottom center;
      transform: scaleY(0);
    }
    .shrink-top {
      transform-origin: top center;
      transform: scaleY(0);
    }
    .bar.delay-0 { animation: grow0 2s ease 0s forwards;}
    .bar.delay-1 { animation: grow1 2s ease 2s forwards;}
    .bar.delay-2 { animation: grow2 2s ease 4s forwards;}
    @keyframes grow1 {
      0% { transform: scaleY(0); opacity: 1; fill:#E31E24;}
      20% {transform: scaleY(-0.2); opacity: 1; fill:#009846;}
      30% {transform: scaleY(-0.3); opacity: 1; fill: #009846;}
      40% {transform: scaleY(-0.3); opacity: 1; fill: #009846;}
      50% {transform: scaleY(0); opacity: 1; fill:#E31E24;}
      60% {transform: scaleY(0); opacity: 1; fill:#E31E24;}
      70% {transform: scaleY(0.6); opacity: 1; fill:#E31E24;}
      80% {transform: scaleY(0.7); opacity: 1; fill:#E31E24;}
      100% {transform: scaleY(1); opacity: 1; fill:#E31E24;}
    }
    @keyframes grow0 {
      0% { transform: scaleY(0); opacity: 1;fill:#009846;}
      20% {transform: scaleY(-0.3); opacity: 1;fill:#E31E24;}
      30% {transform: scaleY(-0.3); opacity: 1;fill:#E31E24;}
      40% {transform: scaleY(0.2); opacity: 1;fill:#009846;}
      50% {transform: scaleY(0.5); opacity: 1;fill:#009846;}
      60% {transform: scaleY(0.8); opacity: 1;fill:#009846;}
      70% {transform: scaleY(0.5); opacity: 1;fill:#009846;}
      80% {transform: scaleY(0.6); opacity: 1;fill:#009846;}
      100% {transform: scaleY(1); opacity: 1;fill:#009846;}
    }
    @keyframes grow2 {
      0% { transform: scaleY(0); opacity: 1;fill:#009846;}
      20% {transform: scaleY(-0.2); opacity: 1; fill:#E31E24;}
      30% {transform: scaleY(-0.3); opacity: 1; fill:#E31E24;}
      40% {transform: scaleY(-0.3); opacity: 1; fill:#E31E24;}
      50% {transform: scaleY(0.3); opacity: 1;fill:#009846;}
      60% {transform: scaleY(0.8); opacity: 1;fill:#009846;}
      70% {transform: scaleY(0.5); opacity: 1;fill:#009846;}
      80% {transform: scaleY(0.6); opacity: 1;fill:#009846;}
      100% {transform: scaleY(1); opacity: 1;fill:#009846;}
    }
    .text-path {
        stroke-dasharray: 2000;
        stroke-dashoffset: 0;
        stroke: black;
        fill: none;
        stroke-width: 1;
        animation: anim 6s ease 6s forwards;
        opacity: 0;
    }
    .text {
        animation: anim2 2s ease 8s forwards;
        opacity: 0;
    }
    @keyframes anim {
        0%{ stroke-dashoffset: 2000; fill:transparent; opacity: 1;}
        100%{opacity: 1;}
    }
    @keyframes anim2 {
        to{opacity: 1;}
    }