.tiles { margin-bottom: 12px; overflow: hidden; width: 100%; }
.tiles > div { width: 103%;  }
.tiles .tile { display: table; width: 24%; height: 135px; float: left; margin-right: 0.5%; margin-bottom: 6px; overflow: hidden; }
.tiles .tile a {
    background-color: #58585a;
}

.tiles .tile.sun a:hover {
    background-color: #ffce00;
}

.tiles .tile.mandarin a:hover {
    background-color: #f0822e;
}

.tiles .tile.sky a:hover {
    background-color: #009ed4;
}

.tiles .tile.lime a:hover {
    background-color: #76b82a;
}

.tiles .tile.ocean a:hover {
    background-color: #003366;
}

.tiles .tile.hibiscus a:hover {
    background-color: #e40d2e;
}

.tiles .tile.stone a:hover {
    background-color: #b1b3b4;
}

.tiles .tile.purple a:hover {
    background-color: #9f5098;
}


.tiles .tile a { width: 100%; height: 100%; text-align: center; display: table-cell; vertical-align: middle; color: #fff; font-size: 1.6em; }
.tiles .tile a:hover { width: 100%; height: 100%; text-align: center; display: table-cell; vertical-align: middle; color: #fff; font-size: 1.6em; text-decoration: none !important; }
.tiles .tile a span { padding: 0px; font-size: 90.0%; }
.tiles .tile a:visited { color: #fff !important; }


@media (max-width: 992px ) {

    .tiles { width: 100%; }
    .tiles > div { width: 103%;  }

    .tiles .tile { width: 24%; margin-right: 0.5%; }

}

@media (max-width: 768px) {
    .tiles .tile { width: 32%; margin-right: 0.5%; }
}

@media only screen and (max-width: 480px) {
    .tiles .tile { width: 49%; margin-right: 0.5%; }
}

@media only screen and (max-width: 320px) {
    .tiles .tile { width: 100%; margin-right: 0%; }
}