.item{
   border: 6px solid #fff; background-color: white;  position: relative;  display: inline-block;  margin: 1% 2% 1% 0%;
  overflow: hidden;  box-shadow: 2px 3px 10px #444444;}

.galeria .horizontal{width: 46.6%;  height: 467px;}
.galeria .vertical{width: 30%;  height: 520px;}
.galeria .doble{width: 63%;  height: 520px;}
.galeria .vertical img, galeria .doble img{width: 100%;}

.item .overlay{
  color: #000;  width: 100%;  height: 100%;  background-color: #fff;  opacity: 0;
  transition: all 0.5s ease;  position: absolute;  top: 0;   bottom: 0;}

/* effect-clean*/
.clean .overlay span:nth-child(1){
  position: absolute;  top: 65%;  left: 40%;  font-size: 19px;  transform: translateX(-50%);}

.clean .overlay span:nth-child(2){
  height: 6px;  background-color: #AAA;  position: absolute;  top: 50%;  left: 0;}

.clean .overlay:hover{
  opacity: 0.9;}

.clean .overlay:hover span:nth-child(1){
  animation: slide 0.7s;}

.clean .overlay:hover span:nth-child(2){
  animation: line 0.5s forwards;}

@keyframes slide{
  0%   {transform:translateX(-10%);}
  100% {transform:translateX(-50%);}
}

@keyframes line{
  0%   {width: 0;}
  100% {width: 30%}
}
@media only screen 
and (max-width : 600px){
.galeria .horizontal, .galeria .vertical, .galeria .doble{width: calc(96% - 12px); height: auto; margin: 2%;}
.galeria .vertical img, .galeria .doble img, .galeria .horizontal img{width: 100%;}	
.clean .overlay span:nth-child(1) {
   top: 50%;  font-size: 16px; left: 50%;}
}

@media only screen 
and (min-width : 601px)
and (max-width : 850px) {
.galeria .horizontal, .galeria .doble{width: calc(97.7% - 12px);  }
.galeria .vertical{width: calc(47.5% - 12px); }
.galeria .horizontal, .galeria .vertical, .galeria .doble{height: auto; margin: 1%;}
.galeria .vertical img, .galeria .doble img, .galeria .horizontal img{width: 100%;}	
.clean .overlay span:nth-child(1) {
   top: 50%;  font-size: 16px; left: 50%;}
}

@media only screen 
	and (min-width : 851px)
	and (max-width : 1699px) {
.galeria .horizontal{width: calc(47.5% - 12px);  }
.galeria .vertical{width: calc(34.3% - 12px); }
.galeria .doble{width: calc(60.6% - 12px); }
.galeria .horizontal, .galeria .vertical, .galeria .doble{height: auto; margin: 1% 2% 0% 0%;}
.galeria .vertical img, .galeria .doble img, .galeria .horizontal img{width: 100%;}	
}
@media only screen 
	and (min-width : 751px)
	and (max-width : 999px) {
.clean .overlay span:nth-child(1) {
   top: 50%;  font-size: 17px;}
}