@media only screen and (max-width: 768px) {

  #healthwarningmodal .modal-content {
    height: 700px;
    width: 270px;
    padding: 40px;
    text-align: center;
    font-size: 14px;
  }

  #healthwarningmodal .fa-stack {
    top: -15px;
    left: 0px;
  }

  #healthwarningmodal #healthwarning-modal-content {
    padding-top: 20px;
    text-align: left;
  }

  #healthwarningmodal #healthwarning-modal-buttons {
    padding-top: 0px;
  }

  #healthwarningmodal #healthwarning-modal-buttons button {
    font-size: 9px;
  }

    .logomoveleft {
    -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
    transition: width 1s;
    width: 28% !important;
  }

  .logomoveright {
    -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
    transition: width 1s;
    width: 93% !important;
  }

  #menuToggle input:checked ~ ul
  {
    transform: none;
    display: block;
  }

  #menuToggle ul {
    display: none;
  } 

  .questions {
    width: 84%;
    position: absolute;
    top: 28%;
    left: 10%;
  }

  .questions .answer-radio-labels {
    padding: 12px 15px;
    font-size: 14px;
  }

  .front .answer-radio-labels {
    padding: 15px 25px;
  }

  .help {
    width: 75%;
    position: absolute;
    top: 20%;
    left: 10%;
    font-weight: 900;
    color: #eb7e7f;
  }

  .question-label {
    font-size: 25px;
    font-weight: 400;
  }

  .question-label i {
    position: relative;
    top: -2px;
    left: -19px;
  }

  #question24 {
    left: 6%;
    width: 76%;
    top: 20%;
  }


  #question24 .question-label {
      font-size: 14px !important;
  }

  .nav-buttons {
    position: fixed;
    width: 100%;
    bottom: 5px;
    margin: auto;
    padding: 5px;
    text-align: center;
  }

  .autocomplete-items {
    padding-left: 0px;
    width: 100%;
  }

  input[type=text] {
    font-size: 40px;
    position: relative;
    width: 72%;
    border-radius: 0px;
    height: 40px;
    top: 0px;
    padding-bottom: 0px;
  }

  .pound {
    font-size: 43px;
    height: 55px;
  }

  .errormessage {
    width: 75%;
    position: absolute;
    top: 45%;
    left: 10%;
    font-weight: 900;
    color: #eb7e7f;
  }

  .logo img {
      padding: 7px 30px 0 30px;
      width: 70px;
  }

  .answers .flip-container {
    width: 90%;
    position: relative;
    left: 5%;
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .backbutton{
    top: 30px;
    left: 83%;
  }

  #menu
  {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 -70px;
    height: 1000px;

  }

  #menuToggle {
    top: 50px;
    left: 50px;
  }


  #help-modal-buttons {
      top: 230px;
      left: 135px;
      text-align: center;
  }

  .modal-content {
    padding: 20px;
  }

  #help-modal-content {
    color: #eb7e7f;
    font-size: 18px;
  }

  .p4 .product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 70px 80px 100px 80px 80px 120px 1fr;
    grid-template-areas: "lenderlogo lenderlogo" "plan-name plan-name" "initial-monthly-cost ." "initial-term-cost initial-rate" "aprc fees" "cta cta" "bottom bottom";
  }


  .p4 .cta {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 60px 60px;
    grid-template-areas: "continue" "more-info";
    grid-area: cta;
  }

  .p4container {
    width:90%;
  }

  .p4 .plan-name {
      grid-area: plan-name;
      padding: 20px 10px;
  }

  .p4 .initial-monthly-cost {
      grid-area: initial-monthly-cost;
      padding: 10px 0 10px 10px;
      background-color: #21b5fc80;
      margin: 5px 0 5px 5px;
      border: solid #21b5fc;
      border-width: 1px 1px 1px 1px;
  }

  .p4 .initial-term-cost {
      grid-area: initial-term-cost;
      padding: 10px 0 10px 10px;
      background-color: #21b5fc80;
      margin: 5px 0 5px 5px;
      border: solid #21b5fc;
      border-width: 1px 0 1px 1px;
  }

  .p4 .initial-rate {
      grid-area: initial-rate;
      padding: 10px 0 10px 0px;
      background-color: #21b5fc80;
      margin: 5px 5px 5px 0;
      border: solid #21b5fc;
      border-width: 1px 1px 1px 0;
  }

  .p4 .aprc {
      grid-area: aprc;
      padding: 10px 0 10px 10px;
      background-color: #21b5fc80;
      margin: 5px 0 5px 5px;
      border: solid #21b5fc;
      border-width: 1px 0 1px 1px;
  }

  .p4 .fees {
      grid-area: fees;
      padding: 10px 0 10px 0px;
      background-color: #21b5fc80;
      margin: 5px 5px 5px 0;
      border: solid #21b5fc;
      border-width: 1px 1px 1px 0;
  }

  .p4 .continue {
      grid-area: continue;
      background-color: #ffffff;
      margin: 5px 5px 0 5px;
      border: solid #ffffff;
      border-width: 1px 1px 1px 1px;
      display: flex;
      align-items: center;
  }

  .p4 .continue a {
      width: 100%;
      position: inherit;
  }

  .p4 .more-info {
      grid-area: more-info;
      background-color: #ffffff;
      margin: 5px 5px 0px 5px;
      border: solid #ffffff;
      border-width: 1px 1px 1px 1px;
      display: flex;
      align-items: center;
  }

  .p4 .more-info a {
      width: 100%;
      position: inherit;
  }

}