Edit in JSFiddle

<body>
  <div class="grid">
    <div class="col-12">

      <h1>HTML5 Method</h1>
    </div>
    <div class="col-12">
      <p>Here we use the HTML 5 method to make the entire box clickable without having to rely on Javascript. Before HTML5 this wouldn't have been possible and would have resulted in Validation errors. If you require another link inside the current &lt;a&gt;
        tag then the jQuery method would be better.</p>
    </div>

    <div class="grid">
      <a class="box col thumbnail " href="https://www.pexels.com/photo/red-logo-phone-england-64011/" title="English Telephone">
        <div>
          <img src="http://lorempixel.com/400/200" alt="Telephone">
          <h2>I love old Telephones</h2>
        </div>
      </a>

      <a class="box col thumbnail " href="https://www.pexels.com/photo/3-tan-short-coated-puppy-on-gray-dirt-during-daytime-26128/" title="Doggies">
        <div>
          <img src="http://lorempixel.com/400/200" alt="Dogs">
          <h2>These dogs are cute</h2></div>
      </a>

      <a class="box col thumbnail " href="https://www.pexels.com/photo/lights-tree-cactus-christmas-tree-76081/" title="Cactus">
        <div>
          <img src="http://lorempixel.com/400/200" alt="Cactus">
          <h2>Do you feel a little prick?</h2></div>
      </a>

      <a class="box col thumbnail " href="https://www.pexels.com/photo/iphone-notebook-pen-working-34202/" title="Mac">
        <div>

          <img src="http://lorempixel.com/400/200" alt="Mac">
          <h2>A Mac Lovers Paradise</h2>
        </div>
      </a>
    </div>

   
      </div>
</body>
/*! ==========================================================================
    GRIDLEX
    Just a Flexbox Grid System
========================================================================== */

[class*="grid"] {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  margin: 0 -0.5rem;
}

.col,
[class*="col-"] {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
}

.col {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0%;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
}

.grid.col,
.grid[class*="col-"] {
  margin: 0;
  padding: 0;
}


/************************
    HELPERS SUFFIXES
*************************/

[class*="grid-"][class*="-noGutter"] {
  margin: 0;
}

[class*="grid-"][class*="-noGutter"] > [class*="col"] {
  padding: 0;
}

[class*="grid-"][class*="-center"] {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

[class*="grid-"][class*="-right"] {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
  margin-left: auto;
}

[class*="grid-"][class*="-top"] {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  -ms-grid-row-align: flex-start;
  align-items: flex-start;
}

[class*="grid-"][class*="-middle"] {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

[class*="grid-"][class*="-bottom"] {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  -ms-grid-row-align: flex-end;
  align-items: flex-end;
}

[class*="grid-"][class*="-reverse"] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

[class*="grid-"][class*="-column"] {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

[class*="grid-"][class*="-column"] > [class*="col-"] {
  -webkit-flex-basis: auto;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}

[class*="grid-"][class*="-column-reverse"] {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

[class*="grid-"][class*="-spaceBetween"] {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

[class*="grid-"][class*="-spaceAround"] {
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

[class*="grid-"][class*="-equalHeight"] > [class*="col"] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

[class*="grid-"][class*="-noBottom"] > [class*="col"] {
  padding-bottom: 0;
}

[class*="col-"][class*="-top"] {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

[class*="col-"][class*="-middle"] {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

[class*="col-"][class*="-bottom"] {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

[class*="col-"][class*="-first"] {
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
}

[class*="col-"][class*="-last"] {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}


/************************
    GRID BY NUMBER
*************************/

[class*="grid-1"] > .col,
[class*="grid-1"] > [class*='col-'] {
  -webkit-flex-basis: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
}

[class*="grid-2"] > .col,
[class*="grid-2"] > [class*='col-'] {
  -webkit-flex-basis: 50%;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}

[class*="grid-3"] > .col,
[class*="grid-3"] > [class*='col-'] {
  -webkit-flex-basis: 33.33333333%;
  -ms-flex-preferred-size: 33.33333333%;
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}

[class*="grid-4"] > .col,
[class*="grid-4"] > [class*='col-'] {
  -webkit-flex-basis: 25%;
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%;
}

[class*="grid-5"] > .col,
[class*="grid-5"] > [class*='col-'] {
  -webkit-flex-basis: 20%;
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  max-width: 20%;
}

[class*="grid-6"] > .col,
[class*="grid-6"] > [class*='col-'] {
  -webkit-flex-basis: 16.66666667%;
  -ms-flex-preferred-size: 16.66666667%;
  flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}

[class*="grid-7"] > .col,
[class*="grid-7"] > [class*='col-'] {
  -webkit-flex-basis: 14.28571429%;
  -ms-flex-preferred-size: 14.28571429%;
  flex-basis: 14.28571429%;
  max-width: 14.28571429%;
}

[class*="grid-8"] > .col,
[class*="grid-8"] > [class*='col-'] {
  -webkit-flex-basis: 12.5%;
  -ms-flex-preferred-size: 12.5%;
  flex-basis: 12.5%;
  max-width: 12.5%;
}

[class*="grid-9"] > .col,
[class*="grid-9"] > [class*='col-'] {
  -webkit-flex-basis: 11.11111111%;
  -ms-flex-preferred-size: 11.11111111%;
  flex-basis: 11.11111111%;
  max-width: 11.11111111%;
}

[class*="grid-10"] > .col,
[class*="grid-10"] > [class*='col-'] {
  -webkit-flex-basis: 10%;
  -ms-flex-preferred-size: 10%;
  flex-basis: 10%;
  max-width: 10%;
}

[class*="grid-11"] > .col,
[class*="grid-10"] > [class*='col-'] {
  -webkit-flex-basis: 9.09090909%;
  -ms-flex-preferred-size: 9.09090909%;
  flex-basis: 9.09090909%;
  max-width: 9.09090909%;
}

[class*="grid-12"] > .col,
[class*="grid-11"] > [class*='col-'] {
  -webkit-flex-basis: 8.33333333%;
  -ms-flex-preferred-size: 8.33333333%;
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}

@media screen and (max-width: 80em) {
  [class*="_lg-1"] > .col,
  [class*="_lg-1"] > [class*='col-'] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  [class*="_lg-2"] > .col,
  [class*="_lg-2"] > [class*='col-'] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  [class*="_lg-3"] > .col,
  [class*="_lg-3"] > [class*='col-'] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  [class*="_lg-4"] > .col,
  [class*="_lg-4"] > [class*='col-'] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  [class*="_lg-5"] > .col,
  [class*="_lg-5"] > [class*='col-'] {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    max-width: 20%;
  }
  [class*="_lg-6"] > .col,
  [class*="_lg-6"] > [class*='col-'] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  [class*="_lg-7"] > .col,
  [class*="_lg-7"] > [class*='col-'] {
    -webkit-flex-basis: 14.28571429%;
    -ms-flex-preferred-size: 14.28571429%;
    flex-basis: 14.28571429%;
    max-width: 14.28571429%;
  }
  [class*="_lg-8"] > .col,
  [class*="_lg-8"] > [class*='col-'] {
    -webkit-flex-basis: 12.5%;
    -ms-flex-preferred-size: 12.5%;
    flex-basis: 12.5%;
    max-width: 12.5%;
  }
  [class*="_lg-9"] > .col,
  [class*="_lg-9"] > [class*='col-'] {
    -webkit-flex-basis: 11.11111111%;
    -ms-flex-preferred-size: 11.11111111%;
    flex-basis: 11.11111111%;
    max-width: 11.11111111%;
  }
  [class*="_lg-10"] > .col,
  [class*="_lg-10"] > [class*='col-'] {
    -webkit-flex-basis: 10%;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
    max-width: 10%;
  }
  [class*="_lg-11"] > .col,
  [class*="_lg-10"] > [class*='col-'] {
    -webkit-flex-basis: 9.09090909%;
    -ms-flex-preferred-size: 9.09090909%;
    flex-basis: 9.09090909%;
    max-width: 9.09090909%;
  }
  [class*="_lg-12"] > .col,
  [class*="_lg-11"] > [class*='col-'] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
}

@media screen and (max-width: 64em) {
  [class*="_md-1"] > .col,
  [class*="_md-1"] > [class*='col-'] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  [class*="_md-2"] > .col,
  [class*="_md-2"] > [class*='col-'] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  [class*="_md-3"] > .col,
  [class*="_md-3"] > [class*='col-'] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  [class*="_md-4"] > .col,
  [class*="_md-4"] > [class*='col-'] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  [class*="_md-5"] > .col,
  [class*="_md-5"] > [class*='col-'] {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    max-width: 20%;
  }
  [class*="_md-6"] > .col,
  [class*="_md-6"] > [class*='col-'] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  [class*="_md-7"] > .col,
  [class*="_md-7"] > [class*='col-'] {
    -webkit-flex-basis: 14.28571429%;
    -ms-flex-preferred-size: 14.28571429%;
    flex-basis: 14.28571429%;
    max-width: 14.28571429%;
  }
  [class*="_md-8"] > .col,
  [class*="_md-8"] > [class*='col-'] {
    -webkit-flex-basis: 12.5%;
    -ms-flex-preferred-size: 12.5%;
    flex-basis: 12.5%;
    max-width: 12.5%;
  }
  [class*="_md-9"] > .col,
  [class*="_md-9"] > [class*='col-'] {
    -webkit-flex-basis: 11.11111111%;
    -ms-flex-preferred-size: 11.11111111%;
    flex-basis: 11.11111111%;
    max-width: 11.11111111%;
  }
  [class*="_md-10"] > .col,
  [class*="_md-10"] > [class*='col-'] {
    -webkit-flex-basis: 10%;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
    max-width: 10%;
  }
  [class*="_md-11"] > .col,
  [class*="_md-10"] > [class*='col-'] {
    -webkit-flex-basis: 9.09090909%;
    -ms-flex-preferred-size: 9.09090909%;
    flex-basis: 9.09090909%;
    max-width: 9.09090909%;
  }
  [class*="_md-12"] > .col,
  [class*="_md-11"] > [class*='col-'] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
}

@media screen and (max-width: 48em) {
  [class*="_sm-1"] > .col,
  [class*="_sm-1"] > [class*='col-'] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  [class*="_sm-2"] > .col,
  [class*="_sm-2"] > [class*='col-'] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  [class*="_sm-3"] > .col,
  [class*="_sm-3"] > [class*='col-'] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  [class*="_sm-4"] > .col,
  [class*="_sm-4"] > [class*='col-'] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  [class*="_sm-5"] > .col,
  [class*="_sm-5"] > [class*='col-'] {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    max-width: 20%;
  }
  [class*="_sm-6"] > .col,
  [class*="_sm-6"] > [class*='col-'] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  [class*="_sm-7"] > .col,
  [class*="_sm-7"] > [class*='col-'] {
    -webkit-flex-basis: 14.28571429%;
    -ms-flex-preferred-size: 14.28571429%;
    flex-basis: 14.28571429%;
    max-width: 14.28571429%;
  }
  [class*="_sm-8"] > .col,
  [class*="_sm-8"] > [class*='col-'] {
    -webkit-flex-basis: 12.5%;
    -ms-flex-preferred-size: 12.5%;
    flex-basis: 12.5%;
    max-width: 12.5%;
  }
  [class*="_sm-9"] > .col,
  [class*="_sm-9"] > [class*='col-'] {
    -webkit-flex-basis: 11.11111111%;
    -ms-flex-preferred-size: 11.11111111%;
    flex-basis: 11.11111111%;
    max-width: 11.11111111%;
  }
  [class*="_sm-10"] > .col,
  [class*="_sm-10"] > [class*='col-'] {
    -webkit-flex-basis: 10%;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
    max-width: 10%;
  }
  [class*="_sm-11"] > .col,
  [class*="_sm-10"] > [class*='col-'] {
    -webkit-flex-basis: 9.09090909%;
    -ms-flex-preferred-size: 9.09090909%;
    flex-basis: 9.09090909%;
    max-width: 9.09090909%;
  }
  [class*="_sm-12"] > .col,
  [class*="_sm-11"] > [class*='col-'] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
}

@media screen and (max-width: 35.5em) {
  [class*="_xs-1"] > .col,
  [class*="_xs-1"] > [class*='col-'] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  [class*="_xs-2"] > .col,
  [class*="_xs-2"] > [class*='col-'] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  [class*="_xs-3"] > .col,
  [class*="_xs-3"] > [class*='col-'] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  [class*="_xs-4"] > .col,
  [class*="_xs-4"] > [class*='col-'] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  [class*="_xs-5"] > .col,
  [class*="_xs-5"] > [class*='col-'] {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    max-width: 20%;
  }
  [class*="_xs-6"] > .col,
  [class*="_xs-6"] > [class*='col-'] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  [class*="_xs-7"] > .col,
  [class*="_xs-7"] > [class*='col-'] {
    -webkit-flex-basis: 14.28571429%;
    -ms-flex-preferred-size: 14.28571429%;
    flex-basis: 14.28571429%;
    max-width: 14.28571429%;
  }
  [class*="_xs-8"] > .col,
  [class*="_xs-8"] > [class*='col-'] {
    -webkit-flex-basis: 12.5%;
    -ms-flex-preferred-size: 12.5%;
    flex-basis: 12.5%;
    max-width: 12.5%;
  }
  [class*="_xs-9"] > .col,
  [class*="_xs-9"] > [class*='col-'] {
    -webkit-flex-basis: 11.11111111%;
    -ms-flex-preferred-size: 11.11111111%;
    flex-basis: 11.11111111%;
    max-width: 11.11111111%;
  }
  [class*="_xs-10"] > .col,
  [class*="_xs-10"] > [class*='col-'] {
    -webkit-flex-basis: 10%;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
    max-width: 10%;
  }
  [class*="_xs-11"] > .col,
  [class*="_xs-10"] > [class*='col-'] {
    -webkit-flex-basis: 9.09090909%;
    -ms-flex-preferred-size: 9.09090909%;
    flex-basis: 9.09090909%;
    max-width: 9.09090909%;
  }
  [class*="_xs-12"] > .col,
  [class*="_xs-11"] > [class*='col-'] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
}


/************************
    COLS SIZES
*************************/

[class*='grid'] > [class*="col-1"] {
  -webkit-flex-basis: 8.33333333%;
  -ms-flex-preferred-size: 8.33333333%;
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}

[class*='grid'] > [class*="col-2"] {
  -webkit-flex-basis: 16.66666667%;
  -ms-flex-preferred-size: 16.66666667%;
  flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}

[class*='grid'] > [class*="col-3"] {
  -webkit-flex-basis: 25%;
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%;
}

[class*='grid'] > [class*="col-4"] {
  -webkit-flex-basis: 33.33333333%;
  -ms-flex-preferred-size: 33.33333333%;
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}

[class*='grid'] > [class*="col-5"] {
  -webkit-flex-basis: 41.66666667%;
  -ms-flex-preferred-size: 41.66666667%;
  flex-basis: 41.66666667%;
  max-width: 41.66666667%;
}

[class*='grid'] > [class*="col-6"] {
  -webkit-flex-basis: 50%;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}

[class*='grid'] > [class*="col-7"] {
  -webkit-flex-basis: 58.33333333%;
  -ms-flex-preferred-size: 58.33333333%;
  flex-basis: 58.33333333%;
  max-width: 58.33333333%;
}

[class*='grid'] > [class*="col-8"] {
  -webkit-flex-basis: 66.66666667%;
  -ms-flex-preferred-size: 66.66666667%;
  flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}

[class*='grid'] > [class*="col-9"] {
  -webkit-flex-basis: 75%;
  -ms-flex-preferred-size: 75%;
  flex-basis: 75%;
  max-width: 75%;
}

[class*='grid'] > [class*="col-10"] {
  -webkit-flex-basis: 83.33333333%;
  -ms-flex-preferred-size: 83.33333333%;
  flex-basis: 83.33333333%;
  max-width: 83.33333333%;
}

[class*='grid'] > [class*="col-11"] {
  -webkit-flex-basis: 91.66666667%;
  -ms-flex-preferred-size: 91.66666667%;
  flex-basis: 91.66666667%;
  max-width: 91.66666667%;
}

[class*='grid'] > [class*="col-12"] {
  -webkit-flex-basis: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
}

[class*="grid"] > [push-left*="off-0"] {
  margin-left: 0;
}

[class*="grid"] > [push-left*="off-1"] {
  margin-left: 8.33333333%;
}

[class*="grid"] > [push-left*="off-2"] {
  margin-left: 16.66666667%;
}

[class*="grid"] > [push-left*="off-3"] {
  margin-left: 25%;
}

[class*="grid"] > [push-left*="off-4"] {
  margin-left: 33.33333333%;
}

[class*="grid"] > [push-left*="off-5"] {
  margin-left: 41.66666667%;
}

[class*="grid"] > [push-left*="off-6"] {
  margin-left: 50%;
}

[class*="grid"] > [push-left*="off-6"] {
  margin-left: 50%;
}

[class*="grid"] > [push-left*="off-7"] {
  margin-left: 58.33333333%;
}

[class*="grid"] > [push-left*="off-8"] {
  margin-left: 66.66666667%;
}

[class*="grid"] > [push-left*="off-9"] {
  margin-left: 75%;
}

[class*="grid"] > [push-left*="off-10"] {
  margin-left: 83.33333333%;
}

[class*="grid"] > [push-left*="off-11"] {
  margin-left: 91.66666667%;
}

[class*="grid"] > [push-right*="off-0"] {
  margin-right: 0;
}

[class*="grid"] > [push-right*="off-1"] {
  margin-right: 8.33333333%;
}

[class*="grid"] > [push-right*="off-2"] {
  margin-right: 16.66666667%;
}

[class*="grid"] > [push-right*="off-3"] {
  margin-right: 25%;
}

[class*="grid"] > [push-right*="off-4"] {
  margin-right: 33.33333333%;
}

[class*="grid"] > [push-right*="off-5"] {
  margin-right: 41.66666667%;
}

[class*="grid"] > [push-right*="off-6"] {
  margin-right: 50%;
}

[class*="grid"] > [push-right*="off-6"] {
  margin-right: 50%;
}

[class*="grid"] > [push-right*="off-7"] {
  margin-right: 58.33333333%;
}

[class*="grid"] > [push-right*="off-8"] {
  margin-right: 66.66666667%;
}

[class*="grid"] > [push-right*="off-9"] {
  margin-right: 75%;
}

[class*="grid"] > [push-right*="off-10"] {
  margin-right: 83.33333333%;
}

[class*="grid"] > [push-right*="off-11"] {
  margin-right: 91.66666667%;
}

@media screen and (max-width: 80em) {
  [class*='grid'] > [class*="_lg-1"] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  [class*='grid'] > [class*="_lg-2"] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  [class*='grid'] > [class*="_lg-3"] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  [class*='grid'] > [class*="_lg-4"] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  [class*='grid'] > [class*="_lg-5"] {
    -webkit-flex-basis: 41.66666667%;
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  [class*='grid'] > [class*="_lg-6"] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  [class*='grid'] > [class*="_lg-7"] {
    -webkit-flex-basis: 58.33333333%;
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  [class*='grid'] > [class*="_lg-8"] {
    -webkit-flex-basis: 66.66666667%;
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  [class*='grid'] > [class*="_lg-9"] {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
  [class*='grid'] > [class*="_lg-10"] {
    -webkit-flex-basis: 83.33333333%;
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  [class*='grid'] > [class*="_lg-11"] {
    -webkit-flex-basis: 91.66666667%;
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  [class*='grid'] > [class*="_lg-12"] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  [class*="grid"] > [push-left*="_lg-0"] {
    margin-left: 0;
  }
  [class*="grid"] > [push-left*="_lg-1"] {
    margin-left: 8.33333333%;
  }
  [class*="grid"] > [push-left*="_lg-2"] {
    margin-left: 16.66666667%;
  }
  [class*="grid"] > [push-left*="_lg-3"] {
    margin-left: 25%;
  }
  [class*="grid"] > [push-left*="_lg-4"] {
    margin-left: 33.33333333%;
  }
  [class*="grid"] > [push-left*="_lg-5"] {
    margin-left: 41.66666667%;
  }
  [class*="grid"] > [push-left*="_lg-6"] {
    margin-left: 50%;
  }
  [class*="grid"] > [push-left*="_lg-6"] {
    margin-left: 50%;
  }
  [class*="grid"] > [push-left*="_lg-7"] {
    margin-left: 58.33333333%;
  }
  [class*="grid"] > [push-left*="_lg-8"] {
    margin-left: 66.66666667%;
  }
  [class*="grid"] > [push-left*="_lg-9"] {
    margin-left: 75%;
  }
  [class*="grid"] > [push-left*="_lg-10"] {
    margin-left: 83.33333333%;
  }
  [class*="grid"] > [push-left*="_lg-11"] {
    margin-left: 91.66666667%;
  }
  [class*="grid"] > [push-right*="_lg-0"] {
    margin-right: 0;
  }
  [class*="grid"] > [push-right*="_lg-1"] {
    margin-right: 8.33333333%;
  }
  [class*="grid"] > [push-right*="_lg-2"] {
    margin-right: 16.66666667%;
  }
  [class*="grid"] > [push-right*="_lg-3"] {
    margin-right: 25%;
  }
  [class*="grid"] > [push-right*="_lg-4"] {
    margin-right: 33.33333333%;
  }
  [class*="grid"] > [push-right*="_lg-5"] {
    margin-right: 41.66666667%;
  }
  [class*="grid"] > [push-right*="_lg-6"] {
    margin-right: 50%;
  }
  [class*="grid"] > [push-right*="_lg-6"] {
    margin-right: 50%;
  }
  [class*="grid"] > [push-right*="_lg-7"] {
    margin-right: 58.33333333%;
  }
  [class*="grid"] > [push-right*="_lg-8"] {
    margin-right: 66.66666667%;
  }
  [class*="grid"] > [push-right*="_lg-9"] {
    margin-right: 75%;
  }
  [class*="grid"] > [push-right*="_lg-10"] {
    margin-right: 83.33333333%;
  }
  [class*="grid"] > [push-right*="_lg-11"] {
    margin-right: 91.66666667%;
  }
}

@media screen and (max-width: 64em) {
  [class*='grid'] > [class*="_md-1"] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  [class*='grid'] > [class*="_md-2"] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  [class*='grid'] > [class*="_md-3"] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  [class*='grid'] > [class*="_md-4"] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  [class*='grid'] > [class*="_md-5"] {
    -webkit-flex-basis: 41.66666667%;
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  [class*='grid'] > [class*="_md-6"] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  [class*='grid'] > [class*="_md-7"] {
    -webkit-flex-basis: 58.33333333%;
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  [class*='grid'] > [class*="_md-8"] {
    -webkit-flex-basis: 66.66666667%;
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  [class*='grid'] > [class*="_md-9"] {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
  [class*='grid'] > [class*="_md-10"] {
    -webkit-flex-basis: 83.33333333%;
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  [class*='grid'] > [class*="_md-11"] {
    -webkit-flex-basis: 91.66666667%;
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  [class*='grid'] > [class*="_md-12"] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  [class*="grid"] > [push-left*="_md-0"] {
    margin-left: 0;
  }
  [class*="grid"] > [push-left*="_md-1"] {
    margin-left: 8.33333333%;
  }
  [class*="grid"] > [push-left*="_md-2"] {
    margin-left: 16.66666667%;
  }
  [class*="grid"] > [push-left*="_md-3"] {
    margin-left: 25%;
  }
  [class*="grid"] > [push-left*="_md-4"] {
    margin-left: 33.33333333%;
  }
  [class*="grid"] > [push-left*="_md-5"] {
    margin-left: 41.66666667%;
  }
  [class*="grid"] > [push-left*="_md-6"] {
    margin-left: 50%;
  }
  [class*="grid"] > [push-left*="_md-6"] {
    margin-left: 50%;
  }
  [class*="grid"] > [push-left*="_md-7"] {
    margin-left: 58.33333333%;
  }
  [class*="grid"] > [push-left*="_md-8"] {
    margin-left: 66.66666667%;
  }
  [class*="grid"] > [push-left*="_md-9"] {
    margin-left: 75%;
  }
  [class*="grid"] > [push-left*="_md-10"] {
    margin-left: 83.33333333%;
  }
  [class*="grid"] > [push-left*="_md-11"] {
    margin-left: 91.66666667%;
  }
  [class*="grid"] > [push-right*="_md-0"] {
    margin-right: 0;
  }
  [class*="grid"] > [push-right*="_md-1"] {
    margin-right: 8.33333333%;
  }
  [class*="grid"] > [push-right*="_md-2"] {
    margin-right: 16.66666667%;
  }
  [class*="grid"] > [push-right*="_md-3"] {
    margin-right: 25%;
  }
  [class*="grid"] > [push-right*="_md-4"] {
    margin-right: 33.33333333%;
  }
  [class*="grid"] > [push-right*="_md-5"] {
    margin-right: 41.66666667%;
  }
  [class*="grid"] > [push-right*="_md-6"] {
    margin-right: 50%;
  }
  [class*="grid"] > [push-right*="_md-6"] {
    margin-right: 50%;
  }
  [class*="grid"] > [push-right*="_md-7"] {
    margin-right: 58.33333333%;
  }
  [class*="grid"] > [push-right*="_md-8"] {
    margin-right: 66.66666667%;
  }
  [class*="grid"] > [push-right*="_md-9"] {
    margin-right: 75%;
  }
  [class*="grid"] > [push-right*="_md-10"] {
    margin-right: 83.33333333%;
  }
  [class*="grid"] > [push-right*="_md-11"] {
    margin-right: 91.66666667%;
  }
}

@media screen and (max-width: 48em) {
  [class*='grid'] > [class*="_sm-1"] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  [class*='grid'] > [class*="_sm-2"] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  [class*='grid'] > [class*="_sm-3"] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  [class*='grid'] > [class*="_sm-4"] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  [class*='grid'] > [class*="_sm-5"] {
    -webkit-flex-basis: 41.66666667%;
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  [class*='grid'] > [class*="_sm-6"] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  [class*='grid'] > [class*="_sm-7"] {
    -webkit-flex-basis: 58.33333333%;
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  [class*='grid'] > [class*="_sm-8"] {
    -webkit-flex-basis: 66.66666667%;
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  [class*='grid'] > [class*="_sm-9"] {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
  [class*='grid'] > [class*="_sm-10"] {
    -webkit-flex-basis: 83.33333333%;
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  [class*='grid'] > [class*="_sm-11"] {
    -webkit-flex-basis: 91.66666667%;
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  [class*='grid'] > [class*="_sm-12"] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  [class*="grid"] > [push-left*="_sm-0"] {
    margin-left: 0;
  }
  [class*="grid"] > [push-left*="_sm-1"] {
    margin-left: 8.33333333%;
  }
  [class*="grid"] > [push-left*="_sm-2"] {
    margin-left: 16.66666667%;
  }
  [class*="grid"] > [push-left*="_sm-3"] {
    margin-left: 25%;
  }
  [class*="grid"] > [push-left*="_sm-4"] {
    margin-left: 33.33333333%;
  }
  [class*="grid"] > [push-left*="_sm-5"] {
    margin-left: 41.66666667%;
  }
  [class*="grid"] > [push-left*="_sm-6"] {
    margin-left: 50%;
  }
  [class*="grid"] > [push-left*="_sm-6"] {
    margin-left: 50%;
  }
  [class*="grid"] > [push-left*="_sm-7"] {
    margin-left: 58.33333333%;
  }
  [class*="grid"] > [push-left*="_sm-8"] {
    margin-left: 66.66666667%;
  }
  [class*="grid"] > [push-left*="_sm-9"] {
    margin-left: 75%;
  }
  [class*="grid"] > [push-left*="_sm-10"] {
    margin-left: 83.33333333%;
  }
  [class*="grid"] > [push-left*="_sm-11"] {
    margin-left: 91.66666667%;
  }
  [class*="grid"] > [push-right*="_sm-0"] {
    margin-right: 0;
  }
  [class*="grid"] > [push-right*="_sm-1"] {
    margin-right: 8.33333333%;
  }
  [class*="grid"] > [push-right*="_sm-2"] {
    margin-right: 16.66666667%;
  }
  [class*="grid"] > [push-right*="_sm-3"] {
    margin-right: 25%;
  }
  [class*="grid"] > [push-right*="_sm-4"] {
    margin-right: 33.33333333%;
  }
  [class*="grid"] > [push-right*="_sm-5"] {
    margin-right: 41.66666667%;
  }
  [class*="grid"] > [push-right*="_sm-6"] {
    margin-right: 50%;
  }
  [class*="grid"] > [push-right*="_sm-6"] {
    margin-right: 50%;
  }
  [class*="grid"] > [push-right*="_sm-7"] {
    margin-right: 58.33333333%;
  }
  [class*="grid"] > [push-right*="_sm-8"] {
    margin-right: 66.66666667%;
  }
  [class*="grid"] > [push-right*="_sm-9"] {
    margin-right: 75%;
  }
  [class*="grid"] > [push-right*="_sm-10"] {
    margin-right: 83.33333333%;
  }
  [class*="grid"] > [push-right*="_sm-11"] {
    margin-right: 91.66666667%;
  }
}

@media screen and (max-width: 35.5em) {
  [class*='grid'] > [class*="_xs-1"] {
    -webkit-flex-basis: 8.33333333%;
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  [class*='grid'] > [class*="_xs-2"] {
    -webkit-flex-basis: 16.66666667%;
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  [class*='grid'] > [class*="_xs-3"] {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  [class*='grid'] > [class*="_xs-4"] {
    -webkit-flex-basis: 33.33333333%;
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  [class*='grid'] > [class*="_xs-5"] {
    -webkit-flex-basis: 41.66666667%;
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  [class*='grid'] > [class*="_xs-6"] {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  [class*='grid'] > [class*="_xs-7"] {
    -webkit-flex-basis: 58.33333333%;
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  [class*='grid'] > [class*="_xs-8"] {
    -webkit-flex-basis: 66.66666667%;
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  [class*='grid'] > [class*="_xs-9"] {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
  [class*='grid'] > [class*="_xs-10"] {
    -webkit-flex-basis: 83.33333333%;
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  [class*='grid'] > [class*="_xs-11"] {
    -webkit-flex-basis: 91.66666667%;
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  [class*='grid'] > [class*="_xs-12"] {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  [class*="grid"] > [push-left*="_xs-0"] {
    margin-left: 0;
  }
  [class*="grid"] > [push-left*="_xs-1"] {
    margin-left: 8.33333333%;
  }
  [class*="grid"] > [push-left*="_xs-2"] {
    margin-left: 16.66666667%;
  }
  [class*="grid"] > [push-left*="_xs-3"] {
    margin-left: 25%;
  }
  [class*="grid"] > [push-left*="_xs-4"] {
    margin-left: 33.33333333%;
  }
  [class*="grid"] > [push-left*="_xs-5"] {
    margin-left: 41.66666667%;
  }
  [class*="grid"] > [push-left*="_xs-6"] {
    margin-left: 50%;
  }
  [class*="grid"] > [push-left*="_xs-6"] {
    margin-left: 50%;
  }
  [class*="grid"] > [push-left*="_xs-7"] {
    margin-left: 58.33333333%;
  }
  [class*="grid"] > [push-left*="_xs-8"] {
    margin-left: 66.66666667%;
  }
  [class*="grid"] > [push-left*="_xs-9"] {
    margin-left: 75%;
  }
  [class*="grid"] > [push-left*="_xs-10"] {
    margin-left: 83.33333333%;
  }
  [class*="grid"] > [push-left*="_xs-11"] {
    margin-left: 91.66666667%;
  }
  [class*="grid"] > [push-right*="_xs-0"] {
    margin-right: 0;
  }
  [class*="grid"] > [push-right*="_xs-1"] {
    margin-right: 8.33333333%;
  }
  [class*="grid"] > [push-right*="_xs-2"] {
    margin-right: 16.66666667%;
  }
  [class*="grid"] > [push-right*="_xs-3"] {
    margin-right: 25%;
  }
  [class*="grid"] > [push-right*="_xs-4"] {
    margin-right: 33.33333333%;
  }
  [class*="grid"] > [push-right*="_xs-5"] {
    margin-right: 41.66666667%;
  }
  [class*="grid"] > [push-right*="_xs-6"] {
    margin-right: 50%;
  }
  [class*="grid"] > [push-right*="_xs-6"] {
    margin-right: 50%;
  }
  [class*="grid"] > [push-right*="_xs-7"] {
    margin-right: 58.33333333%;
  }
  [class*="grid"] > [push-right*="_xs-8"] {
    margin-right: 66.66666667%;
  }
  [class*="grid"] > [push-right*="_xs-9"] {
    margin-right: 75%;
  }
  [class*="grid"] > [push-right*="_xs-10"] {
    margin-right: 83.33333333%;
  }
  [class*="grid"] > [push-right*="_xs-11"] {
    margin-right: 91.66666667%;
  }
}


/*End Gridlex*/

img {
  max-width: 100%;
  height: auto;
}

h2 {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-size: 3em;
  -ms-hyphens: auto;
  text-align: center;
}

h2 a {
  color: #333;
  text-decoration: none;
}

.thumbnail {
  border: solid 1px #D4D4D4;
}

.thumbnail:hover {
  background: #ECEDEF;
  cursor: pointer;
}


/*HTML5 Method */

a.box:-webkit-any-link {
  text-decoration: none;
  /*Stops text link in Chrome from having decoration */
}

.box {
  display: block;
}

.box h2 {
  color: #333;
  text-decoration: none;
}