/** Shopify CDN: Minification failed

Line 16:0 Comments in CSS use "/* ... */" instead of "//"
Line 22:0 Comments in CSS use "/* ... */" instead of "//"
Line 35:0 Comments in CSS use "/* ... */" instead of "//"
Line 43:0 Comments in CSS use "/* ... */" instead of "//"
Line 44:0 Comments in CSS use "/* ... */" instead of "//"
Line 45:0 Comments in CSS use "/* ... */" instead of "//"
Line 47:0 Comments in CSS use "/* ... */" instead of "//"
Line 56:0 Comments in CSS use "/* ... */" instead of "//"
Line 57:0 Comments in CSS use "/* ... */" instead of "//"
Line 58:0 Comments in CSS use "/* ... */" instead of "//"
... and 23 more hidden warnings

**/
//Variables
$base-font-family: 'Poppins', sans-serif;
$secondary-font-family: 'Poppins', sans-serif;
$sports-font: 'SF Sports Night NS';


//colors
$cart-count-bg: #dd3f18;
$logo-base-color: #d84021;
$Robins-egg-blue-color: #00bfbe;
$lighter-color: #707070;
$color__main: #444;
$color__active: grey;
$background__active: #eee;
$blackish: #010101;
$width__tabs-side: 150px;
$breakpoint: 800px;
$highlight-color: #1792e6;
$lighter-highlight: #d9d4d4;
//colors


$default-transition: all 550ms ease;
$transition-normal-slow: all 800ms ease;
$transition-ease-in-out: all 500ms ease-in-out;


//===========================================
// -Mixins start
//===========================================

// conver px to rem
@function rem($pixels, $context: 16) {
  @return ($pixels / $context) * 1rem;
}

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

// Responsive Units
// @properties : css properties i.e font-size
// @min-vw : start point from where font size start increasing
// @max-vw : end point from where font size stop increasing
// @min-value : min value of css property i.e min font-size
// @max-value : max value of css property i.e max font-size
@mixin res-unit($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
    #{$property}: $min-value;
  }

  @media (min-width: $min-vw) {
    @each $property in $properties {
      #{$property}: calc(
        #{$min-value} +
          #{strip-units($max-value - $min-value)} *
          ((100vw - #{$min-vw}) /
          #{strip-units($max-vw - $min-vw)})
      );
    }
  }

  @media (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}


// Media Query
@mixin mq($breakpoint, $type: min) {
  // Checking $breakpoint value in $grid-breakpoints object value
  @if map_has_key($grid-breakpoints, $breakpoint) {
    // getting $grid-breakpoints object value and asign width
    $width: map_get($grid-breakpoints, $breakpoint);

    // Decrease 1px from $grid-breakpoints value for max-width $type
    @if $type==max {
      $width: $width - 1px;
    }

    // Print Media query
    @media (#{$type}-width: $width) {
      @content;
    }
  }
}


@mixin mq-only($min-width, $max-width) {
  @if map_has_key($grid-breakpoints, $min-width) and
    map_has_key($grid-breakpoints, $max-width)
  {
    // define value to relevant$grid-breakpoints
    $min-width: map_get($grid-breakpoints, $min-width);
    $max-width: map_get($grid-breakpoints, $max-width) - 1px;

    @media (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  } @else {
    @error "Please Define correct media query breakpoint";
  }
}

@mixin placeholder {
    &::-webkit-input-placeholder {@content}
    &:-moz-placeholder           {@content}
    &::-moz-placeholder          {@content}
    &:-ms-input-placeholder      {@content}  
}

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

/* Global */
.row {
  display: flex;
}

.row-column {
  display: flex;
  flex-direction: column;
}

.one-half {
  @media screen and (min-width: 992px) {
  	max-width: 50%;
    flex-basis: 50%;
  }
}

%flex-center {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

%container {
  max-width: 1800px;
  margin: auto;
}


.target-title-description,
.target-description-with-left-title {
  h2,
  h1,
  h3 {
    font-family: $secondary-font-family;
    @include res-unit(font-size, 320px, 1920px, 30px, 40px);
    font-weight: normal;
    line-height: 1.5;
    text-align: center;
    color: black;
    margin: rem(20) 0 rem(20);
    strong {
      font-weight: normal;
    }
  }
  p {
    @include res-unit(font-size, 320px, 1680px, 18px, 16px);
    line-height: 24px;
    font-family: $base-font-family;
    color: $lighter-color;
    @media screen and (max-width: 576px) {
      padding: 0 20px;
    }
  }
}
.target-description-with-left-title {
  h2,
  h1,
  h3 {
    text-align: left;
    @media screen and (max-width: 576px) {
      text-align: center;
    }
    span {
      text-decoration: none!important;
    }
  }
}
.target-description {
  h2,
  h1,
  h3 {
    font-family: $secondary-font-family;
    @include res-unit(font-size, 320px, 1920px, 20px, 30px);
    font-weight: normal;
    line-height: 1.5;
    text-align: center;
    color: black;
    margin: rem(20) 0 rem(20);
    strong {
      font-weight: normal;
    }
  }
  p,
  li {
    @include res-unit(font-size, 320px, 1680px, 18px, 16px);
    line-height: 28px;
    font-family: $base-font-family;
    color: $lighter-color;
    @media screen and (max-width: 576px) {
      padding: 0 20px;
    }
  }
  .image-wrapper {
  	text-align: center;
  }
}

.belogs-watermark {
  position: relative;
  &:before {
    content: '#bembel';
    opacity: 0.05;
    font-family: $secondary-font-family;
    @include res-unit(font-size, 320px, 1920px, 40px, 230px);
    font-weight: bold;
    line-height: 1.5;
    color: black;
    position: absolute;
    left: 0;
    right: 0;
    @include res-unit(top, 320px, 1920px, 10px, -80px);
    text-align: center;
    z-index: -1;
  }
}
.single-article-title {
  position: relative;
  padding: 0 300px;
  @media screen and (max-width: 1680px) {
    padding: 0 150px;
  }
  @media screen and (max-width: 767px) {
    padding: 0 75px;
  }
  @media screen and (max-width: 576px) {
    padding: 0 25px;
  }
}
.watermark-title {
  &:before {
    content: '#bembel';
    opacity: 0.05;
    font-family: $secondary-font-family;
    @include res-unit(font-size, 320px, 1920px, 40px, 230px);
    font-weight: bold;
    line-height: 1.5;
    color: black;
    position: absolute;
    left: 0;
    right: 0;
    @include res-unit(top, 320px, 1920px, 10px, -110px);
    text-align: center;
    z-index: -1;
  }
}
.watermark-travel-title {
  &:before {
    content: '#BeTravels';
    opacity: 0.05;
    font-family: $secondary-font-family;
    @include res-unit(font-size, 320px, 1920px, 40px, 230px);
    font-weight: bold;
    line-height: 1.5;
    color: black;
    position: absolute;
    left: 0;
    right: 0;
    @include res-unit(top, 320px, 1920px, 10px, -110px);
    text-align: center;
    z-index: -1;
  }
}
.watermark-story-title {
  &:before {
    content: '#BeStory';
    opacity: 0.05;
    font-family: $secondary-font-family;
    @include res-unit(font-size, 320px, 1920px, 40px, 230px);
    font-weight: bold;
    line-height: 1.5;
    color: black;
    position: absolute;
    left: 0;
    right: 0;
    @include res-unit(top, 320px, 1920px, 10px, -110px);
    text-align: center;
    z-index: -1;
  }
}
.section-title {
  margin: rem(100) 0 rem(90);
  &.none-bold {
  	font-weight: normal;
  }
}
.section-title {
  font-family: $secondary-font-family;
  @include res-unit(font-size, 320px, 1920px, 30px, 40px);
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  color: black;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  @include res-unit(margin-top, 320px, 1920px, 20px, 50px);
  @include res-unit(margin-bottom, 320px, 1920px, 10px, 50px);
}
.section-sub-title {
  @include res-unit(font-size, 320px, 1680px, 14px, 20px);
  line-height: 1.2;
  color: lighten(black, 15%);
  text-align: center;
}
.auther-title {
  font-family: $secondary-font-family;
  font-size: 14px!important;
  line-height: 1.2;
  color: lighten(black, 15%);
}
.hidden-element {
	display: none !important;
}

.flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  h1,
  h5 {
    font-family: $secondary-font-family;
    line-height: 1.5;
    color: black;
  }
  @media screen and (max-width: 767px) {
  	justify-content: center;
    flex-direction: column;
  }
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  #search-form {
    width: 100%;
    display: flex;
    justify-content: flex-end!important;
    align-items: flex-end;
    flex-wrap: wrap;
    flex-direction: row;
    input {
      display: inline-block;
    }
    input[type="submit"] {
      background-color: black !important;
    }
    h1 {
      flex-basis: 100%;
    }
  }
  @media screen and (max-width: 767px) {
    justify-content: center!important;
    align-items: center;
    #search-form {
      justify-content: center!important;
      align-items: center;
    }
    h1 {
      text-align: center;
    }
  }
}

.flex-align-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  @media screen and (max-width: 576px) {
   	margin: 0 auto;
  }
}

.mb-0.mb-0.user-content.lightly-spaced-row.lightboximages {
  margin-bottom: 0!important;
}
.m-auto {
	margin: 0 auto;
}
.mr-auto {
	margin-right: auto;
}
.float-none {
	float: none!important;
}


/* Global */



img {
  image-rendering: -webkit-optimize-contrast;
}
.mobile-nav-toggle {
  display: none;
  z-index: 3999!important;
  &:focus {
  	outline: none;
  }
  span {
    margin: 4px 0;
    border-radius: 2px;
    height: 4px;
    display: block;
    background-color: black;
    transition: $default-transition;

    &.line1 {
      width: 25px;
    }

    &.line2 {
      width: 25px;
    }

    &.line3 {
      width: 25px;
    }
  }
  .reveal-mobile-nav & {
    .line1 {
      width: 25px;
      transform: rotate(-45deg);
      transform-origin: 16px 12px;
    }

    .line3 {
      transform: rotate(45deg);
      transform-origin: 13px -6px;
    }

    .line2 {
      height: 0;
      opacity: 0;
      width: 0;
    }
  }
  @media screen and (max-width: 767px) {
    display: block;
  }
}


/* TBR */

/* .__seguno-banner-container.__seguno-banner-container {
  display: none !important;
}

#htusb_container_html_prod_trust_0,
.breadcrumb,
.desktop-only {
  display: none;
}
.whatshare-mobile {
  background-color: transparent!important;
  img {
    filter: invert(1);
  }
} */

/* TBR */


/* General Styles Start */
body,
.button, 
a.button,
button, 
input[type="submit"], 
input[type="reset"], 
input[type="button"], 
.productlabel {
  font-family: $base-font-family;
}
.container {
  max-width: 1240px;
  margin: auto;
  @media screen and (min-width: 1920px) {
  	max-width: 1920px!important;
    @include res-unit(padding-left, 320px, 1920px, 30px, 110px);
    @include res-unit(padding-right, 320px, 1920px, 30px, 110px);
  }
}
#content {
    padding-bottom: 0;
}

.template-list-collections {
  #content {
    .container {
      max-width: none;
      padding-left: 0;
      padding-right: 0;
    }  
  }
}
/* General Styles End */

/* Header Start */
.arrivals-dot {
  position: relative;
  &:after {
  	content: '';
    position: absolute;
    right: 0;
    top: 9px;
    height: 7px;
    width: 7px;
    border-radius: 50%;
    background-color: $logo-base-color;
    @media screen and (max-width: 576px) {
/*       right: auto;
      left: 45%; */
    }
  }
}
.sale-active {
  position: relative;
  &:after {
    content: 'New';
    position: absolute;
    right: -30px;
    top: -10px;
    border-radius: 4px;
    background-color: #d84021;
    font-size: 14px;
    color: white;
    padding: 0 3px;
    transform: rotate(-25deg);
    line-height: 1.4;
    @media screen and (max-width: 576px) {
/*       right: auto;
      left: 20%; */
      top: 0;
    }
  }
}
.bembel-main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  @include res-unit(padding-top, 1680px, 1920px, 27px, 30px);
  flex-wrap: nowrap;
  #main-nav {
    border: 0;
    display: flex;
    justify-content: space-between;
    @include res-unit(margin-left, 1680px, 1920px, 0px, 0px);
    > ul {
      display: flex;
      justify-content: space-between;
      flex-grow: 1;
      
      .has-children {
        &.active {
          ul {
            display: block;
          }
        }
      }
      li {
        text-transform: uppercase;
        font-family: $secondary-font-family;
        font-weight: normal;
        line-height: 1.5;
        letter-spacing: 1px;
        @include res-unit(font-size, 320px, 1680px, 14px, 18px);
        @include res-unit(margin-right, 1680px, 1920px, 0px, 20px);
        @include res-unit(padding-right, 1680px, 1920px, 5px, 0px);
        @include res-unit(padding-left, 1680px, 1920px, 5px, 0px);
        a {
          padding: 5px;
        }
        &.active {
          > ul {
            display: block;
            position: absolute;
            max-width: 300px;
            background: white;
            border-radius: 4px;
            text-align: -webkit-left;
            box-shadow: 0px 4px 11px -4px rgba(0,0,0,0.35);
            padding: 10px 0;
            > li {
              display: block;
              padding: 10px;
              font-size: 15px;
              padding: 0;
              a {
                display: block;
              	padding: 0 10px;
                height: 30px;
                line-height: 30px;
              }
            }
          }
          @media screen and (max-width: 767px) {
            > ul {
              position: relative;
              box-shadow: none;
              padding-left: 20px;
            }
          }
        }
      }
    }
    @media screen and (max-width: 767px) {
      margin-left: -0px;
    }
  }
  .util-area {
/*   	flex-grow: 2; */
    display: flex;
    justify-content: flex-end;
/*     flex-basis: 25%; */
/*     max-width: 25%; */
    @media screen and (min-width: 1920px) {
/*       max-width: 42%; */
/*       flex-basis: 42%; */
    }
    .utils {
      display: flex;
      align-items: center;
      > * + * {
      	margin-left: 20px;
      }
    }
  }
  .logo {
    flex-shrink: 0;
    pointer-events: all!important;
    img {
      max-width: 130px;
      width: 130px;
    }
  }
  @media screen and (max-width: 767px) {
  	justify-content: space-between;
    padding-top: 70px;
    .util-area {
    	margin-right: 0!important;
    }
    #main-nav {
      .main-nav {
        flex-direction: column;
        justify-content: flex-start;
        padding: rem(75) rem(15);
        li {
          //margin: 5px 0;
        }
      }
    }
  }
  @media screen and (max-width: 1100px) {
    #main-nav {
      .main-nav {
        justify-content: flex-start;
        flex-wrap: wrap!important;
        li {
          padding: 0!important;
        }
      }
    }
  }
}

#pageheader ul ul {display: none;}
.account-links {
  a {
    font-size: rem(30);
    display: block;
  }
}

/* cart button */
.cart-summary {
  .cart-count {
  	display: block;
    position: relative;
  }
  i {
  	font-size: rem(30);
   	color: black; 
  }
  span {
    background-color: $cart-count-bg;
    position: absolute;
    top: 0;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 8px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-indent: 1px;
    &.plus-active {
      padding-right: 2px;
      padding-top: 2px;
      right: -5px;
      width: 21px;
      height: 21px;
      .plusmarker {
        position: absolute;
        top: 7px;
        right: 1px;
      }
    }
  }
}
/* cart button */

/* search */
.search-box {
/*   overflow: hidden; */
  position: relative;
  input[type="text"] {
  	width: 0;    
    border: 0;
    padding: 0;
    opacity: 0;
    transition: width 0.5s ease;
    font-family: $secondary-font-family;
    font-size: 20px;
  }
  input[type="submit"] {
    display: none;
    min-width: auto;
    background: transparent;
    padding: 0;
    border-left: 6px solid #000;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    width: 0;
    height: 0;
    position: absolute;
    right: 8px;
    cursor: pointer;
  }
  svg {
  	top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    margin-left: 3px;
    cursor: pointer;
  }
  .search-form {
    flex-direction: row;
    margin-right: 20px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    flex-wrap: nowrap;
    position: absolute;
    right: 0;
    top: 0;
    background-color: white;
    &.active {
      top: -10px;
      border: 1px solid #ccc;
      box-shadow: 0px 0px 20px -15px rgba(0,0,0,1);
      input[type="text"] {
        width: 200px;    
        padding: 10px 5px;
        opacity: 1;
      }
      input[type="submit"] {
        display: block;
      }
    }
  }
  .results-box {
    position: absolute;
    background: #fff;
    color: #333;
    max-width: 245px!important;
    z-index: 5000;
    font-size: 9.6px;
    top: 40px;
    right: 20px;
  }
}
.os-e.os-search-box-index {
  opacity: 0 !important;
  top: -999px !important;
}
/* search */
/* Header End */


/* Featured Collection Homepage */
.owl-carousel .owl-item img {
  height: auto;
}
.featured-collection-homepage {
  font-family: $secondary-font-family;
  @include res-unit(font-size, 320px, 1920px, 20px, 40px);
  font-weight: bold;
  text-align: center;
  margin-right: 0;
  margin-left: 0;
  @include res-unit(margin-top, 320px, 1920px, 10px, 60px);
  @include res-unit(margin-bottom, 320px, 1920px, 10px, 20px);
}

.homepage-featured-collection {
  position: relative;
  
  &:before {
    content: '#Featured';
    opacity: 0.05;
    font-family: $secondary-font-family;
    @include res-unit(font-size, 320px, 1920px, 40px, 255px);
    font-weight: bold;
    color: black;
    position: absolute;
    left: 0;
    right: 0;
    @include res-unit(top, 320px, 1920px, 80px, 37px);
    text-align: center;
    z-index: 1;
    pointer-events: none;
  }
  .product-block {
    .image-cont {
      img {
        @include res-unit(max-height, 1680px, 1920px, 275px, 405px);
      }
    }
    &:hover {
      .productlabel {
        > span {
          opacity: 1!important;
        }
      }
    }
  }
  .productlabel {
    > span {
      padding: 20px 30px;
      font-size: 14px;
      border-radius: 5px;
      opacity: 0;
      transition: $default-transition;
      &:hover {
      	background-color: $Robins-egg-blue-color;
      }
    }
  }
  .product-info {
    font-family: $secondary-font-family;
    text-align: center;
    margin: 70px 10px 20px;
    position: relative;
    @include res-unit(margin-top, 320px, 1920px, 5px, 0px);
    &:after {
/*       content: "\e903"; */
      font-family: 'bembelicons';
      position: absolute;
      @include res-unit(font-size, 1680px, 1920, 35px, 55px);
      right: 0;
      top: 20%;
      font-weight: 500;
    }
    .reducedfrom {
      display: block;
    }
    .title {
      padding-top: 10px;
      font-weight: bold;
      line-height: 24px;
      @include res-unit(font-size, 1680px, 1920, 20px, 24px);
/*       @include res-unit(padding-right, 1680px, 1920px, 40px, 70px); */
    }
    .price {
      @include res-unit(font-size, 320px, 1680px, 18px, 20px);
      font-weight: normal;
      margin: 0;
    }
  }
  .collection-listing {
    padding: 50px 0 0 0;
    @include res-unit(padding-bottom, 1680px, 1920px, 50px, 60px);
    .slick-prev {
      background-color: rgba(black, 0.5);
      @include res-unit(width, 320px, 1920px, 30px, 35px);
      @include res-unit(height, 320px, 1920px, 50px, 80px);
      &:after {
        content: "";
        position: absolute;
        @include res-unit(font-size, 320px, 1920, 16px, 35px);
        right: -40%;
        top: 35%;
        transform: rotate(-45deg) translate(-50%, -50%);
        font-weight: 500;
        color: white;
        width: 20px;
        height: 20px;
        border-top: 2px solid white;
        border-left: 2px solid white;
        @media screen and (max-width: 576px) {
          right: -30%;
          width: 15px;
          height: 15px;
        }
      }
    }
    .slick-next {
      background-color: rgba(black, 0.5);
      @include res-unit(width, 320px, 1920px, 30px, 35px);
      @include res-unit(height, 320px, 1920px, 50px, 80px);
      &:after {
        content: "";
        position: absolute;
        @include res-unit(font-size, 320px, 1920, 16px, 35px);
        transform: rotate(45deg) translate(-50%, -50%);
        left: 0%;
        width: 20px;
        height: 20px;
        top: 58%;
        font-weight: 500;
        color: white;
        border-top: 2px solid white;
        border-right: 2px solid white;
        @media screen and (max-width: 576px) {
          left: 5%;
          width: 15px;
          height: 15px;
        }
      }
    }
  }
  @media screen and (max-width: 576px) {
    .product-info {
      &:after {
      	right: 6%;
        font-size: 22px;
        font-weight: bold;
        top: 17%;
      }
      .title {
      	font-size: 18px;
      }
      .price {
      	font-size: 18px!important;
      }
    }
  }
}
.brand-banner-wrapper {
  @extend %container;	
}
/* Featured Collection Homepage */

/* Trending */

/* copied */

.trending-wrapper {
  @extend %container;
  overflow: hidden;
  @media screen and (min-width: 1920px) {
  	max-width: 1920px!important;
  }
}
.trending-items {
  @media screen and (max-width: 576px) {
    justify-content: center!important;
    flex-wrap: wrap;
  }
}
.brand-banner-wrapper {
  @extend %container;
  @media screen and (min-width: 1920px) {
  	max-width: 1920px!important;
  }
  @media screen and (max-width: 576px) {
  	flex-wrap: wrap;
  }
}
.insta-home-wrap {
  .insta-row {
    @media screen and (max-width: 576px) {
      flex-wrap: wrap;
    }
  }
}

/* copied */


.trending-wrapper {
  @extend %container;
  padding: 0;
  @include res-unit(padding-top, 320px, 1920px, 35px, 40px);
  @include res-unit(padding-bottom, 1680px, 1920px, 0px, 0px);
}

.trending-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: rem(37) 0 0 0;
  &:before {
    content: '#bembel';
    opacity: 0.05;
    font-family: $secondary-font-family;
    @include res-unit(font-size, 320px, 1920px, 40px, 315px);
    font-weight: bold;
    line-height: 1.5;
    color: black;
    position: absolute;
    left: 0;
    right: 0;
    @include res-unit(top, 320px, 1920px, -80px, -290px);
    text-align: center;
    z-index: 1;
  }
}

.trending-img {
  position: relative;
  z-index: 2;
  img {
  	display: block;
    width: 100%;
  }
  p {
    font-family: $secondary-font-family;
    font-size: 18px;
    font-weight: bold;
    line-height: 2.56;
    color: white;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(black, 0.5);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: $default-transition;
    opacity: 0;
    margin-bottom: 0;
  }
  &:hover {
    p {
      opacity: 1;
    }
  }
  @media screen and (min-width: 767px) {
    + .trending-img {
    	margin-left: 10px;
    }
  }
}
/* Trending */
/* Bembel Spotted */
.insta-home-wrap {
/*   max-width: 1860px; */
  margin: auto;
  @include res-unit(padding-top, 1680px, 1920px, 0px, 15px);
  .insta-bembel-spotted {
  	display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex-wrap: wrap;
    @include res-unit(padding-top, 1680px, 1920px, 0px, 65px);
/*     @include res-unit(padding-bottom, 1680px, 1920px, 65px, 70px); */
    &:before {
      content: '#beyou';
      opacity: 0.0;
      font-family: $secondary-font-family;
      @include res-unit(font-size, 320px, 1920px, 40px, 315px);
      font-weight: bold;
      line-height: 1.5;
      color: black;
      position: absolute;
      left: 0;
      right: 0;
      top: -165px;      
      @include res-unit(top, 320px, 1920px, -80px, -290px);
      text-align: center;
      z-index: 1;
    }
  }
  .insta-row {
  	width: 100%;
    display: flex;
    justify-content: space-between;
    + .insta-row { 
      margin-top: 0px;
    }
    @media screen and (max-width: 767px) {
    	justify-content: center;
      + .insta-row { 
        margin-top: 0px;
      }
    }
  }
  .section-title {
  	margin: 0;
  }
  .section-sub-title {
  	@include res-unit(margin-bottom, 320px, 1920px, 35px, 0px);
  }
  .social-links {
    margin-top: 60px;
    a {
      padding: 0 5px;
      margin: 0px;
      svg {
        width: 22px;
        height: 22px;
      }
    }
    @media screen and (max-width: 576px) {
    	margin: rem(45) 0 rem(10);
    }
  }
}

.bembel-spotted-img {
  position: relative;
  z-index: 2;
  min-width: calc(100% / 4 - 0px);
  img {
  	display: block;
    width: 100%;
  }
  @media screen and (min-width: 767px) {
    + .bembel-spotted-img {
    	margin-left: 0px;
    }
  }
  @media screen and (max-width: 576px) {
  	width: calc(100% / 2 - 0px);
  }
}

.social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: rem(100) 0 rem(15);
  position: relative;
  z-index: 2;
  a {
  	display: block;
  }
  .mobile-only & {
  	display: none;
  }
}
/* Bembel Spotted */

/* Full Banner */
.full-width-banner {
  margin-left: 0;
  margin-right: 0;
  @include res-unit(margin-top, 320px, 1920px, 0px, 10px);
  img {
  	display: block;
    max-width: 100%;
    width: 100%;
  }
}

/* Main slider */
.main-slider-text-overlay {
  position: absolute;
  top: 0;
  left: 8%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  max-width: 32%;
  h2 {
    font-family: $sports-font;
    @include res-unit(font-size, 320px, 1920px, 30px, 70px);
    line-height: 0.99;
    color: black;
  }
  p {
    font-family: $base-font-family;
    @include res-unit(font-size, 320px, 1920px, 18px, 20px);
    line-height: 1.2;
    color: black;
    margin-top: 15px;
  }
  a {
    font-family: $secondary-font-family;
    @include res-unit(font-size, 320px, 1920px, 18px, 18px);
    font-weight: bold;
    line-height: 1.22;
    color: #1792e6;
    display: block;
    margin-top: 15px;
  }
  .inner {
  	@include res-unit(padding-bottom, 320px, 1920px, 0px, 60px);
  }
  @media screen and (max-width: 576px) {
    left: 0;
    max-width: 100%;
    background-color: rgba(white, 0.8);
    padding: 0 rem(20);
    .inner {
    	text-align: center;
    }
  }
}

.main-slider {
  .image-wrapper {
    @media screen and (max-width: 576px) {
      /*height: calc(100vh / 1 - 146px);*/
      height: initial;
      display: flex;
    }
  }
  img {
    opacity: 0;
    transition: $transition-ease-in-out;
  }
  @media screen and (max-width: 576px) {
    img {
      display: block;
      object-fit: contain;
    } 
  }
}


/* animation and animation classes */

@keyframes rotate-animation {
  0% {
    transform: rotate(720deg);
  }
  25%  {
    transform: rotate(0deg);
  }
  50%  {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes polygon-animation {
  0% {
    clip-path: polygon(66% 0, 67% 0, 26% 100%, 25% 100%, 25% 100%);
  }
  100% {
    clip-path: polygon(0% 0, 100% 0%, 100% 100%, 25% 100%, 0% 100%);
  }
}

@keyframes matrix3d-animation {
  0% {
    transform: matrix3d(1, 0, 0, 0.0006, 0, 1, 0, 0.0001, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

.polygon-animation {
  animation: polygon-animation 800ms ease-in;
}
.rotate-animation {
/*   animation: rotate-animation 150s ease-in; */
}
.animate-left-to-right {
/*   margin-left: 50%; */
  opacity: 1!important;
}

/*
*
*
***Tabs***
*
*
*/
/*
SCSS variables and mixins
*/
@mixin tab-active() {
  background: $color__main;
  color: $background__active;
}


.tabbed-content {
  background: #fff;
  @media screen and (max-width: 769px) {
    padding-bottom: 20px;
  }
}


.tabs {
  ul {
    display: flex;
    padding-top: rem(10);
    padding-bottom: rem(10);
    margin: 0;
    li {
      flex-grow: 1;
      a {
        padding: .5em 0;
        @include res-unit(font-size, 320px, 1680px, 16px, 20px);
        font-weight: 300;
        color: $lighter-color;
        font-family: $secondary-font-family;
        &.active {
          font-weight: bold;
          color: black;
        }
      }
    } 
  }
}

.item {
  margin-bottom: 2px;
  @include res-unit(font-size, 320px, 1680px, 16px, 20px);
  font-weight: 300;
  line-height: 34px;
  position: relative;
  ul {
  	margin: 10px;
    margin-left: 0;
  }
  &::before {
    cursor: pointer;
    font-weight: bold;
    padding: .5em;
    display: block;
    border: 1px solid black;
    border-radius: 5px;
  }
  &:after {
    content: "\e903";
    font-family: 'bembelicons';
    position: absolute;
    font-size: 18px;
    right: 20px;
    top: 15%;
    font-weight: bold;
    color: black;
    z-index: 1;
  }
  &.active {
    &:after {
      transform:rotate(90deg);
      top: 3%!important;
    }
    .item-content {
      padding: 1em 0;
      color: $blackish;
      -webkit-transition: opacity 0.3s ease-in-out;
      -moz-transition: opacity 0.3s ease-in-out;
      -o-transition: opacity 0.3s ease-in-out;
      -ms-transition: opacity 0.3s ease-in-out;
      transition: opacity 0.3s ease-in-out;
    }
  }
}

@media all and (min-width: $breakpoint ) {
  .item {
    &.active {
      .item-content {
        padding-top: 0;
      }  
    }
    &:after {
      display : none;
    }
  }
  .tabs-side {
    .tabs {
      li {
        margin-bottom: 2px;
      }
    }
  }
}
/* 
The project specific CSS starts here
This is the minimum CSS that you will need in order for this to work
*/

// Accordion for small screens (mobile first principle)
.tabbed-content {
  .tabs {
    display: none;
  }
  .item {
    min-height: 2em; // We need a minimum height for each item or else the accordion buttons would dissapear
    &::before {
      content: attr(data-title); // Instead of polluting the HTML with a duplicate set of tabs, we get the accordion using the data-title attribute.
    }
    .item-content { // We hide the inactive content with zero opacity instead of "display:none" because this allows us to apply transition effects if we want. 
      opacity: 0;
      visibility: hidden;
      height: 0;
    }
    &.active {
      .item-content {
        opacity: 1;
        visibility: visible;
        height:auto;
        overflow: auto;
        ul,
        table {
          color: $lighter-color!important;
          font-family: $base-font-family!important;
          th, td {
          	padding: 0.7rem 0!important;
          }
          li {
            span {
              font-size: initial!important;
            }
          }
        }
        p {
          margin-bottom: 0;
          br {
            display: none;
          }
        }
      }
    }
  }  
}


// Tabs for larger screens
@media all and (min-width: $breakpoint) {
  .tabbed-content {
    .tabs {
      display: block;
      li {
        display: inline-block;
        a {
          display: block;
        }
      }
    }
    .item {
      min-height: 0;
      &::before {
        display: none;
      }
    } 
  }
}
  





/* Swatches start */
.variant-swatches {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  label {
    cursor: pointer;
    float: none!important;
    width: 40px!important;
    height: 40px;
    max-width: 100%;
    font-size: 0;
    margin-right: 5px;
    overflow: hidden;
    display: flex;
    position: relative;
    padding: 5px;
    transition: $transition-ease-in-out;
    transform: rotate(0deg);
    border: 1px solid black;
    &.selected {
    	border: 3px solid black;
    }
    .color-swatch__alternate,
    .color-swatch__original {
      height: 100%;
      width: 100%;
    }
    .color-swatch__alternate {
      opacity: 1; 
      color: gray;
      font-size: 14px;
      text-align: center;
    }
    img {
      transition: $transition-ease-in-out;
      transform: scale(1);
    }
  }
}
/* Swatches end  */

.variant-swatches {
  input {
    display: none;
    appearance: auto;
  	-webkit-appearance: auto !important;
    &:checked + label {
/*       transform: rotate(45deg); */
      border: 2px solid black;
      padding: 4px;
      img {
      	transform: scale(1.2);
      }
    }
  }
  img {
    margin-bottom: 0 !important;
    width: auto !important;
  }
}
.variant-select-color {
	display: none;
}

/*  */
#search-form {
  justify-content: center;
  align-items: center;
  flex-direction: initial;
  input[type="submit"] {
    background-color: black!important;
  }
}



.full-width-container {
  @extend %container;
}

.full-width-section {
	width: 100%;
}


.default-spacing-container {
  @extend %container;
  padding-top: rem(30);
  padding-bottom: rem(30);
}

.alignment-left {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0!important;
  @media screen and (max-width: 576px) {
      justify-content: center;
  }
}





.blog-pagination {
  @include res-unit(font-size, 320px, 1680px, 16px, 16px);
  padding: rem(20) 0;
  font-weight: bold;
  .inner {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .prev {
    width: calc(100% / 3 + 70px)!important;
    position: relative;
    padding-left: rem(200);
    padding-right: rem(30);
    text-align: right!important;
    &:after {
      content: "\e903";
      font-family: 'bembelicons';
      position: absolute;
      @include res-unit(font-size, 320px, 1680px, 18px, 25px);
      left: 60%;
      top: 50%;
      color: black;
      transform: translateY(-50%) rotate(180deg);
      z-index: 1;
    }
    @media screen and (max-width: 576px) {
      padding-left: 0;
      padding-right: 0;
      width: calc(100% / 2)!important;
      text-align: left!important;
    }
    @media screen and (max-width: 1680px) {
      padding-left: rem(100);
      &:after {
      	left: 45%;
      }
    }
  }
  .back {
    width: calc(100% / 3 - 140px)!important;
    @media screen and (max-width: 576px) {
      width: 100%!important;
    }
  }
  .next {
    padding-right: rem(200);
    padding-left: rem(30);
    position: relative;
    width: calc(100% / 3 + 70px)!important;
    text-align: left!important;
    &:after {
      content: "\e903";
      font-family: 'bembelicons';
      position: absolute;
      @include res-unit(font-size, 320px, 1680px, 18px, 25px);
      right: 60%;
      top: 50%;
      color: black;
      z-index: 1;
      transform: translateY(-50%);
    }
    @media screen and (max-width: 576px) {
      padding-right: 0;
      padding-left: 0;
      width: calc(100% / 2)!important;
      text-align: right!important;
    }
    @media screen and (max-width: 1680px) {
      padding-right: rem(100);
      &:after {
      	right: 45%;
      }
    }
  }
}
.pagination {
  font-family: $secondary-font-family;
  @include res-unit(font-size, 320px, 1920px, 18px, 24px);
  padding-bottom: 20px;
  .pagecount {
  	padding: 0 rem(35);
    margin: 0 rem(35);
  }
  @media screen and (max-width: 576px) {
    .pagecount {
      padding: 0 rem(12);
      margin: 0 rem(12);
    }
  }
}



/* product overview section start */

/* product detail page title, description, etc things start */

.tagline {
  margin: rem(20) 0 0 0;
  @include res-unit(font-size, 320px, 1680px, 14px, 16px);
  color: $lighter-color;
  font-style: italic;
}
.product-detail-wrapper {
  max-width: 100%;
  margin: auto;
  display: flex;
  padding: 0;
  justify-content: flex-start;
  align-items: flex-start;
  border-top: 1px solid rgba(gray, 0.7);
  .layout-column-half-left,
  .layout-column-half-right {
    flex-basis: 50%;
  }
  .layout-column-half-right {
    padding: rem(45) rem(100) 0 rem(30);
    .productlabel {
      position: absolute;
      margin: 0;
      top: 12px;
    }
    @media screen and (max-width: 767px) {
    padding: rem(30) rem(100) 0 rem(30);
      .productlabel {
        position: relative;
        float: none!important;
        margin: 0 0 8px 0;
      }
    }
  }
  @media screen and (max-width: 576px) {
    flex-wrap: wrap;
    .layout-column-half-left,
    .layout-column-half-right {
      padding: 10px 20px;
      width: calc(100% - 40px);
      flex-basis: 100%;
      overflow: hidden;
    }
  }
}
.product-details-image-thumbnails {
/*   position: absolute; */
/*   left: 7%; */
  margin-left: 0!important;
/*   top: 55%; */
/*   transform: translate(-50%, -50%); */
  display: flex;
  justify-content: center;
  width: 100%!important;
/*   flex-direction: column;  */
  a {
  	margin-right: 10px;
  }
  img {
    max-width: 60px!important;
    border: 1px solid rgba(gray, .8);
  }
}
.product-details-title {
  font-family: $secondary-font-family;
  font-weight: normal;
  @include res-unit(font-size, 320px, 1680px, 22px, 30px);
  margin: 0 0 10px 0!important;
}
.product-details-price-area {
  .price {
    font-family: $base-font-family;
    font-weight: bold;
    @include res-unit(font-size, 320px, 1680px, 20px, 24px);
  }
}
.product-details-brand-type,
.product-details-brand-type a {
  color: $lighter-color;
  font-family: $base-font-family;
  @include res-unit(font-size, 320px, 1680px, 14px, 16px);
}
.product-details-description {
  margin: rem(10) 0 0 0!important;
  display: flex;
  flex-direction: column-reverse;
  p {
    @include res-unit(font-size, 320px, 1680px, 14px, 16px);
    line-height: 19px;
    color: $lighter-color;
  }
  ul,
  span {
    list-style-type: none;
    margin-left: 0px;
    @include res-unit(font-size, 320px, 1680px, 14px, 16px);
    line-height: 24px;
    li {
      list-style: none;
    }
  }
}
.input-row {
  margin: 0!important;
  &.product-details-quantity-submit-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0!important;
    flex-wrap: wrap;
    .minus, 
    .plus{
      font-weight: bold;
      font-family: $base-font-family;
      @include res-unit(font-size, 320px, 1680px, 16px, 20px);
      cursor: pointer;
      width: 12px;
      height: 12px;
      border-radius: 5px;
      padding: 5px;
      background-color: $lighter-highlight;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: $default-transition;
      &:active {
      	box-shadow: inset 10px 10px 28px 3px rgba(0,0,0,0.75);
      }
      &::selection {
        color: black!important;
        background: none!important;
      }
      @media screen and (max-width: 576px) {
        width: 15px;
        height: 15px;
        border-radius: 0;
      }
    }
    .plus {
      position: relative;
      left: -50px;
      top: -12px;
      margin-right: -36px;
      @include res-unit(font-size, 320px, 1680px, 24px, 24px);
      @media screen and (max-width: 576px) {
        margin-right: -45px;
        left: -49px;
        top: -12px;

      }
    }
    .minus {
      @include res-unit(font-size, 320px, 1680px, 28px, 28px);
      position: relative;
      left: -34px;
      bottom: -12px;
      margin-right: -6px;
      @media screen and (max-width: 576px) {
        left: -30px;
        bottom: -12px;
      }
    }
    input {
      margin: rem(10) 0;
      padding: rem(15) rem(28) rem(15) rem(20);
      text-align: left;
      font-weight: bold;
      font-family: $base-font-family;
      @include res-unit(font-size, 320px, 1680px, 16px, 20px);
      &::selection {
        color: black;
        background: none;
      }
    }
  }
}
.product-detail-cart-btn {
  margin: rem(10) 0;
  position: relative;
  input[type=submit] {
    padding: rem(24);
    width: 400px;
    @include res-unit(width, 320px, 1920px, 210px, 400px);
    @media screen and (max-width: 769px) {
      width: 160px;
    }
    background-color: black;
    margin: 0;
  }
  &:before {
/*     content: ""; */
    position: absolute;
    left: 4px;
    top: 4px;
    width: 100%;
    height: 100%;
    border: 1px solid black;
    z-index: -1;
  }
  &:after {
    content: "\e903";
    font-family: 'bembelicons';
    position: absolute;
    @include res-unit(font-size, 320px, 1680px, 18px, 25px);
    right: 15px;
    top: 50%;
    color: white;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
  }
}
.product-title-and-price {
  flex-wrap: wrap;
  .one-half:not(.social-sharing-wrapper) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    align-items: flex-start;
  }
  .one-half:nth-child(1) {
    max-width: 70%;
    flex-basis: 70%;
    @media screen and (max-width: 576px) {
      max-width: 100%;
      flex-basis: 100%;
    }
  }
  .one-half:nth-child(2) {
    max-width: 30%;
    flex-basis: 30%;
    @media screen and (max-width: 576px) {
      max-width: 100%;
      flex-basis: 100%;
    }
  }
  .social-sharing-wrapper {
    margin-top: 5px!important;
  }
}

.social-sharing-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  .social-links {
    margin-top: 0!important;
  }
  .product-details-social-sharing {
    display: block;
    order: 2;
  }
  .spr-container {
  	border: none;
    padding: 0;
  }
  .spr-content,
  .spr-header-title,
  .spr-summary-caption,
  .spr-summary-actions {
  	display: none;
  }
}


/* product detail page title, description, etc things end */


/* product overview section end */

/* product component start ( you may also like )*/


.product-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative; 
  padding: 0 rem(50);
  .custom-product-block {
    width: calc(100% / 4 - 30px);
    img {
      max-height: 100%;
    }
  }
  @media screen and (max-width: 576px) {
    padding: 0 rem(20);
    .custom-product-block {
      width: calc(100% / 1 - 30px);
    }
  }
}

/* product card box start */
.custom-product-block {
  .alignment-left & {
    width: calc(100% / 4 - 30px);
    @media screen and (max-width: 767px) {
      width: calc(100% / 2 - 50px);
    }
    @media screen and (max-width: 576px) {
      width: calc(100% / 2 - 30px);
    }
    img {
      @include res-unit(max-height, 1680px, 1920px, 275px, 405px);
    }
    .image-label-wrap {
      border: 1px solid rgba($lighter-highlight, 0.3)!important;
    }
  }
  
}
.custom-product-block {
  .main-product-wrapper & {
    .image-label-wrap {
      border: 1px solid $lighter-highlight;
    }
    img {
      @include res-unit(max-height, 1680px, 1920px, 275px, 405px);
    }
    .product-info {
      margin-left: 0;
      margin-right: 0;
    }
    .inner {
      min-width: 100%;
    }
    .innerer {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      @include res-unit(font-size, 320px, 1680px, 20px, 24px);
      font-family: $secondary-font-family;
      font-weight: bold;
    }
    .title {
      order: 1;
      width: calc(100% / 2 + 20%);
      margin: 0;
      text-align: left;
      text-transform: capitalize;
      font-weight: normal;
      padding: rem(10) 0;
      @include res-unit(font-size, 1680px, 1920px, 15px, 20px);
    }
    .reducedfrom {
      display: block;
      order: 3;       
      text-align: right;
      margin: 0;
      width: 100%;
      .amount {
        @include res-unit(font-size, 320px, 1680px, 14px, 16px);
      }
    }
    .price {
      font-weight: normal;
      color: $highlight-color;
      order: 2;
      width: calc(100% / 2 - 20%);
      margin: 0;
      padding: rem(10) 0;
      text-align: right;
      font-weight: bold;
    }
    @media screen and (max-width: 576px) {
      .inner  {
		width: 100%!important;
      }
      .title,
      .price,
      .reducedfrom {
        min-width: 100%;
        text-align: center;
      }
      .title {
        padding: rem(5) 0;
      }
      .price {
      	padding:  0;
      }
    }
  }
}
/* product card box end */


.full-width-container {
  	.collection-listing {
      padding: 0;
	}
}



/* custom page header with sort options start */
.custom-page-header-container {
  @extend %container;
  padding-top: rem(10);
  @include res-unit(padding-left, 320px, 1920px, 20px, 90px);
  @include res-unit(padding-right, 320px, 1920px, 20px, 90px);
  .page-header {
    display: flex;
    justify-content: space-between;
    padding: 0;
    border-bottom: 1px solid $lighter-highlight;
  }
  .majortitle {
  	font-family: $secondary-font-family;
    @include res-unit(font-size, 320px, 1920px, 30px, 34px);
    font-weight: normal;
    line-height: 1.5;
    text-align: left;
    color: black;
    flex-basis: 50%;
    
  }
  .filters {
    flex-basis: 50%; 
    display: flex;
    justify-content: flex-end;
    .sort {
      margin: 0;
      display: flex;
      align-items: center;
      position: relative;
      #sort-by {
      	padding: rem(10) rem(30) rem(10) rem(10);
        width: 245px;
        border: 0.5px solid $lighter-color!important;
        /* for Firefox */
        -moz-appearance: none;
        /* for Chrome */
        -webkit-appearance: none;
        color: $lighter-color;
        option {
       		font-family: $secondary-font-family;
        }
      }
      label {
        margin-right: rem(10);
        font-weight: normal;
        line-height: 1.5px;
        @include res-unit(font-size, 320px, 1680px, 16px, 20px);
      }
      &:after {
        position: absolute;
        right: 12px;
        top: 16px;
        z-index: 1;
        width: 10px;
        height: 10px;
        border-right: 1px solid $lighter-color;
        border-bottom: 1px solid $lighter-color;
        content: "";
        transform: rotate(45deg);
        pointer-events: none;
      }
    }
  }
  .social-area {
  	display: none;
  }
  @media screen and (max-width: 576px) {
    .majortitle {
    	text-align: center;
    }
    .filters {
      .sort {
        &:after {
          right: 30px;
          top: 10px;
        }
      }
    }
  }
}

/* custom page header with sort options end */


/* custom footer styling start */

.footer-wrapper {
  @extend %flex-center;
  justify-content: space-between;
  padding-top: rem(80);
  padding-bottom: rem(60);
  @include res-unit(padding-left, 1680px, 1920px, 50px, 100px);
  @include res-unit(padding-right, 1680px, 1920px, 50px, 110px);
  color: white;
  background-color: black;
  @media screen and (max-width: 576px) {
    padding-left: 20px;
    padding-right: 20px;
  }
  a,
  h4,
  h3,
  li,
  span {
    color: white !important;
    font-family: $base-font-family;
  }
  li,
  label,
  span {
    font-weight: normal;
    @include res-unit(font-size, 320px, 1680px, 18px, 16px);
    list-style: none;
    margin-bottom: rem(20);
    text-align: left;
    text-transform: initial;
  }
  .footer-logo-newsletter {
  	flex-basis: calc(100% / 2 - 15%);
    @media screen and (max-width: 1920px) {
      flex-basis: calc(100% / 2 - 12%);
    }
    @media screen and (max-width: 1920px) {
      flex-basis: calc(100% / 2 - 15%);
    }
  }
  .footer-nav {
  	flex-basis: calc(100% / 2 + 15%);
    @media screen and (max-width: 1920px) {
      flex-basis: calc(100% / 2 + 12%);
      margin-right: -95px;
    }
    @media screen and (max-width: 1680px) {
      flex-basis: calc(100% / 2 + 15%);
      margin-right: 0;
      padding-top: 10px;
    }
  }
  .footer-copyright {
  	flex-basis: 100%;
  }
  h3 {
    font-weight: bold;
    @include res-unit(font-size, 320px, 1920px, 20px, 26px);
    font-family: $secondary-font-family;
    margin-bottom: rem(30);
    line-height: 45px;
    @media screen and (max-width: 769px) {
      margin-top: rem(30); 
      margin-bottom: rem(20);
    }
  }
  @media screen and (max-width: 576px) {
  	flex-direction: column;
  }
}
.footer-nav {
  @extend %flex-center;
  justify-content: flex-start;
  padding-top: 15px;
  .custom-html {
  	flex-grow: 1;
    ul {
      margin-left: 0;
      li {
        @include res-unit(margin-bottom, 1680px, 1920px, 15px, 20px);
      }
    }
    &:nth-child(1) {
      @include res-unit(flex-basis, 1680px, 1920px, 17%, 19%);
    }
    &:nth-child(2) {
      @include res-unit(flex-basis, 1680px, 1920px, 22%, 25%);
    }
    &:nth-child(3) {
      @include res-unit(flex-basis, 1680px, 1920px, 19%, 19%);
    }
    &:nth-child(4) {
      @include res-unit(flex-basis, 1680px, 1920px, 35%, 37%);
    }
  }
  @media screen and (max-width: 769px) {
  	flex-basis: 100%!important;
    .custom-html {
      flex-basis: calc(100% / 3)!important;
    }
  }
  @media screen and (max-width: 576px) {
    padding: rem(50) 0;
    padding-top: 55px!important;
    .custom-html {
      flex-basis: 100%!important;
      ul {
      	height: 0;
        overflow : hidden;
        transition: $default-transition;
      }
      &.active {
        ul {
          height: auto;
        }
        h3 {
          &:after {
            transform: rotate(135deg);
          }
        }
      }
    }
    h3 {
      border-bottom: 1px solid white;
      position: relative;
      &:after {
      	content: "";
        position: absolute;
        right: 10px;
        bottom: 15px;
        width: 10px;
        height: 10px;
        border-top: 1px solid white;
        border-right: 1px solid white;
        transform: rotate(-45deg);
        transition: $default-transition;
      }
    }
  }
}
.footer-logo-newsletter,
form {
  @extend %flex-center;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  img {
  	margin-bottom: rem(50);
    width: 168px;
  }
  .input-block {
    display: flex;
    background: none;
    border: none;
    overflow: hidden;
    @include res-unit(width, 320px, 1920px, 95%, 93%);
    input {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      @include res-unit(font-size, 320px, 1680px, 14px, 16px);
      padding: rem(9) rem(15);
      font-family: $base-font-family;
      width: calc(100% / 2 + 25%)!important;
      
    }
    button {
      width: calc(100% / 2 - 25%);
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      padding: rem(9) rem(15);
    }
  }
  label {
  	max-width: 85%;
  }
  @media screen and (max-width: 769px) {
  	flex-basis: 100%!important;
  }
}
.footer-copyright {
  @include res-unit(padding-top, 1680px, 1920px, 40px, 60px);
  svg,
  g,
  path {
    fill: white;
  }
  display: flex;
  justify-content: space-between;
  h4 {
    text-transform: lowercase;
  }
  .copyright {
  	margin-top: 0!important;
  }
  .social-links {
    li,
    h4 {
    	margin: 0;
    }
    a {
      padding: 0 0;
      margin: 0px;
      svg {
        width: 22px;
        height: 22px;
      }
    }
    ul {
      @media screen and (max-width: 769px) {
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
      }
    }
    
  }
  @media screen and (max-width: 576px) {
  	justify-content: center;
    flex-direction: column;
    text-align: center;
    padding-top: rem(70);
    .copyright {
      max-width: 100%!important;
      margin-bottom: rem(20);
      padding-right: 0;
      .copy {
        text-align: center;
      }
    }
  }
  @media screen and (max-width: 769px) {
    .copyright {
      max-width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .copy {
        margin-bottom: 0;
        white-space: initial!important;
      }
    }
  }
}



/* custom footer styling end  */





.tabs + div {
  li {
    br {
      display: none;
    }
    list-style: disc inside;
  }
}

/* Tabs Styling end */



.collection-listing-banner {
  img {
    width: 100%;
    image-rendering: optimizespeed;
    display: block;
  }
}



/* cart page start  */

.cart-list-item-wrapper {
  padding: rem(30) 0;
  margin: 0;
  .item {
  	display: flex;
    align-items: center;
    justify-content: flex-start;
    &:before {
    	display : none!important;
    }
    @media screen and (max-width: 576px) {
      align-items: center;
      flex-direction: column;
      &:after {
        display: none;
      }
    }
  }
  .cart-item-image {
    width: 100px;
    height: 100px;
    margin: 0;  
    flex-basis: calc(100% / 3 - 25%);
    img {
      margin-bottom: 0;
      width: auto;
    }
    @media screen and (max-width: 576px) {
      margin-right: auto;
    }
  }
  .cart-item-title {
    margin: 0 3%;
    flex-basis: calc(100% / 3  + 15%);
    @include res-unit(font-size, 320px, 1680px, 18px, 20px);
    @media screen and (max-width: 576px) {
      margin-right: auto;
      margin-left: 0;
    }
  }
  .cart-item-quantity-wrap {
    @include res-unit(font-size, 320px, 1680px, 18px, 20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: rem(50);
    flex-basis: calc(100% / 3 + 10%);
    label {
    	margin-right: rem(20);
    }
    @media screen and (max-width: 576px) {
      align-items: center;
      justify-content: space-between;
      padding-right: 0;
      width: 100%;
    }
  }
  .cart-item-cross {
    right: 5px;
    @include res-unit(font-size, 320px, 1680px, 20px, 22px);
    font-weight: bold;
    position: absolute;
    top: auto;
  }
}
.cart-item-details-wrapper {
  display: flex;
  justify-content: space-between;
   @include res-unit(font-size, 320px, 1680px, 16px, 20px);
  padding-bottom: rem(70);
  .cart-item-checkout-note,
  .cart-item-totals-area {
    flex-basis: 50%;
    
  }
  .checkout-buttons {
  	margin: rem(15) 0 rem(30);
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    font-size: 0;
    line-height: 7px;
    @media screen and (max-width: 576px) {
      flex-direction: row;
      justify-content: space-between;
    }
    > div {
     margin: 0!important;
    }
    input {
      font-size: 9.6px;
      line-height: 9.6px;
      letter-spacing: 1px;
      text-transform: uppercase;
      height: auto;
      margin: 0;
      text-decoration: none !important;
      cursor: pointer;
      margin-left: rem(15);
      padding: 15px 25px!important;
      width: 30%;
      @media screen and (max-width: 576px) {
      	width: 100%;
        margin: rem(0) rem(5)!important;
      }
    }
    input[type="submit"].altaltcolour {
      background-color: black;
      color: white;
      font-size: 12px;
    }
    input[type="submit"].notabutton {
      background-color: black;
      color: white;
      font-size: 12px;
    }
  }
  @media screen and (max-width: 576px) {
  	flex-direction: column;
  }
}	
.cart-item-totals-area {
  text-align: right;
}
.cart-item-checkout-note {
  textarea {
    margin-top: rem(20);
  	width: 90%;
  }
}
.bolder-text {
  font-family: $secondary-font-family;
  @include res-unit(font-size, 320px, 1680px, 20px, 40px);
  font-weight: bold;
  line-height: 1.5;
  color: black;
  margin: rem(20) 0;
}
/* cart page end */





/* brand banner images component start */
.brand-banner-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  &:hover {
    .brand-logo {
      opacity: 1;
      left: 20px;
    }
    .brand-banner {
      z-index: 0;
      opacity: 0;
    }
    .brand-banner-hover {
      opacity: 1;
    }
    .brand-info {
      z-index: 1;
      opacity: 1;
      @include res-unit(padding-top, 320px, 1680px, 10px, 30px);
      @include res-unit(padding-bottom, 320px, 1680px, 10px, 30px);
      background-color: rgba(black, 0.5);
      a,
      span {
      	opacity: 1;
      }
    }
  }
}
.brand-logo {
  display: none;
}
.brand-banner {
  transition: $transition-ease-in-out;
  z-index: 1;
  opacity: 1;
  @media screen and (max-width: 576px) {
    opacity: 0;
  }
}
.brand-banner-hover {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  transform: translate(-50%, -50%);
  transition: $transition-ease-in-out;
  opacity: 0;
  @media screen and (max-width: 576px) {
    opacity: 1;
  }
}
.brand-info {
  position: absolute;
  left: 0;
  bottom: 0;
/*   z-index: 1; */
  opacity: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  @include res-unit(padding-top, 320px, 1680px, 10px, 30px);
  @include res-unit(padding-bottom, 320px, 1680px, 10px, 30px);
  transition: $transition-ease-in-out;
  a,
  span {
    margin: 0;
    opacity: 0;
    @include res-unit(margin-right, 320px, 1920px, 8px, 23px);
    @include res-unit(margin-left, 320px, 1920px, 8px, 23px);
    pointer-event: all;
    color: white;
    font-weight: normal;
    transition: $transition-ease-in-out;
  }
  span {
    @include res-unit(font-size, 1680px, 1920px, 14px, 20px);
  }
  a {
    @include res-unit(font-size, 1680px, 1920px, 14px, 24px);
    display: flex;
    align-items: center;
  }
  i {
    margin-left: rem(15);
    &:before {
      @include res-unit(font-size, 1680px, 1920px, 20px, 35px);
      font-weight: bold;
    }
  }
  @media screen and (max-width: 576px) {
    background-color: rgba(black, 0.5);
    opacity: 1;
    a,
    span {
      opacity: 1;
    }
  }
}

/* brand banner images component end */



/* top bar country tabs start */

.country-wrapper {
  background-color: black;
  display: flex;
  align-items: center;
  padding: rem(10) 0;
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100vw - 240px);
  z-index: 7000;
  @include res-unit(padding-right, 1680px, 1920px, 50px, 120px);
  @include res-unit(padding-left, 1680px, 1920px, 50px, 120px);
  
  
  h4 {
    flex-grow: 1;
    font-family: $secondary-font-family;
    font-weight: normal;
  	@include res-unit(font-size, 320px, 1680px, 12px, 16px);
    color: white;
    text-align: center;
    margin-bottom: 0;
  }
  .country-selector {
    display: flex;
    align-items: center;
    font-family: $secondary-font-family;
    font-weight: normal;
  	@include res-unit(font-size, 320px, 1680px, 12px, 14px);
    position: absolute;
    @include res-unit(right, 1680px, 1920px, 50px, 120px);
    color: white;
    a {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img {
      width: 20px;
      height:20px;
      @media screen and (max-width: 769px) {
        width: 14px;
        height: 14px;
        margin: 0 2px;
      }
    }
    .active {
      img {
        border: 2px solid white;
        @media screen and (max-width: 769px) {
          border: 1px solid white;
        }
      }
    }
  }
  
  @media screen and (max-width: 1680px) {
  	width: calc(100vw - 100px);
  }
  @media screen and (max-width: 767px) {
    padding-left: 30px;
    padding-right: 30px;
    width: calc(100vw - 60px);
    justify-content: center;
    h4 {
    	text-align: left;
    }
    .country-selector {
      position: relative;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      text-align: center;
      width: 100%;
      right: 0;
      padding: 10px 0 0 0;
      flex-shrink: 2;
      span {
      	display: none;
      }
    }
    + #pageheader {
		position: unset;
    }  
  }
}


/* top bar country tabs end */

/* Bembel Spotted start (copied) */

.bembel-spotted-img {
  .bembel-spotted-overlay {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(black, 0.6);
    width: 100%;
    opacity: 0;
    height: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: $default-transition;
    @include res-unit(font-size, 1680px, 1920px, 24px, 30px);
    .social-links,
    a {
      @include res-unit(font-size, 1680px, 1920px, 24px, 30px);
      margin: rem(5);
    }
    p {
      @include res-unit(margin-bottom, 1680px, 1920px, 10px, 15px);
    }
    svg,
    g,
    path {
      @include res-unit(width, 1680px, 1920px, 20px, 25px);
      @include res-unit(height, 1680px, 1920px, 20px, 25px);
      fill: white;
    }
  }
  &:hover {
    .bembel-spotted-overlay {
      opacity: 1;
    }
  }
}

/* Bembel Spotted end (copied) */




/* Our Collection Page Start */
.our-collection-item-wrapper {
  display: flex;
  flex-wrap: wrap;
  @media screen and (max-width: 1080px) {
    justify-content: center;
  }
}
.product-block {
  .our-collection-item-wrapper & {
  	width: calc(100% / 4 - 32px);
    .productlabel {
      position: relative;
      > span {
        background: none;
        border: none;
        display: block;
        text-align: left;
        padding-left: 0;
      }
    }
    .title {
      order: 1;
      @include res-unit(font-size, 320px, 1680px, 20px, 24px);
      text-align: center;
      text-transform: capitalize;
      font-weight: normal;
      padding: rem(10) 0;
    }
    .image-cont {
      border: 1px solid $lighter-highlight;
      @include res-unit(height, 1680px, 1920px, 275px, 405px);
      display: flex;
      @media screen and (max-width: 1080px) {
        height: auto;
      }
    }
    img {
      @include res-unit(max-height, 1680px, 1920px, 275px, 405px);
    }
    &:hover {
      .productlabel {
        > span {
          background: none;
          border: none;
          color: black;
        }
      }
    }
    @media screen and (max-width: 1080px) {
      width: calc(100% / 3 - 50px);
    }
    @media screen and (max-width: 767px) {
      width: calc(100% / 2 - 50px);
    }
    @media screen and (max-width: 576px) {
      width: calc(100% / 2 - 32px);
      .image-cont {
        justify-content: center;
        align-items: center;
        padding-bottom: 0;
      }
      .productlabel {
        span {
          text-align: center;
          padding-left: 0;
          padding-right: 0;
        }
      }
      .title {
      	line-height: 20px;
      }
    }
  }
}

/* Our Collection Page End */



/* bembel nav mobile start */

.bembel-main-nav {
/*   @media only screen and (max-width: 1080px) {
    #main-nav {
      .mobile-features {
        display: block;
        border-bottom: 1px solid #d1d6d9;
      }
    }
  } */
  + #mobile-header {
    @media screen and (max-width: 767px) {
      display: flex;
      align-items: center;
      button,
      a {
        position: relative;
        margin: 0;
      }
      button {
        margin-left: auto;
        &:focus {
          outline: none;
        }
      }
      a {
        display: none;
      }
    }
  }
}


/* bembel nav mobile end */


/* Find A store Form start */
.find-store-container {
	max-width: 1140px;
  @media screen and (max-width: 1680px) {
  	max-width: 80%;
  }
}
#map {
  height: 600px;
  width: 100%;
}
.stores-list {
  height: 505px;
  width: 100%;
  overflow: auto;
  margin: 0;
  li {
    font-family: $secondary-font-family;
    @include res-unit(font-size, 320px, 1920px, 14px, 18px);
    line-height: 1.5;
    color: black;
    padding: rem(30) 0;
    cursor: pointer;
    border-bottom: 1px solid $lighter-highlight;
    transition: $default-transition;
  }
  @media screen and (max-width: 767px) {
    height: 300px;
  }
}

.stores-list li {
    border: 1px solid #ccc; /* Light gray border */
    padding: 10px; /* Add some spacing */
    margin-bottom: 5px; /* Space between list items */
    border-radius: 3px; /* Optional: rounded corners */
}


.findstore-form-wrapper {
  margin: 0 auto;
  display: block;
  float: none!important;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: rem(50) 0;
  overflow: hidden;
  #pac-input {
  	width: 60%;
    margin-bottom: 10px;
    padding: rem(10) rem(15);
    border: 1px solid $lighter-highlight;
    line-height: 1.5;
    color: black;
    font-family: $secondary-font-family;
    @include res-unit(font-size, 320px, 1920px, 16px, 20px);
    &::placeholder {
      line-height: 1.5;
      color: $lighter-highlight;
      font-family: $highlight-color;
      @include res-unit(font-size, 320px, 1920px, 16px, 18px);
    }
  }
  #pac-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  select {
    display: block;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: rem(12) rem(15);
    border: 1px solid #d9d4d4;
    line-height: 1.5;
    width: 40%;
    color: $lighter-highlight;
    @include res-unit(font-size, 320px, 1920px, 16px, 20px);
    position: relative;
    option {
      color: black;
      font-family: $secondary-font-family;
    }
  }
  #label {
    max-width: 100%;
    flex-basis: 100%;
    font-family: $secondary-font-family;
    @include res-unit(font-size, 320px, 1920px, 20px, 24px);
    line-height: 1.5;
    color: black;
    font-weight: 100!important;
  }
  .section-left {
  	width: calc(100% /2 - 20px);
    padding: 0 rem(10);
  } 
  .section-right {
  	width: calc(100% /2 - 20px);
    padding: 0 rem(10);
  }
  @media screen and (max-width: 767px) {
    flex-wrap: wrap;
    .section-left {
      padding: rem(10);
      width: 100%;
    } 
    .section-right {
      width: 100%;
      padding: rem(10);
    }
    #pac-container {
    	flex-direction: column;
    }
    #pac-input {
      width: 100%;
    }
    select {
      width: 100%;
      margin: 0 0 10px 0;
      color: black;
    }
  }
}


select{
  height:52px;
  padding:0px 10px;
}
/* Find A store Form end */


/* blog css start */

.article-list-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1300px;
  margin: 0 auto;
  @media screen and (max-width: 767px) {
  	justify-content: center;
  }
  @media screen and (max-width: 1680px) {
  	max-width: 1150px;
  }
} 
.article-box {
  padding-top: 0!important;
  width: calc(100% / 3 - 50px);
  border: none;
  @media screen and (max-width: 1680px) {
    width: calc(100% / 3 - 25px);
  }
  @media screen and (max-width: 767px) {
    width: calc(100% / 2 - 50px);
  }
  @media screen and (max-width: 576px) {
    width: calc(100% / 1 - 30px);
  }
  &:first-child {
  	padding-top: 0!important;
  }
}
.article-box-image {
/*   max-width: 300px; */
}
.article-box-title {
  font-family: $secondary-font-family;
  @include res-unit(font-size, 320px, 1920px, 14px, 18px);
  line-height: 1.5;
  @media screen and (max-width: 576px) {
    text-align: center;
  }
}
.article-box-content {
}

/* blog css end  */

.item-list-wrapper {
  	border: 1px solid black;
  padding: 20px;
  margin: 0;
  
}
.grid {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
  height: auto!important;
  overflow: hidden;
}
.collection-tabs-wrapper {
  flex-basis: 100%;
  @media screen and (max-width: 767px) {
  	order: 2;
    max-width: 100%;
    ul {
      padding: 5px 0 10px 0;
      margin: 0;
    }
  }


a {
  text-decoration: none;
}

.p1:hover, .p2:hover {
	opacity: .3;
  cursor: pointer;
}

.filters {
	width: 100%;
	text-align: center;
}

ul {
  list-style: none;
  padding: 5px 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  overflow: auto;
}

li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 23px;
  font-size: 14px;
  color: #636363;
  font-weight: 400;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .2em;
  border-bottom: 2px solid transparent;
}

li:hover {
	color: black;
}

li.active {
  color: black;
  font-weight: bold;
  border-bottom: 2px solid black;
}
  
}
.single-content {
  position: relative!important;
  width: calc(100% / 4 - 40px);
  margin: 20px 20px;
  left: 0!important;
  top: 0!important;
  @media screen and (max-width: 767px)  {
    width: calc(100% / 2 - 10px);
    margin: 10px 5px;
  }
  .custom-product-block {
    width: 100%!important;
  }
}


.contact-form-wrapper {
  p {
    @include res-unit(font-size, 320px, 1680px, 18px, 16px);
    line-height: 28px;
    font-family: $base-font-family;
    color: $lighter-color;
    text-align: left;
    @media screen and (max-width: 576px) {
      padding: 0 20px;
    }
  }
  form {
    .large_form {
      width: 100%;
      input,
      textarea {
        width: 100%;
      }
      input,
      textarea {
        margin-bottom: 10px;
        padding: rem(10) rem(15);
        border: 1px solid $lighter-highlight;
        line-height: 1.5;
        color: black;
        font-family: $secondary-font-family;
        @include res-unit(font-size, 320px, 1920px, 16px, 20px);
        &::placeholder {
          line-height: 1.5;
          color: $lighter-highlight;
          font-family: $highlight-color;
          @include res-unit(font-size, 320px, 1920px, 16px, 18px);
        }
      }
    }
    .action_bottom {
      width: 100%;
      input {
        width: 100%;
        background-color: black!important;
      }
    }
  }
}



/* custom scrolbar start */
/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 8px;
}
@media screen and (max-width: 576px) {
  ::-webkit-scrollbar {
    height: 5px;
  }
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* custom scrolbar end */


/*  */
.product-video-wrapper {
  .video-container {
  	width: calc(100%/2 - 20px)!important;
    padding-bottom: 23%!important;
    @media screen and (max-width: 576px) {
      width: 100%!important;
      padding-bottom: 50%!important;
    }
  }
  .travel-video-container  {
  	flex-direction: column;
  }
}
.travel-video-container {
  padding-top: rem(50);
  padding-bottom: rem(30);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .video-container {
    margin: 10px;
    width: calc(100%/2 - 20px);
    padding-bottom: 25%;
    @media screen and (max-width: 576px) {
      width: 100%!important;
      padding-bottom: 50%!important;
    }
  }
}

.product-reviews-container {
  font-family: $secondary-font-family;
  .spr-container {
    border: none;
  }
  .spr-summary-actions-newreview {
  	float: none;
    padding: 5px 15px;
    background-color: black;
    color: white;
    font-weight: normal;
  }
  .spr-summary {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    span {
      margin: 10px;
      @include res-unit(font-size, 320px, 1920px, 14px, 16px);
      font-weight: bold;
    }
    .spr-summary-actions {
      @media screen and (max-width: 576px) {
        display: block;
        > a {
          display: block;
          padding: 15px 15px;
        }
      }
    }
  }
  h2,
  .spr-form-title {
    font-family: $secondary-font-family;
    @include res-unit(font-size, 320px, 1920px, 30px, 40px);
    font-weight: normal;
    line-height: 1.5;
    text-align: center;
    color: black;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    @include res-unit(margin-top, 320px, 1920px, 10px, 40px);
    @include res-unit(margin-bottom, 320px, 1920px, 10px, 20px);
  }
  .spr-form {
    form {
      align-items: center;
      .spr-form-contact {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
      }
      .spr-form-review {
        width: 100%;
      }
    }
    .spr-form-contact-name,
    .spr-form-contact-email,
    .spr-form-review-title,
    .spr-form-review-body,
    .spr-form-review-rating {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      padding: 5px;
      width: 100%;
    }
    .spr-form-review-body {
      .spr-form-input {
        width: 100%;
      }
    }
    .spr-form-actions {
      width: 100%;
      input {
        background-color: black;
        color: white;
        margin-left: auto;
        display: block;
        padding: 10px 60px;
      }
    }
    input,
    textarea {
      margin-bottom: 10px;
      padding: 0.625rem 0.9375rem;
      border: 1px solid #d9d4d4;
      line-height: 1.5;
      color: black;
      font-family: "Poppins",sans-serif;
      font-size: 16px;
    }
  }
  .spr-review-header-byline {
  	line-height: initial;
  }
  .spr-review {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    @media screen and (max-width: 576px) {
      justify-content: center;
      flex-direction: column; 
    }
    .spr-review-content {
      margin-bottom: 0;
      padding: 0 40px;
      text-align: left;
    }
    .spr-review-header {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      text-align: left;
      @media screen and (max-width: 576px) {
        justify-content: center;
        align-items: center; 
      }
    }
    .spr-review-footer {
      text-align: right;
    }
  }
}
.gm-ui-hover-effect {
	min-width: 35px!important;
    top: 0px!important;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* .custom-product-block.product-block[data-product-id="4616041889865"] .reducedfrom > .amount, .custom-product-block.product-block[data-product-id="4616039399497"] .reducedfrom > .amount, .custom-product-block.product-block[data-product-id="4596338294857"] .reducedfrom > .amount, .custom-product-block.product-block[data-product-id="4596334854217"] .reducedfrom > .amount {
    text-decoration: none;
  	color: #1792e6;
    order: 2;
    width: calc(100% / 2 - 20%);
    margin: 0;
    padding: .625rem 0;
    text-align: right;
    font-weight: 700;
    font-style: normal;
} */

/* .custom-product-block.product-block[data-product-id="4616041889865"] .reducedfrom, .custom-product-block.product-block[data-product-id="4616039399497"] .reducedfrom, .custom-product-block.product-block[data-product-id="4596338294857"] .reducedfrom, .custom-product-block.product-block[data-product-id="4596334854217"] .reducedfrom {
	width: max-content;
} */

/* .custom-product-block.product-block[data-product-id="4616041889865"] .price, .custom-product-block.product-block[data-product-id="4616039399497"] .price, .custom-product-block.product-block[data-product-id="4596340916297"] .price, .custom-product-block.product-block[data-product-id="4596338294857"] .price, .custom-product-block.product-block[data-product-id="4596334854217"] .price {
	display: none;
} */

/* .custom-product-block.product-block[data-product-id="4616041889865"] .price, .custom-product-block.product-block[data-product-id="4616039399497"] .price {
	display: none;
} */

/* .custom-product-block.product-block[data-product-id="4616041889865"] .innerer, .custom-product-block.product-block[data-product-id="4616039399497"] .innerer, .custom-product-block.product-block[data-product-id="4596340916297"] .innerer, .custom-product-block.product-block[data-product-id="4596338294857"] .innerer, .custom-product-block.product-block[data-product-id="4596334854217"] .innerer {
	display: flex;
    flex-wrap: unset;
    align-items: center;
} */

/* .custom-product-block.product-block[data-product-id="4616041889865"] .innerer, .custom-product-block.product-block[data-product-id="4616039399497"] .innerer {
	display: flex;
    flex-wrap: unset;
    align-items: center;
} */

.quick-view-container.fancyox-view-detail #sca-qv-sale {
	display: none;
}

form.edit_checkout .section--payment-method .content-box {
 	display: flex;
  	flex-direction: column;
}

form.edit_checkout .section--payment-method .content-box > .div[data-select-gateway="64752058441"], form.edit_checkout .section--payment-method .content-box > .div[data-subfields-for-gateway="64752058441"] {
	order: 2;
}

.bulk-order-page.container {
	max-width: 98%;
  	padding: 0;
}

.bulk-order-page .banner {
	position: relative;
}

.bulk-order-page .banner .text_area {
	position: absolute;
    bottom: 42%;
    left: 30%;
    color: white;
    font-family: 'Poppins';
    line-height: 1;
}

.bulk-order-page .banner .text_area .small-heading {
	font-size: 22px;
}

.bulk-order-page .banner .text_area .big-heading {
	font-size: 57px;
  	font-weight: 500;
}

.bulk-order-page .banner .text_area .text {
	font-size: 10px;
    max-width: 300px;
    line-height: 1.3;
}

.bulk-order-page .banner .text_area .contact_btn {
	margin-top: 13px;
}

.bulk-order-page .banner .text_area .contact_btn a {
	color: white;
    text-decoration: underline;
  	font-family: 'Poppins';
}

.bulk-order-page .col2 .banner .text_area {
	left: 20px;
    bottom: 29px;
}

.bulk-order-page .col2 .banner .text_area .big-heading {
	font-size: 34px;
  	font-weight: 500;
  	margin-bottom: 22px;
}

.bulk-order-page .banner img {
	max-width: 99%;
}

.bulk-order-page .banner3 img {
	margin-top: 0.3%;
}

.bulk-order-page .page_content_area, .bulk-order-page .form_area {
	max-width: 1140px;
  	margin: 81px auto;
}

.bulk-order-page .page_content_area > div {
	max-width: 50%;
  	font-family: 'Poppins';
}

.bulk-order-page h4 {
	font-family: 'Poppins';
  	font-weight: 600;
  	font-size: 33px;
}

.bulk-order-page .contact_area h4 {
	color: white;
  	position: relative;
  	margin: 0 9px;
  	font-weight: 500;
}

.bulk-order-page .form_area h4 {
	margin-bottom: 5px;
  	font-size: 36px;
  	font-weight: 600;
}

.bulk-order-page .page_content_area > div > p {
    color: #999999;
  	font-size: 14px;
    letter-spacing: 0.2px;
}

.bulk-order-page .page_content_area > div > p:nth-of-type(2) {
	color: #666666;
}

.bulk-order-page .contact_area {
	background-color: black;
  	padding: 10px;
}

.bulk-order-page .contact_area > .row {
	justify-content: space-around;
  	padding: 36px 0;
  	align-items: center;
  	border: 1px solid #d84021;
}

.bulk-order-page .contact_area p, .bulk-order-page .contact_area a {
	color: white;
  	font-family: 'Poppins';
  	margin: 0;
  	position: relative;
}

.bulk-order-page .contact_area p, .bulk-order-page .contact_area a {
	font-size: 14px;
    text-transform: uppercase;
}

.bulk-order-page .form_area p {
	font-size: 13px;
    font-family: 'Poppins';
    line-height: 1.6;
}

.bulk-order-page .w-100 {
	width: 100%;
}

.bulk-order-page .form_area textarea {
	width: 95%;
  	height: auto;
}

.bulk-order-page .contact_area .col-6.col1:first-child::before {
	content: '';
    width: 30px;
    height: 36px;
    position: absolute;
    background: #d84021;
    top: 0;
    bottom: 0;
    left: -2px;
    border-radius: 3px;
    margin: auto;
}

.bulk-order-page .col-6.col1:first-child {
	position: relative;
}

.bulk-order-page .form_body form {
	display: block;
}

.bulk-order-page .form_body form textarea {
	font-family: Poppins;
    background-color: #f7f7f7;
    font-size: 15px;
    color: #666666;
    border-radius: 3px;
    border-color: #eee;
}

.bulk-order-page .form_body form input {
	width: 90%;
  	background-color: #f7f7f7;
    border-radius: 3px;
    border-color: #eeeeee;
  	font-family: 'Poppins';
}

.bulk-order-page .form_body form select, .bulk-order-page .form_body form select option {
	width: 96%;
    background-color: #f7f7f7;
    border-radius: 3px;
    border-color: #eee;
    height: 42.4px;
    font-family: 'Poppins';
}

.bulk-order-page .form_body form input[type="submit"] {
	width: 95%;
    background-color: #d84021;
    font-family: 'Poppins';
    font-size: 19px;
  	padding: 18px;
  	border-radius: 5px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.bulk-order-page .form_body form .row {
	margin: 18px 0;
}

.bulk-order-page .form_body form .row .col-md-6 {
	width: 100%;
}

.bulk-order-page .text-center {
	text-align: center;
}

.bulk-order-page .form_area .form_header {
	max-width: 630px;
    margin: auto;
}

.bulk-order-page .form_area label {
	display: block;
  	font-family: 'Poppins';
    color: #666666;
    font-size: 14px;
  	margin-bottom: 9px;
}

.bulk-order-page .form_area form > p {
	color: #2bce2b;
    border: 2px solid #2bce2b;
    padding: 9px;
}

.shopify-challenge__container {
	padding: 50px 0;
}

.shopify-challenge__container form {
	align-items: center;
}

.bulk-order-page .form_area form > .row:first-of-type input[type=number]::-webkit-inner-spin-button, .bulk-order-page .form_area form > .row:first-of-type input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none; 
}

.bulk-order-page .contact_area i {
	font-family: fontawesome;
  	color: white;
  	font-style: normal;
  	font-size: 25px;
    margin-right: 10px;
}

.bulk-order-page .contact_area .col2 {
	display: flex;
  	flex-direction: column;
  	align-items: end;
}

.bulk-order-page .contact_area .col2 > .row:first-child {
	display: flex;
    align-items: center;
}

@media (max-width: 1024px) {
	.bulk-order-page > .banner_area.row {
		flex-direction: column;
	}
  	.bulk-order-page > .banner_area.row > .col2 {
      	display: flex;	
		flex-direction: row;
    }
    .bulk-order-page .banner1 img {
      max-width: 99.5%
    }
    .bulk-order-page .banner3 img {
		margin-top: 0px;
    }
}

@media (max-width: 767px) {
  .bulk-order-page > .banner_area.row > .col2, .bulk-order-page .contact_area > .row, .bulk-order-page .form_body form .row {
  	flex-direction: column;
  }
  .bulk-order-page .form_body form .row {
  	margin: 0;
  }
  .bulk-order-page .form_body form .row .col-md-6 {
  	margin: 9px 0;
  }
  .bulk-order-page .form_body form select, .bulk-order-page .w-100 {
  	width: 95%;
  }
  .bulk-order-page .form_body form input[type=submit] {
  	width: 90%;
    margin: 18px 0;
  }
  .bulk-order-page .banner .text_area {
  	left: 20px;
    bottom: 29px;
  }
  .bulk-order-page .banner img {
  	max-width: 100% !important;
  }
  .bulk-order-page .contact_area h4 {
  	line-height: 1;
    margin-bottom: 18px;
  }
}

@media (max-width: 525px) {
  .bulk-order-page .form_body form select {
  	width: 100%;
  }
  .bulk-order-page .page_content_area {
  	flex-direction: column-reverse;
    align-items: center;
  }
  .bulk-order-page .page_content_area>div {
  	max-width: 90%;
  }
  .bulk-order-page .banner .text_area .big-heading {
  	font-size: 11vw;
  }
}



/* @media(max-width: 580px) {
  .custom-product-block.product-block[data-product-id="4616041889865"] .innerer, .custom-product-block.product-block[data-product-id="4616039399497"] .innerer, .custom-product-block.product-block[data-product-id="4596340916297"] .innerer, .custom-product-block.product-block[data-product-id="4596338294857"] .innerer, .custom-product-block.product-block[data-product-id="4596334854217"] .innerer {
      display: block;
  }
} */


#map .button,#map a.button,#map button,#map input[type=submit],#map input[type=reset],#map input[type=button]{
  min-width:auto !important;
}

.gm-style .gm-style-iw-c
{
  min-width:200px !important;
}

@media screen and (max-width:767px)
{
  #map
  {
    max-height:400px !important;
  }
}


/* Custom CSS */
.layout-container {
  max-width: 1700px!important;
  margin: 0 auto;
}
.carousel-layout {
  overflow: hidden;
}
.carousel-layout .shoulder-text {
  padding-bottom: 40px!important;
}
.category-carousel-layout .product-link {
  position: relative;
  overflow: hidden;
}
.category-carousel-layout .product-link .product-block__detail {
  position: absolute; 
  left: 0;
  top: 20px;
}
.category-carousel-layout .product-link .image-cont {
  max-width: 80%;
  margin-left: auto;
  margin-right: initial;
  padding-bottom: 70px;
}
.category-carousel-layout .product-link .product-block__title {
  font-size: 46px!important;
  width: 300px;
  padding-left: 30px;
  text-align: left;
  line-height: 56px;
}


@media only screen and (max-width: 767.98px) {
  .category-carousel-layout .product-link {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .category-carousel-layout .product-link .product-block__title {
    font-size: 30px!important;
    width: 100%;
    padding-left: 0px;
    line-height: 56px;
    order: 1;
  }
  .category-carousel-layout .product-link .image-cont {
    width: 100%;
    max-width: 100%;
    padding-bottom: 0px;
    order: 2;
  }
  .category-carousel-layout .product-link .product-block__detail {
    position: relative; 
    left: 0;
    top: 0px;
  }
  .info-title,
  .has-paging__title {
    font-size: 32px!important;
  }
  .hometitle {
      margin-bottom: 10px;
  }
}