* {
  margin: 0;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: texgyreadventorregular;
}

.wrapper {
  min-height: 80%;
  margin: 0 auto -570px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
  height: 570px; /* '.push' must be the same height as 'footer' */
}




.subHdr {
    width: 90%;
    height: 570px;
    background: transparent;
    margin: auto;
    padding: 0px;
}
div#one {
    width: 25%;
    background: transparent;
    float: left;
}
div#two {
    display: block;
    float: right;
    height: 570px;
    background: transparent;
}

.col2img {
  width: 100%;
  float: right;
}





/* MEDIA QUERIES */

@media (max-width: 400px) {
  .subHdr {
    height: 401px;
  }
  .col2img {
    width: 100%;
  }
  div#one {
    display: none;
  }
  div#two {
    width: 100%;
    height: 401px;
  }
  .wrapper {
    margin: 0 auto -401px; /* the bottom margin is the negative value of the footer's height */
  }
  footer, .push {
    height: 401px; /* '.push' must be the same height as 'footer' */
  }
}

@media (min-width: 401px) and (max-width: 800px) {
  .subHdr {
    height: 433px;
  }
  .col2img {
    width: 100%;
  }
  div#one {
    display: none;
  }
  div#two {
    width: 100%;
    height: 433px;
  }
  .wrapper {
    margin: 0 auto -433px; /* the bottom margin is the negative value of the footer's height */
  }
  footer, .push {
    height: 433px; /* '.push' must be the same height as 'footer' */
  }
}

@media (min-width: 801px) and (max-width: 1280px) {
  .subHdr {
    height: 524px;
  }
  .col2img {
    width: 100%;
  }
  div#one {
    display: none;
  }
  div#two {
    width: 100%;
    height: 524px;
  }
  .wrapper {
    margin: 0 auto -524px; /* the bottom margin is the negative value of the footer's height */
  }
  footer, .push {
    height: 524px; /* '.push' must be the same height as 'footer' */
  }
}

@media (min-width: 1281px) {
  .col2img {
    width: 100%;
  }
  .subHdr {
    height: 640px;
  }
  div#two {
    height: 640px;
  }
  .wrapper {
    margin: 0 auto -640px; /* the bottom margin is the negative value of the footer's height */
  }
  footer, .push {
    height: 640px; /* '.push' must be the same height as 'footer' */
  }
}