/* CSS Document */
.main-categories {
  text-align: center;
  margin-bottom: 20px
}
.main-categories figure{
  overflow: hidden;
  height: 35vh;
  position: relative;
  margin: 10px -5px
}
.main-categories img{
  opacity: .7;
}
.main-categories *{
  color:#fff
}
.main-categories:hover img{
  opacity: 1;
  transform: scale(1.1) translate(-45%,-45%);
}
.main-categories img {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.main-categories figure h4 {
  background: #1A5579;
  position: absolute;
  bottom: 0;
  padding: 10px;
  width: 100%
}
.main-categories:hover h4 {
  font-size: 30px
}
.main-categories,.main-categories *,.main-categories:hover,.main-categories:hover *{
  transition: all .4s ease-in
}
.product figure {
  text-align: center;
  border: 1px solid #555;
  padding-top: 15px;
}
.product figure p{
  font-size: 18px;
  padding: 15px
}
.product ul li img{
  cursor: pointer
}
@media(max-width:1200px){
  .product ul li {
    display: inline-block;
    width: 20%;
  }
  .product ul {
    padding: 20px 0;
  }
}
@media(max-width:995px){
  .product ul li {
    width: 25%;
  }
}
@media(max-width:800px){
  .product ul li {
    width: 32.9%;
  }
}
@media(max-width:655px){
  .product ul li {
    width: 32.8%;
  }
}
@media(max-width:542px){
  .product ul li {
    width: 32.6%;
  }
}
@media(max-width:410px){
  .product ul li {
    width: 32.3%;
  }
}