@import url(http://fonts.googleapis.com/css?family=Lato:400,900);  /* <-- Just for the demo, Yes I like pretty fonts... */

.square1 {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 20%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
    border-radius: 10px;
}

.content1 {
    position:absolute;
    height:90%; /* = 100% - 2*5% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 5%;
    
}
.table1{
    display:table;
    width:100%;
    height:100%;
}
.table-cell1{
    display:table-cell;
    vertical-align:middle;
}

/*  For responsive images */

.content1 .rs1{
    width:auto;
    height:auto;
    max-height:90%;
    max-width:100%;
}
/*  For responsive images as background */

.bg1{
    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:azure;
}

.effect1 {
    font-size:20px;
    font-family:'Lato',verdana,sans-serif;
    color: #fff;
    text-align:center;
}

.colorBox {background-color:#33a2a2;}