#petadev-logo {
    position: relative;
    max-width: 80%;
  }

  #petadev-logo .cls-1 {
    fill: transparent;
    stroke: white;
    stroke-miterlimit: 10;
    stroke-width: 3px;
  }
  
  #petadev-logo path:nth-child(1) {
    stroke-dasharray: 805;
    stroke-dashoffset: 805;
    -webkit-animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
            animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
  }
  
  #petadev-logo path:nth-child(2) {
    stroke-dasharray: 783;
    stroke-dashoffset: 783;
    -webkit-animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
            animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
  }
  
  #petadev-logo path:nth-child(3) {
    stroke-dasharray: 477;
    stroke-dashoffset: 477;
    -webkit-animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
            animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
  }
  
  #petadev-logo path:nth-child(4) {
    stroke-dasharray: 709;
    stroke-dashoffset: 709;
    -webkit-animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
            animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
  }
  
  #petadev-logo path:nth-child(5) {
    stroke-dasharray: 805;
    stroke-dashoffset: 805;
    -webkit-animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
            animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
  }
  
  #petadev-logo path:nth-child(6) {
    stroke-dasharray: 783;
    stroke-dashoffset: 783;
    -webkit-animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
            animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
  }
  
  #petadev-logo path:nth-child(7) {
    stroke-dasharray: 537;
    stroke-dashoffset: 537;
    -webkit-animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
            animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
  }
  
  #petadev-logo path:nth-child(8) {
    stroke-dasharray: 127;
    stroke-dashoffset: 127;
    -webkit-animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
            animation: line-anim 2s ease forwards, fill 0.5s ease forwards 2s;
    /*, color-change 10s infinite;*/
  }
  
  @-webkit-keyframes line-anim {
    to {
      stroke-dashoffset: 0;
    }
  }
  
  @keyframes line-anim {
    to {
      stroke-dashoffset: 0;
    }
  }
  
  @-webkit-keyframes fill {
    from {
      fill: transparent;
    }
    to {
      fill: white;
    }
  }
  
  @keyframes fill {
    from {
      fill: transparent;
    }
    to {
      fill: white;
    }
  }
  
  @-webkit-keyframes color-change {
    /*12.5% { fill: #ff0000; }
      25% { fill: #ff8000; }
      37.5% { fill: #ffff00; }
      50% { fill: #80ff00; }
      62.5% { fill: #00ff04; }
      75% { fill: #00ffc8; }
      87.5% { fill: #e600ff; }
      100% { fill: #ff006a; }*/
    0% {
      fill: #00ffcc;
    }
    12.5% {
      fill: #00e1ff;
    }
    25% {
      fill: #0099ff;
    }
    37.5% {
      fill: #9000ff;
    }
    50% {
      fill: #d000ff;
    }
    62.5% {
      fill: #9000ff;
    }
    75% {
      fill: #0099ff;
    }
    87.5% {
      fill: #00e1ff;
    }
    100% {
      fill: #00ffcc;
    }
  }
  
  @keyframes color-change {
    /*12.5% { fill: #ff0000; }
      25% { fill: #ff8000; }
      37.5% { fill: #ffff00; }
      50% { fill: #80ff00; }
      62.5% { fill: #00ff04; }
      75% { fill: #00ffc8; }
      87.5% { fill: #e600ff; }
      100% { fill: #ff006a; }*/
    0% {
      fill: #00ffcc;
    }
    12.5% {
      fill: #00e1ff;
    }
    25% {
      fill: #0099ff;
    }
    37.5% {
      fill: #9000ff;
    }
    50% {
      fill: #d000ff;
    }
    62.5% {
      fill: #9000ff;
    }
    75% {
      fill: #0099ff;
    }
    87.5% {
      fill: #00e1ff;
    }
    100% {
      fill: #00ffcc;
    }
  }