/* large screens */
@media (min-width: 1600px) {
}

@media (max-width: 1500px) {
  .quiz-question {
    font-size: 40px;
  }
  .form form {
    width: 35%;
  }
}

/* Desktops/Laptops */
@media (max-width: 1200px) {
  .quiz-question {
    height: 150px;
    font-size: 30px;
  }
  .radio-field {
    height: 90px;
  }
  .radio-field label {
    font-size: 20px;
  }
  .radio-field label::before {
    font-size: 35px;
  }
  .form form {
    width: 50%;
  }
}

/* Laptops */
@media (max-width: 1024px) {
}

/* Tablets */
@media (max-width: 768px) {
  .tab-100 {
    width: 100%;
  }
  .tab-none {
    display: none;
  }
  .step-bar {
    position: fixed;
    top: 0;
    background-color: rgb(255, 255, 255);
    height: 50px;
    align-items: center;
    z-index: 1000;
  }
  .form form {
    width: 80%;
    padding: 30px;
  }
}

/* mobile */
@media (max-width: 576px) {
  .step-bar {
    position: fixed;
    top: 0;
    background-color: rgb(255, 255, 255);
    height: 50px;
    align-items: center;
    z-index: 1000;
  }
  .wrapper {
    padding-top: 100px;
    width: 95%;
  }
  .quiz-question {
    height: 100px;
    font-size: 20px;
    padding: 0 20px 0 0;
  }
  .quiz-question::before {
    margin-right: 20px;
  }
  fieldset {
    margin-top: 40px;
  }
  .radio-field {
    height: 80px;
    margin-bottom: 20px;
  }
  .radio-field label::before {
    width: 70px;
    font-size: 25px;
    margin-right: 30px;
  }
  .next-prev button {
    width: 100%;
    margin-bottom: 20px;
  }
  .radio-field input:checked::before {
    top: 40px;
  }
  .form form {
    width: 90%;
  }
}