.b-metrobox {
	position: relative;
    display: block;
    margin: 15px 0 15px;
    min-height: 280px;
    font-family: 'Noto Sans',sans-serif;
    background-color: #eee;
    background-size: cover;
    background-position: center 0;
    transition: box-shadow .6s;
}
.b-metrobox:hover {
	box-shadow: inset 0 0 40px #000;
}
.b-metrobox:link,
.b-metrobox:visited,
.b-metrobox:focus {
	text-decoration:none
}

.b-metrobox__title {
	display: block;
	text-align: center;
	padding: 30px 10px 10px;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	text-shadow: 0 0 5px #000;
	
}

.b-metrobox__text {
	position: absolute;
	bottom: 40px;
	left: 0;
	right: 0;
	display: block;
	min-height: 170px;
	padding: 10px;
	color: #000;
	font-size: 14px;
	line-height: 1.3em;
	box-shadow: 0 0 10px 3px #fff;
	background: rgba(255,255,255, 0.8);
}

.b-metrobox__detail {
	position: absolute;
	bottom: 0px;
	right: 0;
	display: inline-block;
	text-align: center;
	padding: 10px 10px 10px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	transition: color,background-color .3s;
}
.b-metrobox__detail:link,
.b-metrobox__detail:visited {
	color: #fff;
	background-color: #428bca;
	text-decoration: none;
}
.b-metrobox__detail:hover {
	color: #428bca;
	background-color: #fff;
}