.box {
  position:relative;
  perspective:1000px;
}

.box .box-img {
  transform:rotateY(0);
  transition:all 0.50s ease-in-out 0s;
}

.box:hover .box-img {
  transform:rotateY(-90deg);
}

.box .box-img img {
  width:100%;
  height:auto;
}

.box .box-content {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  padding:60px 20px;
  text-align:center;
  background:rgba(0,0,0,0.7);
  transform:rotateY(90deg);
  transition:all 0.50s ease-in-out 0s;
}

.box:hover .box-content {
  transform:rotateY(0);
}

.box .title {
  font-size:20px;
  color:#fff;
  /*text-transform:uppercase;*/
  font-family:'Oxygen';
}

.box .description {
  font-size:13px;
  line-height:24px;
  color:#fff;
}

.box .title:after, .box .description:after {
  content:"";
  width:80%;
  display:block;
  border-bottom:1px solid #fff;
  margin:15px auto;
}

.box .social-links {
  margin:0;
  padding:0;
  list-style:none;
}

.box .social-links li {
  display:inline-block;
  margin:0 10px;
}

.box .social-links li a {
  font-size:20px;
  color:#a6a6a6;
}

.box .social-links li a:hover {
  text-decoration:none;
  color:#fff;
}

@media only screen and (max-width: 990px) {
  .box {
    margin-bottom:20px;
  }
}

@media only screen and (max-width: 479px) {
  .box .box-content {
    padding:20px;
  }
}