@charset "UTF-8";
/*
## NOFELAU ARIANNOL / CYFRES Y GEINIOG
## GLOBAL STYLES
*/

* {
	margin: 0;
	padding: 0;
	font-family: "comicrelief", Arial, Helvetica, sans-serif;
}
body {
	height: 100%;
	width: 100%;
	background-color: #fff;
	color: #444;
	text-rendering: optimizeLegibility;
}
@font-face {
	font-family: 'comicrelief';
	src: url('comicrelief/ComicRelief-webfont.eot');
	src: url('comicrelief/ComicRelief-webfont.eot?#iefix') format('embedded-opentype'),
		 url('comicrelief/ComicRelief-webfont.woff') format('woff'),
		 url('comicrelief/ComicRelief-webfont.ttf') format('truetype'),
		 url('comicrelief/ComicRelief-webfont.svg#comic_reliefregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
/*
EmojiSymbols Font (c)blockworks - Kenichi Kaneko
http://emojisymbols.com/
*/
@font-face {
	font-family: 'emoji';
	src: url('EmojiSymbols-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
audio {
	display: none;
	visiblity: hidden;
	opacity: 0;
	z-index: -1;
	height: 0;
	width: 0;
}

/* ###################
## GLOBAL OVERLAIRD ##
####################*/
div.gloverlay {
	display: none;
	height: 100%;
	width: 100%;
	position: fixed;
	background-color: #000;
	opacity: 0.7;
	z-index: 9000;
}

/* ##############
## INSTRUCTION ##
###############*/
div.gloverlay {
	display: block;
}
div.instruction {
	text-align: center;
	line-height: 1.2em;
	z-index: 9001;
	width: 70%;
	position: fixed;
	top: 5%;
	left: 15%;
	background-color: #fff;
	box-shadow: 3px 3px 0 0 RGBA(30,30,30,0.3);
}
div.instruction h1 {
	line-height: initial;
	padding-top: 1em;
}
div.instruction p {
	padding: 1.5em;
	font-size: 1.3em;
	line-height: 1.5em;
}
div.instruction span.launch {
	display: block;
	width: 70%;
	max-width: 200px;
	margin: 1em auto;
	padding: 1em 0.25em;
	background-color: #527ABF;
	color: #fff;
	cursor: pointer;
}
div.instruction span.launch:hover {
	background-color: #638BCF;
}
div.instruction span.launch:active {
	background-color: #4169AE;
}

/*###################
## SMALLER SCREENS ##
###################*/
