/* boxes */
.box-holder{
    margin-left: -.5%;
    margin-right:-.5%;
}
.box {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    overflow: hidden;
    background-position: center;
    background-size:cover;
    background-color: #535353;

}

.box a.img{
    width:100%;
    height:100%;
}

.box a.img:hover{
    text-decoration: none;
}

.box h1{
    text-align: center;
    color: white;
    display:flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height: 100%;
    margin:0;
}
/*
.box:before{
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    /* ...and now for the proper property 
    transition:.5s ease-out; 
    
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000;
    opacity: .0;
}


.box:hover:before
{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #fff;
    opacity: .1;

    
}*/

.box img{
    width: 100%;
}

.box_2_2{
    float: left;
    position: relative;
    margin: .5%;
    width: 49%;
    padding-bottom: 48.9%;
}

.box_2_4{
    float: left;
    position: relative;
    margin: .5%;
    width: 99%;
    padding-bottom: 49%;
}

.box_1_2{
    float:left;
    position: relative;
    margin: .5%;
    width: 49%;
    padding-bottom: 24%;
}

.box_1_1{
    float: left;
    position: relative;
    margin: .5%;
    width: 24%;
    padding-bottom: 24%;
}



@media (max-width:650px)
{
    .box_2_2{
        width: 99%;
        padding-bottom: 99%;
    }

    .box_1_2{
        width: 99%;
        padding-bottom: 49%;
    }

    .box_1_1{
        width: 49%;
        padding-bottom: 49%;
    }
}