.animation {
  width: 100%;
  height: 100vh;
  background-color: #498CCA;
  position: fixed;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

#first {
  stroke-dasharray: 309px;
  stroke-dashoffset: 309px;
  -webkit-animation: fadeInside 0.6s ease-in forwards;
          animation: fadeInside 0.6s ease-in forwards;
}

#second {
  stroke-dasharray: 413px;
  stroke-dashoffset: 413px;
  -webkit-animation: fadeInside 0.6s ease-in forwards 0.3s;
          animation: fadeInside 0.6s ease-in forwards 0.3s;
}

#third {
  stroke-dasharray: 413px;
  stroke-dashoffset: 413px;
  -webkit-animation: fadeInside 0.6s ease-in forwards 0.6s;
          animation: fadeInside 0.6s ease-in forwards 0.6s;
}

#fourth {
  stroke-dasharray: 505px;
  stroke-dashoffset: 505px;
  -webkit-animation: fadeInside 0.6s ease-in forwards 0.9s;
          animation: fadeInside 0.6s ease-in forwards 0.9s;
}

#fiveth {
  stroke-dasharray: 413px;
  stroke-dashoffset: 413px;
  -webkit-animation: fadeInside 0.6s ease-in forwards 1.2s;
          animation: fadeInside 0.6s ease-in forwards 1.2s;
}

#six {
  stroke-dasharray: 371px;
  stroke-dashoffset: 371px;
  -webkit-animation: fadeInside 0.6s ease-in forwards 1.5s;
          animation: fadeInside 0.6s ease-in forwards 1.5s;
}

#seven {
  stroke-dasharray: 1386px;
  stroke-dashoffset: 1386px;
  -webkit-animation: fadeInside 0.6s ease-in forwards 0.3s;
          animation: fadeInside 0.6s ease-in forwards 0.3s;
}

#eight {
  stroke-dasharray: 1133px;
  stroke-dashoffset: 1133px;
  -webkit-animation: fadeInside 0.6s ease-in forwards 0.5s;
          animation: fadeInside 0.6s ease-in forwards 0.5s;
}

#nine {
  stroke-dasharray: 924px;
  stroke-dashoffset: 924px;
  -webkit-animation: fadeInside 0.6s ease-in forwards 0.7s;
          animation: fadeInside 0.6s ease-in forwards 0.7s;
}

#ten {
  stroke-dasharray: 1389px;
  stroke-dashoffset: 1389px;
  -webkit-animation: fadeInside 0.6s ease-in forwards 0.9s;
          animation: fadeInside 0.6s ease-in forwards 0.9s;
}

#eleven {
  stroke-dasharray: 606px;
  stroke-dashoffset: 606px;
  -webkit-animation: fadeInside 0.6s ease-in forwards 1.1s;
          animation: fadeInside 0.6s ease-in forwards 1.1s;
}

#tweleve {
  stroke-dasharray: 1284px;
  stroke-dashoffset: 1284px;
  -webkit-animation: fadeInside 0.6s ease-in forwards 1.3s;
          animation: fadeInside 0.6s ease-in forwards 1.3s;
}

#thirteen {
  stroke-dasharray: 1210px;
  stroke-dashoffset: 1210px;
  -webkit-animation: fadeInside 0.6s ease-in forwards 1.5s;
          animation: fadeInside 0.6s ease-in forwards 1.5s;
}

svg {
  -webkit-animation: fill 1s ease-in forwards 1.5s;
          animation: fill 1s ease-in forwards 1.5s;
}

@-webkit-keyframes fadeInside {
  to {
    stroke-dashoffset: 0px;
  }
}

@keyframes fadeInside {
  to {
    stroke-dashoffset: 0px;
  }
}
@-webkit-keyframes fill {
  from {
    fill: transparent;
  }
  to {
    fill: white;
  }
}
@keyframes fill {
  from {
    fill: transparent;
  }
  to {
    fill: white;
  }
}/*# sourceMappingURL=animation.css.map */