@charset "UTF-8";
/*
BASE IMPORTS - includes necessary partials like variables, functions, mixins...
Import this for every component
*/
/* =============================================================================
   Colors
   ========================================================================== */
/* =============================================================================
   Fonts
   ========================================================================== */
/* =============================================================================
   Breakpoints
   ========================================================================== */
/* =============================================================================
   Z-indexes
   ========================================================================== */
/* =============================================================================
   Layout
   ========================================================================== */
/* =============================================================================
   Icons
   ========================================================================== */
.fa, .scroll-top:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.fa-paulas-choice-logo:before, .fa-pinterest:before, .fa-comment:before, .fa-search:before, .fa-instagram:before, .fa-twitter:before, .fa-youtube:before, .fa-youtube-play:before, .fa-facebook:before, .fa-close:before, .fa-remove:before, .fa-times:before, .fa-user:before {
  color: #71605f; }

.fa-logo-paulaschoice-stacked:before {
  content: ""; }

.fa-paulas-choice-new-logo:before {
  content: ""; }

.fa-klarna-logo:before {
  content: ""; }

.fa-calendar:before {
  content: ""; }

.fa-clock:before {
  content: ""; }

.fa-savepay:before {
  content: ""; }

.fa-play-circle:before {
  content: ""; }

.fa-menu:before {
  content: ""; }

.fa-paulas-choice-logo:before {
  content: ""; }

.fa-info:before {
  content: ""; }

.fa-empty-star:before {
  content: ""; }

.fa-chat-user:before {
  content: ""; }

.fa-faq:before {
  content: ""; }

.fa-shopping-cart:before {
  content: ""; }

.fa-double-tap:before {
  content: ""; }

.fa-chevron-down:before {
  content: ""; }

.fa-undo:before {
  content: ""; }

.fa-eyedropper:before {
  content: ""; }

.fa-chevron-left:before {
  content: ""; }

.fa-mail:before {
  content: ""; }

.fa-chevron-right:before {
  content: ""; }

.fa-chevron-up:before {
  content: ""; }

.fa-star:before {
  content: ""; }

.fa-star-empty:before {
  content: ""; }

.fa-info-circle:before {
  content: ""; }

.fa-star-half:before {
  content: ""; }

.fa-youtube-play2:before {
  content: ""; }

.fa-pinterest:before {
  content: ""; }

.fa-comment:before {
  content: ""; }

.fa-search:before {
  content: ""; }

.fa-instagram:before {
  content: ""; }

.fa-twitter:before {
  content: ""; }

.fa-youtube:before {
  content: ""; }

.fa-facebook:before {
  content: ""; }

.fa-close:before {
  content: ""; }

.fa-remove:before {
  content: ""; }

.fa-user:before {
  content: ""; }

.fa-send:before {
  content: ""; }

.fa-check:before {
  content: ""; }

.fa-minus:before {
  content: ""; }

.fa-plus:before {
  content: ""; }

.fa-pf-bank-transfer:before {
  content: ""; }

.fa-pf-ideal:before {
  content: ""; }

.fa-pf-mastercard:before {
  content: ""; }

.fa-pf-paypal:before {
  content: ""; }

.fa-pf-sofort:before {
  content: ""; }

.fa-pf-visa:before {
  content: ""; }

.fa-pf-bancontact-mister-cash:before {
  content: ""; }

.fa-heart--inactive:before {
  content: ""; }

.fa-heart--active:before {
  content: ""; }

/*
Animated checkmark icon
To animate, add .animate class to js-success-checkmark
*/
.success-checkmark {
  width: 80px;
  height: 115px; }
  .success-checkmark.animate .check-icon {
    display: block; }
  .success-checkmark .check-icon {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid #00b451; }
    .success-checkmark .check-icon::before {
      top: 3px;
      left: -2px;
      width: 30px;
      transform-origin: 100% 50%;
      border-radius: 100px 0 0 100px; }
    .success-checkmark .check-icon::after {
      top: 0;
      left: 30px;
      width: 60px;
      transform-origin: 0 50%;
      border-radius: 0 100px 100px 0;
      -webkit-animation: rotate-circle 4.25s ease-in;
              animation: rotate-circle 4.25s ease-in; }
    .success-checkmark .check-icon::before, .success-checkmark .check-icon::after {
      content: '';
      height: 100px;
      position: absolute;
      transform: rotate(-45deg); }
    .success-checkmark .check-icon .icon-line {
      height: 5px;
      background-color: #00b451;
      display: block;
      border-radius: 2px;
      position: absolute;
      z-index: 10; }
      .success-checkmark .check-icon .icon-line.line-tip {
        top: 46px;
        left: 14px;
        width: 25px;
        transform: rotate(45deg);
        -webkit-animation: icon-line-tip 0.75s;
                animation: icon-line-tip 0.75s; }
      .success-checkmark .check-icon .icon-line.line-long {
        top: 38px;
        right: 8px;
        width: 47px;
        transform: rotate(-45deg);
        -webkit-animation: icon-line-long 0.75s;
                animation: icon-line-long 0.75s; }
    .success-checkmark .check-icon .icon-circle {
      top: -4px;
      left: -4px;
      z-index: 10;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      position: absolute;
      box-sizing: content-box;
      border: 4px solid rgba(0, 180, 81, 0.5); }
    .success-checkmark .check-icon .icon-fix {
      top: 8px;
      width: 5px;
      left: 26px;
      z-index: 1;
      height: 85px;
      position: absolute;
      transform: rotate(-45deg); }

@-webkit-keyframes rotate-circle {
  0% {
    transform: rotate(-45deg); }
  5% {
    transform: rotate(-45deg); }
  12% {
    transform: rotate(-405deg); }
  100% {
    transform: rotate(-405deg); } }

@keyframes rotate-circle {
  0% {
    transform: rotate(-45deg); }
  5% {
    transform: rotate(-45deg); }
  12% {
    transform: rotate(-405deg); }
  100% {
    transform: rotate(-405deg); } }

@-webkit-keyframes icon-line-tip {
  0% {
    width: 0;
    left: 1px;
    top: 19px; }
  54% {
    width: 0;
    left: 1px;
    top: 19px; }
  70% {
    width: 50px;
    left: -8px;
    top: 37px; }
  84% {
    width: 17px;
    left: 21px;
    top: 48px; }
  100% {
    width: 25px;
    left: 14px;
    top: 45px; } }

@keyframes icon-line-tip {
  0% {
    width: 0;
    left: 1px;
    top: 19px; }
  54% {
    width: 0;
    left: 1px;
    top: 19px; }
  70% {
    width: 50px;
    left: -8px;
    top: 37px; }
  84% {
    width: 17px;
    left: 21px;
    top: 48px; }
  100% {
    width: 25px;
    left: 14px;
    top: 45px; } }

@-webkit-keyframes icon-line-long {
  0% {
    width: 0;
    right: 46px;
    top: 54px; }
  65% {
    width: 0;
    right: 46px;
    top: 54px; }
  84% {
    width: 55px;
    right: 0;
    top: 35px; }
  100% {
    width: 47px;
    right: 8px;
    top: 38px; } }

@keyframes icon-line-long {
  0% {
    width: 0;
    right: 46px;
    top: 54px; }
  65% {
    width: 0;
    right: 46px;
    top: 54px; }
  84% {
    width: 55px;
    right: 0;
    top: 35px; }
  100% {
    width: 47px;
    right: 8px;
    top: 38px; } }

button,
.button,
.buttonstyle,
input[type="button"],
input[type="submit"] {
  box-sizing: border-box;
  -webkit-appearance: none;
  cursor: pointer;
  border-style: solid;
  border-width: 2px;
  display: inline-block;
  font-family: "proxima-nova", Arial, sans-serif;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  box-sizing: border-box;
  background-color: #333133;
  border-color: #333133;
  color: #ffffff;
  transition: all 0.3s;
  padding: 12px 30px 11px; }
  @media screen and (min-width: 768px) {
    button,
    .button,
    .buttonstyle,
    input[type="button"],
    input[type="submit"] {
      padding: 9px 23px 8px;
      font-size: 12px;
      line-height: 12px; } }
  button:hover,
  .button:hover,
  .buttonstyle:hover,
  input:hover[type="button"],
  input:hover[type="submit"] {
    color: #333133;
    background-color: #ffffff;
    text-decoration: none; }

button.inversed,
.button.inversed,
.buttonstyle.inversed,
input[type="button"].inversed,
input[type="submit"].inversed {
  background-color: transparent;
  border-color: #333133;
  color: #333133; }
  button.inversed:hover,
  .button.inversed:hover,
  .buttonstyle.inversed:hover,
  input[type="button"].inversed:hover,
  input[type="submit"].inversed:hover {
    color: #ffffff;
    background-color: #333133;
    text-decoration: none; }
  .pt_storefront .page-content button.inversed, .pt_storefront .page-content
  .button.inversed, .pt_storefront .page-content
  .buttonstyle.inversed, .pt_storefront .page-content
  input[type="button"].inversed, .pt_storefront .page-content
  input[type="submit"].inversed {
    font-weight: 600;
    padding: 10px 32px;
    margin-top: 10px; }

button.secondary,
.button.secondary,
.buttonstyle.secondary,
input[type="button"].secondary,
input[type="submit"].secondary {
  background-color: transparent;
  border-color: #323132;
  color: #323132; }
  button.secondary:hover,
  .button.secondary:hover,
  .buttonstyle.secondary:hover,
  input[type="button"].secondary:hover,
  input[type="submit"].secondary:hover {
    color: #ffffff;
    background-color: #323132; }

button.simple,
.button.simple,
.buttonstyle.simple,
input[type="button"].simple,
input[type="submit"].simple {
  border: none;
  background-color: #ffffff;
  color: #333133; }

button.inverted,
.button.inverted,
.buttonstyle.inverted,
input[type="button"].inverted,
input[type="submit"].inverted {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #333133; }
  button.inverted:hover,
  .button.inverted:hover,
  .buttonstyle.inverted:hover,
  input[type="button"].inverted:hover,
  input[type="submit"].inverted:hover {
    color: #333133;
    background-color: #ffffff;
    border-color: #333133;
    text-decoration: none; }

button.onyx,
.button.onyx,
.buttonstyle.onyx,
input[type="button"].onyx,
input[type="submit"].onyx {
  background-color: #333133;
  border-color: #333133;
  color: #ffffff;
  font-size: 14px; }
  button.onyx:hover,
  .button.onyx:hover,
  .buttonstyle.onyx:hover,
  input[type="button"].onyx:hover,
  input[type="submit"].onyx:hover {
    background-color: #ffffff;
    color: #333133; }

button.white,
.button.white,
.buttonstyle.white,
input[type="button"].white,
input[type="submit"].white {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #333133;
  font-size: 14px; }
  button.white:hover,
  .button.white:hover,
  .buttonstyle.white:hover,
  input[type="button"].white:hover,
  input[type="submit"].white:hover {
    background-color: #333133;
    border-color: #333133;
    color: #ffffff; }

button[disabled], button.disabled,
.button[disabled],
.button.disabled,
.buttonstyle[disabled],
.buttonstyle.disabled,
input[type="button"][disabled],
input[type="button"].disabled,
input[type="submit"][disabled],
input[type="submit"].disabled {
  background-color: #cccccc;
  border-color: #cccccc;
  color: #666666;
  opacity: 0.5; }
  button[disabled]:hover, button.disabled:hover,
  .button[disabled]:hover,
  .button.disabled:hover,
  .buttonstyle[disabled]:hover,
  .buttonstyle.disabled:hover,
  input[type="button"][disabled]:hover,
  input[type="button"].disabled:hover,
  input[type="submit"][disabled]:hover,
  input[type="submit"].disabled:hover {
    background-color: #cccccc;
    border-color: #cccccc;
    color: #666666;
    opacity: 0.5; }

button i.left,
.button i.left,
.buttonstyle i.left,
input[type="button"] i.left,
input[type="submit"] i.left {
  margin-right: 0.6em; }

button i.right,
.button i.right,
.buttonstyle i.right,
input[type="button"] i.right,
input[type="submit"] i.right {
  margin-left: 0.6em; }

.back-button {
  display: none;
  position: fixed;
  left: 0;
  top: 100vh;
  z-index: 170;
  transform: rotate(270deg);
  transform-origin: 0 0;
  width: 100vh;
  text-align: center; }
  @media screen and (min-width: 1180px) {
    .back-button {
      display: block; } }
  .back-button button {
    border: none;
    font-size: 0.782em;
    color: #333133;
    position: relative; }
    .back-button button:after {
      position: absolute;
      bottom: 4px;
      left: 0;
      width: 100%;
      height: 1px;
      background: #333133;
      content: '';
      opacity: 0;
      transition: height 0.3s, opacity 0.3s, transform 0.3s;
      transform: translateY(-10px); }
    .back-button button:hover {
      text-decoration: none; }
      .back-button button:hover:after {
        height: 2px;
        opacity: 1;
        transform: translateY(0); }

.footer-button {
  position: fixed;
  bottom: -20px;
  z-index: 190;
  opacity: 0;
  pointer-events: none;
  transition-delay: 0;
  transition: all 0.3s;
  left: 50%;
  transform: translate(-50%);
  text-transform: uppercase;
  font-size: 0.782em;
  margin: 16px 0 0;
  border: none;
  background-color: #ffffff;
  color: #333133;
  display: none; }
  @media screen and (min-width: 1180px) {
    .footer-button {
      display: block; } }
  .footer-button:after {
    position: absolute;
    top: 70%;
    left: 46%;
    width: 8%;
    height: 1px;
    background: #333133;
    content: '';
    opacity: 0;
    transition: height 0.3s, opacity 0.3s, transform 0.3s;
    transform: translateY(-10px); }
  .footer-button:hover {
    background-color: #ffffff;
    color: #333133; }
    .footer-button:hover:after {
      height: 2px;
      opacity: 1;
      transform: translateY(0); }
  body:not(.footer-fixed) .wrapper:not(.menu-active):not(.sub-menu-active):not(.search-active) .footer-button {
    bottom: 0;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.3s; }

.scroll-top {
  box-sizing: border-box;
  color: #333133;
  position: relative;
  display: block;
  padding-top: 60px;
  overflow: visible;
  margin: 10px; }
  .scroll-top:hover {
    text-decoration: none; }
    .scroll-top:hover:before {
      box-shadow: 1px 0 6px 2px rgba(0, 0, 0, 0.3); }
  .scroll-top:before {
    cursor: pointer;
    content: '';
    width: 50px;
    height: 50px;
    background-color: #333133;
    color: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block; }
  .scroll-top:after {
    content: "";
    display: block;
    color: #ffffff;
    font-size: 30px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%); }

.cart-paypal-container {
  width: 300px;
  margin-left: auto; }
  @media screen and (min-width: 768px) {
    .cart-paypal-container.top {
      display: none; } }
  @media screen and (max-width: 768px) {
    .cart-paypal-container {
      width: 100%; } }
  .cart-paypal-container .paypal-or {
    text-transform: uppercase;
    font-weight: bold;
    display: block;
    margin-left: auto;
    margin-bottom: 5px; }
    @media screen and (max-width: 768px) {
      .cart-paypal-container .paypal-or {
        width: 100%;
        text-align: center; } }
  .cart-paypal-container .paypal-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #ffc439;
    color: #000000;
    height: 45px;
    min-height: 30px;
    max-height: 55px;
    position: relative;
    border: none;
    vertical-align: top;
    cursor: pointer;
    overflow: hidden; }
    @media screen and (max-width: 768px) {
      .cart-paypal-container .paypal-button {
        margin: 0 auto 20px; } }
    .cart-paypal-container .paypal-button:hover {
      -webkit-filter: brightness(0.95);
              filter: brightness(0.95); }
    .cart-paypal-container .paypal-button .paypal-logo {
      margin-right: 10px;
      height: 21px;
      max-height: 27px;
      min-height: 18px; }
    .cart-paypal-container .paypal-button .button-text {
      text-decoration: none;
      font-size: 16px;
      margin-top: 2px; }

.cookie-settings {
  background-color: transparent;
  color: #f7edeb;
  border: 2px solid #f7edeb; }
  .cookie-settings:hover {
    background-color: #f7edeb; }

/*
SPECIFIC IMPORTS - includes necessary partials specific to this particular component
(component styles like image, text, product tiles, ...)
*/
.component-figure {
  max-width: 100%;
  margin: 0; }
  .component-figure img {
    width: 100%;
    max-width: 100%; }

.homepage-filters {
  max-width: 940px;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr 8px 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  margin-top: 25px;
  margin-bottom: 25px; }
  @media screen and (min-width: 1180px) {
    .homepage-filters {
      max-width: 1180px; } }
  @media screen and (min-width: 768px) {
    .homepage-filters {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-column-gap: 15px;
      grid-row-gap: 15px; } }
  @media screen and (min-width: 1180px) {
    .homepage-filters {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-column-gap: 20px;
      grid-row-gap: 20px; } }
  .homepage-filters img {
    max-width: 100%;
    width: 100%; }
  .homepage-filters .filters {
    grid-column: 1/-1;
    margin: 0;
    padding: 25px 15px;
    background-color: #f7edeb;
    position: relative;
    text-align: left; }
    @media screen and (min-width: 768px) {
      .homepage-filters .filters {
        padding: 35px; } }
    .homepage-filters .filters h2 {
      color: #333133;
      font-size: 18px;
      margin: 0 0 20px;
      text-transform: none; }
      @media screen and (min-width: 768px) {
        .homepage-filters .filters h2 {
          font-size: 22px; } }
    .homepage-filters .filters .skintype-link {
      display: none;
      font-weight: 400; }
      @media screen and (max-width: 768px) {
        .homepage-filters .filters .skintype-link {
          position: static;
          text-align: right;
          width: 50%; } }
      @media screen and (min-width: 768px) {
        .homepage-filters .filters .skintype-link {
          display: block;
          float: right; } }
    .homepage-filters .filters .select-wrapper {
      grid-column: auto / span 4; }
    .homepage-filters .filters select {
      font-size: 14px;
      cursor: pointer;
      width: 100%;
      max-width: none; }
      @media screen and (min-width: 768px) {
        .homepage-filters .filters select {
          padding-top: 6px;
          padding-bottom: 6px; } }
    .homepage-filters .filters .button {
      border-radius: 0;
      white-space: normal;
      max-width: none; }
      @media screen and (min-width: 768px) {
        .homepage-filters .filters .button {
          font-size: 14px;
          white-space: nowrap; } }
    .homepage-filters .filters label {
      font-weight: 400;
      margin-bottom: 12px; }
      @media screen and (min-width: 768px) {
        .homepage-filters .filters label {
          margin-bottom: 5px; } }
  .homepage-filters .homepage-filters-items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; }
    @media screen and (min-width: 768px) {
      .homepage-filters .homepage-filters-items {
        flex-direction: row; } }
    .homepage-filters .homepage-filters-items .select-wrapper {
      flex: 1;
      margin-bottom: 8px; }
      @media screen and (min-width: 768px) {
        .homepage-filters .homepage-filters-items .select-wrapper {
          margin-bottom: 0;
          margin-right: 15px; } }
      @media screen and (min-width: 1180px) {
        .homepage-filters .homepage-filters-items .select-wrapper {
          margin-right: 20px; } }