#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(187, 76, 120, 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(//www.frauen-magazin.com/wp-content/themes/amzola/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(187, 76, 120, 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;
}