/* 
when .item:hover, show overlay.
overwrite .item-overlay."position"
*/
.item:hover .item-overlay.top {
    top: 0;
  }
  .item:hover .item-overlay.right {
    right: 0;
    left: 0;
  }
  .item:hover .item-overlay.bottom {
    bottom: 0;
  }
  .item:hover .item-overlay.left {
    left: 0;
  }
  
  /* 
  by default, overlay is visible… 
  */
  .item-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 1px solid;
    background: rgb(255 255 255);
    color: #000;
    overflow: hidden;
    text-align: center;
    /* fix text transition issue for .left and .right but need to overwrite left and right properties in .right */
    width: 100%; 
    
    -moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
    -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
    transition: top 0.6s, right 0.6s, bottom 0.6s, left 0.6s;
  }
  /* .item-overlay.top h5 a{
    color: #fff;
  } */
  /*
  …but this hide it
  */
  .item-overlay.top {
    top: 100%;
  }
  .item-overlay.right {
    right: 200%;
    left: -100%;
  }
  .item-overlay.bottom {
    bottom: 100%;
  }
  .item-overlay.left {
    left: 100%;
  }
  
  
  /* misc. CSS */
  * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  .item {
    position: relative;
    
    /* border: 1px solid #333; */
    float: left;
    /* margin: 2%; */
    overflow: hidden;
    /* width: 21%; */
    /* max-width: 540px; */
  }
  .item img {
    max-width: 100%;
  }
  /* end of misc. CSS */
  .item-overlay.top {
    padding: 50px 20px 0px 20px;
    z-index: 4;
display: flex;
    flex-direction: column;
    justify-content: center;
}

button.btn.btn-default {
    border: 1px solid #856d47;
    background: #856d4742;
}
.meeting-event-box .content h5 span:hover {
    color: #856d47;
}
.meeting-event-box .content h5 {
   width: 100%;
    display: flex;
    font-size: 20px;
    font-family: "Argesta Display";
    margin-bottom: 0;
    justify-content: center;
    align-items: center;
}
.item-overlay.top .content {
    width: calc(100% - 0px);
}