/* Variables
************/
/* Global Styles
****************/
body {
  background-color: #333333;
  font-family: 'Roboto', sans-serif; }

.red {
  background-color: #CA2619 !important;
  color: #FFF !important;
  border: 1px solid #CA2619 !important; }

.blue {
  background-color: #023263 !important;
  color: #FFF !important;
  border: 1px solid #023263 !important; }

.hide {
  display: none; }

button:hover {
  cursor: pointer; }

button[disabled]:hover {
  cursor: default; }

.action {
  border-radius: 30px;
  padding: 10px 20px;
  margin: 0 0 15px;
  min-width: 120px;
  background-color: #333333;
  color: #FFF;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 800; }
  .action:hover {
    background-color: #000; }

.note, .note a {
  padding: 20px 0 0;
  margin: 0 auto;
  font-size: 14px;
  line-height: 19px;
  max-width: 270px;
  color: #AAA;
  font-style: italic; }

/* Navigation
*************/
nav {
  background-color: #023263;
  width: 100%;
  text-align: center;
  padding: 2px 0 5px; }

/* NFL Conferences
******************/
main {
  background-color: #EFEFEF;
  padding: 40px 0 50px; }

.conference h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 20px 0 10px; }

.conference hr {
  background-color: #333333;
  margin: 0 0 5px; }

.conference .conference_division {
  display: inline-block;
  width: 100%;
  max-width: 300px; }
  .conference .conference_division .conference_division-title {
    padding: 0 5px; }
    .conference .conference_division .conference_division-title h3 {
      font-size: 14px;
      font-weight: 800;
      writing-mode: vertical-rl;
      text-orientation: upright;
      text-transform: uppercase;
      letter-spacing: 0em;
      width: 14px;
      margin: 0; }
  .conference .conference_division .conference_division_teams {
    width: 88%; }
    .conference .conference_division .conference_division_teams .button-container.full button:hover {
      color: #CECECE; }
    .conference .conference_division .conference_division_teams button {
      font-size: 14px;
      font-weight: 300;
      border: none;
      background-color: #EFEFEF;
      border-bottom: 1px solid #CECECE;
      display: inline;
      width: 86%;
      height: 28px;
      padding: 0;
      line-height: 1.5;
      float: left;
      color: #000; }
      .conference .conference_division .conference_division_teams button.active {
        color: #CECECE; }
    .conference .conference_division .conference_division_teams div:last-child button {
      border-bottom: none; }
    .conference .conference_division .conference_division_teams .bold {
      font-weight: 800; }
  .conference .conference_division span.answer {
    width: 14%;
    font-size: 13px;
    margin: 1px 0 0 0;
    float: left;
    display: inline; }
  .conference .conference_division:nth-child(4) button {
    border: none; }
  .conference .conference_division .wrong .answer {
    color: #C12; }
  .conference .conference_division .wrong button {
    text-decoration: line-through; }
  .conference .conference_division .right .answer {
    color: #339933; }

#nfc {
  margin-top: 80px; }

@media only screen and (min-width: 768px) {
  #nfc {
    margin-top: 0; } }

#nfc .conference_division h3 {
  color: #023263;
  margin: 0; }

#nfc .conference_division button {
  text-align: left; }

#nfc .conference_division span.answer {
  padding: 6px 5px 0 0; }

#afc .conference_division h3 {
  color: #CA2619;
  float: right; }

#afc .conference_division button {
  text-align: right; }

#afc .conference_division span.answer {
  padding: 6px 0 0 5px; }

.north .conference_division-title, .south .conference_division-title {
  margin-top: 16px; }

.west .conference_division-title, .east .conference_division-title {
  margin-top: 24px; }

#afc .conference_division_teams, #nfc .conference_division-title, #nfc span.answer {
  float: left; }

#afc .conference_division-title, #nfc .conference_division_teams, #afc span.answer {
  float: right; }

/* Quiz Content Area
********************/
#quiz-intro > div, #final-submission > div, #quiz-results > div {
  background-color: #FFF;
  border-radius: 5px;
  margin-top: 55px;
  border: 1px solid #CECECE;
  padding: 30px;
  min-height: 559px; }
  #quiz-intro > div h1, #final-submission > div h1, #quiz-results > div h1 {
    font-size: 30px;
    font-weight: 800;
    margin-top: 2px; }
  #quiz-intro > div h2, #final-submission > div h2, #quiz-results > div h2 {
    font-size: 17px;
    font-weight: 300;
    margin: 0; }

#quiz > div {
  background-color: #FFF;
  border-radius: 5px;
  margin-top: 55px;
  border: 1px solid #CECECE; }
  #quiz > div img {
    margin: -55px 0 20px; }
  #quiz > div h1 {
    font-size: 33px;
    font-weight: 800;
    margin-top: 2px; }
  #quiz > div h2 {
    font-size: 17px;
    font-weight: 300;
    margin: 0; }
  #quiz > div ul li {
    list-style: none; }
  #quiz > div button {
    color: #000;
    background-color: #FFF;
    width: 100%;
    padding: 8px 0;
    margin: 0 0 20px;
    border: 1px solid #CECECE;
    border-radius: 5px; }
  #quiz > div button:hover {
    background-color: #EFEFEF; }
  #quiz > div #quiz_conference {
    padding: 0 30px;
    margin: 20px 0 0;
    display: block;
    height: 40px; }
    #quiz > div #quiz_conference li {
      width: 50%;
      font-weight: 300;
      font-size: 14px;
      padding: 0;
      margin: 0;
      float: left; }
      #quiz > div #quiz_conference li button {
        padding: 3px 0; }
    #quiz > div #quiz_conference li:nth-child(1) button {
      border-radius: 5px 0 0 5px;
      border-right: none; }
    #quiz > div #quiz_conference li:nth-child(2) button {
      border-radius: 0 5px 5px 0; }
  #quiz > div #quiz_answers {
    margin: 20px 0 10px;
    padding: 0 30px;
    min-height: 236px; }
    #quiz > div #quiz_answers button:hover {
      background-color: initial; }
    #quiz > div #quiz_answers.active button:hover {
      background-color: #EFEFEF; }
  #quiz > div #quiz_submit button {
    border: none;
    border-top: 1px solid #CECECE;
    border-radius: 0 0 5px 5px;
    width: 100%;
    background-color: #CECECE;
    margin: 5px 0 0;
    padding: 12px 0;
    color: #CECECE;
    font-weight: 800; }
  #quiz > div #quiz_submit.final button {
    background-color: #333333;
    color: #FFF;
    font-weight: 800; }
  #quiz > div #quiz_submit.final .active:hover {
    background-color: #000; }
  #quiz > div #quiz_submit.final .active:active {
    background-color: #333333; }

#quiz-results #correct-answers {
  color: #339933;
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 10px; }

#rank-title {
  font-weight: 800;
  font-size: 19px; }

#rank-description {
  margin: 0 0 30px; }

/* Footer
*********/
footer {
  background-color: #333333;
  padding: 15px 0;
  color: #CECECE;
  text-align: center;
  font-size: 11px;
  font-weight: 300; }
  footer p {
    margin: 0;
    text-transform: uppercase; }
    footer p a {
      color: #CECECE; }
      footer p a .home {
        text-decoration: underline; }
      footer p a:hover .home {
        text-decoration: none; }
      footer p a:hover {
        color: #CECECE;
        text-decoration: none; }