
body{-webkit-transition:background-color 1000ms linear;-moz-transition:background-color 1000ms linear;-o-transition:background-color 1000ms linear;
     -ms-transition:background-color 1000ms linear;transition:background-color 1000ms linear;background-color:black;font-family:Arial;padding-top:60px;}

.right{text-align:right;}

.start-screen{margin-top:0px;text-align:center;}
.start-screen h1{font-size:130px;line-height:130px;text-align:center;margin:0;text-transform:uppercase;color:#ee1e1e;}
.start-screen h2{color:#ffffff;font-size:40px;font-weight:300;margin:0;padding:0;margin-bottom:40px;}
.start-screen input{border:none;font-size:40px;padding:0;text-align:center;border-radius:200px;background:#f5ffd7;color:black;font-weight:bold;width:60px;display:inline-block;outline:none;box-shadow:none;}
.start-screen input:focus{box-shadow:none;}
.start-screen .start-button{color:black;background:#069bbc;text-align:center;display:inline-block;text-decoration:none;font-size:200px;line-height:250px;border-radius:200px;padding:30px 100px;}
.start-screen .start-button a{color:black;text-decoration:none;}

body.rest{background-color:#069bbc;}
#timer.rest{color:#f5ffd7;}

.madeby{position:absolute;color:white;bottom:10px;right:10px;}
.madeby h5{margin:0;padding:0;}
.madeby h5 a{color:#ee1e1e;}

#timer{-webkit-transition:color 1000ms linear;-moz-transition:color 1000ms linear;-o-transition:color 1000ms linear;-ms-transition:color 1000ms linear;
       transition:color 1000ms linear;font-size:400px;line-height:300px;color:#ffffff;font-weight:800;text-align:center;position:relative;}
.picture-holder{position:absolute;top:0;left:0;width:100%;text-align:center;z-index:1000;}
#picture{height:100%;max-height:400px;z-index:1000;}
#activity{font-size:80px;font-weight:800;line-height:140px;text-align:center;color:#48bdc6;opacity:1;text-transform:uppercase;}
#next{font-size:50px;color:#f5ffd7;text-align:center;padding-top:30px;}

.ball-fade{opacity:.4;}

.signup {position:absolute;top:10px;left:10px;}
.iPhone {position:absolute;top:10px;right:10px;}
.signup a, .iPhone a{color:#ee1e1e;font-size:30px;font-weight:300;cursor: pointer;}





@media screen and (max-width: 479px) {
	.start-screen h1{font-size:60px;line-height:60px;}
	.start-screen h2{font-size:20px;margin-bottom:20px;}
	.start-screen input{font-size:20px;border-radius:40px;width:30px;}
	.start-screen .start-button{font-size:80px;line-height:100px;padding:25px 55px;}

	.madeby{bottom:10px;right: 10px;left: 10px;text-align:center}
	.madeby h5{font-size: 10px}

	#timer{font-size:100px;line-height:120px;}
	#timer .nums{font-size:190px;}
	.picture-holder{ top: 70px;}
	#picture{max-height:150px;}
	#activity{font-size:20px;line-height:80px;}
	#next{font-size:18px;padding-top:0;}
	#next h2 {line-height: 18px}
	.fb-like{display:block !important}

	.signup a, .iPhone a{font-size:14px;}
}


@media screen and (min-width: 480px) and (max-width: 1024px)
{
	body{padding-top:200px}
	
	.start-screen h1{font-size:160px;line-height:160px;margin-bottom:20px}
	.start-screen h2{font-size:40px;margin-bottom:60px;}
	.start-screen input{font-size:50px;border-radius:100px;width:80px;}
	.start-screen .start-button{font-size:180px;line-height:180px;padding:100px 150px}

	.madeby{bottom:20px;right: 10px;left: 10px;text-align:center}
	.madeby h5{font-size: 24px !important}

	#timer{font-size:300px;line-height:300px;margin:80px 20px}
	#timer .nums{font-size:500px;}
	.picture-holder{top: 200px}
	#picture{max-height:500px;}
	#activity{font-size:70px;line-height:70px;margin-bottom:50px}
	#next{font-size:50px;padding-top:0;margin-top:50px}
	#next h2 {line-height: 50px}
	.fb-like{ display: block !important; margin-bottom:30px}

	.signup {top:20px;left:20px;}
	.iPhone {top:20px;right:20px;}
	.signup a, .iPhone a{font-size:40px;}
}


@media screen and (min-height: 481px) and (max-height: 1100px)
{
	body{padding-top:100px}

	#timer{margin:50px 20px}
	.picture-holder{top: 150px}
	#picture{max-height:400px;}
}