/* FONTS */
* { font-family: "Avenir Next W01", "Avenir", Arial, "sans-serif"; }

/* LAYOUT */
body { padding: 20px; }
#wrapper { margin-top: 10px; }

/* HEADER */
header { border-bottom: 2px solid black; padding-bottom: 20px; }

#logo { margin: 5px 0; }

#title { color: #888; }
#title h2 { font-size: 24px; margin-bottom: 0; padding: 5px 0; }

nav div { display: inline-block; margin: 0 30px 0 0; font-size: 14px;
	text-transform: uppercase; font-weight: bold; }
nav a { color: #888; cursor: pointer; }

/* fixes for different screen sizes */
#logo, #title { margin-bottom: 20px; }
@media (min-width: 992px) {
  #logo, #title { margin-bottom: 0; }
  #title { text-align: center; }
  nav { text-align: right; }
  nav div { margin: 5px 30px; }
}
@media (min-width: 1200px) {
  #title h2 { padding: 13px 0; }
  nav div { margin: 18px 30px; }
}

/* MAIN CONTENT */
main { margin-top: 20px; }

.question-content .number { width: 60px; height: 60px; float: left;
  margin: 0 20px 20px 0px; line-height: 60px; text-align: center;
  font-size: 30px; font-weight: 900; background: #ee512f; color: white; }
.question-text { font-size: 18px; font-weight: bold; color: #ee512f; 
  margin-left: 80px;}
.question-choices { clear: both; margin: 50px 0 30px 0; }
.question-choices button { background: none; text-align: left;
  border: none; font-size: 14px; vertical-align: top; cursor: pointer;
  margin-bottom: 10px; }
.question-choices .choice-number { border: 1px solid #ee512f; color: #ee512f;
  font-size: 18px; font-weight: 900; width: 30px; height: 30px;
  line-height: 30px; margin: 0 auto 10px 0; text-align: center; }
.question-choices button:hover .choice-number,
  .question-choices button.selected .choice-number { background-color: #ee512f;
  color: white; }
.question-controls button { font-size: 14px; cursor: pointer; }

.progress-text { font-size: 10px; font-weight: bold; color: #888;
  text-transform: uppercase; text-align: center; margin-bottom: 20px; }
.question-image { width: 100%; height: 200px; object-fit: cover; }
.question-discussion { width: 100%; min-height: 200px; background: #333;
  color: white; font-size: 12px; padding: 20px; }
@media (min-width: 576px) { 
  .question-image { height: 400px; }
  .question-discussion { min-height: 400px; }
}
@media (min-width: 768px) {
  .question-image { height: 300px; }
  .question-discussion { min-height: 300px; }
}
@media (min-width: 992px) {
  .question-image { height: 400px; }
  .question-discussion { min-height: 400px; }
}
.question-discussion h5 { color: #ee512f; font-size: 18px; font-weight: 800;
  border-bottom: 1px solid #ee512f; padding-bottom: 7px;
  margin: 20px 0 20px 0; }
.question-discussion img { width: 100%; }
.correct-answer { text-transform: uppercase; font-weight: bold; }
.correct-answer .answer-number { color: #ee512f; font-size: 18px;
  font-weight: 900; padding-left: 3px; }

/* RESULTS */
#results-table th { padding-right: 20px; }

/* FOOTER */
footer { margin-top: 30px; font-size: 10px; }

/* ABOUT PAGE */
#about h3 { margin-top: 40px; }
#about #banner-image { margin-bottom: -40px; }