/*
 * module-headers.css
 *
 * Default CSS Manifest modified from Snook's
 * Scalable and Modular Architecture for CSS
 * http://smacss.com/book/
 */

/* ===============================================================================================
   MODULES - Discrete, reusable, modular components,
             e.g. navigation bars, product lists, contact forms...
   ============================================================================================ */


header {
  position: relative;
/*overflow: hidden;*/
  margin-right: auto; margin-left: auto;
  padding-top: 7rem; padding-bottom: 1.75rem;
} header.hero { min-height: 12rem;
} /* screen-width:768/16px */
@media only screen and (min-width: 48em) {
/*header.hero { padding-top: 10rem; }*/
} /* screen-width:1024/16px */
@media only screen and (min-width: 64em) {
/*header.hero { padding-top: 16rem; }*/
  header.hero > p { width: 63%; padding-right: 30%; }
} /* screen-width:1280/16px */
@media only screen and (min-width: 80em) {
  header.hero > p {
    width: 49.5rem; padding-right: 25.5rem;
  }
}

header.hero > * { position: relative; z-index: 5; }
header.hero > figure:first-of-type,
header.hero > figure:first-of-type:after {
  position: absolute; z-index: 1;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  margin: 0; padding: 0;
} header.hero > figure:first-of-type:after {
  content: '';
/*background-color: rgba(0,0,0,.4);*/
}

header.hero > figure:first-of-type > img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  max-width: unset; max-height: unset;
  width: auto; height: auto;
}