.hidden {
  visibility: hidden; }

#list {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  #list .number p {
    text-align: center; }
  #list .number img {
    width: 90%;
    height: auto;
    margin: 0 auto; }

.addition {
  width: 15% !important;
  margin: 0 auto; }
  .addition .num-top-row,
  .addition .num-mid-row,
  .addition .num-bottom-row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; }
    .addition .num-top-row span,
    .addition .num-top-row input,
    .addition .num-mid-row span,
    .addition .num-mid-row input,
    .addition .num-bottom-row span,
    .addition .num-bottom-row input {
      text-align: center;
      font-size: 2em;
      margin-right: 20px; }
    .addition .num-top-row input,
    .addition .num-mid-row input,
    .addition .num-bottom-row input {
      width: 20px; }

hr {
  border-color: white;
  width: 100%; }

.num-btns {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 28px !important;
  text-align: center; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; }

.number-line {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }
  .number-line h3 {
    padding: 0 10px;
    border-bottom-style: solid;
    border-bottom-width: 6px;
    border-bottom-color: transparent; }

.digital-clocks {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }

.clock-face {
  width: 30%;
  margin: 0 auto;
  display: block; }

.d-clock {
  border-bottom-color: transparent;
  border-bottom-style: solid;
  border-bottom-width: 3px;
  text-align: center; }

.question-5-answers {
  margin: 0 auto;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }
  .question-5-answers .answer {
    width: 7%; }
  .question-5-answers .answer h3 {
    text-align: center;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: transparent; }

#Q6-list {
  width: 100% !important;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around; }
  #Q6-list h3 {
    text-align: center; }

.number {
  width: 148px; }

.Q7-answers {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }

.Q7-num-one,
.Q7-num-two,
.Q7-num-three {
  width: 75px;
  height: 50px;
  background-color: transparent;
  border: solid white 2px;
  text-align: center; }

.Q8-questions {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  width: 100%; }

.questionA,
.questionB {
  width: 50%; }

.answer-btn8 {
  clear: both; }

h2 input {
  width: 30px;
  text-align: center; }

.Q10-answer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }

input[type=number] {
  border: solid white 2px;
  background-color: transparent; }

.Q10-fraction {
  width: 10%;
  height: 200px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-content: space-between;
  -ms-flex-line-pack: justify;
  align-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 30px; }
  .Q10-fraction hr {
    width: 80%;
    margin: 20px auto; }
  .Q10-fraction input {
    text-align: center;
    width: 35px;
    height: 35px;
    background-color: transparent;
    border: solid white 2px;
    margin: 10px 0 2px 0; }
  .Q10-fraction p {
    height: 35px;
    vertical-align: middle;
    margin-bottom: 0 !important; }

.equals {
  height: 100px;
  margin: auto 0px; }

#rotate-phone {
  display: none; }

@media screen and (max-width: 1024px) {
  .question {
    width: 100% !important; }
  #Q6-list .number {
    margin: 0 10px; }
  .digital-clocks {
    width: 80% !important;
    margin: 0 auto; }
  .d-clock {
    width: 28%; }
  .game-layout div {
    width: 100%; }
  .answer-btn {
    margin: 10px 0px !important; } }

@media screen and (max-width: 414px) {
  .questionA,
  .questionB {
    width: 100% !important; }
  #rotate-phone {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 150; }
    #rotate-phone img {
      width: 50%;
      display: block;
      margin: 200px auto 0  auto; }
    #rotate-phone h5 {
      text-align: center;
      padding: 20px; } }