﻿.tile {
    font-size:1em!important;
    float: left;
    border-spacing: 0px 0px;
    margin-bottom:1%;
    width:100%; 
}
.tile-vertical {
	height: 200px;
    background-color: rgb(0,114,198);
    width: 200px;
    font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size: 13px;
    border-spacing: 0px 0px;
    margin:5px;
}
.tile-content {
	max-height:200px;
    overflow: hidden;
    position: relative;
}
.tile-content-center {
    height: 200px;
    width: 200px;
    overflow: hidden;
    position: relative;
    text-align:center;
}
.detailBox {
    opacity: 0.7;
    background-color: rgba(0,0,0,0.85);
    color: #fff !important;
    left:0px;
    top:60%;
    position: absolute;
    width:100%;
}
.tile-details {
    height:200px;
    list-style-type: none;
    margin: 0px;
    overflow: hidden;
}
.tile-title {
    border-spacing:0px;
    display: table-cell;
    height:100%;
    vertical-align:bottom;
    overflow:hidden;
    color:#fff;
}
.tile-description {
    border-spacing: 0px;
    list-style-type:none;
    padding-top:15px;
    padding-right:6px;
    padding-left:6px;
    padding-right:6px;
    display:none;
}
.tile-image {
    position:relative;
    width:100%;
}
.tile-title-text {
    max-height:100%;
    overflow:hidden;
    list-style-type:none;
    padding: 0 .4em;
}
@media only screen and (min-width:300px){#content div.detailBox > ul.tile-details{padding:.5em 1em;}}
@media only screen and (min-width: 770px) {.tile{font-size:.75em;}.tile-content{height:120px!important;}#content div.detailBox > ul.tile-details{padding:.2em .3em;}}
@media only screen and (min-width: 1024px) {.tile{font-size:.9em;}.tile-content{height:150px!important;}#content div.detailBox > ul.tile-details{padding: .5em 1em;}}
@media only screen and (min-width: 1200px) {.tile-content{height:180px!important;}}
