@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One);

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

a {
  color: #00B7FF;
}


@-webkit-keyframes a {
	0% {
		opacity: 0;
		-o-transform: translate3d(0, -60px, 0);
		-ms-transform: translate3d(0, -60px, 0);
		-moz-transform: translate3d(0, -60px, 0);
		-webkit-transform: translate3d(0, -60px, 0);
		transform: translate3d(0, -60px, 0);
		color:transparent;
		
	}

	30% {
		opacity: 1;
		-o-transform: translate3d(0, 5px, 0);
		-ms-transform: translate3d(0, 5px, 0);
		-moz-transform: translate3d(0, 5px, 0);
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
		text-shadow:0 0 30px #888;
		color:transparent;
	}

	60% {
		-o-transform: translate3d(0, -2px, 0);
		-ms-transform: translate3d(0, -2px, 0);
		-moz-transform: translate3d(0, -2px, 0);
		-webkit-transform: translate3d(0, -2px, 0);
		transform: translate3d(0, -2px, 0);
		
		
	}

	100% {
		-o-transform: translate3d(0, 0px, 0);
		-ms-transform: translate3d(0, 0px, 0);
		-moz-transform: translate3d(0, 0px, 0);
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
	}

}
@-webkit-keyframes b {
	0% {
		opacity: 0;
		-o-transform: translate3d(0, -40px, 0);
		-ms-transform: translate3d(0, -40px, 0);
		-moz-transform: translate3d(0, -40px, 0);
		-webkit-transform: translate3d(0, -40px, 0);
		transform: translate3d(0, -40px, 0);
		color:transparent;
		
	}

	30% {
		opacity: 1;
		-o-transform: translate3d(0, 5px, 0);
		-ms-transform: translate3d(0, 5px, 0);
		-moz-transform: translate3d(0, 5px, 0);
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
		text-shadow:0 0 30px #888;
		color:transparent;
		
	}
	
	60%{
		color:transparent;
	}

	100% {
		opacity: 1;
		-o-transform: translate3d(0, 0px, 0);
		-ms-transform: translate3d(0, 0px, 0);
		-moz-transform: translate3d(0, 0px, 0);
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
		
	}

}

@-webkit-keyframes c {
	0% {
		opacity: 0;
		-o-transform: translate3d(0, 40px, 0);
		-ms-transform: translate3d(0, 40px, 0);
		-moz-transform: translate3d(0, 40px, 0);
		-webkit-transform: translate3d(0, 40px, 0);
		transform: translate3d(0, 40px, 0);
	}

	30% {
		opacity: 1;
		-o-transform: translate3d(0, 45px, 0);
		-ms-transform: translate3d(0, 45px, 0);
		-moz-transform: translate3d(0, 45px, 0);
		-webkit-transform: translate3d(0, 45px, 0);
		transform: translate3d(0, 45px, 0);
	}

	100% {
		opacity: 1;
		-o-transform: translate3d(0, 0px, 0);
		-ms-transform: translate3d(0, 0px, 0);
		-moz-transform: translate3d(0, 0px, 0);
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
	}

}


@-moz-keyframes a {
	0% {
		opacity: 0;
		-o-transform: translate3d(0, -60px, 0);
		-ms-transform: translate3d(0, -60px, 0);
		-moz-transform: translate3d(0, -60px, 0);
		-webkit-transform: translate3d(0, -60px, 0);
		transform: translate3d(0, -60px, 0);
	}

	30% {
		opacity: 1;
		-o-transform: translate3d(0, 5px, 0);
		-ms-transform: translate3d(0, 5px, 0);
		-moz-transform: translate3d(0, 5px, 0);
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}

	60% {
		-o-transform: translate3d(0, -2px, 0);
		-ms-transform: translate3d(0, -2px, 0);
		-moz-transform: translate3d(0, -2px, 0);
		-webkit-transform: translate3d(0, -2px, 0);
		transform: translate3d(0, -2px, 0);
	}

	100% {
		-o-transform: translate3d(0, 0px, 0);
		-ms-transform: translate3d(0, 0px, 0);
		-moz-transform: translate3d(0, 0px, 0);
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
	}

}
@-moz-keyframes b {
	0% {
		opacity: 0;
		-o-transform: translate3d(0, -40px, 0);
		-ms-transform: translate3d(0, -40px, 0);
		-moz-transform: translate3d(0, -40px, 0);
		-webkit-transform: translate3d(0, -40px, 0);
		transform: translate3d(0, -40px, 0);
		
	}

	30% {
		opacity: 1;
		-o-transform: translate3d(0, 5px, 0);
		-ms-transform: translate3d(0, 5px, 0);
		-moz-transform: translate3d(0, 5px, 0);
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0);
	}

	100% {
		opacity: 1;
		-o-transform: translate3d(0, 0px, 0);
		-ms-transform: translate3d(0, 0px, 0);
		-moz-transform: translate3d(0, 0px, 0);
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
	}

}

@-webkit-keyframes c {
	0% {
		opacity: 0;

	}
	
	60% {
		opacity:0.2;
	}

	90% {
		opacity: 1;

	}

}

@-webkit-keyframes d {
	40% {
		opacity: 0.4;

	}

	60% {
		color: #999;

	}

}

ol li:nth-child(1){
	-webkit-animation-name: b;
	-webkit-animation-duration: 2.2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
}
ol li:nth-child(2){
	-webkit-animation-name: b;
	-webkit-animation-duration: 2.4s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
}
ol li:nth-child(3){
	-webkit-animation-name: b;
	-webkit-animation-duration: 2.6s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
}
ol li:nth-child(4){
	-webkit-animation-name: b;
	-webkit-animation-duration: 2.8s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
}
ol li:nth-child(5){
	-webkit-animation-name: b;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
}
ol li:nth-child(6){
	-webkit-animation-name: b;
	-webkit-animation-duration: 3.2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
}
ol li:nth-child(7){
	-webkit-animation-name: b;
	-webkit-animation-duration: 3.4s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
}
ol li:nth-child(8){
	-webkit-animation-name: b;
	-webkit-animation-duration: 3.6s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
}
ol li:nth-child(9){
	-webkit-animation-name: b;
	-webkit-animation-duration: 3.8s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
}
ol li:nth-child(10){
	-webkit-animation-name: b;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
}

h1, h2, h3 {
	font-family: 'Julius Sans One', sans-serif;
	font-weight: 500;
	position:relative;
	z-index:2;
}

h1 {
	-webkit-animation-name: a;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
	-moz-animation-name: a;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: 1;
	-moz-animation-delay: 0s;
	font-size:50px;
	margin:20px 0 0 0;
	letter-spacing: 12px;

}

h2 {
	-webkit-animation-name: b;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
	-moz-animation-name: b;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: 1;
	-moz-animation-delay: 0s;
	margin: 5px 0 0 0;
	letter-spacing: 10px;
	font-size: 11px;
}

h3 {
	-webkit-animation-name: b;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 0s;
	-moz-animation-name: b;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: 1;
	-moz-animation-delay: 0s;
	font-size: 25px;
	border-bottom: 1px solid;
	padding: 4px 0;
	margin: 5px 0 9px 0;
	letter-spacing: 12px;
	display: inline-block;
}

html,body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-align: center;
	background-attachment: fixed;
	background-size: cover;
}
header {
	position:relative;
	z-index:2;

}
.cursor {
  pointer-events: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-top: -9999px;
	margin-left: -9999px;
	z-index:0;
	-webkit-transform: translateZ(0);
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
}
.cursor.idle {
	background-image: url(/images/cursor-gray.png) !important;
	text-shadow: 0 0 2px #333;
	color: transparent;
	opacity: 0.8;
}
.cursor.idle span {
	text-shadow: 0 0 2px #333;
	color: transparent;
	opacity: 0.8;
}
.cursor.own {
	position: absolute;
	top: -200px;
	left: -200px;
	margin: 0;
	z-index: 2;
	-webkit-transition: all .01s ease-out;
	-moz-transition: all .01s ease-out;
	-ms-transition: all .01s ease-out;
	-o-transition: all .01s ease-out;
	transition: all .01s ease-out;

}
.cursor.own div{
	color:red;
	font-weight:bold;
}

.cursor div {
	position: relative;
	left: 25px;
	top: 6px;
	font-size: 12px;
	color: #333;
	font-family: 'Julius Sans One', sans-serif;
	z-index:2;
	text-shadow: 0 0 5px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff, 0 0 1px #fff;
}
.cursor div.name {
}
.cursor div.time {
	font-size: 10px;
}
.cursor.idle div {
	color: transparent;
	text-shadow: 0 0 2px #000;
}

ol {
	list-style:none;
	padding:0;
	margin:0;
}

.fbutton {
		background: url('https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png') no-repeat -2px -53px;
		display:inline-block;
		width: 223px;
		height: 34px;
		margin:10px 0;
		-webkit-animation-name: c;
		-webkit-animation-duration: 4s;
		-webkit-animation-iteration-count: 1;
		opacity:1;
		-webkit-animation-delay: 0s;
}

.fbutton:hover {
		background-position: -2px -97px;					
}

.fbutton:focus {
		background: url(https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png) no-repeat -2px -97px;
}
.okfocus {
	text-align: center;
	position: fixed;
	bottom: 10px;
	left: 0;
	font-size: 11px;
	width: 100%;
	cursor: pointer;
}
.okfocus img {
	width: 100px;
}