@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700&subset=latin,latin-ext);
.transition-mc,
.button.button-primary,
.item-cont a .item-content,
.item-cont a .item-content .text-cont,
.item-cont a figure:after {
  -webkit-transition: all 800ms ease-in-out;
  -o-transition: all 800ms ease-in-out;
  transition: all 800ms ease-in-out;
}

body {
  font-family: 'Inconsolata';
}

h3 {
  color: #2E343E;
  margin-bottom: 50px;
  font-size: 34px;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  display: inline-block;
}

h3:before,
h3:after {
  border-top: 1px solid #F5A623;
  display: block;
  height: 1px;
  content: " ";
  width: 90px;
  position: absolute;
  left: -110px;
  top: 50%;
}

h3:after {
  right: -103px;
  left: auto;
}

.item-cont {
  overflow: hidden;
  display: inline-block;
  margin-bottom: 30px;
}

.item-cont a {
  display: block;
  position: relative;
  color: #F5A623;
  border-color: #fff;
  font-size: 24px;
}

.item-cont a .item-content {
  position: absolute;
  width: 100%;
  cursor: pointer;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  opacity: 1;
}

.item-cont a .item-content:before {
  border-top: 1px solid;
  border-bottom: 1px solid;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  opacity: 0;
}

.item-cont a .item-content:after {
  border-left: 1px solid;
  border-right: 1px solid;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
  opacity: 0;
}

.item-cont a .item-content:before,
.item-cont a .item-content:after {
  border-color: #fff;
  position: absolute;
  top: 15px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
  transition: opacity 0.8s, transform 0.8s;
}

.item-cont a .item-content .text-cont {
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
  opacity: 0;
}

.item-cont a .item-content .align-content {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

.item-cont a figure {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}

.item-cont a figure:after {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  content: "";
  background-color: rgba(46, 52, 62, 0.8);
  opacity: 0;
}

.item-cont a figure img {
  max-width: 100%;
  height: auto;
  display: block;
}

.item-cont a:hover figure {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

.item-cont a:hover figure:after {
  opacity: 1;
}

.item-cont a:hover .item-content {
  opacity: 1;
}

.item-cont a:hover .item-content:before,
.item-cont a:hover .item-content:after {
  border-color: #fff;
}

.item-cont a:hover .item-content:before {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.item-cont a:hover .item-content:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.item-cont a:hover .item-content .text-cont {
  opacity: 1;
}