@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);

body{
  background: #323c3f;
  font-family: Roboto, veranda;
  padding-bottom: 4em;
}

.blog{
  position: relative;
  width: 22em;
  height: 30em;
  
  background: url(https://cache.desktopnexus.com/thumbseg/25/25727-bigthumbnail.jpg) no-repeat;
  background-size: 22em 30em;
  box-shadow: 3px 3px 20px rgba(0,0,0,0.5);
  margin: auto;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  overflow: hidden;
}
.blog *{
  position: relative;
  z-index: 2;
}
.blog:hover .color-overlay{
  background:rgba(74, 100, 114, 0.8);
}
.blog:hover .info{
  bottom: -3em;
  opacity: 1;
}
.blog, .color-overlay{
   border-radius: 0.7em;
}
.color-overlay{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  transition: 0.7s background;
  background: rgba(74, 100, 114, 0.3);
  z-index: 1;
}

.title-box{
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: 2em;
}
.title-box hr{
  margin-top: -0.4em;
  margin-bottom: 1em;
  width: 5em;
  height: 0.25em;
  box-sizing: content-box;
  border: none;
  background: #D0BC57;
}
h3{
   display: inline-block;
   font-weight: 500;
   letter-spacing: 2px;
   font-size: 1.4em;
   
   text-align: center;
}
.intro{
    width: 170px;
  margin: 0 auto;
  color: #fff;
  font-family: 'Droid Serif', serif;
  font-size: 13px;
  font-style: italic;
  line-height: 18px;
}


.info{
  font-family: 'Droid Serif', serif;
  font-size: 1.2em;
  color: #ddd;
  line-height: 1.1em;
  padding: 0 2em;
 
  position: relative;
  bottom: -4em;
  opacity: 0;
  background: transparent;
  transition: opacity 0.3s, bottom 0.3s;
  text-align: center;
}

.footer{
  display: inline-block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10em;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.9));
  border-radius:  0 0 0.7em 0.7em;
}

.footer > .icon-holder{
  position: absolute;
  bottom: 0;
  height: 3em;
  width: 100%;
  display: inline-block;
  font-size: 1.2em;
  padding: 0 2em;
  
}

.icon-holder i{
  
  color: #D0BC57;
}

.icon-holder span, h3{
  color: #aCcff0;
}

space{
  display: inline-block;
  width: 0.6em;
  height: 1em;
}