html, body { height: 100%; }

body {
	background-color: white;
	color: black;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

#boxContainer {
	width: 1280px;
	height: 1280px;
	background-image: url("img/carton.jpg");
	background-position: 0px 0px;
	background-size: 2000px 1280px;
}

#boxTop {
	width: 575px;
	height: 576px;
	background-image: url("img/carton.jpg");
	background-position: -358px -362px;
	background-size: 2000px 1280px;
}

.boxSide {
	width: 576px;
	height: 231px;
	background-image: url("img/carton.jpg");
	background-size: 2000px 1280px;
}
#boxSide1 { background-position: -1300px -132px; }
#boxSide2 { background-position: -1300px -362px; }
#boxSide3 { background-position: -1300px -592px; }
#boxSide4 { background-position: -1300px -823px; }
			
.vache1 {
	width: 100px;
	height: 78px;
	background-image: url("img/vache1.png");
	cursor: pointer;
/*	background-size: 2000px 1280px;*/	
	-webkit-transition: all .12s ease-out;
	-Moz-transition: all .12s ease-out;
}
.vache2 {
	width: 100px;
	height: 78px;
	background-image: url("img/vache2.png");
	cursor: pointer;
/*	background-size: 2000px 1280px;*/	
	-webkit-transition: all .14s ease-out;
	-Moz-transition: all .14s ease-out;
}
.vache3 {
	width: 100px;
	height: 78px;
	background-image: url("img/vache3.png");
	cursor: pointer;
/*	background-size: 2000px 1280px;*/	
	-webkit-transition: all .1s ease-out;
	-Moz-transition: all .1s ease-out;
}

#banner {
	width: 550px;
	height: 332px;
	background-image: url("img/banner.png");
}

#sun {
	width: 250px;
	height: 750px;/*272px;*/
	cursor: pointer;
	background: url("img/soleil.png") center bottom no-repeat, url("img/cord.png") center no-repeat;
	-webkit-transition: all .5s ease-in-out;
	-Moz-transition: all .5s ease-in-out;
}

#ufo {
	width: 132px;
	height: 750px;/*100px;*/
	background: url("img/ovni.png") center bottom no-repeat, url("img/cord.png") center no-repeat;
}

.cloud1 {
	width: 130px;
	height: 750px;
	background: url("img/cloud1.png") center bottom no-repeat, url("img/cord.png") center no-repeat;
}

.cloud2 {
	width: 150px;	
	height: 750px;
	background: url("img/cloud2.png") center bottom no-repeat, url("img/cord.png") center no-repeat;
}

.cloud3 {
	width: 100px;	
	height: 750px;
	background: url("img/cloud3.png") center bottom no-repeat, url("img/cord.png") center no-repeat;
}

#moulin {
	width: 121px;
	height: 201px;
	background-image: url("img/moulin.png");
}

#helix {
	width: 179px;
	height: 184px;
	background-image: url("img/helice.png");
	cursor: pointer;
}
#invite {
	background: url('img/invite.png');
	width: 300px;
	height: 178px;
	position: absolute;
	top: 10px;
	right: 100px;
	z-index: 100;
	-webkit-transition: all 0.5s ease-in;
	-Moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in;
}
#invite.off {
	right: -350px;
}