.hovergallery {display: flex; flex-wrap: wrap;}

.hovergallery span {width: 20%; height: 200px;}

.hovergallery.six-col span {width: 16.6%; padding: 5px;}

@media (max-width: 1024px) { .hovergallery.six-col span {width: 25%; height: 220px;}}  
  
@media (max-width: 800px) { 
	.hovergallery span, .hovergallery.six-col span {width: 33.33%;}
}  

@media (max-width: 480px) { .hovergallery span, .hovergallery.six-col span {width: 50%; height: 180px;} }  

@media (max-width: 320px) { .hovergallery span {width: 100%;} }
  
.hovergallery a {display: block; position: relative; width: 100%; height: 100%; overflow: hidden;}

.hovergallery a:before {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: -8px 0 0 -9px;
    content: '\ec85';
    font-family: 'icomoon';
    font-weight: 600;
    color: #efefef;
    font-size: 18px;
    opacity: 0;
    z-index: 1;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.hovergallery a:hover:before {top: 50%; opacity: 1;}

.hovergallery a:after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(57, 73, 73, 0.7);
    content: '';
    opacity: 0;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.hovergallery a:hover:after {opacity: 1;}

.hovergallery a img {
	padding: 0;
	margin: 0;
	position: absolute;
	width: auto !important;
	min-height: 100%;
	max-width: none !important;
	transition: transform 0.5s linear;
	-webkit-transition: transform 0.3s linear;  
}

.hovergallery a:hover img {
	-webkit-transform: translateX(-25px);
	-moz-transform: translateX(-25px);
	-ms-transform: translateX(-25px);
	-o-transform: translateX(-25px);
	transform: translateX(-25px);			
}