/****
    GRG RESPONSIVE GRID, goals:
    1-2-3-4 column Responsive Grid with varying (but PRESET) height elements. Originally I was thinking "no javascript" but nth-next-selector is not something readily available in CSS. So now the strategy is to just do one calculation every time the # of columns in the vcmp_gridgallery changes, and reapply CSS styles. No heights or offsets are calculated in Javascript.

   Edit:
   There's no need to pre-determine which indecies are "tall", javascript simply interprets the CSS class "tall" now.

Technical Description:

This is a vcmp_gridgallery of inline-block elements spanning 100/50/33.333/25% of their container. By dropping font-size to 0 and bringing it back, spaces in the HTML don't alter the spacing.
To make the tall elements, the bottom is pushed out using a negative margin-bottom. Javascript determines the elements below this one in the vcmp_gridgallery, and applies "shift{1-5}" depending on the amount of "tall" tiles above each tile.

   See bighuman.com for the old javascript version.
****/
.vcmp_gridgallery {
  margin: 0 auto;
  font-size: 0;
  text-align: left;
}
.vcmp_griditem {
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  line-height: 0;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  -moz-transition: -moz-transform 0.2s ease-out;
  -o-transition: -o-transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
/* 2-GRID */
@media screen and (min-width: 600px) {
  .vcmp_griditem {
    width: 100%;
    max-height: none;
  }
  .vcmp_griditem > a {
    height: 100%;
  }
  .vcmp_griditem.tall {
    margin-bottom: -25.1%;
  }
  .vcmp_griditem.tall.shift1 {
    -webkit-transform: translate(0%, 33.33333%);
    -moz-transform: translate(0%, 33.33333%);
    -ms-transform: translate(0%, 33.33333%);
    -o-transform: translate(0%, 33.33333%);
    transform: translate(0%, 33.33333%);
  }
  .vcmp_griditem.tall.shift2 {
    -webkit-transform: translate(0%, 66.666665%);
    -moz-transform: translate(0%, 66.666665%);
    -ms-transform: translate(0%, 66.666665%);
    -o-transform: translate(0%, 66.666665%);
    transform: translate(0%, 66.666665%);
  }
  .vcmp_griditem.tall.shift3 {
    -webkit-transform: translate(0%, 100%);
    -moz-transform: translate(0%, 100%);
    -ms-transform: translate(0%, 100%);
    -o-transform: translate(0%, 100%);
    transform: translate(0%, 100%);
  }
  .vcmp_griditem.tall.shift4 {
    -webkit-transform: translate(0%, 133.33333%);
    -moz-transform: translate(0%, 133.33333%);
    -ms-transform: translate(0%, 133.33333%);
    -o-transform: translate(0%, 133.33333%);
    transform: translate(0%, 133.33333%);
  }
  .vcmp_griditem.tall.shift5 {
    -webkit-transform: translate(0%, 166.666665%);
    -moz-transform: translate(0%, 166.666665%);
    -ms-transform: translate(0%, 166.666665%);
    -o-transform: translate(0%, 166.666665%);
    transform: translate(0%, 166.666665%);
  }
  .vcmp_griditem.shift1 {
    -webkit-transform: translate(0%, 50%);
    -moz-transform: translate(0%, 50%);
    -ms-transform: translate(0%, 50%);
    -o-transform: translate(0%, 50%);
    transform: translate(0%, 50%);
  }
  .vcmp_griditem.shift2 {
    -webkit-transform: translate(0%, 100%);
    -moz-transform: translate(0%, 100%);
    -ms-transform: translate(0%, 100%);
    -o-transform: translate(0%, 100%);
    transform: translate(0%, 100%);
  }
  .vcmp_griditem.shift3 {
    -webkit-transform: translate(0%, 150%);
    -moz-transform: translate(0%, 150%);
    -ms-transform: translate(0%, 150%);
    -o-transform: translate(0%, 150%);
    transform: translate(0%, 150%);
  }
  .vcmp_griditem.shift4 {
    -webkit-transform: translate(0%, 200%);
    -moz-transform: translate(0%, 200%);
    -ms-transform: translate(0%, 200%);
    -o-transform: translate(0%, 200%);
    transform: translate(0%, 200%);
  }
  .vcmp_griditem.shift5 {
    -webkit-transform: translate(0%, 250%);
    -moz-transform: translate(0%, 250%);
    -ms-transform: translate(0%, 250%);
    -o-transform: translate(0%, 250%);
    transform: translate(0%, 250%);
  }
}
/* 3-GRID */
@media screen and (min-width: 900px) {
  .vcmp_griditem {
    width: 33.33332%;
  }
  .vcmp_griditem > a {
    height: 50%;
  }
  .vcmp_griditem.tall {
    margin-bottom: -16.7%;
  }
}
/* 4-GRID */
@media screen and (min-width: 1200px) {
  .vcmp_griditem {
    width: 25%;
	max-height: 300px;
    overflow: hidden;
  }
  .vcmp_griditem > a {
    height: 25%;
  }
  .vcmp_griditem.tall {
    margin-bottom: -12.6%;
  }
}
/*******
---- STYLE, HOVER EFFECTS AND SO FORTH
     EVERYTHING BELOW IS PURE CSS
    The rest of this was created for previous pens:
    Description on hover:
       http://codepen.io/tholex/pen/IxALf
    "Pespective" image hover effect:
       http://codepen.io/tholex/pen/gtEeq
********/
.vcmp_gridgallery h1,
.vcmp_gridgallery h2 {
  color: whiteSmoke;
  text-shadow: 1px 1px 2px black;
}
.vcmp_gridgallery h1 {
  font-family: "Gill Sans", sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  margin: 0.75em 0.75em 0.25em;
}
.vcmp_gridgallery h2 {
  font-family: "Gill Sans", sans-serif;
  font-weight: 200;
  margin-left: 1.5em;
  margin-top: 0.33em;
}
.vcmp_gridgallery a {
  color: #aaa;
  text-decoration: none;
}
.vcmp_hovercontent h1 {
  color: white !important;
  font-size: 1.5em !important;
  margin-top: 20%;
}
.vcmp_hovercontent h3 {
	color: #a1a1a1;
	font-size: 100%;
	font-weight: 100;
	line-height: 1;
	margin: 0 auto;
}
.vcmp_gridgallery {
  display: block;
}
.vcmp_griditem img {
  position: relative;
  z-index: 4;
  width: 100%;
  margin: 0 !important;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  /* This is what was making it slow! booooooo */
  -webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.2s ease-out;
  -moz-transition: opacity 0.3s ease-out, -moz-transform 0.2s ease-out;
  -o-transition: opacity 0.3s ease-out, -o-transform 0.2s ease-out;
  transition: opacity 0.3s ease-out, transform 0.2s ease-out;
}
.vcmp_griditem .vcmp_gridlink {
  display: block;
  height: 100%;
}
.vcmp_hovercontent {
  position: absolute;
  z-index: 5;
  font-family: "Helvetica", Arial, sans-serif;
  text-align: center;
  width: 100%;
  height: 100%;
  background: #222222;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  line-height: 24px;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -moz-transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);
  -o-transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);
  -webkit-transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);
  transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);
  -webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-out, -moz-transform 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-out, -o-transform 0.2s ease-in-out;
  transition: opacity 0.2s ease-out, transform 0.2s ease-in-out;
}
.vcmp_griditem .vcmp_gridlink:hover .vcmp_hovercontent {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  -o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}