/* -------------------------------------- *
*           24. product-item CSS          *
* --------------------------------------- */

.product-item {
    position: relative;
    margin-bottom: 50px;
}

.product-item .inner {
    padding: 30px 15px;
    text-align: center;
    position: relative;
    -webkit-transition: .4s;
    transition: .4s;
}

.product-item .inner:hover {
    -webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.product-item .inner h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    -webkit-transition: .4s;
    transition: .4s;
}

.product-item .inner h4 a {
    color: #333;
    -webkit-transition: .4s;
    transition: .4s;
}

.product-item .inner .category a,
.product-item .inner .category {
    font-size: 12px;
    font-weight: 400;
    color: #9B9B9C;
    -webkit-transition: .4s;
    transition: .4s;
}
.product-item .inner .category a:hover{
    color: #222;
}

.product-item .inner .product-img {
    width: 100%;
    margin: 15px auto;
    padding: 0 15px;
}

.product-item .inner .product-img img {
    display: block;
    max-width: 100%;
}

.product-item .inner .price-box {
    line-height: 27px;
}

.product-item .inner .price-box span.price {
    font-size: 16px;
    color: #222;
}

.product-item .inner .hover-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    left: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
    -webkit-transition: .4s;
    transition: .4s;
}

.product-item .inner:hover .hover-content {
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    opacity: 1;
}

.product-item .inner .hover-content a {
    height: 45px;
    width: 45px;
    display: inline-block;
    text-align: center;
    line-height: 49px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 34px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 34px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    font-size: 16px;
    -webkit-transition: .4s;
    transition: .4s;
    margin: 0 6px
}

.product-item .inner .hover-content a:hover {
    color: #fff;
}

.product-item .inner .product-price .woocommerce-Price-amount{
    font-size: 16px;
    color: #333333;
    font-weight: 500;
    text-decoration: none;
    line-height: 30px
}
.woocommerce .inner.thm-single-desc .price .woocs_price_code .woocommerce-Price-amount {
    font-size: 36px;
    font-weight: 700;
}

.product-item .inner .product-price del .woocommerce-Price-amount{
    font-size: 12px;
    line-height: 30px;
    color: #999999;
    font-weight: 300;
}
.woocommerce .inner.thm-single-desc .price .woocs_price_code del .woocommerce-Price-amount{
    font-size: 16px;
    line-height: 30px;
    color: #999999;
    font-weight: 300;
    text-decoration: line-through;
}

/* post gird */
.wppb-addons-col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: calc( -20px/2 );
    margin-right: calc( -20px/2 );
}
.wppb-addons-col > div {
    padding-right: calc( 20px/2 );
    padding-left: calc( 20px/2 );
    padding-bottom: 30px;
}
.wppb-post-grid-img {
    position: relative;
}
.wppb-post-grid-img img {
    height: auto;
}
.wppb-post-grid-img .wppb-post-grid-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 20px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    pointer-events: none;
}
.wppb-post-grid-overlay .wppb-post-grid-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 25px 10px;
    z-index: 3;
    width: 100%;
    pointer-events: none;
    transition: bottom 0.3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.wppb-post-grid-overlay:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 65%;
    transition: opacity 0.2s;
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.wppb-postmeta-sept {
    display: inline-block;
}
.wppb-post-grid-title a,
.wppb-post-grid-meta a,
.wppb-post-grid-btn,
.wppb-posts-addon-loadmore-btn,
.wppb-posts-paginate-link {
    transition: 400ms;
}
.wppb-posts-paginate-link-disable {
    opacity: .5;
    pointer-events: none;
}
.wppb-posts-addon-loadmore-btn {
    display: inline-block;
}
.wppb-post-grid-btn {
    display: inline-block;
}
.wppb-post-grid-title {
    font-size: 20px;
    padding: 0;
}
.wppb-post-grid-meta {
    font-size: 12px;
    pointer-events: auto;
}
.wppb-addons-col-xs1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
.wppb-addons-col-xs2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.wppb-addons-col-xs3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.wppb-addons-col-xs4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.wppb-addons-col-xs5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
.wppb-addons-col-xs6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
}
.wppb-addons-col-xs7 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 14.258714%;
  flex: 0 0 14.258714%;
  max-width: 14.258714%;
}
.wppb-addons-col-xs8 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 12.5%;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

@media (min-width: 576px) {
    .wppb-addons-col-sm1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .wppb-addons-col-sm2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .wppb-addons-col-sm3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .wppb-addons-col-sm4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .wppb-addons-col-sm5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .wppb-addons-col-sm6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }
    .wppb-addons-col-sm7 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 14.258714%;
      flex: 0 0 14.258714%;
      max-width: 14.258714%;
    }
    .wppb-addons-col-sm8 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 12.5%;
      flex: 0 0 12.5%;
      max-width: 12.5%;
    }
}

@media (min-width: 992px) {
    .wppb-addons-col-md1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .wppb-addons-col-md2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .wppb-addons-col-md3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .wppb-addons-col-md4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .wppb-addons-col-md5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    .wppb-addons-col-md6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }
    .wppb-addons-col-md7 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 14.258714%;
      flex: 0 0 14.258714%;
      max-width: 14.258714%;
    }
    .wppb-addons-col-md8 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 12.5%;
      flex: 0 0 12.5%;
      max-width: 12.5%;
    }
}

.wppb-posts-addon-content {
    position: relative;
}

.wppb-posts-addon-pagination {
    z-index: 4;
}
.wppb-post-grid-spinner {
    display: inline-block;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background: rgba(255, 255, 255, 0.5);
    transition: 500ms;
    z-index: 3;
  }
.wppb-post-grid-spin {
    width: 50px;
    height: 50px;
    margin: 100px auto;
    top: 50%;
    position: absolute;
    left: 50%;
    margin-top: -60px;
    margin-left: -30px;
    z-index: 1;
  }

  .wppb-post-grid-spin > div {
    width: 33%;
    height: 33%;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
            animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  }
  .wppb-post-grid-spin div:nth-child(1) {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
        background-color: #3666E4;
    }
  .wppb-post-grid-spin div:nth-child(2){
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    background: #59d693;
  }
  .wppb-post-grid-spin div:nth-child(3) {
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
        background: #1c9ef1;
    }
  .wppb-post-grid-spin div:nth-child(4){
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
        background: #9AC7A0;
    }
  .wppb-post-grid-spin div:nth-child(5) {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
        background: #3666E4;
    }
  .wppb-post-grid-spin div:nth-child(6) {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
        background: #59d693;
    }
  .wppb-post-grid-spin div:nth-child(7) {
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        background: #C4E7AF;
    }
  .wppb-post-grid-spin div:nth-child(8){
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
        background: #9AC7A0;
    }
  .wppb-post-grid-spin div:nth-child(9) {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
        background: #3666E4;
    }

  @-webkit-keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
      -webkit-transform: scale3D(1, 1, 1);
              transform: scale3D(1, 1, 1);
    } 35% {
      -webkit-transform: scale3D(0, 0, 1);
              transform: scale3D(0, 0, 1);
    }
  }

  @keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
      -webkit-transform: scale3D(1, 1, 1);
              transform: scale3D(1, 1, 1);
    } 35% {
      -webkit-transform: scale3D(0, 0, 1);
              transform: scale3D(0, 0, 1);
    }
  }