*{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
.clear{clear:both;}

html{
	font-size:10px;
	font-family:'Open Sans', sans-serif;
}
body{
	font-size:1.6em;
}
html, body{
	background:rgb(235,235,235);
}

#container{
	padding:20px;
}
#header{
	font-size:4rem;	
	font-weight:300;
	text-align:center;
	padding:10px;
	background:#fff;
	border:1px solid #000;
}
#header .by{
	font-size:2rem;
}
.bold{
	font-weight:800;
}
.italic{
	font-style: italic;
}

.box-heading{
	background:#fff;
	border:1px solid #000;
	padding:10px;
	font-weight:800;
	font-size:2rem;
	margin-top:20px;
	
	
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently */
	
}
.box{
	border:1px solid #000;
	padding:10px;
	border-top:0px;
	line-height:3rem;
}

#results{
	line-height:4rem;
}
#results .bold:first-of-type{
	margin:0;
}
.bold{
	line-height:1.6rem;
	margin-top:20px;
}
button{
	background:#fff;
	border:1px solid #000;
	font-family:'Open Sans', sans-serif;
	font-size:1.6rem;
	line-height:1.6rem;
	outline:0;
	border-radius:5px;
	padding:5px;
	cursor:pointer;
	
	
	
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently */
}
button:hover{
	background:#000;
	color:#fff;
}
button.key{
	color:#f00;
	border:1px solid #f00;
}

#question{
	font-weight:400;
}

#show-hide{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#DDD;
	background:rgba(0,0,0,0.5);
	padding:20px;
}
#show-hide .inner{
	width:100%;
	height:100%;
	overflow-y:auto;
	background:#DDD;
	border:1px solid #000;
	padding:10px;
}

#show-hide .box-heading{
	text-align:center;	
}
#show-hide .inner > .box-heading{
	margin:0;
}
#key{
	text-align:center;
}
#key .key{
	display:inline-block;
	margin:10px 5px;
	line-height: 25px;
}
#key .square{
	display:inline-block;
	width:25px;
	height:25px;
	border:1px solid #000;
	margin: 0 3px -6px 0;
}














th, td {
	border: 1px solid black;
	padding:10px;
}
.rowspan{
	padding:10px;
}
table{
	width:100%;
	margin:10px 0 0 0;
}
table th, table .th{
	font-size:20px;
	font-weight:800;
	text-align:center;
	vertical-align:middle;
	background:#eee;
}
th[colspan], td[rowspan]{
	background:#fff;
}
tr:first-of-type th:first-of-type{
	background:#fff;
}
th.noborder {
    border: 0;
	background:transparent !important;
}
table .th{
    width:1%;
    white-space:nowrap;
}
table td{
	text-align:center;
}





.person{
	width:75px;
	height:150px;
	position:relative;
	display:inline-block;
	background-color:#fff;
}
.person .layer{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
.person .layer-1{
	background:url("../img/cutout.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

@media only screen and (max-width: 1440px) {
	html{
		font-size:8px;
	}
	.person{
		width:50px;
		height:100px;
	}
	#key .key{
		margin:5px 3px;
	}
	#key .square{
		width:15px;
		height:15px;
		margin: 0 3px -4px 0;
	}
}
@media only screen and (max-width: 600px) {
	.person{
		width:30px;
		height:60px;
	}
}