/** Shopify CDN: Minification failed

Line 17:0 Unexpected "$"
Line 33:20 Unexpected "{"
Line 33:29 Expected ":"
Line 33:42 Unexpected ";"
Line 33:44 Comments in CSS use "/* ... */" instead of "//"
Line 34:20 Unexpected "{"
Line 34:29 Expected ":"
Line 34:42 Unexpected ";"
Line 35:20 Unexpected "{"
Line 35:29 Expected ":"
... and 240 more hidden warnings

**/
/* Static color */
$black:              #000000;
$white:              #ffffff;
$product-title-color:#0062bd;
$link-hover-color:   #ce1d76;
$color-fa:           #7c7c7c;
$color-title:        #333e48;
$color-note:         #5bb300;
$other-color:        #343f49;
$bg-hover:           #ececec;
$bg-black:           #eeeeee;
$bg-other:           #bcbcbc;
$bg-light:           #f5f5f5;
$border-light:       #ececec;
$border-main:        #eaeaea;

/*Main Color*/
$main-color:       {{settings.main_color}}; //#fed700;
$logo-color:       {{settings.logo_color}};
$logo-color-hover: {{settings.logo_hover_color}};
$logo-size:        {{settings.logo_size}};

{% unless settings.image_blance_width == blank %}
$image_width: {{ settings.image_blance_width }};
{% else %}
$image_width: 250;
{% endunless %}

{% unless settings.image_blance_width == blank %}
$image_height: {{ settings.image_blance_height }};
{% else %}
$image_height: 250;
{% endunless %}

/* Font */
$font-heading:   '{{settings.header_font_1 }}', Arial, Helvetica, sans-serif;
  $font-nav:       '{{settings.nav_font }}', Arial, Helvetica, sans-serif; // 14px;
  $font-standard:  '{{settings.general_font_1}}', Arial, Helvetica, sans-serif;
  $body-font-size: {{settings.body_font_size}}; // 15px;
$font-small:  13px;
$font-medium: 15px;
$font-custom: 25px;
$size-h1:     26px;
$size-h2:     24px;
$size-h3:     22px;
$size-h4:     20px;
$size-h5:     18px;
$size-h6:     16px;


/* Header */
$header-top-background:       {{settings.header_top_background}}; //#f8f8f8;
$color-top-bar:       {{settings.header_top_color}};
$header-bg:           {{settings.header_bg}}; //#ffffff;

/* Navigation */
$nav-font-size:                 {{settings.nav_size}}; //15px;
$nav-link-color:                {{settings.nav_link_color}}; //#333e48;
$nav-link-hover-color:          {{settings.nav_hover_color}};//#df3737;
$nav-dropdown-background:       {{settings.dropdown_bg_color}}; //#fff;
$nav-dropdown-link-color:       {{settings.dropdown_item_color}}; //#333e48;
$nav-dropdown-link-hover-color: {{settings.dropdown_item_color_hover}}; //#df3737;

/* Body */
$body-background-color:        {{settings.body_bg}}; //#ffffff;
$body-label-deal-color:      {{settings.heading_limited_offers_color}}; //#383838;
$body-label-deal-background: {{settings.heading_limited_offers_bg}}; //#e6e6e6;

$body-label-sale-color:      {{settings.saleoff_color}}; //#ffffff;
$body-label-sale-background: {{settings.saleoff_bg_color}}; //#343f49;


$body-general-color:    {{settings.body_general_color}}; //#686c6f;
$body-title-color:      {{settings.body_title_color}}; //#333e48;
$body-link-color:       {{ settings.body_link_color }}; //#333e48
$body-border-color:     {{settings.body_border_color}}; //#ddd;

$body-product-title:        {{settings.product_title_color}}; //#0062bd;
$body-price-color:          {{settings.product_price_color}}; //#343f49;
$body-price-sale-color:     {{settings.product_sale_price_color}}; //#ee0000;
$body-price-sold-out-color: {{settings.product_sold_out_price_color}}; //#848484;
/* Footer */
$footer-background-color:  {{settings.footer_bg}}; //#f8f8f8;
$footer-title-color:       {{ settings.footer_title_color }}; //#333e48;
$footer-static-text-color: {{ settings.footer_text_color }}; //#333e48;
$footer-link-color:        {{settings.footer_color}}; //#333e48;
$footer-hover-color:       {{settings.footer_color_hover}};// #df3737;

/* Button Default*/
$button-btn1:         {{settings.btn1_bg}}; //#fed700;
$button-btn1-txt:     {{settings.btn1_txt}}; //#333e48;
$button-btn1-border:    {{settings.btn1_border}}; //#fed700;
$button-hover-btn1:     {{settings.btn1_bg_hover}}; //#333e48;
$button-hover-btn1-txt:   {{settings.btn1_txt_hover}};//#ffffff;
$button-hover-btn1-border:  {{settings.btn1_border_hover}}; //#333e48;

/* Button Primary*/
$button-btn2:         {{settings.btn2_bg}}; //#e6e6e6;
$button-btn2-txt:     {{settings.btn2_txt}}; //#ffffff;
$button-btn2-border:    {{settings.btn2_border}}; //#e6e6e6;
$button-hover-btn2:     {{settings.btn2_bg_hover}}; //#fed700;
$button-hover-btn2-txt:   {{settings.btn2_txt_hover}}; //#333e48;
$button-hover-btn2-border:  {{settings.btn2_border_hover}}; //#fed700;

@mixin CSStransform2D($x, $y){
  transform: scale($x, $y);
  -moz-transform: scale($x, $y);
  -webkit-transform: scale($x, $y);
  -ms-transform: scale($x, $y);
  -o-transform: scale($x, $y);
}

@mixin after(){
  content:"";
  width: 0px;
  height: 3px;  
  @include ab(n,0,0,0);
  margin: auto;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;

}

@mixin button1(){
  text-align: center;      
  padding: 10px 30px;
  line-height: 27px;    
  background: $button-btn1;
  color: $button-btn1-txt;  
  border: 1px solid $button-btn1-border;   
  @include CSStransition(all, 0.3s, ease-in-out, 0s);  
  @include border-radius(20px, 20px, 20px, 20px);
  &:hover{       
    text-decoration: none;    
    background: $button-hover-btn1;
    color: $button-hover-btn1-txt;
    border-color: $button-hover-btn1-border;
  }
}

@mixin button2(){
  text-align: center;      
  padding: 10px 30px;
  line-height: 27px;
  background: $button-btn2;
  color: $button-btn2-txt;  
  border: 1px solid $button-btn2-border;    
  @include CSStransition(all, 0.3s, ease-in-out, 0s);
  @include border-radius(20px, 20px, 20px, 20px);
  &:hover{
    background: $button-hover-btn2;       
    text-decoration: none;
    color: $button-hover-btn2-txt;
    border-color: $button-hover-btn2-border;
  }
}

@mixin upper-spacing {
  letter-spacing: 1px;
  text-transform: uppercase;
}

@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
  -ms-transform: translate($x, $y); // IE9+
  -o-transform: translate($x, $y);
  transform: translate($x, $y);
}
@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
  -ms-transform: $shadow; // IE9+
  -o-transform: $shadow;
  box-shadow: $shadow;
}
// Transitions
@mixin transition($transition...) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}
@mixin transition-delay($transition-delay) {
  -webkit-transition-delay: $transition-delay;
  -moz-transition-delay: $transition-delay;
  -o-transition-delay: $transition-delay;
  transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration) {
  -webkit-transition-duration: $transition-duration;
  -moz-transition-duration: $transition-duration;
  -o-transition-duration: $transition-duration;
  transition-duration: $transition-duration;
}
@mixin transition-transform($transition...) {
  -webkit-transition: -webkit-transform $transition;
  -moz-transition: -moz-transform $transition;
  -o-transition: -o-transform $transition;
  transition: transform $transition;
}
@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
  transform: translate3d($x, $y, $z);
  -ms-transform: translate3d($x, $y, $z);
  -o-transform: translate3d($x, $y, $z);
} 
@mixin border-radius($tl, $tr, $br, $bl) {
  border-radius: $tl $tr $br $bl;
  -moz-border-radius: $tl $tr $br $bl;
  -webkit-border-radius: $tl $tr $br $bl;
}
@mixin opacity ( $value ) {
  opacity: $value; 
}

@mixin CSStransition($type, $duration, $ease, $delay) {
  -moz-transition: $type $duration $ease $delay;
  -webkit-transition: $type $duration $ease $delay;
  -ms-transition: $type $duration $ease $delay;
  -o-transition: $type $duration $ease $delay;
  transition: $type $duration $ease $delay;
}
@mixin skew($x, $y) {
  -webkit-transform: skew($x, $y);
  -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
  -o-transform: skew($x, $y);
  transform: skew($x, $y);
}

@mixin spritePos($x, $y, $w, $h) {
  background-image: url({{'icon.png' | asset_url}});
  background-position: $x $y;
  background-repeat: none;
  width: $w;
  height: $h;
}

@mixin ab($t, $l, $b, $r) {
  position: absolute;
  display: block;
  @if $l != n { left: $l; }
  @if $t != n { top: $t; }
  @if $r != n { right: $r; }
  @if $b != n { bottom: $b; }
}

@mixin rotateY($degree) {
  -moz-transform:    rotateY($degree);
  -webkit-transform: rotateY($degree);
  -o-transform:      rotateY($degree);
  transform:         rotateY($degree);
}

@mixin rotateX($degree) {
  -moz-transform:    rotateX($degree);
  -webkit-transform: rotateX($degree);
  -o-transform:      rotateX($degree);
  -ms-transform:      rotateX($degree);
  transform:         rotateX($degree);
}

//transform origin
@mixin transform-origin($origin) {
  moz-transform-origin:     $origin;
  -o-transform-origin: $origin;
  -ms-transform-origin: $origin;
  -webkit-transform-origin: $origin;
  transform-origin:   $origin;
}

@mixin before {
  @include transition-duration(0.35s);
  @include CSStransition(all, 0.35s, ease, 0s);
  background-color: rgba(0, 0, 0, 0.1);
  content: "";
  height: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  top: 0; 
  bottom: 0;   
  width: 0;      
}

@mixin hover-before {
  height: 100%;
  width: 100%;
}

@mixin border-radius-circle {
  @include border-radius(50%, 50%, 50%, 50%);
}
@mixin border-radius-20px {
  @include border-radius(20px, 20px, 20px, 20px);
}
@mixin border-radius-05px {
  @include border-radius(5px, 5px, 5px, 5px);
}
@mixin border-radius-25px {
  @include border-radius(25px, 25px, 25px, 25px);
}
{% comment %} -------------- variables.scss --------------------{% endcomment %}

@keyframes moveFromLeft{  
  from{ left: -9000px;}
  to{ left: 0;}
}
@keyframes moveFromRight{  
  from{ right: -9000px;}
  to{ right: 0;}
}
@keyframes moveFromTop{  
  from{ top: -5000px;}
  to{ top: 0;}
}
@keyframes moveFromBottom{  
  from{ bottom: -5000px;}
  to{ bottom: 0;}
}

@-webkit-keyframes moveFromLeft{  
  from{ left: -9000px;}
  to{ left: 0;}
}
@-webkit-keyframes moveFromRight{  
  from{ right: -9000px;}
  to{ right: 0;}
}
@-webkit-keyframes moveFromTop{  
  from{ top: -5000px;}
  to{ top: 0;}
}
@-webkit-keyframes moveFromBottom{  
  from{ bottom: -5000px;}
  to{ bottom: 0;}
}

@keyframes slidenavAnimation{
  from{margin-top:-30px;opacity:0}
  to{margin-top:0;opacity:1}
}
@-webkit-keyframes slidenavAnimation{
  from{margin-top:-30px;opacity:0}
  to{margin-top:0;opacity:1}
}

{% comment %} -------------- style.scss --------------------{% endcomment %}

body{    
  font-family: $font-standard; 
  font-size: $body-font-size;
  line-height: 1.3;
  color: $body-general-color;
  font-weight: 400;
}
#page-body{
  background: $body-background-color;  
}
a{
  color: $body-link-color;
  &:hover, &:focus{
    color: $main-color;
    text-decoration: none;
  }
}
i.left {margin-right: 7px;}
i.right {margin-left: 7px;}
html, button, input, select, textarea{ font: 14px/1.35 $font-standard; }
button {
  outline: none;
}
input, textarea, select,
.form-control {
  &:focus {
    outline:none;     
    background: #eaeaea;
    border-color: $border-main;
    @include box-shadow(0 0 0 $white);
  }
}
p{  
  line-height: 20px;
}
.heatmap {
  width: 100%;
  height: 100%;
  position: absolute!important;
  z-index: 10;
  opacity: 0;
  display: none;
}
.boxes {
  @include box-shadow(0 0 8px #ddd);   
  &.header-content {
    @include box-shadow(0 0 0px #ddd);  
  }
  &#footer-content {
    max-width: 100%;
    @include box-shadow(0 0 0px #ddd);  
  }
}
.boxes-wrapper {
  position: relative; 
}

.boxes-wrapper {
  {% if settings.general_placement == 'boxes' and settings.boxes_mode_bg == 'image' %}
  background: url({{ 'body_bg_image.jpg' | asset_url }}) repeat fixed transparent;
  {% else %}
  background-color: {{settings.body_bg_color}};
  {% endif %}
}

.btn-1{
  @include button1();
  display: inline-block;
}

.btn-2{
  @include button2();
  display: inline-block;
}
.spr-badge-caption {
  display: none;
}
/*site loading*/
@keyframes "loading"{
  from{left: 0;}
  to{left: 100%;}
}
@-moz-keyframes loading {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}
@-webkit-keyframes "loading" {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}
@-ms-keyframes "loading" {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}
@-o-keyframes "loading" {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}

.load-complete {
  position: fixed;
  background: #fff;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 2px;
  bottom: 0;
  z-index: 100001;
  .load-position {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 999;
    right: 0;
    margin-top: -100px;
    h6 {
      text-align: center;
      color: #000;
      font-size: 12px;
      font-weight: 400;
      font-style: italic;
    }
  }
  .logo {
    color: #4C4C4C;
    text-align: center;
    display: block;
    margin-bottom: 20px;
    font-family: 'mission_scriptregular';
    font-size: 50px;
  }
  .loading-page {
    position: absolute;
    width: 100%;
    height: 1px;
    margin: 20px auto;
    left: 0;
    right: 0;
    .loading-line {
      position: absolute;
      background: $border-light;
      width: 100%;
      height: 2px;
    }
    .loading-break {
      position: absolute;
      background: $main-color;
      width: 15px;
      height: 2px;
      &.loading-dot-1 {
        -webkit-animation: loading 2s infinite;
        -moz-animation: loading 2s infinite;
        -ms-animation: loading 2s infinite;
        -o-animation: loading 2s infinite;
        animation: loading 2s infinite;
      }

      &.loading-dot-2 {
        -webkit-animation: loading 2s 0.5s infinite;
        -moz-animation: loading 2s 0.5s infinite;
        -ms-animation: loading 2s 0.5s infinite;
        -o-animation: loading 2s 0.5s infinite;
        animation: loading 2s 0.5s infinite;
      }
      &.loading-dot-3 {
        -webkit-animation: loading 2s 1s infinite;
        -moz-animation: loading 2s 1s infinite;
        -ms-animation: loading 2s 1s infinite;
        -o-animation: loading 2s 1s infinite;
        animation: loading 2s 1s infinite;
      }
    }
  }
}

/* header ----------------*/
.header-content{
  position: relative;
    /* background-image: url(/cdn/shop/files/Main-top-BG__webp.webp?v=1718690888); */
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
  .top-bar {
    background-color: $header-top-background;
    border-bottom: 0px solid $border-main; 
    padding: 0px 0;
    font-size: $font-small;
    .top-bar-contact {
      list-style: none;
      > li {
        display: inline-block;          
        padding: 0 15px;
        line-height: 28px;   
        color: $color-top-bar;       
        .icon {            
          line-height: 28px;                 
          &:before {
            margin: 0 7px 0 0px;          
            line-height: 28px;
            position: relative;
            top: 4px;
          }          
          &.main-color {
            color: $main-color;
            font-size: $size-h6;
          }
        }           
        &:first-child {          
          padding-left: 0 !important;
          border-left: none;          
        }
      }
    }    
  }
  .top-bar-right {
    font-size: $font-small;
    text-align: center;
    > ul {
      > li {
        padding: 0 15px;    
        position: relative;
        &:before {
          content: '';
          height: 15px;
          width: 1px;
          background: #cad5d5;
          position: absolute;
          right: 0;
          top: 7px;
          display: block;
          @include ab(7px, n, n, 0);
        }    
        .dropdown-menu {
          padding-top: 5px;
          padding-bottom: 5px;           
          min-width: 100px;
          @include border-radius(0, 0, 5px, 5px);
        }
        .icon {            
          margin: 0 7px 0 0px;
          color: #ffffff;
          font-size: $size-h6;         
          line-height: 28px;
          &:before {
            position: relative;
            top: 3px;
            line-height: 28px;
          }
        }      
        > a {
          display: inline-block;
          font-size: $font-small;
          line-height: 28px;
          padding: 0;
          color: $color-top-bar;
          &:hover {
            color: #ecb800;
            text-decoration: none;
            .icon {
              color: #ecb800;
            }
          }          
        }
        .customer-or {
          display: inline-block;
          padding: 3px 0;
          color: #ffffff;
        }
        &:last-child {
          padding-right: 0;
          &:before {
            content: none;
          }                    
        }
      }
    }
  }    
  .currency { 
    margin: 0px; 
    position: relative;
    &:hover {
      .dropdown-menu {
        display: block !important;
        margin-top: 8px;
        &:after {
          content: '';
          display: block;
          height: 12px;
          width: 100%;
          @include ab(-11px, 0, n, n);
        }
      }     
    }
  }  
  .header-contact-box {  
    float: right;
    width: auto;
    top:15px;
    .icon {
      float: left;
      color: $main-color;
      font-size: 45px;
      max-height: 54px;
      line-height: 54px;
      overflow: hidden;
      margin: 0 15px 0 0;
      &:before {
        position: relative;
        top: 3px;
      }
    }
    .contact-box-list {
      list-style: none;
      padding: 6px 0;
      float: left;
      li {
        display: block;
        list-style: none;
        color: $color-title;
        line-height: 1.4;
      }
    }
  }    
  .top-cart-row-container {
    padding: 0px;
    margin: 2px 0 0;
    text-align: right;
  }
  .wishlist-checkout-holder {
    display: inline-block;
    font-size: 13px;
    line-height: 24px;
    margin: 0;
    text-transform: capitalize;
    vertical-align: top;
    text-align: left;
    > div {     
      display: inline-block;
      a {   
        display: inline-block;   
        .icon {
          color: $button-btn1-txt;
          font-size: $size-h2;
          display: block;
          line-height: 54px;
          &:before {
            position: relative;
            top: 3px;
          }
        }
        &:hover {
          .icon {
            color: $white;
          }
        }
      } 
      &.compare-target {
        position: relative;
        margin: 0 25px 0 0;
        .compare-icon {
          @include ab(n, n, 8px, -10px);
          @include border-radius-circle;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: $button-btn1-txt;
          font-weight: 700;
        }
      }
      &.wishlist-target {
        position: relative;
        margin: 0 25px 0 0;
        .number {
          @include ab(n, n, 8px, -10px);
          @include border-radius-circle;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: $button-btn1-txt;
          font-weight: 700;
        }
      }
    }    
  }
  .top-cart-holder {
    display: inline-block;
    text-align: left;   
    .cart-target {   
      font-size: $font-medium;
      font-weight: 700;   
      position: relative;      
      padding: 0;
      line-height: 54px;
      .icon {
        color: $button-btn1-txt;
        font-size: $size-h2;
        margin: 0 10px 0 0;          
        line-height: 54px;
        display: inline-block;
        font-weight: normal;
        &:before {
          position: relative;
          top: 3px;
        }
      }
      .n-item {
        background: #333e48;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        display: block;
        @include border-radius-circle;
        @include ab(n, 10px, 10px, n);
      }
      &:hover {
        .dropdown-menu {
          display: block;
        }
      }
    }
    .basket {
      cursor: pointer;
      color: #333e48;
      &:hover,
      &:focus {
        color: #333e48;
      }
    }
    .basket-item-count {
      display: inline-block;
      position: relative;
      vertical-align: top;
      .cart-icon {
        @include border-radius-circle;
        background: $main-color;
        color: $white;
        font-size: 12px;
        font-weight: 700;
        height: 21px;
        line-height: 21px;
        position: absolute;
        right: 12px;
        text-align: center;
        top: 5px;
        width: 21px;
      }
    }
    .total-price-basket {
      display: inline-block;
      margin: 0 0 0 5px;
      text-transform: capitalize;
      vertical-align: top;
      .lbl {
        color: $other-color;
        display: block;
        font-size: 14px;
        line-height: 21px
      }
      .main-color {
        font-size: 22px;
        font-weight: 700;
        color: $main-color;
      }
      .ajax-total {
        @media(max-width: 767px) {
          position: absolute;
          right: 0;
          bottom: 6px; 
        }
      }
    }
  }
  .header-middle {
    padding: 5px 0 0;    
    .middle-content {
      position: relative;      
    }
  }    
  .searchbox {
    position: relative;   
    .navbar-form {
      height: 50px;     
      margin: 5px 0 5px auto;
      padding: 0px;
      position: relative;
      display: block;
      border: none;
      background: $white;
      @include border-radius-25px;
    }
    .form-control {
      width: 100%;     
      height: 50px;
      padding: 15px 60px 15px 30px;          
      border: none; 
      line-height: 20px; 
      background: none;
      box-shadow: inset 0 0 #fff;
      background-color: white;
      border-radius: 25px;
      @include box-shadow(inset 0 0 0 #fff);
      &:hover,
      &:focus {
        @include box-shadow(0 0 0 #fff);
        background: none;
        background-color: white;
      }
    }
    button.search-icon {
      border: none;
      @include border-radius(0, 25px, 25px, 0);
      @include ab(0px, n, n, 0px);
      @include CSStransition(all, 0.3s, ease-in-out, 0s);
      width: 75px;
      min-width: 75px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      padding: 0;
      margin :0;
      position: absolute;
      right: 0px;
      background: #333e48;
      color: #FFFFFF;
      border-radius: 0px 25px 25px 0px;
      &:hover {
        background: black;
        border-color: black;
        color: white;
      }
      i.icon-search {
        font-size: 20px;
        display: block;
        line-height: 50px;
        text-align: center;
        width: 100%;
        &:before {
          font-size: $size-h4;
          display: block;
          line-height: 50px;
          text-align: center;
          width: 100%;
        }
      }
    }
    #result-ajax-search {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;      
      padding: 0px;        
      display: none;
      z-index: 12;         
      ul {
        margin: 10px 0 0 0;
        max-height: 520px;
        overflow: auto; 
        background: white;   
        border-top: 2px solid #ecb800;
        @include border-radius(0, 0, 10px, 10px);
        @include box-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        width: 100%;

        /* &:before {
          content: "\f0d8";
          @include ab(-3px, 48%, n, n);
          color: $main-color;
          font-size: 18px;
          font-family: FontAwesome;        
        } */
        li {
          display: block;
          overflow: hidden;
          padding: 15px 10px;
          .search-item-img {
            float: left;
            margin: 0px 15px 0 0;            
          }
          .search-item-title {
            display: block;
            margin: 0 0 5px;
            color: $product-title-color;
            font-weight: 700;
            font-size: $font-medium;
            .marked {
              color: $main-color;
            }
            &:hover {
              color: $main-color;
            }
          }
          p {
            color: $body-price-color;
            font-weight: 700;
            margin: 0;
            padding: 20px;
          }
          .price-sale,
          .price-compare {
            display: inline-block;
            line-height: 10px;
          }
          &:hover {
            background: $bg-black;
          }
        }
      }
    }    
  }
  .header-nav{
    > .container{
      position: relative;
    }
    .navigation{ 
      padding: 0 200px;
      width: 100%;
    }   
  }
  .header-bottom {    
    .top-categ  {
      > span {
        display: block;        
        padding: 10px 15px;
        line-height: 25px;
        color: $white;
        font-size: $size-h4;
        text-transform: uppercase;
      }
    }
  }
  .topmenu {
    .list-topmenu {
      > li { padding: 0; margin: 0;
        > a {
          display: inline-block;
          padding: 10px;
          line-height: 25px;

          font-size: $size-h6;
          text-transform: uppercase;
        }
        &:hover {
          > a {
            background-color: rgba(0, 0, 0, 0.3);
          }
        }
      }
    }
  }   
  .header-logo {       
    margin: 0px auto;        
    .logo {      
      color: $main-color;
      display: inline-block;
      vertical-align: middle;           
    }    
    .logo-site {      
      color: $logo-color;   
      font-size: $logo-size;
      line-height: 0.5;       
      vertical-align: middle;
      display: inline-block;
      max-height: 100%;
      max-height: 100%;     
      &:hover {
        color: $logo-color-hover;
      }
    }
  }
  .search-content{
    padding: 54px 15px;
    text-align: right;
    .search-form{
      border: 1px solid $body-border-color;
      text-align: left;
      display: inline-block;
      width: 100%;
      .search-select-wrapper{
        display: inline-block;
        padding: 20px 15px 21px;
        position: relative;

        &:after{
          content: "";
          @include ab(18px,n,n,0);
          width: 1px;
          height: 20px;
          background-color: $white;
        }

        > a{          
          i{
            margin: 0 5px;
          }
          > i{
            margin-left: 10px;
          }
          &:hover{
            text-decoration: none;
          }
        }

        .search-select{
          border: 1px solid $white;
          width: 100%;
          left: -1px;
          min-width: 130px;
          li{
            &:hover, &.active{
              a{
                background-color: $white;
                color: #fff;
              }
            }            
          }
        }

        &:hover{
          .search-select{
            display: block;            
          }
        }
      }
      .search-submit{
        border: 0;
        background: 0;
        color: $body-link-color;
        @include ab(-2px,n,n,5px);
        font-size: 14px;
        width: 32px;
        height: 48px;
        line-height: 44px;
      }
    }
  } 
  .sticky-logo {
    display: none;
  }  
  /*stick menu*/
  .header-fixed {    
    position: fixed;
    z-index: 1030; 
    left: 0;
    right: 0;
    top: 0;
    padding: 0;
    @include box-shadow(0 0 10px #ddd);
    border-bottom: 1px solid $border-main;
    background: $nav-dropdown-background;
    .header-contact-box {
      display: none;
    }
    .header-logo {      
      height: 52px;
      position: relative;      
      vertical-align: middle;
      padding-top: 2px;
      padding-bottom: 2px;
      .logo {
        display: inline-block;
        vertical-align: middle;
        max-height: 48px;
      }
    }
    .horizontal-menu-container {
      width: auto;
    }
  }
}
.header-bot {
   /* background-image: url(https://cdn.shopify.com/s/files/1/2395/9741/files/main-menu-BG.png?v=1708951176); */
    background-size: cover;
    background-position: center;
    background-repeat: repeat-x;
    position: relative;
   /* z-index: 3;*/
  background-color: #ecb800;
}
.navigation {
  .head {
    background: $main-color;
    color: $button-btn1-txt;
    padding: 15px 20px;
    line-height: 30px;
    font-weight: 700;
    font-size: $size-h6;
    text-transform: capitalize;
    @include border-radius(10px, 10px, 10px, 10px);
    display: block;
    position: relative;  
    cursor: pointer; 
    .icon {
      float: left;
      line-height: 30px;
      margin: 0 10px 0 0;
      &:before {
        display: block;
        line-height: 30px;
      }
    }
  }
  &.opened {
    .head {
      @include border-radius(10px, 10px, 0px, 0px);
    }
    .navbar {
      display: block;     
      width: 100%;
      @include ab(100%, 0, n, n);
      z-index: 102;
      &:before {
        content: none;

      }
    }
  }  
}
.horizontal-menu-container {
  position: static;  
}
.horizontal-menu {    
  display: inline-block; 
  float: left;  
  .navigation {
    position: static;
    .navbar .navbar-collapse {
      .main-nav {
        border: none;     
        position: static;               
        display: inline-block;
/*         padding: 0px 340px; */
        background: #4A4A4A;
        @include border-radius(0, 0, 0, 0);
        > li {
          display: inline-block;        
          float: left;        
          > a {
            padding: 15px 0px;
            line-height: 22px;
            font-weight: 700; 
            font-size: $nav-font-size;  
            color: #fff; 
            border: none; 
            display: inline-block;
            &:hover {
              margin: 0;
              color: $nav-link-hover-color; 
              background: none;         
            }       
          }
          > .expand {
            position: static;
            width: 20px;
            display: inline-block;
            .fa {
              &:before {
                content: "\f107";
                font-family: FontAwesome;
                color: #fff;
                display: inline-block;   
                font-size: 14px; 
              }
            }
          }

          &.dropdown {                                  
            &:hover,                    
            &.hover {
              > a { 
                position: relative;
                &:after {
                  content: "\f0d8";
                  @include ab( n, 45%, -9px, n);
                  color: $main-color;
                  font-size: 14px;
                  font-family: FontAwesome;
                }
              }
              > .dropdown-menu {
                top: 100%;
                left: 0px !important; 
                display: block !important;
              }
            }
            &.mega-menu {
              position: static;
              &:hover,                    
              &.hover {
                > a { 
                  position: relative;                
                  &:after {
                    content: "\f0d8";
                    @include ab( n, 0%, -9px, n);
                    color: $main-color;
                    width: 100%;
                    text-align: center;
                    font-size: 14px;
                    font-family: FontAwesome;
                    z-index: 2;
                  }
                }
                > .dropdown-menu {                  
                  left: 0px !important; 
                  display: block !important;
                  top: 52px;
                }
              }

              > .dropdown-menu {
                left: 0px !important;                                               
                .dropdown-menu {
                  font-size: $body-font-size; 
                } 
                &.column-4 {
                  width: 100%;
                }
                &.column-3 {
                  width: 75%;
                }
                &.column-2 {
                  width: 50%;
                }
                &.column-1 {
                  width: 25%;
                }
              }
            }
            &:hover {
              background: none;
              > a {         
                margin: 0;
                color: $nav-link-hover-color; 
                background: none;                   
              }
            }         
          }
          &:hover,
          &.active {
            background: none;
            > a {         
              margin: 0;
              color: $nav-link-hover-color; 
              background: none;                                                    
            }
            > .expand {
              .fa {
                &:before {
                  color: $nav-link-hover-color;
                }
              }
            }
          }
        }
      }
    }
  }
}
.vertical-menu {  
  .sidemenu-holder {
    .navbar {     
      z-index: 5;
      width: 100%;
      @include ab(100%, 0, n, n);
      display: none;
      .navbar-collapse {
        position: relative;
        .main-nav > li {
          span.expand {
            position: relative;
            float: right;
            width: 25px;
            margin-top: -40px;
          }
          &.dropdown {
            position: static;
            > a {
              padding-right: 45px;
            }
            > .dropdown-menu {
              min-height: 462px;
              &:after {
                content: '';
                width: 5px;
                height: 100%;
                @include ab(0, -5px, n, n);                
              }
            }
          }
          &.mega-menu {
            .dropdown-menu .mega-sub-link > a {
              margin: 15px 0 10px;
            }
            > .dropdown-menu {
              padding: 20px 30px !important;
              li a {
                border: none;
                padding: 3px 0;
              }
            }
          }
        }
      }      
    }
  }
}
.container.header-desktop .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
}
  .container.header-desktop .webcast_header_text {
    text-align: center;
    background-image: url(/cdn/shop/files/Top-info-BG.webp?v=1746528718);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 17px 0px;
}
ul.contact-box-list a {
    color: #ffffff;
}
/* Sidebar cart ------------------------*/
.cart-sb.opened, .cart-dd{
  padding: 15px 0 10px;
  left: auto; right: 0px; 
  width: 335px; 
  text-align: center;
  @include border-radius(0, 0, 10px, 10px);
  &:after {
    content: "\f0d8";
    @include ab(-29px, n, n, 25px);
    margin: 0 auto;
    color: $main-color;
    font-size: 18px;
    font-family: FontAwesome;
  }
  #cart-info{    
    background: $white;
    padding: 0px; 
    max-height: 540px;
    overflow: auto;
    font-size: $body-font-size;
    text-align: left;
    .cart-item-empty {
      padding: 20px;
      font-weight: 400;      
      p{
        font-size: $body-font-size + 2px;
      }
    }

    h1{
      text-transform: none;      
      margin: 0px;
      padding: 15px 15px 0;
      font-weight: 400;
    }
    .items-inner {
      padding: 15px 0;
      margin: 0 25px;
      overflow: hidden;
      position: relative;
      border-bottom: 1px solid $border-main;
      .cart-item-image {
        float: left;
        margin: 0 15px 0 0;        
        max-width: 75px;       
      }
      .cart-close {
        @include ab(11px, n, n, 0);        
        font-size: 14px;
        line-height: 20px;
        .icon {
          margin: 0;
          font-size: 14px;
          line-height: 20px;
          color: $color-fa;
          &:before {
            line-height: 20px;
          }
          &:hover {
            color: $main-color;
          }
        }
      }
      .cart-item-title {
        margin: 0 20px 5px 0;
        line-height: 1.4;
        a {
          color: $body-product-title;
          &:hover {          
            color: $main-color;          
          }
        }        
      }
      .cart-item-price {
        color: $body-price-color;
        line-height: 1.5;       
      }
    }
    .subtotal{
      padding: 0;      
      margin: 0 25px;
      font-size: 20px;
      overflow: hidden;
      line-height: 54px;
      border-bottom: 1px solid $border-main;
      > span:first-child{        
        margin-right: 57px;     
        font-weight: 400;         
      }
      .cart-item-total-price{
        float: right;        
        font-weight: 700;
        color: $body-price-color;
      }

    }
    .action {
      padding: 15px 25px 11px;
      overflow: hidden;
      br {
        display: none;
      }
      button.btn { 
        float :right; 
        padding: 5px 15px;
        min-width: 50px;
        font-weight: normal;
      }
      a.btn {
        @include button2();        
        font-weight: normal;
        padding: 5px 15px;
        float: left;
        min-width: 50px;
        color: $button-btn1-txt;
      }
    }
  }
}

.cart-sb.opened{
  padding: 20px;
  #cart-info{
    border: 0;
    padding: 0;
  }
}
.navmenu-shopping-cart {
  .btn {min-width: 180px;}
}

/* Search sidebar -----------------------------*/
.search-sb{
  .title{
    margin-bottom: 20px;
  }

  #header-search{
    display: block;
    width: 100%;

    .search_box{
      width: 100%;
      padding-right: 35px;
    }

    button.search-submit {
      border: 0;
      background: 0;
      color: $body-link-color;
      @include ab(0px,n,n,5px);
      font-size: 20px;
      width: 32px;
      height: 32px;

    }
  }

  .search-results{
    width: 100%;

    .search-item-wrapper{
      clear: both;
      padding-top: 20px;

      .search-item-img{
        display: inline-block;
        float: left;
        margin-right: 20px;
        vertical-align: top;
      }

      .search-item-title{
        vertical-align: top;
      }
    }

  }
}

/* ajjax cart ------------------------------*/
.jGrowl-notification{
  @include box-shadow(2px,0,15px,#bebebe);
  div.jGrowl-close{
    top: -17px !important;
    right: -17px;
    left: auto !important;
    @include border-radius-circle;
    text-align: center;     
    background-color: $main-color;
    background-image: url({{"close.png" | asset_url }});
    background-repeat: no-repeat;
    background-position: center center;
    width: 35px; 
    height: 35px;       
    text-align: center;
    line-height: 35px;      
    z-index: 1;
    cursor: pointer;      
    &:hover{
      background-color: $button-hover-btn1;
    }
    &:hover {
      color: $black;
    }
    .fa {
      display: none;
    }
  }
  .jGrowl-message{
    .effect-item-action{
      .your-cart{
        padding: 10px 20px;
        display: inline-block;
        margin-top: 15px;
      }
    }
  }
}

/* Quick view ----------------------------------*/
.quantity{
  position: relative;

  input{
    text-align: left;
    width: 70px;
    height: 40px !important;
    min-height: 40px;
    border: 1px solid $border-main;   
    padding: 15px 20px !important;     
    @include border-radius(5px, 5px, 5px, 5px);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background: $white;
    &:focus, 
    &:active,
    &:hover {
      background: $white;
    }
  } 
  .qty-inner{
    > span{
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      padding: 0;
      font-size: $body-font-size;
      font-weight: 400;
      cursor: pointer;
      display: block;      
      @include border-radius-circle;
      background: #ededed;
      border-radius: 30px;
      margin-right: 6px;
      @include ab(7px, n, n, n);      
      &.qty-up{
        right: 35px;
      }

      &.qty-down{
        right: 10px;
      }

      i{
        color: $color-title;
        font-size: 9px;
        display: block;
        line-height: 20px;
      }

      &:hover{
        background: #f6f6f6;
        i{
          color: $main-color;
        }
      }
    }
  }
}
#quick-shop-popup {
  background-color: rgba(0,0,0,0.5);
  .modal-dialog { 
    width: 900px;

    .modal-content{
      @include border-radius-20px;

      .close {
        @include opacity(1);
        filter: alpha(opacity=100);
      }
      .modal-header{
        border: 0;
        padding: 0px;
        text-align: right;
        min-height: 0;
        span{    
          @include ab(-17px, n, n, -17px);
          @include border-radius-circle;
          text-align: center;     
          background-color: $main-color;
          background-image: url({{"close.png" | asset_url}});
          background-repeat: no-repeat;
          background-position: center center;
          width: 45px; 
          height: 45px;       
          text-align: center;
          line-height: 45px;      
          z-index: 1;
          cursor: pointer;      
          &:hover{
            background-color: $button-hover-btn1;
          }
        }        
      }
      .modal-body{
        padding: 40px;
        .product-image{
          #gallery-qs-image{ 
            .owl-controls{
              .owl-nav{
                >div{                  
                  width: 24px;
                  height: 24px;                  
                  border: none;                  
                  @include opacity(0);       
                  .fa {                   
                    height: 100%;
                    width: 100%;
                    line-height: 100%;                    

                    &:before {                      
                      line-height: 24px;                                    
                    }
                  }     
                  &.owl-next{
                    right: 0px;   
                    position: absolute;
                    top: 35px;
                  }
                  &.owl-prev{
                    left: 0px;   
                    position: absolute;
                    top: 35px;
                  }
                  &:hover {                   
                    .fa {
                      background-color: $main-color;
                      &:before {
                        color: $white;
                      }
                    }
                  }
                }               
              }
            }
            &:hover {          
              .owl-controls .owl-nav > div {
                @include opacity(0.8); 
              }
            }
          }
        }
        .product-info{
          #qs-product-title{
            margin: 0px;
            a{              
              color: $color-title;
              font-weight: 400;
              font-size: $font-custom;
              text-transform: none;

              &:hover{
                text-decoration: none;
                color: $main-color;
              }
            }            

          }

          #qs-product-price{
            clear: both;
            font-size: 40px;
            margin-top: 20px;
            margin-bottom: 20px;
            color: $body-price-color;            
            padding: 15px 0 0;
            .price {
              color: $body-price-color;
              font-size: 41px;              
            }
            .price-sale{
              margin-right: 15px;              
              font-size: 41px;        
            }
            .price-compare {
              color: #b7b7b7;
              font-size: 20px;
              font-weight: normal;
              float: none;
            }
          }
          .description{            
            color: $body-general-color;
            font-size: 14px;
            line-height: 24px;
          }
          #qs-product-type {          
            margin: 0 0 5px;            
            span {
              display: block;
              min-width: 90px;
              text-transform: capitalize;
              color: #878787;
              font-size: 12px;
            }
          }
          .variants-wrapper{
            width: 100%;
            clear: both;
            margin: 0 0 35px;
            .selector-wrapper{
              margin-bottom: 15px;
              overflow: hidden;
              select{
                min-width: 180px;
                height: 34px;
                line-height: 32px;
                padding: 0px 15px;
              }
            }
            label{
              color: $body-title-color;
              margin-top: 0px;
              margin-bottom: 0px;
              display: inline-block;
              float: left;
              line-height: 34px;
              margin-right: 30px;
              font-weight: 400;              
              min-width: 140px;
            }
          }
          .quantity-product{
            margin: 0 30px 0 0;
            float:left;
            width: 140px;
            label{          
              margin: -6px 0 0;
              line-height: 22px;
              display: block;        
              font-size: $font-small;
              color: $color-title;
            }
            .quantity{
              margin: 0;     
              input {
                width: 100%;
              }    
            }
          }
          .qs-action{
            .add-to-cart{                          
              padding: 10px 40px;
              line-height: 30px;    
              font-size: 14px;
              color: $white;    
              @include border-radius-25px;
              .icon {
                float: left;
                font-size: 22px;
                line-height: 30px;
                margin: 0 6px 0 0;
                &:before {
                  display: block;
                  line-height: 30px;
                }
              }
            }
          }
          #qs-product-wl {
            padding: 20px 0 0;
            .add-to-wishlist {
              background: none;
              padding: 5px 0px 15px;
              margin: 0;
              line-height: 20px;
              border: none;                                                   
              .fa {
                margin: 2px 7px 0 0;
                float: left;
              }
              &:hover {
                span, .fa {
                  color: $main-color;
                }
              }
            }
          }
        }
      }
    }
  }  
  .product-image-inner {
    margin: 0; padding: 0;
    .featured-image {
      display: block;      
      background: $white;
      padding: 0px;
      pointer-events: none;
      cursor: default;
    }
  } 
  .gallery-thumb-img {    
    overflow: hidden; 
    margin: 10px auto 0;    
    a.thumb-img {
      display: block;
      margin: 0 auto;         
      overflow: hidden;     
      position: relative;
      img {
        border: 1px solid $border-main;
      }
      &.active,
      &:hover {
        &:after {
          content: '';
          width: 100%;
          height: 2px;
          background: $main-color;
          @include ab(n, 0, 0, 0);
        }
      }
    }
  }

  #qs-product-link {
    margin:0px auto 0;
    padding: 11px 0;
    text-align: left;
    display: inline-block;

    > a {      
      color: $black;
      &:hover {
        color: #888;
      }
    }
  }

  #qs-rating {
    line-height: 30px;    
    .spr-starrating {
      float:left;
      margin-right: 20px;
    }
  }  
}

#qs-tab {
  clear: both;
  padding-top: 25px;
}

/* Popup newsletter ------------------------------*/
.fancybox-skin{
  padding: 0 !important;
  @include border-radius-20px;
  color:$body-general-color;
  #mailchimp-popup {
    height: 100%;
    width: 100%;
    display: table;
    table-layout: fixed;
  }
  .fancybox-close{   
    @include ab(-17px, n, n, -17px);
    @include border-radius-circle;
    text-align: center;     
    background-color: $main-color;
    background-image: url({{"close.png" | asset_url}});
    background-repeat: no-repeat;
    background-position: center center;
    width: 45px; 
    height: 45px;       
    text-align: center;
    line-height: 45px;      
    z-index: 1;
    cursor: pointer;   
    &:hover {
      background-color: $button-hover-btn1;
    }
  }

  .mailchimp-popup-img{
    width: 45%;
    display: table-cell;
    vertical-align: middle;
    img {
      @include border-radius(0, 25px, 25px, 0);
    }
  }

  .mailchimp-popup-content{
    padding: 40px 20px 40px 40px;
    overflow: hidden;    
    color: #636363;
    display: table-cell;
    vertical-align: middle;
    margin: 0;
    max-width: 55%;
    text-align: center;
    .title{
      color: #636363;
      font-weight: 300;
      text-transform: uppercase;
      font-size: 35px;
      line-height: 0.9;
      margin: 0 0 3px;
    }
    .mailchimp-caption-1 {
      text-transform: uppercase;
      margin: 0 0 5px;
      font-size: 97px;
      font-weight: 800;
      color: $color-note;
      line-height: 1.0;
      label {
        font-size: 42px;
        vertical-align: super;
        font-weight: 700;
      }
    }
    .mailchimp-caption-2 {
      font-size: 16px;
      font-weight: 300;
      text-transform: uppercase;

      margin: 0;
      padding: 0;
    }
    #mc-form{
      margin: 25px 0 0px;
      width: 100%;
      padding: 0;
      border: 2px solid $border-light;
      @include border-radius(25px, 25px, 25px, 25px);
      position: relative;
      float: left;
      clear: both;
      height: 51px;


      #mc-email{        
        color: #7e7e7e;
        width: 75%;
        margin-left: 10px;
        height: 49px;
        border: none;
        float: left;
        font-size: 14px;
        background: none;
        &:focus {
          @include box-shadow(0 0 0 #fff);
          background: none;
        }
      }
      .btn {
        @include ab(-2px, n, n, -2px);   
        @include border-radius(0px, 25px, 25px, 0px);
        padding: 8px 30px;
        height: 51px;
        font-size: 16px;
        font-weight: 700;
        background: $main-color;
        &:hover {
          background: $button-hover-btn1;
        }
      }
      .fa {
        color: #d4d4d4;
        font-size: 1.42857em;
        left: 20px;
        position: absolute;
        top: 17px;
        z-index: 1;
        display: none;
      }
    }
    .btn-3 {border:none; background-color: $main-color; height: 37px; padding: 5px 15px; line-height: 27px; 
      &:hover {
        background-color: $button-hover-btn1;
      }
    }    
    .social-sharing{
      a {
        color: $main-color;
        font-size: $font-custom;
        display: inline-block;
        margin-right: 10px;

        &:hover{
          text-decoration: none;
          color: $body-general-color;
        }
      }
    }
  }
}

/* Back to top ---------------------------------*/
#scroll-to-top{
  i {
    font-size: 32px;
    padding: 0;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;  
    color: #ffffff;
    display: block;
    background: #ecb800;
    /* @include opacity(0.5); */
    opacity: 0.5;
    /* @include border-radius-circle; */
    border-radius: 50%;
  }

  &:hover{
    i{
      background: #ecb800;
      opacity: 1;
      /* @include opacity(1); */
    }
  }
}
/*menu on PC---------------------------------*/
.navigation{
  position: relative;
  .navbar{
    position: static;    
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;

    .navbar-collapse{
      padding-left: 0;
      padding-right: 0;
      position: static;      

      .main-nav{
       position: static;        
        border: 3px solid $main-color;
        border-top: none;
        background: $white;
        margin: 0px;
/*         padding: 0 0 12px; */
        @include border-radius(0, 0px, 10px, 10px);

        span.expand{ padding: 0;
          width: 40px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          position: absolute;
          top: 0px;
          z-index: 2;
          right: 0;          
          .fa {font-size: 16px; font-weight: 700; color: $nav-link-color; }
        }

        > li{                    
          margin-bottom: 0px;         
          padding: 0 15px;
          > a{      
            font-weight: 400;            
            font-size: $body-font-size;            
            margin: 0;
            padding: 7px 0px;
            display: block;
            text-decoration: none;
            color: #FFF;            
            line-height: 26px;        
            border-bottom: 1px solid $body-border-color;   
            font-family: $font-nav;
          }

          &:hover/*, &.active*/ {                      
            > a{            
              color: $nav-link-hover-color;      
              font-weight: 700;
            }
            span.expand {            
              i {
                color: $nav-link-hover-color;
              }
            }
          }

          /*have submenu*/
          &.dropdown {
            position: relative;   
            > a {
              &.hover {
                position: relative;
                z-index:  6;
                background: $main-color;
                margin-right: -1px;   
                color: $white;
              }
            }   

            > .dropdown-menu {
              display: none;
              left: 100%;
              top: 0%;              
              background: $nav-dropdown-background;
              //background-size: contain !important;
              font-size: $body-font-size;
              padding: 10px 0;
              &.column-4 { width: 901px; }
              &.column-3 { width: 675px; }
              &.column-2 { width: 450px; }
              &.column-1 { width: 225px; }

              span.expand {
               // display:none;
              }
              > li{

                > a{                  
                  color: $nav-dropdown-link-color;
                  white-space: normal;

                  span{
                    color: $nav-dropdown-link-color;
                    font-size: $body-font-size;
                  }

                  &:hover{                    

                    span{

                      color: $nav-dropdown-link-hover-color;
                    }
                  }
                }

                .dropdown-menu{
                  background: $nav-dropdown-background;         
                  > li{
                    > a{                      
                      color: $nav-dropdown-link-color;
                      white-space: normal;

                      span{
                        color: $nav-dropdown-link-color;
                      }                     
                      &:hover{                        

                        span{

                          color: $nav-dropdown-link-hover-color;
                        }
                      }
                    }
                  }
                }
              }

              >li.dropdown-submenu{
                span.expand {
                  //display:none;
                }
                > .dropdown-menu{
                  @include box-shadow(0 1px 1px #e3e3e3);
                  -webkit-backface-visibility: hidden;
                  -webkit-transform: translateZ(0);
                  background: $nav-dropdown-background;
                }
              }

              .product-button {
                display: none;
              }
              .mega-col {
                .bp-item{
                  width: 100%;
                  float: left;
                  display: block;  
                  .product-review,
                  .product-des-list,
                  .product-des-grid {
                    display: none;
                  }
                  .product-name {
                    height: auto !important;
                  }
                  .featured-img {
                    position: relative;
                    a {
                      border: none;
                      padding: 0;
                      margin: 0;
                    }
                  }
                  .price-cart-wrapper {
                    border: none !important;
                    padding-bottom: 0;
                    margin-top: 15px;
                    min-height: 35px;
                    a.btn-primary {
                      color: $button-btn2-txt;
                      &:hover {
                        color: $white;
                      }
                    }
                  }   
                }         
                .dropdown-menu.fix{
                  > li{
                    border-bottom: 0 !important;
                  }
                }
              }
            }

            .dropdown-menu-sub{
              background: transparent;
              border: 0;
              border-radius: 0;
              box-shadow: none;
              position: static;
              width: 100%;
              min-width: auto;             
              > li{
                > a{                  
                  color: $nav-dropdown-link-color;

                  span{
                    color: $nav-dropdown-link-color;
                  }

                  &:hover{                  
                    span{
                      color: $bg-other;
                    }
                  }
                }
              }
            }

            &:hover , &.hold {              
              z-index: 22;
              > .dropdown-menu{
                left: 100%;
                display: block;
                @include box-shadow(2px 2px 4px 1px rgba(0, 0, 0, 0.2));
              }
            }

            &.mega-menu:hover > .dropdown-menu, &.mega-menu.hold > .dropdown-menu {
              .dropdown-menu-sub {
                display: block;
              }
            }
          }
          &:last-child {
            > a {
              border-bottom: none;
            }
          }
        }

        > li.mega-menu{
          .dropdown-menu {
            .mega-sub-link{
              overflow: hidden;   
              > a{                                                
                font-size: $size-h6;
                font-weight: 700;
                position: relative;
                display: block;
                padding: 0;
                line-height: 24px;
                margin: 20px 0;                   
                color: $nav-dropdown-link-color;             

                &:hover{
                  text-decoration: none;
                  color: $nav-dropdown-link-hover-color;                                   
                }
              }
              .dropdown-menu-sub{
                &:before {
                  content: none;
                }
                li{
                  padding: 0;                  
                  a{
                    &:hover{                      
                      color: $nav-dropdown-link-hover-color;
                      img {
                        @include opacity(0.75);                                                                 
                      }
                    }
                  }
                }
              }
            }
            .product-title{
              a{
                color: $nav-dropdown-link-color !important;
                &:hover{
                  color: $nav-dropdown-link-hover-color !important;
                }
              }
            }            
          }          
        }
      }
    }
  }
}
/* Menu mobile -----------------------------*/
.mobile-version{
  width: 100%;    
  .list-inline {
    width: 100%;
    float: left;    
    margin-left: 0;

    > li{      
      float: left;
      width: 33.33%;
      height: 41px;
      padding: 0;      
      text-align: center;
      display: inline-block;
      position: relative;

      i{        
        font-size: $body-font-size + 2px;
      }

      &.cart-target{
        width: auto;
        height: 48px;
        text-align: right;
        position: relative;        
        float: none;
        vertical-align: top;

        > a{
          border: 1px solid $body-border-color;
          color: $body-title-color;
          position: relative;        
          display: inline-block;
          @include CSStransition(all,0.5s,ease-out,0s);
          padding: 13px 20px;
          margin-right: 15px;

          .cart-text{
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 0.3em;
            font-weight: 600;
            line-height: 1.7em;
          }

          i{
            font-size: 20px;
            display: inline-block;
            vertical-align: middle;
            margin-left: 15px;
            margin-right: 5px;
          }

          &:hover{
            text-decoration: none;
          }

          .number{            
            font-size: 13px;            
            width: 30px;
            height: 30px; 
            border-radius: 100%;
            -webkit-border-radius: 100%;
            display: inline-block;
            text-align: center;
            line-height: 30px;
            letter-spacing: 0;
            font-weight: 600;
            @include ab(8px,n,n,-15px);
          }

        }

        &:hover{
          .cart-dd {
            display: block !important;
          }
        }
      }

    }
  }
}

.menu-mobile{
  border: 0;
  .main-nav{
    .dropdown-menu li {
      padding: 0;
      border: none;
    }
    .dropdown{
      &.open > .dropdown-menu{
        display: none;
      }
      &.menu-mobile-open{
        > .dropdown-menu{
          display: block;
          clear: both;
          border: none; 
        }
      }    
    }

    > li{
      display: block;      
      clear: both;
      position: relative;

      a{
        padding: 12px 18px;
        display: block;   
        line-height: 26px;
        font-weight: 600;    
        color: $nav-dropdown-link-color;
        &:hover {
          color: $nav-link-hover-color;
        }
      }
      .icon-nav{
        display: none;
      }

      > a{
        color: $nav-link-color;
        &:hover, &:focus{
          text-decoration: none;
          color: $nav-link-hover-color;

        }
      }
      > span.expand{
        width: 100%;
        color: $nav-link-color;
      }
      &.menu-mobile-open {
        > a{
          text-decoration: none;
          background: $main-color;
          color: $white;
          border: none;
        }
        > span.expand {
          i {
            color: $white;
          }
        }
      }

      &.dropdown{      
        &.menu-mobile-open {
          border-bottom: 1px solid $border-main;
          > .dropdown-menu {
            display: block;
            width: 100% !important;
            background-image: none !important;
            min-height: 0 !important;
            border-bottom: 1px solid $border-main;
            @include box-shadow(0 0 0 rgba(0, 0, 0, 0.2));
          }
        }

        .dropdown-menu {
          width: 100%;
          position: static;
          padding: 0;          
          border: none;
          @include border-radius(0, 0, 0, 0);
          background: $nav-dropdown-background;
          >li{      
            >a{
              white-space: normal;
              padding: 10px 20px 10px 25px;
              font-size: 13px;
              background: none;
            }
          }

          .dropdown-submenu {
            .dropdown-menu {
              padding: 0;
              @include box-shadow(0 0 0 rgba(0, 0, 0, 0.2));
              border-bottom: 1px solid $main-color;
              @include border-radius(0, 0, 0, 0);
              li{
                border-bottom: 1px solid $border-main;
                a{
                  color: $nav-dropdown-link-color;                  
                  border: 0;
                  padding: 10px 15px 10px 35px;
                  background: none;
                  &:hover{
                    color: $nav-dropdown-link-hover-color;
                    text-decoration: none;                    
                  }
                }

                &:last-child {
                  border-bottom: 0;
                }
              }
              .dropdown-menu {
                padding-left: 10px;
                border-top: 1px solid $border-main;
                @include border-radius(0, 0, 0, 0);
              }
            }

          }
        }
      }

      &.li-on-mobile {        
        font-size: 26px;
        text-align: center;
        padding: 15px;
        font-weight: 600;        
        color: $nav-link-color;
        border-bottom: 1px solid $border-main;
        background: $header-bg;
      }
    }
    .product-button {
      display: none !important;
    }

    span.expand{
      position: absolute;
      z-index: 5;
      right: 0px;
      top: 0px;
      width: 47px;
      height: 47px;
      line-height: 47px;
      text-align: right;
      padding-right: 20px;
      font-size: 14px;
      cursor: pointer;      
      color: $nav-dropdown-link-color;
      i{
        display: block;
        line-height: 47px;
      }
    }
    .mega-menu {      
      .product-wrapper {
        padding: 0 18px 0 0;
        a{
          border: 0;
          padding: 0 ;
        }
        img{ width: 100%;}
      }
      > .dropdown-menu {
        border: none !important;
      }
      .dropdown-menu {
        background: $nav-dropdown-background;
        padding: 0px !important;
        @include box-shadow(0 0 0 rgba(0, 0, 0, 0.2));
        @include border-radius(0, 0, 0, 0);
        > .row{ margin: 0; }
        li a{
          padding: 15px 20px;
        }
        .mega-sub-link{         
          padding-bottom: 0;  
          clear: both;          

          &.no-title-0 {
            > a,
            > span.expand {
              display: none !important;
            } 
            .dropdown-menu {
              display: block !important;              
            }
          }
          &.no-title-2 {
            > a,
            > span.expand {
              display: none !important;
            } 
            .dropdown-menu {
              display: block !important;              
            }          
          }
          &.banners {            
            .dropdown-menu {              
              border: none;
              padding: 10px 0 !important;
            }
            a {
              padding: 10px 20px;
            }
          }
          > .dropdown-menu-sub {
            border-bottom: 1px solid $border-main;
            &.dropdown-menu {
              border-bottom: none;
            }
            &.fix {             
              border-left: none;
              border-right: none;
              border-bottom: 1px solid $border-main;
            }
            &.no-title-1 {
              > a,
              > span.expand {
               // display: none !important;
              } 
              .dropdown-menu {
                display: block !important;              
              }
            }
          }                
          a{
            padding: 10px 19px 10px 25px;                

            &:hover{
              text-decoration: none;             
            }
          }
          &.menu-mobile-open{
            > a{
              transition: none;
              -webkit-transition: none;
              border-bottom: 1px solid $border-main;
              color: $nav-dropdown-link-hover-color;
            }
          }
        }

        .mega-col{
          padding: 0;
          float: left;
          width: 100%;         
          .bp-item{
            width: 100%;
            float: left;
            display: block;
            margin: 0;
            overflow: hidden;
            background: $body-background-color;
            .product-name {
              height: auto !important;
            }
            .featured-img {
              position: relative;
              a {
                padding: 0;
                border: none;
              }
            }
            .product-name {
              a {
                padding: 0 0 10px;
              }
            }
            .product-review {
              padding-top: 10px;
            }
            .price-cart-wrapper {
              a.btn-primary {
                color: $button-btn2-txt;
                padding: 0;
                &:hover {
                  color: $white;
                }
              }
            }
          } 
          .dropdown-menu.fix{
            > li{
              border-bottom: 0 !important;
            }
          }
        }
        .dropdown-menu-sub {
          padding: 0px !important;          
          a{
            padding: 10px 15px 10px 35px;
            font-size: $body-font-size;
            border-bottom:1px solid $border-main;
            &:hover{
              text-decoration: none;
              color: $nav-dropdown-link-hover-color;
            }           
          }          
        }
      }
      .dropdown-menu-2{
        .product-wrapper {
          padding: 15px 18px 0 18px;
          a{
            border: 0;
            padding: 0 ;
          }
          img{ width: 100%;}
        }
      }
    }

    li{
      clear: both;
      margin-bottom: 0;
      position: relative;

      a{
        border-bottom: 1px solid $border-main;
      }      
    }   
  }
}

/* main slideshow -----------------------------------*/
.video-slide {
  .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;  
    z-index: 3;     
  }
}
.container-box > div {      
  background: transparent;      
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;    
  line-height: 1.2;
  padding: 0;     
  margin: 0px auto;      
  text-transform: uppercase;
  color: $body-title-color;

  &.heading {
    margin-bottom: 2.3%;              
    font-size: 66px;              
    line-height: 0.9;    
    font-weight: 300;       
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    -ms-animation-fill-mode: backwards;
    -o-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    position: relative;         
    img {
      width: auto;
      max-width: 100%;
    }
  }

  &.subheading {        
    margin-bottom: 3%;         
    font-weight: 300;
    font-size: 15px;                        
    line-height: 1.2;
    text-transform: uppercase;        
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    -ms-animation-fill-mode: backwards;
    -o-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    position: relative; 
    .big-font {
      font-weight: 800;
    }
    img{
      width: auto !important;
      display: inline-block;
    }        
  }

  &.caption {
    position: relative;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    -ms-animation-fill-mode: backwards;
    -o-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    .title-price {
      display: block;
      text-transform: uppercase;
      font-size: $body-font-size;
      line-height: 1.3;
    }
    p {
      margin: 0;
      font-weight: 700;
      font-size: 57px;
      line-height: 1.0;         
      .small-size {
        vertical-align: top;            
        font-size: 48px;
        display: inline-block;
      } 
    }
  }

  &.caption-link {
    margin: 1.5% 0 0;
    position: relative;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: backwards;
    -moz-animation-fill-mode: backwards;
    -ms-animation-fill-mode: backwards;
    -o-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;  
    .btn {
      font-weight: 400;
      font-size: $size-h5;
      padding: 9px 50px;
    }
  }
}
#home-slideshow {  
  .swiper-slide {
    width: 100%;
    margin: 0px auto; 
    text-align: center;
    overflow: hidden;      
    background: center center; 
    background-repeat: no-repeat;
    background-size: cover;  
    @include opacity(0 !important);
    //background: none !important;
    > a  {
      display: block;
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1;
      > img {
        width: 100%;      
        @include opacity(0);
      } 
    }
    &.swiper-slide-active {
      @include opacity(1 !important);
    }
    &.has-video:hover {
      .container{ 
        z-index: 4;
      }    
    }
  }
  .container {    
    height: 100%;    
    z-index: 0;
    max-width: 100%;
    @include ab(0, 0, 0, 0);
  }
  .swiper-content {   
    @include ab(n, n, 10%, n);
    text-transform: capitalize;
    text-align: center;
    padding: 0 40px;    
    width: 100%;
    max-width: 100%; 
    display: inline-block;  
    margin: 0px auto;    
    z-index: 2;     
    @include CSStransition(all, 0.5s, ease, 0s);
    &.text-center {
      left: 0; 
      right: 0;
    }
    &.text-left {
      left: 0%;
      text-align: left;
    }
    &.text-right {
      right: 0%;
      text-align: right;
    } 
  }

  &.flexslider {
    border: 0;
    margin-bottom: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;

    .flex-direction-nav{
      a{
        position: absolute; 
        top: 45%; 
        z-index:4; 
        display: block; 
        height: 40px; 
        width: 40px;
        @include border-radius(0, 0 , 0, 0); 
        border: none;
        text-align: center;         
        background: rgba(0, 0, 0, 0.3);
        &:before {
          display: block;          
          color: $white; 
          line-height: 40px; 
          text-align: center; 
          font-family: fontawesome;
          font-size: 20px;
        }
        &:hover {
          @include opacity(1);
          background: rgba(0, 0 ,0 , 0.5);
        }
      }

      a.flex-prev{
        left: 10px;
        &:before{
          content: "\f104";
        }

        &:hover:before{

        }
      }
      a.flex-next{
        right: 10px;
        &:before{
          content: "\f105";
        }

        &:hover:before{

        }
      }       
    }
    .flex-control-nav{
      bottom: 4%;
      z-index: 10;
    }

    .slides > li{
      position: relative;     
    }
  }
  .cameracurrent , .flex-active-slide{
    .camera_caption > div{
      @include opacity(1);
      -webkit-transition: all 0.5s ease 0s;
      transition: all 0.5s ease 0s;
    }
  }

  .flex-control-paging li {
    a {
      width: 12px;
      height: 12px; 
      margin: 0px;     
      background-color: $white;
      border: 2px solid #333; 
      background: #333;
      @include border-radius(50%, 50% , 50%, 50%);
      position: relative;
      padding: 0; 
      @include opacity(0.6);
      &:hover, &.flex-active {
        border-color: $main-color; 
        background: $main-color;      
      }
    }
  }
}

.center-content-slideshow {
  #home-slideshow .swiper-content {
    padding: 0;
  }
}

.swiper-button-white {
  position: absolute; 
  top: 49%; 
  z-index:4; 
  display: block; 
  height: 45px; 
  width: 45px;  
  background-image: none;
  @include opacity(0 !important);
  @include CSStransition(all, 0.3s, ease, 0s);
  @include border-radius-circle; 
  border: none;
  text-align: center;         
  background: $button-hover-btn1;
  &:before {
    display: block;          
    color: $white; 
    line-height: 45px; 
    text-align: center; 
    font-family: fontawesome;
    font-size: 21px;
  }
  &:hover {
    @include opacity(0.25 !important);    

  }
  &.swiper-button-prev {
    background-image: none;
    left: 0px;
    &:before{
      content: "\f053";
    }

    &:hover {
      &:before{
        color: $main-color;
      }
    }
  }
  &.swiper-button-next {
    background-image: none;
    right: 0px;
    &:before{
      content: "\f054";
    }

    &:hover {
      &:before{
        color: $main-color;
      }
    }
  }
  &.swiper-button-disabled {
    cursor: default;
    @include opacity(0 !important);    
    &:before {

    }
  }
}
.bc-wrapper {
  position: relative;  
  &:hover {
    .swiper-button-white {
      @include opacity(1 !important);
      &.swiper-button-disabled {
        @include opacity(0 !important);
      }
    }

    .video-slide {
      .video {
        z-index: 1;
      }
    }    
  }
  &.boxed {
   // @include box-shadow(0 0 8px 0 #ddd);    
    padding: 0 15px;
    margin: 0px auto;
    .container {
      max-width: 100%;
    }    
    @media (min-width: 768px) {
      max-width: 760px;
    }
    @media (min-width: 992px) {
      max-width: 980px;
    } 
    @media (min-width: 1200px) {
      max-width: 1200px;
    }
  }
}
.home-slideshow-wrapper {  
  /*Hack css for slider only IE9*/  
  @media all and (min-width:0\0) and (min-resolution:.001dpcm) {
    .swiper-button-white {
      display: none \9 ;
    }    
  }
  .owl-controls {   
    .owl-nav {
      > div {       
        &.owl-next {    
          left: auto !important;
          right: 20px !important;
          border: none !important;      
          position: absolute;         
          z-index: 99;
          height: 60px; 
          width: 60px;  
          line-height: 60px;   
          @include CSStransition(all, 0.3s, ease, 0s);
          @include border-radius-circle;  
          border: none;
          text-align: center;         
          background: $button-hover-btn1;
          .fa {
            display: block;
            line-height: 60px;            
            &:before {
              color: $white;
              font-size: 30px;
              font-weight: 700;
              display: block;
              line-height: 60px; 
            }
            &:hover {
              &:before {
                color: $main-color;
              }
            }
          }
        }
        &.owl-prev {    
          left: 20px !important;
          right: auto !important;   
          border: none !important;  
          position: absolute;         
          z-index: 99;
          height: 60px; 
          width: 60px;    
          line-height: 60px; 
          @include CSStransition(all, 0.3s, ease, 0s);
          @include border-radius-circle;  
          border: none;
          text-align: center;         
          background: $button-hover-btn1;
          .fa {   
            display: block;
            line-height: 60px;        
            &:before {
              color: $white;
              font-size: 30px;
              font-weight: 700;
              display: block;
              line-height: 60px; 
            }
            &:hover {
              &:before {
                color: $main-color;
              }
            }
          }
        }
        &:hover {
          .fa {
            &:before {
              color: $main-color;
            }
          }
        }
      }
    }
  }
}
.swiper-wrapper {  
  .owl-controls .owl-dots {
    @include ab(n, n, 6%, 0);
    margin: 0px auto;
    text-align: center;
    width: 100%;
    .owl-dot {
      margin: 0 3px;
      display: inline-block;
      span {          
        width: 8px !important;
        height: 8px !important; 
        margin: 0px 7px;     
        background: $bg-other;
        border: none; 
        @include border-radius-circle;
        @include opacity(1);
        position: relative;
        display: inline-block;
        padding: 0;                
      }
      &:hover,
      &:focus,
      &.active {
        span {  
          background: $main-color;
          width: 30px !important;
          @include border-radius(4px, 4px, 4px, 4px);
        }
      }
    }
  }
}
.swiper-container-horizontal > .swiper-pagination {
  border: 0;
  margin-bottom: 0;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  bottom: 4%;
  left: 40px;
  width: auto;
  z-index: 2;
  padding-left: 2;
  .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 7px;
    background: $bg-other;
    @include opacity(1);
    @include border-radius-circle;
    @include CSStransition(all, 0.3s, ease, 0s);
    &:hover,
    &.swiper-pagination-bullet-active {
      background: $main-color;
      width: 30px;
      @include border-radius(4px, 4px, 4px, 4px);
    }
  } 
}

/*product grid*/
.owl-carousel .owl-wrapper{ display: none;}
.product-grid-item {  
  margin: 0px 0 20px;
  float: left;
  display: inline-block;    
}
.product-grid-item , .owl-item,
.home-tab-third-section .tab-content,
.home-tab .product-holder {
  .switch {    
    position: relative;
    margin: 0 auto 15px;
    > a {
      > span.hidden-sm {        
        visibility: hidden;
        width: 100%;
        @include opacity(0);
        @include ab(0, 0, n, n);
        @include CSStransition(all, 0.35s, ease-in-out, 0s);
      }
      &:hover {
        > span.hidden-sm {
          @include opacity(1);        
          @include CSStransition(all, 0.35s, ease-in-out, 0s);
          visibility: visible;
        }
      }
    }

  }
  .featured-img {
    overflow: hidden;
    position: relative;
    margin: 0 auto 15px;   
  }
  .product-wrapper {           
    padding: 15px 20px;    
    @include CSStransition(all, 0.35s, ease, 0s);
    position: relative;
    @media (min-width: 1025px) {
      &:after {
        content: '';
        width: 100%;
        display: block;
        z-index: -1;
        border: 1px solid $border-main;
        background: $white;
        @include border-radius(5px, 5px, 5px, 5px);
        @include ab(0, 0, -10.5%, 0);
        @include box-shadow(0 0 5px 0 #c6c6c6); 
        @include CSStransition(all, 0.35s, ease, 0s); 
        @include rotateX(45deg);
        @include transform-origin(bottom);
        @include opacity(0);

      }
      &:before {
        content: '';
        width: 1px;   
        background: $border-main;
        @include ab(50px, 0, 40px, n);
      }
    } 
    .product-head{
      position: relative;
      float: none;       
    }
    .product-review, .product-des-grid,
    .product-sku {
      display: none;
    }
    .product-content {            
      .product-wishlist {               
        display: inline-block;
      }     
      .quick-shop-button,
      .add-to-wishlist {        
        margin-bottom: 0px;
        display: inline-block;
        padding: 0;       
        text-align: center;
        border: none;
        @include border-radius(0, 0, 0, 0);
        @include CSStransition(all, 0.35s, ease, 0s);
      }
      .contact-form {
        display: inline-block;
      }     
      .product-button{
        text-align: center;     
        padding: 0 0 15px 0;        
        background: $white;     
        border: 1px solid $border-main;       
        border-top: none;                  
        width: auto;     
        z-index: -1;   
        @include ab(n, 0px, -10.5%, 0px);              
        @include translate(0, 20px);      
        @include opacity(0);
        @include transition(color 0.35s ease-out 0.001s, background 0.35s ease-out 0.001s, visibility 0.35s ease-out 0.35s, opacity 0.35s ease-out 0.25s, transform 0.35s ease-out 0.25s);                       
        @include border-radius(0px, 0px, 5px, 5px);                
      }
      .swatch{
        color: $body-title-color;
        margin: 0;
        .header{
          display: none;       
        }
        .swatch-element{
          margin: 0px auto 5px;
          float: none; display: inline-block;

          .tooltip {
            display: none !important;
          }

          label{
            background: transparent;
            background-size: cover;
            border: 1px solid $body-border-color;
            min-width: 30px !important;            
            height: 30px !important;            
            padding: 0px;
            border-radius: 0;
            line-height: 30px !important;
            text-align: center;
            cursor: pointer;
            margin: 0 3px;
          }
          input:checked + label{
            box-shadow: none;
            border-color: $black;
            cursor: default;
          }

          &:hover{
            label{
              border-color: $black;
            }
          }
        }        
      }
    }
    &:hover{      
      z-index: 5; 
      background: $white;
      &:after {
        @include rotateX(0);    
        @include opacity(1);
      }
      &:before {
        content: none;
      }
      .product-content {        
        .product-button {
          @include opacity(1);    
          @include translate(0, 0px);       
          bottom: -10.5%;
          z-index: 20;         
        }
        .pc-inner .price-cart-wrapper {
          border-color: $border-main;
        }
      }
    }
  }
}
.product-wrapper,
.product-wrapper-2 {
  position: relative;
  margin-bottom: 0px;
  .product-wrap-info {
    .product-des-list {
      display: none;
    }
  }
  .product-head{
    .product-name{      
      margin-bottom: 15px;
      color: $body-product-title;
      font-weight: 700;
      text-transform: none;
      font-size: $font-medium;
      a {
        color: $body-product-title;
        font-weight: 700;
        text-transform: none;
        font-size: $font-medium;
        border: none;
      }

      &:hover a{
        text-decoration: none;
        color: $main-color;
      }
    }
    .product-type {
      margin: 0 0 4px;
      padding: 0;
      border: none;      
      font-size: 12px;
      //color: #878787;
      min-height: 20px;
    }
    .product-image{
      position: relative;
      .featured-img{       
        max-width: 100%;
        vertical-align: middle;        
        text-align: center;        
        a{          
          img{            
            max-width: 100%;
            width: auto;
            height: auto;
            display:inline-block;
            vertical-align: middle;
            margin: 0px auto;
            transform-style: inherit;
            -webkit-transform-style: inherit;
            -moz-transform-style: inherit;
          }
        }
      }
    }

    .wrapper-countdown {
      @include ab(n,1px,0,1px);
      height: 34px;
      z-index: 2;
      > div{
        border: 0;
        background: #4d4d4d;
        line-height: 34px;
        color: #fff;
        font-size: $body-font-size;
        text-align: center;
        > span{
          font-weight: 600;
        }
      }
    }
  }
  .product-review{        
    margin: 0 0 5px;
    color: $body-general-color;    
    .spr-badge-caption {
      display: none;
    }
  }  
  .product-content {
    display: block;   
    .availability {
      display: none;
    }
    .pc-inner{
      display: block;
      width: 100%;            
      min-height: 35px;
      .price-cart-wrapper {
        position: relative;
        padding: 0 38px 13px 0;  
        border-bottom: 1px solid transparent;
        overflow: hidden;
      }    
    }    
    .product-descrip{
      display: none;
    }
    .product-price{    
      line-height: 1.3;
      padding: 5px 0 1px;
      .price-compare{        
        display: inline-block;  
      }
    }
    .add-cart-button {
      @include ab(0, n, n, 0);
      .btn-primary {
        padding: 0;
        margin: 0;
        height: 35px;
        line-height: 35px;
        width: 35px;
        min-width: 35px;
        text-align: center;
        float: left;
        font-size: 0;
        @include border-radius-circle;
        .bold_options {
          display: none;
          margin: 0;
        }
        .icon-add-to-cart {
          font-size: $size-h4;
          display: block;
          line-height: 35px;
          width: 100%;
          height: 100%;
          &::before {
            display: block;
            line-height: 35px;
            width: 100%;
            height: 100%;
          }
        }
        &:hover,
        &:focus {
          color: $white;
        }
      }       
    }
  }
}
.product-price,
.price {
  color: $body-price-color;
  font-size: $size-h4;
  font-weight: 400;  
}
.price-sale{
  color: $body-price-sale-color;  
  font-size: $size-h4;
  font-weight: 400;
  float: left;
}
.price-compare{  
  text-decoration: line-through;
  margin-left: 10px;
  color: $body-price-sold-out-color;
  font-size: 12px;
  font-weight: 400;  
}

.product-label{
  z-index: 2;
    position: absolute;
    display: block;
    left: 0;
    top: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
  @include ab(10px, 0px, n, n);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: $white;

  > span{   
    height: 35px;       
    line-height: 35px;
    width: 35px;
    display: block;
    text-align: center;
    padding: 0;
    position: relative; 
    @include border-radius-circle;

    &.label-sale{    
      color: $body-label-sale-color;
      background-color: $body-label-sale-background;         
    }

    &.label-deal{    
      color: $body-label-deal-color;
      background-color: $body-label-deal-background;          
    }
  }

}
.quick-shop-button,
.add-to-wishlist,
.add-to-compare {
  display: inline-block;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 13px;
  color: $body-general-color;
  margin: 0px 10px 0 0;
  line-height: 20px;
  @include CSStransition(all, 0.35s, ease, 0s);
  .icon {
    color: $body-general-color;
    font-size: 16px;
    margin: 0 5px 0 0;    
    line-height: 20px;    
    @include CSStransition(all, 0.35s, ease, 0s);    
    &:before {
      position: relative;
      top: 3px;
      line-height: 20px;
    }
  }
  &:hover{
    color: $main-color;
    .icon {
      color: $main-color;      
    }
  }
}

.add-to-wishlist{  
  display: inline-block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;    
  margin: 0;
}


/*button slider*/
.owl-theme {
  .owl-controls .owl-nav > div {  
    @include ab(50%, n, n, n);  
    @include translate(0, -50%);
    @include CSStransition(all, 0.35s, ease, 0s);
    display: inline-block;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background-color: $white;  
    width: 20px;
    height: 30px;         
    text-align: center;
    .fa {
      &:before {
        font-size: 22px;
        color: #aeaeae;
        line-height: 30px;
      }
      &:hover {              
        &:before {
          color: #37424c;
        }    
      }
    }
    span{
      display: block;

      &:before {
        display: block;
        text-align: center;
        width: 20px;
        height: 30px;
        line-height: 30px;
        color: #aeaeae;
        font-family: FontAwesome;
        font-size: 22px;
      }

      &:hover {              
        &:before {
          color: #37424c;
        }    
      }
    }

    &.owl-prev{
      left: 0px;      
      span{
        &:before {
          content: "\f104";          
        }
      }      

    }

    &.owl-next{
      right: 0px;     
      span{
        &:before {
          content: "\f105";
        }
      }      
    }   
  }

  &:hover {   
    .owl-controls .owl-nav > div{
      @include opacity(1);
    }
  }
}

/* footer --------------------------*/
.home-partner {
  padding: 0;    
  .partner-container {
    border-top: 1px solid $body-border-color;
    border-bottom: 1px solid $body-border-color;
  }
  .partner-item {
    display: inline-block;
    padding: 10px;
    width: 25%;
    text-align: center;
    float: left;
    > a {
      display: inline-block;
      margin: 0px auto;     
      padding: 0;
      width: 100%;
      text-align: center;     
      border: 1px solid translate;     
      &:hover {
        border-color: $main-color;
      }
      img {
        display: inline-block;
        width: auto;
      }      
    }  
  }
  .owl-carousel {
    .partner-item {
      width: 100%;
    }  
  }
}
.bottom-product-block {
  padding: 88px 0 75px;
}
.footer-logo {
  margin: 4px 0 40px; 
}
.f-support-box {
  .icon-support {
    color: #ECB800;
    float: left;
    font-size: 68px;
    margin: -8px 12px 0 0;
    &:before {
      float: left;
    }
  }
}
.f-support-text {
  color: $footer-static-text-color;
  .f-text-1 {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0px;
  }
  .f-text-2 {
    display: block;
    font-size: $size-h3;    
  }
}
.f-address {
  clear: both;
  padding: 28px 0 0;
  .f-text-3 {
    display: block;
    font-weight: 700;
    padding: 0 0 3px 0;
  }
}
.footer-social-icon {      
  padding: 0px 0 35px;

  .list-inline{
    font-size: 0;
    margin-left: 0;

    li{ 
      background-color: transparent;
      padding: 0px;
      margin: 0 22px 0 0;         
      text-align: center;
      -moz-transition: all 0.3s ease-in-out 0s;
      -webkit-transition: all 0.3s ease-in-out 0s;
      -ms-transition: all 0.3s ease-in-out 0s;
      -o-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;

      a{
        display: block;
        font-size: 24px;
        color: $footer-title-color;
      }

      &:last-child{
        border-right: 0;
      }

      &:hover{        
        a{
          i{
            color: $footer-hover-color;
          }
        }
      }
    }
  }
}

.footer-block {
  h3 {
    font-size: 16px;    
    line-height: 24px;
    padding-bottom: 12px;
    text-transform: capitalize;   
    font-weight: 600;
    color: $footer-title-color;
    position: relative;

    >span{
      @media(max-width: 767px){
        padding-bottom: 0;
        width: 30px;
        height: 30px;
        position: absolute;
        right: 0;
        top: 0px;
        z-index: 1;
        text-align: center;
        display: block;
        &:after {
          content: "\f055";
          font-family: "FontAweSome";
          font-size: 16px;           
          line-height: 24px;
          display: inline-block;
          width: 100%;
        }        
      }
    }
    &.opened {
      >span{
        @media(max-width: 767px){
          &:after {
            content: "\f056";
          }
        }
      }
    }
  }
  .list-links,
  .list-unstyled {
    margin: 20px 0 0;
    @media (min-width: 768px) {
      display: block !important;
    }
    @media (max-width: 767px) {
      display: none;
    }
    li {
      margin: 0 0 12px;
      a {
        color: $footer-link-color;        
      }
      &:hover {
        a {
          color:$footer-hover-color;
          font-weight: 700;
        }
      }      
    }
  }
}
.bottom-container {      
  padding: 100px 0 0;
  background: $white;  
  margin-top: -1px;
  position: relative;
  z-index: 2;
}

.bottom-widget {
  h3 {
    color: $body-title-color;
    border-bottom: 1px solid $border-main;
    font-size: 20px;    
    line-height: 32px;
    padding-bottom: 10px;
    text-transform: capitalize;
    margin: 0 0 40px;
    font-weight: 400;
    position: relative;
    &:before {
      content: '';
      display: block;
      width: 85px;
      height: 2px;
      background: $main-color;
      @include ab(n, 0, -1px, 0);
    }
  }
  .row {
    margin-bottom: 20px;    
  }
  .sb-content-inner {
    .sbp-title {
      margin: 0 0 15px;
      a {
        color: $body-product-title;
        font-weight: 700;
        font-size: $font-medium;
        text-transform: capitalize;
        &:hover {
          color: $main-color;
        }        
      }      
    }
    .sb-price {  
      line-height: 24px;    
      .price,
      .product-price,
      .price-sale {
        color: $body-price-color;
        font-size: $font-medium;      
        font-weight: 400;
      }
      .price-compare {
        font-size: 12px;
        font-weight: 400;
        float: none;
        margin: 0 0 0 10px;
        color: #8f8f8f;
      }
    }
  }
  .sb-head {    
    max-width: 110px;   
    float: left;
    > a {
      display: block;     
      text-align: center;
      margin: 0px auto;
      background: $white;     
    }
  }
}
.footer-top {
  padding: 55px 0 64px;
  margin: 0;
  background-color: #f8f8f8;
}
#footer-content{  
  margin: 0 auto;  
  color: $footer-static-text-color;
  padding: 0;  
  background: $footer-background-color;  

  .contact-and-links {
    padding-bottom: 45px;
  } 
  .footer-links {
    padding: 0 0 35px;
    .links-title {
      color: $footer-title-color;    
      font-size:14px;
      font-weight:700;
      letter-spacing:0.1em;
      line-height:1;
      margin-bottom:22px;
      margin-top:14px;
      padding:7px 0;
      text-transform:uppercase;
    }

    .list-links>li>a{
      color: $footer-link-color;      
      font-size:13px;
      letter-spacing:0.1em;
      line-height:30px;
      text-transform:uppercase;
      &:hover{
        text-decoration: none;
        color: $main-color;
      }
    }
  }
  .text-center {
    img {
      &:hover {
        @include opacity(0.8);
      }
    }
  }
}

.footer-copyright{
  padding-top: 22px;
  padding-bottom: 12px;  
  background: #eaeaea;
  margin: 0px;
  color: $footer-static-text-color;  
  text-align: left;    
  text-transform: none;

  a{
    color: #333E48;
    font-weight: 700;
    &:hover{
      text-decoration: none;
      color: #ECB800;
    }
  }

  .copyright > p{    
    margin: 0 0 10px;      
    line-height: 20px;
  }
  .payment-icons {
    text-align: right;
    li {
      display: inline-block;
      margin: 0 10px 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.templateIndex {
  #body-content {
    margin: 0px auto;
    padding: 0;
    border: none;
    @include translate3d(0,0,0);
  } 
  .navigation .head {
    @include border-radius(10px, 10px, 0px, 0px);
  }
  .vertical-menu .sidemenu-holder {
    margin-top: -60px;
    .navbar {
      display: block;
      position: static;
    } 
  }
  .bottom-container {
    padding-top: 70px;
  }
  .header-bot {
    .vertical-menu {
      display: none;
    }
  }
}

/* Sidebar -------------------------------*/
.catalog-icon{
  display: inline-block;
  width: 30px;
  height: 15px;
  background-position: left bottom;
  margin-bottom: -2px;
}

.sidebar, #sidebar-blog {
  .search-blog {
    position: relative;
    padding:0;
    .form-control {     
      height: 44px;
      padding: 12px 25px;     
      color: #818181;
    }
    button {
      background: none;
      border: none;
      height: 44px;
      width: 44px;
      text-align: center;
      line-height: 44px;
      padding: 0;
      @include ab(0, n, n, 0);
      z-index: 1;
      .fa {
        color: #818181;
        font-size: 14px;
      }
      &:hover {
        .fa {
          color: $main-color;
        }
      }
    }
  }
  .product-price, .price {
    font-weight: 700;
    font-size: $font-medium;    
  } 
  .price-compare {
    font-size: 11px;
    font-weight: 400;
    color: #8f8f8f;
    margin: 0;

  }
  .price-sale {
    font-weight: 700;   
    font-size: $font-medium;  
    float: none;
    display: block;
  }
  .sb-banner {
    img {
      width: 100%;
    }
    a {
      display: block;
      position: relative;
      &:before {
        @media (min-width: 1025px) {
          @include before;  
        }
      }     
      &:hover {
        &:before {
          @include hover-before;
        }       
      }
    }
  }
  .sb-service {
    @include border-radius(10px, 10px, 10px, 10px);
    border: 1px solid $body-border-color;
    background: #fdfdfd;
    padding: 20px 30px;
    .sb-service-item {
      overflow: hidden;
      border-bottom: 1px solid $body-border-color;
      padding: 0 0 20px;
      margin: 0 0 20px;
      &:last-child {
        border-bottom: none;
        padding: 0;
        margin: 0;
      }
      .list-si {
        li {
          text-align: center;
          font-size: $font-medium;
          color: $color-title;
          padding: 0;
          margin: 0;
          &.icon {
            float: left;
            color: $main-color;
            font-size: 44px;
            margin: 0 15px 0 0;           
            span.icon {
              float: left;
              height: 38px;             
              vertical-align: middle;
              overflow: hidden;
              position: relative; 
              &:before {             
                height: 100%;
                vertical-align: middle;        
                display: inline-block;
                float: left;
              }
            } 
          }
          .text-1 {
            font-weight: 700;                       
          }
        }
      }
    }
  }
  .sb-widget{
    margin-bottom: 55px;
    width: 100%;
    float: left;
    border: none;
    padding:0;
    > div {
      .row {        
        position: relative;
        float: left;
        width: 100%;
        margin: 0 0 40px;
        &:after {
          content: '';
          width: auto;
          height: 1px;
          background: $border-main;
          @include ab(n, 0px, -20px, 0px);
        }
        &:last-child {
          margin-bottom: 0;
          &:after {
            content: none;
          }
        }
      }
    }   
    .sb-head {
      padding-left: 0;
    }
    .sb-content {
      padding-left: 5px;
      padding-right: 0;
      .sb-content-inner {
        .sbp-title > a {
          font-size: 14px;
          color: $color-title;
          margin: 0 0 10px;
          display: block;
          &:hover {
            color: $main-color; 
          }
        }
      }         
    }
    .product-grid-item .product-wrapper,
    .owl-item .product-wrapper {
      &:before,
      &:after {
        content: none !important;
      }
      .product-type {
        color: $body-general-color;
        font-size: 12px;
        display: block;
        padding: 5px 0 0;
      }
      .product-name {
        font-size: $font-medium;
        color: $color-title;
        font-weight: 400;
        margin: 0 0 15px;
        height: auto !important;
        a {
          font-size: $font-medium;
          color: $color-title;
        }
        &:hover {
          color: $main-color;
          a {
            color: $main-color;
          }
        }
      }
      .product-price {
        .price-compare {
          font-size: 16px;
          color: $body-price-color;
        }
        .price {
          color: $body-price-color;
          font-size: 21px;
          font-weight: 400;
        }
        .price-sale {
          display: inline-block;
          font-size: 21px;
          font-weight: 400;
          margin: 0 0 0 10px;
        }
      }
      .product-content .pc-inner .price-cart-wrapper {
        border: none;
        padding: 0px;
      }
    }
    h4.sb-title {
      font-size: 19px;
      color: $body-title-color;     
      font-weight: 400;
      text-transform: capitalize;
      border-bottom: 1px solid $body-border-color;
      line-height: 1.8;
      margin: 0 0 35px;
      padding: 0 0 10px;
      position: relative;
      &:before {
        content: '';
        width: 70px;
        height: 2px;
        background: $main-color;
        @include ab(n, 0, -1px, n);
      }
    }
    .sb-title{
      h4 {
        font-size: 19px;
        color: $body-title-color;     
        font-weight: 400;
        text-transform: capitalize;
        border-bottom: 1px solid $body-border-color;
        line-height: 1.8;
        margin: 0 0 35px;
        padding: 0 0 10px;
        position: relative;
        &:before {
          content: '';
          width: 70px;
          height: 2px;
          background: $main-color;
          @include ab(n, 0, -1px, n);
        }
      }
      span{        
        font-size: 14px;        
      }

      &:after{

      }
      .clear-filter{
        margin-top: 4px;
      }
    }
    .sb-blog {
      .sb-title {
        margin-bottom: 20px;
      }
      .sb-post-item {
        > a {
          display: block;
          position: relative;
          &:before {
            @include before
              }
          &:hover {
            &:before {
              @include hover-before;
            }
          }
        }
      }
      .sb-post-content {
        padding: 15px 0 0;
        .posted-date {
          margin: 0;
          font-size: 12px;
          color: #878787;
        }
        > a {
          display: block;
          font-size: $font-medium;
          font-weight: 700;
          color: $color-title;
          &:hover {
            color: $main-color;
          }
        }
      }
      .owl-theme .owl-controls .owl-nav {
        top: -45px;
      }
    }
    .sb-about-blog {
      p {
        margin: -8px 0 0 0;        
        font-size: 14px;
        line-height: 24px;
      }
    }
    ul{
      list-style: none;   
      ul, ol {
        padding: 0;
        margin: 0;
      }
      .recent-post-item {
        .recent-media-thumb {
          float: left; 
          margin: 0 12px 0 0;
          max-width: 75px;        
        }
        .recent-media-content {
          overflow: hidden;
          a {
            display: block;
            font-size: $body-font-size;
            font-weight: 400;         
            margin: 0 0 7px 0;
            text-transform: capitalize;
            color: $body-title-color;
            &:hover {
              color: $main-color;
            }
          }
          .posted-date {            
            font-size: 12px;
          }
        }
      }       
      li{
        padding: 0;
        margin: 0 0 20px;
        text-transform: capitalize;    
        overflow: hidden;   
        a{
          color: $body-general-color;
          &:hover{
            color: $border-main;
            text-decoration: none;
          }
        }        
      }             
    }
    .main-nav {
      .dropdown-menu {
        li {
          margin: 0px;
          padding: 0 18px;
        }
      }
    }
    .sb-categories-list {      
      padding: 0;
      margin: 0;
      li {
        display: block;   
        margin:0 ; 
        border-bottom: 1px solid $border-main; 
        a{
          font-size: 14px;
          padding: 6px 0 6px 15px;
          line-height: 26px;
          color: #575560; 
          font-weight: 400;
          display: inline-block;
          position: relative;  
          &:hover {
            color: #575560;
          }
        }
      }
      > li{                         
        > a {
          &:before {
            /*content: '\f105';*/
            font-family: FontAwesome;
            font-size: 14px;
            display: inline-block;
            margin: 0 10px;
          }
          &:hover {            
            font-weight: 700;
            &:before {
              font-weight: 400;
            }
          } 
        }
        &:hover {
          a {
            color: #575560;            
            &:before {
              font-weight: 400;
            }
          }
        }
        &.dropdown {
          position: relative;
          > a {
            margin-right: 30px;
          }
          .s-expand {
            @include ab(5px, n, n, 0);
            z-index: 2;
            line-height: 30px;
            width: 30px;
            height: 30px; 
            text-align: center;
            cursor: pointer;
            .fa {
              font-weight: 700;
              font-size: 16px;
            }
          }
          &.s-open {
            > a {
              font-weight: 700;    
              &:before {
                font-weight: 400;
              }
            }
            > .dropdown-menu {
              display: block;
              position: static;
              width: 100%;
              border: none;
              &:before,
              &:after {
                content: none;
              }
              > li {                
                padding-left: 15px;                
                &:first-child {
                  border-top: 1px solid $border-main;     
                }
                &:last-child {
                  border-bottom: none;
                }
                > a {
                  &:hover {
                    color: $main-color;
                  }
                }
                > ul {
                  > li {                    
                    padding-left: 15px;                
                    &:first-child {
                      border-top: 1px solid $border-main;     
                    }
                    &:last-child {
                      border-bottom: none;
                    }
                    > a {
                      &:hover {
                        color: $main-color;
                      }
                    }
                  }
                }
              }              
            }
          }
        }
        &:last-child {
          border-bottom: none;
        }
      }
    }
    .sb-categories{ 
      .sb-title {
        margin-bottom: 20px;
      }
      ul {
        padding: 0;
        margin: 0;
        li{         
          display: block;   
          margin:0 ; 
          border-bottom: 1px solid $border-main;      
          a{
            font-size: 14px;
            padding: 6px 0;
            line-height: 26px;
            color: #575560; 
            font-weight: 400;
            display: inline-block;
            position: relative;
            &:before {
              content: '\f105';
              font-family: FontAwesome;
              font-size: 14px;
              display: inline-block;
              margin: 0 10px;
            }
            &:hover {
              color: #575560;
              font-weight: 700;
              &:before {
                font-weight: 400;
              }
            }       
          }      
          &:hover {
            a {
              color: #575560;
              font-weight: 700;
              &:before {
                font-weight: 400;
              }
            }
          }
          &:last-child {
            border-bottom: none;
          }
        }
      }    
    }
    &.sb-filter{
      display: block;
      clear: both;
      width: 100%;
      float: left;
      text-align: left;
      font-weight: normal;

      .advanced-filters{

        li.advanced-filter{
          a{
            position: relative;
            padding-left: 25px;

            &:before{
              content: "";
              @include ab(3px,0,n,n);
              width: 15px;
              height: 15px;
              background-color: $white;
              border: 1px solid $body-border-color;
            }

            &:after{
              content: "";
              @include ab(3px,0px,n,n);
              width: 15px;
              height: 15px;
              @include opacity(0);
              background: $main-color;

            }
          }

          &.af-color{
            border: none;
            padding: 0;
            float: none;
            width: inherit;
            margin-left: 5px;            
            margin-right: 5px;
            width: 17px;
            height: 17px;
            line-height: 17px;
            @include border-radius-circle;
            position: relative; 
            cursor: pointer;
            float: left;

            a{              
              width: 17px;
              height: 17px;
              line-height: 17px;
              padding: 0;
              position: relative;
              display: block;             

              &:before,
              &:after {
                position: absolute;
                top: 0;
                left: 0;
                width: 17px;
                height: 17px;
                line-height: 17px;
                @include border-radius-circle;
                border: none;
                background: none;
                z-index: 5;
                content: '' !important;
              }

              &:after{

              }

            }

            &.active-filter, &:hover{
              a {
                &:before,
                &:after {
                  @include opacity(1);
                  content: '' !important;
                  position: absolute;
                  width: 7px;
                  height: 7px;
                  @include border-radius-circle;                
                  top: 5px;
                  left: 5px;
                  background: #fff;            
                } 
              }
            }
          }

          &.active-filter{
            a{
              &:before{

              }

              &:after{
                @include opacity(1);
              }
            }
          }
        }
      }

      &.size{
        .advanced-filters{
          li.advanced-filter{
            width: auto;
            display: inline-block;
            float: left;
            margin: 5px;
            a{
              color: $body-title-color;
              padding: 10px;
              font-size: 11px;
              text-transform: uppercase;
              background: #f6f6f6;
              text-align: center;
              height: 35px;
              min-width: 35px;
              display: inline-block;
              font-weight: 600;

              &:before, &:after{
                width: 0;
                height: 0;
                border: 0;
              }
              &:hover{
                color: #fff;
                background: $main-color;
              }
            }

            &.active-filter{
              a{
                color: #fff;
                background: $main-color;
              }
            }
          }
        }
      }
    }

    &.sb-image{
      padding: 0;
      border: 0;
      text-align: center;
    }

    .sb-custom-block{
      ul{
        li{
          a{
            cursor: pointer;
            i{
              color: $body-general-color;
              font-size: $body-font-size + 5px;
              min-width: 27px;
            }

            &:hover{
              i{
                color: $body-title-color;
              }
            }
          }
        }
      }
    } 
    .owl-theme .owl-controls .owl-nav {
      @include ab(-60px, n, n, 0);
      > div.owl-prev,
      > div.owl-next {
        position: static;
      }
    } 
    &.vertical-menu {
      margin-bottom: 30px;
    }
  } 
}
#sidebar-blog {
  .sb-widget {
    margin-bottom: 50px;
    .sb-blog-tag {
      li {
        margin: 0;
        a {
          padding: 5px 15px;
          line-height: 1.8;
          color: #565656;
          display: inline-block;
          border: 1px solid $border-light;
          margin: 0px 8px 8px 0;
          &:hover {
            background: $button-hover-btn1;           
            border-color: $button-hover-btn1;
            color: $white !important;
          }
        }
      }
    }
  }
}
.product-name,
.bp-content-inner {
  &:hover {
    a {
      color: $main-color;
    }
  }
}
.sold-out {
  color: $body-price-sale-color;
  font-size: $size-h4;
  font-weight: 400;
}
.price-range-slider {
  padding-bottom: 30px;
  margin-bottom: 35px;
  border-bottom: 1px solid $body-border-color;
  h4 {
    border: none !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #575560 !important;
    &:before {
      content: none !important;
    }
  } 
  .ui-widget-content {
    border: none;
    height: 6px;
  }
  .ui-slider-horizontal .ui-slider-range {
    background-color: #dcdcdc;
    z-index: 1;
    border: none;
    height: 6px;    
  }
  .ui-slider-range.ui-widget-header.ui-corner-all {
    background-color: #cacaca;  
    border: none;
    height: 2px;
    top: 2px;
  }
  .ui-state-default, 
  .ui-widget-content .ui-state-default, 
  .ui-widget-header .ui-state-default {
    background-color: $white;
    background-repeat: repeat-x;
    border: 3px solid;    
    height: 16px;
    margin-left: -5px !important;   
    position: absolute;
    top: -6px;
    width: 16px;
    border-color: $main-color;
    @include border-radius-circle;
    @include opacity(1);
    cursor: pointer;
  }
  .range-right {
    .ui-state-default, 
    .ui-widget-content .ui-state-default, 
    .ui-widget-header .ui-state-default {
      margin-left: -15px !important;
    }
  }
  .price-range {
    font-size: 14px;
    p {
      margin: 10px 0 15px;
    }
    #amount {
      font-weight: normal !important;
      color: #686868;

    }
    label {
      font-weight: normal;      
      color: #686868;

    }
  }
}

.sb-filter-wrapper {  
  .sbf-title {
    font-size: $body-font-size;
    font-weight: 700; 
    border: none;
    color: #575560;
    &:before {
      content: none;
    }   
  }
  .advanced-filters {     
    padding: 10px 0 0;
    margin: 10px 0 0;     
  } 
}
.sbw-filter {  
  > ul,
  > o {
    list-style: none;
    margin: 0;
    padding: 15px;
    li {
      margin: 8px 0;
      a {
        &:hover {
          color: #888;
        }
      }
    }
  }
  .price {
    color: $main-color;
  }
  .price-compare {
    color: #aaa;
  }
  .sb-title {
    padding: 14px 15px;
    margin: 0;
    border-bottom: 1px solid $border-main;
  }
  > div {    
    .row {margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .sb-product-content {
      padding-left: 0;
    }
    .sb-product-head {
      a {
        display: block;
        border: 1px solid $border-light;
        overflow: hidden;
        &:hover {
          border-color: $border-main;
        }
      }
    }
    .sb-price {margin: 10px 0 0; }    
    .sb-filter {
      margin: 0 0 30px; 
      padding-bottom: 20px;
      border-bottom: 1px solid $body-border-color;
      &:last-child {
        margin-bottom: 0;
        border-bottom: none;
        padding-bottom: 0;
      } 
    }
    .advanced-filters {
      list-style: none;
      margin: 15px 0 0;      
      > li {
        margin: 0px 0 15px;
        padding: 0;
        > a {
          position: relative;
          padding-left: 25px;         
          &:before {
            content: '';
            border: 1px solid $border-main;
            width: 15px;
            height: 15px;
            @include ab(3px, 0, n, n);
            @include CSStransition(all, 0.5s, ease, 0s);
            @include border-radius(3px, 3px, 3px, 3px);
            display: block;
          }     
          &:hover {
            color: $main-color; 
            &:before {
              border-color: $main-color !important;
              background: $border-main;
            }           
          }
        }
        &.active-filter {
          > a {
            color: $main-color;
            &:before {
              border-color: $main-color;          
            }
            &:after {
              content: '';
              background: $main-color;
              width: 15px;
              height: 15px;
              @include ab(3px, 0px, n, n);
              @include border-radius(3px, 3px, 3px, 3px);
            }       
          }
        } 
      }
    }
  }
}
.sb-banner {
  .list-unstyled {
    li {
      display: block;
      margin: 0 0 30px;
      a {
        display: block;
        position: relative;
        overflow: hidden; 
        text-align: center;

        &:before {
          @media (min-width: 1025px) {
            @include before;  
          }
        }        
        img {
          width: 100%;
        }

        &:hover {
          &:before {
            @include hover-before;            
          }          
        }
      }     
    }
  }
}

/* home page ------------------------------*/
.shopify-section {
  .special-offer-product {
    .product-wrapper {      
      @include border-radius-20px;
      border: 2px solid $main-color;
      overflow: hidden;
      padding: 20px 20px 30px;
      margin: -40px 15px 0 0;
      background: $white;
      .product-head {       
        .product-image {
          @include CSStransition(all, 0.35s, ease, 0s);          
          margin: 7px 0 15px;
          .switch {
            a > span {
              img {
                @include opacity(0);            
                @include ab(50%, 0, 0, 0);
                @include translate(0%, -50%);
                z-index: 0;              
                display:inline-block;
                vertical-align: middle;
                max-width: 98%;
                margin: 0px auto;
              }
            }
          }        
          &:hover {           
            .featured-image.switch {
              @include opacity(0);    
            }
            a > span {
              img {
                @include opacity(1);            
                z-index: 1;
              }
            }
          }
        }
      }
      .special-product-label {
        .spl-1 {
          font-size: 28px;
          color: $other-color;
          display: inline-block;
          strong {
            display: block;           
          }
        }
        .spl-2 {
          float: right;
          background: $body-label-sale-background;
          color: $body-label-sale-color;
          padding: 10px 30px;
          line-height: 1.2;
          text-align: center;
          @include border-radius(10px, 10px, 10px, 10px);
          .spl-text-2 {
            font-weight: 700;
          }
        }
      }
      .product-content {        
        .product-type {
          margin: 10px 0 1px;
        }
        .deal-progress {
          overflow: hidden;
          .deal-stock {
            width: 100%;
            overflow: hidden;
            text-align: left;
            padding: 26px 0 13px;
            .stock-sold {
              float: left;
              font-size: $font-medium;
              color: #383838;              
            }
            .stock-available {
              float: right; 
              font-size: $font-medium;
              color: #383838;
            }
          }
          .progress {
            @include border-radius(10px, 10px, 10px, 10px);
            @include box-shadow(0 0 0 $white);
            background-color: $bg-black;
            height: 20px;
            margin: 0;
            .progress-bar {
              background-color: $main-color;
              @include border-radius(10px, 10px, 10px, 10px);
              @include box-shadow(0 0 0 $white);
            }
          }
        }
        .pc-inner {
          padding: 0;
          text-align: center;
        }
        .price-sale {
          float: none;
          font-size: 30px;
        }
        .price-compare {
          margin: 0 10px 0 0;
          font-size: $size-h5;
          color: #383838;
        }
        .price {
          font-size: 30px;
        }
        .product-name {
          text-align: center;
          font-size: $font-medium;
          margin: 0 0 10px;
          a {
            color: $body-product-title;
            font-size: $font-medium;
            font-weight: 700;
          }
          &:hover {
            a {
              color: $main-color;
            }
          }
        }
        .deal-text {
          display: block;
          font-size: 15px;
          color: #383838;
          padding: 15px 0 0;
        }
        .is-countdown {
          border: none;
          background: none;
          text-align: center;
          margin: 15px auto 0;
          overflow: hidden;
          .countdown-row {
            padding: 0;
          }
          .countdown-section {
            width: auto;
            margin: 0px auto;
            padding: 0 7px;
            display: inline-block;
            position: relative;
            float: none;
            &:after {
              content: ':';
              color: $body-label-deal-color;
              font-size: 30px;
              line-height: 40px;
              height: 40px;
              @include ab(0px, n, n, -4px);
            }
            &:last-child {
              &:after {
                content: none;
              }
            }
            .countdown-amount {             
              font-size: 30px;
              padding: 0 10px;
              line-height: 40px;
              float: none;
              margin:0 auto;              
              background: $body-label-deal-background;
              color: $body-label-deal-color;
              @include border-radius(5px, 5px, 5px, 5px);

            }
            .countdown-period {
              font-size: 12px;
              text-transform: uppercase;
              float: none;              
              padding: 5px 0 0;
              color: $body-label-deal-color;
              margin: 0px auto;
            }
          }
        }
      }
    }   
  } 
}
.home-carousel {
  margin: 0 auto;
  overflow: hidden;  
  > h4 {    
    font-size: $font-custom;
    font-weight: 400;
    color: $body-title-color;
    border-bottom: 1px solid $border-main;    
    line-height: 32px;
    padding-bottom: 13px;
    text-transform: capitalize;
    margin: 0 0 20px;    
    position: relative;
    &:before {
      content: '';
      display: block;
      width: 115px;
      height: 2px;
      background: $main-color;
      @include ab(n, 0, -1px, 0);
    }
  }
  .product-list,
  .related-items {
    overflow: hidden;
    .product-wrapper {
      width: 20%;
      float: left;
      padding: 15px;  
      .pc-inner .price-cart-wrapper {
        min-height: 43px;
        overflow: inherit;
      }
      .product-head .product-name {        
        overflow: hidden;
      }
      .price-cart-wrapper {
        .product-price {
          @include ab(n, 0, 12px, n);
          line-height: 1.2;
          padding: 0;
          .price-compare {
            display: block;
            margin: 0;
          }
        }
      }
    }
    &.owl-carousel {
      overflow: visible;
      .product-wrapper {
        width: 100%;
      }
    }
  }  
  .owl-carousel {    
    .owl-stage-outer {
      padding: 10px 0px 50px;
      // overflow: visible;
    }
  }
  .owl-theme .owl-controls .owl-nav {
    @include ab(-45px, n, n, 0);
    > div.owl-prev,
    > div.owl-next {
      position: static;
    }
  }
  .owl-dots {
    clear: both;
    width: 100%;
    text-align: center;
    margin: 0px auto;   
    position: relative;
    .owl-dot {
      margin: 0px auto;
      display: inline-block;
      span {
        display: block;
        margin: 0 7px;
        width: 8px;
        height: 8px;
        background: $bg-other;
        @include CSStransition(all, 0.35s, ease, 0s);
        @include border-radius-circle;
      }
      &.active, &:hover {
        span {
          width: 30px;
          background: $main-color;
          @include border-radius(4px, 4px, 4px, 4px);
        }
      }
    }
  }
}

.title-wrapper {  
  h2 {    
    font-size: $font-custom;
    font-weight: 400;
    color: $body-title-color;
    border-bottom: 1px solid $border-main;    
    line-height: 32px;
    padding-bottom: 13px;
    text-transform: capitalize;
    margin: 0 0 20px;    
    position: relative;
    &:before {
      content: '';
      display: block;
      width: 115px;
      height: 2px;
      background: $main-color;
      @include ab(n, 0, -1px, 0);
    }
  }
}

.home-product-deals {  
  position: relative;
  .title-wrapper {
    h2 {
      padding: 0;
      border: none;
      &:before {
        content: none;
      }
    }
  }
  .owl-theme .owl-controls .owl-nav {
    @include ab(40px, n, n, 35px);
    width: 41%;
    padding-bottom: 3px;
    border-bottom: 1px solid $border-main;
    > div {
      position: static;
      width: auto;
      color: #a0a0a0;
      height: 15px;
      line-height: 15px;
      &.owl-next {
        float: right;
        .fa {
          &:before {
            float: right;
            line-height: 15px;
            padding-right: 0;
            padding-left: 10px;
          }
        }
      }
      .fa {
        font-family: $font-standard;
        font-size: $body-font-size;
        &:before {
          font-family: FontAwesome;
          font-size: 18px;
          padding-right: 10px;
          line-height: 15px;
          float: left;
        }
      }      
      &:hover {
        color: $color-title;
      }
    }
  }   
  .deals-item {   
    .special-product-wrapper {      
      @include border-radius-20px;
      border: 2px solid $main-color;
      overflow: hidden;
      padding: 20px;
      margin: 0;       
      .special-featured-image {
        position: relative;
        padding-top: 15px;
        padding-bottom: 15px;
      }
      .special-product-label {    
        @include ab(-5px, 15px, n, n);    
        z-index: 1;
        .spl-text-2 {       
          display: block;
          background: $body-label-sale-background;
          color: $body-label-sale-color;
          padding: 11px 35px;
          line-height: 1.1;
          text-align: center;
          font-weight: 700;
          font-size: $size-h5;
          @include border-radius(10px, 10px, 10px, 10px);       
        }
      }   
      .special-thumb-image {
        max-width: 100px; 
        padding: 15px;    

        li {
          list-style: none;
          display: block;
          margin: 0 0 14px 0;
          a {
            display: block;
            position: relative;
            border: 1px solid $border-main;
            &:after {
              content: '';
              height: 2px;
              width: 100%;
              @include ab(n, 0, -1px, 0);
            }
            &:hover {
              &:after {
                background: $main-color;
              }
            }
          }
          &:last-child {
            margin-bottom: 0 !important;
          }
        }
      }
      .special-product-content {
        padding: 75px 25px 0 0;
        float:right;      
        .pc-inner {
          padding: 0;
          text-align: center;
        }
        .deal-text {
          display: block;
          font-size: $font-medium;
          color: #383838;
          margin: 30px auto 0;
        }
        .price-sale {
          float: none;
          font-size: 30px;
        }
        .price-compare {
          margin: 0 10px 0 0;
          font-size: $size-h5;
          color: #383838;
        }
        .price {
          font-size: 30px;
        }
        .product-name {
          text-align: center;
          font-size: $font-medium;
          margin: 0 0 15px;
          a {
            color: $product-title-color;
            font-size: $font-medium;
            font-weight: 700;
          }
          &:hover {
            a {
              color: $main-color;
            }
          }
        }
        .is-countdown {
          border: none;
          background: none;
          text-align: center;
          margin: 15px auto 0;
          overflow: hidden;
          .countdown-row {
            padding: 0;
          }
          .countdown-section {
            width: auto;
            margin: 0px auto;
            padding: 0 7px;
            display: inline-block;
            position: relative;
            float: none;
            &:after {
              content: ':';
              color: $body-label-deal-color;
              font-size: 30px;
              line-height: 40px;
              height: 40px;
              @include ab(0px, n, n, -4px);
            }
            &:last-child {
              &:after {
                content: none;
              }
            }
            .countdown-amount {             
              font-size: 30px;
              padding: 0 10px;
              line-height: 40px;
              float: none;
              margin:0 auto;              
              background: $body-label-deal-background;
              color: $body-label-deal-color;
              @include border-radius(5px, 5px, 5px, 5px);

            }
            .countdown-period {
              font-size: 12px;
              text-transform: uppercase;
              float: none;              
              padding: 5px 0 0;
              color: $body-label-deal-color;
            }
          }
        }
      }
    }
  }
}

/*home-blog ====================================*/
.latest-blog  {
  .blog-container {
    padding: 15px 10px; 
    border-right: 1px solid $border-main;
    margin-right: -1px;
    position: relative;
    .blog-img {
      margin: 0 auto 15px;
      p {
        margin: 0;
        padding: 0;
      }
      a {
        display: block;
        position: relative;
        overflow: hidden;
        &:before {
          @media (min-width: 1025px) {
            @include before;  
          }
          z-index: 11;
        }
        &:hover {
          &:before {
            @include hover-before;
          }
        }
      }
    }
    .news-date {
      background: #333;
      color: $white;
      font-size: 12px;      
      padding: 4px 6px;   
      @include ab(15px, 10px, n, n);
      z-index: 11;
    }
    h5 {
      text-transform: none;
      font-size: $size-h6;
      &:hover {
        a {
          color: $main-color;
        }
      }
    }
    p {
      font-size: 12px;
      color: #999;
    }
  }
}
/* end home-blog========================*/


/*bottom*/

.bottom-content{
  border-top: 2px solid #ededed;
  border-bottom: 2px solid #ededed;
  padding-top: 30px;
  padding-bottom: 25px;  
  .bottom-item{
    text-align: center;
    .bottom-icon {
      &:hover {
        img {
          @include opacity(0.65);
        }
      }
    }
    .bottom-title {
      font-size: 13px;
      line-height: 30px;
      color: #000;
      font-weight: 400;
      text-transform: uppercase;
      margin-top: 3px;
    }
  }
}

#widget-newsletter{
  display: block;   
  padding: 20px 0;
  margin: 0;
  position: relative;
  background: $main-color;
  color: $button-btn1-txt;
  .newsletter-title {
    display: inline-block;
    color: $button-btn1-txt;
    font-size: $size-h3;
    padding: 10px 50px 5px 0;
    line-height: 30px;    
    .icon {
      font-size: 40px;
      float: left;
      margin: 0 15px 0 0;
      &:before {
        display: block;
        line-height: 30px;
      }
    }
  }
  p{
    display: inline-block;
    text-transform: none;
    margin: 0;
    color: $button-btn1-txt;
    font-size: $font-medium;
    padding: 10px 20px 5px 0;
    line-height: 30px;
    span {
      font-weight: 700;
    }
  }

  form{  
    width: 40%;  
    margin: 0px auto;
    position: relative;    
    float: right;
    input{      
      color:#797979;      
      height: 50px;                 
      width:85%;
      display:inline-block;
      vertical-align:middle; 
      border: none;
      padding: 15px 50px 15px 30px;      
      line-height: 20px;
      @include border-radius-25px;
    }
    #email-submit{            
      height: 50px;
      padding: 10px 35px;
      line-height: 30px;
      font-weight: 400;
      font-size: $body-font-size;
      text-transform: capitalize;
      background: $button-hover-btn1;
      color: $button-hover-btn1-txt;
      border: 1px solid $button-hover-btn1-border;
      @include ab(0, n, n, 0);
      @include border-radius(0, 25px, 25px, 0);
      @include CSStransition(all, 0.35s, ease-in-out, 0 0s);
      &:hover {
        background: $black;
        border-color: $black;
        color: $white
      }
    }
  }
}
/*end bottom*/
/*end homepage*/

/* Category page --------------------------*/
.page-cata {
  h2 {
    text-align: left;
    color: $color-title;
    font-size: $font-custom;
    font-weight: 400;
    margin: 0 0 20px;   
  }
  .pagination-holder .pagination {
    border: none;
    text-align: right;
    li {
      margin: 0;
    }
  }
  .col-md-12 {
    .cata-product {
      .product-grid-item {
        @media (min-width: 992px) {
          width: 25%;
          .product-wrapper {
            &:before {
              content: '';
            }
          }
          &:nth-child( 4n + 1) {
            clear: both;
            .product-wrapper {
              &:before {
                content: none !important;
              }
            }
          }
          &:nth-child( 3n + 1) {
            clear: none;   
            .product-wrapper {
              &:before {
                content: '';
              }
            }
          }
        }
      }
    }
  }
}
.cata-header {
  margin: 0 0 30px;
  p {
    margin: 20px 0 0;
    color: #888;
  }
}
.wrap-cata-title {
  h2 {
    display: inline-block;
  }
  .pagination-top-showing {
    float: right;
    margin: 0 0 20px;
    font-size: $font-small;
    color: #717171;
    line-height: 30px;
  }
}
.cata-descrip{ 
  margin-bottom: 60px;
  > p{
    margin-top: 40px;
    strong{
      text-transform: uppercase;
      color: $body-title-color;
      font-size: 150%;
    }    

    &+p{
      margin-bottom: 40px;      
    }

    &:last-child{
      line-height: 28px;
    }
  }
}

.cata-title{
  display: block;
  margin-bottom: 30px;
  h3{
    text-transform: uppercase;
    font-weight: 600;
    color: $body-title-color;
    letter-spacing: 0;
  }

  span{
    text-align: right;
    color: $body-title-color;
  }
}

/*toolbar*/
.cata-toolbar{
  margin: 0 0 37px;
  width: 100%;
  float: left;
  position: relative;
  padding: 10px 20px 0 20px;
  background: $bg-light;

  .grid-list{
    display: inline-block;
    padding: 0;   
    .grid {
      margin: 0;
      font-size: 20px;
      color: $color-title; 
      line-height: 38px;
      cursor: pointer;
      @include CSStransition(all, 0.3s, ease, 0s);
      .icon {
        &:before {
          position: relative;
          top: 3px;
        }
      }
      &.active {
        color: $color-title;        
        cursor: default;
      }
      &:hover{                
        color: $color-title;        
      }
    }
    .list, .grid-extended, .list-small {
      margin-left: 15px;
      display: inline-block;
      font-size: 20px;
      color: #d6dbe1;      
      line-height: 38px;   
      cursor: pointer;
      @include CSStransition(all, 0.3s, ease, 0s);
      .icon {
        &:before {
          position: relative;
          top: 3px;
        }
      }      
      &.active {
        color: $color-title;       
        cursor: default;
      }
      &:hover {                
        color: $color-title;       
      }
    }
  }
  .filter{
    margin-right: 40px;
    padding-bottom: 20px;
    margin-bottom: -1px;

    &:hover{
      > .dropdown-menu{
        display: block;
        z-index: 11;
      }
    }

    > a{
      border: 1px solid $body-border-color;
      padding: 9px 20px;
      font-size: 14px;
      display: inline-block;
      width: 140px;
      text-align: center;

      i{
        float: right;
        margin-top: 4px;
      }

      &:hover{
        text-decoration: none;
        color: $body-link-color;
      }
    }

    > .dropdown-menu{
      background-color: #fbfbfb;
      right: auto;
      left: 15px;
      width: 100%;
      padding: 25px 30px;
      min-width: 700px;
      border: 1px solid #ddd;

      >.list-inline{
        > .sbw-filter{
          width: 100%;
          float: left;
          .grid-uniform{
            > .sb-widget{
              width: 25%;
              float: left;
            }
          }
        }
        .sb-widget{
          .sb-title{
            color: $body-link-color;
            font-size: 14px;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 0.1em;
            margin-bottom: 15px;
          }

          li{
            a{
              letter-spacing: 0.1em;
              line-height: 26px;
              padding-left: 20px;
              position: relative;

              &:before{
                content: "";
                @include ab(4px, 0px,n,n);
                width: 12px;
                height: 12px;
                border-radius: 100%;
                -webkit-border-radius: 100%;
                background: #ccc;
                @include opacity(0);
              }
              &:after{
                content: "";
                @include ab(6px, 2px,n,n);
                width: 8px;
                height: 8px;
                border-radius: 100%;
                -webkit-border-radius: 100%;
                background: #797979;
              }

              &:hover{
                text-decoration: none;
                color: #000;
                &:before{
                  @include opacity(1);
                }
              }
            }

            &.active-filter{
              a{
                text-decoration: none;
                color: #000;
                &:before{
                  @include opacity(1);
                }
              }
            }
          }
        }
      }
    }

    .clear-filter{
      display: none;
    }
  }
  .group-toolbar {
    text-align: center;
    > li {
      margin: 0 0 10px;
    }
  }
  .group-gl {
    float: left;
  }
  .pagination-top {
    float: right;
    li {
      a {
        padding: 4px 15px;
        background: none;
        border: 1px solid transparent;
        color: #7e7e7e;
        margin: 0;
        line-height: 28px;
        font-size: $body-font-size;
        min-width: 45px;
        text-align: center;
        display: inline-block;
        @include border-radius(15px, 15px, 15px, 15px);
        &.disabled {
          @include opacity(0.7);
          cursor: no-drop;
        }
      }
      &.active,
      &:hover {
        a {
          border-color: $border-main;
          background: $white;
        }
      }
    }
  }
  .sort-by{
    display: inline-block;   
    font-size: 13px;
    color: $body-general-color;
    > label{
      margin-right: 10px;      
      vertical-align: top;
      margin-bottom: 0;
      display: inline-block;
      line-height: 27px;

    }
    .sort-by-inner{
      display: inline-block;      
      position: relative;
      .dropdown-toggle{
        display: inline-block;
        button{
          border: 1px solid $border-main;
          background: $white;
          padding: 8px 25px;          
          font: 14px/20px $font-standard;
          color: #7e7e7e;
          text-transform: none;
          min-width: 160px;
          text-align: left;
          font-weight: 400;
          @include border-radius(15px, 15px, 15px, 15px);
          span{
            padding-right: 5px;
            float: left;

            a:hover{
              text-decoration: none;
            }

            &.visible-xs{
              padding-top: 0;
            }
          }

          i{
            float:right;
            width: 10px;
            text-align: right;
            padding-top: 4px;
          }
        }
      }
    }

    #sort_by_box{      
      width: 100%;      
      min-width: auto;
      right: 0;
      left: auto;
      li{
        padding: 0 10px;
        text-align: left;
        margin-bottom: 0;
        font-size: 13px;

        a{
          padding: 5px 0;
          transition: none;
        }

        &:hover{
          background: $bg-black;
          a{
            color: $body-general-color;
          }
        }

        &.active{
          background: $bg-black;
          a{
            cursor: default;
            background-color: transparent;
            color: $body-general-color;
          }
        }
      }
    }
    &:hover{
      #sort_by_box{
        display: block;
      }
    }
  }

  .visible-xs{
    cursor: pointer;      
    vertical-align: top;
    padding-top: 9px;

    .filter-toggle{
      text-transform: uppercase;     
      padding: 5px 20px;  
      border: 1px solid $border-main; 
      font-size: 12px;  
    }    
  }

}
.pagination-catalog {
  border-top: 1px solid $border-main;
}
.cata-product.cp-grid{
  display: block;
  margin: 0px;     
  letter-spacing: -0.31em;
  vertical-align: top;
  clear: both;
  .product-grid-item {    
    width: 33.333333%;
    letter-spacing: 0;
    vertical-align: top;
    float: none;   
    display: inline-block;    
    &:nth-child(3n + 1) {
      .product-wrapper {
        &:before {
          content: none;
        }
      }      
    }
  }

  &.cp-none-sb{
    .product-grid-item {
      width: 25%;
      &:nth-child(4n + 1) {
        .product-wrapper {
          &:before {
            content: none;
          }
        }      
      }
    }
  }
}
.available {
  color: $main-color;
  font-weight: 700;
}
.not-available {
  color: $main-color;
  font-weight: 700;
}

.cata-list {
  .page-search .cata-product.cp-grid.col-sm-12 .product-grid-item .product-wrapper:before {
    content: none !important;
  }
  .cata-product {
    margin: 0 -15px;  
    .product-grid-item {
      width: 100% !important;
      clear: both;
      padding: 0px 0 30px;
      margin: 0 0 30px;          
      overflow: hidden;
      position: relative;
      &:after {
        content: '';
        height: 1px;
        background: $border-main;
        @include ab(n, 15px, 0, 15px);
      }
      &:last-child {
        border-bottom: none;        
        margin-bottom: 0;
      }
      .product-label {
        left: 15px;
      }
    }
    .product-wrapper {      
      overflow: hidden;
      padding: 0;
      &:before,
      &:after {
        content: none !important;
      }
      .product-head {
        float: left;
        width: 75%;
        .product-image {
          .product-name {
            height: auto !important;
          }
          .featured-img {
            float: left;
            width: 43.33333333%;
            padding: 0 15px;
            margin: 0px auto;
          }
          .product-wrap-info {
            float: right;
            width: 56.66666667%;
            padding: 0 15px;
            .product-review {
              display: block;
            }
            .product-des-list {
              display: block;
              font-size: 13px;              
              line-height: 18px;
              margin: 15px 0 0 0px;
              p {
                margin: 0 0 15px;
              }
            }
          }
        }
      }
      .product-content {
        float: left;
        width: 25%;
        padding: 0 15px;    
        .product-name {
          height: auto !important;
          margin: 0 0 10px;
        }
        .price-cart-wrapper {
          padding: 0;
          border: none;
        }
        .product-button {
          position: static;
          padding: 0;
          border: none;
          text-align: left;
          z-index: 1;
          @include opacity(1);
          @include translate(0, 0);
        }
        .product-price, .price {
          font-size: 23px;
          padding-top: 0;
          padding-bottom: 0;        
          border: none;
          .price-sale {         
            font-size: 23px;          
            margin: 0;
            display: block;
            float: none;
          }
          .price-compare {
            float: none;
            margin: 0;
            font-size: 12px;
            display: block;
          }
        }
        .availability {      
          display: block;
          font-size: 12px;
          //color:  #8f8e94;        
          font-weight: normal;
          border-bottom: 1px solid $body-border-color;
          padding: 0 0 2px;
          margin: 0 0 10px;
          .available {
            color: $color-note;
            font-weight: 700;
          }
        }
        .add-cart-button {
          text-align: left; 
          margin: 5px 0 14px;
          overflow: hidden;    
          position: static;
          .btn-primary {
            font-weight: 700;
            color: $white;
            font-size: $body-font-size;
            display: block;
            padding: 0px 10px;
            height: 43px;
            line-height: 43px;
            width: 100%;
            white-space: nowrap;
            @include border-radius-20px;
          }
          .icon {        
            font-size: 20px;
            margin: 0 5px 0 0;
            display: inline-block;
            width: auto;          
            &:before {
              position: relative;
              top: 3px;            
            }
          }           
        }
        .product-wishlist {
          display: inline-block;
        }
        .add-to-wishlist {
          margin: 0;
          line-height: 18px;    
        }
      }
    }
  } 
  .cata-toolbar {
    .grid-list {
      .list {
        color: $color-title;
      }
      .grid-extended,
      .grid,
      .list-small {
        color: #d6dbe1;
        &:hover {
          color: $color-title;
        }
      }
    }
  }
}
.cata-grid-extended {
  .cata-product {
    .product-grid-item {
      .product-wrapper {
        &:after {
          bottom: -7.5%;
        }
        .product-content .product-review {
          display: block;
          margin: 0 0 15px;
        }
        .product-des-grid {
          display: block;         
          font-size: 12px;
          line-height: 1.7;
          margin: 0 0 30px;
        }
        .product-sku {
          display: block;
          font-size: 12px;
          margin: 0 0 5px;
          min-height: 18px;
        }
      }
      &:hover {
        .product-content {
          .product-button {
            bottom: -7.5%;
          }
        }
      }
    }
  }
  .cata-toolbar {
    .grid-list {
      .grid-extended {
        color: $color-title;
      }
      .list, 
      .grid,
      .list-small {
        color: #d6dbe1;
        &:hover {
          color: $color-title;
        }
      }
    }
  }  
}
.cata-list-small {
  .page-search .cata-product.cp-grid.col-sm-12 .product-grid-item .product-wrapper:before {
    content: none !important;
  }
  .cata-product {
    margin: 0 -15px;  
    .product-grid-item {
      width: 100% !important;
      clear: both;
      padding: 0px 0 30px;
      margin: 0 0 30px;          
      overflow: hidden;
      position: relative;
      &:after {
        content: '';
        height: 1px;
        background: $border-main;
        @include ab(n, 15px, 0, 15px);
      }
      &:last-child {
        border-bottom: none;        
        margin-bottom: 0;
      }
      .product-wrapper {      
        overflow: hidden;
        padding: 0;
        &:before,
        &:after {
          content: none !important;
        }
        .product-head {
          float: left;
          width: 75%;
          .product-name {
            height: auto !important;
          }
          .product-image {
            .featured-img {
              float: left;
              width: 22.222222%;
              padding: 0 15px;
              margin: 0px auto;
              height: auto;
              a {
                .featured-image {
                  position: static;
                  @include translate(0, 0);
                }
              }
              .product-label {
                left: 15px;
              }
            }
            .product-wrap-info {
              float: right;
              width: 77.777778%;
              padding: 0 45px 30px 15px;
              position: relative;
              font-size: 12px;
              margin: 0;
              .product-review {
                display: block;
                margin: 0;
                @include ab(n, 15px, 0, n);
              }
              .product-des-list {
                display: block;
                font-size: 13px;
                //color: #7d7d7d;
                line-height: 18px;
                margin: 5px 0 0 0px;               
                p {
                  margin:0;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
              }
            }
          }
        }
        .product-content {
          float: left;
          width: 25%;
          padding: 0 15px;    
          .product-name {
            height: auto !important;
            margin: 0 0 10px;
          }
          .price-cart-wrapper {
            padding-bottom: 20px;
            border-bottom: 1px solid $body-border-color !important;          
            margin: 0px 0 16px;          
          }
          .product-button {
            position: static;
            padding: 0;
            border: none;
            text-align: left;
            z-index: 1;
            @include opacity(1);
            @include translate(0, 0);
          }        
          .product-price, .price {
            font-size: 23px;
            padding-top: 0;
            padding-bottom: 0px;              
            border: none;       
            line-height: 35px;
            .price-sale {         
              font-size: 23px;          
              float: none;
              display: block;            
              line-height: 20px;
            }
            .price-compare {
              float: none;
              margin: 0;
              font-size: 12px;            
              display: block;
              line-height: 15px;
            }
          }                 
          .product-wishlist {
            display: inline-block;
          }
          .add-to-wishlist {
            margin: 0;
            line-height: 18px;    
          }
        }
      }
    }  
  }
  .cata-toolbar {
    .grid-list {
      .list-small {
        color: $color-title;
      }
      .grid-extended,
      .grid,
      .list {
        color: #d6dbe1;
        &:hover {
          color: $color-title;
        }
      }
    }
  }
}
.pagination-holder {
  .pagination-showing { 
    margin: 25px 0 0 0; 
    line-height: 40px;
  }
  .pagination {
    margin: 0px auto;
    display: block;
    @include border-radius(0, 0, 0, 0);
    background: none;
    padding: 25px 0 0;
    border-top: 1px solid $border-main;
    overflow: hidden;
    text-align: center;
    > li {
      margin: 0 5px 0 0;
      display: inline-block;      
      > a,
      > span {
        padding: 5px 15px;
        background: none;
        border: 1px solid $border-main;
        color: #7e7e7e;
        margin: 0;
        line-height: 28px;
        font-size: $font-medium;
        min-width: 45px;
        text-align: center;
        @include border-radius(15px, 15px, 15px, 15px);
        &.disabled {
          @include opacity(0.7);
          cursor: no-drop;
        }
      }
      &:hover {
        > a,
        > span {
          border-color: $main-color;
          background: $main-color;
          color: $button-btn1-txt;
        }
      }      
      &.active {
        > a,
        > span {
          border-color: $main-color;
          background: $main-color;
          color: $button-btn1-txt;
        }
      }
    }
  }
}
/*end category page*/

/*Collection page*/
.category-grid-view {
  padding: 0;
  max-width: 1200px;
  margin: 0px auto;
  > div {
    padding: 0;
    &.col-lg-3,
    &.col-md-3 {
      &:nth-child(4n + 1) {
        .category {
          &:before {
            content: none;
          }
        }
      }
    }   
  }
}
.collection-item {
  @media (min-width: 992px) {
    &:nth-child(4n +1) { clear: both; }
  }
  @media (max-width: 991px) {
    &:nth-child(2n +1) { clear: both; }
  }
}
.category {        
  padding: 20px 20px 50px; 
  background: $white;
  overflow: hidden;
  position: relative;  
  border-bottom: 1px solid $border-main;
  @include CSStransition(all, 0.35s, ease, 0s);
  &:before {
    content: '';
    width: 1px;
    height: auto;
    background: $border-main;
    @include ab(50px, 0, 50px, n);
  }
  .category-name {
    font-size: $size-h5;
    font-weight: 400;
    text-transform: none;
    margin: 20px auto 0;
    a {
      color: $body-title-color;
      &:hover {
        color: $main-color;
      }
    }
    &:hover {
      a {
        color: $main-color;
      }
    }
  } 
  .section {
    .image {      
      text-align: center;      
      img {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }  
  &:hover, &:focus {
    @include box-shadow(0 0 5px 0 #c6c6c6);
    z-index: 4;
    &:before {
      content: none;
    }
  }
}
/*End collection page*/

/* Page search ------------------------------------------*/
.page-search{
  > h4{    
    margin-bottom: 20px;    
    font-size: 40px;
    font-weight: 700;
    text-align: center;    
  }  
  > .row {
    margin-bottom: 30px;
  }
}

/* Register page -----------------------------------------------*/
.login-or,
.register-or {
  position: relative;
  border-left: 1px solid $body-border-color;
  &:before {
    content: 'or';
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-style: italic;
    color: #7a7a7a;
    border: 1px solid $body-border-color;
    background: $white;
    @include ab(50%, 0, n, n);
    @include translate(-50%, 0);
    @include border-radius-circle;
  }
}
.register-or {  
  border-right: 1px solid $body-border-color;
  border-left: none;
  &:before {
    left: auto;
    right: -50px;
  }
}
.form-wrapper {
  padding: 0 55px;
  p {
    color: $body-general-color;   
    line-height: 28px;
    margin: 0;
  }
}
.semi-bold {
  color: #4c4c4c;
  font-size: 18px;
  font-weight: normal;
  line-height: 36px;   
  margin: 0 0 12px;
}
h2.heading {  
  font-size: $font-custom;
  font-weight: 400;
  color: $body-title-color;
  border-bottom: 1px solid $body-border-color;    
  line-height: 32px;
  padding-bottom: 13px;
  text-transform: capitalize;
  margin: 0 0 10px;    
  position: relative;
  &:before {
    content: '';
    display: block;
    width: 115px;
    height: 2px;
    background: $main-color;
    @include ab(n, 0, -1px, 0);
  }
}
.list-benefits > li {
  color: $color-title;    
  font-weight: 400;
  margin-bottom: 3px;
  line-height: 26px;
  .fa {
    color: $color-note;
    margin: 0 5px 0 0;
  }
}
.control-wrapper{
  display: block;
  clear: both;

  label{
    display: block;
    clear: both;    
    margin-bottom: 10px;    
    font-size: $body-font-size;
    font-weight: 700;
    color: $color-title;
  }

  input , select{
    display: block;
    clear: both;
    margin-bottom: 25px;   
    width: 100%;
  }
  input[type="checkbox"] {
    width: auto;
  }
  textarea{
    max-width: 870px;
  }

  &.last{
    button{
      margin: 0;
    }
  }
  button,
  .btn-default {
    margin-right: 10px;    
  }
  .action {
    margin: 0 0 27px;   
    .forgot-pass,
    .return-store {
      color: $color-title;
      &:hover {
        color: $main-color;
      }
    }
  }
  .forgot-pass {
    float: right;
  }
}
#customer_login, #register-form{
  margin: 0;
  padding: 30px 0;
  > div{

    label{    
      margin-bottom: 10px;
    }
  }
}

.page-reset, #recover-password{
  padding-bottom: 30px;
  .note{
    margin-bottom: 30px;
  }
}

/* Details page----------------------------------------*/
.product-sku-cate {
  padding: 20px 0 0;
  ul {
    list-style: none;
    margin: 0;    
    li {
      margin: 0 0 5px; 
      color: $body-general-color;
      padding-left: 100px;
      position: relative;
      &:before {
        content: "\f111";
        font-family: FontAwesome;
        font-size: 5px;
        display: inline-block;
        padding: 0 5px 0 0;        
        float: left;
        @include ab(7px, 0, n, n);
      }
      span {
        &:first-child {
          display: inline-block;
          padding-right: 8px;
          float: left;
          width: 90px;
          @include ab(0, 12px, n, n);
        }
      }
    }
  }
}
.spr-form-title {
  text-transform: none;
}
.bx-wrapper {
  @include box-shadow(0 0 0 $white);
}

.tab-content {
  .tab-pane {
    color: $body-general-color; 
    ul{
      padding: 0 0 0 25px;
      list-style: disc;     
      li {        
        padding: 3px 0;
      }
    }
    ol {
      padding: 0 0 0 25px;
      list-style: decimal;      
      li {        
        padding: 3px 0;
      }
    }
  }  
  > .tab-pane {
    visibility: hidden;
    height: 0px;
    overflow:hidden;
  }
  > .active {
    visibility: visible;
    height: auto;
    overflow: visible;
  }  
}
.page-product{
  .product-type {
    text-transform: capitalize;
    font-size: 12px;
    color: $body-general-color;
    display: block;
    padding: 0;
    margin: 0 0 5px;   
  }
  .product-image-inner {
    margin: 0;
    padding: 0;
  }  
  .spr-container {padding: 0 !important;}  
  .tab-content {
    padding: 60px 70px;
    margin: 0 0 70px;  
    border: 1px solid $body-border-color;
    @include border-radius(15px, 15px, 15px, 15px);

    iframe {max-width: 100%; }
    h5 {
      text-transform: none;
      font-size: 14px;
      margin: 0 0 15px;
      font-weight: 700;
    }
    p {
      margin: 0 0 15px;
      color: $body-general-color;
      line-height: 24px;
    }
    table {
      border-collapse: collapse;
      td {
        border: none;
       // border-bottom: 0px solid $body-border-color;
        padding: 13px 20px;
        text-align: left;  
        &:first-child {
          padding-left: 0;
        }
      }
    }
  }
  .spr-badge-starrating {
    float: left;  
    margin-right: 5px;    
  }  
  .related-content {
    margin: 0 -15px;
    padding: 65px 0 0;
    .related-item,
    .wear-with-item{
      padding-bottom: 100px;
      margin: 0 15px;
    }
    .owl-controls {
      margin-top: -50px;
    }
  }  
  #product-image{
    margin-bottom: 30px;
    .featured-image {
      display: block;      
      padding: 0;      
      text-align: center;
      overflow: hidden;
      @media (max-width: 1024px) {
        position: relative;
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
        }
      }
    }

    .more-view-image {
      margin: 0;              
      overflow: hidden;
      padding: 0;        
    }

    .bx-wrapper {
      border:none;
      position: relative;
      .bx-viewport {
        left:0;
        border:none; 
        @include box-shadow(0 0 0 $white);
      }
      .bx-controls-direction {
        a {
          position: absolute;
          z-index: 2;
          left: 40%;
          width: 20px;
          height: 20px;
          background-color: #c5c5c5;
          text-indent :0;
          text-align: center;
          margin: 0;
          .fa {           
            &:before, &:after {
              font-size: 17px;
            }
          }
          &.bx-next {
            bottom:0;
            top: auto;
          }
          &.bx-prev {
            top: 0;
          }
        }
      }     
    }

    .more-view-image #gallery-image{
      margin: 8px 0px 0; 
      list-style: none;  
      li {
        float: left;        
      }  
      .thumb-img {
        display: block;          
      }
      .owl-stage-outer{
        .owl-item{  
          li {
            width: 100%;
          }        
          a{  
            position: relative;
            img{                                            
              max-width: 100%;     
              border: 1px solid $border-main;
            }

            &:hover, &.active{
              img{               
                cursor: pointer;                                 
              }
              &:after {
                content: '';
                width: 100%;
                height: 2px;
                background: $main-color;
                @include ab(n, 0, 0, 0);
              }
            }
            &.active{
              cursor: default;
            }
          }

        }
      }

      .owl-controls{
        .owl-nav{
          >div{
            background: none;
            width: 24px;
            height: 24px;
            border: none;                        
            .fa {
              display: block;
              width: 100%;
              height: 100%;
              &:before {
                line-height: 24px;
                color: $color-fa;
              }
            }
            &:hover {
              .fa {
                background: $main-color;
                &:before {
                  color: $white;
                }
              }
            }
            &.owl-next{
              right: 0px; 
            }

            &.owl-prev{
              left: 0px;            
            }
          }
        }
      }
    }
  }

  .product-info {
    margin-bottom: 30px;
    position: relative;
    h1[itemprop="name"] {      
      font-weight: 400;  
      text-transform: none;    
      text-align: left; 
      font-size: $font-custom;
      color: $color-title;
      margin: 0 0 10px;
    }
    .product-des {      
      line-height: 24px;
      margin: 0 0 22px;      
      color: #7d7d7d;
    }    
    p.product-vendor {
      margin: 0 0 15px 0;
      span {
        display: inline-block;
        min-width: 120px;        
        color: $body-general-color;
      }
    }   
    .share-links {
      padding: 0;
      display: inline-block;
      ul {
        li {
          a {
            display: block;            
            height: 28px;
            line-height: 28px;                                   
            margin: 0 10px 0px 0;
            text-align: center;
            font-size: $size-h5;
            &:hover {
              color: $main-color;            
            }
          }          
        }
      }
    }
    .goup-wl-share {
      overflow: hidden;
      padding: 0 0 12px;
    }
    .contact-form {
      float: left;
    }
    .add-to-wishlist,
    .add-to-compare {
      margin: 0;
      padding: 0;
      float: left;
      text-align: left;    
      color: #848484;
      &:hover {
        color: $main-color;
      }  
    }         
    .add-to-wishlist {
      margin: 0 30px 0 0;
    }
    #stock{      
      text-transform: capitalize;
      padding: 11px 0px 18px;        
      display: block;
      color: #8f8e94;
      border-bottom: 1px solid $border-main;
      margin: 0 0 15px;
      font-size: $font-small;

      .stock {
        color: $color-note;
        font-weight: 700;
        font-size: $font-small;
      }
    }    
    .detail-deal{
      display: block;
      .wrapper-countdown{
        >p{
          display: inline-block;
          margin: 0 5px 15px 0;
        }
        > div{
          border: 0;
          background: transparent;
          display: inline-block;
          font-size: $body-font-size;
          margin-bottom: 15px;
          font-weight: 600;
        }
      }
    }

    .product-relative{
      .product-vendor , .product-type{
        display: block;
        margin-bottom: 10px;
      }
    }

    .spr-badge{
      margin: 0;      
      .spr-badge-caption {
        display: inline-block;
        font-size: $font-small;
        color: $body-border-color;
        &:before{
          content: "(";
        }
        &:after{
          content: ")";
        }
      }      
    }

    .product-price,
    .price {
      font-size: 35px;      
      color: #ffffff;
      margin: 15px 0 0px;
      text-align: left;
      padding: 0;
      border: none;      
      overflow: hidden;
      line-height: 40px;
      .price-sale{
        margin-right: 20px;
        float: left;
        font-size: 35px;    
        color: $color-title;
      }
      .price-compare {
        font-size: $body-font-size;
        font-weight: 400;
        float: left;   
        margin: 0;  
      }
    }

    .policy-image-wrapper{
      margin: 30px auto;
      display: block;
      padding-top: 30px;
      border-top: 1px solid $body-border-color;

      .policy-image{
        text-align: center;
        img{
          display: block;
          margin: 0 auto 20px;
        }
        span{
          font-size: 14px;
          font-weight: 600;
          display: block;
        }
      }
    }
    .product-description{
      margin-bottom: 35px; 
      display: block;
      p{
        font-size: 14px;        
        line-height: 27px;
      }
    }

    .group-cw{
      position: relative;
      display: block;
      width: 100%;
      margin:0px;
    }

    .swatch{
      color: $body-title-color;
      margin: 15px 0 0;

      .header{
        margin: 0 30px 0 0;
        display: inline-block;
        float: left;       
        line-height: 34px; 
        font-weight: 700;        
        min-width: 140px;
        font-size: $font-medium;
        color: #ffffff;             
      }
      .swatch-element{
        margin: 5px 5px 5px 0px; 
        padding: 0;   
        position: relative;     
        label{
           background: transparent;  
          background-size: cover;               
          border: 1px solid #ecb800;
          margin: 0;
          text-align: center;
          cursor: pointer;     
          min-width: 35px !important;
          height: 35px !important;
          padding: 5px;  
          line-height: 23px !important;
          @include border-radius(0, 0, 0, 0);
          color: #000000;
          font-weight: 700;
          background-color: #ecb800;
          border-radius: 50px;
          padding-left: 12px;
          padding-right: 12px;
        }
        input:checked + label{
          box-shadow: none;          
          cursor: default;
          border-color: $main-color;
          color: $main-color;
          border-radius: 50px;
          padding-left: 12px;
          padding-right: 12px;
          background-color: transparent;
        }
        &.color {          
          label {
            @include border-radius-circle;              
            &:hover {
              @media (min-width: 1025px) {
                &:after {
                  @include opacity(1);
                  @include border-radius-circle;   
                  @include ab(50%, 50%, n, n);
                  @include translate(-50%, -50%);
                  content: '' !important;
                  width: 10px;
                  height: 10px;                        
                  background: #fff;            
                }
              }              
            }            
          }
          input:checked + label {
            &:after {
              @include opacity(1);
              @include border-radius-circle;   
              @include ab(50%, 50%, n, n);
              @include translate(-50%, -50%);
              content: '' !important;
              width: 10px;
              height: 10px;
              background: #fff;            
            }
          }
        }
        &:hover{ 
          @media (min-width: 1025px) {
            label{
              border-color: $main-color;  
              color: #ffffff;    
            }
          }          
        }
      }      
    }
    .product-action{
      .variants-wrapper{
        .selector-wrapper{
          margin-bottom: 15px;
          select{
            min-width: 150px;
            line-height: 32px;
            height: 34px;
            padding: 0px 15px;
          }
        }
        label{
          color: $body-title-color;
          margin: 0;
          display: inline-block;
          float: left;
          line-height: 34px;
          margin-right: 30px;          
          min-width: 140px;
        }
      }

      .quantity-product{
        margin: 0 30px 0 0;
        float:left;
        width: 140px;

        label{          
          margin: -6px 0 0;
          line-height: 22px;
          display: block;        
          font-size: $font-small;
          color: #ffffff;

        }

        .quantity{
          margin: 0;     
          input {
            width: 100%;
          }    
        }
      }
      .total-price{        
        color: $body-price-color;
        display: inline-block;
        margin-right: 10px;
        margin-top: 16px;
        .price-sale{
          margin-right: 10px;
        }
      }

      .action-button{
        display: block;        
        padding: 0;
        margin: 23px 0 30px;
        border-bottom: 3px solid #ffffff;
    padding-bottom: 23px;

        .add-to-cart,.add-to-cart-combined-listings{                          
          padding: 10px 40px;
          line-height: 30px;    
          font-size: 14px;
          color: $white;    
          @include border-radius-05px;
          .icon {
            float: left;
            font-size: 22px;
            line-height: 30px;
            margin: 0 6px 0 0;
            &:before {
              display: block;
              line-height: 30px;
            }
          }
        }
      }
      .product-price {
        border-top: 1px solid $border-main;               
        padding: 15px 0 20px; 
        margin: 20px 0 0;           
      }
    }
  }
  .table {
    margin: 0 0 50px;
    td {
      text-align: left;
      padding: 7px 30px;
      &:first-child {
        width: 26%;
        font-weight: 700;
        color: $body-title-color;
      }

    }
    tr {
      &:first-child {
        td {
          border-top: none;
        }
      }
      &:last-child{
        td {
          border-bottom: none;
        }
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  .table-extended {
    td {
      text-align: left;
      padding: 0;
      width: 50%;
      border: none;
      img {
        max-width: 100%;
      }
    }
    &.align-left {
      td {
        img {
          position: relative;
          right: -70px;    
          float: right;        
        }
      }
    }
    &.align-right {
      td {
        img {
          position: relative;
          left: -70px;           
        }
      }
    }
  }
  .product-simple-tab,
  .product-extended-tab {
    background: $white;
    margin: 55px 0;   
    .nav {
      border: none;
      margin: 0;
      li {
        padding: 0 25px;
        a {
          font-size: 18px;          
        }
      }
    }
    .tab-content {
      .tab-pane {
        h1, h2, h3, h4 {
          color: $body-title-color;
          font-size: 23px;
          font-weight: 400;
          line-height: 1.2;
          margin: 0 0 20px;
        }
        p {          
          margin: 0 0 40px;
          b {
            font-size: 23px;
            font-weight: 400;
            color: $color-title;
          }
        }
      }
    }
  }
  .product-extended-tab {
    #tab_sc,
    #tab_review,
    #tab_custom {
      max-width: 1170px;
      margin: 0px auto;
      padding: 0 15px;
    }
  }
  
  &.product-extended {
    .product-info {
      .spr-badge {
        margin: 0 0 14px;
      }
      .social-sharing {
        padding-bottom: 10px;
      }
    }
    .ex-action-container {
      border: 2px solid $body-border-color;
      padding: 15px 30px;
      overflow: hidden;
      @include border-radius-20px;
      .contact-form {
        float: left;        
      }
      .add-to-wishlist {
        padding: 6px 5px 6px 0;
        float: left;
      }
      .add-to-compare {
        display: inline-block;
        margin: 0;
        padding: 6px 0;
      }
      #stock {
        border-bottom: 1px solid $body-border-color;
        padding: 0 0 10px;
        span {
          display: inline-block;
          font-size: $font-small;
          color: #8f8e94;
          &.stock {
            font-weight: 700;
            color: $color-note;
            padding-left: 5px;
          }
        }
      }
      .product-price {
        font-size: 35px;        
        color: $color-title;
        margin: 11px 0 17px;
        position: relative;
      }
      .price,
      .price-sale {
        font-size: 35px;        
        color: $color-title;
      }
      .price-sale {
        float: none;
        display: block;
        padding-top: 20px;
      }
      .price-compare {
        margin: 0;
        padding: 0;
        @include ab(7px, 0, n, n);
      }
      .quantity-product{
        margin: 0;  
        width: 135px;
        label{          
          margin: 0;
          line-height: 22px;
          display: block;        
          font-size: $font-small;
          color: $color-title;
        }
        .quantity{
          margin: 0;     
          input {
            width: 100%;
          }    
        }
      }
      .variants-wrapper {
        margin: 0;
        .selector-wrapper {
          margin: 8px 0 0;
          label {
            display: block;
            margin: 0;
            line-height: 22px;              
            font-size: $font-small;
            color: $color-title;
          }
          select {
            height: 34px;
            line-height: 32px;
            padding: 0px 15px;
            width: 100%;
            background-color: none;
          }
        }
      }
      .swatch{
        color: $body-title-color;
        margin: 6px 0 0;

        .header{
          margin: 0;
          display: block;            
          line-height: 22px; 
          font-weight: 400;        
          min-width: 140px;
          font-size: $font-small;
          color: $body-general-color;             
        }
        .swatch-element{
          margin: 0px 5px 0px 0; 
          padding: 0;   
          position: relative;     
          label{
            background: transparent;  
            background-size: cover;               
            border: 1px solid $border-main;
            margin: 0;
            text-align: center;
            cursor: pointer;     
            min-width: 35px !important;
            height: 35px !important;
            padding: 5px;  
            line-height: 23px !important;
            @include border-radius(0, 0, 0, 0);
            color: $body-general-color;
            font-weight: 700;
          }
          input:checked + label{
            box-shadow: none;          
            cursor: default;
            border-color: $main-color;
            color: $main-color;
          }
          &.color {          
            label {
              @include border-radius-circle;              
              &:hover {
                @media(min-width: 1025px) {
                  &:after {
                    @include opacity(1);
                    @include border-radius-circle;   
                    @include ab(50%, 50%, n, n);
                    @include translate(-50%, -50%);
                    content: '' !important;
                    width: 10px;
                    height: 10px;                        
                    background: #fff;            
                  }
                }                
              }            
            }
            input:checked + label {
              &:after {
                @include opacity(1);
                @include border-radius-circle;   
                @include ab(50%, 50%, n, n);
                @include translate(-50%, -50%);
                content: '' !important;
                width: 10px;
                height: 10px;
                background: #fff;            
              }
            }
          }
          &:hover{ 
            @media (min-width: 1025px) {
              label{
                border-color: $main-color;  
                color: $main-color;    
              }
            }            
          }
        }      
      }
      .action-button {
        margin: 30px 0 6px;
        .btn {
          color: $white;
          width: 100%;
          line-height: 40px;
          padding: 5px;
          font-size: 14px;
          @include border-radius-25px;
          .icon {
            display: inline-flex;
            padding: 0 8px 0 0;
            font-size: 22px;
            &:before {
              position: relative;
              top: 3px;
            }
          }
        }
      }
    }
    .tab-content {
      margin: 0px auto;      
      position: relative;
      border: none;
      @include border-radius(0, 0, 0, 0);
      &:before {
        content: '';
        display: block;
        height: 1px;
        background: $body-border-color;
        @include ab(0, 30px, n, 30px);
      }
    }
    .ex-detail-tab {
      background: #f9f9f9;
      padding: 40px 0;
      .product-simple-tab {
        margin: 0px auto;
        padding-top: 35px;
      }
    }
    .home-carousel {
      padding-top: 65px;
    }
  }
}

{% if settings.show_swatches_sizer %}
.page-product .product-info .product-action .variants-wrapper .selector-wrapper.size{ display: none; }
.page-product .ex-action-container .product-action .variants-wrapper .selector-wrapper.size{ display: none; }
{% endif %}
{% if settings.show_swatches_color %}
.page-product .product-info .product-action .variants-wrapper .selector-wrapper.color{ display: none; }
.page-product .ex-action-container .product-action .variants-wrapper .selector-wrapper.color{ display: none; }
{% endif %}


.panel-group{
  .panel{
    border-radius: 0;
    border: 0;
    margin: 0;
    box-shadow: none;
    border-bottom: 1px solid $border-main;
    .panel-heading{
      background: one;            
      text-transform: uppercase;
      padding: 25px 0;    
      .panel-title{
        color: #434343;
        font-size:$font-custom;
        font-weight: 400;     
        a{
          color: #434343;
          font-size:$font-custom;
          display: block;     
          font-weight: 400;   
          text-transform: none; 
          position: relative;       

          &.collapsed {
            color: $color-title;        
          }
          &:hover{            
            color: $main-color;
          }         
        }
      }
    }

    .panel-collapse {
      > .panel-body, > .list-group{
        border-top: 0;
        padding: 0 0 15px;
        background: $body-background-color
      }
    }
    + .panel{
      margin-top: 0;
    }

    .panel-body {
      color: $body-general-color;
      font-size: 14px;
      line-height: 24px;
      padding: 20px 0px 60px;
      > iframe{
        max-width: 100%;
      }
    }
    &:last-child {
      border-bottom: none;
    }
  }
}

.spr-icon { 
  @include opacity(1 !important);
  &:before {   
    content: '' !important;
    margin: 0 3px 0 0;
    display: inline-block;
    width: 18px !important;
    height: 14px !important;
    background: url({{'ratting.png' | asset_url}});
  }
  &.spr-icon-star{
    &:before {
      background-position: bottom center;
    }
  }
  &.spr-icon-star-empty {
    &:before {
      background-position: top center;
    }   
  }
}

#shopify-product-reviews{ 
  .spr-form-title {
    font-size: $size-h5;
    margin: 0 0 35px 0;
    color: $color-title;
    font-weight: 400;
  } 
  .spr-container{
    padding: 0;
    border: 0;
    .spr-header-title{
      display: none;
    }
    .spr-summary {
      .spr-starrating {
        float: left; 
        margin-top: 5px;
        .spr-icon {
          &:before {
            content: '';
            width: 18px !important;
            height: 14px !important;
            background-position: bottom center;            
          }
          &.spr-icon-star-empty {
            &:before {
              background-position: top center;
            }           
          }
          &.spr-icon-star-hover {
            &:before {
              background-position: bottom center;
            }
          }
        }
      }
      .spr-summary-caption {
        display: inline-block;
        margin-top: 8px;        
        color: #686c6f;
      }
    }

    .spr-summary-actions{
      float: right;

      a{
        @include button1();
        padding: 5px 30px;
        color: $white;
        font-size: $font-small;
        font-weight: 700;
      }
    }

    .spr-review{
      padding: 30px 0;
      border-color: $border-main;
      .spr-review-header-title {
        margin: 10px 0;
        font-size: $size-h5;
        color: $color-title;
        font-weight: 400;
      }
      .spr-review-header{
        .spr-review-header-byline{
          font-style: normal;
          @include opacity(1);
        }
        .spr-starratings{
          font-size: 10px;
          i{
            margin-right: 2px;
          }
        }
      }
      .spr-review-footer{
        a{
          float: left;
          font-size: $body-font-size;          
        }
      }
      &:first-child {
        border-top: none;
      }
    }

    .spr-button, .spr-button-primary{
      @include button1();     
      color: $white;      
      font-weight: 700; 
      line-height: 27px;
      padding: 5px 30px;      
    }
    .spr-form-contact, .spr-form-review, .spr-form-actions {
      max-width: 500px;
    }
    .spr-form-input-text, .spr-form-input-email {
      width: 315px;
      max-width: 100%;
      height: 37px;
      padding: 8px 17px;
      line-height: 18px;
      float: right;
      clear: none;
      @include border-radius(15px, 15px, 15px, 15px);
    }
    .spr-form-label{
      font-weight: 400;
      float: left;
      width: 155px;
      text-align: right;
      line-height: 38px;
      margin: 0 10px 0 0;
      color: $color-title;
      font-size: $body-font-size;
    }

    .spr-form{
      border-top: 1px solid $body-border-color;
    }
    .spr-form-review-rating {
      margin-bottom: 25px;
      .spr-form-label {
        display: inline-block;
        margin-right: 20px;
      }  
      .spr-icon {
        width: 20px !important;
        height: 14px !important;
        &:before {
          content: '';
          width: 18px !important;
          height: 14px !important;
          background-position: bottom center;            
        }
        &.spr-icon-star-empty {
          &:before {
            background-position: top center;
          }
          &:hover {
            &:before {
              background-position: bottom center;
            }
          }
        }
        &.spr-icon-star-hover {
          &:before {
            background-position: bottom center;
          }
        }
      }               
    }
    .spr-form-review-rating .spr-starrating {      
      margin-top: 8px;
    }
    .spr-form-input-textarea {
      max-width: 315px;
      width: 100%;    
      float: right;
    }
    .spr-form-actions {
      max-width: 500px;
      width: 100%;
      margin-top: 15px;
      .spr-button-primary {
        float: left;
        font-size: $font-small;
        margin-left: 185px;
      }
    }
  }
  .spr-form-contact-name, .spr-form-contact-email, 
  .spr-form-contact-location, .spr-form-review-rating, 
  .spr-form-review-title, .spr-form-review-body{
    margin: 0 0 15px 0;
  }
}

#main-column {margin: 30px auto 0;}
.main-content{ position: relative; margin: 0px auto; clear: both;
  > section.cata-header {  position: relative;
    .catalog-title {
      position: absolute;
      top: 25%;
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 1;
      margin: 0;
      font-size: 48px;
      font-weight: 400;
    }
    > img {
      min-height: 104px;
    }
  }
}

.nav-links-detail {
  max-width: 1200px;
  padding: 0 15px;  
  margin: 0px auto;
  text-align: right;
  position: relative;
  > a {
    display: inline-block; 
    margin: 0 0 0 15px;
    line-height: 32px;
    position: absolute;
    top: -82px;
    right: 15px;
    z-index: 3;
    .icon {
      &:before {
        font-size: 28px;
        display: inline-block;
        height: 32px;
        line-height: 32px; 
        float: right;
        margin-left: 10px;
      }
    }
    &.prev {
      padding-right: 15px; 
      right: 100px;
      &:after {
        content:'';
        width:1px;
        height: 20px;
        right:0;
        top: 5px;
        background-color: #adadad;
        position: absolute;
      }
      .icon {
        &:before {
          float: left;
          margin-right: 10px;
          margin-left: 0;
        }
      }   
    }
  }  
}

.breadcrumb {
  padding: 0;
  margin: 0;
  background: none;  
  font-size: $body-font-size;
  > li {
    position: relative;
    float: left;
    display: inline-block;
    + li {
      &:before {
        content: none;
        padding: 0;        
      }       
    }     
    > a {     
      color: $color-title;
      display: inline-block;      
      padding: 5px 18px;
      line-height: 25px;
      position: relative;
      text-transform: capitalize;
      &:hover {
        background-color: $bg-light;
        color: $color-title;
      }
    }   
    &.active {
      padding: 5px 18px;
      line-height: 25px;            
      color: $color-title;
    }
    &:first-child {
      > a {
        padding-left: 0;
      }
    }
  }
  .icon {
    display: inline-block;
    line-height: 35px;
    &:before {
      position: relative;
      top: 3px;
    }
  }
}  

.breadcrumb-holder {  
  padding: 0px;     
  background: none;
  float: left;
  width: 100%;
  margin: 0 0 50px;
  .verticle-menu {
    padding-left: 0;
  }  
  .nav-links {
    display: inline-block;
    float: right;
    padding: 0;
    margin-bottom: 0;
    > a {
      line-height: 18px;      
      &.prev {
        color: #797979;
        margin-right: 17px;
        border-right: 1px solid #c5c5c5;
        padding-right: 18px;
        .icon-prev {
          margin-right: 12px;
        }
      }
      &.next {
        color: #0c0d0d;
        .icon-next {
          margin-left: 12px;
        }
      }
      .icon {
        font-size: 28px;
        vertical-align: middle;
        display: inline-block;
      }
    }
  }
}

.next-prev-product{
  > a{    
    font-size: 23px;    
    width: 34px;
    height: 34px;
    text-align: center;
    border: 1px solid $body-border-color;

    &:hover{
      color: $body-general-color;
      border: 1px solid $body-general-color;
    }

    &.next{
      @include ab(-50px,n,n,15px);
    }

    &.prev{
      @include ab(-50px,n,n,55px);
    }
  }
}

/* Shopping cart page ----------------------------------------------------*/
.upsell-products {
  clear: both;
  margin: 30px auto 0;
}
.upsell-items {  
  .product-wrapper .product-content {
    .add-cart-button {
      display: none;
    }    
    .pc-inner .price-cart-wrapper {
      padding-right: 0;
    }
  }  
}
.page-cart {  
  .cart-empty-wrapper {
    display: none;
  }
  .quantity {
    padding: 0 60px 0 15px;
    width: 115px;
    height: 34px;
    border: 1px solid $border-main;
    @include border-radius(15px, 15px, 15px, 15px);
    background: $white;    
    input {
      padding: 7px 0;
      border: none;
      height: 32px;
      min-height: 32px;
      width: 100%;
      @include border-radius(0, 0, 0, 0);
      
    }
    .qty-inner > span {
      z-index: 2;
      top: 6px;
      &.qty-down {
        right: 5px;
      }
      &.qty-up {
        right: 30px;
      }
    }
  }  
}

#cartform {
  display: none;
}

.cart-table{
  margin-bottom: 30px;
  width: 100%;
  overflow-x: auto; 

  table{
    width: 100%;   

    td {
      position: relative;      
      text-align: center;

      &.item-title{       
        li.image{      
          margin-bottom: 0;
          margin-right: 10px;
          float: left;
        }
        .item-variant {
          color: #888;
          font-size: 12px;
          margin: 15px 0 0;
        }        
        li.link{
          display: block;
          overflow: hidden;
          padding-top: 42px;

          .product-name{
            text-transform: uppercase;
          }

          .variant_title {
            display: none;
          }
        }
      }
    }
  }
}

#shipping-calculator{
  padding: 24px 0;    
  h4 {
    color: $body-title-color;
    font-size: $font-custom;
    font-weight: 400;
    color: $body-title-color;
    border-bottom: 1px solid $body-border-color;    
    line-height: 32px;
    padding-bottom: 13px;
    text-transform: capitalize;
    margin: 0 0 40px;    
    position: relative;
    &:before {
      content: '';
      display: block;
      width: 115px;
      height: 2px;
      background: $main-color;
      @include ab(n, 0, -1px, 0);
    }
  }
  .control-wrapper {
    .btn {
      width: auto;
    }
  }
  #wrapper-response {
    padding: 0;
  }  
}

#checkout-addnote{  
  textarea{
    display: block;
    width: 100%;
    margin: 30px 0 0;     
  }
}
div.total-price {
  text-align: right;
  padding: 20px 25px;
  font-size: 16px;
  color: #2c2c2c;
  span {
    font-weight: 700;
  }
}
.cart-right{   
  overflow: hidden;  
  text-align: right;
  .cart-action {
    .btn-default {
      margin-left: 8px;
      margin-bottom: 5px;
    }
    .btn-primary {
      color: $color-title;
      margin-bottom: 5px;
    }
  }
}

/* My account page -------------------------------*/

.control-wrapper {
  h4 {
    text-transform: none;
    margin: 0 0 15px;
  }
}
table{
  width: 100%;
  border-collapse: inherit;
  td {
    position: relative;
    padding: 30px 20px;        
    text-align: center;  
    border: none;    
    &.item-title {
      text-align: left;
      > a {
        font-weight: 400;
        font-size: 17px;
        color: #3e3e3e; 
        &:hover {
          color: $main-color;
        }     
      }
    }  
    &.action,
    &.product-action {
      button{
        border: 0;
        background: none;
        color: #a7a7a7;
        &:hover {
          color: $main-color;
        }
      }
    }
    &.item-price,
    &.item-total {
      font-size: 16.43px;
      color: $other-color;
      font-weight: 400;
    }
    &:last-child {
      border-right: none;
    }
  }
  tbody {
    tr {
      &:last-child {
        td {
          border-bottom: 1px solid $border-main;
        }
      }
    }
  }
  thead {
    th{
      text-transform: capitalize;
      text-align: center;                      
      padding: 10px;      
      font-weight: 400;
      color: $body-general-color;
      font-size: $body-font-size;
      border-bottom: 1px solid $border-main;
      &.price {
        color: $body-general-color;
        font-weight: 400;
        font-size: $body-font-size;
        text-align: center;
      }      
    }
  } 
}
h1.page-heading {
  margin-bottom: 40px;
  text-align: center;  
  color: #434343;
  font-weight: 400;
  @media(max-width: 767px) {
    margin-bottom: 20px;
  }
}
h3.subheading {
  text-transform: none;    
  font-size: $size-h3;
  color: $color-title;
  border-bottom: 1px solid $border-light;
  margin: 0 0 12px;
  padding: 0 0 14px;
}

.s-title{
  font-size: $size_h4;
  color: $body-general-color;  
  margin-bottom: 10px;
}

#customer_orders{  
  padding: 0px 0 60px;
  .table-wrapper{
    margin: 40px 0 0;
    width: 100%;
    overflow-x: auto;

    table{  
      tr{
        td {
          padding: 10px 20px;
          .total {
            font-size: 18px;
          } 
          @media (max-width: 767px) {
            padding: 10px;
          }
          .note { display: block; white-space: nowrap; }
        }        
      }
    }
  }
}
.order-status {
  margin-top: 30px;
}
.customer-info{
  margin-top: 25px;  
}

.page-address{
  .new-address{
    margin-top: 30px;

    #new-address{
      display: block;
      margin-bottom: 30px;
    }

    > a{
      color: $body-general-color;
      margin-bottom: 20px;
      display: inline-block;
    }
  }
  .control-wrapper{
    max-width: 750px;
    > button{
      margin-right: 10px;
    }
  }
  #add_address{
    border-top: 1px solid $body-border-color;
    padding: 30px 0 40px;    
  }

  .address-table{    
    padding-top: 10px;
    padding-bottom: 20px;
    border-top: 1px solid $border-main;

    .action-edit-address{
      > button{
        margin-right: 10px;
      }
    }
  }

  .address_actions{
    margin-top: 5px;
    button{
      @include button2();
      @include CSStransition(all, 0.5s, ease, 0s);
      padding: 8px 25px;
      margin: 0 10px 0 0;
      &:last-child {
        @include button1();
        padding: 8px 25px;
        border: none;
        &:hover {
          border: none;
        }
      }
    }   
  }

}

.customer_address_table{
  h4.title{
    margin-bottom: 30px;
    text-transform: capitalize;
    color: $body-general-color;
    font-weight: 400;
  }
  .control-wrapper.set_default{
    margin-bottom: 30px;

    input{
      display: inline-block;
      clear: none;
      margin-top: 0;
      margin-bottom: 0;
      vertical-align: middle;
    }
  }
}

.page-order{
  .note.order_date{    
    margin-bottom: 30px;
  }

  #order-details{
    margin-bottom: 40px;
    width: 100%;
    overflow-x: auto;

    table{
      td
      {
        &.product-item {
          text-align: left;
        }
        &.quantity{
          display: table-cell;
        }

      }

      tr.order_summary td {
        text-align: right;
        padding: 20px 10px 0 10px;
        &:last-child {
          text-align: center;
        }
      }
    }
  }

  #order-address{
    .title{
      margin-bottom: 20px;
    }
    #order-payment{
      margin-bottom: 15px;
    }
  }

}

.table-cart{
  .wrap-table{
    width: 100%;
    overflow-x: auto;

    .top-labels{
      th:nth-of-type(2) {
        text-align: left;
        padding-left: 20px;
      }
    }
    .wishlist-item{
      td.product-title{
        a {
          &:hover {
            color: #888;
          }
        }
      }
      td.product-image {
        a.image {
          min-width: 100px;
        }
      }
      td.product-action{
        button{
          border: 0;
          background: none;
          padding: 0;
        }
      }
      td.product-price {
        border-top: none;
        padding: 25px 12px;
        font-size: 16.43px;
        color: #343f49;
        font-weight: 400;
      }
      td.product-title {
        a {
          color: #3e3e3e;       
          font-size: 17px;
          &:hover {
            color: $main-color;
          }
        }
      }
      td.add-cart {
        .btn {
          padding: 5px;
          width: 150px;          
          font-size: $body-font-size;
        }
      }

      &:last-child{
        td{
          border-bottom: 0;
        }
      }
    }
  }
}


/* Page FAQS ----------------------------------*/

.faq-section{ 
  .question-v1 {
    > h2 {
      font-size: $font-custom;
      color: #434343;
      font-weight: 400;
      border-bottom: 1px solid $border-main;
      padding: 30px 0 22px;
      margin: 0 0 50px;
    }
  }
  .question-ship-block {
    padding: 0 0 80px;
    h4 {
      font-weight: 700;
      font-size: $size-h6;
      color: #434343;
      margin: 0 0 25px;
    }
    .qs-content {
      line-height: 24px;
      color: $body-general-color;
    }
  }
  .question-v2 {
    padding-top: 95px;
  }
  .panel-group {
    margin-bottom: 0;
    .faq-title {
      font-size: 40px;
      font-weight: 700;
      text-align: center;
      color: #434343;
      margin: 0 0 30px;
    }
    .panel {
      &:first-child{
        border-top: 0;
      }
      .panel-heading{
        text-transform: inherit;
        .panel-title a i{
          margin-left: 0;
        }
      }

      .panel-collapse>.panel-body{
        padding: 10px 0 30px;
      }
    }
  }
}

/* Boxes -----------------------------------------------------*/
/* Zoom effect */

/* Page 404 */
.page-404{
  h1{
    margin-bottom: 2px;
    font-weight: 300;
    margin: 0 0 20px;
    font-size: 72px;
  }
  h4{
    text-transform: uppercase;
  }
  p {
    font-size: 20px;
    font-weight: 300;
    margin: 30px 0;
  }
  a{
    @include button1();
    display: inline-block;
    font-weight: 700;
    .fa {
      margin: 0 7px 0 0;
    }
  }
}
/*Page search*/
.templateSearch{
  .page-search{
    .search-form{
      display: none;
    }

  }
}

/*Page account*/
.page-account{
  h4.title{
    >a {
      text-transform: capitalize;
      font-weight: 400;
      letter-spacing: 0;
      color: $body-general-color;

    }
  }
}
.account-detail {
  .fa {
    color: $main-color;
    font-size: 18px;
    margin: 0 7px 0 0;
  }
}

/*Page Blog*/
.post-comment-form {
  .subheading {
    color: $body-title-color;
    font-size: $font-custom;
    font-weight: 400;
    color: $body-title-color;
    border-bottom: 1px solid $border-main;    
    line-height: 32px;
    padding-bottom: 13px;
    text-transform: capitalize;
    margin: 0 0 40px;    
    position: relative;
    &:before {
      content: '';
      display: block;
      width: 300px;
      height: 2px;
      background: $main-color;
      @include ab(n, 0, -1px, 0);
    }
  }
  .comment {
    padding: 15px 20px;
    margin:  0px 0 50px;
    background: $bg-light;        
    position: relative;
    &:after {
      content: '';
      width: 100%;
      height: 1px;
      background: $border-main;
      @include ab(n, 0, -25px, n);
    }
    .comment-head {
      float: left;
      max-width: 160px;
      margin: 0 30px 5px 0;   
      img {
        width: 100%;
      }   
    }    
    .comment-content {
      .author {
        text-transform: capitalize;
        font-size: 19px;
        color: $color-title;
      }
      .date {
        font-size: 11px;
        color: #999;
        margin: 0 0 0 10px;
      }
      p {
        margin: 20px 0 10px;
        color: $body-general-color;
      }
    }    
    &:last-child {            
      &:after {
        content: none;
      }
    }
  }
}
.comment-form { 
  p {
    margin-bottom: 30px;    
  }
  .control-wrapper {
    max-width: 500px;
    label {
      font-weight: 400;
      float: left;
      width: 115px;
      text-align: right;
      line-height: 38px;
      margin: 0 10px 0 0;
    }
    input {
      width: 375px;
      max-width: 100%;
      height: 37px;
      padding: 8px 17px;
      line-height: 18px;
      float: right;
      clear: none;
      @include border-radius(15px, 15px, 15px, 15px);
    }
    textarea {
      width: 375px;
      max-width: 100%;
      float: right;
      margin: 0 0 25px;       
      padding: 8px 17px;
      @include border-radius(15px, 15px, 15px, 15px);   
    }
    .btn {
      color: $white;
      margin-left: 125px;
      padding: 5px 30px;
    }
  }
}
.page-blog {
  .post {
    margin: 0 0 85px;
    overflow: hidden;
    position: relative;   
    .post-info {margin: 0;
      padding: 18px 0;
      border-bottom: 1px solid $border-light;
      .list-inline {
        li {
          margin: 0 6px;
          &:before {
            content: "\f111";
            font-family: FontAwesome;
            float: left;
            margin: 7px 15px 0 0;
            color: #9f9f9f;
            font-size: 5px;
          }
          &:first-child {
            margin-left: 0;
            &:before {
              content: none;
            }
          }
          &:last-child {
            margin-right: 0;
            &:before {
              content: none;              
            }

          }
        }
      }
    }
    .post-des {padding: 20px 0; margin: 0 0 10px;
      color: $body-general-color;      
      font-size: $font-medium;
      line-height: 24px;
    }
    .post-image {
      margin: 0;    
    }
    .post-video {
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
      position: relative;
      iframe {
        border: none;
        position: absolute;
        width: 100% !important;
        height: 100% !important;
        left: 0;
        top: 0;
      }
    }
  }
  .post-date-wrapper {
    @include ab(0, 0, n, n);
    padding: 0 0 10px;
    .posted-on {
      @include border-radius(4px, 4px, 4px, 4px);
      background: $main-color;
      color: $white;
      display: table-cell;
      height: 71px;
      line-height: 24px;
      vertical-align: middle;
      width: 52px;
      text-align: center;
      .month {
        display: block;
        font-size: 15px;
        text-transform: uppercase;
      }
      .day {
        display: block;
        font-size: 18px;
      }
    }

  }  
  .post-content-wrapper {   
    .post-head {
      margin: 0 0 34px;    
    }
    .post-content {
      .post-title {
        a {
          color: #434343;
          font-size: $font-custom;
          font-weight: 400;
          letter-spacing: -1px;
          &:hover {
            a {
              color: $main-color;
            }
          }
        }
        &:hover {
          a {
            color: $main-color;
          }
        }
      }
      .post-button {
        overflow: hidden;
        .btn {
          padding: 8px 40px;
          line-height: 26px;
          color: $color-title;
          margin: 0 10px 0 0;
          float: left;
        }
      }     
      .post-comment {       
        line-height: 42px;
        color: #878787;
        .icon {                   
          font-size: 20px;          
          float: left;
          line-height: 42px;
          color: #878787;
          margin: 0 5px 0 0;
          &:before {
            float: left;
            line-height: 42px;
          }
        }
      }
    }
  }
}
.blog-filter {
  margin-bottom: 20px;
}
.post-content {
  .post-title {
    color: $color-title;
    font-size: $size-h3;
    font-weight: 400;
    &:hover {
      color: $main-color;
    }
  }
  p {
    color: $body-general-color;
    margin: 0 0 40px;
    padding: 0;
    font-size: 14px;
    line-height: 24px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .highlight {
    font-size: 19px;
    font-weight: 600;
  }
  .highlight-light {
    font-size: 19px;
  }
  .inner-left {
    padding: 0 0 0 50px;
    blockquote {
      border-left: 0;
      font-size: inherit;
      margin: 0;
      padding: 0;
      position: relative;
      &:before {
        color: #a7a7a7;
        content: "\f10d";
        float: left;
        font-family: FontAwesome;
        font-size: $font-custom;
        margin-left: -38px;
      }
      p {
        font-size: 16px;
        font-style: italic;
        font-weight: 600;
      }
    }
  }
}
.post-info {
  color: $body-general-color; 
  margin: 0 0 25px;
  padding: 12px 0 18px;  
  border-bottom: 1px solid $border-light;
  .fa {
    margin: 0 7px 0 0;
  }
  .list-inline {
    li {
      margin: 0 6px;
      color: $body-general-color;
      font-size: $font-small;
      &:before {
        content: " ";
        font-family: FontAwesome;
        float: left;
        margin: 7px 15px 0 0;
        color: #878787;
        font-size: 5px;
      }
      &:first-child {
        margin-left: 0;
        &:before {
          content: none;
        }
      }
      &:last-child {
        margin-right: 0;       
      }
    }
  }
}
.post-thumbnail {
  > a {
    > img {
      width: 100%;
      max-width: 100%;
    }
  }
}
.post-np {
  a {

    &:hover {
      color: $main-color;
    }
  }

  .post-title {
    @include upper-spacing;
    font-size: 14px;
    color: $black;
    font-weight: 700;
    display: block;
    &:hover {
      color: $main-color;
    }
  }
  img {
    display: inline-block;
    margin: 15px 0;
  }
  .post-prev {
    padding: 0 0 20px 0;
    margin: 0  0 20px 0;
    border-bottom: 1px solid $border-light;
  }
}
.post  {
  iframe {
    max-width: 100%;
  }
  .post-image {
    margin: 0 auto 30px;
    position: relative;
    overflow: hidden;
    text-align: center;
    display: block;
    &:before {
      @media (min-width: 1025px) {
        @include before;  
      }
    }    
    img {
      width: 100%;
    }
    &:hover {
      &:before {
        @include hover-before;        
      }     
    }
  }
  .post-video {
    margin: 0 auto 30px;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
    iframe {
      border: none;
      position: absolute;
      width: 100% !important;
      height: 100% !important;
      left: 0;
      top: 0;
    }
  }
  .post-title {
    color: $color-title;
    font-size: $size-h3;
    font-weight: 400;   
  }
  .share-links {
    margin: 40px 0 35px;
    .blog-share {
      li 
      a {
        display: inline-block;
        line-height: 26px;
        margin: 0 15px 0 0;
        .share-title {

        }
      }
      .fa {
        font-size: 26px;  
        float: left;   
        margin: 0 7px 0 0;  
        &.fa-facebook-official {
          color: #305891;
        }
        &.fa-twitter-square {
          color: #2ca8d2;
        }
        &.fa-google-plus-square {
          color: #c82828;
        }
      }
    }
  }
  .entry-footer {
    .tags-links {
      a {
        background: #f0f0f0;
        font-size: 12px;
        color: #717272;
        padding: 2px 5px;
        margin: 0 1px 0 0;
        &:hover {
          background: $bg-hover;
          color: $white;
        }
      }
    }
  }
}

.posts {
  .post {
    .post-image {
      display: block;
      text-align: center;
      overflow :hidden;
      position: relative;

      &:after {
        background-color:rgba(255,255,255,0.2);
        content:"";
        display:inline-block;
        height:100%;
        position:absolute;
        right:150%;
        top:0;
        @include CSStransition(all, 0.6s, ease-in-out, 0s);                  
        @include skew(-45deg, 0);
        vertical-align:middle;
        width:100%;
      }

      img {
        display: block; margin: 0px auto;
      }

      &:hover {
        &:after {
          right: -150%;
        }
      }
    }
    .post-video {
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
      position: relative;
      iframe {
        border: none;
        position: absolute;
        width: 100% !important;
        height: 100% !important;
        left: 0;
        top: 0;
      }
    }
  }
}

.post-thumbnail {
  padding-right: 32px;
  border-right: 1px solid $border-light;
  > a {
    display: block;
    position :relative;
    overflow :hidden;
    &:after {
      background-color:rgba(255,255,255,0.2);
      content:"";
      display:inline-block;
      height:100%;
      position:absolute;
      right:150%;
      vertical-align:middle;
      width:100%;
      top:0;
      @include CSStransition(all, 0.6s, ease-in-out, 0s);                  
      @include skew(-45deg, 0);

    }

    &:hover {
      &:after {
        right: -150%;
      }
    }
  } 
}

.post-navigation a:hover {
  text-decoration: none
}

/* About us */
.au-banner {
  background-image: url({{"au_banner.jpg" | asset_url}});
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 588px;
  position: relative;
  text-align: center;
  margin: 0 auto 95px;
  .au-banner-text {
    @include ab(50%, 50%, n, n);
    @include translate(-50%, -50%);
    max-width: 650px;
    h3 {
      font-size: 40px;
      font-weight: 700;
      color: #434343;
      margin: 0 0 25px;
    }
    p {
      margin: 0;
      padding: 0;
      font-size: $size-h5;
      color: #434343;
      line-height: 28px;
    }
  }
}
.au-three-column {
  margin: 0px auto 100px;
}
.three-column-list {
  .three-column-item {
    float: left;
    width: 33.333333%;
    text-align: center;
    h4 {
      color: #434343;
      font-size: $size-h5;    
      margin: 35px 0 22px;  
    }
    p.caption {
      margin: 0;
      padding: 0;
      color: $body-general-color;
      line-height: 24px;
      font-size: $body-font-size;
    }
    &:hover {
      img {
        @include opacity(0.85);
      }
    }
  } 
  &.owl-carousel {
    .three-column-item {
      width: 100%;
    }
  }
}
.au-team {
  background: $bg-light;
  padding: 90px 0 60px;
  margin: 0 0 30px;
  .team-member {
    padding: 0;
    margin: 0 -15px;
    li {
      padding: 0 15px;
      margin: 0 auto 30px;
      width: 16.666666%;
      float: left;
      text-align: center;
      img {
        @include border-radius-circle;
        max-width: 170px;
        margin: 0px auto;
        display: inline-block;
      }
      h4 {
        color: #434343;
        font-size: $size-h5;
        margin: 15px 0 2px;
      }
      span {
        display: block;
        color: #989898;
      }
      &:hover {
        img {
          @include opacity(0.85);
        }
      }
    }
  }
  .au-team-6 {
    margin: 0px auto;
    text-align: center;
    .wrap-team-6 {
      background: $main-color;      
      font-size: $size-h5;      
      color: $color-title;
      width: 170px;
      height: 170px;           
      position: relative;      
      margin: 0px auto;
      @include border-radius-circle;      
      .wrap-team-6-inner {
        @include ab(50%, 50%, n, n);
        @include translate(-50%, -50%);
        width: 100%;
        padding: 5px;
      }
      .text-1 {
        color: $color-title;
        display: block;
      }
      .text-2 {
        font-weight: 600;
        color: $color-title;
        display: block;
        font-size: 36px;
        line-height: 1.0;
      }    
    }
    a {
      display: inline-block;
      color: #434343;
      font-size: $size-h5;
      margin: 15px 0 2px;
      font-weight: 600;
      &:hover {
        color: $main-color;
      }
    }
  }
}
.text-boxes-left {
  overflow: hidden;
  margin: 0 -15px;
  .text-boxes-item {
    float :left;
    width: 50%;
    padding: 80px 15px 0px;   
    h4 {
      font-weight: 600;
      font-size: $size-h6;
      color: #434343;
      margin: 0 0 25px;
    }
    p {
      line-height: 24px;
      color: $body-general-color;
      margin: 0;
    }
  }
}
.text-boxes-right {
  padding-top: 80px;
  h5 {
    color: #797979;
    font-weight: 400;
    font-size: $size-h5;
    position: relative;
    line-height: 37px;  
    margin: 0 0 20px 0;
    &:before {
      content: '+';
      width: 37px;
      height: 37px;
      line-height: 35px;
      font-size: 18px;
      color: #b5b5b5;
      display: inline-block;
      text-align: center;
      margin: 0 20px 0 0;
      border: 1px solid #b5b5b5;
      @include border-radius(3px, 3px, 3px, 3px);
    }
  }
}

/* Contact page */
.page-contact {  
  .contact-form,
  .contact-content {    
    margin: 60px 0 0;
    h2 {
      margin: 0 0 30px;
      text-transform: none;
    }
    p {
      color:$body-general-color;
      font-size: 14px;
      line-height: 24px;
      a {
        color: $color-note;
      }
    } 
  }
  .contact-form {   
    .contact-form {
      padding: 10px 0 0 0;
      .form-group {
        margin: 0 0 22px;
        label {
          font-weight: 700;
          color: $color-title;
        }
      }
    }
    .form-actions {
      padding: 8px 0 0;
      overflow: hidden;
      .btn {
        float: right;
        padding-left: 38px;
        padding-right: 38px;
      }
    }
  }
  .contact-content {
    color: $body-general-color;
    address {
      line-height: 24px;
    }
    h3 {
      color: $color-title;
      font-size: 14px;
      margin: 40px 0 15px;
      font-weight: bold;
    }
    ul {
      li {
        color:$body-general-color;
        font-size: 14px;
        line-height: 24px;  
        margin: 0 0 3px 0;
      }
    }
  }
  .col-md-6 {
    .map {
      margin-top: 68px;
    }
    .contact-form .form-actions .btn {
      float: left;
    }
    .contact-content {
      p {
        a {
          color: #0062bd;
        }
      }
    }
  }
}

/*------Terms & Conditions------*/
#home-main-content {
  padding-top: 20px;
}
.shopify-section {
  clear: both;
  margin: 0 auto;
  width: 100%;
  .home-product {
    &.home-carousel {  
      overflow: hidden;
      margin: 65px auto 0;  
    }
  }
}
.page-content {
  h2 {
    font-size: $font-custom;
    color: #434343;
    font-weight: 400;
    margin: 0 0 40px;
    padding: 0;
  }
  ol, ul {
    padding-left: 30px;
    list-style-position: outside;
    li {
      color: $body-general-color;
      line-height: 1.5;
      margin: 0 0 5px;
      padding: 0 0 0 5px;
    }
  }
  p {
    margin: 0 0 20px;
    color: $body-general-color;

  }
}
.home-top-banner {
  margin: 0px auto;
  &.style-2 {  
    margin-top: 50px;
    .banner-item {
      overflow: hidden;
      > a {        
        &:before {
          content: none;
        }
        @media (min-width: 1025px) {
          &:hover {
            @include CSStransform2D(1.05, 1.05);
          }
        }
      }
    }
  }
}
.banner-item {
  margin: 0 auto;
  position: relative;
  > a {
    display: block;
    position: relative;
    text-align: center;
    &:before {
      @media (min-width: 1025px) {
        @include before;  
      }
    }   
    &:hover {
      &:before {
        @include hover-before;
      }      
    }
  }
  img {
    width: 100%;
  }  
}

.home-tab-first-section,
.home-tab-second-section,
.product-simple-tab, 
.product-extended-tab {
  margin: 70px auto 0;
  .nav { 
    border: none;
    text-align: center;
    border-bottom: 1px solid $body-border-color;
    margin: 0 0 10px;
    li {
      display: inline-block;
      float: none;
      vertical-align: bottom;
      margin: 0 auto;
      float: none;
      padding: 0 20px;
      a {
        background: none;
        border: medium none;
        color: $other-color;
        font-size: $size-h4;
        line-height: 24px;
        margin: 0px;
        padding: 0px 0px 9px;
        text-transform: capitalize;
        font-weight: 400;
        position: relative;
        @include border-radius(0px, 0px, 0, 0);   
        &:before {
          content: '';
          width: 0;
          height: 2px;
          background-color: $main-color;
          @include ab(n, 50%, -1px, 50%);
          @include CSStransition(all, 0.3s, ease, 0s);
          @include opacity(0);
          z-index: 1;
        }
        &:after {
          content: "\f0d7";            
          color: $main-color;            
          display: block;
          margin: 0px auto;
          font-family: Fontawesome;
          @include ab(n, 0, -15px, 0);
          @include CSStransition(all, 0.3s, ease, 0s);
          @include opacity(0);
        }     
        @media (min-width: 1025px) {
          &:hover, &:focus {
            background: none;
            border: none;  
            &:before {
              @include opacity(1);
              left: 0;
              right: 0;
              width: 100%;
            }
            &:after {
              @include opacity(1);
              z-index: 1;
            }       
          } 
        }
      }

      &.active {
        a {          
          font-weight: 600;
          text-transform: capitalize;          
          color: $other-color;
          border: none;
          background: none;
          &:before {
            @include opacity(1);
            left: 0;
            right: 0;
            width: 100%;
          }
          &:after {
            @include opacity(1);
          }
        }
      }
    }
  }
}

.home-tab-first-section {  
  .tab-content {
    clear: both;
    .home-tab-first {
      .product-grid-item {
        width: 33.333333%;
        float: left;
      }
      .owl-carousel {       
        .product-grid-item {
          width: 100%;
          margin: 0;
        }
      }            
    }    
  }  
}
.home-tab-second-section {
  margin: 38px auto 0;
  padding: 55px 0;
  background: $footer-background-color;
  .nav {
    li {
      a {
        font-size: 17px;
      }
    }
  }
  .switch {    
    position: relative;
    margin: 0 auto 15px;
    > a {
      > span.hidden-sm {        
        visibility: hidden;
        width: 100%;
        @include opacity(0);
        @include ab(0, 0, n, n);
        @include CSStransition(all, 0.35s, ease-in-out, 0s);
      }
      &:hover {
        > span.hidden-sm {
          @include opacity(1);        
          @include CSStransition(all, 0.35s, ease-in-out, 0s);
          visibility: visible;
        }
      }
    }

  }
  .featured-img {
    overflow: hidden;
    position: relative;
    margin: 0 auto 15px;   
  }
  .product-wrapper-2 {           
    padding: 15px 20px;    
    @include CSStransition(all, 0.35s, ease, 0s);
    position: relative;
    &:after {
      content: '';
      width: 100%;
      display: block;
      z-index: -1;
      border: 1px solid $border-main;
      background: $white;
      @include border-radius(5px, 5px, 5px, 5px);
      @include ab(0, 0, -10.5%, 0);
      @include box-shadow(0 0 5px 0 #c6c6c6); 
      @include CSStransition(all, 0.35s, ease, 0s); 
      @include rotateX(45deg);
      @include transform-origin(bottom);
      @include opacity(0);

    }
    &:before {
      content: none;      
    }

    .product-head{
      position: relative;
      float: none;       
    }
    .product-review, .product-des-grid,
    .product-sku {
      display: none;
    }
    .product-content {            
      .product-wishlist {               
        display: inline-block;
      }     
      .quick-shop-button,
      .add-to-wishlist {        
        margin-bottom: 0px;
        display: inline-block;
        padding: 0;       
        text-align: center;
        border: none;
        @include border-radius(0, 0, 0, 0);
        @include CSStransition(all, 0.35s, ease, 0s);
      }

      .contact-form {
        display: inline-block;
      }      
      .product-button{
        text-align: center;     
        padding: 0 0 15px 0;        
        background: $white;     
        border: 1px solid $border-main;       
        border-top: none;                  
        width: auto;     
        z-index: -1;   
        @include ab(n, 0px, -10.5%, 0px);              
        @include translate(0, 20px);      
        @include opacity(0);
        @include transition(color 0.35s ease-out 0.001s, background 0.35s ease-out 0.001s, visibility 0.35s ease-out 0.35s, opacity 0.35s ease-out 0.25s, transform 0.35s ease-out 0.25s);                       
        @include border-radius(0px, 0px, 5px, 5px);                
      }
      .swatch{
        color: $body-title-color;
        margin: 0;
        .header{
          display: none;       
        }
        .swatch-element{
          margin: 0px auto 5px;
          float: none; display: inline-block;

          .tooltip {
            display: none !important;
          }

          label{
            background: transparent;
            background-size: cover;
            border: 1px solid $body-border-color;
            min-width: 30px !important;            
            height: 30px !important;            
            padding: 0px;
            border-radius: 0;
            line-height: 30px !important;
            text-align: center;
            cursor: pointer;
            margin: 0 3px;
          }
          input:checked + label{
            box-shadow: none;
            border-color: $black;
            cursor: default;
          }

          &:hover{
            label{
              border-color: $black;
            }
          }
        }        
      }
    }
    &:hover {      
      z-index: 5; 
      background: $white;
      &:after {
        @include rotateX(0);    
        @include opacity(1);
      }
      &:before {
        content: none;
      }
      .product-content {        
        .product-button {
          @include opacity(1);    
          @include translate(0, 0px);       
          bottom: -10.5%;
          z-index: 20;         
        }
        .pc-inner .price-cart-wrapper {
          border-color: $border-main;
        }
      }
    }
  }

  .home-tab-second {
    padding: 10px 0 25px;
    .ht2-item {
      width: 25%;
      float: left;     
      .product-wrapper-2 {
        padding: 15px 25px;
        background: $white;
        margin: 0 0 8px;
        .product-content {
          .product-button {
            padding-top: 12px;
          }
        }
        &:hover {
          &:after {
            bottom: -50px;
          }
          .product-content .product-button {
            bottom: -50px;
          }
        }
        @media (max-width: 1199px) {
          padding: 15px;
        }
      }
      &.ht2-special {
        width: 50%;
        padding: 0 8px;
        .featured-img {
          margin: 15% auto;
        }
        .product-wrapper {
          margin-left: 8px; 
          margin-right: 8px;
          padding-bottom: 7px;
        }
      }
    }
    &.owl-carousel {
      .owl-stage-outer {
        padding-bottom: 25px;
        &:hover {
          z-index: 1;
        }
      }
      .ht2-item {
        width: 100%;
      }
    }
  }
  .owl-item .product-wrapper {
    &:before {
      content: none !important;
    }
  }
}
.ht2-special {
  .add-cart-button {
    .btn-default {
      color: $white;
      font-size: $font-small;
      padding: 5px 15px;
      .icon {
        font-size: 20px;
        margin: 0 5px 0 0;
        float: left;
      }
    }
  }
}
.home-tab-third-section {
  margin: 70px auto 0;
  .nav-tab-wrapper {
    position: relative;
    .nav {      
      border: none;            
      text-align: right;
      li {
        display: inline-block;
        float: none;        
        margin: 0 auto;
        float: none;
        padding: 0px;
        a {
          background: none;          
          color: #7b8186;
          font-size: $font-medium;
          line-height: 24px;
          margin: 0px;
          padding: 3px 20px;
          text-transform: capitalize;
          font-weight: 400;
          position: relative;
          border: 2px solid transparent;
          @include border-radius(13px, 13px, 13px, 13px);
        }
        &.active {
          a {
            border-color: $main-color;
            color: $color-title;
          }
        }
        &:hover {
          @media (min-width: 1025px) {
            a {
              border-color: $main-color;
              color: $color-title;
            }
          }
        }
      }
    }
  }  
}
.current {
  .product-wrapper {    
    &:before {
      content: none !important;
    }   
  }
}
.shopify-section .home-tab-third {
  margin: 20px auto 0;
  .product-tab-third {
    width: 33.3333%;    
    float: left;
    .product-wrapper {
      float: left;
      width: 100%;
      clear: both;
      &:after {
        bottom: 0;
      }
      .product-head {
        float: left;
        width: 43%;
        max-width: 165px;
        padding: 0 20px 0 0;
        .featured-img {
          margin: 0px auto;    
          img {
            display: inline-block;            
            height: auto;
            width: 100%;
            transform-style: inherit;
            vertical-align: middle;
          }
        }
      }
      .product-content {
        float: left;
        width: 57%;
      }
      .product-type {
        margin: 0 0 4px;
        padding: 0;
        border: none;      
        font-size: 12px;
        color: #878787;
      }
      .product-button {         
        @include box-shadow(0 0 0 $white);
        @include border-radius(0, 0, 0, 0);         
        position: static;
        border: none;
        margin: 15px 0 0;
        padding: 0;
        text-align: left;
        &:before {
          content: none;
        }
      }
    }
    .product-name{      
      margin-bottom: 15px;
      color: $body-product-title;
      font-weight: 700;
      text-transform: none;
      font-size: $font-medium;
      a {
        color: $body-product-title;
        font-weight: 700;
        text-transform: none;
        font-size: $font-medium;
      }
      &:hover a{
        text-decoration: none;
        color: $main-color;
      }
    }   
  }
  &.owl-carousel {
    .owl-stage-outer {
      padding-bottom: 0px !important;
    }
    .product-tab-third {
      width: 100%;
    }
  }
}

.subscription {
  text-align:center;
  padding:58px 0 0;
}
.btn { 
  border: none;
  outline: none !important;
  outline-offset: 0;

}
.btn-default {   
  background: #ecb800 !important;
  color: #000000 !important;
  border: 1px solid #ecb800 !important; 
  padding: 10px 30px !important;
  line-height: 27px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  min-width: 130px !important;
  text-align: center !important;
  @include border-radius-20px;
  @include CSStransition(all, 0.35s, ease-in-out, 0s);
  &:hover, &:focus {
    /* background: $button-hover-btn1; */
    background: #000;  
    color: $button-hover-btn1-txt;
    border-color: #000;
    /* border-color: $button-hover-btn1-border;*/
  }
}
.btn-primary {
  padding: 10px 30px;
  line-height: 27px;  
  font-size: $size-h6;    
  font-weight: 400;
  background: #ecb800;  
  color: $button-btn2-txt;
  border: 1px solid $button-btn2-border;  
  min-width: 130px;
  text-align: center;
  @include border-radius-20px;
  @include CSStransition(all, 0.35s, ease-in-out, 0s);
  &:hover, &:focus {
    background: $button-btn2;  
    color: $button-hover-btn2-txt;
    border-color: $button-hover-btn2-border;
  }
}
.btn-custom {
  background: $button-hover-btn1;  
  color: $button-hover-btn1-txt;
  border: 1px solid $button-hover-btn1-border;
  padding: 10px 30px;
  line-height: 27px; 
  font-size: $size-h6;      
  min-width: 130px;
  text-align: center;
  @include border-radius-20px;
  @include CSStransition(all, 0.35s, ease-in-out, 0s);
  &:hover, &:focus {
    background: $button-btn1;  
    color: $button-btn1-txt;
    border-color: $button-btn1-border;
  }
}

.dropdown-menu {
  &.animated {
    -webkit-animation-duration:0.5s;
    animation-duration:0.5s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
  }
}

.product-list-item .switch,
.product-wrapper .product .image,
.product-wrapper-2 .product .image {
  overflow: hidden;
  position: relative;
  text-align: center;
  > a {
    > span.hidden-sm {    
      @include rotateY(-90deg);
      transform-style: preserve-3d;   
      visibility: hidden;
      width: 100%;
      @include opacity(0);
      @include ab(0, 0, n, n);
      @include CSStransition(all, 0.6s, ease-in-out, 0s);
    }
    &:hover {
      > span.hidden-sm {
        @include opacity(1);
        @include rotateY(0deg);
        @include CSStransition(all, 0.4s, ease-in-out, 0s);
        visibility: visible;
      }
    }
  }  
}
.colpick {
  position: relative;
  z-index: 99991;
}

#widget-social {  
  list-style: none;
  margin: 34px 0 0; 
  li {
    display: inline-block;
    font-size: 22px;
    margin-right: 20px;
    padding: 0;
    text-align: center;
    &:last-child {
      margin-right: 0;
    }
    a {
      color: $color-fa;
      display: inline-block;
      padding: 0px;     
      height: 28px;
      line-height: 28px;      
      @include CSStransition(all, 0.35s, ease, 0s);
      &:hover {
        color: $main-color;
      }      
    }
  }
}
#widget-social li a:hover svg {
    fill: $main-color !important;
}
.errors {
  color: $main-color;
}
body>div.jGrowl{ 
  z-index: 10000; 
  left: 0 !important; 
  margin: 0 35%; width: 30% !important;
  div.jGrowl-notification {
    width: 100% !important;
  }
}
/*Popup Cart*/
#layer-addcart-modal {
  z-index: 9999;
  .addcart-overlay {
    background: rgba(0, 0, 0, 0.5);   
    height: 100%;
    left: 0;    
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9990;
  }
  .addcart-modal-box {
    @include border-radius-20px;
    @include ab(15%, n, n, n);
    @include box-shadow(0 0 7px 5px rgba(0, 0, 0, 0.3));
    margin: 0 25%;
    width: 50%;
    height: auto;
    max-height: 90%;    
    z-index: 9991;
    background: $white; 
    .note {     
      color: $color-note;
      display: block;
      margin: 30px;
      padding: 0px;
    }
    .addcart-modal-product {
      padding: 0px 30px 20px;
      overflow: hidden;
      .addcart-modal-image {
        float: left;
        margin: 0 30px 0 0;                                                                                                                                                                                                                           
      }
      .addcart-modal-info {
        display:inline-block;
        > div {
          margin: 0 0 8px;
          &.addcart-modal-title {
            font-weight: 700;
            color: $body-product-title;
            font-size: 16px;
          }
          &.addcart-modal-qty {
            strong {
              font-weight: normal;
            }
          }
          &.addcart-modal-price {                       
            font-size: 18px;
            strong {
              color: $body-general-color;
              font-weight: 400;
            }
          }
          //BOLD Dev 10/06/17
          &.addcart-modal-options{
            display:inline-block;
          }
          //End BOLD Dev 10/06/17
        }
        strong {
          margin: 0 10px 0 0;
        }
      }
    }
    .addcart-modal-action {
      background: $body-background-color;
      border-top: 1px solid $border-main;
      padding: 20px 0px 40px;
      margin: 0 30px;
      .addcart-modal-number {
        display: block;
        font-size: 16px;
        margin: 0 0 15px;
      }
      .addcart-modal-subtotal {               
        font-size: 30px;
        strong {
          margin: 0 20px 0 0;
          color: $body-general-color;
          font-weight: 400;
          font-size: 20px;
        }
      }
      .addcart-modal-button {
        overflow: hidden;
        padding-top: 10px;
        .addcart-modal-continue {
          float: left;          
          border: none;
          margin: 10px 0 0;         
        }
        .addcart-modal-checkout {
          float: right; 
          margin: 10px 0 0;               
        }
      }
    }
  }
  .addcart-modal-content {
    overflow-y: auto;
    @include border-radius-20px;
  }
  .addcart-modal-close {
    @include ab(-17px, n, n, -17px);
    @include border-radius-circle;
    text-align: center;     
    background-color: $main-color;
    background-image: url({{"close.png" | asset_url}});
    background-repeat: no-repeat;
    background-position: center center;
    width: 35px; 
    height: 35px;       
    text-align: center;
    line-height: 35px;      
    z-index: 1;
    cursor: pointer;      
    &:hover{
      background-color: $button-hover-btn1;
    }
    &:hover {
      color: $black;
    }
    .fa {
      display: none;
    }
  }
}
.templateListCollections {
  .price-range-slider,
  .sb-filter-wrapper {
    display: none;
  }
}
#product-action.sold-out{
  font-size: 24px;
}

.notifyjs-corner,
.noti-product-slider {  
  position: fixed;  
  bottom: 10px;  
  width: 330px;
  z-index: 9999;  
  overflow: hidden;

  {% if settings.noti_slider_position == 'left' %} 
  left: 10px;
  {% else %}
  right: 10px;
  {% endif %}  
  .np-slider {
    display: none;
    &.owl-carousel {
      display: block;
    }
  }
  .col-sm-4 {
    padding-right: 5px;
    a {
      display: block; 
      img {
        width: 100%;
      } 
    }
  }
  .product {
    h3 {      
      font-size: $size-h5;      
      margin: 0 0 10px;
    }
    h5 {      
      font-size: $font-medium;
      font-family: $font-standard;
      margin: 0 0 5px;
      a {               
        font-size: $font-medium;
        color: $color-title;
        &:hover {         
          color: $main-color;
        }
      }
    }
    .product-price {
      text-align: left;      
      border: none;
      padding: 0;
      color: $body-price-color;
      font-weight: 600;
      font-size: $font-medium;
      .price_compare {        
        margin: 0 5px 0 0;        
        color: $body-price-sold-out-color;
        font-weight: 300;
        font-size: $font-small;
      }

    }
  }
  .notifyjs-wrapper,
  .owl-stage-outer {
    margin: 0px !important;
    display: block;
    height: inherit;
    margin: 3px;
    position: relative;
    width: inherit;
  }
  .product-grid-item {
    padding: 0;
    margin: 0;
    &:before {
      content: none;
    }
  }
  .notifyjs-container,
  .owl-item { 
    margin: 0px !important;
    display: block;
    height: inherit;
    padding: 5px;
    position: relative;
    width: inherit;
    /*> div,*/
    .product-wrapper {
      margin: 0px !important;
      padding: 15px;
      background: $white;     
      width: 100%; 
      overflow: hidden;
      @include box-shadow(0 0 5px #c6c6c6); 
      &:after,
      &:before {
        content: none;
      }
      .np-slider-title,
      .noti-title {
        display: block !important;
        font-size: $size-h4;
        margin: 0 0 15px;
      }
      .product-head {    
        .product-name {
          margin: 0px;
          height: auto !important;
          float: right;
          width: 66.6667%;
          a {
            font-size: $body-font-size;            
          }
        }
        .product-image .featured-img {
          height: auto;                    
          width: 33.33333%;
          margin: 0;
          padding: 0 20px 0 0;
          float: left;
          a > span img {
            display: none;
          }
          img {
            position: static;
            @include translate(0, 0);
            @include opacity(1);
          }
        }
      }
      .product-content {
        width: 66.6667%;
        padding: 0;      
        float: right;
        .product-price {
          display: block;
        }          
      }
      .price-cart-wrapper {
        padding: 0;
        border: none;
      }
      .product-type,
      .product-description,
      .product-button,
      .product-review,
      .product-label,
      .quick_shop,
      .wrapper-countdown,
      .product-btn,
      .add-cart-button,
      .availability {
        display: none;
      }
    }
  }
}
.layer-effect-wl {
  .info {
    p {
      background: none;
      padding: 0;
      font-size: $font-small;
      color: $color-note;
    }
  }
}
#hi-eu-opt-in {
  &.active {
    z-index: 99;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    bottom: 0;
    width: 100%;
    bottom: 0;
    color: $white;
    padding: 15px;
  }
  #hi-cookie-box {
    max-width: 1200px;
    margin: 0px auto;
    overflow: hidden;
  }
  .hi-cookie-head,
  .hi-cookie-intro {
    margin: 0px;
    width: 45%;
    clear: both;
    padding: 0 15px;
    float: left;
    .read-more {
      display: none;
    }
    br {
      display: none;
    }    
  }
  .hi-cookie-head {
    padding-bottom: 5px;
  }
  .hi-cookie-happy {
    float: left;
    text-align: right;
    padding: 0 15px;
    margin: -11px 0 0;
    width: 28%;
  }
  .hi-cookie-btn {
    float: left;
    width: auto;
    margin: -20px 5px 0; 
    @include button1();
    padding: 5px 30px;
    cursor: pointer;  
    &.disagree {
      @include button2();
      color: $color-title;
      padding: 5px 30px;
    }
  }  
}

.modern {
  padding: 0;
  margin: 0px auto; 
  box-sizing: border-box;  
}
.template-password {
  text-align: center;
  padding: 0;
  margin: 0px auto;  
  background-image: url({{'password-page-background.jpg' | asset_url }});
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  display: table;
  height: 100%;
  width: 100%;
  *, input, *::before, *::after {
    box-sizing: border-box;
  }
}
.password-page__wrapper {
  a {
    color: inherit;
  }
  hr {
    border-color: inherit;
    margin: 0 auto;
    max-width: 60px;
    padding: 15px 0;
  }
  .social-sharing {
    a {
      color: #ffffff;
    }
    &.is-clean {
      a {
        background: #ffffff none repeat scroll 0 0;
        color: #333333;
        &:hover {
          background: #ececec none repeat scroll 0 0;
        }
      }        
    }
  }
}


.template-password {
  height: 100vh;
  text-align: center;
  .hidden-label {
    display: none;
  }
  .share-title {
    font-size: 12px;
    font-weight: 900;
    padding-right: 10px;
  }
  .is-large {
    .share-title {
      padding-right: 16px;
    }
    .share-count {
      font-size: 18px;
      padding: 0 14px;
    }
  }
  .share-facebook {
    background-color: #3b5998;
    &:hover {
      background-color: #2d4373;
    }
  }
  .share-twitter {
    background-color: #00aced;
    &:hover {
      background-color: #0087ba;
    }
  }
  .share-pinterest {
    background-color: #cb2027;
    &:hover {
      background-color: #9f191f;
    }
  }
  .share-fancy {
    background-color: #4999dc;
    &:hover {
      background-color: #2780cb;
    }
  }
  .share-google {
    background-color: #dd4b39;
    &:hover {
      background-color: #c23321;
    }
  }
  .social-sharing {
    font-family: $font-standard;
    padding: 0;
    margin: 20px auto;
    ul {
      padding: 0;
      margin: 0px auto;
      list-style: none;
      li {
        display: inline-block;
      }
    }
    * {
      box-sizing: border-box;
    }
    a {
      border-radius: 2px;
      color: #ffffff;
      display: inline-block;
      font-weight: normal;
      height: 30px;
      line-height: 30px;
      margin: 5px 10px;
      text-decoration: none;
      &:hover {
        color: $main-color;
      }
    }
    span {
      display: inline-block;
      font-size: 13px;
      height: 30px;
      line-height: 30px;
      vertical-align: top;
      font-weight: 400;
    }
    .fa {
      padding: 0;
      font-size: 20px;           
    }    
    .icon:before {
      line-height: 22px;
    }
    &.is-clean {
      .share-count {
        top: -1px;
      }
      .fa-facebook {
        color: #3b5998;
      }
      .fa-twitter {
        color: #00aced;
      }
      .fa-pinterest {
        color: #cb2027;
      }
      .fa-fancy {
        color: #4999dc;
      }
      .fa-google-plus {
        color: #dd4b39;
      }
      a {
        background-color: #ffffff;
        border: 1px solid #ececec;
        color: #333333;
        height: 30px;
        line-height: 30px;
        span {
          font-size: 13px;
          height: 30px;
          line-height: 30px;
        }
        .share-title {
          font-weight: normal;
        }
        &:hover {
          background-color: #ececec;
          .share-count {
            background-color: #ffffff;
            &:after {
              border-right-color: #ffffff;
            }
          }
        }
      }
    }    
    &.is-large {
      a {
        height: 44px;
        line-height: 44px;
        span {
          font-size: 18px;
          height: 44px;
          line-height: 44px;
        }
        .fa {
          padding: 0 10px 0 18px;
          &:before {
            line-height: 44px;
          }
        }
      }
    }
  }
}
.password-page__header__inner { 
  padding: 15px 30px;
}
.password-page__logo {
  color: inherit;
  margin-top: 90px;
  .logo {    
    max-width: 100%;
  }
}
.password-page__main {    
  height: 100%;
  margin: 0 auto;
  width: 100%;
}
.password-page__main__inner {    
  padding: 15px 30px;
  vertical-align: middle;
}
.password-page__hero {
  font-family: $font-heading;
  font-size: 2.625em;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  text-rendering: optimizelegibility;
  text-transform: none;
}
@media screen and (min-width: 481px) {
  .password-page__hero {
    font-size: 3.75em;
  }
}
@media screen and (min-width: 769px) {
  .password-page__hero {
    font-size: 4em;
  }
}
.password-page__message {
  font-size: 120%;
  font-style: italic;
}
.password-page__message img {
  max-width: 100%;
}
.password-page__message, 
.password-page__login-form, 
.password-page__signup-form {
  margin: 0 auto;
  max-width: 500px;
}
.password-page__message, 
.password-page__login-form {
  padding: 30px;
  text-align: center;
}
@media screen and (min-width: 480px) {
  .password-page__login-form, 
  .password-page__signup-form {
    padding: 0 30px;
  }
}
.password-page__login-form, 
.password-page__signup-form {
  .input-group {
    width: 100%;
  }    
}
.password-page__login-form, 
.password-page__signup-form {
  .errors {
    ul {
      list-style-type: none;
      margin-left: 0;   
    }
  }  
}
.lt-ie9 .template-password .newsletter__submit-text--small, 
.lt-ie9 .template-password .password-page__login-form__submit-text--small {
  display: none !important;
}
input.input-group-field {
  height: 37px;
  padding: 8px 10px;
  line-height: 1.42;
  color: #333;
  border: 1px solid #ddd;
  width: 100%;
  @include border-radius(2px, 0, 0, 2px);
}
input.password-page__login-form__submit[type="submit"], 
input.password-page__signup-form__submit[type="submit"] {
  font-size: 0.9em;
}
.password-page__social-sharing {
  margin-top: 30px;
}
.password-login {
  text-align: right;
}
.password-login, 
.admin-login {
  margin-top: 15px;    
  a {
    &:hover {
      color: inherit;
    }
  }
}
.password-login {
  font-family: $font-standard;
  font-size: 0.875em;
  line-height: 14px;
}
.lock-icon-svg {
  display: inline-block;
  height: 14px;
  vertical-align: baseline;
  width: 14px;
  path {
    fill: currentcolor;
  }
}
.lt-ie9 .lock-icon-svg {
  display: none;
}
.password-page__footer {

}
.password-page__footer_inner {  
  font-size: 95%;
  line-height: 24px;
  padding: 30px;
  vertical-align: bottom;
}
.shopify-link {
  color: inherit;
  &:hover {
    color: inherit;
  }
}
.shopify-logo-svg {
  display: inline-block;
  height: 24px;
  line-height: 0;
  vertical-align: top;
  width: 82.2857px;
  path {
    fill: currentcolor;
  }
}
.lt-ie9 .shopify-logo-svg {
  display: none;
}
.modern .shopify-name {
  clip: rect(0px, 0px, 0px, 0px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}
.input-group {
  border-collapse: separate;
  display: table;
  position: relative;
  .btn, .btn--secondary, 
  input.btn--secondary, 
  .btn--tertiary, 
  input.btn--tertiary, 
  input[type="submit"] {
    -moz-appearance: none;
    -moz-user-select: none;
    background-color: $main-color;
    border: 1px solid rgba(0, 0, 0, 0);
    @include border-radius(0px, 2px, 2px, 0);
    -webkit-appearance:none;
    color: $white;
    cursor: pointer;
    display: inline-block;
    font-family: $font-standard;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42;
    height: 37px;
    margin: 0;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.1s ease-in 0s;
    vertical-align: middle;
    white-space: nowrap;    
    &:hover {
      background: $button-hover-btn1;
    }
  }
}
.input-group-btn {
  padding: 0;
  position: relative;
  white-space: nowrap;
  width: 1%;
}
.input-group-field, 
.input-group-btn {
  display: table-cell;
  margin: 0;
  vertical-align: middle;
}
.mfp-hide {
  display: none !important; 
}
.mfp-bg {
  background: #ffffff none repeat scroll 0 0;
  height: 100%;
  left: 0;
  opacity: 1;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1042;
}
.mfp-wrap {
  height: 100%;
  left: 0;
  outline: medium none !important;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1043;
}
.mfp-container {
  background-color: #ffffff;
  box-sizing: border-box;
  height: 100%;
  left: 0;
  padding: 0 8px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}
.mfp-align-top .mfp-container:before {
  display: none;
}
.mfp-content {
  display: inline-block;
  margin: 0 auto;
  position: relative;
  text-align: left;
  vertical-align: middle;
  z-index: 1045;
  color: #333;  
}
.mfp-inline-holder, 
.mfp-ajax-holder {
  .mfp-content {
    cursor: auto;
    width: 100%;
  }  
}
.mfp-ajax-cur {
  cursor: progress;
}
a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: $body-link-color;
  text-decoration: none;
}
.text-link {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: $main-color;
  text-decoration: none;
}
a:hover, a:focus, 
.text-link:hover, 
.text-link:focus {
  color: $main-color;
}
button.mfp-close, 
button.mfp-arrow {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 0 none;
  box-shadow: none;
  cursor: pointer;
  display: block;
  outline: medium none;
  overflow: visible;
  padding: 0;
  z-index: 1046;
}
button::-moz-focus-inner {
  border: 0 none;
  padding: 0;
}
.mfp-close {
  color: #333333;
  font-family: Arial,Baskerville,monospace;
  font-size: 28px;
  font-style: normal;
  height: 44px;
  line-height: 44px;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  position: absolute;
  right: 0;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 44px;
  &:hover,
  &:focus {
    opacity: 1;
  }
  &:active {
    top: 1;
  }
}

.mfp-close-btn-in .mfp-close {
  color: #333333;
}
.mfp-image-holder, 
.mfp-iframe-holder {
  .mfp-close {
    color: #ffffff;
    padding-right: 6px;
    right: -6px;
    text-align: right;
    width: 100%;  
  }  
}
button.mfp-close {
  color: #333333;
  font-size: 2.5em;
  margin: 30px;
  opacity: 1;
}

#style-panel {
  .style-toggle {
    background-color: #fff;    
    border-image: none;
    @include border-radius(0, 5px, 5px, 0);
    @include box-shadow(-3px 0 50px -2px rgba(0, 0, 0, 0.14));
    @include CSStransition(all, 0.6s, ease, 0s);
    border: 1px solid #ededed;
    border-left: none;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 25px;
    left: 0;
    line-height: 25px;
    padding: 10px 13px 10px 12px;
    position: fixed;
    top: 75px;    
    z-index: 9999;
    color: #333e48;
  }

  .style-content {
    background-color: #fff;
    border-top: 1px solid #ededed;    
    float: left;
    left: -200px;
    line-height: 24px;
    padding: 20px 20px 30px;
    position: fixed;
    @include box-shadow(-3px 0 50px -2px rgba(0, 0, 0, 0.14));
    @include CSStransition(all, 0.6s, ease, 0s);
    width: 200px;
    z-index: 9999;

    .sc-content {
      border-bottom: 1px solid #ddd;
      clear: both;
      display: block;
      margin-bottom: 20px;
      padding-bottom: 20px;

      .btn {
        background: $main-color;
        @include border-radius(5px, 5px, 5px, 5px);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        padding: 13px;
        text-align: center;
        text-transform: uppercase;
        width: 100%;

      }

      .sc-title {
        display: block;
        font-weight: 600;
        margin-bottom: 10px;
        text-transform: uppercase;
      }

      .layout-control {
        display: block;
        margin: 0 0 10px 0;

        span, a {
          background: #fff;
          border: 1px solid #ddd;
          cursor: pointer;
          display: inline-block;
          font-size: 13px;          
          padding: 5px;
          width: 100%;
          text-align: center;
          text-transform: uppercase;
          margin-bottom: 5px;
          @include border-radius(3px, 3px, 3px, 3px);

          &:hover {
            background: #e6e6e6;
            color: #f94127;
          }

          &.selected {
            background: #e6e6e6;
            color: #f94127;
            cursor: default;
          }
        }        

        .tptn-config-title {
          display: inline-block;
        }        
      }
      .list-inline {
        .changecolor {
          width: 20px;
          height: 20px;
          float: left;
          margin: 0;          
          @include border-radius(3px, 3px, 3px, 3px);
          cursor: pointer;
          border: 2px solid transparent;
          &.yellow-text {
            background-color: #fed700;
          }
          &.green-text {
            background-color: #a3d133;
          }
          &.blue-text {
            background-color: #0787ea;
          }
          &.red-text {
            background-color: #e74c3c;
          }
          &.orange-text {
            background-color: #f89a20;
          }
          &.gold-text {
            background-color: #dab26d;
          }
          &.flat-blue-text {
            background-color: #00abc5;
          }
          &.pink-text {
            background-color: #ce1d76;
          }         
          &:hover {
            border-color: #333e48;
          }
          &.selected {
            cursor: default;
            border-color: #333e48;
          }
        }
      }

      &:last-child {
        border-bottom: 0 none;
        margin-bottom: 0;
        padding-bottom: 0;
      }     
    }
  }
  &.open {
    .style-toggle {
      left: 200px;
    }

    .style-content {
      left: 0;
    }
  }  
}

/*Compare*/
.fancybox-inner .bc-error,
.fancybox-inner .bc-success {  
  margin: 0px auto;
  padding: 0;
  position: relative;  
  height: 100%;
  width: 100%;
  > span {        
    width: 100%;    
    padding: 10px 30px;
    @include ab(50%, 50%, n, n);
    @include translate(-50%, -50%);
  }
}
#product-compare,
#product-wishlist {
  background: $white;
  padding: 50px 0 0;
  table {
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    tr {
      td {
        padding: 15px;
        border: 1px solid #ddd;
        position: static;   
        &.comparison_options {
          .line {
            display: block;
            padding: 0 0 5px;
            text-align: center;
            > label {
              margin: 0;
              display: inline-block;
              padding: 0 10px 0 0;
              font-weight: 600;
            }
          }
        }     
      }
    }
    .heading-col {      
      text-align: left;
      background: #f3f3f3;
      color: $black;
      font-size: $size-h6;
      strong, b {
        font-weight: 400;
      }
    }
    .product-col {      
      text-align: center;
      position: relative;
      .remove {
        @include ab(10px, n, n, 10px);      
        a {
          color: $body-general-color;
          font-size: 18px;
          &:hover {
            color: $main-color;
          }
        }  
      }
      .cmp-product-image {
        margin: 0px auto;
        width: 150px;
      }
      .product-name {
        margin: 15px auto;
        a {
          color: $body-general-color;
          &:hover {
            color: $main-color;
          }
        }
      }
      .product-price {
        .price-compare {
          margin: 0 15px 0 0;
        }
      }
      .button-container {
        .btn {
          margin: 10px auto 0;
          padding: 6px 30px;
          min-width: 160px;
          font-weight: 400;
        }
      }
      &.comparison_collection {
        a {
          color: $body-general-color;
          &:hover {
            color: $main-color;
          }
        }
      }
    }
  }
}

/* FAQ App*/
.s4com-helpcenter {
  padding: 0;
  > h1 {
    text-align: center;
    margin: 0 auto 40px;
    color: $body-title-color;
    display: none;
  }
  .s4com-panel {  
    display: none;
    padding: 0px;
    border: none;
    @include border-radius(0, 0, 0, 0);
    .twitter-typeahead {
      width: 80%;
      margin: 0 10%;
      @media (max-width: 767px) {
        width: 100%;
        margin: 0;
      }
    }
    input {
      border: 1px solid $body-border-color;
      padding: 15px 30px;
      height: 50px;      
      @include border-radius-25px;
    }
    .tt-menu {
      width: 100%;
      border: 1px solid $body-border-color;
      padding: 10px 0;
      .tt-suggestion {
        a {
          color: $body-general-color;
        }
        &:hover {
          background: none;
          a {
            color: $main-color;
          }
        }
      }
    }
  }

  .s4com-top-heading {
    padding: 0;
    margin:0;
    font-size: 40px;
    border: none;
    text-align: center;
    display: none;
  }
  .s4com-sub-heading {
    padding: 0 !important;
    margin: 8% 0 3.5%;    
    text-align: center;
    border: none;
    font-size: 40px; 
    color: $body-title-color;
  }
  .s4com-articles {        
    border-bottom: 1px solid $body-border-color;    
    padding: 0;
    margin: 0;  
    > a {
      color: $body-title-color;     
      display: block;     
      font-weight: 500;             
      position: relative; 
      padding: 0; 
      font-size: 18px;          
      @include CSStransition(all, 0.3s, ease, 0s); 
      > h4 {
        display: block;
        padding: 25px 0;
        color: #434343;
        font-size:$font-custom;
        display: block;     
        font-weight: 400;   
        text-transform: none; 
        position: relative;          
      }    

      &.s4com-active {
        color: $main-color; 
        h4 {
          color: $main-color; 
        }       
      }
      .s4com-icon-wrap {
        display: none;
      }
    }  
    .s4com-article-body {
      margin: 0px;
      color: $body-general-color;
      font-size: 14px;
      line-height: 24px;   
      padding: 10px 0 30px;
      p {
        margin: 0;        
        font-size: 14px;
        line-height: 24px;   
      }
    }    
  }
  .s4com-space-bottom {
    padding: 0;    
    border: none;
  }
}

#fsb_background {
  z-index: 999 !important;
}
.crossed-out {
  @include border-radius-circle;
}

.horizontal-menu { width:105%; }
.horizontal-menu .navigation { width:100%; margin:0 auto; }

.sb-widget .owl-item {
    height: 218px !important;
}

.templateIndex .bottom-container {
    padding-top: 0px;
}

.bottom-product-block {
    padding: 0px 0 75px;
}

.sb-widget .owl-item img {
    width: 60%;
    margin: auto;
}

ul.list-inline {
    display: inline;
}

.Country-flags {
    display: inline-block;
}

div#sidebar ul.dropdown-menu {
    min-height: 586px !important;
}

.vertical-menu .sidemenu-holder .navbar .navbar-collapse .main-nav>li.dropdown>.dropdown-menu {
     min-height: 626px !important;
}


i.fa.fa-envelope {
    color: #4285f4;
}
i.fa.fa-linkedin-square {
    color: #0077b5;
}
.accordion-tsd-content {
  display: block;
  padding: 20px 20px 8px;
  background-color: #f4f4f4;
}
.accordion-tsd-head {
  border-top: 1px solid #000;
  text-align: center;
}
a.accordion-text-content {
  position: relative;
  top: -10px;
  background-color: #fff;
  padding: 0 16px;
  color: #000;
  font-weight: 700;
  display: inline-flex;
}
a.accordion-text-content svg {
  margin-right: 8px;
}
.accordion-tsd-content.tsd-active {
  display: none;
}
.accordion-tsd-head a.accordion-text-content svg:nth-child(2) {
  display: none;
}
.accordion-tsd-head a.accordion-text-content svg:nth-child(1) {
  display: block;
}
.accordion-tsd-head.tsd-active a.accordion-text-content svg:nth-child(2) {
  display: block;
}
.accordion-tsd-head.tsd-active a.accordion-text-content svg:nth-child(1) {
  display: none;
}
.row.webcast-third-row,
.row.webcast-first-row {
    margin-left: 0px;
    margin-right: 0px;
}
div#body-content div#main-content .main-content {
    min-height: 1374.81px;
}
@media (min-width: 991px) {
  .webcast-second-row {
    padding-top: 10px;
    margin-top: -18px;
}
  .header-content.custom-position-search-section {
    background-image: none;
}
.custom-position-search-section .header-bot {
    background-image: url(/cdn/shop/files/main-menu-big-BG_new.png?v=1719309543);
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center;
    padding: 12px 0px;
    background-color: transparent;
}
.custom-position-search-section .header-bot .bot-content {
    margin: 0px 0px 9px 0px;
}
  header.header-content {
    min-height: 254.59px;
}
}

div#product-info {
    background-image: url(/cdn/shop/files/Texture-Black-PNG-Largenew.png?v=1710837060);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
div#product-info .product-info-sub-section {
  padding: 47px 30px 130px!important;
}
div#product-info .product-info-sub-section {
    padding: 47px 30px 20px !important;
}
#stock_data h2 {
 color:green; 
}
table.table.table-bordered.pindim thead.heading tr th {
    width: 33.33%;
}
.product-weight-capacity {
    font-size: 12px;
    line-height: 17px;
    margin-bottom: 4px;
    min-height: 34px;
}
.total-price-title {
    font-size: 25px;
    line-height: 30px;
}
.custom-price-main-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    vertical-align: middle;
}
.custom-price-main-section .product-price {
    border-top: 0px solid #ffffff !important;
    padding: 0px !important;
    margin: 0px 0px 0px 10px !important;
}
.stock_data_section, .stock_data_sectionn {
    background-color: transparent;
    width: fit-content;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 0 10px gray;
    padding: 20px;
    color: #fff;
    margin-top: 10px;
    border: 1px solid #fff;
}
.stock_data_section h2 h6 {
  color: #000 !important;
}
.free-freight-logo-section {
    text-align: center;
    margin: 0px 0 30px;
}
.product-free-freight-logo-section {
    text-align: center;
    margin-top: 12px;
}
.row.webcast-second-row {
    margin: 0;
}
@media (max-width: 1440px) {
.custom-position-search-section .header-bot {
    background-size: cover;
  }
}
@media (max-width: 1199px) {
.request-call-cus-section {
    width: 100% !important;
    margin: 0 auto !important;
}
}
@media (max-width: 991px) {
.header-contact-box button.btn.btn-default.btn-lg {
    line-height: 20px;
    font-size: 13px;
}
}
@media (max-width: 767px) {
  div#product-info .product-info-sub-section {
    padding: 47px 30px !important;
}
.top-search-holder.col-md-2 {
    margin-bottom: 20px;
  text-align: center;
}
table td {
    padding: 30px 12px;
}
/*  table td iframe {
    width: 100%;
}
  table td {
    padding: 30px 12px;
    display: block;
    width: 100% !important;
    clear: both;
}*/
.request-call-cus-section .request-call-cus-inner-section {
    width: 100% !important;
}
}
@media (max-width: 480px) {
  div#product-info .product-info-sub-section {
    padding: 47px 0px !important;
}
}
@media (max-width: 412px) {

ul.contact-box-list a {
    padding: 4px 0px;
    display: block;
}
a.our-range {
    padding: 10px;
    display: block;
}
  h5.img-headng {
    color: #000;
}
  a.about-rhinox-group-link {
    color: #000000;
    background-color: #ecb800;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    display: block;
    width: fit-content;
    margin: 10px auto 0px;
}
  .f-support-box span.f-text-2 a {
    color: #000000;
}
  .f-address span.f-text-4 a {
    color: #000;
}
  .btn {
    padding: 12px 24px;
  }
}
@media (max-width: 380px) {
a.accordion-text-content {
    font-size: 12px;
    align-items: center;
  padding: 0 6px;
}
}
.f-text-2 a{
  background: #0000 none repeat scroll 0 0;
  color: #cfa408;
  text-decoration: none;
  font-size: 22px;
  font-weight: 600;
}
.f-text-2 a:hover{
  color: #ecb800;
  text-decoration: none;
}
.f-text-4 a{
  background: #0000 none repeat scroll 0 0;
  color: #cfa408;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.f-text-4 a:hover{
  color: #ecb800;
  text-decoration: none;
}
#loadinggif .loader{
  display: block;
}
.header-contact-box .btn-default:hover{
  color: #FFFFFF !important;
  background: #000000 !important;
  border-color: #000000 !important;
}
.webcast-second-row .webcast-second-row-title .btn-default:hover{
  color: #FFFFFF !important;
  background: #000000 !important;
  border-color: #000000 !important;
}
#open_adv:hover{
  text-decoration: none;
}
.card-information .quick-add-cart{
  position: absolute;
  right: 0;
  bottom: 0;
  background: #ECB400;
  width: 30px;
  height: 30px;
  color: #FFFFFF;
  border-radius: 20px;
  padding: 3px 6px;
  border: 1px solid #eaeaea;
}
.card__information .card-information{
  position: relative;
}
.add-cart-button .quick_shop .icon-add-to-cart{
  font-size: 18px;
}
/* Original CSS
.product .product__info-wrapper .product__info-container{
  background-image: url('https://cdn.shopify.com/s/files/1/0906/4421/8205/files/Texture-Black-PNG-Largenew.png?v=1741675942');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 47px 30px 20px;
} */
.product .product__info-wrapper .product__info-container{
  background-image: url('https://cdn.shopify.com/s/files/1/0906/4421/8205/files/Texture-Black-PNG-Largenew.png?v=1741675942');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 47px 30px 60px;
}
.product__info-container .product__title h1{
  color: #FFFFFF;
  font-size: 32px;
  letter-spacing: 0px;
  border-bottom: 3px solid #ffffff;
  padding-bottom: 10px;
}
.product__info-container .price .price__container .price__regular .price-item{
  font-size: 26px;
  color: #FFFFFF;
  letter-spacing: 0px;
  /* margin-left: 10px; */
}
.product__info-container .price{
  font-size: 26px;
  color: #FFFFFF;
  letter-spacing: 0px;
  /* margin-left: 10px; OG CSS */
  margin-left: 0px;
}
.product__info-container #product_vsku{
  margin: 0px;
  /* margin-left: 10px; OG CSS */
  margin-left: 0px;
}
.shopify-payment-button{
  display: none;
}
a.accordion-text-content:hover{
  text-decoration: none;
  color: #000000;
}
a.accordion-text-content:focus{
  text-decoration: none;
  color: #000000;
}
.information-section .inner-left h1 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25em;
    margin: 0;
    padding: 0;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #747474;
    letter-spacing: 0px;
}
.information-list-item-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    vertical-align: middle;
    gap: 20px;
}
.information-list-item-section .information-items-section {
    max-width: calc(25% - 10px);
    flex: 0 0 calc(25% - 10px);
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    gap: 15px;
    flex-direction: column;
}
.information-list-item-section .information-items-section .information-item-title h3.information-title {
    font-weight: 600;
    margin: 0;
    padding: 0;
    font-family: Open Sans, Arial, Helvetica, sans-serif;
    color: #747474;
    letter-spacing: 0px;
    min-height: 60px;
}
.information-list-item-section .information-items-section .information-item-img img.information-logo {
    opacity: 0.6;
}
.shop-pay-block .shop-pay-content p#shopify-installments span.shop-pay-price span.money {
    color: #ECB800;
    font-weight: 700;
}
@media (max-width: 1024px) {
  .add-cart-button .quick_shop .icon-add-to-cart:before {
    content: "\64" !important;
    display: inline-block !important;
  }
}
@media (max-width: 668px) {
.information-list-item-section .information-items-section .information-item-title h3.information-title {
    font-size: 18px;
    line-height: 23px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    min-height: 46px;
}
}
@media (max-width: 767px) {
.information-list-item-section .information-items-section .information-item-img img.information-logo {
    width: 100px;
}
}
@media (max-width: 480px) {
.information-list-item-section .information-items-section {
    max-width: 100%;
    flex: 0 0 100%;
    margin-bottom: 15px;
}
.information-list-item-section .information-items-section .information-item-title h3.information-title {
    min-height: auto;
}
}
.product-label>span.label-sale{
  color: #ecb800;
  background-color: #343f49;
  border-radius: 50%;
}
/* .header-contact-box .btn-default{
  background: transparent !important;
  color: #ecb800 !important;
  border: 2px solid #ecb800 !important;
  &:hover{
    background: transparent !important;
    color: #ecb800 !important;
    border: 2px solid #ecb800 !important;
  }
} */
/* NEW HEADER CSS */
/* .responsive-grid.desktop .tg .row3 .col4 a{
  width: 225px;
  margin: 0px auto;
}
.R-TextBody span {
    color: #ffffff !important;
}
.mobile-header-menu-container{
  display: none;
}
@media only screen and (max-width: 1199px){
  .search-bar-excavator-container{
    flex-direction: column;
    row-gap: 12px;
  }
}
@media only screen and (max-width: 992px){
  .webcast-first-row{
    display: none;
  }
  .R-TextBody span {
    color: #000000 !important;
  }
  .mobile-header-menu-container{
    display: block;
  }
} */