html, body, main {
		display: inline-block;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		text-align: center;
		color: #d5d5d5;
	}

	#BG {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: 100%;
		margin: 0;
		padding:0;
		text-align: center;
		background: url("../img/BG1.jpg") no-repeat center fixed;
		background-size: cover;
		z-index: -999;
		display: inline-block;
		transition: 1s;
	}

	#container {
		height: 100vh;
	}


/* CLOCK */
		
	#clock {
		display: inline-block;
		text-align: center;
		margin-top: 40px;
		cursor: default;
		font-family: "Kg Second Chances Sketch";
		font-size: 30px;
	}
	#datebox {
		margin-bottom: 20px;
		text-transform: uppercase;
		font-family: "dk crayon crumble";
		font-size: 18px;
		line-height: 6px;
	}
	#d10s {
		display: none;
	}

/* FIRST PAGE */

	#firstPage {
		display: inline-block;
		position: absolute;
		left: 0;
		right: 0;
		transition: 1s;
		opacity: .1;
	}


/* MESSAGE */

	#message {
		display: inline;
		text-align: center;
		font-size: 30px;
		margin-bottom: 10px;
		cursor: default;
		width: 50%;
	}
	#textMessage {
		display: inline-block;	
		font-family: "Kg Second Chances Sketch";
		font-size: 30px;
		visibility: hidden;
		display: none;
	}


/* INPUT */

	#inputDiv {
		display: inline-block;
		width: 80%;
		max-width: 600px;
		height: 40px;
		margin-top: 10px;
		margin-bottom: 10px;
		background-color: rgba(0,0,0,0.1);
	}
	#inputBox {
		text-align: center;
		width: 98%;
		max-width: 580px;
		height: 45px;
		background-color: transparent;
		border: none;
		outline: none;
		font-family: "dk crayon crumble";
		font-size: 25px;
		color: #d5d5d5;
	}


/* FOOTER */

	#footer {
		display: none;
		text-align: center;
		width: 80%;
		max-width: 500px;
		margin-top: 100px;
	}
	
	.listOther {
		display: inline-block;
		padding-left: 2px;
		padding-right: 2px;
	}

	
/* HELP */
	
	#help {
		display: none;
		cursor: default;
		font-family: "take_out_the_garbage";
		font-size: 25px;
		line-height: 20px;
	}
	
	#col1help, #col2help, #col3help, #col4help , #col5help, #col6help, #block1, #block2, #block3 {
		display: inline-block;
		margin: 10px;
	}
	#col2help, #col4help, #col6help {
		text-align: left;
		vertical-align: top;
	}
	#help li {
		list-style: none;
		text-decoration: none;
	}
	#col1help, #col3help, #col5help {
		text-align: right;
		vertical-align: top;
	}
	.helpHeader {
		font-family: "take_out_the_garbage";
		font-size: 25px;
		text-transform: uppercase;
	}
	
/* QUOTES */

	#quoteMessage {
		display: none;
		text-align: center;
		position: absolute;
		top: 0;
		bottom: 0;
		left:0;
		right:0;
		margin: auto;
		height: 50%;
	}
	#textQuote {
		position: fixed;
		bottom: 12.5%;
		left: 50%;
		transform: translate(-50%, 0%);
		font-size: 30px;
		letter-spacing: 40px;
		opacity: .3;
	}
	#quoteDiv {
		display: inline-block;
		text-align: center;
		width: 90%;
		max-width: 600px;
		letter-spacing: 1px;
	}
	#quoteDisplay {
		position: absolute;
		max-width: 600px;
		margin: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
	#quoteDisplay > span {  
		display: inline-block;
		line-height: 30px;
		vertical-align: middle;
	}
	#quoteDisplayBack {
		position: absolute;
		max-width: 75%;
		margin: 0;
		top: 50%;
		left: 12.5%;
		transform: translate(0%,-50%);
		text-align: center;
		opacity: .1;
		word-spacing: -5px;
		line-height: 10px;
	}
	@media screen and (max-width: 1000px) {
		#quoteDisplayBack {
			display: none;
		}
	}