html, body {
	height: 100%;
	background-color: #3fbfff;
	margin: 0;
	overflow: hidden;
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.container {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
}

#ground {
	background: url(../img/herbs.png) left 400px repeat-x, url(../img/tree.png) 20% top  no-repeat, url(../img/big-hurbs.png) 75% 300px no-repeat;
	
	height: 700px;
	position: absolute;
	width: 100%;
	bottom: -100px;
	
	pointer-events: none;
}

body.flash {
	background: white;
}

body.flash #ground {
	display: none;
}

/* DUCK  
	
Duck black 	> .duck-black
Duck blue  	> .duck-blue
Duck dead 	> .fall
Duck fly01 	> .fly01
Duck fly02 	> .fly02
Duck fly03 	> .fly03

Duck gauche > .duck-left
	
*/
.duck {
	width: 152px;
	height: 148px;
	cursor: pointer;
	/*z-index: 10;*/
	
	/* absolute */position: absolute;
}
.duck-black {
	background: url(../img/sprite-duckblack.png) no-repeat;
}
.duck-blue {
	background: url(../img/sprite-duckblue.png) no-repeat;
}
.duck-left {
	-webkit-transform: scaleX(-1);
}

.fly01 {
	-webkit-animation: fly01 .15s infinite steps(1,end) alternate;
}
@-webkit-keyframes fly01 {
	0%   { background-position: 0 0px }
	33%  { background-position: -152px 0px }
	66% { background-position: -304px 0px } 
}
.fly02 {
	-webkit-animation: fly02 .15s infinite steps(1,end) alternate;
}
@-webkit-keyframes fly02 {
	0%   { background-position: 0 -148px }
	33%  { background-position: -152px -148px }
	66% { background-position: -304px -148px } 
}
.fly03 {
	-webkit-animation: fly03 .15s infinite steps(1,end) alternate;
}
@-webkit-keyframes fly03 {
	0%   { background-position: 0 -298px }
	33%  { background-position: -152px -298px }
	66% { background-position: -304px -298px } 
}
.fall {
	background-position: 0 -446px;
	-webkit-animation: fall .15s .8s infinite steps(1,end) alternate;
	pointer-events: none;
}
@-webkit-keyframes fall {
	0%   { background-position: -152px -446px }
	50%  { background-position: -304px -446px }
	100% { background-position: -152px -446px } 
}


/* DOG */

.dog {
	width: 220px;
	height: 192px;
	position: absolute;
	bottom: 100px;
	background: url(../img/dog.png) no-repeat;
}

.dog-walk {
	-webkit-animation: dog-walk 7s steps(1,end) 1;
	-webkit-animation-fill-mode: forwards;

}
@-webkit-keyframes dog-walk {
	2%   { background-position: -458px 24px;  }
	4%   { background-position: -680px 24px; -webkit-transform: translateX(20px); }
	6%   { background-position: -905px 24px; -webkit-transform: translateX(40px); }
	8%   { background-position: -680px 24px; -webkit-transform: translateX(60px); }
	10%   { background-position: -905px 24px; -webkit-transform: translateX(80px); }
	12%   { background-position: -458px 24px; -webkit-transform: translateX(100px); }
	14%   { background-position: -680px 24px; -webkit-transform: translateX(120px); }
	16%   { background-position: -905px 24px; -webkit-transform: translateX(140px); }
	20%   { background-position: -680px 24px; -webkit-transform: translateX(160px); }
	22%   { background-position: -905px 24px; -webkit-transform: translateX(180px); }
	24%    { background-position: 0 24px; }
	26%   { background-position: -224px 24px; }
	28%    { background-position: 0 24px; }
	32%   { background-position: -224px 24px; }
	36%   { background-position: -680px 24px; -webkit-transform: translateX(200px); }
	38%   { background-position: -905px 24px; -webkit-transform: translateX(220px); }
	40%   { background-position: -680px 24px; -webkit-transform: translateX(240px); }
	42%   { background-position: -905px 24px; -webkit-transform: translateX(260px); }
	44%   { background-position: -680px 24px; -webkit-transform: translateX(280px); }
	48%   { background-position: -905px 24px; -webkit-transform: translateX(300px); }
	50%   { background-position: -680px 24px; -webkit-transform: translateX(320px); }
	52%   { background-position: -905px 24px; -webkit-transform: translateX(340px); }
	54%    { background-position: 0 24px; }
	56%   { background-position: -224px 24px; }
	58%    { background-position: 0 24px; }
	60%   { background-position: -224px 24px; }
	62%   { background-position: -680px 24px; -webkit-transform: translateX(360px); }
	64%   { background-position: -905px 24px; -webkit-transform: translateX(380px); }
	66%   { background-position: -680px 24px; -webkit-transform: translateX(400px); }
	68%   { background-position: -905px 24px; -webkit-transform: translateX(420px); }
	70%   { background-position: -680px 24px; -webkit-transform: translateX(440px); }
	72%	{ background-position: 0 -228px; }			
	80%	{ background-position: 0 -228px; }			
	82%	{ background-position: -230px -228px; -webkit-transform: translate(440px, -40px); }
	83%	{ background-position: -230px -228px; -webkit-transform: translate(450px, -80px); }
	84%	{ background-position: -230px -228px; -webkit-transform: translate(460px, -120px); }
	85%	{ background-position: -230px -228px; -webkit-transform: translate(470px, -140px); }
	86%	{ background-position: -230px -228px; -webkit-transform: translate(480px, -170px); }
	87%	{ background-position: -230px -228px; -webkit-transform: translate(490px, -210px); }
	88%	{ background-position: -425px -228px; -webkit-transform: translate(500px, -200px); }
	89%	{ background-position: -425px -228px; -webkit-transform: translate(510px, -190px); }
	90%	{ background-position: -425px -228px; -webkit-transform: translate(520px, -180px); }
	91%	{ background-position: -425px -228px; -webkit-transform: translate(540px, -170px); height: 80px; }
	92%	{ background-position: -425px -228px; -webkit-transform: translate(550px, -150px); height: 0px; }
	100%	{ background-position: -425px -228px; -webkit-transform: translate(550px, -150px); height: 0px; }

}

/* DOG RESULT 
		ADD CLASS 
		
			.dog-win-one
			.dog-win-two
			.dog-win-loose
			
		supprimer le left des classes.	
		
		*/
		.dog-result {
			width: 220px;
			height: 156px;
			position: absolute;
			bottom: 0;
			
			background: url(img/dog.png) no-repeat;
			-webkit-transition: -webkit-transform 2s ease-in-out;
		}
		
			.dog-win-one {
				background-position: -640px -246px;
				left: 20%; /* position de l'impact */
				-webkit-transform: translateY(-260px);
	
			}
			.dog-win-two {
				background-position: -870px -246px;
				left: 50%; /* position de l'impact */
				-webkit-transform: translateY(-260px);
			}
			.dog-loose {
				width: 116px;
				background-position: -1124px -246px;
				left: 80%; /* position de l'impact */
				-webkit-transform: translateY(-260px);
			}