*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.media {
  display: inline-block;
  position: relative;
  vertical-align: top;
}

.media__image { display: block; }

.btm_bnr_hdng{ width:100%; font-size:20px; color:#fff; font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding:40px 0 0; text-align:center; text-transform:uppercase;}
.btm_bnr_text{ width:100%; font-size:12px; color:#fff; font-family:Arial, Helvetica, sans-serif; padding:15px 0px; text-align:center; text-transform:uppercase;}
.btm_bnr_btn, .btm_bnr_btn:hover{ font-weight:bold; font-size:14px; color:#000; font-family:Arial, Helvetica, sans-serif; padding:8px 22px; text-align:center; text-transform:uppercase; background:#d5bb93; margin:15px auto; float:left; position:absolute; z-index:2; left:39%; text-decoration:none;}
.btm_bnr_hdng2{ width:100%; font-size:20px; color:#fff; font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding:10px 0 0; text-align:center; text-transform:uppercase;}
.btm_bnr_text2{ width:100%; font-size:12px; color:#fff; font-family:Arial, Helvetica, sans-serif; padding:5px 0px; text-align:center; text-transform:uppercase;}
.btm_bnr_btn2, .btm_bnr_btn2:hover{ font-weight:bold; font-size:14px; color:#000; font-family:Arial, Helvetica, sans-serif; padding:8px 22px; text-align:center; text-transform:uppercase; background:#d5bb93; margin:5px auto; float:left; position:absolute; z-index:2; text-decoration:none; left:31%;}

.media__body {
  background: rgba(0, 0, 0, 0.6);
  bottom: 0;
  color: white;
  font-size: 1em;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 30px;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.media__body2 {
  background: rgba(0, 0, 0, 0.6);
  bottom: 0;
  color: white;
  font-size: 1em;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 15px;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.media__body2:hover { opacity: 1; }

.media__body2:after,
.media__body2:before {
  border: 1px solid rgba(255, 255, 255, 0.7);
  bottom: .5em;
  content: '';
  left: .5em;
  opacity: 0;
  position: absolute;
  right:.5em;
  top: .5em;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.6s 0.2s;
  transition: 0.6s 0.2s;
}

.media__body2:before {
  border-bottom: none;
  border-top: none;
  left:  1em;
  right:  1em;
}

.media__body2:after {
  border-left: none;
  border-right: none;
  bottom: 1em;
  top:  1em;
}

.media__body2:hover:after,
.media__body2:hover:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.media__body:hover { opacity: 1; }

.media__body:after,
.media__body:before {
  border: 1px solid rgba(255, 255, 255, 0.7);
  bottom: .5em;
  content: '';
  left: .5em;
  opacity: 0;
  position: absolute;
  right:.5em;
  top: .5em;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.6s 0.2s;
  transition: 0.6s 0.2s;
}

.media__body:before {
  border-bottom: none;
  border-top: none;
  left:  1em;
  right:  1em;
}

.media__body:after {
  border-left: none;
  border-right: none;
  bottom: 1em;
  top:  1em;
}

.media__body:hover:after,
.media__body:hover:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.media__body h2 { margin-top: 0; }

.media__body p { margin-bottom: 1.5em; }

.media:nth-child(2) .media__body { background: rgba(0, 0, 0, 0.7); }
