#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 12rem; 
}

#page-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* not using dynamic height since there is no dynamic content here */
  height: 12rem;
}

.searchbutton {
  /* added for chrome compatibility - do not show button outline */
  outline:0 !important;
  padding: 10px 20px;
  border-radius: 20px;
}

/* this is the whole column */
.col-xl-9 {
  height: 100px;
}

/* make the width of the search form the same as the form control */
.query-search-form {
  margin-top: 30px;
  margin-right: none;
  margin-left: none;
}

#background {
  padding-bottom: 0rem;
}
/* media CSS queries */
@media (max-width: 767px) {

  /* make the width of the search form the same as the form control */
  .query-search-form {
    display: block;
    margin-top: 20px;
    margin-left: 8px;
    margin-right: 8px;
    width:auto;
  }
  /* change the width of the forrm control */
  .form-control {
    display: flex;
    z-index: 3;
    border: 1px solid #DFE1E5;
    border-radius: 10px;
    background: #fff;
    max-width: 270px;
    width: 270px;
  }

  /* this is the whole column */
  .col-xl-9 {
    margin-top: 10px;
    height: 100px;
  }
  
  .col-6 {
    max-width: none;
  }

  .homepage-title {
    font-size: 1.5rem;
  }

  .form-control {
    font-size: 1.0rem;
    text-align: left;
  }

  #content-wrap {
    padding-bottom: 13rem; 
    font-size: 0.9rem;

  }

  #page-footer {
    height: 13rem;
  }

  .searchbutton {
    padding: 7px 20px;
    border-radius: 15px;
  }
}





