@charset "UTF-8";
/* CSS Document */

label{cursor: pointer;}

.pointSmash{
	position:absolute;
	z-index: 100;
	font-size: 35px;
}

#credit{
	position:absolute;
	bottom:35px;
	left:35px;
	width: 175px;
	z-index: 10001;
}



.topRight{
	position:absolute;
	top:50px;
	right:50px;
	width: 200px;
	text-align: right;
	font-size: 30px;
}

.fullScreen{
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;

	background: #2c2322;

	background-image: url("../_images/screens/texture.png");

	background-size: 100vw 100vh;
	background-position: center;

}

#entries{
	padding-top: calc(50vh - 150px);
    padding-bottom: 50vh;
}

#leaderboardButton{
	display: none;
	z-index:1111;
}

#leaderboard{
	overflow-y: scroll;
	overflow-x: hidden;
	align-items: center;
	justify-content: center;
	display: none;
	/* -webkit-overflow-scrolling: touch; */
}

#leaderboard .header{
	width: 350px;
    margin: auto;
    display: inherit;
    margin-bottom: 50px;
	padding-top: calc(50% - 450px);
	z-index: 3;
}

#leaderboard .moon{
	position: fixed;
	width: calc(65%);
	left: calc(50% - (65% / 2));
	z-index: 2;
}

#leaderboard .hills{

	position: fixed;
	width: 100%;
	max-height: 20%;
	bottom: 0px;
	left: 0px;
	z-index: 3;
}


#submitScore{
	display: none;
  align-items: center;
  justify-content: center;
}

#submitButton{
	padding: 10px 20px;
    background: #2c2322;
	font-size: 25px;
    left: 50%;
}


.scoresForm{
	position:fixed;
	left:calc(50% - 350px);
	top:calc(50% - 350px);

	width: 700px;
	height: 700px;
	margin: auto;
	display: none;
	background-image: url('../_images/screens/Moon.png');
	background-size: contain;
	z-index: 1;
}



.gameOver{
	width:400px;
	margin: auto;
}

#gameOverScore{}

.gameOverHills{
	position:fixed;
	bottom:0px;
	height:30%;
	width: 100%;
}



  


.companySelectedCon input[type="radio"] {
	display: none;
  }
  
  .companySelectedCon label {
	width: 150px;
    border-bottom: 3px solid rgba(255,255,255,0.25);
	padding-bottom: 8px;
	margin-left: 20px;
    margin-right: 20px;
  }
  
  .companySelectedCon input[type="radio"]:checked+label {
	width: 150px;
    border-bottom: 3px solid #d2592b;
    padding-bottom: 8px;
  }




#legal{
	z-index: 999999999;
	background-color: #d2592b !important;

	/* DEV */
	/* display:none !important; */
	/*  - - - - - - */
}
#legalCon{
	width: 350px;
	margin: auto;
	margin-top:calc(50vh - 295px);
}

#legalHeader{
	padding-bottom: 90px;
	width: 350px;
}

#legalConfirm{

	padding-top:10px;
	padding-bottom: 10px;

	width: 350px;
	top: 645px;
	cursor: pointer;

}


#legalConfirm:hover{
	opacity: 0.75;
	filter: alpha(opacity=75);
}

#playAgainButton{z-index: 1000001;}


#logoCM{
	position:absolute;
	top:35px;
	left:32px;
	width: 300px;
	z-index: 40001;
}

.nameInput{
	width: 60%;
    margin-left: 5%;
	vertical-align: top;
	font-size: 30px;
}



#score{
	position: absolute;

    background-image: url("../_images/screens/scoreframe.png");
    background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
    top: 110px;
    left: 60px;
	height: 140px;

	font-size: 50px;
	
    display: none;
	width: 240px;
	text-align: center;
	line-height: 140px;
}

.centerScore{
	z-index: 999;
    left: calc(50% - 120px) !important;
	transform: scale(1.5);
	margin-top: 125px;
	top: auto !important;
	color: #2c2322;
	transform: scale(1.25);
}

.captain{
	position: fixed;
    left: 5%;
    height: 50%;
	bottom: 10%;
	z-index: 111111;
	
}

.captainSkeleton{
	position: absolute;
	display: none;
    left: 5%;
    height: 50%;
	bottom: 10%;
	z-index: 1111111;
}

#graves{
	position:absolute;
	bottom:50px;
	right:50px;
	text-align: right;
	font-size: 30px;
	z-index: 99;
	display:none;
}


#productShot{
	position:absolute;
	bottom:50px;
	right:50px;
	text-align: right;
	font-size: 30px;
	z-index: 99999;
	/* display:none; */
	width: 40%;
}

#leaderBoardPlayAgain{
	z-index: 1000001;
	display:none;
}


#graves img{display: none;}


.induvidualScore{
    max-width: 350px;
    margin: auto;
	min-height: 50px;
	margin-bottom: 20px;
	z-index: 400;
	color: #2c2322;
}



.induvidualScore .rank{
	text-align: left;
	width:10%;
	font-size: 20px;
	float: left;
	font-size: 24px;
}
.induvidualScore .name{
	text-align: center;
	width:80%;
	float: left;
	font-size: 22px;
	line-height: 1.2;
}
.induvidualScore .points{
	text-align: right;
	float: right;
	width:10%;
	font-size: 24px;
}
.induvidualScore .company{
	text-align: center;
    float: none;
    width: 100%;
	display: inline-block;
	margin-top:5px;
	font-size: 14px;
}


#scoresForm > .formWrapper{ 
	padding:200px;
}