.metro{position:relative;width:100%}.metro .element{position:absolute;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.metro .element img{width:100%;height:100%}.metro .element .hover{-moz-opacity:0;-khtml-opacity:0;-webkit-opacity:0;opacity:0;-ms-filter:alpha(opacity=0);filter:alpha(opacity=0);position:absolute;top:0;bottom:0;right:0;left:0;color:#fff;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.metro .element .hover.cyan{background-color:#00afe8;background-color:rgba(0,175,232,.7)}.metro .element .hover.magenta{background-color:#f12986;background-color:rgba(241,41,134,.7)}.metro .element .hover.yellow{background-color:#ffb93c;background-color:rgba(255,185,60,.7)}.metro .element .hover.black{background-color:#000;background-color:rgba(0,0,0,.7)}.metro .element .hover.orange{background-color:#fb5500;background-color:rgba(251,85,0,.7)}.metro .element .hover .title{text-align:left;font-weight:700;font-size:20px;margin-top:20px;margin-left:20px;margin-bottom:0}.metro .element .hover .subtitle{font-size:16px;margin-left:20px}.metro.type1 .element:hover .hover{-moz-opacity:1;-khtml-opacity:1;-webkit-opacity:1;opacity:1;-ms-filter:alpha(opacity=100);filter:alpha(opacity=100)}.metro.type1 .element.e5 .hover .title{margin-top:5px;font-size:15px}.metro.type1 .element.e5 .hover .subtitle{font-size:11px}.metro.type1 .element.e1{top:0;left:0;width:29.75%;height:100%}.metro.type1 .element.e2{top:0;left:30%;width:24.75%;height:49%}.metro.type1 .element.e3{top:auto;bottom:0;left:30%;width:24.75%;height:50%}.metro.type1 .element.e4{top:0;left:55%;width:19.75%;height:74%}.metro.type1 .element.e5{top:auto;bottom:0;left:55%;width:19.75%;height:25%}.metro.type1 .element.e6{top:0;left:75%;width:25%;height:44%}.metro.type1 .element.e7{top:auto;bottom:0;left:75%;width:25%;height:55%}.metro.type2 .element:hover .hover{-moz-opacity:1;-khtml-opacity:1;-webkit-opacity:1;opacity:1;-ms-filter:alpha(opacity=100);filter:alpha(opacity=100)}.metro.type2 .element.e1{top:0;left:0;width:24.75%;height:100%}.metro.type2 .element.e2{top:0;left:25%;width:24.75%;height:100%}.metro.type2 .element.e3{top:0;left:50%;width:24.75%;height:100%}.metro.type2 .element.e4{top:0;left:75%;width:25%;height:100%}.metro.type3 .element:hover .hover{-moz-opacity:1;-khtml-opacity:1;-webkit-opacity:1;opacity:1;-ms-filter:alpha(opacity=100);filter:alpha(opacity=100)}.metro.type3 .element.e1{top:0;left:0;width:49.75%;height:100%}.metro.type3 .element.e2{top:0;left:50%;width:24.75%;height:100%}.metro.type3 .element.e3{top:0;left:75%;width:25%;height:49%}.metro.type3 .element.e4{top:50%;left:75%;width:25%;height:50%}@media (max-width:768px){.metro.type1{display:none}}@media (max-width:767px){.metro.type2 .element.e1{top:0;left:0;width:49.75%;height:100%}.metro.type2 .element.e2{top:0;left:50%;width:50%;height:100%}.metro.type2 .element.e3{display:none}.metro.type2 .element.e4{display:none}.metro.type3 .element.e1{top:0;left:0;width:100%;height:100%}.metro.type3 .element.e2{display:none}.metro.type3 .element.e3{display:none}.metro.type3 .element.e4{display:none}}@media (min-width:768px) and (max-width:991px){.metro.type2 .element.e1{top:0;left:0;width:33.05%;height:100%}.metro.type2 .element.e2{top:0;left:33.3%;width:33.05%;height:100%}.metro.type2 .element.e3{top:0;left:66.6%;width:33.3%;height:100%}.metro.type2 .element.e4{display:none}.metro.type3 .element.e1{top:0;left:0;width:66.35%;height:100%}.metro.type3 .element.e2{top:0;left:66.6%;width:33.05%;height:100%}.metro.type3 .element.e3{display:none}.metro.type3 .element.e4{display:none}}