body{
	display:block;
	position:relative;
	min-height:100vh;
	padding:0;
	margin:0;
	border:0;
	box-sizing:border-box;
	width:100%;
	background:black;
	color:white;
}
/************************************************
	START SCREEN
************************************************/
#startscreen{
	display:block;
	text-align:center;
	width:100%;
	margin:0 0 0 0;
	/*display:none;*/
}
#startscreen h1{
	font-size:5rem;
	color:orange;
	position:absolute;
	top:10%;	
	left:0;
	right:0;
	margin:auto;
	display:none;
}
#startbutton{
	font-size:2rem;
	margin:0 0 0 0;
	position:absolute;
	top:-50px;	
	left:0;
	right:0;
	margin:auto;
	font-size:2rem;
}
#startscreen div.txt{
	position:absolute;
	top:50%;
	left:0;
	right:0;
	margin:auto;
	color:#999;
	display:none;
	font-size:3rem;
}
#startscreen div.options{
	position:absolute;
	bottom:0px;
	left:15px;
	color:#999;
	display:xnone;
	font-size:3rem;
}

#startscreen div.options img{
	width:50px;
}
#startscreen div.options3{
	position:absolute;
	bottom:15px;
	right:15px;
	color:#999;
	display:xnone;
	font-size:2rem;
}
#startscreen div.options3 span{
	font-size:.7rem;	
	position:absolute;
	top:-15px;
}
#startscreen div.options3 a{
	float:left;
	margin-right:10px;
	color:white;
	text-decoration:none;
}
#startscreen div.options3 a.sel{
	color:gray;
}
#startscreen span{
	position:absolute;
	bottom:15px;	
	left:0;
	right:0;
	margin:auto;
	color:#555;
	display:none;
}
.pulse {
    animation: pulse 1s linear infinite;
}
@keyframes pulse {
    0% {
     transform: scale(1, 1);
    }

    50% {
     transform: scale(1.1, 1.1);
    }

    100% {
    transform: scale(1, 1);
    }
}
/************************************************
	GAME SCREEN
************************************************/
#gamescreen{
	display:none;	
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:#79add4;
	overflow: hidden;
}
#gamescreen #clickoverlay{
	position:absolute;
	left:0;
	bottom:50px;
	right:0;
	top: 130px;
	z-index:100;
	background:rgba(0, 0, 0, 0);
}
#gamescreen #gametop{
	position:absolute;
	left:0;	
	right:0;
	top: 0;
	height:150px;
	z-index:100;
	background:rgba(0, 0, 0, .5);
	padding:10px 0;
}
#gamescreen #gametoplines{
	position: absolute;
    left: 50%;    
    top: 0;
    height: 150px;
    z-index: 100;
    border-left: 2px solid white;
    border-right: 2px solid white;
    margin: 10px 0 10px -175px;
    width: 350px;    
}
#gamescreen #gametoplines.inside{
	border-left: 2px solid lawngreen;
    border-right: 2px solid lawngreen;
}
#gamescreen #score{
	position:absolute;
	left:15px;
	bottom: 0;
	height:45px;
	z-index: 10;
	font-size:2rem;
	color: black;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}
#gamescreen #score.red{
	color:red;
	font-size:3rem;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
}
#gamescreen #amount{
	position:absolute;
	right:120px;
	bottom: 0;
	height:45px;
	z-index: 10;
	font-size:2rem;
	color: black;
}
#gamescreen #options2{
	position:absolute;
	right:0;
	bottom: 0;
	height:45px;
	z-index: 10;
	font-size:2rem;
	color: black;
	width: 100px;
}
#gamescreen #options2 img{
	float:left;
	margin-right:10px;
	width:35px;
}
#gamescreen #goodjob{
	position:absolute;
	left:0;
	bottom:0;
	right:0;
	top: 0;
	margin:auto;
	z-index: 10;
	width:200px;
	height:200px;
	display:none;
}
#goodjobimg{
	position:absolute;
	left:0;
	right:0;	
	top:0;
	margin:auto;
}


/************************************************
	SCORE
************************************************/

/************************************************
	BG SLIDE
************************************************/
.sliding-background {
	background: url('img/bg1.svg') repeat-x;
	/*height: 500px;*/
	width: 5076px;
	animation: slide 60s linear infinite;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
.sliding-background.done{
	animation:none;
}
.sliding-background svg{
	height:100%;
}
@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-1692px, 0, 0);
  }
}
/*
	JACK
*/
#gamescreen #jack{	
	position:absolute;	
	bottom:35px;
	left:0;
	right:0;
	margin:0 auto;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	z-index: 10;
}
.boy{
	width:96px;
	height:150px;
	background:transparent;
	background-image:url('img/boy.png');
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;	
}
.reg{
	background-image:none;
	width:50px;
	height:150px;
	background:orange;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	/*box-shadow: -5px 20px 25px 0px #000;*/
}
.square{
	background-image:none;
	width:150px;
	height:150px;
	background:orange;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	/*box-shadow: -5px 20px 25px 0px #000;*/
}
.tri{
	background-image:none;
	width: 0;
    height: 0;
    border-left: 75px solid transparent;
    border-right: 75px solid transparent;
    border-bottom: 150px solid orange;
	background:transparent;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	/*box-shadow: -5px 20px 25px 0px #000;*/
}
.cir{
	background-image:none;
	width:150px;
	height:150px;
	border-radius:50%;
	background:orange;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	/*box-shadow: -5px 20px 25px 0px #000;*/
}
/*
	game top elm
*/
.gametopelm{
	/*float:right;*/
	z-index: 10;
	position:absolute;
	right:10px;
	top:10px;
	transition:none;
}
/*
	Message
*/
.message{
	position:absolute;	
	top:50%;
	left:0;
	right:0;
	margin:0;
	text-align:center;
	transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	z-index: 200;
	color:white;
	background:rgba(0,0,0,.65);
	padding:20px;
	font-size: 2rem;
	display:none;
}

@media screen and (max-width: 640px) {
	#startscreen h1{
		font-size: 3rem;
	}
	#gamescreen #gametoplines{
		width: 100px;
		margin: 10px 0 10px -50px;
		height: 75px;
	}
	#gamescreen #jack{
		bottom:48px;
		background-size: contain;
	}
	#gametop .boy{
		width:48px;
		height:75px;
		background-size: contain;
	}
	#gametop .reg{
		width:25px;
		height:75px;
	}
	#gametop .square{
		width:75px;
		height:75px;	
	}
	#gametop .tri{
		background-image:none;
		width: 0;
		height: 0;
		border-left: 37.5px solid transparent;
		border-right: 37.5px solid transparent;
		border-bottom: 75px solid orange;	
	}
	#gametop .cir{
		width:75px;
		height:75px;
		border-radius:50%;		
	}
	#gamescreen #gametop{
		height: 75px;
	}
	#gamescreen #score, #gamescreen #amount{
		font-size: 1.5rem;
		height:30px;
		bottom:10px;
	}
}
/*
EOF
*/