/** Shopify CDN: Minification failed

Line 20:0 Comments in CSS use "/* ... */" instead of "//"
Line 21:0 Comments in CSS use "/* ... */" instead of "//"
Line 21:12 Expected identifier but found "*"
Line 21:15 Unexpected "$"
Line 22:0 Comments in CSS use "/* ... */" instead of "//"
Line 22:12 Expected identifier but found "*"
Line 22:15 Unexpected "$"
Line 24:0 Comments in CSS use "/* ... */" instead of "//"
Line 25:12 Unexpected "{"
Line 25:22 Expected ":"
... and 491 more hidden warnings

**/
/*============================================================================
Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library
==============================================================================*/

/// Adds a browser prefix to the property
/// @param {*} $property Property
/// @param {*} $value Value
/*================ Typography ==c==============*/
// basic font
$fontSize: {{ settings.font_size }}px;

{% if settings.basic_font == 'google' %}
$fontFamily: {{ settings.google_font }};
$font-1st :{{ settings.google_font }};
$font-2nd :{{ settings.google_font }};
{% else %}
$fontFamily: {{ settings.family_font }};
$font-1st :{{ settings.family_font }};
$font-2nd :{{ settings.family_font }};
{% endif%}

// heading font
{% if settings.heading_font == 'google'%}
$headingFontFamily: {{ settings.heading_google_font }};
{% else %}
$headingFontFamily: {{ settings.heading_family_font }};
{% endif %}
$font-1st :$fontFamily;
$font-2nd :$fontFamily;
//color
$color-1st: #b19870;
$color-2nd: #ca2028;
$color-link: {{ settings.theme_body_link_color }};
$color-text: {{ settings.theme_body_text_color }}; 
$color-heading: {{ settings.theme_heading_color }};
$color-hover: {{ settings.theme_body_link_hover_color }};
$main-color: {{ settings.theme_general_theme_color }} ;
$sub-color: #8ebdac ;
$border-color: #f3f3f3;
$body_background_color: {{ settings.theme_body_background_color }};
$fontSize: {{ settings.font_size }};
/*****************************************/
/************** Basic ********************/
/*****************************************/
// Page color
$bodyBackgroundColor: {{ settings.body_background_color }};
{% if settings.body_background_image_enable != blank %}
$bodyBackgroundImage: url({{ 'body_background_image.jpg' | asset_url }});
{% else %}
$bodyBackgroundImage: none;
{% endif %}
$bodyBackgroundRepeat: {{ settings.body_background_image_repeat }};
$bodyBackgroundAttachment: {{ settings.body_background_image_attachment }};
$bodyBackgroundImagePositionx: {{ settings.body_background_image_positionx }};
$bodyBackgroundImagePositiony: {{ settings.body_background_image_positiony }};
{% if settings.body_background_pattern_enable != blank %}
$bodyBackgroundPattern: url({{ 'body_background_pattern.png' | asset_url }});
{% else %}
$bodyBackgroundPattern: none;
{% endif %}

body {
  color: $color-text;
  font-size: $fontSize;
  font-family: $fontFamily, sans-serif;
  &.template-index{
    background-color: $bodyBackgroundColor;
  }
  {% if settings.body_background_image_enable != blank and settings.body_background_pattern_enable == blank %}
  background-image: $bodyBackgroundImage;
  background-repeat: $bodyBackgroundRepeat;
  background-position: $bodyBackgroundImagePositionx $bodyBackgroundImagePositiony;
  background-attachment: $bodyBackgroundAttachment;
  {% endif %}
  {% if settings.body_background_pattern_enable != blank and settings.body_background_image_enable == blank %}
  background-image: $bodyBackgroundPattern;
  {% endif %}  
  &.boxed-layout {
    background-color: $bodyBackgroundColor;
    background-image: $bodyBackgroundImage;
    background-repeat: $bodyBackgroundRepeat;
    background-attachment: $bodyBackgroundAttachment;
    background-position-x: $bodyBackgroundImagePositionx;
    background-position-y: $bodyBackgroundImagePositiony;    
    {% if settings.body_background_pattern_enable != blank %}
    background: $bodyBackgroundPattern;
    {% endif %}
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: $color-heading;
  }
  h1 {
    font-family: $headingFontFamily, sans-serif;
  }
  h2 {
    font-family: $headingFontFamily, sans-serif;
  }
  h3 {
    font-family: $headingFontFamily, sans-serif;
  }
  h4 {
    font-family: $headingFontFamily, sans-serif;
  }
  h5 {
    font-family: $headingFontFamily, sans-serif;
  }
  h6 {
    font-family: $headingFontFamily, sans-serif;
  }
}

a, a:focus, a:visited{
  color: $color-link;
  cursor: pointer;
}
a:hover {
  color: $color-hover;
}


// heading font
{% if settings.heading_font == 'google'%}
$heading: {{ settings.heading_google_font }};
{% else %}
$heading: {{ settings.heading_family_font }};
{% endif %}
@mixin css3-prefix($property, $value) {
  -webkit-#{$property}: #{$value};
  -khtml-#{$property}: #{$value};
  -moz-#{$property}: #{$value};
  -ms-#{$property}: #{$value};
  -o-#{$property}: #{$value};
  #{$property}: #{$value};
}

@mixin css3-prefix-value($property, $value) {
  #{$property}: -webkit-#{$value};
  #{$property}: -khtml-#{$value};
  #{$property}: -moz-#{$value};
  #{$property}: -ms-#{$value};
  #{$property}: -o-#{$value};
  #{$property}: #{$value};
}

/// Background Gradient
/// @param {Color} $startColor [#3C3C3C] - Start Color
/// @param {Color} $endColor [#999999] - End Color

@mixin background-gradient($startColor: #3C3C3C, $endColor: #999999) {
  background-color: $startColor;
  background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
  background-image: -webkit-linear-gradient(top, $startColor, $endColor);
  background-image:    -moz-linear-gradient(top, $startColor, $endColor);
  background-image:     -ms-linear-gradient(top, $startColor, $endColor);
  background-image:      -o-linear-gradient(top, $startColor, $endColor);
  background-image:         linear-gradient(top, $startColor, $endColor);
  filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
}

/// Background Horizontal
/// @param {Color} $startColor [#3C3C3C] - Start Color
/// @param {Color} $endColor [#999999] - End Color

@mixin background-horizontal($startColor: #3C3C3C, $endColor: #999999) {
  background-color: $startColor;
  background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
  background-image: -webkit-linear-gradient(left, $startColor, $endColor);
  background-image:    -moz-linear-gradient(left, $startColor, $endColor);
  background-image:     -ms-linear-gradient(left, $startColor, $endColor);
  background-image:      -o-linear-gradient(left, $startColor, $endColor);
  background-image:         linear-gradient(left, $startColor, $endColor);
  filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}', gradientType='1');
}

/// Background Radial
/// @param {Color} $startColor [#3C3C3C] - Start Color
/// @param {Percentage} $startPos [0%] - Start position
/// @param {Color} $endColor [#999999] - End Color
/// @param {Percentage} $endPos [100%] - End position

@mixin background-radial($startColor: #FFFFFF, $startPos: 0%, $endColor: #000000, $endPos:100%) {
  background: -moz-radial-gradient(center, ellipse cover, $startColor $startPos, $endColor $endPos);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop($startPos,$startColor), color-stop($endPos,$endColor));
  background: -webkit-radial-gradient(center, ellipse cover, $startColor $startPos,$endColor $endPos);
  background: -o-radial-gradient(center, ellipse cover, $startColor $startPos,$endColor $endPos);
  background: -ms-radial-gradient(center, ellipse cover, $startColor $startPos,$endColor $endPos);
  background: radial-gradient(ellipse at center, $startColor $startPos,$endColor $endPos);
}

/// Background Size
/// @param {Size} $width [100%] - Width
/// @param {Size} $width [$width] - Height
/// @require {mixin} css3-prefix

@mixin background-size($width: 100%, $height: $width) {
  @if type-of($width) == 'number' and $height != null {
    @include css3-prefix('background-size', $width $height);
  } @else {
    @include css3-prefix('background-size', $width);
  }
}

/// Background Color Opacity
/// @param {Color} $color [100%] - Color
/// @param {Double} $opacity [0.85] - Opacity

@mixin background-opacity($color: #000, $opacity: 0.85) {
  background: $color;
  background: rgba($color, $opacity);
}

/// Border Radius
/// @param {Size} $radius [5px] - Radius
/// @require {mixin} css3-prefix

@mixin border-radius($radius: 5px) {
  @include css3-prefix('border-radius', $radius);
}

/// Border Radius Separate
/// @param {Size} $topLeftRadius [5px] - Top Left
/// @param {Size} $topRightRadius [5px] - Top Right
/// @param {Size} $bottomLeftRadius [5px] - Bottom Left
/// @param {Size} $bottomRightRadius [5px] - Bottom Right

@mixin border-radius-separate($topLeftRadius: 5px, $topRightRadius: 5px, $bottomLeftRadius: 5px, $bottomRightRadius: 5px) {
  -webkit-border-top-left-radius:     $topLeftRadius;
  -webkit-border-top-right-radius:    $topRightRadius;
  -webkit-border-bottom-right-radius: $bottomRightRadius;
  -webkit-border-bottom-left-radius:  $bottomLeftRadius;

  -moz-border-radius-topleft:     $topLeftRadius;
  -moz-border-radius-topright:    $topRightRadius;
  -moz-border-radius-bottomright: $bottomRightRadius;
  -moz-border-radius-bottomleft:  $bottomLeftRadius;

  border-top-left-radius:     $topLeftRadius;
  border-top-right-radius:    $topRightRadius;
  border-bottom-right-radius: $bottomRightRadius;
  border-bottom-left-radius:  $bottomLeftRadius;
}

/// Box
/// @param {*} $orient [horizontal] - Orientation
/// @param {*} $pack [center] - Pack
/// @param {*} $align [center] - Align
/// @require {mixin} css3-prefix

@mixin box($orient: horizontal, $pack: center, $align: center) {
  display: -webkit-box;
  display: -moz-box;
  display: box;

  @include css3-prefix('box-orient', $orient);
  @include css3-prefix('box-pack', $pack);
  @include css3-prefix('box-align', $align);
}

/// Box RGBA
/// @param {Integer} $r [60] - Red
/// @param {Integer} $g [3] - Green
/// @param {Integer} $b [12] - Blue
/// @param {Double} $opacity [0.23] - Opacity
/// @param {Color} $color [#3C3C3C] - Color

@mixin box-rgba($r: 60, $g: 3, $b: 12, $opacity: 0.23, $color: #3C3C3C) {
  background-color: transparent;
  background-color: rgba($r, $g, $b, $opacity);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}',endColorstr='#{$color}');
  zoom:   1;
}

/// Box Shadow
/// @param {Size} $x [2px] - X
/// @param {Size} $y [2px] - Y
/// @param {Size} $blur [5px] - Blur
/// @param {Color} $color [rgba(0,0,0,.4)] - Color
/// @param {Boolean} $inset - Inset
/// @param {Size} $spread - Spread

@mixin box-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4), $inset: "", $spread: "") {
  @if ($inset != "") {
    @if ($spread != "") {
      @include css3-prefix('box-shadow', $inset $x $y $blur $spread $color);
    }@else{
      @include css3-prefix('box-shadow', $inset $x $y $blur $color);
    }
  } @else {
    @if ($spread != "") {
      @include css3-prefix('box-shadow', $x $y $blur $spread $color);
    }@else{
      @include css3-prefix('box-shadow', $x $y $blur $color);
    }
  }
}

/// Box Sizing
/// @param {*} $type [border-box] - Type
/// @require {mixin} css3-prefix

@mixin box-sizing($type: border-box) {
  @include css3-prefix('box-sizing', $type);
}

/// Columns
/// @param {Integer} $count [3] - Count
/// @param {Integer} $gap [10] - Gap
/// @require {mixin} css3-prefix

@mixin columns($count: 3, $gap: 10) {
  @include css3-prefix('column-count', $count);
  @include css3-prefix('column-gap', $gap);
}

/// Double Borders
/// @param {Color} $colorOne [#3C3C3C] - Color One
/// @param {Color} $colorTwo [#999999] - Color Two
/// @param {Size} $radius [0] - Radius
/// @require {mixin} css3-prefix
/// @require {mixin} border-radius

@mixin double-borders($colorOne: #3C3C3C, $colorTwo: #999999, $radius: 0) {
  border: 1px solid $colorOne;

  @include css3-prefix('box-shadow', 0 0 0 1px $colorTwo);

  @include border-radius( $radius );
}

/// Flex
/// @param {Integer} $value [1] - Value
/// @require {mixin} css3-prefix

@mixin flex($value: 1) {
  @include css3-prefix('box-flex', $value);
}

/// Flip
/// @param {Double} $scaleX [-1] - ScaleX
/// @require {mixin} css3-prefix

@mixin flip($scaleX: -1) {
  @include css3-prefix('transform', scaleX($scaleX));
  filter:            FlipH;
  -ms-filter:        "FlipH";
}

/// Font Face
/// @param {Font} $fontFamily [myFont] - Font Family
/// @param {String} $eotFileSrc ['myFont.eot'] - Eot File Source
/// @param {String} $woffFileSrc ['myFont.woff'] - Woff File Source
/// @param {String} $ttfFileSrc ['myFont.ttf'] - Ttf File Source
/// @param {String} $svgFileSrc ['myFont.svg'] - Svg File Source

@mixin font-face($fontFamily: myFont, $eotFileSrc: 'myFont.eot', $woffFileSrc: 'myFont.woff', $ttfFileSrc: 'myFont.ttf', $svgFileSrc: 'myFont.svg', $svgFontID: '#myFont') {
  font-family: $fontFamily;
  src: url($eotFileSrc)  format('eot'),
  url($woffFileSrc) format('woff'),
  url($ttfFileSrc)  format('truetype'),
  url($svgFileSrc + $svgFontID) format('svg');
}

/// Opacity
/// @param {Double} $opacity [0.5] - Opacity
/// @require {mixin} css3-prefix

@mixin opacity($opacity: 0.5) {
  $opacityMultiplied: ($opacity * 100);

  filter:         alpha(opacity=$opacityMultiplied);
  -ms-filter:     "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $opacityMultiplied + ")";
  @include css3-prefix('opacity', $opacity);
}

/// Outline Radius
/// @param {Size} $radius [5px] - Radius
/// @require {mixin} css3-prefix

@mixin outline-radius($radius: 5px) {
  @include css3-prefix('outline-radius', $radius);
}

/// Resize
/// @param {*} $directoin [both] - Direction
/// @require {mixin} css3-prefix

@mixin resize($direction: both) {
  @include css3-prefix('resize', $direction);
}

/// Rotate
///
/// CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
/// @param {Double} $deg [0] - Degree
/// @param {Double} $m11 [0] - M11
/// @param {Double} $m12 [0] - M12
/// @param {Double} $m21 [0] - M21
/// @param {Double} $m22 [0] - M22
/// @require {mixin} css3-prefix

@mixin rotate($deg: 0, $m11: 0, $m12: 0, $m21: 0, $m22: 0) {
  @include css3-prefix('transform', rotate($deg + deg));
  filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=#{$m11}, M12=#{$m12}, M21=#{$m21}, M22=#{$m22}, sizingMethod='auto expand');
zoom: 1;
}

/// Text Shadow
/// @param {Size} $x [2px] - X
/// @param {Size} $y [2px] - Y
/// @param {Size} $blur [2px] - Blur
/// @param {Color} $color [rgba(0,0,0,.4)] - Color

@mixin text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4)) {
  text-shadow: $x $y $blur $color;
}

/// Transform
/// @param {List} $params - Params
/// @require {mixin} css3-prefix

@mixin transform($params) {
  @include css3-prefix('transform', $params);
}

/// Transform-Origin
/// @param {List} $params - Params
/// @require {mixin} css3-prefix

@mixin transform-origin($params) {
  @include css3-prefix('transform-origin', $params);
}

// Transform-Style
/// @param {List} $params - Params
/// @require {mixin} css3-prefix

@mixin transform-style($style: preserve-3d) {
  @include css3-prefix('transform-style', $style);
}

/// Transition
/// @param {List} $properties - Properties
/// @require {mixin} css3-prefix

@mixin transition($properties...) {

  @if length($properties) >= 1 {
    @include css3-prefix('transition', $properties);
  }

  @else {
    @include css3-prefix('transition',  "all 0.2s ease-in-out 0s");
  }
}

/// Triple Borders
/// @param {Color} $colorOne [#3C3C3C] - Color One
/// @param {Color} $colorTwo [#999999] - Color Two
/// @param {Color} $colorThree [#000000] - Color Three
/// @param {Size} $radius [0] - Radius
/// @require {mixin} border-radius
/// @require {mixin} css3-prefix

@mixin triple-borders($colorOne: #3C3C3C, $colorTwo: #999999, $colorThree: #000000, $radius: 0) {
  border: 1px solid $colorOne;

  @include border-radius($radius);

  @include css3-prefix('box-shadow', "0 0 0 1px #{$colorTwo}, 0 0 0 2px #{$colorThree}");
}


/// Keyframes
/// @param {*} $animation-name - Animation name
/// @content [Animation css]

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

/// Animation
/// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
/// @require {mixin} css3-prefix

@mixin animation($str) {
  @include css3-prefix('animation', $str);
}

/// Box translate
/// @param {*} $type c: Center, x, y

@mixin translate($type: 'c') {
  position: absolute;
  @if ($type == "x") {
    @include transform(translateX(-50%));
    left: 50%;
  } @else if ( $type == 'y' ){
    @include transform(translateY(-50%));
    top: 50%;
  } @else{
    @include transform(translate(-50%, -50%));
    top: 50%;
    left: 50%;
  }
}

@mixin prefix($property, $value) {
  -webkit-#{$property}: #{$value};
  -moz-#{$property}: #{$value};
  -ms-#{$property}: #{$value};
  // -o-#{$property}: #{$value};
  #{$property}: #{$value};
}

@mixin user-select($vals: none) {
  @include prefix("user-select", $vals);
}

@mixin border-radius($radius: 5px) {
  @include prefix("border-radius", $radius);
}

@mixin box-shadow($vals) {
  @include prefix("box-shadow", $vals);
}

@mixin backface($vals: hidden) {
  @include prefix("backface-visibility", $vals);
}

@mixin perspective($vals) {
  @include prefix("perspective", $vals);
}

@mixin max-area($index: 10) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: $index;
}
@mixin maxarea() {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@mixin hidden() {
  visibility: hidden;
  opacity: 0
}
@mixin vertical-align() {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
@mixin show() {
  visibility: visible;
  opacity: 1;
}
@mixin clearfix() {
  clear: both; 
  overflow: hidden; 
}
@mixin center() {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
// Vertical centering.
// Note: You should set parent element: transform-style: preserve-3d;
// @see http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
@mixin vertical-align($position: absolute) {
  position: $position;
  top: 50%;
  @include transform(translateY(-50%));
}

/// Horizontal, vertical or absolute centering.
@mixin center($width: null, $height: null) {
  position: absolute;
  top: 50%;
  left: 50%;
  @if not $width and not $height {
    @include transform(translate(-50%, -50%));
  }
  @else if $width and $height {
    width: $width;
    height: $height;
    margin-top: -($width / 2);
    margin-left: -($height / 2);
  }
  @else if not $height {
    margin-left: -($width / 2);
    @include transform(translateY(-50%));
    width: $width;
  }
  @else {
    margin-top: -($height / 2);
    @include transform(translateX(-50%));
    height: $height;
  }
}

@mixin font-general($font-family: arial, $font-size: 14, $font-weight: 400, $line-height: 1.5em) {
  font-family: $font-family;
  font-size: $font-size;
  font-weight: $font-weight;
  line-height: $line-height;
}
@mixin circle($width, $background) {
  width: $width;
  height: $width;
  @include border-radius(50%);
  background-color: $background;
}
/// FontAwesome
@mixin FontAwesome($glyph, $font : 'FontAwesome') {
  font-family: $font;
  content: "#{$glyph}";
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
}


%clearfix {
  *zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

%marginShortcode {
  margin-bottom: 30px;
}

/*================ #Icons ================*/
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: currentColor;

  .no-svg & {
    display: none;
  }
}

svg,
symbol {
  &.icon:not(.icon--full-color) {
    circle,
    ellipse,
    g,
    line,
    path,
    polygon,
    polyline,
    rect {
      fill: inherit;
      stroke: inherit;
    }
  }
}

/*============================================================================
End - Mixins
==============================================================================*/

/************************************ Heading **********************************/

/************************************ Grid ************************************/
.product-grid{
  @media(max-width: 991px) {
    .row-item{
      margin: 0 -8px;
      .item{
        padding: 0 8px;
      }
    }

  }
}
.ps-product-grid {
  @include clearfix;
  margin-left: -15px;
  margin-right: -15px;
  .ps-product-column {
    padding: 0 15px;
    float: left;
  }
  &[data-items="5"] {
    .ps-product-column {
      float: left;
      width: calc(100% / 5);
    }
  }
  @media(max-width: 1200px) {
    &[data-items="5"] {
      .ps-product-column {
        width: calc(100% / 4);
      }
    }
  }
  @media(max-width: 991px) {
    &[data-items="5"] {
      .ps-product-column {
        width: calc(100% / 3);
      }
    }
  }
  @media(max-width: 768px) {
    &[data-items="5"] {
      .ps-product-column {
        width: calc(100% / 2);
      }
    }
  }
  @media(max-width: 420px) {
    .ps-product-column {
      width: 100% !important;
    }
  }
}
.ps-wrapper {
  padding: 150px 0;
  background: #fff;
  @media(max-width: 1200px) {
    padding: 100px 0;
  }
  @media(max-width: 991px) {
    padding: 50px 0;
  }
}
.ps-main {
  padding: 100px 0px 0px;
  background: #fff;
  @media(max-width: 1200px) {
    padding: 70px 0;
  }
  @media(max-width: 991px) {
    padding: 50px 0;
  }
}

.ps-columns {
  @include clearfix;
  .ps-column {
    float: left;
  }
  &[data-column='2'] {
    .ps-column {
      width: 50%;
    }

  }
  &[data-column='3'] {
    .ps-column {
      width: calc(100% / 3);
    }
  }
}
/*============================================================================
Themes
==============================================================================*/

* {
  margin:0;
  padding:0;
}
body {
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
.body-wrapper{
  @include transition(all .4s);
}
body.boxed-layout {
  background-color: #f4f4f4;
  .body-wrapper {
    max-width: 1230px;
    margin: auto;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 0px 0px 8px 2px #DAD5D5;
  }
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.clear,
.clear-both {
  clear: both;
}
.over{
  overflow:hidden;
}
.flex-box{
  @include css3-prefix(display,flex);
  @include css3-prefix(align-items,center);
  display:-ms-flexbox;
  -ms-flex-align:center;

}
.flex-box-sm{
  @media(min-width: 768px) {
    @include css3-prefix(display,flex);
    @include css3-prefix(align-items,center);
    display:-ms-flexbox;
    -ms-flex-align:center;
  }

}
@media(min-width: 1200px) {
  .container{
    width: 1200px;
  }
}
.inline{
  clear: both; 
  overflow: hidden; 
  >div, >li{
    display: inline-block; 
    float: left; 
    &:last-child {
      margin: 0;
      padding: 0;
      &:after , &:before {
        display: none; 
      }
    }
  }
}
.template-index footer, .template-index .header-middle{
  background: #fff;
  margin: 0 auto;
  @media(min-width: 1200px) {
    width: 1290px;
  }
}
.home-section{
  >div{
    background-color: #fff;
    margin: 0 auto;
    padding-bottom: 75px;
    @media(min-width: 1200px) {
      width: 1290px;
    }
    &.section-collection-tabs{
    }
    &.section-home-slider{
      padding-bottom: 10px;

    }
    &.home-subscribe{
      padding: 80px 0 400px;
      @media(max-width: 1200px) {
        padding: 50px 0 200px;
      }

    }
    &.home-blog{
      padding-bottom: 55px;
    }
  }
}
.right{
  float: right; 
}
.left{
  float: left; 
}
.ps-section__header {
  text-align: center;
  max-width: 530px;
  margin: 0 auto;
  margin-bottom: 50px;
  @media(max-width: 1200px) {
    margin-bottom: 30px; 
  }
  h3{
    font-size: 36px;
    font-weight: 600; 
    color: $color-heading; 
    margin: 0;
    margin-bottom: 15px;
    @media(max-width: 767px) {
      font-size: 32px;
    }
  }
  p{
    margin:0px; 
    padding-top: 35px;
    @media(max-width: 1200px) {
      padding-top: 15px;
    }

  }
}
.banner img{
  width: 100%; 
}
.tx-left{
  text-align: left;
  >div, >li{
    display: inline-block;
  }
}
.tx-right{
  text-align: right;
  >div, >li{
    display: inline-block;
  }
}
.tx-center{
  text-align: center;
  >div, >li{
    display: inline-block;
  }
}
.hidden{
  display: none;
}
.right{
  float:right;
}
.left{
  float:left;
}
.no-margin{
  margin:0px;
}
@media (min-width: 992px) {
  .clear-both-lg {
    clear: both;
  }
}
@media (max-width: 991px) {
  .clear-both-md {
    clear: both;
  }
}
@media (max-width: 767px) {
  .clear-both-sm {
    clear: both;
  }
}
img {
  border:0;
  outline:none;
  max-width: 100%;
}
a {
  @include transition(all 0.5s);
}
a:hover,
a:active {
  text-decoration:none;
}
a:focus {
  outline:0;
}
.page {
  ul,
  ol {
    margin:0;
    padding:0;
  }
}
ul,
ol {
  padding-left: 0;
  list-style: none;
}
ul {
  padding:0;
  margin: 0;
  li {
    list-style:none;
    padding:0;
    margin:0;
  }
}
a,
a:hover,
a:active,
a:focus {
  text-decoration:none;
}
b, strong {
  font-weight: 600;
}
.label {
  color: inherit;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  border-radius: 0;
}
label {
  font-weight: normal;
}
.hidden-label {
  display: none;
}
.scroll-div {
  height: 335px;
}
.form-list {
  .input-box {
    position: relative;
    clear: both;
    display: block;
    line-height: 30px;
  }
  select {
    width: 100%;
  }
}
input,
textarea,
select {
  max-width: 100%;
  border: 1px solid #f4f4f4;
}
textarea{
  min-height: 152px;
}
input,
textarea {
  background-color: rgba(0, 0, 0, 0);
  border-color: #ebebeb;
  border-radius: 0;
  box-shadow: none;
  color: #b6b6b6;
  font-weight: bold;
  font-size: 13px;
  height: 36px;
  @include border-radius(4px);
  line-height: 35px;
  padding: 10px 20px;
}
textarea {
  height: auto;
}
input,
select {
  line-height: 18px;
  padding: 0 0 0 10px;
}
textarea,
input.input-full,
input.qty {
  width: 100%;
  margin-bottom: 20px;
  &:focus {
    outline: 0;
  }
}
textarea,
input.qty {
  line-height: 30px;
}
.form-box {
  textarea,
  input.input-full,
  input.qty {
  }
}
textarea {
  padding: 10px;
  height: 180px;
  max-height: 200px;
}
select {
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 28px;
  text-indent: 0.01px;
  cursor: pointer;
  background-position: right center;
  background: {
    image: url('{{ "ico-select.svg" | asset_url }}');
      repeat: no-repeat;
      position: right 10px center;
      color: transparent;
      }
  .ie9 &,
  .lt-ie9 & {
    padding-right: 10px;
    background-image: none;
  }
  &:focus {
    outline: 0;
  }
}
button {
  border: none;
}
.float-none {
  float: none;
}
.col-md-sm-5 {
  width:20%;
  padding:0 15px;
  float:left;
}
.visible-tablet,
.visible-phone {
  display: none;
}
.is-transitioning {
  display: block !important;
  visibility: visible !important;
}
a.btn-button:hover {
  color: #fff;
}
.ps-product__divider {
  display: block;
  margin: 40px 0;
  height: 1px;
  width: 100%;
  background-color: rgba(#000, .1);
  @media(max-width: 767px) {
    margin: 20px 0;
  }
}
.ps-product__divider2 {
  display: block;
  margin: 25px 0;
  height: 1px;
  width: 100%;
  background-color: rgba(#000, .1);
  @media(max-width: 767px) {
    margin: 20px 0;
  }
}
input.btn-button,
input.btn,
input.button,
input[type="submit"] {
  height: auto;
  min-height: initial;
}


blockquote {
  padding: 2rem;
  padding-left: 5.625rem;
  border: 1px solid #ddd;
  font-family: Georgia, Serif;
  font-style: italic;
  color: #000;
  background: #fafafa;
  position: relative;
  &:before {
    font-family: FontAwesome;
    color: #666;
    position: absolute;
    font-size: 2rem;
    top: 2rem;
    left: 2rem;
    content: "\f10d";
  }
  p {
    margin: 0;
    margin-top: 1.25rem;
    color: #000;
    font-size: 17px;
    line-height: 1.7;
    &:first-child {
      margin-top: 0;
    }
  }
}
.a-center{
  text-align: center;
}
.a-left{
  text-align: left;
}
.a-right{
  text-align: right;
}
.no-padding {
  padding: 0 !important;
}
//button
#back2top {
  position: fixed;
  bottom: 50px;
  right: 100px;
  z-index: 9999;
  display: inline-block;
  text-transform: uppercase;
  height: 48px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  color: #000000;
  padding: 14px 35px;
  padding-right: 40px;
  text-transform: uppercase;
  line-height: 20px;
  @include border-radius(50px);
  @include transform(translateY(30px));
  @include transition(all .4s ease);
  i {
    position: absolute;
    width: 20px;
    font-size: 15px;
    @include transform(rotate(-90deg) translateX(0));
  }
  &:hover {
    cursor: pointer;
    color: $color-2nd;
  }
  &.active {
    @include transform(translateY(0));
  }
  @media(max-width: 1200px)  {
    bottom: 50px;
    right: 50px;
  }
  @media(max-width: 992px) {
    bottom: 30px;
    right: 30px;
  }
}


.infinite-scrolling{
  clear: both;
  overflow: hidden;
  margin-top: 60px;
  text-align: center;  a{
    color: #fff !important;
  }
}
.ps-btn, button.ps-btn {
  height: 40px;
  line-height: 40px;
  background: #3e3e3e;
  color: #fff;
  border: unset;
  padding: 0 15px;
  min-width: 130px;
  -ms-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 400;
  border-radius: 0;
  display: inline-block; 
  &:hover, &:focus {
    @include opacity(.6); 
    color: #fff;
  }
}

//dropdown
.dropdown-menu, .dropdown-content{
  -webkit-box-shadow: 0 12px 30px 0 rgba(0,0,0,0.12);
  -moz-box-shadow: 0 12px 30px 0 rgba(0,0,0,0.12);
  -ms-box-shadow: 0 12px 30px 0 rgba(0,0,0,0.12);
  box-shadow: 0 12px 30px 0 rgba(0,0,0,0.12);	
  border: 0;
  border-radius: 0;
  @media(max-width: 767px) {
    right: 0;
    left: auto;
  }
}
.dropdown-menu{
  margin-top: 15px;
  padding: 10px 0px !important;
  li a{
    padding: 10px 15px;
    font-size: 15px;
    line-height: 20px;
    color: #7f7f7f;
    font-weight: 400;
    &:hover {
      background: #fff;
      color: $color-1st; 
    }
  }
}
//typography

h1, h2, h3, h4, h5, h6 {
  position: relative;
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 500;
  color: $color-heading;
  a {
    color: inherit;
  }
}

p {
  line-height: 1.7em;
  color: $color-text;
  span {
    font-family: inherit;
    color: inherit;
    font-size: inherit;
  }
  strong {
    color: #000;
  }
}

a {
  color: inherit;
  text-decoration: none;
  @include transition(all 0.4s ease);
  &:before {
    @include transition(all 0.4s ease);
  }
  &:hover {
    color: $color-1st;
  }
}

a,
input,
textarea,
button,
select {
  outline: none;
}

a:hover,
h1:focus,
h2:focus,
h3:focus,
h4:focus,
h5:focus,
h6:focus {
  text-decoration: none;
}

a:focus,
button:focus,
select:focus,
input:focus,
textarea:focus {
  outline: none;
  text-decoration: none;
}

img {
  max-width: 100%;
}

iframe {
  border: 0;
  max-width: 100%;
  width: 100%;
}

.ps-heading {
  margin-bottom: 0;
  font-family: $font-1st;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.3em;
  color: #000000;
  @media(max-width: 420px) {
    font-size: 23px;
  }
}

.ps-content {
  .ps-highlight {
    color: #000;
    font-size: 20px;
  }
  p {
    margin-bottom: 20px;
    color: rgba(#000, .5);
    line-height: 1.67em;
    strong {
      font-weight: 700;
      color: #000;
    }
  }
  blockquote {
    position: relative;
    p {
      font-size: 20px;
      color: #000;
      font-weight: 600;
      line-height: 1.3em;
    }
  }
}
//Form input
.form-control {
  outline: none;
  background-color: #fff;
  border: solid 1px #f3f3f3;
  padding-left: 20px;
  @include transition(all .4s ease);
  opacity: 1;
  box-shadow: none;
  font-weight: 400; 
  text-indent: 0;
  &:focus {
    outline: none;
    box-shadow: none;
  }
  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #8f8f8f;
  }
  &::-moz-placeholder { /* Firefox 19+ */
    color: #8f8f8f;
  }
  &:-ms-input-placeholder { /* IE 10+ */
    color: #8f8f8f;
  }
  &:-moz-placeholder { /* Firefox 18- */
    color: #8f8f8f;
  }

}

textarea.form-control {
  height: auto;
  padding: 15px 10px;

}


.ps-checkbox {
  position: relative;
  display: block;
  > input {
    position: absolute;
    visibility: hidden;

  }
  label {
    position: relative;
    padding-left: 30px;
    font-family: $font-1st;
    color: #737373;
    font-weight: 400;
    cursor: pointer;
    &:before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0px;
      height: 20px;
      width: 20px;
      z-index: 10;
      border: 2px solid #ccc;
      @include transition(all .4s ease);
    }
    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 4px;
      left: 7px;
      width: 6px;
      height: 10px;
      border: 3px solid $color-2nd;
      border-top: none;
      border-left: none;
      z-index: 5;
      opacity: 0;
      @include transform(rotate(0deg));
      @include transition(all .4s ease);
    }
  }
  input[type=checkbox]:checked ~ label {
    &:after {
      @include transform(rotate(45deg));
      opacity: 1;
    }
  }
}

.bootstrap-select.ps-select {
  .dropdown-toggle {
    &:hover {
      background-color: #fff;
      outline: none !important;
      box-shadow: none;
    }
  }
  &.open {
    .dropdown-toggle {

      &:focus, &:active, &:hover {
        background-color: #fff;
        outline: none !important;
        box-shadow: none;
      }
    }
    .dropdown-menu {
      @include border-radius(0);
      padding: 0;
      li {
        a {
          line-height: 30px;
        }
      }
    }
  }

}

.ps-radio {
  position: relative;
  line-height: 30px;
  > input {
    position: absolute;
    visibility: hidden;
    display: none;
    box-sizig: border-box;
  }
  label {
    margin: 0;
    position: relative;
    padding-left: 20px;
    font-family: $font-1st;
    color: #737373;
    font-weight: 400;
    line-height: 30px;
    vertical-align: top;
    cursor: pointer;
    &:before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0px;
      height: 20px;
      width: 20px;
      z-index: 10;
      background-color: #cddded;
      @include transition(all .3s ease);
      @include border-radius(50%);
    }
    &:after {
      content: '';
      display: block;
      position: absolute;
      top: -3px;
      left: -3px;
      width: 26px;
      height: 26px;
      z-index: -1;
      @include border-radius(50%);
      background-color: transparent;
      z-index: 20;
      opacity: 0;
      border: 2px solid #000;
      @include transition(all .3s ease);
    }
  }
  input[type=radio]:checked ~ label {
    &:before {
      top: 2px;
      left: 2px;
      width: 16px;
      height: 16px;
      @include box-shadow(0 0 30px 2px rgba($color-1st, .3));
    }
    &:after {
      @include transform(scale(1, 1));
      opacity: 1;
    }
  }

  &.black {
    > label {
      &:before {
        background-color: #000;
      }
    }
  }
  &.white {
    > label {
      &:before {
        background-color: #fff;
        border: 1px solid #979797;
      }
    }
    input[type=radio]:checked ~ label {
      &:before {
        border: none;
      }
    }
  }
  &.brown {
    > label {
      &:before {
        background-color: #764d33;
      }
    }
  }

}

.form-group--number {
  position: relative;
  width: 180px;
  margin: 0 auto 20px;
  input {
    height: 48px;
    border: 1px solid #f3f3f3;
    @include border-radius(48px);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #000;
    @include box-shadow(inset 0 2px 5px 0 rgba(0, 0, 0, 0.1));
    &:focus {
      border-color: $color-1st;
    }
  }
  span {
    font-size: 18px;
    color: rgba(#000, .35);
    cursor: pointer;
    &.up {
      right: 15px;
    }
    &.down {
      left: 15px;
    }
  }
}

/*============================================================================
owl style
==============================================================================*/
.owl-carousel.owl-style1{
  .owl-nav{
    display: inline-block;
    position: absolute;
    bottom: 100%;
    right: 0;
    padding-bottom: 80px;
    &.disabled{
      display: none !important; 
    }
    >div{
      display: inline-block;
      margin-right: 10px;
      color: rgba(0, 0, 0, 0.5);
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      transition: all 0.4s ease;
      &.owl-prev{
        margin-right: 10px;
      }
      &:hover {
        color: $color-2nd; 
      }
    }
    @media(max-width: 767px) {
      right: 50%;
      padding-bottom: 10px;
      -webkit-transform: translateX(50%);
      -moz-transform: translateX(50%);
      -ms-transform: translateX(50%);
      -o-transform: translateX(50%);
      transform: translateX(50%);
    }
  }
}
/*============================================================================
#Footer
==============================================================================*/
footer{
  .title{
    text-transform: uppercase;
    font-size: 12px;
    display: block;
    letter-spacing: 2.5px;
    margin-bottom: 20px;
    color: #8f8f8f;
    font-weight: 400; 
  }
  .social-icons{
    margin-bottom: 40px;
    a{
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center; 
      border-radius: 50%;
      background: #f3f3f3;
      display: inline-block; 
      color: #3e3e3e;
      margin-right: 9px;
      font-size: 16px;
      &:hover {
        background: #3e3e3e;
        color: #fff;
      }
    }
  }
  .footer-list{
    @media(max-width: 991px) {
      margin-bottom: 35px;
    }
    li{
      line-height: 19px;
      margin-bottom: 12px;
      text-transform: capitalize; 
    }
  }
  .newsletter-box{
    p{
      font-size: 14px;
      margin-bottom: 24px;
    }
    .form-group{
      margin-top: 4px;
      position: relative; 
      @media(max-width: 991px) {
        max-width: 400px;
      }
      input{
        width: 100%;
        border-radius: 40px;
        background: #ffffff;
        border: 1px solid #e8e8e8;
        padding-left: 20px;
        height: 40px;
      }
      button{
        position: absolute;
        top: 0px;
        right: 0;
        height: 40px;
        width: 46px;
        font-size: 14px;
        color: #3e3e3e;
        background: transparent;
        @include transition(all 0.3s ease); 
        @media(max-width: 991px) {
          padding: 0 25px;
        }
        &:hover {
          @include opacity(.7); 
        }

      }
    }
  }
}
.footer-bottom{
  padding: 0px 0;
  margin-top: 5px;
  @media(max-width: 767px) {
    margin-top: 0px;
  }
  border-top: 1px solid #e8e8e8;
  .info-footer{
    .logo{
      @media(min-width: 500px) {
        margin-right: 20px;
        padding-right: 20px;
      }
      position: relative; 
      top: -2px;

      &:after {
        content:"";
        width: 1px;
        background: #e8e8e8;
        height: 30px;
        position: absolute; 
        top: 0;
        right: 0;

      }
      @media(max-width: 1200px) {
        margin-bottom: 10px;
        &:after {
          display: none; 
        }
      }
    }
    p{
      display: inline-block; 
      margin: 0;
    }
    @media(max-width: 767px) {
      text-align: center; 
    }
  }
  .payment{
    text-align: right; 
    @media(max-width: 767px) {
      text-align: center; 
      margin-top: 30px;
    }
  }
}
#back-top {
  position: fixed;
  right:15px;
  z-index: 9;
  @include transition(all 700ms ease-in-out 0s);
  a{
    .sticker-wrapper {
      @include transition(all 100ms ease-in-out 0s);
      .sticker {
        width: 50px;
        text-align: center;
        font-size: 12px;
        border: 2px solid #eee !important;
        border-top: 0;
        border-radius: 8px;
        display: block;
        padding: 7px 0;
        font-weight: 700;
        text-transform: uppercase;
        color: #333;
        background: #fff;
        overflow: hidden;
        i {
          @include transition(all 100ms ease-in-out 0s);
          color: #333;
          font-size: 18px
        }
        span{
          display: block;
          color: #333;
          margin-top: -5px;
        }
        &:hover {
          border: 2px solid #333;
          background:#333333 !important;
          i,span{
            color: #fff;
          }
        }
      }
    }
  }
}

/* Other */
.active div.effect-pageLeft {
  @include animation(pageLeft 600ms ease both);
  -webkit-animation-delay: 300ms;
}
.active div.fadein {
  @include animation(fade-out .5s ease-in);
  -webkit-animation-delay: 300ms;
}
#resultLoading,
.cartloading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  text-align: center;
  .spinner  {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50px;
    width: 50px;
    margin-top: -25px !important;
    margin-left: -25px;
    text-align: center;
    font-size: 10px;
    .circle {
      height: 40px!important;
      width: 40px!important;
      margin: 0 auto;
      border-bottom: 4px solid #dfdfdf;
      border-left: 4px solid #dfdfdf;
      border-right: 4px solid $main-color;
      border-top: 4px solid $main-color;
      @include border-radius(100%);
      @include animation(circlespin .8s infinite linear);
    }
  }
}
/*============================================================================
Page Loading
==============================================================================*/
//loading slider

.wrapper {
  padding-left: 0px;
  padding-right: 0px;
  margin: auto;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: #fff;
}

.cssload-loader {
  position: absolute;
  top: 45%;
  left: 50%;
  @include transform(translate(-50%, -50%));
  width: 49px;
  height: 49px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  background:$main-color;
  margin-left: -25px;
}
.cssload-loader,
.cssload-loader:before,
.cssload-loader:after {
  animation: 1.15s infinite ease-in-out;
  -o-animation: 1.15s infinite ease-in-out;
  -ms-animation: 1.15s infinite ease-in-out;
  -webkit-animation: 1.15s infinite ease-in-out;
  -moz-animation: 1.15s infinite ease-in-out;
}
.cssload-loader:before,
.cssload-loader:after {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.cssload-loader { animation-name: cssload-loader;
  -o-animation-name: cssload-loader;
  -ms-animation-name: cssload-loader;
  -webkit-animation-name: cssload-loader;
  -moz-animation-name: cssload-loader; }


@keyframes cssload-loader {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(1); opacity: 0; }
}

@-o-keyframes cssload-loader {
  from { -o-transform: scale(0); opacity: 1; }
  to   { -o-transform: scale(1); opacity: 0; }
}

@-ms-keyframes cssload-loader {
  from { -ms-transform: scale(0); opacity: 1; }
  to   { -ms-transform: scale(1); opacity: 0; }
}

@-webkit-keyframes cssload-loader {
  from { -webkit-transform: scale(0); opacity: 1; }
  to   { -webkit-transform: scale(1); opacity: 0; }
}

@-moz-keyframes cssload-loader {
  from { -moz-transform: scale(0); opacity: 1; }
  to   { -moz-transform: scale(1); opacity: 0; }
}

//header-search
.search-bar {
  .form-search {
    width: 100%;
  }
  input[type=search] {
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    height: 48px;
    background-color: #fff;
    text-indent: 10px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    border-radius: 25px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    float: left;
    font-size: 20px;
    font-weight: 500;
    padding-left: 30px;
    width: calc(100% - 250px);
    color: $main-color; 
    &:focus {
      outline: 0;
    }
  }
  .search-text{
    text-align: right;
    font-size: 90%;
    color: #a9803c;
    padding-top: 112px;
    display: block;
    @media(max-width: 991px) {
      display: none; 
    }
  }
  .btn-button {
    position: absolute;
    right: 0;
    float: right;
    width: 240px;
    text-align: center;
    background-color: #ca2028;
    color: #fff;
    border-radius: 30px;
    top:0px;
    @media(max-width: 1200px){
      max-width: 180px;
    } 
    @media(max-width: 600px){
      max-width: 180px;
      position: static !important;  
      float: none !important; 
      margin: 0 auto;
      display: block; 
    }
    &:hover {
      background: #333;
    }
  }
}
.home-search {
  background: rgba(255, 255, 255, 0.95);
  display: none;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  > div {
    height: 100%;
    width: 100%;
    display: table;
    table-layout: fixed;
  }
}
.popup{
  display: table-cell;
  vertical-align: middle;
}
.home-search {
  form {
    max-width: 50%;
    margin: 0 auto;
  }
  .input-group-field {
    border: 0;
    background: transparent;
    color: #262626;
    font-size: 4rem;
    line-height: 5rem;
    border-bottom: 2px solid #262626;
    height: 6rem;
    width: 100%;
    outline: invert none medium;
  }
}
.close-search {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #fff;
  font-size: 2rem;
  line-height: 4rem;
  width: 4rem;
  text-align: center;
  transition: color 250ms, border-color 250ms;
  &:hover {
    color: #999 !important;
    border-color: #999 !important;
  }
}
//search page
.search-form{
  .ps-btn, button.ps-btn{
    height: 46px;
    line-height: 46px;
  }
}
/*============================================================================
Tab Collections
==============================================================================*/

/*============================================================================
Featured Box
==============================================================================*/
.sh-featured{
  .spr-badge-caption{
    display: none;
  }
  .col-sm-4{
    .owl-stage-outer {
      overflow: hidden;
      .owl-item {
        >div >div{
          border: 1px solid #ddd;
          margin-bottom: 20px;
          border-radius: 5px;
          overflow: hidden;
          @include transition(all .4s);
          &:hover {
            border: 1px solid $main-color;
          }
          &:last-child {
            margin-bottom: 0px;
          }
          .row{
            margin: 0px -10px;
          }
          .product-content{
            padding: 0px 10px;
            padding-top: 10px;
            .product-name{
              a{
                display: inline-block;
                margin-bottom: 19px;
                margin-top: 4px;
                font-weight: 500;
                font-size: 14px;
              }
            }
          }
          .product-action{
            padding: 0px 10px;
          }
        }
      }
    }
  }
}
//canvas
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #232528; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.offcanvas{
  .hover-content a{
    color: #fff;
  }
  li.level-top{
    border-bottom: 1px solid #111112;
  }
  .closebtn{
    color: #333;
    font-size: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    background: #fff;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 3px;
    line-height: 28px;
    &:hover {
      background: $main-color;
      color: #fff;
    }
  }
}
//faq//
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


ul {
  list-style-type: none;
}



/** =======================
* Contenedor Principal
===========================*/


.accordion {

  li{
    margin-bottom: 20px;
    padding: 30px;
    background-color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    -ms-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    font-weight: 400;
    &:last-child .link {
      border-bottom: 0;

    }
    .link {
      margin-bottom: 0;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.56em;
      text-align: left;
      color: #000000;
      position: relative;
      margin-bottom: 10px;
      cursor: pointer;      
      i {
        position: absolute;
        top: 16px;
        left: 12px;
        font-size: 18px;
        color: #595959;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
      }

      &:first-child {
        border-radius: 5px 5px 0px 0px;
      }
    }
    .sub-menu{
      font-size: 15px;
      line-height: 1.6em;
      color: rgba(0, 0, 0, 0.5);
    }
  }
}
.accordion li i.fa {
  right: 0;
  left: auto;
  font-size: 14px;
  top: 0;
  color: #000000;
}

.accordion li.open i.fa {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.accordion li .submenu {display: none; }

.accordion li.default .submenu {display: block; }
/**
* Submenu
-----------------------------*/


//other
.categories .menu li.lv0 a.lv-top{
  &:hover {
    &:after{
      background: $main-color;
    }
    &:before {
      border-left: 4px solid $main-color !important;
    }

  }
}
.no-product{
  border: 1px solid #ddd;
}
.hide-nav .owl-nav >div{
  display: none !important;
}
//look
.sh-lookbook{
  .image-lookbook{
    position: relative;
    img{
      width: 100%;
    }
  }
  .point{
    >.fa{
      color: #333;
      background: #fff;
      border-radius: 50%;
      z-index:1;
      display: inline-block;
      width: 20px;
      height: 20px;
      text-indent: -9999px;

    }
    .product-hot{
      position: absolute;
      width: 200px;;
      height: 300px;
      background: #fff;
      display: none;
    }
    &:hover {
      .product-hot{
        display: block;
      }
    }
  }
}
//exit
.box2{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}




@media (min-width: 768px){
  .box2 {
    width: 750px;
  }
}
@media (min-width: 992px){
  .box2 {
    width: 970px;
  }
}
@media (min-width: 1200px){
  .box2 {
    width: 1170px;
  }
}
.zoomContainer{
  @media(max-width: 991px) {
    display: none; 
  }
}
h1, h2, h3, h4, h5, h6 {
  position: relative;
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 500;
  color: #000;
}

.mb30{
  margin-bottom: 30px;
}
@media(max-width: 500px){
  .full-xs{
    width: 100%; 
  }
} 

/****************** Page portfolio **************************/
.ps-post--portfolio {
  margin-bottom: 40px;
  .ps-post__thumbnail {
    margin-bottom: 30px;
    position: relative;
    img {
      width: 100%;
    }
    &:before {
      content: '';
      @include max-area();
      background-color: rgba(#fff, .5);
      @include transition(all .4s ease);
      @include hidden;
    }
    .ps-post__morelink {
      @include center();
      z-index: 20;
      min-width: 165px;
      text-align: center;
      @include hidden;
    }
    &:hover {
      &:before {
        @include show;
      }
      .ps-post__morelink {
        @include show;
      }
    }
  }
  .ps-post__content {
    text-align: center;
    h3 {
      font-size: 24px;
      font-weight: 300;
      line-height: 1.46em;
      color: #000;
      cursor: default;
    }
    p {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .06em;
      text-align: center;
      color: rgba(#000, .5);
      text-transform: uppercase;
    }
  }
}
.group{
  text-align: center; 
  #load-more{
    margin-top: 50px;
    background-color: #000;
    color: #fff;
    -webkit-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.2);
    display: inline-block;
    padding: 15px 35px 13px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 20px;
    border: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    border-radius: 25px;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
    &:hover {
      color: #fff;
      background: $color-1st; 
    }
  }
}
.page-portfolio{
  &.style3{
    .ps-post__header {
      padding: 100px 0;
      background-color: #333;
      p{
        color: rgba(255, 255, 255, 0.5);
      }
      h3{
        color: #fff;
        margin-bottom: 30px;
      }
    }
    .ps-post__project-info{
      text-align: left;
      max-width: 100%;
    }
    .ps-social {
      margin-top: 0;
    }
    .ps-col-tiny{
      p{
        display: inline-block; 
      }

    }
    .ps-about-gallery{
      clear: both; 
      margin-top: 100px;
      @media(max-width: 420px) {
        margin-top: 50px;
      }
    }
  }
  .button-group{
    text-align: center; 
    margin-bottom: 50px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    padding: 13px 0px;
    button{
      display: inline-block;
      padding: 10px 0;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .05em;
      color: rgba(0, 0, 0, 0.5);
      text-transform: uppercase;
      line-height: 20px;
      outline: none !important; 
      position: relative; 
      background: #fff;
      margin-right: 50px;
      &:last-child {
        margin: 0;
      }
      &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 40%;
        width: 5px;
        height: 5px;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: #ca2028;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        transition: all 0.4s ease;      
      }
      &.is-checked, &:hover {
        color: #333;
        &:before {
          visibility: visible; 
          opacity: 1;
        }
      }
    }
  }
  .wrap{
    .image-project{
      position: relative; 
      margin-bottom: 30px;
      img{
        width: 100%; 
        @include transition(all .3s); 
      }
      a{
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 20;
        min-width: 165px;
        text-align: center;
        visibility: hidden;
        opacity: 0;
      }
      &:hover {
        a{
          visibility: visible;
          opacity: 1;

        }
        img{
          opacity: 0.6;
        }
      }
    }

    .ps-post__content{
      text-transform: capitalize; 
      text-align: center; 
      h3{
        font-size: 24px;
        font-weight: 300;
        line-height: 1.46em;
        color: #000;
        cursor: default;
      }
      p{
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .06em;
        text-align: center;
        color: rgba(0, 0, 0, 0.5);
        text-transform: uppercase;
      }
    }
  }
}
.ps-post--portfolio-single {
  .ps-post__header {
    margin-bottom: 100px;
    text-align: center;
    .ps-heading {
      margin-bottom: 30px;
    }
  }
  .ps-post__project-info {
    max-width: 760px;
    margin: 0 auto;
    padding: 100px 0;
    text-align: center;
    h4 {
      margin-bottom: 20px;
      font-size: 20px;
      letter-spacing: .1em;
      font-weight: 500;
      color: #000000;
    }
  }
  .ps-social {
    margin: 50px 0;
    @media(max-width: 420px) {
      margin: 30px 0 !important; 
    }
    strong {
      margin-right: 10px;
      font-size: 18px;
      font-weight: 600;
      line-height: 2em;
      text-align: center;
      color: #000;
    }
    a {
      margin-right: 15px;
      color: #000;
      &:hover {
        color: #ca2028;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .ps-product__footer {
    padding: 30px 0;
    border-top: 1px solid rgba(#000, .1);
    a {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      color: #000;
      text-transform: uppercase;
      i {
        margin-right: 5px;
        font-size: 14px;
        vertical-align: middle;
      }
      &:hover {
        color: #ca2028;
      }
      &.next {
        float: right;
        i {
          margin-right: 0;
          margin-left: 5px;
        }
      }
    }
  }
  &.second {
    .ps-post__header {
      margin-bottom: 50px;
    }
    .ps-post__project-info {
      padding-top: 0;
    }
  }
  &.third {
    .ps-post__header {
      padding: 100px 0;
      background-color: #333;
      .ps-heading {
        color: #fff;
      }
      p {
        color: rgba(#fff, .5);
      }
    }
    .ps-post__project-info {
      padding-top: 0;
      max-width: 100%;
      text-align: left;
    }
    .ps-social {
      margin-top: 0;
      a{
        &:hover {
          color: #ca2028;
        }
      }
    }

    .ps-product__footer {
      margin-top: 150px;
      margin-bottom: 100px;
    }
  }

}

//index 4
.ps-collection--4 {
  padding: 0 110px 5px;
  clear: both; 
  overflow: hidden; 
  &:hover {
    .ps-collection__overlay {
      background-color: rgba(#fff, .5);
    }
    .ps-collection__name{
      transform: translateY(-16px);

    }
  }
  .ps-collection__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .ps-collection__thumbnail {
    position: relative;
    margin-bottom: 40px;
  }
  img {
    width: 100%;
  }
  .ps-collection__name {
    position: relative;
    float: left;
    margin-bottom: 0;
    margin-left: 50px;
    padding-top: 5px;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.5em;
    color: #000;
    @include transition(all .4s); 
    text-transform: uppercase;
    span {
      position: absolute;
      bottom: 100%;
      left: 2px;
      width: 2px;
      height: 50px;
      background-color: #000;
    }
  }
  .ps-btn--underline {
    float: right;
  }
  &.large {
    padding: 0 23px;
  }
  &:hover {
    .ps-collection__overlay {
      background-color: rgba(#fff, .5);
    }
  }
  @media(max-width: 1200px)  {
    padding: 0 50px;
  }
}

//header-search
.search-bar {
  .form-search {
    width: 100%;
  }
  input[type=search] {
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    background-color: #fff;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    float: left;
    font-size: 20px;
    padding-left: 30px;
    width: calc(100% - 250px);
    width: 100%;
    height: 100px;
    color: #eaba82;
    background: transparent;
    padding: 0.8em 0;
    border: 0;
    border-bottom: 5px solid $main-color; 
    transform-origin: 0% 50%;
    transition: transform 0.3s;
    border-radius: 0;
    &:focus {
      outline: 0;
    }
  }
  .btn-button {
    position: absolute;
    right: 0;
    float: right;
    width: auto;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    bottom: 0px;
    top: auto;
    background: transparent;
    font-size: 22px;
    @media(min-width: 1200px){
      display: none; 
    } 
    &:hover {
      background: $color-1st; 
    }
  }
}
.home-search {
  background: rgba(0,0,0, .85);
  display: none;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  > div {
    height: 100%;
    width: 100%;
    display: table;
    table-layout: fixed;
  }
}
.popup{
  display: table-cell;
  vertical-align: middle;
}
.home-search {
  form {
    max-width: 70%;
    margin: 0 auto;
    @media(max-width: 600px) {
      max-width: 90%;
    }
  }
  .input-group-field {
    border: 0;
    background: transparent;
    color: #262626;
    font-size: 4rem;
    line-height: 5rem;
    border-bottom: 2px solid #262626;
    height: 6rem;
    font-style: italic;
    width: 100%;
    outline: invert none medium;
  }
}
.close-search {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #fff;
  font-size: 2rem;
  line-height: 4rem;
  width: 4rem;
  text-align: center;
  transition: color 250ms, border-color 250ms;
  &:hover {
    color: #999 !important;
    border-color: #999 !important;
  }
}
//home-newsletter
.home-newsletter{
  .newsletter-box{
    padding: 100px 0 90px 0;
    text-align: left;
    max-width: 50%;
    @media(max-width: 1700px) {
      max-width: 70%;
    }
    @media(max-width: 1200px) {
      max-width: 80%;
    }
    @media(max-width: 991px) {
      max-width: 100%;
    }
    @media (max-width: 580px) {
      text-align: center;
      .password__input-group {
        input, button {
          width: 100%;
          float: none;
        }
        input {
          margin-bottom: 20px;
        }
      }
    }
  }
  h3{
    margin-bottom: 20px;
  }
  p{
    margin-bottom: 50px;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.5);
    line-height: 1.67em;
  }
  .password__input-group{
    clear: both; 
    overflow: hidden; 
    padding: 10px 0px;
  }
  input{
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    height: 48px;
    background-color: #fff;
    border: solid 1px #f3f3f3;
    text-indent: 10px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    border-radius: 25px;
    -webkit-box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    -ms-box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    float: left;
    width: calc(100% - 250px);
  }
  button{
    float: right;
    width: 240px;
    text-align: center;
    background-color: #ca2028;
    color: #fff;  
  }
}

//font icon

@font-face {
  font-family: 'exist-font';
  src:  url('exist-font.eot?yjbwlg');
  src:  url('exist-font.eot?yjbwlg#iefix') format('embedded-opentype'),
    url('exist-font.ttf?yjbwlg') format('truetype'),
    url('exist-font.woff?yjbwlg') format('woff'),
    url('exist-font.svg?yjbwlg#exist-font') format('svg');
  font-weight: normal;
  font-style: normal;
}

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

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

.exist-compare:before {
  content: "\e900";
}
.exist-freeship:before {
  content: "\e901";
}
.exist-heart:before {
  content: "\e902";
}
.exist-hotline:before {
  content: "\e903";
}
.exist-leftarrow:before {
  content: "\e904";
}
.exist-minicart:before {
  content: "\e905";
}
.exist-money:before {
  content: "\e906";
}
.exist-notification:before {
  content: "\e907";
}
.exist-play .path1:before {
  content: "\e908";
  color: rgb(0, 0, 0);
}
.exist-play .path2:before {
  content: "\e909";
  margin-left: -1em;
  color: rgb(155, 155, 155);
}
.exist-play .path3:before {
  content: "\e90a";
  margin-left: -1em;
  color: none;
}
.exist-play .path4:before {
  content: "\e90b";
  color: #333;
  font-size: 60px;
  @include center();
}
.exist-quickview:before {
  content: "\e90c";
}
.exist-rightarrow:before {
  content: "\e90d";
}
.exist-search:before {
  content: "\e90e";
}
.exist-shipping:before {
  content: "\e90f";
}
.exist-support:before {
  content: "\e910";
}
.exist-user:before {
  content: "\e911";
}
.exist-zoom:before {
  content: "\e912";
}

//footer-1
.wrap-footer1 {
  .ps-footer__content {
    padding: 120px 0 90px;
  }
  .ps-site-info {
    max-width: 520px;
    .ps-logo {
      display: inline-block;
      margin-bottom: 20px;
      max-width: 100px;
    }
    > p {
      margin-bottom: 40px;
      color: $color-text;
      font-size: 15px;
      line-height: 1.67em;
    }
  }
  .ps-site-info__detail {
    p {
      position: relative;
      text-align: left;
      padding-left: 120px;
      font-size: 15px;
      color: #000;
      span {
        display: inline-block;
        min-width: 100px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        color: rgba(#000, .5);
        line-height: 1.67em;
      }
      a {
        &:hover {
          color: $color-2nd;
          text-decoration: underline;
        }
      }
    }
  }
  .ps-footer__copyright {
    padding: 30px 0;
    border-top: 1px solid rgba(#000, .07);
    p {
      padding: 5px 0;
      margin-bottom: 0;
      line-height: 30px;
    }
  }
  &.gray {
    background-color: #fbfbfb;
    @include box-shadow(0 -2px 4px 0 rgba(0, 0, 0, 0.07));
  }
  @media(max-width: 1200px) {
    .ps-footer__content {
      padding: 70px 0 50px;
    }
  }
  @media(max-width: 991px) {
    .ps-footer__content {
      padding: 50px 0;
    }
    padding-top: 50px;
    .ps-footer__copyright {
      text-align: center;
    }
    .ps-footer__social {
      text-align: center;
    }
  }
}

.ps-inner-footer.black {
  padding-top: 80px;
  background-color: #202020;
  .widget {
    .widget-title {
      color: #fff;
    }
    li {
      a {
        color: rgba(#fff, .5);
        &:hover {
          color: $color-2nd;
        }
      }
    }
  }
}
//widget 
.widget {
  .clear{
    position: absolute;
    right: 0;
    font-size: 13px;
    font-weight: 400;
    background: #333;
    color: #fff;
    margin: 0;
    padding: 0 10px;
    line-height: 22px;
    z-index:11;
    &:hover {
      background: $color-1st; 
    }
  }
  &.block-categories{
    a{
      display: block;
      font-size: 14px;
      line-height: 24px;
      text-align: left;
      color: #8f8f8f;
      text-transform: capitalize; 
      margin-bottom: 12px;
      &.active{
        color: $main-color;  
      }
      &:hover {
        color: $main-color; 
      }
    }
  }
  &:last-child {
    border: 0;
  }
  &.last{
    border: 0;
  }
}
.widget_categories {
  ul {
    li {
      a {
        font-size: 15px;
        line-height: 2.5em;
        text-align: left;
        color: rgba(#000, .5);
        &:hover {
          color: $color-2nd;
        }
      }
    }
  }
}

footer {
  .widget_categories {
    ul {
      li {
        a {
          text-transform: capitalize; 
        }
      }
    }
  }
}
//body
body {
  position: relative;
  overflow-x: hidden;
}
.clearfix {
  clear: both;
}
.btn {
  /* background-color: {{ settings.theme_general_theme_color }}; */
  background-color: #343233;
  padding: 10px 15px;
}
.quick-view .overlay,
.ajax-success-modal .overlay {
  height: 100%;
  width: 100%;
  position: fixed;
}
.quickview-template,
.quick-view {
  display: none;
  left: 0;
  outline: 0 none;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1050;
}
.quickview-template .content-wrap,
.quick-view .content-wrap {
  position: relative;
  width: 90%;
  margin: 50px auto;
  background: #fff;
}
@media (min-width: 1200px) {
  .quickview-template .content-wrap,
  .quick-view .content-wrap {
    width: 1170px;
  }
}

/************************************** Header **************************************/
.template-index{
  background: #f3f3f3;
}
header{
  position: relative;
  .header-logo{
    @media(max-width: 767px) {
      text-align: center; 
    }
    img{
      max-width: {{ settings.logo_width }}px;
    }
  }
  .header-sub{
    text-align: right; 
    float: right; 
    @media(max-width: 767px) {
      margin-top: 15px;
    }
    .currency{
      margin-right: 5px;
      .fa{
        padding-left: 5px;
      }
    }
  }
  .header-menu{
    .nou_megamenu{
      display: table; 
      padding-left: 100px; //custom coding before zero px
      flex-grow: 1;
    }

  }
  .header-currency{
    .currency-picker{
      font-size: 11px;
      color: #000;
      font-weight: bold; 
    }
    i {
      margin-left: 2px;
      font-size: 12px;
      color: $color-text; 
    }
  }
  .header-sub{
    >div{
      position: relative; 
      display: inline-block; 

      &:hover {
        .icon{
          color: $color-1st; 
        }
      }
      .icon{
        cursor: pointer; 
        color: #111;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        text-align: center; 
      }
    }
  }
  &.header-sticky{
    &.fixed{
      position: fixed !important; 
      background: #fff !important; 
      z-index:25;
      left: 0;
      right: 0;
      top: 0;
      -webkit-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1);
      -ms-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1);
      box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1); 
      .header-middle{
           padding: 0px 0 18px 0px !important;

      }
      .hd-sticky{
        display: none; 
      }
    }
  }
  &.style4{
    border-bottom: 1px solid rgba(0,0,0,0.1);
    position: relative; 
    top: 0;
    left: 0;
    width: 100%; 
    @media(max-width: 1200px) {
      padding: 30px 0;
      background: #fff;
    }
    .menu-toggle{
      width: 33px;
      position: relative;
      cursor: pointer; 
      top: -2px;
      @media(max-width: 767px) {
        width: 25px;
      }
      &:hover {
        span{
          background: $main-color !important; 
          &:after , &:before {
            background: $main-color !important; 
          }
        }
      }
      @media(max-width: 479px) {
        margin-right: 10px;
      }
      span{
        position: relative;
        width: 100%;
        height: 2px;
        display: block;
        -webkit-transition-delay: .4s;
        transition-delay: .4s;
        -webkit-transition-duration: .5s;
        transition-duration: .5s;
        background: $color-text; 
        &:before , &:after {
          content: '';
          position: absolute;
          left: 0;
          width: 100%;
          height: 2px;
          background-color: inherit;
          -webkit-transition-delay: .4s;
          transition-delay: .4s;
          -webkit-transition-duration: .5s;
          transition-duration: .5s;
        }
        &:before {
          top: -8px;
        }
        &:after {
          bottom: -8px;
        }
      }
      &.active{
        span{
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
          &:after , &:before {
            width: 50%;
          }
          &:after {
            -webkit-transform: rotate(-45deg) translate(14px, 11px);
            transform: rotate(-45deg) translate(14px, 11px);
          }
          &:before {
            -webkit-transform: rotate(45deg) translate(14px, -11px);
            transform: rotate(45deg) translate(14px, -11px);
          }
        }
      }
    }

    .header-sub{
      >div{
        position: relative; 
        display: inline-block; 
        &.header-minicart{
          @media(max-width: 767px) {
            position: static; 
            .dropminicart-content{
              right: 30px !important;  
            }
          }
          @media(max-width: 600px) {
            position: static; 
            .dropminicart-content{
              width: auto !important; 
              left: 30px !important; 
              min-width: auto !important; 
            }
          }
        }
        &:last-child .icon{
          margin: 0;
        }

        &:hover {
          .icon{
            color: $main-color; 
          }
        }
        .icon{
          cursor: pointer; 
          color: #111;
          width: auto;
          height: auto;
          line-height: 1;
          font-size: 24px;
          text-align: center; 
          margin-right: 32px;
          @media(min-width: 1200px) {
            &.ht-ico-cart {
              margin: 0;
            }
          }
        }
      }
      @media(max-width: 1200px) {
        .dropdown-menu{
          right: 0;
          left: auto;
        }
      }
      @media(max-width: 767px) {
        .dropdown-menu{
          right: -75px;
          left: auto;
        }
      }
    }
    @media(max-width: 767px) {
      .flex-box-sm{
        .header-sub>div .icon {
          font-size: 20px;
        }
      }
    }
    &.header-sticky{
      &.fixed{
        position: fixed !important; 
        background: #fff !important; 
        z-index:25;
        left: 0;
        right: 0;
        top: 0;
        -webkit-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1);
        -ms-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1); 
        .header-middle{
          padding: 0px 0 18px 0px !important;

        }
        .nou_megamenu .nav-item>a.site-nav-link{
          padding: 15px 0;
        }
        .hd-sticky{
          display: none; 
        }
      }
    }
  }
}
.template-product, .template-index{
  header.style4{
    position: relative;
  }
}
.template-index header.style4{
  border: 0;
}
.second-menu{
  position: relative; 
  z-index:22;
  >ul {
    display: table; 
    float: left; 
    >li{
      position: relative; 
      line-height: 1;
      display: inline-block; 
      float: left; 
      &:hover {
        >a{
          color: $main-color; 
        }
      }
      >a{
        line-height: 117px;
        padding: 0 20px;
        font-size: 16px;
        font-weight: 400;
        text-transform: none;
        color: #3e3e3e;
      }
      ul{
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 110%;
        left: 0;
        margin-left: 0;
        background: #fff;
        min-width: 180px;
        text-align: left;
        z-index: 2;
        @include transition(all 0.3s ease); 
        -webkit-box-shadow: 1px 4px 4px 0 rgba(0,0,0,0.1);
        box-shadow: 1px 4px 4px 0 rgba(0,0,0,0.1);
        border-radius: 0 0 4px 4px;
      }
      &:hover {
        >ul{
          opacity: 1;
          visibility: visible;
          -webkit-transform: scaleY(1);
          transform: scaleY(1);
          top: 100%;
        }
        >a{
          color: $main-color !important; 
        }
      }
      li{
        &:hover {
          ul{
            opacity: 1;
            visibility: visible;
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            top: 100%;
          }
          >a{
            color: $main-color !important; 
            background: rgba(239,239,239,0.28);
          }
        }
        a{
          display: block;
          line-height: 24px;
          padding: 10px 20px;
          white-space: nowrap;
          font-size: 14px;
          font-weight: 400;
          text-transform: none;
          @include transition(all 0.3s ease); 
          color: #8f8f8f;
        }
      }
    }

  }
}
.dropdown-content{
  display: none; 
  text-align: left; 
}

.header {
  .header-container {
    .header-top {
      min-height: 42px;
      background-color: #000;
      color: #fff;
      ul.socials {
        padding: 0;
        margin: 0;
        li {
          display: inline-block;
          a {
            color: #fff;
            font-size: 16px;
            width: 42px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            display: block;
            &:hover {
              color: {{ settings.theme_general_theme_color }};
            }
          }
          a > span {
            display: none;
          }
        }
      }
      .language-currency {
        .lang-block, .currency-block, .top-link {
          float: right;
        }
        .lang-block, .currency-block {
          margin-left: 15px;
          line-height: 42px;
          position: relative;
          a {
            color: #fff;
            i.fa {
              padding-left: 5px;
            }
          }
          .dropdown-menu {
            right: 0;
            left: auto;
            a {
              color: {{ settings.theme_body_text_color }};
            }
          }
          &:hover {
            .dropdown-menu {
              display: block;
            }
          }
        }
        .link-myaccount {
          position: relative;
          a.dropdown-toggle i.fa {padding-left: 5px;}
          ul.dropdown-menu {
            li {
              width: 100%;
              margin: 0;
              padding: 0;
              a {
                color: {{ settings.theme_body_text_color }};
                line-height: 22px;
              }
            }
          }
          &:hover ul.dropdown-menu {
            display: block;
          }
        }
        .top-link {
          ul {
            margin: 0;
            padding: 0;
            li {
              float: left;
              margin-left: 10px;
              padding-left: 10px;
              a {
                color: #fff;
                line-height: 42px;
              }
            }
          }
        }
      }
    }
    .header-middle {
      @include transition(all 0.3s ease); 
      .header-minicart {
        .minicart-top {
          position: relative; 
          padding-right: 20px;

          i.fa {
            color: {{ settings.theme_general_theme_color }};
            font-size: 18px;
          }
          span#minicart-count {
            position: absolute;
            left: 17px;
            top: -6px;
            line-height: 20px;
            font-size: 8px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #000;
            color: #fff;
            font-family: sans-serif;
            text-align: center;
          }
        }
        .dropminicart-content {
          position: absolute;
          z-index: 99;
          right: 15px;
          top: 42px;
          background: #fff;
          -webkit-box-shadow: 0 12px 30px 0 rgba(0,0,0,0.12);
          -moz-box-shadow: 0 12px 30px 0 rgba(0,0,0,0.12);
          -ms-box-shadow: 0 12px 30px 0 rgba(0,0,0,0.12);
          box-shadow: 0 12px 30px 0 rgba(0,0,0,0.12);
          min-width: 300px;
          padding: 20px;
          .no-items {
            display: none;
            text-align: center; 
          }
          .minicart-products-list {
            display: block;
            overflow: hidden;
            a.product-image {
              display: block;
              float: left;
              margin-right: 10px;
            }
            li.item {
              position: relative;
              padding-right: 10px;
              clear: both; 
              margin-bottom: 10px;
              overflow: hidden; 
            }
            .btn-remove {
              position: absolute;
              right: 0;
            }
            .product-info {
              overflow: hidden;
            }

          }
          .minicart-actions{
            .link-cart{
              float: right; 
            }
          }
          .minicart-totals {
            .price-total {float: right;}
          }
        }
      }
    }
  }
}
//mobile menu
.mobile-menu{
  margin-left: 15px;
}
//box result
.box-results {
  z-index: 8000;
  list-style-type: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #ccc;
  overflow: hidden;
  .thumbnail {
    float: left;
    display: inline-block;
    width: auto;
    height: 50px;
    margin: 5px;
    padding: 0;
    text-align: center;
    overflow: hidden;
    border-radius: 0;
  }
  .title_name {
    float: left;
    padding-left: 10px;
    overflow: hidden;
    margin-top: 10px;
    line-height: 100%;
  }
}

@media (min-width: 768px) {
  .menu-fixed .nav-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 99;
    padding: 0;
  }
}
/************************************** 1r **************************************/
.section-home-slider{
  .tp-caption {
    @media(max-width: 1200px) {
      top: 50% !important; 
      @include transform(translate(0%, -50%) !important); 
    }
    @media(max-width: 600px) {
      left: 30px !important; 
    }
    .tp-caption-slide-1{
      text-transform: uppercase;
      font-weight: 300;
      margin-bottom: -5px;
      @media(max-width: 767px) {
        font-size: 30px !important; 
      }
    }
    .tp-caption-slide-2{
      font-weight: 700; 
      white-space: pre-line;
      margin-bottom: -5px;
      @media(max-width: 767px) {
        font-size: 34px !important; 
      }
    }
    .tp-caption-slide-3{
      font-weight: 700; 
      white-space: pre-line;
      @media(max-width: 767px) {
        font-size: 34px !important; 
      }
    }
    .tp-caption-button{
      a{
        display: inline-block;
        margin-top: 40px;
        height: 40px;
        line-height: 40px;
        text-transform: capitalize;
        font-weight: 500;
        padding: 0px 50px;
        @include transition(all 0.3s ease); 
        @media(max-width: 500px) {
          margin-top: 15px;
        }
        i{
          padding-left: 5px;
          font-size: 20px;
          line-height: 1;
          position: relative;
          top: 3px;        }
        &:hover {
          @include opacity(.7); 
        }
      }
    }
  }
}
.tp-bullets{
  z-index: 33 !important; 
}
/************************************** V1-banner **************************************/
.banner{
  img{
    @include transition(all 0.3s ease); 
  }
  &:hover {
    img{
      opacity: 0.7;
    }
  }
}
.ps-home-1--collection{
  margin-bottom: -30px;
  .banner{
    margin-bottom: 30px;
    @media(max-width: 420px) {
      margin-bottom: 15px;
    }
  }
}
.ps-collection {
  position: relative;
  z-index: 10;
  .ps-collection__morelink {
    display: inline-block;
    @include center();
    min-width: 180px;
    z-index: 10;
    padding: 15px 35px 13px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 20px;
    background-color: #fff;
    text-align: center;
    @include transition(all .6s ease-out);
    color: #000000;
    @media(max-width: 420px) {
      padding: 15px;
    }
    &:hover, &:focus {
      background-color: #000;
      color: #fff;
    }
  }
}

/************************** Newsletter Popup ***************************/
.newsletter-wrap {
  position: relative;
  #colorbox {
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1080;
    .overlay {
      background: #000;
      opacity: .5;
      height: 100%;
      position: absolute;
      width: 100%;
    }
    .newsletter-box {
      display: none;
      min-height: 300px;
      margin: 0 auto;
      position: relative;
      top: 25%;
      width: 700px;
      .newsletter-inner {
        position: relative;
        background: #fff;
        padding: 20px;
        .btn.close {
          padding: 0;
          width: 30px;
          height: 30px;
          position: absolute;
          right: 0px;
          top: 0px;
          z-index: 9;
          border: 0;
          cursor: pointer;
          opacity: 1;
          line-height: 30px;
          text-align: center;
          border-radius: 0;
        }
        .block-title {
          display: block;
          text-align: center;
          font-size: 150%;
          font-weight: bold;
          margin-bottom: 20px;
        }
        .intro {
          text-align: center;
          font-size: 116.7%;
          margin-bottom: 20px;
        }
        .subscibe-action {
          input.input-group-field {
            height: 46px;
            line-height: 46px;
            width: 100%;
          }
        }
        .social-network {
          margin-top: 30px;
          text-align: center;
          ul li {
            display: inline-block;
            a {
              width: 30px;
              height: 30px;
              border: 1px solid #ccc;
              line-height: 30px;
              text-align: center;
              border-radius: 100%;
              display: inline-block;
              > span {
                display: none;
              }
            }
          }
        }
        .hidden-popup {
          margin-top: 20px;
          text-align: center;
        }
      }
    }
  }
}


/************************** Navigation *********************************/
.nav-mobile .nou_megamenu .nav-item .megamenu-dropdown, .nav-mobile .nou_megamenu .nav-item .sub-menu-dropdown {
  opacity: 1;
  visibility: visible;
}
.nou_megamenu {
  .nav-item {
    display: inline-block;
    position: relative;
    margin-right: 15px; //custom coding before fifty px 
    &:hover, &.active {
      >a.site-nav-link{
        &:before {
          -webkit-transform: scale3d(1, 1, 1);
          -moz-transform: scale3d(1, 1, 1);
          -ms-transform: scale3d(1, 1, 1);
          -o-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
          -webkit-transform-origin: 0 50%;
          -moz-transform-origin: 0 50%;
          -ms-transform-origin: 0 50%;
          -o-transform-origin: 0 50%;
          transform-origin: 0 50%;
        }
      }
    }
    &.dropdown{
      position: relative !important; 
    }
    &.megamenu-full {
      position: static;
    }
    > a.site-nav-link {
      position: relative;
      display: inline-block;
      padding: 49px 0;
      font-size: 16px;
      font-weight: 500;
      line-height: 20px;
      text-transform: capitalize;
      >.fa{
        display: content; 
      }
    }
    > a {
      color: #3e3e3e;
      &:hover {
        color: $main-color; 
      }
    }
    &.has-new-label {
      > a:before {
        content: "New";
        position: absolute;
        top: -17px;
        left: 15px;
        color: #fff;
        font-size: 9px;
        text-transform: uppercase;
        line-height: 18px;
        height: 18px;
        width: 35px;
        text-align: center;
        background: {{ settings.theme_general_theme_color }};
      }
    }
    &.has-hot-label {
      > a:after {
        content: "Hot";
        position: absolute;
        top: -17px;
        right: 0;
        text-align: center;
        background-color: #fb7349 !important;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        border-radius: 20px;
        display: inline-block;
        padding: 0 10px;
        font-size: 10px;
        font-weight: 700;
        color: #fff;
        height: 18px;
        text-transform: uppercase;
        text-align: center;
        min-width: 43px;

      }
    }
    .megamenu-dropdown {
      width: 100%;
      padding: 20px !important; 
      border: 0;
      left: -50%;
      right: -50%;
      .megamenu-wrap {
        > a {
          text-transform: uppercase;
          font-size: 12px;
          display: block;
          padding: 10px 0;
          border-bottom: 1px solid #999;
          color: #111;
          font-weight: bold; 
          letter-spacing: 2px;
        }
        .dropdown {
          margin-top: 10px;
        }
      }
      &.megamenu {
        .megamenu-wrap {
          > a {
            border: 0;
            padding: 0;
            border-bottom: 1px solid #eeeeee;
            font-size: 12px;
            font-weight: bold; 
            color: #111111;
            span.site-nav-title {
              display: block;
              margin-bottom: 10px;
            }
          }
          ul{
            li{
              a{
                line-height: 30px;
                color: #7f7f7f;
              }
            }
          }
        }
      }
      &.style_4 {
        .megamenu-wrap {
          > a {
            text-transform: none;
            font-size: 100%;
          }
        }
      }
    }
    &.megamenu-left {
      .megamenu-dropdown {
        left: 0;
        right: auto;
      }
    }
    &.megamenu-right {
      .megamenu-dropdown {
        right: 0;
        left: auto;
      }
    }
    &.megamenu-full {
      .megamenu-dropdown {
        width: 200%;
        padding: 20px;
        border: 0;
        left: -50%;
        right: -50%;
      }
      &.megamenu-left, &.megamenu-right {
        .megamenu-dropdown {
          left: -50%;
          right: -50%;
        }
      }
    }
    .megamenu-dropdown, .sub-menu-dropdown {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
      background-color: #fff;
      .block-banner {
        @media(max-width: 1200px) {
          margin: 20px 0;
        }
        img{
          @include transition(all 0.3s ease); 
          backface-visibility: hidden; -webkit-backface-visibility: hidden; 
        }
        a{
          display: block; 
          position: relative; 
          &:hover {
            img{
              opacity: .8;
            }
          }
          span{
            @include center();
            min-width: 152px;
            background: #fff;
            text-align: center; 
            padding: 14px 35px 12px;
            top: 73%;
            &:hover {
              background: #333;
              color: #fff;

            }
          }
        }
      }
      @media(max-width: 1200px) {
        box-shadow: none !important; 
      }

      -webkit-transform: translateY(20px);
      -moz-transform: translateY(20px);
      -ms-transform: translateY(20px);
      -o-transform: translateY(20px);
      transform: translateY(20px);
      @media(min-width: 1200px) {
        -webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -moz-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        -webkit-box-shadow: 0 12px 30px 0 rgba(0,0,0,0.12);
        -moz-box-shadow: 0 12px 30px 0 rgba(0,0,0,0.12);
        -ms-box-shadow: 0 12px 30px 0 rgba(0,0,0,0.12);
        box-shadow: 0 12px 30px 0 rgba(0,0,0,0.12);
      }
      a {
        color: #7f7f7f;
        &:hover {
          color: $color-1st; 
        }
      }
      img {
        width: 100%;

      }
    }
    .sub-menu-dropdown {
      min-width: 180px;
      max-width: 250px;
      position: absolute;
      padding: 0px !important;
      top: 100%;
      left: 0;
      z-index: 1000;
      background-color: #fff;
      -webkit-box-shadow: 1px 4px 4px 0 rgba(0,0,0,0.1);
      box-shadow: 1px 4px 4px 0 rgba(0,0,0,0.1);
      border-radius: 0 0 4px 4px;
      li {
        line-height: 30px;
        a {
          display: block;
          position: relative;
          z-index: 10;
          padding: 10px 15px;
          font-size: 14px;
          line-height: 20px;
          color: #7f7f7f;
          font-weight: 400;
          -webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          -moz-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
          text-transform: capitalize; 
          i.fa {
            position: absolute;
            right: 10px;
            font-size: 12px;
            top: 50%;
            transform: translate(0,-50%);
          }
          &:hover {
            color: $color-1st; 
            background: rgba(239,239,239,0.28);
          }
        }
        .sub-menu-dropdown {
          left: 100%;
          top: -1px;
        }
        &:hover {
          > .sub-menu-dropdown {
            visibility: visible;
            opacity: 1;
            -webkit-transform: translateY(0);
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0);
          }
        }
      }
    }    
    &:hover {
      .megamenu-dropdown, > .sub-menu-dropdown {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
      }
    }
  }
}

/************************** Sidebar ************************************/
.block-sidebar{
  margin-bottom: 20px;
}
/************************** Toolbar ************************************/
.filter-toggle{
  font-size: 20px;
  i{
    cursor: pointer; 
    color: #000;
    &:hover {
      color: $color-1st; 
    }
  }
}
.toolbar {
  margin-bottom: 50px;
  clear: both;
  overflow: hidden;
  @media(max-width: 991px) {
    margin-bottom: 30px;
  }
  .modes {
    display: inline-block;
    vertical-align: top;
    text-align: right; 
    .mode-label {
      display: none;
    }
    .modes-mode {
      span {
        display: none;
      }
      &.mode-list{
        margin-left: 12px;
      }
    }
    a.modes-mode {
      font-size: 30px;

      color: #8f8f8f;
      background: none;
      border: 0;
      display: inline-block; 
      &.active, &:hover {
        color: $main-color; 
      }
    }
  }
  .toolbar-sorter {
    display: inline-block;
    vertical-align: top;
    text-align: left; 
    @media(max-width: 1200px) {
      text-align: center; 
    }
    @media(max-width: 767px) {
      text-align: right; 
    }
    .sorter-label {
      font-weight: bold; 
      color: #000;
      font-size: 12px;
      padding-right: 36px;
      display: inline-block;
      @media(max-width: 420px) {
        display: none; 
      }
    }
    .sorter-options {
      padding: 10px 15px;
      cursor: pointer;
      font-size: 13px;
      color: #3e3e3e;
      display: inline-block;
      min-width: 200px;
      user-select: none;
      height: auto;
      @media(max-width: 600px) {
        min-width: 150px;
      }
    }
  }
  select {
    height: 30px;
  }
  .menu-category{
    ul{
      padding: 13px 0;
      li{
        display: inline-block;
        margin-right: 50px;
        @media(max-width: 1400px) {
          margin-right: 30px;
        }
        &.active a{
          color: #000;
          &:before {
            visibility: visible;
            opacity: 1;
          }
        }
        a{
          display: inline-block;
          padding: 10px 0;
          font-size: 12px;
          font-weight: 700;
          letter-spacing: .05em;
          color: rgba(0, 0, 0, 0.5);
          text-transform: uppercase;
          line-height: 20px;
          position: relative; 
          &:before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 40%;
            width: 5px;
            height: 5px;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
            background-color: #ca2028;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            border-radius: 50%;
            visibility: hidden;
            opacity: 0;
            -webkit-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
            transition: all 0.4s ease;
          }

          &:hover {
            color: #000;
          }
        }
      }
    }
  }
  &.toolbar-masonry{
    .flex-box{
      @media(max-width: 991px) {
        display: block; 
        text-align: center; 
        .a-left, .a-right{
          text-align: center !important; 
        }
        .sorter-options{
          border: 1px solid #d8d8d8;
          margin-bottom: 25px;
          height: 45px;
        }
      }
    }
  }
}
/************************** Category page *******************************/
.ps-shop--category {
  padding: 100px 0;
  @media(max-width: 1200px) {
    padding: 70px;
  }
  @media(max-width: 768px) {
    padding: 50px 0;
  }
}

.ps-collection--bottom {
  img {
    width: 100%;
  }
  .ps-collection__morelink {
    position: absolute;
    top: auto;
    bottom: 50px;
    @include transform(translate(-50%, 0));
  }
}
/***************************** Newsletter 2 *****************************/
//home-newsletter
.home-newsletter{
  .newsletter-box{
    padding: 100px 0 90px 0;
    text-align: left;
    max-width: 50%;
    @media(max-width: 1700px) {
      max-width: 70%;
    }
    @media(max-width: 1200px) {
      max-width: 80%;
    }
    @media(max-width: 991px) {
      max-width: 100%;
    }
    @media (max-width: 580px) {
      text-align: center;
      .password__input-group {
        input, button {
          width: 100%;
          float: none;
        }
        input {
          margin-bottom: 20px;
        }
      }
    }
  }
  h3{
    margin-bottom: 20px;
  }
  p{
    margin-bottom: 50px;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.5);
    line-height: 1.67em;
  }
  .password__input-group{
    clear: both; 
    overflow: hidden; 
    padding: 10px 0px;
  }
  input{
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    height: 48px;
    background-color: #fff;
    border: solid 1px #f3f3f3;
    text-indent: 10px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    border-radius: 25px;
    -webkit-box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    -ms-box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    float: left;
    width: calc(100% - 250px);
  }
  button{
    float: right;
    width: 240px;
    text-align: center;
    background-color: #ca2028;
    color: #fff;  
  }
}
/************************** Collection page *********************************/
.widget {
  position: relative;
  margin-bottom: 50px;
  &.block-sidebar{
    margin-bottom: 0;
    padding: 0;
    border: 0;
  }
  .widget-title {
    h3{
      margin-top: 0;
      font-size: 16px;
      font-weight: normal;
      line-height: 30px;
      color: $color-heading;  
      margin-bottom: 20px;
    }
  }
  &:last-child {
    padding-bottom: 0;
    border: none;
  }

  .filter-tag{
    position: relative;
    margin-bottom: 50px;
    &:last-child {
      margin: 0;
      padding: 0;
      border: 0;
    }
    h3{
      margin-top: 0;
      font-size: 16px;
      font-weight: normal;
      line-height: 30px;
      color: $color-heading;  
      margin-bottom: 20px;
    }
    ul{
      li{
        position: relative; 
        input{
          height: auto;
          margin: 0 7px 0 0;
          cursor: pointer;
          display: inline-block;
          width: 0px;
          height: 0px;
          vertical-align: middle;
          &.checked{
            &:before {
              opacity: 1;
            }
          }
          &:after {
            content: "";
            position: absolute;
            top: 5px;
            left: 0;
            width: 13px;
            height: 13px;
            border: 1px solid #000000;
            box-shadow: inset 0 0 1px #E0E0E0;
            background-color: transparent; 
            cursor: pointer;
            border-radius: 50%;
          }
          &:before {
            content: "";
            position: absolute;
            left: 1px;
            z-index: 1;
            top: 8px;
            left: 3px;
            width: 7px;
            height: 7px;
            border-radius: 0;
            opacity: 0;
            background: #000000; 
            border-radius: 50%;
            border-color: #ffc107;
          }
        }
        label{
          padding-left: 20px;
          text-transform: capitalize; 
          position: relative; 
          float: left; 
          z-index:1;
          cursor: pointer; 
        }
      }
    }
  }
  .widget_tags ul li {
    display: inline-block;
    a {
      margin-bottom: 6px;
      display: inline-block;
      color: #8f8f8f;
      line-height: 24px;
      text-transform: capitalize; 
      &:hover {
        color: $main-color; 
      }
    }
  }
  .color{
    input[type=checkbox], input[type=radio]{
      display: none; 
    }
    ul{
      clear: both; 
      overflow: hidden; 
      li{
        display: inline-block;
        float: left; 
        img{
          @include opacity(0); 
        }
        a{
          margin-right: 10px;
          margin-bottom: 5px;
          height: 20px;
          width: 20px;
          z-index: 10;
          -webkit-transition: all 0.3s ease;
          -moz-transition: all 0.3s ease;
          transition: all 0.3s ease;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          border-radius: 50%;
          overflow: hidden; 
          display: block; 
          img{
            display: block; 
            width: 100%; 
          }
          &.active{
            border: 1px solid #000 !important; 
          }

          &.blue{
            background: #639499;

          }
          &.red{
            background: #ce1515;
          }
          &.grey{
            background: #ccc;
          }
          &.brown{
            background: #b7832b;
          }
          &.black{
            background: #111;
          }
          &.white{
            background: #fff;
          }
          &.yellow{
            background: yellow;
          }
        }
      }
    }
  }
}

.widget_search {
  .form-group {
    position: relative;
  }
  .form-control {
    background-color: #ffffff;
    @include box-shadow(inset 0 2px 5px 0 rgba(0, 0, 0, 0.1));
    border: solid 1px #f3f3f3;
    @include border-radius(48px);
    height: 48px;
    text-indent: 10px;
  }
  button {
    right: 10px;
    @include transition(all .4s ease);
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: rgba(#000, .5);
    &:hover {
      color: $color-2nd;
    }
  }
}

.widget_categories {
  ul {
    li {
      a {
        font-size: 15px;
        line-height: 2.5em;
        text-align: left;
        color: rgba(#000, .5);
        &:hover {
          color: $color-2nd;
        }
      }
    }
  }
}


.widget_filter {
  .ps-slider {
    display: block;
    margin-bottom: 30px;
    height: 3px;
    background-color: #cecece;
    position: relative;
    @include border-radius(0);
    border: none;
  }
  .ui-slider-range {
    top: 0;
    left: 0;
    height: 100%;
    background-color: #000;
    @include border-radius(0);
    border: none;
  }
  .ui-slider-handle {
    display: inline-block;
    top: 50%;
    height: 18px;
    width: 18px;
    outline: none;
    cursor: pointer;
    background-color: #000;
    border: none;
    @include transform(translateY(-50%));
    @include border-radius(50%);
  }
  .ps-slider__meta {
    margin-bottom: 30px;
    font-size: 13px;
    line-height: 1.9em;
    color: rgba(#000, .5);
    text-align: center;
    span {
      margin-left: 5px;
      margin-right: 5px;
    }
  }
  .ps-filter__btn {
    background-color: #888888;
    color: #fff;
    &:hover {
      background-color: $color-2nd;
    }
  }
}

.widget_shop_categories {
  ul {
    li {
      a {
        display: block;
        padding: 5px 0;
        font-size: 15px;
        line-height: 1.6em;
        text-align: left;
        color: rgba(#000, .5);
        &:hover {
          color: $color-2nd;
        }
      }
      ul {
        display: none;
        li {
          a {
            padding: 5px 30px;
            color: rgba(#000, .5)
          }
        }
      }
      &.has-sub {
        > a {
          position: relative;
          &:before {
            content: "\f107";
            font-family: FontAwesome;
            vertical-align:center;
            right: 10px;
          }
        }
      }
      &.current {
        > a {
          color: #000;
          border-bottom: 1px solid #000;
        }
        ul {
          display: block;
        }
      }

    }
  }
}
.template-collection{
  .ps-main2{
    background: #fff;
    padding: 0;
  }
  .full-width{
    >.row{
      display: flex;
      -webkit-display: flex;
      -khtml-display: flex;
      -moz-display: flex;
      -ms-display: flex;
      -o-display: flex;
      display: flex;
      margin: 0;
    }
    .col-sidebar{
      padding: 70px 80px 0 70px;
      background: #e8e8e8;
      @media(max-width: 1200px) {
        padding: 50px 15px;
      }
    }
    .col-main{
      padding: 80px;
      @media(max-width: 1200px) {
        padding: 60px 40px;
      }
      @media(max-width: 991px) {
        padding: 60px 30px;
      }
      @media(max-width: 767px) {
        padding: 50px 20px;
      }
    }
  }
}
.template-collection .shopify-section{
  margin: 0 !important; 
  .product-list {
    .product-item.ps-product--1 {
      width: 100% !important; 
      padding: 0 !important; 
      clear: both; 
      overflow: hidden; 
      margin-bottom: 50px;
      .ps-product__actions, .product-swatches{
        display: none !important; 
      }
      .ps-product__thumbnail{
        @media(min-width: 600px) {
          max-width: 305px;
          margin-right: 30px;
          float: left; 
          margin-bottom: 0;
        }
        margin-bottom: 30px;
      }
      .ps-product__content{
        @media(min-width: 600px) {
          width: -webkit-calc(100% - 335px);
          width: -moz-calc(100% - 335px);
          width: calc(100% - 335px);
          margin-top: 15px;
          float: left; 
        }
        .ps-product__title{
          font-size: 20px;
          &:hover {
            color: $main-color; 
          }
        }
        .ps-product__price{
          font-size: 24px;
          font-weight: 300;
          margin: 15px 0 30px 0;
        }

        .ps-product__short-desc{
          display: block !important; 
          margin-bottom: 43px;
          @media(max-width: 991px) {
            margin-bottom: 15px;
          }

        }
        .product-action{
          display: block !important; 
          .nou-btn{
            text-transform: capitalize;
            min-width: 160px;
            height: 40px;
            padding: 0 15px;
            background: #3e3e3e;
            color: #fff;
            font-weight: 600;
            @include transition(all 0.3s ease); 
            position: relative;
            &:hover {
              opacity: .7;
            }
            i{
              display: none; 
            }
          }

        }

      }
    }
  }
}
//product-hover

.ps-product--1 {
  cursor: pointer; 
  margin-bottom: 30px;
  .ps-product__thumbnail {
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    >a{
      display: block; 
      overflow: hidden; 
      position: relative; 
      img{
        width: 100%; 
      }
    }
  }
  .wrap-label{
    position: absolute; 
    z-index:2;
    top: 15px;
    left: 15x;
    >span{
      margin-bottom: 10px;
    }
  }
  .ps-product__actions {
    width: 40px;
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    z-index: 3;
    -webkit-transform: translateY(-150px);
    transform: translateY(-150px);
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    flex-direction: column;
    .nou-btn {
      background: #fff;
      width: 40px;
      height: 40px;
      opacity: 1;
      visibility: visible;
      -webkit-transform: translateY(-100px);
      transform: translateY(-100px);
      -webkit-transition-duration: .5s;
      transition-duration: .5s;
      position: relative; 
      display: block; 
      text-align: center; 
      line-height: 40px;
      color: $color-link; 
      font-size: 16px;
      span{
        display: none; 
      }
      .ht-ico-menu{
        font-size: 11px;
      }
      .ion-ios-eye-outline{
        font-size: 25px;
      }
      &:before {
        content: attr(data-label);
        display: inline-block;
        position: absolute;
        top: 7px;
        right: 100%;
        margin-right: 5px;
        font-size: 11px;
        line-height: 20px;
        background-color: #000;
        color: #fff;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        border-radius: 20px;
        min-width: 90px;
        text-align: center;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        transition: all 0.4s ease;
        visibility: hidden;
        opacity: 0;
        text-transform: capitalize;
        font-weight: 300;
        font-family: Lato;
        padding: 0px 10px;
        @media(max-width: 991px) {
          display: none; 
        }
      }
      &:hover {
        color: $main-color; 
        &:before {
          visibility: visible; 
          opacity:1;
        }
      }
    }
  }
  .ps-product__content {
    text-align: left;
  }
  h4{
    margin-bottom: 2px;
  }
  .ps-product__title {
    display: block;
    font-size: 14px;
    line-height: 1.5em;
    color: $color-link; 
    font-weight: 600;
    @media(max-width: 500px) {
      font-size: 12px;
    }
  }
  .ps-product__price {
    font-size: 16px;
    color: #8f8f8f;
    margin-bottom: 3px;
    @media(max-width: 500px) {
      font-size: 14px;
    }
    .product-price__price{
      font-weight: 400; 

    }
    .price-old{
      text-decoration: line-through;
    }
  }
  &:hover, &:active, &:focus {
    .ps-product__actions {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      >*{
        .nou-btn{
          -webkit-transform: translateY(0);
          transform: translateY(0);
        }
        &:first-child {
          .nou-btn{
            -webkit-transition-delay: .3s;
            transition-delay: .3s;
            -webkit-transition-duration: .5s;
            transition-duration: .5s;
          }
        }
        &:nth-child(2){
          .nou-btn{
            -webkit-transition-delay: .2s;
            transition-delay: .2s;
            -webkit-transition-duration: .5s;
            transition-duration: .5s;
          }
        }
        &:last-child {
          .nou-btn{
            -webkit-transition-delay: .1s;
            transition-delay: .1s;
            -webkit-transition-duration: .6s;
            transition-duration: .6s;
          }
        }
      }
    }
    .img-second{
      @include opacity(1);
      z-index:1;
      visibility: visible; 
      @include transition(all 0.3s ease); 
    }
  }
  &.has-second-image {
    &:hover, &:active {
      .img-second{
      @include opacity(1);
      z-index:1;
      visibility: visible; 
      @include transition(all 0.3s ease); 
    }
    }
   	 
  }
  .zmdi-replay{
    font-size: 18px;
  }
}

.img-second {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  visibility: hidden;
  display: block;
  background: #fff;
}
ul.product-swatches {
  margin: 10px 0 0;
  padding: 0;
  position: absolute;
  width: 12px;
  bottom: 4px;
  left: 10px;
  z-index: 3;
  li {
    cursor: pointer;
    display: inline-block;
    position: relative;
    float: left; 
    margin-right: 5px;
    &:after {
      content: "";
      width: 20px;
      height: 20px;
      top: -4px;
      left: -4px;
      display: block;
      position: absolute;
      border: 1px solid #ccc;
      border-radius: 50%;
      display: none; 
    }
    &.active:after{
      display: block; 
    }
    label {
      margin: 0;
      display: block; 
      width: 12px;
      height: 12px;
      border-radius: 100%;
      margin-right: 3px;
      cursor: pointer;
      @include transition(all 0.2s ease); 
      &:hover {
        box-shadow: 1px 2px 3px #999;
      }
    }
  }
}
.wrap-label {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;
  max-width: 55px;
  span {
    background: #a9803c;
    color: #fff;
    font-size: 13px;
    min-width: 50px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    z-index: 3;    
    margin-bottom: 10px;
    display: block; 
    &.new-label {
      background-color: #3ecafb;
    }
  }


}
//sidebar canvas
.show {
  .sidebar-canvas{
    -webkit-transform: translatex(270px);
    transform: translatex(270px);
    margin-left: 0;
  }
  .sidebar-canvas-md, .sb-canvas{

    @media(max-width: 1200px) {
      -webkit-transform: translatex(270px);
      transform: translatex(270px);
      margin-left: 0;    	
    }
  }
}
.sidebar-collection{
  @include transition(all 0.4s ease); 
  .filter-title{
    color: #000;
    border-bottom: 1px solid #ddd;
    font-weight: 500;
    position: relative; 
    margin: 0;
    padding: 20px 0px;
    margin-bottom: 50px;
    .fa{
      position: absolute; 
      top: 10px;
      right: 0px;
      font-size: 18px;
      cursor: pointer; 
      &:hover {
        color: $color-1st; 
      }
    }
  }
}
.sb-canvas{
  @include transition(all 0.4s ease); 
  h3{
    color: #000;
    border-bottom: 1px solid #ddd;
    font-weight: 500;
    position: relative;
    margin: 0;
    padding: 20px 0px;
    margin-bottom: 35px;
    i{
      position: absolute;
      top: 10px;
      right: 0px;
      font-size: 18px;
      cursor: pointer;
    }
  }
  @media(max-width: 1200px) {
    position: fixed;
    display: block;
    margin: 0;
    background: #fff;
    list-style: none;
    z-index: 999999;
    top: 0;
    height: 100%;
    width: 270px;
    text-align: left;
    overflow: scroll;
    left: -270px;
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
    }

    &::-webkit-scrollbar-thumb {
      background-color: #000;
      width: 6px;
      outline: 1px solid slategrey;
    }  
  }
}
@media(max-width: 1200px) {
  .sidebar-canvas-md{
    position: fixed; 
    margin: 0;
    background: #fff;
    list-style: none;
    z-index: 9999;
    top: 0;
    height: 100%;
    width: 270px;
    text-align: left;
    overflow: scroll;
    left: -270px;
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
    }

    &::-webkit-scrollbar-thumb {
      background-color: #000;
      width: 6px;
      outline: 1px solid slategrey;
    }
  }
}
.sidebar-canvas{
  position: fixed; 
  margin: 0;
  background: #fff;
  list-style: none;
  z-index: 9999;
  top: 0;
  height: 100%;
  width: 270px;
  text-align: left;
  overflow: scroll;
  left: -270px;
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
  }

  &::-webkit-scrollbar-thumb {
    background-color: #000;
    width: 6px;
    outline: 1px solid slategrey;
  }
}
.show .overlay {
  display: block;
  transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}
.overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  z-index: 999;
  @include transition(all 0.6s ease); 
  transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -webkit-transform: rotateX(90deg);
  display: none;
}
//toolbar
.toolbar{
  label{
    padding-right: 36px;
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block; 
    letter-spacing: 1px;
  }
  .collection-view {

    a{
      font-weight: bold;
      color: #000;
      text-transform: capitalize;
      font-size: 12px;
      margin-right: 10px;
      letter-spacing: 1.3px;
      position: relative; 
      &:hover {
        color: $color-1st; 
      }
      &.active{
        &:before {
          visibility: visible;
          opacity: 1;
        }
      }
      &:before {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 40%;
        width: 5px;
        height: 5px;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: #ca2028;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        transition: all 0.4s ease;
      }
    }
  }
}

/************************** Product Page *******************************/
.ps-product__iconbox {
  background-color: #f8f8f8;
  padding: 30px;
}

.product-photo-container {
  position: relative;
  text-align: center;
  overflow: hidden;
  .no-carousel{
    >div{
      margin-bottom: 20px;
    }
  }
  img{
    width: 100%; 
  }
  a {
    width: 100%;
    display: block;
    position: relative;

    >div {
      width: 32px !important;
      height: 32px !important;
      left: 50% !important;
      top: 50% !important;
      display: none; 
      transform: translate(-50%, -50%);
    }
  }
}
.more-view-image {
  margin-top: 20px;
  .product-photo-thumbs {
    a.elevatezoom-gallery {
      display: block;
      @include transition(all 0.3s ease); 
      border: 1px solid $border-color; 
      &:hover, &.actived {
        border-color: #3e3e3e;
      }
      img{
        width: 100%; 
      }
    }
  }
}
.jcarousel-list-vertical{
  height: 330px !important; 
  @media(max-width: 420px) {
    height: 152px !important; 
  }
  .item a{
    display: block; 
    border: 1px solid transparent; 
    &:hover, &.actived {
      border-color: #3e3e3e;
    }
  }
}
.product-img-box{
  @media(max-width: 991px) {

  }
}
.more-view-image-vertical {
  width: 100px;
  margin-right: 10px;
  float: left;

  .jcarousel-clip-vertical {
    height: 498px;
    @media(max-width: 500px) {
      height: 358px;
      max-height: 200px;
    }
  }
  @media(max-width: 420px) {
    width: 70px;
    margin-right: 10px;
  }
}
.ps-product--detail {
  .sidebar-button{
    color: #fff;
    background: #000;
    font-size: 14px;
    border-radius: 30px;
    text-align: center;
    display: inline-block;
    padding: 3px 10px 2px 10px;
    margin-bottom: 15px;
    @include transition(all 0.3s ease); 
    text-transform: capitalize;
    .fa{
      padding-right: 5px;
    }
    &:hover {
      color: #fff; 
      background: $color-1st; 
    }
  }
  .product-shop .product-item {
    .ps-product__thumbnail {
      @include clearfix;
      padding-bottom: 80px;
    }
    .ps-product__title {
      font-size: 24px;
      line-height: 27px;
      font-weight: normal;
      margin-top: 29px;
      @media(max-width: 1200px) {
        margin-top: 15px;
      }
    }
    .ps-product__price {
      font-size: 26px;
      font-weight: 300 !important; 
      color: #8f8f8f;
      margin-bottom: 25px;
      @media(max-width: 767px) {
        font-size: 20px;
        margin-bottom: 20px;
      }
      .compare-price{
        padding-right: 10px;
        text-decoration :line-through;
      }
    }
    .ps-product__rating {
      position: relative;
      margin-bottom: 23px;
      .spr-badge-caption{
        padding-left: 12px;
        color: #8f8f8f;
        font-size: 14px;
      }
      .br-wrapper {
        display: inline-block;
        margin-right: 10px;
        .br-widget {
          a {
            font-size: 12px;
          }
        }
      }
    }
    .ps-product__short-desc {
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      text-transform: none;
      color: #8f8f8f;
      color: $color-text; 
      margin-bottom: 28px;
    }

    .ps-product__shopping {
      p {
        margin-bottom: 0;
        line-height: 2em;
        text-align: center;
        font-size: 15px;
        color: rgba(#000, .5);
        strong {
          margin-right: 5px;
          font-size: 18px;
          font-weight: 600;
          color: #000;
        }
      }
      .ps-product__cart-action {
        margin: 30px 0;
      }
    }
    .ps-product__cart-action {
      li {
        margin-right: 10px;
        display: inline-block;
        a {
          font-size: 15px;
          line-height: 1.6em;
          color: #111;
          i {
            margin-right: 5px;
          }
          &:hover {
            color: $color-2nd;
          }
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
    #product-variants{
      margin: 0;
      border-left: 0;
      border-top: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
      margin-bottom: 40px;
      padding: 15px 0 10px 0;
    }
    .btn-cart-submit{
      min-width: 160px;
      height: 40px;
      padding: 0 10px;
      border: 0;
      background: #5bb6d5;
      color: #fff;
      margin-right: 10px;
      position: relative;
      @include transition(all 0.3s ease); 
      &:hover {
        @include opacity(.6); 
      }
    }
    .product-addto-links{
      display: inline-block; 
      font-size: 11px;
      line-height: 13px;
      font-size: 15px;
      height: 40px;
      opacity: 1;
      color: #3e3e3e;
      @media(max-width: 420px) {
        margin-top: 25px;
      }
      a:hover {
        @include transition(all 0.3s ease); 
        color: $main-color; 
        span{
          color: $main-color !important; 
        }
      }
      i{
        font-size: 12px;
        position: relative;
        top: 1px;
        margin-left: 16px;
        @media(max-width: 420px) {
          margin-left: 0;
        }
      }
      span{
        font-size: 14px;
        font-weight: 600;
        color: #3e3e3e;
        margin-left: 8px;
        padding-bottom: 0px;
        border-bottom: 1px solid #a4a4a4;
        white-space: nowrap;
      }
    }
    .ps-product__sharing {
      color: #000;
      a {
        display: inline-block;
        margin-right: 20px;
        &:first-child {
          margin-left: 15px;
        }
        &:hover {
          color: $color-2nd;
        }
      }
    }
  }
  .tab-product.ps-product__content {
    background-color: #fff;
    padding: 50px 0 20px 0;
    margin-top: 50px;
    .nav-pills {
      border: 0;
      text-align: center;
      li {
        cursor: pointer; 
        z-index:5;
        display: inline-block;
        float: none; 
        @media(max-width: 479px) {
          display: block; 
          text-align: center; 
          margin-right: 0;
        }
        a {
          position: relative;
          padding: 0  0 5px 0;
          line-height: 2;
          text-align: center;
          background: transparent !important; 
          border: 0;
          font-size: 18px;
          padding: 0 23px;
          position: relative;
          display: block;
          @media(max-width: 479px) {
            display: block;
            padding: 5px 20px;
          }
          &:before {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #000;
            z-index: 10;
            @include transition(all .4s ease-out);
            display: none; 
          }
          &:hover {
            color: #000;
            &:before {
              width: 100%;
            }
          }
        }
        &:last-child {
          margin-right: 0;
        }
        &.active {
          a {
            color: #000;
            &:before {
              width: 100%;
            }
          }
        }
      }
    }
    .tab-content {
      margin-top: 45px;
    }
    .tab-pane {
      margin: 0 auto;
      padding-bottom: 10px;
      label{
        text-align: left; 
      }
      p {
        color: rgba(#000, .5);
        strong {
          color: #000;
        }
      }
    }
  }
  @media(max-width: 1200px){ 
    .product-shop{
      .ps-product__thumbnail, .ps-product__info {
        max-width: 750px;
        margin: 0 auto 30px;
      }
      .ps-product__thumbnail {
        padding-bottom: 30px;
      }
    }
  }
  @media(max-width: 992px){ 
    .product-shop .ps-product__thumbnail {
      .ps-product__nav {
        width: 100%;
        //float: none;
        .slick-track {
          margin-left: -10px;
        }
        .item {
          padding: 0 10px;
          img {
            width: 100%;
          }
        }
      }
      .ps-product__images-large {
        width: 100%;
        padding-left: 0;
        margin-bottom: 20px;
      }
    }
  }
  @media(max-width: 500px){ 
    .ps-product__content {
      .tab-list {
        li {
          display: block;
          margin-right: 0;
          a {
            display: block;
            padding: 5px 20px;
          }
        }
      }
    }
  }
}
.ps-product--detail-group {
  .ps-product__content {
    padding: 60px 50px;
    margin-top: 25px;
  }
}
.ps-product--inside {
  position: relative;
  .ps-product__content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 50px;
    p {
      font-size: 18px;
      line-height: 1.4em;
      color: #ffffff;
    }
    > span {
      display: block;
      margin-bottom: 15px;
      font-size: 30px;
      font-weight: 600;
      line-height: 1.33em;
      color: #fff;
    }
  }
  .ps-product__title {
    display: block;
    margin-bottom: 15px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.33em;
    color: #fff;
    @include transition(all .4s ease);
    &:hover {
      color: $color-2nd;
    }
  }

}
.product-shop {
  .product-inventory label, .product-type label, .product-vendor label {
    text-transform: uppercase;
    min-width: 110px;
    padding-right: 10px;
    display: inline-block;
  }
  .swatch {
    clear: both; 
    overflow: hidden; 
    .header{
      display: inline-block;
      position: relative;
      min-width: 110px;
      float: left;
      color: #3e3e3e;
      line-height: 50px;
      margin-right: 15px;
    }

    input {
      display: none;
      &:checked + label {
        border-color: #49b6d5;
      }
    }
    .swatch-element {
      display: inline-block;
      &.size{
        input {
          display: none;
          &:hover, &:checked + label {
            border-color: #49b6d5;
            background: #3e3e3e;
            color: #fff;
          }
        }
      }

    }
    label[title="white"]{
      background: #fff !important; 
      border:1px solid #ccc;
    }
    label {
      width: 50px;
      height: 50px;
      border-radius: 10%;
      cursor: pointer;
      font-weight: 600;
      display: block;
      overflow: hidden;
      margin: 10px 10px 10px 0;
      font-size: 0;
      border: 3px solid #f3f3f3;
      font-size: 14px;
      text-transform: uppercase;
      text-align: center;
      line-height: 31px;
      color: #8f8f8f;
      background-repeat:no-repeat !important;
      background-size:cover !important;
      &.size{
        border: 0;
      }
    }
  }
  .product-quantity {
    border: 1px solid #8f8f8f;
    width: 110px;
    height: 40px;
    margin-right: 10px;
    position: relative; 
    display: inline-block; 
    float: left; 
    overflow: hidden; 
    .dec, .inc {
      color: #8f8f8f;
      cursor: pointer;
      font-size: 12px;
      width: 40px;
      min-width: 40px;
      height: 40px;
      user-select: none;
      position: absolute; 
      text-align: center; 
      line-height: 40px;
      top: 0;
    }
    .dec {left: 0px;}
    .inc {right: 0px;}
    input{
      text-align: center; 
      padding: 0;
      height: 40px;
      color: #111;
      font-weight: 500; 

    }
  }
  .total-price {
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
    width: 100%;
    label {display: inline-block; padding-right: 15px;}
    span {font-weight: bold; font-size: 16px;}
  }
  .product-tags {
    padding: 20px 0;
  }
  .actions {
    display: inline-block; 
    button,a{

    }
  }
  .social-sharing{

  }
  .product-bottom{
    margin-top: 0px;
    margin-bottom: 15px;
  }
  .product-sub{
    margin-top: 0px;
    margin-bottom: 0;
    line-height: 2em;
    text-align: left; 
    clear: both; 
    overflow: hidden;
    a{
      color: #8f8f8f;
      font-size: 12px;
      text-transform: uppercase; 
    }
    strong{
      min-width: 120px;
      display: inline-block;
      text-transform: uppercase;
      color: #3e3e3e;
      font-size: 12px;
      font-weight: 500;
    }
  }
  .social-sharing{
    span{
      min-width: 120px;
      display: inline-block;
      text-transform: uppercase;
      color: #3e3e3e;
      font-size: 12px;
      font-weight: 500;
    }
    a{
      border: 0;
      display: inline-block;
      margin-right: 20px;
      padding: 0;
      background: transparent; 
      color: #000;
      @include transition(all 0.3s ease); 
      margin-bottom: 0;
      opacity:1 !important; 
      &:hover {
        color: $color-2nd; 
      }
      &:first-child {
        margin-left: 15px;

      }      
    }
  }
}
.swatch .swatch-element .crossed-out {
  display: none;
}
.product-single {
  .container{
    position: relative; 
  }
  .product-tabs {
    .tabs-left {
      li {width: 100%;}
    }
  }
}
.product-form-product-template {
  .selector-wrapper {
    display: none;
  }
}
.product-shop .product-item .spr-badge-starrating {
  .spr-icon{
    font-size: 11px;
    color: #EDB867;

    &.spr-icon-star-empty{
      color: #d2d2d2;
    }
  }
  .spr-badge-caption{
    font-size: 14px;
    color: #000000;
  }
}
.pay{
  margin: 20px 0;
}
//related
.related-products{
  .ps-heading{
    margin-top: 0px;
    padding-top: 43px;
    border-top: 1px solid #e8e8e8;
    text-align: center;
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 43px;
    font-weight: 400;
  }
}
//video product //
.ps-section--product-video {
  background-color: #221911;
  padding: 150px 0 310px;
  .ps-video {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    img {
      width: 100%;
    }
    .ps-video__play {
      @include center();
      display: inline-block;
      width: 120px;
      height: 120px;
      @include border-radius(50%);
      background-color: #fff;
      i {
        @include center();
        font-size: 20px;
        &:before {
          color: #333;
        }
      }
      &:hover {
        background-color: rgba($color-2nd, .75);
        i {
          &:before {
            color: #fff;
          }
        }
      }
    }
  }
}
//releted product//
.ps-section--relate-products {
  background: #fff;
  clear: both; 
  overflow: hidden; 
  padding: 0px 0 30px;
  @media(max-width: 991px) {
    padding: 0px 0 30px !important; 
  }
}

/******************** Sidebar product **********************/
.ps-block--iconbox {
  padding: 60px 30px;
  text-align: center;
  background-color: #fbfbfb;
  > i {
    display: inline-block;
    margin-bottom: 30px;
    font-size: 30px;
  }
  h3 {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.4em;
    color: #000;
  }

}

.ps-block--iconbox-2 {
  position: relative;
  padding-left: 35px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(#000, .05);
  > i {
    @include vertical-align();
    left: 0;
    font-size: 18px;
  }
  p {
    margin-bottom: 0;
    strong {
      font-size: 18px;
    }
  }
  &:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }
}
//end product

#resultLoading {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  .bg {
    background: rgba(255,255,255,.8); 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
  }
  > div:first-child {
    position: fixed;
    top: 50% !important;
    bottom: auto;
    left: 50%;
    right: auto;
    width: 33px;
    height: 33px;
    margin-left: -16px;
    margin-top: -28px;
    overflow: hidden;
    padding: 0;
    text-align: center;
    text-indent: -999em;
    background: transparent;
    z-index:1;
    &:before {
      content: '';
      position: absolute;
      border: 3px solid #e8e8e8;
      border-top-color: #29d;
      border-radius: 100%;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      -webkit-animation: spinner 0.4s linear infinite;
      animation: spinner 0.4s linear infinite;
      border-top-color: $main-color; 
      z-index:1;
    }
  }
}
.back-top {
  cursor: pointer;
  top: auto !important;
  overflow: hidden;
  display: block !important;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  height: 30px;
  background-color: #343233;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 30px;
  -moz-border-radius: 50px;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  visibility: hidden;
  opacity: 0;
  text-align: center;
  width: 30px;
  text-align: center;
  @media(max-width: 1200px) {
    bottom: 30px;
    right: 30px;
  }
  @media(max-width: 767px) {
    bottom: 30px;
    right: 15px;
  }
  &.active{
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  &:hover {
    @include opacity(.7); 
  }
}
.ajax-loading,
.loading-modal {
  position: fixed;
  top: 50% !important;
  bottom: auto;
  left: 50%;
  right: auto;
  width: 33px;
  height: 33px;
  margin-left: -28px;
  margin-top: -28px;
  overflow: hidden;
  padding: 0;
  text-align: center;
  text-indent: -999em;
  background: rgba(255,255,255, .3); 
  &:before {
    content: '';
    position: absolute;
    border: 3px solid #e8e8e8;
    border-top-color: #29d;
    border-radius: 100%;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: spinner 0.4s linear infinite;
    animation: spinner 0.4s linear infinite;
    border-top-color: #a9803c;
  }
}
@keyframes spinner {
  to {transform: rotate(360deg);}
}
.ajax-success-modal {
  opacity: 1;
}
.ajax-success-modal {
  .modal-content {
    background: #fff;
    bottom: auto;
    right: 30px !important;
    top: 30px !important; 
    padding: 20px;
    position: fixed;
    right: auto;
    width: 455px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.12);
    -ms-box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.12);  
    @media(max-width: 479px) {
      width: auto;
      right: 15px;
      margin: 0;
      left: 15px;
      .content-left{
        display: none; 
      }
      .content-right{
        margin-left: 0;
        p{
          margin-top: 0;
          margin-bottom: 5px;
        }
      }
    }
  }
  .content-left {
    float: left;
    margin-right: 20px;
    max-width: 90px;
  }
  .content-right {
    margin-top: -15px;
    margin-left: 110px;
    p{
      margin-top: 0px;
    }
    button{
      background: #222;
      color: #fff;
      padding: 5px 10px;
    }
  }
}
.ajax-error-modal {
  bottom: auto;
  left: 0;
  overflow: hidden;
  padding: 10px 20px;
  position: fixed;
  right: auto;
  top: 50%;
  width: 100%;
  text-align: center;
  .modal-inner {
    color: #fff;
    background: #e95144;
    display: inline-block;
    padding: 10px 20px;
  }
}
.close-modal {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  display: inline-block;
  background-color: #000;
  &:hover {
    background: $main-color; 
    color: #fff;
  }
}
//section
.ps-home-1--collection {
  padding: 100px 0;
  @media(max-width:768px) {
    padding: 30px 0 70px 0;
  }
}

.ps-section--collection-home-2 {
  padding: 100px 0;
  @media(max-width:768px) {
    padding: 30px 0;
  }

  .ps-collection--3 {
    position: relative;
    margin-bottom: 30px;
    .ps-btn {
      position: absolute;
      bottom: 60px;
      left: 50%;
      @include transform(translate(-50%, 50%));
      @include hidden;
      @include transition(all .3s ease-out);
    }
    &:hover {
      .ps-btn {
        @include show;
        @include transform(translate(-50%, 0));
      }
    }
  }
}

.ps-section--product-history {
  padding: 305px 0 260px;
  @media(max-width: 1200px) {
    padding: 150px 0;
  }
  .ps-section__content {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
  }
  h3 {
    font-size: 60px;
    line-height: 1.42em;
    color: #fff;
  }
  p {
    font-size: 15px;
    line-height: 1.67em;
    color: #fff;
  }
  @media(max-width:768px) {
    h3 {
      font-size: 35px;
    }
  }
}

.ps-section--product-quote {
  background-color: #f8f8f8;
  img {
    position: relative;
    top: -150px;
    margin-left: 150px;
  }
  h3 {
    margin-bottom: 30px;
    font-size: 40px;
    font-weight: 300;
    line-height: 1.5em;
  }
  a {
    display: inline-block;
    position: relative; 
    padding-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45em;
    letter-spacing: .08em;
    color: #111;
    text-transform: uppercase;
    &:before {
      content: '';
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #111;
    }
    &:hover {
      color: $color-1st;
      &:before {
        background-color: $color-1st;
      }
    }
  }
  .ps-section__content {
    position: relative;
    max-width: 680px;
    top: 230px;
    margin: 0 auto;
  }
  @media (max-width: 1850px) {
    img {
      margin-left: 100px;
    }
  }
  @media (max-width: 1750px) {
    img {
      margin-left: 50px;
      top: -100px;
    }
    .ps-section__content {
      top: 100px;
    }
  }
  @media (max-width: 1600px) {
    img {
      margin-left: 0;
      top: -75px;
    }
  }
  @media(max-width:1200px) {
    img {
      top: 0;
    }
    .ps-section__content {
      top: 100px;
      h3 {
        line-height: 1.2em;
      }
    }
  }
  @media(max-width:992px) {
    .ps-section__content {
      top: 0;
      margin-top: 80px;
      margin-left: 0;
    }
  }
  @media(max-width:768px) {
    img {
      width: 100%;
    }
    .ps-section__content {
      position: relative;
      margin: 50px 0;
    }
  }
  @media(max-width:768px) {
    h3 {
      font-size: 30px;
    }
  }
}

.ps-section--product-video {
  background-color: #221911;
  padding: 150px 0 310px;
  @media(max-width: 1200px) {
    padding: 100px 0;
  }
  .ps-video {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    img {
      width: 100%;
    }
    &.play {
      @include center();
      display: inline-block;
      width: 120px;
      height: 120px;
      @include border-radius(50%);
      background-color: #fff;
      i {
        @include center();
        font-size: 20px;
        &:before {
          color: #333;
        }
      }
      &:hover {
        background-color: rgba($color-2nd, .75);
        i {
          &:before {
            color: #fff;
          }
        }
      }
    }
  }
}

.ps-comments {
  clear: both; 
  overflow: hidden; 
  background-color: #f8f8f8;
  padding: 100px 0;
  h3.ps-heading {
    margin-bottom: 80px;
    text-align: center;
  }
  @media(max-width:768px) {
    padding: 50px 0;
  }
}


.ps-section--big-collection {
  padding-bottom: 150px;
  @media(max-width:768px) {
    padding-bottom: 50px;
  }
}

.ps-section--home-6-subscribe {
  padding: 80px 0;
  .row{
    margin: 0 -10px;
    >div{
      padding: 0 10px;
    }
  }
  @media(max-width:768px) {
    padding: 0;
  }
}

.ps-home10--features {
  padding-bottom: 100px;
  @media(max-width:768px) {
    padding-bottom: 50px;
  }
}

/*============================================================================
============================= Widget ViMeo ================================
==============================================================================*/
.widget_video{
  position: relative; 
  @media (min-width: 1200px){
    margin-bottom: 48px!important;
  }
  .btn_video{
    top: 55%;
    left: 50%;
    position: absolute;
    font-size: 36px;
    color: #fff;
    .icon-control-play{
      position: relative;
      right: -3px;
      font-weight: bold;
    }
    &:hover{
      color: $main-color; 
      border-color: $main-color; 
    }
    @include transform(translate(-50%,-50%));
    @media (min-width: 992px){
      font-size: 35px;
      width: 76px;
      height: 76px;
      border: 4px solid #fff;
      border-radius: 50%;
      text-align: center;
      line-height: 71px;
      top: 62%;
    }
  }
  .video_info{
    bottom: 55px;
    left: 50%;
    position: absolute;
    @include transform(translateX(-50%));
    text-align: center;
    h3{
      font-size: 20px;
      color: #fff;
      text-transform: uppercase;
      font-weight: bold;
      padding-bottom: 0;
      margin-bottom: 5px;
      display: inline-block;
    }
    p{
      font-size: 14px;
      color: #fff;
      margin: 0;
      display: block; 
    }
  }
}

.YouTubePopUp-Wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-color: rgba(0,0,0,0.8);
  top: 0;
  left: 0;
  z-index: 9999999999999;
  .YouTubePopUp-Content {
    max-width: 680px;
    display: block;
    margin: 0 auto;
    height: 100%;
    position: relative;
    .YouTubePopUp-Close {
      position: absolute;
      top: 0;
      cursor: pointer;
      bottom: 528px;
      right: 0px;
      margin: auto 0;
      width: 24px;
      height: 24px;
      background: url(btn-close.png) no-repeat ;
      background-size: 24px 24px;
      -webkit-background-size: 24px 24px;
      -moz-background-size: 24px 24px;
      -o-background-size: 24px 24px;
    }
    iframe {
      max-width: 100% !important;
      width: 100% !important;
      display: block !important;
      height: 480px !important;
      border: none !important;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
    }
  }
}

/********************* Home tab collection **********************/
.section-collection-tabs {
  .tab-pane{
    display: none !important; 
    &.active{
      display: block !important; 
    }
  }
}
.ps-filter {
  margin-bottom: 40px;
  padding-bottom: 10px;
  clear: both; 
  text-align: center; 
  overflow: hidden; 
  border: 0;
  li {
    display: inline-block;
    padding: 0 20px;
    float: none; 
    @media(max-width: 767px) {
      padding: 0 10px;
      margin-bottom: 10px;
    }
    a {
      font-size: 18px;
      color: #8f8f8f;
      padding: 5px 0;
      border: 0 !important; 
      text-transform: capitalize; 
      background: #fff !important; 
      cursor: pointer; 
      &:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0px;
        width: 0%;
        height: 1px;
        display: block;
        width: 100%;
      }
      &:hover {
        color: #000;
        &:before {
          visibility: visible; 
          opacity:1;
        }
      }
    }
    &.active {
      a {
        color: $color-link; 
        border: 0;
        border-radius: 0;
        &:before {
          background: #3e3e3e;
        }
      }
    }
  }
  .ps-filter__left {
    width: 50%;
    float: left;
  }
  .ps-filter__right {
    float: right;
    width: 50%;
    text-align: right;
  }
  .bootstrap-select.ps-select {
    position: relative;
    vertical-align: top;
    .dropdown-toggle {
      height: 66px;
      border: none;
      @include transition(all .4s ease);
      @include border-radius(0);
      font-size: 12px;
      font-weight: bold;
      letter-spacing: 1px;
      text-align: center;
      color: #000;
      text-transform: uppercase;
      span {
        font-weight: 700;
      }
      &:before {
        content: "\f107";
        font-family: FontAwesome;
        @include vertical-align();
        right: 30px;
        color: rgba(#000, .3);
        font-size: 16px;
      }
      &:hover {
        background-color: rgba(#000, .07);
      }
    }
    .bs-caret {
      display: none;
    }
    &:first-child {
      margin-right: -4px;
      border-left: 1px solid rgba(#000, .07);
      border-right: 1px solid rgba(#000, .07);
    }
  }
  @media (max-width: 1440px) {
    .ps-filter__categories {
      li {
        margin-right: 30px;
      }
    }
  }
  @media(max-width: 1200px) {
    .ps-filter__left {
      width: 100%;
      border-bottom: 1px solid rgba(#000, .07);
      text-align: center;
    }
    .ps-filter__right {
      width: 100%;
      .bootstrap-select.ps-select {
        width: 50%;
        &:first-child {
          border-left: 0;
        }
      }
    }
  }
  @media (max-width: 640px) {
    .ps-filter__categories {
      li {
        display: block;
      }
    }
  }
}

.ps-filter--blog {
  text-align: center;
}

.ps-filter--shop-sidebar {
  .ps-filter__left {
    p {
      margin-bottom: 0;
      line-height: 25px;
      padding: 20px 0;
    }
  }
  .ps-select {
    max-width: 200px;
  }
  @media(max-width: 1200px) {
    .ps-select {
      max-width: 100%;
    }
  }
}
//home subscribe//
.home-subscribe{
  .form-group{
    position: relative; 
    max-width: 370px;
    margin: 0 auto;
    input{
      height: 50px;
      border: 1px solid #e8e8e8; 
      padding-left: 20px;

    }
    button{
      padding: 0;
      background: #3e3e3e;
      color: #fff;
      height: 50px;
      width: 50px;
      line-height: 51px;
      font-size: 16px;
      position: absolute; 
      top: 0;
      right: 0;
      @include transition(all 0.3s ease); 
      &:hover {
        background: $main-color; 
      }
    }
  }
}
/******************** Blog page **********************/
.template-blog, .template-article{
  article{
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 66px;
    margin-bottom: 56px;
    .postDetails {
      margin-top: 0px;
      margin-bottom: 26px;
    }
  }
  .col-sidebar{
    ul.links{
      li{
        a{
          color: rgba(0,0,0,0.5); 
          font-size: 15px;
          line-height: 2.5em;
          &:hover {
            color: $color-1st; 
          }
        }
      }
    }

  }
}
.blog-views{
  .ps-post__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .ps-post--primary {
    margin-bottom: 80px; 
    @media(max-width: 420px) {
      margin-bottom: 40px;
    }
  }
  .ps-post__thumbnail {
    position: relative; 
    &:hover {
      .ps-post__overlay {
        background-color: rgba(255, 255, 255, 0.5);
      }
    }
    img{
      width: 100%; 
    }

  }
  .ps-post__content {
    text-align: center; 
    @media(max-width: 767px) {
      text-align: left; 
    }
    p{
      text-align: left; 
    }
  }

}
.comment-form {
  .form-group{
    margin-bottom: 0;
  }
  .title{
    font-size: 18px;
    font-weight: 400; 
    margin-bottom: 18px;
  }
  input{
    color: #8f8f8f;
    height: 40px;
    border: 1px solid #e8e8e8;
    padding: 0 22px;
    margin-bottom: 20px;
    border-radius: 0;
  }
  textarea{
    height: 200px;
    resize: none;
    padding: 20px;
    border-radius: 0;
    border: 1px solid #e8e8e8;
  }
  .submit{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    min-width: 150px;
    height: 40px;
    padding: 0 15px;
    background: #3e3e3e;
    color: #fff;
    border: 0;

    @include transition(all 0.3s ease); 
    font-weight: 400;
    font-size: 14px;
    &:hover {
      opacity: .6;
    }
  }
}
.postDetails{
  margin-top: 24px;
  margin-bottom: 14px;
  li{
    display: inline-block;
    margin-right: 5px;
    list-style: none;
    a,span{
      color: $color-text; 
    }
    a{
      &:hover {
        color: $main-color; 
      }
    }
    &:after {
      content: '.';
      position: relative;
      top: -3px;
      margin-left: 4px;
    }
  }
}
//blog-list
.ps-post--horizontal {
  margin-bottom: 50px;
  @include clearfix;
  .postDetails{
    @media(max-width: 1200px) {
      margin-top: 10px;
    }
  }
  .ps-post__thumbnail {
    float: left;
    width: 370px;
  }
  .ps-post__content {
    float: left;
    width: calc(100% - 370px);
    padding-left: 30px;
    text-align: left; 
    p {
      font-size: 15px;
      line-height: 1.6em;
      text-align: left;
      color: rgba(#000, .5);
    }
  }
  .read-more{
    i{
      position: relative; 
      top: 1px;
      padding-left: 4px;
    }
  }
  .ps-post__title {
    margin-bottom: 20px;
    @media(max-width: 1200px) {
      margin-bottom: 10px;
      a{
        font-size: 18px !important; 
      }
    }
    a {
      font-size: 24px;
      line-height: 36px;
      font-weight: 400; 
      &:hover {
        color: $main-color; 
      }
    }
  }
  @media(max-width: 991px) {
    .ps-post__thumbnail {
      margin-bottom: 30px;
      width: 100%;
      float: none;
    }
    .ps-post__content {
      width: 100%;
      float: none;
      padding-left: 0;
    }
  }
}

//end list
.ps-post--primary .ps-post__title a:hover {
  color: #ca2028; }
.ps-post--primary .ps-post__category {
  margin-bottom: 20px; }
.ps-post--primary .ps-post__category a {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(0, 0, 0, 0.5); }
.ps-post--primary .ps-post__category a:hover {
  color: #ca2028; }
//widget
.template-blog, .template-article{
  .widget .widget-title h3 {
    font-size: 18px;
    font-weight: normal;
  }
}
.ps-post--sidebar {
  margin-bottom: 15px;
  clear: both; 
  overflow: hidden; 
  &:hover {
    img{
      @include opacity(.6); 
    }
  }
  .ps-post__thumbnail {
    width: 100px;
    position: relative; 
    float: left;
    margin-bottom: 0;
    @media(min-width: 768px) and (max-width: 1200px) {
      width: 70px;
    }	
  }
  .ps-post__content {
    position: relative;
    float: left;
    width: calc(100% - 100px);
    padding-left: 20px;
    @media(min-width: 768px) and (max-width: 1200px) {
      width: calc(100% - 70px);
      padding-left: 10px;
      .ps-post__posted, .ps-post__title{
        line-height: 20px;
        font-size: 13x;
      }
    }
  }
  .ps-post__title {
    font-size: 14px;
    line-height: 1.56em;
    color: $color-text; 
    &:hover {
      color: $main-color; 
    }
  }
}
//post grid
.template-blog{
  .ps-post--vertical {
    margin-bottom: 63px;
    @media(max-width: 1200px) {
      margin-bottom: 40px;
    }
    .ps-post__title a{
    }
    .ps-post__thumbnail {
    }
    .ps-post__content{
      padding: 0;
      border: 0;
    }
    .read-more{
      margin: 0;
    }
  }
}
.ps-post--vertical {
  .ps-post__posted {
    font-size: 14px;
    margin-bottom: 14px;
    color: #8f8f8f;
    time{
      padding-right: 10px;
    }
  }
  .ps-post__title a{
    font-size: 18px;
    line-height: 27px;
    color: $color-link; 
    font-weight: 400;
    @media(max-width: 1200px) {
      font-size: 16px;
    }
    &:hover {
      text-decoration: underline;
    }
  }
  .ps-post__thumbnail {
    position: relative; 
    &:hover {
      .ps-post__overlay{
        background-color: rgba(255, 255, 255, 0.5);
      }
    }
  }
  .ps-post__content{
    text-align: left; 
    border: 1px solid #e8e8e8;
    padding: 26px 30px 37px 30px;
  }
  .read-more{
    /* float: left; */
    clear: both;
    color: $color-link; 
    margin-top: 23px;
    -webkit-transition: all 0.3s ease;
    -khtml-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    display: inline-block;
    @media(max-width: 1200px) {
      margin-top: 0px;
    }
    i{
      font-size: 18px;
      margin-left: 8px;
      position: relative;
      top: 2px;
    }
    &:hover {
      color: #3e3e3e; 
    }
  }
}
.view-all{
  text-align: center; 
  margin-top: 70px;
  @media(max-width: 1200px) {
    margin-top: 30px;
  }
  a{
    font-weight: 600;
    display: inline-block;
    color: $color-link; 
    background-color: unset;
    border: unset;
    padding: 0;
    @include transition(all 0.3s ease); 
    position: relative; 
    &:after {
      content: '';
      position: absolute;
      height: 1px;
      bottom: 2px;
      display: block; 
      width: 100%; 
      @include transition(all 0.3s ease); 
      background: $color-link; 
    }
    &:hover {
      color: $main-color; 
      &:after {
        background: $main-color; 
      }
    }
  }
}
/********************* Page portfolio **************/
//port
.page-portfolio{
  &.style3{
    .ps-post__header {
      padding: 100px 0;
      background-color: #333;
      p{
        color: rgba(255, 255, 255, 0.5);

      }
      h3{
        color: #fff;
      }
    }
    .ps-post__project-info{
      clear: both; 
      text-align: left;
      max-width: 100%;
    }
    .ps-social {
      margin-top: 0;
      margin: 0;
    }
    .ps-col-tiny{
      p{
        display: inline-block; 
        line-height: 1.5em;
        margin-bottom: 35px;
        strong{
          padding-right: 10px;
        }
      }

    }
  }
  .button-group{
    text-align: center; 
    margin-bottom: 50px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    padding: 13px 0px;
    button{
      display: inline-block;
      padding: 10px 0;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .05em;
      color: rgba(0, 0, 0, 0.5);
      text-transform: uppercase;
      line-height: 20px;
      outline: none !important; 
      position: relative; 
      background: #fff;
      margin-right: 50px;
      @media(max-width: 991px) {
        margin-right: 30px
      }
      &:last-child {
        margin: 0;
      }
      &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 40%;
        width: 5px;
        height: 5px;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: #ca2028;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        transition: all 0.4s ease;      
      }
      &.is-checked, &:hover {
        color: #333;
        &:before {
          visibility: visible; 
          opacity: 1;
        }
      }
    }
  }
  .wrap{
    .image-project{
      position: relative; 
      margin-bottom: 30px;
      img{
        width: 100%; 
        @include transition(all .3s); 
      }
      a{
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 20;
        min-width: 165px;
        text-align: center;
        visibility: hidden;
        opacity: 0;
      }
      &:hover {
        a{
          visibility: visible;
          opacity: 1;

        }
        img{
          opacity: 0.6;
        }
      }
    }

    .ps-post__content{
      text-transform: capitalize; 
      text-align: center; 
      h3{
        font-size: 24px;
        font-weight: 300;
        line-height: 1.46em;
        color: #000;
        cursor: default;
      }
      p{
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .06em;
        text-align: center;
        color: rgba(0, 0, 0, 0.5);
        text-transform: uppercase;
      }
    }
  }
}
.ps-post--portfolio-single {
  .ps-post__header {
    margin-bottom: 100px;
    text-align: center;
    .ps-heading {
      margin-bottom: 30px;
    }
  }
  .ps-post__project-info {
    max-width: 760px;
    margin: 0 auto;
    padding: 100px 0;
    text-align: center;
    @media(max-width: 991px) {
      padding: 70px 0;
    }
    @media(max-width: 420px) {
      padding: 50px 0;
    }
    h4 {
      margin-bottom: 20px;
      font-size: 20px;
      letter-spacing: .1em;
      font-weight: 500;
      color: #000000;
    }
  }
  .ps-social {
    margin: 50px 0;
    strong {
      margin-right: 10px;
      font-size: 18px;
      font-weight: 600;
      line-height: 2em;
      text-align: center;
      color: #000;
    }
    a {
      margin-right: 15px;
      color: #000;
      &:hover {
        color: #ca2028;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .ps-product__footer {
    padding: 30px 0;
    border-top: 1px solid rgba(#000, .1);
    a {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      color: #000;
      text-transform: uppercase;
      i {
        margin-right: 5px;
        font-size: 14px;
        vertical-align: middle;
      }
      &:hover {
        color: #ca2028;
      }
      &.next {
        float: right;
        i {
          margin-right: 0;
          margin-left: 5px;
        }
      }
    }
  }
  &.second {
    .ps-post__header {
      margin-bottom: 50px;
    }
    .ps-post__project-info {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
    }
  }
  &.third {
    .ps-post__header {
      padding: 100px 0;
      background-color: #333;
      .ps-heading {
        color: #fff;
      }
      p {
        color: rgba(#fff, .5);
      }
    }
    .ps-post__project-info {
      padding-top: 0;
      max-width: 100%;
      text-align: left;
    }
    .ps-social {
      margin-top: 0;
      a{
        &:hover {
          color: #ca2028;
        }
      }
    }

    .ps-product__footer {
      margin-top: 150px;
      margin-bottom: 100px;
    }
  }

}
.template-collection .products-grid.normal >div{
  padding: 0px 15px;
  float: left; 
  @include transition(all 0.3s ease); 
  @media(max-width: 767px) {
    width: 50% !important; 
  }
  @media(max-width: 479px) {
    width: 100% !important; 
  }
}

.two >div{
  width: 50%;

}
.three >div{
  width: 33.3333%;
}
.four >div{
  width: 25%;
  @media(max-width: 991px) {
    width: 33.33333%;
  }
}
.five >div{
  width: 20%;
  @media(max-width: 991px) {
    width: 33.33333%;
  }
}
.six >div{
  width: 16.666666%;
  @media(max-width: 991px) {
    width: 25%;
  }
  @media(max-width: 991px) {
    width: 33.33333%;
  }
}
/********************************** Page About Us ************************/
.page-about{
  .ps-about-features{
    position: relative; 
    @include transform(translate(0, 60px)); 
  }
  .title{
    font-size: 36px;
    font-weight: 600; 
    margin-bottom: 43px;
  }
  .title2{
    font-weight: 400;
    font-size: 24px;
    color: #3e3e3e;
    text-align: left;
  }
  ul{
    margin-top: 40px;
    @media(max-width: 991px) {
      margin-top: 20px;
    }
    li{
      &:first-child:before {
        content:'01';
      }
      &:nth-child(2):before {
        content:'02';
      }
      &:nth-child(3):before {
        content:'03';
      }
      &:before {
        position: absolute;
        font-size: 48px;
        font-weight: 600;
        color: rgba(62, 62, 62, 0.2);
        left: 15px;
        top: 10px;
      }
      padding-left: 100px;
      position: relative;
      counter-increment: theme;
      margin-bottom: 35px;
      strong{
        font-weight: normal;
        font-size: 18px;
        margin-bottom: 20px;
        color: #3e3e3e;
        display: inline-block;
        margin-bottom: 16px;
      }
    }
  }
  .content{
    @media(min-width: 1200px) {
      padding-right: 170px;
    }
    p{
      &:first-child {
        font-size: 18px;
        font-weight: 300;
        color: #3e3e3e;
      }
    }
  }
  .section1{
    margin-bottom: 90px;
  }
  .section2{
    padding: 140px 0 110px 0;
    @media(min-width: 1200px) {
      .content2{
        position: relative;
        top: -66px;
      }
    }
    @media(max-width: 1200px) {
      padding: 93px 0 74px 0;
      background-position-x: -400px !important;
    }
    @media(max-width: 767px) {
      padding: 0px 0 54px 0;
      background: #fff !important; 
    }
  }
}
//testi
.template-index .nou-testimonial{
  .bg--cover{
    padding :80px 0;
    @media(max-width: 767px) {
      padding: 50px 0;
    }
  }
}
.nou-testimonial{
  .bg--cover{
    padding :140px 0 150px 0;
    @media(max-width: 767px) {
      padding: 80px 0;
    }
  }
  .ps-section__header{
    margin-bottom: 55px;
    p{
      padding-top: 5px;
    }
  }
  .owl-carousel{
    .owl-nav{
      >div{
        position: absolute;
        z-index: 5;
        border: 0;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        background: #fff;
        color: #3e3e3e;
        top: 50%;
        font-size:  16px;
        @include transition(all 0.3s ease); 
        text-align: center; 
        margin-top: -15px;
        &:hover {
          background: $main-color; 
          color: #fff;
        }
        &.owl-prev{
          left: -100px;
        }
        &.owl-next{
          right: -100px;
        }
      }
    }
  }
  .ps-section__content{
    max-width: 370px;
    margin: 0 auto;
    @media(max-width: 767px) {
      padding: 0 15px;
    }
  }
  .ps-block--testimonial {
    background-color: #fff;
    padding: 36px 40px;
    position: relative; 
    &:after {
      @media(min-width: 500px) {
        content: "\f347";
        font-family: "ionicons";
        font-size: 72px;
        line-height: 1;
        position: absolute;
        right: 20px;
        bottom: -9px;
        color: #dfe2e5;
      }
    }
    .ps-block__content{
      p{
        font-size: 14px;
        color: #111;
        margin-bottom: 34px;
      }
    }
    .ps-block__header {
      position: relative;
      padding-left: 67px;
      min-height: 50px;
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
      }
      h5 {
        margin-bottom: 0;
        line-height: 20px;
        font-size: 14px;
        line-height: 30px;
        font-weight: 400;
        text-transform: capitalize;
        color: #111;
      }
      p {
        margin-bottom: 0;
        font-size: 13px;
      }
    }
  }
}

/******************** Page Team ********************/
.nou-team{
  padding: 150px 0 70px 0;
  @media(max-width: 991px) {
    padding: 100px 0 20px 0;
  }
  @media(max-width: 420px) {
    padding: 80px 0 0 0;
  }  
}
.nou-apply{
  background-color: #f8f8f8;
  padding: 116px 0;
  text-align: center; 
  @media(max-width: 991px) {
    padding: 70px 0;
  }
  @media(max-width: 420px) {
    padding: 50px
  }
  .content{
    max-width: 675px;
    margin: 0 auto;
  }
  h3{
    font-size: 30px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.33; 
    margin: 0
  }
  p{
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 1.67;
  }
}
.ps-user {
  max-width: 380px;
  margin: 0 auto 80px;
  .ps-user__thumbnail {
    margin-bottom: 30px;
    position: relative;
    &:hover {
      .ps-user__overlay{
        background: rgba(255,255,255, .3); 
      }
    }
    img {
      width: 100%;
    }
  }
  .ps-user__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .ps-user__content {
    text-transform: capitalize; 
    text-align: center;
    p {
      font-size: 15px;
      line-height: 1.67em;
      color: rgba(#000, .5);
    }
    ul {
      display: block;
      text-align: center;
      li {
        display: inline-block;
        a {
          position: relative;
          display: inline-block;
          width: 30px;
          height: 30px;
          @include border-radius(5px);
          i {
            @include center();
            color: #000;
          }
          &:hover {
            background-color: $color-2nd;
            i {
              color: #fff;
            }
          }
        }
      }
    }

  }
  .ps-user__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.56em;
    text-align: center;
    color: #000;
    &:hover {
      color: $color-1st;
    }
  }
  @media(max-width: 768px) {
    margin: 0 auto 40px;
  }
}
/***************** Page Contact ********************/
.ps-contact {
  @include clearfix;
  #contact-map{
    @media(min-width: 1900px) {
      height: 475px;
    }
  }
  iframe {
    width: 100%;
    height: 475px;
  }
  .ps-contact__right{
    @media(min-width: 1200px) {
      padding-right: 60px;
    }
  }
  .ps-contact__info {
    border-bottom: 1px solid #EBEBEB;
    padding-bottom: 30px;
    margin-bottom: 30px;
    .ps-heading {
      margin-bottom: 25px;
      font-weight: 400;
      font-size: 27px;
      color: #3e3e3e;
      text-align: left;
    }
    p {
      font-size: 14px;
      line-height: 1.67em;
    }
  }
  .ps-contact__info2{
    p{
      margin-bottom: 15px;
      color: #3e3e3e;
      b{
        display: block;
        color: #3e3e3e;
        font-size: 24px;
        font-weight: 500;
        margin-top: 12px;
        margin-bottom: 33px;
      }
      span{
        color: #8c8e93;
      }
    }
  }
  .ps-contact__detail {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-transform: none;
    color: #8f8f8f;
    p {
      &:first-child {
        margin-bottom: 24px;
      }
      &:nth-child(2) , &:nth-child(3) {
        margin-bottom: 8px;
        span{
          color: #3e3e3e;
        }
      }
      a{
        color: #599de2;
      }
    }
  }
  @media(max-width: 768px) {
    #contact-map {
      height: 300px;
    }
  }
  .form-contact{
    margin-top: 5px;
    @media(max-width: 991px) {
      margin-top: 80px;
    }
    .title{
      font-weight: 400;
      font-size: 18px;
      color: #3e3e3e;
      text-align: left;
      margin-bottom: 28px;
    }
  }
}

/*************** Article page ******************/
.template-article{
  .social-sharing{
    display: block; 
    color: #000;
    a{
      border: 0;
      display: inline-block;
      margin-right: 20px;
      padding: 0;
      background: transparent; 
      color: #000;
      @include transition(all 0.3s ease); 
      margin-bottom: 0;
      opacity:1 !important; 
      &:hover {
        color: $color-2nd; 
      }
      &:first-child {
        margin-left: 15px;

      }      
    }
  }
}
.ps-post--single {
  .ps-post__tags {
    li{
      padding-right: 5px;
      &.title{
        color: #3e3e3e;
      }
    }
    a {
      text-transform: capitalize; 
      color: #8f8f8f;
      @include transition(all 0.3s ease); 
      &:hover {
        color: $main-color; 
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .ps-post__navigation {
    margin-bottom: 30px;
    @include clearfix;
    a {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      color: #000;
      text-transform: uppercase;
      &:hover {
        color: $color-2nd;
      }

    }
    i{
      font-size: 11px;
      color: #000;
    }
    .right {
      float: right;
    }
  }
}

.ps-post--related {
  position: relative;
  text-align: left;
  margin-bottom: 30px;
  .ps-post__thumbnail {
    margin-bottom: 20px;
    img {
      width: 100%;
    }
  }
  .ps-post__title {
    display: block;
    font-size: 16px;
    line-height: 1.56em;
    text-align: left;
    color: #000;

    &:hover {
      color: $color-1st;
    }
  }
}
//comment
.ps-block--comment {
  margin: 0 auto 10px;
  padding: 30px;
  max-width: 760px;
  background-color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  @media(max-width: 991px) {
    margin: 0 20px 10px !important; 
  }
}
.form-success{
  background-color: #fff;
  text-align: center;
  border: 0;
  margin: 0 auto 10px;
  padding: 10px;
  max-width: 760px;
}
.ps-comments {
  background-color: #f8f8f8;
  padding: 100px 0;
  h3.ps-heading {
    margin-bottom: 80px;
    text-align: center;
    @media(max-width: 991px) {
      margin-bottom: 50px;
    }
  }
  @media(max-width: 991px) {
    padding: 50px 0;
  }
}

.ps-block--comment {
  margin: 0 auto 10px;
  padding: 30px;
  max-width: 760px;
  background-color: #fff;
  @include border-radius(4px);
  .ps-block__header {
    position: relative;
    margin-bottom: 30px;
    padding: 0 80px;
    i {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 46px;
    }
    p {
      margin-bottom: 0;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.5em;
      color: #000000;
    }
    > span {
      font-size: 13px;
      line-height: 1.9em;
      color: rgba(#000, .5);
    }
    .ps-reply {
      display: inline-block;
      position: absolute;
      top: 0;
      right: 0;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      color: #000;
      text-transform: uppercase;
      &:hover {
        color: $color-2nd;
      }
    }
  }
  @media(max-width: 420px) {
    padding: 30px 15px;
    .ps-block__header {
      padding-right: 0;
      padding-left: 50px;
      img {
        width: 40px;
      }
    }
  }
}

//related
.ps-blog__posts-related {
  padding-top: 50px;
  padding-bottom: 70px;
  text-align: center;
  .ps-heading {
    margin-bottom: 80px;
    @media(max-width: 767px) {
      margin-bottom: 50px;
      font-size: 30px;
    }
  }
  .ps-post__thumbnail {
    margin-bottom: 20px;
    position: relative; 
    &:hover {
      .ps-post__overlay{
        background-color: rgba(255, 255, 255, 0.5);
      }
    }
  }
}
.ps-post__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

//fix bug
.header .header-container .header-middle .header-minicart .minicart-products-list{
  max-height: 322px;
  overflow: hidden;
  display: block;
  overflow-y: auto !important;
  &::-webkit-scrollbar
  {
    width: 10px;
    background-color: #F5F5F5;
  }

  &::-webkit-scrollbar-thumb
  {
    background-color: #000000;
    border: 2px solid #555555;
  }
}
.header .header-container .header-middle .header-minicart .dropminicart-content .minicart-products-list .btn-remove {
  position: absolute;
  right: 6px;
}
.ps-pagination .pagination li>a, .ps-pagination .pagination li span{
  z-index:unset;
}

.ps-footer--1 .ps-footer__social li {
  @media(max-width: 1400px) {
    margin-right: 11px;
  }
}
.header .header-middle .header-minicart .dropminicart-content{
  height: auto !important; 
  .minicart-products-list li.item{
    color: #111;
  }
  @media(max-width: 479px) {
    right: 0px !important; 
  }
}
.ps-shop--category{
  @media(min-width: 767px) and (max-width: 1200px) {
    .ps-collection--bottom .ps-collection__morelink{
      padding: 12px 20px 10px;
      min-width: 144px;
    }
  }
}
.ps-product--detail .product-shop .product-item .ps-product__price{
  font-weight: 700;
}
.ps-filter li a:before{
  display: block !important; 
}
.template-cart{
  .btn{
    color: #fff;
    @include transition(all 0.3s ease); 
    &:hover {
      opacity: .7;
    }
  }
  .section-header{
    margin-top: 0px;
  }
  .main-content{
    padding-bottom: 60px;
  }
}
.template-product{
  .filter-toggle i{
    color: #fff;
  }
  .ps-section--product-video .ps-video .ps-video__play .path4:before{
    margin-top: 3px;
  }
}
.product-shop .product-addto-links a:hover{
  color: $color-2nd; 
}
.ps-product--1{
  .ps-product__title{
    text-transform: capitalize; 
  }
  .product-swatches{
    position: static;
    width: auto;
    margin-top: 8px;;
    height: 24px;
  }
  label.white{
    border: 1px solid #ccc; 
  }
}
#CustomerLoginForm, .template-404{
  .btn{
    color: #fff !important; 
    @include transition(all 0.3s ease);
    &:hover {
      opacity: .7;
    }
  }
}
.page-wrap{
  padding: 80px 0;
}
.btn.focus, .btn:focus, .btn:hover {
  color: #fff;
  text-decoration: none;
  @include transition(all 0.3s ease); 
}
//home our store
.home-our-store{
  .ps-section__header{
    margin-bottom: 35px;
    @media(max-width: 1200px) {
      margin-bottom: 20px;
    }
  }
  .view-all{
    margin-top: 0;
    margin-bottom: 74px;
    @media(max-width: 1200px) {
      margin-bottom: 30px;
    }
  }
  .ps-post--vertical {
    .ps-post__content{
      border: 0;
      padding: 0;
      text-align: center;
      padding-top: 21px;
    }
    .read-more{
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 50%;
      background: #f3f3f3;
      text-align: center;
      margin: 0;
      @include transition(all 0.3s ease); 
      &:hover {
        background: $main-color; 
        color: #fff;
      }
      i{
        margin: 0;
        position: static; 
      }
    }
  }
}
//home banner index2
.home-banner{
  margin-bottom: -10px;
  .row{
    margin: 0 -5px;
    @media(max-width: 1200px) {
      display: flex;
      -webkit-display: flex;
      -ms-display: flex;
      flex-wrap:wrap;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
    }
    >div{
      margin-bottom: 10px;
      padding: 0 5px;
      &.col-sm-8{
        width: 67.797%;
      }
      &.col-sm-4{
        width: 32.203%;
      }
      @media(min-width: 1200px){
        display: table-cell !important; 
        width: auto !important; 
      }
      @media(max-width: 767px){
        &.col-sm-8{
        width: 100%;
      }
      &.col-sm-4{
        width: 50%;
      }
      } 
    }
  }
}
.template-product .product-addto-links button{
  background: transparent !important;
  &:hover{
    span,i{
      color: $main-color !important;
    }
  }
}
.template-page header.header.style4{
    position: relative !important;
}
.template-collection header.header.style4 {
    position: relative !important;
}

.template-product .selector-wrapper {
    display: none;
}
@media(min-width:581px){
  #displayMobile{
    display:none;
  }
}
@media(max-width:580px){
  #displayMobile{
    display:block !important;
  }
    #displayDesktop{
    display:none !important;
  }
}
.template-product .btn-group-vertical>.btn-group:after, .template-product .btn-toolbar:after,.template-product  .container-fluid:after, .template-product .container:after,.template-product .dl-horizontal dd:after,.template-product .form-horizontal .form-group:after,.template-product .modal-footer:after,.template-product .nav:after,.template-product .navbar-collapse:after,.template-product .navbar-header:after,.template-product .navbar:after,.template-product .pager:after,.template-product .panel-body:after,.template-product .row:after {
    clear: both;
}

.template-product .pay {
    margin: 0px 0;
      text-align: center;
}
.template-product .pay img{
    width:50%;
}
.collection_tempo_btnStyle{
  display: flex; align-items: center; justify-content: space-between;
}
@media(max-width:580px){
  .section-collection-tabs .tab-pane.active{
    display:flex !important;
    flex-wrap:wrap !important;
  }
  .ps-product--1 .product-swatches{
    display:none;
  }
 .ps-product__content .right {
    /* width: 100%; */
    margin-bottom: 7%;
}
      .footer-bottom {
        padding-top: 10;
        padding-top: 25px;
    }
  .collection_tempo_btnStyle{
    display:block !important;
  }
  header .header-menu .nou_megamenu{
     padding-left: 0px !important;
  }
  .template-index .product-item.ps-product--1,.template-collection .product-item.ps-product--1{
    min-height: 323px !important;
  }
  .template-index .ps-product__content,.template-collection .ps-product__content {
    flex-direction: column;
}
  .header-searchbox{
    display:none !important;
  }
}
.ps-contact.ps-main {
    padding: 100px 0;
}
.ps-product__content {
    display: flex;
    justify-content: space-between; //space-around changed 
}
.benefit-item:nth-child(5){
  padding: 40px 20px !important;
}
.template-cart .ps-main {
    padding: 0px !important;
}
a.cart_claim {
    text-decoration: underline;
}
a.cart_claim:hover {
    color:black;
    }

.product-item.ps-product--1 {
    background: #ffffff;
    box-shadow: -1px 2px 10px #d1c0c0;
    padding: 10px;
    border-radius: 10px;
    min-height: 390px !important;
}
.home-section .ps-section__header{
margin:0 auto !important;
}
.product-price.ps-product__price.free-product-active .product-price__price,.product-price.ps-product__price.isFreeItem {
    text-decoration: line-through;
    color: #000000;
    opacity: 0.7;
    transition: all 0.3s ease;
}
.include_stickeez img {
    border-radius: 10px;
}
.include_stickeez {
    text-align: center;
    box-shadow: 1px 2px 10px #5bb6d585;
    margin-top: 5%;
    border-radius: 5px;
    padding: 19px 10px 10px 10px;
}
.template-collection .ps-main {
    padding: 35px 0px;
}
button.homeaddtocart i {
    padding-right: 10px;
}
button.homeaddtocart {
    background: #49b6d5;
    color: white;
    padding: 10px 40px;
    border-radius: 6px;
    font-size: 20px;
}
.toolbar .modes .modes-mode.mode-list{
  display:none;
}                       
/* @media(min-width:581px){
  .include_stickeez.desktopOnly{
    display:none;
  }
}
@media(max-width:580px){
  .include_stickeez.mobileOnly{
    display:none;
  }
} */

.ps-section--relate-products h3.ps-heading {
    font-size: 32px;
    font-weight: 700;
}
  button.nou-btn.Product_PageAddToCart {
    background: #49b6d5 !important;
    color: white;
    padding: 8px 40px;
    border-radius: 6px;
}  
 button.nou-btn.Product_PageAddToCart:hover{
    background:black !important;
 }

 @media(max-width:580px){
   header.style4 .hidden-lg.menu-toggle.flex-box {
    position: relative;
    display: inline-block;
    z-index: 10000;
    margin-left: 15px;
}
   .col-lg-3.col-md-8.col-xs-8.header-right.header-sub {
    width: fit-content;
}
   .col-lg-7.header-menu{
     z-index: 100000;
   }
       header.style4 .header-sub>div.header-minicart {
        position: static;
        min-width: 14px;
        width: 35px;
    }
       header.style4 .header-sub>div.header-minicart .dropminicart-content {
        width: auto !important;
        right: 0px !important;
        min-width: 300px !important;
         left:auto !important;
         
    }
   body.mobile-actived .nav-mobile {
    width: 300px;
}
 } 
@media(max-width: 749px) {
    .cart .cart__update-wrapper {
        padding-top: 0;
        padding-bottom: 22px;
        display: flex;
        justify-content: center;
    }
     .cart__edit.medium-up--hide{
     display:none;
     }

 }
 body.mobile-actived .sb-panel-overlay {
    display: none !important;
}                      
.text-container p a {
    color: blue;
    text-decoration: underline;
}

/* Keep a modest gap under Add to Cart */
.product-form button[name="add"],
.product-form button[type="submit"],
.product-form .product-form__submit,
.product__submit {
  margin-bottom: 12px !important; /* tweak this number */
}

/* If you also show the dynamic checkout (Buy Now) button, keep the same gap */
.product-form .shopify-payment-button,
.shopify-payment-button__button {
  margin-bottom: 12px !important; /* or lower if you want it tighter */
}

/* Payment icons wrapper: small space so it sits close to the buttons */
.pay {
  margin-top: 1px !important; /* reduce/increase to taste */
}


/* ========== Fix mobile banner scaling and snap ========== */
@media (max-width: 580px) {
  .section-home-slider,
  .tp-slideshow,
  .tp-slideshow img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  .tp-slideshow {
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    transition: transform 0.6s ease-in-out !important;
  }

  /* Prevent jump or overlap with next slider */
  .tp-container {
    margin: 0;
    padding: 0;
  }

  /* Ensure slider sits at top of viewport */
  .nou-section.section-home-slider {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Avoid secondary hidden slider showing underneath */
  .tp-slideshow-duplicate,
  .tp-slideshow + .tp-slideshow {
    display: none !important;
  }

}
.visually-hidden, .icon__fallback-text {
    position: absolute !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}
.ps-product--1 {
    margin-bottom: 30px;
}
.ps-product--1 .ps-product__thumbnail {
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}
div#shopify-section-template--19747736322216__why_zeezee_mq_fRnnJY {
    background: #03a1ce12 !important;
}
.page-width {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}