body {
    background: #f8931c;
    font-family: "SupriaSans-Regular",Tahoma,Verdana,sans-serif;
    font-size: 18px;
    line-height: 24px;
    color: #552f04;
    overflow:hidden;
    height:100vh;
    width:100wh;
    overflow:hidden;
}

#contentArea{
    padding:10px 10px;
}

#christan{
	position:absolute;
	top:-250vh;
	left:55vw;
}

#countDownDiv{
	position:absolute;
	text-align:center;
	bottom:-1px;
	border:2px;
	background-color:black;
	width:100vw;
	height:4vh;
	margin-top:-5px;
	font-size:10px;
	font-weight:bold;
	color: white; 
	z-index:700;
	opacity: .8;
	filter: alpha(opacity=80);
	display:none;
}
#progressDiv{
	position:absolute;
	text-align:center;
	bottom:0px;
	left:0px;
	border:2px;
	background-color: #6e47a1; 
	width:0vw;
	height:3vh;
	margin-top:-5px;
	font-size:10px;
	font-weight:bold;
	z-index:800;
	opacity: .6;
	filter: alpha(opacity=60);
}

	

#score{
	position:absolute;
	left:0;
	width:100vw;
	text-align:center;
	top:5.2vh;
	font-weight:bold;
	font-size:30px;
	color: green; 
}

#timer{
	position:absolute;
    left:80vw;
	top:.5vh;
	font-weight:bold;
	font-size:20px;
    z-index:99999999999;
	display:none;
}

#landscapeDiv{
	position:absolute;
	top:0px;
	left:0px;
	padding:20px;
	padding-left:50px;
	width:100vw;
	height:100vh;
	z-index:1000000;
	font-size:30px;
	color:white;
	background-color:black;
	opacity: .8;
	filter: alpha(opacity=80);
	display:none;
}

#startButton{
    display:none;
}

.midPage{
    position:absolute;
    z-index:10000;
    top:55vh;
    width:50vw;
    left:25vw;
    color:#7157af;
}

.titleBanner{
    font-size:27px;
    font-size:bold;
    position:relative;
}
.logo {
    width:50vw;
    position:relative;
}
.btn-success{
    color:white;
    font-size:22px;
    border:4px solid white;
    border-top-right-radius:14px;
    border-top-left-radius:14px;
}

.btn{
	background: #6e47a1; /* Old browsers */
	background: -moz-linear-gradient(top,  #6e47a1 0%, #44009e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6e47a1), color-stop(100%,#44009e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #6e47a1 0%,#44009e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #6e47a1 0%,#44009e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #6e47a1 0%,#44009e 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #6e47a1 0%,#44009e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e47a1', endColorstr='#44009e',GradientType=0 ); /* IE6-9 */

    	color:white;
    	font-size:22px;
    	border:4px solid white;
    	border-radius:14px;
}
.btn:hover, .btn:focus{
    color:white;
    border:4px solid white;
    border-radius:14px;
}

.btn:active{
    background-color:black;
    color:white;
    border:4px solid white;
    border-radius:14px;
}


.peeps{
   width:30%; 
   min-width:200px;
   max-width:400px; 
}

#yearbook_img {
    height:80vh;
    max-height:540px;
    max-width:800px;
    border-top-right-radius:14px;
    border-top-left-radius:14px;
    border:4px solid white;
}

#pictureFrame{
    position:absolute;
    z-index:10;
	bottom:3vh;
	left:0vw;
    text-align:center;
    display:none;
}

.container {
   text-align:center;
   width:100%;
   padding: 10px;
}

#circleRight{
	left:63.5vw;
	top:10vh;
}
#circleWrong{
	left:62.5vw;
	top:11vh;
}
.circle {
	position:absolute;
	border-radius: 50%;
	width: 20vw;
	height: 20vh; 
	background-color:white;
	border:4px solid black;
	z-index:10000;
	/* width and height can be anything, as long as they're equal */
}

.wrongCir {
	background-color:black;
	border:4px solid white;
}
.isRight{
	display:none;
}

.isWrong{
	display:none;
}

#isRight{
   	text-align:center;
	position: absolute;
	left:41.5vw;
	bottom:5.5vh;
	color:green;
	z-index:100000;
	font-size:25px;
	display:none;
}

#answerBG{
	display:none;
	position:absolute;
	background-color:white;	
	opacity: .8;
	filter: alpha(opacity=80);
	height: 20vh;
	width:85vw;
	left:30vw;
	bottom:4vh;
	z-index:1000;
}

#isWrong{
	display:none;
   	text-align:center;
	position: absolute;
	left: 41.5vw;
	bottom:5.5vh;
	color:red;
	z-index:100000;
	font-size:25px;
}

#restart{
	margin-top:10vh;
	width:80vw;
}

#finishBG{
	position:absolute;
	height:100vh;
	width:100vw;
	left:0px;
	top:0px;
	background-color:black;
	opacity: .8;
	filter: alpha(opacity=80);
	z-index:9000000;
	display:none;
}
#finish{
	position:relative;
	z-index:9999999999;
	display:none;
	font-size:23px;
	text-align:center;
	top:1vh;
	color:white;
}
#theStars{
	position:absolute;
	top:-25vh;
	color:white;
	width:100vw;	
	left:-5vw;
}
#finish1{
	margin-top:20vh;
}
#finish2{
}
#finish3{
	margin-top:10vh;
}