*,

*: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:30px; color:#fff; font-family:'OpenSans-Regular'; 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:'OpenSans-Regular'; padding:15px 0px; text-align:center; text-transform:uppercase;}

.btm_bnr_btn, .btm_bnr_btn:hover{ font-size:12px; color:#fff; font-family:'OpenSans-Regular'; padding:7px 20px; text-align:center; text-transform:uppercase; background:#2277c7; margin:15px auto; float:left; position:absolute; z-index:2; left:28%; text-decoration:none; border:solid 1px #FFFFFF;}

.btm_bnr_hdng2{ width:100%; font-size:22px; color:#fff; font-family:'OpenSans-Regular'; 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:'OpenSans-Regular'; padding:5px 0px; text-align:center; text-transform:uppercase;}

.btm_bnr_btn2, .btm_bnr_btn2:hover{ font-size:12px; color:#fff; font-family:'OpenSans-Regular'; padding:7px 20px; text-align:center; text-transform:uppercase; background:#2277c7; margin:5px auto; float:left; position:absolute; z-index:2; text-decoration:none; left:35%; border:solid 1px #FFFFFF;}



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