body {
	text-align:center;
	background-color:#1d7b97;
	color:#ebdbaa;
	margin:20px auto;
	font-family:open-sans-light;
	height:100%;
}

.content {
	position:relative;
	width:820px;
	height:820px;
	margin:0 auto;
	transform-origin:top left;
}
.content div img {width:100%; position:absolute; top:0; left:0; }

#cadre {width:100%; position:absolute; top:0; left:0;}
#logo {width:257px; position:absolute; top:96px; left:280px;}

#bonneannee {width:701px; height:202px; overflow:hidden; position:absolute; top:500px; left:64px;}
#bonneannee img {position:absolute; top:0; left:0;}
#bonneannee img:nth-of-type(1) ,
#bonneannee img:nth-of-type(2) ,
#bonneannee img:nth-of-type(3) ,
#bonneannee img:nth-of-type(4) 
{top:-10%; width:130px; height:215px; animation:points_defile1 300s linear infinite; background:url('img/bg-points.png') repeat top left #1d7b97; background-size:97% auto;}


#bonneannee img:nth-of-type(1) {left:0;}
#bonneannee img:nth-of-type(2) {left:185px; animation-name:points_defile2;}
#bonneannee img:nth-of-type(3) {left:394px;}
#bonneannee img:nth-of-type(4) {left:565px; animation-name:points_defile2;}
#bonneannee img:last-of-type {margin-top:52px;}

.boule {text-align:center; position:absolute; top:33px; transform-origin:top center;}
.boule div {margin:0 auto;}
.attache {border-width:2px 2px 0 2px; width:10px; height:8px; border-color:#ffb909; border-style:solid;}
.deco {border:2px solid #ebdbaa; border-radius:50%; background:0 center repeat-x transparent; animation:deco_boule 1s linear infinite; background-color:#1d7b97;}


#boule1 .deco {width:74px; height:74px; background-image:url('img/bg-boules-croix.png') ;}
#boule2 .deco {width:45px; height:45px; background-image:url('img/bg-boules-zigzag.png') ;}
#boule3 .deco {width:36px; height:36px; background-image:url('img/bg-boules-rond.png') ;}
#boule4 .deco {width:70px; height:70px; background-image:url('img/bg-boules-trait.png') ;}
#boule5 .deco {width:36px; height:36px; background-image:url('img/bg-boules-cible.png') ;}
#boule6 .deco {width:74px; height:74px; background-image:url('img/bg-boules-losange.png') ;}
#boule7 .deco {width:36px; height:36px; background-image:url('img/bg-boules-trait.png') ;}
#boule8 .deco {width:80px; height:80px; background-image:url('img/bg-boules-zigzag.png') ;}


#boule1 {width:74px; left:61px; top:249px;}
#boule2 {width:74px; left:98px; top:113px;}
#boule3 {width:74px; left:133px; top:187px;}
#boule4 {width:74px; left:167px; top:367px;}
#boule5 {width:74px; left:621px; top:172px;}
#boule6 {width:74px; left:593px; top:388px;}
#boule7 {width:36px; left:684px; top:94px;}
#boule8 {width:80px; left:682px; top:270px;}




/*------- animations ---------- */

@keyframes deco_boule {
	0% {background-position:0 center; background-size:49% auto; transform:rotate(0);}
	25% {background-position:25% center; background-size:49.5% auto; transform:rotate(-2deg);}
	50% {background-position:50% center; background-size:51% auto; transform:rotate(0deg);}
	75% {background-position:75% center; background-size:49.5% auto; transform:rotate(2deg);}
	100% {background-position:100% center; background-size:49% auto; transform:rotate(0);}
}
@keyframes points_defile1 {
	0% {background-position:0 center;}
	50% {background-position:10000px center;}
	100% {background-position:0 center;}
}
@keyframes points_defile2 {
	0% {background-position:10000px center;}
	50% {background-position:0 center;}
	100% {background-position:10000px center;}
}



@media only screen and (max-width:800px) {.content {transform:scale(0.7);}}
@media only screen and (max-width:700px) {.content {transform:scale(0.6);}}
@media only screen and (max-width:600px) {.content {transform:scale(0.5);}}
@media only screen and (max-width:500px) {.content {transform:scale(0.55);}}
@media only screen and (max-width:400px) {.content {transform:scale(0.45);}}
@media only screen and (max-width:300px) {.content {transform:scale(0.35);}}