@charset "UTF-8";
/* CSS Document */

.squares { padding: 5%;     }

.square {
    float: left;
    position: relative;
    width: 30%;
    padding-bottom: 30%;
    /* = width for a 1:1 aspect ratio */
    margin: 1.66%;
    background-color: #eee;
    overflow: hidden;
    display: table;
}




.square .scontent {
    position: absolute;
    height: 100%;
    /* = 100% - 2*5% padding */
    width: 95%;
    /* = 100% - 2*5% padding */
    padding: 5%;
}
.square .table{
    display:table;
    width:100%;
    height:100%;
}
.square .table-cell{
    display:table-cell;
    vertical-align:middle;
}
/*  For list */
.squarewrap ul{
    text-align:left;
    margin:5% 0 0;
    padding:0;
    list-style-position:inside;
}
.squares li{
    margin: 0 0 0 5%;
    padding:0;
}

.squares h2.fheadline {
    font-size: 1.2em;
    position: absolute;
    bottom: 0;
}

.square .scontent {
	display: table-cell;
	vertical-align:bottom;
}



@media screen and (max-width: 759px) {

	
	.square {
    float: left;
    position: relative;
    width: 46%;
    padding-bottom: 50%;
    /* = width for a 1:1 aspect ratio */
    margin: 1.66%;
    background-color: #eee;
    overflow: hidden;
    /* display: table; */
}

.squares h2.fheadline {
    font-size: 0.8em;
    position: absolute;
    bottom: 0;
    margin-bottom: 0
}



}