*
{
	margin: 0px;
	padding: 0px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


header{
	position: fixed;
	background-color: rgb(248, 248, 248);
	border-bottom:1px solid rgb(200, 199, 204);
	width: 100%; height: 2.75em;
	z-index: 999;
}
header > h1{
	display: block;
	width: 100%;
	text-align: center;
	font-weight: 500;
	font-size: 1.063em;
	position: absolute;
	top: 0.7em;
}

footer{
	position: fixed;
	bottom:0;
	background-color: rgb(248, 248, 248);
	border-top:1px solid rgb(200, 199, 204);
	width: 100%; height: 3.5em;
	z-index: 999;
}

footer > nav {
	position: absolute;
	width: 100%;
	text-align: center;
	display: inline-block;
}
footer > nav > button{
	outline: 0;
	top: 0;
	display: inline-block;
	width: 5em;
	height: 5em;
	text-align: center;
	font-size: 0.7em;
	line-height: 1em;
	padding: 1em 0 0 0;
	margin: 0;
	color: rgb(111, 111, 116);
	border: 0;
	background-color: transparent;
}

/* Scene Styling Start */
#scene{
	position: absolute;
	width: 100%; height: 100%;
	overflow: hidden;
}


#skyBackground{
	background-color: skyblue;
	width: 100%; height: 100%;
}

.sun{
	height: 2.5em;
	width: 2.5em;
	background: #FF0;
	border-radius: 100%;
	position: absolute;
	top: 6em;
	right: 3em;
	z-index: 3;
	box-shadow: 0 0 5px #FF0, 0 0 5px #FF0, 0 0 10px #FF0, 0 0 10px #FF0, 0 0 20px #FF0, 0 0 20px #FF0, 0 0 20px #FF0, 0 0 20px #FF0, 0 0 20px #FF0, 0 0 20px #F90, 0 0 20px #F50, 0 0 20px #F50, 0 0 20px #F50, 0 0 20px #F50, 0 0 25px #F50, 0 0 25px #F50, 0 0 27px #F50, 0 0 27px #F50;
}

.moon{
	height: 2.5em;
	width: 2.5em;
	background: #FFF;
	border-radius: 100%;
	position: absolute;
	top: 6em;
	right: 3em;
	z-index: 3;
	box-shadow: 0 0 5px #FFF, 0 0 5px #FFF, 0 0 10px #FFF, 0 0 10px #FFF, 0 0 20px #FFF, 0 0 20px #FFF, 0 0 20px #FFF, 0 0 20px #FFF, 0 0 20px #FFF, 0 0 20px #f3f3f3, 0 0 20px #f3f3f3, 0 0 20px #f3f3f3, 0 0 20px #f3f3f3, 0 0 20px #f3f3f3, 0 0 25px #f3f3f3, 0 0 25px #f3f3f3, 0 0 27px #f3f3f3, 0 0 27px #f3f3f3;
}

#ground{
	height: 30%;
	width: 100%;
	background: #23EE33;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 99;
}
#ground::before{
content: '';
position: absolute;
top: -20%;
left: -10%;
height: 45%;
width: 65%;
background: #23EE33;
border-radius: 100%;
}
#ground::after{
content: '';
position: absolute;
top: -40%;
right: -20%;
height: 90%;
width: 75%;
background: #23EE33;
border-radius: 100%;
}




/* Character styling*/
/* standard character attributes */
.stChar{ 
	background:rgb(256, 100, 100);
	position:absolute;
	left:50%;
	margin-bottom: 4em;
	z-index:99999;
	border-radius:100%;
	transition:height linear .8s, width linear .8s;
	box-shadow: 0 0 0 1px #000, inset 1.5px -2px 7px black;
}
.stCharShad{
	background:rgba(0,0,0,.3);
	position:absolute;
	bottom: 6.8em ;left:50%;
	z-index:99998;
	border-radius:100%;
	box-shadow:inset 0 0 5px #23EE33, inset 0 0 7px #23EE33;
}
/* non-standard */
	/* animate small character */
.character1{
	animation:charB1 .7s infinite ease-in;
		-webkit-animation:charB1 .7s infinite ease-in;
}
.charShad1{
	animation:charSh1 .7s infinite ease-in;
		-webkit-animation:charSh1 .7s infinite ease-in;
}
	/* animate big character */
.character2{
	animation:charB2 .7s infinite ease-in;
		-webkit-animation:charB2 .8s infinite ease-in;
}
.charShad2{
	animation:charSh2 .7s infinite ease-in;
		-webkit-animation:charSh2 .8s infinite ease-in;
}

/* standard eye */
.eye{
	height:20%;width:20%;
	position:absolute;top:20%;
	z-index:7;background:black;
	border-radius:100%;
}
.eyeLid{
	background:rgb(256, 100, 100);
	height:100%;width:100%;
	position:absolute;top:10%;
	z-index:8;
	border-radius:100%;
}
/* positioning eyes */
.lEye{left:20%;}
.rEye{right:20%;}
/* Mouth (made same as eye) */
.mouth{
	background:black;
	height:25%;width:2.5em;
	position:absolute;bottom:20%;left:50%;margin-left:-1.25em;
	z-index:6;
	border-radius:100%;
}
.mouthCov{
	background:rgb(256, 100, 100);
	height:90%;width:3em;
	position:absolute;bottom:.3em;left:-.25em;
	z-index:7;
	border-radius:100%;
}

.shHi{opacity:0;}
/* Animations */
/* Small animation */
@keyframes charB1{
		0%{height:1em;width:2.5em;margin-left:-1.25em;bottom:3.5em;}
		15%{height:2em;width:1.5em;margin-left:-.75em;}
		41%{height:2em;width:1.5em;margin-left:-.75em;bottom:7em;}
		51%{height:2em;width:2em;margin-left:-1em;bottom:7em;}
		57%{bottom:7em;}
		89%{height:2em;width:2em;margin-left:-1em;}
		100%{height:1em;width:2.5em;margin-left:-1.25em;bottom:3.5em;}
	}
@-webkit-keyframes charB1{
		0%{height:1em;width:2.5em;margin-left:-1.25em;bottom:3.5em;}
		15%{height:2em;width:1.5em;margin-left:-.75em;}
		40%{height:2em;width:1.5em;margin-left:-.75em;bottom:7em;}
		51%{height:2em;width:2em;margin-left:-1em;bottom:7em;}
		89%{height:2em;width:2em;margin-left:-1em;}
		100%{height:1em;width:2.5em;margin-left:-1.25em;bottom:3.5em;}
	}

@keyframes charSh1{
	0%{height:.75em;width:2.5em;margin-left:-1.25em;}
	50%{height:.3em;width:1.25em;margin-left:-.625;}
	100%{height:.75em;width:2.5em;margin-left:-1.25em;}
}
@-webkit-keyframes charSh1{
	0%{height:.75em;width:2.5em;margin-left:-1.25em;}
	40%{height:.3em;width:1.25em;margin-left:-.625em;}
	51%{height:.3em;width:1.25em;margin-left:-.625em;}
	100%{height:.75em;width:2.5em;margin-left:-1.25em;}
}
/* Large animation */
@keyframes charB2{
		0%{height:2em;width:5em;margin-left:-2.5em;bottom:3.5em;}
		15%{height:4em;width:3.5em;margin-left:-1.75em;}
		43%{height:4em;width:3.5em;margin-left:-1.75em;bottom:11em;}
		51%{height:4em;width:4em;margin-left:-2em;bottom:11em;}
		55%{bottom:11em;}
		89%{height:4em;width:4em;margin-left:-2em;}
		100%{height:2em;width:5em;margin-left:-2.5em;bottom:3.5em;}
	}
@-webkit-keyframes charB2{
		0%{height:2em;width:5em;margin-left:-2.5em;bottom:3.5em;}
		15%{height:4em;width:3.5em;margin-left:-1.75em;}
		43%{height:4em;width:3.5em;margin-left:-1.75em;bottom:11em;}
		51%{height:4em;width:4em;margin-left:-2em;bottom:11em;}
		55%{bottom:11em;}
		89%{height:4em;width:4em;margin-left:-2em;}
		100%{height:2em;width:5em;margin-left:-2.5em;bottom:3.5em;}
	}

@keyframes charSh2{
	0%{height:1.5em;width:5em;margin-left:-2.5em;}
	50%{height:.6em;width:2.5em;margin-left:-1.25;}
	100%{height:1.5em;width:5em;margin-left:-2.5em;}
}
@-webkit-keyframes charSh2{
	0%{height:1.5em;width:5em;margin-left:-2.5em;}
	40%{height:.6em;width:2.5em;margin-left:-1.25em;}
	51%{height:.6em;width:2.5em;margin-left:-1.25em;}
	100%{height:1.5em;width:5em;margin-left:-2.5em;}
}
	
/* Scene Styling End*/


/* Check in Styling Start*/
#checkIn{
	position: absolute;
	width: 100%; height: 100%;
	background-color: #14162f;
}

#checkInMap{
	background: url(../img/map1.png);
	width: 100%;
	height: 13.5em;
	background-size: cover;
	background-position: 0 45%;
	text-align: center;
}

#checkInLocations{
	margin-top: 1em;
	background-color: white;
	font-size: 1.25em;
}

#checkInLocations > ul{
	list-style: none;
}

#checkInLocations > ul > li{
	border-top:1px solid rgb(200, 199, 204);	
	width: 100%;
	height: 2.5em;
}
#checkInLocations > ul > li > p{
	margin-top: 0.8em;
	margin-left: 1.5em;
	margin-bottom: 1em;
}
#checkInBtn{
	width: 100%;
	height: 10em;
	text-align: center;
}
#checkInBtn > button{
	margin-top: 1.5em;
	border: 0;
	outline: 0;
	font-size: 1.6em;
	padding: 0.5em;
	background-color: #7ed321;
	border-radius: 1.5em;
	width: 7em;
	color: white;
	box-shadow: 0.1em 0.1em 0.1em black;
	text-shadow: 0.05em 0.05em #343434;
}
#tick{
	width: 1.5em; height: 1.5em;
	background-color: aqua;
	margin-top: -2.5em;
	float: right;
	margin-right: 2em;
}

/* Check in Styling End*/

/* Map Styling Start */

#map{
	position: absolute;
	width: 100%; height: 100%;
	background-color: #14162f;
	/* background: url(../img/worldMap.png); */
	background: url(../img/worldMapPinned.png);
	background-size: cover;
	/* background-position: 0 50%; */
	background-position: center;
	background-repeat: no-repeat;
}

/* Map Styling End */

/* Rewards Styling Start */

#rewards{
	position: absolute;
	width: 100%; height: 100%;
	background-color: #47382b;
	overflow: hidden;
}

#shelf{
	width: 100%; height: 2.125em;
	margin-bottom: 9.21875em;
	background-color: #8b572a;
}

#shelf:nth-child(1){
	margin-top: 11.41875em;
}

#rewards > #shelf1{
	list-style: none;
	margin-top: 2.6em;
	width: 100%;
	text-align: center;
}

#rewards > #shelf1 > li{
	width: 7em;
	height: 7em;
	background-color: white;
	display: inline-block;
}

#rewards > #shelf1 >li:nth-child(1){
	background: url(../img/londonEye.png);
	background-size: cover;
}

#rewards > #shelf1 >li:nth-child(2){
	background: url(../img/bigBen.png);
	background-size: cover;
}
#rewards > #shelf1 >li:nth-child(3){
	background: url(../img/eiffelTower.png);
	background-size: cover;
}

#shelf2 {
	list-style: none;
	margin-top: -8.6em;
	width: 100%;
	text-align: center;
}

#shelf2 > li{
	width: 7em;
	height: 7em;
	background-color: white;
	display: inline-block;
	margin-right: 2em;
}

#rewards > #shelf2 >li:nth-child(1){
	background: url(../img/statueLib.png);
	background-size: cover;
}

#rewards > #shelf2 >li:nth-child(2){
	background: url(../img/sydOpera.png);
	background-size: cover;
}

/* Rewards Styling End */

/* Character Customisation Styling Start */

#character{
	position: absolute;
	width: 100%; height: 100%;
	background-color: #14162f;
	text-align: center;
}


#userCharacter{
	width: 8em; height: 8em;
	background-color: rgb(256, 100, 100);
	border-radius: 50%;
	position: relative;
	top: 6em;
	margin: 0 auto;
}

#userCharacter > .shHi{opacity:1;}

#chooseColHead{
	margin-top: 8em;
	color: white;
	margin-bottom: -8.5em;
	
}

#colourBar{
	position: relative;
	top: 11em;
	height: 10%;
	width: 100%;
	overflow: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 0;
}

#colourBar > ul{
	/* width: 300%; */
	width: 75em;
	position: relative;
	background-color: transparent;
}

#colourBar > ul > li{
	width: 5em;
	height: 3em;
	margin-left: 0;
	bottom: 0;
	list-style: none;
	display: inline-block
}

#colourBar > ul > li:nth-child(1){background-color: #ff5200;}
#colourBar > ul > li:nth-child(2){background-color: #fd9a00;}
#colourBar > ul > li:nth-child(3){background-color: #fcbd00;}
#colourBar > ul > li:nth-child(4){background-color: #feff00;}
#colourBar > ul > li:nth-child(5){background-color: #d0ec00;}
#colourBar > ul > li:nth-child(6){background-color: #63b225;}
#colourBar > ul > li:nth-child(7){background-color: #0090d1;}
#colourBar > ul > li:nth-child(8){background-color: #003cff;}
#colourBar > ul > li:nth-child(9){background-color: #3d00a7;}
#colourBar > ul > li:nth-child(10){background-color: #8700b2;}
#colourBar > ul > li:nth-child(11){background-color: #a9144a;}
#colourBar > ul > li:nth-child(12){background-color: #ff2300;}
#colourBar > ul > li:nth-child(13){background-color: #ffffff;}
#colourBar > ul > li:nth-child(14){background-color: #474747;}

#chooseFace{
		margin-top: 10em;
	color: white;
	margin-bottom: -8.5em;
}

#faces{
	text-align: center;
	position: relative;
	top: 12em;
	width: 85%;
	height: 4.5em;
	background: url(../img/faces.png) no-repeat;
	margin: 0 auto;
	background-size: 95%;
	left: 0.8em;
	
}

/* Character Customisation Styling End */
.lonHol{
	height:120px;width:100px;
	position:absolute;bottom:11em;left:8em;transform:rotate(5deg);
	display: none;
}
.london{
	height:100px;width:30px;background:black;
	z-index:10;border-radius:5%;
}
.london::after,.london::before{
	content:'';
	background:black;
	position:absolute;
	z-index:11;
}
.london::after{
	height:23px;width:36px;
	top:15px;left:-3px;
}
.london::before{
	height:35px;width:33px;
	top:10px;left:-1.5px;
}
.london1{
	height:0px;width:0px;
	position:absolute;z-index:15;
	top:-55px;left:0px;
	border:16px solid rgba(0,0,0,0);
	border-bottom:40px solid rgba(0,0,0,1);
	
}
.london1::after{
	content:'';
	height:10px;width:29px;
	border:1px solid black;
	border-top:0px;
	position:absolute;top:28px;left:-16px;
}
.london1::before{
	content:'';
	position:absolute;z-index:15;
	top:-12px;left:-7px;
	border:7px solid rgba(0,0,0,0);
	border-bottom:13px solid rgba(0,0,0,1);
}
.london2{
	height:20px;width:10px;
	background: black;
	position: absolute;
	left: -5px;top:5px;
}
.london2::after{
	content:'';
	height: 5px;
	width: 11px;
	position: absolute;
	top: -6px;
	left: -2px;
	border: 1px solid black;
	border-top: 0px;
}
.london3{
	height:20px;width:20px;
	border-radius:100%;
	background:#777;
	position:absolute;
	z-index:16;
	top:15px;
	left:5px;
	box-shadow:inset 0 0 0 2.5px #777, inset 0 0 0 3px black;
}
.london3::after{
	content:'';
	height:5px;width:8px;
	border:1px solid black;
	border-bottom:0px;
	border-left:0px;
	position:absolute;
	left:3px;top:6px;
	transform:rotate(45deg);
}