*{
	margin: 0;
	padding: 0;
	border: 0;
}
body{
	font-family: sans-serif;
	background: #e7ebf2;
}
.fb-wrapper{
	width: 810px;
	padding: 20px;
	margin: 10px auto;
	border: 1px solid #c4cde0;
	background: #fff;
	border-radius: 3px;
}

#application{
	overflow: hidden;
	position: relative;
	font-family: sans-serif;
	color: #000;
	background: #ccc;
}

.scene{
	position: relative;
	width: 810px;
	height: 578px;
	overflow: hidden;
}
.scene > div{
	position: absolute;
}
.ciel{
	top: 0;
	left: 0;
	width: 810px;
	height: 570px;
	background: url('img/ciel.png');
	-webkit-animation: route 1s linear infinite;
}
.montagne{
	position: absolute;
}
.montagne1{
	top: 10px;
	left: 320px;
}
.montagne2{
	top: 50px;
	left: 100px;
}
.montagne3{
	top: 200px;
	left: 265px;
}
.route{
	top: 380px;
	left: -50px;
	width: 910px;
	height: 200px;
	background: url('img/route.png');
	-webkit-animation: route .25s linear infinite;
}
@-webkit-keyframes route {
	from {background-position: 0 bottom;}
	to {background-position: 100px bottom;}
}
.lignes{
	position: absolute;
	left: 0;
	top: 45px;
	width: 910px;
	height: 10px;
	background: url('img/lignes.png');
	-webkit-animation: lignes .5s linear infinite;
}
@-webkit-keyframes lignes {
	from {background-position: 0 0;}
	to {background-position: 200px 0;}
}
.herbe{
	top: 478px;
	left: -50px;
	width: 910px;
	height: 300px;
	background: url('img/herbe.png');
	-webkit-animation: route .2s linear infinite;
}
.brindilles{
	left: -50px;
	width: 910px;
	height: 50px;
	background: url('img/brindilles.png') center bottom repeat-x;
}
.brindilles1{
	top: 337px;
	-webkit-animation: route .5s linear infinite;
}
.brindilles2{
	top: 440px;
	-webkit-animation: route .2s linear infinite;
}

.banner{
	position: relative;
	width: 810px;
	height: 228px;
	margin-top: -88px;
	background: url('img/bandeau.png');
}
.banner .badge{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -100px;
	width: 200px;
	height: 200px;
}
.score{
	position: absolute;
	left: 20px;
	top: 30px;
	font-size: 40px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 2px rgba(0,0,0,.3);
}

.invite{
	position: absolute;
	left: 600px;
	top: 20px;
}
.invite-desc{
	position: absolute;
	left: 536px;
	top: -96px;
}
.leaderboard{
	position: absolute;
	left: 700px;
	top: 20px;
}

.overlay{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,.8);
}
.overlay .badge{
	position: absolute;
	top: 300px;
	left: 50%;
	margin: -150px;
	width: 300px;
	height: 300px;
}

.cycliste{
	top: 100px;
	left: 50%;
	margin-left: -176px;
	width: 352px;
	height: 343px;
}
.cycliste img{
	position: absolute;
}

.cuisse{
	top: 82px;
	left: 158px;
	width: 111px;
	height: 106px;
	-webkit-transform-origin: 88px 26px;
	-webkit-animation: cuisse 1s linear infinite;
}
@-webkit-keyframes cuisse {
	from {-webkit-transform: rotate(3deg);}
	25% {-webkit-transform: rotate(-20deg);}
	35% {-webkit-transform: rotate(-18deg);}
	40% {-webkit-transform: rotate(-16deg);}
	75% {-webkit-transform: rotate(20deg);}
	82% {-webkit-transform: rotate(21deg);}
	to {-webkit-transform: rotate(3deg);}
}
.cuisse1{
	-webkit-animation-delay: -.5s;
}
.mollet img{
	position: absolute;
	top: 0;
	left: 0;
	width: 41px;
	height: 119px;
	-webkit-transform-origin: 33px 112px;
	-webkit-animation: mollet-img 1s linear infinite;
}
@-webkit-keyframes mollet-img {
	from {
		-webkit-transform: rotate(90deg);
	}
	25% {
		-webkit-transform: rotate(185deg);
	}
	37% {
		-webkit-transform: rotate(211deg);
	}
	65%{
		-webkit-transform: rotate(292deg);
	}
	to {
		-webkit-transform: rotate(450deg);
	}
}
.mollet{
	position: absolute;
	top: 130px;
	left: 179px;
	width: 41px;
	height: 119px;
	-webkit-transform-origin: 33px 136px;
	-webkit-animation: mollet 1s linear infinite;
}
@-webkit-keyframes mollet {
	from {
		-webkit-transform: rotate(-90deg);
	}
	25% {
		-webkit-transform: translate(0,8px) rotate(-180deg);
	}
	65% {
		-webkit-transform: translate(4px,-15px) rotate(-324deg);
	}
	75% {
		-webkit-transform: translate(0,-12px) rotate(-360deg);
	}
	to {
		-webkit-transform: rotate(-450deg);
	}
}
.mollet1{
	-webkit-animation-delay: -.5s;
}
.mollet1 img{
	-webkit-animation-delay: -.5s;
}
.chaussure img{
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 32px;
	-webkit-transform-origin: 13px 33px;
	-webkit-animation: chaussure-img 1s linear infinite;
}
@-webkit-keyframes chaussure-img {
	from {
		-webkit-transform: rotate(90deg);
	}
	50% {
		-webkit-transform: rotate(230deg);
	}
	to {
		-webkit-transform: rotate(450deg);
	}
}
.chaussure{
	position: absolute;
	top: 228px;
	left: 183px;
	width: 60px;
	height: 32px;
	-webkit-transform-origin: 13px 68px;
	-webkit-animation: chaussure 1s linear infinite;
}
@-webkit-keyframes chaussure {
	from {
		-webkit-transform: rotate(-90deg);
	}
	to {
		-webkit-transform: rotate(-450deg);
	}
}
.chaussure1{
	-webkit-animation-delay: -.5s;
}
.chaussure1 img{
	-webkit-animation-delay: -.5s;
}
.pedale{
	top: 288px;
	left: 196px;
	width: 41px;
	height: 4px;
	-webkit-transform-origin:2px 50%;
	-webkit-animation: pedalier 1s linear infinite;
}
@-webkit-keyframes pedalier {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(-360deg);}
}
.roue{
	top: 202px;
	width: 142px;
	height: 142px;
	-webkit-animation: roue 1s linear infinite;
}
@-webkit-keyframes roue {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(-360deg);}
}
.roue1{
	left: 0;
}
.roue2{
	left: 211px;
}
.cadre{
	top: 127px;
	left: 66px;
	width: 226px;
	height: 186px;
}
.pedalier{
	top: 268px;
	left: 159px;
	width: 61px;
	height: 43px;
	-webkit-transform-origin:39px 50%;
	-webkit-animation: pedalier 1s linear infinite;
}
@-webkit-keyframes pedalier {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(-360deg);}
}
.corps{
	top: 0;
	left: 62px;
	width: 214px;
	height: 132px;
	-webkit-transform-origin:184px 106px;
	-webkit-animation: corps .5s ease-in infinite alternate;
}
@-webkit-keyframes corps {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(-3deg);}
}
.bras{
	top: 59px;
	left: 116px;
	width: 41px;
	height: 94px;
	-webkit-animation: bras .5s ease-in infinite alternate;
}
@-webkit-keyframes bras {
	from {-webkit-transform: translate(0,0) rotate(0deg);}
	to {-webkit-transform: translate(0,6px) rotate(-2deg);}
}
.avant-bras{
	top: 131px;
	left: 63px;
	width: 94px;
	height: 49px;
	-webkit-transform-origin: 10px 40px;
	-webkit-animation: avant-bras .5s ease-in infinite alternate;
}
@-webkit-keyframes avant-bras {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(3deg);}
}

.page-link{
	position:absolute;
	bottom: 20px;
	left: 20px;
}
.page-link a{
	display: block;
	font-size: 12px;
	color: #888;
	margin-top: 3px;
}


.montagne .montagne.route, .montagne .montagne.brindilles, .montagne .montagne.herbe, .montagne .montagne.cycliste{
	-webkit-transition: -webkit-transform .5s ease-in-out;
	-webkit-transform: rotate(15deg);
}