/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

section.hero-banner {
  background-size: cover;
  background-repeat: no-repeat;

  min-height: 450px; /* height */

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
}

section.hero-banner article.hero-banner-text-container {
  text-align: center;
}

section.hero-banner article.hero-banner-text-container h1 {
  text-transform: uppercase;
  -webkit-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
          transform: rotate(-3deg);
  font-size: 5rem;
}

/* custom code classes */
section.hero-banner.has-parallax {
  background-attachment: fixed;
}
section.hero-banner article.hero-banner-text-container h1.no-caps {
  text-transform: capitalize;
}

section.hero-banner.text-shadow article.hero-banner-text-container {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}


/* background positioning */
section.hero-banner.image-position-tl {
  background-position: top left;
}
section.hero-banner.image-position-tc {
  background-position: top center;
}
section.hero-banner.image-position-tr {
  background-position: top right;
}
section.hero-banner.image-position-cl {
  background-position: center left;
}
section.hero-banner.image-position-cc {
  background-position: center center;
}
section.hero-banner.image-position-cr {
  background-position: center right;
}
section.hero-banner.image-position-bl {
  background-position: bottom left;
}
section.hero-banner.image-position-bc {
  background-position: bottom center;
}
section.hero-banner.image-position-br {
  background-position: bottom right;
}


@media screen and (min-width: 768px) {
  section.hero-banner {
    min-height: 500px;
  }
}

@media screen and (min-width: 1024px) {
  section.hero-banner {
    min-height: 550px;
  }

  section.hero-banner article.hero-banner-text-container h1 {
      font-size: 6rem;
  }
}