* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.slick-list { 
  background:#fff !important;
}

#cookie-law-info-bar {
  @media screen and (max-width: $bp-tablet) {
    padding-right: 80px;
  }
}

// Main container
#main-container {
  max-width: 100%;
  margin: 0 auto;
  // padding-left: 30px;
  // padding-right: 30px;
  display: block;
  position: relative;
  background: $white;
  overflow: hidden;
  padding-left: 4rem;
  padding-right: 4rem;
  @media screen and(max-width: $bp-mobile) {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .inner--main {
    max-width: 144rem;
    margin: 0 auto;
  }
}

// Preloader
body.locked {
  position: relative;
  overflow: hidden;
}

.shadow {
  content:'';
  @extend .fill;
  z-index: 9998;
  background-color: rgba($black, .75);
  display: none;
  // transition: all .4s $easing;
}

body.popup {
  position: relative;
  overflow: hidden;
}

::-moz-selection {
	background-color: rgba($primary-color, 0.8);
	color: $white;
}
::selection {
	background-color: rgba($primary-color, 0.8);
	color: $white;
}

figure {
  @extend .reset;
}

hr {
  border-color: $gray-light;
}

// Progressbar
.progressbar {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background-color: $primary-color;
}

body {
  font-weight: 100;
}

a {
  text-decoration: none;
  font-weight: 100;
  &.custom-underline {
    text-decoration: none;
    color: $black;
    position: relative;
    transition: all .4s $easing;
    &:after {
      content:'';
      height: 1px;
      position: absolute;
      left: 25%;
      right: 25%;
      opacity: 0;
      bottom: .35rem;
      background-color: $black;
      transition: all .4s $easing;
    }
    &:hover, &.lined-up {
      &:after {
        left: 0;
        right: 0;
        opacity: 1;
      }
    }
    &.gold {
      color: $primary-color;
      &:after {
        background-color: $primary-color;
      }
    }
  }
}

.btn {
  text-transform: none;
  border: none;
  height: auto;
  font-size: 1em;
  line-height: 3rem;
  padding: 0 1rem;
  font-family: $font-family-sans-serif;
  font-weight: 500;
  transition: all .4s $easing;
  &.big {
    padding: 1.5rem 2.5rem;
  }
  &.btn-primary {
    border-radius: 0;
    color: $white;
    background-color: $primary-color;
    &:hover {
      background-color: $black;
    }
  }
  &.boxed {
    display: inline-block;
    text-transform: uppercase;
    // font-size: 1.15em;
    letter-spacing: .1rem;
    line-height: 1em;
    padding: 1.5rem 1.5rem;
    min-width: 25rem;
    position: relative;
    text-align: center;
    transition: all .4s $easing;
    span {
      position: relative;
      z-index: 2;
    }
    &:after {
      content:'';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: .4rem;
      background-color: $black;
      transition: all .4s $easing;
      z-index: 0;
    }
    &:before {
      content:'';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 0rem;
      background-color: $primary-color;
      transition: all .3s $easing;
      z-index: 1;
    }
    &:hover {
      background-color: $primary-color;
      &:after {
        height: 100%;
      }
      &:before {
        height: .4rem;
        transition: all .3s $easing 0.2s;
      }
    }
    &:disabled {
      color: $white;
      &:after {
        height: .4rem;
      }
      &:before {
        height: 0;
      }
    }
  }
}

.text-wrapper {
  font-size: 1.5rem;
  a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.clearfix {
  &:after {
    display: block;
    content: "";
    clear: both;
  }
}

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

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.reset {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  font-size: 100%;
  border: 0 none;
  outline: 0;
}

.bg-cover {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

h1, h2, h3, h4, h5, h6 {
  font-family: $font-family-serif;
}

.row.center-row {
  margin: auto;
  >[class*=col] {
    float: none;
    margin: 0 auto;
  }
}

.custom-container {
  width: 100%;
  @media screen and ($bp-larger-than-mobile) {
    max-width: 100%;
  }
  @media screen and ($bp-larger-than-phablet) {
    max-width: $bp-phablet;
  }
  @media screen and ($bp-larger-than-tablet) {
    max-width: $bp-tablet;
  }
  @media screen and ($bp-larger-than-desktop) {
    max-width: $bp-desktop;
  }
  &.small {
    @media screen and ($bp-larger-than-mobile) {
      max-width: 70%;
    }
    // @media screen and ($bp-larger-than-phablet) {
    //   max-width: calc($bp-phablet/2);
    // }
    // @media screen and ($bp-larger-than-tablet) {
    //   max-width: calc($bp-tablet/2);
    // }
    // @media screen and ($bp-larger-than-desktop) {
    //   max-width: calc($bp-desktop/2);
    // }
  }
}

.archive .products {
  display: flex !important;
  flex-wrap: wrap;
}
