
.tile {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 10%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-color:blue;
    overflow:hidden;
}

.content {
    position: absolute;
    height:100%; 
    /* = 100% - 2*5% padding */
    width:100%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
    /*margin: 10% 5%;*/
}

.bg {
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
    /*color: blue;*/
}
/*.content .rs{*/
/*    width:auto;*/
/*    height:auto;*/
/*    max-height:90%;*/
/*    max-width:100%;*/
/*}*/
.bg-omspan {
    background-color:#2a579a;
}

.bg-erekon {
    background-color:#ffcc00;
}

.bg-sprint {
    background-color:#00a4a2;
}

.bg-microweb {
    background-color:#596d82;
}

.bg-simponi {
    background-color:#93c21b;
}

.bg-pengaduan {
    background-color:#660033;
}

.bg-sipandu {
    background-color:#fe1143;
}

.bg-simpatik {
    background-color:#7AA211;
}

.bg-wise{
    background-color:#000000;
}

.bg-bliss {
    background-color:#ee8844;
}

.bg-edukasi {
    background-color:#605ca8;
}

.bg-gift {
    background-color:#2c3e50;
}

.img {
    background-image: url('https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg');
}
.table{
    display:table;
    width:100%;
    height:100%;
    margin-bottom:0px;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  font-size:25px;
  
}
@media only screen and (max-width: 600px) {
.tile {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-color:blue;
    overflow:hidden;
}

.content {
    position: absolute;
    height:80%; /* = 100% - 2*5% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
    margin: 10% 5%;
}

.bg {
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
    /*color: blue;*/
}

.bg-omspan {
    background-image: url('/images/iconpack/icon-omspan.png');
    background-color:#2a579a; 
}

.bg-erekon {
    background-image: url('/images/iconpack/icon-erekon.png');
    background-color:#ffcc00;
}

.bg-sprint {
    background-image: url('/images/iconpack/icon-sprint.png');
    background-color:#00a4a2;
}

.bg-microweb {
    background-image: url('/images/iconpack/icon-microweb.png');
    background-color:#596d82;
}

.bg-simponi {
    background-image: url('/images/iconpack/icon-simponi.png');
    background-color:#93c21b;
}

.bg-sipandu {
    background-image: url('/images/iconpack/icon-sipandu.png');
    background-color:#fe1143;
}

.bg-simpatik {
    background-image: url('/images/iconpack/icon-simpatik.png');
    background-color:#7AA211;
}

.bg-pengaduan {
    background-image: url('/images/iconpack/icon-pengaduan.png');
    background-color:#660033;
}

.bg-wise {
    background-image: url('/images/iconpack/icon-wise.png');
    background-color:#000000;
}

.bg-bliss {
    background-image: url('/images/iconpack/icon-bliss.png');
    background-color:#ee8844;
}

.bg-edukasi {
    background-image: url('/images/iconpack/icon-edukasi.png');
    background-color:#605ca8;
}

.bg-gift {
    background-image: url('/images/iconpack/icon-check.png');
    background-color:#2c3e50;
}


.table{
    display:table;
    width:100%;
    height:100%;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  font-size:10px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

p {
    font-size:7px;
}
a{
  color:inherit;
}

a:focus, a:hover {
    color: #fff;
    text-decoration: none;
}
}

