body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  background-color: #9cb8b3;
}
a {
text-decoration: none;
}

.row {
  width: 1024px;
  margin: 300px auto;
}

/* Mighty Hover */


ul.items {
  width: 100%;
  display: table;
}
ul.items li {
  float: left;
  width: 31.33%;
  text-align: center;
  margin-right: 3%;
  display: block;
}
ul.items li figure {
  position: relative;
  overflow: hidden;
  background: #EFEDCE;
  text-align: center;
  /* border-bottom: 1px solid #87d3b7; */
  width: 100%;
}
ul.items li figure img {
  width: 100%;
  -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s;
  transition: transform 0.3s ease-out, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s;
}
ul.items li a {
  display: block;
  width: 100%;
  height: 100%;
}
ul.items li a:hover .description {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transform: translate(0, 0);
}
ul.items li a:hover .title {
  -webkit-transform: translate(0, -73px);
  -moz-transform: translate(0, -73px);
  transform: translate(0, -73px);
}
ul.items li a:hover img {
  opacity: 0.3;
  -webkit-transform: translate(0, -30px);
  -moz-transform: translate(0, -30px);
  transform: translate(0, -30px);
}
ul.items li:last-of-type {
  margin-right: 0px;
}

h1.title {
  display: table-cell;
  width: 100%;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: rgba(0,0,0,.5);
  line-height: 2;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  bottom: -10;
  left: 0;
  right: 0;
  z-index: 3;
  background: #EFEDCE;
  padding: 0 0px;
  display: block;
  -webkit-transition: -webkit-transform 0.4s, color 0.3s;
  -moz-transition: -moz-transform 0.4s, color 0.3s;
  transition: transform 0.4s, color 0.3s;
  border-top: 4px solid rgba(0,0,0,.5);
}
h1.title:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100px;
  background: #505048;
  width: 100%;
}

.description {
  display: table-cell;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  transform: translate(0, 100%);
  z-index: 4;
  -webkit-transition: -webkit-transform 0.25s;
  -moz-transition: -moz-transform 0.25s;
  transition: transform 0.25s;
}
.description p {
  display: block;
  height: 65px;
  overflow: hidden;
  color: #a8a8a8;
  margin: 0;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  padding: 7px;
}