.metro .tile{background-color:#2c83ef;color:#fff;cursor:pointer;display:block;float:left;height:170px;margin-bottom:5px;margin-left:5px;margin-right:5px;margin-top:1%;overflow:hidden;padding:0;position:relative;text-decoration:none;width:230px}.metro .tile.app .image-wrapper{display:block;height:80px;margin-top:20px;padding:8px 0;text-align:center;vertical-align:middle;width:auto!important}h4{color:#fff;font-weight:bold;width:900px;text-align:center;width:200px}center{background:#fcfcfc none repeat scroll 0 0;margin-top:-6px!important}.tiles{font-size:0;text-align:center;position:relative}.tiles .tile{display:inline-block;margin:10px;text-align:left;opacity:.99;overflow:hidden;position:relative;border-radius:3px;box-shadow:0 0 20px 0 rgba(0,0,0,.05)}.tiles .tile:before{content:'';background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%);width:100%;height:50%;opacity:0;position:absolute;top:100%;left:0;z-index:2;transition-property:top,opacity;transition-duration:.3s}.tiles .tile img{display:block;max-width:100%;backface-visibility:hidden}.tiles .tile .details{font-size:16px;padding:20px;color:#fff;position:absolute;bottom:0;left:0;z-index:3}.tiles .tile .details span{display:block;opacity:0;position:relative;top:100px;transition-property:top,opacity;transition-duration:.3s;transition-delay:0}.tiles .tile .details .title{line-height:1;font-weight:600;font-size:18px}.tiles .tile .details .info{line-height:1.2;margin-top:5px;font-size:12px}.tiles .tile:focus:before,.tiles .tile:focus span,.tiles .tile:hover:before,.tiles .tile:hover span{opacity:1}.tiles .tile:focus:before,.tiles .tile:hover:before{top:50%}.tiles .tile:focus span,.tiles .tile:hover span{top:0}.tiles .tile:focus .title,.tiles .tile:hover .title{transition-delay:.15s}.tiles .tile:focus .info,.tiles .tile:hover .info{transition-delay:.25s}.tiles .tile:focus .tiletitle,.tiles .tile:hover .tiletitle{display:none}