/*
 *  Plugin Name: Home Page Product Carousel
 *  Author: Numinix
 *  Author URI: http://numinix.com
 *
 *
 *  WARNING! DO NOT EDIT THIS FILE!
 *
 *  To make it easy to update your theme, you should not edit the styles in this file. Instead use
 *  create a file called hp_product_carousels_overrides.css in your css/auto_loaders/ folder and add your styles.
 *  You can copy a style from this file and paste it in hp_product_carousels_overrides.css and it will override the style in this file. 
 *  You have been warned! :)
*/

/* ---------------------------
/* Reset items in plugin
*/
.nmx-plugin * {
  box-sizing: border-box;
  border: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Clears */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/* ---------------------------
/* Tabs
*/
#nmx-tabs-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  line-height: 100%;
  overflow: hidden;
  margin: 0;
  text-transform: uppercase;
  position: relative;
}

  #nmx-tabs-nav:after {
    clear: both;
    content: "";
    display: block;
  }

.nmx-tab {
  cursor: pointer;
  display: inline-block;
  float: left;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 15px;
  text-transform: uppercase;
  opacity: 0.5;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: none;
  white-space: nowrap;
}

  .nmx-tab.active,
  .nmx-tab:hover {
    opacity: 1;
  }

  .nmx-tab span {
    display: block;
  }

/* ---------------------------
/* Tabs content
*/
.nmx-tab-content {
  border-top: none;
  position: relative;
}

.nmx-owl-carousel-products {
  margin-left: -15px;
  margin-right: -15px;
  padding: 30px 0;
  width: auto;
}

  .nmx-tab-content + .nmx-tab-content.inactive {
    /**
     * Hide all tabbed content areas besides the
     * first one.
     */
    display: none !important;
  }


/* ---------------------------
/* Carousel Buttons
*/
.owl-carousel .owl-controls {
  margin-top: 0;
}

.owl-carousel.products {
  overflow: visible;
}

.nmx-owl-carousel-products .owl-item div.nmx-product {
  clear: none !important;
  float: none;
  width: auto;
  margin: 0;
  padding: 0 15px;
  width: auto !important;
}

  /* buttons */
  .nmx-owl-carousel-products .owl-buttons {
    margin-top: 0;
    position: absolute;
    right: 15px;
    top: -37px;
  }

    .nmx-owl-carousel-products .owl-controls > div {
      text-decoration: none;
    }

      /* prev/next */
      .nmx-owl-carousel-products .owl-prev,
      .nmx-owl-carousel-products .owl-next {
        color: #fff;
        height: 30px;
        width: 30px;
        position: relative;
        text-decoration: none;
        text-indent: -9999px;
        border: 1px solid rgba(0, 0, 0, 0.2);
      }

      .nmx-owl-carousel-products .owl-prev:hover,
      .nmx-owl-carousel-products .owl-next:hover {
        background: rgba(0, 0, 0, 0.1);
      }

      .nmx-owl-carousel-products .owl-prev:before,
      .nmx-owl-carousel-products .owl-next:after {
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }

      .nmx-owl-carousel-products .owl-prev:before {
        border-width: 6px 10.4px 6px 0;
        border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
      }

      .nmx-owl-carousel-products .owl-next:after {
        border-width: 6px 0 6px 10.4px;
        border-color: transparent transparent transparent rgba(0, 0, 0, 0.8);
      }

      .nmx-owl-carousel-products .owl-prev.disabled,
      .nmx-owl-carousel-products .owl-next.disabled {
        text-decoration: none;
      }

      .nmx-owl-carousel-products .owl-prev {
        float: left;
        margin-right: 9px;
      }

      .nmx-owl-carousel-products .owl-next {
        float: right;
      }

      .nmx-owl-carousel-products .disabled {
        opacity: .3;
        text-decoration: none;
        cursor: normal
      }

  /* pagination */
  .nmx-owl-carousel-products .owl-pagination {
    margin-top: 21px;
    display: none;
    text-align: center;
  }

    .nmx-owl-carousel-products .owl-controls .owl-page {
      height: 8px;
      width: 8px;
      display: inline-block;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.2);
      opacity: 1;
    }

    .nmx-owl-carousel-products .owl-controls .owl-page + .owl-page {
      margin-left: 6px;
    }
    
    .nmx-owl-carousel-products .owl-controls.clickable .owl-page.active,
    .nmx-owl-carousel-products .owl-controls.clickable .owl-page:hover {
      background-color: rgba(0, 0, 0, 0.9);
    }

    .nmx-owl-carousel-products .owl-controls.clickable .owl-page.active {
      cursor: default;
    }

/* ---------------------------
/* Lazy loading
*/
.nmx-lazy-wrapper {
  position: relative;
  display: block;
}

.nmx-lazy-loading {
  display: none; /* if should appear only if it's a lazy load image */
}

  .nmx-lazy-wrapper .nmx-lazy-loading {
    background: url(../images/nmx-loading.svg) no-repeat center;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
  }

  .nmx-lazy-wrapper .lazyloaded + .nmx-lazy-loading {
    display: none;
  }

/* ---------------------------
/* Products
*/
.nmx-product {
  padding: 0px 15px;
  overflow: hidden;
  padding: 0px 15px;
  position: relative;
}

  /* images */
  .nmx-product-image a {
    display: block;
    margin-bottom: 0 !important;
  }

    .nmx-product-image img {
        display: block !important;
        margin: 0 auto;
        max-width: 100%;
        height: auto;
    }

  /* bagdes */
  .nmx-product-badge {
    position: absolute;
    z-index: 1;
  }
    
    .nmx-product-badge span {
      border: 2px solid #fff;
      border-left: none;
      border-top: none;
      float: left;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      height: 24px;
      line-height: 22px;
      padding: 0 10px;
      vertical-align: top;
    }

    .nmx-product-badge .badge-sale {
      background: #d81f26;
    }

    .nmx-product-badge .badge-new {
      background: #3b859e;
    }

    .nmx-product-badge .badge-free {
      background: #2e3233;
    }

  .nmx-products-list *:not(.nmx-product-badge) + .nmx-product-image {
    margin-top: 5px;
  }

  /* title */
  .nmx-product-title,
  .nmx-product-title strong {
    margin: 6px 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.3;
    display: block;
  }

  .nmx-product-title strong {
    margin: 0;
  }

    .nmx-product-title a {
      color: inherit;
      display: block;
      text-decoration: none;
    }

  /* stars */
  @font-face {
    font-family: 'hp-stars-icomoon';
    src:
      url('../fonts/hp-stars-icomoon.ttf?e3v47s') format('truetype'),
      url('../fonts/hp-stars-icomoon.woff?e3v47s') format('woff'),
      url('../fonts/hp-stars-icomoon.svg?e3v47s#hp-stars-icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
  }

  [class^="nmn-icon-"], [class*=" nmn-icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'hp-stars-icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .nmn-icon-extra-icon-star-empty:before {
    content: "\e9d7";
  }
  .nmn-icon-extra-icon-star-half:before {
    content: "\e9d8";
  }
  .nmn-icon-extra-icon-star-full:before {
    content: "\e9d9";
  }

  /* custom stars (5 stars review) */
  .nmn-icon-star-review:before {
    content: "\e9d9\e9d9\e9d9\e9d9\e9d9";
  }

  .nmn-icon-star_outline-review:before {
    content: "\e9d7\e9d7\e9d7\e9d7\e9d7";
  }

  .nmx-rating-wrap {
    line-height: 100%;
    margin-bottom: 7px;
    max-height: 20px;
  }

    .nmx-rating-wrap > span {
      float: left;
      position: relative;
    }

    .nmx-rating-wrap .review-stars,
    .nmx-star-rating a /* write reviews */ {
      color: #e8760c;
      font-size: 18px;
      margin-right: 5px;
    }

      .nmx-rating-wrap .review-stars-off {
        letter-spacing: 1px;
      }

      .nmx-rating-wrap .review-stars-on {
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
      }

    .nmx-rating-wrap .review-qty {
      font-size: 12px;
      top: 2px;
    }

  /* price */
  .nmx-product-price {
    display: block;
    font-weight: bold;
    overflow: hidden;
    line-height: 100%;
  }

    .nmx-product-price:empty {
      display: none;
    }

    .nmx-product-price > span:first-child {
      margin-top: 0;
    }

    .nmx-product-price br {
      display: none;
    }

    .nmx-product-price .normalprice,
    .nmx-product-price .nmx-product-price s {
        font-weight: normal;
        text-decoration: line-through;
    }

    .nmx-product-price .productSpecialPrice,
    .nmx-product-price .productSpecialPriceSale,
    .nmx-product-price .productPriceDiscount {
      font-weight: bold;
    }
    
    .nmx-product-price .productSalePrice,
    .nmx-product-price .productPriceDiscount,
    .nmx-product-price .button_sold_out_sm {
        clear: both;
        display: block;
        font-size: 12px;
        margin-top: 2px;
    }

    .productSalePrice + .productPriceDiscount {
      margin-top: 0;
    }


/* ---------------------------
/* Carousel
*/
.nmx-hp-product-carousels {
  margin: 42px 0; }


/* ---------------------------
/* Plugin responsiveness
*/

@media only screen and (max-width: 1032px) {
  .nmx-owl-carousel-products {
    padding: 21px 0;
  }
  
}

@media only screen and (max-width: 670px) {
  .nmx-owl-carousel-products .owl-buttons {
    display: none;
  }

  .nmx-owl-carousel-products .owl-pagination {
    display: block;
  }
}

@media only screen and (max-width: 530px) {
      
    .nmx-hp-product-carousels {
      margin-bottom: 30px;
      margin-top: 30px;
    }

}

@media only screen and (max-width: 480px) {

  .nmx-tab {
    font-size: 14px;
    padding: 10px 10px;
  }
  
}

@media only screen and (max-width: 413px) and (min-width: 320px) {

  .nmx-tab {
    font-size: 12px;
    display: table-cell;
    float: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
}

@media only screen and (max-width: 319px) {

  .nmx-tab {
    display: none;
    font-size: 14px;
  }

  .nmx-tab.active {
    display: block;
  }
  
}