.product-color-control, .product-color-gallery {
  list-style: none;
  text-align: center; }

.product-color-control {
  float: left;
  width: 100%; }
  .product-color-control > li {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 60%;
    margin: 5px 5px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
    .product-color-control > li:hover {
      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25), 0 2px 3px rgba(0, 0, 0, 0.24);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      box-shadow: inset 0 0 0 1px #414b56,0 0 0 4px #fff; }

.product-color-temp, .product-color-gal {
  list-style: none;
  text-align: center; }

.product-color-temp {
  float: left;
  width: 100%; }
  .product-color-temp > li {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 60%;
    margin: 5px 5px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
    .product-color-temp > li:hover {
      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25), 0 2px 3px rgba(0, 0, 0, 0.24);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      box-shadow: inset 0 0 0 1px #414b56,0 0 0 4px #fff; }

.product-color-fil, .product-color-gal {
  list-style: none;
  text-align: center; }

.product-color-fil {
  float: left;
  width: 100%; }
  .product-color-fil > li {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 3px 3px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
    .product-color-fil > li:hover {
      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25), 0 2px 3px rgba(0, 0, 0, 0.24);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      box-shadow: inset 0 0 0 1px #414b56,0 0 0 4px #fff; }

.product-color-fil2, .product-color-gal {
  list-style: none;
  text-align: left; }

.product-color-fil2 {
  float: left;
  width: 100%; }
  .product-color-fil2 > li {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 10px 2px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
    .product-color-fil2 > li:hover {
      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25), 0 2px 3px rgba(0, 0, 0, 0.24);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      box-shadow: inset 0 0 0 1px #414b56,0 0 0 2px #fff; }

.product-color-gallery {
  float: left;
  width: auto; }
  .product-color-gallery > li {
    float: left;
    width: auto; }
    .product-color-gallery > li > img {
      width: 100%;
      margin: 0 auto; }

.filter {
  float: left;
  width: 100%; }
  .filter > li {
    float: left;
    width: 100%; }
    .filter > li > img {
      width: 100%;
      margin: 0 auto;
      cursor: pointer;
      clear: none; }

.box-pro {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
  cursor: default;
  float: center; }

.box-pro .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88, -0.99, 0, 1.81); }
  .box-pro .overlay:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px); }

.box-pro img {
  display: block;
  position: relative;
  -webkit-transition: all .4s linear;
  transition: all .4s linear; }

.box-pro:hover img {
  -ms-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  transform: scale(1.08); }

.box-pro:hover a.info {
  -webkit-transition-delay: .2s;
  transition-delay: .2s; }

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: pointer; }
  .hovereffect img {
    opacity: 0.8;
    transition: all ease-out 0.2s; }
  .hovereffect.active img, .hovereffect:hover img {
    opacity: 1; }

.img-categoty-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: 0.3s ease-in all; }

.text-categoty-overlay {
  position: absolute;
  bottom: 15%;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  font-size: 24px;
  color: #fff;
  text-shadow: 0px 0px 2px #969696; }

.hovereffect:hover .img-categoty-overlay, .hovereffect.active .img-categoty-overlay {
  opacity: 1; }
.hovereffect:hover .text-categoty-overlay, .hovereffect.active .text-categoty-overlay {
  opacity: 1; }
.hovereffect:hover a, .hovereffect.active a {
  color: #fff; }

/*# sourceMappingURL=product.css.map */