/* Main animation */

div#logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

div#logo svg {
  display: block;
  width: 60vw;
  margin: 10% auto;
}

@media all and (min-width: 480px) {
  div#logo svg {
    width: 50vw;
  }
}

@media all and (min-width: 800px) {
  div#logo svg {
    width: 40vw;
  }
}

@media all and (min-width: 900px) {
  div#logo svg {
    width: 30vw;
  }
}

#intro {
  opacity: 0;
}

#intro, #background, #pattern, #people {
  width: 100vw;
  height: 100vh;
  margin: auto;
  overflow: hidden;
}

#background, #pattern, #people {
  width: 120vw;
  height: 120vh;
  margin: -10vh 0 0 -10vw;
}

#background {
  background: url('../img/intro-background.jpg') center bottom;
  background-size: cover;
}

#pattern {
  background: url('../img/intro-pattern.png') repeat left top;
}

#people {
  background: url('../img/intro-people.png') center bottom;
  background-size: cover;
}

#enter {
  position: absolute;
  bottom: 2rem;
  width: 100%;
  text-align: center;
}

/* Arrow animation; cfr. https://codepen.io/postor/pen/vYpNYg */

#arrow {
  opacity: 0;
  width: 60px;
  height: 40px;
  margin: 0 0 0 -15px;
  position: absolute;
  left: 50%;
  bottom: 0px;
  -webkit-animation: arrow 0.5s 1s infinite ease-out alternate;
}

#arrow:hover {
  -webkit-animation-play-state: paused;
}

.left, .right {
  position: absolute;
  height: 10px;
  width: 40px;
  background: var(--yellow);
  top: 10px;
  left: 10px;
  -webkit-border-radius: 4px;
  -webkit-transform-origin: 5px 50%;
  -webkit-transform: rotate(240deg);
  -webkit-animation: leftArrow 0.5s 1s infinite ease-out alternate;
}

.right {
  -webkit-transform: rotate(-60deg);
  -webkit-animation: rightArrow 0.5s 1s infinite ease-out alternate;
}

@-webkit-keyframes arrow {
  0% { bottom: 5rem; }
  100%{ bottom: 7rem; }
}

@-webkit-keyframes leftArrow {
  100%{ -webkit-transform: rotate(225deg); }
}

@-webkit-keyframes rightArrow {
  100%{ -webkit-transform: rotate(-45deg); }
}

/* SVG animation */

/***************************************************
 * Generated by SVG Artista on 8/1/2022, 2:23:05 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .animate-1 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
}

svg.active .animate-1 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-2 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
}

svg.active .animate-2 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-3 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.7s;
}

svg.active .animate-3 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-4 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .animate-4 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-5 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .animate-5 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-6 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .animate-6 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-7 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .animate-7 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-8 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .animate-8 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-9 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .animate-9 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-10 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s;
}

svg.active .animate-10 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-11 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .animate-11 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-12 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .animate-12 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-13 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}

svg.active .animate-13 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-14 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

svg.active .animate-14 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-15 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}

svg.active .animate-15 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-16 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.active .animate-16 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-17 {
  stroke-dashoffset: 9675.2001953125px;
  stroke-dasharray: 9675.2001953125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

svg.active .animate-17 {
  stroke-dashoffset: 19350.400390625px;
  fill: rgb(0, 0, 0);
}

svg .animate-18 {
  stroke-dashoffset: 964.168212890625px;
  stroke-dasharray: 964.168212890625px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

svg.active .animate-18 {
  stroke-dashoffset: 1928.33642578125px;
  fill: rgb(45, 150, 235);
}

svg .animate-19 {
  stroke-dashoffset: 1128.7686767578125px;
  stroke-dasharray: 1128.7686767578125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
}

svg.active .animate-19 {
  stroke-dashoffset: 2257.537353515625px;
  fill: rgb(45, 150, 235);
}

svg .animate-20 {
  stroke-dashoffset: 858.65673828125px;
  stroke-dasharray: 858.65673828125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.28s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
}

svg.active .animate-20 {
  stroke-dashoffset: 1717.3134765625px;
  fill: rgb(45, 150, 235);
}

svg .animate-21 {
  stroke-dashoffset: 674.2518920898438px;
  stroke-dasharray: 674.2518920898438px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
}

svg.active .animate-21 {
  stroke-dashoffset: 1348.5037841796875px;
  fill: rgb(45, 150, 235);
}

svg .animate-22 {
  stroke-dashoffset: 908.2611694335938px;
  stroke-dasharray: 908.2611694335938px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.52s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.52s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
}

svg.active .animate-22 {
  stroke-dashoffset: 1816.5223388671875px;
  fill: rgb(45, 150, 235);
}

svg .animate-23 {
  stroke-dashoffset: 674.2544555664062px;
  stroke-dasharray: 674.2544555664062px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6399999999999997s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6399999999999997s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.7s;
}

svg.active .animate-23 {
  stroke-dashoffset: 1348.5089111328125px;
  fill: rgb(45, 150, 235);
}

svg .animate-24 {
  stroke-dashoffset: 858.6568603515625px;
  stroke-dasharray: 858.6568603515625px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.76s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8000000000000003s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.76s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8000000000000003s;
}

svg.active .animate-24 {
  stroke-dashoffset: 1717.313720703125px;
  fill: rgb(45, 150, 235);
}

svg .animate-25 {
  stroke-dashoffset: 964.1699829101562px;
  stroke-dasharray: 964.1699829101562px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.88s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.88s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 2.9000000000000004s;
}

svg.active .animate-25 {
  stroke-dashoffset: 1928.3399658203125px;
  fill: rgb(45, 150, 235);
}

svg .animate-26 {
  stroke-dashoffset: 1131.6790771484375px;
  stroke-dasharray: 1131.6790771484375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
}

svg.active .animate-26 {
  stroke-dashoffset: 2263.358154296875px;
  fill: rgb(45, 150, 235);
}

svg .animate-27 {
  stroke-dashoffset: 1145.068359375px;
  stroke-dasharray: 1145.068359375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.12s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.12s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.1s;
}

svg.active .animate-27 {
  stroke-dashoffset: 2290.13671875px;
  fill: rgb(45, 150, 235);
}

svg .animate-28 {
  stroke-dashoffset: 1285.776611328125px;
  stroke-dasharray: 1285.776611328125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2399999999999998s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2399999999999998s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s;
}

svg.active .animate-28 {
  stroke-dashoffset: 2571.55322265625px;
  fill: rgb(45, 150, 235);
}

svg .animate-29 {
  stroke-dashoffset: 1400.2939453125px;
  stroke-dasharray: 1400.2939453125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.36s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3000000000000003s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.36s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.3000000000000003s;
}

svg.active .animate-29 {
  stroke-dashoffset: 2800.587890625px;
  fill: rgb(45, 150, 235);
}

svg .animate-30 {
  stroke-dashoffset: 6095.37646484375px;
  stroke-dasharray: 6095.37646484375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.48s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.48s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4000000000000004s;
}

svg.active .animate-30 {
  stroke-dashoffset: 12190.7529296875px;
  fill: rgb(234, 28, 36);
}

svg .animate-31 {
  stroke-dashoffset: 5927.9677734375px;
  stroke-dasharray: 5927.9677734375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5999999999999996s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5999999999999996s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.5s;
}

svg.active .animate-31 {
  stroke-dashoffset: 11855.935546875px;
  fill: rgb(45, 150, 235);
}

svg .animate-32 {
  stroke-dashoffset: 5452.3359375px;
  stroke-dasharray: 5452.3359375px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.7199999999999998s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.7199999999999998s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s;
}

svg.active .animate-32 {
  stroke-dashoffset: 10904.671875px;
  fill: rgb(43, 179, 115);
}

svg .animate-33 {
  stroke-dashoffset: 5263.56201171875px;
  stroke-dasharray: 5263.56201171875px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.84s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.7s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.84s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.7s;
}

svg.active .animate-33 {
  stroke-dashoffset: 10527.1240234375px;
  fill: rgb(248, 173, 64);
}

svg .animate-34 {
  stroke-dashoffset: 6987.9345703125px;
  stroke-dasharray: 6987.9345703125px;
  fill: transparent;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.96s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8000000000000003s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.96s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8000000000000003s;
}

svg.active .animate-34 {
  stroke-dashoffset: 13975.869140625px;
  fill: rgb(234, 28, 36);
}

svg .animate-35 {
  stroke-dashoffset: 248.18565368652344px;
  stroke-dasharray: 248.18565368652344px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 4.08s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.9000000000000004s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 4.08s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 3.9000000000000004s;
}

svg.active .animate-35 {
  stroke-dashoffset: 496.3713073730469px;
}

svg .animate-36 {
  stroke-dashoffset: 665.0575561523438px;
  stroke-dasharray: 665.0575561523438px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 5s,
                        fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 4s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 5s,
                fill 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 4s;
}

svg.active .animate-36 {
  stroke-dashoffset: 1330.1151123046875px;
}