/*
colors:
darkblue: #0B6287
red: #FB3640
grey: #605F5E
lightblue: #247BA0
white: #E2E2E2

*/


body, html {
	background-color: #333;
	margin: 0px;
	font-family: helvetica, arial;
	color: #605F5E;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	min-height: 100%;
}
html{
	overflow-y: scroll;
}
*{
	box-sizing:border-box;
}
#canvas-wrap{
	position:fixed;
	display:block;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:0;
	overflow:hidden;
}
#canvas-wrap>canvas{
	height:100% !important;
	width:115% !important;
	position:absolute;
}

#quiz {
	background: #E2E2E2;
	position: absolute;
	left: 25px;
	top: 25px;
	z-index: 1;
	width:250px;
	border-radius: 2px;
}
#quiz>div{
	padding: 10px 10px 0 10px;
}
#quiz img{
	display:block;
	width:100%;
	height:auto;
	margin:0 auto 10px auto;
	max-width: 200px;
	box-shadow: 0 0 5px rgba(0,0,0,.2)
}
#quiz p{
	margin: 15px 0;
	font-size: 0.9em;
	line-height:1.4em;
}
#quiz p:first-child{
	margin-top:0;
}
#quiz h3 {
	margin: 0 0 15px;
	color:#247BA0;
	text-align: center
}

#loading {
	color: #E2E2E2;
	width: 100px;
	height: 100px;
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
#loading.loaded{
	display: none;
}
.hidden{
	display:none;
}

.btn, .tb{
	background: #247BA0;
	display: block;
	padding:7px;
	border-radius: 2px;
	border: 0;
	margin:0 0 10px 0;
	width:100%;
	text-align: center;
	box-shadow: 0 0 2px #605F5E inset;
	position:relative;
}
.btn:hover{
	background:#0B6287;
}
.btn>span{
	display: block;
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	background: #1E6583;
	color:#fff;
	width:25px;
	text-align: center;
	line-height: 29px;
	border-radius: 2px;
}
.btn-home{
	background: #247BA0;
	border-radius: 2px 0 0 2px;
	box-shadow: 0 0 2px #605F5E inset;
	border:0;
	position:absolute;
	right:100%;
	top:0;
	color:#fff;
	line-height: 29px;
	padding:0 3px;
}
.btn[disabled]{
	background:#605F5E;
}
.btn.tick:before{
	display: block;
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	background: #1E6583;
	color:#fff;
	content:'\2713';
	width:25px;
	text-align: center;
	line-height: 29px;
	border-radius: 2px;
}
.btn{
	color:#fff;
}
.btn.correct{
	background: #52c771;
}
.btn.wrong{
	background: #FB3640;
}
.tb{
	background: #E2E2E2;
	text-align: left;
}
.multichoiceall{
	margin-left:-5px;
	margin-right:-5px;
}
.multichoiceall .btn{
	width:calc(50% - 10px);
	margin-left:5px;
	margin-right:5px;
	float:left;
	padding:7px 2px;
}
.multichoiceall:after{
	content:'';
	display:table;
	clear:both;
}
@media (max-width:767px) and (orientation:portrait), (max-width:449px) {
	.multichoice{
		margin-left:-5px;
		margin-right:-5px;
	}
	.multichoice .btn{
		width:calc(50% - 10px);
		margin-left:5px;
		margin-right:5px;
		float:left;
	}
	#quiz{
		top:auto;
		bottom:0;
		left:0;
		width:100%;
	}
	#canvas-wrap>canvas{
		height:130% !important;
		width:100% !important;
		bottom:0;
		position:absolute;
	}
	.btn-home{
		right:auto;
		left:10px;
		bottom:100%;
		top:auto;
		border-radius: 2px 2px 0 0;
	}
}
@media (min-width:450px) and (max-width:767px) and (orientation:landscape) {
	#canvas-wrap>canvas{
		height:100% !important;
		width:133% !important;
		left:auto;
		right:0;
	}
	.multichoice{
		margin-left:-5px;
		margin-right:-5px;
	}
	.multichoice .btn{
		width:calc(50% - 10px);
		margin-left:5px;
		margin-right:5px;
		float:left;
	}
	#quiz{
		top:10px;
		right:10px;
		left:auto;
		margin-bottom:10px;
	}
	#quiz img{
		max-width:150px;
	}
}
.text-center{
	text-align:center;
}
.text-small{
	font-size: 0.8em;
}
.text-huge{
	font-size: 3em;
}
.space-top{
	margin-top:20px;
}
.space-bottom-none{
	margin-bottom:0 !important;
}
.partymode{
	font-size:3em !important;
	text-align:center;
	-webkit-animation: colorchange 30s infinite; 
	animation: colorchange 30s infinite;
}
@keyframes colorchange{
	0%   {text-shadow: 0 0 2px red; color: red;}
	25%  {text-shadow: 0 0 2px yellow; color: yellow;}
	50%  {text-shadow: 0 0 2px blue; color: blue;}
	75%  {text-shadow: 0 0 2px green; color: green;}
	100% {text-shadow: 0 0 2px red; color: red;}
}

@-webkit-keyframes colorchange{
	0%   {text-shadow: 0 0 2px red; color: red;}
	25%  {text-shadow: 0 0 2px yellow; color: yellow;}
	50%  {text-shadow: 0 0 2px blue; color: blue;}
	75%  {text-shadow: 0 0 2px green; color: green;}
	100% {text-shadow: 0 0 2px red; color: red;}
}