/*  For responsive images */

.cell-row-4,.cell-row-3,.cell-row-2,.cell-row-1 {
    width: 100%;
}

/* generic css for square tiles */
[class^="square-cell-"], [class*=" square-cell-"] {
    display: block;
    float:left;
    position: relative;
    background-color:#1E1E1E;
    overflow:hidden;
    opacity: 0.95;
}

/* on click */
[class^="square-cell-"]:hover, [class*=" square-cell-"]:hover {
    opacity: 0.9;
}

[class^="square-cell-"]:active, [class*=" square-cell-"]:active {
    opacity: 1.0
}

/* 4 cells per row */
.square-cell-4 {
    width: 25%; /* (100/numTiles)- less padding required */
    padding: 0;
    padding-bottom: 25%;  /*sames as width for a 1:1 aspect ratio */
    margin: 0; /* (100-(width*numTiles))/(2*numTiles) */

}

/* 3 cells per row */
.square-cell-3 {
    width: 33%; /* (100/numTiles)- less padding required */
    padding: 0;
    padding-bottom: 33%;  /*sames as width for a 1:1 aspect ratio */
    margin: 0.16%; /* (100-(width*numTiles))/(2*numTiles) */

}

/* 2 cells per row */
.square-cell-2 {
    width: 49%; /* 100/numTiles */
    padding: 0;
    padding-bottom: 49%; /* sames as width for a 1:1 aspect ratio */
    margin: 0.5%; /* (100-(width*numTiles))/(2*numTiles) */
}

/* 1 cells per row */
.square-cell-1 {
    width: 99%; /* 100/numTiles */
    padding: 0;
    padding-bottom: 99%; /* sames as width for a 1:1 aspect ratio */
    margin: 0.5%; /* (100-(width*numTiles))/(2*numTiles) */
}

.square-content {
    position:absolute;
    height:100%; /* = 100% - 2* x% padding */
    width:100%; /* = 100% - 2* x% padding */
    padding: 0%;

}

.square-content img{
    width:auto;
    height:auto;
    max-height:100%;
    max-width:100%;
}


.square-content .overlay-panel {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 0.33vw 0.33vw 0.33vw 0.33vw;

    background-color: black;
    color: white;
    background: rgba(0, 0, 0, 0.5);
}


.square-content .overlay-panel h5,
.square-content .overlay-panel h6 {
    margin: 0;
    font-weight: normal;
    font-size: 1vw;
    white-space: nowrap;
    overflow: hidden;
}

.square-content .overlay-panel h6 {
    font-weight: bold;
}

.square-cell-2 .square-content .overlay-panel h5,
.square-cell-2 .square-content .overlay-panel h6 {
    margin: 0;
    font-weight: normal;
    font-size: 0.8vw;
    line-height: 1vw;
    white-space: nowrap;
    overflow: hidden;
}
