/* -----------------------------------------
 SERVICE TILE - No Panel Drop Down
----------------------------------------- */
.service-tile-no-panel {
    float: left;
    width: 100%;
    /* Need to keep the two column longer than bootstrap has .make-*-column for */
    padding-left: 0;
    padding-right: 0;
    position: relative;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: center;
    outline: none;
    min-height: 240px;
    color: #E1F2F7;
    background: #046B99;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

    .service-tile-no-panel .icon-fallback {
        min-width: 100%;
        line-height: 1;
        position: absolute;
        bottom: 0;
        left: 0;
        vertical-align: middle;
        display: inline-block;
        height: 100%;
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
    }

    .service-tile-no-panel .teaser {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #000;
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 30%, #000000 100%);
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 30%, #000000 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cc000000', endColorstr='#000000', GradientType=0);
        color: #fff;
        padding: 10px 0;
    }

        .service-tile-no-panel .teaser .title {
            margin: 5px 0 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
            -webkit-transition: all .3s;
            transition: all .3s;
        }

            .service-tile-no-panel .teaser .title:hover {
                color: #FDB81E;
            }

    .service-tile-no-panel:focus .teaser .title {
        color: #FDB81E;
    }

@media (min-width: 450px) {
    .service-tile-no-panel {
        width: 50%;
    }
}

@media (min-width: 768px) {
    .service-tile-no-panel {
        min-height: 280px;
        float: left;
        width: 50%;
    }
}

@media (min-width: 992px) {
    .service-tile-no-panel {
        min-height: 240px;
        float: left;
        width: 25%;
    }
}

@media (min-width: 1280px) {
    .service-tile-no-panel {
        min-height: 320px;
    }
}