/* IMPORT THE FRAMEWORK */
/* /////////////// VARIABLES /////////////// */
/* COLOUR PALETTE */
/* PRIMARY NAV */
/* LINKS */
/* /////////////// MIXIN FUNCTIONS /////////////// */
/*  LINEAR GRADIENTS  */
/*  BREAKPOINTS  */
/*  VISUAL STYLES  */
/*  LAYOUT FRAMEWORK  */
.hero {
  position: relative; }

/*  COLUMN FRAMEWORK  */
/* LOOP TO CREATE A CLASS FOR EACH COLUMN WIDTH */
/* --------------------------------- */
/* /////// SITE SPECIFIC STYLES //// */
/* --------------------------------- */
/* BUTTON */
/* CONTENT */
/* SITE SPECIFIC */
/* FORMS */
/* --------------------------------- */
/* /////// END SITE STYLES ///////// */
/* --------------------------------- */
/* HERO */
.hero {
  width: 100%;
  height: 300px;
  margin-bottom: 3em;
  overflow: hidden; }
  .hero img {
    display: inline-block;
    width: 1200px; }

/* MEDIA QUERIES */
@media screen and (max-width: 768px) {
  .hero {
    height: 180px;
    margin-bottom: 1.5em; }
    .hero img {
      width: 100%;
      height: auto; } }
@media screen and (max-width: 736px) {
  .hero {
    height: 120px;
    margin-bottom: 1.5em; }
    .hero img {
      width: 100%;
      height: auto; } }