/* Static color */
$black:              #000000;
$white:              #ffffff;
$bg-other:           #bcbcbc;
$bg-deal-section:    #e6e6e6;
$text-deal-text:     #383838;

/* Font */
{% assign font_heading = settings.header_font_1 %}
{% assign font_standard = settings.general_font_1 %}
{{ font_heading | font_face }}
{{ font_standard | font_face }}
{% assign font_heading_light = font_heading | font_modify: 'weight', '300' %}
{{ font_heading_light | font_face }}
{% assign font_heading_regular = font_heading | font_modify: 'weight', '400' %}
{{ font_heading_regular | font_face }}
{% assign font_heading_medium = font_heading | font_modify: 'weight', '500' %}
{{ font_heading_medium | font_face }}
{% assign font_heading_bold = font_heading | font_modify: 'weight', '700' %}
{{ font_heading_bold | font_face }}


$font-heading:      {{ settings.header_font_1.family }}, Roboto, Arial, {{ font_heading.fallback_families }} ;
$font-standard:     {{ settings.general_font_1.family }}, Roboto, Arial, {{ font_standard.fallback_families }};
$body-font-size:      {{settings.body_font_size}}px; 
 

$font-light:300; 
$font-regular:400;
$font-medium:500;
$font-bold: 700;
$font-black:900;

$size-largest-1: 48px;
$size-largest-2: 40px; 
$size-h1:     {{settings.heading_size_1}}px;
$size-h2:     {{settings.heading_size_2}}px;
$size-h3:     {{settings.heading_size_3}}px; 
$size-h4:     {{settings.heading_size_4}}px;
$size-h5:     {{settings.heading_size_5}}px;
$size-h6:     {{settings.heading_size_6}}px;   
$top-font-size: {{settings.top_bar_size}}px;
$product-font-size: {{settings.product_title_size}}px;
$product-price-size: {{settings.product_price_size}}px;
$product-detail-title-size: {{settings.product_detail_title_size}}px;

$font-icon      : 28px;
$font-small-icon: 22px;

/* Header */
$main-color:                  {{settings.main_color}};
$main-color-text:             {{settings.main_text_color}};
$image-height:                {{settings.image_blance_height}};
$bg-header-color:       {{settings.header_bg_color}};
$text-header-color:       {{settings.header_text_color}};
$bg-number-icon:        {{settings.bg_color_number_icon}};
$text-number-icon:        {{settings.color_number_icon}};

$topbar-bg-color: {{settings.header_topbar_bg_color}};
$topbar-color: {{settings.header_topbar_text_color}};
$header-bottom-bg-color : {{settings.header_bottom_bar_bg_color }};
$header-department-button-bg: {{settings.department_bg}};
$header-department-button-text: {{settings.department_text}};
$custom-text-color: {{ settings.custom_text }};
/* Navigation */
$nav-font-size:                 {{settings.nav_size}}px;
$nav-sub-font-size:             {{settings.nav_sub_size}}px;

$nav-link-color:                {{settings.nav_link_color}}; 
$nav-link-hover-color:          {{settings.nav_hover_color}};
$nav-link-hover-bg-color:       {{settings.nav_hover_bg_color}};
$nav-dropdown-background:       {{settings.dropdown_bg_color}}; 
$nav-dropdown-link-color:       {{settings.dropdown_item_color}}; 
$nav-dropdown-link-hover-color: {{settings.dropdown_item_color_hover}};

$vertical-nav-link-color:                {{settings.vertical_nav_link_color}}; 
$vertical-nav-link-hover-color:          {{settings.vertical_nav_hover_color}};
$vertical-nav-dropdown-background:       {{settings.vertical_dropdown_bg_color}}; 
$vertical-nav-dropdown-link-color:       {{settings.vertical_dropdown_item_color}}; 
$vertical-nav-dropdown-link-hover-color: {{settings.vertical_dropdown_item_color_hover}};

$border-main-nav:           {{settings.nav_bg_nav_link_hover}};
$label-sale-color:              {{settings.menu_sale_label_color}};
$label-sale-bg:                 {{settings.menu_sale_label_bg}};
$label-new-color:              {{settings.menu_new_label_color}};
$label-new-bg:                 {{settings.menu_new_label_bg}};
$label-hot-color:              {{settings.menu_hot_label_color}};
$label-hot-bg:                 {{settings.menu_hot_label_bg}};

/* Body */
$body-background-color:        {{settings.body_bg}};
$body-second-color:            {{settings.miscellaneous_color}};

$body-label-sale-color:      {{settings.saleoff_color}}; 
$body-label-sale-background: {{settings.saleoff_bg_color}}; 

$body-label-new-color:      {{settings.lb_new_color}}; 
$body-label-new-background: {{settings.lb_new_bg_color}};

$body-label-bp-color:      {{settings.lb_bp_color}}; 
$body-label-bp-background: {{settings.lb_bp_bg_color}}; 

$body-general-color:    {{settings.body_general_color}}; 
$body-light-color:      {{settings.body_light_color}}; 
$body-title-color:      {{settings.body_title_color}}; 
$body-link-color:       {{ settings.body_link_color }}; 
$body-border-color:     {{settings.body_border_color}}; 
$body-ratting-empty-color:{{settings.ratting_color_empty}}; 

$body-title-product:        {{settings.product_title_color}}; 
$body-price-color:          {{settings.product_price_color}}; 
$body-price-sale-color:     {{settings.product_sale_price_color}}; 
$body-price-sold-out-color: {{settings.product_sold_out_price_color}}; 

$breadcrumb-height:     {{settings.breadcrumb_height}};
$breadcrumb-bg-color:       {{settings.breadcrumb_bg_color}};

/* Footer */
$footer-background-color:  {{settings.footer_bg}}; 
$footer-static-text-color: {{ settings.footer_text_color }}; 
$footer-link-color:        {{settings.footer_color}}; 
$footer-hover-color:       {{settings.footer_color_hover}};
$footer-copyright-bg:       {{settings.footer_bg_copyright}}; 
$footer-copyright-color:    {{settings.footer_color_copyright}}; 

$button-btn1:         {{settings.btn1_bg}};
$button-btn1-txt:     {{settings.btn1_txt}}; 

$button-btn1-border:    {{settings.btn1_border}}; 
$button-hover-btn1:     {{settings.btn1_bg_hover}}; 
$button-hover-btn1-txt:   {{settings.btn1_txt_hover}};
$button-hover-btn1-border:  {{settings.btn1_border_hover}}; 

$button-btn2:         {{settings.btn2_bg}}; 
$button-btn2-txt:     {{settings.btn2_txt}}; 
$button-btn2-border:    {{settings.btn2_border}}; 
$button-hover-btn2:     {{settings.btn2_bg_hover}}; 
$button-hover-btn2-txt:   {{settings.btn2_txt_hover}}; 
$button-hover-btn2-border:  {{settings.btn2_border_hover}}; 

$popup-letter-title:  {{settings.popup_title_color}}; 
$popup-letter-subtitle:  {{settings.popup_caption_color}};

$eu-bg:           {{settings.eu_background_color}};
$eu-text-color:       {{settings.eu_text_color}};
$au-accept:         {{settings.eu_accept_bg}};
$au-accept-hover:     {{settings.eu_accept_bg_hover}};
$au-disagree:       {{settings.eu_disagree_bg}};
$au-disagree-hover:     {{settings.eu_disagree_bg_hover}};





@mixin scale($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 button1(){  
  text-align: center;      
  padding: 10px 30px;
  line-height: 27px;   
  white-space: normal;
  font-weight: $font-medium;
  font-size: $body-font-size;     
  background: $button-btn1;
  color: $button-btn1-txt;  
  border: 1px solid $button-btn1-border;   
  @include transition(all 0.35s ease 0s);    
  
  &: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;  
  white-space: normal;
  font-weight: $font-bold;
  font-size: $body-font-size;       
  background: $button-btn2;
  color: $button-btn2-txt;  
  border: 1px solid $button-btn2-border;  
  
  @include transition(all 0.35s ease 0s);    
  &:hover{
    background: $button-hover-btn2;       
    text-decoration: none;
    color: $button-hover-btn2-txt;
    border-color: $button-hover-btn2-border;
  }
}
@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  background-color: transparent;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
  zoom: 1;
}
@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; 
  -ms-transform: $shadow; // IE9+
  -o-transform: $shadow;
  box-shadow: $shadow;
}
@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 )/*: 0.5 */ {
  opacity: $value; 
}
@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 transform($transforms) {
  -moz-transform: $transforms;
  -o-transform: $transforms;
  -ms-transform: $transforms;
  -webkit-transform: $transforms;
  transform: $transforms;
}
@mixin rotate ($deg) {
  @include transform(rotate(#{$deg}deg));
} 
@mixin rotateX($degree) {
  -moz-transform:    rotateX($degree);
  -webkit-transform: rotateX($degree);
  -o-transform:      rotateX($degree);
  -ms-transform:      rotateX($degree);
  transform:         rotateX($degree);
}
@mixin transition($transition...) {
  -moz-transition:    $transition;
  -o-transition:      $transition;
  -webkit-transition: $transition;
  transition:         $transition;
}
@mixin transform-origin($origin) {
  moz-transform-origin:     $origin;
  -o-transform-origin: $origin;
  -ms-transform-origin: $origin;
  -webkit-transform-origin: $origin;
  transform-origin:   $origin;
}
@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &:-moz-placeholder           {@content}
  &::-moz-placeholder          {@content}
  &:-ms-input-placeholder      {@content}  
}
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin flex($values) {
  -webkit-box-flex: $values;
     -moz-box-flex: $values;
      -webkit-flex: $values;
  	  -ms-flex: $values;
  	      flex: $values;
}
@mixin border-radius-reset {
  @include border-radius(0px, 0px, 0px, 0px);
}
@mixin border-radius-50 {
  @include border-radius(50px, 50px, 50px, 50px);
}
@mixin border-radius-20 {
  @include border-radius(20px, 20px, 20px, 20px);
}
@mixin border-radius-25 {
  @include border-radius(25px, 25px, 25px, 25px);
}
@mixin border-radius-10 {
  @include border-radius(10px, 10px, 10px, 10px);
}
@mixin border-radius-circle {
  @include border-radius(50%, 50%, 50%, 50%);
}
@mixin preserve-3d {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
@mixin before {
  @include ab(0, 0, n, n);
  @include transition(all 0.35s ease-in-out 0s);
  background-color: rgba($white, 0.1);    
  content: '';
  width: 0%;
  height: 100%; 
  z-index: 1;
}
@mixin after {
  @include ab(0, n, n, 0);
  @include transition(all 0.35s ease-in-out 0s);
  background-color: rgba($white, 0.1);    
  content: '';
  width: 0%;
  height: 100%; 
  z-index: 1;
}
@mixin before-after-hover {  
  width: 100%;
  height: 100%;  
}
@mixin close-btn {
  content: "\e973";
  font-family: "arenafont";
  font-size: $body-font-size;
  color: inherit;
  display: block;
  line-height: 45px;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
@mixin width-btn {
  width: 35px;
  height: 35px;
  line-height: 35px;  
}
@mixin width-btn-1 {
  width: 45px;
  height: 45px;
  line-height: 45px;  
  background: $main-color;
}
@mixin swatch-product {    
  .swatch {
    margin: 15px 0 0;
    position: relative;      
    .header {
      padding: 0 10px 0 0;
      display: block;     
      margin: 0;
      line-height: 34px;                                            
      color: $body-title-color;     
      float: left;
      text-transform: uppercase;
      font-weight: $font-medium;
      width: 110px;           
    }
    .swatch-element {
      margin: 0; padding: 0;        
      float: left;
      label {
        position: relative;
        background: transparent;                       
        margin: 0px 5px 5px 0; 
        text-align: center;
        cursor: pointer;     
        min-width: 35px !important;
        height: 35px !important;
        padding: 5px;
        line-height: 23px;     
        color: $body-title-color;       
        font-size: $body-font-size - 1px;
        font-weight : $font-medium;
        text-transform: none;      
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: cover;
        border: 1px solid $body-border-color;
        position: relative;
        @include border-radius-50;
        @include box-shadow(0 0 0 0px #ffffff inset);
        @include transition(all 0.35s ease 0s);          
      }
      input:checked + label {
        box-shadow: none;          
        cursor: default;   
        border-color: $main-color;
        color: $main-color;         
        @include box-shadow(0 0 0 0px #ffffff inset);
      }       
      &:hover { 
        @media (min-width: 1025px) {
          label{           
            border-color: $main-color;
            color: $main-color;
            @include box-shadow(0 0 0 0px #ffffff inset); 
          }
        }
      }
      &.soldout {
        label {
          cursor: default;
          background-color: transparent !important;
          color: $body-title-color !important; 
          border-color: $body-border-color !important;
        } 
        &:hover {
          @media (min-width: 1025px) {
            label {
              cursor: default;
              background-color: transparent !important;
              color: $main-color;  
            }
          }
        }
      }               
    }
    &.color {
      .swatch-element {
          label {
            &:after {
              content: '';
              width: 100%;
              height: 100%;
              background: $white;
              margin: 0px auto;
              @include ab(50%, 50%, n, n);
              @include translate(-50%, -50%);
              @include border-radius-circle;
              @include opacity(0);
              @include transition(all 0.35s ease 0s);
            }
          }
          input:checked + label {
            &:after {
              width: 10px;
              height: 10px;
              @include opacity(1);
            }
          }
          &.white {
            label {
              &:after {
                background: $black;
              }
            }
          }
          &:hover {
            @media (min-width: 1025px) {
                label {
                  &:after {
                  width: 10px;
                  height: 10px;
                  @include opacity(1);
                }
                }
            }
          }
      }
    }
    &.size {            
      .swatch-element {
        label {         
          @include border-radius-reset;
          background: $white;
          @include box-shadow(0 0 0 0 $white);            
        }     
        &:hover {
          @media (min-width: 1025px) {
            label {                    
              @include box-shadow(0 0 0 0 $white);
            }
          }            
        }
      }        
    }
    &:last-child {
      margin-bottom: 15px;
    }
  }
}

@mixin icons-number {
  @include ab(-15px, n, n, -10px);
  @include border-radius-circle;
  width: 18px;
  height: 18px;
  line-height: 18px;
  background: $bg-number-icon;
  color: $text-number-icon;
  text-align: center;
  font-size: 12px;
  font-weight : $font-medium;
}

@mixin hover-icons-number {
  @media (min-width: 1025px) { 
  -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob;
  animation-name: hvr-icon-bob-float, hvr-icon-bob;
  -webkit-animation-duration: .3s, .75s;
  animation-duration: .3s, 0.75s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;   
  }
}
@mixin padding-carousel {   
  .owl-stage-outer {
    // padding: 20px 0 40px;
    // margin-bottom: -40px;     
    @media (max-width: 1024px) { 
      padding: 0;
      margin-bottom: 0;     
    }
  }
  .owl-dots {
    @media (min-width: 1025px) {
      bottom: 28px;
    }
  }
}
@mixin title-wrapper {
  padding-bottom: 20px;    
  line-height: 32px; 
  position: relative;
}
@mixin dropdown-effect {
  visibility: hidden;
    z-index: -99;
    display: block;
    @include translate(10px, 0);  
    @include opacity(0);
    @include transition(all 0.35s ease 0s);
}
@mixin dropdown-effect-hover {
  @include opacity(1);
    @include translate(0, 0);
    visibility: visible;
    z-index: 9999;
}
@mixin clearfix() {
  &:before,
  &:after {
    display: block;
    width: 100%;
    content: "";
    clear: both;
  }
}
@mixin control-product-slider{
  .owl-controls{
      .owl-nav{
          .owl-prev,.owl-next{
            width: 45px;
            height:30px;
            span{
              line-height:30px;
              &:before{
                font-size:$size-h4;
                color: #5d5e5e;
              }
            }
          }
          .owl-next{
            border-left:1px solid #e4e4e4;
          }
          .owl-prev{
            border-right:1px solid #e4e4e4;
          }
      }
      @media(max-width:991px){
        .owl-nav{
          top: -58px;
          .owl-prev,.owl-next{
            width: 40px;
            height:40px;
            span{
              line-height:40px;
            }
          }
        }
      }
  }
}
{% 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}
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@-webkit-keyframes hvr-icon-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }  
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes hvr-icon-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  } 
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-webkit-keyframes hvr-icon-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-icon-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@-webkit-keyframes move {
  0% {
      background-position: 0 0;
  }
  100% {
      background-position: 40px 0;
  }
}
@-moz-keyframes move {
  0% {
      background-position: 0 0;
  }
  100% {
      background-position: 40px 0;
  }
}
@-ms-keyframes move {
  0% {
      background-position: 0 0;
  }
  100% {
      background-position: 40px 0;
  }
}
@-o-keyframes move {
  0% {
      background-position: 0 0;
  }
  100% {
      background-position: 40px 0;
  }
}
@keyframes move {
  0% {
      background-position: 0 0;
  }
  100% {
      background-position: 40px 0;
  }
}
{% comment %} -------------- style.scss --------------------{% endcomment %}

/*============================================================================
  Fast Tap
  enables no-delay taps (FastClick-esque) on supporting browsers
==============================================================================*/
a,
button,
[role="button"],
input,
label,
select,
textarea {
  touch-action: manipulation;
}
/*currency----------------------------*/
{% if settings.show_flag_currencies %}
{% assign supported_codes = settings.supported_currencies | split: ' ' %}
{% for code in supported_codes %}
.flag-{{code|downcase}}{  
  background-image: url({{'flags.png' | asset_url }});  
  width: 16px;
  height: 11px;
  display:inline-block;
  margin-right: 3px;
}
{% endfor %}
{% endif %}
//currency flag
.flag-aed{background-position:-5px -5px}.flag-afn{background-position:-31px -5px}.flag-all{background-position:-57px -5px}.flag-amd{background-position:-83px -5px}.flag-ang{background-position:-109px -5px}.flag-aoa{background-position:-135px -5px}.flag-ars{background-position:-161px -5px}.flag-aud{background-position:-187px -5px}.flag-awg{background-position:-213px -5px}.flag-azn{background-position:-239px -5px}.flag-bam{background-position:-265px -5px}.flag-bbd{background-position:-5px -26px}.flag-bdt{background-position:-31px -26px}.flag-bgn{background-position:-57px -26px}.flag-bhd{background-position:-83px -26px}.flag-bif{background-position:-109px -26px}.flag-bmd{background-position:-135px -26px}.flag-bnd{background-position:-161px -26px}.flag-bob{background-position:-187px -26px}.flag-brl{background-position:-213px -26px}.flag-bsd{background-position:-239px -26px}.flag-btn{background-position:-265px -26px}.flag-bwp{background-position:-5px -47px}.flag-byn{background-position:-31px -47px}.flag-bzd{background-position:-57px -47px}.flag-cad{background-position:-83px -47px}.flag-cdf{background-position:-109px -47px}.flag-chf{background-position:-135px -47px}.flag-clp{background-position:-161px -47px}.flag-cny{background-position:-187px -47px}.flag-cop{background-position:-213px -47px}.flag-crc{background-position:-239px -47px}.flag-cup{background-position:-265px -47px}.flag-cve{background-position:-5px -68px}.flag-czk{background-position:-31px -68px}.flag-djf{background-position:-57px -68px}.flag-dkk{background-position:-83px -68px}.flag-dop{background-position:-109px -68px}.flag-dzd{background-position:-135px -68px}.flag-egp{background-position:-161px -68px}.flag-ern{background-position:-187px -68px}.flag-etb{background-position:-213px -68px}.flag-eur{background-position:-239px -68px}.flag-fjd{background-position:-265px -68px}.flag-fkp{background-position:-5px -89px}.flag-gbp{background-position:-31px -89px}.flag-gel{background-position:-57px -89px}.flag-ghs{background-position:-83px -89px}.flag-gip{background-position:-109px -89px}.flag-gmd{background-position:-135px -89px}.flag-gnf{background-position:-161px -89px}.flag-gtq{background-position:-187px -89px}.flag-gyd{background-position:-213px -89px}.flag-hkd{background-position:-239px -89px}.flag-hnl{background-position:-265px -89px}.flag-hrk{background-position:-5px -110px}.flag-htg{background-position:-31px -110px}.flag-huf{background-position:-57px -110px}.flag-idr{background-position:-83px -110px}.flag-ils{background-position:-109px -110px}.flag-inr{background-position:-135px -110px}.flag-iqd{background-position:-161px -110px}.flag-irr{background-position:-187px -110px}.flag-isk{background-position:-213px -110px}.flag-jmd{background-position:-239px -110px}.flag-jod{background-position:-265px -110px}.flag-jpy{background-position:-5px -131px}.flag-kes{background-position:-31px -131px}.flag-kgs{background-position:-57px -131px}.flag-khr{background-position:-83px -131px}.flag-kmf{background-position:-109px -131px}.flag-kpw{background-position:-135px -131px}.flag-krw{background-position:-161px -131px}.flag-kwd{background-position:-187px -131px}.flag-kyd{background-position:-213px -131px}.flag-kzt{background-position:-239px -131px}.flag-lak{background-position:-265px -131px}.flag-lbp{background-position:-5px -152px}.flag-lkr{background-position:-31px -152px}.flag-lrd{background-position:-57px -152px}.flag-ltl{background-position:-83px -152px}.flag-lyd{background-position:-109px -152px}.flag-mad{background-position:-135px -152px}.flag-mdl{background-position:-161px -152px}.flag-mga{background-position:-187px -152px}.flag-mkd{background-position:-213px -152px}.flag-mmk{background-position:-239px -152px}.flag-mnt{background-position:-265px -152px}.flag-mop{background-position:-5px -173px}.flag-mro{background-position:-31px -173px}.flag-mur{background-position:-57px -173px}.flag-mvr{background-position:-83px -173px}.flag-mwk{background-position:-109px -173px}.flag-mxn{background-position:-135px -173px}.flag-myr{background-position:-161px -173px}.flag-mzn{background-position:-187px -173px}.flag-nad{background-position:-213px -173px}.flag-ngn{background-position:-239px -173px}.flag-nio{background-position:-265px -173px}.flag-nok{background-position:-5px -194px}.flag-npr{background-position:-31px -194px}.flag-nzd{background-position:-57px -194px}.flag-omr{background-position:-83px -194px}.flag-pen{background-position:-109px -194px}.flag-pgk{background-position:-135px -194px}.flag-php{background-position:-161px -194px}.flag-pkr{background-position:-187px -194px}.flag-pln{background-position:-213px -194px}.flag-pyg{background-position:-239px -194px}.flag-qar{background-position:-265px -194px}.flag-ron{background-position:-5px -215px}.flag-rsd{background-position:-31px -215px}.flag-rub{background-position:-57px -215px}.flag-rwf{background-position:-83px -215px}.flag-sar{background-position:-109px -215px}.flag-sbd{background-position:-135px -215px}.flag-scr{background-position:-161px -215px}.flag-sek{background-position:-187px -215px}.flag-sgd{background-position:-213px -215px}.flag-shp{background-position:-239px -215px}.flag-sll{background-position:-265px -215px}.flag-sos{background-position:-5px -236px}.flag-srd{background-position:-31px -236px}.flag-std{background-position:-57px -236px}.flag-svc{background-position:-83px -236px}.flag-syp{background-position:-109px -236px}.flag-szl{background-position:-135px -236px}.flag-thb{background-position:-161px -236px}.flag-tjs{background-position:-187px -236px}.flag-tnd{background-position:-213px -236px}.flag-top{background-position:-239px -236px}.flag-try{background-position:-265px -236px}.flag-ttd{background-position:-5px -257px}.flag-twd{background-position:-31px -257px}.flag-tzs{background-position:-57px -257px}.flag-uah{background-position:-83px -257px}.flag-ugx{background-position:-109px -257px}.flag-usd{background-position:-135px -257px}.flag-uyu{background-position:-161px -257px}.flag-uzs{background-position:-187px -257px}.flag-vef{background-position:-213px -257px}.flag-vnd{background-position:-239px -257px}.flag-vuv{background-position:-265px -257px}.flag-wst{background-position:-291px -5px}.flag-xaf{background-position:-291px -26px}.flag-xcd{background-position:-291px -47px}.flag-xof{background-position:-291px -68px}.flag-xpf{background-position:-291px -89px}.flag-yer{background-position:-291px -110px}.flag-zar{background-position:-291px -131px}.flag-zmw{background-position:-291px -152px}


html { -webkit-font-smoothing: antialiased; height: 100%;}
body {    
  font-family: $font-standard; 
  font-size: $body-font-size;
  line-height: 1.3;
  color: $body-general-color;
  font-weight: 400;
  position: relative; height: 100%;   
  overflow-x: hidden;
  top: 0 !important;
  > .skiptranslate {
  	display: none;
  }
  &.layout_loading{
    position: relative;
    overflow: hidden;
    &:before{
        content: '';
        z-index: 99999999999;
        @include ab(50%,50%,n,n);
        position: fixed;
        @include translate(-50%,-50%);
        width: 100%;
        height: 100%;
        @include transition(all 0.5s ease);
        background-color: #fff;
        @include opacity(1);
        visibility: visible;
    }
    &.layout_loaded{
        overflow: auto;
        &:before{
            @include opacity(0);
            visibility: hidden;
            width: 0;
            height: 0;   
        }
    }
  }  
}
#page-body{  
  height: 100%; 
  position: relative;
  left: 0;
  background: $body-background-color;
  @media (max-width: 991px) {
    padding-bottom: 50px;
  }
}
i.left {margin-right: 7px;}
i.right {margin-left: 7px;}
html, button, input, select, textarea { 
  font-size: $body-font-size; 
  font-family: $font-standard; 
  line-height: 1.75em;
  font-style: normal;  
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  resize: none;
}
input, textarea, select, input.form-control, textarea.form-control{  
  &:focus {
    @include box-shadow(0 0 0px $main-color);
    outline:none; 
    border-bottom: 1px solid $body-border-color;
    background: none;
  }
}
.clearfix {
  clear: both;
}
html .cart-opened {
  overflow: hidden;
}
.cart-opened #page-body{
  cursor: url({{'toggle_close.png' | asset_url}}), progress;
  position: relative;
  left:0px;
}
.cart-opened .header-content, .cart-opened .mobile-version {
  left: 0px;
}

/*Search Sidebar*/
html.search-opened,
html .filter-opened {
  overflow: hidden;
}
.search-opened #page-body {
  cursor: url({{'toggle_close.png' | asset_url}}), progress;
  position: relative;
  left: 0px;
}
.search-opened .header-content, .search-opened .mobile-version{
  left: 0px;
}
body.search-opened,
.sidebar-opened,
.menu-opened,
.order-sidebar-opened ,.cart-opened{  
  #page-body {

    @media(max-width: 991px){
      position: static;
      height: 100vh;
      overflow: hidden;
    }
    &:before {
      background: rgba(0,0,0,0.3);
      content: "" !important;
      display: inline-block !important;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99999;  
    }
  }
}

/*  Base HTML tags -------------------------------------------------- */
body.cart-loading .loading { display: block!important; }
/*  Forms -------------------------- */
.visible-phone {display: none;}    

fieldset, legend {  border: none;}

.input-append input[class*="span"],
.input-append .uneditable-input[class*="span"],
.input-prepend input[class*="span"],
.input-prepend .uneditable-input[class*="span"],
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"],
.row-fluid .input-prepend [class*="span"],
.row-fluid .input-append [class*="span"] { display: inline-block;padding: 1.384615385em 0.615384615em;}

.row-fluid textarea[class*="span"] { padding-top: 0.5em; padding-bottom: 0.5em;}

input[type="image"] {width: auto;}
textarea{ border: none;}

input:-webkit-autofill {
  background: transparent;  
}
input[type="checkbox"] { vertical-align: top; margin-right: 10px; }

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="color"],
.uneditable-input { 
  margin: 0;
  padding: 15px 0;  
  -moz-appearance:textfield;  
  -webkit-appearance:textfield;     
  -webkit-appearance: none;
  color: $body-light-color;
}
textarea,
textarea.form-control {  
  @include box-shadow(inset 0 0 0 $white);
  background-repeat: no-repeat;
  resize: none;
  background-attachment: fixed;  
  background: $white;
  border: 1px solid $body-border-color;  
  -moz-appearance:textfield;  
  -webkit-appearance:textfield;     
  -webkit-appearance: none;  
  padding-left: 15px;
  padding-right: 15px;
  
  &:focus {
    border-color: $main-color;
    @include  box-shadow(0 0 0px 1000px white inset);
  }
}
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {     
  height: 41px;  
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-size: $body-font-size;
  background: $white;
  padding: 13px 15px;   
  line-height: 1.6;   
  border: 1px solid $body-border-color; 
  @include  box-shadow(0 0 0px 0px white inset);
  &:focus {
    border-color: $main-color;
    @include  box-shadow(0 0 0px 1000px white inset);
  }
}
input[type="text"]:-webkit-autofill,
input[type="email"]:-webkit-autofill,
input[type="password"]:-webkit-autofill {
  @include  box-shadow(0 0 0px 1000px white inset);
}
select {
  line-height: 45px;
  padding: 0 30px 0 15px; 
  height: 47px;     
  /* Remove background default of seclect*/
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: none; 
  border: 1px solid $body-border-color;
  font-size: $body-font-size;
  color: $body-light-color;

  @include box-shadow(inset 0 0 0 #fff);   
  &:focus {
    border-color: $main-color;
  }
  @media screen and (min-width:0\0) {
    padding-right: 0;
    backgorund: none !important;
  }
}
select::-ms-expand {
  display: none;
}
input[type="number"] {
  -moz-appearance:textfield;  
  -webkit-appearance:textfield;     
}

button {
  outline: none;
  &:focus {
    outline: none;
  }
}
.btn {
  &.focus, &:focus, &:hover {
    outline: none;
  }
}
label { margin-bottom: 7px; font-weight: 400; }
label em { color: #f1152f; font-weight: 400; font-style: normal; margin-left: 3px; }
.form-actions { background: none; border: none;  padding: 20px 0 0 0;}
.alert ul { margin-bottom: 0;}
.alert > p, .alert > ul{ margin: 0; }
ul { 
  padding: 0; 
  list-style: disc inside none; 
}
ol { 
  padding: 0; 
  list-style: decimal inside none;  
}
ul ul, ul ol, ol ol, ol ul {  padding-left: 10px;}
.list-inline {
  margin: 0;
  > li {
    padding: 0;
    margin: 0;
    display: inline-block;
  }
}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.req {
  color: $body-title-color;
}
.form-success { border: 1px solid #c8d9b9; margin-bottom: 20px; padding: 5px 20px 5px; }

/*  Images -------------------------- */
img { 
  max-width: 100%; height: auto;  border: 0; 
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; 
  -ms-transform: translateZ(0); 
  -webkit-transform: translateZ(0); 
  transform: translateZ(0);  
  vertical-align: middle;
}
.image { 
  max-width: 100%;  
  height: auto;  
  border: 0;    
  overflow: hidden;
  > a {
    display: block;
    position: relative;
    text-align: center;    
  }  
  &.crop-circle {
    > a {
      @include border-radius-circle;
      &:after,
      &:before {
        content: none;
      }
      img {
        @include border-radius-circle;  
        @include transition(all 0.35s ease-in-out 0s);
      }     
    }    
  }
}
/*  Typography -------------------------- */

h1, h2, h3, h4, h5, h6,.largest-1,.largest-2 {       
  margin: 0;  
  padding: 0; 
  color: $body-title-color;  
  line-height: 1.1;  
  font-family: $font-heading;
  font-weight: $font-medium;
}
.largest-1{
  font-size: $size-largest-1;

}
.largest-2{
  font-size: $size-largest-2;
  
}
h1, .h1 {
  font-size: $size-h1;      
}
h2, .h2 {
  font-size: $size-h2;  
}
h3, .h3 {
  font-size: $size-h3;   
}
h4, .h4 {
  font-size: $size-h4;   
}
h5, .h5 {
  font-size: $size-h5;    
}
h6, .h6 {
  font-size: $size-h6;    
}
.largest-1,.largest-2,.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0;  
  line-height: 1.1; 
  color: $body-title-color;  
  font-family: $font-heading;
}
.page-title {
  font-size: $size-h2;  
  font-family: $font-heading;     
}
p {
  margin: 0 0 20px;
  line-height: 22px;  
}

/*  Links -------------------------- */
a { 
  @include transition(all 0.35s ease 0s); 
  outline: none; 
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: $body-link-color;
  text-decoration: none;
  &:focus { text-decoration: none; color: $main-color; outline: none;}  
  &:hover { outline: none; color: $main-color; text-decoration: none;}
}
.text-link {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: $main-color;
  text-decoration: none;
}
.text-link:hover, 
.text-link:focus {
  @media (min-width: 1025px) {
    color: $main-color;

  }
}
/*  Global classes -------------------------------------------------- */
.no-style { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
.tal { text-align: left; }
.tar { text-align: right; }
.tac { text-align: center;}
.fl { float: left; }
.fr { float: right; }
.fn { float: none; }
.cl { clear: left; }
.cr { clear: right; }
.cb { clear: both; }
.hide,
.hidden {display: none !important;}
.move {cursor: move;}

/*  Formatting ------------------------------------------ */
.hidden { display: none;}
.move { cursor: move;}
.section-title {  display: none;}
.owl-theme .owl-controls .owl-buttons > div { position: absolute;  }

/* menu ---------------------------------*/
.navbar {
  min-height: 10px;
  border: none;
  margin: 0;
  padding: 0;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}
body.menu-opened,
html.menu-opened {
  overflow: hidden;
}
.m-close  {   
  text-align: center;
  border: none;
  background: $body-second-color;
  z-index: 999; 
  cursor: pointer;
  @include opacity(0);
  @include transition(all 0.35s ease 0s);
  @include ab(n, n, 15px, 15px);
  @include width-btn;
  @include border-radius(3px,3px,3px,3px);
  i {
    &:before {
      @include close-btn;       
      @include transition(all 0.35s ease 0s);           
      line-height: 35px;
    } 
  }
  &:hover {
    i {
      &:before {
        color: $main-color;
      }
    }
  }
} 


#title-menu{
  height: 100%;
  width: 100%;
  text-align: center;
}
.main-nav > li {  
  position: relative;  
  &.mega-menu {
    position: static;
  }
}
.dropdown-menu > li.dropdown-submenu {
  > .dropdown-menu { 
    left: 100%; 
    top: 0px;      
    font-size: $body-font-size;
    @include dropdown-effect;   
  }
  &.flyout-left{
    > .dropdown-menu{
      left: auto;
      right: 100%;
    }
    > .expand{
      @media(min-width: 992px){
        right: auto;
        left: 0;
        transform: rotate(180deg);
        transform-origin: 50 50;
      }
    }
  }
  &:hover {
    @media (min-width: 992px) {
      > .dropdown-menu {
        @include dropdown-effect-hover;
      }      
    }
  }
}
.dropdown-menu > .active > a, 
.dropdown-menu > .active > a:hover, 
.dropdown-menu > .active > a:focus { 
  background-color: transparent; 
  color: $nav-dropdown-link-color;
}
.dropdown-menu {
  float: none;
  text-align: left;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 245px;
  z-index: 999;
  padding: 0;
  margin: 0;
  border: 1px solid $body-border-color;
  background: $white;
  @include border-radius-reset;
  @include box-shadow(0 6px 12px rgba($black, 0.176));  
  @media (max-width: 1199px) and (min-width: 992px) {
  	width: 235px;
  }
  > li {
    > a {
      padding: 3px 20px;      
      line-height: 1.42857143;
      &:hover,
      &:focus {
        background-color: transparent; 
        color: $nav-dropdown-link-color; 
      }
    }
  }
}
.main-nav {
  .mega-menu .dropdown-menu-sub {
    position: static;
    padding: 0 ;
  }
  .dropdown-menu {
    padding: 15px 0;
    width: 270px;    
    li{
      padding: 0 20px;      
      a { 
        white-space: normal;        
        padding: 3px 0px;
        margin: 0;              
        position: relative;  
        text-transform: none;  
        font-size: $nav-sub-font-size;       
      }
    }
  } 
}
.new-loading.cart-loading,
.loading { 
  background-image: url({{"loading.gif" | asset_url}});
  background-size: 100%; 
  background-repeat: no-repeat;
  background-position: center center;
  position: fixed;
  top: 50%!important;
  bottom: auto;
  left: 50%;
  right: auto;
  width: 80px;
  height: 80px;  
  overflow: hidden;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  text-indent: -999em;  
  z-index: 99999;  
  @include translate(-50%, -50%);
}
/*Fixed CSS*/
#body-content {      
  width: 100%; 
  margin: 0px auto;
  padding: 0;
  &:after,
  &:before {
    content: '';
    display: table;
  }    
}
.zoomContainer {
  z-index: 1;
  overflow: hidden;
  @media (max-width: 1024px) {
    display: none !important; z-index: 0;
  }
}
.modal-open .zoomContainer {
  z-index: 99;
}
.add-to-cart[disabled],
.add-to-wishlist.disabled {
  cursor: not-allowed;
  pointer-events: none;
  @include opacity(1);
  background: $button-btn1 !important;
  border-color: $button-btn1-border !important;
  color: $button-btn1-txt !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  position: relative;
  &:before {
    content: none !important;    
  }
  .demo-icon {
    display: none;    
  }
}
#page-body.boxed {
  .header-content {
    position: relative;
  }
  .swiper-container-horizontal .swiper-pagination .swiper-pagination-bullet {
    width: 13px;
    height: 13px;
    &:before {
      content: none;
    }
    &.swiper-pagination-bullet-active,
    &:hover {
      @include box-shadow(0 0 0 $white);
      @include transparent($white, 0.5);
    }
  }
}
.boxed-wrapper {
  {% if settings.boxed_mode_bg == 'image' and settings.body_bg_image.jpg   %}
  background-image: url({{ 'body_bg_image.jpg' | asset_url}});
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%; 
  {% endif %}  
  background-color: {{settings.body_bg_color}};  
  overflow: hidden;
}



/* header ----------------*/
.header-icons {
  .waiting {       
    padding: 0 !important;
    background-color: transparent !important; 
    height: 100%;
  }
  img {
    -webkit-backface-visibility: hidden;
    max-width: 20px;
  }
  > ul {
    list-style: none;
    display: flex;
    > li {
      display: inline-block;
      margin: 0 0 0 15%;
      @media (max-width: 1199px) and (min-width: 992px) {
        margin-left: 10%;
      }
      > a {
        color: $text-header-color;
        line-height: 42px;
        display: block;
        > i {
          font-size: $font-small-icon;
        }    
      }           
      .wishlist-icon {
        position: relative;
        i {
          font-size: $font-small-icon;
        }
        .number {
          @include icons-number;
        }
        &:hover {
          .number {
            @include hover-icons-number;
          }
        }
      }
      &.compare-target {
        i {
          font-size: $font-small-icon;
        }
        .compare-icon {
          position: relative;         
          .number {
            @include icons-number;
          }
          &:hover {
            .number {
              @include hover-icons-number;
          }
          }
        }
      }
      &.currency {
        position: relative;
        .currencies {
          @include ab(100%, 0, n, n);
          width: auto;  
          min-width: 65px;
          padding: 5px 0;
          margin: 0;
          text-align: left;
          list-style: none;
          background: $white;
          @include border-radius-reset;
          @include box-shadow(0 0px 6px rgba($black, 0.3));
          visibility: hidden;
          z-index: -99;       
          @include translate(0, 20px);  
          @include opacity(0);
          @include transition(all 0.35s ease 0s); 
          &:before {
            content: '';
            height: 2px;
            background: $main-color;
            @include ab(-1px, -1px, n, -1px);
          } 
          > li {
            display: block;
            padding: 0 15px;            
            > a {
              display: block;
              white-space: nowrap;
              line-height: 1.42857143;
              color: $body-general-color;
              i {
                display: inline-block;
                margin-right: 5px;
              }
              span {
                font-size: $body-font-size - 2px;
              }
              &:hover {
                color: $main-color;
              }
            }
          }
        }
        .dropdown-toggle {
          &:after {
            content: none;
          }
        }
        &.opened {
          .currencies {
            @include opacity(1);
            @include translate(0, 0);
            visibility: visible;
            z-index: 99;
          }
        }
      }
      &.top-cart-holder {            
        > .cart-target  {                
          height: 100%;
          width: 100%;
          position: relative;               
          > .basket {                                    
            height: 100%; 
            display: table;
            vertical-align:middle;
            max-height: 42px;
            position: relative;
            text-align: left;
            color: $text-header-color;    
            padding-left: 55px !important;             
            &:after {
              content: none;
            }                 
            > i {
              font-size: 30px;;
              margin-right: 10px;
              @include ab(50%,0,n,n);
              display: table-cell;
              @include translate(0,-50%);
            }  
            &>span{
              display: table-row;
              font-size: $body-font-size - 1px;
            }                              
            .number {                            
              font-weight: $font-medium;    
              display: block;
              padding-top:4px;    
              font-size: $body-font-size + 1px;      
            }
            .n-item {
              @include icons-number;
              right: auto;     
              top: 0;         
              left: 30px;
            }   
            &:hover {
               .n-item {
               @include hover-icons-number;          
               }            
            }         
          }      
          &.opened {
            .cart-dd {
              @include dropdown-effect-hover;
            }
          }      
        }   
        &:hover {
          @media (min-width: 1025px) {
            .cart-dd {
              @include dropdown-effect-hover;
            }
          }
        }
      } 
      &:first-child {
        margin-left: 0 !important;
        flex-grow: 1;
        text-align: right;
      }
    }
  }
}
.header-navigation {
  background-color: $header-bottom-bg-color;
  .table-row {  
    @media (min-width: 992px) {
      position: relative;  
      display: table;
      width: 100%;  
      vertical-align: top;            
    }
    .vertical-menu {
      @media (min-width: 1200px) {
        width: 24.3%;
      }
      @media (max-width: 1199px) and (min-width: 992px) {
        width: 24.22%;
      }
      @media (min-width: 992px) {
        display: table-cell;        
        
        vertical-align: middle;
      }
      .navigation {
        position: relative;
        .head {
          @include transition(all 0.35s ease 0s);
          background: $header-department-button-bg;
          color: $header-department-button-text;
          padding: 12.5px 20px;
          line-height: 25px;
          font-weight: $font-medium;
          text-transform: uppercase;      
          display: block;
          position: relative;  
          letter-spacing: 0.25px;
          text-align: center;
          height: 50px;
          cursor: pointer;
          .demo-icon {
            margin: 0 10px 0 0;
            @include ab(50%,20px,n,n);
            @include translate(0,-50%);
            font-size: 18px;
          }
          &:before{
            content: '\f004';
            font-size: $body-font-size - 2;
            font-family: 'arenafont';
            @include ab(50%,n,n,20px);
            @include translate(0,-50%);
          }
        }
        .navbar {         
          @include dropdown-effect;
          @include ab(100%, 0, n, n);  
          @include translate(0, 10px);      
          width: 100%;
          &.opened {
            @include dropdown-effect-hover;
            @include translate(0, 0);                   
            &:before {
              content: none;
            }
          }                                             
        }       
      }
    }
    .wrap-horizontal-menu {
      position: relative;
      @media (min-width: 992px) {
        display: table-cell;
        vertical-align: middle;
        padding-left: 15px;
        .horizontal-menu {
          display: inline-block;
          float: left;
        }       
      }
      .shipping-text {
        @media (min-width: 1025px) {
          float: right;
          line-height: 25px;
          padding: 10px 0;
          color: $body-title-color;         
        }
        @media (max-width: 1199px) {
          display: none;
        }
      }
    }
    .custom-text{
      display: table-cell;        
      vertical-align: middle;
      text-align: right;
      white-space: nowrap;
      font-weight: $font-medium; 
      padding: 0 15px;
      @include transition(all 0.35s ease);
      color: $custom-text-color;
      @media(max-width: 1199px){
        display: none;
      }
      &:hover{
        background: $header-department-button-bg;
        a{color: $header-department-button-text;}
      }
    }
  }
}
.header-content {   
  padding: 0;  
  margin: 0;     
  position: relative;  
  
  @media (max-width: 991px) {
    z-index: 9999;
    background: $main-color;
  }
  .layout-full {    
    margin: 0px auto;  
    > div {
      padding-left: 15px;
      padding-right: 15px;                           
    } 
    .header-main,
    .header-navigation {
        .table-row,
        .horizontal-menu {
          margin: 0px auto;
          max-width: 1400px;
        }
    }              
  }  
  .header-container {
    background: $bg-header-color;
    &.layout-boxed {
      margin: 0px auto;     
	    &.style-2 {         
	      .header-navigation {	        
	        padding: 0 15px;
	        background: none;
	        margin: 0 auto;	        
          @media (min-width: 767px) {
            width: 100%;
          }
          @media (min-width: 768px) {
            max-width: 760px;
          }
          @media (min-width: 992px) {
            max-width: 980px;
          }
          @media (min-width: 1200px) {
            max-width: 1200px;
          }
          .container {
            padding: 0;
            background: $main-color;
            @include border-radius-10;
          }
	        .table-row .vertical-menu .navigation .head {
	          @include border-radius(10px, 0, 0, 10px);
	          &.opened {
	            @include border-radius(10px, 0, 0, 0);
	          }
	        }
	      }
	      .header-icons {
	        padding-right: 15px;
	      }
	    }
    }
    @media (max-width: 991px) {
      @include box-shadow(0 0px 8px rgba(#c9c9c9, 0.75));
    }
  }
  .full-width{
    &>div{
      padding-left: 15px;
      padding-right: 15px;
    }
  }
  .header-top{
      background-color: $topbar-bg-color;
      color : $topbar-color;
      font-size: $top-font-size;
      a{
        color : $topbar-color;
      }
  }
  .topbar-menu{
    ul li{
      padding : 13px 10px;
      text-transform: uppercase;
      &:nth-child(1){
        padding-left:0;
      }
      a{
        @include opacity(.4);
        &:hover{
          @include opacity(1);
        }
      }
    }
  }
  .header-top .row>div:nth-last-child(1){
    display: flex;
    align-items:center;
    text-transform: uppercase;
  }
  .currency {
    position: relative;
    padding-right: 15px; 
    &>span{
      opacity: .4;
      margin-right:7px;
      @media(max-width: 1200px){
        display: none;
      }
    }
    .currency_wrapper{
      white-space: nowrap;
    }
    .currencies {
      @include ab(100%, n, n, 0);
      width: auto;
      min-width: 65px;
      padding: 5px 0;
      margin: 4px 0 0;
      text-align: left;
      list-style: none;
      background: $white;
      border: 1px solid $body-border-color;
      @include border-radius-reset;
      @include box-shadow(0 6px 12px rgba($black, 0.176));
      visibility: hidden;
      z-index: -99;       
      @include translate(0, 20px);  
      @include opacity(0);
      @include transition(all 0.35s ease 0s);  
    &:after {
      content: '';
      @include ab(-5px ,n ,n,50%);
      width: 10px;
      background-color: #fff;
      height: 10px;
      transform: rotate(45deg);
    }
    > li {
        display: block;
        padding: 1px 15px;
        > a {
          display: block;
          white-space: nowrap;
          line-height: 1.42857143;
          color: $body-general-color;
          i {
            display: inline-block;
            margin-right: 5px;
          }
          span {
            font-size: $body-font-size - 2px;
          }
          &:hover{
            color: $main-color;
          }
        }
        &.active{
          a{color: $main-color;}
        }
      }
    }
    .dropdown-toggle {
      &:after {
        content: none;
      }
    }
    &.opened {
      .currencies {
        @include opacity(1);
        @include translate(0, 0);
        visibility: visible;
        z-index: 99;
      }
    }
  }
  .gg-translate-wrapper{
      display:flex;
      align-items:center;
      padding: 0 15px;
      &>span{
        opacity: .4;
        @media(max-width: 1200px){
          display: none;
        }
      }
      .goog-te-gadget{
        font-size:0;
        color : $topbar-color;
        &>span{
          display: none;
        }
        .goog-te-combo{
          margin: 0;
          height: 44px;
          border:none;
          color : $topbar-color;
          cursor: pointer;
          &>*{
            color: #000;
          }
        }
      } 
  }
  .header-top .row>div:nth-last-child(1)>.list-inline{
    text-align:right;
    flex-grow:1;
  }
  .customer-account{
    padding: 0;
    &>i,.hello{
      opacity: .4;
      margin-right:3px;
    }   
  }
  .header-main { 
    position: relative; 
    margin: 0px auto;      
    padding: 32px 0;  
    @media (max-width: 991px) {
      padding: 15px 0 !important;      
      margin: 0 auto;   
      .container {
      	padding: 0;
      }   
    }
    .table-row {        
      position: relative;  
      @media (min-width: 992px) {        
        display: table;
        width: 100%;              
      }
    }    
  }   
  .table-row {
  @media (min-width: 1200px) {
    .header-logo {
      width: 24.3%;
    }   
  }
  @media (max-width: 1199px) and (min-width: 992px) {   
    .header-logo {
      width: 24.1%;
    }
  }
  @media (min-width: 992px) {
    .header-logo {
      display: table-cell;
      vertical-align: middle;     
      padding-right: 15px;
    }
    .searchbox {
      display: table-cell !important;
      vertical-align: middle;
      width: 50%;
      padding: 0 15px;
    }
    .header-icons {
      display: table-cell !important;
      text-align: right;
      vertical-align: middle;
      width: 25%;
    }
  }
  } 
  .header-middle{
    padding: 30px 0;
    @media(min-width:992px){
      display:flex !important;
      align-items:center;
      &>div{
        width: 100%;
      }
    }  
  }
  .searchbox {
    margin: 0;    
    display: inline-block !important;    
    position: relative;   
    @media (max-width: 991px) {
      display: none !important;
    }
    > a {
      display: block;
      width: 100%;
      text-align: center;
      position: relative;
      z-index: 991; 
    }   
    .dropdown-menu {          
      left: auto;
      right: 0;            
      width: 300px;  
      display: block;  
      visibility: hidden;
      z-index: -99;
      @include translate(0%, 10px);  
      @include opacity(0);
      @include  transition(all 0.35s ease);    
      @media (max-width: 400px) {
        width: 280px;
        right: -60px;
      }       
    }
    &:hover {
      @media (min-width: 1025px) {
        .dropdown-menu {              
          visibility: visible;
          z-index: 99;          
          @include opacity(1);  
          @include translate(0%, 0px);
          &:before {
            content: '';
            height: 30px;
            width: 100%;
            @include ab(-20px, 0, n, n);
          }
        }
      }
    }
    &.show {
      .dropdown-menu {  
        visibility: visible;
        z-index: 99;          
        @include opacity(1);  
        @include translate(0%, 0px);  
      }
    }
    .search-icon {
      @include ab(-1px, n, n, -2px);
      @include transition(all 0.3s ease-in-out 0s);        
      z-index: 3;
      min-width: 60px;
      text-align: center;
      line-height: 42px;
      padding: 0 15px;
      border: none;
      background: $button-btn1;
      color: $button-btn1-txt;
      font-weight: $font-medium;
      text-transform:uppercase;
      font-size: $body-font-size - 2;
      @include border-radius(0,3px,3px,0);
      &:hover{
        color:$button-hover-btn1-txt;
        background-color:$button-hover-btn1
      }
    }
    .navbar-form {        
      margin: 0;  
      padding: 0;          
      display: block;
      height: 42px;      
      background: transparent;
      position: relative;
      @include border-radius(3px,3px,3px,3px);
      @include box-shadow(0 0 0 $white);
      &.border-top-true {
        border-color: $text-number-icon;
      }           
    }
    .form-control {     
      width: 100%;     
      padding: 12px 60px 12px 15px;              
      line-height: 18px;                          
      text-transform: none;                       
    }
    #result-ajax-search {
      text-align: left;
      position: absolute;
      top: 100%;      
      width: 100%;  
      min-width: 250px;       
      padding: 0px; 
      margin: 10px 0 0;       
      display: none;
      z-index: 12;  
      border: none;
      border-top: 2px solid $main-color;
      background: $body-background-color;
      @include box-shadow(0 2px 4px rgba($black, 0.2));       
       &:before {
        content: "\e821";
        @include ab(-10px, 48%, n, n);
        height: 12px;
        line-height: 12px;
        color: $main-color;
        font-size: 18px;
        font-family: arenafont;        
      }
      ul {
        margin: 0;
        padding: 0;
        max-height: 450px;
        overflow: auto; 
        background: $white;   
        width: 100%;
        li {
          display: block;
          overflow: hidden;
          padding: 15px 10px;
          .search-item-img {                                  
            text-align: center;         
            img {
              margin: 0 15px 0 0;            
              width: 60px; 
            }   
          }
          .search-item-title {
            display: block;
            margin: 0 0 5px;
            color: $body-title-product;
            font-weight : $font-medium;
            font-size: $body-font-size;
            .marked {
              color: $main-color;
            }  
            &:hover {
              color: $main-color;
            }          
          }   
          .price,
          .price-sale,
          .price-compare {
            display: inline-block;
            line-height: 28px;
          }
          .price-sale{
            float: left;
          }
          p {
            color: $body-price-color;
            font-weight : $font-medium;
            margin: 0;
            padding: 20px;                           
          }
          &:hover {
            background: $body-border-color;
          }
        }
      }
    }
    &.s-loading {
      .navbar-form {
        @media (min-width: 1025px) {
          &:before {
            @include ab(8px, n, n, 20px);
            width: 25px;
            height: 25px;            
            z-index: 5;          
            font-size: $font-small-icon; 
            vertical-align: middle; 
            line-height: 25px;             
            font-family: arenafont;
            content: "\e984";
            -webkit-animation: fa-spin 2s infinite linear;
            animation: fa-spin 2s infinite linear;
            color: $button-hover-btn1-txt;            
          }
          .search-icon {
            color: transparent !important;           
          }          
        }        
      }
    }
  }   
  .phone{
    display: flex;
    align-items: center;
    padding:0;
    color: $text-header-color;
    .phone-icon-wrapper,.phone-info-wrapper{
      display: inline-block;
      float: left;
    }
    .phone-icon-wrapper{
      width:20%;
      display:block;
      height: 42px;
      font-size:30px;
      position: relative;
      i{
        @include ab(50%,50%,n,n);
        transform: translate(0%,-50%) scale(-1,1);
      }
    }
    .phone-info-wrapper{
      width: 80%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      span{
        white-space: nowrap;
        width:100%;
      }
      &>span:nth-child(1){
        display:block;
        font-size: $body-font-size - 1px;
        letter-spacing: 0.25px;
      }
      &>span:nth-last-child(1){
          font-weight: $font-medium;
          padding-top:4px;
          display: block;
          font-size: $body-font-size + 1px
      }
    }
  }
  .header-logo {        
    @media (max-width: 991px) {
      display: block;  
      margin: 0 auto; 
      text-align: center; 
      padding: 0 55px;      
    }
    .logo-site {                 
      line-height: 0.8;            
      &.waiting {       
        padding: 0 !important;
        background-color: transparent !important;       
      }             
    }   
    @media(max-width: 360px){
      img{width: 100% !important;}
    }  
  } 
  /*stick menu*/
  .header-fixed {    
    position: fixed;
    z-index: 9999;
    left: 0;
    right: 0;
    top: 0;     
    background: $bg-header-color;
    width: 100%;
    max-width: 100% !important;
    @include box-shadow(0 0px 15px rgba($black, 0.65));       
    @media (min-width: 1025px) {
      .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
      }
    }
    @media (max-width: 991px) {
      background: $main-color;
      .has-header-logo-sticky{
        display: none !important;
        &+.header-logo-sticky{
          display: block !important;
        }
      }
  
    }
    .header-product {
      display: none;
    }   
    @media (min-width: 992px) {
      .top-bar,
      .top-bar-list,
      .header-top {
        display: none !important;
      }
    } 
    .header-main {
      @media (max-width: 1024px) {
        padding-top: 5px;
        padding-bottom: 5px;
      }
    }    

    &.style-2{
      @media (min-width: 1025px) {
        .header-main {
          padding-top: 10px;
          padding-bottom: 10px;
        }
        .header-navigation {
          display: none !important;
        }
      }
    }
    &.style-1,&.style-3{
      @media (min-width: 992px) {
        .header-middle{
          display: none !important;
        }
      }
    }
    &.style-3{
      margin: 0 !important;
    }
  } 
  &.bg-image {
    background-image: url({{'header_bg.jpg' | asset_url }});
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .style-1 {  
    .header-middle{
      >div{
        width: auto;
      }
      .header-logo{
        width: 21%;
      }
      .searchbox{
        flex-grow: 2;
      }
      .phone{
   
        .phone-icon-wrapper{
          color: $main-color;
          width: 60px;
          margin-left: 50px;
          i{
            left: auto;
            right: 5px;
          }
        }
        .phone-info-wrapper{
          width: auto;
          display: block;
          margin-right: 40px;
        }
      }
      .header-icons{
        .cart-target{
          width: auto;
     
        }
      }
      
    }
    .table-row{
      .horizontal-menu-custom-txt{
        position: relative;
      }
      .wrap-horizontal-menu{
        position: static;
        padding: 0;
        .navbar .navbar-collapse>ul>li{
          padding: 0 20px;
          &:nth-last-child(1){
            padding-right:0;
          }
        }
      }
      .custom-text{
        width: 10%;
      }
    }
    &.layout-full > div {
      padding-left: 0;
      padding-right: 0;
    }
    .header-navigation{
      .header-icons{
        display: none !important;
      }
      .vertical-menu{
        
        .sidemenu-holder{
          .navbar .navbar-collapse .main-nav{
            border-color: transparent !important;
            padding: 0;
            >li{
              margin:0;
              width: 100%;
              padding:20px 25px;
              border-color: #f6f6f6;
              >a,.dropdown-inner>.dropdown-link{
                padding: 0;
              }
              >.dropdown-menu{
                padding: 30px ;
              }
              &.mega-menu{
                >.dropdown-menu{
                  height: 100%;
                }
                .dropdown-menu .mega-sub-link>a{
                  padding: 0 0 10px;
                  margin-bottom: 10px;
                  line-height: 1.618em;
                }
              }
                &.menu-open{
                  background-color: #f6f6f6;
                  >a{
                    color: $vertical-nav-link-hover-color;
                  }
                  >.dropdown-menu{
                    box-shadow: inset 10px 0 12px -6px #ddd;
                  }
                  .expand{
                    display:none;
                  }
                  &:hover{
                    >a{
                      color: $vertical-nav-link-hover-color;
                      font-weight: $font-regular;
                    }
                    >.dropdown-inner{
                      >a{
                        color: $vertical-nav-link-hover-color;
                        font-weight: $font-regular;
                      }
                    }
                  }
                
                }
                &:hover{
                  >a,>.expand{
                    font-weight: $font-regular;
                    color: inherit;
                  }
                  >.dropdown-inner{
                    >a,>.expand{
                      font-weight: $font-regular;
                      color: inherit;
                    }
                  }
                  
                }
            }
            &>li.dropdown .dropdown-menu li a{
              padding:  0;
              margin: 6px 0;
            }
            &>li.dropdown>.dropdown-menu{
              border: none;
              &:before{background: transparent;}
            }
            span.expand{
              line-height: 18px;
              height: auto;
              width: auto;
            }
          }
        }
        .labels-wrapper{
          bottom: 100%;
          top: auto;
        }
      }
    }
    &.header-fixed {
      margin: 0 !important;
      .top-bar {
        display: none !important;
      }
    }
  }
  .style-2 {
    .header-main {
      padding-top: 25px;
      padding-bottom: 25px;
    }
    .sidemenu-holder .navbar .navbar-collapse .menu-list>li.dropdown:hover{
      z-index: 99999;
    }
    .header-icons {
      .cart-target .basket{
        float: right; 
      }   
    }
    .table-row {
      @media (min-width: 992px) {
        .header-logo {
          width: 20%;
        }
        .horizontal-menu {
          display: table-cell !important;
          vertical-align: middle;          
          padding: 0 15px;
          position: static;;
          .menu-list {
            text-align: left;
          }  
          .navbar .navbar-collapse .menu-list > li.dropdown.mega-menu > .dropdown-menu {
            top: 46px;
          }
        }  
        .header-icons{
          width: auto;
        }      
      }
      @media(min-width: 1200px){
        .header-logo{
          width: 22%;
        }
      }
      @media(max-width:1199px){
        .header-icons{
          .cart-target{
            a>span:not(.number),.money{
              display: none;
            }
            .n-item{
              top: -20px;
            }
          }
        }
      }
      @media(max-width: 991px){
        .header-icons{
          display: none;
        }
      }
      .searchbox{
        .search-icon{
          top: 0;
        }
      }
    } 
    .full-width{
      .header-navigation{
        padding-left: 0;
      }
    }
    .header-navigation {
       
      .table-row {
        .vertical-menu {
          .navigation {
            .head {
              @include border-radius-reset;
            }
            .navbar .collapse .main-nav {
              border: 3px solid $main-color;
              border-top: none;
              .labels-wrapper{
                bottom: auto;
                top: 5px;
              }
            }
          }
        }
      }     
      .searchbox {
        padding: 3px 0;
        @media (min-width: 992px) {
          width: 53%; 
          padding-left: 12px;
        }
        
        .form-control{
          height: 100%;   
        }
        .search-icon{
          background: $button-btn2;
          color: $button-btn2-txt;  
          &:hover{
            background: $button-hover-btn2;
            color: $button-hover-btn2-txt;  
          }
        }
      }
      .phone{
        padding: 5px 0;
        height: 50px;
        .phone-icon-wrapper{
          color: $white;
          width: auto;
          flex-grow: 1;
          i{
            right: 15px;
            left: auto;;
          }
        }
        .phone-info-wrapper{
          width: auto;
          span{
            padding: 0;
          }
        }
      }

    }
    &.layout-full {
      > div {
        padding-left: 0;
        padding-right: 0;
      } 
    }
    &.header-fixed{
      margin: 0 !important;
    }
  }
  .style-3 {    
    
      .header-middle{
        padding-top: 33px;
        padding-bottom: 33px;
        .header-logo,.phone{
          width: 40%;
        }
        .phone{
          .phone-icon-wrapper{
            flex-grow:1;
            width: auto;
            color: #fff;
            .icon-phone{
              right:10px;
              text-align: right;
            }
            
          }
          .phone-info-wrapper{
            width: 60%;    
            span{
              display: inline-block;
              min-width: 40%;
              width: auto;
            }
            @media(max-width: 1199px){
              flex-grow: 1;
            }
          }
        }
        .searchbox{
          flex-grow: 1;
          .search-icon{
            background-color: $button-btn2;
            color: $button-btn2-txt;
            border-color: $button-btn2-border;
          }
        }
      }
      .header-main{
        padding-top: 0;
        padding-bottom: 0;
        background-color: $header-bottom-bg-color;
        .sidemenu-holder .navbar .navbar-collapse .menu-list
          >li{
            &:first-child{
              padding-left: 0;
            }
            >a{
              padding: 13.5px 0;
            }
          }
        .header-icons{
          >ul>li{
            >a{
              line-height: 41px;
            }
          }
          .cart-target{
            .basket{display:flex;align-items:center;float: right;}
            .number{
              .n-item{
                top: -10px;
              }
            }
          }
        }
      }
      @media(max-width:991px){
        background-color: $header-bottom-bg-color;
      }
  }
}
.vertical-menu,
.left-column-container {   
  .sidemenu-holder,
  .sb-vertical-menu {
    .navbar {     
      z-index: 5;
      width: 100%;
      @include ab(100%, 0, n, n);
      .navbar-collapse {
        position: relative;
        display: block;
        .main-nav {
        position: static;        
          border: none;
          background: $white;
          margin: 0px;
          padding: 15px 0 12px;
          border: 2px solid;
          max-height: 750px;
          overflow-y: auto;
          border-color : transparent $main-color $main-color $main-color;
          span.expand { 
            padding: 0;
            width: 43px;
            height: 43px;
            line-height: 43px;
            text-align: center;
            font-size: 12px;
            z-index: 2;
            color: $nav-dropdown-link-color;
            @include ab(0, n, n, 0);  
            &:before {
              content: '\ea90';
              font-family: arenafont;
            }          
          }
          > li {
            padding: 0 0 0 5px;
            margin: 0 13px;
            position: static; 
            display: block;
            width: calc(100% - 26px);         
            border-bottom: 1px solid $body-border-color;            
            > .dropdown-inner > a,
            > a {
                font-weight: 400;            
                font-size: $body-font-size;            
                margin: 0;
                padding: 12px 0px;
                display: inline-block;
                text-decoration: none;
                color: $nav-link-color;            
                line-height: 19px;     
                position: relative;     
                > i{
                  @include ab(50%,n,n,0);
                  @include translate(0,-50%);
                }
            }
            > .dropdown-inner > span.expand,
            > span.expand {
              color: $nav-link-color; 
              position: static;
              float: right;
              text-align: center;
              width: 20px;
              clear: none;   
              @media (max-width: 1199px) and (min-width: 992px) {
                height: 31px;
                line-height: 31px;
              }         
            }
            > .dropdown-inner {
              position: relative;
              > span.expand {
                color: rgba($nav-link-color, 0.6);                 
                float: right;
                text-align: center;
                width: 20px;                
                @include ab(0, n, n, 0);
              }
            }

            /*have submenu*/
            &.dropdown {   
              > .dropdown-menu {
                background: $nav-dropdown-background;                
                font-size: $body-font-size;
                padding: 10px 0;
                display: block !important;  
                left: 100%;
                top: 0%;                  
                margin-left: 0px;
                min-height: 372px;
                @include dropdown-effect;
                @include box-shadow(2px 2px 4px 1px rgba(0, 0, 0, 0.2));                  
                &:after {
                  content: '';
                  width: 17px;
                  @include ab(0, -15px, 0, n);
                }
                @media (max-width: 1199px) and (min-width: 992px) {
                  min-height: 332px;
                }
                &.column-4 { 
                  width: 886px; 
                  @media (max-width: 1199px) and (min-width: 992px) {
                    width: 736px;
                  }
                }
                &.column-3 { 
                  width: 675px; 
                  @media (max-width: 1199px) and (min-width: 992px) {
                    width: 550px;
                  }
                }
                &.column-2 { 
                  width: 450px; 
                  @media (max-width: 1199px) and (min-width: 992px) {
                    width: 370px;
                  }
                }
                &.column-1 { 
                  width: 225px;
                  @media (max-width: 1199px) and (min-width: 992px) {
                    width: 185px;
                  } 
                }       
                > li {
                  > a {                  
                    color: $nav-dropdown-link-color;
                    white-space: normal;
                    span {
                      color: $nav-dropdown-link-color;
                      font-size: $body-font-size;
                    }               
                  }
                  span.expand {
                    line-height: 32px;
                    height: 32px;
                  }
                  a.dropdown-link {
                    padding-right: 0;
                    margin-right: 30px;
                  }
                  .dropdown-menu {
                    background: $nav-dropdown-background;         
                    > li {
                      > a {                      
                        color: $nav-dropdown-link-color;
                        white-space: normal;
                        span {
                          color: $nav-dropdown-link-color;
                        }
                      }                  
                      &:hover {  
                        > a {                      
                          span {                        
                            color: $nav-dropdown-link-hover-color;
                          } 
                        } 
                          > span.expand { 
                              color: $nav-dropdown-link-hover-color;                  
                          }
                      }
                    }
                  }
                  &:hover {  
                      > a {                    
                        span {
                          color: $nav-dropdown-link-hover-color;
                        } 
                      } 
                        > span.expand { 
                            color: $nav-dropdown-link-hover-color;                  
                        }
                    }
                }           
                .product-button {
                  display: none;
                }
                .bp-item {
                  .sb-product-head {
                    .product-name {
                      font-size: $product-font-size;
                      padding: 0;
                      margin: 0 0 15px;
                      border: none;
                      &:before,
                      &:after {
                        content: none;
                      }
                      > a {
                        color: $body-title-product;
                        font-size: $product-font-size;
                        font-weight : $font-medium;                         
                        margin: 0;
                        display: block;
                        &:hover {
                          color: $nav-dropdown-link-hover-color;
                        }
                      }
                    }
                  }
                  .sb-product-content {
                    padding: 0;
                  }
                  .bp-content-inner {
                    padding: 15px 0 0;                        
                    .sb-price {
                      padding: 6px 0 0;
                      display: flex;
                    
                    }                   
                    .price-compare,
                    .price-sale {
                      display: inline-block;
                    }
                    .price-compare {                        
                      font-weight: 400;
                      font-size: 12px; 
                      margin-top: 5px;
                      order: 2;
                    }
                    .price, .price-sale {
                      font-size: $product-price-size;  
                      font-weight: 400;order: 1;
                    }        
                             
                  }
                  &:hover {
                    background: none;
                    a {
                      text-decoration: none !important;
                    }
                  }
                }           
              }
              .dropdown-menu-sub {
                background: transparent;
                border: 0;
                border-radius: 0;
                box-shadow: none;
                position: static;
                width: 100%;
                min-width: auto;  
                margin: 0;           
                > li {
                  > a {                  
                    color: $nav-dropdown-link-color;
                    padding: 5px 0;
                    border-bottom: none;
                    span {
                      color: $nav-dropdown-link-color;
                    }
                    &:hover {                              
                      span {
                        color: $nav-dropdown-link-hover-color;
                      }
                    }
                  }
                  &:hover {
                    background: none;
                    > a {                  
                      text-decoration: underline;
                    }
                  }
                }
              }
              &.menu-open {                         
                > .dropdown-menu {
                  @include dropdown-effect-hover;           
                }
                 &.menu-open{
                background-color: #f6f6f6;
                >a{
                  color: $vertical-nav-link-hover-color;
                }
                &.mega-menu{
                  >.dropdown-menu{
                    box-shadow: inset 10px 0 12px -6px #ddd;
                  }
                }
                .expand{
                  display:none;
                }
                &:hover{
                  >a{
                    color: $vertical-nav-link-hover-color;
                    font-weight: $font-regular;
                  }
                  >.dropdown-inner{
                    >a{
                      color: $vertical-nav-link-hover-color;
                      font-weight: $font-regular;
                    }
                  }
                }
              }
              &:hover{
                >a,>.expand{
                  font-weight: $font-regular;
                  color: inherit;
                }
                >.dropdown-inner{
                  >a,>.expand{
                    font-weight: $font-regular;
                    color: inherit;
                  }
                }
                
              }
              }
              &.mega-menu.menu-open > .dropdown-menu, 
              &.mega-menu.menu-open > .dropdown-menu {
                .dropdown-menu-sub {
                  display: block;
                }
              }
            }
            &:last-child {
              border-bottom: none;
            }                                  
          }
          > li.mega-menu {            
            > .dropdown-menu {
              padding: 20px;
              background-size: 100%;
              .row {
                margin-left: -15px;
                margin-right: -15px;
                width: auto;
              }
            }
            .dropdown-menu {
              .mega-sub-link {
                overflow: hidden; 
                margin: 0 0 20px;               
                > a {                                                
                  font-size: $nav-sub-font-size - 1px;  
                  font-weight : $font-medium;
                  position: relative;
                  display: block;
                  text-transform: uppercase;
                  padding:  0;
                  margin: 0 0 10px;
                  line-height: 26px;                   
                  color: $nav-dropdown-link-color;
                  border-bottom: 1px solid $body-border-color;
                  &:hover {
                    text-decoration: none;
                    color: $nav-dropdown-link-hover-color;                                   
                  }                 
                }
                > span.expand {
                  display: none;
                }
                .dropdown-menu-sub {
                  &:before {
                    content: none;
                  }
                  li {
                    padding: 0;                  
                    a {
                      &:hover {                      
                        color: $nav-dropdown-link-hover-color;                        
                      }
                    }
                  }
                }
                &.no-title-0 {
                  > a,
                  > span.expand {
                    display: none !important;
                  }                               
                }
                &.no-title-2 {
                  > a,
                  > span.expand {
                    display: none !important;
                  }                        
                }
                &:last-child {
                  margin: 0;
                }  
              }
              .product-title {
                a {
                  color: $nav-dropdown-link-color !important;
                  &:hover{
                    color: $nav-dropdown-link-hover-color !important;
                  }
                }
              }            
            }          
          }
          .back-prev-menu{
            @media(min-width:992px){
              display: none !important;
            }
          }
      }
      }      
    }
  }

  .navbar.vertical-navbar .navbar-collapse{
    .main-nav{
      .expand{color: $vertical-nav-dropdown-link-color};
      >li{
        >.dropdown-inner > a,
        >a,> .dropdown-inner > span.expand,
        > span.expand{
          color: $vertical-nav-link-color;
        }
        &.menu-open{
          > a,> .dropdown-inner > a,> span.expand,
            > .dropdown-inner > span.expand  {         
              color: $vertical-nav-link-hover-color;                      
            }  
        }
        &.dropdown{
          > .dropdown-menu{
            background: $vertical-nav-dropdown-background;  
            > li{
              > a{ 
                color: $vertical-nav-dropdown-link-color;
                span {
                  color: $vertical-nav-dropdown-link-color;
                } 
              }
              .dropdown-menu{
                background: $nav-dropdown-background;         
                > li {
                  > a {                      
                    color: $vertical-nav-dropdown-link-color;
                    span {
                      color: $vertical-nav-dropdown-link-color;
                    }
                  }                  
                  &:hover {  
                    > a {                      
                      span {                        
                        color: $vertical-nav-dropdown-link-hover-color;
                      } 
                    } 
                      > span.expand { 
                          color: $vertical-nav-dropdown-link-hover-color;                  
                      }
                  }
                }
              }
              &:hover{  
                > a {                    
                  span {
                    color: $vertical-nav-dropdown-link-hover-color;
                  } 
                } 
                  > span.expand { 
                      color: $vertical-nav-dropdown-link-hover-color;                  
                  }
              }
            }
            .bp-item{
              .sb-product-head{
                .product-name{
                  > a {
                    &:hover {
                      color: $vertical-nav-dropdown-link-hover-color;
                    }
                  }
                }
              }
            }

          }
          .dropdown-menu-sub{
            > li {
              > a {                  
                color: $vertical-nav-dropdown-link-color;
                span {
                  color: $vertical-nav-dropdown-link-color;
                }
                &:hover {                              
                  span {
                    color: $vertical-nav-dropdown-link-hover-color;
                  }
                }
              }
            }
          }
        }
      }
      > li.mega-menu {            
        .dropdown-menu {
          .mega-sub-link {     
            > a {                                              
              color: $vertical-nav-dropdown-link-color;
              &:hover {
                color: $vertical-nav-dropdown-link-hover-color;                                   
              }                 
            }
            .dropdown-menu-sub {
              li {
                padding: 0;                  
                a {
                  &:hover {                      
                    color: $vertical-nav-dropdown-link-hover-color;                        
                  }
                }
              }
            }    
          }
          .product-title {
            a {
              color: $vertical-nav-dropdown-link-color !important;
              &:hover{
                color: $vertical-nav-dropdown-link-hover-color !important;
              }
            }
          }     
          
          //new mega-menu vertical
          .menu-product-carousel{
            position: relative;
            .owl-nav{
              position: static;
              opacity: 0;
              @include transition(all 0.35s ease);
              &>div{
                @include ab(50%,n,n,n);
                @include translate(0,-50%); 
                &.owl-prev{
                  left: 0;
                }
                &.owl-next{
                  right: 0;
                }
              }
            }
            .owl-item{
              opacity:0;
              &.active{
                opacity: 1;
              }
              .product-wrapper{
                padding-left: 3px;
                padding-right:3px;
                padding-top: 0;
                .product-swatch-images,.product-add-cart{
                  display:none;
                }
                &:hover{
                  .product-inner-wrapper{
                    box-shadow: 0 0 4px 2px #f2f2f2 !important;
                  }
                 
                }
              }
            }
            &:hover{
              .product-inner-wrapper{
                box-shadow: 0 0 2px 4px #f2f2f2;
              }
              .owl-nav{
                @include opacity(1);
              }
            }
          }  
          .bp-item {
            margin-top: 10px;
            display: block;
            clear:both;
            &:not(:last-child){
              margin-bottom:25px;
            }
            &>div{
              display: inline-block;
              vertical-align: middle;
              float: none;
            }
            .sb-product-head{
              width: 30%;
              padding-right: 5px;float: left;
            } 
            .sb-product-content{
              width:70%;
              padding-left: 15px;
              .product-name{
                color: $body-title-product;     
                font-size: $product-font-size + 1;      
                font-weight: $font-regular;
                margin: 0 ;      
                line-height: 1.1 ;          
                position: relative;  
              }
              .sb-price{
                .price-sale{
                  font-size: $size-h5;
                  font-weight: $font-medium;
                }
              }
            }           
          }
        }          
      }
    }
  }
  
}
.navbar {
  .bar {
    height: 3px;
    background: $nav-link-color;
    margin: 0 0 5px;
    display: block;
    @include border-radius(3px, 3px, 3px, 3px);
    &:nth-child(1) {
      width: 30px;
    }
    &:nth-child(2) {
      width: 24px;
    }
    &:nth-child(3) {
      width: 18px;
    }
  }
  &.navbar-responsive-menu {
    font-size: 0;
  }
}
#searchModal {  
  @include flexbox();
  background: rgba($black, 0.7) none repeat scroll 0 0;
  position: fixed;    
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  align-items: center;
  -webkit-align-items: center; /* Safari 7.0+ */
  justify-content: center;
  display: none;
  padding: 10% 0 0 0;
  z-index: 9999;  
  #searchModal[aria-hidden="false"] {
    z-index: 99999;
  } 
  .modal-dialog {
    width: 80%;
    max-width: 520px;
    min-width: 290px;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    position: relative;
    z-index: 3;
    background: $white; 
    .modal-content {    
      @include box-shadow(0 0 0 rgba(0, 0, 0, 0.5));
      border: none;
      padding: 30px;
      @media (max-width: 479px) {
        padding: 15px;
      }
      &.s-loading {
        .navbar-form {
          &:before {
            @media (min-width: 768px) {
              @include ab(12px, n, n, 0px);
              width: 25px;
              height: 25px;            
              z-index: 5;          
              font-size: $font-small-icon; 
              vertical-align: middle; 
              line-height: 25px; 
              display: block;
              font-family: arenafont;
              content: "\e984";
              -webkit-animation: fa-spin 2s infinite linear;
              animation: fa-spin 2s infinite linear;
              color: $body-title-color; 
            }
          }
          .search-icon {
            @media (min-width: 768px) {
              @include opacity(0);
            }
          }
        }
      }
    }    
    button.close {        
      @include border-radius-circle;  
      @include opacity(1);
      @include box-shadow(0 0px 0px rgba($black, 0.5));
      @include ab(-17px, n, n, -15px);                
      @include width-btn-1;      
      cursor: pointer;
      display: block;
      cursor: pointer;      
      text-align: center;
      z-index: 3;          
      font-size: 0;         
      &:before {
        @include close-btn;  
        color: $white;      
      }
      span {
        display: none;
      } 
      &:hover {
        background: $button-hover-btn1;
        &:before {
          color: $button-hover-btn1-txt;
        }
      }       
    }
    h3 {        
      margin: 0;
      padding: 0 0 15px;
      font-size: 18px;               
    }
    .navbar-form {
      padding: 0;
      margin: 0;
      position: relative;
      .form-control {
        width: 100%;        
        margin: 15px 0;   
        height: 42px; 
        padding: 10px 40px 10px 15px;
          
        &:focus {
          @include box-shadow(0 0 0 $white);
          border-color: $main-color;
        }
      }
      .search-icon {
        border: none;
        padding: 0;
        margin: 0;
        background: none;    
        width: 50px;
        height: 42px;
        text-align: center;
        line-height: 42px;
        @include ab(0px, n, n, 0);   
        i {
          font-size: $font-small-icon - 4px;
          color: $body-title-color;
        }     
        &:hover {
          i {
            color: $main-color;
          }
        }
      }
    }
  }     
  #result-ajax-search {
    text-align: left;    
    width: 100%;          
    padding: 0px; 
    margin: 15px 0 0;       
    display: none;  
    border: 2px solid $body-border-color;  
    overflow: hidden;
    @include box-shadow(0 0px 0px rgba(0, 0, 0, 0.3));  
    @media (max-width: 767px) {
      display: none !important;
    }
    ul {
      margin: 0;
      padding: 0;
      max-height: 450px;
      overflow: auto ; 
      background: $white;   
      width: 100%;
      li {
        display: block;
        overflow: hidden;
        padding: 10px 15px;
        .search-item-img {
          float: left;
          margin: 0px 15px 0 0; 
        }
        .search-item-title {
          display: block;           
          line-height: 1.4;            
          color: $body-title-product;            
          margin: 0 0 5px 115px;
          font-size: $product-font-size;
          .marked {
            color: $main-color;
          } 
          &:hover {
            color: $main-color;
          }           
        }            
        .price-compare {       
          margin: 0 10px 0 0;           
        } 
        p {
          margin: 0;                            
        }
        &:hover {
          background: #f6f6f6;
        }
      }
    }
  }
}
/* Sidebar cart ------------------------*/
.sb-progress {
  height: 18px;
  background: #707070;
  margin: 0 0 10px;
  @include border-radius-25;
  .sc-progress-bar,
  .sb-progress-bar {
    background: #222;
    display: block;
    color: $white;
    padding: 0 10px;
    text-align: center;
    line-height: 18px;
    height: 100%;
    padding: 0 10px;
    text-align: center;
    @include transition(width 0.4s ease-out);
    background-image: -webkit-linear-gradient(bottom left, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(bottom left, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(to top right, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    animation: move 2s linear infinite;
  }
}
.sb-text {
  padding: 0 0 20px;
  .money {
    font-weight : $font-medium;
  }
}
.cart-sb, .cart-dd {
  margin: 0px;   
  padding: 10px 20px 20px;
  width: 335px;    
  position: absolute;     
  background: $body-background-color;    
  @include transition(all 0.35s ease); 
  @include ab(100%, n, n, 0);
  left: auto;
  #cart-info {   
    text-align: left;
    .items {
      overflow: hidden;
      
      border-top: 1px solid $body-border-color; 
    }
    .cart-item-empty {        
      padding: 10px 0;    
      p {
        margin: 0 0 5px;        
      }  
    }
    .cart-header{
      padding: 10px 0;
      font-weight: $font-medium;
      text-transform: uppercase;
    }
    .items-inner {            
      overflow: hidden;
      position: relative;  
      display: table;
      width: 100%;
      table-layout: fixed;  
      margin: 0;
      padding: 15px 0;
      .cart-item-image {
        float: none;
        display: table-cell;
        vertical-align: middle;
        width: 85px;        
        padding: 0 15px 0 0; 
        text-align: center;   
        img {
          max-width: 100%;
        }     
      }
      .cart-item-info {
        float: none;
        display: table-cell;
        vertical-align: middle;  
        padding-right: 5px;    
        width: 100%;
        text-align: left;        
      }
      .cart-item-quantity {
        padding: 0 10px 8px 0;
        display: inline-block;
        span {
          color: $body-light-color;
        }
      }
      .cart-close {         
          -webkit-appearance: none;
          appearance: none;          
          border: 1px solid $body-border-color;
          width: 20px;
          height: 20px;
          margin: auto;
          color: $body-border-color;
          text-align: center;
          @include border-radius(3px,3px,3px,3px);
          @include ab(50%,n,n,0);
          @include translate(0,-50%);
          i {  
            &:before {
              font-family: "arenafont";
              content: "\e973";
              font-size: 12px;
            }
          }
          &:hover {
            color: $main-color;
            border-color: $main-color;
          }                  
      }
      .cart-item-title {
        margin: 0;
        padding: 0 0 10px 0;
        line-height: 1.2;
        a {
           font-size: $product-font-size;
           color: $body-title-product;            
          &:hover {          
            color: $main-color;
          }
        }        
      }
      .cart-item-price {        
        color: $body-price-color;        
        line-height: 1.3;    
        display: inline-block;    
        font-size: $body-font-size ;
        font-weight: $font-medium;
      } 
      &:last-child {
        border-bottom: none;        
      }     
    }
    .subtotal {   
      border-top: 1px solid $body-border-color;
      border-bottom: 1px solid $body-border-color;
      overflow: hidden;                       
      width: 100%;  
      padding: 14px 0;
      text-align: left;
      color: $body-light-color;
      > span {        
        &.cart-item-total-price {
          color: $body-price-color;
          font-weight : $font-medium;
          font-size: $size-h6 + 2;
          float: right;
        }
      }
    }    
  }
  .action {    
    overflow: hidden;
    margin: 0; 
    padding: 15px 0px 11px;      
  }
  .cart-loading {
    text-align: center;
    &:before {
      content: '\f110';
      margin: 0px auto;
      display: inline-block;
      color: $main-color;
      font-size: $font-icon;
      font-family: arenafont;
      -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
    }
  }
}
.cart-dd {  
  margin-top: 6px;  
  border: 1px solid $body-border-color;
  @include dropdown-effect;
  @include translate(0, 10px);  
  @include box-shadow(0 6px 12px rgba(0,0,0,0.176));
  @media (max-width: 340px) {
    width: 100%;
    min-width: 290px;    
  }
  &:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: $body-background-color;
    transform: rotate(45deg);
    @include ab(0,n,n,60px);
    border-top: 1px solid $body-border-color;
    border-left: 1px solid $body-border-color;
    margin-top: -5px;
  }
  &:after {
    content: '';    
    height: 12px;   
    @include ab(-7px, 0, n, 0px);
  }
  #cart-info {    
    .items {
      max-height: 320px; 
      overflow-y: auto;          
    }
  }  
  .action {
    overflow: hidden;
    .btn {
      padding: 5px 15px;
      font-weight: 400;
    }
    .btn-1 {
      float: right;
    }
  }   
}
.cart-sb {  
  padding-top: 0px;
  position: fixed;  
  top: 0px!important;
  right: 0px !important;  
  z-index: 9999999;
  height: 100%;
  display: block;      
  @include translate(390px, 0);
  @include box-shadow(0 0 0 #fff !important);  
  @include transition(all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94));
  @media (max-width: 390px) {
    width: 100%;    
  }    
  form {
    display: block;
    width: 100%;
    height: 100%;
  }
  .cart-sb-title {    
    padding: 10px 20px;        
    margin: 0 -20px 5px;        
    position: relative;
    background: $main-color;  
    color: $main-color-text;
    text-align: center;
    .c-close {      
      font-size: $body-font-size;
      display: inline-block;      
      cursor: pointer;         
      text-align: center;     
      color: $main-color-text;
      width: 45px;
      height: 45px;      
      line-height: 45px; 
      @include ab(0px, 8px, n, n);      
      @include transition(all 0.35s ease 0s);      
      &:hover {
        color: $body-price-sale-color;
      }
    }
    .c-title {
      display: block;
      font-size: $body-font-size + 1px;
      text-transform: uppercase;      
      color: inherit;      
      line-height: 25px;
      font-weight : $font-medium;
    }
  }
  .cart-content {
    opacity: 0;
    visibility: hidden;    
    @include transition(all 0.2s ease-out 0s); 
  
  } 
  #cart-info {
    border: 0;   
    overflow-y: auto;  
    max-height: calc(100% - 246px);   
    .items{
      border: none;
    }
    &.shipping-true {
      max-height: calc(100% - 312px);   
    }     
    .items-inner {      
      @include translate(0, 100px);
      @include opacity(0);
    }
    .subtotal {
      border-bottom: none;
      padding: 20px 0 5px;
    }
    .animated-0 {      
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s);
    }
    .animated-1 {      
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.22s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.32s);
    }
    .animated-2 {
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.28s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.38s);
    }
    .animated-3 {
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.34s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.44s);
    }
    .animated-4 {
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s);
    }
    .animated-5 {
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.46s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.56s);
    }
    .animated-6 {
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.52s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.62s);
    }
    .animated-7 {
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.58s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.68s);
    }
    .animated-8 {
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.64s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.74s);
    }
    .animated-9 {      
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.7s,opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s);
    }
    .animated-10 {      
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.76s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.86s);
    }
    .animated-11 {      
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.82s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.92s);
    }
    .animated-12 {      
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.88s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.98s);
    }
    .animated-13 {      
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.94s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.04s);
    }
    .animated-14 {      
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.0s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.1s);
    }
    .animated-15 {      
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.06s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.16s);
    }
    .animated-16 {      
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.12s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.22s);
    }
    .animated-17 {      
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.18s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.28s);
    }
    .animated-18 {      
      @include transition(transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.24s, opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.34s);
    }    
  } 
  .action {
    .btn {
      width: 100%;
      padding: 10px;
      margin: 0px auto 10px;
      &:last-child {
        margin-bottom: 0;
      }
    }  
  }
  .wrap-action {
    @include ab(n, 20px, 20px, 20px);            
    background: $body-background-color; 
  }
  &.opened {
    @include translate(0px, 0);    
    margin-top: 0px !important;
    .c-close {
      @include opacity(1);
    }
    #cart-info .items-inner {
      @include opacity(1);
      @include translate(0, 0);
    }
    .cart-content{
      opacity: 1;
      visibility: visible;
    }
    @media (max-width: 319px) {
      max-width: 250px;
    }   
  }
}
/* Quick view ----------------------------------*/
.quantity {
  position: relative;
  display: inline-block;
  background: $body-background-color;
  input { 
    width: 100%;   
    padding: 5px 0;
    height: 100%;
    line-height: 18px;
    border: none; 
    text-align: center;
    color: $body-title-color;                     
    background-repeat: no-repeat;
    background-attachment: fixed;
    background: transparent;
    -moz-appearance:textfield;  
    -webkit-appearance:textfield;     
    -webkit-appearance: none; 
    @include border-radius-reset;
    @include placeholder {
      color: $body-title-color; 
    }
    &:focus, 
    &:active,
    &:hover {
      background: none;
    }
  } 
  .qty-inner {      
    > span {   
      margin: 0 5px ;   
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      padding: 0px;            
      cursor: pointer;
      display: inline-block;    
      z-index: 2;      
      @include ab(50%,n,n,n);
      @include translate(0,-50%);
      i {
        width: 100%;            
        display: block;
        line-height: 20px;  
        font-style: normal;
        font-size: 8px;      
        @include transition(all 0.35s ease 0s);
   
        &:before {
          font-family: "arenafont";
        }
      }
      &.qty-up {    
        right:0;    
        i {
          &:before {
            content: '\e94c';
          }
        }        
      }
      &.qty-down {  
        left:0;      
        i {
          &:before {
            content: '\e8d0';
          }
        }
      }
      &:hover {        
        i {
          color: $main-color;
        }
      }
    }
  }
  &.ajax-true {
    padding: 0 10px!important;
    input[type="number"] {            
      padding: 7px 0px !important;
      width: 100%;
      &::-webkit-inner-spin-button,&::-webkit-outer-spin-button{
        display: none;
      }
    }   
  }
}
.close {
  @include opacity(1);
  filter: alpha(opacity=100);
  text-shadow: 0 0 0 $white;
  -webkit-text-shadow: 0 0 0 $white;
  font-weight: normal;
  margin: 0;
}
.modal-dialog {
  max-width: 100%;
}
#quick-shop-popup {
  background-color: rgba(0,0,0,0.5);  
  .modal-dialog { 
    width: 900px;   
    height: 100%;
    @include translate(0, 0);
    height: 100%;
    margin: auto;
    @media (max-width: 1024px) {
      max-width: calc(100% - 30px);
    }
    .modal-content {           
      border: none;
      @include ab(50%,50%,n,n);
      @include translate(-50%,-50%);
      .modal-header {
        border: 0;
        padding: 0px;
        text-align: right;
        min-height: 0;
        span { 
          @include border-radius-circle;    
          @include box-shadow(0 0px 0px rgba($black, 0.5));
          @include ab(-25px, n, n, -20px); 
          @include transition(all 0.35s ease 0s);                    
          @include width-btn-1;          
          display: block;
          cursor: pointer;          
          text-align: center;
          z-index: 9999;     
          padding: 0;
          margin: 0;             
          &:before {
            @include close-btn;   
            color: $white;                             
          }   
          &:hover {
            @include opacity(1);
            background: $button-hover-btn1;
            &:before {
              color: $button-hover-btn1-txt;
            }
          }  
        }        
      }
      .modal-body {
        padding: 40px 25px;
        display: table;
        width: 100%;
        table-layout: fixed; 
        @media (max-width: 767px) {
          display: block;
          height: 100%;
          overflow-y: auto;
          padding: 20px;
        }
        .product-image {
          width: 41.66666667%;
          padding: 0 15px;
          display: table-cell;
          vertical-align: top;
          @media (max-width: 767px) {
            width: 100%;
            display: block;
            text-align: center;
            padding: 0;
          }
          .owl-item {
            img {
              @media (min-width: 1025px) {
                width: 100%;
              }
            }
          }
          #gallery-qs-image{ 
            .owl-controls{
              .owl-nav{
                position: static;
                >div{
                  width: 25px;
                  height: 40px;
                  line-height: 40px;
                  border: none;   
                  margin: 0;
                  background: none;   
                  @include ab(50%, n, n, n);
                  @include translate(0, -50%);
                  @include box-shadow(0 0px 0px rgba(0, 0, 0, 0.2));                        
                  span {    
                    display: block;                
                    height: 100%;
                    width: 100%;
                    line-height: 100%;                                     
                    @include transition(all 0.35s ease-in-out 0s);
                    &:before {
                      display: block;
                      line-height: 40px;
                      font-size: $body-font-size + 2px;   
                    }
                  }     
                  &.owl-next{
                    right: 0px;  
                    span {
                      &:before {
                        content: '\e9ec';
                      }
                    }
                  }
                  &.owl-prev{
                    left: 0px;       
                    span {
                      &:before {
                        content: '\e9e9';
                      }
                    }
                  }                 
                }               
              }
            }            
            &.no-slider{
              .owl-nav{
                display: none !important;
              }
            }
          }
        }
        .product-info {
          display: table-cell;
          vertical-align: middle;
          width: 58.33333333%;
          padding: 0 15px;          
          @media (max-width: 767px) {
            width: 100%;
            display: block;
            padding: 20px 0 0;
          }
          #qs-product-title {
            margin: 0px;                        
            letter-spacing: normal;
            font-weight: normal;
            font-size: $product-detail-title-size; 
            a {                            
              color: $body-title-color;                          
              &:hover{
                text-decoration: none;
                color: $main-color;
              }
            }  
          }          
          #qs-product-author {                                                
            margin: 0 0 5px;            
            > a {
              color: $body-light-color;
              font-size: $body-font-size - 2px;              
              &:hover {
                color: $main-color;
              }
            }
          }
          #qs-product-price {
            margin: 0 0 10px;
            text-align: left;           
            border: none;               
            color: $body-price-color;      
            overflow: hidden;     
            .price {
              color: $body-price-color;
              font-size: $size-h1 - 1px;    
            }
            .price-sale {   
              font-size: $size-h1 - 1px;    
              display: inline-block;          
              float: left;    
            }
            .price-compare {          
              font-size: $body-font-size;    
              color: $body-price-sold-out-color;                                   
              float: left;
              margin: 15px 0 0 20px;              
            }
            .unavailable {      
              font-size: $product-detail-title-size;     
              color: $body-price-sold-out-color;    
            }
          }               
          .quantity-product {
            margin: 0 15px 0 0;           
            float: left;
            max-width: 85px;                
            height: 50px;
            position: relative;                 
            label {
              display: none;        
            }            
            .quantity {     
              display: block;
              margin: 0;          
              width: 100%;
              height:100%;                  
              input[type=number]::-webkit-inner-spin-button,
              input[type=number]::-webkit-outer-spin-button {
                -webkit-appearance: none;    
              }                       
            }
          }
          .qs-product-button {                      
            display: inline-block;     
            width: calc(100% - 100px);
            .btn {
              min-width: 40px;
              width: 100%;
              line-height: 30px;
              padding: 10px 40px;                          
              height: 50px;               
              font-size: $body-font-size;
              font-weight: $font-medium;
              text-transform: uppercase;
              @media (max-width: 479px) {
                margin-top: 15px;
              } 
              .demo-icon {
               display: none;
              }             
              &:hover {
                color: $button-hover-btn1-txt;
              }
            }  
          }
          .share-links {
            clear: both;
            padding: 30px 0 0;            
            overflow: hidden;
            display: none;
            @media (max-width: 1199px) {
              display: none;
            }
            .share-label {
              float: left;      
              font-size: $body-font-size - 2px;           
              color: $body-title-color;                           
              text-transform: uppercase; 
              line-height: 45px;
              padding: 0 10px 0 0;
              width: 102px;
              display: none;
            }  
            .list-inline {              
              li {
                display: inline-block;
                > a {
                  border: none;
                  padding: 0;
                  i {
                    font-size: $font-icon;
                  }
                }       
              }
            }
          } 
          #qs-description {                                    
            line-height: 22px;   
            overflow: hidden;
            display: -webkit-box;
            display: -ms-box;
            -webkit-line-clamp: 6;
            -webkit-box-orient: vertical;
            max-height: 132px;         
            margin: 0px 0 20px;  
            color: $body-light-color;
            clear: both;
            ul, ol {
              padding-left: 25px;
              list-style-position: outside;
            }
            p {
              line-height: 22px;   
              color: inherit;
            }
            h1, h2, h3, h4, h5, h6 {
              margin: 0 0 20px;
            }            
            img {
              display: none;
            }                      
          }          
          .variants-wrapper {
            width: 100%;
            clear: both;
            margin: 10px 0;
            .selector-wrapper {
              margin-bottom: 15px;
              overflow: hidden;
              select {
                min-width: 180px;
                height: 34px;
                padding: 0px 10px;
                line-height: 32px;                                
                color: $body-title-color;
                -webkit-appearance: menulist;
                @media (max-width: 767px) {
                  min-width: 58%;
                  max-width: 100%;
                }
              }
            }
            label{
              color: $body-title-color;   
              display: inline-block;
              float: left;                                        
              width: 170px !important;
              margin: 0px;
              line-height: 34px;
              padding: 0 10px 0 0;
            }
          }          
          #qs-product-wl {      
            .add-to-wishlist {
              width: 38px;
              height: 38px;
              line-height: 38px; 
              padding: 0;
              text-align: center; 
              span {
                &:before {
                  width: 100%;
                  height: 100%;
                  display: block;
                  text-align: center;
                  line-height: 38px;
                }
              }             
            }
          }
        }
      }
    }
  }  
  .product-image-inner {
    margin: 0; padding: 0;
    position: relative;
    .featured-image {
      display: block;            
      padding: 0px;      
    }
  } 
  .gallery-thumb-img {    
    overflow: hidden; 
    margin: 0px auto;   
    > div {
    	&:not(:first-child) {
    		display: none;
    	}
    } 
    &.owl-theme {
    	> div {
    		display: block;
    	}
    }
    a.thumb-img {
      display: block;
      margin: 0 auto;   
      border: 1px solid transparent;
      overflow: hidden;    
      text-align: center; 
      color: $button-btn1;
      @include opacity(0.5);
      img {
        display: inline-block;
      }
      &.active,
      &:hover {
        @include opacity(1);  
      }
    }
  } 
  #qs-rating {
    line-height: 20px;    
    margin: 10px 0 5px;    
    white-space: nowrap;
    .spr-icon {
      top: 0;
    }    
    .spr-starrating {
      float:left;
      margin-right: 10px;
    }
    .spr-badge-caption {
      float: left;
      color: $body-light-color;
      display: inline-block;      
      font-size: $body-font-size - 1px;
      &:before {
        content: '(';
      }
      &:after {
        content: ')';
      }
    }
  }  
}

/* Popup newsletter ------------------------------*/
.fancybox-opened {
  z-index: 999999;
}
.fancybox-skin {
  padding: 0px !important;  
  color: $body-general-color;
  @include border-radius-reset;
  .fancybox-close {       
    @include border-radius-circle;    
    @include box-shadow(0 0px 0px rgba($black, 0.5));
    @include ab(-25px, n, n, -20px);          
    @include width-btn-1;     
    display: block;
    cursor: pointer;
    text-align: center;       
    &:before {
      @include close-btn; 
      color: $white;
    }   
    &:hover {
      @include opacity(1);
      background: $button-hover-btn1;
      &:before {
        color: $button-hover-btn1-txt;
      }
    }    
  }  
  #mailchimp-popup {
    background-color: $body-background-color;        
    position: relative;       
    display: table;
    width: 100%;
    height: 100%;
    padding: 0 15px;
    vertical-align: middle;   
    @media (max-width: 767px) {
      overflow-y: auto  ;
      padding: 30px 20px;
      display: block;
    }
  }    
}
.mailchimp-popup-img {       
    width: 45%;
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    @media (max-width: 767px) {
      display: none;
      width: 100%;      
    }
}
.mailchimp-popup-content {   
    display: table-cell;
    vertical-align: middle;
    width: 55%; 
    padding: 0px 30px 0px 40px;              
    text-align: center;     
    @media (max-width: 767px) {         
      width: 100%;
      padding: 0;   
      display: block;   
    }  
    .title {         
      font-weight: $font-bold;
      text-transform: capitalize;
      font-size: $size-h1;
      line-height: 0.9;
      margin: 0 0 10px;  
      color: $popup-letter-title;            
    }
    .mailchimp-caption-1 {      
      
      color: $popup-letter-subtitle;      
      padding: 10px 0;
      line-height:26px;
    }   
    #mc-form {
      margin: 25px 0 40px;
      padding: 0;
      height: 40px;
      border: 2px solid $body-border-color;
      position: relative;      
      clear: both;            
      text-align: left;
      #mc-email {                
        width: 75%;      
        height: 38px;
        border: none;        
        background: none;
        padding-left: 20px;
        @media (max-width: 479px) {
          width: 100%;
        }
        &:focus {
          @include box-shadow(0 0 0 #fff);
          background: transparent;          
        }
        @include placeholder {
          color: inherit;
        }
      }
      .btn {                                
        @include ab(-2px, n, n, -2px);       
        padding: 0px 30px;
        height: 40px;
        font-size: 16px;
        font-weight : $font-medium;   
        border-radius: 0; 
      } 
      i {
        display: none;
      }   
      @media(max-width: 360px){
        margin-bottom: 70px;
        .btn{
          position: static;
          margin: 10px auto 0;
        }
      }  
    } 
    .widget-social-icons{
      li{
        margin: 0 5px;
        img{@include border-radius-circle;}
      }
    }   
}
.leaves {
  display: none;
  z-index: 999999; 
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  .underlay {
    background: rgba(0, 0, 0, 0.5);   
    height: 100%;
    left: 0;    
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99992;    
  }
  .wrap-modal {
    background: $body-background-color;
    z-index: 99999;
    padding: 0px;        
    margin: 0 calc((100% - 730px) / 2);
    width: 730px;
    @include ab(50%, 0, n, n);
    @include translate(0, -50%);  
    @media (max-width: 767px) {
      top: 5%;
      width: 90%;
      margin: 0 5%;
      max-height: 90%;
      overflow-y: auto;
      @include translate(0, 0);
    }
    .modal-body {
    	min-height: 390px;    
    	display: table;    
	    vertical-align: middle;	    
	    table-layout: fixed;
	    padding: 0;
	    width: 100%;
	    @media (max-width: 767px) {
	      overflow-y: scroll;
	      padding: 30px 20px;
	      display: block;
	    }   
    }
    > a {
      @include box-shadow(0 0px 0px rgba($black, 0.5));
      @include ab(n, n,100%, 0); 
      @include transition(all 0.35s ease 0s);                    
      @include width-btn-1; 
      z-index: 999991;    
      @media (max-width: 767px) {
        top: 0;
        right: 0;
        bottom: auto;
      }
      i {
        &:before {
          @include close-btn;   
          color: $white;                             
        } 
      }
      &:hover {
        background: $button-hover-btn1;
        &:before {
          i {
            &:before {
              color: $button-hover-btn1-txt;
            }
          }
        }
      }
    }
  }  
}
/*Popup Pre-order Form --------------------------- */
#pre-order-popup{
  padding: 40px;
  .form-group{
    margin-bottom: 20px;
  }
  .form-control{
    @include border-radius-reset;
    &:focus{
      border-color: $main-color;
    }
  }
  .form-actions{
    .btn{
      font-weight: $font-medium;
      text-transform: uppercase;
    }
  }
}
/* Back to top ---------------------------------*/
#scroll-to-top {
  @include transition(all 0.2s ease-out 0s); 
  -moz-backface-visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
  position: fixed;
  right: 15px;
  bottom: 10px;
  z-index: 1000;
  display: block;
  cursor: pointer;
  text-align: center;
  &.on {
    bottom: 10%;
    opacity: 1;    
    filter: alpha(opacity=100); 
  }
  i {   
    display: none;    
  }
  a {
    position: relative;
    width: 45px;
    height: 45px;
    line-height: 45px;    
    display: block;
    border: none;
    @include transparent($main-color, 1);
    @include transition(all 0.3s ease-in-out 0s);    
    &:before {
      content: "\f106";
      font-size: 20px;
      padding: 0;
      width: 45px;
      height: 45px;
      line-height: 45px;
      text-align: center;  
      color: $white;
      font-family: "arenafont";
      display: block;      
      @include transition(all 0.3s ease-in-out 0s);
    }
    &:hover {
      text-decoration: none;
    }
  }
  &:hover{
    a {
      @include transparent($main-color, 1);
      &:before {        
        color: $white;
      }
    }
  }
}

/*menu on PC---------------------------------*/
.horizontal-menu {      
  background: none;  
  position: static;    
  .navbar .navbar-collapse {
    .menu-list {      
      > li {
        @include transition(all 0.35s ease);
        &.dropdown {  
          > .dropdown-menu {
            display: block !important;  
            top: 100%;
            left: 0px !important;    
            @include dropdown-effect;
            @include translate(0%, 10px);              
          }
          &:hover,                    
          &.hover {
            > .dropdown-inner > a,
            > a { 
              position: relative;                      
            }
            > .dropdown-menu {              
              background: $nav-dropdown-background;                         
              @include dropdown-effect-hover;    
              z-index: 99999;                      
            }
          }
          &.mega-menu {
            position: static;                        
            > .dropdown-menu {                    
              left: 50% !important;                                          
              @include translate(-50%, 10px);                               
              .dropdown-menu {
                font-size: $nav-sub-font-size;                 
              } 
              &.column-4 {
                width: 100%;                
              }
              &.column-3 {
                width: 75%;                             
              }
              &.column-2 {
                width: 50%;               
              }
              &.column-1 {
                width: 25%;                
              }
            }
            &:hover,                    
            &.hover {
              > a { 
                position: relative;  
              }
              > .dropdown-menu {    
                @include translate(-50%, 0px);                
              }
            }
          }                  
        }       
        &:hover {          
          @include border-radius(0px, 0px, 0, 0);
          background-color: $nav-link-hover-bg-color;
          > .dropdown-inner > a,
          > a {
            color: $nav-link-hover-color;             
          }
          > .dropdown-inner > span.expand,
          > span.expand {            
            color: $nav-link-hover-color;             
          }
        }
      }
    }
  }
}
.labels-wrapper {
  @include ab(5px, 100%, n, n);
  z-index: 2;
  .menu-label {
    display: block;    
    font-size: 11px;
    font-weight: 400;
    padding: 0 6px;
    line-height: 16px;
    @include border-radius(2px, 2px, 2px, 2px);
    &.label-new {
      background: $label-new-bg;
      color: $label-new-color;
    }
    &.label-hot {
      background: $label-hot-bg;
      color: $label-hot-color;
    }
    &.label-sale {
      background: $label-sale-bg;
      color: $label-sale-color;
    }
  }
} 
.sidemenu-holder,
.vertical-navbar {    
  .dropdown-menu {  
    padding: 5px 0;  
    > li {
      padding: 0;
      > a { 
        line-height: 20px;
        padding: 6px 24px;
        display: block;        
      }    
    }
  }
  .navbar {
    position: static;    
    border: none;
    margin: 0;    
    @include box-shadow(0 0 0 transparent);
    @include border-radius(0, 0px, 0px, 0px);
    .navbar-collapse {
      padding-left: 0;
      padding-right: 0;
      position: static; 
      .menu-list {       
        width: 100%;        
        position: static;         
        margin: 0px auto;        
        border: none;                         
        @include border-radius(0px, 0px, 0, 0);
        .product-add-cart{
          display: none;
        }
        @media(min-width: 992px){
          .back-prev-menu{
            display: none !important;
          }
        }
        span.expand {  
          padding: 0;     
          cursor: pointer;                                  
          position: relative;   
          display: inline-block;
          font-size: 12px;
          width: 20px;
          text-align: center;
          color: $nav-dropdown-link-color;                          
          &:before {
            content: '\f004';
            font-family: arenafont;
          }
        }
        > li { 
          float: left;             
          padding: 0 13px;
          margin: 0;                    
          margin-bottom: 0px; 
          @include transition(all 0.35s ease 0s);
          > .dropdown-inner > a,                           
          > a {                  
            font-size: $nav-font-size;            
            margin: 0;            
            display: inline-block;
            text-decoration: none;            
            line-height: 25px;  
            padding: 12.5px 0px;   
            font-weight: $font-medium;         
            color: $nav-link-color;                              
            position: relative;                                             
            &:hover {               
              color: $nav-link-hover-color;             
            }                         
          }  
          > .dropdown-inner > span.expand,
          > span.expand {
            color: $nav-link-color;           
          }
          /*have submenu*/
          &.dropdown {
            position: relative;  
            .dropdown-menu {
              li {
                position: relative;  
                .dropdown-link {
                  margin-right: 30px;
                }             
                span.expand {
                  position: absolute;
                  top: 0;
                  right: 0px;
                  height: 32px;
                  width: 30px;
                  text-align: center;
                  line-height: 32px;
                  display: block;  
                  &:before {
                    content: '\f006';
                  }                   
                }
              }
            }
            > .dropdown-menu {                                                     
              background: $nav-dropdown-background;              
              font-size: $nav-sub-font-size;              
              &.column-4 { width: 891px; }
              &.column-3 { width: 665px; }
              &.column-2 { width: 410px; }
              &.column-1 { width: 225px; }              
              > li {
                > a {                  
                  color: $nav-dropdown-link-color;
                  white-space: normal;
                  span {
                    color: $nav-dropdown-link-color;   
                    @include transition(all 0.35s ease 0s);                                                                
                  } 
                }
                .dropdown-menu {
                  background: $nav-dropdown-background;         
                  > li{
                    span.expand {
                      color: $nav-dropdown-link-color;
                    }
                    > a{                      
                      color: $nav-dropdown-link-color;
                      white-space: normal;     
                      span{
                        color: $nav-dropdown-link-color;
                      }                     
                      &:hover {                         
                        span{                          
                          color: $nav-dropdown-link-hover-color;
                        }
                      }
                    }
                    &:hover {
                      > span.expand {
                        color: $nav-dropdown-link-hover-color;
                      }
                      > a {                       
                        span {                          
                          color: $nav-dropdown-link-hover-color;                          
                        }
                      }
                    }
                    &:last-child {
                      > a {
                        border-bottom: none;
                      }
                    } 
                  }
                } 
                &:hover {                   
                  > span.expand {
                    color: $nav-dropdown-link-hover-color;
                  }
                  > a {                                                   
                    span {                      
                      color: $nav-dropdown-link-hover-color;
                    }
                  }
                }
                &:last-child {
                  > a {
                    border-bottom: none;
                  }
                }               
              }
              > li.dropdown-submenu {                
                > .dropdown-menu{                                    
                  background: $nav-dropdown-background;
                }
              }
              .product-button {
                display: none;
              }
            }
            .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;
                  white-space: inherit; 
                  border: none; 
                  padding:  0;
                  margin: 6px 0;               
                  span {
                    color: $nav-dropdown-link-color;
                  }
                  &:hover {                  
                    span {
                      color: $body-second-color;
                    }
                  }
                }
              }
            }            
            &:hover , &.hold {              
              z-index: 22;                                
              > .dropdown-menu {
                left: 100%;
                display: block;                
              }
            }            
            &.mega-menu:hover > .dropdown-menu, &.mega-menu.hold > .dropdown-menu {
              .dropdown-menu-sub {
                display: block;
              }
            }
          }
          &:hover {
            > a {
              @media (min-width: 1025px) {
                &:after {
                  @include opacity(1);
                }
              }
            } 
          }
          &:first-child {
            > a {
              &:before {
                content: none;
              }
            }
          }
        }
        > li.mega-menu {
          > .dropdown-menu { 
            padding: 20px;     
            .mega-image-bottom {
              margin-top: 10px;
              > a {
                display: block;
                position: relative;               
              }
            }          
            .mega-sub-link {
              overflow: hidden;   
              margin-bottom: 20px;            
              > a {                                                
                font-size: $nav-sub-font-size - 1;                          
                position: relative;
                display: block;
                padding: 0 0 10px;
                margin: 0 0 10px;
                line-height: 1.618em; 
                font-weight : $font-medium;                                         
                color: $nav-dropdown-link-color;      
                border-bottom: 1px solid $body-border-color;       
                text-transform: uppercase;        
                &:hover {                 
                  color: $nav-dropdown-link-hover-color;
                }
                &.mega-image {                  
                  padding: 0;
                  margin: 15px auto 18px;
                  border: none;
                  position: relative;                 
                }
              }
              > span.expand {
                display: none;
              }
              .dropdown-menu {
                margin: 0;                
              }
              .dropdown-menu-sub {  
                padding: 0;              
                &:before {
                  content: none;
                }
                li{
                  border: none;
                  padding: 0;
                  a{                                        
                    display: block;                                                                                       
                    &:after {
                      content: none;
                    }
                    &:hover {                                        
                      color: $nav-dropdown-link-hover-color;                       
                    }
                  }
                  &:hover {                    
                    background: none;
                  }
                }
              }
              .bp-item {

                margin-top: 20px;
                display: table;
                &:not(:last-child){
                  margin-bottom:20px;
                }
                &>div{
                  display: table-cell;
                  vertical-align: middle;
                  float: none;
                }
                .sb-product-head{
                  width: 30%;
                  padding-right: 5px;
                }
                .sb-product-content{
                  width:70%;
                  padding-left: 15px;
                  .product-name{
                    color: $body-title-product;     
                    font-size: $product-font-size + 1;      
                    font-weight: $font-regular;
                    margin: 0 0 7px;      
                    line-height: 1.4;          
                    position: relative;  
                  }
                  .sb-price{
                    .price-sale{
                      font-size: $size-h5;
                      font-weight: $font-medium;
                      float: none;
                      margin: 0;

                    }
                    .price-compare{
                      margin-right :5px;
                    }
                  }
                }
                
              }
              &.no-title-0 {
                > a,
                > span.expand {
                  display: none !important;
                }                               
              }
              &.no-title-2 {
                > a,
                > span.expand {
                  display: none !important;
                }                        
              }
              &.banners {                              
                margin: 0;
                > a {
                  margin: 0;
                }
                &.no-title-1 {
                  > a,
                  > span.expand {
                    display: none !important;
                  }                 
                } 
                .dropdown-menu {                                
                  > li {
                    padding: 0;
                    text-align: center;
                    margin: 0 0 20px;
                    > a {
                      padding: 0;    
                      span {
                        padding: 10px 0;
                        display: block;
                        font-weight: 500;
                        text-transform: uppercase;     
                        @include transition(all 0.35s ease 0s);
                      }
                      &:hover {
                        span {
                          color: $nav-link-hover-color;
                        }
                      }
                    }
                    &:hover {
                      background: none;
                    }
                    &:last-child {
                      margin-bottom: 0;
                    }
                  }
                }
              }        
            }
            .product-title {
              a{
                color: $nav-dropdown-link-color !important;
                &:hover{
                  color: $nav-dropdown-link-hover-color !important;
                }
              }
            }
          }
          .mega-col {              
            img {
              @include transition(all 0.35s ease 0s);
              display: block;
              width: 100%;
              border: none !important;
              @include box-shadow(0 0 0 $white);
              &:hover {                
                @include box-shadow(0 0 0 $white);
              }
            }
          }

           //new mega-menu horizontal
            .menu-product-carousel{
            position: relative;
            .owl-nav{
              position: static;
              opacity: 0;
              @include transition(all 0.35s ease);
              &>div{

                @include ab(50%,n,n,n);
                @include translate(0,-50%); 
                &.owl-prev{
                  left: 0;
                }
                &.owl-next{
                  right: 0;
                }
              }
            }
            .owl-item{
              opacity:0;
              &.active{
                opacity: 1;
              }
              .product-wrapper{
                padding-left: 5px;
                padding-right: 5px;
                .product-swatch-images{
                  display:none;
                }
                .product-inner-wrapper{
                  
                  
                  img{
                    max-width: 70%;
                  }
                }
                &:hover{
                  .product-inner-wrapper{
                    box-shadow: 0 0 4px 2px #f2f2f2 !important;
                  }
                 
                }
              }
            }
            &:hover{
              .product-inner-wrapper{
                box-shadow: 0 0 2px 4px #f2f2f2;
              }
              .owl-nav{
                @include opacity(1);
              }
            }
            }    
            .dropdown-menu-tabs{
              .mm-tab-col-title{
                border-right: $body-border-color;
                padding: 0;
                .tab-title{
                  padding: 0;
                  height: 100%;
                  margin: 0;
                  >li{
                    padding: 10px 20px;
                    line-height: 20px;
                    text-transform: uppercase;
                    cursor: pointer;
                    font-size: $body-font-size;
                    position: relative;
                    @include transition(all 0.35s ease);
                    &:before{
                      content:'\f105';
                      font-family: 'arenafont';
                      @include ab(50%,n,n,10px);
                      
                      @include translate(0,-50%);
                    }
                    &.hover,&:hover,&.active{
                      background-color: $body-background-color;
                      color: $main-color;
                    }
                  }
                } 
              }
              .mm-tab-col-content{
                position: relative;
                padding: 0 ;
                .tab-content-inner{
                  visibility: hidden;
                  padding: 0 15px;
                  @include ab(0,0,n,n);
                  @include opacity(0);
                  @include transition(all 0.35s ease);
                  
                }
              }

            }

            &.dropdown{
              .position-left{
                left: 0 !important;
                transform: none !important;
              }
              .position-right{
                right:0 !important;
                transform: none !important;
              }
              .position-center{
                left: 50% !important;
              }
            }
            
          &:hover,&.hover{
            .tab-content-inner.active{
              @include opacity(1);
              visibility: visible;
              position: static;
            }
          }
        }
      }
    }
  }
}

/* Menu mobile -----------------------------*/

.mobile-version {
  width: 100%; 
}
.mobile-layout-bar {
  border-top: 1px solid rgba($main-color-text, 0.1);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  max-height: 52px;
  background: $main-color;
  .waiting {
    background: transparent;
    padding: 0;
  }
  img {
    image-rendering: pixelated;
    &.lazyloaded {
      width: auto !important;
    }
  }
  .m-block-icons {
    display: flex;
    width: 100%;
    > li {
      display: block;
      width: 100%;
      vertical-align: middle;
      text-align: center;
      border-right: 1px solid rgba($main-color-text, 0.1);
      height: 56px;
      > a {
        color: $main-color-text;
        display: block;        
        line-height: 54px;         
        position: relative;  
        i {
          font-size: 24px;
        }   
        .expand {
          i {
            font-size: 14px;
          }
        }
      }
      &:last-child {
        border: none;
      }
      &.wishlist-target,
      &.compare-target {
        .wishlist-icon,
        .compare-icon {
          display:block; position: relative;
          .number {
            @include icons-number;                        
            @include translate(-50%, 0);   
            background: $text-header-color;
            color: $bg-header-color;
            top: auto;
            right: auto;   
            left: 50%;
            top: 5px;
            margin-left: 15px;      
          }
        }
      }
      &.currency {
        position: relative;
        .dropdown-toggle {
          &:after {
            content: none;
          }
        }
        .currencies {
          @include ab(n, 50%, 100%, n);
          @include translate(-50%, 0);
          width: 100%;         
          min-width: 65px;
          padding: 5px 0;
          margin: 0;
          text-align: left;
          list-style: none;
          background: $white;          
          border: 1px solid $body-border-color;          
          visibility: hidden;
          z-index: -99;                  
          @include opacity(0);
          @include border-radius-reset;
          @include box-shadow(0 6px 12px rgba($black, 0.176));
          @include transition(all 0.35s ease 0s); 
          &:before {
            content: '';
            height: 2px;
            background: $main-color;
            @include ab(-1px, -1px, n, -1px);
          } 
          > li {
            display: block;
            padding: 15px;
            > a {
              display: block;
              white-space: nowrap;
              i {
                display: inline-block;
                margin-right: 5px;
              }
              span {
                font-size: $body-font-size - 2px;
              }
            }
          }
        } 
        &.opened {
          .currencies {
            @include opacity(1);
            visibility: visible;
            z-index: 99;
          }
        }            
      }      
    }
  }
}
.menu-mobile {
  border: 0;
  top: 0 !important;
  position: fixed;
  width: 340px;
  z-index: 999999;
  height: 100%;  
  max-height: 100vh;
  left: 0px;
  overflow-y: auto;
  background: #fff;
  @include translate(-340px, 0);  
  @include transition(all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94));   
  @media (max-width: 340px) {
    width: 100%;
  }
  &.opened {
    @include translate(0px, 0px);
    background: #fff;
    @include border-radius(0, 0, 0, 0); 
    .m-close {
      @include opacity(1);
    }
  }
  .mobile-title-wrapper{
    display: flex;
    width: 100%;
    min-height: 60px;
    font-size: $body-font-size + 4px;     
    color: $main-color-text;      
    background: $main-color;
    position: relative;
    padding: 5px 0;
  }
  .m-close{
    color: #000;
  }
  .m-title{
    display:flex;
    width: 100%;
    align-self: center;
    padding: 0 50px;
  }
  #title-menu{
    text-transform: uppercase;
    font-weight:$font-medium;
    .labels-wrapper{
      display: none !important;
    }
  }
  .mm-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    .is-mobile-nav{
      height: 100%;

    }
  }
  .main-nav {
    position: relative;
    height: auto;
    .dropdown-menu li {
      padding: 0;
      border-bottom: 1px solid $body-border-color;
      &.col-item{
        border:none;
      }
    }
    .dropdown {
      &.open > .dropdown-menu {
        display: none;
      }
      .dropdown-menu{
        box-shadow: none;
        @include ab(0,0,n,n);
        width: 100%;
        height: 100%;
        @include translate(-100%,0);
        @include opacity(0);
        @include transition(all 0.5s ease);
      }
      .mega-col{
        position: static;
      }
      >a,>.dropdown-inner>a{
        pointer-events: none;
      }
      &.no-title-0,&.no-title-1,&.no-title-2{
        border: none !important;
        >a,>.expand{
          display: none;
        }
        .dropdown-menu{
          position: static;
          transform: none;
          @include opacity(1);
        }
      }
      &.menu-mobile-open {
        border-bottom: none;
        position: static;
        > .dropdown-menu {
          display: block;
          clear: both;
          border: none; 
          background: $white;
          transform: none;
          @include opacity(1);
          z-index: 999;
          >.back-prev-menu,>.row>.back-prev-menu{
            @include opacity(1);
            visibility: visible;
          }
          &:before {
            content: none;
          }
          .container {
            width: auto;
            padding: 0;
            .row {
              margin: 0;
              div {
                width: 100%;
                padding: 0;
                &.banners {
                  display: none;
                }
              }
            }
          }
        }
      }    
    }
    > li {
      display: block;      
      clear: both;
      border-bottom: 1px solid $body-border-color; 
      width: 100%;
        a {
          padding: 10px 20px;
          display: inline-block;  
          width: auto; 
          line-height: 26px;           
          color: $black;
          font-size: $body-font-size + 2px;  
          position: relative;
 
        }
      > .dropdown-inner > a,
      > a {  
        display: inline-block;    
        position: relative;   

        img {
          max-width: 30px;
          margin-right: 15px;
        }
        &.dropdown-link{
          >span:not(.labels-wrapper){
            position: relative;
            z-index: -1;
          }
        }
      }     
      .icon-nav {
        display: none;
      }
      > a {
        &:hover, &:focus {
          text-decoration: none;
        }
      }
      > .dropdown-inner > span.expand,
      > span.expand {
        width: auto;
        text-align: right;
        color: $black;
      }
      &.menu-mobile-open{
        > .dropdown-inner > a,
        > a {
          text-decoration: none;          
          font-weight : $font-medium;              
        }

      }
      &.dropdown { 
        position: static;
        &.menu-mobile-open {          
          > .dropdown-menu {
            border-top: 1px solid $body-border-color;
            display: block;
            width: 100% !important;
            min-height: 0 !important;
            z-index: 999;
            box-shadow: none;
            @include box-shadow(0 0 0 rgba(0, 0, 0, 0.2));
            @include translate(0,0);
          }
        }        
        .dropdown-menu {
          width: 100%;
          padding: 0;          
          border-top: none;
          background: #fff;
          &:before {
            content: none;
          }
          >li {      
            >a {
              white-space: normal;
              padding: 10px 20px 10px 20px;              
              background: none;     
              margin: 0;          
              font-family: $font-standard;
              font-size: $body-font-size + 2px;           
            }
          }          
          .dropdown-submenu {           
            .dropdown-menu {
              padding: 0;
              left: 0;
              @include box-shadow(0 0 0 rgba(0, 0, 0, 0.2)); 
              border-bottom: 1px solid $body-border-color;
              li {
                border-bottom: 1px solid $body-border-color;
                a {
                  color: $black;                  
                  border: 0;
                  padding: 10px 15px 10px 20px;
                  background: none;
                  font-family: $font-standard;
                  font-size: $body-font-size + 2px;     
                  &:hover {
                    text-decoration: none;
                    color: $nav-dropdown-link-hover-color;
                  }
                }
                &:last-child {
                  border-bottom: 0;
                }
              }
            }
            &.dropdown {              
            > a {
              padding-right: 35px;
            }
        }
            &.menu-mobile-open {              
              > .dropdown-menu {
                display: block;
                visibility: visible;
                @include opacity(1);
                z-index: 999;
                box-shadow: none !important;
              }
              >  span.expand {
                color: $nav-dropdown-link-hover-color;   
              }
            }
          }          
        }
      }
     
    }
    .product-button {
      display: none !important;
    }
    span.expand {
      z-index: 5;
      right: 0px;
      top: 0px;
      width: 100%;
      height: 46px;
      line-height: 46px;
      text-align: right;
      padding: 0;
      font-size: 14px;
      cursor: pointer;      
      color: $black;       
      &:before {
        content: "\f105";
        font-family: arenafont;
        font-size: $font-small-icon;
        display: block;
        text-align: center;
        width: 46px;
        float: right;
        line-height: 46px;
        @include transition(all 0.35s ease 0s);
      }   
    }
    .mega-menu {
      .mega-image-bottom {
        padding: 0;
        > a {
          padding: 15px;
        }
      }
      .product-wrapper {
       
        a{
          border: 0;
          padding: 0 ;
        }
        img{ width: 100%;}
      }
      .dropdown-menu {
        padding: 0px !important;
        @include box-shadow(0 0 0 rgba(0, 0, 0, 0.2));
        > .row { margin: 0; }
        li a{
          padding: 15px 20px;
        }
        .mega-sub-link {         
          padding-bottom: 0;  
          clear: both;
          border-bottom: 1px solid $body-border-color;
          > .dropdown-menu-sub {
            border: none;
          }                
          a{
            padding: 10px 19px 10px 20px;    
    
            &.mega-image {
              padding: 15px;
            }
          }
          &.dropdown {
            > a {
              padding-right: 35px;           
            }
          }
          &.menu-mobile-open {
            > a {
              transition: none;
              -webkit-transition: none;
              font-weight : $font-medium;                
            }
            span.expand {              
              &:before {
                &:before {
                  content: "\f106";
                }                
              }
            }
          }
          &.banners {                 
            .dropdown-menu-sub {
              a {
                padding: 15px;     
                width: 100%;
                > span {
                  display: block;
                  padding: 5px 0 0;                  
                }
                img{
                  width: 100%;
                }
              }
              &.no-title-1 {
                > a,
                > span.expand {
                  display: none !important;
                } 
                .dropdown-menu {
                  display: block !important;    
                  li {
                    a {
                      span {
                        display: block;
                        padding: 5px 0;
                      }
                    }
                  }
                }
              } 
            }
          }
        }        
        .mega-col {
          padding: 0;          
          width: 100%; 
          clear: both;
          max-width: 100%;                    
          @include flex(0 0 100%);
          .bp-item {
            width: 100%;            
            display: block;
            margin: 0;
            padding: 15px;
            overflow: hidden;            
            .sb-product-head {
              padding: 0;
              a {
                padding: 0 !important;
                border: none;
                margin: 0 !important;
              }
              .product-name {
                font-size: $product-font-size;
                margin: 0 0 10px;
                a {
                  padding: 0;
                  margin: 0;
                  border: none;
                  font-weight : $font-medium;
                  color: $body-title-product;
                  font-size: $product-font-size;
                }
              }
            }
            .sb-product-content {
              padding: 10px 0 0;                            
              .product-review {
                display: none;
              }
            }  
            &:hover {
              a {
                text-decoration: none !important;
              }
            }          
          }         
          .dropdown-menu.fix {
            > li{
              border-bottom: 0 !important;
            }
          }
        }
        .dropdown-menu-sub {
          padding: 0px !important;          
          a{
            padding: 10px 15px 10px 20px;
            font-size: $body-font-size + 2px;            
            &:hover{
              text-decoration: none;
              color: $nav-dropdown-link-hover-color;
            }           
          }
          > li {
            &:last-child {
              > a {
                border-bottom: none;
              }
            }
          }
        }
      }    
      .menu-product-carousel{
        height: auto;
        display:none;
        .owl-item{
          opacity: 0;
          a{border:none;padding:0;}
          &.active{
            opacity:1;
          }
          .product-wrapper{
            padding: 5px;
            
          }
        }
        .owl-nav{
          position: static;
          >div{
            @include ab(50%,n,n,n);
            &.owl-prev{
              left: 0;
            }
            &.owl-next{
              right: 0;
            }
          }
        }
        &.owl-loaded{
          display:block;
        }
      } 
      .bp-item{
        .product-name a{
          padding-left: 0;
        }
      }
    }
    li{
      clear: both;
      margin-bottom: 0;       
    }    
    .back-prev-menu{
      text-align: center;
      background: $body-second-color;
      z-index: 999; 
      display: block;
      cursor: pointer;
      border: none !important;
      opacity: 0;
      visibility: visible;
      
      @include transition(all 0.35s ease 0s);
      @include ab(n,15px, calc(100% + 15px), n); 
      @include width-btn;
      @include border-radius(3px,3px,3px,3px);
      &:hover{
        color: $main-color; 
      }
      
    }
  }
}

/* main slideshow -----------------------------------*/
.slideshow-catalog-wrapper {
  @include translate3d(0, 0, 0);
}
.bc-wrapper {
  position: relative; 
  z-index: 1;   
  overflow: hidden;   
  &:hover {
    .swiper-button-white {
      @include opacity(1 !important); 
      &.swiper-button-disabled {
        @include opacity(0 !important);
      }
    }
    .video-slide {
      .video {
        z-index: 1;
      }
    }      
  }
  &.full-height {
    .home-slideshow {      
      .swiper-slide {
        min-height: 100vh;
        > a {
          @include ab(0, 0, 0, 0);
        }
        @media (max-width: 1200px) {
          min-height: 80vh;
        }
        @media (max-width: 479px) {
          height: 60vh;
        }
      }
    }
  }
  &.full-padding {
  	.container {
  		max-width: 1430px;
  	}
  	.tab-wrapper {
  		max-width: 1430px;
  	}  
  	.swiper-pagination { 
		bottom: 18px;
		@media (max-width: 479px) {
			bottom: 0;
		}
	}	  	
  	.swiper-slide {
  		@media(min-width: 992px) {
  			min-height: 700px;
  		}
  	}
  }
  &.boxed {
    margin: 0px auto;
    @media (min-width: 767px) {
      width: 100%;
  	}  
    @media (min-width: 768px) {
        max-width: 760px;
    }
    @media (min-width: 992px) {
      max-width: 980px;
    }
    @media (min-width: 1200px) {
        max-width: 1200px;
    }
    .swiper-button-next {
      @media (min-width: 768px) {
        right: 25px;
      }
    }
    .swiper-button-prev {
      @media (min-width: 768px) {
        left: 25px;
      }
    }
    .container {
      max-width: 100%;
      @media (min-width: 768px) {
        padding: 0 65px;
      }
    } 
  }
  .tab-wrapper {
  	max-width: 1200px;
  	padding: 0 15px;
  	@media (min-width: 992px) {  		
	  	@include ab(n, 0, 0, 0);	  	
	  	margin: 0 auto;
	}	
	@media (max-width: 991px) {
		margin-top: 15px;
		display: none;
	}	
	.tab-content {
	  	position: relative;
	  	clear: both;
	  	z-index: 2;
	  	.tab-pane {
	  		@include ab(0, 0, n, n);
	  		@include opacity(0);
	  		width: 100%;
	  		&.active {
	  			position: static;
	  			@include opacity(1);
	  		}
	  	}
	  	.owl-stage {	  		
  			padding-bottom: 48px;
  			padding-top: 2px;	  		
	  	}
	  	.product-wrapper {
	  		&:before {
	  			content: none;
	  		}
	  		&:after {
  				bottom: 0;
  			}
	  		.product-head .product-name {
	  			height: 38px;
	  			line-height: 19px;
	  			overflow: hidden;
          display: -webkit-box;
          display: -ms-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin: 0 0 10px;
	  		}
	  		.product-content {
	  			.pc-inner .price-cart-wrapper {
	  				border: none;
	  				padding-bottom: 0;
	  			}
	  			.product-price {
		  			@media (min-width: 1025px) {
		  				@include ab(0, 0, n, n);
			  			width: calc(100% - 38px);			  			
		  			}
		  		}
	  		}
	  		&:hover {
	  			.product-content .product-button {
	  				display: none;
	  			}	  			
	  		}
	  	}
	  	.owl-theme .owl-controls .owl-nav {
			position: static;
			> div {
	          @include ab(50%, n, n, n);
	          @include translate(0, -50%);
	          span {
	            &:before {
	              font-size: 40px;
	            }
	          }
	          &.owl-prev {
	            left: 0;
	            @media (min-width: 1500px) {
	            	left: -38px;
	            }
	          }
	          &.owl-next {
	            right: 0;
	            @media (min-width: 1500px) {
	            	right: -38px;
	            }
	          }
	        }
		}
	}
  }
  .nav-tab-wrapper {  
  	z-index: 2;	  	  		
  	@media (min-width: 992px) {  		
	  	width: 200px;
	  	background: $body-background-color;
	  	@include border-radius(5px, 5px, 5px, 5px);
	  	float: right;
	  	margin: 0 0 3%;	  	
  	}
  	.nav {  		
  		@media (min-width: 992px) {
  			border: none;
  			padding: 0;
		  	&:before {
		  		content: none;
		  	}
  		}
  		@media (max-width: 991px) {
  			text-align: center;
  		}
  	}
	.nav-item {
		@media (min-width: 992px) {
	  		display: block;
	  		margin: 0;   		 		
	  		a {
	  			display: block;
	  			text-align: left;
	  			line-height: 22px;
	  			padding: 7px 25px;  			
	  			font-size: $body-font-size;  			
	  			&:before {
	  				content: none;
	  			}
	  			&:after {
	  				content: '';
	  				width: 26px;
	  				height: 26px;
	  				background: transparent;
	  				@include rotate(45);
	  				@include ab(5px, -13px, n, n);
	  				bottom: auto;
	  				right: auto;
	  				@include transition(all 0.35s ease 0s);
	  			}
	  			&:hover {
	  				@media (min-width: 1025px) {  					
	  					font-weight: $font-bold;	  				
	  				}
	  			}
	  			&.active {
	  				background: $main-color;
	  				color: $main-color-text;
	  				&:after {
	  					background: $main-color;
	  				}
	  			}
	  		}
	  		&:first-child {
	  			a {
	  				&.active {
	  					@include border-radius(0, 5px, 0, 0);
	  				}
	  			}
	  		}  		
	  		&:last-child {
	  			a {
	  				&.active {
	  					@include border-radius(0, 0, 5px, 0);
	  				}
	  			}
	  		}  		
	  	}
	  	@media (max-width: 991px) {
	  		padding: 0 20px;
	  	}
  	}  	
  }  
}
.slideshow-tabs-list {
	vertical-align: top;
	letter-spacing: -0.31em;  
	margin: 0 -5px;
	> .product-wrapper {		
	    vertical-align: top;
	    letter-spacing: 0;
	    display: inline-block;  
	    margin: 0 5px 20px;
	    @media (min-width: 1200px) {
	    	width: calc(14.2857% - 10px);	    	
	    }
	    @media (max-width: 1199px) and (min-width: 1100px) {
	    	width: calc(16.666666% - 10px);
	    }
	    @media (max-width: 1099px) and (min-width: 1025px) {
	    	width: calc(20% - 10px);
	    }
	    @media (max-width: 1024px) and (min-width: 992px) {
	    	width: calc(25% - 10px);
	    }
	    @media (max-width: 991px) and (min-width: 768px) {
	    	width: calc(33.33333% - 10px);
	    }
	    @media (max-width: 767px) and (min-width: 480px) {
	    	width: calc(50% - 10px);
	    }
	}
	&.owl-carousel {
		letter-spacing: 0;
		margin: 0;
	}
}
.slideshow-01 {
	.container-box > div.caption-link .slider-button {
		padding: 8px 39px;
		@media (max-width: 767px) {
          	padding: 5px 25px;
		}
	}
}

.sidebar-banner {
  overflow: hidden;
  .bc-home-slideshow {
    position: relative;   
    @media (min-width: 1025px) {
      width: 66.667%;
        float: left;
    }
    .swiper-button-next {
      @media (min-width: 768px) {
        right: 10px;
      }
    }
    .swiper-button-prev {
      @media (min-width: 768px) {
        left: 10px;
      }
    }
  }
  
  .bc-three-banner {
    @media (min-width: 1025px) {
        width: 33.333%;
        padding-left: 30px;
        float: left;
    }
    @media (max-width: 1024px) and (min-width: 768px) {
      padding-top: 20px;
        margin-left: -10px;
        margin-right: -10px;
    }
    @media (max-width: 767px) {
      float: none;
        width: 100%;
        padding-left: 0;
        padding-top: 20px;
        display: flex;
    }
    > a {
      display: block;
      text-align: center;
      margin: 0 0 30px;
      
      @media (max-width: 1024px) and (min-width: 768px) {
          width: 33.333333%;
          padding: 0 10px;
          float: left;
          margin: 0px;
      }
      img {
        @media (min-width: 1025px) {
        	width: 100%;
        }
      }
      &:nth-last-child(1){
        margin: 0;
      }
    }
  }
}
#slideshow-left-column{
  &>div{
    padding-top: 25px;
    padding-bottom: 30px;
    @media(max-width: 991px){
      padding: 0;
    }
  }
}
.video-slide {
  .video {
    position: absolute;
    top: 0;
    left: 0;     
    min-width: 100%;  
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 3;    
  }
}
.container-box { 
  padding: 0;        
  position: relative;    
  > div {      
    background: transparent;  
    line-height: 1.0;
    padding: 0;     
    margin: 0px auto; 
    display: block;  
    font-family: $font-heading;  
    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;              
    b, strong {
      display: block;
    }
    &.heading {   
      margin: 0 auto 15px;
      padding: 0;                     
      line-height: 0.9;    
      text-transform: uppercase;
      font-weight: $font-light;
      @media (max-width: 991px) {
        font-size: 3vw !important;    
      }  
      &.bold-true {
      	font-weight: $font-medium;
      }           
    } 
    &.subheading {                  
      margin: 0 auto;       
      text-transform: uppercase;   
      font-weight: $font-light;      
      @media (max-width: 767px) {
        font-size: 3.5vw !important;                 
      }    
      &.bold-true {
      	font-weight: $font-medium;
      }           
    }
    &.cation {             
      margin: 0;                           
      line-height: 1;                       
      margin-bottom: 25px;                           
      @media (max-width: 767px) {
        font-size: 3.5vw !important;        
      }
      &.bold-true {
      	font-weight: $font-medium;
      }  
      .title-price {
        display: block;
        text-transform: uppercase;
        font-size: $body-font-size;
        line-height: 1.3;
      }
      p {
        margin: 0;
        font-weight : $font-medium;
        font-size: 57px;
        line-height: 1.0;    
        @media (max-width: 991px) {
            font-size: 5vw;
        }     
        .small-size {
          vertical-align: top;            
          font-size: 48px;
          display: inline-block;
          @media (max-width: 991px) {
            font-size: 3vw;
          } 
        } 
      }               
    }
    &.cation-2 {             
      margin: 0;                           
      line-height: 1.2;                        
      margin-bottom: 30px;                           
      @media (max-width: 767px) {
        font-size: 3.5vw !important;        
      }
      &.bold-true {
      	font-weight: $font-medium;
      }  
            
    }
    &.caption-link {
      margin: 15px 0 0;     
      position: relative;    
      @media (max-width: 767px) {
        display: none;
      }
      .slider-button {                    
      font-size: $body-font-size;
      font-weight : $font-medium;
      padding: 9px 58px;
      line-height: 26px;
      text-transform: uppercase;
        display: inline-block;    
        @media (max-width: 1024px) {
          display: none;
        }
        @media (max-width: 767px) {         
          font-size: $body-font-size;
          padding: 5px 25px;
        }           
      }
    }
    @media(max-width:991px){
      &.heading{
        margin-bottom: 2.2%
      }
      &.subheading{
        margin-bottom: 2.2%
      }
      &.cation{
        margin-bottom: 3%
      }
      &.cation-2{
        margin-bottom: 2.2%  
      }
    }
  }  
}
.home-slideshow {  
  .swiper-slide {
    margin: 0px auto; 
    text-align: center;
    overflow: hidden;      
    background: center center; 
    background-repeat: no-repeat;
    background-size: cover;         
    .container-box {
      @include opacity(0);
    } 
    @media all and (min-width:0\0) and (min-resolution:.001dpcm) {
      @include opacity(1 !important); 
    }
    &.has-video {
      &:hover {
        @media (min-width: 1025px) {
          .container{ 
            z-index: 4;
          }    
        }      
      }
    }
    &.swiper-slide-active {
      .container-box {
        @include opacity(1);
      }    
    }
    > a  {
      display: block;
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 1;
      > img {        
        @include opacity(0);
      } 
    }    
  }  
  .swiper-content {           
    margin: 0px auto;          
    @include ab(n, 0, 10%, 0);      
    &.fix-textbox {
      .container-box {
        @media (min-width: 1200px) {
          padding-left: calc(24.3% + 35px);             
      }
      @media (max-width: 1199px) and (min-width: 992px) { 
        padding-left: calc(24.1% + 15px);           
      }       
      }
    }
    @media (max-width: 767px) {
      top: 50% !important;
      @include translate(0, -50%);
      display: table;
      padding-left: 30px;
      padding-right: 30px;
    }
  }
  &.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);        
        &:hover {
          @include opacity(1);
          background: rgba(0, 0 ,0 , 0.5);
        }
      }
      a.flex-prev {
        left: 10px;
        &:before{
          content: "\f104";
        }
      }
      a.flex-next {
        right: 10px;
        &:before{
          content: "\f105";
        }       
      }       
    }
    .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;      
      }
    }
  }  
}
.swiper-button-white {  
  z-index:4; 
  display: block; 
  height: 60px; 
  width: 60px;  
  background-image: none;  
  border: none;
  text-align: center;         
  background: none;
  color: $white;
  background: $button-hover-btn1;
  margin: 0;  
  @include ab(50%, n, n, n);
  @include translate(0, -50%);
  @include border-radius-circle;
  @include transition(all 0.35s ease 0s);          
  @media (min-width: 1025px) {
    @include opacity(0);
  }
  @media (max-width: 767px) {
    width: 30px;
    height: 30px;
    background: none;
    color: $main-color;
  }
  &:before {
    display: block;              
    text-align: center; 
    font-size: 40px;
    line-height: 60px;
    width: 100%;
    height: 100%; 
    font-family: arenafont;   
    @media (max-width: 767px) {
      line-height: 30px;     
    }
  } 
  &.swiper-button-prev {
    background-image: none; 
    left: 45px; 
    @media (max-width: 767px) {
      left: 0;
    }      
    &:before{
      content: "\f104";      
    }   
  }
  &.swiper-button-next {
    background-image: none;   
    right: 45px;   
    @media (max-width: 767px) {
      right: 0;
    }    
    &:before{
      content: "\f105";      
    } 
  }  
  &:hover {
    @media (min-width: 1025px) {
      color: $main-color;
    }
  } 
}
.swiper-pagination {
  bottom: 4%;
  left: 50%;
  z-index: 2;
  @include translate(-50%, 0);
  .swiper-pagination-bullet  {
    width: 8px;
    height: 8px;
    margin: 0 6px;
    background-color:  #b5b5b5;
    opacity: 1;
    &.swiper-pagination-bullet-active{
      background-color: transparent;
      border: 1px solid #b5b5b5;
      width: 12px;
      height: 12px;
      transform: translateY(2px);
    }
  } 
}
.swiper-wrapper {  
  .owl-controls .owl-dots {
    @include ab(n, n, 6%, 0);
    margin: 0px auto;
    text-align: center;
    width: 100%;
    .owl-dot {
      margin: 0 5px !important;
      display: inline-block;
      line-height: 20px;
      span {          
        width: 12px !important;
        height: 12px !important; 
        margin: 0px;     
        background: $main-color;
        border: 1px solid $main-color; 
        @include border-radius-circle;
        @include opacity(0.5);
        position: relative;
        display: inline-block;
        padding: 0;                
      }
      &:hover,
      &:focus,
      &.active {
        span {  
          @include opacity(1);
        }
      }
    }
  }
}
.highlighted{
  font-weight: $font-medium;
  color: $main-color;
}



/* collection-search */
#collection-search-wrapper{
  .collection-search-inner{
    background-size: cover !important;
    background-position: center;
    min-height: 506px;
    position: relative;
  }
  .collection-search-content{
    @include ab(50%,50%,n,n);
    @include translate(-50%,-50%);
    width: 60%;   
    .heading-subheading{
      padding-bottom: 50px;
    } 
    .selector-wrapper{
      display: flex;
      flex-wrap: wrap;
      &>*{
        margin:  5px;
        @include opacity(0);
        @include transition(opacity 0.5s ease)
      }
      &.pending{
        position: relative;
        &:before{
          content: '';
          @include ab(n,50%,100%,n);
          @include translate(-50%,0);
          background-image: url({{'loading.gif' | asset_url }}); 
          background-position: center;
          background-size: 100%;
          width: 100px;
          height: 100px;
        }
      }
    }
    .chosen-container{
      @include opacity(1);
      flex-grow: 1;
      width: auto !important;
      .chosen-search-input{
        @media(max-width:1024px){
          color: transparent;
          text-shadow: 0 0 0 $body-general-color;
          &:focus{
            outline: none;
          }
        }
      }
      @media(min-width: 992px){
        position: relative;
        &:nth-of-type(1){
          .chosen-single:after{
            content: '1';  
          }
          .chosen-single{@include border-radius(3px,0,0,3px);}
        }
        &:nth-of-type(2){
          .chosen-single:after{
            content: '2';
          }
        }
        &:nth-of-type(3){
          .chosen-single:after{
            content: '3'; 
          }
        }

      }
      &+script+.button-wrapper{
       @include opacity(1);
      }
      @media(max-width: 767px){
        width: 100% !important;
      }
      .chosen-drop{
        display: none;
        z-index: -111;
      }
      &.chosen-with-drop{
        .chosen-drop{
          display: block;
          z-index: 1111;
        }
      }
    }
    .chosen-single{
      padding-top: 9px;
      height: auto;
      padding-bottom: 9px;
      background-color: #fff;
      line-height: 27px;
      border-radius: 0;
      position: relative;
      &:before{
        @include ab(50%,n,n,10px);
        @include translate(0,-50%);
        font-family: 'arenafont';
        content: '\f107';
      }
      span{
        font-size: $body-font-size + 1;
      }
      &:after{
          @include ab(50% ,0px , n,n);
          @include translate(0,-50%);
          z-index: 5;
          font-size: $body-font-size + 1;
          padding: 0 15px;
          border-right: 1px solid $body-border-color;
        }
      b{
        display:none;
      }
    }
    .chosen-drop{
      text-align: left;
      .result-selected{
        color: $main-color; 
      }
      .highlighted{
        color: #fff;
      }
    }
    .button-wrapper{
      position: relative;
      text-align: right;
      @media(max-width: 767px){
        width: 100% ;
      }
      a{
        font-weight: $font-medium;
        i{  
          margin-right: 10px;
        }
      }
      @media(min-width:991px){
        a{@include border-radius(0,3px,3px,0);}
      }
      .reset-filter{
        @include ab(100%,n,n,0);
        background: transparent;
        border: none;
        color: #fff;
        font-size: $size-h5;
      }
    }
    @media(max-width: 1200px){
      width: 75%;
    }
    @media(max-width:991px){
      width: 80%
    }
  }
  @media(max-width: 479px){
    .collection-search-content{
      .heading-subheading{
        padding-bottom:20px;
        .heading{font-size: $size-h1;line-height: normal;}
        .subheading{font-size: $size-h2}
      }
    }
  }
  &.boxed{
    .chosen-single:after{
      border: none;
    }
  }
}
.spr-badge-caption {
  display: none;
}
.owl-carousel { 
  .owl-wrapper { display: none;}
  .owl-item {  
    .product-wrapper { 
      width: 100% !important;
      margin: 0;     
    }     
    img {
      transform-style: inherit;
      -webkit-transform-style: inherit;
      -moz-transform-style: inherit;   
      display: inline-block;
    }    
    &.current {
      .product-wrapper { 
        &:before {
          content: none;
        }
      }
    }
  }  
}

.product-wrapper {
  position: relative;  
  margin: 0px; 
  padding: 14px;  
  @include transition(all 0.35s ease 0s);
  @media (max-width: 1199px) {
    padding-left: 15px;
    padding-right: 15px;
  }
  .product-inner-wrapper{
    background-color: #fff;
    padding: 20px 20px 30px;
    position: relative;
    box-shadow: 0 0 4px 2px #f2f2f2;
    @include transition(all 0.35s ease);
  }
  .product-swatch-images{
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 8;
    max-width: 40px;
    overflow:hidden;
    @include transition (all 0.5s ease);
    @include translate(-100%, 0);
    @include opacity(0);
    .bx-wrapper{
      border: none;
      background: transparent;
    }
    .swatch{
      margin: 0;padding: 0 3px;
      .swatch-element{
        margin: 0;    
        width: 40px;
        overflow: hidden;
        label{
          background-position: center;
          @include opacity(.7);
        }
        input{
          position: absolute;
          display: block;
          left: 0;
          top: 0;
          opacity: 0;
          z-index: 1;
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
        &:hover{
          label{
            @include opacity(1);
          }
        }
        input:checked{
          &+label{
            @include opacity(1);
          }
        }
      }
    }
  }
  .product-head {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    .product-image {
      position: relative; 
      margin: 0 auto;
      padding: 0;       
      .featured-img {
        overflow: hidden;
        position: relative;        
        text-align: center; 
        width: 100%;
        margin: 0px auto 15px;
        {% if settings.enable_image_blance == true %}           
        a {     
          /* add important for menu in mobile*/
          padding-top:  $image-height * 1% !important;                                 
          img {                                    
            @include ab(50% , 0, n, 0);
            margin-top: -50%;            
          }          
        }
        {% endif %}
        a {
          display: block;    
          position: relative;            
          > span.img-back {
            img {
              @include opacity(0);
              @include ab(50% , 0, n, 0);                                                           
              margin-top: -50%;              
            }
          }
          > img {
            &.lazyloading {
              filter: blur(5px); 
              -webkit-filter: blur(5px); /* Prefixed CSS3 blur filters */
              -moz-filter: blur(5px); 
              -o-filter: blur(5px); 
              -ms-filter: blur(5px);
              @include opacity(0.2);              
            }
            &.lazyloaded {              
              filter: blur(5px);
              -webkit-filter: blur(0px); /* Prefixed CSS3 blur filters */
              -moz-filter: blur(0px); 
              -o-filter: blur(0px); 
              -ms-filter: blur(0px);
              @include opacity(1);
            }
          }
        }
        img {            
          max-width: 100%;
          height: auto;  
          max-height: 100%;            
          margin: 0px auto;                    
          display:inline-block;
          vertical-align: middle;  
          @include transition(all 0.5s ease 0s);          
          &.lazyloaded {
            height: auto !important;     
            width: auto !important;  
          }
        } 
        &.switch-image {
          a {
            &:before {
              content: none;
            } 
            img {              
              @include preserve-3d; 
            } 
          }
          &:hover {
            @media (min-width: 1025px) {
              a {                         
                > img {
                  @include opacity(0);
                }
                > span.img-back {
                  img {
                    @include opacity(1);                                                  
                  }
                }            
              }
            }
          }         
        }
      }       
    }   
    .product-button{
        &>div{
          @include ab(n,n,n,0);
          @include transition(all 0.35s ease);
          @include translate(50px,0);
          text-align: center;
          display: block;
          width: 25px;
          z-index: 5;
          i{
            font-size:20px;
            @include ab(0,50%,n,n);
            @include translate(-50%,0);
          }
          @media(max-width: 1024px){
            transform: none;
          }
        }
        &>div:nth-of-type(1){
          transition-delay: 0.15s;
          top: 0;
        }
        &>div:nth-of-type(2){
          transition-delay: 0.25s;
          top: 30px;
        }&>div:nth-of-type(3){
          transition-delay: 0.35s;
          top: 60px;
        }
    }   
    @media(max-width: 991px){
      margin-bottom:10px;
    } 
  }
  .product-vendor {   
    margin: 0 0 4px;
    line-height: 20px;    
    color: #000;
    font-size: $body-font-size - 1px;
    font-weight: $font-medium;
    text-transform: uppercase;
    a {
      color: inherit;
      &:hover {
        color: $main-color;
      }
    }
  }
  .product-review {        
    margin: 0;  
    .spr-badge-starrating {
      float: none;
      margin: 0;
    }
    .spr-badge {
      margin: -3px auto 8px;
    }
  }         
  .product-content {    
                   
    .pc-inner {
      display: block;
      width: 100%;    
    }
    .product-des-list,.product-description {               
      margin: 15px 0 0;      
      display: none;   
      font-size: $body-font-size - 1px;
      color: $body-light-color;
    }      
    .product-name {        
      color: $body-title-product;     
      font-size: $product-font-size + 1;      
      font-weight: $font-regular;
      margin: 0 0 15px;      
      line-height: 1.4;          
      position: relative;  
      @media (max-width: 479px) {
      font-size: $product-font-size; 
      margin-bottom:7px;     
      }            
      a {
        color: inherit;      
      }
      &:hover a {        
        color: $main-color;
      }
    }    
    .product-descrip {
      display: none;
    }
    .product-price {  
    line-height: 1.0855;
    padding: 0;  
      p {
        display: none;
      }      
      .price,.price-sale{
        font-weight: $font-medium;
      }
      .price-compare {        
        display: inline; 
      }
    }
    .price-cart-wrapper {
      position: relative;
      padding: 7px 38px 0px 0;
      border-bottom: 1px solid transparent;      
      .product-add-cart,
      .add-cart-button {
        font-size: $size-h4 + 2;
        @include ab(50%, n, n, 0);
        @include translate(0,-50%);
        .btn-add-cart {
          display: block;
          text-align: center;
          color: #d4d4d4;
          font-size: $font-small-icon;
          &:hover {
            @media (min-width: 1025px) {
              color: $main-color;        
            }
          }
          &.disabled{
            .demo-icon:before{
              content: '\f110';
              -webkit-animation: fa-spin 2s infinite linear;
              animation: fa-spin 2s infinite linear;
            }
          }
        }
      }     
    }
  } 
  .product-label{
    @include transition(all 0.35s ease);
  }
  &:hover {
  @media (min-width: 1025px) {
      z-index: 5; 
      .product-inner-wrapper{
        box-shadow: 0 0 8px 6px #ddd !important;
      }
      .product-head{
        .product-button>div{
          transform:none;
        }
      }
  }         
  }  
  &.none-product-button {
    &:after {
      bottom: 0 !important;
    }
    .product-content {
      .price-cart-wrapper {
        border-color: transparent !important;
        padding-bottom: 0 !important;
      }
      .product-button {
        display: none;
      }  
    } 
  }
  &.product-owl-item {
    display: table;
    table-layout: fixed;
    vertical-align: top;       
    .product-head {
    float: none;
    display: table-cell;
    vertical-align: top;
    width: 43%;
    min-width: 100px;
    padding: 0 20px 0 0;
    .featured-img {
      margin: 0 auto;
      .product-label {
        display: none;
      }
    }
    }
    .product-content {
      float: none;
      display: table-cell;
      vertical-align: top;
      width: 57%;
      .product-button {
        position: static;
        text-align: left; 
        border: none; 
        padding: 0;
        margin: 0 -4px;
        @media (min-width: 1025px) {
          padding: 8px 0 0 0;
        } 
      }
    }
    &:hover {
      @media (min-width: 1025px) {
        &:after {
          bottom: 0;
        }
      }
    }
  } 
  &.effect-swatch{
    &:hover{
      .product-swatch-images{
        transform: none;
        @include opacity(1);
      }
      .product-label{
        @include opacity(0);
        visibility: hidden;
      }
    }
    @media(max-width:1024px){
      .product-swatch-images{
       display: none;
      }
    }
  }
 
}
.product-price,
.sb-price,
.price {
  color: $body-price-color;   
  font-size: $product-price-size;  
  padding: 0px; 
  @media (max-width: 479px) {
    font-size: $product-price-size - 3px;  
  }
}
.price-sale {
  color: $body-price-sale-color;     
  font-size: $product-price-size;  
  white-space: nowrap;
  margin-right: 8px;
  @media (max-width: 479px) {
    font-size: $product-price-size - 3px;  
  }
}
.price-compare {  
  text-decoration: line-through;  
  color: $body-price-sold-out-color; 
  white-space: nowrap;    
  font-size: 12px;  
}
.product-label {  
  font-size: 11px;  
  text-transform: uppercase;  
  z-index: 3;  
  @include ab(20px,-5px,n,n);
  > span {       
    display: block;    
    clear: both;
    text-align: center;       
    border: none;        
    z-index: 1; 
    padding: 4.5px 10px 4.5px 12px;
    @include border-radius(0,3px,3px,0);
    font-size: $body-font-size - 1;
    text-transform: uppercase;
    &:before{
      content: '';
      width: 0; 
      height: 0; 
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 4px solid black;
      @include ab(100%,0,n,n);
      transform: rotate(45deg);
      margin-top: -1px;
    } 
    &.label-sale {                     
      color: $body-label-sale-color;
      background-color: $body-label-sale-background;            
      .sale-text {                 
        &.percent-text {          
          span {
            display: none;
          }
        }
      }
    }   
    &.label-new {      
      color: $body-label-new-color;
      background-color: $body-label-new-background;      
    }
    &.label-bp {
      left: 10px;
      font-size: 8px;
      color: $body-label-bp-color;
      background-color: $body-label-bp-background;      
    }
  }
}
.add-to-compare {
  &.pending {   
    i {
      &:before {
        content: "\e984";
        -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
      }
    }
  }
  &.added {
    i {
      &:before {
        content: "\e8ca";       
        color: $main-color; 
      }
    }
  }
}
.add-to-wishlist {  
  border: none;
  @include border-radius-reset;
  span {
    width: 30px;
    height: 30px;    
    display: inline-block;
    text-align: center;    
  }
  &.pending {
    i {
      &:before {
        content: "\e984";
        -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
      }
    }
  }
  &.added {
    i {
      &:before {
        content: "\e8ca";   
        color: $main-color;     
      }
    }
  }
  &:hover {
    color: $main-color;
  }
}
.add-cart-button {  
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  vertical-align: top; 
  border: 0;  
  text-align: center;
  .add-to-cart, .select-options {    
    display: inline-block;     
    margin: 0px auto;    
    &.focus, &:focus, &:hover {
      outline: none;
    }    
  }
}
.quick_shop {
  cursor: pointer;  
  color: $body-light-color;
  font-size: $body-font-size - 1px;
  line-height: 28px;
  @include transition(all 0.35s ease 0s);
  i {
    margin: 0 5px 0 0;
    font-size: 16px;
    float: left;
  }
  &:hover {
    color: $main-color;
  }
  @media (max-width: 1024px) {
    display: none !important;
  }
}
.product-wishlist,.product-compare {
  a {
    color: $body-light-color;
      font-size: $body-font-size - 1px;
      line-height: 28px;
      i {
        margin: 0 5px 0 0;
        float: left;
      }
      &:hover {
        color: $main-color;
      }
  }
}
/*button slider*/
.owl-theme {
  .owl-dots {
    text-align: center;
    margin: 0px auto;
    z-index: 2;
    @include ab(n, 50%, 10px, n);
    @include translate(-50%, 0);
    display: flex;
    align-items:center;
    @media (max-width: 1024px) {
      display: none !important;
      position: static;
      @include translate(0%, 0);
    }
    .owl-dot {
      width: 8px;
      height: 8px;
      margin: 0 6px;
      float: left;
      background-color:  #b5b5b5;
      opacity: 1;
      @include border-radius-circle;
      &.active{
        background-color: transparent;
        border: 1px solid #b5b5b5;
        width: 12px;
        height: 12px;
      }
    } 
  }
  .owl-controls {
    .owl-nav {                 
      @include ab(n, n, calc(100% + 17px), 0);       
      > div {          
        @include transition(all 0.35s ease 0s);            
        display: inline-block;
        padding: 0;
        margin: 0; 
        height: 30px;     
        width: 45px;  
        z-index: 3;        
        span {
          display: inline-block; 
          height: 100%;
          width: 100%;   
          cursor: pointer;
          text-align: center;
          line-height: 30px; 
          color: $body-light-color;         
          &:before {        
            font-size: $size-h4;            
            font-family: arenafont;      
          }
        }
        &.owl-next {      
          @media (max-width: 1024px) {
            right: 0px; 
          }   
          span {
            &:before {
              content: "\ea5d";                    
            }
          } 
        }
        &.owl-prev {
          @media (max-width: 1024px) {
            left: 0;
          }
          span {
            &:before {
              content: "\ea44";
            } 
          }
        }
        &:hover {
          @media (min-width: 1025px) {        
            span {
              color: $body-title-color;
              &:before {
                color: $body-title-color;
              }
            }
          }
        }
      }
    }
  }  
}
/* footer --------------------------*/
.widget-partner,
.bottom-partner-list,.logo-inner{ 
  display: none; 
  text-align: center;
  &.owl-carousel {     
    .partner-item {
      width: 100%;      
    }    
    .owl-controls{
      @include opacity(0);
      @include transition(opacity 0.35s ease);
    }
    @media(max-width:991px){
      .owl-controls{
        @include opacity(1);
      }
    }
  }
  .owl-controls .owl-nav {    
    position: static;
    > div {
      @include ab(50%, n, n, n);
      @include translate(0, -50%);
      width: 25px;
      &.owl-prev {
        left: 0;
        &>span:before{
          font-size: 26px;
        }
      }
      &.owl-next {
        right: 0;
        &>span:before{
          font-size: 26px;
        }
      }
    }
  }  
  &:hover{
    .owl-controls{
      @include opacity(1);
    }
  }
  
}
.partner-wrapper{
  padding: 15px 0;
}
.partner-wrapper,
.bottom-container {
  &.layout-full {
    padding-left: 15px;    
    padding-right: 15px;       
    > div {
      margin: 0px auto;
      max-width: 1400px;
    }   
  }  
}
.partner-item {
  float: left;
  width: 14.28%;
  padding: 10px;
  text-align: center;
  position: relative;  
  a {
    display: block;
    margin: 0px auto;
    &.waiting {
      padding-bottom: 10%;
      &.lazyloaded {
        padding: 0;
      }
    }
    &:hover {
      @media (min-width: 1025px) {
        @include opacity(0.7);
      }
    }
  }
}
.bottom-container {   
  .bottom-products {
    padding-top: 50px;
    @media (max-width: 767px) {
      padding-top: 40px;
    }
  }
  .bottom-partner {
    padding: 47px 0 1px;    
    @media (max-width: 767px) {
      padding-top: 40px;
    }
  }
}

#footer-content {  
  padding: 50px 0 0;  
  .newsletter-container {    
    .newsletter-title {
      display: inline-block;      
      color: $footer-static-text-color;     
      line-height: 1.1; 
      .demo-ion {
        font-size: 34px;
        float: left;
        margin: 0 15px 0 0;
        &:before {
          display: block;
          line-height: 30px;
        }
      }
    }
    p {
      display: inline-block;
      text-transform: none;
      margin: 0;        
      margin-top: -2px;
      padding: 0px 50px 25px 0;
      color: $footer-link-color;  
      @media (max-width: 1199px) {
        display: none;
      }      

    }
    form {  
      margin: 0px auto;
      position: relative;    

      input{      
        color:#797979;      
        height: 42px;                 
        width:90%;
        display:inline-block;
        vertical-align:middle; 
        border: none;
        padding: 11px 50px 11px 15px;      
        border-radius: 0;
        background-color: transparent;
        color: $footer-link-color;
        box-shadow:inset 0 0 0 1px  $footer-link-color;
        margin-bottom: 85px;
        line-height: 20px;
        @media (max-width: 479px) {
          width: 100%;
          margin: 0px 0 15px; 
        }
      }
      #email-submit {            
        height: 42px;
        padding: 6px 12px;
        line-height: 30px;
        font-weight: 400;
        font-size:$font-small-icon - 2;
        background: $main-color;
        border: 1px solid $main-color;
        @include ab(0, n, n, 0);
        @include transition(all 0.35s ease-in-out 0s);
        &:hover {
          background: $black;
          border-color: $black;
          color: $white
        } 
   
      }
    }
  }
  .payment-icons{
    .payment-title{
      color: $footer-static-text-color;
      margin-bottom: 25px;
      &+.list-inline{
        li{
          margin-right: 10px;
          font-size: $size-h1;
          color: $footer-link-color;
        }
      }
    }
  }
}
.footer-container {
  &.layout-boxed {
    #widget-newsletter {
      margin: 0 auto;                 
      @media (min-width: 767px) {
          width: 100%;
      }
      @media (min-width: 768px) {
          max-width: 760px;
          margin-bottom: -33px;
          position: relative;
          z-index: 2;
          @include border-radius-10;
      }
      @media (min-width: 992px) {
          max-width: 980px;
      }
      @media (min-width: 1200px) {
          max-width: 1200px;
      }
    }
    .footer-widget {
      @media (min-width: 768px) {
        padding-top: 33px;
      }
    }
  }
}
.copyright {
  p {
    margin: 0;
    color: $footer-copyright-color;
    font-size: $body-font-size - 2;
  }
  a{
    color: $footer-link-color;
  }
}
.footer-logo {
  .logo-site {    
    &.waiting {       
      background-color: transparent !important; 
    }
  }
  .support-box {
    margin: 40px 0 0;
    display: table;
    width: 100%;
    vertical-align: middle;
    font-weight: $font-medium;
    i {
      display: table-cell;
      font-size: $size-h5; 
      color: $footer-link-color;
      width:10%;
    }
    .text {
      color: $footer-static-text-color;
      display: table-cell;
      vertical-align: middle;
      padding: 0;
      font-size: $size-h6;
        span{
          clear: both;
          display:block;
        }
    }
  }
}
.widget-social {
  margin: 34px 0 0;
  color: $footer-static-text-color;
  .widget-social-heading{
    margin-bottom: 15px;
  }
  ul {
    li {
      display: inline-block;
      margin: 0 0 0 20px;
      a {
        line-height: 32px;
        i {
          font-size: $font-small-icon;
          &:before {
            display: block;
            line-height: 32px;
          }
        }
        &:hover {
          color: $main-color;
        }
      }
      &:first-child  {
        margin-left: 0;
      }
    }
  }
}
.footer-block {
  margin-bottom: 30px;
  > h6,.newsletter-title,.payment-title {      
    color: $footer-static-text-color;
    margin: 0 0 20px;   
    font-weight: $font-medium;
    @media (max-width: 767px) {
      margin-bottom: 20px;
    }
  } 
  .widget-social{
    li{
      margin-left: 10px;
    }
  }
}
.footer-menu {    
  ul {
    li {
      display: block;      
      margin: 0 0 12px;
      color: $footer-link-color; 
      a {        
        color: $footer-link-color; 
        font-size: $body-font-size;       
        display: inline-block;        
        &:hover {
          color: $footer-hover-color;
        }
      }
    }
  }
}
.footer-inner {  
  margin: 0px auto;
  padding-top: 90px; 
  @media (max-width: 767px) {
    padding-top: 40px;
  }
}
.footer-widget {
  background: $footer-background-color;
}
.footer-bot {
  padding-top: 10px;  
  padding-bottom:65px;
  background: $footer-copyright-bg; 
  .table-row {
    display: table;
    width: 100%;
    margin: 0px auto;
    @media (max-width: 767px) {
      display: block;
    }
    > div {
      display: table-cell;
      vertical-align: middle;   
      @media (max-width: 767px) {
        display: block;
      } 
    }
  }  
  .copyright {
    width: 50%;
    display: none;
    @media (max-width: 767px) {
      width: 100%;
      text-align: center;
      padding: 0 0 10px;
    }
  }  
  @media(max-width: 991px){
    padding-top: 20px;
    padding-bottom: 30px;
  }
}
.templateIndex {     
  #body-content {   
    @include translate3d(0, 0, 0);      
  }
  .style-1, .style-2 {
    .header-navigation .table-row .vertical-menu .sidemenu-holder .navigation {
      .navbar {
        display: none;
	      @include dropdown-effect;
	      @include translate(0, 10px);
        &.opened {
          display: block;       
          @include dropdown-effect-hover;
          @include translate(0, 0);
	    }
	  }     
    } 
    &.header-fixed {
    	.header-navigation .table-row .vertical-menu .sidemenu-holder .navigation {
	      .navbar {
	      	display: none;
	        @include dropdown-effect;
	        @include translate(0, 10px);	        
	        &.opened {
	        	display: block;       
		        @include dropdown-effect-hover;
		        @include translate(0, 0);  
		    }
		  }     
	    } 
    }   
  }   
  .header-content .header-container.layout-boxed.style-2 .header-navigation .table-row .vertical-menu .navigation .head {
    @include border-radius(10px, 0, 0, 0);
    &.opened {
      @include border-radius(10px, 0, 0, 10px);
    }
  }  
  #footer-content {
    margin-top: 0;
    padding-top: 30px;
    @media (max-width:767px) {
      padding-top: 15px;
    }
  }
}

/* Sidebar -------------------------------*/

.search-blog {  
  form {
    display: block;
    position: relative;
    button {
      @include ab(0px, n, n, 5px);
      height: 44px;
      line-height: 44px;
      padding: 0 10px;      
      border: none;
      background: none;
      &:hover {
        color: $main-color;
      }
    }
  }   
}
.left-column-container,
.sidebar {
  .owl-theme .owl-controls .owl-nav {
    top: -40px;
    right: 0px;
    &>div{
      width: 25px;
      height: 25px;
      span:before{
        font-size: $size-h5 - 2;
      }
    }
  }
  > div {
    &:last-child {
      .sb-widget {
        margin-bottom: 0;
      }
    }
  } 
  .sb-price, .product-price, .price {    
    font-size: $body-font-size;
    font-weight : $font-medium;
    color: $body-price-color;   
  } 
  .price-compare {        
    color: $body-price-sold-out-color;   
    font-size: $body-font-size - 3px;    
    margin: 0;
    display: block;
    font-weight: 400;
  }
  .price-sale {       
    font-size: $body-font-size;
    font-weight : $font-medium;  
    display: block;
    color: $body-price-sale-color;
  }  
  .filter-sidebar {
    display: block;
  }
  
  + .col-md-9 {
    @media (max-width: 767px) {
      padding-top: 40px;
    }
  }
}


.filter-sidebar {
  &.no-sidebar {
    .sb-title {
        display: none;
    }
    &.toggle {
      position: relative;
      width: 100%;
      display: none;
      padding: 25px 15px 0;
      margin: 0 auto 20px;
      background: $body-background-color;
      @include box-shadow(0 0 10px rgba($black, 0.05));
      
      .f-close {
        display: none;
      }      
      .sb-filter-wrapper {       
        width: 100%;     
      }     
      .sbf-title {
        position: relative;
      	> span {
      		display: block;
      	}
      	> a {
          @include ab(50%,n,n,0);
          @include translate(0,-50%);
      	}
      }
      .sbw-filter > div {
        letter-spacing: -0.35em;
        vertical-align: top;
        .sb-filter {
          width: 25%;
          padding: 0 15px;
          clear: none;
          float: none;
          display: inline-block;
          letter-spacing: 0;
          vertical-align: top;
          border: none;
          margin: 0 0 30px;
          @media (max-width: 767px) and (min-width: 480px) {
            width: 50%;
          }
          @media (max-width: 479px) {
            width: 100%;
          }
        }
      }
      .sb-filter-tag >li{
        width: 24%;
        display: inline-block;
      }
    }
    &.drawer {
      .sbw-filter > div .sb-filter:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
    }
    &.style-accordion{
      .sbw-filter>div .sb-filter.accordion{
          margin: 0;
          position: relative;
          .sbf-title{     
            >span{
              display: inline-block;
              &.demo-icon{
                margin-left: 5px;
              }
            }
            @media(max-width: 991px){
              .demo-icon{
                display: none;
              }
            }
          }
          @media(max-width: 991px){
            margin-bottom: 30px;
            .advanced-filters{
              display:  block !important;
            }
          }
      }
    }
  }
}
.sb-widget {   
  width: 100%;    
  border: none;
  padding: 0;
  position: relative;    
  clear: both;
  margin: 0 0 35px;   
  &.filter-sidebar {
    &.no-sidebar {
      @media (min-width: 992px) {
        width: 100%;
        position: static;
        padding: 0;
        height: auto;
        overflow: visible;
        background: none;
        @include opacity(1);
        @include translate(0, 0);
        .f-close {
          display: none;
        }
      }
    }
  }    
  &:last-child {
    margin-bottom: 0;
  } 
  > a {
    display: block;
    position: relative;      
  }
  .content {      
    h5.sb-subtitle {
      font-size: $size-h4;      
      margin: 0 0 20px; 
      text-transform: capitalize;
    }
    .blog-menu {
      background: none;
      border: none;       
    }
  }    
  > div {           
    .row {        
      margin: 0 0 20px;
      padding: 0 0 20px;
      width: 100%; 
      border-bottom: 1px solid $body-border-color;
      .sb-product-head {
        padding-left: 0;          
      }
      .sb-product-content {
        padding-left: 5px;
        padding-right: 0;
      }
      .bp-content-inner {
        > a {
          color: $body-title-color;
          display: block;
          margin: 0 0 10px;
          &:hover {
            color: $main-color;
          }
        }
      }
      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }      
    }           
  }
  .sb-title {
    font-size: $size-h6 + 1;
    font-weight: $font-medium;
    text-transform: uppercase;
    padding: 15px 0;
    border-bottom: 1px solid #f2f2f2;
    &.sb-title-menu{
      padding: 15px 25px;
      background-color: $main-color;
      margin: 0;
      border: none;
    }
  } 
  .post-list{
    padding: 30px 0;
  }
  .post-item {
    background-color: transparent;
    &:last-child {
      margin-bottom: 0;      
    }
    .post-item-inner {                
      display: table;
      width: 100%;
      table-layout: fixed;
      .post-image {        
        display: table-cell;
        vertical-align: middle;
        width: 70px;
        margin: 0;
        overflow: hidden;
        padding: 0;   
        a {
          position: relative;
          display: block;    
        }
      }
      .meta-data {
        border: none;
        margin: 0px;
        > a,
        > span {          
          color: $main-color;
          font-size: $body-font-size - 1 ;
        }
      }
      .post-content {           
        padding:0 15px;
        background-color: transparent;
        display: table-cell;
        vertical-align: middle;
         h6 {
          font-weight: $font-regular;
          font-size: $size-h6 + 1;
          margin-bottom: 15px;
        }            
      }           
    }
  }       
  
  ul{
    list-style: none;
    padding: 0;   
    ul, ol {
      padding: 0;
      margin: 0;
    }         
    li{
      padding: 0;
      margin: 0;        
      display: table;
      width: 100%;        
      a {
        color: $body-general-color;
        &:hover{            
          text-decoration: none;
          color: $main-color;
        }
      }        
    }             
  }
  .sb-blog-tag { 
    ul {
      padding: 22px 0;
      li {
        margin: 0;
        display: inline-block;
        width: auto;
        a {                       
          padding: 5px 15px;
          margin: 0px 8px 8px 0;                               
          display: inline-block;                
          line-height: 1.8;               
          border: 1px solid $button-btn2-border;
          background-color : $button-btn2;
          color: $button-btn2-txt;
          @include border-radius(3px,3px,3px,3px);
          &:hover {
            background: $button-hover-btn2;           
            border-color: $button-hover-btn2-border;
            color: $button-hover-btn2-txt;
          }          
        }
      }
    }    
  }       
  &.sb-product-type {
    .sb-title {
      margin-bottom: 10px;
    }
    > .type-list {
      border: 1px solid $body-border-color;        
      > li {
        margin: 0;
        > a {
          padding: 10px 20px;
          line-height: 26px;
          font-size: 15px;
          font-family: $font-heading;
          border-bottom: 1px solid $body-border-color;
          display: block;
          text-transform: uppercase;
          background: #fafafa;            
          &:hover {
            background: $main-color;
            color: $white;
          }
        }
        &:last-child {
          > a {
            border-bottom: none;
          }
        }         
      }
    }
  } 
  .blog-menu,
  .categories-menu {   
    padding: 18px 0;
    li {
      list-style: none;   
      position: relative;     
      .expand {
        @include ab(0, n, n, 0);
        width: 25px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        cursor: pointer;
        font-size: 18px;
        @include transition(all 0.35s ease 0s);
        &:before {
          content: '\f105';
          font-family: arenafont;
          display: block;
        }
      }
      a {
        display: block;     
        padding: 9px 0;
        line-height: 20px;            
        color: $body-title-color;     
        word-break: break-word; 
        &:hover {
          color: $main-color;
        }
      }
      .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        padding: 8px 0;
        border: none;
        background-color: transparent;
        @include box-shadow(0 0 0 $white);  
        &:before {
          content: none;
        }
        li {
          a {
            &:hover {
              font-weight: 400;
              color: $main-color;
            }
          }
        }    
      }
      &:last-child {
        border-bottom: none;
      }
    }  
    > li {
      &.active {
        > a {
          color: $main-color;
        }
      }
      &.dropdown {
        > a {
          padding-right: 25px;          
        }
        > .dropdown-menu {
          > li {  
            > a {
              padding-left: 18px;
            }
            &.active {
              > a {
                color: $main-color;
              }
            }
            &.dropdown {
              > a {
                padding-right: 25px;                  
              }          
              > .dropdown-menu {
                display: none;
                border: none;
                padding: 0;
                > li {
                  &.active {
                  > a {
                    color: $main-color;
                  }
              }
                  > a {
                    padding-left: 30px;
                  }
                }
              }
              &.s-open {
                > .expand {
                  @include rotate(90);
                  &:before {
                    color: $main-color;
                  }
                }
                > a {
                  color: $main-color;
                }
                > .dropdown-menu {
                  display: block;
                }
              }
            }
          }
        }
        &.s-open {
          > .expand {
            @include rotate(90);
          }
          > a {
            color: $main-color;
          }
          > .dropdown-menu {
            display: block;
          }
        }
      }
    }
  } 
  .categories-menu {   
  padding: 13px 0;
  li {
    list-style: none;   
    position: relative;     
    .expand {
      @include ab(0, n, n, 0);
      width: 25px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      cursor: pointer;
      font-size: 18px;
      @include transition(all 0.35s ease 0s);
      &:before {
        content: '\f105';
        font-family: arenafont;
        display: block;
      }
    }
    a {
      display: block;     
      padding: 9px 0 ;
      line-height: 20px;            
      color: $body-title-color;     
      word-break: break-word; 
      &:hover {
        color: $main-color;
      }
    }
    .dropdown-menu {
      position: static;
      float: none;
      width: 100%;
      padding: 8px 0;
      border: none;
      border-top: 1px solid $body-border-color;
      @include box-shadow(0 0 0 $white);  
      &:before {
        content: none;
      }
      li {
        a {
          &:hover {
            font-weight: 400;
            color: $main-color;
          }
        }
      }    
    }
    &:last-child {
      border-bottom: none;
    }
  }  
  > li {
    &.active {
      > a {
        color: $main-color;
      }
    }
    &.dropdown {
      > a {
        padding-right: 25px;          
      }
      > .dropdown-menu {
        > li {  
          > a {
            padding-left: 18px;
          }
          &.active {
            > a {
              color: $main-color;
            }
          }
          &.dropdown {
            > a {
              padding-right: 25px;                  
            }          
            > .dropdown-menu {
              display: none;
              border: none;
              padding: 0;
              > li {
                &.active {
                > a {
                  color: $main-color;
                }
            }
                > a {
                  padding-left: 30px;
                }
              }
            }
            &.s-open {
              > .expand {
                @include rotate(90);
                &:before {
                  color: $main-color;
                }
              }
              > a {
                color: $main-color;
              }
              > .dropdown-menu {
                display: block;
              }
            }
          }
        }
      }
      &.s-open {
        > .expand {
          @include rotate(90);
        }
        > a {
          color: $main-color;
        }
        > .dropdown-menu {
          display: block;
        }
      }
    }
    >span:not(.expand){
      @include ab( 50%, n,n,0);
      @include translate(0,-50%);
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      color: $body-light-color;
      background-color: #f6f6f6;
    }
  }
  } 
  .sb-banner {    
    > a {
      display: block;
      position: relative;
      img{
        width: 100%;
      }
      &:before {
        @media (min-width: 1025px) {
          @include before;
        }
      }
      &:after {
        @media (min-width: 1025px) {
          @include after;
        }
      }
      &:hover {
        @media (min-width: 1025px) {
          &:before,&:after{
            @include before-after-hover;
          }
        }
      }
    }
  } 
  .sb-service {
    padding: 20px;   
      border: 1px solid $body-border-color;
      @media (max-width: 1199px) and (min-width: 768px) {
        padding-left: 20px;
        padding-right: 20px;
      }
      .sb-service-item {
        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 {
          display: table;
          width: 100%;
          vertical-align: middle;
            li {
              text-align: left;
              font-size: $body-font-size - 2;
              color: $body-title-color;
              padding: 0;
              margin: 0;
              width: auto;
              display: table-cell;
              vertical-align: middle;
              &.icon {                
                color: $main-color;
                font-size: 32px;
                width: 58px;
                padding: 0 15px 0 0;           
                margin: 0;
                span.demo-icon {
                  float: left;
                  height: 38px;             
                  vertical-align: middle;
                  display: table;
                  overflow: hidden;
                  position: relative; 
                  &.icon-electro-track-order-icon {
                    font-size: 24px;
                  }
                  &:before {             
                    height: 100%;
                    vertical-align: middle;                           
                    display: table-cell;
                  }
                } 
              }
              .text-1 {
                font-weight: $font-medium;       
                font-size: $body-font-size ;  
                display: block;
                padding-bottom: 7px;
                text-transform: uppercase;              
              }
            }
        }
        &:hover{
          .icon{
            -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob;
              animation-name: hvr-icon-bob-float, hvr-icon-bob;
              -webkit-animation-duration: .3s, .75s;
              animation-duration: .3s, 0.75s;
              -webkit-animation-delay: 0s, .3s;
              animation-delay: 0s, .3s;
              -webkit-animation-timing-function: ease-out, ease-in-out;
              animation-timing-function: ease-out, ease-in-out;
              -webkit-animation-iteration-count: 1, infinite;
              animation-iteration-count: 1, infinite;
              -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
              -webkit-animation-direction: normal, alternate;
              animation-direction: normal, alternate;
          }
        }
      }
  }
  .sb-vertical-menu {
   
    .vertical-navbar {
      position: static;
      display: block;
      &.opened {
        display: none;
      }
      .main-nav {
        margin: 0;
        border: 3px solid $main-color;
        border-top: none;
        padding: 16px 0;
        width: 100%;
        .dropdown-menu li {
          padding: 0;
        }
      }
    } 
  }

  .sb-product {
    .sb-title {
      padding-right: 65px;      
    }
  }

  .logo-img{
    padding:25px 0 50px;
    img{
      width: 100%;
    }
  }
  .sb-product-list{
    padding: 20px 0;
  }
  .sb-product-grid {
    .sb-grid-item {
      padding: 25px 20px;   
      .product-content-inner {
        position: relative;
        .product-vendor{
          font-weight: $font-medium;
          margin-bottom: 10px;
          font-size: $body-font-size - 1;
          text-transform: uppercase;
        }
        > a {
          display: block;
          margin: 0 0 15px;
          color: $body-title-color;
          font-size: $body-font-size + 1px;
          &:hover {
            color: $main-color;
          }
        }
        .product-price {
          font-weight: $font-medium;
          padding-right: 30px;
          .price-compare {
            font-size: $body-font-size + 2px;
            color: $body-general-color;
            display: inline-block;
            padding-left: 10px;
            line-height: 26px;
          }
          .price-sale {
            display: inline-block;
          }
          .price-sale,
          .price {
            font-size: $size-h4 - 2;
            font-weight: inherit;
          }
        }
        .product-add-cart{
          @include ab(n,n,0,0);
          a{color: $body-light-color;&:hover{color: $main-color;}}
          span{
            display: block;
            width: 26px;
            height: 26px;
            font-size: $size-h4;
            
            &:before{
              @include ab(50%,50%,n,n);
              @include translate(-50%,-50%);
            }
          }
        }
      }
      .detail-deal{
        .is-countdown{
          padding:10px 0 30px;
        }
        .countdown-amount{
          font-size: $size-h4 - 2;
          &:before{
            font-size: $size-h4;
          }
        }
      }
    }
  }
  .sb-blog {
    padding: 15px;
    .sb-title {
      margin-bottom: 20px;
    }
    .owl-nav{
      right: 0;
    }
  }
  .sb-blog-grid {
    .owl-controls .owl-nav {
      top: -59px;
    }
    .post-item {
      margin: 0;
      .post-item-inner {
        display: block;
        .post-image {
          display: block;
          width: 100%;          
        }
        .meta-data {
          padding: 0 0 3px;
        }
        .post-content {
          padding: 15px 10px;
          h6 {
            font-weight : $font-medium;
            a {
              color: $body-title-color;
              &:hover {
                color: $main-color;
              }
            }
          }
        }
      }
    }
  }
  .search-blog {
    input[type="text"] {
      height: 44px;
      padding: 12px 25px;
    }
  }
  .sb-about-blog {
    p {
      margin: -8px 0 0;
    }
  }
  .sb-testimonial-inner{
    padding: 20px 20px 50px;
    .testimonial-content{
      .testimonial-top{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
      }
      .customer-img{
        @include border-radius-circle;
        max-width: 33.333%;
       ;
      }
      .name{
        displaY:block;
        margin-bottom: 10px;
        font-weight: $font-medium;
        text-transform: uppercase;
      }
      .rating{
        span{
          &:before{
            content:'\e8ae';
            font-family: 'arenafont';
            color: $body-ratting-empty-color;
          }
          &.active{
            &:before{color: $main-color}
          }
        }
      }
      
    }
  }
  .sb-blog-social-widget{
    .share-links.social-sharing{
      padding: 22px 0;
      li:first-child{
        margin-left: 0;
      } 
      .list-inline{
        li{   
          margin: 0 7px 0 0;  
          a{
            color: #fff;
            background-color : #b4b4b4;
            &:hover{
              background-color: $main-color;
              color: #fff;
            }
          }
        }
      }
      
    }
  }
  .owl-dots{
    bottom: 25px;
  }
} 
.sidebar-none{
  .filter-sidebar.no-sidebar.drawer,
  .filter-order-form {
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    height: 100%;
    width: 300px;
    padding: 60px 20px 30px;
    overflow-y: auto;
    background: $body-background-color;
    @include translate(-300px, 0);  
    @include opacity(0);
    @include transition(all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94));   
    @media (max-width: 300px) {
      width: 100%;
    padding-bottom: 20px;
    } 
    .f-close,
    .fof-close {    
      text-align: center;
      cursor: pointer;
      background: $body-second-color;
      @include border-radius-circle;
      @include transition(all 0.35s ease 0s);
      @include width-btn;
      @include ab(20px, n, n, 10px);    
      &:hover {
        background: $main-color;
        color: $main-color-text;
      }
    } 
  }
  .filter-sidebar.no-sidebar.toggle{
    .sb-filter-tag{
      padding: 20px;
    }
    .advanced-filters{
      .advanced-filter .tag-count{
        float: none;
        margin-left: 10px;
        &:before{content: '('}
        &:after{content: ')'}
      }
    }
  }
}
.sidebar-left,.sidebar-right{
  #sidebar{
    .filter-sidebar.no-sidebar.toggle{
      @media(min-width:992px){
        box-shadow: none;
        display: block;
       .sbw-filter>div .sb-filter{
          width: 100%;
          padding: 0;
        }
      }
      .sb-filter-tag >li{
        width: 100%;
      }
    }
  }
  
  @media(max-width: 991px){
    .filter-sidebar.no-sidebar.drawer,
    .filter-order-form {
      position: fixed;
      z-index: 999999;
      left: 0;
      top: 0;
      height: 100%;
      width: 300px;
      padding: 60px 20px 30px;
      overflow-y: auto;
      background: $body-background-color;
      @include translate(-300px, 0);  
      @include opacity(0);
      @include transition(all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94));   
      @media (max-width: 300px) {
        width: 100%;
      padding-bottom: 20px;
      } 
      .f-close,
      .fof-close {    
        text-align: center;
        cursor: pointer;
        background: $body-second-color;
        @include border-radius-circle;
        @include transition(all 0.35s ease 0s);
        @include width-btn;
        @include ab(20px, n, n, 10px);    
        &:hover {
          background: $main-color;
          color: $main-color-text;
        }
      } 
    }
  }
  
}
.sold-out {
  color: $body-price-sale-color;
  font-size: $size-h5;    
}
.price-range-slider { 
  padding: 30px 0px 0px;    
  .ui-widget-content {
    border: none;
    height: 3px;   
    margin-bottom: 30px; 
  }
  .ui-slider-horizontal .ui-slider-range {
    background-color: $main-color;
    z-index: 1;
    border: 1px solid $main-color;
    @include border-radius(5px, 5px, 5px, 5px);
  }
  .ui-slider-range.ui-widget-header.ui-corner-all {
    background-color: $body-border-color;  
    border-color: $body-border-color;
    &:nth-last-child(1){
      background-color: $main-color;  
      border-color: $main-color;
    }
  }
  .ui-state-default, 
  .ui-widget-content .ui-state-default, 
  .ui-widget-header .ui-state-default {
    background-color: $white;
    background-repeat: repeat-x;    
    height: 24px;
    margin-left: 0px !important;    
    position: absolute;
    top: -10px;
    width: 24px;    
    @include border-radius-circle;
    border: 3px solid $white;
    @include opacity(1);
    cursor: pointer;
    outline: none !important;
    box-shadow: 0 0 4px 3px #ddd;
    &:before{
      content: '';
      @include ab(50%,50%,0,0);
      @include translate(-50%,-50%);
      width: 5px;
      height: 5px;
      @include border-radius-circle;
      background-color: $body-light-color;
    }
  }
  .range-right,
  .range-left {
    .ui-state-default, 
    .ui-widget-content .ui-state-default, 
    .ui-widget-header .ui-state-default {
      margin-left: -7px !important;
    }
  }

  .price-range {      
    padding: 0px 8px;
    p {
      margin: 0px -7px 20px;
    }
    #amount {      
      color: $body-title-color;
      font-size: $body-font-size;
      display: block;
      margin-left:-8px;
      margin-right: -8px;
      text-align: center;
      &>span{
        display: inline-block;
        padding: 7px;
        border: 1px solid $body-border-color;
      }         
    }
    label {          
      color: $body-general-color;
      margin: 0;
    }
  }
}
.sb-filter-wrapper {    
  .sbw-filter {   
    overflow: hidden; 
    .sbf-title { 
      .clear-filter {
        text-transform: capitalize;
        cursor: pointer;
        font-weight: $font-regular;
        font-style: italic;
      }   
      span {                
        cursor: pointer;        
        i {
          display: none;
          &:before {
            content: none;
          }         
        }
        .fa-angle-up {
          display: none !important;
        }
        &.none-active {
          .fa-angle-down {
            display: none !important;
          }
          .fa-angle-up {
            display: block !important;
          }
        }
      }
    }    
  } 
  .sb-filter-tag {
    overflow: auto;
    li {
      margin: 0 0 13px !important;
      line-height: 20px;
      a {
        position: relative;
        padding-left: 25px;
        min-height: 20px;
        display: inline-block;   
        font-size: $body-font-size;     
        &:before{
          content: "";
          @include ab(3px,0,n,n);          
          width: 16px;
          height: 16px;              
          border: 1px solid $body-border-color;  
          @include border-radius(3px, 3px, 3px, 3px);
          @include transition(all 0.35s ease 0s);            
        }
        &:after {
          content: "\e8ca";
          font-family: arenafont;
          font-size: 12px;
          width: 16px;
          height: 16px; 
          @include ab(1px, 2px, n, n);              
          @include opacity(0);
          @include transition(all 0.35s ease 0s);              
        }
        &:hover {
          @media (min-width: 1025px) {
            &:before {
              border-color: $main-color;
            }            
          }              
        }
      }
      &.active {
        > span {
          position: relative;
          padding-left: 25px;
          min-height: 20px;
          display: inline-block;          
          color: $body-title-color;
          font-size: $body-font-size;
          font-weight : $font-medium;
          &:before{
            content: "";
            @include ab(3px,0,n,n);            
            width: 16px;
            height: 16px;              
            border: 1px solid $body-title-color;  
            @include border-radius(3px, 3px, 3px, 3px);
            @include transition(all 0.35s ease 0s)            
          }
          &:after {
            content: "\e8ca";
            font-family: arenafont;
            font-size: 12px;
            width: 16px;
            height: 16px; 
            @include ab(1px, 2px, n, n);              
            @include opacity(1);
            @include transition(all 0.35s ease 0s);              
          }
        }
      }
    }
  }
}
.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 0 25px;    
  }
  > div {    
    .row {margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
    }        
    .sb-price {margin: 10px 0 0; }
    .sbf-title {
      color: $body-title-color;
      line-height: 1.3;
      padding: 15px 0;       
      font-size: $body-font-size + 1;  
      font-weight: $font-medium;   
      text-transform: uppercase;
      border-bottom: 1px solid $body-border-color;
    }
    .sb-filter {
      margin: 0 0 20px;  
      padding-bottom: 15px;
      display: block;
      clear: both;
      width: 100%;
      float: left;
      text-align: left;   
      &.size {
        .advanced-filters {
          > li.advanced-filter {
            margin: 0 5px 8px 0;
            display: inline-block;
            a {
              display: inline-block;
              padding: 0 3px;
              min-width: 30px;
              line-height: 26px;
              text-transform: uppercase;
              text-align: center;
              font-weight: $font-bold;
              font-size: $body-font-size;
              border: 2px solid $body-border-color;
              &:before,
              &:after {
                content: none;
              } 
              &:hover {
                background: $button-btn1;
                color: $button-btn1-txt;
                border-color: $button-btn1-border;
              }             
            }
          }
        }
      }  
      &:last-child {
        margin-bottom: 0;
        border-bottom: none;
      }   
    }
    .advanced-filters {
      list-style: none;
      margin: 25px 0 0;      
      padding: 0;
      overflow: auto;
      max-height: 290px;
      > li {
        > a {
          position: relative;
          padding-left: 23px;         
          &:before {
            content: '';
            border: 1px solid $body-border-color;
            width: 15px;
            height: 15px;
            background: transparent;
            display: block;
            @include ab(3px, 0, n, n);
            @include transition(all 0.35s ease 0s);
          }     
          &:hover {
            color: $main-color; 
            &:before {
              border-color: $main-color !important;
            }           
          }
        }
        &.active-filter {
          > a {
            &:before {
              background-color: $main-color;         
            }
            &:after {
              content: "\e8ca";
              font-family: arenafont;
              font-size: 12px;
              width: 16px;
              color: #fff;
              height: 16px;               
              @include ab(1px, 3px, n, n);              
              @include opacity(1);
              @include transition(all 0.35s ease 0s);         
            }       
          }
        } 
        &.advanced-filter {
          line-height: 20px;
          margin-bottom: 13px;
          a {
            position: relative;
            padding-left: 35px;
            min-height: 20px;
            display: inline-block;    
            font-size: $body-font-size; 
            font-weight: 400;  
            color: $body-general-color;               
            &:before {
              content: "";
              @include ab(50%,0,n,n);              
              width: 20px;
              height: 20px;              
              border: 1px solid $body-border-color;  
              @include translate(0,-50%);
              @include transition(all 0.35s ease 0s);            
            }
            &:after {
              content: "\e8ca";
              font-family: arenafont;
              font-size: 12px;
              width: 16px;
              height: 16px; 
              @include ab(1px, 5px, n, n);              
              @include opacity(0);
              @include transition(all 0.35s ease 0s);              
            }
            &:hover {
              @media (min-width: 1025px) {                
                color: $main-color;               
                &:before {
                  border-color: $main-color;
                }                
              }              
            }
          }
          .tag-count{
            float: right;
            display: inline-block;
            width: 20px;
            height: 20px;
            font-weight: $font-regular;
            line-height: 24px;
            font-size: $body-font-size;
            text-align: center;
            color: $body-light-color;
            background-color: $body-second-color;
            @include border-radius(5px,5px,5px,5px);
          }
          &.af-color {
            border: none;
            padding: 0;
            float: none;            
            margin: 0 10px 10px 0;
            width: 17px;
            height: 17px;
            line-height: 17px;            
            position: relative; 
            cursor: pointer;
            float: left;     
            display: block;       
            border: 1px solid $body-border-color;            
            @include border-radius-circle;
            @include box-shadow(0 0 0 0px $body-border-color inset);  
            @include transition(all 0.35s ease 0s);
            a {                            
              padding: 0;
              position: relative;
              display: block;  
              font-size: 0;
              content: '';
              width: 100%;
              height: 100%; 
              min-height: 15px;
              &:before {
                content: none !important;
              }
              &:after {                              
                @include ab(50%, 50%, n, n);
                @include translate(-50%, -50%);
                @include border-radius-circle;
                width: 100%;
                height: 100%;
                background: $white;
                content: '';
              }
            }
            &:hover {
              @media (min-width: 1025px) {                
                @include box-shadow(0 0 0 0px $body-border-color inset); 
                a {
                  &:after {
                    width: 7px;
                    height: 7px;
                    @include opacity(1);
                }
                }                
              }
            }
            &.active-filter {              
              @include box-shadow(0 0 0 0px $body-border-color inset); 
            }
            &.color_white {
              a {
                &:after {
                  background: $black;
                }
              }              
            }
          }
          &.active-filter {            
            a {
              &:before {
                border-color: $main-color;
              }
              &:after {
                width: 7px;
                height: 7px;
                @include opacity(1);
              }
            }
          }
        }
      }
    }    
  }  
}
/* home page ------------------------------*/
.is-countdown {
  background: none;
  border: none;  
  padding: 30px 0 40px;
  .countdown-row{
    width: 100%;
    display:block;
  }
  .countdown-section {
    float: none;
    display: inline-block;
    width: 24.5%;    
  
    .countdown-amount {
      display: block;
      width: auto;      
      text-align: center;    
      position: relative;  
      font-size: $size-h1;
      color: $main-color;  
      font-weight: $font-medium;    
    }
    .countdown-period {
      color: #cacaca;
      display: block;
      padding: 5px 0 0;
      font-size: $size-h6 - 2;
      font-weight: $font-medium;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }  
  
     &:nth-child(1),&:nth-child(2),&:nth-child(3){
       .countdown-amount:before{
         content: ':';
         color: #cacaca;
         font-size: $size-h1;
         @include ab(50%,100%,n,n);
         @include translate(0,-50%);
       }
     }
  }
}
.title-wrapper {  
  margin: 0px auto 30px;  
  padding: 0;
  position: relative;   
  h3 {
    font-weight: $font-medium;     
    margin: 0 0 20px;     
    @include title-wrapper;
    .highlight{
      font-weight: $font-light;
    }
  } 
  > a {
    @media (min-width: 480px) {
      @include ab(11px, n, n, 0);
    }
    i {
      margin-left: 5px;
    }
  }
  @media(max-width: 575px){
      &>*{
        font-size: $size-h4 - 2;
      }
  }
}
.home-banner-items {
  &.border-style {    
    .banner-item {
      border: 1px solid $body-border-color;
    }
  }  
  &.no-padding {   
    .bc-masonry {
      .banner-item {
        padding: 0;
        margin: 0;
      }
    } 
    .row {      
      > div {
        padding: 0;
      }
    }
    .text {
      padding: 0 30px;
      @media (max-width: 767px) {
        padding: 0;
      }      
    }   
  }  
  .owl-dots{
    bottom: 30px;
  }
}
.home-banner-masonry {  
  vertical-align: top;
  letter-spacing: -0.31em;  
  margin: 0 auto;
  .banner-item {  
    vertical-align: top;
    letter-spacing: 0;
    display: inline-block;  
    &.width-16 {
      width: 16.666666%;
      @media (max-width: 767px) {
        width: 100%;
      }      
    }  
    &.width-20 {
      width: 20%;
      @media (max-width: 767px) {
        width: 100%;
      }  
    } 
    &.width-25 {
      width: 25%;
      @media (max-width: 767px) {
        width: 100%;
      }  
    } 
    &.width-33 {
      width: 33.333333%;
      @media (max-width: 767px) {
        width: 100%;
      }  
    } 
    &.width-40 {
      width: 40%;
      @media (max-width: 767px) {
        width: 100%;
      }  
    }
    &.width-50 {
      width: 50%;
      @media (max-width: 767px) {
        width: 100%;
      }
    }
    &.width-66 {
      width: 66.666666%;
      @media (max-width: 767px) {
        width: 100%;
      }  
    }
    &.width-75 {
      width: 75%;
      @media (max-width: 767px) {
        width: 100%;
      }  
    }
    &.width-100 {
      width: 100%;

    }    
  }
  .bc-masonry {           
    .banner-item {      
      padding: 0 15px;      
    }    
    &.margin-row {
      margin: 0 -15px;
    }
  }
}
.home-banner { 
  &.effect-2 {
    .image {
      > a {
        &:before {                    
          @include before;
          height: 100%;
          opacity:0;
        }
      }
      img{
        transform: scale(1.2);
      }
    }
    @media (min-width: 1025px) {
      .banner-item {
        &:hover {
          .image {        
            > a {
              &:before {
                @include opacity(1);
              }
            }
            img{
              transform: scale(1.2) translate(-7%,0);
            }
          }
        }
      }      
    }    
  }  
  &.layout-full {
    padding: 0 15px;
    .home-banner-items {
      margin: 0px auto;
      &.no-padding {
        padding: 0;
        .row {
          margin: 0;
        }
      }
    }       
  }
  .owl-theme .owl-controls .owl-nav {
    position: static; 
    > div {
      margin: 0;
      @include ab(50%, n, n, n);
      @include translate(0, -50%);
      @include transition(all 0.35s ease);
      @include opacity(0);
      &.owl-prev {
        left: 5%;
        span:before{
          font-size: $size-h1;
        }
      }
      &.owl-next {
        right: 5%;
        span:before{
          font-size: $size-h1;
        }
      }
    }
  }
  &.no-padding{
    padding:0;
  }
  &:hover{
    .owl-theme .owl-controls .owl-nav{
      > div{
        opacity: 1;
      }
    }
  }
}
.section-recently-viewed {
  .title-wrapper{
    margin: 0;
    padding-top: 30px;
  }
	&.layout-full {
		padding-left: 15px;
    	padding-right: 15px;  
    	.collection {
    		max-width: 1400px;
      		margin: 0 auto;
    	}
	}
	.product {
		position: relative;
		padding: 0 10px;
		&:before {
			content: '';
			width: 1px;
			height: 85%;
			background: $body-border-color;
			@include ab(50%, 0, n, n);
			@include translate(0, -50%);
		}		
	}
	.owl-item {
		&.current {
			.product {
				&:before {
					content: none;
				}
			}
		}		
	}
	.owl-stage-outer {
		text-align: center;
		.owl-stage {
			margin: 0 auto;
		}
  }
  .owl-controls{
    text-align: center;
    margin: 10px 0;
  }
	.owl-theme .owl-dots {
    position: static;
    display: inline-flex;
    align-items: center;
		@include translate(0, 0);
	}	
}
.banner-item {
  position: relative;  
  @media (max-width: 991px) {
    margin-bottom: 15px;
  }
  .image {
    img {
      width: 100% !important;
      vertical-align: middle;
    }
  }
  .text {   
    text-align: center;
    padding: 15px 0;
    
    .title {      
      font-family: $font-heading; 
      line-height: 1.0;    
      font-weight: $font-regular;   
      margin-bottom: 3%;
    }
    .subtitle {            
      font-family: $font-heading;
      margin: 0 auto 15px;
      line-height: 1;
      letter-spacing: 1.4px;
      font-weight: $font-regular;   
    }
    .caption {           
      font-size: $body-font-size;
      line-height: 22px;
      font-family: $font-heading;      
    }    
    .btn {     
      padding: 8px 30px;
      line-height: 30px;
      font-size: $body-font-size;
      font-weight: $font-medium; 
      min-width: 150px;
      border: none; 
      -ms-transform: translateZ(0); 
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      @include border-radius(3px,3px,3px,3px);
      &:hover {
        @include opacity(0.8);
      }  
    }
  } 
  &.text-box-overlay {
    .text {
      @include ab(n, n, n, n);      
      z-index: 1;         
      .offer {
        white-space: nowrap;
        font-weight: $font-regular;
        margin-bottom: 10px;
     
        @media (max-width: 1199px) and (min-width: 992px) {
          @include scale(0.9, 0.9);
        }
        .text {
          position: static;
          display: block;
          padding: 0 0 15px;
          @include translate(0, 0);
        }
      }
      &>div:nth-last-child(1){
        margin-bottom: 0;
        span{
          padding-bottom: 0 !important;
        }
      }
    }
    &.top-left {
      .text {
        text-align: left;
        top: 0;
        left: 10%;        
      }
    }
    &.top-center {
      .text {
        top: 0;
        left: 50%;
        display: table;
        @include translate(-50%, 0);
      }
    }
    &.top-right {
      .text {
        text-align: right;
        top: 0;
        right: 10%;        
      }
    }
    &.center-left {
      .text {
        top: 50%;
        left: 10%;
        text-align: left;
        @include translate(0%, -50%);
      }
    }
    &.center-center {
      .text {
        top: 50%;
        left: 50%;
        display: table;
        @include translate(-50%, -50%);
      }
    }
    &.center-right {
      .text {
        top: 50%;
        right: 10%;
        text-align: right;
        @include translate(0%, -50%);
      }
    }
    &.bottom-left {
      .text {
        text-align: left;
        bottom: 0;
        left: 10%;        
      }
    }
    &.bottom-center {
      .text {
        bottom: 0;
        left: 50%;
        display: table;
        @include translate(-50%, 0);
      }
    }
    &.bottom-right {
      .text {
        text-align: right;
        bottom: 0;
        right: 10%;        
      }
    }
  }   
  @media(max-width:991px){
    .title{
      font-size:$size-h1 * 0.7 ;
      margin-bottom: 5px;
    }
    .subtitle{
      font-size:$size-h2 * 0.7  ;
      margin-bottom: 10px;
    }
    .is-countdown{
      padding:  0;
      .countdown-amount{
        font-size: $size-h1 * .6;
      }
    }
    .text{
      .offer{
        font-size:$size-h5 * 0.7  ;
        margin-bottom: 0;
      }
      .text{
        padding-bottom: 10px;
      }
      .btn{
        padding: 0px 10px;
      }
    }
  }
  @media(max-width: 575px){
    .is-countdown{display:none;}
    &>.text{
      width: 75%;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%,-50%) !important;
      .title{
        font-size:5vw ;
        margin-bottom: 5px;
      }
      .subtitle{
        font-size:4vw  ;
        margin-bottom: 10px;
      }
      .offer{
        font-size:4vw ;
        margin-bottom: 0;
      }
    }
  }
}
.col-12>.banner-item{
  .btn-banner{
    padding: 2.5px 10px;
    min-width: 110px;
  }
  @media(max-width: 1200px) and (min-width:576px){
    .title{
      font-size:$size-h1 * 0.7 ;
      margin-bottom: 5px;
    }
    .subtitle{
      font-size:$size-h2 * 0.7  ;
      margin-bottom: 10px;
    }
    .text{
      .offer{
        font-size:$size-h5 * 0.7  ;
        margin-bottom: 0;
      }
      .text{
        padding-bottom: 10px;
      }
    }
    .highlighted{
      font-size:$size-h3 * 0.7  ;
    }
  }
  @media(max-width: 480px){
    .title{
      font-size:$size-h1 * 0.6 ;
      margin-bottom: 5px;
    }
    .subtitle{
      font-size:$size-h2 * 0.6  ;
      margin-bottom: 10px;
    }
    .text{
      .offer{
        font-size:$size-h5 * 0.6  ;
        margin-bottom: 0;
      }
      .text{
        padding-bottom: 10px;
      }
    }
    .highlighted{
      font-size:$size-h3 * 0.6  ;
    }
  }
}
.nav-tabs {
  border: none;
  li {
    float: none;
    display: inline-block;
    position: relative;
    border: none;   
    margin: 0;    
    .nav-link {      
      border: none;
      background: none;
      color: $body-light-color;
      @include border-radius-reset;    
      &.show,
      &.active {
        border: none;
        background: none;
        color: $body-general-color;
        font-weight: $font-medium;
        @include border-radius-reset;    
      }
    }  
    a {      
      line-height: 24px;
      margin: 0;
      padding: 0px 0px 5px;                      
      border: none;               
      display: block;
      position: relative;          
      color: $body-title-color;
      font-size: $size-h6;                                                         
      background: none;    
      text-align: center;   
      @include border-radius-reset; 
      &:before {
      content: '';
      width: 0;
      height: 2px;
      z-index: 1;
      background-color: $main-color;
      @include ab(n, 50%, 0, 50%);
      @include transition(all 0.3s ease 0s);
      @include opacity(0);    
        }     
      &:hover {
        border: none;
        background: none;        
      }
      &:focus {
        border: none;
        background: none;          
        color: $body-title-color; 
      }
      @media (min-width: 1025px) {
        &:hover {            
          color: $body-title-color;
          &:before {
            @include opacity(1);
            left: 0;
            right: 0;
            width: 100%;
          }
          &:after {
            @include opacity(1);
            z-index: 1;
          }     
        }
      }      
      &.active {
        background: none;
        border: none;
        color: $body-title-color;
        font-weight: $font-medium;          
        &:before {
          @include opacity(1);
          left: 0;
          right: 0;
          width: 100%;
      }
      &:after {
          @include opacity(1);
          z-index: 1;
      }    
      }
    } 
  }    
  &.tab-title-1,
  &.tab-title-3 {
    li {
      padding: 0 20px;
      @media (max-width: 991px) {
        padding: 0 10px;
      }
      @media(min-width:576px){
        &:first-child {
          padding-left: 0;
        }
        &:last-child {
    
          padding-right: 0;
        }
      }
     
    }   
  }  
  &.tab-title-2,
  &.tab-title-4 {
    border-bottom: none;
    @media (max-width: 1024px) {
      &:before {
        content: none !important;
      }
    }
    li {
      padding: 0;
      .nav-link {
      line-height: 24px;
      margin: 0px;
      padding: 3px 20px;      
      font-weight: 400;
      font-size: $body-font-size + 1px;
      position: relative;
      border: 2px solid transparent;
      @include border-radius(13px, 13px, 13px, 13px);
      @media (max-width: 991px) {
        padding-left: 12px;
        padding-right: 12px;
      }
        &:before,
        &:after {
          content: none;
        }
        &.active,
        &.show {
          border-color: $main-color;
        }
        &:hover {
          @media (min-width: 1025px) {
            border-color: $main-color;
          }
        }
      }
    }           
  }
  &.tab-title-4 {
  	li {     
      .nav-link {
      	&.active,
        &.show {
        	background: $main-color;
        	color: $main-color-text;
        	font-weight: $font-bold;
        }        
      }
    }
  }
}

.nav-tab-wrapper {
  position: relative; 
  
  .nav {    
    display: block;      
    margin-bottom: 10px;
    @media(max-width: 767px){
      white-space: nowrap;
      overflow-x: auto;
      margin-right: 75px;
      li{
        margin-bottom: 3px;
      }
    }
    &.tab-title-3 {
	    position: relative;
	    @media (min-width: 992px) {
	    	position: static; 
	    	display: block;
	    	@include translate(0, 0);
	    }
	    @media (min-width: 1200px) {      
	      margin-left: calc(33.33333333% + 15px);
	    }
	    @media (max-width: 1199px) and (min-width: 992px) {
	      margin-left: calc(41.6666666667% + 15px);
	    }
	    @media (max-width: 991px) and (min-width: 768px) {
	      margin-left: calc(50% + 15px);
	    }
	    &.align-left {
	    	@media (min-width: 768px) {
	    		text-align: left;
	    	}
	    }
	    &.align-right {
	    	@media (min-width: 768px) {
	    		text-align: right;
	    	}
	    }
	  }   
  }
}
.hp-tabs-section {  
  padding-top: 30px;    
  @media (max-width: 767px) {
    padding-top: 20px;
 
  }
  &.no-padding {
    padding-top: 0;
    padding-bottom: 0;
  }
  @include clearfix();
  .title-wrapper {
    margin-bottom: 8px;
    h3 {
      margin-bottom: 8px;
    }
  }
  .col-link {
    display: inline-block;
    margin: 0 0 20px;
    i {
      margin-left: 5px;
    }
    @media (min-width: 768px) {
      @include ab(-45px, n, n, 0);
      z-index: 1;
    }
  }
  
  .tab-content {   
    position: relative; 
    @include clearfix();
    @media (min-width: 768px) {
    }
    > .tab-pane {                     
      visibility: hidden;
      width: 100%;      
      @include opacity(0);  
      @include ab(0, 0, n, n);      
      @include transition(all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94));      
      &.special_block-none {
        display: block;
        float: left;
        width: 100%;
        clear: both;
      }
      &.show {   
        @include opacity(1);        
        position: static;                 
        visibility: visible;        
      }   
      &.width-2 {
      	.big-product-left-01,
      	.big-image-left,
      	.big-image-right {
      		> .big-grid-item {
      			@media (min-width: 768px) {
      				width: 385px;
      			}   
      			.product-wrapper .product-content .deal-progress .progress {
      				height: 15px;      				
      			}   			
      		}
      		.wrap-grid-item {
      			@media (min-width: 768px) {
      				width: calc(100% - 385px);
      			}      			
      			.row {
      				> div {
      					@media (min-width: 1300px) {
      						@include flex(0 0 20%);      						
						    max-width: 20%;
						    .product-wrapper {
						    	&:before {
						    		content: '' !important;
						    	}
						    }
						    &:nth-child(5n + 1) {
						    	.product-wrapper {
							    	&:before {
							    		content: none !important;
							    	}
							    }	
						    }
      					}
      					@media (max-width: 1299px) and (min-width: 1100px) {
      						@include flex(0 0 25%);      						
						    max-width: 25%;
						    .product-wrapper {
						    	&:before {
						    		content: '' !important;
						    	}
						    }
						    &:nth-child(4n + 1) {
						    	.product-wrapper {
							    	&:before {
							    		content: none !important;
							    	}
							    }	
						    }
						    &:nth-child(9),
						    &:nth-child(10) {
						    	display: none;
						    }
      					}
      					@media (max-width: 1099px) and (min-width: 992px) {
      						@include flex(0 0 33.333333%);      						
						    max-width: 33.333333%;
						    .product-wrapper {
						    	&:before {
						    		content: '' !important;
						    	}
						    }
						    &:nth-child(3n + 1) {
						    	.product-wrapper {
							    	&:before {
							    		content: none !important;
							    	}
							    }	
						    }
      						&:nth-child(7),
						    &:nth-child(8),
      						&:nth-child(9),
						    &:nth-child(10) {
						    	display: none;
						    }	
      					}      					
      				}
      			}
      		}
      	}      	
      	.tabs-list-row {
      		&.row-number-6,
      		&.row-number-7 {
      			@media (max-width: 1199px) and (min-width: 992px) {      				
      				> .product-wrapper {
      					width: 20%;	
      					&:before {
      						content: '' !important;
      					}
      					&:nth-child(5n + 1) {
      						&:before {
	      						content: none !important;
	      					}
      					}
      				}
      			}      			
      		}
      		&.row-number-4,
      		&.row-number-5,
      		&.row-number-6,
      		&.row-number-7 {
      			@media (max-width: 991px) and (min-width: 768px) {      				
      				> .product-wrapper {
      					width: 25%;	
      					&:before {
      						content: '' !important;
      					}
      					&:nth-child(4n + 1) {
      						&:before {
	      						content: none !important;
	      					}
      					}
      					&:nth-child(4) {
      						border-top: none;
      					}
      				}
      			}
      		}
      	}
      	.big-product-right {
      		> .big-grid-item {
      			@media (min-width: 992px) {
      				width: 385px;
      			}
      		}
      		.wrap-grid-item {
      			@media (min-width: 992px) {
      				width: calc(100% - 385px);
      			}
      			.row {
      				> div {
      					@media (min-width: 1300px) {
      						@include flex(0 0 20%);
						    max-width: 20%;						    
      					}
      					@media (max-width: 1299px) and (min-width: 1100px) {
      						@include flex(0 0 25%);
						    max-width: 25%;						    
						    &:nth-child(9),
						    &:nth-child(10) {
						    	display: none;
						    }
      					}
      					@media (max-width: 1099px) and (min-width: 992px) {
      						@include flex(0 0 33.333333%);
						    max-width: 33.333333%;						    
      						&:nth-child(7),
						    &:nth-child(8),
      						&:nth-child(9),
						    &:nth-child(10) {
						    	display: none;
						    }	
      					}      					
      				}
      			}
      		}
      	}
      	.big-product-left-02 {
      		> .big-grid-item {
      			@media (min-width: 992px) {
      				width: 385px;
      			}         			 			
      		}
      		.wrap-grid-item {
      			@media (min-width: 992px) {
      				width: calc(100% - 385px);
      			}      			
      			.row {
      				> div {
      					@media (min-width: 1300px) {
      						@include flex(0 0 20%);
						    max-width: 20%;
						    .product-wrapper {
						    	&:before {
						    		content: '' !important;
						    	}
						    }
						    &:nth-child(5n + 1) {
						    	.product-wrapper {
							    	&:before {
							    		content: none !important;
							    	}
							    }	
						    }
      					}
      					@media (max-width: 1299px) and (min-width: 1100px) {
      						@include flex(0 0 25%);
						    max-width: 25%;
						    .product-wrapper {
						    	&:before {
						    		content: '' !important;
						    	}
						    }
						    &:nth-child(4n + 1) {
						    	.product-wrapper {
							    	&:before {
							    		content: none !important;
							    	}
							    }	
						    }
						    &:nth-child(9),
						    &:nth-child(10) {
						    	display: none;
						    }
      					}
      					@media (max-width: 1099px) and (min-width: 992px) {
      						@include flex(0 0 33.333333%);
						    max-width: 33.333333%;
						    .product-wrapper {
						    	&:before {
						    		content: '' !important;
						    	}
						    }
						    &:nth-child(3n + 1) {
						    	.product-wrapper {
							    	&:before {
							    		content: none !important;
							    	}
							    }	
						    }
      						&:nth-child(7),
						    &:nth-child(8),
      						&:nth-child(9),
						    &:nth-child(10) {
						    	display: none;
						    }	
      					}      					
      				}
      			}
      		}
      	}
      }  
      &.width-3 {
      	.big-image-left,
      	.big-image-right {
      		@media (min-width: 560px) {
      			display: table;
      			width: 100%;
      		}
      		> .big-grid-item {
      			@media (min-width: 560px) {
      				width: 200px;
      				display: table-cell;
      				vertical-align: top;
      			}
      		}
      		.wrap-grid-item {
	      		@media (min-width: 480px) {
	      			width: calc(100% - 200px);
	      			display: table-cell;
	      			vertical-align: top;
	      			padding-top: 0;
	      		}
	      		.row {
	      			> div {
	      				@media (min-width: 1200px) {	  					    
						    @include flex(0 0 16.666666%);
						    max-width: 16.666666%;
						    .product-wrapper {
						    	&:before {
						    		content: '' !important;
						    	}
						    }
						    &:nth-child(6n + 1) {
						    	.product-wrapper {
							    	&:before {
							    		content: none !important;
							    	}
							    }	
						    }
	      				}
	      				@media (max-width: 1199px) and (min-width: 1025px) {
	      					@include flex(0 0 20%);
						    max-width: 20%;
						    .product-wrapper {
						    	&:before {
						    		content: '' !important;
						    	}
						    }
						    &:nth-child(5n + 1) {
						    	.product-wrapper {
							    	&:before {
							    		content: none !important;
							    	}
							    }	
						    }
						    &:nth-child(6) {
						    	display: none;
						    }
	      				}
	      				@media (max-width: 1024px) and (min-width: 992px) {
	      					@include flex(0 0 25%);
						    max-width: 25%;
						    .product-wrapper {
						    	&:before {
						    		content: '' !important;
						    	}
						    }
						    &:nth-child(4n + 1) {
						    	.product-wrapper {
							    	&:before {
							    		content: none !important;
							    	}
							    }	
						    }
	      					&:nth-child(5),
	      					&:nth-child(6) {
						    	display: none;
						    }
	      				}
	      				@media (max-width: 991px) and (min-width: 768px) {
	      					@include flex(0 0 33.333333%);
						    max-width: 33.333333%;
						    .product-wrapper {
						    	&:before {
						    		content: '' !important;
						    	}
						    }
						    &:nth-child(4n + 1) {
						    	.product-wrapper {
							    	&:before {
							    		content: none !important;
							    	}
							    }	
						    }
						    &:nth-child(3) {
						     	border-top: none;
						    }
						    &:nth-child(4) {
						     	display: none;
						    }
	      				}
	      				@media (max-width: 767px) and (min-width: 560px) {
	      					display: none;
	      					&:nth-child(1),
	      					&:nth-child(2) {
						    	display: block;
						    }
	      				}
	      			}
	      		}
	      	}
      	}      	
      	.tabs-list-row {
      		&.row-number-6,
      		&.row-number-7 {
      			@media (max-width: 1199px) and (min-width: 992px) {      				
      				> .product-wrapper {
      					width: 20%;	
      					&:before {
      						content: '' !important;
      					}
      					&:nth-child(5n + 1) {
      						&:before {
	      						content: none !important;
	      					}
      					}
      				}
      			}      			
      		}
      		&.row-number-4,
      		&.row-number-5,
      		&.row-number-6,
      		&.row-number-7 {
      			@media (max-width: 991px) and (min-width: 768px) {      				
      				> .product-wrapper {
      					width: 25%;	
      					&:before {
      						content: '' !important;
      					}
      					&:nth-child(4n + 1) {
      						&:before {
	      						content: none !important;
	      					}
      					}
      					&:nth-child(4) {
      						border-top: none;
      					}
      				}
      			}
      		}
      	}
      }
    }


    .special-block-product,.special-block-image {
      .big-product-style,.big-image-style{
        margin: 0;
      }
      .big-grid-item{
        text-align: center;
        .product-name,.product-vendor,.product-price{
          text-align: left ;
        }
        
      }
      .special-product-label {
      .spl-1 {
        font-size: $size-h3;                
        display: inline-block;
        color: $body-title-color;
        strong {
          display: block;   
          font-weight: 400;
        }
      }
      .spl-2 {
        float: right;
        background: $body-label-sale-background;
        color: $body-label-sale-color;
        padding: 19px 5px;
        line-height: 1.2;
        text-align: center;
        width: 75px;
        height: 75px;
        @include border-radius-circle;
        .text {
          display: block;
          font-size: 12px;
        }
        .percent {
          display: block;
          font-size: $size-h4;
          font-weight : $font-medium;
        }
      }
    }   
      .big-product-left-01 {
        @media (min-width: 768px) {                    
          width: 100%;
          vertical-align: top;                    
        }
        > .big-grid-item {
          @media (min-width: 1200px) {
            width: 33.33333333%;
          }
          @media (max-width: 1199px) and (min-width: 992px) {
            width: 41.6666666667%;
          }
          @media (max-width: 991px) and (min-width: 768px) {
            width: 50%;
          }
          @media (min-width: 768px) {           
            display: table-cell;
            vertical-align: top;
            padding-right: 15px;
          }         
          .product-wrapper {
          border: 2px solid $main-color;
          overflow: hidden;
          padding: 20px 20px 30px;          
          margin: 14px 0 0 0;
          background: $white;
          @media (max-width: 767px) {
            margin: 0 0 10px;
            padding: 20px 15px;
          }
            &:before,
            &:after {
              content: none;
            }
            .product-head {
              position: relative;             
            }
            .product-content {   
              .product-price {
                .price-sale {
                  float: none;
                }
              }           
              .deal-progress {
                  overflow: hidden;
                  .deal-stock {
                    width: 100%;
                    overflow: hidden;
                    text-align: left;
                    padding: 26px 0 13px;                   
                    .stock-sold {
                      float: left;                      
                      color: $body-title-color;
                    }
                    .stock-available {
                      float: right;                       
                      color: $body-title-color;
                    }
                  }
                  .progress {
                    @include border-radius-10;
                    @include box-shadow(0 0 0 $white);
                    background-color: #eeeeee;
                    height: 20px;
                    margin: 0;
                    .progress-bar {
                      height: 100%;
                      background-color: $main-color;
                      @include border-radius-10;
                      @include box-shadow(0 0 0 $white);
                    }
                  }
                }
                .offer-text {
                display: block;
                font-size: 15px;
                color: #383838;
                padding: 16px 0 0;
              }
              .is-countdown {
                border: none;
                background: none;
                text-align: center;
                margin: 15px auto 0;
                overflow: hidden;
                white-space: nowrap;
                .countdown-row {
                  padding: 0;
                }
                .countdown-section {
               
                  margin: 0px auto;
                  padding: 0 7px;
                  display: inline-block;
                  position: relative;
                  float: none;
                  @media(min-width: 767px){
                    width: auto;
                  }
                  &:last-child {
                    &:after {
                      content: none;
                    }
                  }
                  .countdown-amount {             
                    font-size: 30px;
                    padding: 0 12px;
                    line-height: 40px;
                    float: none;
                    margin:0 auto;              
                    background: $bg-deal-section;
                    color: $text-deal-text;
                    @include border-radius(5px, 5px, 5px, 5px);
                    @media (max-width: 479px) {
                      font-size: 6.5vw;
                      padding: 0 6px;
                    }
                  }
                  .countdown-period {
                    font-size: 12px;
                    text-transform: uppercase;
                    float: none;              
                    padding: 5px 0 0;
                    color: $body-title-color;
                    margin: 0px auto;
                  }
                }
              }
            }
          }
        }
        .wrap-grid-item {
          @media (min-width: 1200px) {
            width: 66.66666667%;
          }
          @media (max-width: 1199px) and (min-width: 992px) {
            width: 58.3333333333%;
          }
          @media (max-width: 991px) and (min-width: 768px) {
            width: 50%;
          }
          @media (min-width: 768px) {            
            padding-left: 0px;
            display: table-cell;
            vertical-align: top;
          }
          .row {  
            margin: 0;        
            > div {
              padding: 0;
              &.col-lg-4 {
                @media (min-width: 992px) {
                  &:nth-child(3n + 1) {
                    .product-wrapper {
                      &:before {
                        content: none;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .big-product-left-02,
      .big-product-right {
        > .big-grid-item {
          @media (min-width: 768px) {
            display: table-cell;
            vertical-align: top;            
          }         
          @media (min-width: 992px) {
            width: 30.7%;
          }
          @media (max-width: 991px) and (min-width: 768px) {
            width: 45%;
          }
          .product-head {
            .special-product-label {
              display: none;
            }
            .image {
              margin: 7px 0 20px;
            }
            .thumbs-list {
              overflow: hidden;
              display: inline-block;
              margin: auto;
              .thumb-image {
                float: left;
                width: 58px;                
                margin: 0 7px 7px 0;
                padding: 0;
                border: 1px solid $body-border-color;   
                position: relative;
                cursor: pointer;
                &:before {
                  content: '';
                  height: 2px;
                  width: 0;
                  background: $main-color;
                  @include ab(n, -1px, -1px, -1px);
                  @include transition(all 0.35s ease 0s);
                  @include opacity(0);
                }             
                &:hover {
                  @media (min-width: 1025px) {
                    &:before {
                      @include opacity(1);
                      width: 100%;
                    }
                  }
                }
                &:last-child {
                  margin-right: 0;
                }
              }
            }
          } 
          .product-wrapper {
            @media (max-width: 767px) {
              padding: 0 15px 20px;
            }
            &:before,
            &:after {
              content: none;
            }
            .product-content {
              .product-price {
                padding: 0;
              }
              .price-cart-wrapper {
                border: none;
                margin-top: 6px;
                padding-bottom: 0;
              }
              .price-sale {
                  float: none;
                  font-size: 30px;
                }
                .price {
                  font-size: 30px;
                }
                .price-compare {                  
                  font-size: $size-h5;                  
                }               
            }
          }
        }
        .wrap-grid-item {
          @media (min-width: 768px) {            
            display: table-cell;
            vertical-align: top;
          }  
          @media (min-width: 992px) {
            width: 69.3%;                     
          }
          @media (max-width: 991px) and (min-width: 768px) {
            width: 55%;
          }
          .row {
            margin: 0; 
            > div {
              padding: 0;
            }           
          } 
          .col-lg-3 {           
            @media (min-width: 992px) {
              &:nth-child(4n + 1)  {
                .product-wrapper {              
                  &:before {
                    content: none;
                  }             
                }
              }
            }           
          }  
          .col-lg-4 {   
            @media (min-width: 992px) {
              &:nth-child(3n + 1)  {
                .product-wrapper {              
                  &:before {
                    content: none;
                  }             
                }
              }
            }         
            @media (max-width: 767px) {
              width: 50%;
              flex: 0 0 50%;
              max-width: 50%;
              &:nth-child(even) {
                .product-wrapper {
                  margin-right: 0;
                }
              }
            }
          }                         
        }
      }
      .big-product-left-02 {        
        .wrap-grid-item {
          @media (min-width: 768px) {
            padding-left: 15px;
          }                 
        }
      }
      .big-product-right {        
        > .big-grid-item {
          @media (min-width: 992px) {
            width: 41.66666667%;
          }         
          .product-head {
            .thumbs-list {
              padding-bottom: 2px;
            }
          }
          .product-wrapper {
            @media (max-width: 767px) {
              padding-top: 15px;
              padding-bottom: 15px;
            }
          }
        }
        .wrap-grid-item {
          @media (min-width: 992px) {
            width: 58.33333333%;
          } 
          .col-md-6 {
            @media (max-width: 991px) and (min-width: 768px) {
              border-top: none;
            }
          }        
          .product-wrapper {
            margin: 0 5px 5px 0;
            &:before {
              content: none;
            }
          }
        }
      }
      .big-product-center {
        .product-wrapper {
          padding: 15px 25px;                   
          &:before {
            content: none;
          }
          @media (max-width: 1199px) {
            padding: 15px;
          }         
        }  
        .wrap-grid-item {
          .product-wrapper {
            @media (max-width: 479px) {
              padding: 10px;
            }
          }
          &:first-child {
            @media (min-width: 1200px) {
              padding-right: 8px;
            }
            @media (max-width: 1199px) and (min-width: 768px){
              padding-right: 5px;
            }
          }
          &:last-child {
            @media (min-width: 1200px) {
              padding-left: 8px;
            }
            @media (max-width: 1199px) and (min-width: 768px){
              padding-left: 5px;
            }
          }
          .col-sm-6 {
            @media (max-width: 767px) {
              &:nth-child(odd) {
                padding-right: 2.5px;
              }
              &:nth-child(even) {
                padding-left: 2.5px;
              }
            }
          }
        }
        .big-grid-item {
          padding:25px 0;
          box-shadow: 0 0 4px 2px #f2f2f2;
          @include transition(all 0.35s ease);  
          align-self: center;
          @media (max-width: 767px) {
            padding:25px 15px;
          }                   
          .product-head {
            .special-product-label {
              display: none;
            }
            .product-image {
              @media (min-width: 1200px) {
                margin: 7.7% auto;
              }
              @media (max-width: 1199px) and (min-width: 768px) {
                margin: 11.5% auto;
              }
            }           
          }
          .product-content {
            .price-cart-wrapper {
              text-align: left;
              @media (max-width: 1024px) {
                padding: 0;
                min-height: auto;
              }
              @media (max-width: 991px) and (min-width: 768px) {
                padding-right: 0;
              }
              @media (max-width: 479px) {
                padding-right: 0;
              }
              .product-add-cart,
              .add-cart-button {
                
                @media (max-width: 1024px) {
                  display: none;
                }
                @media (max-width: 991px) and (min-width: 768px) {
                  position: static;
                  margin: 15px 0 0;
                }
                @media (max-width: 479px) {
                  position: static;
                  margin: 10px 0 0;
                }
                .btn-add-cart {
                  width: auto;
                  height: auto;
                  font-weight : $font-medium;
                  padding: 5px 15px;
                  line-height: 27px;
                  display: inline-block;
                  font-size: $body-font-size - 1px;
                  background: $button-btn1;
                  color: $white;
                  border-color: $button-btn1-border;
                  @include border-radius(3px,3px,3px,3px);
                  .demo-icon {
                    margin: 0 5px 0 0;
                    float: left;
                  }
                  &:hover {
                    background: $button-hover-btn1;
                    color: $button-hover-btn1-txt;
                    border-color: $button-hover-btn1-border;
                  }
                }
              } 
            }
          }    
          .product-button{
            &>div{
              @include ab(n,n,n,30px);
              @include transition(all 0.35s ease);
              @include translate(50px,0);
              text-align: center;
              display: block;
              width: 25px;
              z-index: 5;
              @include opacity(0);
              visibility: hidden;
              i{
                font-size:20px;
                @include ab(0,50%,n,n);
                @include translate(-50%,0);
              }
              @media(max-width: 1024px){
                transform: none;
              }
            }
            &>div:nth-of-type(1){
              transition-delay: 0.15s;
              top: 0;
            }
            &>div:nth-of-type(2){
              transition-delay: 0.25s;
              top: 30px;
            }&>div:nth-of-type(3){
              transition-delay: 0.35s;
              top: 60px;
            }
          }  
          &:hover{
            box-shadow: 0 0 8px 6px #ddd;
            .product-button>div{
              transform: none;
             @include opacity(1);
              visibility: visible;
            }
          }     
        }
      }       
    }
    .big-image-left,
    .big-image-right {
	  	.big-image-item {
	      	@media (min-width: 768px) {
	      		img {
		      		width: 100%;
		      	}
	      	}
	  	}
    @media (min-width: 992px) {
      margin-top: -10px;
    }       
    .big-grid-item {
      @media (min-width: 768px) {        
        display: table-cell;
        vertical-align: top;        
      }     
      @media (min-width: 992px) {
        width: 30.7%;
      }
      @media (max-width: 991px) and (min-width: 768px) {
        width: 45%;
      }
    }
    .wrap-grid-item {
      @media (min-width: 768px) {        
        display: table-cell;
        vertical-align: top;
      }
      @media (min-width: 992px) {
        width: 69.3%;
      }
      @media (max-width: 991px) and (min-width: 768px) {
        width: 55%;
      }
      .row {
        margin: 0;
        > div {
          padding: 0;
        }
      }
      .col-lg-3 {
        @media (min-width: 992px) {
          &:nth-child(4n + 1) {
            .product-wrapper {
              &:before {
                content: none;
              }
            }
          }
        }
      }
      .col-lg-4 {
        @media (min-width: 992px) {
          &:nth-child(3n + 1) {
            .product-wrapper {
              &:before {
                content: none;
              }
            }
          }
        }
      }
    }
    }
    .big-image-left {
      .wrap-grid-item {
        @media (min-width: 992px) {
          padding-left: 10px;
        }
        @media (max-width: 991px) and (min-width: 768px) {
          padding-left: 20px;
        }
        @media (max-width: 767px) {
          padding-top: 15px;
        }
      }
    }
    .big-image-right {
      .wrap-grid-item {
        @media (min-width: 992px) {
          padding-right: 10px;
        }
        @media (max-width: 991px) and (min-width: 768px) {
          padding-right: 20px;
        }
        @media (max-width: 767px) {
          padding-bottom: 15px;
        }
      }
    }  
    &.tab-title-3 {
        .special-block-product .big-product-left-01>.big-grid-item .product-wrapper {
          @media (min-width: 768px) {
            margin-top: -38px;
          }
        }
      }
  }
  &.tab-style-1{
    .hp-tabs-list{
      margin-left: -14px;
      margin-right: -14px;
      width: auto;

    }
    .tabs-list-carousel{
      padding-bottom: 50px;
    
      @media(max-width: 1024px){
        padding-bottom: 30px ;
      }
    }
  }
  
  &.layout-full {
    padding-left: 15px;    
    padding-right: 15px; 
  } 
  &.layout-boxed{  
    >.boxed>.row{
      @media(min-width: 992px){        
        margin: 0;
      }
    }
    // @media(max-width: 767px){
    //   padding-left: 15px;
    //   padding-right: 15px;
    // }
  }
  &.tab-style-1,&.tab-style-3{
    .wrap-tab-content{
      &.align-right{
        position: relative;
        margin-top: 30px;
        .nav-tab-wrapper{
          @include ab(-30px,n,auto,150px);
        }
        .owl-nav{
          bottom:calc(100% + 17px);
          top:auto;
        }
        &.type-row{
          .nav-tab-wrapper{
            right: 20px !important;
          }
        }
      }
      &.align-left,&.align-center{
        .owl-nav{
          bottom:calc(100% + 17px);
          top:auto;
        }
      }
      .tab-content{
        border-top: 1px solid #ebebeb;
        margin-top: 17px;
        @media(max-width: 575px){
          margin-top: 10px;
        }
      }
    }
    .title-wrapper{
      margin: 0;
      h3{
        margin: 0;
      }
    }
    .title-wrapper+script+.wrap-tab-content{
      &.align-right{
        position: relative;
        margin-top: 0;
        .nav-tab-wrapper{
          @include ab(-47px,n,auto,150px);
        }
        .owl-nav{
          bottom:calc(100% + 22px);
          top:auto;
        }
        .tab-content{
          margin-top: 0;
        }
      }
      &.align-left,&.align-center{
        .owl-nav{
          bottom:calc(100% + 17px);
          top:auto;
        }
      }
    }
    @media(max-width: 767px){
      .wrap-tab-content{
        text-align: center;
        position: static;
        .nav-tab-wrapper{
          position: static !important;
        }
      }
      .title-wrapper+script+.wrap-tab-content.align-right .owl-nav{
        bottom: calc(100% + 10px) ;
      }
    }
  }
  &.tab-style-3{
    &.layout-boxed{ 
      >.boxed>.row,>.row{
        @media(min-width:768px){margin: 0;}
      }
    }
    .product-wrapper{
      padding: 10px;
      .product-inner-wrapper{
        box-shadow:none;
      }
    }
    .tabs-list-carousel{
      padding-bottom: 40px;
      @media(max-width: 1024px){
        padding-bottom: 0;
      }
    }
  }
  .general-image{
    padding: 0px;
    overflow: hidden;
    img{
      width: 100%;
      @include transition (all 0.35s ease);
      &:hover{
        
        @include opacity(.6);
      }
    }
    &+.wrap-tab-content{
      padding: 30px 20px; 
      display:flex; 
      align-items: center;
      .slide_content{
        width: 100%;
      }
      @media(max-width: 767px){
        padding: 20px 10px;
      }
    }
  }
}
.hp-tabs-list {    
  clear: both;  
  padding-top: 20px;
  @media (min-width: 768px) {    
    width: 100%;    
    @include flexbox();
    align-items: top;
    align-self: top;
    justify-content: left;
    flex-direction: row;
    flex-wrap: wrap;
  }         
  &.owl-carousel {  
    @include padding-carousel;    
    @include control-product-slider;
    .owl-item{
      @include opacity(0);
      @include transition(opacity 0.5s ease);
      &.active{
        @include opacity(1);
      }
    }
  }    
  .wrap-grid-item {
    .row {
      .col-12 {
        @media (max-width: 767px) {
          @include flex(0 0 50%);
          width: 50%;          
          max-width: 50%;       
        }
      }
    }
  } 
  &.tabs-list-row {
    letter-spacing: -0.5em;
    vertical-align: top;  
    > div {
      vertical-align: top;
      letter-spacing: 0;
    }
    > .product-wrapper {
      display: inline-block;  
      @media (max-width: 767px) {
        width: 50% !important;
      } 
      &.product-owl-item {
        @media (max-width: 479px) {
          width: 100% !important;
          padding-left: 0;
          padding-right: 0;
        }
      }     
    }
    &.row-number-2 {
      > .product-wrapper {
        display: inline-block;
        @media (min-width: 768px) {
          width: 50%;
          &:nth-child(2n + 1) {
            &:before {
              content: none;
            }
          }
        }    
      }
  }
    &.row-number-3 {
      > .product-wrapper {
        display: inline-block;
        @media (min-width: 768px) {
          width: 33.333333%;
          &:nth-child(3n + 1) {
            &:before {
              content: none;
            }
          }
        }    
      }
  }
  &.row-number-4 {
      > .product-wrapper {
        display: inline-block;
        @media (min-width: 992px) {
          width: 25%;
          &:nth-child(4n + 1) {
            &:before {
              content: none;
            }
          }
        } 
        @media (max-width: 991px) and (min-width: 768px) {
          width: 33.333333%;
          &:nth-child(3n + 1) {
            &:before {
              content: none;
            }
          }
        }
      }
  }
  &.row-number-5 {
      > .product-wrapper {
        display: inline-block;
        @media (min-width: 992px) {
          width: 20%;
          &:nth-child(5n + 1) {
            &:before {
              content: none;
            }
          }
        } 
        @media (max-width: 991px) and (min-width: 768px) {
          width: 33.333333%;
          &:nth-child(3n + 1) {
            &:before {
              content: none;
            }
          }
        }
      }
  }
  &.row-number-6 {
      > .product-wrapper {
        display: inline-block;        
        @media (min-width: 1200px) {
          width: 16.666666%;                    
          &:nth-child(6n + 1) {
            &:before {
              content: none;
            }
          }
          .product-button {
            .quick_shop {
              margin-right: 5px;              
              i {
                margin-right: 2px;
              }
            }
            .product-wishlist a {             
              i {
                margin-right: 2px;
              }
            }
          }         
        }
        @media (max-width: 1199px) and (min-width: 992px) {
          width: 25%;
          &:nth-child(4n + 1) {
            &:before {
              content: none;
            }
          } 
        }
        @media (max-width: 991px) and (min-width: 768px) {
          width: 33.333333%;
          &:nth-child(3n + 1) {
            &:before {
              content: none;
            }
          }
        }
      }
  }
  &.row-number-7 {
      > .product-wrapper {
        display: inline-block;          
        @media (min-width: 1200px) {
          width: 14.285714%;
          &:nth-child(7n + 1) {
            &:before {
              content: none;
            }
          }
          .product-button {
            .quick_shop {
              margin-right: 3px;
              font-size: 12px;
              i {
                margin-right: 1px;
              }
            }
            .product-wishlist a {
              font-size: 12px;
              i {
                margin-right: 1px;
              }
            }
          }
        }
        @media (max-width: 1199px) and (min-width: 992px) {
          width: 25%;             
          &:nth-child(4n + 1) {
            &:before {
              content: none;
            }
          }         
        }
        @media (max-width: 991px) and (min-width: 768px) {
          width: 33.333333%;
          &:nth-child(3n + 1) {
            &:before {
              content: none;
            }
          }
        }
      }
  }
  }    
}
.ps-list {
  display: none;
  &.owl-carousel {
    @include padding-carousel;    
  }
}
.product-slider-section {  
  padding-top: 50px;
  padding-bottom: 34px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  @media (max-width: 767px) {
    padding-top: 40px;    
  }
  .title-wrapper-deal {
  	margin: 0 0 20px;
  	padding: 0 0 13px;
  	border-bottom: 1px solid $body-border-color;  	
    justify-content: left;      
    align-self: center;
    align-items: center;
    @include flexbox();
    @media (max-width: 576px) {
    	display: block;
    }
  	h3 {
  		margin: 0;
  		padding: 0 30px 0 0;
  		border: none;
  		display: inline-block;
  		&:before {
  			content: none;
  		}
  		@media (max-width: 576px) {
  			display: block;
  			padding: 0 0 8px;
  		}
  	}
  	.header-countdown {  				
  		background: $main-color;
  		padding:0 15px;
  		
  		@media (max-width: 576px) {
  			display: none;
  			margin-right: 15px;
  		}		
  		.countdown-title {
  			display: inline-block;
  			color: $main-color-text;
			font-size: $body-font-size + 1px;
			font-weight: $font-bold;
      line-height: 23px;
      margin-right: 10px;
  		}
  		.wrapper-countdown {
  			display: inline-block;
  		}
  		.is-countdown {  		
        padding: 15px 0;	
  			.countdown-section {  	
  				width: auto;
  				display: inline-block;
  				padding: 0 5px;		
  				position: relative;	
  				&:last-child {
  					padding-right: 0;
  				}
  				&:not(:last-child) {
  					&:before {
  						content: ':';
  						color: $main-color-text;
	  					font-size: $body-font-size + 1px;
	  					font-weight: $font-bold;
	  					line-height: 23px;
	  					@include ab(0, n, n, -2px);	  					
  					}
  				}
  				.countdown-amount {
  					color: $main-color-text;
  					font-size: $body-font-size + 1px;
  					font-weight: $font-bold;
  					background: none;
            line-height: 23px;
            &:before{
              content: none;
            }
  				}
  				.countdown-period {
  					display: none;
  				}
  			}
  		}
  	}
  }
  &.layout-full {
    padding-left: 15px;    
    padding-right: 15px;       
    > div {
      max-width: 1400px;
      margin: 0 auto;
    }
  } 
  &.style-normal {
    padding-top: 34px;
    @media (max-width: 767px) {
      padding-top: 20px;
      padding-bottom: 20px;
    }
    .owl-stage {
      position: relative;
    }
    .title-wrapper {
      margin-bottom: 0;
      h3 {
        margin-bottom: 0px;
      }
      > a {
      	@media (max-width: 479px) {
      		display: inline-block;
      		margin-top: 10px;
      	}
      }
    }   
    .product-slider-content {
      &.no-padding {
        .row {
          margin: 0;
          > div {
            padding: 0;
          }
        } 
      }
      .row {        
        > div {
          &.col-lg-6 {
            &:nth-child(2n+ 1) {
              > .product-wrapper {                
                &:before {
                  content: none;
                }
              }
            }
          } 
          &.col-lg-4 {
            @media (min-width: 1025px) {
              &:nth-child(3n+ 1) {
                > .product-wrapper {                
                  &:before {
                    content: none;
                  }
                }
              }
            }           
          } 
          &.col-lg-3 {
            @media (min-width: 991px) {
              &:nth-child(4n+ 1) {
                > .product-wrapper {                
                  &:before {
                    content: none;
                  }
                }
              }
            }             
          } 
          &.col-xl-2 {
          	@media (min-width: 1200px) {
          		> .product-wrapper {
	                &:before {
	                  content: '' !important;
	                }
	            }
          		&:nth-child(6n+ 1) {
	                > .product-wrapper {                
	                  &:before {
	                    content: none !important;
	                  }
	                }
	            }
          	}
          }
          &.column-5 {
            @media (min-width: 1200px) {
            	@include flex(0 0 20%);
              width: 20%;            
            max-width: 20%;
              &:nth-child(5n + 1) {
                > .product-wrapper {                
                  &:before {
                    content: none;
                  }
                }
              }
            }
            @media (max-width: 1199px) and (min-width: 992px) {
              @include flex(0 0 25%);
              width: 25%;            
            max-width: 25%;
              &:nth-child(4n + 1) {
                > .product-wrapper {                
                  &:before {
                    content: none;
                  }
                }
              }
            }
            @media (max-width: 991px) and (min-width: 768px) {
            	@include flex(0 0 33.333333%);
              width: 33.333333%;              
            max-width: 33.333333%;
            }
          }
          &.column-7 {
            @media (min-width: 1200px) {
              @include flex(0 0 14.285%);
              width: 14.285%;              
              max-width: 14.285%;
              &:nth-child(7n + 1) {
                > .product-wrapper {                
                  &:before {
                    content: none;
                  }
                }
              }
            }
            @media (max-width: 1199px) and (min-width: 992px) {
              @include flex(0 0 20%);
              width: 20%;             
              max-width: 20%;
              &:nth-child(5n + 1) {
                > .product-wrapper {                
                  &:before {
                    content: none;
                  }
                }
              }
            }
            @media (max-width: 991px) and (min-width: 768px) {
              @include flex(0 0 25%);
              width: 25%;              
              max-width: 25%;
              > .product-wrapper {
	                &:before {
	                  content: '' !important;
	                }
	            }
          		&:nth-child(4n+ 1) {
	                > .product-wrapper {                
	                  &:before {
	                    content: none !important;
	                  }
	                }
	            }
            }
          }
          &.col-xl-2 {
            @media (min-width: 1200px) {
              &:nth-child(6n + 1) {
                > .product-wrapper {                
                  &:before {
                    content: none;
                  }
                }
              }
            }           
          }  
          @media (max-width: 991px) and (min-width: 768px) {
          	> .product-wrapper {
          		border-top: 1px solid $body-border-color;
          	}
          	&:nth-child(3n + 1) {
          		> .product-wrapper {
          			&:before {
          				content: none;
          			}
          		}
          	}
          	&:nth-child(1),
          	&:nth-child(2),
          	&:nth-child(3) {
          		> .product-wrapper {
          			border-top: none;
          		}          		
          	}
          }
          @media (max-width: 767px) {
          	> .product-wrapper {
          		border-top: 1px solid $body-border-color;
          	}
          	&:nth-child(2n + 1) {
          		> .product-wrapper {
          			&:before {
          				content: none;
          			}
          		}
          	}
          	&:nth-child(1),
          	&:nth-child(2) {
          		> .product-wrapper {
          			border-top: none;
          		}          		
          	}
          }
        }
      }
    }
  } 
  &.style-half-width {
    padding-top: 60px;
    padding-bottom: 58px;
    @media (max-width: 767px) {
      padding-top: 40px;
      padding-bottom: 40px;
    }
    .title-wrapper {
      margin-bottom: 0;
      @media (min-width: 768px) {
        padding-left: 50%;
      }
    }
    .ps-list.owl-carousel .owl-controls .owl-nav {
      top: -65px;
    }
    .deal-wrapper {
      display: none;
    }
    .wrap-product-slider {
      margin: 0 auto;
      @media (min-width: 768px) {
        padding-left: 50%;
      }     
      .product-slider-content {
        padding: 0;
        @media (max-width: 767px) {
          margin: 0;
        }
        .product-wrapper {
          &:before {
            content: none;
          }
        }
        .row {
          @media (max-width: 479px) {
          margin-left: -7px;
          margin-right: -7px;
        }
          > div {
            @media (max-width: 767px) {
            max-width: 50%;
            @include flex(0 0 50%);
            }
            @media (max-width: 479px) {
              padding: 0 7px;
            }
            > .product-wrapper {
              margin-bottom: 30px;
            }
          }
        }
      }
    }
  }
}
.product-slider-content {    
  margin-left: -14px;
  margin-right: -14px;
  .row {
    vertical-align: top;
    letter-spacing: -0.31em;
    > div {
      vertical-align: top;
      letter-spacing: 0;
      display: inline-block;
      float: none;      
    }    
  }   
  .product-two-rows {
    .product-wrapper {
      margin-bottom: 5px;
    }
  }  
  &.subtitle-true {
  	.ps-list {
  		&.owl-theme .owl-controls .owl-nav {
  			position: static;
  			> div {
  				@include ab(50%, n, n, n);
  				@include translate(0, -50%);
          width: 30px;
  				&.owl-prev {
  					left: 0;
  				}
  				&.owl-next {
  					right: 0;
  		
  				}
  			}
  		}
  	}	
  }
}
.show-deal {
  .title-wrapper {
    margin: 0px;      
      line-height: 1.2;
      h2 {
        font-size: $size-h2 - 9px;
        font-weight: 400;
        line-height: 1.1;
        @include title-wrapper;
      }
  }
  .deal-wrapper {
    width: 230px;
      float: left;
      @media (max-width: 479px) {
      width: 100%;
      float: none;        
    }
    > img {
      display: block;
      width: 100%;
    }
    .wrapper-countdown {
        padding-top: 15px;
        .is-countdown {
          background: none;
          border: none;
        }
        .countdown-section {
          width: auto;
          padding: 8px 5px;
          text-align: center;
          background: $white;
          border: 1px solid $main-color;
          margin: 0 2% 0 0;
          @include border-radius(5px, 5px, 5px, 5px);
          span {
            display: block;
            &.countdown-amount {
              font-size: $size-h5;              
              color: $body-title-color;
              &:before{
                content: none;
              }
            }
            &.countdown-period {
              text-transform: uppercase;
              font-size: $size-h6 - 2;
              color: $body-title-color;
            }
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
  }
  .product-slider-content {
    padding-left: 240px;    
      @media (max-width: 479px) {
          padding-left: 0;
          clear: both;
          padding-top: 30px;
      }
      @media (max-width: 767px) and (min-width: 480px) {
        margin-left: 0;
        margin-right: 0;
      }
      .product-wrapper {
        &:before {
          content: none;
        }
      }
      .row {
        > div {
          @media (max-width: 767px) and (min-width: 480px) {
            max-width: 100%;
          	@include flex(0 0 100%);      
          }                     
          > .product-wrapper {
            margin: 0 0 5px 5px;            
          }
          @media (max-width: 767px) {
            &:nth-child(2n + 1) {
              > .product-wrapper {
                margin-left: 0;
              }             
            }
          }
        }
      }
  }
  .owl-carousel {
    .owl-controls {
      padding-top: 10px;
      .owl-dots {
        bottom: -10px;
      }
    }
  }
}
.carousel {
  display: none;
}
.categories-section {
  padding-top: 10px;
  padding-bottom: 10px;  
  &.layout-full {
    padding-left: 15px;    
    padding-right: 15px;          
    .categories-list {
      margin: 0 auto;
      max-width: 1430px;
    }
  }
  .title-wrapper {
    margin: 0;
    padding: 20px 0 35px;
    
    border-bottom: 1px solid #f2f2f2;
    h3{
      margin: 0; padding: 0;
    }
  }
  &.categories-carousel{
    .title-wrapper{
      padding: 20px 0;
    }
  }
  &.style-2{
    padding-left: 20px;
    padding-right: 20px;
  }
  @include control-product-slider;
  .owl-theme .owl-controls .owl-nav{
    top: auto;
    bottom: calc(100% + 20px);
  }
}
.categories-list { 
  @include flexbox();
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -15px;  
  .h-category {
    position: relative;                 
    background: $white; 
    display: table;
    width: 100%;
    height: 100%;
    vertical-align: middle;   
    @include transition(all 0.35s ease 0s);   
    @media (max-width: 767px) {
      border-left: none;      
    }
    .image {
      display: table-cell;
      vertical-align: middle;
      width: 45%;
      padding: 15px ;
      overflow: hidden;
      img{
        @include transition(transform 7s ease,opacity 0.5s ease);
      }
    }
    .text {
      display: table-cell;
      vertical-align: middle;
      width: 55%;
      padding: 30px 15px;      
      h3 {
        margin: 0 0 20px;
        line-height: 1.3;
        font-size: $body-font-size + 1;
      }
      ul{
        list-style:none;
        margin-bottom: 20px;
        li{
          margin-bottom:10px;
        }
      }
      > a{
        position: relative;
        padding-right: 5px;
        color: $main-color;
        &:after{
          content: '\f105';
          font-family: 'arenafont';
          @include ab(50%,100%,n,n);
          @include translate(0,-50%);
        }
        &:hover{
          color: inherit;
        }
      }
    }  
    &:hover{
      .image img{
        transform: scale(2);
        opacity: .5;
      }
    }    
  }       
  .col-lg-3 {     
    margin: 10px 0; 
  .h-category {     
    .text { 
      h3 {
        margin: 0;
      }     
      > a {
        display: none;
      }
    }
  }   
  }  
  .c-item{
    margin-bottom: 30px;
  }   
  &.style-2{
    margin: 0;
    padding: 15px 20px;
    .c-item{
      padding: 0;
      margin: 0;
      .h-category{
        padding: 15px 20px;
        display: block;
        &>div{
          display:block;
          padding-left: 0;
          padding-right: 0;
          width: 100%;
        }
      }
    }
  }
  &.categories-carousel{
    margin: 0;
  }
}
.p-carousel-banner-section {
  padding: 130px 0;
  @media (max-width: 767px) {
    padding: 80px 0;
  }
  .block-product {
    .title {
      color: $main-color;
      font-family: $font-heading;
      line-height: 1.0;
      font-weight : $font-medium;
    }
    .subtitle {
      font-family: $font-heading;      
    }
  }
  .product-carousel-content {
    margin: 50px 0 0;
    .product-wrapper {
      border: none;
      .product-content {
        .product-name {
          font-size: $body-font-size;
        }
      }
    }
    .swatch-size-wrapper,
    .product-description,
    .product-price,
    .product-button {
      display: none;
    }
  }
}
.policies-content {
  &.style-1{
    border: 1px solid $body-border-color;   
    border-left: none;
    border-right: none;
  }
  &.style-2{
    .policy-item{
    justify-content: center;
    -webkit-justify-content: center;
    }
  }
    
  &.row{
    margin: 0;
  }
   
  .policy-list {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    > .policy-item {
      float: left;
    } 
  }
  .owl-item {
    padding: 0;
    
  }
  .policy-item {  
    padding: 35px 5px;
    align-items: center;
    -webkit-align-items: center;
    @include flexbox();
    .image {   
      width: 45px;
      background-size: 0px auto !important;
      img {        
        display: inline-block;
        width: auto;
      }      
    }
    .text {      
      padding: 0 0 0 10px;      
      h6 {        
        margin: 0 0 3px;        
        font-weight : $font-medium;
        font-size: $body-font-size;
      }
      span {
        display: block;
        color: $body-title-color;
      }
    }
    &:hover{
      .image{
        -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob;
                animation-name: hvr-icon-bob-float, hvr-icon-bob;
                -webkit-animation-duration: .3s, .75s;
                animation-duration: .3s, 0.75s;
                -webkit-animation-delay: 0s, .3s;
                animation-delay: 0s, .3s;
                -webkit-animation-timing-function: ease-out, ease-in-out;
                animation-timing-function: ease-out, ease-in-out;
                -webkit-animation-iteration-count: 1, infinite;
                animation-iteration-count: 1, infinite;
                -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
                -webkit-animation-direction: normal, alternate;
                animation-direction: normal, alternate;
      }
    }
    @media(max-width: 991px){
      padding-top: 20px;
      padding-bottom: 20px;
    }
    @media(max-width: 575px){
      display: table;
      padding-left: 15px;
      padding-right: 15px;
      >*{
        display: table-cell;
        vertical-align: middle;
      }
    
      .text{
        padding-left: 20px;
      }
    }
  }
}
#home-left-column {
  .left-margin-top {
      margin-top: 30px ;
  }
  .sb-product {
    padding: 15px;
    .sb-title {
      padding-right: 65px;      
    }
  }
  .sb-testimonial-wrapper{
    padding: 15px;
  }
}
#shopify-section-slideshow-left-column+.row{
  @media(max-width: 767px){
    margin: 0;
  }
  
}
#home-main-content {
  &.col-lg-9 {
    .bc-home-slideshow .swiper-content {
      @media (min-width: 992px) {
       padding: 0 40px; 
      }
    }
    .btn-pagination {            
      .swiper-pagination {
        @include translate(0, 0);
        @media (min-width: 992px) {
      left: 40px;
        }
        @media (max-width: 991px) {
          left: 15px;
        }
      }
    }
    .swiper-button-white {
      width: 45px;
      height: 45px;
      &:before {
        line-height: 45px;
      }
      &.swiper-button-prev {
        left: 0;
      }
      &.swiper-button-next {
        right: 0;
      }
    }
    .nav-tab-wrapper .nav {
      &.align-center {
        @media (max-width: 1199px) and (min-width: 992px) {
          position: static;
          @include translate(0, 0);
        }
      }
      &.align-right {
        @media (max-width: 1199px) and (min-width: 992px) {
          position: static;
        }
      }
    }
    #bottom-widget {
      .container {
        padding: 0;
      }
    } 
  }
}
/*Customize Block*/
.custom-content-width {

  .col-md-12 {    
    padding: 0;
    margin: 0px auto;   
  }
  &.boxed{
    @media(max-width:767px){
      padding-left: 15px;
      padding-right: 15px;
    }
  }
}
.custom-content-wrapper {

  &.custom-content-margin-top {
    margin-top: 30px;    
  }
  &.custom-content-margin-bottom {
    margin-bottom: 30px    
  }
  &.only-min-height {
    .custom-item {
      &.col-md-12 {
        position: relative;
        @media (max-width: 767px) {
          min-height: 10px !important;
        }
        .custom-item-inner {          
          @media (min-width: 768px) {
            @include ab(50%, 50%, n, n);   
            @include translate(-50%, -50%);
            height: 100%;
            width: 100%;
          }
          width: 100%;  
          padding: 0px;          
          &.custom-item-inner-text {
            .custom-block-heading-text {
              margin: 0px auto;
            }
            > div {
              @media (min-width: 768px) {
                padding-top: 90px;
              }
            }
          }
        }
        &.align-center {
          .custom-item-inner {
            text-align: center;
          }          
        }
        &.align-left {
          .custom-item-inner {
            text-align: left;
          }          
        }
        &.align-right {
          .custom-item-inner {
            text-align: right;
          }          
        }
      }
    }
  }
  &.layout-full{
    padding-left: 15px;
    padding-right: 15px;
  }
}
.custom-content-header {
  margin: 0 auto 3%;
}
.custom-item-inner-video,
.custom-item-inner-collection,
.custom-item-inner-html {
  display: block;
}
.custom-block-heading-text,
.custom-block-body-text {  
  margin-left: auto;
  margin-right: auto;  
}
.custom-block-heading-text {
  font-weight : $font-medium;
}
.custom-block-body-text {
  p {
    font-size: $body-font-size;
    margin: 0;
  }
}
.custom-content {
  @include flexbox();
  width: 100%;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  -o-align-items: stretch;
  align-items: stretch;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: auto;    
  padding: 0; 
  .placeholder-svg {    
    fill: rgba($main-color, 0.35);
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    background: #f7f7f7;
  }
  .info {   
    padding: 15px 20px;
  } 
  .custom-block-heading-text {
    margin: 0 auto 3%;
  }
}
.custom-item {
  @include flex(0 0 auto);
  margin: 0 0 30px;      
}
.custom-item-inner {
  position: relative;  
  max-width: 100%;
  &.custom-item-inner-bgimage {
    max-width: 1170px;
    margin: 0px auto;
    padding: 0 4%;    
    .custom-block-heading-text {
      max-width: 100%;
    }    
  }  
}
.custom-item-inner-product,
.custom-item-inner-collection {
  background: #ebebeb;
  .info {
    > a {
      @extend .h5;
      text-transform: uppercase;
      font-family: $font-heading;
      letter-spacing: 2px;
      @media (max-width: 479px) {       
        letter-spacing: 0;
        text-transform: none;
      }
    }
    .product-author {
      color:#000;
      font-size: $body-font-size - 1;      
      padding: 0 0 10px;
      text-transform: uppercase;
      font-weight: $font-medium;
    }
    .product-name {
      color: $body-title-product;             
      margin: 0 0 5px;                
      text-transform: none; 
      letter-spacing: 0;      
    }
  }
}
.custom-item-inner-product{
  .custom-block-product {
    position: relative;  
    margin: 0px; ;  
    background: $body-background-color;
    @include transition(all 0.35s ease 0s);
    .custom-product-inner{
      background-color: #fff;   
      box-shadow: 0 0 4px 2px #f2f2f2;
      @include transition(all 0.35s ease);
    }
    .image {
      margin: 0 auto;
      padding: 20px 20px 0;   
      overflow: visible;  
      a{
        overflow: hidden;
        img{
          @include transition(all 0.35s ease);
        }
      }  
    }   
    .product-button{
        &>div{
          @include ab(n,n,n,15px);
          @include transition(all 0.35s ease);
          @include translate(50px,0);
          @include opacity(0);
          visibility: hidden;
          text-align: center;
          display: block;
          width: 25px;
          z-index: 5;
          i{
            font-size:20px;
            @include ab(0,50%,n,n);
            @include translate(-50%,0);
          }
        }
        &>div:nth-of-type(1){
          transition-delay: 0.15s;
          top: 30px;
        }
        &>div:nth-of-type(2){
          transition-delay: 0.25s;
          top: 60px;
        }&>div:nth-of-type(3){
          transition-delay: 0.35s;
          top: 90px;
        }
    }    
    .product-label-custom-content{
      @include ab(20px,-5px,n,n);
      padding: 4.5px 10px 4.5px 12px;
      @include border-radius(0,3px,3px,0);
      font-size: $body-font-size - 1;
      text-transform: uppercase;
      &:before{
        content: '';
        width: 0; 
        height: 0; 
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid black;
        @include ab(100%,0,n,n);
        transform: rotate(45deg);
        margin-top: -1px;
      }
    }
    .product-vendor {   
      margin: 0 0 4px;
      line-height: 20px;    
      color: #000;
      font-size: $body-font-size - 1px;
      font-weight: $font-medium;
      a {
        font-size: $body-font-size - 2px;
        color: inherit;
        &:hover {
          color: $main-color;
        }
      }
    }
    .product-review {        
      margin: 0;  
      .spr-badge-starrating {
        float: none;
        margin: 0;
      }
      .spr-badge {
        margin: -3px auto 8px;
      }
    }         
    .info {    
      padding: 30px 20px;                      
      .product-name {        
        color: $body-title-product;     
        font-size: $product-font-size + 1;      
        font-weight: $font-regular;
        margin: 0 0 15px;      
        line-height: 1.4;          
        position: relative;  
        @media (max-width: 479px) {
        font-size: $product-font-size - 2px;      
        }            
        a {
          color: inherit;      
        }
        &:hover a {        
          color: $main-color;
        }
      }    
      .product-descrip {
        display: none;
      }
      .product-price {  
      line-height: 1.0855;
      padding: 5px 0 1px;  
        p {
          display: none;
        }      
        .price-compare {        
          display: inline; 
        }
      }
      .price-cart-wrapper {
        position: relative;
        padding: 0 38px 0px 0;  
        border-bottom: 1px solid transparent;      
        @media (max-width: 1024px) {
          padding: 0;
          min-height: auto;
        }
        .product-add-cart,
        .add-cart-button {
          font-size: 22px; ;
          @include ab(0, n, n, 0);
          .btn-add-cart {
            display: block;
            text-align: center;
            color: #d4d4d4;
          
            &:hover {
              @media (min-width: 1025px) {
                color: $main-color;        
              }
            }
            @media (max-width: 991px) {
              display: none;
            }
          }
        }     
      }
    } 
    &:hover {
      @media (min-width: 1025px) {
        z-index: 5; 
        .custom-product-inner{
          box-shadow: 0 0 8px 6px #ddd;
        }
        .image{
          a{
            
            img{
              transform:scale(1.1);
              @include opacity(0.6);
            }
          }
        }
        .product-button>div{
          transform:none;
          @include opacity(1);
          visibility: visible;
        }
      }         
    }  
    .price-sale,.price{
      font-weight: $font-medium;
    }
  }
}
.custom-item-inner-image{
  .custom-block-image{
    position: relative;
    overflow: hidden;
    .textbox-overlay{
      @include ab(50%,n,n,n);
      @include translate(0,-50%);
      &.position-left{
        left: 10%;
      }
      &.position-right{
        right: 10%;
      }
      &.position-center{
        left: 50%;
        @include translate(-50%,-50%);
      }
    }
    .title{
      margin-bottom:5px;
      white-space: nowrap;
      @media(max-width: 767px){
        margin-bottom: 3px;
      }
    }
    .subtitle{
      margin-bottom: 20px;
      font-weight: $font-regular;
      white-space: nowrap;
      @media(max-width: 767px){
        margin-bottom:10px;
      }
    }
    .offer{
      margin-bottom: 24px;
      @media(max-width: 767px){
        margin-bottom: 15px;
      }
    }
    .btn{
      padding: 3px 15px;
    }
    img{
      width: 100% !important;
      @include transition(all 0.35s ease);
    }
    &:hover{
      img{
        transform: scale(1.1);
      }
    }
  }
}
.two-block-inside{
  @media(max-width: 991px){
    max-width: 100%;
    min-height: 0 !important;
    margin: 0;
    .custom-block-image{
      width: 50%;
      display: inline-block;
      float: left;
    }
  }
  @media(max-width: 575px){
    .custom-block-image{
      width: 100%;
    }
  }
}

.align-center,
.align-bottom {
  text-align: center;
}
.align-top {
  -ms-flex-item-align: flex-start;
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.align-bottom {
  -ms-flex-item-align: flex-end;
  -webkit-align-self: flex-end;
  align-self: flex-end;
}
.custom-block-video {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  height: auto;
  iframe {
    @include ab(0, 0, n, n);
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0px !important;
    -webkit-transition-duration: 0.35s !important;  
    transition-duration: 0.35s !important;
  }
  .mbYTP_wrapper {
    -webkit-transition-duration: 0.35s !important;  
    transition-duration: 0.35s !important;
    z-index: 2 !important;
  }
  .player {
    @include ab(0, 0, n, n);
    display: block !important;
    width: 100%;
    height: 100%;
    background-image: url({{'loading.gif' | asset_url }});  
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
    + button {
      @include opacity(0);
    }
    &.isMuted {
      background-image: none;
      + button {
        @include opacity(1);
      } 
    }
  }
  .buttonBar {
    display: none;
  }
  button {
    @include ab(50%, 50%, n, n);
    @include translate(-50%, -50%);    
    font-size: 0;    
    background: none;
    border: none;
    width: 80px;
    height: 80px;
    line-height: 50px;
    color: #222;
    text-align: center;
    z-index: 3;
    @include border-radius(3px, 3px, 3px, 3px);
    @include transparent($white, 0.5);
    @include transition(all ease-in-out 0.35s 0s);
    span {
      display: none;
    }
    &:before {
      font-size: 40px;   
      display: block;
    }
    &.b-play {
      &:before {
        content: '\ee906';
      }
    } 
    &.b-pause {
      @media (min-width: 1025px) {
        @include opacity(0);
      }      
      &:before {
        content: "\60";
        font-family: 'ElegantIcons';
      }
    }
  }
  &:hover {
    button.b-pause {
      @include opacity(1);
    }
  }
}
.image-layer {
  @include ab(50%, 0, n, 0);
  z-index: 2;
  max-height: 100%;
  max-width: 100%;
  margin: 0px auto;
  padding: 0 15px;
  @include translate(0%, -50%);   
  @media (min-width: 768px) {
    width: 760px;
  }
  @media (min-width: 992px) {
    width: 980px;
  }
  @media (min-width: 1200px) {
    width: 1200px;
  }
  img {
    max-width: 100%;
    max-height: 100%;
    display: inline-block;  
    @media (min-width: 320px) and (max-width: 479px) {
      max-width: 69%;
    }
    @media (min-width: 480px) and (max-width: 767px) {
      max-width: 49%;
    }
    @media (min-width: 768px) and (max-width: 1024px) {
      max-width: 60%;
    }
    @media (min-width: 1025px) and (max-width: 1199px) {
      max-width:64%;
    }
  }
  &.layer-center {    
    text-align: center;    
  }
  &.layer-left {
    text-align: left;
  }
  &.layer-right {
    text-align: right;
  }
}
.parallax-section {
  background-repeat: no-repeat; 
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  width: 100%;  
  position: relative;
  padding: 20% 0;
  margin: 0px auto;
  &.full-height {
    height: 100vh;
    @media (max-width: 1200px) {
      min-height: 80vh;
    }
    @media (max-width: 479px) {
      height: 60vh;
    }
    .heading-text {
      
    }
    .icon-layer {
      margin: 10px auto 13px;
    }
    .custom-block-heading-text {
      margin-bottom: 0%;           
      
    }
    .custom-block-subheading-text {
      margin-bottom: 0%;
      letter-spacing: 0.5px;
    }
    .button {
      margin-top: 2%;
      @media (min-width: 1025px) {
        &:hover {
          @include opacity(0.75);
        }
      }
    }
  }
  @media (max-width: 767px) {
    background-attachment: inherit;
    background-position: center center !important;    
  }
  .vcenter-container,
  .custom-item-container,
  .custom-item-inner-bgimage {
    display: table;
    height: 100%;
    table-layout: fixed;
    width: 100%;
    vertical-align: middle;
  }
  .vcenter,
  .text {
    display: table-cell;
    vertical-align: middle;
  }  
}
.product-listing-section,
.product-listing-items {
  .listing-items-col {
    margin: 0 0 30px;
    > h4 {
      border-bottom: 1px solid $body-border-color;
      margin: 0 0 40px;
      padding: 0 0 10px;
      line-height: 32px;
      font-weight: 400;
      position: relative;
      &:before {
        content: '';
        width: 85px;
        height: 2px;
        background: $main-color;
        @include ab(n, 0, -1px, n);
      }
    }
    .listing-item {            
      margin: 0 0 20px;
      .product-image {
        max-width: 110px;
      }
      .product-content {
        padding-left: 5px;    
        .product-content-inner {
          > a {
            display: block;
            font-weight : $font-medium;
            color: $body-title-product;
            margin: 0 0 15px;
            &:hover {
              color: $main-color;
            }
          }
        }    
        .product-price, .price, .price-sale {
          font-size: $body-font-size + 1px;
          color: $body-price-color;
        }
        .price-compare {
          font-size: $body-font-size - 2px;
          color: rgba($body-price-sold-out-color, 0.9);
        }
      }
      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }
    }
  }
  &.layout-full {
    padding-left: 15px;    
    padding-right: 15px;       
    > div {
      margin: 0px auto;
      max-width: 1400px;
    }
  }
}

/*Footer Bottom*/
.section-separator {
  overflow: hidden;
  &.color, 
  &.image {
    padding: 25px 0;               
  }
  &.image.lazyloaded {
    background-size: 100%;
  }
  &.section-separator-margin-top {
    padding-top: 30px;   
    @media (max-width: 767px) {
      padding-top: 20px;
    }
  }
  &.section-separator-margin-bottom {
    padding-bottom: 15px;
    @media (max-width: 767px) {
      padding-bottom: 10px;
    }
  }
}
.separator-heading { 
  max-width: 1200px;
  padding: 0 15px;
  margin: 0px auto;
}
.separator-line {
  border-top-width: 1px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  max-width: 1170px;
  margin: 0px auto;
  &.line-solid {
    border-style: solid;
  }
  &.line-dotted {
    border-style: dotted;
  }
  &.line-dashed {
    border-style: dashed;
  }
}
.separator-heading-logo { 
  max-width: 1200px;
  padding: 0 15px;
  margin: 0px auto;
  text-align: center;
  h2 {    
    margin: 0px auto 11px;    
  }
  span {
    display: block;
    &.separator-logo {
      margin: 0px auto 16px;      
      &.logo-bt {
        margin: 10px auto 0;        
      }
    }
  }
}
.separator-heading-line {
  max-width: 1170px;
  padding: 0px;
  margin: 0px auto 37px;
  text-align: center;
  h2 {    
    margin: 0px auto 1.5%;
    font-family: $font-heading;
    &.largest, &.largest-1, &.largest-2, &.largest-3, &.largest-4, &.largest-5 {
      line-height: 1.0;
      font-weight : $font-medium;
    }
    &.h1, &.h2, &.h3, &.h4, &.h5, &.h6 {
      font-weight: 100;
    }
  }
  .separator-subtext {
    display: block;
    font-family: $font-heading;
    &.largest, &.largest-1, &.largest-2, &.largest-3, &.largest-4, &.largest-5 {
      line-height: 1.0;
      font-weight : $font-medium;
    }
    &.h1, &.h2, &.h3, &.h4, &.h5, &.h6 {
      font-weight: 100;
    }
  } 
  .separator-sub-line {   
    max-width: 100%;
    margin: 0px auto 2%;  
    overflow: hidden;   
    border-top-width: 1px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    &.sub-line-bt {
      margin: 2% auto 0;        
    }
    &.sub-double-line {
      max-width: 80px;
      border-width: 1px;
    }
  }    
  &.side-line {
    h2 {
      position: relative;      
      margin: 0px auto;
      display: inline-block;
      padding: 0 50px;
      @media (max-width: 479px) {
        padding: 0 30px;
      }
      span {
        display: inline-block;
        padding: 0 20px;
        position: relative;
        z-index: 1;
        white-space: nowrap;
        background: $body-background-color;
      }
      &:after,
      &:before {
        content: '';
        height: 1px;
        width: 50%;   
        border-top-width: 1px;
        border-bottom-width: 0px;
        border-left-width: 0px;
        border-right-width: 0px;
        @include ab(50%, n, n, n);
        @include translate(0, -50%);
      }
      &:before {
        left: 50%;
      }
      &:after {
        right: 50%;
      }
    }    
    &.line-solid {
      h2 {
        &:after,
        &:before {
          border-style: solid;
        }
      }     
    } 
    &.line-dotted {
      h2 {
        &:after,
        &:before {
          border-style: dotted;
        }
      }   
    } 
    &.line-dashed {
      h2 {
        &:after,
        &:before {
          border-style: dashed;
        }
      }   
    } 
    .separator-logo {
      margin: 8px auto 13px;
      display: block;
    }
    .separator-subtext {
      margin: 8px auto 0;            
    }
  } 
  &.left-line {
    text-align: left;
    h2 {
      position: relative;
      padding: 0;
      display: block; 
      &:after {
        content: none !important;
      }   
      &:before {
        content: '';
        height: 1px;
        width: 100%;
        border-width: 1px;
        @include ab(50%, n, n, 0);
        @include translate(0, -50%);
      }
      span {
        display: inline-block;
        padding: 0 8% 0 0;
        position: relative;
        background: $body-background-color;
      }       
    }
    &.line-solid {
      h2 {        
        &:before {
          border-style: solid;
        }
      }     
    } 
    &.line-dotted {
      h2 {        
        &:before {
          border-style: dotted;
        }
      }   
    } 
    &.line-dashed {
      h2 {        
        &:before {
          border-style: dashed;
        }
      }   
    }
  }
  &.right-line {
    text-align: right;
    h2 {
      position: relative;
      padding: 0;
      display: block; 
      &:after {
        content: none !important;
      }   
      &:before {
        content: '';
        height: 1px;
        width: 100%;
        border-width: 1px;
        @include ab(50%, 0, n, n);
        @include translate(0, -50%);
      }
      span {
        display: inline-block;
        padding: 0 0 0 8%;
        position: relative;
        background: $body-background-color;
      }       
    }
    &.line-solid {
      h2 {        
        &:before {
          border-style: solid;
        }
      }     
    } 
    &.line-dotted {
      h2 {        
        &:before {
          border-style: dotted;
        }
      }   
    } 
    &.line-dashed {
      h2 {        
        &:before {
          border-style: dashed;
        }
      }   
    }
  }
  &.line-solid {
    .separator-sub-line {
      border-style: solid;
    }
  } 
  &.line-dotted {
    .separator-sub-line {
      border-style: dotted;
    }   
  } 
  &.line-dashed {
    .separator-sub-line {
      border-style: dashed;
    }   
  } 
}
/*end homepage*/
.bold-text {
  font-weight: $font-medium !important;
}
/*Oder form*/
.srp-filter-wrapper {
  display: table;
  width: 100%;
  margin-bottom: 15px;
  > a {
    line-height: 18px;
    display: inline-block;
    margin-right: 15px;
    padding-right: 15px;
    font-size: $body-font-size;
    border-right: 1px solid $body-border-color;   
    &:before {
      content: "\e8cc";
      font-family: arenafont;
      font-size: 12px;
      margin-right: 7px;          
    }
    &:hover {
      &:before {
        content: '\e8cc'; 
      }
    }
  }
  .srp-filter {
    display: inline-block;
    li {
      margin-right: 15px;
      span {
        display: none;        
      }
      a {
        line-height: 18px;
        font-size: $body-font-size;
        &:before {
          content: "\e8cc";
          font-family: arenafont;
          font-size: 12px;
          margin-right: 7px;
        }
        &:hover {
          &:before {
            content: '\e8cc';       
          }
        }
      }
    }
  }
}
.group-toolbar {
  .filter-of-icon,
  .filter-icon {
    float: left;
    margin: 0 15px 0 0;
    line-height: 30px;
    padding: 3px 10px;    
    border : 1px solid $body-border-color;
    position: relative;
    cursor: pointer;                 
    @include transition(all 0.35s ease 0s);     
    &:before{
      content: "{{ 'collections.general.filter' | t }}";
      display:inline-block;
      float: left;
    }    
    i {   
      font-weight: 400;
      float: left;
      &:before {
        content: none;
        display: block;
        line-height: 30px;
        margin: 0;
      }      
    }    
    &:hover {
      background-color: #333;
      color: #fff;
    }
    @media(max-width: 360px){
      margin: 0;
    }
  }    
}
.order-form { 
  .button.text-center {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;    
    border-top: 1px solid $body-border-color;
    padding: 15px 0;    
    z-index: 999;
    background: $white;
    @media (max-width: 991px) {
      bottom: 50px;
    }
    .btn {
      line-height: 44px;
      padding: 0 50px;      
    }
    @media (max-width: 767px) {
      padding: 15px 0;
    }
  }  
  .cata-product {   
    letter-spacing: 0;  
    margin: 0;   
    > div {                  
      .product-qty {
        overflow: hidden;
        margin: 0;
        width: 90px;        
        max-width: 100%;
        text-align: center;
        @include ab(50%, n, n, 0);
        @include translate(0, -50%);
        @media (max-width: 1199px) {
          margin-top: 10px;
          position: static;
          @include translate(0, 0%);          
        }
        input {
          height: 34px;
          padding: 0 25px; 
          text-align: center; 
          width: 100%;        
          color: $body-title-color;
          border: 1px solid $body-border-color;
        }
        span {
          width: 25px;
          height: 34px;
          text-align: center;
          padding: 0px;                
          cursor: pointer;
          display: inline-block;
          line-height: 34px;
          font-size: 10px;
          cursor: pointer;
          z-index: 1;
          &.global-product-info-qty-minus {
            @include ab(0, 0, n, n);
            border-right: 1px solid $body-border-color;
            i {
              width: 100%;
              height: 100%;         
              @include transition(all 0.35s ease 0s); 
              &:before {
                content: '';
                width: 8px;
                height: 1px;
                background: $body-title-color;
                display: block;
                @include ab(50%, 50%, n, n);
                @include translate(-50%, -50%);
              }
            }
          }
          &.global-product-info-qty-plus {
            @include ab(0px, n, n, 0);
            border-left: 1px solid $body-border-color;
            i {
              width: 100%;
              height: 100%;          
              @include transition(all 0.35s ease 0s);
              &:before,
              &:after {
                content: '';
                width: 8px;
                height: 1px;
                background: $body-title-color;
                display: block;
                @include ab(50%, 50%, n, n);
                @include translate(-50%, -50%);         
              } 
              &:after {
                width: 1px;
                height: 8px;
              }
            }
          }
          &:hover{        
            i{              
              &:before,
              &:after {
                background: $main-color !important;
              }
            }
          }
        }
      }     
    }
    .product-wrapper {      
      display: table;      
      width: 100%;
      border: none;
      padding: 10px;
      margin: 0 0 20px;
      &:before {
        content: none;
      }
      &:after {
        bottom: 0;
      }
      .product-head {
        display: table-cell;
        width: 115px;
        vertical-align: middle;
        padding-right: 15px;
        img {
          width: 100%;
        }
      }
      .product-content {
        display: table-cell;      
        vertical-align: middle;
        padding: 0 !important;
        text-align: left;
        .product-name {
          text-transform: none;
          height: auto !important;
          font-size: $body-font-size;
          margin-bottom: 5px;
        }
        .pc-inner {
          position: relative;
          height: 100%;
          padding: 0 95px 0 0;          
          @media (max-width: 1199px) {
            padding: 0;
          }
        }         
        .product-author {         
          font-size: $body-font-size - 2px;  
          line-height: 1.4; 
          padding: 0 0 5px;  
          a {
            color: $body-light-color;
            &:hover {
              color: $main-color;
            }
          }   
        }
        .product-variants {
          padding: 5px 0 0;
          font-size: $body-font-size - 2px;    
        }  
        .product-price {
          margin: 5px 0 0;
        } 
        .product-price,
        .price,
        .price-sale {
          font-size: $body-font-size;
        }        
      }     
    }
  }
}
/* Category page --------------------------*/
.templateCollection {  
  .left-column-container {
    align-self: flex-start;
    + .col-md-9 {
      @media (max-width: 767px) {
        padding-top: 0;
      }
    }
    @media(max-width: 991px){
      padding: 0;
      background: transparent;
    }
  }
  &.sidebar-opened,
  &.order-sidebar-opened {
    .no-sidebar,
    .filter-order-form {            
      opacity: 1 !important;     
      transform: translate(0,0) !important;
    }       
  }
}
.page-cata {  
  .subcategory {
    font-weight: 500;              
    margin: 0;    
    margin-bottom: 20px;
  }  
  .owl-carousel {       
    .owl-item {
      padding: 0 1px;
      &.current {
        .category {
          &:before {
          content: none;
        }
        }
      }
      .category {
        &:before {
          left: -1px;
      }  
      }
    }
  }
  .subcategory-list {
    list-style: none;
    > .category {
      float: left;
      @media (min-width: 1200px) {
        width: 25%;
      }
      @media (max-width: 1199px) and (min-width: 992px) {
        width: 33.333333%;
      }
      @media (max-width: 991px) and (min-width: 480px) {
        width: 50%;
      }
    }
    .category {
      padding: 15px;
      border: none;          
      .category-image {
        margin: 0 0 10px;
      }      
    }
    &.owl-theme {
      .owl-stage-outer {
      padding: 5px 0;
    }
    .owl-controls .owl-nav {
      @media(max-width:479px){
        display: none;
      }
    }
    }
  } 
  #sidebar {
    background-color: #fff;
    padding: 30px 20px;
    @media(min-width: 992px){
      .sb-widget {
        overflow: visible;     
      } 
      &.left-column-container{
        &+div{
          padding-right: 0;
        }
      }
    }
    @media(max-width:991px){
      padding :0 ;
    }
    
  }  
  &.full-layout {
    padding: 0 15px;    
    margin: 0px auto;
    max-width: 1430px;  
    @media(max-width: 991px){
      padding: 0;
    }     
  }  
  .cp-grid{
    margin-left: -15px;
    margin-right: -15px;
  }               
  .loading_img {
    text-align: center;
    i {
      font-size: 40px;
      &:before {
        color: $main-color;
        -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
      }
    }
  }
  .col-lg-9 {
    .cata-toolbar {
      .grid-list {
        .text,
        .grid-4 {
          @media (max-width: 991px) and (min-width: 768px) {
            display: none;
          }
        }
        .grid-4 {
          @media (max-width: 1199px) and (min-width: 992px) {
            display: none;
          }
        }
      }      
    }
  }
  &.order-form{
    .sort-by{
      float: right;
    }
    .cata-toolbar{
      padding: 0;
    }
  }

  &.sidebar-none{
    .col-12{
      @media(min-width: 992px){
        &>div:not(.no-sidebar){padding:0;}
      }
    }
  }
}
#shopify-section-collection-infinite-template{
  @media(min-width:992px){
    .sort-by{
      float: left;
    }
  }
}
.cata-image {
  margin: 0 auto 30px;
  img {
    width: 100%;   
  }
}
.cata-description {
  padding: 0 0 30px;  
  line-height: 1.8; 
  text-align: justify;
  @media (max-width: 767px) {
    display: none;
  }  
}
.wrap-cata-title {
  margin: 0 0 20px;
  h2 {
    font-weight: 500;
    text-transform: uppercase;
  }
}
/*toolbar*/
.cata-toolbar {
  margin: 0 0 20px;
  width: 100%;  
  display: table;
  position: relative;  
  text-align: center; 
  background: $body-second-color;
  @include border-radius(9px, 9px, 9px, 9px);
  .filter-icon-order {
    float: left;
    line-height: 38px;
    padding: 0 4% 0 0;
    cursor: pointer;
    i {
      margin-right: 7px;
      float: left;
      font-size: $font-small-icon;
      color: $body-light-color;
      @include transition(all 0.35s ease 0s);
      &:before {
        display: block;
        line-height: 38px;
      }
    }
    &:hover {
      i {
        color: $body-title-color;
      }
    }
  }  
  .grid-list {
    float: right;     
    .text {
      float: left;
      line-height: 38px;
      margin: 0 10px 0 0; 
      display: none;          
    }   
    .grid {
      margin: 0 5px;     
      float: left;
      text-align: center;
      border: none;     
      cursor: pointer; 
      font-size: 0;  
      background: none;
      color: $body-light-color;        
      height: 38px;      
      @include transition(all 0.35s ease 0s);      
      &.grid-3,
      &.grid-2 {
        @media (max-width: 767px) {
          display: none;
        }
      }
      i {
        font-size: 16px;
        line-height: 38px;
        display: block;
      }
      &:first-child {
        margin-left: 0;
      }
      &.active, &:hover {
        background: none;
        color: $black;        
      }
    }    
  }
  .pagination-showing {
    float: left;
    line-height: 28px;
    padding: 5px 0;    
    margin-right: 10px;
    @media (max-width: 991px) {
      display: none;
    }
  }
  .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 {      
      right: auto;
      left: 15px;
      width: 100%;
      padding: 25px 30px;     
    }
    .clear-filter{
      display: none;
    }
  }  
  .sort-by {
    display: inline-block;
    color: $body-general-color;
    .sort-by-inner {
      float: left;     
      position: relative;       
      padding: 0px 45px 0 15px;                                                        
      border: 1px solid $body-border-color;
      @media (max-width: 991px) {
        float: none;
        display: inline-block;        
      }         
      label {
        float: left;         
        line-height: 36px;
        margin: 0;          
        color: $body-title-color; 
      }
      #cata_sort_by {
        float: left;
        position: static;
        &:after {
          content: none;
        }
        button {
          float: left;
          border: none;
          height: 36px;
          padding: 0px;
          background: none;
          line-height: 36px;
          text-align: left;   
          font-size: $body-font-size;       
          a {
            color: $body-title-color;   
          }
          span {
            padding: 0 10px;
            float: left;   
            color: $body-title-color;                  
            @media (max-width: 479px) {
              padding-right: 6px;
            }
            &.visible-xs {
              padding-top: 0;
            }
          }
          i{         
            text-align: center;
            padding: 0px;
            content: none;      
            line-height: 38px;  
            color: $body-title-color;    
            @include ab(0px, n,n,0px);
            width: 30px;
            height: 100%;      
            &:after{
              content: '';
              @include ab(50%,0,n,n);
              @include translate(0,-50%);
              height: 25px;
              border-left: 1px solid $body-border-color;
            }   
            &:before{
              content: '\f107';
            }
          }
        }
      }         
    }
    #sort_by_box {      
      width: auto;
      min-width: 175px;      
      background: $white;           
      padding: 0;      
      list-style: none;
      border: 1px solid $body-border-color;
      @include dropdown-effect;
      @include ab(100%, -1px, n, -1px);
      @include translate(0%, 10px);         
      @include box-shadow(0 6px 12px rgba($black, 0.176));    
      &:before {
        content: '';
        height: 2px;
        background: $main-color;
        @include ab(-1px, -1px, n, -1px);      
      } 
      li {
        padding: 0 10px;
        text-align: left;
        a {
          padding: 4px 0;    
          line-height: 20px;      
          display: block;
          transition: none;                               
          font-size: $body-font-size - 1px;
          color: $body-general-color;
        }
        &:hover { 
          @media (min-width: 1025px) {
            background: $body-second-color;
            a {
              color: $body-title-color;            
            }
          }          
        }
        &.active {          
          background: $body-second-color;
            a {
              cursor: pointer;
              color: $body-title-color;            
            }
        }        
      }
    }
    &.opened {
      #sort_by_box {
        @include dropdown-effect-hover;
        @include translate(0%, 0px);
      }
    }
  }
  .show-by {
    display: inline-block;
    margin: 0 0 10px 4%;
    position: relative;
    .show-by-button {
      border: none;
      padding: 6px 20px;
      line-height: 38px;
      background: $body-second-color;  
    }
    #show-by-box {
      width: auto;     
      min-width: 85px;
      background: $white;          
      padding: 10px 20px;
      display: block;  
      visibility: hidden;
      z-index: -99;
      list-style: none;
      text-align: left;
      @include ab(100%, 0, n, 0);
      @include translate(0%, 10px);  
      @include opacity(0);
      @include  transition(all 0.35s ease);
      li{
        padding: 0;        
        margin-bottom: 0; 
        border-bottom: 1px solid $body-border-color;
        a {
          padding: 8px 0;
          line-height: 26px;
          display: block;
          transition: none;                               
          font-size: $body-font-size;
          color: $body-general-color;
        }
        &:hover {     
          @media (min-width: 1025px) {
            a{
              color: $main-color;            
            }
          }         
        }
        &.active { 
          > span {
            padding: 8px 0;
            line-height: 26px;
            display: block;           
            font-size: $body-font-size;
            color: $main-color; 
          }         
          a{
            cursor: default;
            color: $main-color;           
          }
        }
        &:last-child {
          border-bottom: none;          
        }
      }
    }
    &:hover,
    &.opened {
      #show-by-box {
        visibility: visible;
        z-index: 99;          
        @include opacity(1);  
        @include translate(0%, 0px);
      }
    }
  }
  .top-pagination-holder {
    float: right;
    margin: 5px 0;
    > span {
      float: left;
      line-height: 40px;
      padding: 0 7px 0 0;
    }  
    .pagination {
      float: left;
    } 
  }
  .visible-xs{
    cursor: pointer;               
  }
}
.mobile-filter {
  text-align: center;  
  color: $body-title-color;
  background: $body-second-color;
  margin: 0px auto;  
  float: right;
  line-height: 28px;
  padding: 8px 25px;
  @include border-radius-50;
  @include transition(all 0.35s ease 0s);
  .fa {
    margin-right: 8px;
  }
  &:hover {
    background: $main-color;
    color: $main-color-text;
  }
}
.pagination {
  margin: 0;
  @include border-radius-reset;   
  > li {
    > a,
    > span {
      border: none;
      padding: 0 6px;
      color: $body-general-color;
      background: none;
      line-height: 40px;  
      .fa {
        font-size: 13px;
      }
      &:focus,
      &:hover {  
        background: none;
        color: $main-color;
      }
    }
    &.disabled {
      display: none;
    }
    &.active {
      > a,
      > span {
        background: none;
        color: $main-color;
        &:focus,
        &:hover {  
          background: none;
          color: $main-color;
        }
      }
    }
    &:focus,
    &:hover {      
      > a,
      > span {
        background: none;
        color: $main-color;
      }      
    }
  } 
}
.cata-product {
  display: flex;
  flex-wrap: wrap;
  margin: 0px;  
  padding: 0px;
  letter-spacing: -0.31em;
  vertical-align: top;
  clear: both;   
  &:before,&:after{
    content: '';
    display: inline-block;
  }
  @media(min-width: 992px){
    &.no-sidebar{
      margin: 0 -14px;
    }
  }  
  .product-grid-item {     
    padding: 0px;
    margin: 0;   
    letter-spacing: 0;
    vertical-align: top;
    float: none;   
    display: inline-block;      
    @media (max-width: 767px) {
      width: 50%  !important;   
    }         
    @media(max-width: 480px){
      width : 100% !important;
    }  
  } 
  .product-wrapper {
    .product-content {
      .product-description {
        display: block;
      }
    }
  }
  &.no-padding {
    margin: 0 auto;
    .product-grid-item {
      padding: 0;
    }
  }  

}
.cata-grid-4 {
   .cata-product {
     .product-grid-item {
       @media (min-width: 992px) {
        width: 25%;
        &:nth-child(4n + 1) {
          .product-wrapper {
            &:before {
              content: none;
            }
          }
        }
       }
       @media (max-width: 991px) and (min-width: 768px) {
         width: 33.333333%;
         &:nth-child(3n + 1) {
          .product-wrapper {
            &:before {
              content: none;
            }
          }
        }
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
          border-top: none;
        }
       }
     }
   } 
   .col-lg-9 {
      .product-wrapper .product-content .product-description {
      display: none;
      }
   }
   .product-wrapper{
     .product-swatch-images{
       display: none;
     }
   }
}
.cata-grid-3 {
  .cata-product {
    .product-grid-item {
      width: 33.333333%;
      @media (min-width: 768px) {
        &:nth-child(3n + 1) {
          .product-wrapper {
            &:before {
              content: none;
            }
          }
        }
      }
       @media (max-width: 991px) and (min-width: 768px) {
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
          border-top: none;
        }
      }
    }
  }   
}
.cata-grid-2 {
  .cata-product {
    .product-grid-item {
      width: 50%;
      &:nth-child(2n + 1) {
        .product-wrapper {
          &:before {
            content: none;
          }
        }
      }
      @media (max-width: 991px) {
        &:nth-child(1),
        &:nth-child(2) {
          border-top: none;
        }
      }
    }
  }  
}
.cata-grid-1 {
  .cata-product {
    .product-grid-item {
      width: 100% !important;
       padding: 0 15px 30px;
       border-top: none !important;   
       @media (max-width: 767px) {
        padding-bottom: 20px;
       }
      .product-wrapper {
        float: none;
        width: 100%;               
        border: none;
        padding: 0;  
        @media (min-width: 768px) {
          @include flexbox();
        }
        &:before,
        &:after {
          content: none;
        }   
        .product-inner-wrapper{
          width: 100%;
          display: flex;
          flex-wrap: wrap;
        }
        @media(max-width: 575px){
          .product-inner-wrapper{
            padding: 20px;
          }
        }
        .product-head {                    
          padding: 0 15px 0 0;
          margin: 0;    
          position: relative;                
          -webkit-box-flex: 0;        
          max-width: 25%;
          @include flex(0 0 25%);
          float: left;
          align-self: center;
          @media(max-width: 575px){
            max-width: 43%;
            @include flex(0 0 43%);
            padding: 0;
            .featured-img{
              padding: 0;
            }
          }                          
        }
        .featured-img {
          float: left;
          clear: none;
          margin: 0;
          padding: 0 15px;
        }
        .product-image {      
          position: relative;
          overflow: hidden;
          padding: 0;
          max-width: 100%;
          @media (max-width: 767px) {
            overflow: visible;
          }
          img{
            width: 100%;
          }
          a {
            &:hover {
              @media (min-width: 1025px) {
                &:before {
                  @include opacity(1);
                }
              }
            }
          }
          .product-group-vendor-name,
          .product-des-list {
            float: right;
            padding-left: 15px;
            @media (min-width: 992px) {
              width: 56.3%;              
            }              
            @media (max-width: 991px) and (min-width: 768px) {
              width: 50%;
            }              
            @media (max-width: 767px) and (min-width: 576px) {
            	width: 75%;
            }
            @media (max-width: 575px) {
            	width: 56%;
            }            
          } 
          .product-des-list {
            @media (min-width: 1200px) {
            	display: block;
            }
            @media (max-width: 1199px) and (min-width: 768px) {
            	display: -webkit-box;
	            display: -ms-box;
	            -webkit-line-clamp: 5;
	            -webkit-box-orient: vertical;
	            max-height: 105px;   
            }
            @media (max-width: 767px) {
              display: none;
            }
            ul {              
              li {
                list-style: circle outside none;
              }
            }
            ol {
            li {
              list-style: decimal outside none;
            }
          }
            ul, ol {
              padding-left: 18px;
              li {
                margin: 0 0 3px;
                white-space: normal;
              }
            }
          }
        }  
        .product-content {
          text-align: left !important;          
          padding: 0 0 0 15px;
          -webkit-box-flex: 0;        
          max-width: 75%;       
          @include flex(0 0 75%);
          float: left; 
          .product-des-list {
            display: block;
          }       
          .product-name {
            @media(min-width:576px){
              font-size: $product-font-size + 6px;
            }
            height: auto !important;
            @media (max-width: 479px) {
              margin-bottom: 10px;
            }    
          }       
          &:before {
            content: none;
          } 
           @media(max-width: 575px){
             max-width: 56%;
             @include flex(0 0 56%);
             .product-des-list {
              display: none;
            }   
           }       
        }
        .price-cart-wrapper {
          .product-add-cart{
            margin-top: 10px;
            position: static;
            display: inline-block;
            transform: none;
            a{
              min-width: 100px;
              padding : 5px 10px;
              background-color: $button-btn1;
              text-align: center;
              color: #fff;
              @include border-radius(3px,3px,3px,3px);
              &:hover{
                background-color: $button-hover-btn1;
                color: $button-hover-btn1-txt;
              }
            } 
          }
        }        
        .product-review {      
          min-height: 0;
          display: block;      
        }                          
        .product-button {
          @include opacity(1);
          border: none;
          background: none;
          padding: 0;    
          text-align: left;
          z-index: 1;
          margin: 0 -4px;       
          @media(max-width: 575px){
            display: none;
          }   
        }           
      }
      &:last-child {
        border-bottom: none;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
      }
    }
  }
}
.available {
  color: $popup-letter-subtitle;
  font-weight: $font-bold;
}
.not-available {
  color: $main-color;
}
.pagination-holder {      
  width: 100%;
  display: table;
  margin: 30px 0 0;
  .pagination {
    @include border-radius(0, 0, 0, 0);
    margin: 0px auto;
    display: block;    
    background: none;
    padding: 25px 0 0;        
    text-align: center;        
    > li {
      margin: 0 5px 5px;
      display: inline-block;      
      > a,
      > span {
        display: block;                
        padding: 0;
        line-height: 42px;
        min-width: 44px;
        height: 44px;
        background: none; 
        margin: 0px;        
        font-size: $body-font-size;
        color: $body-general-color; 
        border: 1px solid $body-border-color;                           
        &.disabled {
          @include opacity(0.7);
          cursor: no-drop;
          display: none;
        }
      }
      .next,
      .prev {
        font-size: 0;  
        &:before{
          font-family: 'arenafont';
          font-size: $body-font-size;
        }    
      }
      .prev {     
        &:before{
          content: '\f104'
        }   
      }
      .next {     
        &:before{
          content: '\f105'
        }   
      }
      &:hover {       
        > a,
        > span {                    
          @media (min-width: 1025px) {
            color: #fff;
          border-color: #b6b6b6;
          background: #b6b6b6;                          
          }
        }
      }      
      &.active {        
        > a,
        > span {          
          color: #fff;
          border-color: #b6b6b6;
          background: #b6b6b6;                                 
        }
      }
    }
  }
}
/*end category page*/

.category-grid-view {
  max-width: 1200px;
  margin: 0px auto;      
  .row {
    margin: 0;
    > div {
      padding: 0;
    }
  }
}
.category {    
  margin: 0;
  padding: 20px ;      
  position: relative; 
  text-align: center; 
  @include transition(all 0.35s ease 0s);
 
  .category-name {                
    margin: 0 auto; 
    font-size: $size-h5;       
    color: $body-title-color;       
    &:hover {
      @media (min-width: 1025px) {
        color: $main-color;
      }      
    } 
  }
  .category-image {
    margin: 0 auto 20px;
    > a {
      display: block;
      position: relative;                 
    }
  }
  &:hover {
    @media (min-width: 1025px) {
      @include box-shadow(0 0 5px 0 #c6c6c6);
      z-index: 4;
      &:before {
        content: none;
      }
    }
  }  
  @media(max-width: 767px){
    padding-bottom: 10px;
  }
}
.lookbooks-wrapper {  
  clear: both;  
  .bc-lookbooks {
    margin: 0 -15px;
    letter-spacing: -0.5em;
    vertical-align: top;
  }
  .look-item {
    padding: 0 15px;
    letter-spacing: 0;
    vertical-align: top;
    display: inline-block;
    float: none;
    text-align: center;
    background: none !important;
    width: 33.333333%;
    position: relative;
    margin: 0px auto 30px;
    @media (max-width: 500px) {
      width: 100% !important;
    }
    .look-point {  
      width: 40px;
      height: 40px;      
      position: absolute;      
      cursor: pointer;
      display: block;
      @include transparent($main-color, 0.7);
      @include transition(all 0.35s ease 0s);  
      &:before {
        content: '+';        
        color: $white;
        width: 100%;
        height: 100%;
        text-align: center;
        display: block;
        line-height: 40px;
        font-size: 45px;
      }
      .look-info {
        background: #fff;
        padding: 5px;
        width: 115px;   
        z-index: -1;  
        height: 0;
        @include ab(150%, -30px, n, n);
        @include box-shadow(0 0px 4px rgba(#c9c9c9, 0.75));  
        @include opacity(0);   
        @include transition(all 0.35s ease 0s);           
      }
      .look-product-name {
        a {
          display: block;
          line-height: 1.2;
          font-size: $body-font-size - 2px;
          margin: 3px 0 0;
        }
      }
      &:hover {
        @include transparent($main-color, 1);
        .look-info {
          height: auto;
          @include opacity(1);
          top: 100%;
          z-index: 9;
        }         
      }
    }
    &.double {
      width: 66.666666%;
    }   
  }
}
/* Register page -----------------------------------------------*/
h2.heading,
.semi-bold {  
  line-height: 1.0;
  margin-bottom: 20px;    
}
.semi-bold {
  font-size: $size-h5;
  font-weight: normal;
  line-height: 36px;   
  margin: 0 0 12px;
}
.list-benefits > li {
  color: $body-title-color;  
  margin-bottom: 3px;
  line-height: 26px;
  i {
    color: $main-color;
    margin: 0 5px 0 0;
    color: $popup-letter-subtitle;
  }
}
.control-wrapper {
  display: block;
  clear: both;
  &:last-child {
    padding-top: 10px;
  }
  label {
    display: block;
    clear: both;    
    margin-bottom: 10px;  
    font-weight : $font-medium;
    color: $body-title-color;
    font-size: $body-font-size;        
    .req {
      color: $body-title-color;
      padding-left: 3px;  
    }
  }
  input , select{
    display: block;
    clear: both;
    margin-bottom: 20px;   
    width: 100%;    
  }
  input[type="text"]:-webkit-autofill,
  input[type="email"]:-webkit-autofill,
  input[type="password"]:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
  }
  textarea{
    max-width: 670px;
  }
  button,
  .btn-default {
    margin-right: 8px;    
  }
  .action {
    margin: 0 0 27px;    
  }  
  .forgot-pass {
    float: right;
  }
}
.register-benefits {
  padding: 45px 0;
  @media (max-width: 991px) {
    padding-top: 25px;
    padding-bottom: 25px;
  }
  h5 {
    margin: 0 0 20px;   
  }
  ul {
    list-style: none;
    li {
      font-size: $body-font-size - 2px;
      line-height: 30px;     
    }
  }
}
.form-wrapper {
  padding: 0 9.65%;
  @media (max-width: 991px) and (min-width: 768px) {
    padding: 0 7%;
  }
  @media (max-width: 767px) {
    padding: 0 5%;
  }
  p {
    line-height: 28px;
    margin: 0;
  }
}
.page-reset{
  .form-wrapper{
    padding: 0;
  }
}
.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;    
    border: 1px solid $body-border-color;
    background: $white;
    @include ab(50%, 0, n, n);
    @include translate(-50%, -50%);
    @include border-radius-circle;
  }
}
.login-or {
  @media (max-width: 767px) {
    margin: 20px 0 0;
      border-left: none;
      border-right: none;
      padding-top: 50px;
      &:before {
        left: 50%;
        right: auto;
        top: 0;
        z-index: 2;       
      }
      &:after {
        content: '';
        height: 1px;
        background: $body-border-color;
        z-index: 1;
        @include ab(0, n, n, n);
        left: calc(5% + 15px);
        right: calc(5% + 15px);
      }
  } 
}
.register-or {  
  border-right: 1px solid $body-border-color;
  border-left: none;
  &:before {
    left: auto;
    right: -50px;
  }
  @media (max-width: 767px) {
    margin: 0px 0 40px;
    border-left: none;
    border-right: none;
    padding-bottom: 50px;
    &:before {
      left: 50%;
      right: auto;
      top: auto;
      bottom: -25px;
      z-index: 2;             
      @include translate(-50%, 0%);
    }
    &:after {
      content: '';
      height: 1px;
      background: $body-border-color;
      z-index: 1;
      @include ab(n, n, 0, n);
      left: calc(5% + 15px);
      right: calc(5% + 15px);
    }
  }
}
#customer_login, #register-form {
  padding: 30px 0;
}
#recover-password {
  form {
    padding: 30px 0;
  }
}
.page-register, .page-login {
  .col-xs-12 {
    @media (max-width: 767px) {
      @include flex(0 0 100%);
      max-width: 100%;
    }
  }
}
.page-register, .page-login , #register-form, #recover-password {    
  .heading {
  font-size: $size-h2 - 5px;
  font-weight: 400;   
  margin: 0 0 10px;    
  position: relative;
  @include title-wrapper;
  } 
  .btn {            
    margin-bottom: 10px; 
    min-width: 130px;
  }      
}
#customer-login {
  .text {
    margin: 0 0 30px;
    display: block;
  }
}
#customer_orders {
  h5 {
    margin: 0 0 20px;
  }
}

/* Details page----------------------------------------*/
.spr-form-title {
  text-transform: none;
}
.bx-wrapper {
  @include box-shadow(0 0 0 $white);
  margin-bottom: 0;
  .bx-controls-direction a{
    text-indent: 0;
    margin: 0;
  }
  .bx-next,.bx-prev{
    background : none;
  }
}
.product-extended-tab {
  #tab_sc,
  #tab_review,
  #tab_custom {
    max-width: 1200px;
    margin: 0px auto;
    padding: 0 15px;
  }
}
.tab-content {
  .tab-pane {     
    ul{
      padding: 0 0 20px 25px;
      list-style: disc outside none;           
      li {        
        padding: 3px 0;
        p {
          display: inline;
        }
      }
    }
    ol {
      padding: 0 0 20px 25px;
      list-style: decimal outside none;            
      li {        
        padding: 3px 0;
        p {
          display: inline;
        }
      }
    } 
  }
}
.breadcrumb-product-page {
  background: $body-second-color; 
  margin: 0 auto 45px;  
  .breadcrumb-holder {
    padding: 18px 5%;
    margin: 0px auto;
    @media (min-width: 1400px) {
      padding-left: 75px;
      padding-right: 75px;
    }
    @media (max-width: 767px) {
      padding-right: 80px;
    }   
  }  
  .container {
    .breadcrumb-holder {
      padding-left: 0;
      padding-right: 70px;
    }
  }
  .breadcrumb {
    text-align: left;     
  }
}
.page-product {
  padding: 0;  
  iframe {
    max-width: 100%;    
  }
  .container {
    .product {
      padding: 0;
    }
  }
 
  &.layout-pre-order{
    .btn-pre-order{
      width: 100%;
      
      font-weight: $font-medium;
      text-transform: uppercase;
    }
    .category{
      margin-top: 5px;
    }
  }
  #product-image {   
    margin: 0 0 30px;     
    img{
      width:100%;
    }          
    @media(max-width: 767px){
      position: relative;   
    }
  }
  .product-image-inner {
    margin: 0;
    padding: 0; 
    >div{
      padding: 0 15px;
    }
    .meta-image360 {
      @include ab(15px, n, n, 15px);
      z-index: 2;
      > a {
        padding: 6px 15px;
        line-height: 20px;
        border: 1px solid $main-color;
        display: inline-block;
        color: $main-color;        
        .icon-360 {
          width: 30px;
          height: 19px;
          margin: 0 5px 0 0;
          float: left;
          position: relative;
          top: 2px;
          background-image: url({{'icon-360.png' | asset_url }});
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }
      }
    }
    .meta-video {
      z-index: 3;
      @include ab(20px, n, n, 20px);
      .m-video {        
        border: 1px solid $body-border-color;
        background-color: #fff;
        color: $body-title-color;
        line-height: 30px;
        text-align: center;        
        display: block;
        padding: 2px 15px;        
        i {
          margin-right: 5px;
        }
        &:hover {
          color: $main-color;
        }
      }
      .fancybox-media {
        display: block;
        line-height: 24px;
        padding: 6px 20px;
        border: 1px solid $main-color;
        background: none;
        color: $main-color;    
        .fa {
          margin: 0 7px 0 0;
        }
        @media (min-width: 1025px) {
          &:hover {
            color: $white;  
            background: $main-color;
            border-color: $main-color
          }
        }
      }
      @media(max-width: 360px){
        right: -15px ;
        top: 60px;
      }
    }
    
    .more-view-image{
      .bx-wrapper{
        background-color: transparent;
        border: none;
        height: 100%;
        position: relative;
      }
      .thumb-img{
        position: relative;
        height: 0;
        padding-bottom: 100%;
        display:block;
        opacity: 0.5;
        cursor: pointer;
        img{
          @include ab(0,0,n,n);
          width:100%;
          height: 100%;
        }
        &:hover,&.active{
          opacity: 1;
        }
      }
      .bx-viewport{
        @include ab(50%,n,n,n);
        @include translate(0,-50%);
      }
      .bx-controls{
        .bx-prev,.bx-next{
          @include ab(n,50%,n,n);
          @include translate(-50%,0);
          text-align: center;
          z-index: 99;
          i{
            @include ab(50%,50%,n,n);
            @include translate(-50%,-50%);
            font-size: $size-h3;
          }
        }
        .bx-prev{
          top: 0;
        }
        .bx-next{
          bottom: 0;
          top: auto;
        }
      }
      //horizontal gallery image
      .gallery-image-thumb{
        margin-top: 20px;
        padding: 0 30px;
        .owl-controls{
          .owl-nav{
            position: static;
            .owl-prev,.owl-next{
              @include ab(50%,n,n,n);
              @include translate(0,-50%);
              width:30px;
            }
            .owl-prev{
              left: 0;
              span{
                text-align:left;
              }
            }
            .owl-next{
              right: 0;
              span{
                text-align: right;
                &:hover{
                  color: $main-color;
                }
              }
            }
          }
        }
      }
    }
    @media(max-width: 991px){
      .more-view-image:not(.mobile-version){
        display:none;
      }
    }
  }  
  .spr-container {padding: 0 !important; border: none;}  
  .spr-review-header-byline {
    font-style: normal;
    color: $body-light-color;
  }  
  .spr-badge-starrating {
    float: left;  
    margin-right: 5px;    
    .spr-icon {
      width: 18px !important;
      top: 0px;
      &:before {
        font-size: 14px !important;
      }
    }
  }  
  .slider-main-image {
    position: relative;
    margin: 0 0 8px;
    .slick-list {
      .slick-track {
        .slick-slide {
          > div {
            float: left;
            width: 100%;
            .slick-item {
              float: left;
              width: 100%;
            }
          }
        } 
      }
    }    
    .slick-arrow {
      @include ab(50%, n, n, n);
      @include translate(0, -50%);      
      font-size: 0;
      border: none;
      background: none;
      z-index: 2;
      cursor: pointer;
      line-height: 20px;  
      opacity: 0;
      @include transition(all 0.35s ease);
      &:before {
        font-family: arenafont;
        font-size: $body-font-size + 2px;
        color: $body-light-color;
        @include transition(all 0.35s ease 0s);
      }
      &.btn-prev {    
        left: 10px;    
        &:before {
          content: "\e9e9";
        }
      }
      &.btn-next {     
        right: 10px;   
        &:before {
          content: "\e9ec";
        }
      }
      &:hover {
        &:before {
          color: $main-color;
        }
      } 
    }
    .slider-for-03 {
    	> div {
	    	&:not(:first-child) {
	    		display: none;
	    	}
	    }
	    &.slick-slider {
	    	> div {
	    		display: block;
	    	} 
	    	+ .slick-btn-03 {
	    		display: block;
	    	} 	
	    }
    }
    > .slick-btn-03 {
    	display: none;
    }
    &:hover{
      .slick-arrow{@include opacity(1);}
    }
  } 
  .slider-thumbs-03 {
    margin: 0 -4px;    
    > .slick-item {
      float: left;
      margin: 0 4px 4px;          
    padding: 1px;
    border: 1px solid $body-border-color;
    }
  .slick-list {
    .slick-slide {
      margin: 0 4px 4px;
      opacity: .5;
      &.slick-current {
        opacity: 1;
        .slick-item {
          &:before {
              @include opacity(1);
            }
        }           
      }
    }
    .slick-item {
      position: relative;
      cursor: pointer;
      float: left;      
      padding: 1px;
      border: 1px solid $body-border-color;
    }
  }
  } 
  .product-sku-collection {
    list-style: none;
    margin: 15px 0 0;
    
    list-style: none;
    li {      
      font-size: $body-font-size;      
      padding: 0 0 5px !important;
      text-align: left;
      position: relative;   
      color: $body-light-color;  
      > span {
        color: $body-light-color;        
        display: inline-block;
        padding: 0 10px 0 0;
        &#sku {
          padding: 0;
          color: $body-light-color;
        }
      }
      > a {
        color: $body-light-color;
        margin-right: 5px;
        &:hover {
          color: $main-color;
        }
      }
      &.category {        
        margin: 0;
        border: none;
        &:after {
          content: none;
        }
        &:hover {
          @include box-shadow(0 0 0 $white);
        }
      }
    }
  }
  .share-links.social-sharing {
    clear: both;  
    padding: 12px 0 0;
    &>span{
      margin-right: 18px;
      font-weight: $font-medium;
      text-transform: uppercase;
    }
    .list-inline {
      display: inline-block;   
      li {       
        margin: 0 15px 0 0; 
        width: auto;
        height: auto;
        a {
          border: none;
          position: relative;
          display: block;   
          line-height: 28px;
          color: $body-light-color;   
          i {
            font-size: $size-h5;
          }              
          span {
            display: none;
          } 
          &:hover {
            color: $main-color;
          }         
        }
        &:last-child {
          margin-right: 0;
        }        
      }
    }
  } 
  .product-content-wrapper{ 
    position: relative; 
    .left-side{
      @media(max-width: 767px){
        order: 2;
      }
    }   
    .background-color-wrapper{
      padding: 75px 30px 30px;
      position: relative;
      @media(max-width: 767px){
       padding: 20px 15px 15px;
      }
    }  
    .product-info-inner {
      position: relative;
      &>.unnamed-class,&>.product-policy-wrapper,&>.social-sharing{
        padding: 35px;margin-bottom: 15px; 
        @media(max-width:767px){
          padding: 15px;
        }
      }
      &>.product-policy-wrapper{
        padding: 35px 20px;
        @media(max-width:767px){
          padding: 15px;
        }
      }
      &>.social-sharing{
        padding: 25px 35px;
        @media(max-width:767px){ 
          padding: 15px;
        }
      }
    }
    h1[itemprop="name"] {            
      text-align: left; 
      font-weight: $font-medium;
      text-transform: uppercase;
      font-size: $product-detail-title-size;           
      margin: 0 0 15px;  
      padding: 0;         
    } 
    .code-rating{
      display:flex;
      align-items: center;
      margin-bottom:40px;
    }    
    .product-code{
      display: inline-block;
      margin-right: 15px;
      padding: 5px 10px;
      @include border-radius(3px,3px,3px,3px);
      background-color: #f3f3f3;
      color: $body-light-color; 
    }  
    .detail-deal {
      display: block;           
      clear: both;
      .deal-text {
        display: block;
        padding: 0 0 11px;
        text-transform: uppercase;
        font-weight: $font-bold;
      }
      .wrapper-countdown {
        margin: 30px 0;        
        > div{          
          margin: 0;
          padding: 0;
          background: none;
          border: none;
          white-space: nowrap;
          .countdown-row {
            display: block;
            text-align: left;
            white-space: pre-wrap;
          }
          .countdown-section {
            margin: 0 5px 5px 0;
            padding: 10px;
            display: inline-block; 
            width: auto; 
            position: relative;
            text-align: left;
            border: 2px solid $main-color;
            @include border-radius(5px, 5px, 5px, 5px);
            @media (max-width: 479px) {
              margin-right: 5px;
              padding-left: 7px;
              padding-right: 7px;
            }
            &:last-child {
              margin-right: 0 !important;
            }                        
          }
          .countdown-amount {
            display: block;
            color: $body-title-color;
            font-size: $size-h3;
            padding: 0;
            text-align: center;     
            &:before{
              content: none;
            }
          }
          .countdown-period {
            padding: 0;
            display: block;
            text-align: center;
            color: $body-title-color;
            font-size: $body-font-size;             
          }
          @media(max-width: 1200px) and (min-width: 992px){
            .countdown-section{
              padding: 10px 6px;
              margin: 0 5px 5px 0;
            }
            .countdown-amount{
              font-size: $size-h4;
            }
            .countdown-period{
              font-size: $body-font-size - 2 ;
            }
          }
          @media(max-width: 991px) and (min-width: 768px){
            .countdown-section{
              padding: 10px 6px;
              margin: 0 5px 5px 0;
            }
          }
          @media(max-width: 360px){
            .countdown-section{
              padding: 10px 6px;
              margin: 0 5px 5px 0;
            }
            .countdown-amount{
              font-size: $size-h4;
            }
            .countdown-period{
              font-size: $body-font-size - 2 ;
            }
          }
        }
      }
    }
    .product-detail-review {
      margin: 0 0 15px;
      display: inline-block;
      > a {
        margin-left: 8px;
        font-size: 13px;        
        &:hover {
          color: $main-color;
        }
      }
    }     
    .short-description {
      clear: both;
      margin: 0 0 35px;      
      line-height: 1.8;   
      color: $body-light-color;   
      h5 {
        display: none;
      }    
      ul, ol {
        margin-top: 15px;
        margin-bottom: 15px;
        padding-left: 20px;
        line-height: 20px;
        list-style: disc outside none;
        li {
          margin: 0 0 5px;
        }        
        &:last-child {
          margin-bottom: 0;
        }
      }            
    }
    .size-chart {
      display: inline-block;
      margin: 0;
      > a {        
        text-decoration: underline;
        display: inline-block;
        line-height: 40px;
        text-transform: uppercase;
        padding-left: 34px;
        background-image: url({{'icon-size-chart.png' | asset_url }});  
        background-position: left center;
        background-repeat: no-repeat;
        &:hover {
          text-decoration: none;
        }
      }
    }
    .rating-links {     
      margin: 0px;
      line-height: 20px;      
      overflow: hidden;
      display: inline-block;
      > a {
        color: $body-light-color;    
        font-size: $body-font-size - 1px;   
        white-space: nowrap;  
        &:hover {
          color: $main-color;
        }      
      }
    }
    .spr-badge {
      margin: 0 15px 0 0;         
      display: inline-block;   
      float: left;     
      position: relative;
      color: $body-light-color;
      &:after {
        content: '';
        width: 1px;
        height: 12px;
        color: $body-light-color;
        @include ab(4px, n, n, -8px);
      }
      .spr-badge-caption {
        float: left;    
        display: inline-block;    
        font-size: $body-font-size - 1px;          
        &:before{
          content: "(";
        }
        &:after{
          content: ")";
        }
      }      
    }   
    .price-preview-container {
      overflow: hidden;
    }
    .group-wlcp {
      overflow: hidden;
      margin: 0;            
    }
    .category{
      clear: both;
      padding: 10px 0;
      text-align: left;
      box-shadow: none;
    }
    .product-vendor {
      font-size: $body-font-size - 2px;     
      margin: 0 0 10px;
      a {
        color: $body-light-color;
        &:hover {
          color: $main-color;
        }
      }
    }
    .price-in-out-stock{
      position: relative;
      margin-bottom: 40px;
      @media(max-width: 1199px){
        margin-bottom: 20px;
      }
    }
    #stock {      
      clear: both; 
      @include ab(n,n,8px,0);                        
      line-height: 16px;  
      font-size: 0;
      .stock {
        font-size: $body-font-size - 2px;
        color: #169543;
        font-weight: $font-medium;
      }     
      &:before{
        content:'\e8cb';
        font-family: 'arenafont';
        @include ab(50%,n,n,100%);
        @include translate(0,-50%);
        font-size: $body-font-size - 2px;
        color: #169543;
        margin-right: 5px;
      }
           
    }    
    .sold-out {
      pointer-events: none;
    }
    .pdf-file-wrapper{
      @include ab(20px,n ,n, 120px);
      margin: 0 0 20px;
      
      button{
        height: 36px;
        margin-right: 2px;
        position: relative;
        line-height: 18px;
        padding: 2px 15px;
        background-color: #fff;
        @include border-radius-reset;
        border: 1px solid $body-border-color;
        i{
          padding-right: 5px;
        }
        &:hover{
          color: $main-color;
        }
      }
      .modal.show{
        background-color: Rgba(0,0,0,.3);
      }
      .modal-content{
        height:85vh;
        z-index: 1041;

        display: block;
        iframe{
          height: 100%;
          width: 100%;
        }
        @media(max-width:991px){
          height: 60vh;
        }
      }
      @media(max-width: 360px){
        top: 20px;
        right: -15px;
        button{
          margin-right: 0;
        }
      }
      
    }
    .product-price {        
      text-align: left;                          
      padding: 0;
      .price-sale {           
        float: none; 
        display: block;  
        font-size: $size-h2; 
        color: $body-title-color;     
        margin: 0;
        font-weight: $font-medium;
      }
      .price {                    
        text-align: left;
        padding: 0;
        margin: 0;        
        border: none;                                             
        font-size: $size-h2;   
        font-weight: $font-medium;  
      }
      .price-compare {         
        margin-bottom: 5px;
        display: block;                   
        font-size: $body-font-size;         
      }
    }    
    .custom-field {
      color: $main-color;
      margin: 0 0 20px;
    } 
    .group-cw {
      position: relative;
      display: block;
      width: 100%;
      margin: 0 0 20px 0px;   
      clear: both;   
      @include swatch-product;
    }     
    
    .shopify-payment-button {
      margin: 12px 0 5px;
      width: 100%;
      button {

          @include transition(all 0.35s ease 0s);
            text-transform: uppercase;
            font-weight: $font-medium;
            line-height: 1.25555;
            background: $button-btn2;  
            color: $button-btn2-txt;
            border: none !important;
            &:hover {
              background: $button-hover-btn2;  
              color: $button-hover-btn2-txt;
            }
        &.shopify-payment-button__more-options {
          background: none;
          @include border-radius-reset;
        }
      }
      .shopify-payment-button__button--hidden {
          height: 0;
          margin: 0 auto;
      }
      @media(max-width: 767px) and (min-width: 576px){
        max-width: 152px;
        margin: 0 0 0px 10px;
        button{
          height: 50px;
        }
      }
    }
    .add-to-wishlist,
    .add-to-compare {        
      display: inline-block;
      line-height: 20px;
      width: 49%;
      font-size: $body-font-size - 2px;   
      white-space: nowrap;
      i {
        display: inline-block;                
        margin-right: 5px;  
        float: left;         
        color: $main-color;   
        font-size: $size-h5;
      }
      &:hover {
        color: $main-color;     
      }   
      &:nth-of-type(2){
        position: relative;
        &:before{
          content: '';
          width: 1px;
          height: 80%;
          @include ab(50%,0,n,n);
          @include translate(0,-50%);
          background-color: $body-border-color;
          @media(max-width:1199px) and(min-width: 992px){
            content: none;
          }
        }
      }    
      @media(min-width: 1200px) {
        &:nth-of-type(1){
          padding: 5px 35px 5px 0px
        } 
        &:nth-of-type(2){
          padding: 5px 5px 5px 15px
        } 
      }
      @media (max-width:768px){
        width: auto;
        &:nth-of-type(1){
          padding: 5px 15px 5px 0px
        } 
        &:nth-of-type(2){
          padding: 5px 5px 5px 15px
        }  
      }
      @media(max-width: 480px){
        &:nth-of-type(1),&:nth-of-type(2){
          width: 49%;
        } 
        &:nth-of-type(2){
          padding-left: 5px;
        } 
      }
    }  
    .options {     
      .variants-wrapper {
        clear: both;       
        margin-bottom:10px; 
        .selector-wrapper {
          margin-bottom: 20px; 
          display: inline-block;
          float: left;
          max-width: 50%;
          text-align: left;         
          position: relative;
          select{
            min-width: 70%;
            height: 42px;
            padding: 5px 10px;        
            font-size: $body-font-size;        
            color: $body-general-color;             
            line-height:32px;      
            position: relative; 
            &:focus{
              border-color: $body-border-color;
            }      
          }     
          &:before{
            content: '\f107';
            font-family: arenafont;
            text-align: center;
            @include ab(n,50%,0,n);
            width: 20%;
            height: 42px;
            line-height: 42px;
            font-size: $body-font-size;        
            color: $body-general-color;
          } 
          &:after{
            content: '';
            @include ab(n,50%,6px,n);
            width: 1px;
            height: 30px;
            background-color: $body-border-color;
          }
        }
        label{    
          color: $body-title-color;             
          font-size: $body-font-size;
          font-weight: $font-medium;
          text-transform: uppercase;
          white-space: nowrap;
        }
      } 
    } 
    .qty-add-cart {
      clear: both;
      display: flex;
      flex-wrap: wrap;    
    }   
    .quantity-product {
      font-size: 0;
      max-width: 85px;
      margin-right: 10px;
      height: 50px;                      
      margin-bottom: 10px;       
      .quantity{
        height: 100%;
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
          -webkit-appearance: none;    
        }  
      }
      @media(max-width: 575px){
        max-width:50%;
        margin-bottom:10px;
      }
    }    
    .action-button{
      @media(min-width: 1200px){
        width: calc(100% - 95px);
      }
      .btn {
        margin: 0;     
        min-width: 40px;
        line-height: 26px;
        padding: 10px 40px;        
        width: 100%;
        font-size: $body-font-size; 
        white-space: nowrap;
        font-weight: $font-medium;
        text-transform: uppercase;
        @include border-radius(3px,3px,3px,3px);
        &.disabled{
          opacity: 1;
          font-size:0;
          position: relative;
          &:before{
            content: '\f110';
            font-size: $font-small-icon;
            font-family: 'arenafont';
            color: #fff;
            -webkit-animation: fa-spin 2s infinite linear;
            animation: fa-spin 2s infinite linear;
            @include ab(50%,50%,n,n);
            margin-top: -13px;
            margin-left: -11px;
          }
        } 
        &:hover {
          color: $button-hover-btn1-txt;
        }
        @media(max-width: 1199px){
          padding: 10px 30px;
        }
        @media(max-width: 479px){
          padding: 10px 20px;
          span{display: none;}
        }
      } 
      @media(max-width: 1199px) and(min-width: 992px) {
        max-width: 100%;
        width: 100%;
      }
      @media(max-width: 360px){
        max-width: 100%;
        width: 100%;
      }
    }  
    .product-policy-wrapper{
      padding: 25px 15px;
      .policy-item{
        list-style: none;
        width: 33.333%;
        padding: 0 15px;
        text-align: center;
        img{
          margin-bottom: 10px;
        }
        p{
          font-family: 'Open Sans', sans-serif;
          font-weight: $font-bold;
          line-height: normal;
          font-size: $body-font-size - 2;
          margin: 0;
        }
      }
      .product-policy-inner{
        display: flex;
        margin-left: -15px;
        margin-right: -15px;
      }
  
    }
   
  }     
}

.product-action .variants-wrapper.show-swatches-size .selector-wrapper.size,,
.special-product-list .sp-content .variants-wrapper .selector-wrapper.size  { display: none; }
.product-action .variants-wrapper.show-swatches-color .selector-wrapper.color,
.product-action .variants-wrapper.show-swatches-color .selector-wrapper.colour,
.special-product-list .sp-content .variants-wrapper .selector-wrapper.color,
.special-product-list .sp-content .variants-wrapper .selector-wrapper.colour { display: none; }

.templateProduct { 
  .breadcrumb {
    margin: 0 auto;
    @media (min-width: 992px) {
      padding-right: 100px;
    }
  }
    
  .table-extended {
    td {
      text-align: left;
      padding: 0;
      width: 50%;
      border: none;
      img {
        max-width: 100%;
      }
    }
    &.align-left {
      td {
        img {
          position: relative;   
          float: right;        
        }
      }
    }
    &.align-right {
      td {
        img {
          position: relative;         
        }
      }
    }
  }
  .nav-tabs li a {
    padding-bottom: 15px;
  }
  .tab-content {
    clear: both;
    padding: 35px;          
    margin: -8px auto 0;        
   
    @media (max-width: 767px) and (min-width: 480px){
      padding: 25px;
    }
    @media (max-width: 479px) {
    	padding: 20px;
    }
    #tabs-description {
      line-height: 22px;
    }
    .tab-pane {
      display: block;
      height: 0;
      @include opacity(0);
      &.show {
        height: auto;
        position: relative;
        @include opacity(1);
      }
    }   
    iframe {max-width: 100%; }
    h5 { 
      color: $body-title-color;      
    }
    h1, h2, h3, h4, h5, h6 {
      margin: 0 0 23px;     
      font-weight: 500;
    }
    p {          
      margin-bottom: 40px;
      @media (max-width: 767px) {
      	margin-bottom: 20px;
      }
      &:last-of-type {
        margin-bottom: 0;
      }
    }   
    .video {
    	display: block;
    	position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%;
      iframe {
        @include ab(0, 0, n, n);
        width: 100%;
        height: 100%;
      }
    }
    .bundled-items {
      overflow: hidden;
      display: table;
      width: 100%;
      #crust-items {
        @media (min-width: 992px) {
          display: table-cell;
          vertical-align:middle;
          width: 75%;
        }
      }
      .action-bundle {
        position: relative;
          &:after{
            content: '=';
            height: 32px;
            width: 32px;
            line-height: 30px;
            text-align: center;
            border: 1px solid $body-border-color;
            background: $body-background-color;
            color: $body-light-color;
            font-size: $size-h4;
            z-index: 2;
            @include ab(50%,-20px, n,n );
            @include translate(0, -50%);
            @include border-radius-circle;
            @media(max-width: 991px){
              content: none;
            }
          }
        @media (min-width: 992px) {
          display: table-cell;
          vertical-align:middle;
          text-align: center;
          width: 25%;
          padding-left: 15px;
        }
        @media (max-width: 991px) and (min-width: 555px) {
          float: right;
        }
        @media (max-width: 554px) {
          margin-top: 20px;
        }
        .total-price {
          margin: 0 0 15px;
          .price {
            color: $body-price-sale-color;  
            font-size: $size-h3 + 4px;
          }
        }
        .btn {
          padding-top: 4px;
          padding-bottom: 4px;
          text-transform: uppercase;
          font-weight: $font-medium;
        }
      }
      .bundled-images {
        list-style-type: none;      
        padding: 0;
        li {
          position: relative;
          overflow: visible;
          float: left;
          padding: 5px 5px 0;
      
          &:not(:first-child) {
         
            &:before {
              content: '+';
              height: 32px;
              width: 32px;
              line-height: 30px;
              text-align: center;
              border: 1px solid $body-border-color;
              background: $body-background-color;
              color: $body-light-color;
              font-size: $size-h4;
              z-index: 2;
              @include ab(50%, -20px, n, n);
              @include translate(0, -50%);
              @include border-radius-circle;
              @media (max-width: 554px) { 
                height: 25px;
                width: 25px;
                line-height: 23px;
                left: -10px;
              }
            }
          }
         
          .bundle-wrapper{
            padding:30px 45px;
            @include transition(all 0.35s ease);
            &:hover{
              box-shadow: 0 0 2px 4px #f2f2f2;
            }
            @media(max-width:991px){
              padding: 15px;
              margin-bottom: 15px;
            }
            @media(max-width: 575px){
              padding: 0;
              box-shadow: none ;
            }
          }
          @media (min-width: 555px) {            
            width: 33.333333%;
          }
          @media (max-width: 554px) {            
            width: 50%;
            padding-left: 20px;
            padding-right: 20px;
            &:nth-child(3) {
              clear: both;
              text-align: center;
              width: 100%;
              padding-top: 30px;
              .bundle-wrapper{
                display:inline-block;
                text-align: left;
              }
              &:before {
                @include translate(-50%, 0);
                left: 50%;
                top: -16px;
                right: auto;                
              }
            }
            
          }
          h5 {
            color: $body-title-product;     
            font-size: $product-font-size;      
            font-weight : $font-medium;
            margin: 0 0 15px; 
            display: -webkit-box;
            display: -ms-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 18px;
            height: 36px;   
            overflow: hidden;
            @media (max-width: 479px) {
              font-size: $product-font-size - 2px;      
            }    
            a {
              color: $body-title-product;
              &:hover {
                text-decoration: underline;
              }                              
            } 
          }
          img {
            display: block;
            margin: 0 0 10px;
          }
          .price {
            display: block;
          }
          &:first-child {
            .price {
              color: $body-light-color;
            }
          }
        }
      }  
      .wrap-bundled-item {
        overflow: hidden;
        display:table-row;
    
      }
      .bundled-item {
        margin: 0 0 7px 45px;
        padding: 0 0 0 20px;
        position: relative;
        line-height: 20px;
        float: left;        
        input[type="checkbox"] {
          @include ab(0px, 0, n, n);
          @include opacity(0);
          margin: 0;
          width: 100%;
          height: 100%;     
          z-index: 2;     
        }   
        > .bundled-product-title,
        > .b-info {
          position: relative;
          &:before {
            content: '';
            width: 14px;
            height: 14px;
            border: 1px solid $body-border-color;
            background: $body-second-color;
            @include border-radius(3px, 3px, 3px, 3px);
            @include ab(3px, -20px, n, n);
          }
          .bundled-product-title {
            &:before,
            &:after {
              content: none;
            }
          }
        } 
        input:checked + .bundled-product-title,
        input:checked + .b-info {
          &:after {
            content: '\e9a2';
            font-family: arenafont;
            font-size: 10px;
            line-height: 12px;
            color: $body-general-color;
            @include ab(4px, -18px, n, n);
          }
        }       
        .bundled-price {
          display: inline;
          padding-left: 5px;
          .price {
            font-size: $body-font-size + 2px;
            color: $body-price-sale-color;
          } 
        }
        &:not(:first-child) {
          clear: both;
          cursor: pointer;
          .bundled-product-title {
            color: $body-title-product;
            border-bottom: 1px solid $body-title-product;
          }
          input[type="checkbox"] {
            cursor: pointer;
          }
        }
        &:first-child {
          margin-top: 10px;
          .bundled-product-title {
            color: $body-light-color;
          }
        }
        @media(max-width: 991px){
          margin-left: 17px;

        }
        @media(max-width: 555px){
          margin-left: 0;
          margin-top: 10px;
        }
      }   
      .wrap-bundled-item {
        @media (max-width: 991px) and (min-width: 555px) {
          width: calc(100% - 200px);
          float: left;
        }
      }
    }
    table {
      border-collapse: collapse;
      margin: 8px auto;
      @media (max-width: 767px) { 
        display: block;
      }
      th {      
        padding: 7px 30px; 
        background: $body-second-color;
        color: $body-title-color;
        text-transform: uppercase;
      }
      td {
        border-bottom: 1px solid $body-border-color;
        padding: 7px 30px;
        text-align: left;  
        line-height: 1.5; 
        @media (max-width: 767px) {
          padding: 7px 5px;
        }          
      }
      tbody {
        tr:first-child {
          td {
            border-top: none;
            padding-top: 0;
          }
        }
        tr:last-child {
          td {
            border-bottom: none;
          }
        }
      }
    } 
  }
  .col-lg-9 {
    .product-simple-tab {
      padding: 0;
    }    
    .tab-content {
      padding-left: 4.05%;
      padding-right: 4.05%;
      @media (max-width: 767px) {
        padding-left: 5%;
        padding-right: 5%;
      }      
    }
  }
  #shopify-product-reviews { 
    margin: 0 auto;
    clear: none;    
    .spr-form-title {
      font-size: $size-h5;
      margin: 0 0 20px 0;
      color: $body-title-color;  
      font-weight: $font-medium;   
      @media (max-width: 767px) {
        margin-bottom: 10px;
      }
    } 
    .spr-container{
      padding: 0;
      border: 0;
      .spr-header-title {      
        margin: 0 0 15px;
        font-size: $size-h5;
        text-transform: none;
        text-align: left;     
      }
      .spr-summary {
        text-align: left;
        .spr-starrating {        
          margin: 13px 5px 0 0;
          float: left;
          .spr-icon {
            width: 16px !important;
            float: left;
            margin: 0;
            top: 0;
            &:before {
              font-size: 14px !important;              
              float: left;                    
            }                      
          }
        }
        .spr-summary-caption {
          display: inline-block;
          margin: 11px 0;        
          color: $body-general-color;                
        }
      }
      .spr-summary-actions{
        float: right;
        a{
          display: inline-block;
          @include button1(); 
          padding: 5px 30px;
          color: $white;
          font-weight: $font-medium;
          @include border-radius(3px,3px,3px,3px);
        }
      }
      .spr-button, .spr-button-primary{
        @include button2();  
        color: $white;      
        font-weight : $font-regular; 
        line-height: 27px;
        padding: 5px 20px; 
      }
      .spr-form-contact, .spr-form-review, .spr-form-actions {
        max-width: 735px;
      }
      .spr-form-input-text, .spr-form-input-email {
        width: 635px;
        max-width: 100%;
        height: 37px;
        padding: 8px 17px;
        line-height: 18px;
        float: right;
        clear: none;
        @media (max-width: 767px) {
          width: 100%;
          float: none;
          max-width: 315px;
        }
      }
      .spr-form-label {
        font-weight: $font-medium;
        float: left;
        width:80px;
        text-align: left;
        margin: 0 ;
        color: $body-title-color;
        font-size: $body-font-size;
        @media (max-width: 767px) {
          text-align: left;
        }
        @media (max-width: 479px) {         
          width: auto;                    
        }
      }   
      .spr-reviews {
        margin: 0px;
      }
      .spr-review {
        padding: 0 0 30px;
        margin: 0 0 30px;
        border: none;
        border-bottom: 1px solid $body-border-color;
        .spr-review-content,
        .spr-review-content-body {
          font-size: $body-font-size;        
          color: $body-general-color;   
          line-height: 1.8;
          margin: 0;
          padding: 0;
          clear: both;
        }      
        .spr-review-header {
          .spr-review-header-title  {          
            font-size: $size-h5;                                
            margin: 0 15px 10px 0;
            padding: 0;
            line-height: 1.8;    
            display: none;                             
          }
          .spr-review-header-byline {
            font-style: normal;                 
            color: $body-light-color;                         
            font-size: $body-font-size - 1px;              
            @include opacity(1);          
            strong {                                      
              font-weight: normal;
              &:first-child {
                color: $body-title-color;
                font-weight : $font-medium;  
                font-size: $body-font-size;
              }
            }
          }        
          .spr-starratings {
            font-size: $body-font-size;
            float: right;
            i {
              margin-right: 0px;
              width: 16px !important;
              &:before {
                font-size: 14px !important;
                float: left;
              }
            }
          }
        }
        .spr-review-footer {
          display: none;
          a{
            float: left;
            font-size: $body-font-size;
            color: $body-general-color;
          }
        }
        &:first-child {
          margin-top: 50px;
          @media (max-width: 767px) {
            margin-top: 30px;
          }
        }
        &:last-child {
          margin-bottom: 0;
          padding-bottom: 0;
          border-bottom: none;
        }
      }  
      .spr-form-review-rating {
        margin: 8px 0 20px;
        .spr-form-label {        
          line-height: 22px;
          @media (max-width: 479px) {
            width: auto;
            float: left;
          }
        }
        .spr-icon {
          width: 22px !important;
          &:before {
            font-size: 17px !important;       
          }
          &.spr-icon-star-hover {
            &:before {
              color: $main-color;
              content: "\e830" !important;  
            }
          }
        }
        a{         
          width: 12px; 
        }
        a:hover {
          &:before {           
            content: "\e830" !important;   
            color: $main-color; 
          }
        }
        .spr-starrating {
          display: inline-block;
          line-height: 22px;
          margin-left: 20px;    
          @media (max-width: 767px) {
            margin-left: 0;
          }
      }
      }      
      .spr-form-input-textarea {
        max-width: 635px;
        max-height: 100px;
        width: 100%;      
        float: right;
        resize: none;
        @media (max-width: 767px) {
        width: 100%;
        float: none;
        max-width: 315px;
      }
      }
      .spr-form-input,      
      .spr-form-input-textarea {
        color: $body-general-color;
        @include placeholder {
          color: $body-light-color;
        }   
      }
      .spr-form-actions {        
        margin-top: 15px;
        .btn {
          float: left;
        font-size: $body-font-size - 1px;
        margin-left: 100px;
        @media (max-width: 479px) {
          margin-left: 0;
        }
        }
      }
    }    
    .spr-form {
      border-top: 1px solid $body-border-color;      
      background-color: #fff;
      padding: 35px 30px 63px;
    }    
    .spr-form-review {
      clear: both;
    }
    .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;
    }
  }   
  .review-item {
    margin: 40px auto 0; 
    overflow: hidden;  
    @media (max-width: 767px) {
      margin-top: 30px;
    }
  }
  #related_item {
    margin: 55px auto 0;    
    clear: both;    
    @media (max-width: 767px) {
      margin-top: 35px;
    } 
    @include clearfix();
    .title-wrapper {
      margin: 0 auto;
      h3 {
        margin: 0 auto;
      }
    }    
    .related-items {
      vertical-align: top;
      letter-spacing: -0.31em;
      margin-left: -10px;
      margin-right: -10px;
      width: auto;
      > .product-wrapper {
        vertical-align: top;
        letter-spacing: 0;
        display: inline-block; 
        width: 25%;
        @media (max-width: 991px) and (min-width: 768) {
          width: 33.333333%;
        }
        @media (max-width: 767px) and (min-width: 480px) {
          width: 50%;
        }
        @media (max-width: 479px) {
          width: 100%;
        }
      } 
      &.owl-carousel {
        @include padding-carousel;                  
      }
    }    
    .owl-item {
      .product-wrapper {
        width: 100%;
        vertical-align: top;
        letter-spacing: 0;
      }
    } 
    .owl-controls{
      .owl-prev{
        border-right: 1px solid #e4e4e4;
        span{
          margin-left: -2px;
        }
      }
      .owl-next{
        border-left: 1px solid #e4e4e4;
        span{
          margin-left: -2px;
        }
      }
    }   
  }
  .swatch .tooltip {
    @media (max-width: 1024px) {
      display: none;
    }
  }
  .container {
    .page-product .product {
      padding-left: 0;
      padding-right: 0;
    }
  } 
  .add-to-cart-sticky {
    &.show {
   		+ .mobile-layout-bar {
          @media (max-width: 991px) {
            display: none;
          }
        }   
    }
  }  
}
.spr-icon { 
  @include opacity(1 !important);
  background: none !important;
  display: inline-block;
  width: 16px !important;
  height: 14px !important;
  font-style: normal;  
  &:before {   
    content: "\ea8a" !important;
    font-family: arenafont !important;
    font-size: 14px !important;
  }
  &.spr-icon-star-empty {
    color: $body-ratting-empty-color;
    &:before {   
      color: $body-ratting-empty-color;
      content: "\ea66" !important;
    }
  }
}
#main-column {margin: 35px auto 0;}
.main-content{ position: relative; 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;
    }
    > img {
      min-height: 104px;
    }
  }
}
.breadcrumb-title {
  display: block;
  font-size: $size-h1;  
  color: $body-title-color;       
}
.breadcrumb {
  padding: 0;
  margin: 10px auto 30px;
  background: none;           
  display: block;
  @include border-radius(0, 0, 0, 0);
  @media (max-width: 767px) {
    white-space: nowrap;
    display: block;
  }
  > li {
    position: relative;   
    display: inline-block;   
    line-height: 36px;
    color: $body-general-color;    
    + li {
      position: relative;
      padding: 0;
      &:before {
        content: '\f105';      
        font-family: "arenafont";
        padding: 0 5px;  
        margin: 0px;
        font-size: 14px;
        color: $body-general-color;            
        position: relative;
        top: 2px;     
        font-weight: normal;   
      }
      > a {
        background: $body-second-color;
        color: $body-title-color;
        padding: 0 0 0 5px;
        @include border-radius(5px, 5px, 5px, 5px);
      }      
    }
    > a {           
      display: inline-block;      
      padding: 0px;
      line-height: 36px;
      position: relative;    
      color: $body-general-color;
      &:hover {   
        color: $body-title-color;         
      }
    } 
    &.active { 
      color: $body-light-color;
    }
  }  
  &+h1{
    text-transform: uppercase;
    padding: 15px 0 25px;
  }
}  
.breadcrumb-page-title {
  display: block;
  width: 100%;    
  color: $body-title-color;
  font-size: $size-h2;
  font-family: $font-heading;      
  margin: 0 auto 0px;  
}
.bw-image {  
  clear: both;
  width: 100%;
  height: 100%;
  height: $breadcrumb-height;  
  margin: 0 auto 50px;
  overflow: hidden;    
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 19px 0;
  background-position: center;    
  @media (max-width: 479px) {   
    margin-bottom: 30px;
  }
  .breadcrumb-holder {    
    width: 100%;
    @media (min-width: 768px) {
      display: table;
      vertical-align: middle;
      height: 100%;
    }
    @media (max-width: 767px) {
      @include ab(50%, 50%, n, n);
      @include translate(-50%, -50%);
      padding: 0 15px;
    }
  }    
  .breadcrumb {
    margin: 0px auto;      
    display: table-cell;
    vertical-align: middle;
    &~h1{
      display: table-row
    }
  }

}
.bw-color {
  background: $breadcrumb-bg-color;
  padding: 19px 0;
  overflow: hidden; 
  @media (max-width: 767px) {
    padding-top: 8px;
    padding-bottom: 8px;
  } 
  .breadcrumb-holder {    
    .breadcrumb {
      margin: 0 auto; 
    }
  }
}

/* Shopping cart page ----------------------------------------------------*/
.templateCart {
  .top-cart-holder > .cart-target {
    pointer-events: none;
  }
  .header-icons >ul > li.top-cart-holder:hover .cart-dd {
    visibility: hidden;
    z-index: -999;
    @include opacity(0);    
  }
}
.cart-order-note {    
  margin: 0 auto 30px;  
  h3 {
    margin: 0 0 20px;    
    font-size: $size-h5;
  }
  .cart-note {
    textarea {
      width: 100%;
      max-width: 100%;
      min-height: 120px;
    }
  }  
}
.page-cart {    
  .page-cart-inner{
    padding: 40px;
    @media(max-width: 767px){
      padding: 20px;
    }
  }
  .page-heading{
    padding: 0;
    text-align: left;
    margin-bottom: 40px ;
    font-size: $size-h3;
    text-transform: uppercase;
    font-weight: $font-medium;
  }
}
.cart-table,.page-wishlist{
  margin-bottom: 50px;
  width: 100%;
  overflow-x: auto;   
  @media (max-width: 767px) {
    margin-bottom: 20px;
  }  
  table {
    width: 100%;  
    thead{
      font-weight: $font-medium;
      
      border: 1px solid $body-border-color;
      background-color: $body-background-color;
      th{
        font-size: $body-font-size + 1 ;
        font-weight: $font-medium;
        text-align: center;
        color: #000;
        padding-top: 15px;
        background: transparent;
        padding-bottom: 15px;
        &.item{
          width: 10%;
        }
      }
    } 
    tbody {
      tr {
        &.last {
          td {
            text-align: right;
            padding-left: 0;
            padding-right: 0;
            padding-bottom: 0;
            border: none !important;
            @media (max-width: 479px) {
              padding-left: 0px !important;              
              &:before {
                content: none !important;
              }
            }
            &>*:nth-last-child(1){
              padding-right: 0;
            }
          }     
          .btn {
            margin-bottom: 10px;
            margin-left: 10px; 
            &.btn-update {
              font-weight: $font-medium;
              text-transform: uppercase;
              padding-left: 16px;
              padding-right: 16px;
            }           
            &:first-child {
              margin-left: 0;
            }
            @media (max-width: 479px) {
              min-width: 195px;
            }
          }               
        }
        &.cart-item{
          background-color: #fff;
          position: relative;
        }
      }      
    }
    td {
      position: relative;     
      padding: 18px;    
      @media(min-width: 768px){
        border: 1px solid $body-border-color !important;
      }      
      &.action {
        .cart-remove-btn {          
          -webkit-appearance: none;
          appearance: none;          
          display: block;
          text-align: center;  
          margin: auto;
          color: $body-border-color;
          border: 1px solid $body-border-color;
          width: 20px;
          height: 20px;
          @include border-radius(3px,3px,3px,3px);
          i {
            &:before {
              font-family: "arenafont";
              content: "\e973";
              font-size: 12px;
            }
          }
          &:hover {
            color: $main-color;
            border-color: $main-color;
          }                  
        }
      }
      &.item-qty {
        @media(min-width: 480px){
          width: 150px;
        }
        .quantity{
          height: 45px;
          border: none;
          background-color : #F6f6f6;
        }
        
      }      
      &.cart-action {
        border-bottom: none;
      }    
    }  
       
  }
  @media (max-width: 479px) {
    table, thead, tbody, th, td, tr { 
      display: block; 
    }
    table {
      tr {         
        padding: 10px 0;
        border-bottom: 1px solid $body-border-color;
      }
      thead {
        border : none;
        tr { 
          position: absolute;
          top: -9999px;
          left: -9999px;
        }   
      }   
      td { 
        /* Behave  like a "row" */
        border: none !important;
        position: relative;
        padding: 7px 0;
        padding-left: 25% !important; 
        text-align: left;
        &.item-name {             
          .item-title > a {
            font-size: 15px; 
          }
        }
        &.action{
          @include ab(0 ,n , n ,10px);
          button{            
            padding: 0;              
            text-align: center;
          }
        }
        &:first-child, 
        &:last-child {
          border: none;
        }
      }

      td:before {               
        width: 28%; 
        padding-right: 10px; 
        white-space: nowrap;
        font-size: 14px;                        
        color: $body-light-color;                  
        @include ab(50%, 0, n, n);
        @include translate(0, -50%);
      }
      /*
      Label the data
      */
      td:nth-of-type(1):before { content: "Image"; }      
      td:nth-of-type(2):before { content: "Item"; }
      td:nth-of-type(3):before { content: "Price"; }
      td:nth-of-type(4):before { content: "Qty"; }
      td:nth-of-type(5):before { content: "Total"; }      
      .cart-action {
        &:before {
          content: none !important;
        }
        .btn-default {
          margin-bottom: 10px;         
        }
      }   
    }     
  } 
}
.cart-empty-wrapper {
  font-size: $size-h5;  
}
.cart-row {
  @include clearfix();
}
.cart-right {  
  float: right;
  width: 41.666667%;
  padding-left: 25px;
  @media (max-width: 991px) and (min-width: 768px) {
    width: 50%;
  }
  @media (max-width: 767px) {
    width: 100%;
    padding-left: 0;
    float: none;
    overflow: hidden;
  }   
  .total-price {              
    padding: 0 0 10px;    
    margin: 0 0 16px; 
    color: $body-title-color;    
    text-align: left;
    overflow: hidden;    
    font-size: $size-h6 + 1;
    font-weight : $font-medium;
    text-transform: uppercase;
    line-height: 24px;
    border-bottom: 1px solid $body-border-color;
    > span:last-child {      
      float: right;
      padding-left: 5px;           
      color: $main-color;
      font-size: $size-h3;     
    }
  } 
  .note-shipping {      
    text-align: right; 
    padding: 0 0 0 120px;
    position: relative; 
    > span {              
      text-transform: uppercase;
      display: inline-block;
      min-width: 120px;
      text-align: left;
      float: left;    
      color: $body-title-color;  
      @include ab(2px, 0, n, n);
    }
  }
  .note-tax {    
    padding: 10px 0;
    text-align: right;        
    position: relative;     
  }
  > p {  
    text-align: right;        
    margin: 0;  
  }
  .free-shipping {
    padding: 5px 0 0;
    .progress {
      height: 18px;
      background: rgba(#222, 0.3);
      margin: 0 auto 12px;
      @include border-radius-25;
    }
    .progress-bar {
      background: #222;
      display: block;
      color: $white;
      padding: 0 10px;
      text-align: center;
      line-height: 18px;
      height: 100%;
      padding: 0 10px;
      text-align: center;
      @include transition(width 0.4s ease-out);
      background-image: -webkit-linear-gradient(bottom left, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
      background-image: -o-linear-gradient(bottom left, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
      background-image: linear-gradient(to top right, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
      background-size: 40px 40px;
      animation: move 2s linear infinite;
    }
    .text {
      margin: 12px 0 0;
      .money {
        font-weight : $font-medium;
      }
    }
  } 
  .terms-conditions {
    margin: 15px 0 0;
    input[type="checkbox"] {
      margin: 3px 8px 0 0;
      float: left;
    }
    label {
      margin: 0;
      display: inline;float: left;
      width: 60%; 
    }
    img {
      margin-top: 20px;
    }
  }
  .cart-action {    
    text-align: right;
    .btn {     
      margin: 20px auto 0;
      padding: 9px 20px;
      font-weight: $font-medium;
      text-transform: uppercase;
    }     
  }  
  .additional-checkout-buttons {
    margin: 20px 0 0;
    .additional-checkout-button {
      width: 50% !important;
      min-width: calc(50% - 10px) !important;
      float: left;
      margin: 0;
      &:nth-child(even) {
        padding-left: 10px !important;
      }
      &:nth-child(odd) {
        padding-right: 10px !important;
      }
    }
  }
}
.cart-left {
  width: 58.333333%;
  float: left;
  padding-right: 25px;
  @media (max-width: 991px) and (min-width: 768px) {
    width: 50%;
  }
  @media (max-width: 767px) {
    width: 100%;
    display: block;
    padding-right: 0;    
  }  
  .shipping {
    h4 {
      margin: 0 0 20px;
    }
  }
  .shipping-calculator-form {
    .control-wrapper {
      padding-top: 0px;
      @media (max-width: 991px) and (min-width: 768px) {
        @include flex(0 0 100%);
        max-width: 100%;
      }
      .btn {
        float: right;  
        width: auto;      
      }
    }
  }
  #shipping-rates {
    margin: 0 0 20px;
    li {
      margin: 0 0 5px;
      line-height: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
.upsell-products {
  margin: 0 auto;
  padding: 50px 0 0;
  clear: both;
  @media (max-width: 767px) {
    padding-top: 40px;
  }  
  @include clearfix();
  .upsell-items{
    margin-left: -10px;
    margin-right: -10px;
    &.datas-loaded{
      width: auto;
    }
  }
  .loading {
    position: static;
    margin: auto;
    @include translate(0, 0);
  }

  .title-wrapper,.upsell-title{
    margin: 0;
  }
  
  .product-wrapper {
    .quick_shop {
        display: none;
    }
    .product-content {
      .price-cart-wrapper {
        padding: 0;
        border: none;
        min-height: 26px;
        .product-add-cart {
          display: none;
        }
      }
        .product-button {
          display: none;
        }
    }  
    &:hover {
      &:after {
        bottom: 0;
      }
    } 
  }
  .owl-carousel {
    .owl-stage-outer {
      padding: 5px 0;
    }
    .owl-controls .owl-nav {
      top: -50px;
    }
  }
}
table {
  width: 100%;  
  border-collapse: collapse;
  td {
    position: relative;
    padding: 30px 20px;         
    border: none;    
    text-align: center;      
    &.item-name {
      text-align: left;
      display: table-cell;
      @media (max-width: 479px) {
      	display: block;
      }   
    }
    .item-image {
      min-width: 130px;
      width: 130px;
      margin:auto;
      vertical-align: middle; 
      @media (max-width: 479px) {
        width: 100px;
        min-width: 100px;          
      }
      a {
        display: block;        
        overflow: hidden;   
        text-align: center;                
      }
    }
    .item-title {
      text-align: left;
      display: table-cell;
      vertical-align: middle;
      > a {                                         
        line-height: 1.3;
        color: $body-title-color;
        font-size: $body-font-size + 1;
        font-weight: $font-medium;
        &:hover {
          color: $main-color;       
        }     
      }
      .wrap-item-variant {
        margin: 5px 0 0;   
        color: $body-light-color;  
        font-size: $body-font-size - 2px; 
        .item-variant {
          display: block;
          padding: 5px 0 0;          
          .variant-title {
            color: $body-title-color;
          }
        }        
      }
    }     
    &.action {
      button {
        border: 0;
        background: none;       
        padding: 0;        
        i {
          font-size: 12px;
        }
        &:hover {
          i {
            color: #c0392b;            
          }
        }
      }
    }
    &.product-price,
    &.item-price {
      font-size: $body-font-size+1;
      span {
        color: $body-price-color;   
        font-size: $body-font-size+1;
      }
    }
    &.item-total {
      font-size: $body-font-size+1;
      color: $body-price-color;  
      font-weight: $font-medium;    
    }   
    &.cart-action {
      text-align: right;
    } 
    &.product-available {
      color: $popup-letter-subtitle;
      font-weight: $font-medium;
    }    
  }
  tbody {
    tr.last {
      td {
        border-top: 1px solid $body-border-color;
      }
    }
  }
  thead {
    th {      
      padding: 10px 20px;
      text-align: center;                                       
      border: none;
      font-weight: 400;
      font-size: $body-font-size;       
    }
  }   
}
.page-wishlist {
  background-color: #fff;
 @media(min-width: 768px){
   padding: 40px;
 }
  .page-title {
   text-transform: uppercase;
   margin-top: 0 !important;
   font-size: $size-h3;
  }
  table.wishlist-table {
    td {
      position: relative;
      padding: 15px 20px;         
      border: none;    
      border-bottom: 1px solid $body-border-color;
      text-align: center; 
      @media (max-width: 767px) {
        text-align:left;
        border-bottom: none;
        &:before {
          font-weight: 400;
          color: $body-light-color;
          font-size: $body-font-size;
        }
      }
      .remove-wishlist{
        -webkit-appearance: none;
        appearance: none;          
        display: block;
        text-align: center;  
        margin: auto;
        color: $body-border-color;
        border: 1px solid $body-border-color;
        width: 20px;
        height: 20px;
        @include border-radius(3px,3px,3px,3px);
        position: relative;
        &:before{
          font-family: "arenafont";
          content: "\e973";
          font-size: 12px;
          color: inherit;
          @include ab(50%,50%,n,n);
          @include translate(-50%,-50%);
        }
      }
      &.product-title {
        color: $body-title-color;
        font-size: $size-h5 - 1px;
        text-align: left;
      }
      &.product-price {
        font-size: 16.43px;
        color: $body-price-color;  
      }
      &.product-available {
        color: $popup-letter-subtitle;
      }
      &.product-detail {
        .view-btn {
          @include button1();
          padding: 4px 25px;
          font-weight: $font-medium;
          @include border-radius(3px,3px,3px,3px);
        }
      }
    }
  }
}
.no-wishlist-msg {
  margin: 20px 0;
}
#product-compare {
  .page-title {
    font-weight: 400;
    text-align: center;
  }
  table.product_comparison_template {
    table-layout: fixed;   
    margin: 0 auto;
    tr {
      td {
        padding: 15px;
        border: 1px solid $body-border-color;
        @media (max-width: 767px) {
          border-top: none;          
        }
        .remove {
          left: 15px;
          top: 15px;
          z-index: 2;
          .remove-product-compare {          
            i {
              &:before {
                content: '\e806';
                font-family: arenafont;
                font-size: 16px;
                color: $body-general-color;
                @include transition(all 0.35s ease 0s);
              }
            }
            &:hover {
              i {
                &:before {
                  color: $main-color;
                }
              }
            }
          }
        }
        .product-image-block{
          width: 100%;
        }
      }
      &:first-child {
        td:first-child {
          border-top: 1px solid $body-border-color;
        }
      }
    }
    .comparison_availability_statut {
      margin: 5px 0 0;
     .availability_value {
      color: $popup-letter-subtitle;
     } 
    }
    .comparison_product_infos {
      .button-container {
        .view-btn {
          @include button1();
          padding: 4px 25px;
          max-width: 165px;
          width: 100%;
          min-width: 0;
        }
      }
    }    
    .spr-container {
      border: none;
      padding: 0;
    }
    .heading-col {
      background: $body-second-color;
      color: $body-title-color;
      font-size: $body-font-size;      
      border-bottom: 1px solid $body-border-color;      
      vertical-align: middle;      
      @media (min-width: 768px) {
        width: 200px;
      }
      &>*{
        font-weight: $font-medium;
      }
    }
    .product-col {
      .product-name {        
        font-size: $product-font-size;      
        font-weight : $font-medium;
        a {
          color: $body-title-product;     
          &:hover {
            color: $main-color;
          }
        }
      }
    }
  }
}
.compare-content {
  .empty {
    a {
      color: $main-color;
      @media (min-width: 1025px) {
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
.page-wishlist {
  .msg {
    a {
      color: $main-color;
      @media (min-width: 1025px) {
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
h1.page-heading {
  margin: 0 auto 40px;
  text-align: center;    
  padding: 0 15px;
  font-weight: 400;
  font-size: $size-h1;  
  @media (max-width: 767px) {
    margin-bottom: 20px;
  }
}
h3.subheading {
  text-transform: none;      
  color: $body-title-color; 
  border-bottom: 1px solid $body-border-color;
  margin: 0 0 12px;
  padding: 0 0 14px;
}
.s-title {
  font-size: $size_h4;
  color: $body-general-color;  
  margin-bottom: 10px;
}
.alert-success {
  button.close {
    color: #222;
    @include opacity(1);
    position: relative;
    top: 2px;
    &:hover {
      color: $main-color;
    }
  }
}
#customer_orders {  
  .table-wrapper{
    width: 100%;
    overflow: auto;    
    table{      
      tr{
        td {
          .total {
            font-size: 18px;            
            color: $main-color;
          }
          .note { display: block; white-space: nowrap; }
        }              
      }
    }
  }
}
.customer-info {
  margin-top: 25px;  
  p {
    margin: 0 0 5px;
  }
}
.page-address {
  h2 {    
    margin: 10px 0 20px;
  }
  .new-address {   
    #new-address {
      display: block;
      margin-bottom: 20px;
    }
    > a {
      color: $body-general-color;
      margin-bottom: 20px;
      display: inline-block;
    }
  }
  #add_address {    
    padding: 20px 0 30px;
    .control-wrapper {
      h4 {        
        margin-bottom: 20px;        
      }
      > button {
        margin-right: 10px;
      }
    }
  }
  .address-table {    
    padding-top: 20px;
    padding-bottom: 30px;
    border-top: 1px solid $body-border-color;

    .action-edit-address{
      > button{
        margin-right: 10px;
      }
    }
  }
  .address_actions{
    margin-top: 5px;
    button {
      @include button2();
      @include transition(all 0.35s ease 0s);      
      margin: 0 10px 0 0;
      &:last-child {
        @include button1();   
        font-size: 14px;                  
      }
    }   
  }
}
.customer_address_table {
  h4.title {
    margin-bottom: 30px;
    text-transform: capitalize;
    color: $body-general-color;
  }
  .control-wrapper {
    label {
      float: left;
      margin: 0;
      line-height: 40px;
      min-width: 150px;
    }
    input,
    select {
      clear: none;      
    }   
    input {
      padding-top: 10px;
      padding-top: 10px;
    }
    input[type="checkbox"] {
      height: auto;
      padding-top: 0;
      padding-bottom: 0;
    }
  }
  .control-wrapper.set_default{
    margin-bottom: 10px;    
    input{
      display: inline-block;
      clear: none;
      margin-top: 3px;
      margin-bottom: 0;
      vertical-align: middle;
      width: auto;
      float: left;
    }
  }
  .action-edit-address {
    .btn {
      margin-top: 10px;
    }
  }
}
.page-order {
  h2 {
    font-size: $size-h3;
    font-weight: 100;
    margin: 0 0 10px;
  }
  .note.order_date{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  #order-details{
    margin-bottom: 40px;
    width: 100%;
    overflow-x: auto;
    table{
      border-bottom: 1px solid $body-border-color;
      padding-bottom: 10px;
      td
      {
        &.product-item {
          text-align: left;
          min-width: 160px;
        }
        &.quantity{
          display: table-cell;
          padding: 0;
          border: none;
        }
        &.money {
          font-size: 18px;          
          color: $body-general-color;
          &.total {
            color: $main-color;
          }
        }
      }

      tr.order_summary td {
        text-align: right;
        &.price {
          padding: 10px 25px;
          font-size: 18px;          
          color: $body-general-color;
        }
        &.total {
          color: $main-color;
          font-size: 18px;          
        }
        &:last-child {
          text-align: center;
        }
      }
      tfoot {
        tr {
          td {
            padding-top: 10px;
            padding-bottom: 10px;
          }
          &:last-child {
            td {
              border-bottom: none;
            }
          }
        }
      }
    }
  }
  #order-address{
    margin: 0;
    .title{
      margin-bottom: 20px;
    }    
    #order-payment {
      @media (max-width: 767px) {
        padding-bottom: 15px;
      }
    }
  }
}

/* Page FAQS ----------------------------------*/
.s4com-helpcenter {
  padding: 0 15px;
  margin: 0px auto;
  @media (min-width: 767px) {
    width: 100%;
  }
  @media (min-width: 768px) {
    max-width: 760px;
  }
  @media (min-width: 992px) {
    max-width: 980px;
  }
  @media (min-width: 1200px) {
    max-width: 1200px;
  }
  h1 {
    text-align: center;
    margin: 0 auto 40px;
    color: $body-title-color;
    display: none;
  }
  .s4com-panel {    
    padding: 0px;
    border: none;
    input {
      @include border-radius-25;
      border: 1px solid $body-border-color;      
      height: 50px;
      padding: 15px 30px;
    }
  }
  .s4com-top-heading {
    padding: 0;
    margin:0;
    font-size: $size-h1;
    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: $size-h1;
    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: $size-h5;                       
      @include transition(all 0.35s ease 0s);       
      > h4 {
        color: $body-title-color;  
        font-size: $size-h3 + 2px;
        line-height: 1.3;
        padding: 25px 0;
        display: block;     
        font-weight: 400 !important;   
        text-transform: none; 
        position: relative;            
      }
      .s4com-icon-wrap {
        display: none;        
      }
      &.s4com-active {
        color: $main-color; 
        h4 {
          color: $main-color; 
        } 
      }
    }  
    .s4com-article-body {
      margin: 0px;
      color: $body-general-color;
      font-size: $body-font-size;
      line-height: 24px;   
      padding: 10px 0 30px;
      p {
        margin: 0;        
        font-size: $body-font-size;  
      }
    }
    &:last-child {
      border-bottom: none;
    }     
  }
  .s4com-space-bottom {
    padding: 0;
    margin: 0;
    border: none;    
  }
}
/* Page 404 */
.template404 {
  #main-content {
    padding: 0;
  }
  
}
.page-404 {  
  width: 100%;  
  padding: 100px 0 70px;
  .box-404-text {    
    h1 {      
    font-weight: $font-light;
    color: $body-light-color;
    margin: 0 auto 50px;
    font-size: 180px;
    @include opacity(.5);
    }
    .text-1{
      font-size: $size-h1;
      font-weight: $font-regular;
      color: #000;
      margin-bottom: 20px;
      line-height : 1.1;
    }
    .text-2 {
        font-size: $size-h5;
        font-weight: $font-regular;
        margin: 0 0 45px;      
    }
    .btn {
      position: relative;
      &:before{
        content: '\f104';
        font-family: 'arenafont';
        @include ab(50%,10px,n,n);
        @include translate(0,-50%);
      }
    }
    .searchbox{
      margin-bottom: 25px;
      .navbar-form{
        max-width:270px;
        margin: auto;
        position: relative;
      }
      .form-control{
 
        @include border-radius(3px,3px,3px,3px);
        display: inline-block;
        margin: auto;
      }
      .search-icon{
        @include ab(50%,n,n,6px);
        @include translate(0,-50%);
        background:transparent;
        border: none;
        @include opacity(.6);
      }
    }
    @media(max-width: 479px){
      h1{
        font-size:120px;
      }
    }
  }   
}
/* Page search ------------------------------------------*/
.page-search {
  > h4 {    
    margin-bottom: 30px;    
    text-align: center;
  }    
}
.templateSearch {
  .page-search {
    .search-form {
      margin: 0px auto;
      display: block;
      max-width: 500px;
      position: relative;
      .search_box {
        width: 100%;
      }
      .search-submit {
        @include ab(0, n, n, 10px);    
        @include transition(all 0.35s ease 0s);
        line-height: 45px;
        background: none;
        border: none;
        i {
          font-size: $font-small-icon - 2px; 
        }
        &:hover {
          color: $main-color;
        }
      }
    }    
  }
  .cata-product {    
    .article-grid-item {
      letter-spacing: 0;
      vertical-align: top;
      float: none;   
      display: inline-block;       
      @media (min-width: 992px) {
        width: 50%;
        &:nth-child(even) {
          padding-left: 15px;
        }
        &:nth-child(odd) {
          padding-right: 15px;
        }
      }
      @media (max-width: 991px) {
        width: 100%;
      }
      .post-to-link {
        .btn {
          padding: 5px 40px;
          line-height: 30px;
          font-weight: 400;
          font-size: $body-font-size + 1px;
        }
      }
    }
  }  
}
.testimonial-wrapper{
  padding: 0;
}
.testimonial-inner{
  padding-top: 30px;
  padding-bottom: 30px;
  background-size: cover !important;
  min-height: 330px;  
  .testimonial-item{
    padding: 50px 0;
    max-width: 70%;
    margin: auto;
    align-items: center;
    
  }
  .customer-img{
    @include border-radius-circle;
     margin-right: 24px !important;
  }
  .testimonial-content{
    margin-left: 22px;
    color: #fff;
    .rating{
      margin-bottom: 20px;
      display: block;
      span{
        &:before{
          content:'\e8ae';
          font-family: 'arenafont';
          color: $body-ratting-empty-color;
        }
        &.active{
          &:before{color: $main-color}
        }
      }
    }
    .message{
      font-weight: $font-light;
      font-size: $size-h5;
    }
    .name{
      font-weight: $font-medium;
    }
  }
    .owl-controls{
    .owl-nav{
      position: static;
      .owl-prev,.owl-next{
        @include ab(50%,n,n,n);
        @include translate(0,-50%);
        background-color: rgba(255,255,255,.1);
        width: 30px;
        &:hover{
          color: #fff;
        }
      }
      .owl-prev{
        left: 20px;
      }
      .owl-next{
        right: 20px;
      }
    }
    .owl-dots{
      bottom: 30px;
    }
  }
  @media(max-width: 575px){
    .testimonial-item{
     display: block;
     padding: 30px;
      .customer-img,.testimonial-content{
        display: block;
        margin: 0 0 15px;
        width: 100%;
     
      }
      .customer-img{
        max-width: 100px;
        margin: 0 auto 30px !important;
      }
    }
  }
}
/*Page account*/
.page-account{  
  h2 {
  border-bottom: 1px solid $body-border-color;
  margin: 0 0 40px;
  padding: 0 0 10px;
  line-height: 32px;
  font-weight: 400;
  position: relative;
  font-size: $size-h3;
  &:before {
    content: '';
    width: 85px;
    height: 2px;
    background: $main-color;
    @include ab(n, 0, -1px, n);
  }
  }
  h4.title {
    >a {      
      letter-spacing: 0;
      color: $body-general-color;

    }
  }
}
.account-detail {
  padding: 0 0 20px;
  i {
    color: $main-color;
    font-size: 18px;
    margin: 0 7px 0 0;
  }
}
.account-details {
  @media (max-width: 767px) {
    padding-bottom: 30px;
  }
  h5 {
    margin: 0 0 15px;
  }
  .info {
    margin-bottom: 10px;
    .author,
    .email {
      margin: 0 0 10px;
    }
    .demo-icon {
      color: $main-color;
      margin: 0 7px 0 0;
    }
  }
}

/*Page Blog*/
.related-post {
  h6 {        
    margin: 0 0 15px;  
    text-transform: uppercase;                
  }  
  .list-unstyled {
    > li {
      margin: 0 0 10px;     
    }
  }  
}
.blog-container{
  .title-wrapper {
    margin: 0;
    padding: 28px 0 22px;
    border-bottom: 1px solid #f2f2f2;
    h3{
      margin: 0; padding: 0;
    }
    &+script+.blog-content{
      margin:0;
    }
  }
 
  .blog-content{
    margin-top: 60px;
    @include control-product-slider;
    &.style-1{
      .post-item{
        .post-item-inner{
          display: table;
          align-items: center;
          .post-content{
            padding: 15px 0px 15px 30px;
            width: 50%;
            display:table-cell;
            vertical-align:middle;
          }
          .post-image{  
            width: 50%;
            height: 100%;
            overflow:hidden;
            display:table-cell;
            vertical-align:middle;
            margin:0;
            img{
              transform: scale(2);
            }
          }
          @media(max-width: 575px){
            .post-image,.post-content{
              display:block;
              width:100%;
              padding: 15px 0;
            }
          }
        }
      }
      .blog-carousel{
        padding: 40px 0 80px;
        .owl-dots{bottom: 30px;}
      }
    }
    &.style-2{
      .post-item{
        padding: 20px 17px;
        .post-content{
          padding: 25px 0 5px;
        }
      }
      .blog-carousel{
        padding: 30px 0 ;
        .owl-dots{bottom: 30px;}
      }
      .owl-theme .owl-controls .owl-nav{
        top: auto;
        bottom: calc(100% + 20px);
      }
    }
    
  }
  &.layout-boxed{
    @media(min-width:768px){
      >div{
        padding-left: 24px;
        padding-right: 24px;
      }
    }
    @media(max-width: 767px){
      padding-left: 15px;
      padding-right: 15px;
    }
  }
  &.layout-full{
    >div{
      padding-left: 15px;
      padding-right: 15px;
    }
  }
}
//layout full when have left sidebar home page
#home-left-column+.col-lg-9{
  .blog-container{
    margin: 0 !important;
    >div{
      @media(min-width: 768px){
        padding: 0;
      }
    }
  }
}

.post-item {
   background-color: #fff;
  .post-item-inner {
    .post-image {
      position: relative;
      img {
        width: 100%;
      }
      > a {
        overflow: hidden;
        &:before {
          @media (min-width: 1025px) {
            @include before;
          }
        }
        &:after {
          @media (min-width: 1025px) {
            @include after;
          }
        }
        &:hover {
          @media (min-width: 1025px) {
            &:before,&:after{
              @include before-after-hover;
            }
          }
        }
      }
    }
    .date-author{
      padding-bottom:15px;
      font-size: $body-font-size - 1;
      text-transform: uppercase;
      .date{
        color: $main-color;
        
        margin-right: 10px;
      }
      .author,.post-author{
        color: $body-light-color;
      }
    }
    .post-content{
      padding: 25px;
    }
    .post-title {
      display: block;      
      color: $body-title-color;      
      line-height: 1.3;
      margin: 0;      
      word-break: break-word;   
      font-weight: $font-regular;
      margin-bottom:20px; 
      &:hover {
        color: $main-color;
      }
    }
    .post-info{
      margin-bottom: 20px;
      text-transform: uppercase;
      .post-date{ 
        color: $main-color;
      }
    }
    .post-des{
      margin-bottom: 15px;
    }
    .post-content>p{
      margin-bottom: 35px;
    }
    .post-button {
      position: relative;
      .btn {
        line-height: 26px;
        padding: 4px 20px;
        margin: 0 10px 0 0;
        font-weight: 400;
        @include border-radius(3px,3px,3px,3px);
      }
      .post-comment{
        @include ab(50%, n,n,10px);
        @include translate(0,-50%);
        font-size: $size-h6;
        opacity: 0.7;
        span,i{margin-right: 5px;}
        i{
          font-size: 18px;
        }
      }
    }
    .post-category{
      text-transform: uppercase;
      font-size: $body-font-size - 2;
      .cate-title{
        width: auto;
        padding-left: 25px;
        position: relative;
        color: $body-light-color;
        span{
          color: $body-general-color;
        }
        &:before{
          @include ab(50%,0,n,n);
          @include translate(0,-50%);
          content: '\f068';
          font-family: 'arenafont';
        }
      }
    }
  }  
}
.page-blog {
  h1{
    font-weight: $font-medium;
    padding-bottom: 25px;
  }
  .blog-toolbar {
    overflow: hidden;
    margin: 0px auto 30px;
    .pagination-top {
      line-height: 30px;
      padding: 10px 0;
    }
    .blog-view-mode {
      float: right;
      > span {
        display: inline-block;
        cursor: pointer;
        line-height: 30px;        
        margin: 10px 0 10px 15px;
      }
    }
  }     
  &.layout-full {
    margin: 0px auto;
    padding-left: 15px;    
    padding-right: 15px;       
  } 
  .page-blog-content{
    .post-item .post-item-inner .post-content{
      padding: 35px;
      @media(max-width: 575px){
        padding: 20px;
      }
    }
  } 
  &.blog-v2{
    .sidebar{
      .sb-menu{
        border: 2px solid $main-color;
        .sb-title{
          background-color: $main-color;
          padding: 17px 22px;
        }
        .blog-menu{
          padding: 18px 20px;
          li{
            border-bottom: 1px solid $body-border-color;
            a{
              padding: 10px 0 10px 5px;
            }
            &:nth-last-child(1){
              border: none;
            }
          }
        }
      }
      .sb-title{
        position: relative;
        &:before{
          content: '';
          width: 25%;
          height:1px;
          border: 1px solid $main-color;
          @include ab(n,0,0,n);
        }
      }
    }
  }
  .post-item{
    margin-bottom:25px;
    .post-title{
      margin-bottom: 15px;
    }
    .post-button{
      margin-bottom: 30px;
    }
  }
}
.blog-filter {
  margin-bottom: 20px;
}
// page article
.page-article {  
  .col-xl-8 + {
    .col-xl-4 {
      @media (max-width: 991px) {
        padding-top: 40px;
      }
    }
  }
  .sidebar-style-2{
    .sb-menu{
      border: 2px solid $main-color;
      .sb-title{
        background-color: $main-color;
        padding: 17px 22px;
      }
      .blog-menu{
        padding: 18px 20px;
        li{
          border-bottom: 1px solid $body-border-color;
          a{
            padding: 10px 0 10px 5px;
          }
          &:nth-last-child(1){
            border: none;
          }
        }
      }
    }
    .sb-title{
      position: relative;
      &:before{
        content: '';
        width: 25%;
        height:1px;
        border: 1px solid $main-color;
        @include ab(n,0,0,n);
      }
    }
  }
}
.post  {
  background-color : #fff;
  .post-image {
    text-align: center;
    img {
      width: 100%;
    }
  }
  iframe {
    max-width: 100%;
  }     
  .buttons {
    padding: 0 0 65px;
  }
  .btn-previous,
  .btn-next {    
    font-weight: $font-bold;    
    white-space: normal;
    padding: 5px 0px;       
    text-transform: none;
    font-size: $size-h6 + 2px;
  }  
  .btn-previous {
    margin-right: 10px;
    &:before {
      content: '\e9e9';
      font-family: arenafont;
      font-size: $body-font-size + 2px;
      float: left;
      margin-right: 20px;      
    }
  }  
  .btn-next {
    float: right;
    &:after {
      content: '\e9ec';
      font-family: arenafont;
      font-size: $body-font-size + 2px;
      float: right;
      margin-left: 20px;
    }
  } 
  .post-content {
    padding: 32px;
    
    .post-title {
      font-weight: $font-medium;
      font-size: $size-h3;
    }
    .post-info {
      margin: 0 0 25px;
      padding: 18px 0;  
  
    ul {
      font-size: $body-font-size - 2px;    
      padding: 0;    
      
      text-transform: uppercase;  
      li {
        display: inline-block;
        position: relative;
        padding: 0;   
        margin: 0 12px 0 0px;    
     
    
        .post-date{
          color: $main-color;
        }
      }
    }
    }
    .post-des {
      p {
        margin: 0 0 40px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    @media(max-width: 479px){
      padding: 30px 20px;
    }
  }
  .tag-share{
    padding: 0 32px;
    .post-tag{
      display:inline-block;
      li{
        a {                       
          padding: 1px 15px;
          margin: 0px 8px 8px 0;                               
          display: inline-block;                
          line-height: 1.8;               
          border: 1px solid $body-border-color;
          background-color : #212121;
          color: #fff;
          @include border-radius(3px,3px,3px,3px);
          &:hover {
            background: $button-hover-btn1;           
            border-color: $button-hover-btn1;
            color: $button-hover-btn1-txt;
          }          
        }
      }
    }
    .share-links {
      float: right;
      li{
        margin: 0;
      }
      @media(max-width:  575px){
        float: none;
      }
    }
    @media(max-width: 479px){
      padding: 0 20px;
    }
  }
}
.related-article-wrapper{
  padding: 20px 0;
  .related-heading{
    padding: 20px 0;
    margin: 20px 0;
    font-size: $size-h3;
    .highlight{
      font-weight: $font-light;
    }
  }
  .related-article-inner{
    .owl-nav{
      bottom: calc(100% + 40px);
    }
      .related-article{
        display: table;
        align-items: center;
        .media-body{
          padding: 15px 0px 15px 30px;
          width: 50%;
          display:table-cell;
          vertical-align:middle;
          background-color: #fff;
          .date-and-blog{
            margin-bottom: 15px;
            text-transform: uppercase;
            .post-date{
              padding-right: 10px;
              color: $main-color;
            }
            .blog-title{
              a{color: $body-light-color;}
            }
          }
          .post-title{
            font-size: $size-h5;
            margin-bottom: 18px;
            line-height: 26px;
            font-weight: $font-regular;
          }
          .post-view{
            color: $body-light-color;
            i{
              margin-right: 5px;
              font-size: $size-h5;
            }
          }
        }
        &>a{  
          width: 40%;
          height: 100%;
          overflow:hidden;
          display:table-cell;
          vertical-align:middle;
          margin:0;
          img{
            transform: scale(2);
          }
        }
      }
    
  }
}
#comment_form {
  padding-top: 15px;
  h3 {      
    font-weight: 400;        
    line-height: 32px;
    padding: 35px 0;     
    position: relative;
    font-size: $size-h5;
    font-weight: $font-medium;
    @media (max-width: 767px) {
      padding: 25px;
    }
  }
  .input-label{
    font-size: $body-font-size;
    font-weight: $font-regular;
    margin:12px 0;
    span{color: red;}
  } 
  .control-wrapper {
    margin-bottom: 12px;
    input {
      width: 100%;             
      height: 40px;
      padding: 8px 15px;    
      margin: 0;
    }
    textarea {
      margin: 0px;
      width: 100%; 
      max-width: 100%;      
      min-height: 180px;
      resize: none;
    }    
    &:last-child {
      padding-top: 0;
    }    
  }
  > .btn {
    margin: 34px 0 0;
    padding: 5px 30px;
    @include border-radius(3px,3px,3px,3px);
  }
}
.post-author-info {
  padding: 0 32px;
  .author-heading{
    font-size: $body-font-size + 1;
    font-weight : $font-medium;
    padding: 15px 0;
    text-transform: uppercase;
    border-bottom: 1px solid $body-border-color;
  }
 
  .media {
    display: table;
    width: 100%;
    padding: 35px 0 50px;
    border-bottom: 1px solid $body-border-color;
    .image {
      display: table-cell;
      vertical-align: middle;
      position: relative;     
      width: 80px;
      img{
        width: 80px;
        height: 80px;
        @include border-radius-circle;
      }
    }
    .text {
      padding: 0 0 0 30px;
      display: table-cell;
      vertical-align: middle;
      @media (max-width: 479px) {
        padding-left: 20px;
      }
      .author {
        display: block;
        color: $body-title-color;
        font-size: $size-h5;
        margin-bottom: 7px;
      }
      .author-title{
        margin-bottom: 18px;
        color: $body-light-color;
        font-size: $body-font-size - 2;
        display: block;
      }
      .author-description{
        line-height: 24px;
        font-size: $body-font-size + 1;
      }
    }
  }
  @media(max-width: 479px){
    padding: 0 20px
  }
}
.prev-next-article{
  padding: 25px 32px;
  .next-article{
    float: right;
  }
}
.grid-comments {
    h2{
      font-size: $size-h3;
      text-transform: uppercase;
      margin: 20px 0;
      padding: 20px 0;
      .highlight{
        font-weight: $font-light;
      }
    }
  .comments {
    list-style: none;
    @media (max-width: 767px) {
      margin: 25px 0;
    }
    .comment {
      margin: 0 0 20px;
      padding: 30px 32px 20px;
      background-color: #fff;
      &:last-child {
        margin-bottom: 0;
        border-bottom: none;
      }
      @media(max-width: 479px){
        padding: 20px ;
      }
    }
    .load-comment {
      display: table;
      width: 100%;
      .comment-avatar {
        display: table-cell;
        vertical-align: top;
        width: 60px;
        @include border-radius-circle;
        @media (max-width: 479px) {
          width: 450px;
        }
        img {
          @include border-radius-circle;
          width: 100%;
        }
      }
      .comment-text {
        display: table-cell;
        vertical-align: top;
        padding: 0 0 0 35px;
        .author {
          font-weight : $font-medium;
          font-size: $body-font-size + 1px;
        }
        .date {
          font-size: $body-font-size - 2px;
          color: $body-light-color;
        }
        p {
          margin: 25px 0 0;
        }
      }
      @media(max-width: 479px){
        display: block;
        .comment-avatar,.comment-text{
          display: block;
          padding: 0;
          width: 100%;
        }
      }
    }
  }
}
.share-links {
  &.social-sharing {
    .list-inline {
      margin: 0;
      li {
        display: inline-block;
        width: 35px;
        height: 35px;
        padding: 0;
        margin: 5px 3px;  
        > a {
          display: inline-block;
          width: 100%;          
          padding: 0;           
          text-align: center;
          line-height: 33px;
          color: $body-general-color;
          height: 100%;                    
          span {
            display: none;
          }
          i {
            font-size: 16px;
            line-height: 33px;           
          }
          &:hover {
            color: $main-color;
          }
        }
      }
    }
  }
}

/*Portfolio page*/
.button-group{
  margin-bottom: 50px !important;
  button{
    border: none;
    margin: 0 15px 10px 0;
    @include border-radius(3px,3px,3px,3px);
    padding: 3px 10px;
    background-color: #fff;
    @include transition(all 0.35s ease);
    @media(max-width: 575px){
      margin: 0 10px 5px 0;
    }
    &:hover{
      background-color: $main-color;
    }
  }
}
.portfolio-list {   
  .portfolio-item {   
    float: left;
    position: relative;
    overflow: hidden;
    .portfolio-image{
      position: relative;
      display: block;
      &:before{
        content: '';
        width: 0;
        height: 0; 
        @include ab(50%,50%,n,n);
        @include translate(-50%,-50%);
        @include opacity(0);
        @include transition(all 0.35s ease);
        background-color: rgba(0,0,0,.5);
        z-index: 1;
        @media(max-width: 1024px){
          width: 100%;
          height: 100%;
          @include opacity(1);
        }
      }
    }
    .portfolio-title-link{
      @include ab(n,0,0,0);
      padding: 18px 10px;
      display: table;
      width: 100%;
      color: #fff;
      z-index: 2;
      &>div{
        display:inline-block;
        vertical-align: middle;
      }
      .portfolio-title{
        max-width: 60%;
        @include transition (all 0.35s ease);
         transition-delay: 0.35s  ;
         @include translate(0,100px);
         @media(max-width: 1024px){
           transform: none;
         }
      }
      .portfolio-link{
        max-width: 40%; text-align: right;
        a{
          display: inline-block;
          width: 42px;
          height: 42px;
          line-height: 42px;
          text-align: center;
          color: #fff;
          border: 1px solid #fff;
          margin-left: 5px;
          @include transition (all 0.35s ease);
          @include translate(0,100px);
          @media(max-width: 1200px){
            width: 30px;
            height: 30px;
            line-height: 30px;
          }
          @media(max-width: 1024px){
            transform: none;
          }
          &:hover{
            color: $main-color;
            border-color: $main-color;
          }
          &:nth-child(1){
            margin: 0;
            transition-delay: 0.6s
          }
          &:nth-child(2){
            transition-delay: 0.85s;
          }
        }
      }
      @media(max-width: 1199px) and(min-width: 1025px){
        padding: 10px;
      }
    }
    &.width-16 {
      width: 16.666666%;
      @media (max-width: 991px) and (min-width: 480px) {
        width: 50%;
      }
      @media (max-width: 479px) {
        width: 100%;
      }
    }  
    &.width-20 {
      width: 20%;
      @media (max-width: 991px) and (min-width: 480px) {
        width: 50%;
      }
      @media (max-width: 479px) {
        width: 100%;
      }
    } 
    &.width-25 {
      width: 25%;
      @media (max-width: 991px) and (min-width: 480px) {
        width: 50%;
      }
      @media (max-width: 479px) {
        width: 100%;
      }
    } 
    &.width-33 {
      width: 33.333333%;
      @media (max-width: 991px) and (min-width: 480px) {
        width: 50%;
      }
      @media (max-width: 479px) {
        width: 100%;
      }
    } 
    &.width-40 {
      width: 40%;
      @media (max-width: 991px) and (min-width: 480px) {
        width: 50%;
      }
      @media (max-width: 479px) {
        width: 100%;
      }
    }
    &.width-50 {
      width: 50%;
      @media (max-width: 479px) {
        width: 100%;
      }
    } 
    &.width-75 {
      width: 75%;
      @media (max-width: 991px) and (min-width: 480px) {
        width: 50%;
      }
      @media (max-width: 479px) {
        width: 100%;
      }
    }
    &.width-100 {
      width: 100%;
    } 
    &:hover {
      @media (min-width: 1025px) {
        .portfolio-image{
          &:before{
            width: 100%;
            height: 100%;
            @include opacity(1);
          }
        }
        .portfolio-title-link{
          .portfolio-title,.portfolio-link a{
            transform: none;
          }
        }
      }
    }
  }
}

/* Contact page */
.contact-info-wrapper,.contact-form-wrapper{
  margin-bottom:25px;
  &>div{
    padding: 40px 35px;
  }
}
.contact-info{
  height: 100%;
  h3:nth-of-type(1){
    font-size: $size-h5;
    margin-bottom: 35px;
    line-height: 1.1;
  }
  h3:nth-of-type(2){
    font-size: $size-h6 + 1;
    margin-bottom: 30px;
  }
  &>div{
    padding-bottom: 15px;
    i{
      margin-right:12px;
      width: 18px;
      text-align:center;
      display:inline-block;
      color: $body-light-color;
    }
    a{
      color: $main-color;
    }
    &.work-time{
      padding-bottom: 55px;
    }
  }
  .widget-social-icons{
    li {
      padding-right: 7px;
        a{
        width: 37px; height:37px;
        display:block;
        img{
          width: 100%;
          height: 100%;
        }
        
      }
    }
  }
}
.contact-form-inner{
  .title-wrapper h3{
    font-size: $size-h5;
    margin-bottom: 35px;
    padding: 0;
    line-height: 1.1;
  }
  .contact-form {  
    .form-group {
      margin: 0 0 25px;
      label {
        font-weight : $font-medium;
        color: $body-title-color;
        margin-bottom: 10px;
      }
      input,textarea{
        @include border-radius-reset;
      }
    }
    .form-actions {
      padding: 0;
      .btn {
        padding-left: 20px;
        padding-right: 20px;
      }
    }
  }
}

.map-wrapper { 
  @media (max-width: 767px) {
    margin-top: 40px;
  }
}

.product-table {
  margin: 55px auto 0;
}
.product-simple-tab{
  margin: 40px auto 0px; 
  overflow: hidden;
  position: relative;  
  clear: both;
  @media (max-width: 767px) {
    margin-top: 20px;
    padding: 20px 0;
  }
  .big-title {
    text-align: center;
    font-weight : $font-medium;
    font-size: $size-h1;
    font-family: $font-heading;
    padding: 30px 0 10px;
  }
  .nav { 
    border: none;
    margin: 0;        
    position: relative;    
    display: block;    
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;  
    padding-bottom: 8px;      
    li {
      float: none;      
      padding:0;
      border: none;
      display: inline-block;
      text-transform: uppercase;
      a{
        padding:15px 25px;
        background-color: #efefef;
        color: $body-light-color;
        font-size: $body-font-size + 1;
        &:before{
          bottom: auto;
          top: 0;
        }
        &.active{
          font-weight: $font-medium;
          color: #000;
          background-color: $white;
          
        }
      }
    }
  }  
  &.accordion {   
    margin: 25px 0 0;
    border: none;   
    #shopify-product-reviews .spr-form-contact {
      > div {
        width: 100%;
        float: none;
      }
    }
  }
}
.product-col-sku {
  border-top: 1px dashed $body-border-color;
  border-bottom: 1px dashed $body-border-color;
  text-align: center;  
  margin: 50px 0;
  .list-inline {
    padding: 30px 0;      
    @media (max-width: 767px) {
      padding: 25px 0;
    }
  }  
  .list-inline {
    li {
      display: inline-block;
      padding: 0 10px;
      line-height: 27px;
      text-transform: uppercase;
      a,
      #sku {
        color: $body-light-color;
      }
    }
  }
}
.col-md-9 {
  .product-col-sku {
    margin-bottom: 0;
  }
}
.product-tab-listing {
  .tab-row {
    margin: 0 auto;
    padding: 40px 0;
    border-bottom: 1px solid $body-border-color;
    display: table;
    width: 100%;
    table-layout: fixed;
    @media (max-width: 767px) {
      display: block;        
    }
    .tr-title {
      display: table-cell;
      vertical-align: top;
      width: 200px;
      padding: 0 3% 0 0;
      color: $body-title-color;
      font-size: $size-h5;
      text-transform: uppercase;          
      letter-spacing: 2px;  
      line-height: 1.6;   
      word-break: break-all;
      @media (max-width: 767px) {
        display: block;
        width: 100%;
        margin-bottom: 20px;
      }
    }
    .tr-content {
      display: table-cell;
      vertical-align: top;
      h5 {
        margin: 0 0 20px;
      }
      ul, ol {
        margin-bottom: 20px;
        li {
          padding: 2px 0;
        }
      }
      @media (max-width: 767px) {
        display: block;        
      }
    }    
  }
}
/* button theme */
.btn {    
  padding: 9px 30px;
  line-height: 27px; 
  white-space: normal;
  font-size: $body-font-size;     
  @include border-radius(3px,3px,3px,3px);
  @include transition(all 0.35s ease-in-out 0s, font-size 0s);
  &:hover, &:focus, &:active {
    outline: none !important;
    outline-offset: 0 !important;
    @include box-shadow(0 0 0 $white !important);
  }
}
.btn-1 { 
  background: $button-btn1;  
  color: $button-btn1-txt;
  border: 1px solid $button-btn1-border;    
  &:hover, &:focus, &:active {
    background: $button-hover-btn1;  
    color: $button-hover-btn1-txt;
    border-color: $button-hover-btn1-border;    
  }
  &[disabled] {
    background: $button-btn1;  
    color: $button-btn1-txt;
    border-color: $button-btn1-border;
  }
}
.btn-2 { 
  min-width: 100px; 
  background: $button-btn2;  
  color: $button-btn2-txt;
  border: 1px solid $button-btn2-border;  
  &:hover, &:focus, &:active {
    background: $button-hover-btn2;  
    color: $button-hover-btn2-txt;
    border-color: $button-hover-btn2-border;    
  }
  &[disabled] {
    background: $button-btn2;  
    color: $button-btn2-txt;
    border-color: $button-btn2-border;
  }
}
.errors {
  color: $main-color;
}
.alert-error {
  .close {
    color: $main-color;
  }
}
/*Popup Cart*/
#layer-addcart-modal {
  z-index: 99991;    
  .addcart-overlay {
    background: rgba(0, 0, 0, 0.5);   
    height: 100%;
    left: 0;    
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99992;    
  }
  .addcart-modal-close {
  @include border-radius-circle;    
  @include box-shadow(0 0px 0px rgba($black, 0.5));
  @include ab(-25px, n, n, -20px); 
  @include transition(all 0.35s ease 0s);                    
  @include width-btn-1;          
  display: block;
  cursor: pointer;  
  text-align: center;
  z-index: 9999;     
  padding: 0;
  margin: 0;  
  @media (max-width: 767px) {
      top: 5%;
      right: 5%;  
      width: 35px;
      height: 35px;   
      line-height: 35px;
      position: fixed;  
    }
  i {
    @include close-btn;   
        color: $white;
        @media (max-width: 767px) {
          line-height: 35px;
        }
  }
  &:hover {
    background: $button-hover-btn1;
    i {     
      color: $button-hover-btn1-txt;
    }
  }
  }
  .addcart-modal-box {
    @include ab(15%, n, n, n);
    @include box-shadow(0 0 7px 5px rgba(0, 0, 0, 0.3));
    padding: 30px;
    margin: 0 calc((100% - 680px) / 2);
    width: 680px;
    height: auto;
    max-height: 90%;    
    z-index: 99999;
    background: $white;    
    @media (max-width: 767px) {
      top: 5%;
      width: 90%;
      margin: 0 5%;
      overflow-y: auto;
    }
    @media (max-width: 479px) {
      padding: 20px;
    }
    p {
      margin: 0 5px 0 0;      
      color: inherit;     
      line-height: 30px;
      display: inline-block; 
      @media (max-width: 767px) {
        margin-bottom: 20px;
      }
      a {
        color: inherit;
        &:hover {
          color: inherit;
          text-decoration: underline;
        }
      }      
    }
    .am-close {
      display: inline-block;
      cursor: pointer;     
      i {
        margin-right: 5px;
        display: inline-block;
        &:before {
          @include close-btn;
          color: inherit; 
          line-height: 25px; 
        }
        &:hover {
          &:before {
            color: inherit;
          }
        }
      }
    }
  }
  .addcart-modal-content {    
    .note {
      color: $popup-letter-subtitle;
      line-height: 20px;
      margin: 0 0 30px;
      @media (max-width: 767px) {
        padding-right: 20px;
        margin-bottom: 20px;
      }
    }
  }  
  .addcart-modal-product {
    overflow: hidden;
    padding: 0 0 20px;
    .addcart-modal-image {
      float: left;
      max-width: 100px;
      margin: 0 30px 0 0;
      @media (max-width: 479px) {
        margin-right: 20px;
      }
    }
    .addcart-modal-info {
      margin-left: 130px;
      @media (max-width: 479px) {
        margin-left: 120px;
      }
      strong {
          margin: 0 10px 0 0;
        }
      > div {
        margin: 0 0 8px;
      }
      .addcart-modal-title {
        font-weight : $font-medium;
            color: $body-title-product;
            font-size: $body-font-size + 2px;
      }
      .addcart-modal-qty {
      strong {
        font-weight: normal;
      }
    }
    .addcart-modal-price {                       
      font-size: 18px;
      strong {
        color: $body-general-color;
        font-weight: 400;
      }
    }
    } 
  }
  .addcart-modal-action {
    @include clearfix();
    padding: 20px 0 10px;
    border-top: 1px solid $body-border-color;
    .addcart-modal-number {
      font-size: $body-font-size + 2px;
      margin: 0 0 10px;
      float: left;
      @media (min-width: 560px) {
        margin-top: 10px;
      }
      @media (max-width: 559px) {
        margin-bottom: 5px;
      }      
    }
    .addcart-modal-subtotal {               
        font-size: $size-h2;
        float: right;
        margin: 0 0 10px;            
        align-items: center;
        -webkit-align-items: center;      
        @include flexbox();
        @media (max-width: 559px) {
          margin-bottom: 5px;
          clear: both;
          float: left;
        }     
        strong {
          margin: 0 20px 0 0;
          color: $body-general-color;
          font-weight: 400;
          font-size: $size-h4;
        }
    }
    .wrap-progress {
      padding: 20px 0 0;
      clear: both;      
    }
    .addcart-modal-button {
        overflow: hidden;
        clear: both;        
        .addcart-modal-continue {
          float: left;          
          border: none;
          margin: 10px 0 0;    
          @media (max-width: 570px) {
            .btn {
              min-width: 205px;    
            } 
          }          
        }
        .addcart-modal-checkout {
          float: right; 
          margin: 10px 0 0;    
          @media (max-width: 530px) {
            clear: both;
            float: left;
          }
        }
    }
  }
}
#product-action.sold-out {
  font-size: 24px;
}
.hide-noti {
  .notifyjs-corner {
    display: none !important;
  }
}
.notifyjs-corner {
  position: fixed; 
  width: 350px;
  z-index: 9999 !important;  
  overflow: hidden;
  @media (max-width: 991px) {
    bottom: 52px !important;
  }  
  @media (max-width: 767px) {    
    width: 300px;
  }
  {% if settings.noti_slider_position == 'left' %} 
    left: 0px;
  {% else %}
    right: 0px;
  {% endif %}  
  .notifyjs-wrapper {
    width: auto !important;
  }
  .notifyjs-container {
    width: auto !important;
    > div {
      width: 100% !important;     
      @include border-radius(5px, 5px, 5px, 5px);
      @include box-shadow(0 0 5px 0 #c6c6c6);
      &.show-mobile-false {
        @media (max-width: 767px) {
          display: none !important;
        }       
      }
      .close-noti {
        @include ab(0, n, n, 0);
        @include border-radius(5px, 5px, 5px, 5px);
        @include box-shadow(0 0 1px 0 $body-border-color);
        width: 25px;
        height: 25px;
        line-height: 23px;        
        z-index: 2;
        cursor: pointer;
        i {
          font-size: 12px;
        }
        &:hover {
          color: $main-color;
        }
      }
      .noti-product-item {
        display: table;
        width: 100%;
        table-layout: fixed;
        vertical-align: middle;
        .content-img {
          display: table-cell;
          vertical-align: middle;
          width: 30%;
            padding: 0;
            text-align: center;
            img {
              width: 100%;
              @include border-radius(5px, 0, 0, 5px);
            }
        }
        .notify-detail {
          display: table-cell;
          vertical-align: middle;
          text-align: left;
          width: 70%;
          padding: 10px;
        }
        .noti-title,
        .country_text {
          margin: 0 0 6px;
          font-weight: 400;
          font-size: $body-font-size - 3px;
        }
        .product-name {
          height: auto !important;
            text-align: left !important;          
            padding: 0 !important;
            font-size: $body-font-size - 1px;
            margin: 0 0 5px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            a {
              font-size: $body-font-size - 1px;  
              color: $body-title-product;  
              font-weight : $font-medium;        
            }
        }
        .product-price {
          font-size: $body-font-size;  
          overflow: hidden;
          margin: 0 0 2px;
        }
        .price,
        .price-sale {
          font-size: $body-font-size;  
        }
        .price-compare {
          font-size: $body-font-size - 3px;
        }
        .noti-time,
        .sell-time {
          color: $body-light-color;
          font-weight: 400;
          font-size: $body-font-size - 4px;
        }
      }
    }
  }
}
.popup-sell-people {
	@include border-radius(5px, 5px, 5px, 5px);
    @include box-shadow(0 0 5px 0 #c6c6c6);
    width: 350px;
    display: table;
    vertical-align: middle;
    position: fixed;
    z-index: 9999;
    display: none;
    @media (max-width: 370px) {
    	width: calc(100% - 20px);    	
    }
	&.show {
		display: block;
	}
	&.bottom-left {
		bottom:10px;
		left:10px;
		@media (max-width: 991px) {
		    bottom: 64px;
		} 
	}
	&.bottom-right {
		bottom: 10px;
		right: 10px;
		@media (max-width: 991px) {
		    bottom: 64px;
		} 
	}
	&.top-left {
		top:10px;
		left:10px;
	}
	&.top-right {
		top: 10px;
		right: 10px;
	}
	.img-user {
		width: 80px;		
		display: table-cell;
		vertical-align: middle;
		img {
			width: 100%;
			@include border-radius(5px, 0, 0, 5px);
		}
	}	
	.text-detail {
		display: table-cell;
		vertical-align: middle;
		padding: 10px 15px;
		.sell-text {
			margin: 0;
			line-height: 20px;
			font-size: $body-font-size;
			font-weight: normal;
		}
	}
}
.add-to-cart-sticky {
  position: fixed;
  z-index: 9999;
  left: 0;
  bottom: 0;
  padding: 10px 0px 0;
  width: 100%;
  display: none;
  background: $body-second-color;			
  @include box-shadow(0 0 10px $body-border-color);
  &.show {
    display: block;
  }
  @media (min-width: 992px) {
    display: none !important;		
  }	
	.product-action {
		@include flexbox();
		justify-content: center;
		align-self: center;
		align-items: center;
		width: 100%;
	}
	.btn {
		padding-top: 5px;
		padding-bottom: 5px;
		line-height: 28px;
		margin-bottom: 10px;
		@media (max-width: 359px) {
			padding-left: 20px;
			padding-right: 20px;
		}
	}
	select {
		height: 40px;
		line-height: 40px;
		background-color: $body-background-color;
		margin: 0 15px 10px 0;				
		color: $body-title-color;
		@media (max-width: 359px) {
			margin-right: 10px;
		}
	}
}
#hi-eu-opt-in {
  @media (max-width: 1199px) and (min-width: 992px) {
    display: table;
    table-layout: fixed;
  }
  @media (max-width: 1024px) {
    display: none;    
    table-layout: fixed;
  }
  &.active {
    z-index: 99;
    position: fixed;
    background-color: rgba($eu-bg, 0.7);
    bottom: 0;
    width: 100%;
    bottom: 0;
    color: $eu-text-color;
    padding-top: 15px;
    padding-bottom: 15px;
    @media (min-width: 1400px) {
      padding-left: 60px;
      padding-right: 60px;
    }
    @media (max-width: 1399px) {
      padding-left: calc(5%);
      padding-right: calc(5%);
    }
  }
  #hi-cookie-box {    
    width: 100%;
    max-width: 1200px;
    margin: 0px auto;
    overflow: hidden;    
    p {
      color: $eu-text-color;
    }
    @media (min-width: 1200px) {
      text-align: right;
    }
  }
  .hi-cookie-head,
  .hi-cookie-intro {
    margin: 0px;
    width: 55%;
    padding: 0 15px;
    float: left;    
    clear: both;
    text-align: left;
    @media (max-width: 1199px) {
      width: auto; display: table-cell; float: none;
    }
    @media (max-width: 767px){
      width: 100%; display: block; padding: 0;
    }
    .read-more {
      display: none;
    }
    br {
      display: none;
    }
  }  
  .hi-cookie-happy {
    display: inline-block;
    padding: 0 15px;
    margin: 0;
    width: 18%;    
    text-align: left;
    @media (max-width: 1199px) {
      width: auto; display: table-cell; float: none;
      margin: 0;
    }
    @media (max-width: 767px){
      width: 100%; display: block; padding: 0;
    }
  }
  .hi-cookie-btn {
    display: inline-block;
    width: auto;
    margin: 3px 5px 0;                
    cursor: pointer;  
    @media (max-width: 1199px) {
      margin-top: 5px;
    }      

    &.disagree {      
      padding: 5px 25px;
      background: $au-disagree;
      @include border-radius-50;      
      @media (max-width: 767px) {
        padding-left: 20px;
        padding-right: 20px;
      }
      &:hover {
        background: $au-disagree-hover;
      }
    }
    &.agree {      
      padding: 5px 25px;
      background: $au-accept;
      @include border-radius-50; 
      @media (max-width: 767px) {
        padding-left: 20px;
        padding-right: 20px;
      }
      &:hover {
        background: $au-accept-hover;
      }
    }
  }  
}

/*Page Password*/
.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: $white;
  display: table;
  height: 100%;
  width: 100%;
  *, input, *::before, *::after {
    box-sizing: border-box;
  }
  @media (max-width: 767px) {
    background-size: inherit;
  }
}
.password-page__wrapper {
  a {
    color: inherit;
  }
  hr {
    border-color: inherit;
    margin: 0 auto;
    max-width: 60px;
    padding: 15px 0;
  }
  .share-links.social-sharing {
    margin: 0px auto;  
    > span {
      display: inline-block;
      padding: 0 15px 0 0;
    }
    ul.list-inline {
      padding: 0;
      margin: 0px auto;    
    }    
    &.is-clean {
      a {
        background: #ffffff none repeat scroll 0 0;
        color: #333333;
        &:hover {
          background: #ececec none repeat scroll 0 0;
        }
      }        
    }
  }
}
.template-password .share-links.social-sharing {
  font-family: $font-standard;
  * {
    box-sizing: border-box;
  }  
  li {
    a {
      color: inherit;
      @media (max-width: 479px) { 
        font-size: 12px;
      }      
    }
  }
  &.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;
        }
      }
    }
  }
}
.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;
    }
  }
}
.password-page__header__inner { 
  padding: 15px 30px;
  @media (max-width: 767px) {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.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;
  vertical-align: middle;
}
.password-page__hero {  
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0.83em auto;
  color: inherit;
  font-size: 4em;
  text-rendering: optimizelegibility;    
  @media (max-width: 767px) {
    font-size: 2.625em;
  }
}
.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;
  .h4 {
    font-size: $body-font-size;    
    margin: 1em auto;
    color: #fff;    
  }
}
.password-page__message, 
.password-page__login-form {
  padding: 30px 15px;
  text-align: center;
}
@media screen and (min-width: 480px) {
  .password-page__login-form, 
  .password-page__signup-form {
    padding: 0 15px;
  }
}
.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;  
  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;
}
#LoginModal {
  input.input-group-field {
    color: #333;    
    @include placeholder {
      color: #333;   
    }
  }
}
.password-page__social-sharing {
  margin-top: 30px;
  .h4 {
    color: inherit;
    font-size: $body-font-size;
  }
}
.password-login {
  text-align: right;
}
.password-login, 
.admin-login {
  margin-top: 15px;    
  a {
    color: inherit;
    &:hover {
      color: inherit;
      color: $main-color;
    }
  }
}
.password-login {
  font-family: $font-standard;
  font-size: 0.875em;
  line-height: 14px;
}
.password-page__footer_inner {  
  font-size: 95%;
  line-height: 24px;
  padding: 30px;
  vertical-align: bottom;
  color: inherit;
}
.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"] {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    -moz-user-select: none;    
    @include border-radius(0, 2px, 2px, 0);
    color: $button-btn1-txt;
    background: $button-btn1;
    border: none;    
    cursor: pointer;
    display: inline-block;    
    font-size: $body-font-size;
    font-weight: $font-medium;
    font-style: normal; 
    line-height: 1.42;
    height: 37px;
    margin: 0;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    &:hover,
    &:focus {
      color: $button-hover-btn1-txt;
      background: $button-hover-btn1;
    }
  }
}
.input-group-btn {
  padding: 0;  
  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: url({{'password-page-background.jpg' | asset_url }});
  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: url({{'password-page-background.jpg' | asset_url }}) ;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  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: inherit;  
}
.mfp-inline-holder, 
.mfp-ajax-holder {
  .mfp-content {
    cursor: auto;
    width: 100%;
  }  
}
.mfp-ajax-cur {
  cursor: progress;
}
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;
  width: 44px;
  opacity: 0.65;
  padding: 0 0 18px 10px;  
  text-align: center;
  text-decoration: none;    
  @include ab(0, n, n, 0);
  &:hover,
  &:focus {
    opacity: 1;
  }
  &:active {
    top: 1px;
  }
}
.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;
  @media (max-width: 767px) {
    margin: 0px;
  }
}
#fsb_background {
  z-index: 99 !important;
}
.shopify-section {
  margin: 0px auto;
  clear: both;  
  display: block;  
  width: 100%;
  @include clearfix();
}
.crossed-out {
  @include border-radius-50;
}
/*Fix CSS Only Safari*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome,
  .cart-dd,
  .header-content .header-icons > div.searchbox .dropdown-menu,
  .header-content .header-main .table-row .header-menu-wrapper .header-dropdown-menu,
  .dropdown-menu > li.dropdown-submenu > .dropdown-menu,
  .horizontal-menu .navigation .navbar .navbar-collapse .main-nav > li.dropdown > .dropdown-menu,
  .cata-toolbar .show-by .dropdown-menu,
  .cata-toolbar .sort-by #sort_by_box {
    @include transition(opacity 0.35s ease);
  }   
}
.lazy-loading-img {
  .lazyload {
    font-size: 0;
  }
  #home-slideshow .swiper-slide.lazyload {
    background-image: url({{'loading.gif' | asset_url }}) !important;     
    width: 100% !important;
    background-size: 100px auto !important;
    @include opacity(1 !important);
    .swiper-content {
      @include opacity(0);
    }
  }  
}

.boxed {
  @media (min-width: 1200px) {
    max-width: 1170px;
    margin: 0 auto;       
    .no-padding{
      margin-left: calc(calc((100vw - 1170px) / 2) * (-1));
      margin-right: calc(calc((100vw - 1170px) / 2) * (-1));
    }
  } 
  @media (max-width: 1199px) and (min-width: 992px) {
    max-width: 980px;
    margin: 0 auto;
    .no-padding{
      margin-left: calc(calc((100vw - 969px) / 2) * (-1));
      margin-right: calc(calc((100vw - 969px) / 2) * (-1));
    }
  }
  @media (max-width: 991px) and (min-width: 768px) {
    max-width: 760px; 
    margin: 0px auto;  
    .no-padding{
      margin-left: calc(calc((100vw - 730px) / 2) * (-1));
      margin-right: calc(calc((100vw - 730px) / 2) * (-1));
    }  
  }
}
.layout-boxed .boxed{
  @media(max-width: 767px){
    padding-left:15px;
    padding-right: 15px;
  }
}
@media(max-width: 991px){
  .header-container>.boxed{
    padding: 0 15px;
  }
}

#page-body.boxed{
 
  @media(max-width: 991px){
    padding-left:15px;
    padding-right: 15px;
  
  }
  @media(max-width: 767px){
    .header-content,#footer-content{
      margin-left: -15px;
      margin-right: -15px;
    }
  }
}
.templateIndex{
  #page-body.boxed{
 
    @media(max-width: 767px){
      padding-left:0;
      padding-right: 0;
      .header-content,#footer-content{
        margin: 0;
      }
    }
  }
}
.container{
  .no-padding{
    margin-left: calc(calc((100vw - 1187px) / 2) * (-1));
    margin-right: calc(calc((100vw - 1187px) / 2) * (-1));
  }
  @media(max-width:1200px){
      .no-padding{
          margin-left: calc(calc((100vw - 970px) / 2) * (-1));
          margin-right: calc(calc((100vw - 970px) / 2) * (-1));
      }
  }
  @media(max-width:1024px){
      .no-padding{
          margin-left: calc(calc((100vw - 950px) / 2) * (-1));
          margin-right: calc(calc((100vw - 950px) / 2) * (-1));
      }
  }
  @media(max-width:991px){
      .no-padding{
          margin-left:0;
          margin-right:0;
      }
  }
}
.hide-filter-price .price {
  @media (min-width: 992px) {
    display: none;    
  }  
} 

@media (max-width: 1024px) {
  .price-range-slider {
    display: none;
  } 
}
@media (max-width: 991px) {
  .header-main {
    .m-cart-icon {
      @include ab(50%, n, n, 0px);
      @include translate(0, -50%);
      min-width: 40px;
      text-align: center;
      &.waiting {
        background: transparent !important;       
      }
      .mobile-basket {
        line-height: 40px;
        max-height: 40px;
        position: relative;
        display: block;
        color: $body-general-color;
        > .demo-icon {
          font-size: $font-icon;
          color: $body-general-color;
          margin: 0 10px 0 0;
        }
        > img {
          max-width: 20px;
        }
        .number {
          position: relative;         
          font-weight : $font-medium;
        }
        .n-item {
          @include icons-number;  
          top: auto;                            
          right: auto;
          bottom: 15px;
          left: -25px;
        }
      }
    }
  }  
  .container {
    .navbar-responsive-menu { 
      left: 0;
    }
  }
  .navbar-responsive-menu {    
    border: none;
    margin: 0;
    padding: 0 !important;
    min-height: 50px;
    width: 50px;
    height: 50px;
    cursor: pointer; 
    z-index: 2;       
    @include ab(50%, 0%, n, n);
    @include translate(0%, -50%);
    .responsive-menu {        
      width: 100%;      
      height: 50px;
      line-height: 50px;
      z-index: 9;     
      cursor: pointer;        
      font-size: 0;
      &:before {
        content: '\f008';
        font-family: arenafont;
        color: $body-general-color;
        font-size: $font-icon;
      }
    }    
    .bar {
      display: none;
    }    
  } 
  .cata-toolbar > .visible-xs {
    margin-left: 300px;
    margin-top: -36px;
    float: left; 
    position: relative;
    z-index: 1;
  }          
  .product-image-inner > .col-md-10 { width: 100%; max-width: 100%; }   
  .cata-toolbar >.visible-xs{
    display: inline-block !important;
    margin-bottom: 5px;
  }  
  .sb-wrapper {
    margin: 0;
    background: none;
    border: none;
    height: 100%;
    overflow: auto;
    .sb-widget {
      margin: 0px auto;
    }
  }    
  .header-menu-wrapper {
    display: none;
  }    
  table {
    thead th {
      padding: 10px 15px;
      &.price {
        padding: 10px 15px;
      }
    }
    td {
      padding: 15px;
    }
  }
  .cart-table table th {
    padding: 10px 15px;
  }   
  .footer-col {
    &:nth-child(2n + 1) {
      clear: both;
    }
  }
  .left-column-container {
    #related_item {
      margin-top: 40px;
    }
  }
}
@media (max-width: 479px) {
  .header-main .m-cart-icon .mobile-basket {
    > .demo-icon {
      margin: 0;
    }
    .number { 
      position: static;
      .money {
        display: none;
      }
    }
    .n-item {
      right:-3px;
      top: 0px;
      left: auto;
    }
  }
}
.swatch {
  .tooltip {
    background: $body-second-color;
    color: $body-general-color;
    &:after {
      border-top: solid $body-second-color 5px;
    }
  }
}
.d-visibility {
  visibility: hidden;
}
.category-mode-true {
  .bc-wrapper .tab-wrapper .tab-content .product-wrapper .product-content .product-price {
  	width: 100%;
  	position: static;
  }
  .product-wrapper {
    .product-content .price-cart-wrapper {
      padding-right: 0;
      min-height: 26px;
    }
    .product-add-cart {
      display: none !important;
    }
  }
  .top-cart-holder,
  .qs-quantity-product,
  .qs-product-button,
  .wrap-quantity-add-cart,.qty-add-cart,.detail-deal,.product-add-cart,#add-to-cart,.shopify-payment-button,.order-form .button{
    display: none !important;
  }  
}

.bold-bundles-widget-item__wrapper {
  .bold-bundles-widget-item__thumbnail {
    margin: 0 0 10px;
  }
  .bold-bundles-widget-item__title {
    font-size: $body-font-size;
    line-height: 1.4;
    margin: 0 0 10px;
  }
  .bold-bundles-widget-item__variants {
    height: 40px;
    line-height: 38px;
    margin: 0 0 10px;
  }  
}
.bold-bundles-widget__footer {
  .bold-bundles-widget__button--top {
    border: none;
  }
}
.cc-window.cc-floating {
  @media (max-width: 767px) {
    padding: 5%;
  }
}
.cc-window.cc-bottom {
  @media (max-width: 991px) {
    bottom: 22px;
  } 
  .cc-btn{
    @include border-radius(3px,3px,3px,3px);
  }
}
#discount-modal {
  display: none;
  z-index: 99991; 
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  .underlay {
    background: rgba(0, 0, 0, 0.5);   
    height: 100%;
    left: 0;    
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99992;    
  }
  .wrap-modal {
    background: $body-background-color;
    z-index: 99999;
    padding: 0px;        
    margin: 0 calc((100% - 700px) / 2);
    width: 700px;
    @include ab(50%, 0, n, n);
    @include translate(0, -50%);  
    @media (max-width: 767px) {
      top: 5%;
      width: 90%;
      margin: 0 5%;
      max-height: 90%;
      overflow-y: auto;
      @include translate(0, 0);
    }
    > a {
      @include border-radius-circle;    
      @include box-shadow(0 0px 0px rgba($black, 0.5));
      @include ab(-25px, n, n, -20px); 
      @include transition(all 0.35s ease 0s);                    
      @include width-btn-1; 
      z-index: 999991;    
      @media (max-width: 767px) {
        top: 0;
        right: 0;
      }
      i {
        &:before {
          @include close-btn;   
          color: $white;                             
        } 
      }
      &:hover {
        background: $button-hover-btn1;
        &:before {
          i {
            &:before {
              color: $button-hover-btn1-txt;
            }
          }
        }
      }
    }
  }
  .modal-body {
    padding: 0;
    display: table;
    width: 100%;
    vertical-align: middle;
    min-height: 300px;    
    table-layout: fixed;
    @media (max-width: 767px) {
      display: block;
      max-height: 100%;
      overflow-y: auto;
    }
    > div {
      display: table-cell;
      vertical-align: middle;
      width: 50%;      
      @media (max-width: 767px) {
        width: 100%;
        display: block;
      }
    }
    .image {
      @media (max-width: 767px) {
        padding: 0 0 20px;
        text-align: center;
      }
      
    }
    .content {
      padding: 0 15px;
      text-align: center;
      max-width: 300px;
      margin: 0px auto;
      @media (max-width: 767px) {
        padding-bottom: 25px;
      }
      h5 {
        text-transform: uppercase;
        font-weight : $font-medium;
        margin: 0 auto;
      }
      p {
        line-height: 18px;
        margin: 5px 0 13px;
      }
      .btn {
        text-transform: uppercase;
        font-size: $body-font-size - 1px;
        padding: 7px 25px;
        line-height: 28px;        
      }
    }
  }
}
*:not(img) {  
  &.waiting {
    height: 0;
    position: relative;
    padding-bottom: 70%;
    background-color: transparent;
    &.disable-load,
    &.lazyloaded {
      height: auto;
      padding: 0;
      background-color: transparent;
    }
    img {
      position: absolute;
      left: 0; top: 0;
      width: 100%;
      opacity: 0;
      transition: all 0.3s;       
      &.lazyloaded,
      &.disable-load {
        position:relative;
        height: auto;
        opacity: 1;
      }
    }
  }
}
.lazyloaded {
  img {
    &.lazyloaded {
      width: auto;
    }
  }
}
.owl-carousel{
  .waiting{
    padding-bottom: 0;
  }
}


/* page about us */
.page-about-us{
  margin: 0;
  @media(max-width: 767px){
    .ab-section>.boxed{
      padding-left: 15px;
      padding-right: 15px;
    }
  }
}

.text-image{
  padding-top: 50px;
  padding-bottom: 50px;
  .row{
    align-items: center;

    @media(min-width: 768px){
      &>div:nth-child(2n+1){
        padding-right: 70px
      }
      &>div:nth-child(2n){
        padding-right: 30px
      }
    }
    
  }
}
.paragraph-wrapper{
  padding-top: 20px;
  padding-bottom: 20px;
  .heading,.p-heading{
    font-weight: $font-medium;
    display: block;
  }
  .heading{
    font-size: $size-h4;
    padding-bottom: 20px;
  }
  .p-heading{
    font-size: $size-h5;
    padding: 15px 0;
  }
  .paragraph-inner{
    margin-bottom: 15px;
  }
  p{
    font-weight: $font-regular;
    font-size: $size-h6 + 1;
    line-height: 24px;
  }
}
.image-wrapper{
  text-align : center;
}

.team-member-wrapper{
  padding-top: 30px;
  padding-bottom: 30px;
  .heading{
    font-weight: $font-medium;
    text-transform: uppercase;
    margin: 30px 0;
    display: block;
    .highlight{
      font-weight: $font-light;
    }
  }
  .member{
    text-align: center;
    padding: 20px 35px ;
    box-shadow:0 0 4px 2px #f2f2f2 ;
    margin-bottom: 30px;
    @include transition (all 0.4s ease);
    .member-image{
      padding: 20px 0 25px;
      img{@include border-radius-circle;}
    }
    .member-info{
      margin-bottom: 15px;
      .member-name{
        font-size: $body-font-size + 1;
        text-transform: uppercase;
        font-weight: $font-medium;
        margin-bottom: 10px;
      }
      .member-position{
        font-weight: $font-regular;
        font-size: $body-font-size;
        color: $body-light-color;
        margin-bottom: 20px;
      }
      .member-opinion{
        line-height:20px;
        margin: 0;
      }
    }
    .member-social{
      @include translate(0,30px);
      @include transition (all 0.4s ease);
      @include opacity(0);
      visibility: hidden;
      li a{
        display: block;
        padding: 0 8px;
        font-size: 16px ;
        @include opacity(0.4);
        &:hover{
          @include opacity(1);
        }
      }
    }
    &:hover{
      box-shadow: 0 0 8px 6px #ddd ;
      .member-social{
        transform: none;
        @include opacity(1);
        visibility: visible;
      }
    }
  }
}
.ab-section.testimonial-inner{
  .heading{
    padding: 40px 0 20px;
    font-weight: $font-medium;
    .highlight{
      font-weight: $font-light;
    }
  }
  .client-testimonial{
    max-width: 90%;
    margin: auto;
    padding-bottom: 40px;
    .testimonial-item{
      max-width:991px
    }
    @media(max-width: 575px){
      padding-bottom: 20px;
    }
  }
   .owl-dots{
     bottom: -10PX;
   }
}
.statistics-wrapper{
  padding-top: 40px;
  padding-bottom: 40px;
  .heading{
    padding: 30px 0;
    .highlight{
      font-weight: $font-light;
    }
  }
  .statistic-item{
    padding: 40px 0;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    box-shadow:0 0 4px 2px #f2f2f2;
    @include transition(all 0.35s ease);
    @media(max-width: 991px){
      margin-bottom: 30px;
    }
    @media(max-width: 767px){
      margin-bottom: 15px;
      padding: 30px 0;
    }
    .statistic-text{
      flex:0;
      white-space: nowrap;
      &>*:nth-child(1){
        font-weight: $font-regular;
        margin-bottom: 6px;
      }
      &>*:nth-child(2){
        font-weight: $font-medium;
        font-size: $size-h6;
        
      }
    }
    &:hover{
      box-shadow:0 0 8px 6px #ddd;  
      .statistic-logo{
        -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob;
                animation-name: hvr-icon-bob-float, hvr-icon-bob;
                -webkit-animation-duration: .3s, .75s;
                animation-duration: .3s, 0.75s;
                -webkit-animation-delay: 0s, .3s;
                animation-delay: 0s, .3s;
                -webkit-animation-timing-function: ease-out, ease-in-out;
                animation-timing-function: ease-out, ease-in-out;
                -webkit-animation-iteration-count: 1, infinite;
                animation-iteration-count: 1, infinite;
                -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
                -webkit-animation-direction: normal, alternate;
                animation-direction: normal, alternate;
      }
    }
  }
  @media(max-width: 767px){
    padding: 20px 0;
  }
}
.logo-wrapper{
  padding: 40px 0 20px;
}

//preview panel from here
#preview-panel{
  z-index: 9;
  position: fixed;
  top: 50%;
  right: 0;
  width: 205px;
  @include transition(transform 0.5s ease);
  @include translate(100%,-50%);
  .pp-toggle{
    @include ab(10%,n,n,100%);
    background-color : #fff;
    text-align: center;
    padding: 3px;
    font-size: $font-small-icon;
    border: 1px solid $body-border-color;
    @include border-radius(3px,0,0,3px);
    border-right:transparent;
    margin-right:-1px;
    cursor: pointer;
  }
  #pp-content{
    background-color: #fff;
    text-align: center;
  
    border: 1px solid $body-border-color;
    @media(max-width: 480px){
        max-height: 400px;
        overflow-y: auto;
    }
  }
  .style-main-title{
    text-transform: uppercase;
    padding: 10px 5px;
    border-bottom: 1px solid $body-border-color;
    background-color: $body-background-color;
  }
  .pp-box{
    padding-bottom: 15px;
    border-bottom:1px solid $body-border-color;
    &:nth-last-child(1){
      border: none;
    }
    .box-heading{
      padding: 10px;
    }
    .box-menu-wrapper{
      position: relative;
      display: inline-block;
      label{
        background: $body-background-color;
        padding: 3px 10px;
        min-width: 150px;
        margin: 0;
        cursor:pointer;
        position: relative;
        i{
          @include ab(50%, n,n,5px);
          @include translate(0, -50%);
        }
      }
      .list{
        @include ab(100%,n,n,n);
        background: $body-background-color;
        border: 1px solid $body-border-color;
        min-width: 150px;
        width: 100%;
        text-align: left;
        @include translate(0,10px);
        @include transition(all 0.35s ease);
        list-style: none;
        @include opacity(0);
        visibility: hidden;
        z-index: 1;
        padding: 5px 0;
        li a{
          padding: 2px 10px;
          display:block
        }
      }
      //select color theme 
      #box-colors{
        display:flex;
        flex-wrap:wrap;
        padding: 0 15px 0 40px;
        .changecolor{
          font-size:0;
          display: inline-block;
          width:20px;
          height: 20px;
          margin: 3px; 
          float: left;
          cursor: pointer;
          &#return_default{
            background-color: $main-color;
          }
          &.green{
            background-color: green;
          }
          &.pink{
            background-color: pink;
          }
          &.black{
            background-color: black;
          }
          &.gold{
            background-color: gold;
          }
          &.yellow{
            background-color: yellow;
          }
          &.blue{
            background-color: #0787ea;
          }
          &.red{
            background-color: red;
          }
          &.orange{
            background-color: orange;
          }
          &.flat-blue{
            background-color: #00abc5;
          }
        }
      }
      &.opened{
        .list{
          @include translate(0,0);
          @include opacity(1);
          visibility: visible;
        }
      }
    }
  }
  &.opened{
    @include translate(0,-50%);
  }
}

//calculate YIQ and return text color follow Background
$dark-text : $body-general-color ;
$light-text: #fff;
@function color-constract($color, $dark : $dark-text, $light : $light-text){
  @if $color == null {
    @return null;
  }
  @else {
    $yiq : (red($color) * 299 +green($color) * 587 + blue($color) *144 )/1000;
    @return if($yiq >= 128, $dark , $light);
  }
}
//ten color demo
@mixin changeColor($firstColor){
  $main-color: $firstColor;
  $footer-hover-color: $firstColor;
  $button-btn1: $firstColor;
  $button-btn1-border: $firstColor;
  $button-btn1-txt: color-constract($firstColor);
  $button-hover-btn2 :$firstColor;
  $button-hover-btn2-txt: color-constract($firstColor);
  $button-hover-btn2-border: $firstColor;
  .btn-1,#shopify-product-reviews .spr-container .spr-summary-actions a  , .button-group button:hover{ 
    background: $button-btn1;  
    color: $button-btn1-txt;
    border: 1px solid $button-btn1-border;    
    &:hover, &:focus, &:active {
      background: $button-hover-btn1;  
      color: $button-hover-btn1-txt;
      border-color: $button-hover-btn1-border;    
    }
    &[disabled] {
      background: $button-btn1;  
      color: $button-btn1-txt;
      border-color: $button-btn1-border;
    }
  }
  .btn-2,.shopify-payment-button button , .sb-blog-tag ul li a { 
    background: $button-btn2;  
    color: $button-btn2-txt;
    border: 1px solid $button-btn2-border;  
    &:hover, &:focus, &:active {
      background: $button-hover-btn2;  
      color: $button-hover-btn2-txt;
      border-color: $button-hover-btn2-border;    
    }
    &[disabled] {
      background: $button-btn2;  
      color: $button-btn2-txt;
      border-color: $button-btn2-border;
    }
  }
  .header-content .style-3 .search-icon{
    background: $button-btn2;  
    color: $button-btn2-txt;
    &:hover, &:focus, &:active {
      background: $button-hover-btn2;  
      color: $button-hover-btn2-txt;   
    }
    &[disabled] {
      background: $button-btn2;  
      color: $button-btn2-txt;
    }
  }
  .sbw-filter{
    >div .advanced-filters>li.advanced-filter{
      a:hover:before{
          border-color: $main-color !important;
      }
      &.active-filter{
        a:before{
          border-color: $main-color !important;
          background-color: $main-color !important;
        }
      }
    }
  }
  .horizontal-menu .navbar .navbar-collapse .menu-list >li:hover{
    >.dropdown-inner>a, >a , >.dropdown-inner>span.expand , >span.expand{
      color: $main-color;
    }
  }
    .vertical-menu,
    .left-column-container {  
    .sidemenu-holder,
    .sb-vertical-menu {
    .navbar-collapse {
      .main-nav{
          border-color : transparent $main-color $main-color $main-color;
        }
      }
    }

    .navbar.vertical-navbar .navbar-collapse .main-nav{
      >li{
        &.menu-open{
          > a,> .dropdown-inner > a,> span.expand,
              > .dropdown-inner > span.expand  {         
                color: $main-color;                      
              }  
        }
        &.dropdown{
          >.dropdown-menu>li:hover a span{
            color: $main-color;
          }
        }
      }
    }
  }
  
  .header-content{  
    .currency .currencies>li.active{
      color: $main-color;
    }
    .style-3,.style-1 .header-navigation,.style-2 .header-navigation{
      background-color: $main-color;
    }
    .custom-text{
      a{color: color-constract($main-color);}
      &:hover{
        a{color : color-constract($header-department-button-bg);  }
      }
    }
    .style-1{
      .searchbox .search-icon{
        background: $button-btn1;  
        color: $button-btn1-txt;   
        &:hover, &:focus, &:active {
          background: $button-hover-btn1;  
          color: $button-hover-btn1-txt;
        }
        &[disabled] {
          background: $button-btn1;  
          color: $button-btn1-txt;
        }
      }
      .phone .phone-icon-wrapper {
        color: $main-color;
      }
      .sidemenu-holder , .vertical-menu {
        .menu-list>li{
          > .dropdown-inner > span.expand,
          > span.expand ,.dropdown-inner>a,>a {
            color: color-constract($firstColor);           
          }
          &:hover{
            > .dropdown-inner > span.expand,
            > span.expand ,.dropdown-inner>a,>a {
              color: color-constract($nav-link-hover-bg-color);           
            }
          }
        }
      }
    }
    .style-2,.style-1{
      @media(max-width:991px){
        &.header-fixed{
          background-color: $main-color;
          .m-cart-icon .mobile-basket>.demo-icon{
            color: color-constract($firstColor);
          }
        }
      }
    }
    .style-2{
      .phone{
        color: color-constract($firstColor);
      }
    }
    .style-3{
      .header-main{
        background-color:#fff;
      }
      .header-middle .phone{ 
        color: color-constract($firstColor);
        .phone-icon-wrapper{
          color: color-constract($firstColor);
        }
      }
      @media(max-width: 991px){
        background-color: $main-color;
        .header-main{
          background-color: $main-color;
          .m-cart-icon {
            .mobile-basket{
              color: color-constract($firstColor);
              >.demo-icon{
                color: color-constract($firstColor);
              }
            }
            
          }
        }
      }
    }

  }
 
  //snippet have background main color 
  #scroll-to-top a:before,.cata-toolbar .sort-by #sort_by_box:before,.nav-tabs li a:before,.fancybox-skin .fancybox-close, #discount-modal .wrap-modal>a , .fof-colse:hover , .modal-dialog .modal-content .modal-header span
   ,.mobile-layout-bar, .m-block-icons>li>a:hover,.mobile-layout-bar .m-block-icons>li>a ,.product-label>span.label-sale ,.page-account h2:before,.m-block-icons>li.currency .currencies:before,.mobile-title-wrapper , .addcart-modal-close,.fof-close:hover, .f-close:hover,.cart-sb-title,.cart-target>.basket .n-item,.modal-dialog button.close{
    background-color: $main-color;
    color: color-constract($firstColor);
  }
  //snippet have text main color
  .quick_shop:hover, .sold-out, .price-sale, a:hover, .date-author .date , .post-date , .pdf-file-wrapper button:hover, .total-price .price , .bundled-price .price , .product-content-wrapper .add-to-wishlist i, .product-content-wrapper .add-to-compare i ,.loading_img i:before
  ,.currency .currencies>li.active a ,.account-details .info .demo-icon,.add-to-compare.added i:before,.total-price>span:last-child , .quantity .qty-inner>span:hover i , .product-qty span:hover i:after,#cart-info .items-inner .cart-item-title a:hover ,#cart-info .items-inner .cart-close:hover
  ,.swiper-button-white,.swiper-button-white:hover,.highlighted, .countdown-section .countdown-amount,#collection-search-wrapper .collection-search-content .chosen-drop .result-selected,.menu-mobile .m-close,.page-wishlist .msg a{
    color: $main-color;
  }


  .countdown-section,input:focus,textarea:focus,select:focus ,#cart-info .items-inner .cart-close:hover, .portfolio-link a:hover{
    border-color: $main-color;
  }
  //section custom 
  .btn-banner,.product-label-custom-content,.cc-btn{
    background-color: $main-color !important;
    color: color-constract($firstColor) !important;  
  }
  #footer-content{
    .newsletter-container form #email-submit{
      background: $button-btn1;  
      color: $button-btn1-txt;
      border: 1px solid $button-btn1-border;    
      &:hover, &:focus, &:active {
        background: $button-hover-btn1;  
        color: $button-hover-btn1-txt;
        border-color: $button-hover-btn1-border;    
      }
    }
  }
  .cart-remove-btn:hover{
    border-color: $main-color;
  }
  .sb-widget {
    .sb-title.sb-title-menu{
      background-color: $main-color;
      color: color-constract($firstColor);
    }
    .sb-service .sb-service-item .list-si li.icon{
      color : $main-color;
    }
    .post-item .post-item-inner .meta-data{
      >a,>span{
        color: $main-color;
      }
    }
    .sb-blog-social-widget .share-links.social-sharing .list-inline li a{
      &:hover{
        background: $button-hover-btn2;  
        color: $button-hover-btn2-txt;
      }
    }
    .sb-testimonial-inner .testimonial-content .rating{
      span.active:before{
        color: $main-color;
      }
    }
    .categories-menu,.blog-menu{
      >li.dropdown{
        &.s-open>a{
          color: $main-color;
        }
        .dropdown-menu{
          >li.dropdown.s-open{
            >a,>.expand:before{
              color: $main-color;
            }
          }
          >li.active>a{
            color: $main-color;
          }
        }
      }
    }
  }
  .sidemenu-holder, .vertical-navbar{
    .navbar .navbar-collapse .menu-list >li{

      &.dropdown>.dropdown-menu{
        li:hover{
          >a span,>span.expand{
            color: $main-color;
          }
        }
      }
      &.mega-menu{
        .dropdown-menu-tabs .mm-tab-col-title{
          .tab-title{
            >li{
              &.hover,&:hover,&.active{
                color: $main-color;
              }
            }
          }
        }
      }
    }
  }
  .page-blog.blog-v2 .sidebar,.page-article .sidebar-style-2{
    .sb-menu {
      border-color: $main-color;
      .sb-title{
        background-color: $main-color;
        color: color-constract($firstColor);
      }
    }
    .sb-title{
      &:before{
        border-color: $main-color;
      }
    }
  } 
  .categories-list{
    .h-category{
      .text>a{
        color: $main-color;
      }
    }
  }
  &.cata-grid-1 .cata-product .product-grid-item .product-wrapper .price-cart-wrapper .product-add-cart a{
    background: $button-btn1;  
    color: $button-btn1-txt;
    &:hover{
      background: $button-hover-btn1;  
      color: $button-hover-btn1-txt;
      border-color: $button-hover-btn1-border;   
    }
  }
}

#red{
   @include changeColor(red);
}
#green{
  @include changeColor(green);
}
#pink{
  @include changeColor(pink);
}
#black{
  @include changeColor(black);
}
#gold{
  @include changeColor(gold);
}
#yellow{
  @include changeColor(yellow);
}
#blue{
  @include changeColor(#0787ea);
}
#orange{
  @include changeColor(orange);
}
#flat-blue{
  @include changeColor(#00abc5);
}
