.first{
    margin-left: 10px;
}
#logo,
#header{
    background: rgb(51, 51, 51);
}
.square {
    float: left;
    position: relative;
    width: 12%;
    padding-bottom: 12%; 
    overflow: hidden;
    margin-left: 0.5%;
    transition: all 0.3s ease-out 0s;
}
.square:hover
{
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
    -ms-transform: scale(1.4);
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=1.4, M12=-0, M21=0, M22=1.4);
    z-index: 99;
}
.contenuto {
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 5%;
}
.contenuto .img{
    width: auto;
    height: auto;
    max-height: 90%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}
.table {
    display: table;
    width: 100%;
    height: 100%;
}
.table-cell {
    display: table-cell;
    vertical-align: middle;
}
@media screen and (max-width:26.5625em){
    .first{
        margin-left: 0px;
    }
    .square{
        width: 48% !important;
        padding-bottom: 48% !important; 
        margin-bottom: 10px;
    }
    .img{
        margin: 0 auto;
        display: block;
    }
}
@media screen and (max-width: 48em){
    .pure-g{
        padding-top: 15px;
    }
}
@media screen and (width:48em){
    .square{
        width: 24%;
        padding-bottom: 24%; 
        margin-bottom: 10px;
    }
    .img{
        margin: 0 auto;
        display: block;
    }
}
@media screen and (max-width: 48em){
    .square{
        width: 24%;
        padding-bottom: 24%; 
        margin-bottom: 10px;
    }
    .img{
        margin: 0 auto;
        display: block;
    }
}
#logo{background: rgb(51, 51, 51);height: 102px;}
#logo img{position: relative;top: 3%;}