//========== VELA - VARIABLES  ==========//
$vela-color-primary:            ;
$vela-color-secondary:          ;
$vela-border-color:             ;
$vela-body-bg:                  ;

$vela-text-color-primary:       ;
$vela-text-color-secondary:     ;
$vela-text-color-banner:        ;

$vela-border-main:              1px solid $vela-border-color;
$vela-gutter-width:             30px;

$vela-font-family:              ;
$vela-font-family-secondary:    ;
$vela-font-icon:                "FontAwesome";
$vela-font-icon2:               "simple-line-icons";

$vela-topbar-bgcolor:           ;
$vela-topbar-textcolor:         ;

$vela-header-bgcolor:           ;
$vela-header-textcolor:         ;

$vela-breadcrumb-bgcolor:           ;
$vela-breadcrumb-textcolor:         ;
$vela-breadcrumb-headingcolor:         ;

$vela-font-size:                pt;
$nocolor:                       transparent;
$vela-heading-color:		  $vela-text-color-secondary;
//========== BOOTSTRAP - VARIABLES  ==========//
$gray-base:              #333;
$gray-darker:            lighten($gray-base, 13.5%); // #222
$gray-dark:              lighten($gray-base, 20%);   // #333
$gray:                   lighten($gray-base, 33.5%); // #555
$gray-light:             lighten($gray-base, 46.7%); // #777
$gray-lighter:           lighten($gray-base, 93.5%); // #eee

$brand-primary:         $vela-color-primary; // #337ab7
$brand-success:         #5cb85c;
$brand-info:            #5bc0de;
$brand-warning:         #f0ad4e;
$brand-danger:          #d9534f;

$body-bg:               $vela-body-bg;
$text-color:            $vela-text-color-primary;
$link-color:            $vela-text-color-secondary;
$link-hover-color:      $vela-color-primary;
$text-decoration-through: none;

$font-family-sans-serif:  $vela-font-family , Helvetica, Arial, sans-serif;
$font-family-serif:       Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base:        $font-family-sans-serif;

$font-size-base:          $vela-font-size;
$font-size-large:         ceil(($font-size-base * 1.25)); // ~18px
$font-size-small:         ceil(($font-size-base * 0.85)); // ~12px

$font-size-h1:            floor(($font-size-base * 2.6)); // ~36px
$font-size-h2:            floor(($font-size-base * 2.15)); // ~30px
$font-size-h3:            ceil(($font-size-base * 1.7)); // ~24px
$font-size-h4:            ceil(($font-size-base * 1.25)); // ~18px
$font-size-h5:            $font-size-base;
$font-size-h6:            ceil(($font-size-base * 0.85)); // ~12px

$line-height-base:        1.45;
$line-height-computed:    floor(($font-size-base * $line-height-base));

$headings-font-family:    inherit;
$headings-font-weight:    700;
$headings-line-height:    1.1;
$headings-color:          $vela-text-color-secondary;

$padding-base-vertical:     9px;
$padding-base-horizontal:   20px;

$padding-large-vertical:    12px;
$padding-large-horizontal:  30px;

$padding-small-vertical:    5px;
$padding-small-horizontal:  10px;

$padding-xs-vertical:       1px;
$padding-xs-horizontal:     5px;

$line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
$line-height-small:         1.5;

$border-radius-base:        3px;
$border-radius-large:       4px;
$border-radius-small:       0;

$component-active-color:    #fff;
$component-active-bg:       $brand-primary;
$caret-width-base:          4px;
$caret-width-large:         5px;

$table-cell-padding:            8px;
$table-condensed-cell-padding:  5px;
$table-bg:                      transparent;
$table-bg-accent:               #f9f9f9;
$table-bg-hover:                #f5f5f5;
$table-bg-active:               $table-bg-hover;
$table-border-color:            #ddd;

$input-bg:                       #fff;
$input-bg-disabled:              $gray-lighter;
$input-color:                    $vela-text-color-primary;
$input-border:                   $vela-border-color;
$input-border-radius:            $border-radius-base;
$input-border-radius-large:      $border-radius-large;
$input-border-radius-small:      $border-radius-small;
$input-border-focus:             $vela-color-primary;
$input-color-placeholder:        #999;
$input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2);
$input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2);
$input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2);
$form-group-margin-bottom:       15px;
$legend-color:                   $gray-dark;
$legend-border-color:            #e5e5e5;
$input-group-addon-bg:           $gray-lighter;
$input-group-addon-border-color: $input-border;
$cursor-disabled:                not-allowed;

$dropdown-bg:                    #fff;
$dropdown-border:                rgba(0,0,0,.15);
$dropdown-fallback-border:       #ccc;
$dropdown-divider-bg:            #e5e5e5;
$dropdown-link-color:            $gray-dark;
$dropdown-link-hover-color:      darken($gray-dark, 5%);
$dropdown-link-hover-bg:         transparent;
$dropdown-link-active-color:     $component-active-color;
$dropdown-link-active-bg:        $component-active-bg;
$dropdown-link-disabled-color:   $gray-light;
$dropdown-header-color:          $gray-light;
$dropdown-caret-color:           #000;

$zindex-navbar:            1000;
$zindex-dropdown:          1000;
$zindex-popover:           1060;
$zindex-tooltip:           1070;
$zindex-navbar-fixed:      1030;

$screen-xs:                  480px;
$screen-xs-min:              $screen-xs;
$screen-phone:               $screen-xs-min;
$screen-sm:                  768px;
$screen-sm-min:              $screen-sm;
$screen-tablet:              $screen-sm-min;
$screen-md:                  992px;
$screen-md-min:              $screen-md;
$screen-desktop:             $screen-md-min;
$screen-lg:                  1220px;
$screen-lg-min:              $screen-lg;
$screen-lg-desktop:          $screen-lg-min;
$screen-xl:                  1410px;
$screen-xl-min:              $screen-xl;
$screen-xl-desktop:          $screen-xl-min;
$screen-xs-max:              ($screen-sm-min - 1);
$screen-sm-max:              ($screen-md-min - 1);
$screen-md-max:              ($screen-lg-min - 1);
$screen-lg-max:              ($screen-xl-min - 1);

$grid-columns:              12;
$grid-gutter-width:         $vela-gutter-width;
$grid-float-breakpoint:     $screen-sm-min;
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);

$container-tablet:             (730px + $grid-gutter-width);
$container-sm:                 $container-tablet;
$container-desktop:            (960px + $grid-gutter-width);
$container-md:                 $container-desktop;
$container-large-desktop:      (1190px + $grid-gutter-width);
$container-lg:                 $container-large-desktop;
$container-large-xdesktop:      (1380px + $grid-gutter-width);
$container-xl:                 $container-large-xdesktop;

$nav-link-padding:                          10px 15px;
$nav-link-hover-bg:                         transparent;
$nav-disabled-link-color:                   $gray-light;
$nav-disabled-link-hover-color:             $gray-light;
$nav-tabs-border-color:                     $vela-border-color;
$nav-tabs-link-hover-border-color:          $nocolor;
$nav-tabs-active-link-hover-bg:             transparent;
$nav-tabs-active-link-hover-color:          $gray;
$nav-tabs-active-link-hover-border-color:   #ddd;
$nav-tabs-justified-link-border-color:            #ddd;
$nav-tabs-justified-active-link-border-color:     $body-bg;
$nav-pills-border-radius:                   $border-radius-base;
$nav-pills-active-link-hover-bg:            $component-active-bg;
$nav-pills-active-link-hover-color:         $component-active-color;

$pagination-color:                     #333e48;
$pagination-bg:                        #fff;
$pagination-border:                    $vela-border-color;
$pagination-hover-color:               #fff;
$pagination-hover-bg:                  $vela-color-primary;
$pagination-hover-border:              $vela-color-primary;
$pagination-active-color:              #fff;
$pagination-active-bg:                 $vela-color-primary;
$pagination-active-border:             $vela-color-primary;
$pagination-disabled-color:            $pagination-color;
$pagination-disabled-bg:               $pagination-bg;
$pagination-disabled-border:           $pagination-border;

$pager-bg:                             $pagination-bg;
$pager-border:                         $pagination-border;
$pager-border-radius:                  15px;
$pager-hover-bg:                       $pagination-hover-bg;
$pager-active-bg:                      $pagination-active-bg;
$pager-active-color:                   $pagination-active-color;
$pager-disabled-color:                 $pagination-disabled-color;

$state-success-text:             #ffffff;
$state-success-bg:               #5cb85c;
$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%);
$state-info-text:                #ffffff;
$state-info-bg:                  #31b0d5;
$state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%);
$state-warning-text:             #8a6d3b;
$state-warning-bg:               #fcf8e3;
$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%);
$state-danger-text:              #ffffff;
$state-danger-bg:                #E26868;
$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%);

$tooltip-max-width:           200px;
$tooltip-color:               #fff;
$tooltip-bg:                  #000;
$tooltip-opacity:             .9;
$tooltip-arrow-width:         5px;
$tooltip-arrow-color:         $tooltip-bg;

$popover-bg:                          #fff;
$popover-max-width:                   276px;
$popover-border-color:                rgba(0,0,0,.2);
$popover-fallback-border-color:       #ccc;
$popover-title-bg:                    darken($popover-bg, 3%);
$popover-arrow-width:                 10px;
$popover-arrow-color:                 $popover-bg;
$popover-arrow-outer-width:           ($popover-arrow-width + 1);
$popover-arrow-outer-color:           fade_in($popover-border-color, 0.05);
$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%);

$label-default-bg:            $gray-light;
$label-primary-bg:            $brand-primary;
$label-success-bg:            $brand-success;
$label-info-bg:               $brand-info;
$label-warning-bg:            $brand-warning;
$label-danger-bg:             $brand-danger;
$label-color:                 #fff;
$label-link-hover-color:      #fff;

$alert-padding:               5px 10px;
$alert-border-radius:         0;
$alert-link-font-weight:      bold;
$alert-success-bg:            $state-success-bg;
$alert-success-text:          $state-success-text;
$alert-success-border:        $state-success-border;
$alert-info-bg:               $state-info-bg;
$alert-info-text:             $state-info-text;
$alert-info-border:           $state-info-border;
$alert-warning-bg:            $state-warning-bg;
$alert-warning-text:          $state-warning-text;
$alert-warning-border:        $state-warning-border;
$alert-danger-bg:             $state-danger-bg;
$alert-danger-text:           $state-danger-text;
$alert-danger-border:         $state-danger-border;

$list-group-bg:                 #fff;
$list-group-border:             #ddd;
$list-group-border-radius:      $border-radius-base;
$list-group-hover-bg:           #f5f5f5;
$list-group-active-color:       $component-active-color;
$list-group-active-bg:          $component-active-bg;
$list-group-active-border:      $list-group-active-bg;
$list-group-active-text-color:  lighten($list-group-active-bg, 40%);
$list-group-disabled-color:      $gray-light;
$list-group-disabled-bg:         $gray-lighter;
$list-group-disabled-text-color: $list-group-disabled-color;
$list-group-link-color:         #555;
$list-group-link-hover-color:   $list-group-link-color;
$list-group-link-heading-color: #333;

$panel-bg:                    #fff;
$panel-body-padding:          15px;
$panel-heading-padding:       10px 15px;
$panel-footer-padding:        $panel-heading-padding;
$panel-border-radius:         $border-radius-base;
$panel-inner-border:          #ddd;
$panel-footer-bg:             #f5f5f5;
$panel-default-text:          $gray-dark;
$panel-default-border:        #ddd;
$panel-default-heading-bg:    #f5f5f5;
$panel-primary-text:          #fff;
$panel-primary-border:        $brand-primary;
$panel-primary-heading-bg:    $brand-primary;
$panel-success-text:          $state-success-text;
$panel-success-border:        $state-success-border;
$panel-success-heading-bg:    $state-success-bg;
$panel-info-text:             $state-info-text;
$panel-info-border:           $state-info-border;
$panel-info-heading-bg:       $state-info-bg;
$panel-warning-text:          $state-warning-text;
$panel-warning-border:        $state-warning-border;
$panel-warning-heading-bg:    $state-warning-bg;
$panel-danger-text:           $state-danger-text;
$panel-danger-border:         $state-danger-border;
$panel-danger-heading-bg:     $state-danger-bg;

$badge-color:                 #fff;
$badge-link-hover-color:      #fff;
$badge-bg:                    $gray-light;
$badge-active-color:          $link-color;
$badge-active-bg:             #fff;
$badge-font-weight:           bold;
$badge-line-height:           1;
$badge-border-radius:         10px;

$breadcrumb-padding-vertical:   0;
$breadcrumb-padding-horizontal: 0px;
$breadcrumb-bg:                 transparent;
$breadcrumb-color:              $vela-breadcrumb-textcolor;
$breadcrumb-active-color:       #999999;
$breadcrumb-separator:          "";

$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
$carousel-control-color:                      #fff;
$carousel-control-width:                      15%;
$carousel-control-opacity:                    .5;
$carousel-control-font-size:                  20px;
$carousel-indicator-active-bg:                #fff;
$carousel-indicator-border-color:             #fff;
$carousel-caption-color:                      #fff;

$close-font-weight:           bold;
$close-color:                 #000;
$close-text-shadow:           0 1px 0 #fff;

$component-offset-horizontal: 180px;
$text-muted:                  $gray-light;
$abbr-border-color:           $gray-light;
$headings-small-color:        $gray-light;
$blockquote-small-color:      $gray-light;
$blockquote-font-size:        ($font-size-base * 1.25);
$blockquote-border-color:     $vela-color-primary;
$page-header-border-color:    $gray-lighter;
$dl-horizontal-offset:        $component-offset-horizontal;
$dl-horizontal-breakpoint:    $grid-float-breakpoint;
$hr-border:                   $gray-lighter;

@mixin hide-text() {font: 0/0 a;color: transparent;text-shadow: none;background-color: transparent;border: 0;}
@mixin text-hide() {@include hide-text;}
@mixin opacity($opacity) {opacity: $opacity;$opacity-ie: ($opacity * 100);filter: alpha(opacity=$opacity-ie);}
@mixin img-responsive($display: block) {display: $display;max-width: 100%;height: auto;}
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
    background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) {background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}"));background-size: $width-1x $height-1x;}
}
@mixin label-variant($color) {background-color: $color;&[href] {&:hover,&:focus {background-color: darken($color, 10%);}}}
@mixin reset-filter() {filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}
@mixin resizable($direction) {resize: $direction;overflow: auto;}
@mixin responsive-visibility($parent) {
    #{$parent} {
        display: block !important;
    }
    table#{$parent}  { display: table !important; }
    tr#{$parent}     { display: table-row !important; }
    th#{$parent},
    td#{$parent}     { display: table-cell !important; }
}
@mixin responsive-invisibility($parent) {
    #{$parent} {
        display: none !important;
    }
}
@mixin size($width, $height) {width: $width;height: $height;}
@mixin square($size) {@include size($size, $size);}
@mixin tab-focus() {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}
@mixin reset-text() {font-family: $font-family-base;font-style: normal;font-weight: normal;letter-spacing: normal;line-break: auto;line-height: $line-height-base;text-align: left;text-align: start;text-decoration: none;text-shadow: none;text-transform: none;white-space: normal;word-break: normal;word-spacing: normal;word-wrap: normal;}
@mixin text-emphasis-variant($parent, $color) {
    #{$parent} {
        color: $color;
    }
    a#{$parent}:hover,
    a#{$parent}:focus {
        color: darken($color, 10%);
    }
}
@mixin text-overflow() {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
@mixin animation($animation) {
  -webkit-animation: $animation;
       -o-animation: $animation;
          animation: $animation;
}
@mixin animation-name($name) {
  -webkit-animation-name: $name;
          animation-name: $name;
}
@mixin animation-duration($duration) {
  -webkit-animation-duration: $duration;
          animation-duration: $duration;
}
@mixin animation-timing-function($timing-function) {
  -webkit-animation-timing-function: $timing-function;
          animation-timing-function: $timing-function;
}
@mixin animation-delay($delay) {
  -webkit-animation-delay: $delay;
          animation-delay: $delay;
}
@mixin animation-iteration-count($iteration-count) {
  -webkit-animation-iteration-count: $iteration-count;
          animation-iteration-count: $iteration-count;
}
@mixin animation-direction($direction) {
  -webkit-animation-direction: $direction;
          animation-direction: $direction;
}
@mixin animation-fill-mode($fill-mode) {
  -webkit-animation-fill-mode: $fill-mode;
          animation-fill-mode: $fill-mode;
}
@mixin backface-visibility($visibility) {
  -webkit-backface-visibility: $visibility;
     -moz-backface-visibility: $visibility;
          backface-visibility: $visibility;
}
@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
          box-shadow: $shadow;
}
@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}
@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
  -webkit-column-count: $column-count;
     -moz-column-count: $column-count;
          column-count: $column-count;
  -webkit-column-gap: $column-gap;
     -moz-column-gap: $column-gap;
          column-gap: $column-gap;
}
@mixin hyphens($mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: $mode;
     -moz-hyphens: $mode;
      -ms-hyphens: $mode; // IE10+
       -o-hyphens: $mode;
          hyphens: $mode;
}
@mixin placeholder($color: $input-color-placeholder) {
    &::-moz-placeholder {color: $color;opacity: 1;}
    &:-ms-input-placeholder { color: $color; }
    &::-webkit-input-placeholder  { color: $color; }
}
@mixin scale($ratio...) {
  -webkit-transform: scale($ratio);
      -ms-transform: scale($ratio);
       -o-transform: scale($ratio);
          transform: scale($ratio);
}
@mixin scaleX($ratio) {
  -webkit-transform: scaleX($ratio);
      -ms-transform: scaleX($ratio);
       -o-transform: scaleX($ratio);
          transform: scaleX($ratio);
}
@mixin scaleY($ratio) {
  -webkit-transform: scaleY($ratio);
      -ms-transform: scaleY($ratio);
       -o-transform: scaleY($ratio);
          transform: scaleY($ratio);
}
@mixin skew($x, $y) {
  -webkit-transform: skewX($x) skewY($y);
      -ms-transform: skewX($x) skewY($y);
       -o-transform: skewX($x) skewY($y);
          transform: skewX($x) skewY($y);
}
@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
      -ms-transform: translate($x, $y);
       -o-transform: translate($x, $y);
          transform: translate($x, $y);
}
@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
          transform: translate3d($x, $y, $z);
}
@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
      -ms-transform: rotate($degrees);
       -o-transform: rotate($degrees);
          transform: rotate($degrees);
}
@mixin rotateX($degrees) {
  -webkit-transform: rotateX($degrees);
      -ms-transform: rotateX($degrees);
       -o-transform: rotateX($degrees);
          transform: rotateX($degrees);
}
@mixin rotateY($degrees) {
  -webkit-transform: rotateY($degrees);
      -ms-transform: rotateY($degrees);
       -o-transform: rotateY($degrees);
          transform: rotateY($degrees);
}
@mixin perspective($perspective) {
  -webkit-perspective: $perspective;
     -moz-perspective: $perspective;
          perspective: $perspective;
}
@mixin perspective-origin($perspective) {
  -webkit-perspective-origin: $perspective;
     -moz-perspective-origin: $perspective;
          perspective-origin: $perspective;
}
@mixin transform-origin($origin) {
  -webkit-transform-origin: $origin;
     -moz-transform-origin: $origin;
      -ms-transform-origin: $origin;
          transform-origin: $origin;
}
@mixin transition($transition...) {
  -webkit-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}
@mixin transition-property($transition-property...) {
  -webkit-transition-property: $transition-property;
          transition-property: $transition-property;
}
@mixin transition-delay($transition-delay) {
  -webkit-transition-delay: $transition-delay;
          transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration...) {
  -webkit-transition-duration: $transition-duration;
          transition-duration: $transition-duration;
}
@mixin transition-timing-function($timing-function) {
  -webkit-transition-timing-function: $timing-function;
          transition-timing-function: $timing-function;
}
@mixin transform($arguments){
   -webkit-transform: $arguments;
   -moz-transform:    $arguments;
   -ms-transform:     $arguments;
   -o-transform:      $arguments;
}
@mixin transition-transform($transition...) {
  -webkit-transition: -webkit-transform $transition;
     -moz-transition: -moz-transform $transition;
       -o-transition: -o-transform $transition;
          transition: transform $transition;
}
@mixin user-select($select) {
  -webkit-user-select: $select;
     -moz-user-select: $select;
      -ms-user-select: $select;
          user-select: $select;
}
@mixin alert-variant($background, $border, $text-color) {background-color: $background;border-color: $border;color: $text-color;
    hr {border-top-color: darken($border, 5%);}
    .alert-link {color: darken($text-color, 10%);}
}
@mixin button-variant($color, $background, $border) {color: $color;background-color: $background;border-color: $border;
    &:focus,
    &.focus {color: $color;background-color: darken($background, 10%);border-color: darken($border, 25%);}
    &:hover {color: $color;background-color: darken($background, 10%);border-color: darken($border, 12%);}
    &:active,
    &.active,
    .open > &.dropdown-toggle {color: $color;background-color: darken($background, 10%);border-color: darken($border, 12%);
        &:hover,
        &:focus,
        &.focus {color: $color;background-color: darken($background, 17%);border-color: darken($border, 25%);}
    }
    &:active,
    &.active,
    .open > &.dropdown-toggle {background-image: none;}
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &:hover,
        &:focus,
        &.focus {background-color: $background;border-color: $border;}
    }
    .badge {color: $background;background-color: $color;}
}
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {padding: $padding-vertical $padding-horizontal;font-size: $font-size;line-height: $line-height;border-radius: $border-radius;}
@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {border-color: $border;
    & > .panel-heading {color: $heading-text-color;background-color: $heading-bg-color;border-color: $heading-border;+ .panel-collapse > .panel-body {border-top-color: $border;}.badge {color: $heading-bg-color;background-color: $heading-text-color;}}
    & > .panel-footer {+ .panel-collapse > .panel-body {border-bottom-color: $border;}}
}
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
    > li {
        > a,> span {padding: $padding-vertical $padding-horizontal;font-size: $font-size;line-height: $line-height;}
        &:first-child {> a,> span {@include border-left-radius($border-radius);}}
        &:last-child {> a,> span {@include border-right-radius($border-radius);}}
    }
}
@mixin list-group-item-variant($state, $background, $color) {
    .list-group-item-#{$state} {color: $color;background-color: $background;}
    a.list-group-item-#{$state},
    button.list-group-item-#{$state} {
        color: $color;
        .list-group-item-heading {color: inherit;}
        &:hover,
        &:focus {color: $color;background-color: darken($background, 5%);}
        &.active,
        &.active:hover,
        &.active:focus {color: #fff;background-color: $color;border-color: $color;}
    }
}
@mixin nav-divider($color: #e5e5e5) {height: 1px;margin: (($line-height-computed / 2) - 1) 0;overflow: hidden;background-color: $color;}
@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
    .help-block,
    .control-label,
    .radio,
    .checkbox,
    .radio-inline,
    .checkbox-inline,
    &.radio label,
    &.checkbox label,
    &.radio-inline label,
    &.checkbox-inline label  {color: $text-color;}
    .form-control {border-color: $border-color;
        @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
        &:focus {
            border-color: darken($border-color, 10%);
            $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
            @include box-shadow($shadow);
        }
    }
    .input-group-addon {color: $text-color;border-color: $border-color;background-color: $background-color;}
    .form-control-feedback {color: $text-color;}
}
@mixin form-control-focus($color: $input-border-focus) {
    $color-rgba: rgba(red($color), green($color), blue($color), .6);
    &:focus {border-color: $color;outline: 0;@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);}
}
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
    #{$parent} {height: $input-height;padding: $padding-vertical $padding-horizontal;font-size: $font-size;line-height: $line-height;border-radius: $border-radius;}
    select#{$parent} {height: $input-height;line-height: $input-height;}
    textarea#{$parent},
    select[multiple]#{$parent} {height: auto;}
}
@mixin progress-bar-variant($color) {background-color: $color;
    .progress-striped & {@include gradient-striped;}
}
@mixin table-row-variant($state, $background) {
    .table > thead > tr,
    .table > tbody > tr,
    .table > tfoot > tr {
        > td.#{$state},
        > th.#{$state},
        &.#{$state} > td,
        &.#{$state} > th {background-color: $background;}
    }
    .table-hover > tbody > tr {
        > td.#{$state}:hover,
        > th.#{$state}:hover,
        &.#{$state}:hover > td,
        &:hover > .#{$state},
        &.#{$state}:hover > th {background-color: darken($background, 5%);}
    }
}
@mixin bg-variant($parent, $color) {
    #{$parent} {background-color: $color;}
    a#{$parent}:hover,
    a#{$parent}:focus {background-color: darken($color, 10%);}
}
@mixin border-top-radius($radius) {border-top-right-radius: $radius;border-top-left-radius: $radius;}
@mixin border-right-radius($radius) {border-bottom-right-radius: $radius;border-top-right-radius: $radius;}
@mixin border-bottom-radius($radius) {border-bottom-right-radius: $radius;border-bottom-left-radius: $radius;}
@mixin border-left-radius($radius) {border-bottom-left-radius: $radius;border-top-left-radius: $radius;}
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {background-image: -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent);background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent);background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);background-repeat: repeat-x;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1);}
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);background-repeat: repeat-x;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0);}
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {background-repeat: repeat-x;background-image: -webkit-linear-gradient($deg, $start-color, $end-color);background-image: -o-linear-gradient($deg, $start-color, $end-color);background-image: linear-gradient($deg, $start-color, $end-color);}
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);background-repeat: no-repeat;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1);}
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color);background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);background-repeat: no-repeat;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0);}
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);background-image: radial-gradient(circle, $inner-color, $outer-color);background-repeat: no-repeat;}
@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);}
@mixin clearfix() {
    &:before,
    &:after {content: " ";display: table;}
    &:after {clear: both;}
}
@mixin center-block() {display: block;margin-left: auto;margin-right: auto;}
@mixin navbar-vertical-align($element-height) {margin-top: (($navbar-height - $element-height) / 2);margin-bottom: (($navbar-height - $element-height) / 2);}
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}") {
    @for $i from (1 + 1) through $grid-columns {
        $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}, .col-xl-#{$i}";
    }
    #{$list} {position: relative;min-height: 1px;padding-left:  ceil(($grid-gutter-width / 2));padding-right: floor(($grid-gutter-width / 2));}
}
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
    @for $i from (1 + 1) through $grid-columns {
        $list: "#{$list}, .col-#{$class}-#{$i}";
    }
    #{$list} {float: left;}
}
@mixin calc-grid-column($index, $class, $type) {
    @if ($type == width) and ($index > 0) {
        .col-#{$class}-#{$index} {width: percentage(($index / $grid-columns));}
    }
    @if ($type == push) and ($index > 0) {
        .col-#{$class}-push-#{$index} {left: percentage(($index / $grid-columns));}
    }
    @if ($type == push) and ($index == 0) {
        .col-#{$class}-push-0 {left: auto;}
    }
    @if ($type == pull) and ($index > 0) {
        .col-#{$class}-pull-#{$index} {right: percentage(($index / $grid-columns));}
    }
    @if ($type == pull) and ($index == 0) {
        .col-#{$class}-pull-0 {right: auto;}
    }
    @if ($type == offset) {
        .col-#{$class}-offset-#{$index} {margin-left: percentage(($index / $grid-columns));}
    }
}
@mixin loop-grid-columns($columns, $class, $type) {
    @for $i from 0 through $columns {
        @include calc-grid-column($i, $class, $type);
    }
}
@mixin make-grid($class) {
    @include float-grid-columns($class);
    @include loop-grid-columns($grid-columns, $class, width);
    @include loop-grid-columns($grid-columns, $class, pull);
    @include loop-grid-columns($grid-columns, $class, push);
    @include loop-grid-columns($grid-columns, $class, offset);
}
@mixin container-fixed($gutter: $grid-gutter-width) {margin-right: auto;margin-left: auto;padding-left:  floor(($gutter / 2));padding-right: ceil(($gutter / 2));@include clearfix;}
@mixin make-row($gutter: $grid-gutter-width) {margin-left:  ceil(($gutter / -2));margin-right: floor(($gutter / -2));@include clearfix;}
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {position: relative;float: left;width: percentage(($columns / $grid-columns));min-height: 1px;padding-left:  ($gutter / 2);padding-right: ($gutter / 2);}
@mixin make-xs-column-offset($columns) {margin-left: percentage(($columns / $grid-columns));}
@mixin make-xs-column-push($columns) {left: percentage(($columns / $grid-columns));}
@mixin make-xs-column-pull($columns) {right: percentage(($columns / $grid-columns));}
@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {position: relative;min-height: 1px;padding-left:  ($gutter / 2);padding-right: ($gutter / 2);@media (min-width: $screen-sm-min) {float: left;width: percentage(($columns / $grid-columns));}}
@mixin make-sm-column-offset($columns) {@media (min-width: $screen-sm-min) {margin-left: percentage(($columns / $grid-columns));}}
@mixin make-sm-column-push($columns) {@media (min-width: $screen-sm-min) {left: percentage(($columns / $grid-columns));}}
@mixin make-sm-column-pull($columns) {@media (min-width: $screen-sm-min) {right: percentage(($columns / $grid-columns));}}
@mixin make-md-column($columns, $gutter: $grid-gutter-width) {position: relative;min-height: 1px;padding-left:  ($gutter / 2);padding-right: ($gutter / 2);@media (min-width: $screen-md-min) {float: left;width: percentage(($columns / $grid-columns));}}
@mixin make-md-column-offset($columns) {@media (min-width: $screen-md-min) {margin-left: percentage(($columns / $grid-columns));}}
@mixin make-md-column-push($columns) {@media (min-width: $screen-md-min) {left: percentage(($columns / $grid-columns));}}
@mixin make-md-column-pull($columns) {@media (min-width: $screen-md-min) {right: percentage(($columns / $grid-columns));}}
@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {position: relative;min-height: 1px;padding-left:  ($gutter / 2);padding-right: ($gutter / 2);@media (min-width: $screen-lg-min) {float: left;width: percentage(($columns / $grid-columns));}}
@mixin make-lg-column-offset($columns) {@media (min-width: $screen-lg-min) {margin-left: percentage(($columns / $grid-columns));}}
@mixin make-lg-column-push($columns) {@media (min-width: $screen-lg-min) {left: percentage(($columns / $grid-columns));}}
@mixin make-lg-column-pull($columns) {@media (min-width: $screen-lg-min) {right: percentage(($columns / $grid-columns));}}
@mixin make-xl-column($columns, $gutter: $grid-gutter-width) {position: relative;min-height: 1px;padding-left:  ($gutter / 2);padding-right: ($gutter / 2);@media (min-width: $screen-xl-min) {float: left;width: percentage(($columns / $grid-columns));}}
@mixin make-xl-column-offset($columns) {@media (min-width: $screen-xl-min) {margin-left: percentage(($columns / $grid-columns));}}
@mixin make-xl-column-push($columns) {@media (min-width: $screen-xl-min) {left: percentage(($columns / $grid-columns));}}
@mixin make-xl-column-pull($columns) {@media (min-width: $screen-xl-min) {right: percentage(($columns / $grid-columns));}}

//========== VELA MIXINS - DUCHV ==========//
@mixin inline-block(){display:inline-block;vertical-align:middle;}
@mixin spinner($size: 20px, $color: $vela-text-color-primary) {content:"";display: block;width: $size;height: $size;position: absolute;margin-left: - $size / 2;margin-top: - $size / 2;border-radius: 50%;border: 3px solid $vela-border-color;border-top-color: transparent;}
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name} {
        @content;
    }
    @-ms-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}
@include keyframes(spin) {
    0% {
        @include transform(rotate(0deg));
    }

    100% {
        @include transform(rotate(360deg));
    }
}
@mixin display-flex(){
   display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
}
@mixin flex($value){
   	-webkit-flex:$value;
    -ms-flex:$value;
    flex:$value;
}
@mixin flex-basis($value){
      -webkit-flex-basis:$value;
   	-ms-flex-basis:$value;
    flex-basis:$value;
}
@mixin flex-direction($value){
      -webkit-flex-direction:$value;
   	-ms-flex-direction:$value;
    flex-direction:$value;
}
@mixin flex-wrap($value){
      -webkit-flex-wrap:$value;
   	-ms-flex-wrap:$value;
    flex-wrap:$value;
}
@mixin align-content($value){
      -webkit-align-content:$value;
   	-ms-align-content:$value;
    align-content:$value;
}
@mixin align-items($value){
      -webkit-align-items:$value;
   	-ms-align-items:$value;
    align-items:$value;
}
@mixin align-self($value){
      -webkit-align-self:$value;
   	-ms-align-self:$value;
    align-self:$value;
}
@mixin justify-content($value){
      -webkit-justify-content:$value;
   	-ms-justify-content:$value;
    justify-content:$value;
}
@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
     -moz-box-ordinal-group: $val;     
  	     -ms-flex-order: $val;     
  	      -webkit-order: $val;  
  		      order: $val;
}
.w-100 {
    width: 100% !important;
}

//----------------------------------------//
//---------- II. Vela Slideshow ----------//
//----------------------------------------//
$slideshow-loader: #fff;
$z-index-slideshow-image: 1;
$z-index-slideshow-video: 2;
$z-index-slideshow-text: 3;
$z-index-slideshow-controls: 4;
$color-slideshow-close-bg: #fff;
$color-slideshow-close-text: #000;

.video-loader {
    @include spinner(40px, $slideshow-loader);
    @include animation(spin 0.65s infinite linear);
    transition: all 0.1s ease-out 0.5s;
    z-index: $z-index-slideshow-controls;
    top: 50%;
    left: 50%;
    .ie9 &,
    .video-is-loaded &,
    .video-is-playing &,
    .video-is-paused &,
    .autoplay &,
    .no-autoplay & {
        content: none;
        display: none;
    }
    .video-is-loading &,
    .autoplay .video-is-loading &,
    .no-autoplay .video-is-loading & {
        display: block;
        visibility: visible;
        opacity: 1;
    }
}
.btnssPause {
    display: none!important;
}
.btnssPause:focus {
    clip: auto;
    width: auto;
    height: auto;
    margin: 0;
    color:#FFF;
    background-color:#333;
    padding:$vela-gutter-width / 2;
    z-index:10;
    transition: none;
    .video-is-playing & {
        display: none;
    }
}
.btnssPauseStop {
    display: block;
    .is-paused & {
        display: none;
    }
}
.btnssPausePlay {
    display: none;
    .is-paused & {
        display: block;
    }
}
.velassSlide {
    position: relative;
    overflow: hidden;
}

.velassLink{
    display: block;
    &:active,
    &:focus {
        opacity: 1;
    }
}
.velassImage {
    transition:opacity 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87);
    z-index: $z-index-slideshow-image;
    .velassSlideBackgroundVideo & {
        opacity: 0;
    }
    .no-autoplay & {
        opacity: 1;
    }
}
.ie9 {
    .velassSlide {
        z-index: 1 !important;
    }
}
.velassVideo{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: $z-index-slideshow-video;
}
.velassVideoBackground {
    max-height: 100%;
    @media(min-width: $screen-sm) {
        visibility: hidden;
        opacity: 0;
        transition: all 0.2s ease-in;
        max-height: inherit;
    }
    .autoplay &.video-is-loaded {
        display: block;
        visibility: visible;
        opacity: 1;
        position:absolute;
    }
}
@media(min-width: $screen-sm) {
    .velassSlideBackgroundVideo::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: $z-index-slideshow-video;
    }
}
.velassVideo-chrome{
    width: 100%;
    height: 100%;
    transition: all 0.2s ease-in;
    // YouTube video will not load if iframe is display: none
    .ie9 & {
        display: block;
    }
    .velassSlide.video-is-playing &,
    .velassSlide.video-is-paused & {
        display: block;
        visibility: visible;
        opacity: 1;
    }
}
.btnssVideoControl{
    color: $vela-text-color-primary;
    background-color: $nocolor;
    border: 0;
    font-size: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    right:0;
    top: 0;
    bottom: 0;
    z-index: 999;
    margin: auto;
    @include opacity(0);
    @include transition(all 0.35s ease);
    .icon {
        width: 60px;
        fill: currentColor;
    }
}
.velassHasCaption {
    margin-top: $vela-gutter-width;
}
.btnssVideoControlPlay{
    .velassVideoBackground{
        top: 50%;
        @include transform(translateY(-50%));
    }
    .video-is-loaded & {
        visibility: visible;
        @include opacity(0.8);
    }
    .video-is-loading &,
    .video-is-playing &,
    .velassSlide.video-is-paused & {
        visibility: hidden;
        @include opacity(0);
    }
    
}
.btnssVideoControlClose {
    position: absolute;
    top: 0;
    right: 0;
    z-index: $z-index-slideshow-text;
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,0.8);
    border: 0;
    &:before,
    &:after {
        content: "";
        position: absolute;
        top: 24px;
        left: 10px;
        width: 30px;
        height: 2px;
        background-color: #fff;
        @include rotate(45deg);
    }
    &:after{
        @include rotate(-45deg);
    }
    .video-is-playing &,
    .velassSlide.video-is-paused & {
        visibility: visible;
        @include opacity(1);
    }
}
.velassCaption {
    @media(min-width: $screen-sm) {
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
    }
    &.noCaption {
        display: none;
    }
    .captionWrap{
        position: relative;
        display: table;
        width: 100%;
        height: 100%;
    }
    .slideshow__link & {
        cursor: inherit;
    }
    .slideshow__slide--has-background-video & {
        padding-top: $vela-gutter-width * 3;
    }
    .video-is-playing & {
        display: none;
    }
    .velassSlide.video-is-paused & {
        display: none;
    }
}
.velassCaptionContent {
    display: table-cell;
    padding: 50px 0;
    @media(max-width: $screen-sm) {
        padding: 30px 0;
    }
}
.velassCaptionInner {
    font-size: $vela-font-size;
    display: inline-block;
}
.velassSubheading {
    margin: 0 0 2%;
    padding: 0;
    font-size: 13px;
    display: inline-block;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400;
    @media(max-width: $screen-md) {
        margin: 0 0 4%;
    }
    @media(max-width: $screen-sm) {
        font-size: 12px;
        margin-bottom: 8px;
    }    
    @media(max-width: $screen-xs) {
    	font-size: 9px;
    	line-height: 16px;
    }
}
.velassHeading {
    font-size: $vela-font-size + 6;
    line-height: 36px;
    margin: 0 0 2%;
    padding: 0;
    font-weight: 400;  
    @media(max-width: $screen-md) {
    	font-size: 26px;
    	line-height: 34px;
    } 
    @media(max-width: $screen-sm) {
    	font-size: 18px;
    	line-height: 24px;
    }    
    @media(max-width: $screen-xs) {
    	font-size: 14px;
    	line-height: 15px;
    }
}
.velassHeadingSmall {
    font-size: $vela-font-size*3;
    line-height: 60px;
    margin: 0 0 5px;
    font-weight: 700;
    padding: 0;   
    @media(max-width: $screen-md) {
    	font-size: 52px;
    	line-height: 58px;
    } 
    @media(max-width: $screen-sm) {
    	font-size: 26px;
    	line-height: 30px;
    }    
    @media(max-width: $screen-xs) {
    	font-size: 20px;
    	line-height: 24px;
    }
}
.velassDesc {
    padding: 0;
    margin-top: 2%;
    @media(max-width: $screen-sm) {
    	display: none;
    }
}
.btnVelaSlider {
	@include inline-block;
    background-color: transparent;
    color: #222342;
  	padding: 15px 25px;
  	border: 2px solid #222342;
    margin-top: 30px;
    font-weight: 600;
    font-size: $vela-font-size - 2;
    letter-spacing: 0.5px;
    @include transition(all 0.35s ease);
    .icons {
        font-size: 14px;
        font-size: 12px;
        margin-left: 10px;
    }
    @media (max-width: $screen-md) {
        font-size: $vela-font-size - 4;
        padding: 8px 10px!important;
        margin-top: 15px;
    }
    &:hover,
    &:focus {
        color: #fff;
        background-color: $vela-color-primary !important;
        border-color: $vela-color-primary !important;
    }

}
@mixin keyframesAnimate($name: empty, $duration: empty, $function: empty){
    @include animation-name($name);
    @include animation-duration($duration);
    @include animation-timing-function($function);
    @include animation-fill-mode(backwards);
    @include animation-iteration-count(none);
}
//-----------------------------------//
//---------- III. Megamenu ----------//
//-----------------------------------//
$velamenu-bgcolor:              ;
$velamenu-linkcolor:            ;
$velamenu-linkcolor-hover:      ;
$velamenu-fontsize:             px;
$velasubmenu-bgcolor:           ;
$velasubmenu-linkcolor:         ;
$velasubmenu-linkcolor-hover:   ;
$velasubmenu-fontsize:          px;
.headerMenu {
    position: relative;
}
.headerMenuInner {
    position: relative;
}
.velaMegamenu {
    .menuContainer {
        position: static;
    }
    ul {
        list-style: none;
        padding-left: 0;
    }
    .nav {
        margin: 0;
        padding: 0;
        > li {
            padding: 0;
            display: inline-block;
            > a {
                padding: 15px 20px;
                color:$velamenu-linkcolor;
                background-color:$nocolor;
                font-family: $vela-font-family;
                font-size: $velamenu-fontsize;
                line-height: 25px;
                position: relative;
                font-weight: 400;
                @include transition(all 0.35s ease);
                @media(max-width: $screen-xl) {
                    padding: 15px;
                }
            }
            &.hasMenuDropdown {
                > a {
                    > span:after {
                        content: "\f107";
                        display: inline-block;
                        font-family: $vela-font-icon;
                        font-size: 14px;
                        margin-left: 5px;
                        height: 14px;
                        position: relative;
                    }
                }
                &.hasMegaMenu {
                    position:static;
                }
                &:hover,
                &:focus {
                    > .menuDropdown {
                        visibility:visible;
                        top: 100%;
                        @include opacity(1);
                    }
                }
            }
            &:focus,
            &:hover,
            &.active {
            	> a, > a:hover, > a:focus {
					text-decoration: $text-decoration-through;
                    color: $velamenu-linkcolor-hover;
            	}
            }
        }
    }
    .menuDropdown {
        position: absolute;
        display:block;
        position:absolute;
        top: 150%;
        left:0px;
        margin:0px;
        padding:15px 25px;
        min-width:220px;
        z-index:900;
        visibility:hidden;
        text-align: left;
        background-color: $velasubmenu-bgcolor;
        @include opacity(0);
        @include transition(all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28));
      	@include box-shadow(0px 6px 15px rgba(0, 0, 0, 0.12));
        &.megaMenu {
            right: 0;
            width: 100%;
            padding: 20px 30px;
            background-position: right bottom;
            background-repeat: no-repeat;
            .velaMenuLinks {
                margin-bottom: 20px;
            }
        }
        .menuTitle {
           	font-family: $vela-font-family-secondary;
          	font-size: $velasubmenu-fontsize;
          	margin-bottom: 10px;
          	color:$vela-text-color-secondary;
          	display: block;
          	> span,a{
                font-size: $velasubmenu-fontsize + 2;
                padding: 5px 0;
                background-color: $nocolor;
                color: $vela-text-color-secondary;
                display: block;
                font-weight: 700;
                position: relative;
            }
        }
        li {
            position: relative;
            a {
                display: block;
                font-family: $vela-font-family-secondary;
                font-size: $velasubmenu-fontsize;
                font-weight: 300;
                padding: 3px 0;
                color: $velasubmenu-linkcolor;
                background-color: $nocolor;
                margin-left: 0;
                @include transition(all 0.35s ease);
                &:hover,
                &:focus {
                    background-color:$nocolor;
                    color:$velasubmenu-linkcolor-hover;
                    text-decoration: $text-decoration-through;
                }
            }
            &.hasMenuDropdown {
                > a {
                    &:after {
                        content: "\f105";
                        @include inline-block;
                        font-family: $vela-font-icon;
                        float: right;
                        margin-left: 5px;
                    }
                }
                .menuDropdown{
                    top:0px;
                    left:150%;
                }
                &:hover,&:focus{
                    > .menuDropdown{
                        visibility:visible;
                        left: 100%;
                        @include opacity(1);
                    }
                }
            }
            &.active > a {
                color:$velasubmenu-linkcolor-hover; 
                text-decoration: $text-decoration-through;
            }
        }
    }
}
.velaMenuProducts{
	.listProduct {
		padding-top: 10px;
	}
  	.blockProMenu{
    	@include clearfix;
    	@include display-flex;
      	margin-bottom:15px;
      	.proImage {
      		margin-right: 10px;
      	}
      	.proName{
        	margin:0px 0 5px;
            padding:0px;
            a{
                display:block;
                color: $vela-text-color-secondary;
                line-height: 18px;
                font-weight: 500;
                &:hover,&:focus{
                    color: $velasubmenu-linkcolor-hover;
                    text-decoration:none;
                }
            }
        }
      	.boxProPrice {
        	margin: 5px 0px;
            color: #666;
          	.oldPrice {
          		text-decoration: $text-decoration-through;
          	}
        }
        .proReviews { 
            line-height: 18px;
            display: none;
        	.spr-badge-caption {
        		display: none;
        	}
        }
    }
}
.velaMenuHtml {
    img {
        display: block;
        max-width: 100%;
        height: auto;
    }
}
.velaMenuListCollection {
    .velaMenuListContent {
        margin-left: -15px;
        margin-right: -15px;
    }
    .coll-item {
        padding: 10px 15px;
        
        .collImage {
            margin-bottom: 0;
        }
    }
}
// MENU MOBILE
@media (max-width:992px) {
    .menuMobileActive{
        overflow: hidden;
        width: 100%;
        position: fixed;
        z-index: 0;
        height: 100%;
    }
}
.btnMenuMobile {
    @include inline-block;
    margin: 0;
    padding: 0;
    color: #999;
    background-color: $nocolor;
    font-size: $vela-font-size + 2;
    text-align: center;
    cursor: pointer;
    @include transition(all 0.35s ease);
    &:hover {
        color: $vela-color-primary;
        border-color: $vela-color-primary;
    }
    .iconMenu {
    	@include size(20px,2px);
    	background-color: $vela-header-textcolor;
    	display: block;
    	margin: 2px 0;
    	@include transition(all .3s ease-in-out 0s);
    }
}
.menuMobileContainer {
    display: block;
    width: 300px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -300px;
    z-index:1000;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f6f6f6;
    visibility: hidden;
    @include opacity(0);
    @include transition(all 0.4s cubic-bezier(0.46,0.01,0.32,1));
    .menuMobileWrapper {
        display: block;
        min-height: 100%;
        padding: ($vela-gutter-width / 2) $vela-gutter-width ;
        color: $velamenu-linkcolor;
        background-color: $velamenu-bgcolor;
    }
    .menuMobileActive & {
        visibility: visible;
        @include opacity(1);
        @include transform(translateX(300px));
    }
    .memoHeader {
        position: relative;
        margin: 0;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,.2);
        font-family: $vela-font-family-secondary;
        font-weight: 600;
        font-size: $vela-font-size + 2;
        text-transform: uppercase;
    }
    .btnMenuClose {
        position: absolute;
        top: 8px;
        right: 0;
        width: 30px;
        height: 30px;
        cursor: pointer;
        &:before,
        &:after {
            content: '';
            position: absolute;
            top: 4px;
            left: 45%;
            margin-top: -30/2;
            margin-left: -3/2;
            display: block;
            height: 16px;
            width: 2px;
            background-color: $velamenu-linkcolor;
            @include rotate(-45deg);
        }
        &:after {
            @include rotate(-135deg);
        }
    }
    ul {
        list-style: none;
        padding: 0;
    }
    .memoNav {
        margin: 15px 0;
        li {
            position:relative;
            a {
                display: block;
                color: $velamenu-linkcolor;
                background-color: $nocolor;
                padding: 8px 0;
                font-family: $vela-font-family;
                font-size: 14px;
                font-weight: 400;
                text-decoration: none;
                @include transition(all 0.35s ease);
                &:hover{
                    color: $vela-color-primary;
                    background-color: $nocolor;
                }
            }
        }
        .memoDropdown {
            > li {
                padding-left: 15px;
                a {
                	font-weight: 300;
                }
            }
        }
    }
}
.memoBtnDropdown {
    position: absolute;
    top: 1px;
    right: 0;
    z-index: 1;
    width: 30px;
    height: 30px;
    background-color: darken($velamenu-bgcolor, 5%);
    line-height: 30px;
    cursor: pointer;
    text-align: center;
    .fa-angle-down {
        &:before {
            content: '\f106';
        }
    }
    &.collapsed {
        .fa-angle-down {
            &:before {
                content: '\f107';
            }
        }
    }
}
.menuMobileOverlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0,0,0,0.8);
    visibility: hidden;
    @include opacity(0);
    @include transition(all 0.4s cubic-bezier(0.46,0.01,0.32,1));
    .menuMobileActive & {
        visibility: visible;
        @include opacity(1);
    }
}


//------------------------------------------------//
//---------- IV. Product Grid/List item ----------//
//------------------------------------------------//
.productLable {
    position:absolute;
	top: 20px;
    left: 20px;
    z-index: 2;
    display: flex;
    flex-flow: column;
}
.labelNew {
	font-size: $vela-font-size - 2;
	color: #fff;
	padding: 3px 10px;
	background-color: #1a1a1a;
    font-weight: 700;
    line-height: $vela-font-size + 4;
    display: inline-block;
    border-radius: 3px;
    margin-bottom: 5px;
}
.labelSale {
	font-size: $vela-font-size - 2;
	color: #fff;
	padding: 3px 10px;
	background-color: $vela-color-primary;
    font-weight: 700;
    line-height: $vela-font-size + 4;
    display: inline-block;
    border-radius: 3px;
}
.labelVailable {
	position:absolute;
	top: 20px;
    right: 20px;
	font-size: $vela-font-size - 2;
	color: #fff;
	padding: 3px 10px;
	background-color: #999999;
    z-index: 2;
    font-weight: 700;
    line-height: $vela-font-size + 4;
    display: inline-block;
    border-radius: 3px;
}
.priceProduct{
	font-size: $vela-font-size - 2;
    color: #666;
    line-height: $vela-font-size + 4;
    &.priceSale {
        color: $vela-color-primary;
    }
	&.priceCompare {
		color: #999999;
		text-decoration: line-through;
      	margin-right: 5px;
        font-weight: 400;
        position: relative;
        padding: 0 4px;
        &:before {
            content: "";
            width: 100%;
            left: 0;
            bottom: 8px;
            height: 1px;
            background: #999999;
            position: absolute;
        }
	}
}
#ProductPrice{
	font-size: $vela-font-size + 4;
}
#ComparePrice {
    font-size: $vela-font-size + 4;
}
.btnAddToCart {
    color: ;
    background-color: ;
    border-color: ;
    font-size: $vela-font-size;
    font-weight: 600;
    line-height: 20px;
    height: 50px;
    text-transform: capitalize;
    @include transition(all 0.35s ease);
    padding: 10px 30px;
    &:hover {
        color: ;
        background-color: ;
        border-color: ;
    }
}
.proReviews {
    font-size: $vela-font-size - 2;
    line-height: 16px;
    margin-bottom: 10px;
    color: #666666;
    .spr-icon {
        top: auto;
        color: $vela-color-primary;
        margin-right: 1px;
        font-size: $vela-font-size - 3 !important;
        &.spr-icon-star-empty {
            color: #dfdfdf;
            @include opacity(1);
        }
    }
    .spr-badge-caption {
        margin-left: 10px;
        &:before {
            content: "(";
            display: inline-block;
            margin-right: 2px;
        }
        &:after {
            content: ")";
            display: inline-block;
            margin-left: 2px;
        }
    }
    .spr-icon-star-empty:before {
        content: '\e800';
        font-size: 14px;
    }
}
// global image responsive   
.product-card__image {
    position: relative;
    overflow: hidden;
    .product-card__img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
.velaProBlock {
    position: relative;
    .proHImage {
        position: relative;
        overflow: hidden;
    }
    .proFeaturedImage {
        display: block;
        width: 100%;
        img {
            width: 100%;
        }
        .proImageSecond {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: white;
            z-index: 1;
            visibility: hidden;
            @include opacity(0);
            @include transition(all 0.35s ease);
        }
    }
    .proContent {
        position: relative;
    }
    .productType {
        font-size: $vela-font-size - 2;
        a {
            display: block;
            color: $vela-text-color-banner;
            text-decoration: none;
            margin-bottom: 5px;
            font-weight: 300;
            @include transition(all 0.35s ease);
            &:hover,
            &:focus {
                color: $vela-color-primary;
            }
        }
    }
    .proName {
        margin: 0 0 10px;
		padding: 0;
        a {
            display: block;
            font-size: $vela-font-size;
            line-height: $vela-font-size + 4;
            color: $vela-text-color-primary;
            @include transition(all 0.35s ease);
            &:hover,
            &:focus{
                color: $vela-color-primary;
            }
        }
    }

    &:hover {
        .proFeaturedImage {
            .proImageSecond {
                visibility: visible;
                @include opacity(1);
            }
        }
    }
    &.grid {
        padding-bottom: 30px;
	    .proContent {
	    	margin-top: 20px;
        }
        .proButton {
            position: absolute;
            right: 20px;
            top: 20px;
            display: none;
            z-index: 2;
            .productQuickView {
                margin-top: 10px;
            }
        }
        .btnProduct {
            width: 45px;
            height: 45px;
            text-align: center;
            line-height: 48px;
            padding: 0;
            .text {
                display: none;
            }
        }
        .proPrice {
            float: left;
        }
        .velaSwatchCus {
            float: right;
        }
        &:hover {
            .proButton {
                display: block;
            }
        }
    }
    &.list {
        padding-bottom: 30px;
        .proContent {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .proName  a {
            font-size: $vela-font-size + 8;
            margin-bottom: 20px;
        }
        .proDescription {
            margin-bottom: 20px;
        }
        .proReviews {
            margin-bottom: 10px;
            .spr-badge-caption {
                display: none;
            }
        }
        .proPrice {
            padding-right: 0;
        }
        
        .btnProduct {
            margin-bottom: 10px;
            margin-top: 10px;
            width: 100%;
            line-height: 20px;
            padding: 10px 5px;
            .icons {
                display: none;
            }
            &:hover {
                border-color: $vela-color-primary;
            }
        }
        .priceProduct {
            font-size: $vela-font-size + 4;
            &.priceCompare {
                font-size: $vela-font-size + 2;
            }
        }
        .velaSwatchProduct>li>label {
            width: 25px;
            height: 25px;
        }
    }
}
.proPrice {
    .priceProduct {
        display: inline-block;
    }
}
.proShortDescription,
.proDescription {
    padding: 20px 0 0;
    line-height: 24px;
    color: #868686;
    h5 {
        margin: 10px 0 5px;
        padding: 10px 0;
        font-size: $vela-font-size + 1;
    }
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
            position: relative;
            padding-left: 18px;
            font-size: $vela-font-size;
            line-height: 24px;
            &:before {
                content: '\f00c';
                position: absolute;
                top: 0;
                left: 0;
                color: $vela-color-primary;
                font-family: $vela-font-icon;
                font-size: $vela-font-size - 4;
            }
        }
    }
}

//----------------------------------------//
//---------- V. Collection Page ----------//
//----------------------------------------//

.headerCollection {
    font-size: $vela-font-size + 10;
    margin: 0 0 $vela-gutter-width;
    padding: 10px 0;
    border-bottom: 2px solid $vela-border-color;
    position: relative;
    &:before {
        position: absolute;
        content: "";
        width: 50px;
        height: 2px;
        bottom: -2px;
        left: 0;
        display: block;
        background-color: $vela-color-primary;
    }
    .btnReadMore {
        color: $vela-text-color-banner;;
        font-size: 13px;
        font-weight: 400;
        margin-top: 10px;
        &:hover {
            color: $vela-color-primary;
        }
    }
}
.collImage {
    margin-bottom: 50px;
}

.collView {
    float: left;
}
.collDescription {
    margin-bottom: $vela-gutter-width;
}
.collBoxSort{
	background-color: #fff;
    margin: 15px 0 30px;
    @include clearfix;
	.collView {
        float:left;
        margin-top: 5px;
		label {
			color: $vela-text-color-banner;
		}
	}
	.changeView{
		padding: 0;
		background-color: transparent;
		border: 0;
		font-size: 14px;
		color: #999;
		border: 0;
		display: inline-block;
		@include size(20px,20px);
		margin-right: 10px;
		.iconChangeView {
            svg {
                fill: #ccc;
            }
        }
        &.changeViewActive{
            .iconChangeView{
                svg {
                    fill: #191919;
                }
            }
		}
	}
}


.collSortBy {
    position: relative;
    display: inline-block;
    border-radius: 4px;
    &:after {
        content: "\f107";
        top: 8px;
        right: 10px;
        color: $vela-text-color-secondary;
        font-family: $vela-font-icon;
        font-size: 15px;
        line-height: 24px;
        position: absolute;
    }
    > label {
        margin: 0;
        height: 24px;
        font-size: $vela-font-size;
        font-weight: 400;
        line-height: 24px;
    }

    > select {
        width: auto;
        padding: 10px 30px 10px 20px;
        cursor: pointer;
        font-size: 15px;
        background-color: #f5f5f5;
        border: 0;
        color: #333333;
		@include box-shadow(none);
		@include inline-block;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        @include box-shadow(none);
        height: 40px;
        &:focus {
            background: #f5f5f5;
            @include box-shadow(none);
        }
    }
}
.filterCollectionFullwidth {
    @include display-flex;
    @include flex-direction(row);
    @include flex-wrap(nowrap);
    margin-bottom: $vela-gutter-width;
    .collBoxSort {
        width: 100%;
        margin: 0;
    }
}
.filterTagFullwidth {
	margin-top: 8px;
}
.filterTagFullwidthContent {
    position: fixed;
    top: 0;
    left: -320px;
    z-index: 900;
    padding: $vela-gutter-width;
    width: 320px;
    height: 100vh;
    background-color: #fff;
    overflow-y: auto;
    visibility: hidden;
    @include opacity(0);
    @include box-shadow(0 3px 9px 0 rgba(0, 0, 0, 0.1));
    @include transition(all 0.4s cubic-bezier(0.46,0.01,0.32,1));
    &.active {
        left: 0;
        visibility: visible;
        @include opacity(1);
        + .filterTagFullwidthOverlay {
            @include opacity(1);
            visibility: visible;
        }
    }
    @media(min-width: $screen-md) {
        &.velaSidebar  {
            @include box-shadow(none);
            left: inherit;
            top: -10px;
            z-index: 1;
            visibility: visible;
            @include opacity(1);
            overflow-y: inherit;
            position: relative;
            height: auto;
            float: left;
            padding: 0 $vela-gutter-width/2;
            @media(min-width: $screen-md) {
                width: 260px;
            }
            @media(min-width: $screen-xl) {
                width: 320px;
            }
        }
    }
}
.velaCenterColumnFix {
    @media(min-width: $screen-md) {
        width: calc(100% - 260px)!important;
    }
    @media(min-width: $screen-xl) {
        width: calc(100% - 320px)!important;
    }
}
.filterTagFullwidthButton {
    cursor: pointer;
    @include display-flex;
    line-height: 20px;
    margin-right: 15px;
    color: $vela-color-primary;
    @include transition(all .2s ease-in);
    .fa {
        margin-right: 5px;
        line-height: 18px;
    }
    &:hover,
    &.active {
        color: $vela-color-primary;
    }
}
.filterTagFullwidthClose {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    display: block;
    width: 30px;
    height: 30px;
    z-index: 999;
    &:before,
    &:after{
        content: "";
        position: absolute;
        top: 14px;
        left: 4px;
        display: block;
        width: 20px;
        height: 1px;
        background-color: $vela-text-color-primary;
    }
    &:before{
        @include rotate(-45deg);
    }
    &:after{
        @include rotate(45deg);
    }
}
.filterTagFullwidthOverlay {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 800;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.3);
    @include opacity(0);
    visibility: hidden;
    @include transition(all 0.3 ease-in);
}
.velaCollectionsWrapper {
    padding: 50px 0;
}
.velaBoxCollection {
    position: relative;
    text-align: center;
    overflow: hidden;
}
.velaBoxCollectionImage {
    position: relative;
    margin-bottom: $vela-gutter-width / 2;
    overflow: hidden;
    a{
        position: relative;
        display: block;
    }
}
.collectionTitle {
    margin: 0;
    padding: 10px 0;
    color: $vela-text-color-secondary;
    font-size: $vela-font-size + 4;
    font-weight: 600;
    text-transform: uppercase;
    a {
        display: inline-block;
        color: $vela-text-color-secondary;
        text-decoration: none;
        @include transition(all 0.35s ease);
        &:hover,
        &:focus {
            color: $vela-color-primary;
        }
    }
}
.collectionProductCount {
    margin-bottom: 15px;
    font-size: $vela-font-size - 2;
}
.collectionShortDesc {
    margin-bottom: 15px;
    font-size: $vela-font-size - 1;
}
.collectionButtonDetail {
    text-align: center;
    a {
        display: inline-block;
        padding: 8px 28px;
        color: #fff;
        background-color: $vela-text-color-secondary;
        border: 1px solid $vela-text-color-secondary;
        font-weight: 600;
        text-decoration: none;
        text-transform: uppercase;
        font-size: $vela-font-size - 2;
        @include transition(all 0.35s ease);
        &:hover,
        &:focus {
            border-color: $vela-color-primary;
            background-color: $vela-color-primary;
        }
    }
}
#fullWidthVertical {
    border: $vela-border-main;
    margin-bottom: 30px;
    padding: 20px 20px 0;
    .velaFilter .velaContent {
        @extend .row;
    }
    .ajaxFilter {
        @extend .col-xs-12;
        @extend .col-sm-4;
    }
    .titleSidebar {
        border-top: 0;
        padding-top: 0;
        padding-bottom: 5px;
    }
    #sidebarAjaxFilter {
        margin-bottom: 0;
    }
}

//--------------------------------------//
//---------- VI. Product Page ----------//
//--------------------------------------//
.template-product {
    .velaBreadcrumbs {
        .velaBreadcrumbImage {
            display: none;
        }
        .breadcrumbHeading {
            display: none;
        }
        .velaBreadcrumbWrap {
            position: static;
        }
    }
}
.zoomContainer {
    z-index: 90;
    width: auto !important;
    height: auto !important;
}
.zoomWindow {
    border: 0 !important;
}
#productSelect {
    display:none;
}
.proBoxImage {
    .proFeaturedImage {
        position: relative;
        padding: 0;
        img {
            cursor: pointer;
            max-height: 100%;
        }
    }
    #velaViewImage {
        background: #fff;
        position: absolute;
        right: 20px;
        bottom: 20px;
        color: #191919;
        border-radius: 50%;
        padding: 16px 17px;
        font-size: 24px;
        line-height: 24px;
        z-index: 94;
        &:hover {
            background: $vela-color-primary;
            color: #fff;
        }
    }
}
.proFeaturedImage {
    position: relative;
    padding: 0;
    @media ( max-width: 991px ) {
        img {
            pointer-events: none;
            width: 100%;
        }
    }
}
.line-dashed {
    position: relative;
    height: 1px;
    &:before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to right, transparent 55%, #c2c2c2 50%);
        background-size: 15px 100%;
    }
}
.thumbItem {
    a {
        position: relative;
        display: block;
        width: 100%;
        @include transition(all 0.35s ease-in-out);
        &:before {
            content: '\f0d8';
            position: absolute;
            font-family: $vela-font-icon;
            font-size: 20px;
            line-height: 10px;
            top: -10px;
            left: 50%;
            margin-left: -5px;
            color: #191919;
            @include opacity(0);
            @include transition(all 0.2 ease-in-out);
        }
        &.active-thumb {
            &:before {
                @include opacity(1);
            }
        }
    }
}
.jsProductThumb {
	.owl-nav {
        >div{
            @include size(30px,30px);
            line-height: 28px;
            &.owl-prev {
				left: 0;
            }
            &.owl-next {
            	right: 0;
            }
        }
    }
}
.product-single__thumbnail-badge {
    width: 22px;
    height: 22px;
    position: absolute;
    right: 6px;
    top: 6px;
    pointer-events: none;
  
    @media(min-width: $screen-sm) {
      width: 26px;
      height: 26px;
    }
  
    .icon {
      fill: transparent;
      width: 100%;
      height: 100%;
      vertical-align: baseline;
    }
    .icon-3d-badge-full-color-outline,
    .icon-video-badge-full-color-outline {
      stroke: rgba($vela-color-primary,0.8);
    }
    .icon-movie-color,
    .icon-3d-badge-full-color-element,
    .icon-video-badge-full-color-element {
        fill: $vela-color-primary;
    }
    &.icon-movie {
        width: 40px;
        height: 40px;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%,-50%));
        @media(max-width: $screen-sm) {
            width: 26px;
            height: 26px;
        }
    }
}
.product-single__media {
    margin: 0 auto;
    min-height: 1px;
    width: 100%;
    height: 100%;
    position: relative;
  
    iframe,
    model-viewer,
    .shopify-model-viewer-ui,
    img,
    > video,
    .plyr,
    .media-item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      max-width: 100%;
    }
  
    iframe,
    .media-video,
    model-viewer,
    .shopify-model-viewer-ui,
    .media-item,
    .plyr,
    .plyr__video-wrapper {
        height: 100%;
    }
}
.product-single__media--video {
    background-color: transparent;
}

.product-single__view-in-space {
    background-color: rgba($vela-color-primary, 0.08);
    border: none;
    width: 100%;
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: block;
    font-size: 14px;
    color: $vela-color-primary;

    &:hover,
    &:focus {
        .product-single__view-in-space-text {
            border-bottom-color: $vela-color-primary;
        }
    }
    svg.icon {
        height: 25px;
        width: 25px;
        margin-bottom: -7px;
        margin-right: 2.43px;
        fill: transparent;

        .icon-3d-badge-full-color-outline {
            stroke: none;
        }

        .icon-3d-badge-full-color-element {
            fill: $vela-color-primary;
            opacity: 1;
        }
    }
}
  
.product-single__view-in-space-text {
    border-bottom: 1px solid transparent;
}
.placeholder-background--animation {
    background-color: #f5f5f5;
    @include animation(placeholder-background-loading 1.5s infinite linear);
  
    .no-js & {
      display: none;
    }
}
.proThumbnails {
    .owl-thumblist {
        margin-left: -5px;
        margin-right: -5px;
        .thumbItem {
            padding: 0 5px;
        }
    }
    &.vertical {

    }
}
.proBoxInfo {
    h1 {
        margin: 0 0 30px;
        padding: 0;
        font-size: $vela-font-size + 16px;
        color: $vela-text-color-secondary;
    }
    .proAttr {
        margin: 0 0 8px;
        font-size: $vela-font-size - 2;
        > label {
            margin: 0 10px 0 0;
            color: $vela-text-color-secondary;
            font-weight: 700;
        }
        &.instock {
            color: $brand-success;
        }
        &.outstock {
            color: $brand-warning;
        }
    }
    .proDescription {
        padding: 10px 0;
    }
    .proPrice{
		margin: 30px 0;
        @include display-flex;
        
    }
    .priceProduct {
        font-size: 20px;
        color: $vela-color-primary;
        font-weight: 700;
        &.priceCompare {
            font-size: 20px;
            padding: 0;
            color: #ccc;
            font-weight: 400;
            &:before {
                background-color: #c1c1c1;
            }
        }
    }
    .selector-wrapper {
        margin: 0 0 10px;
        @include display-flex;
        @include align-items(center);
        > label {
            padding: 10px 0px;
            font-weight: 600;
            min-width: 70px;
            font-size: 17px;
            margin-bottom: 0;
            color: $vela-text-color-secondary;
        }
        > select {
            min-width: 250px;
            height: 34px;
            padding: 6px 14px;
            border: $vela-border-main;
            @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
            &:focus {
                border-color: $vela-color-primary;
                @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba($vela-color-primary,.3));
            }
        }
    }
    .proQuantity{
        margin-right: 15px;
        float: left;
        position: relative;
        margin-bottom: 20px;
		.qtySelector{
			margin:0px 10px 0 0;
            padding:6px 0px;
            text-transform: uppercase;
            color: $vela-text-color-secondary;
            font-size: $vela-font-size - 1;
		}
    }
	.formAddToCart {
		@include clearfix;
		.velaGroup {
            padding-top: 10px;
            position: relative;
		}
    }
    .btnAddToCart {
        margin-bottom: 20px;
        float: left;
        .icons {
            margin-right: 5px;
            font-size: 18px;
            position: relative;
            bottom: -1px;
        }
    }
    .velaBuyNow {
        float: left;
        margin-left: 10px;
    }
    .shopify-payment-button__button {
        @extend .btnAddToCart;
        &:hover:not([disabled]) {
            color: #fff;
            border-color: $vela-color-primary;
            background-color: $vela-color-primary;
        }
    }
    .shopify-payment-button__button--hidden {
        display: none;
    }
}
.velaProductSharing {
    @include display-flex;
    @include flex-direction(row);
    @include flex-wrap(wrap);
}

.proPageCategories {
	a {
		display: inline-block;
		color: $vela-text-color-banner;
		text-decoration: none;
		@include transition(all 0.35s ease);
		&:hover {
			color: $vela-color-primary;
		}
	}
}
.proDetailTagMore {
    padding: 0 0 10px;
    .tagTitle {
        display: inline-block;
		margin-right: 15px;
        font-size: $vela-font-size;
        color: $vela-text-color-secondary;
        
    }
    span {
		display: inline-block;
		color: $vela-text-color-secondary;
        font-size: $vela-font-size - 1;
	}
}
#velaSizeGuide {
    margin: 20px !important;
    @media(min-width: $screen-lg) {
        margin: 30px!important;
    }
}
.btnSizeGuide {
    @include display-flex;
    color: #ccc;
    position: absolute;
    right: 0;
    top: 5px;
    color: $vela-text-color-secondary;
    font-weight: 600;
    border-bottom: 2px solid $vela-text-color-secondary;
    svg {
        fill: $vela-text-color-secondary;
        height: 22px;
        margin-right: 5px;
    }
    &:focus,
    &:hover {
        border-bottom-color: $vela-color-primary;
        color: $vela-color-primary;
        svg {
            fill: $vela-color-primary;
        }
    }
}
.velaQty{
	position:relative;
	@include clearfix;
	color:$vela-text-color-secondary;
	.velaQtyAdjust{
		width:35px;
		height:50px;
		line-height: 14px;
		border: 0;
		background-color: transparent;
		color: #1a1a1a;
		position: absolute;
        font-size: 20px;
        font-weight: 300;
		span {
            display: block;
            font-weight: 700;
            font-size: 24px;
		}
		&.velaQtyMinus{
			left: 0;
		}
		&.velaQtyPlus{
			right: 0;
		}
		&:hover {
			color: $vela-color-primary;
		}
	}
	.velaQtyNum{
		float:left;
		height: 50px;
		width: 100px;
		font-size: 20px;
        font-weight: 700;
        border-radius: 5px;
		border: 1px solid #f5f5f5;
		background-color: #f5f5f5;
		color: $vela-text-color-secondary;
		padding:6px 12px;
		padding: 10px 0;
		text-align: center;
	}
}
.proDetailInfo{
    .detail_default &,
    .detail_style2 & {
        padding-top: 30px;
    }
    .panel-group {
        margin-bottom: 0;
    }
    .spr-container {
        padding: 20px;
        .spr-header-title {
            font-size: $vela-font-size + 2;
            font-weight: 600;
        }
        .spr-form-label {
            font-size: $vela-font-size;
        }
        
        .spr-icon {
            color: $vela-color-primary;
            &.spr-icon-star, 
            &.spr-icon-star-half-alt,
            &.spr-icon-star-empty{
                @include opacity(1);
                font-size: $vela-font-size;
                line-height: 20px;
            }
            
        }
        .spr-icon-star {
            color: $vela-color-primary;
            &.spr-icon-star-empty{
                color: #dfdfdf;
            }
            &.spr-icon-star-hover {
                color: $vela-color-primary;
            }
        }
        .spr-icon-star-empty {
            color: #dfdfdf;
            &:before {
                content: "\e801";
            }
        }
        .spr-form-input-text,
        .spr-form-input-email,
        .spr-form-input-textarea {
            border: $vela-border-main;
            padding: 6px 14px;
        }
        .spr-button-primary {
            color: ;
            background-color: ;
            border-color: ;
            @include transition(all 0.35s ease);
            &:hover {
                color: ;
                background-color: ;
                border-color: ;
            }
        }
    }
    .proTabHeading {
        position: relative;
        &:before {
            content: "";
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 0;
            width: 100%;
            height: 0;
            border-top: $vela-border-main;
        }
    }
    .velaProductNavTabs {
        background: $vela-body-bg;
        padding-right: 30px;
        position: relative;
        z-index: 2;
        border-bottom: 0;
        display: inline-block;
		li {
            padding: 0;
            display: inline-block;
            float: none;
            &:not(:last-child) {
                margin-right: 30px;
            }
			a {
				font-size: $vela-font-size + 2;
				color: $vela-text-color-secondary;
                position: relative;
				padding: 5px 0;
                margin: 0;
                border: 0;
                font-weight: 700;
				&:before {
					content: "";
					@include size(100%,2px);
					background: transparent;
					display: block;
					position: absolute;
					left: 0;
					bottom: 0;
				}
			}
            
			&.active {
				a {
                    color: $vela-color-primary;
					&:before {
						background-color: $vela-color-primary;
					}
				}
			}
		}
	}
	.tab-content {
		padding: 30px 0;
    }
    .velaPanel {
        box-shadow: none;
        > .panel-title a {
            display: block;
            border-bottom: $vela-border-main;
            color: #191919;
            position: relative;
            font-size: $vela-font-size + 2;
            font-weight: 700;
            &:before {
                content: "-";
                position: absolute;
                top: 5px;
                right: 0;
                font-size: 21px;
            }
            span {
                border-bottom: 2px solid $vela-color-primary;
                display: inline-block;
                padding: 7px 0;
                margin-bottom: -1px;
            }
            &.collapsed {
                &:before {
                    content: "+";
                }
                span {
                    border-color: transparent;
                }
            }
        }
        > .panel-collapse > .panel-body {
            padding: 10px 0;
        }
    }
}
//Product Variants - Swatch
.swatch{
    margin: 0 0 10px;
    @include clearfix;
    .header {
	    padding: 10px 0px;
	    display: block;
	    font-weight: 700;
	    min-width: 80px;
	    font-size: 16px;
        color: $vela-text-color-secondary;
        span {
            font-size: 18px;
            font-weight: 500;
            margin-left: 5px;
        }
    }
    input { 
        display: none;
        &:checked {
            + label {
                border-color: #828282 !important;
                &:before {
                    background: $vela-color-primary;
                    border-color: $vela-color-primary;
                }
                &:after {
                    display: block;
                }
            }
        }
    }
    label {
        position: relative;
        cursor: pointer;
        float: left;
        margin: 0;
        color: $vela-text-color-secondary;
        font-size: $vela-font-size;
        font-weight: 600;
        text-align: center;
        line-height: 30px;
        white-space: nowrap;
        text-transform: uppercase;
        &:before{
            @include size(17px,17px);
            border: $vela-border-main;
            display: inline-block;
            margin-right: 5px;
            content: "";
            border-radius: 50%;
            margin-bottom: -2px;
        }
        &:after {
            content: "\e604";
            font-family: "simple-line-icons";
            position: absolute;
            top: -1px;
            left: 3px;
            font-size: 10px;
            color: #fff;
            display: none;
            z-index: 2;
            -webkit-transition: all 0.45s ease;
            -o-transition: all 0.45s ease;
            transition: all 0.45s ease;
        }
    }
    .swatch-element {
        position: relative;
        float: left;
        -webkit-font-smoothing:antialiased;
        margin: 0 30px 8px 0;
        @include transform(translateZ(0));
        &.soldout{
            
                display: none;
            
            .crossed-out {
                display:block;
            }
            label {
                cursor: not-allowed;
                @include opacity(0.4);
            }
        }
        &:hover {
            .tooltip {
                visibility: visible;
                @include opacity(1);
                @include transform(translateY(0px));
            }
        }
        &.color {
            margin-right: 20px;
            label {
                padding: 0;
                background-size: 100% 100%;
                border: $vela-border-main;
                overflow: hidden;
                @include size(25px,25px);
                border-radius: 50%;
                &:before {
                    display: none;
                }
                &:after {
                    left: 7px;
                    line-height: 25px;
                }
            }
            input {
                &:checked {
                    + label {
                        &:before {
                            border-width: 4px;
                        }
                    }
                }
            }
        }
    }
    .tooltip {
        position:absolute;
        display: none!important;
        left: 50%;
        bottom: 100%;
        display: block;
        min-width: 60px;
        margin-left: -30px;
        margin-bottom: 15px;
        padding: 4px 8px;
        color: #fff;
        background: $vela-color-primary;
        font-size: $vela-font-size - 2;
        text-align: center;
        visibility: hidden;
        @include opacity(0);
        @include transform(translateY(10px));
        @include transition(all .25s ease-out);
        @include box-shadow(2px 2px 6px rgba(0, 0, 0, 0.28));
        @include box-sizing(border-box);
        &:before {
            content: "";
            position: absolute;
            left: 0;
            bottom: -20px;
            display: block;
            width: 100%;
            height: 20px;
        }
        &:after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -5px;
            width: 0;
            height: 0;
            margin-left: -5px;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid $vela-color-primary;
        }
    }
    &.error {
        padding: 1em;
        color: #333!important;
        background-color: #E8D2D2!important;
        border-radius: 5px;
        p {
            margin:0.7em 0;
            &:first-child {
                margin-top:0;
            }
            &:last-child {
                margin-bottom:0;
            }
        }
        code {
            font-family:$font-family-monospace;
        }
    }
}
.crossed-out {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

//fix for style
.detail_default,
.detail_style1 {
    .proBoxImage {
        .thumbItem { 
            margin-top: 10px;
        }
    }
}
.detail_style3,
.detail_style2 {
    .proBoxImage {
        @include display-flex;   
        .proThumbnails {
            width: 108px;
            @media(max-width: $screen-sm) {
                width: 18.7%;
            }
        }
        .proFeaturedImage {
            order: 2;
            -webkit-order: 2;
            -moz-order: 2;
            -ms-order: 2;
            -o-order: 2;
            width: calc(100% - 108px);
            @media(max-width: $screen-sm) {
                width: calc(100% - 18.7%);
            }
            &.noThumbnail {
                width: 100%;
            }
        }
        .thumbItem { 
            padding: 0 20px 8px 0;
            @media(max-width: $screen-sm) {
                padding: 0 14px 5px 0;
            }
            a{
                &:before {
                    content: "\f0da";
                    top: 50%;
                    left: auto;
                    margin-top: -4px;
                    right: -11px;
                    font-size: 25px;
                    @media(max-width: $screen-sm) {
                        font-size: 20px;
                        right: -8px;
                    }
                }
            }
        }
    }
}
.detail_style3,
.detail_style1 {
    .proTabHeading {
        text-align: center;
        .velaProductNavTabs {
            text-align: center;
            padding-left: 30px;
        }
    }
}
.proBoxPrimary {
    @media(min-width: $screen-xl) {
        .proBoxImage {
            padding-right: 5%;
        }
    }

}
@media(min-width: $screen-md) {
    .proRelated {
        padding: 30px 0 10px;
    }
    .velaProDetailInstagram {
        padding-bottom: 30px;
    }
}
//------------------------------------//
//---------- VII. Blog Page ----------//
//------------------------------------//
.blogContainerSidebar {
    
}
.blogContainerSidebarLeft {
    
}
.rte {
    img {
        max-width: 100%;
        height: auto;
    }
}
.velaBlogTitle {
    font-family: $vela-font-family;
    font-size: $vela-font-size + 16;
    font-weight: bold;
    border-bottom: $vela-border-main;
    margin: 0 0 $vela-gutter-width;
    padding:9px 0px;
    display:none;
}
.articleMeta {
    padding: 0;
    line-height: 20px;
    
    > a,
    > span {
    	i {
    		margin-right: 5px;
    	}
        position: relative;
        margin-right: 30px;
        display: inline-block;
        font-size: $vela-font-size - 2;
        &:last-child {
            margin-right: 0;
        }
    }

}
.articleTags {
    @media(min-width: $screen-md) {
        float: right;
    }
    span {
        position: relative;
        color: $vela-text-color-secondary;
        font-weight: 600;
    }
    a {
        padding: 0 3px;
        color: #9f9f9f;
        @include transition(all 0.35s ease);
        &:hover,
        &:focus {
            color: $vela-color-primary;
        }
    }
}
.articleComment {
    .velaCommentTitle{
        margin: 0 0 $vela-gutter-width;
		padding: 0;
		font-size: $vela-font-size + 7;
		font-weight: 600;
        line-height: $vela-font-size + 18;
		text-transform: uppercase;
    }
    .velaCommentCount {
        margin: 0;
		margin-bottom: 10px;
		color: $vela-text-color-secondary;
		font-size: $vela-font-size + 2;
		font-weight: 700;
		text-transform: uppercase;
    }
}
.velaCommentsList {
    margin: 0 0 20px;
	padding: 20px 0;
    li {
        display: block;
		margin: 0 0 $vela-gutter-width/2;
		&:last-child {
			margin-bottom: 0;
		}
    }
    .itemComment {
		margin: 0;
		padding: 15px;
		background-color: lighten($vela-border-color, 5%);
		border: $vela-border-main;
		font-size: $vela-font-size;
		font-weight: 400;
		line-height: 24px;
		strong{
			color: $vela-text-color-secondary;
			font-weight: 400;
		}
	}
}
.formComment {
    .row {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }
    [class*='col-'] {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }
}
//Blog on homepage
.velaHomeBlogs.style1 {
    .velaBlogItem { 
        .blogTitle {
            padding-top: 30px;
            a {
                display: inline-block;
                background-color: $vela-color-primary;
                border-radius: 3px;
                color: #fff;
                font-size: $vela-font-size - 4;
                padding: 0 10px;
                text-transform: uppercase;
                font-weight: 700;
            }
        }
        .articleMeta {
            padding: 0;
            margin-top: 15px;
            font-size: 14px;
            color: $vela-text-color-banner;
            .articleAuthor {
                color: $vela-text-color-secondary;
                font-weight: bold;
                margin-right: 5px;
            }
        }
        @media(max-width: $screen-sm) {
            .blogPostImage img {
                width: 100%;
            }
        }
        .blogPostTitle {
            font-size: $vela-font-size + 4;
            font-weight: 700;
            line-height: $vela-font-size + 10;
            margin: 10px 0 20px;
            a {
                @include transition(all .1s ease-in-out 0s );
            }
        }
        .blogPostShortdesc {
            margin-bottom: 25px;
        }
        .btnBlogReadMore {
            color: $vela-text-color-secondary;
            font-weight: 700;
            font-size: $vela-font-size - 2;
            border: 2px solid $vela-border-color;
            @include transition(all 0.2s ease-in);
            border-radius: 5px;
            padding: 13px 30px;
            display: inline-block;
            .icons {
                position: relative;
                bottom: -2px;
                font-size: 14px;
                margin-left: 10px;
            }
            &:hover {
                border-color: $vela-color-primary;
                color: $vela-color-primary;
            }
        }
    }
}



// ARTICLE ON BLOG PAGE
.velaBlogWrap {
    
}
.blogArticle {
    &.blogArticleListing {
        .articleTitle {
            margin: 0 0 5px;
        }
        .articleMeta {
            margin: 0 0 20px;
        }
    }
    .articleMeta {
        padding: 0;
        margin-top: 15px;
        font-size: 14px;
        color: #666;
        .articleAuthor {
            color: #1a1a1a;
            font-weight: bold;
            margin-right: 5px;
        }
    }
    .blogTitle a {
        display: inline-block;
        background-color: $vela-color-primary;
        border-radius: 3px;
        color: #fff;
        font-size: 12px;
        padding: 0 10px;
        text-transform: uppercase;
        font-weight: 700;
        margin-top: 30px;
    }
	.articleImage {
        a {
            display: block;
        }
	}
	.media-body {
		padding-left: 20px;
	}
	.btnBlogReadMore {
        color: $vela-text-color-secondary;
        font-weight: 700;
        font-size: $vela-font-size - 2;
        border: 2px solid $vela-border-color;
        @include transition(all 0.2s ease-in);
        border-radius: 5px;
        padding: 13px 30px;
        display: inline-block;
        .icons {
            position: relative;
            bottom: -2px;
            font-size: 14px;
            margin-left: 10px;
        }
        &:hover {
            border-color: $vela-color-primary;
            color: $vela-color-primary;
        }
    }
}
.articleImage {
    position: relative;
    img {
        width: 100%;
    }
}
.articleTitle {
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    margin: 10px 0 20px;
    a {
        display: block;
        color: $vela-text-color-secondary;
        @include transition(all 0.35s ease);
        &:hover,
        &:focus {
            color: $vela-color-primary;
        }
    }
}
.articleDesc {
    line-height: 26px;
    margin-bottom: 25px;
}
.articleMore {
    padding-top: 25px;
    border-top: $vela-border-main;
    .btn {
        padding: 8px 30px;
    }
    .articleCountComment {
        color: #9f9f9f;
        margin-top: 10px;
    }
}
.listSidebarBlog{
    margin:0px;
    padding:0px;
    li {
        padding-top: 5px;
        padding-bottom: 5px;
        .titleBlogsidebar {
            font-weight: 500;
            font-size: $vela-font-size + 2; 
        }
        time{
            display:block;
            color: $vela-text-color-banner;
            line-height: 18px;
            padding-bottom: 8px;
            font-size: $vela-font-size - 1;
        }
    }
}

.sidebarBlogCateItem {
    position: relative;
    span {
        position: absolute;
        top: 5px;
        right: 0;
        z-index: 2;
        width: 30px;
        height: 30px;
        cursor: pointer;
        &:before {
            content: "\f106";
            font-family: $vela-font-icon;
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 16px;
            @include translate(-50%, -50%);
        }
        &.collapsed {
            &:before {
                content: "\f107";
            }
        }
    }
    
    a {
        display: block;
        padding: 5px 0;
        color: $vela-text-color-primary;
        font-size: $vela-font-size;
        line-height: 20px;
        text-decoration: none;
        @include transition(all 0.35s ease);
        padding-left: 23px;
        line-height: 26px;
        &:before {
            content: '';
            position: absolute;
            top: 15px;
            left: 0;
            display: block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: $vela-text-color-primary;
            @include transition(all 0.45s ease);
        }
        &:hover,
        &:focus {
            color: $vela-color-primary;
            &:before {
                background-color: $vela-color-primary;
            }
        }
    
    }
    > div {
        padding-left: 15px;
        .sidebarCateItem {
        	border-bottom: 0;
        }
    }
}
//author sidebar
.velaBlogSidebar {
    .blogSidebar:first-child {
        .titleSidebar {
            border-top: 0;
            padding-top: 10px;
        }
    }
    .wrap {
        box-shadow: 0 0 2px #e1e1e1;
        padding: 10px;
        text-align: center;
    }
    .authorAvata {
        .avatar {
            background-color: #f1f1f1;
            padding: 30px 0;
            svg {
                fill: #ccc;
                width: 200px;

            }
        }
    }
    .blogAuthorSocial {
        padding-top: 5px;
        li {
            margin: 0 3px;
        }
        a {
            color: #cccccc;
            font-size: 18px;
            &:hover {
                color: $vela-text-color-secondary;
            }
        }
    }
}
// ARTICLE ON SIDEBAR
.sidebarArticleItem {
    padding: 9px 0;
    @include display-flex;
    @include flex-direction(row);
    @include flex-wrap(wrap);
}
.sidebarArticleItemImage {
    width: 37%;
    padding: 8px 0;
    padding-right: 20px;
    a {
        position: relative;
        display: block;
        width: 100%;
        height: 60px;
        overflow: hidden;
    }
    img {
        position: absolute;
        top: 0;
        left: 50%;
        max-width: inherit;
        height: 100%;
        @include translate(-50%, 0);
    }
}
.sidebarArticleItemContent {
    width: 63%;
    a {
        display: block;
        margin-bottom: 6px;
        color: $vela-text-color-secondary;
        font-size: $vela-font-size;
        line-height: $vela-font-size + 10;
        text-decoration: none;
        @include transition(all 0.35s ease);
        &:hover,
        &:focus {
            color: $vela-color-primary;
        }
    }
    time {
        color: lighten($vela-text-color-primary, 12%);
        font-size: $vela-font-size - 1;
    }
}
//Blog sidebar
@media(min-width: $screen-sm) {
    .blogSidebar {
        margin-bottom: $vela-gutter-width + 20px;
    }
}
.blogTagsList {
    margin: 0 -4px;
    padding: 15px 0;
    font-size: 0;
    li {
        display: inline-block;
        padding: 0 4px;
    }
    a {
        display: block;
        margin-bottom: 8px;
        padding: 4px 10px;
        color: $vela-text-color-primary;
        font-size: $vela-font-size;
        text-decoration: none;
        background-color: #f5f5f5;
        border-radius: 3px;
        @include transition(all 0.35s ease);
        &:hover,
        &:focus {
            color: #fff;
            background-color: $vela-color-primary;
            border-color: $vela-color-primary;
        }
    }
}
// ARTICLE PAGE
.velaArticleWrap {
    
}
.articleItem {
    line-height: 32px;
    .articleFeaturedImage {
        margin-bottom: 30px;
    }
    .articleDetailContent {
        padding: 10px 0;
    }
}
.articleFeaturedImage {
    margin-bottom: $vela-gutter-width;
    padding-top: 8px;
}
.articleDetailContent {
    margin: 0 auto;
    .rte {
        margin-bottom: $vela-gutter-width / 2;
        img {
            display: block;
            max-width: 100%;
            height: auto;
        }
    }
}
.articleHeader {
    margin-bottom: 20px;
    .articleMeta {
        padding: 0;
        margin-top: 15px;
        font-size: 14px;
        color: #666;
        .articleAuthor {
            color: #1a1a1a;
            font-weight: bold;
            margin-right: 5px;
        }
    }
    .blogTitle a {
        display: inline-block;
        background-color: $vela-color-primary;
        border-radius: 3px;
        color: #fff;
        font-size: 12px;
        padding: 0 10px;
        text-transform: uppercase;
        font-weight: 700;
    }
}
.articleBoxExtend {
    @include display-flex;
    @include flex-direction(row);
    @include flex-wrap(nowrap);
    margin-left: -$vela-gutter-width / 2;
    margin-left: -$vela-gutter-width / 2;
    padding: 15px 0;
}
.articleExtend {
    width: 50%;
    padding-left: $vela-gutter-width / 2;
    padding-right: $vela-gutter-width / 2;
}
.articleExtendRight {
    text-align: right;
}
.articleExtendImage {
    margin-bottom: 16px;
    a {
        display: block;
        overflow: hidden;
    }
}
.articleExtendNavText {
    margin-bottom: 10px;
    font-size: $vela-font-size - 2;
    line-height: $vela-font-size + 8;
    a {
        background-color: #ebebeb;
    	padding: 6px 20px;
    	display: inline-block;
        margin-top: 30px;
        font-weight: 600;
        @include transition(all 0.35s ease);
        &:hover,
        &:focus {
            background-color: $vela-color-primary;
            color: #fff;
        }
    }
}
.articleExtendTitle {
    font-size: $vela-font-size + 7;
    font-weight: 600;
    line-height: $vela-font-size + 18;
    a {
        display: inline-block;
        color: $vela-text-color-secondary;
        text-decoration: none;
        @include transition(all 0.35s ease);
        &:hover,
        &:focus {
            color: $vela-color-primary;
        }
    }
}
.articlePostBottom {
    padding: 15px 0;
    border-top: $vela-border-main;
    border-bottom: $vela-border-main;
    margin: 30px 0 15px;
    .articleAuthor {
        position: relative;
        float: left;
        line-height: 30px;
        span {
            color: $vela-text-color-secondary;
            font-weight: 600;
        }
    }
}
.articleSocialSharing {
    line-height: 30px;
    > span {
        float: left;
        font-weight: 600;
        margin-right: 10px;
    }
}
.articleFacebookShare {
    display: inline-block;
    vertical-align: middle;
    .fb-share-button {
        display: block;
        line-height: 20px;
    }
}
.articleTwitterShare {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    .twitter-share-button {
        display: block;
        position: relative;
        height: 20px;
        box-sizing: border-box;
        padding: 1px 8px 1px 6px;
        background-color: #1b95e0;
        color: #fff;
        border-radius: 3px;
        font-weight: 600;
        cursor: pointer;
        font-size: 11px;
        line-height: 20px;
        i {
            font-size: 12px;
        }
    }
}
//-------------------------------------//
//---------- VIII. Cart Page ----------//
//-------------------------------------//
.additional-checkout-buttons {
	margin-top: 20px;
}
.cartTitle{
	margin:0px;
	padding:10px 0px;
	font-family:$vela-font-family;
	font-size:$vela-font-size + 6;
	font-weight:600;
}
.cartContainer{
	margin: 30px 0 60px;
	min-height:60vh;
}
.cartTable{
	margin:$vela-gutter-width 0px 0px 0px;
	a{
		&:hover,&:focus{
			text-decoration:none;
		}
	}
	.cartHeaderLabels{
		background-color: #f7f7f7;
        color: $vela-text-color-secondary;
        border-bottom: $vela-border-main;
		>div{
			padding:10px;
            font-weight:600;
            color: #262e31;
			text-transform:uppercase;
			&:last-child{
				border-right:none;
			}
		}
    }
    .btnUpdateCart {
        border-bottom: 1px solid $vela-text-color-secondary;
        color: $vela-text-color-secondary;
        cursor: pointer;
        @include transition(all 0.2s ease-in-out 0s);
        margin-left: 10px;
        height: 18px;
        padding: 0;
        font-size: 12px;
        text-transform: uppercase;
        background: transparent;
        &:hover {
            border-color: transparent;
        }
    }
	.cartRemove{
		display:block;
        border-bottom: 1px solid $vela-color-primary;
        height: 18px;
        padding: 0;
        font-size: 12px;
        color: $vela-color-primary;
        text-transform: uppercase;
        margin-left: 10px;
        line-height: 18px;
        @include transition(all 0.2s ease-in-out 0s);
        
        &:hover {
            border-color: transparent;
        }
    }
    .velaJsQty .velaQtyNum {
        height: 38px;
    }
}
.cartItemWrap{
	>.flexRow{
        border-bottom:$vela-border-main;
        padding: 15px 0;
    }
    .productImage {
        padding-right: 20px!important;
    }
    .cartGroup {
        margin-top: 10px;
    }
	.productInfo {
		.productName{
			font-size:$vela-font-size + 2;
			font-weight:500;
		}
	}
}
.cartSubtotalTitle{
	font-weight:500;
}
.cartSubtotal{
	font-size:$vela-font-size + 4;
	font-weight: 600;
	margin:0px 0px 0px 10px;
	padding: 5px 0px;
}
.functionCart{
	padding: 20px 5px;
	border:$vela-border-main;
	border-top:0px;
    background-color:#f7f7f7;
	label{
		font-weight:500;
	}
	.cartSubtotal{
		color:$vela-color-primary;
	}
}
.cartEmptyContent{
	padding:20px 0px;
	color:$vela-text-color-secondary;
	font-size:$vela-font-size - 1;
	.cartEmpty{
		color:$vela-text-color-primary;
		font-size:$vela-font-size + 2;
		font-weight:600;
		text-transform:uppercase;
	}
}
.cartBoxSubtotal {
    margin-bottom: 6px;
    .cartSubtotalTitle {
        margin-right: 10px;
        font-size: $vela-font-size + 2;
        font-weight: 600;
    }
    .cartSubtotal {
        font-size: $vela-font-size + 10;
    }
}
.cartShipping {
    margin-bottom: 20px;
}
.functionCartButton{
    margin-top: 30px;
    @include display-flex;
    @include justify-content(flex-end);
    .btnUpdateCart {
        color: $vela-text-color-secondary;
        background-color: #fff;
        border: 2px solid $vela-border-color;
        @include transition(all 0.35s ease);
        font-weight: 700;
        font-size: $vela-font-size - 2;
        margin-right: 10px;
        &:hover {
            border-color: $vela-color-primary;
            background-color: $vela-color-primary;
            color: #fff;
        }
    }
}
.cartProductProp {
    font-size: $vela-font-size - 2;
}
.cartSubtotal {
    font-size: $vela-font-size + 4;
    font-weight: 600;
}
.btnViewCart {
    display: inline-block;
    padding: 8px 25px;
    color: $vela-text-color-secondary;
    background-color: #fff;
    border: 2px solid $vela-border-color;
    font-size: $vela-font-size - 2;
    line-height: 20px;
    font-weight: 700;
    @include transition(all 0.35s ease);
    &:hover,
    &:focus {
        color: #fff;
        border-color: $vela-color-primary;
        background-color: $vela-color-primary;
        text-decoration: none;
    }
}
.btnCheckout {
    color: #fff;
    background-color: $vela-color-primary;
    border-color: $vela-color-primary;
    @include transition(all 0.35s ease);
    font-weight: 700;
    font-size: $vela-font-size - 2;
    &:hover {
        color: #fff;
        background: $vela-text-color-secondary;
        border-color: $vela-text-color-secondary;
    }
}
.btnCartNote {
    display: inline-block;
    padding: 8px 25px;
    color: $vela-text-color-primary;
    background-color: $nocolor;
    border: $vela-border-main;
    font-size: $vela-font-size - 2;
    line-height: 20px;
    text-transform: uppercase;
    @include transition(all 0.35s ease);
    &.collapsed {
        .icofont {
            &:before {
                content: "\ed31";
            }
        }
    }
    &:hover,
    &:focus {
        color: $vela-color-primary;
        border-color: $vela-color-primary;
        text-decoration: none;
    }
}
//Header Cart Top
.velaCartTop {
    padding: 15px 0;
    position: relative;
    > a {
        position:relative;
        color: $vela-header-textcolor;
        line-height: 14px;
        font-size: 20px;
        padding-right: 10px;
        .text {
            position: absolute;
            font-size: $vela-font-size - 2;
            color: $vela-header-textcolor;
            font-weight: 400;
            top: -5px;
            right: 0;
        }
        .icons {
            font-size: 18px;
        }
        &:hover {
            &,.text {
                color: $vela-color-primary;
            }
        }
    }
    &.active,
    &:hover,
    &:focus {
        .velaAjaxCartModal {
            visibility: visible;
            @include opacity(1);
        }
    }
    .cartRemove {
        display: block;
        width: 20px;
        height: 20px;
        color: #fff;
        border-radius: 50%;
        border: $vela-border-main;
        line-height: 20px;
        text-align: center;
        -webkit-transition: all 0.35s ease;
        -o-transition: all 0.35s ease;
        transition: all 0.35s ease;
        .btnClose{
            @include scale(0.4);
            margin-left: -4px;
            margin-top: -4px;
            &:before,
            &:after {
                background-color: #999999;
            }
        }
        &:hover {
            border-color: $vela-color-primary;
            .btnClose {
                &:before,
                &:after {
                    background-color: $vela-color-primary;
                }
            }
        }
        span {
            display: none;
        }
    }
}
#CartCount{
    display: block;
    line-height: 12px;

}
.velaAjaxCartModal {
    position: absolute;
    top: 100%;
    right: $vela-gutter-width/2;
    z-index: 20;
    padding: 20px;
    width: 300px;
    background-color: #fff;
    visibility: hidden;
    @include opacity(0);
    @include box-shadow(0px 6px 15px rgba(0,0,0,0.2));
    @include transition(all 0.35s ease-in-out);
}
// AJAX CART - MODAL
.headerCartEmpty {
    padding: 6px;
    font-size: $vela-font-size - 1;
    font-weight: 300;
}
.headerCartScroll {
    .ajaxCartProduct {
        position: relative;
        margin-bottom: $vela-gutter-width / 2;
    }
}
.headerCartImage {
    width: 30%;
    a {
        display: block;
    }
}
.headerCartContent {
    padding: 0 $vela-gutter-width / 2;
    width: 70%;
}
.headerCartProductName {
    display: block;
    margin-bottom: 5px;
    color: $vela-text-color-secondary;
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    @include transition(all 0.35s ease);
    &:hover,
    &:focus {
        color: $vela-color-primary;
        text-decoration: none;
    }
}
.headerCartProductMeta {
    font-size: $vela-font-size - 2;
    color: $vela-text-color-banner;
}
.headerCartPrice {
    font-size: $vela-font-size - 2;
    span {
        display: inline-block;
    }
}
.headerCartRemoveBox {
    position: absolute;
    top: 5px;
    right: 0;
}
.headerCartTotal {
    padding-top: $vela-gutter-width / 2;
    &:after {
        content: '';
        display: table;
        clear: both;
    }
    .headerCartTotalTitle {
        float: left;
        font-weight: 600;
        line-height: 30px;
        color: $vela-text-color-secondary;
    }
    .headerCartTotalNum {
        float: right;
        font-size: $vela-font-size + 4;
        line-height: 30px;
    }
}
.headerCartButton {
	margin-top: 20px;
    .headerCartButtonBox {
        padding-top: 10px;
        width: 50%;
    }
    .btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 8px 10px;
        line-height: $vela-font-size + 4;
        font-size: $vela-font-size - 1;
    }
}
.headerCartModal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    visibility: hidden;
    @include opacity(0);
    @include transition(all 0.35s ease-in-out);
    .overlayCart{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        cursor: url(//www.edntech.com/cdn/shop/t/106/assets/velaClose.png?68705), auto;
        background-color: rgba(0,0,0,0.6);
    }
    .headerCartContent{
        position: absolute;
        z-index: 11;
        top: 50%;
        left: 50%;
        padding: 30px;
        background-color: $vela-body-bg;
        width: 570px;
        visibility: hidden;
        @include opacity(0);
        @include translate(-50%, -50%);
        @include transition(all 0.35s ease-in-out);
        @media (max-width: 600px){
            width: 300px;
        }
        &:after{
            content: "";
            display: table;
            clear: both;
        }
        @media (max-width: 479px) {
            max-height: 100%;
            padding: 15px;
            overflow-y: auto;
        }
    }
    &.active{
        visibility: visible;
        @include opacity(1);
        .headerCartContent{
            visibility: visible;
            @include opacity(1);
        }
    }
    .closeCartModal{
        position: absolute;
        top: 5px;
        right: 5px;
        display: block;
        width: 24px;
        height: 24px;
        text-align: center;
        &:before,
        &:after{
            content: "";
            position: absolute;
            top: 10px;
            left: 1px;
            width: 20px;
            height: 2px;
            background-color: $vela-text-color-primary;
            @include transition(all 0.35s ease);
        }
        &:before{
            @include rotate(-45deg);
        }
        &:after{
            @include rotate(45deg);
        }
        &:hover{
            &:before,
            &:after{
                background-color: $vela-color-primary;
            }
        }
    }
    .cartProductImage{
        float: left;
        width: 42%;
        padding-right: $vela-gutter-width;
        @media (max-width: 600px){
            width: 100%;
            padding-right: 0;
        }
    }
    .cartProductContent{
        float: left;
        width: 58%;
        padding: $vela-gutter-width / 2 0;
        text-align: center;
        @media (max-width: 600px){
            width: 100%;
        }
    }
    .productTitle{
        margin-bottom: 8px;
        color: $vela-text-color-secondary;
        font-size: $vela-font-size + 3;
    }
    .alertCartModal{
        margin-bottom: 10px;
        color: #06be1c;
        font-size: $vela-font-size;
    }
}
.cartModalButtons{
    margin: 0 auto;
    padding-top: 20px;
    .btn {
        width: 100%;
    }
    .btnCheckout {
        margin-top: 10px;
    }
}
// AJAX CART - DRAWER
.drawerClose {
    position: relative;
    display: block;
    height: 26px;
    position: absolute;
    right: 35px;
    top: 10px;
}
.jsDrawerClose {
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    cursor: pointer;
    &:before,
    &:after {
        content: "";
        position: absolute;
        top: 11px;
        left: 0;
        width: 24px;
        height: 2px;
        background-color: $vela-text-color-primary;
        @include transition(all 0.35s ease);
    }
    &:before {
        @include rotate(-45deg);
    }
    &:after {
        @include rotate(45deg);
    }
    &:hover {
        &:before,
        &:after {
            background-color: $vela-color-primary;
        }
    }
}
.drawerCartTitle {
    margin: 0;
    padding: 10px 0;
    color: $vela-text-color-secondary;
    border-bottom: $vela-border-main;
    font-size: $vela-font-size + 4;
    font-weight: 700;
    text-transform: uppercase;
}
.drawerCartEmpty {
    margin-top: $vela-gutter-width;
    text-align: center;
}
.drawerProduct {
    @include display-flex;
    @include flex-direction(row);
    @include flex-wrap(nowrap);
    border-bottom: $vela-border-main;
    margin: $vela-gutter-width / 2 0;
    padding-bottom: 15px;
    .drawerProductImage {
        @include flex(0 0 90px);
        margin-right: 10px;
    }
    .drawerProductContent {
        position: relative;
        padding: 0;
        width: 100%;
    }
}
.drawerCartFooter {
    border-top: $vela-border-main;
    padding: $vela-gutter-width / 2;
}
.drawerProductTitle {
    margin-bottom: 5px;
    padding-right: 15px;
    a{
        display: block;
        color: $vela-text-color-secondary;
        text-decoration: none;
        @include transition(all 0.35s ease);
        &:hover,
        &:focus {
            color: $vela-color-primary;
        }
    }
    span {
        display: block;
        color: $vela-text-color-banner;
        font-size: $vela-font-size - 1;
    }
}
.drawerProductPrice {
    margin-bottom: 15px;
    @media (max-width: 479px) {
        margin-bottom: 10px;
    }
}
.drawerProductQty {
    .velaQty {
        float: none;
        @include display-flex;
        border: $vela-border-main;
        width: 100px;
    }
    .qtyAdjust {
        background: transparent;
        border: 0;
        width: 28px;
        font-size: 18px;
        display: block;
        padding: 0;
        &:hover {
            color: $vela-color-primary;
            font-weight: 600;
        }
    }
    .qtyNum {
        text-align: center;
        font-weight: 600;
        border: 0;
        width: 40px;
        height: 30px;
    }
}
.drawerProductDelete {
    position: absolute;
    top: 5px;
    right: -5px;
    span {
        display: none;
    }
    .cartRemove.btnClose {
        @include scale(.5);
        &::before,
        &::after {
            height: 3px;
        }
    }
}

.drawerSubtotal {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
    .cartSubtotalHeading {
        float: left;
        line-height: 30px;
        font-weight: 600;
        text-transform: uppercase;
    }
    .cartSubtotal {
        float: right;
        line-height: 30px;
    }
}
.drawerShipping {
    margin: 0 0 $vela-gutter-width / 2;
    padding: 10px 0;
    font-size: $vela-font-size - 1;
}
.drawerButton {
    .btnVelaCart {
        width: 100%;
    }
    .drawerButtonBox {
        margin-bottom: $vela-gutter-width / 2;
        &:last-child {
            margin-bottom: 0;
        }
    }
}
.ajaxCartNote {
    margin: $vela-gutter-width / 2 0;
    padding: 15px;
}
.velaCartNoteButton {}
.velaCartNoteGroup {
    margin-top: $vela-gutter-width / 2;
    margin-bottom: $vela-gutter-width / 2;
    label {
        display: none;
        margin-bottom: 10px;
        font-weight: 600;
    }
}
//--------------------------------------//
//---------- IX. Account Page ----------//
//--------------------------------------//
.velaAccountTitle {
    position: relative;
    margin: 0 0 $vela-gutter-width;
    padding: 10px 0;
    font-family: $vela-font-family;
    font-size: $vela-font-size + 12;
    font-weight: 600;
    @media (max-width: 479px) {
        margin: 0 0 $vela-gutter-width / 2;
    }
}
.velaAccountTitleSmall {
    margin-bottom: $vela-gutter-width / 2;
    font-size: $vela-font-size + 2;
}
.velaAccountContainer {
    padding: 50px 0;
}
.navFormAccount {
    li {
        float: left;
        width: 50%;
        a {
            padding: 20px 0;
            color: $vela-text-color-primary;
            background-color: darken($vela-body-bg, 8%);
            line-height: 20px;
            text-align: center;
            font-size: $vela-font-size + 2;
            @include transition(all 0.35s ease);
            font-weight: 700;
            &:hover,
            &:focus {
                color: $vela-text-color-primary;
                background-color: darken($vela-body-bg, 8%);
            }
        }
        &.active {
            a {
                color: $vela-text-color-secondary;
                background-color: $vela-body-bg;
            }
        }
    }
}
.velaFormAccount {
    margin: 0 auto;
    max-width: 600px;
    border-radius: 3px;
    @extend .velaShadow-1;
    .tab-content {
        padding: $vela-gutter-width;
        @media (max-width: 479px) {
            padding: $vela-gutter-width / 2;
        }
    }
    .velaAccountTitle {
        font-size: $vela-font-size + 6;
        text-align: center;
        margin-bottom: 0;
    }
}
.formAccount {
    .form-group {
        margin-bottom: $vela-gutter-width;
        @media (max-width: 479px) {
            margin-bottom: $vela-gutter-width / 2;
        }
    }
    label {
        font-weight: 600;
    }
    .form-control {
        height: 40px;
        border-radius: 2px;
    }
    .btn {
        width: 100%;
        height: 46px;
        padding: 10px 30px;
        border-radius: 3px;
        text-align: center;
    }
    @media (max-width: 479px) {
        .row {
            margin-left: - $vela-gutter-width / 4;
            margin-right: - $vela-gutter-width / 4;
            [class*='col-'] {
                padding-left: $vela-gutter-width / 4;
                padding-right: $vela-gutter-width / 4;
            }
        }
    }
}
.formAccountText {
    padding-bottom: 15px;
    text-align: center;
}
.formAccountResetPassword {
    padding: $vela-gutter-width;
    @media (max-width: 479px) {
        padding: $vela-gutter-width / 2;
    }
}
.formActivateAccount {
    padding: $vela-gutter-width;
    @media (max-width: 479px) {
        padding: $vela-gutter-width / 2;
    }
}
.form-group--pasword {
    position: relative;
    .form-control {
        padding-right: 80px;
    }
    .velaShowPassword {
        position: absolute;
        top: 50%;
        right: 2px;
        min-width: 68px;
        margin-top: -15px;
        padding: 5px 10px;
        color: $vela-text-color-primary;
        border-left: $vela-border-main;
        font-size: $vela-font-size - 1;
        line-height: 20px;
        text-decoration: none;
        text-align: center;
    }
}
.forgetPassword {
    margin-top: $vela-gutter-width;
    text-align: center;
    @media (max-width: 479px) {
        margin-top: $vela-gutter-width / 2;
    }
}
.form-buttonCancel {
    margin-top: 30px;
    text-align: center;
}
.velaAccountButton {
    display: inline-block;
    padding: 8px 25px;
    color: $vela-text-color-primary;
    background-color: $nocolor;
    border: $vela-border-main;
    font-size: $vela-font-size - 2;
    line-height: 20px;
    @include transition(all 0.35s ease);
    &:hover,
    &:focus {
        color: $vela-color-primary;
        border-color: $vela-color-primary;
        text-decoration: none;
    }
}
.boxAccount {
    position: relative;
    margin-bottom: $vela-gutter-width;
    padding: 30px;
    height: 100%;
    border-radius: 3px;
    @extend .velaShadow-1;
    @media (max-width: 479px) {
        margin-bottom: $vela-gutter-width / 2;
        padding: $vela-gutter-width / 2;
        height: auto;
    }
    .accountContent {
        font-size: $vela-font-size - 1;
        line-height: 20px;
    }
    .customerName {
        margin: 0;
        padding: 8px 0;
    }
    .customerEmail {
        margin-bottom: 8px;
    }
    .btnRecoverPassword {
        padding: 0;
        color: $vela-color-primary;
        border: 0;
        background-color: $nocolor;
        font-size: $vela-font-size - 2;
        text-transform: uppercase;
        @include transition(all 0.35s ease);
        &:hover {
            text-decoration: underline;
        }
    }
    .accountButton {
        a {
            display: inline-block;
            font-size: $vela-font-size - 2;
            text-transform: uppercase;
            @include transition(all 0.35s ease);
            &:hover {
                text-decoration: underline;
            }
        }
    }
}
.accountOrderBox {
    margin-top: $vela-gutter-width;
    padding: 30px;
    border-radius: 3px;
    @extend .velaShadow-1;
    @media (max-width: 479px) {
        margin-top: $vela-gutter-width / 2;
        padding: $vela-gutter-width / 2;
    }  
}
.accountHeading {
    margin: 0 0 15px;
    padding: 0;
    font-size: $vela-font-size + 2;
}
.addressInfo {
    margin: 0;
    li {
        margin-bottom: 8px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    label {
        margin: 0;
        font-weight: 400;
    }
}
.orderBoxContent {
    font-size: $vela-font-size - 1;
    line-height: 20px;
    p {
        margin-bottom: 8px;
        &:last-child {
            margin-bottom: 0;
        }
    }
}
.velaFormAddress {
    padding: $vela-gutter-width;
    font-size: $vela-font-size - 1;
    @media (max-width: 479px) {
        padding: $vela-gutter-width / 2;
    }
    .velaAddAddress {
        width: 100%;
        text-align: center;
    }
}
.formAddAddress {
    margin-top: $vela-gutter-width;
    .form-buttonCancel {
        margin-top: $vela-gutter-width;
        text-align: center;
        @media (max-width: 479px) {
            margin-top: $vela-gutter-width / 2;
        }
    }
}
.addressList {
    margin-top: $vela-gutter-width;
    @media (max-width: 479px) {
        margin-top: $vela-gutter-width / 2;
    }
    .addressBox {
        height: auto;
    }
}
.labelDefault {
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 10px;
    color: $vela-text-color-banner;
    background-color: $vela-color-primary;
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase;
}
.addressBoxFunction {
    margin-top: $vela-gutter-width / 2;
    a {
        position: relative;
        display: inline-block;
        padding: 8px 25px;
        color: $vela-text-color-primary;
        background-color: $nocolor;
        border: $vela-border-main;
        font-size: $vela-font-size - 2;
        font-weight: 700;
        line-height: 20px;
        text-transform: uppercase;
        @include transition(all 0.35s ease);
        &:before {
            content: "";
            display: inline-block;
            margin-right: 5px;
            font-family: $vela-font-icon;
            font-weight: normal;
        }
        &:first-child {
            &:before {
                content: "\f044";
            }
        }
        &:last-child {
            &:before {
                content: "\f00d";
            }
        }
        &:hover,
        &:focus {
            color: $vela-color-primary;
            border-color: $vela-color-primary;
            text-decoration: none;
        }
    }
}
.accountAddress {
    .addressInfo {
        margin-bottom: 8px;
    }
}
.tableOrder {
    margin-bottom: 0;
    > thead {
        > tr {
            > th{
                font-weight: 600;
            }
        }
    }
}
.orderAdreess {
    margin-top: $vela-gutter-width;
    @media (max-width: 479px) {
        margin-top: $vela-gutter-width / 2;
    }
    .boxAccount {
        @media (min-width: 480px) {
            margin-bottom: 0;
        }
    }
}
//-------------------------------------//
//---------- X. Contact Page ----------//
//-------------------------------------//
@media(min-width: $screen-md) {
    .pageContactInfo {
        padding: 50px 0;
    }
}
.breadCrumbContact .velaBreadcrumbs {
	margin-bottom: 0;
}
.velaContactTitle {
    padding: 0px 0 30px;
    margin: 0;
    position: relative;
    font-size: $vela-font-size + 8;
    line-height: $vela-font-size + 14;
    font-weight: 600;
    text-transform: uppercase;
}
// Contact Page - Time Work
.timeWork{
    margin:0px;
    padding:0px;
    list-style:none;
    @include clearfix;
    li{
        position:relative;
        float:left;
        width:100%;
        padding:5px 0px;
        &:before{
            content:"";
            position:absolute;
            top:50%;
            left:0px;
            right:0px;
            border-top:1px dotted $vela-border-color;
        }
        span{
            position:relative;
            background-color:$vela-body-bg;
        }
    }
}
.velaContactBox{
    margin-bottom:$vela-gutter-width;
}
//Google map
.velaGoogleMap {
    position: relative;
}
.velaGoogleMapInner {
    position: relative;
    height: 590px;
    margin-bottom: 40px;
}
.googleOverPlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);
}
.formContactUs {
    label {
        margin-bottom: 9px;
        font-weight: 400;
        color: #a3a3a3;
        sup {
        	color: $vela-color-primary;
        }
    }
    .form-group {
        margin-bottom: 24px;
    }
    .form-control {
        height: 48px;
    }
    textarea {
        &.form-control {
            height: auto;
        }
    }
}
.pageContactLeft {
    .velaTitle {
        padding-top: 0;
        margin-top: 0;
        font-weight: 700;
    }
}
.velaContactBox {
    margin: 0 auto;
}
.velaContactBoxText {
    position: relative;
    line-height: 30px;
    span {
    	font-weight: 600;
    	color: #656d74;
    }
}
.velaContactBoxDesc {
    margin-bottom: 30px;
    line-height: 24px;
}
.velaContactBoxPhone {
	font-size: 18px;
	color: $vela-color-primary;
	font-weight: 600;
	margin-bottom: 10px;
	.wrap {
		margin-left: 15px;
	}
	span {
		display: block;
		font-weight: 400;
		line-height: 20px;
		font-size: $vela-font-size;
		color: $vela-text-color-primary;
	}
}
.btnContact {
	background-color: #fff;
	padding: 13px 30px;
    width: 100%;
    border: 1px solid #e1e1e1;
	color: #666666;
	text-transform: uppercase;
	font-size: $vela-font-size;
	text-align: center;
	min-width: 270px;
	@include transition(all .3s ease-in-out 0s);
	&:hover {
		border-color: $vela-color-primary;
        	color: $vela-color-primary;
	}
}

//-------------------------------------//
//---------- XII. Portfolio Page ----------//
//-------------------------------------//
.PortfolioContainer {
    margin-left: -15px;
    margin-right: -15px;
    &.noGutter {
        margin-left: 0;
        margin-right: 0;
    }
}
.container-full {
    .PortfolioContainer {
        padding-left: $vela-gutter-width/2;
        padding-right: $vela-gutter-width/2;   
        margin-left: 0;
        margin-right: 0; 
        &.noGutter {
            padding-left: $vela-gutter-width;
            padding-right: $vela-gutter-width;
            margin-bottom: 30px;
            margin-left: 0;
            margin-right: 0;
        }
    }
}
.velaPortfolio {
    .grid-item-content {
        position: relative;
        margin-bottom: $vela-gutter-width;
    }
    .noGutter {    
        .grid-item-content {
            margin-bottom: 0;
        }
    }
    .portfolioMeta {
        margin-top: 30px;
    }
}
.velaPortfoItem {
    .portfoContent {
        position: absolute;
        top: 20px;
        left: 20px;
        right: 20px;
        bottom:20px;
        margin: auto;
        background-color: #fff;
        display: flex;
        @include align-items(center);
        @include justify-content(center);
        text-align: center;
        opacity: 0;
        -webkit-transition: all 0.35s ease-in-out;
        -o-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
        -webkit-transform: scale(0) rotate(-180deg);
    -moz-transform: scale(0) rotate(-180deg);
    -ms-transform: scale(0) rotate(-180deg);
    -o-transform: scale(0) rotate(-180deg);
    transform: scale(0) rotate(-180deg);

    }
}
  .velaPortfoItem .grid-item-content:hover .portfoContent {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    -webkit-transition-delay: 0.1s, 0.1s;
    -moz-transition-delay: 0.1s, 0.1s;
    -ms-transition-delay: 0.1s, 0.1s;
    -o-transition-delay: 0.1s, 0.1s;
    transition-delay: 0.1s, 0.1s;
  }

//--------------------------------------//
//---------- XIV. Search Page ----------//
//--------------------------------------//
.pageSearchContent {
    border-top: $vela-border-main;
}
.velaSearchContainer {
    padding: 80px 0 60px;
    .formSearch {
        position: relative;
        visibility: visible;
        max-width: 500px;
        margin: 0 auto 30px;
        padding: 0;
        @include opacity(1);
        @include box-shadow(none);
    }
}
.velaSearchTitle {
    display: block;
    margin: 0 0 $vela-gutter-width/2;
    padding: 10px 0;
    font-size: $vela-font-size + 6;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
}
//Header Search Top
.velaSearchIcon {
    font-size: 20px;
    line-height: 18px;
    margin-left: 25px;
    position: relative;
    @media(max-width: $screen-lg) {
        margin-left: 15px;
    }
}
#velaSearchTop{
    right: $vela-gutter-width/2;
    position: absolute;
    top: 0%;
    @include opacity(0);
    background-color: #fff;
    width: 400px;
    padding: 0 40px 0 20px;
    border-radius: 3px;
    visibility: hidden;
    @include box-shadow(0 0 5px #ccc);
    @include transition(all 0.3s ease-in-out 0s);
    @media(max-width: $screen-md) {
        left: $vela-gutter-width/2;
        width: auto;
    }
    &.in {
       top: 100%;
       z-index: 999;
       @include opacity(1);
       visibility: visible;
    }
    .velaSearch{
        border:0px;
        color: $vela-text-color-secondary;
        background-color: transparent;
        @include box-shadow(none);
        padding: 0;
        font-size: 14px;
    }
    .btnVelaSearch{
        position:absolute;
        top:12px;
        right:20px;
        color: $vela-header-textcolor;
        background: transparent;
        border: 0;
        padding: 0;
        text-align: center;
        font-size: 18px;
        &:focus,
        &:hover {
            color: $vela-color-primary;
        }
        .btnSearchText{
            display:none;
        }
    }
 }
.searchClose {
    position: fixed;
    background: rgba(0,0,0,.5);
    top: 0;
    left: 0;
    visibility: visible;
    z-index: 999;
    @include size(100%,100%);
    @include opacity(1);
    @include transition(all 0.3s ease-in-out 0);
    &.collapsed {
        @include opacity(0);
        visibility: hidden;
    }
}

.velaFormSearchInput {
	border-width: 1px;
}
.velaFormSearchButton {
	background-color: $vela-color-primary;
	color: #fff;
    font-size: $font-size-base + 2 !important;
    @include transition(all 0.2 ease-in-out 0s );
    .fa{
        display:none;
    }
    &:hover {
        background-color: #333E48;
        border-color: #333E48;
    }
}
.velaFormSearchInput {
	font-size: $vela-font-size - 1 !important;
}
.velaAjaxSearch {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    width: 100%;
    padding: 15px 20px;
    background-color: #fff;
    border: $vela-border-main;
    list-style: none;
    @include box-shadow(0 6px 12px rgba(0,0,0,0.175));
    li {
        padding: 5px 0;
        &:last-child {
            border-bottom: 0;
        }
    }
    a {
        @include display-flex;
        @include flex-direction(row);
        @include flex-wrap(nowrap);
        @include align-items(center);
        width: 100%;
        color: $vela-text-color-primary;
        font-size: $vela-font-size - 1;
        text-decoration: none;
        text-align: left;
        @include transition(all 0.35s ease);
        &:after {
            content: '';
            display: table;
            clear: both;
        }
        &:hover,
        &:focus {
            color: $vela-color-primary;
        }
        &.searchViewAll {
            display: block;
            padding: 10px;
            font-weight: 600;
            text-align: center;
            text-transform: uppercase;
        }
    }
}
.searchProductImage {
    @include flex(0 0 38px);
}
.searchProductTitle {
    width: 100%;
    padding: 0 10px;
}
.searchBoxTop{
    z-index: 9999;
    position: fixed;
    @include display-flex;
    @include align-items(center);
    @include justify-content(center);
    width: 100%;
    height: 100%;
    right: -20%;
    top: 0;
    visibility: hidden;
    @include opacity(0);
    @include transition(all 0.5s cubic-bezier(0.25,0.46,0.45,0.94));
    &.active{
        right: 0;
        visibility: visible;
        @include opacity(1);
    }
}
.searchOverLayer{
    width: 60px;
    height: 60px;
    position: fixed;
    top: -60px;
    right: -60px;
    z-index: 9998;
    cursor: url(//www.edntech.com/cdn/shop/t/106/assets/velaClose.png?68705), auto;
    @include transition(all 0.6s cubic-bezier(0.25,0.46,0.45,0.94));
    &:before{
        content: "";
        position: absolute;
        left:0;
        top:0;
        z-index: 9999;
        width:100%;
        height:100%;
        background-color: rgba($vela-color-primary,0.9);
        border-radius: 60%;
        pointer-events: auto;
        @include transition(all 0.6s cubic-bezier(0.25,0.46,0.45,0.94));
    }
    &.active{
        &:before{
            @include scale(75);
        }
    }
}
.articleItemSearch {
    @include display-flex;
    @include flex-direction(row);
    @include flex-wrap(nowrap);
    padding: $vela-gutter-width/2 0;
}
.articleItemSearchImage {
    position: relative;
    width: 230px;
    padding-right: $vela-gutter-width;
    a {
        position: relative;
        display: block;
        width: 100%;
        height: 115px;
        overflow: hidden;
    }
    img {
        position: absolute;
        top: 0;
        left: 50%;
        max-width: inherit;
        height: 100%;
        @include translate(-50%, 0);
    }
}
.articleItemSearchContent {
    width: 100%;
}
.articleItemSearchTitle {
    margin: 0 0 5px;
    padding: 0;
    font-size: $vela-font-size + 4;
    font-weight: 600;
    line-height: 28px;
    a {
        display: inline-block;
        color: $vela-text-color-secondary;
        text-decoration: none;
        @include transition(all 0.35s ease);
        &:hover,
        &:focus {
            color: $vela-color-primary;
        }
    }
}
.articleItemSearchDesc {
    padding-top: 5px;
}
//FORM SEARCH PAGE
.formSearchPage {
    max-width: 600px;
    margin: 2px auto 30px;
    position: relative;
    margin-bottom: $vela-gutter-width;
    box-shadow: 0 0 3px #ccc;
    border-radius: 5px;
    overflow: hidden;
    .input-group {
        width: 100%;
    }
}
.formSearchPageInput {
    width: 100%;
    height: 48px;
    border: 0;
    padding: 9px 50px 9px 20px;
    color: $vela-text-color-secondary;
    &:hover,
    &:focus {
        border-color: $vela-text-color-secondary;
    }
}
.formSearchPageButton {
    color: $vela-text-color-secondary;
    background-color: transparent;
    font-size: $vela-font-size + 2;
    @include transition(all 0.35s ease);
    height: 30px;
    width: 50px;
    border: 0;
    position: absolute;
    right: 0;
    top: 10px;
    line-height: 32px;
    border-left: 1px solid #a1a1a1;
    z-index: 3;
    .searchPageButtonText {
        display: none;
    }
    &:hover,
    &:focus {
        color: $vela-color-primary;
    }
}

//----------------------------------------//
//---------- XV. Vela Quickview ----------//
//----------------------------------------//
.jsQuickview{
    .proFeaturedImage{
        position:relative;
        width:100%;
        a{display:block;}
        .loadingImage{
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            z-index:1;
            background-color:#e5e5e5;
            &:before{
                content:"";
                z-index:10;
                position:absolute;
                top:50%;
                left:0px;
                right:0px;
                margin:-27px auto 0px;
                width:54px;
                height:54px;
                border-radius:50%;
                background-image:url(//www.edntech.com/cdn/shop/t/106/assets/loading.gif?68705);
                background-repeat:no-repeat;
                background-position:center center;
                background-color:white;
                @include box-shadow(0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12));
            }
        }
    }
    .selector-wrapper{
        &.hiddenVariant{
            display: none !important;
        }
    }

}

#velaQuickView{
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:1135;
    overflow-x: auto;
    overflow-y: scroll;
    .quickviewOverlay{
        position:absolute;
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;
        z-index:1;
        background-color:rgba(0,0,0,0.4);
    }
    .jsQuickview{
        position:absolute;
        width:900px;
        top:10%;
        height:auto;
        margin:0px auto;
        left:0px;
        right:0px;
        padding:30px;
        z-index:2;
        background-color:#fff;
        border-radius: 2px;  
        @include scale(0);
        @include transition(all .5s ease-in-out 0s);
        &.velaFadeOut {
            @include scale(1);
        }
    }
    .quickviewName {
        margin-top: 0;
    }
    .quickviewClose{
        position: absolute;
        top: 0;
        right: 0;
        background: #fff;
        color: #fff;
        width: 40px;
        height: 38px;
        &:before,
        &:after {
            width: 20px;
            background-color: #333;
            left: 10px;
            top: 17px;
        }
        &:hover {
            background-color: #333e48;
            &:before,
            &:after {
                background-color: #fff;
            }
        }
    }
    .proBoxPrimary{
        padding: 0;
    }
    .proVariantsQuickview {
    	margin-bottom: 20px;
    }
    .proBoxInfo {
        margin-left: 0!important;
    }
    .proShortDescription {
        margin-bottom: 25px;
        padding-top: 0;
    }

    .proQuantity {
        padding-top: 10px;
        margin-bottom: 20px;
    }
}
.proThumbnailsQuickview{
    .owl-thumblist {
        .owl-nav>div {
            width: 30px;
            height: 30px;
            line-height: 30px;
            @include opacity(1);
            visibility: visible;
        }
        .owl-thumblist {
            margin-left: -5px;
            margin-right: -5px;
        }
        .owl-stage {
            display: flex;
        }
        .owl-item {
            width: 78.5px;
            min-height: 70px;
            display: block;
        }
        .thumbItem{
            padding: 10px 5px 0;
            a.active {
                &:before {
                    @include opacity(1);
                }
            }
            img {
                max-width: 100%;
                margin: 0 auto;
                height: auto;
            }
        }
    }
}
@media (max-width:991px){
    .productQuickView{
        display:none;
    }
}
//-------------------------------//
//---------- XVI. Page ----------//
//-------------------------------//
//page About
//aboutBannerTop
.aboutBannerTop {
    .pageContainer {
        position: relative;
    }
    .pageContent {
        position: absolute;
        top: 50%;
        width: 100%;
        @include transform(translateY(-50%));
        color: #fff;
        .velaTitle {
            font-size: 38px;
            font-weight: 500;
            color: #fff;
            margin-top: 0;
            padding-top: 0;
            line-height: 38px;
            text-transform: uppercase;
        }
        .rte {
            font-weight: 300;
            font-size: 20px;
            line-height: 26px;
        }
    }
}
//velaAboutUsFeature
   
    .velaAboutUsFeature {
        @media(min-width: $screen-sm) {
            padding: 40px 0;
        }
        .featureImage img {
            width: 100%;
        }
        .featureTitle {
            font-size: $vela-font-size + 2;
            font-weight: 600;
            text-transform: uppercase;
            padding: 20px 0 10px;
            position: relative;
            &:hover {
                text-decoration: $text-decoration-through;
            }
        }
        @media(max-width: $screen-sm) {
            img {
                width: 100%
            }
        }
    }
//velaAboutService 
    .velaAboutService {
        color: #fff;
        .velaHomeTitle {
            color: #fff;
            margin-bottom: 30px;
            &:before {
                background-color: #fff;
            }
        }
        .boxService  {
            margin-bottom: 20px;
            @media(min-width: $screen-md) {
                margin-bottom: 30px;
            }
        }
        .wrap {
            padding: 20px;
        }
        .boxServiceImage {
            margin-right: 15px;
            .fa {
                font-size: 40px;
            }
        } 
        .boxServiceTitle {
            color: #fff;
            font-size: $vela-font-size + 2;
            font-weight: 600;
            text-transform: uppercase;
            margin: 0;
        }
        @media(min-width: $screen-md) {
            .velaContent {
                padding-left: 50px;
                padding-right: 50px;
            }
        }
    }

//velaAboutTeam
    .velaAboutUsTeams {
        @media(min-width: $screen-sm) {
            padding: 40px 0;
        }
        .aboutMember {
            box-shadow: 0 0 3px #ccc;
        }
        .aboutContent {
            padding: 10px;
        }
        .aboutMemberName {
            font-size: $vela-font-size + 3;
            text-transform: uppercase;
            margin: 10px 0 4px;
            color: $vela-text-color-secondary;
            font-weight: 500;
        }
        .aboutMemberImage img {
            width: 100%;
        }
        .aboutMemberPosition {
            font-size: $vela-font-size;
        }
        .velaListSocial {
            margin: 5px 0;
            li {
                margin: 0 5px;
            }
        }  
    }
    //PAGE FAQS
.faqPageWrapper {
    padding: 60px 0;
    .panel-group {
        margin: 0;
    }
    .panel {
        margin: 0;
        padding: 0;
        background-color: darken($vela-body-bg, 5%);
        border: 1px dashed $vela-border-color;
        border-bottom: 1px solid #d0d0d0;
        @include box-shadow(none);
        + .panel {
            margin-top: 12px;
        }
    }
    .panel-heading {
        padding: 0;
        border: 0;
    }
    .panel-title {
        a {
            position: relative;
            display: block;
            padding: 10px 40px;
            color: #fff;
            background-color: $vela-text-color-secondary;
            font-size: $vela-font-size + 2;
            font-weight: 600;
            line-height: 24px;
            text-decoration: none;
            @include transition(all 0.35s ease);
            &:before,
            &:after {
                background-color: darken($vela-body-bg, 5%);
            }
            &:before {
                content: "";
                position: absolute;
                top: 50%;
                left: 15px;
                margin-top: -2px;
                display: block;
                width: 9px;
                height: 3px;
            }
            &:after {
                content: "";
                position: absolute;
                top: 50%;
                left: 18px;
                margin-top: -5px;
                display: block;
                width: 3px;
                height: 9px;
                @include opacity(0);
            }
            &.collapsed {
                color: $vela-text-color-secondary;
                background-color: darken($vela-body-bg, 5%);
                &:after {
                    @include opacity(1);
                }
                &:before,
                &:after {
                    background-color: $vela-text-color-secondary;
                }
            }
        }
    }
    .panel-collapse {
        padding: 10px 30px;
        .faq-item--content {
            padding: 18px 0 20px;
        }
    }
}
//=========== PAGE OURTEAM ==//
    .ourMember {
        position: relative;
        margin-bottom: 80px;
        .ourContent {
            background: #fff;
            padding: 20px 24px 0;
            position: absolute;
            left: 24px;
            bottom: 0;
            margin-bottom: -80px;
            right: 0;
        }
        .ourMemberName {
            color: #333;
            font-size: 22px;
            font-weight: 600;
            line-height: 30px;
        }
        .ourMemberPosition {
            margin-bottom: 14px;
            margin-top: 5px;
        }
        .velaSocial {
            @include opacity(0);
            @include transition(all .3s ease-in-out 0s);
            visibility: hidden;
        }
        &:hover {
            .velaSocial {
                @include opacity(1);
                visibility: visible;
            }
        }
    }
    .velaOurBanner {
        margin-top: 80px;
    }
    .velaOurBannerText {
        background: #333;
        color: #fff;
        padding: 20px 0 5px;
        .h2 {
            font-family: $vela-font-family-secondary;
            margin: 0;
            color: #fff;
        }
    }
//-----------------------------------------------------//
//---------- XVII. Vela Site (CSS For Theme) ----------//
//-----------------------------------------------------//
//========== TIMBER SHOPIFY - DRAWERS ==========//
.jsDrawerOpen {
    overflow: hidden;
    height: 100%;
    #pageContainer {
        &:before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            z-index: 91;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            cursor: url(//www.edntech.com/cdn/shop/t/106/assets/velaClose.png?68705), auto;
        }
    }
}
.drawer {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    max-width: 95%;
    padding: 0 $vela-gutter-width / 2;
    z-index: 92;
    color: $vela-text-color-primary;
    background-color: $vela-body-bg;
    outline: 0;
    overflow-y: auto;
    overflow-x: hidden;
    @include box-shadow(0px 6px 15px rgba(0,0,0,0.12));
    @include transition(all 0.4s cubic-bezier(0.46,0.01,0.32,1));
}
.drawerLeft {
    width: 400px;
    left: -400px;
    @media (max-width: 479px) {
        width: 300px;
        left: -300px;
    }
    .jsDrawerOpenLeft & {
        display: block;
        @include transform(translateX(400px));
        @media (max-width: 479px) {
            @include transform(translateX(300px));
        }
        .lt-ie9 & {
            left: 0;
        }
    }
}
.drawerRight{
    width: 400px;
    right: -400px;
    @media (max-width: 479px) {
        width: 300px;
        right: -300px;
    }
    .jsDrawerOpenRight & {
        display: block;
        @include transform(translateX(-400px));
        @media (max-width: 479px) {
            @include transform(translateX(-300px));
        }
        .lt-ie9 & {
            right: 0;
        }
    }
}
.isMoved{
    @include transition(all 0.4s cubic-bezier(0.46,0.01,0.32,1));
    .jsDrawerOpenLeft & {
        @include transform(translateX(400px));
        @media (max-width: 479px) {
            @include transform(translateX(300px));
        }
    }
    .jsDrawerOpenRight & {
        @include transform(translateX(-400px));
        @media (max-width: 479px) {
            @include transform(translateX(-300px));
        }
    }
}
.is-transitioning{
    display: block !important;
    visibility: visible !important;
}
//============================================//
//========== VELA FRAMEWORK (RESET) ==========//
//============================================//
.label {
    color: $vela-text-color-secondary;
}
a,
button,
.btn{
    &:focus{
        outline: none;
    }
    &:active{
        outline: none;
        &:focus{
            outline: none;
        }
    }
}
.noGutter{
    margin-left: 0;
    margin-right: 0;
    > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }
}
.errors{
    ul{
        list-style:none;
        margin:0px;
        padding:0px;
    }
}
.videoContainer{
    position: relative;
    padding-bottom: 56.25%;
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
}
.btnVelaOne {
    display: inline-block;
    padding: 8px 30px;
    color: ;
    background-color: ;
    border: 1px solid ;
    font-size: $vela-font-size - 2;
    font-weight: 700;
    line-height: 24px;
    border-radius: 3px;
    @include transition(all 0.35s ease);
    &:hover,
    &:focus {
        background-color: ;
        border-color: ;
        color: ;
    }
}
.btnVelaTwo {
    display: inline-block;
    padding: 10px 48px;
    color: #a7a7a7;
    background-color: transparent;
    border: $vela-border-main;
    font-size: $vela-font-size - 2;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;
    @include transition(all 0.35s ease);
    &:hover,
    &:focus {
        background-color: $vela-color-primary;
        border-color: $vela-color-primary;
        color: #fff;
        text-decoration: none;
    }
}
.btnClose {
    width: 26px;
    height: 26px;
    cursor: pointer;
    display: block;
    &:before,
    &:after {
        content: "";
        position: absolute;
        top: 11px;
        left: 0;
        width: 26px;
        height: 2px;
        background-color: $vela-text-color-primary;
        @include transition(all 0.35s ease);
    }
    &:before {
        @include rotate(-45deg);
    }
    &:after {
        @include rotate(45deg);
    }
    &:hover {
        &:before,
        &:after {
            background-color: $vela-color-primary;
        }
    }
}
.alert {
    position: relative;
    .btnClose {
        position: absolute;
        right: -5px;
        top: 0;
        font-size: 0;
        background: transparent;
        border: 0;
        &:before,
        &:after {
            width: 16px;
            background: #fff;
        }
    }
}
.js-alert-newsletter {
    &.alert-error {
        @extend .alert-danger;
    }
}
.btnProduct {
    color: ;
    background-color: ;
    border: 1px solid ;
    @include transition(all 0.35s ease);
    font-weight: 700;
    text-transform: capitalize;
    font-size: $vela-font-size - 2;
    padding: 8px 15px;
    line-height: 20px;
    height: auto;
    .icons {
        font-size: 18px;
    }
    &:hover,
    &:focus {
        background-color: ;
        border-color: ;
        color: ;
    }
}
.flexRow{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.effectOne {
    position: relative;
    overflow: hidden;
    &:before,
    &:after {
        content: "";
        position: absolute;
        display: block;
        z-index: 1;
        @include transition(all 0.5s ease-in-out);
    }
    &:before{
        height:1px;
        top:10px;
        left:50%;
        right:50%;
        background-color:white;
    }
    &:after{
        width:1px;
        left:10px;
        top:50%;
        bottom:50%;
        background-color:white;
    }
    a{
        position:relative;
        display:block;
        &:before,&:after{
            content:"";
            position:absolute;
            display:block;
            z-index:1;
            @include transition(all 0.5s ease-in-out);
        }
        &:before{
            height:1px;
            bottom:10px;
            left:50%;
            right:50%;
            background-color:white;
        }
        &:after{
            width:1px;
            right:10px;
            top:50%;
            bottom:50%;
            background-color:white;
        }
    }
    &:hover{
        &:before{
            left:10px;
            right:10px;
        }
        &:after{
            top:10px;
            bottom:10px;
        }
        a{
            &:before{
                left:10px;
                right:10px;
            }
            &:after{
                top:10px;
                bottom:10px;
            }
        }
    }
}
.effectTwo{
   a {
      display: block;
      overflow: hidden;
      position: relative;
      &:before {
         border: 1px solid #ffffff;
         bottom: 20px;
         content: "";
         left: 20px;
         @include opacity(0);
         -webkit-transform: scale(1.4);
         -ms-transform: scale(1.4);
         -o-transform: scale(1.4);
         transform: scale(1.4);
         position: absolute;
         right: 20px;
         top: 20px;
         @include transition(opacity 0.35s ease 0s,transform 0.35s ease 0s);
         z-index: 1;
      }      
      &:after {
          bottom: 20px;
          content: "";
          left: 20px;
          position: absolute;
          right: 20px;
          top: 20px;
          @include scale(1.4);
          @include opacity(0);
          @include box-shadow(0 0 0 20px rgba(0,0,0,0.2));
          background-color: rgba(0,0,0,0.05);
          @include transition( opacity 0.35s ease 0s,transform 0.35s ease 0s);
          z-index: 1;
      }

      // style for hover */
      &:hover{
         &:before,        
         &:after {  
            @include opacity(1);
            @include scale(1);
         }
      }
   }
}
// effect-v3*/
.effectThree{ 
   a {
      display: block;
      overflow: hidden;
      position: relative;
      img {
         @include scale(1);
         @include transition (all 0.35s ease 0s);
      }
      &:before,&:after {
         content: "";
         @include opacity(0);
         position: absolute;
         @include transition (all 0.35s ease 0s);
         z-index: 1;
      }
      &:before {
         border-bottom: 1px solid #ffffff;
         border-top: 1px solid #ffffff;
         bottom: 20px;
         left: 10px;
         right: 10px;
         top: 20px;
         @include scale(1, 0);
      }
      &:after {
         border-left: 1px solid #ffffff;
         border-right: 1px solid #ffffff;
         left: 20px;
         right: 20px;
         bottom: 10px;
         top: 10px;
         @include scale(0, 1);
      }     
      // style for hover */
      &:hover{
         &:before,
         &:after { 
            @include opacity(1);
            @include scale(1);
         }
         img {
            @include scale(1.05);
         }
      }
   }
}

.effectFour{ 
    a {
        display: block;
        overflow: hidden;
        position: relative;
        &:before,
        &:after {
            bottom: 0;
            content: "";
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            transition: all 900ms ease 0s;
        }
        // style for hover */
        &:hover{
            &:before {  
                background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
                bottom: 50%;
                top: 50%;
            }
            &:after {
                background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
                left: 51%;
                right: 50%;
            }
        }
    }
}
.effectFive { 
    a {
        display: block;
        overflow: hidden;
        position: relative;
        &:before {
            border: 1px solid #ffffff;
            bottom: 10px;
            content: "";
            left: 10px;
            @include opacity(0);
            //@include scale(1.4);
            position: absolute;
            right: 10px;
            top: 10px;
            @include transition( opacity 0.35s ease 0s, transform 0.35s ease 0s);
            z-index: 1;
        }
        &:after {
            bottom: 10px;
            //@include box-shadow(0 0 0 10px rgba(206, 209, 218, 0.3));
            content: "";
            left: 10px;
            @include opacity(1);
            //@include scale(1);
            position: absolute;
            right: 10px;
            top: 10px;
            @include transition( opacity 0.35s ease 0s, transform 0.35s ease 0s);
            z-index: 1;
        }
        img {
            @include transition (all 0.35s ease 0s);
        }
        // style for hover */
        &:hover{
            &:before {  
                @include opacity(1);
                //@include scale(1);
            }
        }
    }
}
.shopify-challenge__container{
    padding: 80px 0 50px;
    .shopify-challenge__button{
        padding: 9px 20px 11px;
        color: ;
        background-color: ;
        border-color: ;
        @include transition(all 0.35s ease);
        font-weight: 600;
        text-transform: uppercase;
        &:hover,
        &:focus {
            color: ;
            background-color: ;
            border-color: ;
        }
    }
}
.velaShadow-1 {
    @include box-shadow(0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2));
}
.velaShadow-2 {
    @include box-shadow(0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3));
}
.velaShadow-3 {
    @include box-shadow(0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.3));
}
.velaShadow-3 {
    @include box-shadow(0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.3));
}
.velaShadow-3 {
    @include box-shadow(0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.3));
}
.velaCheckbox {
    position: relative;
    label {
        display: block;
        margin: 0;
        padding-left: 24px;
        font-weight: 400;
        cursor: pointer;
        &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -8px;
            width: 16px;
            height: 16px;
            border: $vela-border-main;
        }
        &:after {
            content: "\efad";
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -8px;
            width: 16px;
            height: 16px;
            color: $nocolor;
            font-family: $vela-font-icon;
            font-size: 14px;
            line-height: 16px;
            text-align: center;
        }
    }
    input[type="checkbox"] {
        display: none;
        &:checked {
            + label {
                &:before {
                    border-color: $vela-color-primary;
                }
                &:after {
                    color: $vela-color-primary;
                }
            }
        }
    }
}
//LOADING - VELA
#loading{
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-27px;
    margin-left:-27px;
    z-index:100;
    &:before{
        content:"";
        display:block;
        width:54px;
        height:54px;
        border-radius:50%;
        background-image:url(//www.edntech.com/cdn/shop/t/106/assets/loading.gif?68705);
        background-repeat:no-repeat;
        background-position:center center;
        background-color:white;
        @include box-shadow(0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12));
    }
}
.velaCartAdding{
    &:before{
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.6);
        z-index: 10000;
    }
    &:after{
        content: "";
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: 10001;
        display:block;
        width:54px;
        height:54px;
        border-radius:50%;
        background-image:url(//www.edntech.com/cdn/shop/t/106/assets/loading.gif?68705);
        background-repeat:no-repeat;
        background-position:center center;
        background-color:white;
        @include translate(-50%, -50%);
        @include box-shadow(0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12));
    }
}
//LOADING - VELA
#loading{
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-27px;
    margin-left:-27px;
    z-index:100;
    &:before{
        content:"";
        display:block;
        width:54px;
        height:54px;
        border-radius:50%;
        background-image:url(//www.edntech.com/cdn/shop/t/106/assets/loading.gif?68705);
        background-repeat:no-repeat;
        background-position:center center;
        background-color:white;
        @include box-shadow(0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12));
    }
}
.bodyPreLoading {
    @include opacity(0);
}
#velaPreLoading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    > span {
        position: absolute;
        left: 0;
        width: 0;
        height: 3px;
        background-color: $vela-color-primary;
    }
}
.velaLoading {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
    @include rotate(-135deg);
}
.velaLoadingIcon {
    position: absolute;
    border-top: 5px solid $vela-color-primary;
    border-bottom: 5px solid transparent;
    border-left:  5px solid $vela-color-primary;
    border-right: 5px solid transparent;
    border-radius: 50%;
    @include animation(velaLoading 2s infinite);
    &.one {
        left: 75px;
        top: 75px;
        width: 50px;
        height: 50px;
    }
    &.two {
        left: 65px;
        top: 65px;
        width: 70px;
        height: 70px;
        @include animation-delay(0.2s);
    }
    &.three {
        left: 55px;
        top: 55px;
        width: 90px;
        height: 90px;
        @include animation-delay(0.4s);
    }
    &.four {
        left: 45px;
        top: 45px;
        width: 110px;
        height: 110px;
        @include animation-delay(0.6s);
    }
}
@include keyframes(velaLoading) {
    50% {
        @include transform(rotate(360deg) scale(0.8));
    }
}
//OWL CAROUSEL BUTTON DEFAULT
.owl-carousel{
    position: relative;
    .owl-nav {
        > div {
            &.disabled {
                cursor: not-allowed;
                @include opacity(0.5);
            }
        }
    }
    &:hover {
    	.owl-nav > div {
    		@include opacity(1);
    		visibility: visible;
    	}
    }
}
.owl-nav {
   >div{
        position:absolute;
        top: 0;
      	bottom: 0;
      	margin: auto;
        cursor:pointer;
        @include size(48px,48px);
        padding: 0;
        text-align: center;
        line-height: 46px;
        background: #f2f5f7;
        border: 0;
        color: #999999;
        font-size: 0;
        border-radius: 50%;
        @include opacity(0);
        visibility: hidden;
        @include transition(all 0.35s ease);
        &:hover {
        	background-color: $vela-color-primary;
        	border-color: $vela-color-primary;
        	color: #fff;
        }
        &:before {
	      	position: absolute;    	
	      	font-size: 18px;
	      	left: 50%;
	      	margin-left: -3px;
	      	font-family: $vela-font-icon;
	     }
    }
    .owl-prev {
    	left: -15px;		
        &:before {
        	content: "\f104 ";
        }
    }
    .owl-next {
        right: -15px;
        &:before {
        	content: "\f105";
        }
    }

}
.owl-dots {
    text-align: center;
    .owl-dot {
        display: inline-block;
        vertical-align: middle;
        > span {
            display: block;
            @include size(10px,10px);
            border-radius: 5px;
            margin: 2px;
            background: #cccccc;
            @include transition(all 0.3s ease-in-out 0s);
        }
        &.active {
            > span {
                width: 28px;
            }
        }
    }
}

.velaOwlRow_style1 {
	.owl-nav {
		position: absolute;
		width: 45px;
		background-color: transparent;
		right: 0;
		top: -65px;
		height: 30px;
		> div {
			@include size(22px,15px);
			border: 0;
			line-height: 15px;
			@include opacity(1);
            visibility: visible;
            background: transparent;
            border-radius: 0;
			&:before {
                font-size: 18px;
                color: #343434;
                left: auto;
                right: 0;
                margin: 0;
            }
            &:hover {
                &:before {
                    color: $vela-color-primary;
                }
            }
            &.owl-prev {
                border-right: $vela-border-main;
                &:before {
                    right: auto;
                    left: 0;
                }
            }
		}
	}
	.owl-prev{
        left: 0;
    }
    .owl-next {
        right: 0;
    }
}
//HEADER

#bannerTop {
	position: relative;
	height: 0;
	overflow: hidden;
	line-height: 60px;
	@include transition(all 0.3s ease-in-out 0s);
	.btn-bannerTop {
		position: absolute;	
		padding: 5px 15px;
		font-size: 12px;
		border-radius: 0 0 3px 3px;
		background: $vela-color-primary;
		text-align: center;
		line-height: 18px;
		color: #fff;
		top: -60px;
		right: 15px;
		cursor: pointer;
		text-transform: uppercase;
		font-weight: 600;
		@include transition(all .3s ease);
	}
	.container {
		position: relative;
	}
	&:hover {
		.btn-bannerTop {
			top: 0;
		}
	}
	&.active {
		height: auto;		
	}
}

#velaTopbar{
    color: $vela-topbar-textcolor;
    background-color: $vela-topbar-bgcolor;
    padding: 10px 0;
    font-size: $vela-font-size - 2;
}
.velaTopbarLeft {
    .icons {
        position: relative;
        bottom: -6px;
        margin-right: 8px;
    }
}
.velaTopbarCenter {
    .bg-primary {
        font-weight: 700;
        padding: 0 8px;
        border-radius: 3px;
        margin-left: 10px;
        display: inline-block;
    }
}
.velaTopbarRight {
    .velaSocialTop {
        a {
            display: inline-block;
            color: $vela-topbar-textcolor;
            margin-left: 15px;
            font-size: 16px;
            @include transition(all .2s ease-in-out 0s);
            &:hover {
                color: $vela-color-primary;
            }
        }
    }
	@media(min-width: $screen-md-min) {
		@include justify-content(flex-end);
	}
	@include justify-content(center);
}
.velaLogo{
    margin: 0;
    padding: 0;
    font-size: 0;
    vertical-align: middle;
    img {
        max-width: 100%;
    }
}
.velaLogoLink{
    display: inline-block;
    max-width: 100%;
    font-size: $vela-font-size + 6;
    vertical-align: middle;
    span{
        position: absolute;
    }
}
//MAIN CONTENT
#pageContainer {
    margin: 0 auto;
    .jsDrawerOpen & {
        &:before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            z-index: 91;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            cursor: url(//www.edntech.com/cdn/shop/t/106/assets/velaClose.png?68705), auto;
            @include transition(all 0.4s cubic-bezier(0.46,0.01,0.32,1));
        }
    }
}
#pageContent {
    position: relative;
    overflow: hidden;
}

//========== VELA - TITLE BLOCK, PAGE ==========//
.velaBlock {
	margin-bottom: $grid-gutter-width;
}
.borderBox {
	background: #fff;
	border: $vela-border-main;
	border-radius: 3px;
}
.boxPadding {
	padding: 20px;
	border-radius: $border-radius-small;
}
.velaTitle {
	font-size: 20px;
	color: $vela-heading-color;
	display: block;
	position: relative;
	padding: 10px 0;
	font-weight: 700;
	line-height: 26px;
    font-family: $vela-font-family-secondary;
    @media(max-width: $screen-sm) {
        font-size: 18px;
        line-height: 24px;
    }
}
.velaHomeTitle{
	padding: 0px 0 10px;
	margin: 0;
	position: relative;
    font-size: $vela-font-size + 12;
    line-height: $vela-font-size + 18;
    font-weight: 700;
    color: $vela-text-color-secondary;
    font-family: $vela-font-family-secondary;
    @media(max-width: $screen-sm) {
        font-size: $vela-font-size + 8;
    }
}
.velaTitleSmall {
    font-size: 22px;
    font-weight: 600;
    position: relative;
    padding-top: 0;
}
.velaTitle_style1 {
	position: relative;
	margin: 0;
	&:before {
		@include size(100%,0%);
		content: "";
		border-top: $vela-border-main;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
	}
	span {
		background: $body-bg;
		padding-right: 15px;
		position: relative;
		display: inline-block;
	}
}
.titleSidebar{
    font-family: $vela-font-family-secondary;
    font-size: $vela-font-size + 2;
    line-height: $vela-font-size + 6;
    margin: 0 0 15px;
    padding: 50px 0px 10px;
    position:relative;
    color: $vela-heading-color;
    font-weight: 700;
    border-top: $vela-border-main;
    &.heading {
        border-top: 0;
        padding-top: 0;
        span {
            display: inline-block;
            color: $vela-color-primary;
            font-size: 19px;
            border-bottom: 2px solid $vela-color-primary;
            &:before {
                content: "+";

            }
        }
    }
    @media(max-width: $screen-sm){
        padding: 20px 0px 10px;
    }
}
.velaArticleTitle{
    font-family:$vela-font-family;
    font-size: $vela-font-size + 32;
    margin: 0 0 30px;
    padding: 0;
    font-weight: 700;
}
.velaPageTitle{
    font-family:$vela-font-family;
    font-size:$vela-font-size + 4;
    font-weight:normal;
    color: $vela-heading-color;
    margin:0px;
    padding:15px 0px;
    font-weight: 700;
    span {
    	position: relative;
    	display: inline-block;
    	padding: 10px 0;
    	&:before {
    		position: absolute;
    		content: "";
    		@include size(20px,2px);
    		background-color: $vela-color-primary;
    		bottom: 0;
    		left: 0;
    	}
    }
    &.text-center {
    	span:before {
    		left: 50%;
    		margin-left: -10px;
    	}
    }
}

.headingGroup {
    display: flex;
    flex-direction: column;
    text-align: center;
    @media(min-width: $screen-sm) {
        margin-bottom: 5px;
    }
    .subTitle {
        color: $vela-text-color-primary;
        font-weight: 400;
        font-size: $vela-font-size;
        line-height: $vela-font-size + 5;
        margin: 0 auto 10px;
        max-width: 600px;
    }
}
//========== VELA - SIDEBAR ==========//


.productSidebar {
    @include display-flex;
    @include align-items(center);
    padding: 10px 0;
}
.productSidebarImage {
    flex: 0 0 80px;
    padding-right: $vela-gutter-width / 2;
}
.productSidebarContent {
    width: 100%;
    .productType {
        font-size: $vela-font-size - 2;
        a {
            display: block;
            color: $vela-text-color-banner;
            text-decoration: none;
            margin-bottom: 5px;
            @include transition(all 0.35s ease);
            &:hover,
            &:focus {
                color: $vela-color-primary;
            }
        }
    }
}
.productSidebarName {
    margin: 0 0 5px;
    font-size: $vela-font-size - 2;
    a {
        color: $vela-text-color-secondary;
        text-decoration: none;
        @include transition(all 0.35s ease);
        &:hover,
        &:focus {
            color: $vela-color-primary;
        }
    }
}
.productSidebarPrice {
    .priceProduct {
        display: inline-block;
    }
}

//Topbar Links
.tobar_link{
	ul {
		margin-bottom: 0;
		@include display-flex;
		li {
			border-right: $vela-border-main;
			margin-top: 3px;
		}
	}
    a{
        position: relative;
        display: block;
        padding: 0 15px;
        color: $vela-topbar-textcolor;
        line-height: 16px;
        text-decoration: none;
        @include transition(all 0.35s ease);
        &:before {
        	content: "";
        	@include size(1px,15px);
        	position: absolute;
        	top: 0;
        	bottom: 0;
        	margin: auto;
        	right: -1px;
        	background-color: rgba(255,255,255,.2);
        }
        &:hover,
        &:focus{
            color: $vela-color-primary;
        }
    }
}
.topLinksTitle {
    display: block;
    padding: 7px 15px;
    color: $vela-topbar-textcolor;
    line-height: 20px;
    cursor: pointer;
    span {
        display: none;
    }
}

//velaProductsBanner
.velaProductsBanner {
    .productInfor {
        position: absolute;
        width: 300px;
        bottom: 10px;
        margin: auto;
        right: 0;
        background: #fff;
        text-align: center;
        padding: 20px 10px;
        left: 0;
        @media(min-width: $screen-md) and (max-width: 1400px) {
            width: 200px;
        }
        @media(min-width: $screen-sm) {
            text-align: left;
            background: transparent;
            top: 50%;
            bottom: inherit;
            left: auto;
            @include transform(translateY(-50%));
        }
        .productName {
            font-size: 20px;
            font-weight: 400;
            margin-top: 0;
        }
        .btn {
            text-transform: uppercase;
            font-weight: 300;
            font-size: 15px;
            padding: 0;
            i {
                color: #5f5f5f;
                margin-left: 10px;
                @include scale(0.9);
            }
        }
    }
    @media(min-width: $screen-sm) {
        .proFeaturedImage {
            padding: 0 23%;
        }
    }
    .h4 {
        margin-top: 20px;
        font-weight: 600;
        font-size: 15px;
        margin: 30px 0 10px;
    }
    .proPrice {
        margin-bottom: 15px
    }
    .thumbItem {
        padding: 0 5px;
        img {
            width: 53px;
            border: 1px solid $vela-border-color;
        }
    }
    .banner_right {
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        @media(min-width: $screen-sm) {
            .productInfor {
                text-align: right;
                left: 0;
                right: auto;
            }
        }
    }
}
//five collection
.velaFiveCollection {
    .velaCollectionItem {
        position: relative;
    }
    .velaCollectionWrap {
        background: #fff;
        padding: 10px 20px;
        min-width: 150px;
        position: absolute;
        top: 50%;
        left: 50%;
        text-align: center;
        @include transform(translate(-50%,-50%));
        box-shadow: 1px 0 2px rgba(0,0,0,0.1);
    }
    .title {
        font-size: $vela-font-size;
        margin-top: 0;
        line-height: $vela-font-size + 8;
        margin-bottom: 5px;
    }
    .collectionCount {
        font-size: $vela-font-size - 2;
    }
    .text_link {
        margin-top: 10px;
        font-weight: 700;
        font-size: 12px;
        border-bottom: 1px solid #a1a1a1;
        &:hover {
            border-bottom-color: $vela-color-primary;
        }
    }
}
//velaProductsListBanner
.velaProductsListBanner {

}
//Home Produt Tabs
.velaProductTabs.style1 {
    .proTabNav{
        padding:0px;
        position: relative;
        >li{
            display: inline-block;
            position: relative;
            margin: 0 15px 10px;
            > a {
                color: $vela-color-primary;
                position: relative;
                font-size: $vela-font-size + 1;
                padding: 0 0 10px;
                font-weight: 600;
                text-transform: uppercase;
                border-bottom: 1px solid transparent;
            }
            &.active {
                a {
                    color: $vela-text-color-primary;
                    border-bottom-color: $vela-text-color-primary;
                }
            }
        }
    }
}

.colTabNav{
    margin: 0;
    bottom: -5px;
	padding:0px;
    position: relative;
    float: left;
    @media(min-width: $screen-sm) {
        float: right;
    }
    &.showNavigation {
        margin-right: 65px;
    }
	>li{
		float: left;
		position: relative;
		&:not(:last-child) {
            margin-right: 40px;
            &::after {
                content: "";
                @include size(1px, 14px);
                position: absolute;
                top: 50%;
                margin-top: -7px;
                right: -20px;
                display: block;
                background-color: $vela-border-color;
            }
        }
        @media(max-width: $screen-sm) {
            &:not(:last-child) {
                margin-right: 20px;
                &::after {
                    right: -10px;
                }
            }  
        }
		> a {
			color: #989898;
			position: relative;
			font-size: $vela-font-size;
            padding: 0;
            line-height: 22px;
		}
		&.active {
			a {
				color: $vela-text-color-secondary;
			}
		}
	}
}
.velaListProlist {
    .listTitle {
        margin-top: 0;
        padding-bottom: 20px;
    }
    .proHImage {
        padding-right: 20px;
    }
    .velaProBlock {
        &:not(:last-child) {
            padding-bottom: 30px;
            @media(max-width: $screen-xs){
                padding-bottom: 20px;
            } 
        }
        .proName {
            margin-bottom: 5px;
        }
        .proPrice {
            margin-bottom: 12px;
        }
    }
    .proReviews .spr-badge-caption {
        display: none;
    }
}
//proSubCat
.proSubCat {
	padding-top: 10px;
	.velaContent {
		background-color: #fff;
		border: $vela-border-main;
	}
	.proOwlCarousel {
		margin-left: 0;
		margin-right: 0;
	}
}
.proCat_link {
	margin-top: 10px;
	li a {
		font-size: 14px;
		font-weight: 400;
		padding: 0 5px;
		display: block;
		@include transition(all .3s ease-in-out 0s);
		color: $vela-text-color-primary;
		&:hover {
			color: $vela-color-primary;
		}
	}
}
.velaBannerCollectionInner {
    background-color: $vela-header-bgcolor;
    @media(min-width: $screen-md) {
        min-height: 100px;
    }
}
//velaVideo
.velaVideo {
    .videoWrapper {
        min-height: 200px;
        position: relative;
        a {
            position: absolute;
            display: block;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 3px solid #fff;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            color: #fff;
            line-height: 60px;
            text-align: center;
            span {
                font-size: 24px;
                margin-left: 7px;
            }
            &:hover {
                border-color: $vela-color-secondary;
                color: $vela-color-secondary;
            }
        }
    }
    &.parallax {
        height: 580px; 
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
    }
}
//Product Page Social Sharing

.velaProductSharingTittle {
  	margin-right: 20px;
    font-size: $vela-font-size -2;
  	color: $vela-text-color-secondary;
    margin-top: 5px; 
    font-weight: 700;
}

.socialSharing{
	margin:0px;
	padding:0px;
	> li{
		@include inline-block;
		margin-right:4px;
		.btnSharing{
			display:block;
			color: #ccc;
			overflow: hidden;
			@include transition(all 0.3s ease-in-out 0s);
			span { display: none;}
			.fa{
                font-size: 18px;
                margin-right: 15px;
				height: 26px;
				line-height: 26px;
				text-align:center;
			}
			&:hover {
				color: $vela-text-color-secondary;
			}
		}
	}
}

// Sidebar - Block Categories
.velaCategoriesSidebar {
    .titleSidebar {
        border-top: 0;
        padding-top: 10px;
    }
}
.sidebarCateItem {
    position: relative;
    span {
        position: absolute;
        top: 5px;
        right: 0;
        z-index: 2;
        width: 30px;
        height: 30px;
        cursor: pointer;
        &:before {
            content: "\f106";
            font-family: $vela-font-icon;
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 16px;
            @include translate(-50%, -50%);
        }
        &.collapsed {
            &:before {
                content: "\f107";
            }
        }
    }
    
    a {
        display: block;
        padding: 5px 0;
        color: $vela-text-color-primary;
        font-size: $vela-font-size;
        line-height: 20px;
        text-decoration: none;
        @include transition(all 0.35s ease);
        padding-left: 23px;
        line-height: 26px;
        &:before {
            content: '';
            position: absolute;
            top: 10px;
            left: 0;
            display: block;
            width: 15px;
            height: 15px;
            border: $vela-border-main;
            border-radius: 50%;
            background: #fff;
            @include transition(all 0.45s ease);
        }
        &:after {
            content: "\e606";
            font-family: "simple-line-icons";
            position: absolute;
            top: 5px;
            left: 3px;
            font-size: 10px;
            color: #fff;
            display: none;
            z-index: 2;
            -webkit-transition: all 0.45s ease;
            -o-transition: all 0.45s ease;
            transition: all 0.45s ease;
        }
        &.active,
        &:hover,
        &:focus {
            &:before {
                background-color: $vela-text-color-secondary;
                border-color: $vela-text-color-secondary;
            }
            &:after {
                display: block;
            }
        }
    
    }
    > div {
        padding-left: 15px;
        .sidebarCateItem {
        	border-bottom: 0;
        }
    }
}
// Sidebar - List Filter
.listSidebar{
    margin:0px;
    padding:12px 0px;
    li{
        a{
            display:block;
            font-size:$vela-font-size;
            font-weight:normal;
            color:$vela-text-color-secondary;
            padding:5px 0px;
            &:hover{
                color: $vela-color-primary;
            }
        }
    }
}
// Sidebar - List Filter

.ajaxFilterTitle {
    position: relative;
}
.listFilter {
    margin: 0;
    &:after {
        content: '';
        display: table;
        clear: both;
    }
    > li {
        a {
            position: relative;
            display: block;
            padding: 5px;
            padding-left: 23px;
            line-height: 26px;
            color: #666666;
            font-size: $vela-font-size;
            text-decoration: none;
            @include transition(all 0.45s ease);
            &:before {
                content: '';
                position: absolute;
                top: 10px;
                left: 0;
                display: block;
                width: 15px;
                height: 15px;
                border: $vela-border-main;
                border-radius: 50%;
                background: #fff;
                @include transition(all 0.45s ease);
            }
            &:after {
                content: "\e604";
                font-family: "simple-line-icons";
                position: absolute;
                top: 5px;
                left: 2px;
                font-size: 10px;
                color: #fff;
                display: none;
                z-index: 2;
                -webkit-transition: all 0.45s ease;
                -o-transition: all 0.45s ease;
                transition: all 0.45s ease;
            }
            &:hover,
            &:focus {
                color: $vela-color-primary;
                &:before {
                    background-color: $vela-color-primary;
                    border-color: $vela-color-primary;
                }
                &:after {
                    display: block;
                }
            }
           
        }
        &.active {
            a {
                color: $vela-color-primary;
                &:before {
                    background-color: $vela-color-primary;
                    border-color: $vela-color-primary;
                }
                &:after {
                    display: block;
                }
            }
        }
        &.filterColor {
            float: left;
            margin-right: 10px;
            padding: 5px 0;
            a {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                overflow: hidden;
                padding: 0;
                &:before {
                    display: none;
                }
                &:after {
                    content: "\e604";
                    font-family: "simple-line-icons";
                    position: absolute;
                    top: 0;
                    left: 3px;
                    font-size: 14px;
                    color: #fff;
                    display: none;
                    z-index: 2;
                    line-height: 22px;
                    -webkit-transition: all 0.45s ease;
                    -o-transition: all 0.45s ease;
                    transition: all 0.45s ease;
                }
                &:hover,
                &:focus {
                    &:after {
                        display: block;
                    }
                }
                &[title="white"] {
                    border: $vela-border-main;
                    &:after{
                        color: $vela-color-secondary;
                    }
                }
            }
            &.active {
                a {
                    &:after {
                        display: block;
                    }
                }
            }
        }
    }
}
.listFilterSize {
    &:after {
        content: '';
        display: table;
        clear: both;
    }
    > li {
        float: left;
        margin-right: 15px;
    }
}
.velaFilter {
    .velaClearAll {
        color: $vela-color-primary;
        font-size: 20px;
        font-weight: 400;
        position: absolute;
        bottom: 8px;
        right: 0;
        z-index: 1;
    }
    .velaClear{
        font-size: 20px;
        font-weight: 400;
        color: $vela-color-primary;
        position: absolute;
        bottom: 8px;
        right: 0;
        z-index: 1;
    }
}

// GO TO TOP
#goToTop {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 90;
    display: none;
    cursor: pointer;
    span {
        position: relative;
        display: block;
        width: 42px;
        height: 42px;
        line-height: 38px;
        margin: 3px;
        color:#333e48;
        border-radius: 50%;
        text-align: center;
        overflow: hidden;
        background-color: #f2f5f7;
        border: $vela-border-main;
        &:hover {
        	background-color: $vela-color-primary;
        	border-color: $vela-color-primary;
        	color: #fff;
        }
    }
}

.velaSocial {
	a {
		color: #ccc;      	
      	line-height: 30px;      	
      	display: block;
		.fa {
            font-size: 18px;
		}
		&:hover {
			color: $vela-color-primary;
		}
    }
    .velaSocialItem {
        margin-right: 5px;
    }
}

.velaSwatchProduct {
    z-index: 10;
    display: block;
    margin: 5px 0 0;
    padding: 0;
    list-style: none;
    > li {
        float: left;
        padding: 3px;
        > label{
            display: block;
            margin: 0;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-size: 100% 100%;
            cursor: pointer;
            overflow: hidden;
            @include box-shadow(0 0 3px #ccc);
        }
    }
}
// HEADER CONTENT
.headerText{
    float: left;
}
.headerTextItem{
    position: relative;
    margin-right: 20px;
    padding: 12px 0;
    padding-right: 20px;
    float: left;
    line-height: 22px;
    &:after{
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -9px;
        width: 1px;
        height: 18px;
        background-color: rgba(255,255,255,0.2);
    }
    &:last-child{
        &:after{
            display: none;
        }
    }
    i{
        display: inline-block;
        vertical-align: middle;
        margin-right: 2px;
    }
}
.headerContent {
  	position: relative;
}
.p-static {
	position: static;
}
//Topbar Links
.velaIconTopLinks {
    margin-left: 25px;
    position: relative;
    display: flex;
    align-items: center;
    @media(max-width: $screen-lg) {
        margin-left: 15px;
    }
    .fa {
        font-size: 6px;
        margin: 0 1px;
    }

}
.velaTopLinks{
	position: absolute;
	right: $vela-gutter-width/2;
	background: #fff;
	min-width: 150px;
	top: 100%;
    z-index: 999;
	@include box-shadow(0px 6px 15px rgba(0,0,0,0.12));
	ul {
		padding: 10px;
	}
    li { 
        display: block;         
        a {
            color: $vela-header-textcolor;
            display: block;
            line-height: 14px;
            padding: 8px 10px;
            &:hover {
                color: $vela-color-primary;
            }

        }
    }
}
.vela-currency {
	position: relative;
	.dropdown-menu {
		right: 0;
		padding: 5px 20px;
		min-width: 80px;
	        margin-top: 0;
	        left: auto;
	}
	.vela-currency__title {
		color: $vela-topbar-textcolor;
		cursor: pointer;
        line-height: 22px;
        .fa{
            margin-left: 5px;
        }
		&:hover {
			color: $vela-color-primary;
		}
	}
	.vela-currency__item {
		color: $vela-text-color-primary;
		cursor: pointer;
		padding: 5px 0;
		&:hover,&.active {
			color: $vela-color-primary;
		}
	}
	&:hover {
		.dropdown-menu {
			display: block;
		}
	}
}
//ThreeBannerFix
@media(min-width: $screen-md) {
    .velaBannerFix .velaBannerInner {
        margin-top: -110px;
        box-shadow: 0 0 0 $vela-gutter-width #fff;
        position: relative;
        z-index: 1;
        background: #fff;
    }
}
//Banner Text
.velaBannerText {
    .bannerTitle {
        font-size: 34px;
        font-weight: 600;
        margin: 0 0 15px;
    }
    .bannerDesc {
        margin-bottom: 30px;
    }
    .btn {
        padding: 10px 30px;
        @include transition(all .3s ease-in-out 0s);
    }
}
//vela Background Parallax
.velaBackgroundParallax {
    &.bg_image {
        .velaBannerTextInner {
            padding-top: 60px;
            padding-bottom: 60px;
        }
    }
    &.bg_parallax {
        @media(min-width: $screen-sm) {
            background-attachment: fixed;
        }
        background-size: cover;
        background-repeat: no-repeat;
    }
    .bannerTitle {
        color: #fff;
        font-size: 50px;
        font-weight: 600;
        margin: 0 0 15px;
    }
    .bannerDesc {
        font-size: 40px;
        margin-bottom: 30px;
        color: #fff;
    }
    .btn {
        background: #fff;
        padding: 10px 30px;
        color: #000;
        @include transition(all .3s ease-in-out 0s);
    }
}
//velaListCollection
.velaListCollection.style1 {
    @media(min-width: $screen-md) {
        .velaCollectionInner {
            margin-top: -110px;
            box-shadow: 0 0 0 $vela-gutter-width #fff;
            position: relative;
            z-index: 1;
            background: #fff;
        }
    }
    .velaCollectionItem {
        position: relative;
    }
    .velaBox {
        background: #fff;
        padding: 10px 20px;
        min-width: 150px;
        position: absolute;
        top: 50%;
        left: 50%;
        text-align: center;
        @include transform(translate(-50%,-50%));
        box-shadow: 1px 0 2px rgba(0,0,0,0.1);
    }
    .velaColTitle {
        font-size: $vela-font-size;
        margin-top: 0;
        line-height: $vela-font-size + 8;
        margin-bottom: 5px;
    }
    .collectionCount {
        font-size: $vela-font-size - 2;
    }
}
// Vela Video
.videoWrapper {
    text-align: center;
    a {
        display: inline-block;
        max-width: 100%;
    }
}


//velaFeatureText
.velaFeatureText {
    .featureTitle {
        font-size: $vela-font-size + 20;
        font-weight: 400;
    }
    .btn {
        border: 2px solid #191919;
        font-weight: 700;
        font-size: $vela-font-size;
        text-transform: uppercase;
        padding: 10px 35px;
        @include transition(all .3s ease-in-out 0s);
        &:hover {
            background-color: #191919;
            color: #fff;
        }
    }
}
//velaContactForm
.velaContactForm {
    .velaContactFormInner {
        padding: 50px 0;
        .form-control {
            border-color: #fff;
            background-color: rgba(255,255,255,0.3);
        }
    }
}
// Vel Notification
.velaNotification {
    padding:0px;
    max-width: 100%;
    margin: 10px;
    padding: 40px;
    background: transparent;
    @media(max-width: $screen-sm) {
        padding: 30px;
    }
    .fancybox-close-small {
        position: absolute;
        top: 0px;
        right: 0;
        background: $vela-color-primary;
        color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 2px;
        @media(max-width: $screen-sm) {
            @include scale(0.6);
        }
        &:before,
        &:after {
            content: "";
            position: absolute;
            width: 26px;
            height: 2px;
            width: 20px;
            background-color: #fff;
            left: 10px;
            top: 17px;
            -webkit-transition: all 0.35s ease;
            -o-transition: all 0.35s ease;
            transition: all 0.35s ease;
            border-radius: 0;
        }
        &:after {
            webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        &:before {
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        &:hover {
            background: #191919;
            &:before,
            &:after {
                background: #fff;
            }
        }
    }

}
// NEWSLETTER MODAL - Vela Framwork
    #velaNewsletterModal {
        margin: 0;
        padding: 0 15px;
        background: transparent;
        .fancybox-close-small {
            position: absolute;
            top: 0px;
            right: 15px;
            background: transparent;
            width: 38px;
            height: 40px;
            border-radius: 2px;
            &:before,
            &:after {
                content: "";
                position: absolute;
                width: 26px;
                height: 2px;
                width: 20px;
                background-color: #333;
                left: 10px;
                top: 17px;
                -webkit-transition: all 0.35s ease;
                -o-transition: all 0.35s ease;
                transition: all 0.35s ease;
                border-radius: 0;
            }
            &:after {
                webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            &:before {
                -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }
            &:hover {
                &:before,
                &:after {
                    background: $vela-color-primary;
                }
            }
        }
    }
    .newsletterModal{
        width:800px;
        padding:0px;
        background-color: #fff;
        @media(max-width: $screen-md) {
            width: 100%;
        }
        
    }
.velaNewsletterModal{
    width: 100%;
    padding: 30px 20px;
    @media(min-width: $screen-xs) {
        padding: 40px 30px;
        width:500px;
    }
    @media(min-width: $screen-sm) {
        padding: 60px 40px;
    }
    max-width: 100%;
    display: inline-block;
    .velaTitle {
        position: relative;
        font-size: 30px;
        margin-top: 0;
        padding-top: 0;
        font-family: $vela-font-family-secondary;
        @media(max-width: $screen-md) {
            font-size: 24px;
            line-height: 26px;
        }
    }
    .input-group {
        margin: 25px 0;
        @media(max-width: $screen-xs) {
            margin: 15px 0;
        }
    }
    .form-control {
        height: 44px; 
        border-radius: $border-radius-large!important; 
    }
    .input-group-addon {
        padding: 0;
        border: 0;
        background: transparent;
    }
    .btnNewsletter {
        background-color: $vela-text-color-secondary;
        color: #fff;
        height: 44px;
        padding: 10px 20px;
        font-size: 14px;
        margin-left: 10px;
        font-weight: 700;
        @include transition(all 0.3s ease-in-out 0s);
        &:hover {
            background-color: $vela-color-primary;
        }
    }
    .checkGroup {
        display: inline-block;
    }
    #chkNewsletterModal {
        margin: 4px 0;
    }
    .newsletterDescription {
        margin: 20px 0 10px;
        font-size: $vela-font-size - 1;
    }
}
//vela OurServide
.velaServices {
    .velaServicesInner {
        padding-top: 30px;
        .mbItemGutter {
            &:not(:last-child) {
                @media(max-width: $screen-sm) {
                    padding-bottom: 30px;
                }
                &:before {
                    content: "";
                    width: 1px;
                    height: 90%;
                    position: absolute;
                    top: 5%;
                    background: #e5e5e5;
                    display: block;
                    right: 0;
                    @media(max-width: $screen-sm) {
                        height: 1px;
                        width: 80%;
                        top: auto;
                        bottom: 0;
                        left: 0;
                        margin: auto;
                    }
                }
            }
        }
        
    }
    .boxServiceImage {
        margin-bottom: 10px;
        .serviceImage {
            display: inline-block;
        }
    }
    .boxServiceTitle {
        font-size: $vela-font-size;
        line-height: $vela-font-size + 4;
        font-weight: 700;
        margin: 0 0 12px;
    }
    .boxServiceDesc {
        font-size: $vela-font-size;
        line-height: $vela-font-size + 2;
    }
    a {
        font-size: $vela-font-size - 2;
        font-weight: 700;
        padding-top: 20px;
        display: block;
        .icons {
            position: relative;
            bottom: -2px;
            font-size: 14px;
            margin-left: 10px;
        }
    }
}
.velaMultiBannerText.style1 {
    .bannerTitle {
        margin: 0 0 5px;
        font-weight: 600;
        font-size: $vela-font-size + 5;
        text-transform: uppercase;
        a {
            @include transition(all 0.3s ease-in-out 0s);
            &:hover {
                color: $vela-text-color-primary;
            }
        }
    }
    .bannerDesc {
        margin-bottom: 25px;
    }
    .bannerImage {
        img {
            @include transition(all 0.3s ease-in-out 0s);
            @include scale(1);
            @media(max-width: $screen-sm) {
                width: 100%;
            }
        }
        &:hover {
            img {
                @include scale(1.08);
            }  
        }
    }
}
// Vela Newsletter
.velaNewsletter {
    &.hasBg {
        background-repeat: no-repeat;
        @media(min-width: $screen-md) {
            background-size: cover;
            background-attachment: fixed;
        }
        .velaNewsletterInner {
            margin-top: 80px;
            margin-bottom: 80px;
            @media(max-width: $screen-sm) {
                margin-top: 50px;
                margin-bottom: 50px;
            }
        }
    }
	.velaNewsletterInner {
        max-width: 930px;
        background: #fff;
        opacity: .9;
        width: 100%;
        margin: 0 auto;
        padding: 80px 15px;
        @media(max-width: $screen-sm) {
            padding: 50px 15px;
        }
        .wrap {
            max-width: 690px;
            width: 100%;
            margin: 0 auto;
        }
    }
    .form-control {
        border-width: 2px;
        border-radius: 5px!important;
    }
  	.newsletterDescription {
        margin-top: 30px;
  	}
	.btnNewsletter {
		font-size: $vela-font-size - 2;
		font-weight: 700;
        padding: 8px 35px;
        margin-left: 20px;
        @media(max-width: $screen-sm) {
            padding: 8px 20px;
            margin-left: 10px;
        }
		&:hover {
            background-color: $vela-color-primary;
            border-color: $vela-color-primary;
		}
	}
}

@media(max-width: $screen-md) {
    .velaFiveBanner {
        .bannerItem {
            img {
                width: 100%;
            }
        }
    }
}
//velaBorder
.velaBorder {
    margin-bottom: $vela-gutter-width;
    .borderStyle {
        line-height: 0;
    }
}
//velaGroupSpecial
.velaGroupSpecial {
    .velaGroupSpecialInner {
        padding: 60px 0 30px;
    }
}
//TESTIMONIALS
.velaTestimonials {
	.testimonialItem {
        background-color: #f5f5f5;
        padding: 30px;
	}
	.testimonialAvatar {
		@include size(70px,70px);
		position: relative;
		overflow: hidden;
		border-radius: 50%;
		display: inline-block;
	}
	.testimonialBadge {
        margin-top: 20px;
        .fa {
            color: $vela-color-primary;
            font-size: $vela-font-size - 2;
        }
    }
	.testimonialName {
		font-size: 12px;
		font-family: $vela-font-family-secondary;
		text-transform: uppercase;
		color: $vela-text-color-secondary;
		font-weight: bold;
		margin: 0 0 5px;
	}
	.position {
		color: $vela-text-color-secondary;
		font-weight: 700;
        font-size: $vela-font-size;
        margin-top: 25px;
        margin: 25px 0 10px;
	}
	.testimonialReview {
		line-height: 24px;
		position: relative;
		padding-bottom: 25px;
	}
}

// Vela Product Loadmore
.productLoadMore {
    .proLoadMoreButton {
        text-align: center;

    }
    .btnLoadMore {
        display: inline-block;
        border: 2px solid #e1e1e1;
        min-width: 230px;
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        color: #191919;
        padding: 10px 20px;
        @include transition(all 0.3s ease-in);
        &.disableLoadMore {
            cursor: not-allowed;
            @include opacity(0.5);
        }
        &:hover {
            border-color: $vela-color-primary;
            color: $vela-color-primary;
        }
    }
}

//List collections
.velaCollectionsInfo {
    .boxCollectionInner {
        background: #fff;
        text-align: center;
    }
    img {
        width: 100%;
    }
    .blockTitle {
        margin-bottom: 25px;
        font-size: 26px;
    }
    .boxCollectionTitle {
        margin: 0;
        a {
            display: block;
            font-weight: 700;
            font-size: $vela-font-size + 2;
            background: $vela-text-color-secondary;
            color: #fff;
            padding: 15px 10px;
            @include transition(all 0.2s ease-in);
            &:hover {
                background-color: $vela-color-primary;
                color: #fff;
            }
        }
    }
}
@media(min-width: $screen-md) {
    .velaSlideCollection {
        position: relative;
        overflow: hidden;
        .velaCollectionsInfo {
            position: absolute;
            bottom: 30px;
            left: 0;
            width: 100%;
            .blockTitle {
                color: #fff;
                margin-bottom: 30px;
            }
        }
        .boxCollectionTitle {
            a {
                background: #fff;
                color: $vela-text-color-secondary;
            }
        }
        .text_note {
            color: #fff;
        }
    }
}
//Vela HTML One
.velaHTML {
	.velaHTMLInner {
		padding: 25px $vela-gutter-width/2;
	}
	.rte {
		font-size: $font-size-base + 4;
		line-height: 24px;
	}
}

.velaCountdown {
    ul {
        margin: 0;
    }
	li {
		display: inline-block;
		color: #bdbcbc;
		font-size: 13px;
        min-width: 65px;
        text-transform: uppercase;
        border: 2px solid $vela-border-color;
		padding: 15px 10px;
		text-align: center;
		position: relative;
		&:not(:first-child) {
            margin-left: 20px;
		}
	}
	span {
		text-align: center;
        display: block;
        line-height: 18px;
		&.number {
			color: $vela-text-color-secondary;
			font-weight: 500;
			font-size: 18px;
            margin-bottom: 5px;
            padding-bottom: 5px;
            border-bottom: 1px solid #f1f1f1;
		}
	}
}
.countDownTitle {
	color: $vela-color-primary;
	font-size: 16px;
    font-weight: 500;
    margin: 0 0 15px;
}

//velaFlashSale
.velaFlashSale {
    background-position: center center;
    .headingGroup {
        flex-direction: column;
        .velaHomeTitle {
            padding-bottom: 15px;
            font-size: 50px;
            line-height: 56px;
            @media(max-width: $screen-sm) {
                font-size: 40px;
                margin-bottom: 0;
                line-height: 46px;
            }
        }
        .subTitle {
            letter-spacing: 0;
            text-transform: inherit;
            font-size: $vela-font-size;
        }
    }
    .velaCountdown {
        li {
            display: inline-block;
            color: #666;
            font-size: 16px;
            width: auto;
            height: auto;
            margin: 0 15px;
            text-align: center;
            position: relative;
            &:not(:first-child) {
                &:after,
                &:before {
                    display: none;
                }
            }
            @media(max-width: $screen-xs) {
                margin: 0 10px;
            }
        }
        span {
            text-align: center;
            display: block;
            &.number {
                color: $vela-text-color-secondary;
                font-weight: 400;
                font-size: 34px;
                line-height: 110px;
                padding: 0;
                display: block;
                text-align: center;
                margin-bottom: 15px;
                @include size(110px,110px);
                border-radius: 50%;
                color: #fff;
                background: $vela-color-primary;
                @media(max-width: $screen-sm) {
                    @include size(60px,60px);
                    font-size: 20px;
                    line-height: 60px;
                    margin: 0 0 5px;
                }
            }
        }
    }
    .btn {
        border: 2px solid $vela-text-color-secondary;
        color: $vela-text-color-secondary;
        font-size: $vela-font-size;
        font-weight: 700;
        text-transform: uppercase;
        padding: 20px 60px;
        @include transition(all .3s ease-in);
        &:hover {
            color: $vela-color-primary;
            border-color: $vela-color-primary;
        }
    }
    .velaCountdown {
        padding: 0 0 20px;
    }
    .velaFlashSaleInner {
        padding-top: 55px;
        padding-bottom: 60px;
        
    }
}
//velaLogoList
.velaLogoList {
    .velaLogoListInner {
        border-top: $vela-border-main;
        border-bottom: $vela-border-main;
        padding: 35px 0;
    }
    .logoImage {
        img {
           
            @include opacity(1);
            @include transition(all .3s ease-in);
        }
        &:hover {
        	img {
                @include opacity(.3);
            }
        }
    }
}
//productDeals
.productDeals {
    background-position: left center;
    background-repeat: no-repeat;
    @media(min-width: $screen-lg) {
        background-size: cover;
        background-position: right center;
    }
    .productDealsItem {
        padding: 50px 0;
    }
    .proDealItem {
        .proCollection {
            margin-bottom: 5px;
            a {
                color: $vela-text-color-primary;
                &:hover {
                    color: $vela-text-color-secondary;
                }
            }
        }
        .proName {
            margin-bottom: 15px;
            a {
                font-size: 18px;
                font-weight: 500;
                color: $vela-text-color-secondary;
                &:hover {
                    color: $vela-text-color-primary;
                }
            } 
        }
        .proReviews {
            .spr-badge-caption {
                display: none;
            }
        }
        .priceProduct {
            font-size: $vela-font-size + 4;
            font-weight: 700;
            line-height: $vela-font-size + 9;
        }
    }
}
.velanProlist {
    .btnReadMore {
        float: right;
        border-bottom: 1px solid $vela-text-color-primary;;
        color: $vela-text-color-primary;
        &:hover {
            color: $vela-color-primary;
        }
    }
}
.shopify-policy__container {
    padding-top: 60px;
    padding-bottom: 80px;
    .shopify-policy__title {
        margin-top: 0;
        margin-bottom: 30px;
    }
}
//========== RESPONSIVE ==========//
@media (max-width: 991px) {
    .velaLogo {
        text-align: center;
        padding: 0 10px;
        width: 100%;
    } 
}
@media (max-width: 767px) {
    .img-mobile {
        width: 100%;
    }
    .gutter20 {
        .rowFlexMargin,
        .row {
            margin-left: -10px;
            margin-right: -10px;
        }
        [class*="col-"] {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    .template-index {
        .mainContent .shopify-section > div {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
    }
    
    // BLOCK
    .velaHTMLOneImage {
        padding: 30px 0;
        .htmlBoxImage {
            position: relative;
            min-height: 400px;
        }
        img {
            position: absolute;
            top: 0;
            left: 50%;
            max-width: inherit;
            height: 100%;
            @include translate(-50%, 0);
        }
    }

    // Collection page
    .collView {
        display: none;
    }
    .collBoxSort {
        text-align: center;
    }
    .collProductCount {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }
    // Sidebar
    .velaBlogSidebar {
		.titleSidebar{
			position:relative;
			cursor:pointer;
			&:after{
				content:"\f107";
				font-family:$vela-font-icon;
				font-size:$vela-font-size;
				position:absolute;
				top:15px;
				right:10px;
			}
			&.active{
				&:after{
					content:"\f106";
				}
			}
		}
	}

    // Collection list
    .velaCollectionsWrapper {
        padding: 50px 0 30px;
    }
    .velaBoxCollection {
        margin-bottom: 30px;
    }
    //SEARCH PAGE
    .velaSearchContainer {
        padding: 60px 0 30px;
    }
    .articleItemSearchDesc {
        height: 29px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .articleItemSearchImage {
        @include flex(0 0 160px);
    }
    .articleItemSearchContent {
        max-width: calc(100% - 160px);
    }
    .blogBannerSidebar {
        text-align: center;
        > div {
            display: inline-block;
        }
    }
    .blogArticleListing {
        display: block;
        .articleImage {
            width: 100%;
            margin-bottom: 15px;
        }
        .articleContent {
            width: 100%;
        }
    }
    // ARTICLE PAGE
    .velaArticleTitle {
        font-size: $vela-font-size + 10;
        line-height: $vela-font-size + 20;
    }
    .articleExtendImage {
        margin-bottom: 8px;
    }
    .articleExtendNavText {
        margin-bottom: 6px;
    }
    .articleExtendTitle {
        font-size: $vela-font-size + 2;
        line-height: $vela-font-size + 8;
    }
    .articleBoxExtend {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }
    .articleExtend {
        padding-left: -7.5px;
        padding-right: -7.5px;
    }
}
@media (max-width: 479px) {
    body {
        font-size: $vela-font-size - 1;
    }
    //header
    .headerContent {
        margin-left: -10px;
        margin-right: -10px;
        > [class*='col-'] {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    //SEARCH PAGE
    .formSearchPage {
        display: block;
        text-align: center;
    }
    .articleItemSearch {
        display: block;
    }
    .articleItemSearchImage {
        width: 100%;
        margin: 0 0 $vela-gutter-width / 2;
        padding: 0;
        a {
            height: 200px;
        }
    }
    .articleItemSearchContent {
        max-width: 100%;
    }
}



 // 
/* new desighn start*/

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

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

.home_custom_banner {
	position: relative;
}

.home_custom_banner .video_section video {
  width: 100%;
  height: auto;
}

.banner_text {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 100%;
  padding: 0 30px;
  text-align: center;
}


.top_left .banner_text{
  top: 80px;
  text-align: left;
  transform: unset;
}

.top_center .banner_text{
  top: 80px;
  text-align: center;
  transform: unset;
}

.top_right .banner_text{
  top: 80px;
  text-align: right;
  transform: unset;
}

.center_left .banner_text{
  top: 50%;
  text-align: left;
}

.center_center .banner_text{
  top: 50%;
  text-align: center;
}

.center_right .banner_text{
  top: 50%;
  text-align: right;
}

.bottom_left .banner_text{
  top: unset;
  bottom:15px;
  text-align: left;
  transform: unset;
}

.bottom_center .banner_text{
  top: unset;
  bottom:15px;
  text-align: center;
  transform: unset;
}

.bottom_right .banner_text{
  top: unset;
  bottom:15px;
  text-align: right;
  transform: unset;
}

.banner_text h1 {
  color: #fff;
  text-transform: none;
  font-size: 65pt;
  font-weight: normal;
  line-height: 65pt;
  text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.76);
}

.shop_all_banner .banner_text h1{
	font-size: 100pt;
    line-height: 85pt;
}


.promoheader{
    text-align: center;
    padding: 15px 15px;
    font-size: 15pt;
  	line-height: normal;
}

.velaLogo{
	max-width: 150px;
	width: 100%;
}

/* header end*/


.free_shipping_section{
	padding: 30px 0 20px;
  	margin-bottom: 0 !important;
}

.free_shipping_section .velaContent{
	text-align: center;	
}

/* custom btn    */

.btn {
  border-radius: 50px;
  text-decoration: unset;
  transition: 0.3s;
}


.btn_green {
  text-transform: uppercase;
  color: #fff;
  background-color: #093936;
  border: 1px solid #093936;
}

.btn_green:hover,.btn_green:focus {
  color: #093936;
  background-color: #fff;
  border-color: #093936 !important;
}

.reviews_section .rv_slidebox {
    position: relative;
}

/* custom slider end */

.velaFramework .col.mbItemGutter{
	-ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    padding: 0 30px;
  	margin-top: 30px;
}

.col.mbItemGutter .serviceImage{
	height: 100px !important;
}

.free_shipping_section .velaHomeTitle{
  font-size: 25pt;
}

.free_shipping_section .headingGroup .subTitle{
  font-size: 14pt;
}

.velaNewsletterWithSocial .velaNewsletterInner{
	padding: 0;
}
.velaNewsletterWithSocial .velaNewsletterInner .pb20{
	display: none;
}

.velaNewsletter .velaNewsletterWithSocial .velaNewsletterInner .wrap{
	margin: unset;
}

.velaNewsletterWithSocial .social-icons{
	text-align: center;
  	padding-top: 7px;
}

.velaNewsletterWithSocial .social-icons .icon-fallback-text{
	font-size: 24pt;
	display: inline-block;
  	margin: 0 15px;
  	transition: 0.1s;
}

.velaNewsletterWithSocial .social-icons .icon-fallback-text:hover{
	transform: scale(1.1);
}

.velaNewsletterWithSocial{
	margin-top: 50px;
	margin-bottom: 35px;
}

.headerMenu .velaCartTop > a{
	color:#093936;
}

.headerMenu .velaCartTop > a:hover,
.headerMenu .velaCartTop > a:hover .text{
	color:#aafd94;
}

.headerMenu .velaSearchIcon:hover{
	color:#aafd94;
}

.headerMenu .velaCartTop > a .text{
	color:#093936;
}

#launcher{
	left: auto !important;
	right: 0;
}

#webWidget{
	left: auto !important;
	right: 0;
}

.footerCenter .container{
	max-width: 1920px;
}

.footerCenter .footerCenterInner .rowFlex {
	align-items: center;
  	width: 100%;
  	margin-right: 0;
	margin-left: 0;
}


.footer_subscribe .form-group .btnNewsletter.btnVelaOne{
    color: #fff;
    background-color: rgba(9, 57, 54, 1);
  	margin-left: -12px;
  	border-radius: 50px !important;
  	border: 2px solid rgba(9, 57, 54, 1);
}

.footer_subscribe .form-group .btnNewsletter.btnVelaOne:hover{
	color: #093936;
	background-color: transparent;
  	border-color: #093936;
}

.footer_subscribe .form-group .btnNewsletter.btnVelaOne:focus{
  	border-color: #093936;
}

.footer_subscribe .form-group .input-group-btn{
	width: auto;
}

.footer_subscribe .form-group input.form-control{
	border: 2px solid #093936;
    color: #093936;
    background-color: transparent;
  	max-width: 350px;
  	width: 100%;
  	border-radius: 0 !important;
}

.footer_subscribe .form-group input.form-control::placeholder {
  color: #093936;
  opacity: 1;
}

.footer_subscribe .form-group input.form-control:-ms-input-placeholder {
  color: #093936;
}

.footer_subscribe .form-group input.form-control::-ms-input-placeholder {
  color: #093936;
}

.footer_subscribe .btnNewsletter{
	padding: 11px 35px;
}

.footer_subscribe .input-group{
	display: flex;
	align-items: center;
  	justify-content: center;
}

footer .footer-menu{
	padding: 35px 15px;
}

/* how_it_works page start*/
.custom_banner .img_section img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.overview_section_col .section_title{
	font-size: 60pt;
  	margin-bottom: 60px;
}

.overview_row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
}

.overview_row .overview_col_6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 15px;
    box-sizing: border-box;
}

.overview_row .overview_col_right .overview_content {
    max-width: 500px;
    width: 100%;
}

.overview_section_col {
    margin: 60px 0 120px;
}

.overview_section_col .overview_list_item {
    position: relative;
    font-size: 24pt;
    margin-top: 0px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.overview_section_col .overview_list_item:before {
    content: '';
    width: 50px;
    height: 50px;
    display: block;
    background-image: url(user_icon.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.overview_section_col .overview_list_item p {
    font-size: 14pt;
    line-height: 16pt;
}

.overview_section_col .overview_list_item a {
    color: #093936;
    text-decoration: underline;
  	
}

.overview_section_col .overview_list_item .overview_list_title {
    font-size: 24pt;
    margin-top: 0;
    margin-bottom: 15px;
}

.overview_section_col .overview_list_item .overview_list_content {
    width: calc(100% - 50px);
    padding-left: 30px;
}

.text_center {
    text-align: center;
}

.text_right {
    text-align: right;
}

.text_left {
    text-align: left;
}

.overview_section_col .overview_content .btn {
    display: inline-block;
}

.overview_section_col .flex_reverse {
    flex-direction: row-reverse;
}

.overview_section_col .flex_reverse .overview_col_right .overview_content {
    max-width: 600px;
    width: 100%;
    margin-left: auto;
}

.overview_section_col .flex_reverse .overview_col_left{
	padding-right: 0;
}

.overview_section_col .flex_reverse .overview_col_right{
	padding-left: 0;
}

.overview_section_col .flex_reverse .overview_col_right .overview_content p {
    padding-right: 30px;
}

.overview_section_col .overview_img img {
    width: 100%;
}

.unboxing_video_section {
    margin: 30px 0 120px;
  	
}

.unboxing_video_section .unboxing_video img {
    max-width: 100%;
}

#shopify-section-vela-breacrumb-image {
    display: none;
}
.container{
	max-width: 100%;
  	padding: 0;
}
 
#faqs .container{
	max-width: 1410px;
  	padding: 0 15px;
}

.custom_banner {
	position: relative;
}
.footerInfo .infoImage img {
    max-width: 150px;
}

.unboxing_video img {
/*     height: 90vh !important; */
/*     width: auto !important; */
    margin: 0 auto;
    display: block;
}

/* box section design */

.overview_row .overview_col_4 {
    box-sizing: border-box;
    max-width: 33.33%;
    width: 100%;
    padding: 0 30px;
    text-align: center;
  	margin-bottom: 60px;
}

.overview_row .overview_col_3 {
    box-sizing: border-box;
    max-width: 25%;
    width: 100%;
    padding: 0 30px;
    text-align: center;
}

.overview_box a {
    display: inline-block;
}

.overview_box .box_img img {
    max-width: 100%;
}

.overview_box .plant_img img {
    max-width: 100%;
}

.overview_box .step_img img {
    max-width: 100%;
    height: auto;
}

/* how_it_works page end*/

/* shop all page start */
.velaListProlist.collProlist {
	padding: 0 50px;
}

.velaListProlist.collProlist .row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.velaListProlist.collProlist .listTitle{
	font-size: 30pt;
	margin-bottom: 30px;
  	text-align: left;
	border-bottom: 2px solid #093936;
}


.velaListProlist.collProlist .velaContent>.col-sm-12{
  margin-bottom: 100px;
}

.velaListProlist.collProlist .proName{
	font-size: 16pt;
}

.velaListProlist.collProlist .priceProduct{
	font-size: 14pt;
}

.velaListProlist.collProlist .proHInner{
	padding: 15px;
    margin-bottom: 30px;
    border-radius: 15px;
    border-radius: 15px;
    transition: 0.3s;
}

.velaListProlist.collProlist .proHInner:hover{
	box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.velaListProlist.collProlist .proHInner .proHImage img{
	transition: 0.3s;
}

.velaListProlist.collProlist .proHInner:hover .proHImage img{
	transform: scale(1.05);
}

/* shop all page end */


.fancybox-container .velaNewsletterModal .input-group input{
  border: 2px solid #093936;
  color: #093936;
  background-color: transparent;
  max-width: 350px;
  width: 100%;
  border-radius: 0 !important;
}

.fancybox-container .velaNewsletterModal .input-group input::placeholder {
  color: #093936;
  opacity: 1;
}

.fancybox-container .velaNewsletterModal .input-group input:-ms-input-placeholder {
  color: #093936;
}

.fancybox-container .velaNewsletterModal .input-group input::-ms-input-placeholder {
  color: #093936;
}

.fancybox-container .velaNewsletterModal .btnNewsletter{
	margin-left: -12px;
  	padding: 11px 35px;
  	background-color: rgba(9, 57, 54, 1);
  	border: 2px solid rgba(9, 57, 54, 1);
}

.fancybox-container .velaNewsletterModal .btnNewsletter:hover{
	color: #093936;
    background-color: transparent;
  	border-color: #093936;
}

.fancybox-container .velaNewsletterModal .btnNewsletter span{
	transition: 0s;
}

/* Product single page start*/

.proBoxInfo .proAttr.instock{
	color: #093936;
}

.proDetailInfo .tab-content p>span{
	color: #093936 !important;
}

.productBox .proThumbnails .owl-thumblist .thumbItem{
	padding: 0;
  	max-width: 150px;
}

/* Product single page end*/




/* SmallGarden page start*/

.smallgarden_page_section.overview_section_col .overview_list_item::before{
	display:none;
}

.overview_section_col .overview_list{
    padding-left: 80px;
    margin-top: 30px;
  	list-style-type: none;
}

.overview_section_col .overview_list_item .overview_list li{
	font-size: 14pt;
	line-height: 16pt;
  	margin-bottom: 15px;
  	position: relative;
}

.overview_section_col .overview_list_item .overview_list li::before{
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #093936;
    border-radius: 50%;
    top: 9px;
    left: -20px;
}

/* SmallGarden page start*/


/* Faqs page start*/
.custom_drop .panel{
	border: 0;
  	background-color: transparent;
  	border-bottom: 2px solid #EBEBEB; 
}

.custom_drop .panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16pt;
    color: inherit;
}

.custom_drop .panel-title a{
	padding: 20px 0;
  	display: flex;
  	background-color: transparent;
  	transition: 0.5s;
  	border-bottom: 1px solid #093936;
  	color: #093936;
  	padding-left: 0;
  	padding-right: 10px;
    display: flex;
  	align-items: center;
}

.custom_drop .panel-title a.collapsed{
	background-color: transparent;
  	border-color: transparent;
  	display: flex;
}

.custom_drop .panel-collapse{
	padding: 0;
}

.custom_drop .panel-collapse .faq-item--content{
	padding: 30px;
  	padding-left: 0;
}

.faqPageContainer{
	padding-top: 50px;
}

.faqPageContainer .faqPageWrapper{
	padding: 20px 0 60px;
}

.faqPageWrapper .panel + .panel{
	margin-top: 0;
}

.custom_drop .panel-title a .drop_errow_icon{
	margin-left: auto;
    border: 1px solid #093936;
    border-radius: 50%;
    width: 30px;
  	min-width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom_drop .panel-title a .drop_errow_icon svg{
  	height: 12px;
    width: 12px;
	transform: rotate(-90deg);
  	transition: 0.5s;
  	fill: #093936;
}

.custom_drop .panel-title a.collapsed .drop_errow_icon svg{
    transform: rotate(90deg);
}

.custom_drop .panel-title a::before, .custom_drop .panel-title a::after{
	display: none !important;
}

/* Faqs page start*/


/* returns and warranty page start */

.custom-tabs{
	max-width: 1410px;
    padding: 0 15px;
    margin: 50px auto;
}

.custom-tabs .tabs-nav ul {
  margin: 0;
  padding: 0;
}

.custom-tabs .tabs-nav li {
  display: inline-block;
  background: #093936;
  color: #fff;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: #093936;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.custom-tabs .tabs-nav a {
  display: block;
  padding: 15px 20px;
  font-weight: bold;
  color: #fff;
  font-size: 16pt;
}

.custom-tabs .tabs-nav li.active {
  background: #FFF;
  color: #093936;
}

.custom-tabs .tabs-nav li.active a {
  color: inherit;
}
.custom-tabs .tabs-content {
  border: 1px solid #093936;
  padding: 40px 30px;
  background: #FFF;
  margin-top: -1px;
  overflow: hidden;
  border-radius: 10px;
  border-top-left-radius: 0;
}

.custom-tabs .tabs-content IMG {
  margin-right: 10px;
}

.custom-tabs .tabs-content div:not(:first-child) {
  display: none;
}

.custom-tabs .section_title{
  text-align: left;
  margin-bottom: 30px;
}

.custom-tabs .tabs-content ul li{ 
	margin-bottom: 10pt;
}

.custom-tabs .tabs-content p strong{
	margin-top: 30px;
	display: block;
}

/* returns and warranty page end */


#contact-us #pageContent .container{
  	max-width: 1410px;
	padding: 0 15px;
  	text-align: center;
}

.blogArticle .btnBlogReadMore{
	border: 2px solid #093936;
 	border-radius: 50px;
}

.blogArticle .btnBlogReadMore:hover{
	color:#fff;
  	background-color: #093936;
}

.blogArticle .blogTitle a{
	background-color: transparent;
    color: #093936;
    border: 1px solid #093936;
  	border-radius: 30px;
}


/* flickity page start*/

.carousel .flickity-page-dots .dot{
  	width: 20px;	
	height: 20px;
	border: 2px solid transparent;
  	padding: 2px;
    background-color: transparent;
  	opacity: 1;
  	-webkit-transition: all 0.35s ease;
	-o-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

.carousel .flickity-page-dots .dot:before{
  	content:'';
  	width: 10px;
	height: 10px;
	display: inline-block;
	border: 2px solid transparent;
	border-radius: 50%;
  	opacity: 1;
    background: #093936;
    cursor: pointer;
    pointer-events: auto;
  	-webkit-transition: all 0.35s ease;
	-o-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

.carousel .flickity-page-dots{
	position: static;
}

.carousel .flickity-page-dots .dot.is-selected{
   	background: transparent;
	border: 2px solid #093936;
}

.carousel .flickity-page-dots .dot.is-selected:before{
	opacity:0;
}

.right_box_slide_dots .flickity-page-dots{
    position: absolute;
    right: 0;
	bottom: 20px;
  	left: auto;
	width: 50%;
  	padding: 0 30px;
}

/* flickity page end*/



/* New update 11-05-2020 */

 

header{
   // padding-top: 10px; //removed for green nav
   // padding-bottom: 10px; //removed for green nav

}


body #sticky-site-header .sticky-site-header-content{
	min-height: 50px !important;
}

header .main-nav .nav-item a > span{
  	position:relative;
}

header .main-nav .nav-item a > span::before{
  	content:'';
  	position: absolute;
    bottom: -1px;
    width: 0;
    height: 1px;
    background-color: #AAFD94;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
  	left: -5px;
}

header .main-nav .nav-item a:hover > span::before{
	width: calc(100% + 10px);
}

header .main-nav .nav-item a.active > span::before{
	width: calc(100% + 10px);
}

#smart-gardens .absolute-header,
#smallgarden .absolute-header,
#shop-all .absolute-header,
#about-us .absolute-header,
#privacy .absolute-header{
	position: absolute;
    width: 100%;
    left: 0;
  height:60px;
}

header .custom_header  .header-middle.dark-bg{
	box-shadow: unset !important;
}

header #mobile-site-header .header-top .flex-grow{
	flex-grow: unset;
}

header #mobile-site-header .header-middle{
	max-width: 40%;
	width: 100%;	
}

header #mobile-site-header .side_options{
    display: flex;
    flex-wrap: wrap;
  	justify-content: end;
    justify-content: flex-end;
}

#mobile-site-header .header-left,#mobile-site-header .header-right{
	max-width: 30%;
	width: 100%;
}

header .stickylogo{
  	display: none;
}

header .sticky-site-header-content .staticlogo{
	display: none;
}

header .sticky-site-header-content .stickylogo{
  	display: block;
  	max-width: 60px;
}

body #shopify-section-header > header .header-4.custom_header .main-nav > .nav-horizontal > .nav-item > .nav-link{
	padding-bottom: 0 !important;
	padding-top: 29px !important;
}

body #shopify-section-header > header .main-nav > .nav-horizontal > .nav-item > .nav-link{
    padding-bottom: 0 !important;
}

.velaListProlist.collProlist .proHInner .proHImage img{
	max-width: 100%;
}

.velaListProlist.collProlist .proHInner .proHImage{
	text-align: center;
  	overflow: hidden;
  	margin-bottom:10px;
  	padding-bottom:10px;
}


.velaListProlist.collProlist .proName{
	margin-bottom: 5pt;
}

.velaListProlist.collProlist .velaContent > .col-xs-12{
	margin-bottom: 100px;
}

body #shopify-section-header > header .header-top.dark-bg{
	box-shadow: unset !important;
}

#mobile-site-header .header-middle{
	background: transparent !important;
	box-shadow: unset !important;
}

#mobile-site-header .header-top>.container-fluid{
	padding-left: 15px;
	padding-right: 15px;
}
#mobile-site-header .header-middle .py-6{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

header .mobilelogo{
	display:none;
}

.newsletter-container{
	max-width: 408px !important;
}

.newsletter-container .needsclick{
  	padding: 0px !important;
}

.newsletter-container .needsclick input{
	border: 2px solid #093936 !important;
    color: #093936 !important;
    background-color: transparent !important;
    max-width: 350px !important;
    width: 100% !important;
    border-radius: 0 !important;
    height: 35.5pt !important;
  	padding: 9px 20px !important;
  	font-size: 14pt !important;
}

.newsletter-container .needsclick input::placeholder {
  color: #093936 !important;
  font-size: 14pt !important;
  line-height: 18pt !important;
  opacity: 1;
}

.newsletter-container .needsclick input:-ms-input-placeholder {
  color: #093936 !important;
  font-size: 14pt !important;
  line-height: 18pt !important;
}

.newsletter-container .needsclick input::-ms-input-placeholder {
  color: #093936 !important;
  font-size: 14pt !important;
  line-height: 18pt !important;
}

.newsletter-container button.needsclick{
	color: #fff !important;
    background-color: rgba(9,57,54,1) !important;
    margin-left: -12px !important;
    border-radius: 50px !important;
    border: 2px solid rgba(9,57,54,1) !important;
    padding: 14px 35px !important;
    -webkit-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.newsletter-container button.needsclick:hover{
    color: #093936 !important;
    background-color: transparent !important;
    border-color: #093936 !important;
}

.carousel-header .flickity-prev-next-button.small svg{
	display: none !important;
}


.arrows-adaptive .flickity-prev-next-button::before {
	content: '';
	width: 10px;
	height: 10px;
	display: inline-block;
	border: 2px solid transparent;
	border-radius: 50%;
	opacity: 1;
	background: #093936;
	cursor: pointer;
	pointer-events: auto;
	-webkit-transition: all 0.35s ease;
	-o-transition: all 0.35s ease;
	transition: all 0.35s ease;
}

.arrows-adaptive .flickity-prev-next-button{
	border-radius: 50%;
  	width: 20px;
	height: 20px;
	border: 2px solid transparent;
	padding: 2px;
	background-color: transparent;
	opacity: 1;
	-webkit-transition: all 0.35s ease;
	-o-transition: all 0.35s ease;
	transition: all 0.35s ease;
	border-radius: 50%;
	margin-right: 12px;
	margin: 0 8px;
}

.arrows-adaptive .flickity-prev-next-button.active {
	background: transparent;
	border: 2px solid #093936 !important;
	
}

.arrows-adaptive .flickity-prev-next-button.active::before{
	display:none;
}

.icon-heart::before {
	content: "\ec38";
}

.velaListProlist.collProlist .velaContent .clearfix{
	margin-bottom: 100px;
}



/* custon tabbing */

/* .custom-tabs{
	max-width: 1410px;
    padding: 0 15px;
    margin: 50px auto;
}

.custom-tabs ul.nav-tabs {
  margin: 0;
  padding: 0;
}

.custom-tabs .nav-tabs li {
  display: inline-block;
  background: #093936;
  color: #fff;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: #093936;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.custom-tabs .nav-tabs a {
	display: block;
	padding: 15px 20px !important;
	font-weight: bold !important;
	font-size: 16pt;
	line-height: normal !important;
  	border-bottom-color: #fff !important;
}

.light-bg .custom-tabs .nav-tabs a:hover{
	color: inherit !important;
}

.light-bg .custom-tabs .nav-tabs a {
	color: #fff !important;
}

.custom-tabs .nav-tabs li.active {
  background: #FFF;
  color: #093936;
}

.custom-tabs .nav-tabs li.active a {
  color: #093936 !important;
}
.custom-tabs .tab-content {
  border: 1px solid #093936;
  padding: 40px 30px;
  background: #FFF;
  margin-top: -1px;
  overflow: hidden;
  border-radius: 10px;
  border-top-left-radius: 0;
}

.custom-tabs .tab-content IMG {
  margin-right: 10px;
}

.custom-tabs .tab-content div:not(:first-child) {
  display: none;
}

.custom-tabs .nav-tabs .nav-item + .nav-item{
	margin-left: 10px;
}

.custom-tabs .section_title{
  text-align: left;
  margin-bottom: 30px;
}

.custom-tabs .tab-content ul li{ 
	margin-bottom: 10pt;
}

.custom-tabs .tab-content p strong{
	margin-top: 30px;
	display: block;
}
 */

/* custon tabbing End */

.lightbox{
	z-index: 9999 !important;
}

.product-single .product-image .img-fluid .thumbs img{
	min-height: 200px;
	object-fit: contain;
}

body js-sticky-header.ready, body [js-sticky-header].ready{
	display: block !important;
}

.mobile_br br{
	display: none;
}

footer .social-links .icon{
	font-size: 30px;
}

/* New update 11-05-2020 end*/



@media only screen and (max-width: 1600px){
  .velaServices .boxServiceDesc{
  	font-size: 12pt;
  }
  .velaFramework .col.mbItemGutter{
  	padding: 0 15px;
  }
}

@media only screen and (max-width: 1499px){
  .overview_box .box_img img {
    max-width: 200px;
    width: 100%;
  }
}


@media only screen and (max-width: 1199px){
  .velaMegamenu .nav > li > a{
  	font-size: 14pt;
    padding: 15px 10px;
    padding-bottom: 0;
  }
  .banner_text h1,.shop_all_banner .banner_text h1{
  	font-size: 40pt;
    margin: 0;
  }
  .promoheader{
  	padding: 10px 15px;
	font-size: 13pt;
  }
  .velaFramework .col.mbItemGutter{
  	-ms-flex: 0 0 33.33%;
    flex: 0 0 33.33%;
    max-width: 33.33%;
    padding: 0 15px;
    margin-top: 0;
    margin-bottom: 20px;
  }
  .velaFramework .mbBlockGutter .rowFlex{
  	justify-content: center;
  }
  .col.mbItemGutter .serviceImage{
  	height: 80px !important;
  }
  .velaServices .boxServiceImage{
  	margin-bottom: 10px;
  }
  .free_shipping_section .velaHomeTitle{
  	font-size: 20pt;
  }
  .free_shipping_section .headingGroup .subTitle{
  	font-size: 12pt;
  }
  .free_shipping_section .headingGroup{
  	padding-bottom: 10px !important;
  }
  .btn{
  	font-size: 12pt;
  }
  .section_title{
  	font-size: 20pt;
  }
  .overview_section_col .overview_list_item .overview_list_title {
    font-size: 20pt;
  }
  .overview_section_col .overview_list_item p {
    font-size: 12pt;
    line-height: normal;
  }
  .overview_section_col .section_title{
  	font-size: 40pt;
	margin-bottom: 40px;
  }
  .overview_row .overview_col_4,
  .overview_row .overview_col_3 {
    padding: 0 15px;
  }
  .velaListProlist.collProlist .proName{
  	font-size: 16pt;
  }
  .velaListProlist.collProlist .priceProduct{
  	font-size: 12pt;
  }
  .velaListProlist.collProlist .listTitle{
    font-size: 25pt;
	margin-bottom: 40px;
  }
  .overview_section_col .overview_list_item .overview_list li{
	font-size: 12pt;
	line-height: normal;
  	margin-bottom: 10px;
  }
  footer .footer-menu{
  	flex-basis: unset ;
    padding: 0 15px;
  }
}

@media only screen and (max-width: 991px){
  .banner_text h1,.shop_all_banner .banner_text h1{
    font-size: 35pt;
  	line-height: normal;
  }
  .promoheader{
  	font-size: 10pt;
  }
  .banner_text{
  	top: 55%;
    padding: 0 15px;
  }
  .velaServices .velaServicesInner .mbItemGutter:not(:last-child)::before{
  	display: none !important;
  }
  .free_shipping_section .velaHomeTitle{
  	font-size: 18pt;
    line-height: normal;
  }
  .free_shipping_section .headingGroup .subTitle{
    line-height: normal;
  }
  .section_title{
  	font-size: 18pt;
  }
  .overview_section_col .overview_list_item .overview_list_content {
    padding-left: 15px;
  }
  .overview_section_col .flex_reverse .overview_col_right .overview_content p {
    padding-right: 0;
  }
  .overview_section_col .overview_list_item .overview_list_title {
    font-size: 18pt;
  }
  .overview_row .overview_col_3 {
    max-width: 50%;
    margin-bottom: 30px;
  }
  .velaListProlist.collProlist .proName{
  	font-size: 14pt;
  }
  .velaListProlist.collProlist .velaContent > .col-sm-12{
  	margin-bottom: 50px;
  }
  
  .velaListProlist.collProlist .velaContent > .col-xs-12{
  	margin-bottom: 50px;
  }
  
  .velaListProlist.collProlist{
  	padding: 0 15px;
  }
  .smallgarden_page_section.overview_section_col .overview_list_item .overview_list_content{
    padding-left: 0;
  }
  .smallgarden_page_section.overview_section_col .overview_list{
  	padding-left: 20px;
  }
  .custom_drop .panel-title a{
  	font-size: 14pt;
    padding: 15px 0;
  }
  .custom_drop .panel-collapse .faq-item--content{
  	font-size: 12pt;
    padding: 15px 0px;
  }
  .right_box_slide_dots .flickity-page-dots{
    position: static;
    width: 100%;
  	padding: 15px 15px 30px;
  }
  .velaListProlist.collProlist .velaContent .clearfix{
	margin-bottom: 50px;
  }
  body #shopify-section-footer > footer .footer-menu .nav-horizontal .nav-item .nav-link.py-6{
  	padding: 0.75em !important;
  }
}

@media only screen and (max-width: 959px){
  header .sticky-site-header-content .staticlogo,header .sticky-site-header-content .stickylogo,header .staticlogo{
  	display: none;
  }
  header .mobilelogostatic {
    display: block;
  }
  header .sticky-site-header-content .mobilelogostatic,header .mobilelogosticky{
  	display: none;
  }
  header .sticky-site-header-content .mobilelogosticky{
  	display: block;
  }
  body js-sticky-header.ready, body [js-sticky-header].ready{
	display: none !important;
  }
  .mobile_br br{
	display: block;
  }	
}

@media only screen and (max-width: 767px){
  .banner_text h1,.shop_all_banner .banner_text h1{
    font-size: 30pt;
  }
  .velaFramework .col.mbItemGutter{
  	-ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 0;
  }
  .velaServices .boxServiceDesc{
  	font-size: 10pt;
	line-height: normal;
  }
  .velaServices .boxServiceImage{
  	height: 80px;
    margin-bottom: 0;
    padding-bottom: 15px;
  }
  .reviews_section .flipster-carousel .flip-items{
  	max-width: 65%;
	width: 100% !important;
  }
  .velaNewsletterWithSocial .social-icons{
	margin-top: 15px;
  }
  .velaNewsletter .velaNewsletterInner .wrap{
  	max-width: 100%;
  }
  .velaNewsletterWithSocial .input-group{
  	justify-content: center;
  } 
  .velaNewsletterWithSocial .social-icons .icon-fallback-text{
  	font-size: 20pt;
  }
  .velaNewsletterWithSocial .form-group input.form-control{
    font-size: 10pt;
  }
  .velaNewsletterWithSocial .social-icons{
  	padding-top: 0;
  }
  .overview_section_col .overview_list_item p {
    font-size: 10pt;
  }
  .overview_row .overview_col_6 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px;
  }
  .overview_row .overview_col_right .overview_content {
    margin: 0 auto;
    padding: 25px 0;
  }
  .overview_section_col {
    margin: 40px 0;
  }
  .overview_section_col .section_title{
  	font-size: 30pt;
  }
  .overview_box .box_img img {
    max-width: 150px;
  }
  .overview_section_col .flex_reverse .overview_col_left{
      padding-right: 15px;
  }

  .overview_section_col .flex_reverse .overview_col_right{
      padding-left: 15px;
  }
  .velaListProlist.collProlist .listTitle{
  	font-size: 20pt;
  }
  .velaListProlist.collProlist .priceProduct{
  	font-size: 10pt;
  }
  .footer_subscribe .form-group input.form-control{
    font-size: 10pt;
    padding: 9px 10px;
  }
  .footer_subscribe .btnNewsletter {
	font-size: 10pt;
  }
  .text_right,.text_left{
    text-align: center;
  }
  .custom-tabs .tab-content{
  	padding: 30px 15px;
  }
  .custom-tabs .tab-content{
  	font-size: 12pt;
  }
  .custom-tabs .nav-tabs a{
  	font-size: 14pt;
    padding: 10px 15px;
  }
  footer .container-fluid{
  	padding-left: 15px;
	padding-right: 15px;
  }
  .newsletter-container .needsclick input{
  	font-size: 10pt !important;
    height: 30.6pt !important;
    padding: 7px 10px !important;
    padding-right: 0 !important;
  }

  .newsletter-container .needsclick input::placeholder {
   	font-size: 10pt !important;
    line-height: 14pt !important;
  }

  .newsletter-container .needsclick input:-ms-input-placeholder {
    font-size: 10pt !important;
    line-height: 14pt !important;
  }

  .newsletter-container .needsclick input::-ms-input-placeholder {
    font-size: 10pt !important;
    line-height: 14pt !important;
  }
  .newsletter-container button.needsclick{
  	padding: 12px 20px !important;
    font-size: 10pt !important;
  }
  .product-single .product-image .img-fluid .thumbs img {
	min-height: 170px;
  }
}

@media only screen and (max-width: 599px){
  .velaListProlist.collProlist .proHInner .proContent{
  	text-align: center;
  }
}

@media only screen and (max-width: 575px){
  .banner_text h1,.shop_all_banner .banner_text h1{
    font-size: 20pt;
    margin-bottom: 0;
    margin-top: 0;
  }
  .home_custom_banner .video_section video{
  	min-height: 220px;
	object-fit: cover;
  }
  .velaFramework .col.mbItemGutter{
  	-ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-bottom: 15px;
  }
  .free_shipping_section .velaHomeTitle,
  .section_title{
  	font-size: 15pt;
  }
  .free_shipping_section .velaHTML .velaHTMLInner{
  	padding: 25px 0;
  }
  .flip-item img{
  	max-height: 320px;	
  }
  .reviews_section .flipster-carousel{
  	margin-bottom: 20px;
	margin-top: 20px;
  }
  .reviews_section .flipster{
  	overflow-y: hidden;
  }
  .reviews_section .section_title{
  	margin-bottom: 5px;
  }
  .velaNewsletter .btnNewsletter{
  	font-size: 10pt;
    
  }
  .footer_subscribe .btnNewsletter{
  	padding: 11px 15px;
  }
  .velaNewsletterWithSocial .form-group input.form-control{
  	max-width: unset;
	width: calc(100% - 95px);
  }
  .overview_section_col .overview_list_item .overview_list_title {
    font-size: 15pt;
  }
  .overview_section_col .section_title{
  	font-size: 24pt;
	margin-bottom: 30px;
  }
  .overview_row .overview_col_3 {
    max-width: 100%;
  }
  .overview_row .overview_col_4 {
    max-width: 100%;
    margin-bottom: 15px;
  }
  .overview_row .overview_col_4 .box_img {
    margin-bottom: 15px;
  }
  .overview_box .step_img img {
    max-width: 300px;
  }
  .overview_box .plant_img img {
    max-width: 150px;
  }
  .velaListProlist.collProlist .listTitle{
	margin-bottom: 30px;
  }
  .velaListProlist.collProlist .proName{
  	font-size: 13pt;
  }
  .top_left .banner_text,.top_center .banner_text,.top_right .banner_text{
  	top: 65px;
  }
  .custom_banner{
  	height: 250px;
  }
  .custom_banner .img_section{
  	height: 100%;
  }
  .custom_banner .img_section img{
  	width: auto;
	height: 100%;
  }
  .custom_banner .banner_text{
  	top: 60%;
  }
  .overview_section_col .overview_list_item .overview_list li{
  	font-size: 10pt;
  }
  .custom_drop .panel-title a{
  	font-size: 12pt;
  }
  .custom_drop .panel-collapse .faq-item--content{
  	font-size: 10pt;
  }
  .custom-tabs .tab-content{
  	font-size: 10pt;
    padding-bottom: 20px;
  }
  .custom-tabs .tab-content ul{
  	padding-left: 15px;
  }
  .returns-and-warranty-tabs.container-fluid{
  	padding-left: 0;
	padding-right: 0;
  }
  .custom-tabs .nav-tabs a{
  	font-size: 12pt;
    line-height: 24pt !important;
  }
  .product-single .product-image .img-fluid .thumbs img {
	min-height: 130px;
  }
}

@media only screen and (max-width: 420px){
  .product-single .product-image .img-fluid .thumbs img {
      min-height: 80px;
  }
}

/* new desighn end*/

.velaListProlist.collProlist.mbBlockGutter {
	margin-top: 35px;
}
@media only screen and (max-width: 575px){
  #shopify-section-product-template #rc_container {
      text-align: left;
  }
}