.entry-header {display: none;}
.quiz input.step1:checked ~ .container .q2,
.quiz input.step2:checked ~ .container .q3,
.quiz input.step3:checked ~ .container .q4,
.quiz input.step4:checked ~ .container .q5,
.quiz input.step5:checked ~ .container .q6,
.quiz input.step6:checked ~ .container .q7,
.quiz input.step7:checked ~ .container .q8,
.quiz input.step8:checked ~ .container .q9,
.quiz input.step9:checked ~ .container .q10,
.quiz input.step10:checked ~ .container .q11,
.quiz input.step11:checked ~ .container .q12 {
  position: relative;
  left: 0;
}
.quiz input.step12:checked ~ .container .status {
  display: block;
}
.quiz input.step12:checked ~ .container .q {
  position: relative !important;
  left: 0 !important;
  opacity: 1 !important;
}
.quiz input.step12:checked ~ .container .q h2 {
  font-size: 20px;
  margin-bottom: 10px;
}
.quiz input.step12:checked ~ .container .q label {
  background-color: #e4e4e4;
}
.quiz input.step1:checked ~ .container .q1,
.quiz input.step2:checked ~ .container .q2,
.quiz input.step3:checked ~ .container .q3,
.quiz input.step4:checked ~ .container .q4,
.quiz input.step5:checked ~ .container .q5,
.quiz input.step6:checked ~ .container .q6,
.quiz input.step7:checked ~ .container .q7,
.quiz input.step8:checked ~ .container .q8,
.quiz input.step9:checked ~ .container .q9,
.quiz input.step10:checked ~ .container .q10,
.quiz input.step11:checked ~ .container .q11,
.quiz input.step12:checked ~ .container .q12 {
  position: absolute;
  opacity: 0;
}
.quiz .score {
  margin-top: 40px;
  text-align: center;
}
.quiz .score h3:after {
  content: counter(score);
}
.quiz .container {
  text-align: center;
  counter-reset: score;
}
.quiz .status {
  display: none;
}
.quiz h2 {
  max-width: 500px;
  margin: 0 auto 30px;
  color: #000;
}
.quiz label {
  display: inline-block;
  padding: 0 40px;
  background-color: #2f3775;
  color: #fff;
  margin: 0 40px;
  text-align: center;
  line-height: 30px;
  transition: opacity .5s;
  border-radius: 20px;
}
.quiz label:hover {
  opacity: .7;
}

.q-styl {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
}
.quiz .q {
  margin-bottom: 40px;
  position: absolute;
  left: -2000px;
  transition: all 0.8s cubic-bezier(0.44, 0.25, 0.65, 0.38);
  width: 100%;
}
.quiz .q1 {
  position: relative;
  left: 0;
}
.quiz input {
  display: none;
}
.quiz .status {
  margin-bottom: 20px;
}
.quiz input[id=yes1].step1:checked ~ .container .q1 label.correct,
.quiz input[id=yes2].step2:checked ~ .container .q2 label.correct,
.quiz input[id=yes3].step3:checked ~ .container .q3 label.correct,
.quiz input[id=yes4].step4:checked ~ .container .q4 label.correct,
.quiz input[id=yes5].step5:checked ~ .container .q5 label.correct,
.quiz input[id=yes6].step6:checked ~ .container .q6 label.correct,
.quiz input[id=yes7].step7:checked ~ .container .q7 label.correct,
.quiz input[id=yes8].step8:checked ~ .container .q8 label.correct,
.quiz input[id=yes9].step9:checked ~ .container .q9 label.correct,
.quiz input[id=yes10].step10:checked ~ .container .q10 label.correct,
.quiz input[id=yes11].step11:checked ~ .container .q11 label.correct,
.quiz input[id=yes12].step12:checked ~ .container .q12 label.correct {
  background-color: #86a238;
  counter-increment: score;
  color: #fff;
}
.quiz input[id=no1].step1:checked ~ .container .q1 label.wrong,
.quiz input[id=no2].step2:checked ~ .container .q2 label.wrong,
.quiz input[id=no3].step3:checked ~ .container .q3 label.wrong,
.quiz input[id=no4].step4:checked ~ .container .q4 label.wrong,
.quiz input[id=no5].step5:checked ~ .container .q5 label.wrong,
.quiz input[id=no6].step6:checked ~ .container .q6 label.wrong,
.quiz input[id=no7].step7:checked ~ .container .q7 label.wrong,
.quiz input[id=no8].step8:checked ~ .container .q8 label.wrong,
.quiz input[id=no9].step9:checked ~ .container .q9 label.wrong,
.quiz input[id=no10].step10:checked ~ .container .q10 label.wrong,
.quiz input[id=no11].step11:checked ~ .container .q11 label.wrong,
.quiz input[id=no12].step12:checked ~ .container .q12 label.wrong {
  background-color: #cf5957;
  color: #fff;
}

@media (max-width: 768px) {
  .q-styl {
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
  }
  .q-styl label {
    margin-bottom: 10px;
    width: max-content;
  }
}