.cycling-body{
    zoom: 70% !important;
    overflow: hidden !important;
}

.container{
	width: 1000px;
	height: 1000px;
}
.cycle{
	width: 1000px;
	height: 400px;
	display: flex;
	top: 30px;
	position: absolute;
}
.front{
	position: absolute;
	width: 20px;
	height: 50px;
	top: 290px;
	left: 725px;
	background-color: #965;
	z-index: 3;
}
.front1{
	position: absolute;
	width: 10px;
	height: 40px;
	background-color: #000;
	top: 250px;
	left: 730px; 	
}
.handle{
	width: 100px;
	height: 10px;
	position: absolute;
	border: 10px solid #10f;
	border-color: #10f transparent   transparent transparent ;
	transform: rotate(100deg);
	top: 240px;
	left: 665px;
	opacity: .7;
	border-radius:  20%/100px  240px 0 0 ;
	z-index: 10;
}
.pipe{
	position: absolute;
	width: 10px;
	height: 25px;
	background-color: #000;
	top: 285px;
	left: 468px;
	z-index: -1; 	
} 
.seat{
	width: 50px;
	height: 30px;
	position: absolute;
	top: 255px;
	left: 455px;
	background-color: #f00;
	border-radius: 70%  150px 10px 40px ;
	z-index: -1;
}	
.body-one{
	width: 250px;
	height: 10px;
	position: absolute;
	top: 300px;
	left: 475px;
	background-color: #f44;
}
.body-two{
	width: 240px;
	height: 10px;
	position: absolute;
	top: 300px;
	left: 475px;
	background-color: #f44;
	transform: rotate(62deg);
	transform-origin: 0% 0%;
}
.body-three{
	width: 250px;
	height: 10px;
	position: absolute;
	top: 300px;
	left: 475px;
	background-color: #f44;
	transform: rotate(-53deg);
	transform-origin: 100% 0%;
}
.body-four{
	width: 235px;
	height: 10px;
	position: absolute;
	top: 300px;
	left: 475px;
	background-color: #786;
	transform: rotate(119deg);
	transform-origin: 0% 40%;
}
.body-five{
	width: 220px;
	height: 5px;
	position: absolute;
	top: 505px;
	left: 355px;
	background-color: #000;
}
.body-six{
	width: 200px;
	height: 10px;
	position: absolute;
	border: 10px solid #000;
	border-color:  transparent transparent #000 transparent ;
	top: 320px;
	left: 755px;
	transform: rotate(68deg);
	transform-origin: 0% 0%;
	border-radius: 100px 0 50%/40px 0 ;
}
.mud-guard1{
	width: 140px;
	height: 10px;
	position: absolute;
	border: 10px solid #402;
	border-color: #402 transparent transparent transparent;
	top: 380px;
	left: 260px;
	border-radius:100px 50%/40px  0 0;
}
.mud-guard2{
	width: 250px;
	height: 400px;
	border: 10px solid #402;
	border-radius: 170px; 
	border-color: #402 transparent  transparent  ;
	transform: rotate(-40deg);
	position: absolute;
	left: 735px;
	top: 366px;
	z-index: -1;
}
.gear1{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 4px dotted #F00;
	position: absolute;
	top: 494px;
	left: 347px;
	animation: tyre 5s infinite ease-in;
}
.gear2{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 4px dotted #b60;
	position: absolute;
	top: 487px;
	left: 553px;
	animation: tyre 5s infinite ease-in;
}
.paddle1{
	width: 7px;
	height: 60px;
	position: absolute;
	background-color: #5a2;
	top: 510px;
	left: 575px;
	transform-origin: 3.5px 0%;
	animation: paddle 2.5s infinite;
	z-index: -3;

}
.paddle2{
	width: 7px;
	height: 60px;
	position: absolute;
	background-color: #5d3;
	top: 450px;
	left: 575px;
	transform-origin: 3.5px 100%;
	animation: paddle 2.5s infinite;
	z-index: 3;
}
.chain{
	width: 250px;
	height: 50px;
	top: 483px;
	left: 344px;
	border: 4px dotted #55f;
	border-top-left-radius: 50%;
	border-bottom-left-radius: 70%;
	border-top-right-radius: 30%;
	border-bottom-right-radius: 30%;
	position: absolute; 
	animation: chain 3s infinite;
}
.tyre{
	width: 200px;
	height: 200px;
	top: 400px;
	border: 7px solid #f80;
	border-radius: 50%;
	z-index: -1;
	animation: tyre .3s infinite ease-in;
	position: relative;
	margin-left: 242px;
	left: 7px;
}
.wires{
	width: 5px;
	height: 200px;
	background-color: #b4f;
	position: absolute;
	z-index: 1;
	left: 100px;
}
.one{
	position: absolute;
	top: 95px;
	left: 200px;
	transform-origin: 0% 0%;
	transform: rotate(90deg);
}
@keyframes tyre{
	0%{
		transform:rotate(-360deg);
	}
}
@keyframes chain{
	0%{
		border: 3px dashed;
	}
}
@keyframes paddle{
	0%{
		transform: rotate(0deg);
	}
	25%{
		transform: rotate(90deg);
	}
	50%{
		transform: rotate(180deg);
	}
	75%{
		transform: rotate(270deg);
	}
	100%{
		transform: rotate(360deg);
	}

}

/*Man*/
.hair{
	width: 0px;
	height: 0px;
	border-top: 0px solid transparent;
	border-left: 65px solid #555;
	border-bottom: 50px solid transparent;
	position: absolute;
	left: 550px;
	z-index: 2;
	top:40px;
}
.face{
	width: 60px;
	height: 90px;
	background-color: #f60;
	position: absolute;
	border-radius: 0 40% 60% 20%;
	top: 50px;
	left: 550px;
	z-index: 1
}
.eye-brow{
	width: 15px;
	height: 5px;
	background-color: #000;
	top: 10px;
	left: 40px;
	position: absolute;

}.eye{
	width: 15px;
	height: 15px;
	position: absolute;
	background-color: #000;
	top:15px;
	left: 40px;
	border-radius: 50%;
	animation: eye 3s infinite;
}
.nose{
	width: 20px;
	height: 20px;
	position: absolute;
	background-color: #f60;
	top: 30px;
	left: 45px;
	border-radius: 0 50% 0 0;
}
.lips{
	width: 15px;
	height: 10px;
	position: absolute;
	background-color: #000;
	top: 60px;
	left: 40px;
	border-radius: 0 50% 50% 0;
}
.body{
	width: 20px;
	height: 180px;
	background-color: #000;
	position: absolute;
	left: 515px;
	top: 125px;
	transform: rotate(30deg);
}
.armL1{
	width: 10px;
	height: 100px;
	background-color: #000;
	position: absolute;
	left: 560px;
	top: 170px;
	transform: rotate(-57deg);
	transform-origin: 0% 0%;
}
.armL2{
	width: 10px;
	height: 100px;
	background-color: #000;
	position: absolute;
	left: 640px;
	top: 223px;
	transform: rotate(-82deg);
	transform-origin: 0% 0%;
}
.armR1{
	width: 10px;
	height: 120px;
	background-color: #000;
	position: absolute;
	left: 555px;
	top: 170px;
	transform: rotate(-30deg);
	transform-origin: 0% 0%;
	z-index: 3;
}
.armR2{
	width: 10px;
	height: 125px;
	background-color: #000;
	position: absolute;
	left: 614px;
	top: 272px;
	transform: rotate(-55deg);
	transform-origin: 0% 0%;
	z-index: 3;
}
.legL1{
	position: absolute;
	width: 15px;
	height: 150px;
	background-color: #456;
	top: 290px;
	left: 480px;
	animation: legL1 2.5s infinite;
	transform-origin: 0% 0%;
	z-index: 3;
}
.legL2{
	position: absolute;
	width: 15px;
	height: 150px;
	background-color: #456;
	top: 340px;
	left: 610px;
	transform: rotate(15deg);
	animation: legL2 2.5s infinite ;
	transform-origin: 0% 0%;
	z-index: 5;
}
.legR1{
	position: absolute;
	width: 15px;
	height: 150px;
	background-color: #89a;
	top: 290px;
	left: 480px;
	transform: rotate(-45deg);
	animation: legR1 2.5s infinite;
	transform-origin: 0% 0%;
	z-index: -3;
}
.legR2{
	position: absolute;
	width: 15px;
	height: 215px;
	background-color: #89a;
	top: 385px;
	left: 582px;
	animation: legR2 2.5s infinite ;
	transform-origin: 0% 0%;
	z-index: -3;
}
@keyframes eye{
	0%{
		transform: rotateX(360deg);
	}

}
@keyframes legL1{
	0%{
		transform: rotate(-65deg);
	}
	25%{
		transform: rotate(-55deg);
	}
	50%{
		transform: rotate(-45deg);
	}
	75%{
		transform: rotate(-55deg);
	}
	100%{
		transform: rotate(-65deg);
	}
}
@keyframes legL2{
	0%{
		transform: rotate(15deg);
	}
	25%{
		top: 365px;
		left: 598px;
		height: 180px;
		transform: rotate(-15deg);
	}
	50%{
		top: 385px;
		left: 580px;
		height: 220px;
		transform: rotate(0deg);
	}
	75%{
		top: 360px;
		left: 600px;
		height: 190px;
		transform: rotate(25deg);
	}
}
@keyframes legR1{
	8%{
		transform: rotate(-55deg);
	}
	25%{
		transform: rotate(-65deg);
	}
	50%{
		transform: rotate(-60deg);
	}
	75%{
		transform: rotate(-55deg);
	}
	100%{
		transform: rotate(-45deg);
	}
}
@keyframes legR2{
	25%{
		transform: rotate(25deg);
		width: 15px;
		height: 210px;
		top: 345px;
		left: 605px;
	}
	50%{
		top: 355px;
		left: 600px;
		height: 130px;
		transform: rotate(8deg);
		
	}
	75%{
		top: 365px;
		left: 595px;
		height: 190px;
		transform: rotate(-15deg);
	}
	100%{
		top: 385px;
		left: 585px;
		height: 220px;
		transform: rotate(0deg);
	}
}

/*balloon*/
.thread1{
	width: 2px;
	height: 70px;
	position: absolute;
	background-color: #000;
	left: 740px;
	top: 160px;
	transform-origin: 0% 100%;
	animation: thread1 1s infinite alternate;	
}
.thread2{
	width: 2px;
	height: 80px;
	position: absolute;
	background-color: #000;
	left: 740px;
	top: 150px;
	transform: rotate(28deg);
	transform-origin: 0% 100%;
	animation: thread2 1s infinite alternate;	
}
.balloon1{
	width: 55px;
	height: 90px;
	background-color: #47f;
	border-radius: 60% 60% 80% 70%;
	position: absolute;
	left: 700px;
	top: 76px;
	animation: balloon1 1s infinite alternate;
}
.balloon2{
	width: 55px;
	height: 90px;
	background-color: #c00;
	border-radius: 60% 60% 80% 70%;
	position: absolute;
	left: 755px;
	top: 79px;
	animation: balloon2 1s infinite alternate-reverse;
}
@keyframes thread1{
	0%{
		transform: rotate(-8deg);
	}
}
@keyframes balloon1{
	100%{
		left: 715px;
		top: 73px;
	}
}
@keyframes thread2{
	0%{
		transform: rotate(30deg);
	}
}
@keyframes balloon2{
	100%{
		left: 750px;
		top: 76px;
	}
}

/*Road*/
.road{
	width: 100%;
	height: 200px;
	position: absolute;
	top: 520px;
	background-color: #020;
	z-index: -5;
}
.white{
	width: 200px;
	height: 30px;
	background-color: #fff;
	position: absolute;
	top: 85px;
	left: 170px;
	z-index: 1;
	animation: white 1s infinite;
}
@keyframes white{
	0%{
		left: 100%;
	}
	100%{
		left: -20%;
	}
}
.tree-box{
	animation:tree  3s infinite;
	position: absolute;
	width: 100px;
	height: 280px;
	top: 0px;
}
.tree{
	width: 100px;
	height: 180px;
	background-color: #0c0;
	position: absolute;
	top: 240px;
	border-radius: 80% 80% 50% 50%;
	z-index: -5;
}
.stem{
	width: 30px;
	height: 100px;
	position: absolute;
	top: 420px;
	background-color: #c40;
	left: 35px;
	z-index: -5;
}

@keyframes tree{
	0%{
		left: 100%;
	}
	100%{
		left: -10%;
	}
}

@media only screen and (max-width: 600px) {
  .cycling-body {
    zoom: 20% !important;
  }
}