@charset "utf-8";
/* CSS Document */

#wrapper {
	width:100%;
	height:100%; 
	/*min-height:2000px;*/
	margin: 0px;
	background-color:#ffffff;
	position:fixed;	 
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:1;
	overflow:hidden;
}

	.firework	{
		-webkit-animation: circle 1s;
		-moz-animation: circle 1s;
		animation: circle 1s ease-out;
		-webkit-transform-origin: center;
		-moz-transform-origin: center;
		margin:-340px 0px 0px -340px;
		background-color: transparent;
		-webkit-animation-iteration-count: 1;
		-moz-animation-iteration-count: 1;
		animation-iteration-count: 1;
		opacity:0;
	}

	@-webkit-keyframes circle	{
    	0% { -webkit-transform: scale(0.1); opacity: 0.2;  }
  		50% { opacity: 1;}
  		100% { -webkit-transform: scale(0.5); opacity: 0;}
	}
	
	@-moz-keyframes circle	{
    	0% { -moz-transform: scale(0.1); -moz-opacity:0.2; }
  		50% { -moz-opacity: 1;}
  		100% { -moz-transform: scale(0.5); -moz-opacity: 0;}
	}
	
	@keyframes circle {
  		0% { transform: scale(0.1);transform-origin: 50% 50%;opacity: 0.2; }
  		50% { opacity: 1;}
  		100% { transform: scale(0.5); opacity: 0;}	
	}


#wheel {
	width:746px;
	height:746px;
	margin:20px auto;
	background-image:url(images/wheel.jpg);
	background-repeat:no-repeat;
	background-position:100px 100px;
	position:relative;
	z-index:5;
}

.intro {
	position:absolute;
	z-index:15;
	top:365px;
	left:295px;
	text-align:center;
	font-size:22px;
	color:#b22230;
}

.star {
	display:block;
	position:absolute;
	z-index:10;
	opacity:1;
}

@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.5;
    }
    100% {
        opacity:1;
    }
}
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0.5;
    }
    100% {
        opacity:1;
    }
}

.star1 {
	top:200px;
	left:210px;
	width:90px;
	height:85px;
	-webkit-animation: blink 4s infinite;
	-moz-animation: blink 4s infinite;
	animation: blink 4s infinite;
}

.star2 {
	top:300px;
	left:310px;
	width:66px;
	height:70px;
	animation-delay:1s;
	-webkit-animation-delay:1s;
	-webkit-animation: blink 3s infinite;
	-moz-animation: blink 3s infinite;
	animation: blink 3s infinite;
}

.star3 {
	top:400px;
	left:170px;
	width:66px;
	height:70px;
	animation-delay:1s;
	-webkit-animation-delay:1s;
	-webkit-animation: blink 2s infinite;
	-moz-animation: blink 2s infinite;
	animation: blink 2s infinite;
}

.star4 {
	top:300px;
	left:510px;
	width:90px;
	height:85px;
	-webkit-animation: blink 4s infinite;
	-moz-animation: blink 4s infinite;
	animation: blink 4s infinite;
}

.star5 {
	top:450px;
	left:410px;
	width:66px;
	height:70px;
	animation-delay:1s;
	-webkit-animation-delay:1s;
	-webkit-animation: blink 2s infinite;
	-moz-animation: blink 2s infinite;
	animation: blink 2s infinite;
}

.star6 {
	top:200px;
	left:470px;
	width:66px;
	height:70px;
	animation-delay:1s;
	-webkit-animation-delay:1s;
	-webkit-animation: blink 2s infinite;
	-moz-animation: blink 2s infinite;
	animation: blink 2s infinite;
}

.star7 {
	top:500px;
	left:250px;
	width:90px;
	height:85px;
	-webkit-animation: blink 3s infinite;
	-moz-animation: blink 3s infinite;
	animation: blink 3s infinite;
}


#descriptions {
	position:absolute;
	top:140px;
	left:290px;
	text-align:center;
	z-index:99;
}

#descriptions div {
	display:none;
	width:160px;
	color:#666;
}

#descriptions .readmore {
	background-color:#b02233;
	color:#fff;
	text-decoration:none;
	padding:5px 10px;
	border-radius:5px;
}


span {position:absolute;z-index:50;}

span#d0 {
	top:30px;
	left:420px;
	width:130px;
	height:106px;
	background-image:url(images/sickness.png);
	background-repeat:no-repeat;

}

span#d45 {
	top:38px;
	left:193px;
	width:131px;
	height:98px;
	background-image:url(images/enviro.png);
	background-repeat:no-repeat;
}

span#d90 {
	top:160px;
	left:33px;
	width:133px;
	height:219px;
	background-image:url(images/foodwater.png);
	background-repeat:no-repeat;
}

span#d135 {
	top:455px;
	left:43px;
	width:74px;
	height:63px;
	background-image:url(images/stress.png);
	background-repeat:no-repeat;
}

span#d180 {
	top:595px;
	left:180px;
	width:177px;
	height:115px;
	background-image:url(images/wellbeing.png);
	background-repeat:no-repeat;
}

span#d225 {
	top:625px;
	left:450px;
	width:77px;
	height:83px;
	background-image:url(images/culture.png);
	background-repeat:no-repeat;
}

span#d270 {
	top:428px;
	left:613px;
	width:91px;
	height:114px;
	background-image:url(images/productivity.png);
	background-repeat:no-repeat;
}

span#d315 {
	top:188px;
	left:606px;
	width:111px;
	height:144px;
	background-image:url(images/staff.png);
	background-repeat:no-repeat;

}