@charset "UTF-8";
*{
	font-family:Arial,sans-serif;
	margin:0;
	padding:0;
}

html,
body {
	width: 100%;
	height: 100%;
	background:#35B6FF;
}
body{
	display: table;
}

body > header,
body > main,
body > footer {
	width: 100%;
	height: 100%;
	display: table-row;
}
body > header,
body > footer {
	height: 1px;
}
body > main {
	height: 100%;
}

body > header > div,
body > main > div,
body > footer > div {
	padding: 1em;
}

#header{
	background:#0172B2;
	color:#1BACFF;
	width:calc(100% - 2rem);
	padding:1rem;
	font-size:2rem;
	position:relative;
	z-index:2;
	box-shadow:0px 5px 5px rgba(0,0,0,0.1);
	font-weight:bold;
}
.choices{
	width:100%;
	padding:0;
	overflow: hidden; /* clear the float */
	
	font-weight:bold;
	font-size:1.4rem;
	
	box-shadow: inset 0px 0px 5px rgba(0,0,0,0.1);
}
.choice{
	background:#B26600;
	color:#FF9D1B;
	
	display:inline-block;
	width:calc(40% - 2rem);
	padding:1rem;
	
	transition: width 0.65s;
	
	cursor:pointer;
}
.choice span{
	opacity:0.4;
}
.choice.selected{
	background:#FF9D1B;
	color:#B26600;
	
	width:calc(60% - 2rem);
	
	transition:
		width 0.65s;
}
.choice.selected span{
	opacity:1;
}
.choice:first-child{
	float: left;
}
@media screen and (max-width: 600px) {
	.choice{
		width:calc(45% - 2rem);
	}
	.choice.selected{
		width:calc(55% - 2rem);
	}
}
div.choice:last-child{
	text-align:right;
}
.row{
	margin:1rem auto;
	width:20rem;
	text-align:center;
}
label{
	color:#212121;
	font-weight:bold;
	display:inline-block;
	width:5rem;
}
button{
	background:#FF9D1B;
	color:#B26600;
	padding:0.5rem;
	border:4px solid #B26600;
	font-weight:bold;
	font-size:1rem;
}
.answer{
	color:#212121;
}
table.response{
	background:#B26600;
	color:#FF9D1B;
	border-collapse:collapse;
	border:4px solid #FF9D1B;
}
table.response td{
	background:#B26600;
	color:#FF9D1B;
	min-width:6rem;
	padding:0.5rem 1rem;
	font-weight:bold;
	border:4px solid #FF9D1B;
}
table.response tr:first-child td{
	text-align:center;
}
table.response td:nth-child(2){
	background:#FF9D1B;
	color:#B26600;
	/*border:4px solid #B26600;
	border-left:4px solid #B26600;
	border-top:4px solid #B26600;*/
	padding:0;
	min-width:12rem;
}
table.response td:nth-child(2) div{
	width:calc(100% - 2rem - 8px);
	border:4px solid #B26600;
	padding:0.5rem 1rem;
	text-align:center;
	color:#B26600;
}
span.hr{
	display:inline-block;
	width:80%;
	border-bottom:2px solid #0172b2;
	margin:0 10%;
}
table.presets td{
	text-align:center;
	padding:0.5rem 1rem;
}
a.preset{
	color:#0172B2;
	font-weight:bold;
	cursor:pointer;
}
/*
	light orange: FF9D1B
	dark orange: B26600
	light blue: 35B6FF
	mid blue; 1BACFF
	dark blue : 0172B2
*/