@charset "utf-8";

.train {
	position: absolute;
	left: 5%;
	top: 5%;
	height:227px;
	width:400px;
	}

		.engine {
			width:100%;
			background-image: url(../svg/Train_Engine.svg);
			background-repeat: no-repeat;
			background-size:100% 100%;
			background-position:bottom;
			height:	100%;
			width: 100%;
		}

		.wheel {
			position: absolute;
			bottom:-10%;
			background-image: url(../svg/Train_wheel.svg);
			background-repeat: no-repeat;
			background-size:100% 100%;
			z-index:50;
		}
			/*  Wheel sizes  */	
			.small {
				width:75px;
				height:75px;
			}

			.big {
				width:100px;
				height:100px;
			}
			/*  Wheel positions */
			.position-1st {
				left:14%;
			}

			.position-2nd {
				left:39%;
			}

			.position-last {
				right:11%;
			}
				#arm {
					width:100px;
					height:10px;
				}

/* Animations */
.wheel{
	-webkit-animation: cssAnimationWheel 5s 32 linear;
	-moz-animation: cssAnimationWheel 5s 32 linear;
	-o-animation: cssAnimationWheel 5s 32 linear;
	animation: cssAnimationWheel 5s 32 linear;
	}
	@-webkit-keyframes cssAnimationWheel {
		0% { -webkit-transform: rotate(0deg) ; }
		100% { -webkit-transform: rotate(-360deg) ; }
	}
	@-moz-keyframes cssAnimationWheel {
		0% { -moz-transform: rotate(0deg) ; }
		100% { -moz-transform: rotate(-360deg); }
	}
	@-o-keyframes cssAnimationWheel {
		0% { -o-transform: rotate(0deg); }
		100% { -o-transform: rotate(-360deg) ; }
	}
	@keyframes cssAnimationWheel {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(-360deg) ; }
	}

#pivot {
	-webkit-animation: cssAnimationPivot 5s 32 linear;
	-moz-animation: cssAnimationPivot 5s 32 linear;
	-o-animation: cssAnimationPivot 5s 32 linear;
	animation: cssAnimationPivot 5s 32 linear;
	}
	@-webkit-keyframes cssAnimationPivot {
		0% { -webkit-transform: rotate(-180deg) ; }
		50% { -webkit-transform: rotate(0deg) ; }
		100% { -webkit-transform: rotate(180deg) ; }
	}
	@-moz-keyframes cssAnimationPivot {
		0% { -moz-transform: rotate(-180deg) ; }
		50% { -moz-transform: rotate(0deg) ; }
		100% { -moz-transform: rotate(180deg); }
	}
	@-o-keyframes cssAnimationPivot {
		0% { -o-transform: rotate(-180deg); }
		50% { -o-transform: rotate(0deg); }
		100% { -o-transform: rotate(180deg) ; }
	}
	@keyframes cssAnimationPivot {
		0% { transform: rotate(-180deg); }
		50% { transform: rotate(0deg); }
		100% { transform: rotate(180deg) ; }
	}
	
#target {
	-webkit-animation: cssAnimationTarget 5s 32 linear;
	-moz-animation: cssAnimationTarget 5s 32 linear;
	-o-animation: cssAnimationTarget 5s 32 linear;
	animation: cssAnimationTarget 5s 32 linear;
	}
	@-webkit-keyframes cssAnimationTarget {
		0% { left:6% ; }
		20% { left:2% ; }
		50% {  left:6% ; }
		70% { left:10% ; }
		100% {  left:6% ; }
	}
	@-moz-keyframes cssAnimationTarget {
		0% { left:6% ; }
		20% { left:2% ; }
		50% {  left:6% ; }
		70% { left:10% ; }
		100% {  left:6% ; }
	}
	@-o-keyframes cssAnimationTarget {
		0% { left:6% ; }
		20% { left:2% ; }
		50% {  left:6% ; }
		70% { left:10% ; }
		100% {  left:6% ; }
	}
	@keyframes cssAnimationTarget {
		0% { left:6% ; }
		20% { left:2% ; }
		50% {  left:6% ; }
		70% { left:10% ; }
		100% {  left:6% ; }
	}