html,
body {
	background-color: #fff;
}
h1 {
  color: #3266cb;
}

#question {
	color: #666;
	text-align: left;
}
#question hr {
	background-color: #000;
	margin: 50px 0;
}
#question form ul {
	list-style: none;
	margin-bottom: 15%;
	padding: 0;
	overflow: auto;
}
#question form ul span {
	display: block;
	font-size: 1.5em;
	line-height: 1.2;
	margin-bottom: 0.5em;
}
@media (min-width:641px) {
	#question form ul li {
		display: inline-block;
		width: 50%;
		float: left;
		padding-right: 1em;
	}
	#question form ul.long li {
		width: 100%;
		padding-right: 0;
	}
}
@media (min-width:1025px) {
	#question form ul li {
		width: 25%;
	}
	#question form ul.long li {
		width: 50%;
		padding-right: 1em;
	}
}
#question .button {
	background-color: #f50000;
	border-color: #f50000;
}
#question .button:hover {
	color: #fff !important;
}


#result {
	/*height: 100%;*/
}
#result h1 {
	padding-top: 0;
}
#chart {
  width: 100%;
  /*min-height: 100%;*/
  color: #666;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#chart .explanation-link a:nth-of-type(1) { color: #508C2C; }
#chart .explanation-link a:nth-of-type(1):hover {	color: #fff; 	background-color: #508C2C; border-color: #508C2C; }
#chart .explanation-link a:nth-of-type(2) { color: #9E2317; }
#chart .explanation-link a:nth-of-type(2):hover {	color: #fff; 	background-color: #9E2317; border-color: #9E2317; }
#chart .explanation-link a:nth-of-type(3) { color: #FF6500; }
#chart .explanation-link a:nth-of-type(3):hover {	color: #fff; 	background-color: #FF6500; border-color: #FF6500; }
#chart .explanation-link a:nth-of-type(4) { color: #1A8BB0; }
#chart .explanation-link a:nth-of-type(4):hover {	color: #fff; 	background-color: #1A8BB0; border-color: #1A8BB0; }
#chart #piechart {
	height: 50vh;
  margin: 0 auto;
	overflow: hidden;
}
#chart #piechart text {
  font-family: inherit !important;
}
#chart #piechart div {
  overflow: hidden;
}

.explanation {
	/*background-attachment: fixed;*/
	/*min-height: 100%;*/
}
.explanation h2 {
	font-size: 3.6em;
	color: #fff;
	line-height: inherit;
	padding-top: 0;
}
.explanation h2 .subheading {
	font-size: 0.4em;
	text-transform: none;
}
.explanation h3 {
	text-align: left;
	font-size: 1.6em;
	padding: 0;
	margin-bottom: 0.2em;
}
.explanation-link {
	margin-top: 50px;
	margin-bottom: 0;
}
.explanation-link a {
	display: inline-block;
	font-size: 0.9em;
	line-height: 1.5;
	text-transform: uppercase;
	border: 1px solid;
	border-radius: 4px;
	padding: 0 0.6em;
	color: #fff;
}
.explanation-link a:hover {
	background-color: #fff;
	color: #000;
	border-color: #fff;
}

.sub-group {
	display: flex;
	flex-wrap: wrap;
}
.sub-group > * {
	width: 100%;
	margin-bottom: 50px;
}
.sub-group > *:last-of-type {
	margin-bottom: 0;
}
@media (min-width:801px) {
	.sub-group > * {
		width: 50%;
	}
	.sub-group > *:nth-last-of-type(2) {
		margin-bottom: 0;
	}
}




#earth {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%), url(../strength-discovery/images/earth.jpg);
}
#fire {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url(../strength-discovery/images/fire.jpg);
}
#air {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url(../strength-discovery/images/air.jpg);
}
#water {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url(../strength-discovery/images/water.jpg);
}