.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 25px 0px;
}

.moi {background: url(../img/moika1.jpg) center/cover;}
.stole-kuh {background: url(../img/stolestnita_kuhnia1.jpg) center/cover;}
.stole-vana {background: url(../img/stoleshnita_vana1.jpg) center/cover;}
.bar-sto {background: url(../img/barnaia_stoika1.jpg) center/cover;}
.podo {background: url(../img/podokonniki1.jpg) center/cover;}
.kat {background: url(../img/katalog-logo.jpg) center/cover;}
.mat {background: url(../gallery/Default1.jpg) center/cover;}
.PVA {background: url(../img/PVA.jpg) center/cover;}
.tri-alum {background: url(../img/tri-alum.jpg) center/cover;}
.sfera {background: url(../img/microsfera.jpg) center/cover;}
.oxid-alum {background: url(../img/oxid-alum.jpg) center/cover;}
.price-list {background: url(../img/price-prod.jpg) center/cover;}
.excel {background: url(../img/excel-icon.png) center/cover;}
.moi-van {background: url(../gallery/54.jpg) center/cover;}
.moi-kuh {background: url(../gallery/84.jpg) center/cover;}

.moi , .stole-kuh , .stole-vana , .bar-sto , .podo, .mat, 
.kat, .PVA, .tri-alum, .sfera, .oxid-alum, .price-list, .excel, .moi-van, 
.moi-kuh {
  border: solid 3px gray;
  width: 25%;
  height: 200px;
  margin: 5px;
  overflow: hidden;
}

.black-drop {
  background: rgba(0, 0, 0, 50%);
  display: flex;
  justify-content: center;
  text-align: center;
  list-style: none;
  width: 100%;
  height: 100%;
  transition: 1s;
  transform: translateY(60%);
  padding: 0px;
  font-size: 17px;
}

.black-drop li {
  margin-top: 15px;
}

.kat-color {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.series {
  width: 200px;
  margin: 20px;
  font-size: 20px;
}

.series a:link, .series a:visited {
  color: #0077ff;
}

.series a:hover, .series a:active {
  color: #6db1ff;
}

.black-drop a, .black-drop a:link, .black-drop a:visited {
  color: lightgray;
}

.moi a, .stole-kuh a, .stole-vana a, .bar-sto a, .podo a, .mat a, 
.kat a, .PVA a, .tri-alum a, .sfera a, .oxid-alum a, .moi a:hover,
.stole-kuh a:hover,.stole-vana a:hover, .bar-sto a:hover, .podo a:hover,
.mat a:hover, .kat a:hover, .PVA a:hover, .tri-alum a:hover,
.sfera a:hover, .oxid-alum a:hover, .price-list a, .price-list a:hover, 
.excel a, .excel a:hover, .moi-van a, .moi-kuh a, .moi-van a:hover, 
.moi-kuh a:hover {
  color: lightgray;
}

.series img {
  width: 100%;
}

.abricos-img {
  margin-top: 84px;
}

.granimix-img, .gs-img {
  margin-top: 188px;
}

@media (max-width: 1430px) {
  .gs-img {
    margin: 0px;
  }
}

@media (max-width: 1146px) {
  .granimix-img {
    margin: 0px;
  }
}

@media (max-width: 900px) {
  .moi , .stole-kuh , .stole-vana , .bar-sto , .podo, .mat, 
  .kat, .PVA, .tri-alum, .sfera, .oxid-alum, .price-list, .excel, .moi-van, 
  .moi-kuh {
    width: 40%;
  }
  .series {
    width: 40%;
  }
  .abricos-img {
    margin: 0px;
  }
  .granimix-img {
    margin-top: 103px;
  }
}

@media (max-width: 555px) {
  .moi , .stole-kuh , .stole-vana , .bar-sto , .podo, .mat, 
  .kat, .PVA, .tri-alum, .sfera, .oxid-alum, .price-list, .excel, .moi-van, 
  .moi-kuh {
    width: 100%;
    margin: 3px;
  }
  .series {
    width: 100%;
  }
  .series img {
    margin: 0px;
  }
}