* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
	background: black;
}

body {
	background: #000000  url('img/outdatedMessage.png') center center no-repeat;
	background-size: contain;
}

#wrapper {
	position: absolute;
	width: 100%;
	height: 100%;	
	background: white;
}

#outdatedMessage {
	position: absolute;
	width: 100%;
	height: 100%;	
	text-align: center;
	background: #000000  url('img/outdatedMessage.png') center center no-repeat;
	background-size: contain;
	cursor: pointer;
	
}

#app {
	position: absolute;
	width: 100%;
	height: 100%;	

	background: #52130D  url('img/background.jpg') bottom center no-repeat;
	background-size: cover;
	cursor: pointer;
	
	z-index: 1;
}

#twitter {
	position: absolute;
	bottom: 98px;
	right: 16px;
	width: 32px;
	height: 32px;
	background: transparent  url('img/twitter-icon.svg') center center no-repeat;
	background-size: contain;
	cursor: pointer;
	z-index: 2;
}

#facebook {
	position: absolute;
	bottom: 98px;
	right: 56px;
	width: 32px;
	height: 32px;
	background: transparent  url('img/facebook-icon.svg') center center no-repeat;
	background-size: contain;
	cursor: pointer;
	z-index: 3;
}

#muteButton {
	position: absolute;
	width: 32px;
	height: 32px;
	background-size: contain;
	cursor: pointer;
	z-index: 4;
}

#muteButton.desktop{
	top: 16px;
	right: 16px;
}

#muteButton.mobile{
	bottom: 16px;
	left: 16px;
}

#muteButton.off{
	background: transparent  url('img/muteoff.svg') center center no-repeat;
	background-size: contain;
}

#muteButton.on {
	background: transparent  url('img/muteon.svg') center center no-repeat;
	background-size: contain;
}

#instructions {
	position: absolute;
	left: 50%;
	top: 50%;
	background: transparent  url('img/Face_Intro.png') center center no-repeat;
	background-size: contain;
	z-index: 5;
}

#preloader {
	position: absolute;
	width: 100%;
	height: 100%;	
	background: white;
	image-rendering: pixelated;
	z-index: 6;
}


/* landscape message */
#landscapeMessage {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;	
	overflow: hidden;
		
	background: #000000  url('img/landscapeMessage.png') center center no-repeat;
	background-size: auto 90%;
	
	border: 1px solid black;
	z-index: 100000;
}

/*
@media only screen and (max-width:600px) and (orientation:landscape) {
    #wrapper { display: none; }
    #landscapeMessage { display: block; }
}

@media only screen and (max-width:600px) and (orientation:landscape) and all and (-webkit-min-device-pixel-ratio:1.5), only screen and (max-width:600px) and (orientation:landscape) and all and (min-device-pixel-ratio:1.5) {
    #wrapper { display: block; }
    #landscapeMessage { display: none; }
}
*/