/*  */
    .cls-1 {
        fill: none;
    }

    .cls-2 {
        isolation: isolate;
    }

    .cls-3 {
        clip-path: url(#clip-path);
    }

    .cls-4,
    .cls-8 {
        fill: #0782c5;
    }

    .cls-5,
    .cls-8,
    .cls-9 {
        mix-blend-mode: multiply;
    }

    .cls-6 {
        fill: #109ed9;
    }

    .cls-7 {
        fill: #f48020;
    }

    .cls-9 {
        fill: #f38020;
    }

    .cls-10 {
        opacity: 0.15;
    }

    .cls-11,
    .cls-12 {
        fill: #939393;
    }

    .cls-12 {
        opacity: 0.2;
    }
    /* for animation  */
    .svg {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.svg .cls-4-1 , svg .cls-4{
    fill-opacity: 0;
    stroke: #0782c5;
    fill: #0782c5;
    stroke-width: 3;
    stroke-dasharray: 870;
    stroke-dashoffset: 870;
    animation: draw-fill 6s infinite linear;
}
  .svg .cls-8 {
    fill-opacity: 0;
    stroke: #0782c5;
    fill: #0782c5;
    stroke-width: 3;
    stroke-dasharray: 870;
    stroke-dashoffset: 870;
    animation: draw 6s infinite linear;
}
.svg .cls-6 {
    fill-opacity: 0;
    stroke: #109ed9;
    fill: #109ed9;
    stroke-width: 3;
    stroke-dasharray: 870;
    stroke-dashoffset: 870;
    animation: draw 6s infinite linear;
}
.svg .cls-7-1 {
    /* fill-opacity: 0; */
    stroke: #f48020;
    fill: #f48020 ;
    stroke-width: 3;
    stroke-dasharray: 870;
    stroke-dashoffset: 870;
    animation:  draw-fill 8s infinite linear;
}
.svg .cls-9-1 {
    /* fill-opacity: 0; */
    stroke: #f48020;
    fill: #f48020 ;
    stroke-width: 3;
    stroke-dasharray: 870;
    stroke-dashoffset: 870;
    animation:  draw-fill 8s infinite linear;
}
svg .cls-9 ,svg .cls-7 {
    fill-opacity: 0;
    stroke: #f48020;
    fill: #f48020;
    stroke-width: 3;
    stroke-dasharray: 870;
    stroke-dashoffset: 870;
    animation: draw 6s infinite linear;
}
 .svg .cls-12 {
    fill-opacity: 0;
    stroke: #939393;
    fill: #939393;
    stroke-width: 3;
    stroke-dasharray: 870;
    stroke-dashoffset: 870;
    animation: draw-fill 6s infinite linear;
}
.svg .cls-11  {
    fill-opacity: 0;
    stroke: #939393;
    fill: #939393;
    stroke-width: 3;
    stroke-dasharray: 870;
    stroke-dashoffset: 870;
    animation: draw 5s infinite linear;
}
 @keyframes draw {
    to {
       stroke-dashoffset: 0;

   }

}
@keyframes draw-fill {
    from {
       display:none;
       fill-opacity: 0;

   }
   to {
       display:block;
       fill-opacity: 1;
       stroke-dashoffset: 0;


   }
}

/* @keyframes swirl{
  from{ background-position: 0px 65px; }
  to{ background-position: 130px 0px; }
}

@keyframes float{
  0%, 100%, 10%{ transform:translateY(0px); }
  70%{ transform:translateY(-40px);}
}
@keyframes animation2 {
    from { top: 0px; }
    to { top: -300px; }
} */

.svg{
  font-size: 5em;
  user-select: none;
  cursor: pointer;
  /* opacity:0.4; */
  animation: float 5s ease infinite;
  /* animation: animation2 6s infinite linear; */
}

@keyframes wiggle{
  from, to{ transform: translateX(0px); }
  25%{ transform: translateX(-7px); }
  50%{ transform: translateX(4px); }
  75%{ transform: translateX(-2px); }
}

.svg:active, .svg:focus{
  animation: wiggle .1s ease;
  opacity:1;
}