/* Metro Box */

#metro-box {
	float: left;
	height: 480px;
	width: 100%;
	margin: 0 0 25px 0;
	position: relative;
	overflow: hidden;
}

#metro-box .mCustomScrollBox.mCS-light.mCSB_horizontal {
	height: 445px;
}

#metro-box .mCSB_container {
	height: 445px;
	display: block;
	overflow: hidden;
}

#metro-box .mCustomScrollBox > .mCSB_scrollTools {
    margin: 0 0 0 0;
    width: 100%;
}

#metro-box .mCSB_horizontal.mCustomScrollBox > .mCSB_scrollTools {
    bottom: 0;
    height: 17px;
    left: 0;
    overflow: hidden;
    right: auto;
    top: auto;
    width: 100%;
}

#metro-box .mCSB_horizontal > .mCSB_scrollTools a + .mCSB_draggerContainer {
    margin: 0 0 0 0;
}

#metro-box .mCSB_scrollTools .mCSB_draggerRail {
	height: 17px;
	width: 100%;
	margin: 0 0 0 0;
    background: #f0f3f4;
}

#metro-box .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: #222222;
    width: 10px;
}

#metro-box .mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    height: 17px;
    margin: 0 auto;
    width: 100%;
}

#metro-box .mCSB_buttonLeft {
	display: none;
}

#metro-box .mCSB_buttonRight {
	display: none;
}

#metro-box .column {
	float: left;
	width: 1030px;
}

#metro-box .metro-item {
	float: left;
	width: 338px;
	margin: 0 5px 5px 0;
}

#metro-box .metro-item.big {
	width: 681px;
}

#metro-box .metro-item .featured-image {
	-moz-transition: all .2s;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
	width: 338px;
	height: 220px;
	position: relative;
	margin: 0 0 0 0;
}

#metro-box .metro-item .featured-image img {
	width: 338px;
	height: 250px;
}

#metro-box .metro-item.big .featured-image {
	width: 681px;
}

#metro-box .metro-item.big .featured-image img {
	width: 681px;
	height: 220px;
}

#metro-box .metro-item .featured-image .metro-content {	
	-moz-transition: all .7s;
    -webkit-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
	position: absolute;
	bottom: -61%;
	left: 0;
	background: rgba(250, 75, 42, 0.8);
	padding: 15px 15px;
	height: 190px;
}

#metro-box .metro-item .featured-image:hover .metro-content {
	height: 190px;
	bottom: 0;
}

#metro-box .metro-item .metro-content .metro-description .post-icon {
	background: url("../images/icon-post-metro.png") no-repeat;
	background-size: 34px 34px;
	float: left;
	display: block;
	width: 34px;
	height: 34px;
	line-height: 34px;
	margin: 0 10px 0 0;
	display: block;
	text-indent: -9999px;
}

#metro-box .metro-item .metro-content .metro-description .metro-header {
	margin-left: 44px;
}

#metro-box .metro-item .metro-content .metro-description h2 {
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	color: #ffffff;
	margin: 0 0 30px 0;
}

#metro-box .metro-item .metro-content .metro-description .meta-info {
	font-size: 500;
	font-size: 12px;
	line-height: 16px;
	color: #ffffff;
	text-transform: uppercase;
	margin: 0 0 0 0;
	display: block;
	overflow: hidden;
}

#metro-box .metro-item .metro-content .metro-description .meta-info a {
	color: #ffffff;
	text-decoration: none;
}

#metro-box .metro-item .metro-content .metro-description .meta-info a:hover {
	color: #ffffff;
	text-decoration: none;
}

#metro-box .metro-item .metro-content .metro-description p.description {
	float: left;
	width: 100%;
	color: #ffffff;
	font-size: 13px;
	line-height: 21px;
	margin: 0 0 0 0;
}

#metro-box .metro-item .featured-image .metro-content a.link {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#metro-box .metro-content.color-1 {
	background: rgba(250, 75, 42, 0.8) ! important;
}

#metro-box .metro-content.color-2 {
	background: rgba(70, 162, 141, 0.8) ! important;
}

#metro-box .metro-content.color-3 {
	background: rgba(255, 216, 0, 0.8) ! important;
}

#metro-box .metro-content.color-4 {
	background: rgba(0, 200, 255, 0.8) ! important;
}

#metro-box .metro-content.color-5 {
	background: rgba(119, 209, 0, 0.8) ! important;
}

#metro-box .metro-content.color-6 {
	background: rgba(250, 75, 42, 0.8) ! important;
}

#metro-box .metro-content.color-7 {
	background: rgba(70, 162, 141, 0.8) ! important;
}

#metro-box .metro-content.color-8 {
	background: rgba(255, 216, 0, 0.8) ! important;
}

#metro-box .metro-content.color-9 {
	background: rgba(0, 200, 255, 0.8) ! important;
}

#metro-box .metro-content.color-10 {
	background: rgba(119, 209, 0, 0.8) ! important;
}

#metro-box .metro-content.color-11 {
	background: rgba(250, 75, 42, 0.8) ! important;
}

#metro-box .metro-content.color-12 {
	background: rgba(70, 162, 141, 0.8) ! important;
}

#metro-box .metro-content.color-13 {
	background: rgba(255, 216, 0, 0.8) ! important;
}

#metro-box .metro-content.color-14 {
	background: rgba(0, 200, 255, 0.8) ! important;
}

#metro-box .metro-content.color-15 {
	background: rgba(119, 209, 0, 0.8) ! important;
}

#metro-box .metro-content.color-16 {
	background: rgba(250, 75, 42, 0.8) ! important;
}

#metro-box .metro-content.color-17 {
	background: rgba(70, 162, 141, 0.8) ! important;
}

#metro-box .metro-content.color-18 {
	background: rgba(255, 216, 0, 0.8) ! important;
}

#metro-box .metro-content.color-19 {
	background: rgba(0, 200, 255, 0.8) ! important;
}

#metro-box .metro-content.color-20 {
	background: rgba(119, 209, 0, 0.8) ! important;
}

#metro-box .metro-content.color-21 {
	background: rgba(250, 75, 42, 0.8) ! important;
}

#metro-box .metro-content.color-22 {
	background: rgba(70, 162, 141, 0.8) ! important;
}

#metro-box .metro-content.color-23 {
	background: rgba(255, 216, 0, 0.8) ! important;
}

#metro-box .metro-content.color-24 {
	background: rgba(0, 200, 255, 0.8) ! important;
}

#metro-box .metro-content.color-25 {
	background: rgba(119, 209, 0, 0.8) ! important;
}