body {
	background: black;
	text-align: center;
	font-family: 'Hammersmith One, sans serif';
	perspective: 200px;
	-moz-perspective: 200px;
	-ms-perspective: 200px;
	-o-perspective: 200px;
	-webkit-perspective: 200px;

	transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

#splash {
	max-width: 600px;
	margin: 0 auto;
}

canvas {
	margin-top: 40px;
}

img {
	margin: 0 auto;
}

.logo {
	background-image: url('../assets/loader/bb-logo-white.png');
	width: 300px;
	height: 130px;
	background-size: 100%;
	background-repeat: no-repeat;
	margin: 20px 40px 40px 20px;
	position: absolute;
}

@-webkit-keyframes drunk-3 {
  0% {      
			transform: rotate3d(-5,1,10,15deg);
			-moz-transform: rotate3d(-5,1,10,15deg);
			-ms-transform: rotate3d(-5,1,10,15deg);
			-o-transform: rotate3d(-5,1,10,15deg);
			-webkit-transform: rotate3d(-5,1,10,15deg);
			opacity: 0.9;
  }
 40% {      transform: rotate3d(20,1,-50, 5deg);
			-moz-transform: rotate3d(20,1,-50, 5deg);
			-ms-transform: rotate3d(20,1,-50, 5deg);
			-o-transform: rotate3d(20,1,-50, 5deg);
			-webkit-transform: rotate3d(20,1,-50, 5deg);
			opacity: 0.2;
  }
  45% {
  			opacity: 1;
  }
	50% {
			opacity: 0.1;
			transform: rotate3d(10,1,30,-20deg);
			-moz-transform: rotate3d(10,1,30,-20deg);
			-ms-transform: rotate3d(10,1,30,-20deg);
			-o-transform: rotate3d(10,1,30,-20deg);
			-webkit-transform: rotate3d(10,1,30,-20deg);
	}
  55% {
  			opacity: 0.7;
  }
	60% {
			opacity: 0.1;
	}
  100% {    transform: rotate3d(10,1,0,5deg);
			-moz-transform: rotate3d(10,1,0,5deg);
			-ms-transform: rotate3d(10,1,0,5deg);
			-o-transform: rotate3d(10,1,0,5deg);
			-webkit-transform: rotate3d(10,1,0,5deg);
			opacity: 0.7;
  }
}

@-webkit-keyframes drunk-2 {
  0% {      
			transform: rotate3d(10,1,10,20deg);
			-moz-transform: rotate3d(10,1,10,20deg);
			-ms-transform: rotate3d(10,1,10,20deg);
			-o-transform: rotate3d(10,1,10,20deg);
			-webkit-transform: rotate3d(10,1,10,20deg);
			    opacity: 0.7;
  }
  65% {            transform: rotate3d(50,2,-20,-10deg);
			-moz-transform: rotate3d(50,2,-20,-10deg);
			-ms-transform: rotate3d(50,2,-20,-10deg);
			-o-transform: rotate3d(50,2,-20,-10deg);
			-webkit-transform: rotate3d(50,2,-20,-10deg);
      		opacity: 0.2;
  }
  100% {    transform: rotate3d(-10,1,20,10deg);
			-moz-transform: rotate3d(-10,1,20,10deg);
			-ms-transform: rotate3d(-10,1,20,10deg);
			-o-transform: rotate3d(-10,1,20,10deg);
			-webkit-transform: rotate3d(-10,1,20,10deg);
      opacity: 1;
  }
}

@-webkit-keyframes drunk-1 {
  0% {      
			transform: rotate3d(0,1,10,5deg);
			-moz-transform: rotate3d(0,1,10,5deg);
			-ms-transform: rotate3d(0,1,10,5deg);
			-o-transform: rotate3d(0,1,10,5deg);
			-webkit-transform: rotate3d(0,1,10,5deg);
			    opacity: 1;
  }
  60% {            transform: rotate3d(0,1,-50,10deg);
			-moz-transform: rotate3d(0,1,-50,10deg);
			-ms-transform: rotate3d(0,1,-50,10deg);
			-o-transform: rotate3d(0,1,-50,10deg);
			-webkit-transform: rotate3d(0,1,-50,10deg);
      		opacity: 0.5;
  }
  100% {    transform: rotate3d(0,1,0,-10deg);
			-moz-transform: rotate3d(0,1,0,-10deg);
			-ms-transform: rotate3d(0,1,0,-10deg);
			-o-transform: rotate3d(0,1,0,-10deg);
			-webkit-transform: rotate3d(0,1,0,-10deg);
      opacity: 1;
  }
}

@-webkit-keyframes drunk-0 {
  0% {   
  			transform: rotate3d(0,0,-2,2deg);
  			-moz-transform: rotate3d(0,0,-2,2deg);
  			-ms-transform: rotate3d(0,0,-2,2deg);
  			-o-transform: rotate3d(0,0,-2,2deg);
  			-webkit-transform: rotate3d(0,0,-2,2deg);
        opacity: 0.9;   
			
  }
  50% {    
      transform: rotate3d(0,1,0,0deg);
      -moz-transform: rotate3d(0,1,0,0deg);
      -ms-transform: rotate3d(0,1,0,0deg);
      -o-transform: rotate3d(0,1,0,0deg);
      -webkit-transform: rotate3d(0,1,0,0deg);
      opacity: 1;
      
  }
  100% {    transform: rotate3d(0,0,2,-3deg);
			-moz-transform: rotate3d(0,0,2,-3deg);
			-ms-transform: rotate3d(0,0,2,-3deg);
			-o-transform: rotate3d(0,0,2,-3deg);
			-webkit-transform: rotate3d(0,0,2,-3deg);
      opacity: 0.6;
  }
}

.hide {
		display: none;
}

#loadingText, #Play {
		color: white;
}

.drunk0 {
	-webkit-animation: drunk-0 3s infinite;
	-moz-animation:    drunk-0 3s infinite;
	-o-animation:      drunk-0 3s infinite;
	animation:         drunk-0 3s infinite;
	
	animation-direction:alternate;
	-webkit-animation-direction:alternate; 
}

.drunk1 {
	-webkit-animation: drunk-1 6s infinite;
	-moz-animation:    drunk-1 6s infinite;
	-o-animation:      drunk-1 6s infinite;
	animation:         drunk-1 6s infinite;
	
	animation-direction:alternate;
	-webkit-animation-direction:alternate; 
}  

.drunk2 {
	-webkit-animation: drunk-2 5s infinite;
	-moz-animation:    drunk-2 5s infinite;
	-o-animation:      drunk-2 5s infinite;
	animation:         drunk-2 5s infinite;
	
	animation-direction:alternate;
	-webkit-animation-direction:alternate; 
}        

.drunk3 {
	-webkit-animation: drunk-3 6s infinite;
	-moz-animation:    drunk-3 6s infinite;
	-o-animation:      drunk-3 6s infinite;
	animation:         drunk-3 6s infinite;
	
	animation-direction:alternate;
	-webkit-animation-direction:alternate; 
}

.instructions {
	background-image: url('../images/arrow-keys.png');
	top: 0px;
	right: 20px;
	position: absolute;
	display: block;
	width: 130px;
	height: 130px;
	background-repeat: no-repeat;
	background-size: 100%;
}

#loadingText, 
#Play {
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	-o-transition-duration: 0.8s;
	transition-duration: 0.8s;
	color: white;
	font-family: Hammersmith One;
	text-align: center;
	margin: 0 auto;
	font-size: 1.2em;
	padding: 0.3em;
	position: absolute;
	right: 0;
	left: 0;
	border-radius: 15px;
	width: 20%;
	top: 600px;
}

#Play {
	cursor: pointer;
	background: #e56da4;
	font-size: 2.2em;
}

#Play:hover {
	background: #9e1e62;
}