html, body, p, img, canvas, video {
	margin:0;
	padding:0;
	border:0;
	overflow:hidden;
	background:rgb(138,153,166);
}

body {
	width:100%;
	height:100%;
	background: rgb(138,153,166);
	color:#fff;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family:Dosis;
	font-size:1.4em;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

video, button, a {
	outline: none;
}

canvas {
	width:100%;
	height:100%;
	overflow:hidden;
}



a {
	text-decoration:none;
	outline: none;
	color:#ffffff;
}

#header {
	position:absolute;
	z-index:10;
	top:0.8em;
	width:100%;
}

#title {
	position:absolute;
	top:0;
	left:1.4em;
}

#help {
	float:right;
	width:46%;
	text-align:right;
}

#footer {
	position:absolute;
	z-index:10;
	display:block;
	color:#fff;
	bottom:2.0em;
	width:100%
}

#speaker {
	position:absolute;
}

#speaker-hidden {
	position:absolute;
	top:-100px;
	width:1px;
	height:1px;
}

.speaker, .speaker-muted {
	top:0;
	left:1.4em;
	width:2.8em;
	height:1.4em;
	display: block;
	background-size: contain;
	background-position:left center;
	background-repeat:no-repeat;
}

.speaker {
	background-image: url(../img/speaker.svg);
}

.speaker-muted {
	background-image: url(../img/speaker-muted.svg);
}


@media all and (orientation:portrait) {
	
	#speaker {
		top:-1.4em;
	}
	
	#ip {
		position:absolute;
		top:-1.4em;
		left:3.2em;
		height:1.4em;
		line-height:1.4em;
	}
	
	#host {
		position:absolute;
		top:0;
		left:2.1em;
		height:1.4em;
		line-height:1.4em;
		font-size:0.7em;
		
	}

}
@media all and (orientation:landscape) {

	#speaker {
		top:0;
	}
	
	#ip {
		position:absolute;
		top:0;
		left:3.2em;
		height:1.4em;
		line-height:1.4em;
	}

	#host {
		position:absolute;
		top:0;
		right:1.4em;
		height:1.4em;
		line-height:1.4em;
	}
}