.gun{background-color:#ffffff;}
.gu1{stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.gu2{stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}


#bullet1, #bullet2,#bullet3, #muzzle {stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}

.gu4{fill:
  none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}
.gu5{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.gu6{stroke:#000000;stroke-width:3;stroke-miterlimit:5;}
.gu7{display:none;}
.gu8{display:inline;fill:#CCCCCC;stroke:#000000;stroke-linecap:round;stroke-miterlimit:10;}
.gu9{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}

#gun-body1{
  stroke:#000000;
  stroke-width:5;
  stroke-miterlimit:10;
  stroke-linecap:round;
  animation: gun-b1 4s ease infinite;}

@keyframes gun-b1{
0%{
fill:#976048;
fill-opacity:0;
stroke-dasharray:400;
stroke-dashoffset:400;
}
25%{
fill:#976048;
fill-opacity:0;
stroke-dasharray:400;
stroke-dashoffset:100;
}
45%,100%{
fill:#976048;
fill-opacity:1;
stroke-dasharray:400;
stroke-dashoffset:100;
}
}

#gun-body{
  animation: gun-b 4s ease infinite;}

@keyframes gun-b{
0%{
fill:#CCCCCC;
fill-opacity:0;
stroke-dasharray:600;
stroke-dashoffset:600;
}
25%{
fill:#CCCCCC;
fill-opacity:0;
stroke-dasharray:580;
stroke-dashoffset:50;
}
45%,100%{
fill:#CCCCCC;
fill-opacity:1;
stroke-dasharray:580;
stroke-dashoffset:50;
}
}


#muzzle{
animation:muzzle 4s ease infinite;
}
@keyframes muzzle{
0%{
fill:#CCCCCC;
fill-opacity:0;
stroke-dasharray:400;
stroke-dashoffset:400;
}
25%{
fill:#CCCCCC;
fill-opacity:0;
stroke-dasharray:400;
stroke-dashoffset:50;
}
45%,100%{
fill:#CCCCCC;
fill-opacity:1;
stroke-dasharray:400;
stroke-dashoffset:50;
}
}


#divider-line{
animation: div-line 4s ease infinite;
}
@keyframes div-line{
  0%, 25%{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  }
  45%, 100%{
  stroke-dasharray:100;
  stroke-dashoffset:0;
  }
  }


.gu6{
animation:bullet-c 4s ease infinite;
}

@keyframes bullet-c{
  0%, 25%{
  fill:#555555;
  fill-opacity:0;
  stroke-dasharray:300;
  stroke-dashoffset:300;
  }
  65%, 100%{
  fill:#cccccc;
  fill-opacity:1;
  stroke-dasharray:300;
  stroke-dashoffset:0;
  }
  }

.gu4{
  animation:gu4 4s ease infinite;
}

@keyframes gu4{
  0%, 25%{
  stroke-dasharray:500;
  stroke-dashoffset:500;
  }
  75%, 100%{
  stroke-dasharray:500;
  stroke-dashoffset:0;
  }
  }


  #trigger{
    transform-origin:center center;
    animation:tri 4s ease infinite;
  }

  @keyframes tri{
  0%,50%{transform:translate(-5px,-5px); opacity:0;}
  75%,100%{transform:translate(0px,0px); opacity:1;}
  }

  #load{
    transform-origin:center center;
    animation:load 4s ease infinite;
  }
  @keyframes load{
  0%,50%{transform:translate(5px,5px); opacity:0;}
  75%{transform:translate(-2px,-2px); opacity:1;}
  77%{transform:translate(0px,0px); opacity:1;}
  90%{transform:translate(0px,0px)rotate(-25deg); opacity:1;}
  92%,100% {transform:translate(0px,0px)rotate(-22deg); opacity:1;}
  }


  #bullet1{
    transform-origin:center center;
    animation: bul1 4s ease infinite;
  }

  @keyframes bul1{
0%,55%{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transform:translate(0,0); opacity:1;
}
75%{  stroke-dasharray:100;
  stroke-dashoffset:0;
  transform:translate(0,0); opacity:1;}

90%{
  transform:translate(0,18px); opacity:0;
}
92%{
    transform:translate(0,16px); opacity:0;
}
100%{
    transform:translate(0,16px); opacity:0;
}

  }


  #bullet2{
      transform-origin:center center;
      animation: bul2 4s ease infinite;
    }

  @keyframes bul2{
  0%,50%{stroke-dasharray:100;
  stroke-dashoffset:100;}

75%{
    stroke-dasharray:100;
    stroke-dashoffset:0;
    transform:translate(0,0);
  }
  90%{
    transform:translate(0,18px);
  }
  92%{
      transform:translate(0,16px);
  }
  100%{
      transform:translate(0,16px);
  }

    }


    #bullet3{
        transform-origin:center center;
        animation: bul3 4s ease infinite;
      }

    @keyframes bul3{
    0%,75%{
      transform:translate(0,0);opacity:0;
    }
    90%{
      transform:translate(0,18px);opacity:1;
    }
    92%{
        transform:translate(0,16px);opacity:1;
    }
    100%{
        transform:translate(0,16px);opacity:1;
    }

      }


  #triangle1, #triangle2{
animation:trian 4s ease infinite;
  }

  @keyframes  trian{
  0%,40%{
      opacity:0;
    }
    50%{
      opacity:1;
    }
    100%{
      opacity:1;
    }
  }


  #dirt1, #dirt2{
    animation:dirt 4s ease infinite;
  }

  @keyframes dirt{
  0%,50%{
      opacity:0;
    }
    75%{
      opacity:1;
    }
    100%{
      opacity:1;
    }
  }

#gun1{
transform-origin:center center;
animation:gun1 4s ease infinite;
}

@keyframes gun1{
0%,75%{
transform:translate(0,0)rotate(0);
}
90%{transform:translate(-10px,3px)rotate(-8deg);}
92%{transform:translate(-10px,3px)rotate(-5deg);}
100%{
transform:translate(0,0)rotate(0);
}
}


.gu9{
  transform-origin:center center;
  animation:gu9 4s ease infinite;
}

@keyframes gu9{
0%,75%{
  opacity:0;
  transform:translate(-5px,5px);
}


92%{
  opacity:1;
  transform:translate(-10px,-5px);
}
95%,100%{
  opacity:0;
  transform:translate(-12px,-8px);
}
}