html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


body {
  background-color: #EBEAEA;
  font-family: 'Source Sans Pro', Arial, Helvetica, Tahoma, Verdana, sans-serif;
  font-size: 16px;
  color: #1B1B1B;
  position: relative;
  padding: 0;
  margin: 0;
  overflow: auto;
}

/* Media queries */

@media screen and (min-width: 480px) {
    body {
    }
}

a {
  color: #377bda;
  text-decoration: none
}
a img {
  border: 0
}

.container {
  /*max-width: 760px;*/
  margin: 0 auto;
  position: relative;
  padding: 1em;
}

.small {
  font-size: .8em;
}

.content {
  margin-top: 1rem;
}

.button {
  cursor: pointer;
  color: #fff;
  padding: .75em .9em;
  text-align: center;
  background: #1f75ba;
  border-radius: 0;
  line-height: 1;
}

.button.bold {
  background: #b61b14;
}

.button.block {
  display: block;
  width: 100%;
}



.question_text:first-child {
  font-weight: 600;
  /*margin-top: 0;*/
}
.question_answers li {
  /*display: block;*/
}

.question_answers_bonus {
  display: none;
  clear: left;
}
.question_answers_bonus ul {
  margin-top: 1em;
}
/*.explanation--nav {
  display: none;
  position: absolute;
  z-index: 100;
  top: 0;
  right: 0;
  display: block;
  float: right;
}*/
.explanation {
  position: relative;
  bottom: 1.5rem;
  display: none;
  padding: 1em;
  background: #fff;
  border-radius: 8px;
  z-index: 200;
  /*margin-left: 1rem;
  margin-right: 1rem;*/
  width: 90%;
  max-width: 760px;
  left: 50%;
  transform: translateX(-50%);
}
.explanation:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 30px 35px 0 35px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  content: '';
}
.explanation p {
  font-size: .85em;
  margin: 0 0 1em 0;
}
.explanation p:last-child {
  margin: 0;
}
.rank_insignia p {
  display: none
}
#extra_12 {
  display: none
}
#scoring {
  display: none
}
#progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: .75em;
  text-align: right;
  background: #ccc;
}
.progress-content {

}
.progress--text {
  padding: .3em;
  display: block;
  position: relative;
  z-index: 1;
}
.progress--bar {
  transition: 200ms all ease-in;
  position: absolute;
  display: block;
  top: 0;
  z-index: 0;
  /*width: 100%;*/
  height: 100%;
  background: #b61b14;
}
ul {
  clear: both
}
ul, ul li {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
  list-style-image: none;
}
ul li {
  margin-left: 1.5em
}
#questions, #navigation, #explanations {
  margin-left: 0;
  display: none;
}

.question, .explanation {
  margin-left: 0;
  display: block;
}
#questions {
  /*margin-bottom: 3em;*/
  margin: 0 0 3rem 0;
  padding: 1rem;

}

#navigation {
  background: #0d304f;
  position: fixed;
  padding: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
}

.navigation--items {
  display: table;
  width: 100%;
  padding: 0;
  margin: 0;
}
.navigation--items li {
  display: table-cell;
  width: 20%;
  padding: 0;
  margin: 0;
  float: none;
}

.navigation--items a {
  display: block;
  /*float: left;*/
  /*width: 30%;*/
  /*height: 2em;*/
  /*margin-bottom: 1em;*/
  margin-left: 0;
  /*padding: 1em;*/
  text-align: center;
}
.navigation--next {

}
.navigation--previous {

}
#navigation a {
  display: block;
}
.navigation_navigation {
  /*width: 25%*/
}
li.navigation_explanation {
  width: 40%;
  text-align: center;
}
.navigation_explanation a {
  color: #fff;
}
.rank_insignia li {
  float: left;
  width: 15%;
  margin-right: 5%;
}
.rank_insignia img {
  width: 100%;
  max-width: 70px;
  max-height: 70px;
  width: 100%;
  height: auto;
}
.rank_insignia li p {
  /*width: 50px*/
}

#a1_bonus {
  margin-left: 1.5em
}
#explanations {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
}
#scoring .user_inside {
  color: #000
}
#scoring .user_outside {
  color: #999
}
#scoring p, #scoring h3 {
  clear: left;
  padding-left: 10px;
}
.scoring_explanation {
  border-left: 10px solid #eee
}
#scoring_99 {
  border-left: 10px solid #9ecae1
}
#scoring_100 {
  border-left: 10px solid #6baed6
}
#scoring_80 {
  border-left: 10px solid #4292c6
}
#scoring_43 {
  border-left: 10px solid #2171b5
}
#scoring_20 {
  border-left: 10px solid #084594
}
#bracket_chart {
  float: right;
  margin-bottom: 20px;
  margin-left: 20px;
}
#bracket_bars li {
  position: relative;
  float: left;
  width: 20px;
  height: 250px;
  margin-left: 0;
  padding: 0;
}
#bracket_bars li div {
  position: absolute;
  width: 100%;
  margin: 0;
}
#bar_99_bar {
  bottom: 48%;
  height: 51%;
  background-color: #9ecae1;
}
#bar_100_bar {
  bottom: 42%;
  height: 58%;
  background-color: #6baed6;
}
#bar_80_bar {
  bottom: 11%;
  height: 63%;
  background-color: #4292c6;
}
#bar_43_bar {
  bottom: 0%;
  height: 43%;
  background-color: #2171b5;
}
#bar_20_bar {
  bottom: 0%;
  height: 20%;
  background-color: #084594;
}
.bar_typ {
  z-index: 10;
  height: 1%;
  background-color: #666;
}
#bar_99_typ {
  bottom: 76.5%
}
#bar_100_typ {
  bottom: 65.5%
}
#bar_80_typ {
  bottom: 32.5%
}
#bar_43_typ {
  bottom: 8.5%
}
#bar_20_typ {
  bottom: 1.5%
}
.bar_user {
  z-index: 20;
  height: 1%;
  background-color: #000;
}
#user_info {
  border-left: 10px solid #000
}

#start_over {
  display: block;
}

.answers--radio label {
  padding: .25rem;
}
.answers--radio input {
}

label, input {
  /*display: inline-block;*/
  line-height: 1;
  vertical-align: middle;
  /*float: left;*/
}

label {
  padding: .3rem;
}

input[type="text"], input[type="number"], input[type="email"] {
  padding: .3rem;
  max-width: 4em;
  /*clear: right;*/
}

input[type="radio"], input[type="checkbox"]  {
  margin: .3rem;
  /*clear: left;*/
}

.scoring--share {
  padding: 1em;
  text-align: center;
  visibility: top;
}

.tweetBtn {
  /*display: inline-block;*/
  /*vertical-align: middle;*/
}

#scoring .scoring--share-buttons > p  {
  padding: 0;

}

.fb-share-button {
  font-size: .9em;
  border-radius: 4px;
  padding: .5em .7em;
  /*width: 50%;*/
  margin: 0 auto;
  color: #fff;
  list-style: 1;
}

.fb-share-button img {
    width: auto;
    height: 1em;
    /*margin-right: .25em;*/
    vertical-align: middle;
}