/*
Tutaj możesz dodać własny CSS.

Naciśnij ikonkę pomocy, żeby dowiedzieć się więcej.
*/
@keyframes krec-1
      {
          0% { transform:perspective(300px) rotateY(0deg); }
          100% { transform:perspective(300px) rotateY(360deg); }
      }

@-webkit-keyframes krec-1
      {
          0% { transform:perspective(300px) rotateY(0deg); }
          100% { transform:perspective(300px) rotateY(360deg); }
      }
.tarcza{
	  background-image: url("http://14.pruszkow.zhp.pl/wp-content/uploads/2018/04/Tarcza5.jpg");
	  background-repeat: no-repeat;
	  background-position: center; 
	  width:300px;
	  height:304px;
	  }
	  
	  .cel {
        background-image: url("http://14.pruszkow.zhp.pl/wp-content/uploads/2018/04/cel.png");
		background-repeat: no-repeat;

		position: relative;
		width:178px;
		height:98px;
		top:230px;
        
        		
		animation-name: x_ruch;
		animation-duration: 5s;
		animation-iteration-count:infinite;
		animation-direction: alternate;
		/* dla Google Chrome, Safari, Opera 15+ */
		-webkit-animation-name: x_ruch;
		-webkit-animation-duration: 5s;
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-direction: alternate;
		
		 
      }

      .cel:hover {
        animation-play-state:paused;
        -webkit-animation-play-state:paused; /* dla Google Chrome, Safari, Opera 15+ */
      }
	  
      /* ---------------------------REGUŁY-ANIMACJI--------------------------- */
      @keyframes x_ruch
      {
        0% { left: 0px; top:230px;}
		20% { left: 20px; top:210px;}
		30% { left: 40px; top:220px;}
		50% { left: 60px; top:205px;}
		60% { left: 60px; top:205px;}
		70% { left: 80px; top:195px;}
		80% { left: 100px; top:210px;}
        100% { left: 130px; top:215px;}
      }

      @-webkit-keyframes x_ruch /* dla Google Chrome, Safari, Opera 15+ */
      {
        0% { left: 0px; top:230px;}
		20% { left: 20px; top:210px;}
		30% { left: 40px; top:220px;}
		50% { left: 60px; top:205px;}
		60% { left: 60px; top:205px;}
		70% { left: 80px; top:195px;}
		80% { left: 100px; top:210px;}
        100% { left: 130px; top:215px;}
      }
	  @-moz-keyframes x_ruch /* dla Google Chrome, Safari, Opera 15+ */
      {
        0% { left: 0px; top:230px;}
		20% { left: 20px; top:210px;}
		30% { left: 40px; top:220px;}
		50% { left: 60px; top:205px;}
		60% { left: 60px; top:205px;}
		70% { left: 80px; top:195px;}
		80% { left: 100px; top:210px;}
        100% { left: 130px; top:215px;}
      }
	  @-o-keyframes x_ruch /* dla Google Chrome, Safari, Opera 15+ */
      {
        0% { left: 0px; top:230px;}
		20% { left: 20px; top:210px;}
		30% { left: 40px; top:220px;}
		50% { left: 60px; top:205px;}
		60% { left: 60px; top:205px;}
		70% { left: 80px; top:195px;}
		80% { left: 100px; top:210px;}
        100% { left: 130px; top:215px;}
      }

 	  

	       
	  
      /* ---------------------------REGUŁY-ANIMACJI--------------------------- */
      @keyframes but_ruch_lewy
         {
        0% { transform:translate(40px,0vh)}
         16% { transform:translate(40px,0vh)}
		32% { transform:translate(40px,40vh)}
        48% { transform:translate(40px,40vh)}
		64% { transform:translate(40px,80vh)}
		80% { transform:translate(40px,80vh)}
        100% { transform:translate(40px,100vh)}
      }

      @-webkit-keyframes but_ruch_lewy /* dla Google Chrome, Safari, Opera 15+ */
              {
        0% { transform:translate(40px,0vh)}
         16% { transform:translate(40px,0vh)}
		32% { transform:translate(40px,40vh)}
        48% { transform:translate(40px,40vh)}
		64% { transform:translate(40px,80vh)}
		80% { transform:translate(40px,80vh)}
        100% { transform:translate(40px,100vh)}
      }
	  @-moz-keyframes but_ruch_lewy /* dla Google Chrome, Safari, Opera 15+ */
            {
        0% { transform:translate(40px,0vh)}
         16% { transform:translate(40px,0vh)}
		32% { transform:translate(40px,40vh)}
        48% { transform:translate(40px,40vh)}
		64% { transform:translate(40px,80vh)}
		80% { transform:translate(40px,80vh)}
        100% { transform:translate(40px,100vh)}
      }
	  @-o-keyframes but_ruch_lewy /* dla Google Chrome, Safari, Opera 15+ */
            {
        0% { transform:translate(40px,0vh)}
         16% { transform:translate(40px,0vh)}
		32% { transform:translate(40px,40vh)}
        48% { transform:translate(40px,40vh)}
		64% { transform:translate(40px,80vh)}
		80% { transform:translate(40px,80vh)}
        100% { transform:translate(40px,100vh)}
      }
	  
	     @keyframes but_ruch_prawy
       {          
         0% { transform:translate(-50px,0vh)}
         16% { transform:translate(-50px,20vh)}
		32% { transform:translate(-50px,20vh)}
        48% { transform:translate(-50px,60vh)}
		64% { transform:translate(-50px,60vh)}
		80% { transform:translate(-50px,100vh)}
        100% { transform:translate(-50px,100vh)}
      }

      @-webkit-keyframes but_ruch_prawy /* dla Google Chrome, Safari, Opera 15+ */
          {          
         0% { transform:translate(-50px,0vh)}
         16% { transform:translate(-50px,20vh)}
		32% { transform:translate(-50px,20vh)}
        48% { transform:translate(-50px,60vh)}
		64% { transform:translate(-50px,60vh)}
		80% { transform:translate(-50px,100vh)}
        100% { transform:translate(-50px,100vh)}
      }
	  @-moz-keyframes but_ruch_prawy /* dla Google Chrome, Safari, Opera 15+ */
          {          
         0% { transform:translate(-50px,0vh)}
         16% { transform:translate(-50px,20vh)}
		32% { transform:translate(-50px,20vh)}
        48% { transform:translate(-50px,60vh)}
		64% { transform:translate(-50px,60vh)}
		80% { transform:translate(-50px,100vh)}
        100% { transform:translate(-50px,100vh)}
      }
	  @-o-keyframes but_ruch_prawy /* dla Google Chrome, Safari, Opera 15+ */
            {          
         0% { transform:translate(-50px,0vh)}
         16% { transform:translate(-50px,20vh)}
		32% { transform:translate(-50px,20vh)}
        48% { transform:translate(-50px,60vh)}
		64% { transform:translate(-50px,60vh)}
		80% { transform:translate(-50px,100vh)}
        100% { transform:translate(-50px,100vh)}
      }