body{
	background: #fff url('images/bgpat.png') repeat-x top center;	
	text-align: center;
	color: #fff;
	font-family: 'Comic Sans', 'Comic Sans MS';
	font-size: 20px;
	line-height: 24px;
	padding-bottom: 20px;
	overflow-x: hidden;
}



#preloader{
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: #48b9e7;
	z-index: 99;
}

#preloader img{
	top: 50%;
	left: 50%;
	margin-left: -25px;
	margin-top: -25px;
	position: absolute;
}

.wrapper{
	background: transparent url('images/bg.jpg') no-repeat top center;	
	margin: 0px auto;
	width: 980px;
	min-height: 700px;
}

.logo{
	margin: 0px auto;
	display: block;
	margin-top: 30px;
}

#pops{
	width: 440px;
	float: left;
	position: relative;
	margin-top: 50px;
	clear: both;
	height: 477px;
}

#pops .pop{
	background-repeat: no-repeat;	
	position: absolute;
	bottom: 0px;
	right: 50px;	
	display: none;	
	width: 359px;
	height: 439px;
	background-position: center center;
	background-size: contain;
}

#pops .pop.active{
	display: block;	
}


#pop-1{ background-image: url('images/pop-1.png'); }
#pop-2{ background-image: url('images/pop-2.png'); }
#pop-3{ background-image: url('images/pop-3.png'); }
#pop-4{ background-image: url('images/pop-4.png'); }
#pop-5{ background-image: url('images/pop-5.png'); }


#emotions{
	width: 540px;
	float: left;
	position: relative;
	margin-top: 70px;
	height: 500px;
}

#emotions .emo{
	display: block;
	cursor: pointer;
	position: absolute;
	background-repeat: no-repeat;
}

#emo-1{ background-image: url('images/emo-1.png'); width: 221px; height: 80px; top: 314px; left: 0px; }
#emo-1:hover{ background-image: url('images/emo-1b.png'); }
#emo-2{ background-image: url('images/emo-2.png'); width: 176px; height: 48px; top: 170px; left: 60px; }
#emo-2:hover{ background-image: url('images/emo-2b.png'); }
#emo-3{ background-image: url('images/emo-3.png'); width: 166px; height: 77px; top: 40px; left: 0px; }
#emo-3:hover{ background-image: url('images/emo-3b.png'); }
#emo-4{ background-image: url('images/emo-4.png'); width: 274px; height: 76px; top: 60px; right: 0px; }
#emo-4:hover{ background-image: url('images/emo-4b.png'); }
#emo-5{ background-image: url('images/emo-5.png'); width: 295px; height: 90px; top: 240px; right: 30px; }
#emo-5:hover{ background-image: url('images/emo-5b.png'); }




.levitate{
	animation: levitate 2s infinite;  
}
.levitate2{
	animation: levitate 2s infinite;
	animation-delay: -1s;
}

.levitate:hover,
.levitate2:hover{
	 animation-play-state: paused;
}

@keyframes levitate{
	0% {
		transform: translateY(-5px);
	}

	50% {
		transform: translateY(3px);
	}

	100%{
		-moz-transform: translateY(-5px);
	}
}


#win{
	display: none;
	margin: 0px auto;
	margin-top: 50px;
	width: 100%;
	height: 633px;
	background: transparent url('images/win.png') no-repeat top center;
	position: relative;
}


#dload{
	cursor: pointer;
	background: transparent url('images/dload.png') no-repeat top center;
	width: 250px;
	height: 68px;
	position: absolute;
	right: 50px;
	top: 50px;
}

#dload:hover{
	background-image: url('images/dload-b.png');
}