body{
	background-image: url('../img/grass.jpg');
	background-repeat: no-repeat;
	background-size: 100vw 100vh;
	z-index: -9;
	overflow-x: hidden; 
	margin: 0;
}
.grass{
	background-image: url('../img/grass.jpg'); 
	background-size: 100vw 100vh;
	background-repeat: no-repeat;

}
.jardin{
	background-image: url('../img/garden.jpg'); 
	background-size: 100vw 100vh;
	background-repeat: no-repeat;

}
.castle{
	background-image: url('../img/castle.jpg');
	background-repeat: no-repeat;
	background-size: 100vw 100vh;
}
.beach{
	background-image: url('../img/beach.jpg'); 
	background-repeat: no-repeat;
	background-size: 100vw 100vh;
}

.coos{
	position: absolute;
	top: 80vh;
	width: 93.75px;
	height: 132px;
	background: url('../img/running2.png') left center;
	z-index: 9 !important;
	animation: play 5s steps(8) infinite; 
}
@keyframes play {
   	10%{ 
   		background-position: -750px; 
   		transform: translate(192px);
   	}
   	20%{
   		background-position: -1500px;
   		transform: translate(384px);
   	}
   	30%{ 
   		background-position: -2250px;
   		transform: translate(576px);
   	}
   	40%{
   		background-position: -3000px;
   		transform: translate(768px);
   	}
   	50%{ 
   		background-position: -3750px; 
   		transform: translate(960px);
   	}
   	60%{
   		background-position: -4500px;
   		transform: translate(1152px);
   	}
   	70%{ 
   		background-position: -5250px; 
   		transform: translate(1344px);
   	}
   	80%{
   		background-position: -6000px;
   		transform: translate(1536px);
   	}
   	90%{ 
   		background-position: -6750px; 
   		transform: translate(1728px);
   	}
   	100%{
   		background-position: -7500px;
   		transform: translate(1920px);
   	}
}


.content{
	position: relative;
	margin: auto;
	background-color: rgba(0,0,0,.6);
	z-index: 99 !important;
}

.content h1{
	color: #fff;
	padding: 20px;
	margin: 0;
}
.content select{
	margin-left: 20px;
	margin-bottom: 20px;
}

@media(max-width: 1366px){
	.coos{
		top: 75vh;
	}
	@keyframes play {
   	10%{ 
   		background-position: -750px; 
   		transform: translate(136.6px);
   	}
   	20%{
   		background-position: -1500px;
   		transform: translate(273.2px);
   	}
   	30%{ 
   		background-position: -2250px;
   		transform: translate(409.8px);
   	}
   	40%{
   		background-position: -3000px;
   		transform: translate(546.4px);
   	}
   	50%{ 
   		background-position: -3750px; 
   		transform: translate(683px);
   	}
   	60%{
   		background-position: -4500px;
   		transform: translate(819.6px);
   	}
   	70%{ 
   		background-position: -5250px; 
   		transform: translate(956.2px);
   	}
   	80%{
   		background-position: -6000px;
   		transform: translate(1092.8px);
   	}
   	90%{ 
   		background-position: -6750px; 
   		transform: translate(1229.4px);
   	}
   	100%{
   		background-position: -7500px;
   		transform: translate(1366px);
   	}
}
}