/*
 * Title:   Responsive Style File
 * Author:  http://themeforest.net/user/Kite-Themes
 */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[Table of contents]

1. Styles for devices(<=1300px)
2. Styles for devices(>=1200px)
3. Styles for devices(<=1199px)
4. Styles for devices(<=991px )
5. Styles for devices(>=768px and <= 991px)
6. Styles for devices(<=767px )
7. Styles for devices(>=481px and <= 767px)
8. Styles for devices(<=480px )
9. Styles for devices(<=320px )
*/

/* -------------------------------------------------------------
  Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library
  By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets
------------------------------------------------------------- */


////
/// @author Matthieu Aussaguel
/// @group sass-css3-mixins
////


/// Adds a browser prefix to the property
/// @param {*} $property Property
/// @param {*} $value Value

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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

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

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


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

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

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


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

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


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

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


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

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


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

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


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

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

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

  @include border-radius( $radius );
}


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

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


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

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


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

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


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

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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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

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

@mixin transition($properties...) {

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

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


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

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

  @include border-radius($radius);

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


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

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


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

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



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

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


/// Calc
@mixin calc($property, $expression) {
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

/// Calc
@mixin FontAwesome($key) {
  font-family: FontAwesome;
  content: "#{$key}";
  font-style: normal;
  font-weight: normal;
}


/** Variable **/ 
////[Table of contents]

////1. Fonts
////2. Color
////3. Header height
////4. Hamburger


//// 1. Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

$font-stack: 'Karla', arial, sans-serif;
$heading-font: 'Roboto Slab', serif;
$button-text: 'Karla', sans-serif;
$second-font: 'Montserrat', sans-serif;
$three-font: 'Crete Round', serif;
$four-font: 'Vollkorn', serif;


//// 2. Color codes ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

$primary-color: #000000;
$primary-light-color: lighten($primary-color, 20%);

$text: #3b3e43;

$gray-bg: #f6f6f6;
$gray-text: #999999;
$gray-darker: #666666;
$orange : #ed8b5c;
$border-color: #ebebeb;


//// 3. Header height ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

$topbar-height: 57px;
$navbar-height: 102px;
$navbar-height-mobile: 80px;
$navbar-height-sticky: 60px;


//// 4. Hamburger ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
$hamburger-heighticon: 12px;
$hamburger-widthline: 20px;
$hamburger-heightline: 2px;

$hamburger-transition-time: 0.4s;
$hamburger-rotation: 45deg;
$hamburger-translateY: ($hamburger-heighticon / 2);
$hamburger-translateX: 0;

/* ~~~~~~~~~~~~~~~~~~~~~~ Begin theme css ~~~~~~~~~~~~~~~~~~~~~~~~~



/* 1. Styles for devices(<=1300px) */
@media (max-width: 1300px) {
  #footer-area{
    .footer-area-inner{
      padding: 55px 40px 40px;
    }
    .footer-area-right{
      padding: 50px 45px;
    }
  }
}

/* 5. Styles for devices(>=1200px) */
@media (min-width: 1200px) {
  .side-bar{
    .widget-container{
      margin-right: 25px;
    }
    &.side-bar-right{
      .widget-container{
        margin-left: 25px;
        margin-right: 0;
      }
    }
  }

  .product-main{
    .product-detail-thumbarea{
      padding-right: 45px;
    }

    &.style3{
      .product-detail-thumbarea {
        margin-right: 45px;
      }
    }

  }
  .product-content{
    .cd-item-wrapper{
      li{
        cursor: pointer;
        &.focus-on-left{
          @include transform(translateX(3%) scale(1));
          &.move-right {
            @include transform(translateX(75%) scale(0.5));
          }
        }
        &.focus-on-right{
          @include transform(translateX(-3%) scale(1));
          &.move-left {
            @include transform(translateX(-75%) scale(0.5));
          }
        }
        &.hover {
          &.move-left {
            @include transform(translateX(-70%) scale(0.65));
          }
          &.move-right {
            @include transform(translateX(70%) scale(0.65));
          }
        }
      }
    }
  }

}


/* 8. Styles for devices(<=1199px) */
@media (max-width: 1199px) {

  .sticky-placeholder,
  .topbar{
    display: none;
  }

  #header{
    .header-full-center{
      &.navigation-center {
        .branding {
          position: static;
          text-align: center;
          float: none;
          display: block;
        }
      }
      .navbar-container{
        padding: 0 15px;
      }
    }

  }

  .navbar-container{
    .is-sticky{
      position: static!important;
    }

    .navbar-container-inner{
      height: $navbar-height-mobile;
      line-height: $navbar-height-mobile;
    }
    .main-nav{
      display: none;

    }
    .branding h1{
      line-height: $navbar-height-mobile;
      font-size: 20px;
    }
  }

  .mobile-tool{
    display: block;
  }


  .products {
    &.products-multi-masonry {
      .product {
        .product-details{
          display: none;
        }
      }
    }
  }


  .product-main{
    form.cart{
      .cart-tool{
        clear: both;
        float: none;
        padding-top: 20px;
        > a{
          &:first-child{
            margin-left: 0;
          }
        }
      }
    }

    .product-shareit{
      .social_icons{
        li{
          width: auto;
          a{
            padding: 15px 25px;
            span{
              display: none;
            }
            i{
              display: inline;
            }
          }
        }
      }
    }

    &.style2{
      .product-detail-wrap{
        padding: 40px 0;
      }
    }

  }
  
  .single-post{
    .share-it{
      .social_icons{
        li{
          a{
            padding: 15px 25px;
            span{
              display: none;
            }
            i{
              display: block;
            }
          }
        }
      }
    }
  }

  .themedev-product-popup{
    max-width: 485px;
    .product-main{
      .product-detail-images{
        max-width: 485px;
      }
    }

    &.animate-width{
      max-width: 970px;
      .product-detail-images{
      }
    }

    &.add-content{
      max-width: 970px;
    }

  }
}

/* 4. Styles for devices(<=991px ) */
@media (max-width: 991px) {

  .page-section{
    background-attachment: inherit;
  }

  .product-main{
    &.style2,
    &.style3{
      .product-detail-wrap{
        max-width: none;
        padding: 40px 15px;
      }
    }
  }

  .page-header{
    text-align: center;
    .text-right{
      text-align: center !important;
    }
  }

  .products-tools{
    .products-sortby{
      .select-icon{
        margin-right: 15px;
        &:last-child{
          margin-right: 0;
        }
      }
    }
    .result-count{
      display: none;
    }
    .grid-list{
      margin-right: 0;
    }
  }

  .themedev-product-popup{
    max-width: none;
    margin: 10px;
    .product-main{
      .product-details-info,
      .product-detail-images{
        max-width: none;
        float: none;
        width: auto;
        position: static;
      }
    }

    &.animate-width{
      max-width: none;
      float: none;
      width: auto;
    }

    .close-quickview{
      display: none;
      &.mobile-version{
        display: block;
      }
    }

  }

  .cart-collaterals{
    .shipping_calculator{
      button{
        margin-top: 15px;
      }
    }
  }

  #popup-wrap{
    .mfp-close{
      left: auto;
      right: 0;
    }
  }

  .products{
    &.lists{
      .product{
        .product-content{
          margin-right: 30px;
        }
        h3.product-title{
          margin-top: 0;
        }
      }
    }
  }

}

/* 5. Styles for devices(>=768px and <= 991px) */
@media (min-width: 768px) and (max-width: 991px) {

}

/* 6. Styles for devices(<=767px ) */
@media (max-width: 767px) {

  .products {
    &.products-multi-masonry {
      .product {
        width: 50%;
        .product-thumbnail{
          height: auto!important;
        }
      }
    }
  }

  .product-list-widget{
    .product-title{
      margin-top: 30px;
    }
  }

  .kt_callout{
    .kt-col{
      display: block;
      padding: 0 0 20px;
      text-align: center!important;
      width: 100%;
    }
  }
 
  form.checkout {
   .coupon_wrap{
    .coupon-form{
      padding: 0;
      input.submit{
        position: static;
        margin-top: 10px;
      }
    } 
   } 
  }

  .table-responsive{
    border-color: #f0f0f0;
  }

  .woocommerce-tabs{
    .nav{
      padding: 0;
      li{
        width: 100%;
        margin: 0;
        padding: 15px 0;
        border-top: 2px solid #e3e3e3;
      }
    }
    .shop_attributes{
      width: 100%;
    }
  }

  .side-bar {
    margin-top: 50px;
  }

  .about-left{
    margin-left: 0;
  }

  #popup-wrap{
    .wrapper-newletter-popup{
      padding-left: 200px;
      .bg-popup{
        width: 200px;
      }
    }
  }


  .products{
    &.lists{
      .product{
        text-align: center;
        .product-content{
          max-width: 100%;
          width: 100%;
          margin: 0 0 30px;
          img{
            width: 100%;
          }
        }
        .product-attribute{
          margin: 0;
        }
      }
    }
  }

}

/* 7. Styles for devices(>=481px and <= 767px) */
@media (min-width: 481px) and (max-width: 767px) {

}

/* 8. Styles for devices(<=480px ) */
@media (max-width: 480px) {
  .products {
    .product {
      width: 100%!important;
    }
  }

  .product-list-widget{
    .product-widget{
      width: 100%;
    }
  }

  .product-main{
    .product-price-wrap{
      .review-summary{
        clear: both;
        display: block;
        float: none;
        margin: 0;
        padding-top: 10px;
      }
    }
    form.cart{
      .quantity{
        input{
          float: none;
          margin-bottom: 20px;
        }
      }
    }
  }

  .products-tools{
    .products-sortby{
      .select-icon{
        margin-right: 10px;
        &:last-child{
          margin-right: 0;
        }
      }
    }
    .grid-list{
      display: none;
    }
  }

  .collection-wrapper{
    margin: 30px 0;
    .left-collection,
    .right-collection{
      margin-bottom: 15px;
      position: static;
      width: auto;
    }

    .front-collection{
      margin: 0;
    }

    .collection-image{
      margin-bottom: 30px;
    }
    .collection-content{
      width: auto;
    }
  }



  .category-banner{
    .category-banner-content{
      h1{
        font-size: 30px;
        margin-bottom: 30px;
      }
    }
    &:hover {
      ul{
        margin-bottom: 30px;
      }
    }
  }

  .kt-tab-container .tabs li{
    width: 100%;
    margin: 0;
  }

  #popup-wrap{
    .wrapper-newletter-popup{
      padding: 20px;
      .bg-popup{
        display: none;
      }
    }
  }

  .banner{
    .banner-content{
      padding: 30px 35px;
    }
  }

  form.checkout {
   .coupon_wrap{
    .coupon-form{
      input.submit{
        width: 100%;
      }
    } 
   } 
  }
  .cart-collaterals{
    .cart-collaterals-inner{
      button.btn-medium{
        width: 100%;
      }
    }
  }

  #review_form{
    .comment-form-rating,.form-submit{
      display: block;
      margin-right: 0;
      margin-left: 0;
    }
    .comment-form-rating{
      .stars{
        width: 100%;
      }
    }
    .form-submit{
      input{
        width: 100%;
      }
    }
  }

}

/* 9. Styles for devices(<=320px ) */
@media (max-width: 320px) {

}