.logo {
  transform: translate(50%, 50%);
  position: absolute;
  bottom: 50vh;
  right: 50vw;
  height: 50%;
  width: 50%;
  justify-content: center;
  align-items: center;
  margin: auto;
}


.svg{
  position: relative;
  transform: translate(50%, 50%);
  bottom: 50%;
  right: 50%;
  height: 100%;
  width: 100%;
  object-fit: fill;
}

@-webkit-keyframes animate1 {
  0%   {fill: #b7b7c8;}
  10%  {fill: #2364aa;}
  15%  {fill: #2364aa;}
  25%  {fill: #3da5b9;}
  30%  {fill: #3da5b9;}
  40% {fill: #73bfbf;}
  45% {fill: #73bfbf;}
  55% {fill: #dec601;}
  60% {fill: #dec601;}
  70% {fill: #ea7317;}
  75% {fill: #ea7317;}
  85%   {fill: #b7b7c8;}
  100%   {fill: #b7b7c8;}
}

/* Standard syntax */
@keyframes animate1 {
  0%   {fill: #b7b7c8;}
  10%  {fill: #2364aa;}
  15%  {fill: #2364aa;}
  25%  {fill: #3da5b9;}
  30%  {fill: #3da5b9;}
  40% {fill: #73bfbf;}
  45% {fill: #73bfbf;}
  55% {fill: #dec601;}
  60% {fill: #dec601;}
  70% {fill: #ea7317;}
  75% {fill: #ea7317;}
  85%   {fill: #b7b7c8;}
  100%   {fill: #b7b7c8;}
}

/* Standard syntax */
@keyframes animateulinepart {
  0%   {opacity: 0;}
  85%   {opacity: 0;}
  100%   {opacity: 1;}
}

@-webkit-keyframes animateulinepart {
  0%   {opacity: 0;}
  85%   {opacity: 0;}
  100%   {opacity: 1;}
}

.uline{
  fill: #b7b7c8;
  -webkit-animation-name: animate1; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 12s; /* Chrome, Safari, Opera */
  animation-name: animate1;
  animation-duration: 12s;
}

.ulinepart{
  opacity: 1;
  -webkit-animation-name: animateulinepart; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 12s; /* Chrome, Safari, Opera */
  animation-name: animateulinepart;
  animation-duration: 12s;
}