.hero {
  width: 100%;
  height: 496px;
  background-image: url(../images/hero.png);
  background-position: 60% 0%;
  position: relative; }
  .hero h1 {
    font-size: 52px;
    text-transform: uppercase;
    font-weight: 200;
    position: absolute;
    top: 110px;
    left: 40%;
    display: inline; }
  .hero h2 {
    font-size: 52px;
    font-weight: 100;
    position: absolute;
    top: 160px;
    left: 40%;
    display: inline; }
  @media (max-width: 1000px) {
    .hero {
      height: 380px;
      background-size: cover; }
      .hero h1, .hero h2 {
        font-size: 32px; }
      .hero h1 {
        top: 90px; }
      .hero h2 {
        top: 120px; } }
  @media (max-width: 700px) {
    .hero {
      height: 320px;
      background-size: cover; }
      .hero h1, .hero h2 {
        left: 35%;
        font-size: 28px; }
      .hero h1 {
        top: 70px; }
      .hero h2 {
        top: 100px; } }
  @media (max-width: 550px) {
    .hero {
      height: 320px;
      background-position: 100% 0%;
      position: static; }
      .hero h1, .hero h2 {
        position: static;
        font-size: 8vw;
        margin: 0 auto;
        display: block; }
      .hero h1 {
        width: 93vw;
        padding-top: 50px; }
      .hero h2 {
        width: 93vw;
        margin-top: -10px; } }
  @media (max-width: 350px) {
    .hero {
      height: 200px;
      background-position: 100% 0; }
      .hero h1 {
        padding-top: 40px; } }