* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #000;
}

#background, #tank, #avion {
	position: absolute;
}

.container {
	position: relative;
	left: 0;
	right: 0;
	width: 1598px;
	height: 900px;
	overflow: hidden;
}

#background {
	height: 900px; /* = 1080 x 0.833 */
}

@keyframes tank {
	20% {
		transform: rotate(0deg);
	}

	43.9% {
		background-position: 0 0;
	}

	44% {
		background-position: 0 137px;
	}

	50% {
		top: 150px;
		transform: rotate(360deg);
	}

	63.9% {
		background-position: 0 137px;
	}

	64% {
		background-position: 0 0;
	}

	100% {
		transform: rotate(720deg);
		top: 530px;
	}
}
@-webkit-keyframes tank {
	20% {
		transform: rotate(0deg);
	}

	43.9% {
		background-position: 0 0;
	}

	44% {
		background-position: 0 137px;
	}

	50% {
		top: 150px;
		transform: rotate(360deg);
	}

	63.9% {
		background-position: 0 137px;
	}

	64% {
		background-position: 0 0;
	}

	100% {
		transform: rotate(720deg);
		top: 530px;
	}
}

#tank {
	width: 603px;  /* = 724 x 0.833 */
	height: 136px; /* = 163 x 0.833 */
	top: 530px;
	left: 390px;
	transform-origin: 30% 40%;
	background-image: url('tank.png');
	background-size: 603px;
}

#tank.on{
	animation-name: tank;
	animation-duration: 2.3s;
	animation-delay: 0.5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-fill-mode: forwards;
	
	-webkit-animation-name: tank;
	-webkit-animation-duration: 2.3s;
	-webkit-animation-delay: 0.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-direction: normal;
	-webkit-animation-fill-mode: forwards;
}

@keyframes avion {
	25% {
		top: 100px;
		left: 1000px;
		transform: rotate(0deg);
		background-position: 0 0;
	}
	25.5%
	{
		background-position: 0 305px;
	}

	100% {
		transform: rotate(-685deg);
		left: -380px;
		top: 480px;
		background-position: 0 305px;
	}
}

@-webkit-keyframes avion {
	25% {
		top: 100px;
		left: 1000px;
		transform: rotate(0deg);
		background-position: 0 0;
	}
	25.5%
	{
		background-position: 0 305px;
	}

	100% {
		transform: rotate(-685deg);
		left: -380px;
		top: 480px;
		background-position: 0 305px;
	}
}

#avion {
	width:310px; /* = 373 x 0.833 */
	height:90px; /* = 108 x 0.833 */
	top: 150px;
	left: 1700px;
	background-image:url(avion.png);
	background-size: 310px;
}

#avion.on
{
	animation-name: avion;
	animation-duration: 3s;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	animation-direction: normal;
	animation-fill-mode: forwards;
	
	-webkit-animation-name: avion;
	-webkit-animation-duration: 3s;
	-webkit-animation-delay: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-webkit-animation-direction: normal;
	-webkit-animation-fill-mode: forwards;
}

button
{
	position:absolute;
	background-color:#000;
	color:#fff;
	border: 1px solid orange;
	padding:15px;
	bottom:5px;
	right:5px;
}

a
{
	color:#fff;
}
a:hover
{
	color:#f22;
}