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



.blog{
  position: relative;
  width: 22em;
  height: 30em;
  
  background: url(https://aegeanconsult.co.uk/assets/image/arkafon.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;
  text-align:center;
}
.blog:hover .color-overlay{
  background:rgba(0, 0, 0, 0.8);
}
.blog:hover .info{
  bottom: -3em;
  opacity: 1;
}
.blog, .color-overlay{
   border-radius: 0.2em;
}
.color-overlay{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  transition: 0.7s background;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.title-box{
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: 2em;
  color:#f5f5f5;
}
.title-box hr{
  /*margin-top: -0.4em; */
  margin-bottom: 1em;
  width: 15em;
  height: 0.05em;
  box-sizing: content-box;
  border: none;
  background: #d5d5d5;
}

.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;
}

.xfooter{
  display: inline-block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4em;
  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: #f5f5f5;
}

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

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