.box {
  text-align:center;
  overflow:hidden;
  position:relative;
  box-shadow:0 0 3px rgba(0, 0, 0, 0.3);
}

.box img {
  width:100%;
  height:auto;
  position:relative;
  left:0;
  transition:all 0.3s ease 0s;
}

.box:hover img {
  left:100%;
  transform:scale(0.7) rotateZ(180deg);
}

.box .box-content {
  width:100%;
  height:100%;
  background:#696059;
  position:absolute;
  top:0;
  left:-100%;
  transform:scale(0.7) rotateZ(180deg);
  transition:all 0.3s ease 0s;
}

.box:hover .box-content {
  left:0;
  transform:scale(1) rotateZ(0deg);
}

.box .title {
  font-size:21px;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  border-bottom:1px solid #fff;
  padding-bottom:20px;
  margin-top:40px;
}

.box .description {
  font-size:14px;
  font-style:italic;
  color:#fff;
  padding:0 10px;
  margin:15px 0;
}

.box .read-more {
  display:block;
  width:100px;
  padding:7px 0;
  background:#ecdfbd;
  border-radius:10px 0 10px 0;
  font-size:14px;
  color:#484141;
  text-transform:capitalize;
  margin:0 auto;
  transition:all 0.3s ease 0s;
}

.box .read-more:hover {
  border-radius:0 10px 0 10px;
}

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

@media only screen and (max-width:360px) {
  .box .title {
    margin-top:10px;
    padding-bottom:8px;
  }
}