.box ul {
    padding: 0;
    margin: 0 auto;
    display: block;
    width: 80%;
    height: auto;
/*    background-color: purple;*/
    text-align: left;
}

.box li:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}

.box li {
    position: relative;
    width: 20%;
    padding: 2.5%;
    margin: 0 auto;
    display: inline-block;
    vertical-align: middle;
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.75);
/*    background-color: pink;*/
}

.box li img {
    height: 80%;
    width: 80%;
    padding: 0;
    margin: auto;
    position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;   
}

/*========================================================================================================
                                            MEDIA QUERIES
========================================================================================================*/ 
@media only screen and (max-width : 1440px),
only screen and (max-device-width : 1440px){
    .box li {width: 45%;} 
}

@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
    .box li {width: 45%;}
}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
    .box li {width: 45%}
}
 
@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
    .box li {width: 80%; padding: 2.5% 10%;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    .box li {width: 80%; padding: 2.5% 10%;}
}