@charset "UTF-8";

/*  --- CSS RESET ---  */
* {
  margin: 1;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  list-style: none;
  border-spacing: 0;
  border-collapse: collapse;
  box-sizing: border-box;
  font-family: var(--sub-font);
  font-size: var(--font-size-s);
  font-style: normal;
  line-height: 1;
}
body.open-menu {
  overflow: hidden;
}

/*  --- BASIC ---  */
.clearer { display: block; float: none; clear: both; width: 100%; height: auto; }
.clear-left { clear: left !important; }
.clear-right { clear: right !important; }
hr { background: var(--lightgrey-color) }
.is-fullwidth {  width: 100% !important }
.line-divider, hr {
  background-color: var(--white-color);
  border: none;
  display: block;
  height: 1px;
  margin: 0;
  margin-top: var(--distance-1);
  margin-bottom: var(--distance-1);
}
.hr-black {
  background: var(--lightgrey-color);
}
.underline-cont {
  border-bottom: 1px solid var(--black-color);
  width: 10%;
  margin: 0px auto;
  margin-top: 10px;
}
.text-justified, .text-justified * {
  text-align: justify !important;
}
.block { display: block !important; }
.inline-block { display: inline-block !important; }
.inline { display: inline !important; }
.float-right { float: right !important; }
.float-left { float: left !important; }
.float-none { float: none !important; }
.position-center {
  display: block;
  float: none;
  clear: both;
  margin-right: auto;
  margin-left: auto;
}
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
section { position: relative; width: 100%; /*padding: 150px var(--distance-2);*/ }
section.small-section { padding: 75px var(--distance-2); }
section.large-section { padding: 200px var(--distance-2); }
section.no-padding { padding: 0 var(--distance-2) !important; }
.wrap { clear: both; float: none; width: 90%; max-width: 1620px; margin: 0 auto; height:100%; }
.wrap-small { clear: both; float: none; width: 100%; max-width: 1280px; margin: 0 auto; height:100%; }
.wrap-vertical { padding-top: var(--distance-35); padding-bottom: var(--distance-35) }
.wrap-vertical-top-inner { padding-top: var(--distance-35); }
.wrap-vertical-bot-inner { padding-bottom: var(--distance-35); }
.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.half-width { width: 50% }
@media screen and (max-width: 768px) {
  .wrap-vertical-top-inner { padding-top: var(--distance-175); }
  .wrap-vertical-bot-inner { padding-bottom: var(--distance-175); }
}
.width-auto { width: auto !important; }

/*  --- HIDE ---  */
.hidden { display: none !important; }
@media screen and (min-width: 1081px) { .hidden-desktop { display: none !important; } }
@media screen and (max-width: 1080px) and (min-width: 769px) { .hidden-tablet { display: none !important; } }
@media screen and (max-width: 768px) { .hidden-mobile { display: none !important; } }
@media screen and (min-width: 501px) { .show-small-mobile { display: none !important; } }
@media screen and (max-width: 500px) { .show-small-mobile { display: block !important; } .hidden-small-mobile { display: none !important; } }

/*  --- NOTIFICATION ---  */
.notification {
  background-color: var(--lightgrey-color);
  padding: var(--distance-1);
  border-radius: var(--border-radius);
}
.notification.is-success {
  background-color: var(--success-color);
}
.center {
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 1081px) {
  .text-justified-desktop, .text-justified-desktop * {
    text-align: justify !important;
  }
  .float-right-desktop { float: right !important; }
  .float-left-desktop { float: left !important; }
  .float-none-desktop { float: none !important; }
}
@media screen and (max-width: 1080px) and (min-width: 769px) {
  .text-justified-tablet, .text-justified-tablet * {
    text-align: justify !important;
  }
  .float-right-tablet { float: right !important; }
  .float-left-tablet { float: left !important; }
  .float-none-tablet { float: none !important; }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .hidden-tablet { display: none !important; }
}
@media screen and (min-width: 769px) {
  .half-width-desktop { width: 50%; }
  .hidden-desktop { display: none !important; }
  .center-container {
    width: 75%;
    margin: 0px auto;
    max-width: 870px;
  }
}
@media screen and (max-width: 768px) {
  .hidden-mobile { display: none !important; }
  .float-right-mobile { float: right !important; }
  .float-left-mobile { float: left !important; }
  .float-none-mobile { float: none !important; }
  .wrap-vertical { padding-top: var(--distance-15); padding-bottom: var(--distance-15) }
  .text-justified-mobile, .text-justified-mobile * {
    text-align: justify !important;
  }
  .is-fullwidth-mobile {
    width: 100% !important;
  }
  .text-center-mobile {
    text-align: center;
  }
}
@media screen and (min-width: 1024px) {
  .hidden-touch {
    display: none;
  }
}

/*  --- SCROLLBAR / SELECTION ---  */
* { scrollbar-color: var(--main-color) var(--white-bg); scrollbar-width: thin !important; }
::-webkit-scrollbar { width: 4px; height: 4px; right: 0; top: 0; background: var(--white-bg); overflow: overlay; }
::-webkit-scrollbar-track { opacity: 0; }
::-webkit-scrollbar-thumb { width: 4px; height: 4px; margin-right: 4px; background: var(--main-color); border-radius: 5px; }
::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
::-webkit-scrollbar-corner { background-color: transparent; }
.search-preview::-webkit-scrollbar { right: -50px; margin-right: -50px; }
::selection { background: var(--main-color); color: var(--white-color); }
:not(input):focus { outline: none; border: none; }
/*:focus { outline: none !important; }*/
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {  -webkit-appearance: none;  margin: 0; }
input[type=number] { -moz-appearance: textfield; }
/*input { border-radius: 0px !important; }*/
input[type=text] { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; }

/*  --- FONTS ---  */
.font-size-xxl { font-size: var(--font-size-xxl)!important; line-height: 1.25; }
.font-size-xl { font-size: var(--font-size-xl)!important; }
.font-size-l { font-size: var(--font-size-l)!important; }
.font-size-m { font-size: var(--font-size-m)!important; }
.font-size-s { font-size: var(--font-size-s)!important; }
.font-size-xs { font-size: var(--font-size-xs)!important; }
.font-size-xxs { font-size: var(--font-size-xxs)!important; }
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .font-size-xxl-tablet { font-size: var(--font-size-xxl)!important; line-height: 1.25; }
  .font-size-xl-tablet { font-size: var(--font-size-xl)!important; }
  .font-size-l-tablet { font-size: var(--font-size-l)!important; }
  .font-size-m-tablet { font-size: var(--font-size-m)!important; }
  .font-size-s-tablet { font-size: var(--font-size-s)!important; }
  .font-size-xs-tablet { font-size: var(--font-size-xs)!important; }
  .font-size-xxs-tablet { font-size: var(--font-size-xxs)!important; }
}
@media screen and (max-width: 768px) {
  .font-size-xxl-mobile { font-size: var(--font-size-xxl)!important; line-height: 1.25; }
  .font-size-xl-mobile { font-size: var(--font-size-xl)!important; }
  .font-size-l-mobile { font-size: var(--font-size-l)!important; }
  .font-size-m-mobile { font-size: var(--font-size-m)!important; }
  .font-size-s-mobile { font-size: var(--font-size-s)!important; }
  .font-size-xs-mobile { font-size: var(--font-size-xs)!important; }
  .font-size-xxs-mobile { font-size: var(--font-size-xxs)!important; }
}
.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }
.line-height-s, .line-height-s * { line-height: var(--line-height-s); }
.line-height-m, .line-height-m * { line-height: var(--line-height-m); }
.line-height-l, .line-height-l * { line-height: var(--line-height-l); }
.no-text-decoration, .no-text-decoration * { text-decoration: none !important; }
.no-text-transform, .no-text-transform * { text-transform: none !important; }
.no-letter-spacing, .no-letter-spacing * { letter-spacing: 0 !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--main-font); font-weight: 700; }
p { font-size: var(--font-size-s); }
span { font-size: inherit }
a { font-size: inherit; }
.flowtext, .flowtext div, .flowtext p, .flowtext li, .flowtext h3 {
  font-size: var(--font-size-s);
  color: var(--grey-color);
  line-height: 1.5;
}
.flowtext h1 {
  margin-top: var(--distance-3);
  font-size: var(--font-size-xxl);
  font-weight: 700;
  color: var(--main-color);
}
.flowtext h2 {
  margin-top: var(--distance-15);
  margin-bottom: var(--distance-025);
  font-size: var(--font-size-l);
  font-weight: 700;
  color: var(--main-color);
}
.flowtext h3 {
  margin-top: var(--distance-15);
  font-size: var(--font-size-m);
  font-weight: 700;
  color: var(--black-color);
}
.flowtext ul {
  display: block !important;
  float: none !important;
  clear: both !important;
  margin-top: var(--distance-1) !important;
  margin-bottom: var(--distance-1) !important;
  margin-left: 0  !important;
}
.flowtext ul li {
  display: block !important;
  margin-left: var(--distance-15) !important;
  margin-bottom: var(--distance-05) !important;
  color: var(--grey-color) !important;
}
.flowtext ul li:last-of-type {
  margin-bottom: 0 !important;
}
.flowtext ul li:before {
  display: block;
  content: '';
  float: left;
  margin-left: var(--negative-distance-15);
  width: 8px;
  height: 8px;
  margin-top: var(--distance-05);
  border-radius: 2px;
  background: var(--main-color);
}
.flowtext ul ul li:before {
  border-radius: 50%;
}
.flowtext ul ul ul li:before {
  border-radius: 2px;
  background: transparent;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--black-color);
}
.flowtext ul ul ul ul li:before {
  border-radius: 50%;
  background: transparent;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--black-color);
}
.flowtext ul li span {
  font-family: var(--sub-font) !important;
  font-size: var(--font-size-s) !important;
  color: var(--grey-color) !important;
}
.flowtext ul.datasheet-listed li {
  position: relative;
}
.flowtext ul.datasheet-listed li:before {
  display: block;
  content: '';
  width: 16px;
  height: 20px;
  margin-top: var(--distance-025);
  position: absolute;
  top: 0;
  left: 0;
  background: var(--documents-icon);
  background-repeat: no-repeat;
  background-size: contain;
}
.flowtext a {
  color: var(--main-color);
  text-decoration: underline;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.flowtext a:hover {
  color: var(--sub-color);
}
.datasheet-listed a {
  color: var(--grey-color);
  text-decoration: none;
  transition: color 0.3s ease;
}
.datasheet-listed a:hover {
  color: var(--black-color);
}
.uppercase, .uppercase * { text-transform: var(--text-transform); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
@media screen and (max-width: 1080px) and (min-width: 769px) {
  .text-center-tablet { text-align: center; }
  .text-right-tablet { text-align: right; }
  .text-left-tablet { text-align: left; }
}
@media screen and (max-width: 768px) {
  .text-center-mobile { text-align: center; }
  .text-right-mobile { text-align: right; }
  .text-left-mobile { text-align: left; }
}

/*  --- COLORS / BACKGROUNDS ---  */
.main-cl { color: var(--main-color) !important; }
.sub-cl { color: var(--sub-color) !important; }
.sub2-cl { color: var(--sub2-color) !important; }
.sub3-cl { color: var(--sub3-color) !important; }
.sub4-cl { color: var(--sub4-color) !important; }
.white-cl { color: var(--white-color) !important; }
.light-cl { color: var(--light-color) !important; }
.lightgrey-cl { color: var(--lightgrey-color) !important; }
.brightgrey-cl { color: var(--brightgrey-color) !important; }
.grey-cl { color: var(--grey-color) !important; }
.dullgrey-cl { color: var(--dullgrey-color) !important; }
.darkgrey-cl { color: var(--darkgrey-color) !important; }
.dark-cl { color: var(--dark-color) !important; }
.black-cl { color: var(--black-color) !important; }
.sale-cl { color: var(--sale-color) !important; }
.success-cl { color: var(--success-color) !important; }
.warning-cl { color: var(--warning-color) !important; }
.dark-warning-cl { color: var(--dark-warning-color) !important; }
.danger-cl { color: var(--danger-color) !important; }
.dark-danger-cl { color: var(--dark-danger-color) !important; }
.main-bg { background-color: var(--main-color) !important; }
.sub-bg { background-color: var(--sub-color) !important; }
.sub2-bg { background-color: var(--sub2-color) !important; }
.sub3-bg { background-color: var(--sub3-color) !important; }
.sub4-bg { background-color: var(--sub4-color) !important; }
.alert-bg { background-color: var(--alert-color) !important; }
.white-bg { background-color: var(--white-color) !important; }
.light-bg { background-color: var(--light-color) !important; }
.lightgrey-bg { background-color: var(--lightgrey-color) !important; }
.brightgrey-bg { background-color: var(--brightgrey-color) !important; }
.grey-bg { background-color: var(--grey-color) !important; }
.dullgrey-bg { background-color: var(--dullgrey-color) !important; }
.darkgrey-bg { background-color: var(--darkgrey-color) !important; }
.dark-bg { background-color: var(--dark-color) !important; }
.black-bg { background-color: var(--black-color) !important; }
.sale-bg { background-color: var(--sale-color) !important; }
.success-bg { background-color: var(--success-color) !important; }
.warning-bg { background-color: var(--warning-color) !important; }
.dark-warning-bg { background-color: var(--dark-warning-color) !important; }
.danger-bg { background-color: var(--danger-color) !important; }
.dark-danger-bg { background-color: var(--danger-color) !important; }
.transparent-bg { background-color: transparent !important; }
.main-bc { border-color: var(--main-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.sub-bc { border-color: var(--sub-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.sub2-bc { border-color: var(--sub2-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.sub3-bc { border-color: var(--sub3-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.sub4-bc { border-color: var(--sub4-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.alert-bc { border-color: var(--alert-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.danger-bc { border-color: var(--danger-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.white-bc { border-color: var(--white-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.light-bc { border-color: var(--light-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.lightgrey-bc { border-color: var(--lightgrey-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.brightgrey-bc { border-color: var(--brightgrey-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.grey-bc { border-color: var(--grey-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.dullgrey-bc { border-color: var(--dullgrey-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.darkgrey-bc { border-color: var(--darkgrey-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.dark-bc { border-color: var(--dark-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.black-bc { border-color: var(--black-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.sale-bc { border-color: var(--sale-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.success-bc { border-color: var(--success-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.warning-bc { border-color: var(--warning-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.dark-warning-bc { border-color: var(--dark-warning-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.danger-bc { border-color: var(--danger-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.dark-danger-bc { border-color: var(--dark-danger-color) !important; border-width: var(--border-width); border-style: var(--border-style); }
.transparent-bc { border-color: transparent !important; border-width: var(--border-width); border-style: var(--border-style); }

/*  --- PRODUCT DIMENSION COLLORS ---  */
.product-dimension.value-Schwarz { color: var(--white-color) !important; background-image: var(--select-arrow-white); background-color: var(--black-color) !important; border-color: var(--black-color) !important; }
.product-dimension.value-Grau { color: var(--white-color) !important; background-image: var(--select-arrow-white); background-color: var(--grey-color) !important; border-color: var(--grey-color) !important; }
.product-dimension.value-Weiß { color: var(--black-color) !important; background-color: var(--white-color) !important; border-color: var(--black-color) !important; }
.product-dimension.value-Braun { color: var(--white-color) !important; background-image: var(--select-arrow-white); background-color: var(--brown-color) !important; border-color: var(--brown-color) !important; }
.product-dimension.value-Beige { color: var(--white-color) !important; background-image: var(--select-arrow-white); background-color: var(--beige-color) !important; border-color: var(--beige-color) !important; }
.product-dimension.value-Blau { color: var(--white-color) !important; background-image: var(--select-arrow-white); background-color: var(--blue-color) !important; border-color: var(--blue-color) !important; }
.product-dimension.value-Petrol { color: var(--white-color) !important; background-image: var(--select-arrow-white); background-color: var(--petrol-color) !important; border-color: var(--petrol-color) !important; }
.product-dimension.value-Türkis { color: var(--white-color) !important; background-image: var(--select-arrow-white); background-color: var(--teal-color) !important; border-color: var(--teal-color) !important; }
.product-dimension.value-Grün { color: var(--white-color) !important; background-image: var(--select-arrow-white); background-color: var(--green-color) !important; border-color: var(--green-color) !important; }
.product-dimension.value-Oliv { color: var(--white-color) !important; background-image: var(--select-arrow-white); background-color: var(--olive-color) !important; border-color: var(--olive-color) !important; }
.product-dimension.value-Gelb { color: var(--black-color) !important; background-color: var(--yellow-color) !important; border-color: var(--yellow-color) !important; }
.product-dimension.value-Orange { color: var(--white-color) !important; background-image: var(--select-arrow-white); background-color: var(--orange-color) !important; border-color: var(--orange-color) !important; }
.product-dimension.value-Rot { color: var(--white-color) !important; background-image: var(--select-arrow-white); background-color: var(--red-color) !important; border-color: var(--red-color) !important; }
.product-dimension.value-Pink { color: var(--black-color) !important; background-color: var(--pink-color) !important; border-color: var(--pink-color) !important; }
.product-dimension.value-Lila { color: var(--white-color) !important; background-image: var(--select-arrow-white); background-color: var(--purple-color) !important; border-color: var(--purple-color) !important; }
.product-dimension.value-Gold { color: var(--white-color) !important; background-image: var(--select-arrow-white); background-color: var(--gold-color) !important; border-color: var(--gold-color) !important; }
.product-dimension.value-Silber { color: var(--black-color) !important; background-color: var(--silver-color) !important; border-color: var(--silver-color) !important; }

/*  --- BLUR ---  */
.blur-overlay {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 7777;
  visibility: hidden;
  background: #00000050;
  backdrop-filter: blur(5px);
}
.blur-overlay.blurred {
  display: block;
  visibility: visible;
  opacity: 1;
}

/*  --- LANDING PAGE ---  */
.landing-page-background {
  display: block;
  position: fixed;
  z-index: -1;
  width: 100%;
  min-height: 100vh;
}
.landing-page-background img {
  display: block;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100vh;
}
.landing-page-container {
  width: 90%;
  max-width: 480px;
  height: auto;
  max-height: 90vh;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.landing-page-container.registration {
  max-width: 640px;
}
.landing-page-logo img, .landing-page-logo svg {
  display: block;
  margin-right: auto;
  margin-bottom: var(--distance-2);
  margin-left: auto;
}
.landing-page-logo svg {
  max-width: 200px;
}
.landing-page-logo img {
  display: block;
  margin-right: auto;
  margin-bottom: var(--distance-2);
  margin-left: auto;
}
.landing-page-image {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-bottom: -1px;
}
.landing-page-image img {
  display: block;
  width: 100%;
  height: auto;
}
.landing-page-container-outer {
  box-shadow: 0px 5px 4px 4px #00000025;
  overflow: auto;
  max-height: 69vh;
}
.landing-page-container-inner {
  max-height:69vh;
  overflow: scroll;
  background: var(--white-color);
  padding-top: var(--distance-3);
  padding-right: var(--distance-4);
  padding-bottom: var(--distance-3);
  padding-left: var(--distance-4);
  box-shadow: 0px 5px 4px 4px #00000025;
}
.landing-page-container.registration .landing-page-container-inner {
  padding-top: var(--distance-4);
  padding-right: var(--distance-4);
  padding-bottom: var(--distance-4);
  padding-left: var(--distance-4);
}
.landing-page-headline {
  font-size: var(--font-size-l);
  font-weight: 700;
  text-align: center;
  color: var(--main-color);
  margin-bottom: var(--distance-15);
}
.landing-page-container .button {
  margin-top: var(--distance-1);
  margin-left: auto;
  margin-right: auto;
}
.landing-page-container .input {
  text-align: center;
}
.landing-page-container-inner .position-center {
  width: 246px;
}
.landing-page-login-area .checkbox-complete {
  display: block;
  float: none;
  width: 303px;
  margin-right: auto;
  margin-left: auto;
}
.landing-page-login-area .large-checkbox .checkbox-complete {
  width: 100%;
}
.large-checkbox input[type="checkbox"] + label, .large-checkbox input[type="checkbox"] + span {
  height: auto;
}
/*.landing-page-container .input-column-2 {
width: 100%;
margin-right: 0;
}
.landing-page-container .form-style .select {
width: 100%;
text-align: center;
}*/
@media screen and (max-width: 768px) {
  .landing-page-background {
    height: auto;
    min-height: initial;
  }
  .landing-page-container-outer {
    max-height: unset;
  }
  .landing-page-background img {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .landing-page-container {
    position: relative;
    top: 0;
    left: 0;
    max-height: unset;
    transform: translate(0, 0);
    margin: 0 auto;
    padding-top: var(--distance-2);
    padding-bottom: var(--distance-1);
  }
  .landing-page-container-inner {
    max-height: unset;
  }
  .landing-page-container-inner, .landing-page-container.registration .landing-page-container-inner {
    padding-top: var(--distance-15);
    padding-right: var(--distance-1);
    padding-bottom: var(--distance-15);
    padding-left: var(--distance-1);
  }
  .landing-page-background img {
    height: 100%;
  }
  .landing-page-login-area .checkbox-complete {
    width: 100%;
  }
}

/*  --- HOT OFFERS ---  */
.hot-offers {
  display: block;
  width: 100%;
  padding-top: var(--distance-05);
  padding-bottom: var(--distance-05);
  background: var(--main-color);
  text-decoration: none;
  -webkit-transition: max-height 0.3s ease, padding 0.3s ease;
  -moz-transition: max-height 0.3s ease, padding 0.3s ease;
  -ms-transition: max-height 0.3s ease, padding 0.3s ease;
  -o-transition: max-height 0.3s ease, padding 0.3s ease;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.scrolled .hot-offers {
  max-height: 0px;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.hot-offers p {
  color: var(--white-color);
  text-align: center;
  line-height: var(--line-height-s);
  text-decoration: none;
}

/*  --- LANGUAGE SELECTION ---  */
.site-language {
  display: block;
  float: right;
  width: auto;
  height: 16px;
  margin-top: 7.5px;
}
.site-language .language-select {
  display: none;
  float: right;
  -webkit-transition: opacity 0.3s ease, margin 0.3s ease;
  -moz-transition: opacity 0.3s ease, margin 0.3s ease;
  -ms-transition: opacity 0.3s ease, margin 0.3s ease;
  -o-transition: opacity 0.3s ease, margin 0.3s ease;
  transition: opacity 0.3s ease, margin 0.3s ease;
}
.site-language .language-select.active-language {
  display: block;
}
.site-language .language-select img {
  float: right;
  width: 20px;
  height: 16px;
  /*filter: grayscale(100%);*/
  -webkit-transition: filter 0.3s ease;
  -moz-transition: filter 0.3s ease;
  -ms-transition: filter 0.3s ease;
  -o-transition: filter 0.3s ease;
  transition: filter 0.3s ease;
}
.site-language:hover .language-select img {
  filter: grayscale(0%);
}
.site-language .site-language-setting {
  float: right;
  width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity 0.3s ease, width 0.3s ease, margin 0.3s ease;
}
.site-language:hover .site-language-setting {
  width: auto;
  opacity: 1;
  visibility: visible;
}
.site-language .site-language-setting .language-select {
  display: block;
  margin-right: var(--distance-05);
}
.site-language .site-language-setting .language-select.active-language {
  display: none;
}

/*  --- LANGUAGE SELECTION MENU ---  */
.site-language-menu {
  position: relative;
  display: block;
  float: right;
  width: auto;
  height: 35px;
  padding: 7.5px 0 7.5px 7.5px;
  color: var(--black-color);    /*  ---by HR; orig: var(--brightgrey-color) ---  */ 
  cursor: pointer;
  transition: color 0.3s ease;
}
.site-language-menu .site-language-trigger {
  font-size: var(--font-size-xs);
  margin-top: 3px;
}
.site-language-menu .site-language-trigger svg {
  font-size: 14px;
  margin-top: -2px;
}
.site-language-menu:hover {
  color: var(--light-color);    /*  ---by HR; orig: var(--black-color) ---  */ 
}
.site-language-menu .site-language-dropdown {
  position: absolute;
  right: var(--negative-distance-1);
  top: -100%;
  z-index: 9999;
  width: 105px;
  height: auto;
  padding: var(--distance-1);
  background: var(--lightgrey-color);
  box-shadow: 0 0.4rem 0.6rem #00000008;
  visibility: hidden;
  opacity: 0;
}
.site-language-menu .site-language-dropdown::before {
  position: absolute;
  top: -5px;
  right: 65px;
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  background: var(--lightgrey-color);
  transform: rotate(45deg);
}
.site-language-menu:hover .site-language-dropdown {
  top: 100%;
  visibility: visible;
  opacity: 1;
  transition: visibilit 0.3s ease, opacity 0.3s ease;
}
.site-language-menu-container {
  width: 100%;
  height: auto;
  margin-top: var(--distance-05);
}
.site-language-menu-container:first-of-type {
  margin-top: 0;
}
.language-menu-select {
  display: block;
  float: left;
  clear: left;
  width: 20px;
}
.language-menu-select img {
  display: block;
  width: 100%;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.language-menu-select.active-language img, .site-language-menu-container:hover .language-menu-select img {
  filter: grayscale(0);
}
.language-menu-select-label {
  display: block;
  margin-left: 8px;
  padding-top: 1px;
  float: left;
  font-size: var(--font-size-xs);
  color: var(--grey-color);
  text-decoration: none;
  transition: color 0.3s ease;
}
.language-menu-select-label.active-language, .site-language-menu-container:hover .language-menu-select-label {
  color: var(--black-color);
}

/*  --- LANGUAGE SELECT MOBILE ---  */
.language-menu-mobile {
  position: relative;
}
.language-menu-mobile .accordion-trigger {
  display: block;
  width: 100%;
  padding-top: var(--distance-1);
  padding-right: var(--distance-15);
  padding-bottom: var(--distance-1);
  padding-left: var(--distance-15);
  background: var(--white-color);
  font-size: var(--font-size-s);
  font-weight: 700;
  color: var(--grey-color);
  text-decoration: none;
  border-top-width: var(--border-width);
  border-top-style: var(--border-style);
  border-top-color: var(--lightgrey-color);
  transition: background 0.3s ease, color 0.3s ease;
  cursor: pointer;
}
.language-menu-mobile .accordion-trigger:hover {
  background: var(--light-color);
  color: var(--main-color);
}
.language-menu-mobile.active .accordion-trigger {
  background: var(--main-color);
  color: var(--white-color);
  font-weight: 700;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.language-menu-mobile .accordion-trigger-icon {
  position: absolute;
  right: 0;
  top: 0;
  width: 49px;
  height: 49px;
  background: var( --lightgrey-color);
  transform: rotate(0deg);
  transition: transform 0.3s ease;
  pointer-events: none;
}
.language-menu-mobile .accordion-trigger-icon svg {
  width: .875em;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 0.3s ease;
}
.language-menu-mobile.active .accordion-trigger-icon svg {
  transform: translate(-50%, -50%) rotate(180deg);
}
.language-menu-mobile .accordion-content  {
  display: none;
}
.language-menu-mobile.active .accordion-content {
  display: block;
}
.language-menu-mobile.active .accordion-content .site-language-menu-container {
  display: block;
  width: 100%;
  margin-top: 0;
  padding-top: var(--distance-1);
  padding-right: var(--distance-15);
  padding-bottom: var(--distance-1);
  padding-left: var(--distance-15);
  background: var(--white-color);
  font-size: var(--font-size-s);
  font-weight: 700;
  color: var(--grey-color);
  text-decoration: none;
  border-top-width: var(--border-width);
  border-top-style: var(--border-style);
  border-top-color: var(--lightgrey-color);
  transition: background 0.3s ease, color 0.3s ease;
}
.language-menu-mobile.active .accordion-content .site-language-menu-container .language-menu-select {
  width: 25px;
}
.language-menu-mobile.active .accordion-content .site-language-menu-container .language-menu-select-label {
  padding-top: 0;
  font-size: var(--font-size-s);
}

/*  --- TRUSTED SHOP ---  */
.trusted-shop {
  display: block;
  float: right;
  width: 155px;
  margin-top: 7.5px;
  margin-right: var(--distance-15);
}
.trusted-shop img {
  display: block;
  width: 16px;
  height: 16px;
  float: left;
}
.trusted-shop p {
  display: block;
  float: right;
  font-size: var(--font-size-xs);
  color: var(--black-color);    /*  ---by HR; orig: var(--brightgrey-color) ---  */ 
  margin-top: 3px;
}
@media screen and (max-width: 1080px) {
  .trusted-shop {
    margin-right: 0;
  }
}

/*  --- DESKTOP MENU ---  */
.desktop-menu, .haka-menu {
  position: relative;
  display: block;
  float: left;
  width: auto;
  height: 88px;
}
.haka-menu .desktop-menu .desktop-menu {
  display: inline-block;
  float: none;
}
.desktop-menu > div {
  display: inline-block;
  margin: 0 !important;
}
.desktop-menu > div:first-of-type .first-level a {
  margin-left: var(--negative-distance-1);
}
.desktop-menu.ml0 > div:first-of-type .first-level a {
  margin-left: 0;
}
.desktop-menu a {
  float: left;
  padding-top: var(--distance-225);
  padding-right: var(--distance-1);
  padding-bottom: var(--distance-225);
  padding-left: var(--distance-1);
  font-size: var(--font-size-s);
  font-weight: 700;
  color: var(--black-color);
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.desktop-menu .active a {
  color: var(--main-color);
}
.desktop-menu a:hover, .desktop-menu > div:hover > a {
  color: var(--main-color);
}
.magic-line {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--main-color);
  pointer-events: none;
}
.current_page_item a {
  color: green !important;
}
.desktop-menu > div .desktop-menu-dropdown {
  position: fixed;
  margin-top: 88px;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  background: var(--white-color);
  border-top-width: var(--border-width);
  border-top-style: var(--border-style);
  border-top-color: var(--lightgrey-color);
  box-shadow: 0 0.4rem 0.6rem #00000008;
  -webkit-transition: top 0.3s ease, max-height 0.5s ease, opacity 0.3s ease, visibility 0.3s ease;
  -moz-transition: top 0.3s ease, max-height 0.5s ease, opacity 0.3s ease, visibility 0.3s ease;
  -ms-transition: top 0.3s ease, max-height 0.5s ease, opacity 0.3s ease, visibility 0.3s ease;
  -o-transition: top 0.3s ease, max-height 0.5s ease, opacity 0.3s ease, visibility 0.3s ease;
  transition: top 0.3s ease, max-height 0.5s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.desktop-menu > div:hover .desktop-menu-dropdown {
  max-height: var(--fullheight-menu-spacer);
  visibility: visible;
  opacity: 1;
}
.scrolled .desktop-menu > div:hover .desktop-menu-dropdown {
  max-height: var(--fullheight-menu-spacer-scrolled);
  opacity: 1;
}
.desktop-menu-dropdown-menu {
  clear: both;
  float: none;
  width: 90%;
  max-width: 1620px;
  margin: 0 auto;
  padding-top: var(--distance-3);
  padding-bottom: var(--distance-3);
  height: auto;
}
.desktop-menu-dropdown-menu-link {
  display: block;
  float: left;
  width: 18%;
  margin-right: 2.5%;
  margin-top: 2.5%;
  transform: translate(0,-30px);
  opacity: 0;
  -webkit-transition: transform 0.3s ease 0.2s, opacity 0.3s ease 0.2s;
  -moz-transition: transform 0.3s ease 0.2s, opacity 0.3s ease 0.2s;
  -ms-transition: transform 0.3s ease 0.2s, opacity 0.3s ease 0.2s;
  -o-transition: transform 0.3s ease 0.2s, opacity 0.3s ease 0.2s;
  transition: transform 0.3s ease 0.2s, opacity 0.3s ease 0.2s;
}
.desktop-menu-dropdown-menu-link:nth-of-type(1), .desktop-menu-dropdown-menu-link:nth-of-type(2), .desktop-menu-dropdown-menu-link:nth-of-type(3), .desktop-menu-dropdown-menu-link:nth-of-type(4), .desktop-menu-dropdown-menu-link:nth-of-type(5) {
  margin-top: 0;
  -webkit-transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s;
  -moz-transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s;
  -ms-transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s;
  -o-transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s;
  transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s;
}
.desktop-menu-dropdown-menu-link:nth-of-type(5n) {
  margin-right: 0;
}
.desktop-menu > div:hover .desktop-menu-dropdown-menu-link {
  transform: translate(0,0);
  opacity: 1;
}
.desktop-menu-dropdown-menu-link a {
  padding: 0;
  display: block;
  width: 100%;
}
.desktop-menu-dropdown-menu-link:hover span {
  color: var(--main-color);
}
.desktop-menu-dropdown-menu-link img {
  position: relative;
  display: block;
  width: 100%;
  filter: grayscale(100%);
  -webkit-transition: filter 0.3s ease;
  -moz-transition: filter 0.3s ease;
  -ms-transition: filter 0.3s ease;
  -o-transition: filter 0.3s ease;
  transition: filter 0.3s ease;
}
.desktop-menu-dropdown-menu-link:hover img {
  filter: unset;
}
.desktop-menu-dropdown-menu-link span {
  display: block;
  margin-top: var(--distance-1);
  font-size: var(--font-size-s);
  color: var(--grey-color);
  text-align: center;
  transition: color 0.3s ease;
}
@media screen and (min-width: 1790px) {
  .desktop-menu > div:hover .desktop-menu-dropdown {
    max-height: 400px;
  }
  .desktop-menu-dropdown-menu-link, .desktop-menu-dropdown-menu-link:nth-of-type(5n) {
    width: 12%;
    margin-top: 0;
    margin-right: 0.5%;
    -webkit-transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s !important;
    -moz-transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s !important;
    -ms-transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s !important;
    -o-transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s !important;
    transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s !important;
  }
  .desktop-menu-dropdown-menu-link:last-of-type {
    margin-right: 0;
  }
}
@media screen and (max-width: 1280px) {
  .desktop-menu a {
    padding-left: var(--distance-025);
    padding-right: var(--distance-025)
  }
  .desktop-menu > div:first-of-type .first-level a {
    margin-left: -0.25rem;
  }
}

/*  --- MOBILE MENU ---  */
@media screen and (min-width: 1025px) {
  .menu-toggle-wrap {
    display: none;
  }
  .mobile-menu-content {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .catalog-menu-container, .desktop-menu {
    display: none;
  }
  .search-trigger, .wish-trigger {
    display: none !important;
  }
  .menu-toggle-wrap {
    float: right;
    margin: 1.25rem 0 1rem 1.5rem;
  }
  .menu-toggle {
    width: 20px;
    height: 20px;
    position: relative;
  }
  .menu-toggle:hover {
    cursor: pointer;
  }
  .menu-toggle .top, .menu-toggle .mid, .menu-toggle .bot {
    position: absolute;
    width: 100%;
    border-radius: 2px;
    height: 2px;
    background: var(--black-color);
    opacity: 1;
    margin-bottom: 5px;
    transition: transform 0.5s ease, opacity 0.5s ease, visibility 0.5s ease, top 0.5s ease, width 0.5s ease, background 0.5s ease;
  }
  .menu-toggle .top {
    width: 100%;
    top: 0;
    left: 0;
  }
  .menu-toggle .mid {
    width: 100%;
    top: 6px;
    left: 0;
  }
  .menu-toggle .bot {
    width: 75%;
    top: 12px;
    left: 0;
  }
  .open-mobile-menu .menu-toggle .top {
    width: 100%;
    transform: rotate(-45deg);
    top: 8px;
    background: var(--main-color);
  }
  .open-mobile-menu .menu-toggle .mid {
    width: 100%;
    visibility: hidden;
    opacity: 0;
  }
  .open-mobile-menu .menu-toggle .bot {
    width: 100%;
    transform: rotate(45deg);
    top: 8px;
    background: var(--main-color);
  }
  .all-content.open-mobile-menu {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .website-mobile-container-outer {
    left: 0;
    transform: translateY(0%);
  }
  .website-mobile-container-outer {
    position: relative;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: visible;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -khtml-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: left 0.3s ease, top 0.3s ease, transform 0.3s ease;
    -moz-transition: left 0.3s ease, top 0.3s ease, transform 0.3s ease;
    -khtml-transition: left 0.3s ease, top 0.3s ease, transform 0.3s ease;
    -ms-transition: left 0.3s ease, top 0.3s ease, transform 0.3s ease;
    -o-transition: left 0.3s ease, top 0.3s ease, transform 0.3s ease;
    transition: left 0.3s ease, top 0.3s ease, transform 0.3s ease;
  }
  .open-mobile-menu .website-mobile-container-outer {
    position: relative;
    top: 50%;
    left: -85%;
    z-index: 20;
    width: 100%;
    overflow: hidden;
    visibility: visible;
    /*-webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -khtml-transform: scale(0.85);
    -o-transform: scale(0.85);
    transform: scale(0.85);*/
  }
  .website-mobile-container {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .website-mobile-container::after {
    display: block;
    content: '';
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .open-mobile-menu .website-mobile-container::after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: #19191d75;
    backdrop-filter: blur(5px);
    pointer-events: auto;
  }
  .mobile-menu-content {
    box-sizing: border-box;
    position: fixed;
    top: var(--menu-spacer);
    right: -100%;
    z-index: 10;
    display: block;
    width: calc(85% + 1px);
    height: var(--fullheight-menu-spacer);
    list-style-type: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transition: top 0.3s ease, right 0.3s ease;
    -moz-transition: top 0.3s ease, right 0.3s ease;
    -ms-transition: top 0.3s ease, right 0.3s ease;
    -o-transition: top 0.3s ease, right 0.3s ease;
    transition: top 0.3s ease, right 0.3s ease;
  }
  .scrolled .mobile-menu-content {
    top: var(--menu-spacer-scrolled);
  }
  .open-mobile-menu .mobile-menu-content {
    right: 0;
  }
  .mobile-menu-content, .mobile-menu-content * {
    border-left: none !important;
  }
  .mobile-menu-search {
    padding-top: var(--distance-15);
    padding-right: var(--distance-15);
    padding-bottom: var(--distance-15);
    padding-left: var(--distance-15);
    background: var(--main-color);
  }
  .mobile-menu-search .search-input {
    display: block;
    float: left;
    width: 100%;
    margin-right: -42px;
    margin-bottom: 0;
    color: var(--black-color);
    border-color: var(--white-color);
  }
  .mobile-menu-search .search-button {
    font-size: var(--font-size-l);
    color: var(--main-color);
    float: right;
    display: block;
    visibility: visible;
    opacity: 1;
    width: 22px !important;
    height: 42px;
    background: transparent;
    margin-top: -1px !important;
    margin-right: 9px;
    border-top: none;
    border-right: none;
    border-left: none;
    font-size: 18px;
  }
  .mobile-single-link {
    display: block;
    width: 100%;
    padding-top: var(--distance-1);
    padding-right: var(--distance-15);
    padding-bottom: var(--distance-1);
    padding-left: var(--distance-15);
    background: var(--white-color);
    font-size: var(--font-size-s);
    font-weight: 700;
    color: var(--grey-color);
    text-decoration: none;
    border-top-width: var(--border-width);
    border-top-style: var(--border-style);
    border-top-color: var(--lightgrey-color);
    transition: background 0.3s ease, color 0.3s ease;
  }
  .mobile-single-link:hover {
    background: var(--light-color);
    color: var(--main-color);
  }
  .mobile-single-link.active {
    background: var(--main-color);
    color: var(--white-color);
  }
  .mobile-menu-content-menu {
    display: block;
    float: none;
    clear: both;
    width: 100%;
    height: auto;
  }
  .mobile-menu-content-menu li {
    width: 100% !important;
  }
  .mobile-menu-content-menu li {
    display: block;
    position: relative;
    float: right;
    clear: both;
    width: calc(100% - 20px);
    text-align: right;
  }
  .mobile-menu-content-menu li .mobile-menu-content-menu-hidden-menu li {
    width: calc(100% + 20px);
  }
  .mobile-menu-content-menu li:last-of-type {
    margin-bottom: 0;
  }
  .mobile-menu-content-menu li a {
    display: block;
    width: 100%;
    padding-top: var(--distance-1);
    padding-right: var(--distance-15);
    padding-bottom: var(--distance-1);
    padding-left: var(--distance-15);
    background: var(--white-color);
    font-size: var(--font-size-s);
    font-weight: 700;
    color: var(--grey-color);
    text-align: left;
    text-decoration: none;
    border-top-width: var(--border-width);
    border-top-style: var(--border-style);
    border-top-color: var(--lightgrey-color);
    transition: background 0.3s ease, color 0.3s ease;
  }
  .mobile-menu-content-menu li a:hover {
    color: var(--main-color);
  }
  .mobile-menu-content-menu li.active a {
    background: var(--main-color);
    color: var(--white-color);
    font-weight: 700;
  }
  .mobile-menu-content-menu li.active .mobile-menu-content-menu-hidden-menu li a {
    background: var(--light-color);
    color: var(--grey-color);
    padding-left: var(--distance-25) !important;
  }
  .mobile-menu-content-menu li a span {
    font-size: var(--font-size-s) !important;
    font-weight: inherit;
    color: inherit;
  }
  .mobile-menu-content-menu li.active .mobile-menu-content-menu-hidden-menu li a
  font-weight: 400;
}
.mobile-menu-content-menu-hidden-menu {
  display: none;
}
.mobile-menu-content-menu-hidden-menu.hidden-menu {
  display: block;
}
.mobile-menu-content-menu-hidden-menu {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}
.mobile-menu-content-menu-hidden-menu .mobile-menu-content-menu-hidden-menu {
  display: none !important;
  width: 100%;
  margin-right: 0;
}
.mobile-menu-content-menu-hidden-menu:last-of-type {
  margin-bottom: 0;
}
.mobile-menu-content-menu-hidden-menu li.active .mobile-menu-content-menu-hidden-menu {
  margin-bottom: var(--distance-1);
}
.mobile-menu-content-menu-hidden-menu .mobile-menu-content-menu-hidden-menu:last-of-type {
  margin-bottom: 0;
}
.mobile-menu-content-menu-hidden-menu li a {
  font-size: var(--font-size-m);
  font-weight: 400;
  color: var(--grey-color);
  padding-left: var(--distance-25) !important;
}
.mobile-menu-content-menu li.active .mobile-menu-content-menu-hidden-menu li a {
  color: var(--grey-color);
}
.mobile-menu-content-menu li.active .mobile-menu-content-menu-hidden-menu li a:hover {
  color: var(--black-color);
}
.mobile-menu-content-menu li.active .mobile-menu-content-menu-hidden-menu li.active a {
  color: var(--black-color);
  font-weight: 700;
}
.mobile-menu-content-menu li.active .mobile-menu-content-menu-hidden-menu li.active .mobile-menu-content-menu-hidden-menu li a {
  color: var(--grey-color);
  font-weight: 400;
}
.mobile-menu-content-menu li.active .mobile-menu-content-menu-hidden-menu li.active .mobile-menu-content-menu-hidden-menu li.active a {
  color: var(--black-color);
  font-weight: 700;
}
.mobile-menu-dropdown-button {
  position: absolute;
  right: 0;
  top: 0;
  width: 49px;
  height: 49px;
  background: var( --lightgrey-color);
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
.mobile-menu-dropdown-button .icon {
  margin-right: 0 !important;
}
.mobile-menu-dropdown-button svg {
  margin-right: 0;
}
.mobile-menu-dropdown-button svg {
  transition: transform 0.3s ease;
}
.mobile-menu-dropdown-button.active svg {
  transform: rotate(180deg);
}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /*.menu-toggle-wrap {
  top: 71px;
}
/*.menu-toggle-wrap.scrolled {
top: 37px;
}*/
.scrolled .menu-toggle-wrap {
  top: 37px;
  }*/
}
@media screen and (max-widht: 768px) {
  .menu-toggle-wrap {
    top: 1.5rem;
  }
}

/*  --- HEADER ---  */
#menu_spacer, .menu-spacer {
  height: var(--menu-spacer);
}
.menu-spacer {
  width: 100%;
  height: var(--menu-spacer);
  display: block;
  float: none;
  clear: both;
}
header {
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8888;
  box-shadow: 0 0.4rem 0.6rem #00000015;
}
.sub-header {
  display: block;
  width: 100%;
  height: 35px;
  max-height: 35px;
  background: var(--main-color);    /*  ---by HR; orig: var(--light-color) ---  */ 
  transition: max-height 0.3s ease;
}
/*.sub-header.scrolled {
max-height: 0;
}*/
.scrolled .sub-header {
  max-height: 0;
  overflow: hidden;
}
.sub-header-left {
  display: block;
  float: left;
  width: auto;
  height: auto;
  margin-top: 7.5px;
}
.sub-header-left li {
  float: left;
  margin-right: var(--distance-1);
}
.sub-header-left li:last-of-type {
  margin-right: 0;
}
.sub-header-left li a {
  font-size: var(--font-size-xs);
  color: var(--black-color);      /*  ---by HR; orig: var(--brightgrey-color) ---  */ 
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.sub-header-left li.active a, .sub-header-left li a:hover {
  font-size: var(--font-size-xs);
  color: var(--light-color);    /*  ---by HR; orig: var(--black-color) ---  */ 
}
.sub-header-left-link {
  display: inline-block;
  float: left;
  margin-top: var(--distance-075);
  margin-left: var(--distance-1);
  font-size: var(--font-size-xs);
  color: var(--black-color);      /*  ---by HR; orig: var(--brightgrey-color) ---  */ 
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.sub-header-left-link.active, .sub-header-left-link:hover {
  font-size: var(--font-size-xs);
  color: var(--light-color);    /*  ---by HR; orig: var(--black-color) ---  */ 
}
.main-header {
  height: 88px;
  /*padding: 1rem 0;*/
}
.logo {
  width: auto;
  max-width: 100px;  /*  --- max-width: 150px;  by HR ---  */
  height: auto;
  display: block;
  float: left;
  margin-top: var(--distance-1);
  margin-right: var(--distance-5);
  margin-bottom: var(--distance-1);
  margin-left: 0;
}
/*  --- CENTER LOGO ---  */
/*header .logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-right: 0;
}*/
.logo svg {
  width: 150px;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
}
.logo svg path, .logo svg polygon {
  transition: fill 0.3s ease;
}
.logo:hover svg path, .logo:hover svg polygon {
  fill: var(--main-color);
}
.logo img {
  width: 150px;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
}
@media screen and (max-width: 1024px) {
  header .logo {
    position: relative;
    left: initial;
    transform: translateX(0);
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  #menu_spacer, .menu-spacer {
    height: var(--menu-spacer);
  }
  header .wrap {
    border-bottom: none;
  }
  .logo {
    max-width: 80px;  /*  --- max-width: 135px;  by HR ---  */
    /* max-height: 20px;    --- max-width: 32px;  by HR ---  */
    margin-right: 0;
  }
  .logo svg {
    max-width: 80px;  /*  --- max-width: 135px;  by HR ---  */
    /* max-height: 20px;    --- max-width: 32px;  by HR ---  */
    margin-right: 0;
  }
  .sub-header {
    display: none;
  }
}

/*  --- SIDEBAR MENU ---  */
.user-menu {
  position: relative;
  display: block;
  float: right;
  margin: 1rem 0;
}
.user-menu .user-menu-trigger {
  position: relative;
  display: block;
  float: right;
  margin-left: 1.5rem;
  cursor: pointer;
}
.user-menu .user-menu-links {
  display: block;
  cursor: pointer;
  margin: 1rem 0 1rem 0;
  font-size: 1.25rem;
  transition: background 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.user-menu .user-menu-links .icon {
  font-size: 22px;
}
.user-menu .user-menu-trigger .user-menu-links svg path {
  transition: fill 0.3s ease;
}
.user-menu .user-menu-trigger:hover .user-menu-links svg path {
  fill: var(--main-color);
}
.user-menu .user-menu-trigger .user-menu-links.user-menu-close {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}
/* .user-menu .user-menu-trigger.open-menu .user-menu-links.user-menu-close {
opacity: 1;
visibility: visible;
} */
.user-menu .user-menu-trigger.open-menu .user-menu-links {
  opacity: 1;
  visibility: unset;
  color: var(--border-color);
}
.user-menu-dropdown {
  display: block;
  float: none;
  clear:both;
  width: auto;
  min-width: 300px;
  max-width: 650px;
  min-height: var(--fullheight-menu-spacer);
  max-height: var(--fullheight-menu-spacer);
  position: fixed;
  z-index: 9999;
  top: var(--menu-spacer);
  right: -100%;
  padding: var(--distance-3);
  background: var(--white-color);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  overflow-y: scroll;
  box-shadow: 0px 5px 5px #00000025;
  -webkit-transition: background 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease, right 0.5s ease, min-height 0.3s ease;
  -moz-transition: background 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease, right 0.5s ease, min-height 0.3s ease;
  -ms-transition: background 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease, right 0.5s ease, min-height 0.3s ease;
  -o-transition: background 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease, right 0.5s ease, min-height 0.3s ease;
  transition: background 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease, right 0.5s ease, min-height 0.3s ease
}
.user-menu-dropdown.open-menu {
  opacity: 1;
  visibility: visible;
  right: 0;
}
.scrolled .user-menu-dropdown {
  top: var(--menu-spacer-scrolled);
  height: var(--fullheight-menu-spacer-scrolled);
}
@media screen and (max-width: 768px) {
  .user-menu-dropdown {
    top: var(--menu-spacer);
    min-height: var(--fullheight-menu-spacer);
    max-height: var(--fullheight-menu-spacer);
  }
  .scrolled .user-menu-dropdown {
    top: var(--menu-spacer-scrolled);
    height: var(--fullheight-menu-spacer-scrolled);
    min-height: var(--fullheight-menu-spacer-scrolled);
    max-height: var(--fullheight-menu-spacer-scrolled);
  }
}

/*  --- USER POPUP MENU ---  */
.user-menu-dropdown.user-dropmenu {
  padding: 0;
}
.user-menu-dropdown .user-menu-headline {
  padding-top: var(--distance-15);
  padding-right: var(--distance-3);
  padding-bottom: var(--distance-15);
  padding-left: var(--distance-3);
  background: var(--light-color);
  font-size: var(--font-size-m);
  font-weight: 700;
  text-align: center;
}
.user-menu-dropdown-inner-wrap {
  padding-top: var(--distance-3);
  padding-right: var(--distance-15);
  padding-bottom: var(--distance-3);
  padding-left: var(--distance-15);
}
/* .user-menu-dropdown-inner-wrap .input {
display: block;
float: none;
width: 100%;
margin-right: 0;
margin-bottom: var(--distance-1);
padding-right: var(--distance-075);
padding-bottom: var(--distance-05);
padding-left: var(--distance-075);
border-top: none;
border-right: none;
border-left: none;
border-bottom-width: var(--border-width);
border-bottom-style: var(--border-style);
border-bottom-color: var(--grey-color);
outline: none !important;
-webkit-transition: border 0.3s ease;
-moz-transition: border 0.3s ease;
-ms-transition: border 0.3s ease;
-o-transition: border 0.3s ease;
transition: border 0.3s ease;
text-align: left;
}*/
.user-menu-dropdown-inner-wrap .input::placeholder {
  color: var(--brightgrey-color);
}
.user-menu-dropdown-inner-wrap .checkbox-complete {
  display: block;
  float: none;
  width: 135px;
  margin-right: auto;
  margin-bottom: var(--distance-075);
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  .user-menu-dropdown-inner-wrap {
    padding-top: var(--distance-15);
    padding-bottom: var(--distance-15);
  }
}

/*  --- USER MENU LOGGEDIN ---  */
.account-menu-sidebar {
  display: block;
  float: none;
  clear: both;
  width: 100%;
  height: auto;
}
.account-menu-sidebar-link {
  display: block;
  float: none;
  clear: both;
  width: 100%;
  height: auto;
  border-top-width: var(--border-width);
  border-top-style: var(--border-style);
  border-top-color: var(--lightgrey-color);
}
.account-menu-sidebar-link a {
  display: block;
  width: 100%;
  padding-top: var(--distance-1);
  padding-right: var(--distance-3);
  padding-bottom: var(--distance-1);
  padding-left: var(--distance-3);
  background: var(--white-color);
  font-size: var(--font-size-s);
  font-weight: 700;
  color: var(--grey-color);
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.account-menu-sidebar-link a:hover {
  background: var(--light-color);
  color: var(--black-color);
}
.account-menu-sidebar-link.active a {
  background: var(--main-color);
  color: var(--white-color);
}
.user-menu-dropdown .logout {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0.5rem 1.5rem;
  background: var(--brightgrey-color);
  font-size: 16px;
  font-weight: 700;
  color: white;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -ms-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.user-menu-dropdown .logout:hover {
  background: var(--darkgrey-color);
}

/*  --- SHOPPING POPUP MENU ---  */
.shopping-dropmenu, .wish-dropmenu {
  max-height: var(--fullheight-menu-spacer);
  width: 580px;
  overflow: scroll;
  padding: 0;
}

.scrolled :is(.shopping-dropmenu, .wish-dropmenu, .user-dropmenu) {
  max-height: var(--fullheight-menu-spacer-scrolled);
}

/*
.scrolled .shopping-dropmenu, .scrolled .wish-dropmenu, .scrolled .user-dropmenu {
  max-height: var(--fullheight-menu-spacer-scrolled);
}
*/
.shopping-dropmenu-relative {
  position: relative;
  padding-bottom: 234px;
}
.scrolled .shopping-dropmenu-relative {
  padding-bottom: 198px;
}
.shopping-drop-list {
  border-bottom: 1px;
  border-style: var(--border-style);
  border-color: var(--brightgrey-color);
  padding: 1rem 0 !important;
}
.shopping-drop-list:last-of-type {
  border-bottom: none;
}
.shopping-drop-list a {
  display: inline-block;
  color: var(--black-color);
  text-decoration: none;
}
.shopping-drop-list .wk-article-info {
  margin-top: var(--distance-175);
}
.shopping-drop-list .price {
  font-weight: ;
}
.shopping-dropmenu-sum {
  position: fixed;
  right: -100%;
  bottom: 0;
  width: 580px;
  background: var(--light-color);
  padding-top: 0;
  -webkit-transition: right 0.5s ease;
  -moz-transition: right 0.5s ease;
  -ms-transition: right 0.5s ease;
  -o-transition: right 0.5s ease;
  transition: right 0.5s ease;
}
.wish-dropmenu .shopping-dropmenu-sum {
  padding-top: 0;
}
.shopping-dropmenu.open-menu .shopping-dropmenu-sum, .wish-dropmenu.open-menu .shopping-dropmenu-sum {
  right: 0;
}
.shopping-dropmenu-sum-inner {
  padding-top: var(--distance-2);
  padding-right: var(--distance-15);
  text-align: right;
}


.shopping-dropmenu-sum .button {
  width: 50%;
  height: auto;
  padding-top: var(--distance-15);
  padding-bottom: var(--distance-15);
  font-size: var(--font-size-s);
}
.shopping-dropmenu-sum .button:focus {
  border: none !important;
}
.shopping-dropmenu-sum .button.is-fullwidth {
  width: 100% !important;
}
.wish-dropmenu .shopping-dropmenu-sum .button {
  width: 100%;
}
.shopping-cart-amount {
  position: absolute;
  top: 12px;
  right: -10px;
  width: 20px;
  height: 20px;
  background: var(--main-color);
  border-radius: 50%;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--white-color);
  text-align: center;
  pointer-events: none;
}
.shopping-cart-amount span {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 400;
  color: var(--white-color);
}
.shopping-dropmenu .shopping-drop-list, .wish-dropmenu .shopping-drop-list {
  padding: 0 !important;
  padding-right: var(--distance-15) !important;
  border-top-width: var(--border-width);
  border-top-style: var(--border-style);
  border-color: var(--light-color);
  border-bottom: none;
}
.shopping-dropmenu .wk-article-img-container, .wish-dropmenu .wk-article-img-container {
  width: 200px !important;
  height: auto;
  margin-top: 0;
  line-height: 0;
}
.shopping-dropmenu .wk-article-img-container a, .wish-dropmenu .wk-article-img-container a {
  display: block;
  line-height: 0;
}
.shopping-dropmenu .wk-article-img-container a img, .wish-dropmenu .wk-article-img-container a img {
  display: block;
  width: auto;
  max-width: 200px;
  height: auto;
  max-height: 110px;
  margin: 10px auto;
}
.shopping-dropmenu .wk-article-control, .wish-dropmenu .wk-article-control {
  margin-top: var(--distance-15);
}
.shopping-drop-list .wk-article-control {
  margin-top: var(--distance-175);
}
.shopping-dropmenu .wk-article-buttons, .wish-dropmenu .wk-article-buttons {
  float: right;
  clear: right;
  width: 95px !important;
  margin-top: var(--distance-075);
}
.shopping-dropmenu .wk-article-buttons {
  margin-top: .45rem;
}
.wk-article-listed .wk-article-buttons {
  width: auto;
  float: right;
  clear: right;
  margin-top: var(--distance-05);
}
.shopping-dropmenu .wk-article-buttons button, .wish-dropmenu .wk-article-buttons button {
  background: transparent;
  color: var(--brightgrey-color);
  float: right;
}
.wk-sidebar-img-container {
  width: 100px !important;
}
@media screen and (max-width: 768px) {
  .shopping-dropmenu {
    width: 300px;
  }
  .user-menu-dropdown .user-menu-headline {
    padding-top: var(--distance-075);
    padding-right: var(--distance-15);
    padding-bottom: var(--distance-075);
    padding-left: var(--distance-15);
    font-size: var(--font-size-s);
  }
  .shopping-dropmenu .shopping-dropmenu-relative, .wish-dropmenu .shopping-dropmenu-relative {
    padding-bottom: 136px;
  }
  .scrolled .shopping-dropmenu .shopping-dropmenu-relative, .scrolled .wish-dropmenu .shopping-dropmenu-relative {
    padding-bottom: 136px;
  }
  .shopping-dropmenu-sum {
    width: 300px;
  }
  .shopping-dropmenu-sum .button {
    width: 100%;
    padding-top: var(--distance-075);
    padding-bottom: var(--distance-075);
  }
  .shopping-dropmenu .wk-article-img-container, .wish-dropmenu .wk-article-img-container {
    width: 100px !important;
    float: left;
    margin-right: var(--distance-075);
  }
  .shopping-dropmenu .wk-article-img-container a img, .wish-dropmenu .wk-article-img-container a img {
    display: block;
    width: auto;
    max-width: 90px;
    height: auto;
    max-height: 90px;
    margin: 10px auto;
  }
  .shopping-dropmenu .wk-article-info, .wish-shopping-dropmenu .wk-article-info {
    margin-top: var(--distance-025);
    width: calc(100% - 112px);
  }
  .shopping-dropmenu .wk-article-info-name, .wish-shopping-dropmenu .wk-article-info-name {
    display: block;
    margin-top: var(--distance-125);
    margin-bottom: 0;
    font-size: var(--font-size-s);
  }
  .shopping-drop-list .wk-article-info-name {
    margin-top: var(--distance-05);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .shopping-dropmenu .wk-article-info-name + br, .wish-shopping-dropmenu .wk-article-info-name + br {
    display: none;
  }
  .shopping-dropmenu .wk-article-info-number, .wish-shopping-dropmenu .wk-article-info-number {
    display: none;
  }
  .shopping-dropmenu .wk-article-control, .wish-dropmenu .wk-article-control {
    float: left;
    margin-top: 0;
  }
  .shopping-dropmenu  .wk-article-control-price, .wish-dropmenu  .wk-article-control-price {
    float: left;
    clear: left;
    margin-bottom: var(--distance-025);
    font-size: var(--font-size-s);
    text-align: left;
  }
  .shopping-dropmenu .wk-article-amount-refresh, .wish-dropmenu .wk-article-amount-refresh {
    margin-top: 5px;
    display: block;
    width: 10px;
  }
  .shopping-dropmenu .wk-article-amount, .wish-dropmenu .wk-article-amount, .shopping-dropmenu .wk-article-amount-post, .wish-dropmenu .wk-article-amount-post {
    font-size: var(--font-size-xs);
  }
  .shopping-dropmenu .wk-article-buttons, .wish-dropmenu .wk-article-buttons {
    float: left;
    margin: 0 !important;
    width: calc(100% - 112px) !important;
  }
  .shopping-dropmenu .wk-article-buttons button, .wish-dropmenu .wk-article-buttons button {
    float: left;
    font-size: var(--font-size-xs);
  }
  .shopping-dropmenu  .shopping-drop-list, .shopping-dropmenu  .shopping-drop-list {
    border-bottom: none;
  }
  .shopping-dropmenu .shopping-dropmenu-sum-inner, .wish-dropmenu .shopping-dropmenu-sum-inner {
    padding-top: var(--distance-1);
    padding-right: var(--distance-15);
    padding-bottom: var(--distance-1);
    padding-left: var(--distance-15);
  }
  .shopping-dropmenu .shopping-dropmenu-sum-inner-tax, .shopping-dropmenu .shopping-dropmenu-sum-inner-shipping {
    display: none !important;
  }
  .shopping-dropmenu .wk-article-amount-refresh, .shopping-dropmenu .wk-article-amount, .shopping-dropmenu .wk-article-amount-post, .wish-dropmenu .wk-article-amount-refresh, .wish-dropmenu .wk-article-amount, .wish-dropmenu .wk-article-amount-post {
    display: none !important;
  }
  .shopping-dropmenu .shopping-dropmenu-sum-inner-price, .wish-dropmenu .shopping-dropmenu-sum-inner-price {
    margin-bottom: 0 !important;
    font-size: var(--font-size-s) !important;
    text-align: center;
  }

}

/*  --- SEARCH INPUT  ---  */
#search-menu {
  display: none;
  width: 100%;
  height: 0;
  background: var(--main-color);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: visibility 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  -moz-transition: visibility 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  -ms-transition: visibility 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  -o-transition: visibility 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transition: visibility 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}
.user-menu .user-menu-trigger.search-trigger {
  position: relative;
  display: block;
  float: right;
  margin-left: 0;
}
.user-menu .user-menu-trigger.search-trigger.active-search .search-link:first-of-type {
  display: none;
}
.user-menu .user-menu-trigger.search-trigger .search-link:last-of-type {
  display: none;
}
.user-menu .user-menu-trigger.search-trigger.active-search .search-link:last-of-type {
  display: block;
}
#search-menu.active-search {
    display: block;
    width: auto;
    height: 72px;
    padding: var(--distance-1) 0 var(--distance-1) 0;
    opacity: 1;
    visibility: visible;
}
.search-menu-button-wrap {
  float: right;
  width: 135px;
}
#search-menu .search-button {
  display: none;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s ease, opacity 0s ease;
  -moz-transition: visibility 0s ease, opacity 0s ease;
  -ms-transition: visibility 0s ease, opacity 0s ease;
  -o-transition: visibility 0s ease, opacity 0s ease;
  transition: visibility 0s ease, opacity 0s ease;
}
#search-menu.active-search .search-button {
  float: right;
  display: block;
  visibility: visible;
  opacity: 1;
  width: 100% !important;
  height: 38px;
  margin-top: 2px;
  background: var(--white-color);
  color: var(--black-color) !important;
  font-size: 18px;
  font-weight: 700;
  border-radius: 24px;
  -webkit-transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0.3s;
  -moz-transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0.3s;
  -ms-transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0.3s;
  -o-transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0.3s;
  transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0.3s;
}
#search-menu.active-search .search-button {
  color: var(--main-color);
}
#search-menu.active-search .search-button span {
  display: block;
}
#search-menu.active-search .search-button span:first-of-type {
  float: left;
  margin-left: var(--distance-15);
}
#search-menu.active-search .search-button span:last-of-type {
  float: right;
  margin-right: var(--distance-15);
}
#search-menu.active-search .search-button:hover * {
  color: var(--main-color) !important;
}
.search-button svg {
  display: block;
  margin-right: 0;
}
.search-menu-input-wrap {
  float: left;
  width: calc(100% - 150px);
}
#search-menu .search-input {
  display: block;
  visibility: hidden;
  height: auto;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--white-color);
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  color: var(--white-color) !important;
  font-size: var(--font-size-l);
}
#search-menu.active-search .search-input {
  visibility: visible;
  width: 100%;
}
#search-menu.active-search .search-input::placeholder {
  color: var(--darkgrey-color-color);
}
.search-input:focus {
  outline: none;
}
.live-search-area {
  position: relative;
  width: 100%;
  height: auto;
}
.live-search-blur {
  display: none;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #00000050;
  backdrop-filter: blur(5px);
}
.live-search-blur.active {
  display: block;
}
.live-search {
  display: block;
  padding: var( --distance-2);
  background: var( --white-color);
  border-style: var( --border-style);
  border-width: var( --border-width);
  border-color: var( --lightgrey-color);
  box-shadow: 0 6px 5px 5px #00000008;
  border-top: none;
}
.live-search #live-search_IMG {
  display: block;
  width: 50px;
  height: auto;
  margin: 0 auto;
}
.live-search-article {
  margin-top: var(--distance-05);
  padding-top: var(--distance-05);
  border-top-width: var(--border-width);
  border-top-style: var(--border-style);
  border-top-color: var(--light-color);
}
.live-search-article:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.live-search-article-image {
  display: block;
  float: left;
  width: 50px;
  height: auto;
}
.live-search-article-name {
  display: block;
  float: left;
  width: calc(100% - 135px);
  margin-top: 8px;
  margin-left: var(--distance-1);
  font-size: var(--font-size-2);
  font-weight: 700;
  color: var(--black-color);
}
.live-search-article-price {
  display: block;
  float: right;
  margin-top: 8px;
  font-size: var(--font-size-2);
  font-weight: 700;
  color: var(--black-color);
}
.live-search-article-currency {
  display: block;
  float: right;
  margin-top: 8px;
  font-size: var(--font-size-2);
  font-weight: 700;
  color: var(--black-color);
  text-decoration: none;
}
.live-search-article-number {
  display: block;
  float: left;
  margin-top: 2px;
  margin-left: var(--distance-1);
  font-size: var(--font-size-2);
  font-weight: 400;
  color: var(--grey-color);
}

/*.user-menu-dropdown.search-dropmenu {
width: 100%;
max-width: 100%;
padding-top: var(--distance-5);
padding-bottom: var(--distance-5);
background: #ffffff;
backdrop-filter: blur(5px);
overflow-y: scroll;
transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease;
}
#search {
width: 80%;
max-width: 500px;
margin: 0 auto;
}
.search-input {
display: block;
float: left;
width: calc(100% - 42px);
height: auto;
padding: 0 1rem .5rem 1rem;
background: transparent;
text-align: center;
font-size: var(--font-size-m);
border-width: var(--border-width);
border-style: var(--border-style);
border-color: var(--black-color);
border-top: none;
border-right: none;
border-left: none;
}
.search-preview {
width: 100%;
max-height: calc(100vh - 340px);
overflow-x: hidden;
overflow-y: scroll;
margin-top: var(--distance-5);
}
.search-preview .articles-list {
margin-bottom: 10px;
}
#search-live_Empty {
margin: 0 auto;
font-family: var(--main-font) !important;
font-size: var(--font-size-m);
text-align: center;
}
#search-live_Empty .icon {
display: block;
float: none;
clear: both;
font-size: 10vw;
margin-top: var(--distance-2);
margin-bottom: var(--distance-2);
}
.search-live-results .column:first-of-type .p3 {
padding-left: 0 !important;
}
.search-live-results .column:nth-of-type(3n) .p3 {
padding-right: 0 !important;
}
.search-live-results .column:nth-of-type(3n+1) .p3 {
padding-left: 0 !important;
}
@media screen and (max-width: 1024px) {
.search-live-results .column:nth-of-type(3n) .p3 {
padding-right: var(--distance-3) !important;
}
.search-live-results .column:nth-of-type(3n+1) .p3 {
padding-left: var(--distance-3) !important;
}
.search-live-results .column:nth-of-type(2n) .p3 {
padding-right: 0 !important;
}
.search-live-results .column:nth-of-type(2n+1) .p3 {
padding-left: 0 !important;
}
}
@media screen and (max-width: 768px) {
.search-live-results .column .p3, .search-live-results .column:nth-of-type(3n) .p3, .search-live-results .column:nth-of-type(3n+1) .p3 {
padding-right: 0 !important;
padding-left: 0 !important;
}
}*/

/*  --- SEARCH FULLWIDTH ---  */
.search-fullwidth .search-input {
  display: block;
  float: left;
  width: 100%;
  margin-right: -42px;
  margin-bottom: 0;
  color: var(--black-color);
  border-color: var(--white-color);
}
.search-fullwidth .search-button {
  font-size: var(--font-size-l);
  color: var(--main-color);
  float: right;
  display: block;
  visibility: visible;
  opacity: 1;
  width: 22px !important;
  height: 42px;
  background: transparent;
  margin-top: -1px !important;
  margin-right: 9px;
  border-top: none;
  border-right: none;
  border-left: none;
  font-size: 18px;
}

/* --- INFO BANNER  --- */
.containerMessages{
  position: fixed;
  right: 0;
  z-index: -1;
  width:100%;
  transition: top 0.3s ease, right 0.3s ease;
}

.containerMessages .message{
  position: relative;
  display: none;
  padding-top: var(--distance-1);
  padding-bottom: var(--distance-1);
}

.containerMessages .message p {
  width: 95%;
}

.close-button{
  display: inline-block;
  background-color:transparent;
  color: black;
  float:right;
}
.close-button svg {
  margin-right: 0;
}
@media screen and (max-width: 1024px) {
  .open-mobile-menu .containerMessages{
    right: calc(85% + 1px);
  }
  .containerMessages .message::after{
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #19191d75;
    backdrop-filter: blur(0px);
    pointer-events: none;
    transition: filter 0.3s ease, opacity 0.3s ease;
  }
  .open-mobile-menu .containerMessages .message::after{
    opacity: 1;
    backdrop-filter: blur(5px);
  }
}

/*  --- BUTTONS ---  */
button {
  cursor: pointer;
}
.button:focus {
  border: 1px solid !important;
}
.es-button {
  display: inline-block;
  font-size: var(--font-size-element-medium);
  font-weight: 700;
  color: var(--white-color);
  line-height: 1;
  cursor: pointer;
  padding: 0.75rem 1.75rem;
  text-align: center;
  justify-content: center;
  position: relative;
  border-radius: var(--border-radius);
  transition: color 0.5s ease;
}
.es-button:hover {
  color: var(--white-color);
}
.es-button::before {
  display: block;
  content: '';
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: var(--sub-color);
  border-radius: var(--border-radius);
  transition: width 0.5s ease;
}
.es-button:hover::before {
  width: 100%;
}
.es-button::after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  background-color: var(--main-color);
  border-radius: var(--border-radius);
}
.es-button.es-small-button {
  font-size: var(--font-size-element-small);
}
.es-button.es-large-button {
  font-size: var(--font-size-element-large);
}
.es-button.es-button-transparent {
  background-color: transparent !important;
  border: var(--border-size);
  border-style: solid;
  border-color: var(--main-color);
}
a .icon, button .icon {
  margin-right: .25rem !important;
  margin-left: 0 !important;
}
a .icon.icon-centered, button .icon.icon-centered {
  display: inline-block !important;
  margin-right: .25rem !important;
  margin-left: 0 !important;
  height: 100% !important;
  margin: 0 auto !important;
}
a .icon.icon-centered svg, button .icon.icon-centered svg {
  width: 100%;
}

/*  --- INPUTS ---  */
.es-input {
  -moz-appearance: none;
  -webkit-appearance: none;
  align-items: center;
  border: var(--border-size);
  border-style: solid;
  border-color: var(--grey-color);
  border-radius: var(--border-radius);
  box-shadow: none;
  display: inline-flex;
  font-size: var(--font-size-xs);
  height: auto;
  justify-content: flex-start;
  line-height: 1;
  padding: .5rem 1rem;
  position: relative;
  vertical-align: top;
}
.es-input:focus, .es-input:active {
  border-width: var(--border-size);
  border-style: var(--border-style);
  border-color: var(--border-color);
  outline-width: var(--outline-size);
  outline-style: var(--outline-style);
  outline-color: var(--outline-color);
}
.es-input.es-input-underline {
  padding: .65rem 1rem;
  border-bottom: var(--border-size);
  border-style: solid;
  border-color: var(--grey-color);
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 0px;
}
.form-style .input.postcode {
  float: left;
  width: calc(35% - .5rem);
  margin-right: 1rem;
}
.form-style .input.city {
  float: left;
  width: calc(65% - .5rem);
}
/*  --- BOX ---  */
.box {
  border-radius: var(--border-radius-large);
  box-shadow: var(--box-shadow);
  display: block;
  padding: var(--distance-2);
}

/*  --- BORDER ---  */
.br { border-radius: var(--border-radius) !important; }
.brtl { border-top-left-radius: var(--border-radius) !important; }
.brtr { border-top-right-radius: var(--border-radius) !important; }
.brbl { border-bottom-left-radius: var(--border-radius) !important; }
.brbr { border-bottom-right-radius: var(--border-radius) !important; }
.no-br { border-radius: 0 !important; }
.no-brtl { border-top-left-radius: 0 !important; }
.no-brtr { border-top-right-radius: 0 !important; }
.no-brbl { border-bottom-left-radius: 0 !important; }
.no-brbr { border-bottom-right-radius: 0 !important; }

/*  --- MARGIN / PADDING --- */
.m0 { margin: 0 !important }
.m025 { margin: var(--distance-025) !important }
.m05 { margin: var(--distance-05) !important }
.m075 { margin: var(--distance-075) !important }
.m1 { margin: var(--distance-1) !important }
.m125 { margin: var(--distance-125) !important }
.m15 { margin: var(--distance-15) !important }
.m175 { margin: var(--distance-175) !important }
.m2 { margin: var(--distance-2) !important }
.m225 { margin: var(--distance-225) !important }
.m25 { margin: var(--distance-25) !important }
.m275 { margin: var(--distance-275) !important }
.m3 { margin: var(--distance-3) !important }
.m325 { margin: var(--distance-325) !important }
.m35 { margin: var(--distance-35) !important }
.m375 { margin: var(--distance-375) !important }
.m4 { margin: var(--distance-4) !important }
.m425 { margin: var(--distance-425) !important }
.m45 { margin: var(--distance-45) !important }
.m475 { margin: var(--distance-475) !important }
.m5 { margin: var(--distance-5) !important }
.m525 { margin: var(--distance-525) !important }
.m55 { margin: var(--distance-55) !important }
.m575 { margin: var(--distance-575) !important }
.m6 { margin: var(--distance-6) !important }
.m625 { margin: var(--distance-625) !important }
.m65 { margin: var(--distance-65) !important }
.m675 { margin: var(--distance-675) !important }
.m7 { margin: var(--distance-7) !important }
.m725 { margin: var(--distance-725) !important }
.m75 { margin: var(--distance-75) !important }
.m775 { margin: var(--distance-775) !important }
.m8 { margin: var(--distance-8) !important }
.m825 { margin: var(--distance-825) !important }
.m85 { margin: var(--distance-85) !important }
.m875 { margin: var(--distance-875) !important }
.m9 { margin: var(--distance-9) !important }
.m925 { margin: var(--distance-925) !important }
.m95 { margin: var(--distance-95) !important }
.m975 { margin: var(--distance-975) !important }
.m10 { margin: var(--distance-10) !important }
.mt0 { margin-top: 0 !important }
.mt025 { margin-top: var(--distance-025) !important }
.mt05 { margin-top: var(--distance-05) !important }
.mt075 { margin-top: var(--distance-075) !important }
.mt08 { margin-top: var(--distance-08) !important}
.mt1 { margin-top: var(--distance-1) !important }
.mt125 { margin-top: var(--distance-125) !important }
.mt15 { margin-top: var(--distance-15) !important }
.mt175 { margin-top: var(--distance-175) !important }
.mt2 { margin-top: var(--distance-2) !important }
.mt225 { margin-top: var(--distance-225) !important }
.mt25 { margin-top: var(--distance-25) !important }
.mt275 { margin-top: var(--distance-275) !important }
.mt3 { margin-top: var(--distance-3) !important }
.mt325 { margin-top: var(--distance-325) !important }
.mt35 { margin-top: var(--distance-35) !important }
.mt375 { margin-top: var(--distance-375) !important }
.mt4 { margin-top: var(--distance-4) !important }
.mt425 { margin-top: var(--distance-425) !important }
.mt45 { margin-top: var(--distance-45) !important }
.mt475 { margin-top: var(--distance-475) !important }
.mt5 { margin-top: var(--distance-5) !important }
.mt525 { margin-top: var(--distance-525) !important }
.mt55 { margin-top: var(--distance-55) !important }
.mt575 { margin-top: var(--distance-575) !important }
.mt6 { margin-top: var(--distance-6) !important }
.mt625 { margin-top: var(--distance-625) !important }
.mt65 { margin-top: var(--distance-65) !important }
.mt675 { margin-top: var(--distance-675) !important }
.mt7 { margin-top: var(--distance-7) !important }
.mt725 { margin-top: var(--distance-725) !important }
.mt75 { margin-top: var(--distance-75) !important }
.mt775 { margin-top: var(--distance-775) !important }
.mt8 { margin-top: var(--distance-8) !important }
.mt825 { margin-top: var(--distance-825) !important }
.mt85 { margin-top: var(--distance-85) !important }
.mt875 { margin-top: var(--distance-875) !important }
.mt9 { margin-top: var(--distance-9) !important }
.mt925 { margin-top: var(--distance-925) !important }
.mt95 { margin-top: var(--distance-95) !important }
.mt975 { margin-top: var(--distance-975) !important }
.mt10 { margin-top: var(--distance-10) !important }
.mr0 { margin-right: 0 !important }
.mr025 { margin-right: var(--distance-025) !important }
.mr05 { margin-right: var(--distance-05) !important }
.mr075 { margin-right: var(--distance-075) !important }
.mr1 { margin-right: var(--distance-1) !important }
.mr125 { margin-right: var(--distance-125) !important }
.mr15 { margin-right: var(--distance-15) !important }
.mr175 { margin-right: var(--distance-175) !important }
.mr2 { margin-right: var(--distance-2) !important }
.mr225 { margin-right: var(--distance-225) !important }
.mr25 { margin-right: var(--distance-25) !important }
.mr275 { margin-right: var(--distance-275) !important }
.mr3 { margin-right: var(--distance-3) !important }
.mr325 { margin-right: var(--distance-325) !important }
.mr35 { margin-right: var(--distance-35) !important }
.mr375 { margin-right: var(--distance-375) !important }
.mr4 { margin-right: var(--distance-4) !important }
.mr425 { margin-right: var(--distance-425) !important }
.mr45 { margin-right: var(--distance-45) !important }
.mr475 { margin-right: var(--distance-475) !important }
.mr5 { margin-right: var(--distance-5) !important }
.mr525 { margin-right: var(--distance-525) !important }
.mr55 { margin-right: var(--distance-55) !important }
.mr575 { margin-right: var(--distance-575) !important }
.mr6 { margin-right: var(--distance-6) !important }
.mr625 { margin-right: var(--distance-625) !important }
.mr65 { margin-right: var(--distance-65) !important }
.mr675 { margin-right: var(--distance-675) !important }
.mr7 { margin-right: var(--distance-7) !important }
.mr725 { margin-right: var(--distance-725) !important }
.mr75 { margin-right: var(--distance-75) !important }
.mr775 { margin-right: var(--distance-775) !important }
.mr8 { margin-right: var(--distance-8) !important }
.mr825 { margin-right: var(--distance-825) !important }
.mr85 { margin-right: var(--distance-85) !important }
.mr875 { margin-right: var(--distance-875) !important }
.mr9 { margin-right: var(--distance-9) !important }
.mr925 { margin-right: var(--distance-925) !important }
.mr95 { margin-right: var(--distance-95) !important }
.mr975 { margin-right: var(--distance-975) !important }
.mr10 { margin-right: var(--distance-10) !important }
.mb0 { margin-bottom: 0 !important }
.mb025 { margin-bottom: var(--distance-025) !important }
.mb05 { margin-bottom: var(--distance-05) !important }
.mb075 { margin-bottom: var(--distance-075) !important }
.mb1 { margin-bottom: var(--distance-1) !important }
.mb125 { margin-bottom: var(--distance-125) !important }
.mb15 { margin-bottom: var(--distance-15) !important }
.mb175 { margin-bottom: var(--distance-175) !important }
.mb2 { margin-bottom: var(--distance-2) !important }
.mb225 { margin-bottom: var(--distance-225) !important }
.mb25 { margin-bottom: var(--distance-25) !important }
.mb275 { margin-bottom: var(--distance-275) !important }
.mb3 { margin-bottom: var(--distance-3) !important }
.mb325 { margin-bottom: var(--distance-325) !important }
.mb35 { margin-bottom: var(--distance-35) !important }
.mb375 { margin-bottom: var(--distance-375) !important }
.mb4 { margin-bottom: var(--distance-4) !important }
.mb425 { margin-bottom: var(--distance-425) !important }
.mb45 { margin-bottom: var(--distance-45) !important }
.mb475 { margin-bottom: var(--distance-475) !important }
.mb5 { margin-bottom: var(--distance-5) !important }
.mb525 { margin-bottom: var(--distance-525) !important }
.mb55 { margin-bottom: var(--distance-55) !important }
.mb575 { margin-bottom: var(--distance-575) !important }
.mb6 { margin-bottom: var(--distance-6) !important }
.mb625 { margin-bottom: var(--distance-625) !important }
.mb65 { margin-bottom: var(--distance-65) !important }
.mb675 { margin-bottom: var(--distance-675) !important }
.mb7 { margin-bottom: var(--distance-7) !important }
.mb725 { margin-bottom: var(--distance-725) !important }
.mb75 { margin-bottom: var(--distance-75) !important }
.mb775 { margin-bottom: var(--distance-775) !important }
.mb8 { margin-bottom: var(--distance-8) !important }
.mb825 { margin-bottom: var(--distance-825) !important }
.mb85 { margin-bottom: var(--distance-85) !important }
.mb875 { margin-bottom: var(--distance-875) !important }
.mb9 { margin-bottom: var(--distance-9) !important }
.mb925 { margin-bottom: var(--distance-925) !important }
.mb95 { margin-bottom: var(--distance-95) !important }
.mb975 { margin-bottom: var(--distance-975) !important }
.mb10 { margin-bottom: var(--distance-10) !important }
.ml0 { margin-left: 0 !important }
.ml025 { margin-left: var(--distance-025) !important }
.ml05 { margin-left: var(--distance-05) !important }
.ml075 { margin-left: var(--distance-075) !important }
.ml1 { margin-left: var(--distance-1) !important }
.ml125 { margin-left: var(--distance-125) !important }
.ml15 { margin-left: var(--distance-15) !important }
.ml175 { margin-left: var(--distance-175) !important }
.ml2 { margin-left: var(--distance-2) !important }
.ml225 { margin-left: var(--distance-225) !important }
.ml25 { margin-left: var(--distance-25) !important }
.ml275 { margin-left: var(--distance-275) !important }
.ml3 { margin-left: var(--distance-3) !important }
.ml325 { margin-left: var(--distance-325) !important }
.ml35 { margin-left: var(--distance-35) !important }
.ml375 { margin-left: var(--distance-375) !important }
.ml4 { margin-left: var(--distance-4) !important }
.ml425 { margin-left: var(--distance-425) !important }
.ml45 { margin-left: var(--distance-45) !important }
.ml475 { margin-left: var(--distance-475) !important }
.ml5 { margin-left: var(--distance-5) !important }
.ml525 { margin-left: var(--distance-525) !important }
.ml55 { margin-left: var(--distance-55) !important }
.ml575 { margin-left: var(--distance-575) !important }
.ml6 { margin-left: var(--distance-6) !important }
.ml625 { margin-left: var(--distance-625) !important }
.ml65 { margin-left: var(--distance-65) !important }
.ml675 { margin-left: var(--distance-675) !important }
.ml7 { margin-left: var(--distance-7) !important }
.ml725 { margin-left: var(--distance-725) !important }
.ml75 { margin-left: var(--distance-75) !important }
.ml775 { margin-left: var(--distance-775) !important }
.ml8 { margin-left: var(--distance-8) !important }
.ml825 { margin-left: var(--distance-825) !important }
.ml85 { margin-left: var(--distance-85) !important }
.ml875 { margin-left: var(--distance-875) !important }
.ml9 { margin-left: var(--distance-9) !important }
.ml925 { margin-left: var(--distance-925) !important }
.ml95 { margin-left: var(--distance-95) !important }
.ml975 { margin-left: var(--distance-975) !important }
.ml10 { margin-left: var(--distance-10) !important }
.neg-m0 { margin: 0 !important }
.neg-m025 { margin: var(--distance-025) !important }
.neg-m05 { margin: var(--distance-05) !important }
.neg-m075 { margin: var(--distance-075) !important }
.neg-m1 { margin: var(--distance-1) !important }
.neg-m125 { margin: var(--distance-125) !important }
.neg-m15 { margin: var(--distance-15) !important }
.neg-m175 { margin: var(--distance-175) !important }
.neg-m2 { margin: var(--distance-2) !important }
.neg-m225 { margin: var(--distance-225) !important }
.neg-m25 { margin: var(--distance-25) !important }
.neg-m275 { margin: var(--distance-275) !important }
.neg-m3 { margin: var(--distance-3) !important }
.neg-m325 { margin: var(--distance-325) !important }
.neg-m35 { margin: var(--distance-35) !important }
.neg-m375 { margin: var(--distance-375) !important }
.neg-m4 { margin: var(--distance-4) !important }
.neg-m425 { margin: var(--distance-425) !important }
.neg-m45 { margin: var(--distance-45) !important }
.neg-m475 { margin: var(--distance-475) !important }
.neg-m5 { margin: var(--distance-5) !important }
.neg-m525 { margin: var(--distance-525) !important }
.neg-m55 { margin: var(--distance-55) !important }
.neg-m575 { margin: var(--distance-575) !important }
.neg-m6 { margin: var(--distance-6) !important }
.neg-m625 { margin: var(--distance-625) !important }
.neg-m65 { margin: var(--distance-65) !important }
.neg-m675 { margin: var(--distance-675) !important }
.neg-m7 { margin: var(--distance-7) !important }
.neg-m725 { margin: var(--distance-725) !important }
.neg-m75 { margin: var(--distance-75) !important }
.neg-m775 { margin: var(--distance-775) !important }
.neg-m8 { margin: var(--distance-8) !important }
.neg-m825 { margin: var(--distance-825) !important }
.neg-m85 { margin: var(--distance-85) !important }
.neg-m875 { margin: var(--distance-875) !important }
.neg-m9 { margin: var(--distance-9) !important }
.neg-m925 { margin: var(--distance-925) !important }
.neg-m95 { margin: var(--distance-95) !important }
.neg-m975 { margin: var(--distance-975) !important }
.neg-m10 { margin: var(--distance-10) !important }
.neg-mt0 { margin-top: 0 !important }
.neg-mt025 { margin-top: var(--distance-025) !important }
.neg-mt05 { margin-top: var(--distance-05) !important }
.neg-mt075 { margin-top: var(--distance-075) !important }
.neg-mt08 { margin-top: var(--distance-08) !important}
.neg-mt1 { margin-top: var(--distance-1) !important }
.neg-mt125 { margin-top: var(--distance-125) !important }
.neg-mt15 { margin-top: var(--distance-15) !important }
.neg-mt175 { margin-top: var(--distance-175) !important }
.neg-mt2 { margin-top: var(--distance-2) !important }
.neg-mt225 { margin-top: var(--distance-225) !important }
.neg-mt25 { margin-top: var(--distance-25) !important }
.neg-mt275 { margin-top: var(--distance-275) !important }
.neg-mt3 { margin-top: var(--distance-3) !important }
.neg-mt325 { margin-top: var(--distance-325) !important }
.neg-mt35 { margin-top: var(--distance-35) !important }
.neg-mt375 { margin-top: var(--distance-375) !important }
.neg-mt4 { margin-top: var(--distance-4) !important }
.neg-mt425 { margin-top: var(--distance-425) !important }
.neg-mt45 { margin-top: var(--distance-45) !important }
.neg-mt475 { margin-top: var(--distance-475) !important }
.neg-mt5 { margin-top: var(--distance-5) !important }
.neg-mt525 { margin-top: var(--distance-525) !important }
.neg-mt55 { margin-top: var(--distance-55) !important }
.neg-mt575 { margin-top: var(--distance-575) !important }
.neg-mt6 { margin-top: var(--distance-6) !important }
.neg-mt625 { margin-top: var(--distance-625) !important }
.neg-mt65 { margin-top: var(--distance-65) !important }
.neg-mt675 { margin-top: var(--distance-675) !important }
.neg-mt7 { margin-top: var(--distance-7) !important }
.neg-mt725 { margin-top: var(--distance-725) !important }
.neg-mt75 { margin-top: var(--distance-75) !important }
.neg-mt775 { margin-top: var(--distance-775) !important }
.neg-mt8 { margin-top: var(--distance-8) !important }
.neg-mt825 { margin-top: var(--distance-825) !important }
.neg-mt85 { margin-top: var(--distance-85) !important }
.neg-mt875 { margin-top: var(--distance-875) !important }
.neg-mt9 { margin-top: var(--distance-9) !important }
.neg-mt925 { margin-top: var(--distance-925) !important }
.neg-mt95 { margin-top: var(--distance-95) !important }
.neg-mt975 { margin-top: var(--distance-975) !important }
.neg-mt10 { margin-top: var(--distance-10) !important }
.neg-mr0 { margin-right: 0 !important }
.neg-mr025 { margin-right: var(--distance-025) !important }
.neg-mr05 { margin-right: var(--distance-05) !important }
.neg-mr075 { margin-right: var(--distance-075) !important }
.neg-mr1 { margin-right: var(--distance-1) !important }
.neg-mr125 { margin-right: var(--distance-125) !important }
.neg-mr15 { margin-right: var(--distance-15) !important }
.neg-mr175 { margin-right: var(--distance-175) !important }
.neg-mr2 { margin-right: var(--distance-2) !important }
.neg-mr225 { margin-right: var(--distance-225) !important }
.neg-mr25 { margin-right: var(--distance-25) !important }
.neg-mr275 { margin-right: var(--distance-275) !important }
.neg-mr3 { margin-right: var(--distance-3) !important }
.neg-mr325 { margin-right: var(--distance-325) !important }
.neg-mr35 { margin-right: var(--distance-35) !important }
.neg-mr375 { margin-right: var(--distance-375) !important }
.neg-mr4 { margin-right: var(--distance-4) !important }
.neg-mr425 { margin-right: var(--distance-425) !important }
.neg-mr45 { margin-right: var(--distance-45) !important }
.neg-mr475 { margin-right: var(--distance-475) !important }
.neg-mr5 { margin-right: var(--distance-5) !important }
.neg-mr525 { margin-right: var(--distance-525) !important }
.neg-mr55 { margin-right: var(--distance-55) !important }
.neg-mr575 { margin-right: var(--distance-575) !important }
.neg-mr6 { margin-right: var(--distance-6) !important }
.neg-mr625 { margin-right: var(--distance-625) !important }
.neg-mr65 { margin-right: var(--distance-65) !important }
.neg-mr675 { margin-right: var(--distance-675) !important }
.neg-mr7 { margin-right: var(--distance-7) !important }
.neg-mr725 { margin-right: var(--distance-725) !important }
.neg-mr75 { margin-right: var(--distance-75) !important }
.neg-mr775 { margin-right: var(--distance-775) !important }
.neg-mr8 { margin-right: var(--distance-8) !important }
.neg-mr825 { margin-right: var(--distance-825) !important }
.neg-mr85 { margin-right: var(--distance-85) !important }
.neg-mr875 { margin-right: var(--distance-875) !important }
.neg-mr9 { margin-right: var(--distance-9) !important }
.neg-mr925 { margin-right: var(--distance-925) !important }
.neg-mr95 { margin-right: var(--distance-95) !important }
.neg-mr975 { margin-right: var(--distance-975) !important }
.neg-mr10 { margin-right: var(--distance-10) !important }
.neg-mb0 { margin-bottom: 0 !important }
.neg-mb025 { margin-bottom: var(--distance-025) !important }
.neg-mb05 { margin-bottom: var(--distance-05) !important }
.neg-mb075 { margin-bottom: var(--distance-075) !important }
.neg-mb1 { margin-bottom: var(--distance-1) !important }
.neg-mb125 { margin-bottom: var(--distance-125) !important }
.neg-mb15 { margin-bottom: var(--distance-15) !important }
.neg-mb175 { margin-bottom: var(--distance-175) !important }
.neg-mb2 { margin-bottom: var(--distance-2) !important }
.neg-mb225 { margin-bottom: var(--distance-225) !important }
.neg-mb25 { margin-bottom: var(--distance-25) !important }
.neg-mb275 { margin-bottom: var(--distance-275) !important }
.neg-mb3 { margin-bottom: var(--distance-3) !important }
.neg-mb325 { margin-bottom: var(--distance-325) !important }
.neg-mb35 { margin-bottom: var(--distance-35) !important }
.neg-mb375 { margin-bottom: var(--distance-375) !important }
.neg-mb4 { margin-bottom: var(--distance-4) !important }
.neg-mb425 { margin-bottom: var(--distance-425) !important }
.neg-mb45 { margin-bottom: var(--distance-45) !important }
.neg-mb475 { margin-bottom: var(--distance-475) !important }
.neg-mb5 { margin-bottom: var(--distance-5) !important }
.neg-mb525 { margin-bottom: var(--distance-525) !important }
.neg-mb55 { margin-bottom: var(--distance-55) !important }
.neg-mb575 { margin-bottom: var(--distance-575) !important }
.neg-mb6 { margin-bottom: var(--distance-6) !important }
.neg-mb625 { margin-bottom: var(--distance-625) !important }
.neg-mb65 { margin-bottom: var(--distance-65) !important }
.neg-mb675 { margin-bottom: var(--distance-675) !important }
.neg-mb7 { margin-bottom: var(--distance-7) !important }
.neg-mb725 { margin-bottom: var(--distance-725) !important }
.neg-mb75 { margin-bottom: var(--distance-75) !important }
.neg-mb775 { margin-bottom: var(--distance-775) !important }
.neg-mb8 { margin-bottom: var(--distance-8) !important }
.neg-mb825 { margin-bottom: var(--distance-825) !important }
.neg-mb85 { margin-bottom: var(--distance-85) !important }
.neg-mb875 { margin-bottom: var(--distance-875) !important }
.neg-mb9 { margin-bottom: var(--distance-9) !important }
.neg-mb925 { margin-bottom: var(--distance-925) !important }
.neg-mb95 { margin-bottom: var(--distance-95) !important }
.neg-mb975 { margin-bottom: var(--distance-975) !important }
.neg-mb10 { margin-bottom: var(--distance-10) !important }
.neg-ml0 { margin-left: 0 !important }
.neg-ml025 { margin-left: var(--distance-025) !important }
.neg-ml05 { margin-left: var(--distance-05) !important }
.neg-ml075 { margin-left: var(--distance-075) !important }
.neg-ml1 { margin-left: var(--distance-1) !important }
.neg-ml125 { margin-left: var(--distance-125) !important }
.neg-ml15 { margin-left: var(--distance-15) !important }
.neg-ml175 { margin-left: var(--distance-175) !important }
.neg-ml2 { margin-left: var(--distance-2) !important }
.neg-ml225 { margin-left: var(--distance-225) !important }
.neg-ml25 { margin-left: var(--distance-25) !important }
.neg-ml275 { margin-left: var(--distance-275) !important }
.neg-ml3 { margin-left: var(--distance-3) !important }
.neg-ml325 { margin-left: var(--distance-325) !important }
.neg-ml35 { margin-left: var(--distance-35) !important }
.neg-ml375 { margin-left: var(--distance-375) !important }
.neg-ml4 { margin-left: var(--distance-4) !important }
.neg-ml425 { margin-left: var(--distance-425) !important }
.neg-ml45 { margin-left: var(--distance-45) !important }
.neg-ml475 { margin-left: var(--distance-475) !important }
.neg-ml5 { margin-left: var(--distance-5) !important }
.neg-ml525 { margin-left: var(--distance-525) !important }
.neg-ml55 { margin-left: var(--distance-55) !important }
.neg-ml575 { margin-left: var(--distance-575) !important }
.neg-ml6 { margin-left: var(--distance-6) !important }
.neg-ml625 { margin-left: var(--distance-625) !important }
.neg-ml65 { margin-left: var(--distance-65) !important }
.neg-ml675 { margin-left: var(--distance-675) !important }
.neg-ml7 { margin-left: var(--distance-7) !important }
.neg-ml725 { margin-left: var(--distance-725) !important }
.neg-ml75 { margin-left: var(--distance-75) !important }
.neg-ml775 { margin-left: var(--distance-775) !important }
.neg-ml8 { margin-left: var(--distance-8) !important }
.neg-ml825 { margin-left: var(--distance-825) !important }
.neg-ml85 { margin-left: var(--distance-85) !important }
.neg-ml875 { margin-left: var(--distance-875) !important }
.neg-ml9 { margin-left: var(--distance-9) !important }
.neg-ml925 { margin-left: var(--distance-925) !important }
.neg-ml95 { margin-left: var(--distance-95) !important }
.neg-ml975 { margin-left: var(--distance-975) !important }
.neg-ml10 { margin-left: var(--distance-10) !important }
.p0 { padding: 0 !important }
.p025 { padding: var(--distance-025) !important }
.p05 { padding: var(--distance-05) !important }
.p075 { padding: var(--distance-075) !important }
.p1 { padding: var(--distance-1) !important }
.p125 { padding: var(--distance-125) !important }
.p15 { padding: var(--distance-15) !important }
.p175 { padding: var(--distance-175) !important }
.p2 { padding: var(--distance-2) !important }
.p225 { padding: var(--distance-225) !important }
.p25 { padding: var(--distance-25) !important }
.p275 { padding: var(--distance-275) !important }
.p3 { padding: var(--distance-3) !important }
.p325 { padding: var(--distance-325) !important }
.p35 { padding: var(--distance-35) !important }
.p375 { padding: var(--distance-375) !important }
.p4 { padding: var(--distance-4) !important }
.p425 { padding: var(--distance-425) !important }
.p45 { padding: var(--distance-45) !important }
.p475 { padding: var(--distance-475) !important }
.p5 { padding: var(--distance-5) !important }
.p525 { padding: var(--distance-525) !important }
.p55 { padding: var(--distance-55) !important }
.p575 { padding: var(--distance-575) !important }
.p6 { padding: var(--distance-6) !important }
.p625 { padding: var(--distance-625) !important }
.p65 { padding: var(--distance-65) !important }
.p675 { padding: var(--distance-675) !important }
.p7 { padding: var(--distance-7) !important }
.p725 { padding: var(--distance-725) !important }
.p75 { padding: var(--distance-75) !important }
.p775 { padding: var(--distance-775) !important }
.p8 { padding: var(--distance-8) !important }
.p825 { padding: var(--distance-825) !important }
.p85 { padding: var(--distance-85) !important }
.p875 { padding: var(--distance-875) !important }
.p9 { padding: var(--distance-9) !important }
.p925 { padding: var(--distance-925) !important }
.p95 { padding: var(--distance-95) !important }
.p975 { padding: var(--distance-975) !important }
.p10 { padding: var(--distance-10) !important }
.pt0 { padding-top: 0 !important }
.pt025 { padding-top: var(--distance-025) !important }
.pt05 { padding-top: var(--distance-05) !important }
.pt075 { padding-top: var(--distance-075) !important }
.pt1 { padding-top: var(--distance-1) !important }
.pt125 { padding-top: var(--distance-125) !important }
.pt15 { padding-top: var(--distance-15) !important }
.pt175 { padding-top: var(--distance-175) !important }
.pt2 { padding-top: var(--distance-2) !important }
.pt225 { padding-top: var(--distance-225) !important }
.pt25 { padding-top: var(--distance-25) !important }
.pt275 { padding-top: var(--distance-275) !important }
.pt3 { padding-top: var(--distance-3) !important }
.pt325 { padding-top: var(--distance-325) !important }
.pt35 { padding-top: var(--distance-35) !important }
.pt375 { padding-top: var(--distance-375) !important }
.pt4 { padding-top: var(--distance-4) !important }
.pt425 { padding-top: var(--distance-425) !important }
.pt45 { padding-top: var(--distance-45) !important }
.pt475 { padding-top: var(--distance-475) !important }
.pt5 { padding-top: var(--distance-5) !important }
.pt525 { padding-top: var(--distance-525) !important }
.pt55 { padding-top: var(--distance-55) !important }
.pt575 { padding-top: var(--distance-575) !important }
.pt6 { padding-top: var(--distance-6) !important }
.pt625 { padding-top: var(--distance-625) !important }
.pt65 { padding-top: var(--distance-65) !important }
.pt675 { padding-top: var(--distance-675) !important }
.pt7 { padding-top: var(--distance-7) !important }
.pt725 { padding-top: var(--distance-725) !important }
.pt75 { padding-top: var(--distance-75) !important }
.pt775 { padding-top: var(--distance-775) !important }
.pt8 { padding-top: var(--distance-8) !important }
.pt825 { padding-top: var(--distance-825) !important }
.pt85 { padding-top: var(--distance-85) !important }
.pt875 { padding-top: var(--distance-875) !important }
.pt9 { padding-top: var(--distance-9) !important }
.pt925 { padding-top: var(--distance-925) !important }
.pt95 { padding-top: var(--distance-95) !important }
.pt975 { padding-top: var(--distance-975) !important }
.pt10 { padding-top: var(--distance-10) !important }
.pr0 { padding-right: 0 !important }
.pr025 { padding-right: var(--distance-025) !important }
.pr05 { padding-right: var(--distance-05) !important }
.pr075 { padding-right: var(--distance-075) !important }
.pr1 { padding-right: var(--distance-1) !important }
.pr125 { padding-right: var(--distance-125) !important }
.pr15 { padding-right: var(--distance-15) !important }
.pr175 { padding-right: var(--distance-175) !important }
.pr2 { padding-right: var(--distance-2) !important }
.pr225 { padding-right: var(--distance-225) !important }
.pr25 { padding-right: var(--distance-25) !important }
.pr275 { padding-right: var(--distance-275) !important }
.pr3 { padding-right: var(--distance-3) !important }
.pr325 { padding-right: var(--distance-325) !important }
.pr35 { padding-right: var(--distance-35) !important }
.pr375 { padding-right: var(--distance-375) !important }
.pr4 { padding-right: var(--distance-4) !important }
.pr425 { padding-right: var(--distance-425) !important }
.pr45 { padding-right: var(--distance-45) !important }
.pr475 { padding-right: var(--distance-475) !important }
.pr5 { padding-right: var(--distance-5) !important }
.pr525 { padding-right: var(--distance-525) !important }
.pr55 { padding-right: var(--distance-55) !important }
.pr575 { padding-right: var(--distance-575) !important }
.pr6 { padding-right: var(--distance-6) !important }
.pr625 { padding-right: var(--distance-625) !important }
.pr65 { padding-right: var(--distance-65) !important }
.pr675 { padding-right: var(--distance-675) !important }
.pr7 { padding-right: var(--distance-7) !important }
.pr725 { padding-right: var(--distance-725) !important }
.pr75 { padding-right: var(--distance-75) !important }
.pr775 { padding-right: var(--distance-775) !important }
.pr8 { padding-right: var(--distance-8) !important }
.pr825 { padding-right: var(--distance-825) !important }
.pr85 { padding-right: var(--distance-85) !important }
.pr875 { padding-right: var(--distance-875) !important }
.pr9 { padding-right: var(--distance-9) !important }
.pr925 { padding-right: var(--distance-925) !important }
.pr95 { padding-right: var(--distance-95) !important }
.pr975 { padding-right: var(--distance-975) !important }
.pr10 { padding-right: var(--distance-10) !important }
.pb0 { padding-bottom: 0 !important }
.pb025 { padding-bottom: var(--distance-025) !important }
.pb05 { padding-bottom: var(--distance-05) !important }
.pb075 { padding-bottom: var(--distance-075) !important }
.pb1 { padding-bottom: var(--distance-1) !important }
.pb125 { padding-bottom: var(--distance-125) !important }
.pb15 { padding-bottom: var(--distance-15) !important }
.pb175 { padding-bottom: var(--distance-175) !important }
.pb2 { padding-bottom: var(--distance-2) !important }
.pb225 { padding-bottom: var(--distance-225) !important }
.pb25 { padding-bottom: var(--distance-25) !important }
.pb275 { padding-bottom: var(--distance-275) !important }
.pb3 { padding-bottom: var(--distance-3) !important }
.pb325 { padding-bottom: var(--distance-325) !important }
.pb35 { padding-bottom: var(--distance-35) !important }
.pb375 { padding-bottom: var(--distance-375) !important }
.pb4 { padding-bottom: var(--distance-4) !important }
.pb425 { padding-bottom: var(--distance-425) !important }
.pb45 { padding-bottom: var(--distance-45) !important }
.pb475 { padding-bottom: var(--distance-475) !important }
.pb5 { padding-bottom: var(--distance-5) !important }
.pb525 { padding-bottom: var(--distance-525) !important }
.pb55 { padding-bottom: var(--distance-55) !important }
.pb575 { padding-bottom: var(--distance-575) !important }
.pb6 { padding-bottom: var(--distance-6) !important }
.pb625 { padding-bottom: var(--distance-625) !important }
.pb65 { padding-bottom: var(--distance-65) !important }
.pb675 { padding-bottom: var(--distance-675) !important }
.pb7 { padding-bottom: var(--distance-7) !important }
.pb725 { padding-bottom: var(--distance-725) !important }
.pb75 { padding-bottom: var(--distance-75) !important }
.pb775 { padding-bottom: var(--distance-775) !important }
.pb8 { padding-bottom: var(--distance-8) !important }
.pb825 { padding-bottom: var(--distance-825) !important }
.pb85 { padding-bottom: var(--distance-85) !important }
.pb875 { padding-bottom: var(--distance-875) !important }
.pb9 { padding-bottom: var(--distance-9) !important }
.pb925 { padding-bottom: var(--distance-925) !important }
.pb95 { padding-bottom: var(--distance-95) !important }
.pb975 { padding-bottom: var(--distance-975) !important }
.pb10 { padding-bottom: var(--distance-10) !important }
.pl0 { padding-left: 0 !important }
.pl025 { padding-left: var(--distance-025) !important }
.pl05 { padding-left: var(--distance-05) !important }
.pl075 { padding-left: var(--distance-075) !important }
.pl1 { padding-left: var(--distance-1) !important }
.pl125 { padding-left: var(--distance-125) !important }
.pl15 { padding-left: var(--distance-15) !important }
.pl175 { padding-left: var(--distance-175) !important }
.pl2 { padding-left: var(--distance-2) !important }
.pl225 { padding-left: var(--distance-225) !important }
.pl25 { padding-left: var(--distance-25) !important }
.pl275 { padding-left: var(--distance-275) !important }
.pl3 { padding-left: var(--distance-3) !important }
.pl325 { padding-left: var(--distance-325) !important }
.pl35 { padding-left: var(--distance-35) !important }
.pl375 { padding-left: var(--distance-375) !important }
.pl4 { padding-left: var(--distance-4) !important }
.pl425 { padding-left: var(--distance-425) !important }
.pl45 { padding-left: var(--distance-45) !important }
.pl475 { padding-left: var(--distance-475) !important }
.pl5 { padding-left: var(--distance-5) !important }
.pl525 { padding-left: var(--distance-525) !important }
.pl55 { padding-left: var(--distance-55) !important }
.pl575 { padding-left: var(--distance-575) !important }
.pl6 { padding-left: var(--distance-6) !important }
.pl625 { padding-left: var(--distance-625) !important }
.pl65 { padding-left: var(--distance-65) !important }
.pl675 { padding-left: var(--distance-675) !important }
.pl7 { padding-left: var(--distance-7) !important }
.pl725 { padding-left: var(--distance-725) !important }
.pl75 { padding-left: var(--distance-75) !important }
.pl775 { padding-left: var(--distance-775) !important }
.pl8 { padding-left: var(--distance-8) !important }
.pl825 { padding-left: var(--distance-825) !important }
.pl85 { padding-left: var(--distance-85) !important }
.pl875 { padding-left: var(--distance-875) !important }
.pl9 { padding-left: var(--distance-9) !important }
.pl925 { padding-left: var(--distance-925) !important }
.pl95 { padding-left: var(--distance-95) !important }
.pl975 { padding-left: var(--distance-975) !important }
.pl10 { padding-left: var(--distance-10) !important }
@media screen and (min-width: 1025px) {
  .m0-desktop { margin: 0 !important }
  .m025-desktop { margin: var(--distance-025) !important }
  .m05-desktop { margin: var(--distance-05) !important }
  .m075-desktop { margin: var(--distance-075) !important }
  .m1-desktop { margin: var(--distance-1) !important }
  .m125-desktop { margin: var(--distance-125) !important }
  .m15-desktop { margin: var(--distance-15) !important }
  .m175-desktop { margin: var(--distance-175) !important }
  .m2-desktop { margin: var(--distance-2) !important }
  .m225-desktop { margin: var(--distance-225) !important }
  .m25-desktop { margin: var(--distance-25) !important }
  .m275-desktop { margin: var(--distance-275) !important }
  .m3-desktop { margin: var(--distance-3) !important }
  .m325-desktop { margin: var(--distance-325) !important }
  .m35-desktop { margin: var(--distance-35) !important }
  .m375-desktop { margin: var(--distance-375) !important }
  .m4-desktop { margin: var(--distance-4) !important }
  .m425-desktop { margin: var(--distance-425) !important }
  .m45-desktop { margin: var(--distance-45) !important }
  .m475-desktop { margin: var(--distance-475) !important }
  .m5-desktop { margin: var(--distance-5) !important }
  .m525-desktop { margin: var(--distance-525) !important }
  .m55-desktop { margin: var(--distance-55) !important }
  .m575-desktop { margin: var(--distance-575) !important }
  .m6-desktop { margin: var(--distance-6) !important }
  .m625-desktop { margin: var(--distance-625) !important }
  .m65-desktop { margin: var(--distance-65) !important }
  .m675-desktop { margin: var(--distance-675) !important }
  .m7-desktop { margin: var(--distance-7) !important }
  .m725-desktop { margin: var(--distance-725) !important }
  .m75-desktop { margin: var(--distance-75) !important }
  .m775-desktop { margin: var(--distance-775) !important }
  .m8-desktop { margin: var(--distance-8) !important }
  .m825-desktop { margin: var(--distance-825) !important }
  .m85-desktop { margin: var(--distance-85) !important }
  .m875-desktop { margin: var(--distance-875) !important }
  .m9-desktop { margin: var(--distance-9) !important }
  .m925-desktop { margin: var(--distance-925) !important }
  .m95-desktop { margin: var(--distance-95) !important }
  .m975-desktop { margin: var(--distance-975) !important }
  .m10-desktop { margin: var(--distance-10) !important }
  .mt0-desktop { margin-top: 0 !important }
  .mt025-desktop { margin-top: var(--distance-025) !important }
  .mt05-desktop { margin-top: var(--distance-05) !important }
  .mt075-desktop { margin-top: var(--distance-075) !important }
  .mt08-desktop { margin-top: var(--distance-08) !important}
  .mt1-desktop { margin-top: var(--distance-1) !important }
  .mt125-desktop { margin-top: var(--distance-125) !important }
  .mt15-desktop { margin-top: var(--distance-15) !important }
  .mt175-desktop { margin-top: var(--distance-175) !important }
  .mt2-desktop { margin-top: var(--distance-2) !important }
  .mt225-desktop { margin-top: var(--distance-225) !important }
  .mt25-desktop { margin-top: var(--distance-25) !important }
  .mt275-desktop { margin-top: var(--distance-275) !important }
  .mt3-desktop { margin-top: var(--distance-3) !important }
  .mt325-desktop { margin-top: var(--distance-325) !important }
  .mt35-desktop { margin-top: var(--distance-35) !important }
  .mt375-desktop { margin-top: var(--distance-375) !important }
  .mt4-desktop { margin-top: var(--distance-4) !important }
  .mt425-desktop { margin-top: var(--distance-425) !important }
  .mt45-desktop { margin-top: var(--distance-45) !important }
  .mt475-desktop { margin-top: var(--distance-475) !important }
  .mt5-desktop { margin-top: var(--distance-5) !important }
  .mt525-desktop { margin-top: var(--distance-525) !important }
  .mt55-desktop { margin-top: var(--distance-55) !important }
  .mt575-desktop { margin-top: var(--distance-575) !important }
  .mt6-desktop { margin-top: var(--distance-6) !important }
  .mt625-desktop { margin-top: var(--distance-625) !important }
  .mt65-desktop { margin-top: var(--distance-65) !important }
  .mt675-desktop { margin-top: var(--distance-675) !important }
  .mt7-desktop { margin-top: var(--distance-7) !important }
  .mt725-desktop { margin-top: var(--distance-725) !important }
  .mt75-desktop { margin-top: var(--distance-75) !important }
  .mt775-desktop { margin-top: var(--distance-775) !important }
  .mt8-desktop { margin-top: var(--distance-8) !important }
  .mt825-desktop { margin-top: var(--distance-825) !important }
  .mt85-desktop { margin-top: var(--distance-85) !important }
  .mt875-desktop { margin-top: var(--distance-875) !important }
  .mt9-desktop { margin-top: var(--distance-9) !important }
  .mt925-desktop { margin-top: var(--distance-925) !important }
  .mt95-desktop { margin-top: var(--distance-95) !important }
  .mt975-desktop { margin-top: var(--distance-975) !important }
  .mt10-desktop { margin-top: var(--distance-10) !important }
  .mr0-desktop { margin-right: 0 !important }
  .mr025-desktop { margin-right: var(--distance-025) !important }
  .mr05-desktop { margin-right: var(--distance-05) !important }
  .mr075-desktop { margin-right: var(--distance-075) !important }
  .mr1-desktop { margin-right: var(--distance-1) !important }
  .mr125-desktop { margin-right: var(--distance-125) !important }
  .mr15-desktop { margin-right: var(--distance-15) !important }
  .mr175-desktop { margin-right: var(--distance-175) !important }
  .mr2-desktop { margin-right: var(--distance-2) !important }
  .mr225-desktop { margin-right: var(--distance-225) !important }
  .mr25-desktop { margin-right: var(--distance-25) !important }
  .mr275-desktop { margin-right: var(--distance-275) !important }
  .mr3-desktop { margin-right: var(--distance-3) !important }
  .mr325-desktop { margin-right: var(--distance-325) !important }
  .mr35-desktop { margin-right: var(--distance-35) !important }
  .mr375-desktop { margin-right: var(--distance-375) !important }
  .mr4-desktop { margin-right: var(--distance-4) !important }
  .mr425-desktop { margin-right: var(--distance-425) !important }
  .mr45-desktop { margin-right: var(--distance-45) !important }
  .mr475-desktop { margin-right: var(--distance-475) !important }
  .mr5-desktop { margin-right: var(--distance-5) !important }
  .mr525-desktop { margin-right: var(--distance-525) !important }
  .mr55-desktop { margin-right: var(--distance-55) !important }
  .mr575-desktop { margin-right: var(--distance-575) !important }
  .mr6-desktop { margin-right: var(--distance-6) !important }
  .mr625-desktop { margin-right: var(--distance-625) !important }
  .mr65-desktop { margin-right: var(--distance-65) !important }
  .mr675-desktop { margin-right: var(--distance-675) !important }
  .mr7-desktop { margin-right: var(--distance-7) !important }
  .mr725-desktop { margin-right: var(--distance-725) !important }
  .mr75-desktop { margin-right: var(--distance-75) !important }
  .mr775-desktop { margin-right: var(--distance-775) !important }
  .mr8-desktop { margin-right: var(--distance-8) !important }
  .mr825-desktop { margin-right: var(--distance-825) !important }
  .mr85-desktop { margin-right: var(--distance-85) !important }
  .mr875-desktop { margin-right: var(--distance-875) !important }
  .mr9-desktop { margin-right: var(--distance-9) !important }
  .mr925-desktop { margin-right: var(--distance-925) !important }
  .mr95-desktop { margin-right: var(--distance-95) !important }
  .mr975-desktop { margin-right: var(--distance-975) !important }
  .mr10-desktop { margin-right: var(--distance-10) !important }
  .mb0-desktop { margin-bottom: 0 !important }
  .mb025-desktop { margin-bottom: var(--distance-025) !important }
  .mb05-desktop { margin-bottom: var(--distance-05) !important }
  .mb075-desktop { margin-bottom: var(--distance-075) !important }
  .mb1-desktop { margin-bottom: var(--distance-1) !important }
  .mb125-desktop { margin-bottom: var(--distance-125) !important }
  .mb15-desktop { margin-bottom: var(--distance-15) !important }
  .mb175-desktop { margin-bottom: var(--distance-175) !important }
  .mb2-desktop { margin-bottom: var(--distance-2) !important }
  .mb225-desktop { margin-bottom: var(--distance-225) !important }
  .mb25-desktop { margin-bottom: var(--distance-25) !important }
  .mb275-desktop { margin-bottom: var(--distance-275) !important }
  .mb3-desktop { margin-bottom: var(--distance-3) !important }
  .mb325-desktop { margin-bottom: var(--distance-325) !important }
  .mb35-desktop { margin-bottom: var(--distance-35) !important }
  .mb375-desktop { margin-bottom: var(--distance-375) !important }
  .mb4-desktop { margin-bottom: var(--distance-4) !important }
  .mb425-desktop { margin-bottom: var(--distance-425) !important }
  .mb45-desktop { margin-bottom: var(--distance-45) !important }
  .mb475-desktop { margin-bottom: var(--distance-475) !important }
  .mb5-desktop { margin-bottom: var(--distance-5) !important }
  .mb525-desktop { margin-bottom: var(--distance-525) !important }
  .mb55-desktop { margin-bottom: var(--distance-55) !important }
  .mb575-desktop { margin-bottom: var(--distance-575) !important }
  .mb6-desktop { margin-bottom: var(--distance-6) !important }
  .mb625-desktop { margin-bottom: var(--distance-625) !important }
  .mb65-desktop { margin-bottom: var(--distance-65) !important }
  .mb675-desktop { margin-bottom: var(--distance-675) !important }
  .mb7-desktop { margin-bottom: var(--distance-7) !important }
  .mb725-desktop { margin-bottom: var(--distance-725) !important }
  .mb75-desktop { margin-bottom: var(--distance-75) !important }
  .mb775-desktop { margin-bottom: var(--distance-775) !important }
  .mb8-desktop { margin-bottom: var(--distance-8) !important }
  .mb825-desktop { margin-bottom: var(--distance-825) !important }
  .mb85-desktop { margin-bottom: var(--distance-85) !important }
  .mb875-desktop { margin-bottom: var(--distance-875) !important }
  .mb9-desktop { margin-bottom: var(--distance-9) !important }
  .mb925-desktop { margin-bottom: var(--distance-925) !important }
  .mb95-desktop { margin-bottom: var(--distance-95) !important }
  .mb975-desktop { margin-bottom: var(--distance-975) !important }
  .mb10-desktop { margin-bottom: var(--distance-10) !important }
  .ml0-desktop { margin-left: 0 !important }
  .ml025-desktop { margin-left: var(--distance-025) !important }
  .ml05-desktop { margin-left: var(--distance-05) !important }
  .ml075-desktop { margin-left: var(--distance-075) !important }
  .ml1-desktop { margin-left: var(--distance-1) !important }
  .ml125-desktop { margin-left: var(--distance-125) !important }
  .ml15-desktop { margin-left: var(--distance-15) !important }
  .ml175-desktop { margin-left: var(--distance-175) !important }
  .ml2-desktop { margin-left: var(--distance-2) !important }
  .ml225-desktop { margin-left: var(--distance-225) !important }
  .ml25-desktop { margin-left: var(--distance-25) !important }
  .ml275-desktop { margin-left: var(--distance-275) !important }
  .ml3-desktop { margin-left: var(--distance-3) !important }
  .ml325-desktop { margin-left: var(--distance-325) !important }
  .ml35-desktop { margin-left: var(--distance-35) !important }
  .ml375-desktop { margin-left: var(--distance-375) !important }
  .ml4-desktop { margin-left: var(--distance-4) !important }
  .ml425-desktop { margin-left: var(--distance-425) !important }
  .ml45-desktop { margin-left: var(--distance-45) !important }
  .ml475-desktop { margin-left: var(--distance-475) !important }
  .ml5-desktop { margin-left: var(--distance-5) !important }
  .ml525-desktop { margin-left: var(--distance-525) !important }
  .ml55-desktop { margin-left: var(--distance-55) !important }
  .ml575-desktop { margin-left: var(--distance-575) !important }
  .ml6-desktop { margin-left: var(--distance-6) !important }
  .ml625-desktop { margin-left: var(--distance-625) !important }
  .ml65-desktop { margin-left: var(--distance-65) !important }
  .ml675-desktop { margin-left: var(--distance-675) !important }
  .ml7-desktop { margin-left: var(--distance-7) !important }
  .ml725-desktop { margin-left: var(--distance-725) !important }
  .ml75-desktop { margin-left: var(--distance-75) !important }
  .ml775-desktop { margin-left: var(--distance-775) !important }
  .ml8-desktop { margin-left: var(--distance-8) !important }
  .ml825-desktop { margin-left: var(--distance-825) !important }
  .ml85-desktop { margin-left: var(--distance-85) !important }
  .ml875-desktop { margin-left: var(--distance-875) !important }
  .ml9-desktop { margin-left: var(--distance-9) !important }
  .ml925-desktop { margin-left: var(--distance-925) !important }
  .ml95-desktop { margin-left: var(--distance-95) !important }
  .ml975-desktop { margin-left: var(--distance-975) !important }
  .ml10-desktop { margin-left: var(--distance-10) !important }
  .neg-m0-desktop { margin: 0 !important }
  .neg-m025-desktop { margin: var(--distance-025) !important }
  .neg-m05-desktop { margin: var(--distance-05) !important }
  .neg-m075-desktop { margin: var(--distance-075) !important }
  .neg-m1-desktop { margin: var(--distance-1) !important }
  .neg-m125-desktop { margin: var(--distance-125) !important }
  .neg-m15-desktop { margin: var(--distance-15) !important }
  .neg-m175-desktop { margin: var(--distance-175) !important }
  .neg-m2-desktop { margin: var(--distance-2) !important }
  .neg-m225-desktop { margin: var(--distance-225) !important }
  .neg-m25-desktop { margin: var(--distance-25) !important }
  .neg-m275-desktop { margin: var(--distance-275) !important }
  .neg-m3-desktop { margin: var(--distance-3) !important }
  .neg-m325-desktop { margin: var(--distance-325) !important }
  .neg-m35-desktop { margin: var(--distance-35) !important }
  .neg-m375-desktop { margin: var(--distance-375) !important }
  .neg-m4-desktop { margin: var(--distance-4) !important }
  .neg-m425-desktop { margin: var(--distance-425) !important }
  .neg-m45-desktop { margin: var(--distance-45) !important }
  .neg-m475-desktop { margin: var(--distance-475) !important }
  .neg-m5-desktop { margin: var(--distance-5) !important }
  .neg-m525-desktop { margin: var(--distance-525) !important }
  .neg-m55-desktop { margin: var(--distance-55) !important }
  .neg-m575-desktop { margin: var(--distance-575) !important }
  .neg-m6-desktop { margin: var(--distance-6) !important }
  .neg-m625-desktop { margin: var(--distance-625) !important }
  .neg-m65-desktop { margin: var(--distance-65) !important }
  .neg-m675-desktop { margin: var(--distance-675) !important }
  .neg-m7-desktop { margin: var(--distance-7) !important }
  .neg-m725-desktop { margin: var(--distance-725) !important }
  .neg-m75-desktop { margin: var(--distance-75) !important }
  .neg-m775-desktop { margin: var(--distance-775) !important }
  .neg-m8-desktop { margin: var(--distance-8) !important }
  .neg-m825-desktop { margin: var(--distance-825) !important }
  .neg-m85-desktop { margin: var(--distance-85) !important }
  .neg-m875-desktop { margin: var(--distance-875) !important }
  .neg-m9-desktop { margin: var(--distance-9) !important }
  .neg-m925-desktop { margin: var(--distance-925) !important }
  .neg-m95-desktop { margin: var(--distance-95) !important }
  .neg-m975-desktop { margin: var(--distance-975) !important }
  .neg-m10-desktop { margin: var(--distance-10) !important }
  .neg-mt0-desktop { margin-top: 0 !important }
  .neg-mt025-desktop { margin-top: var(--distance-025) !important }
  .neg-mt05-desktop { margin-top: var(--distance-05) !important }
  .neg-mt075-desktop { margin-top: var(--distance-075) !important }
  .neg-mt08-desktop { margin-top: var(--distance-08) !important}
  .neg-mt1-desktop { margin-top: var(--distance-1) !important }
  .neg-mt125-desktop { margin-top: var(--distance-125) !important }
  .neg-mt15-desktop { margin-top: var(--distance-15) !important }
  .neg-mt175-desktop { margin-top: var(--distance-175) !important }
  .neg-mt2-desktop { margin-top: var(--distance-2) !important }
  .neg-mt225-desktop { margin-top: var(--distance-225) !important }
  .neg-mt25-desktop { margin-top: var(--distance-25) !important }
  .neg-mt275-desktop { margin-top: var(--distance-275) !important }
  .neg-mt3-desktop { margin-top: var(--distance-3) !important }
  .neg-mt325-desktop { margin-top: var(--distance-325) !important }
  .neg-mt35-desktop { margin-top: var(--distance-35) !important }
  .neg-mt375-desktop { margin-top: var(--distance-375) !important }
  .neg-mt4-desktop { margin-top: var(--distance-4) !important }
  .neg-mt425-desktop { margin-top: var(--distance-425) !important }
  .neg-mt45-desktop { margin-top: var(--distance-45) !important }
  .neg-mt475-desktop { margin-top: var(--distance-475) !important }
  .neg-mt5-desktop { margin-top: var(--distance-5) !important }
  .neg-mt525-desktop { margin-top: var(--distance-525) !important }
  .neg-mt55-desktop { margin-top: var(--distance-55) !important }
  .neg-mt575-desktop { margin-top: var(--distance-575) !important }
  .neg-mt6-desktop { margin-top: var(--distance-6) !important }
  .neg-mt625-desktop { margin-top: var(--distance-625) !important }
  .neg-mt65-desktop { margin-top: var(--distance-65) !important }
  .neg-mt675-desktop { margin-top: var(--distance-675) !important }
  .neg-mt7-desktop { margin-top: var(--distance-7) !important }
  .neg-mt725-desktop { margin-top: var(--distance-725) !important }
  .neg-mt75-desktop { margin-top: var(--distance-75) !important }
  .neg-mt775-desktop { margin-top: var(--distance-775) !important }
  .neg-mt8-desktop { margin-top: var(--distance-8) !important }
  .neg-mt825-desktop { margin-top: var(--distance-825) !important }
  .neg-mt85-desktop { margin-top: var(--distance-85) !important }
  .neg-mt875-desktop { margin-top: var(--distance-875) !important }
  .neg-mt9-desktop { margin-top: var(--distance-9) !important }
  .neg-mt925-desktop { margin-top: var(--distance-925) !important }
  .neg-mt95-desktop { margin-top: var(--distance-95) !important }
  .neg-mt975-desktop { margin-top: var(--distance-975) !important }
  .neg-mt10-desktop { margin-top: var(--distance-10) !important }
  .neg-mr0-desktop { margin-right: 0 !important }
  .neg-mr025-desktop { margin-right: var(--distance-025) !important }
  .neg-mr05-desktop { margin-right: var(--distance-05) !important }
  .neg-mr075-desktop { margin-right: var(--distance-075) !important }
  .neg-mr1-desktop { margin-right: var(--distance-1) !important }
  .neg-mr125-desktop { margin-right: var(--distance-125) !important }
  .neg-mr15-desktop { margin-right: var(--distance-15) !important }
  .neg-mr175-desktop { margin-right: var(--distance-175) !important }
  .neg-mr2-desktop { margin-right: var(--distance-2) !important }
  .neg-mr225-desktop { margin-right: var(--distance-225) !important }
  .neg-mr25-desktop { margin-right: var(--distance-25) !important }
  .neg-mr275-desktop { margin-right: var(--distance-275) !important }
  .neg-mr3-desktop { margin-right: var(--distance-3) !important }
  .neg-mr325-desktop { margin-right: var(--distance-325) !important }
  .neg-mr35-desktop { margin-right: var(--distance-35) !important }
  .neg-mr375-desktop { margin-right: var(--distance-375) !important }
  .neg-mr4-desktop { margin-right: var(--distance-4) !important }
  .neg-mr425-desktop { margin-right: var(--distance-425) !important }
  .neg-mr45-desktop { margin-right: var(--distance-45) !important }
  .neg-mr475-desktop { margin-right: var(--distance-475) !important }
  .neg-mr5-desktop { margin-right: var(--distance-5) !important }
  .neg-mr525-desktop { margin-right: var(--distance-525) !important }
  .neg-mr55-desktop { margin-right: var(--distance-55) !important }
  .neg-mr575-desktop { margin-right: var(--distance-575) !important }
  .neg-mr6-desktop { margin-right: var(--distance-6) !important }
  .neg-mr625-desktop { margin-right: var(--distance-625) !important }
  .neg-mr65-desktop { margin-right: var(--distance-65) !important }
  .neg-mr675-desktop { margin-right: var(--distance-675) !important }
  .neg-mr7-desktop { margin-right: var(--distance-7) !important }
  .neg-mr725-desktop { margin-right: var(--distance-725) !important }
  .neg-mr75-desktop { margin-right: var(--distance-75) !important }
  .neg-mr775-desktop { margin-right: var(--distance-775) !important }
  .neg-mr8-desktop { margin-right: var(--distance-8) !important }
  .neg-mr825-desktop { margin-right: var(--distance-825) !important }
  .neg-mr85-desktop { margin-right: var(--distance-85) !important }
  .neg-mr875-desktop { margin-right: var(--distance-875) !important }
  .neg-mr9-desktop { margin-right: var(--distance-9) !important }
  .neg-mr925-desktop { margin-right: var(--distance-925) !important }
  .neg-mr95-desktop { margin-right: var(--distance-95) !important }
  .neg-mr975-desktop { margin-right: var(--distance-975) !important }
  .neg-mr10-desktop { margin-right: var(--distance-10) !important }
  .neg-mb0-desktop { margin-bottom: 0 !important }
  .neg-mb025-desktop { margin-bottom: var(--distance-025) !important }
  .neg-mb05-desktop { margin-bottom: var(--distance-05) !important }
  .neg-mb075-desktop { margin-bottom: var(--distance-075) !important }
  .neg-mb1-desktop { margin-bottom: var(--distance-1) !important }
  .neg-mb125-desktop { margin-bottom: var(--distance-125) !important }
  .neg-mb15-desktop { margin-bottom: var(--distance-15) !important }
  .neg-mb175-desktop { margin-bottom: var(--distance-175) !important }
  .neg-mb2-desktop { margin-bottom: var(--distance-2) !important }
  .neg-mb225-desktop { margin-bottom: var(--distance-225) !important }
  .neg-mb25-desktop { margin-bottom: var(--distance-25) !important }
  .neg-mb275-desktop { margin-bottom: var(--distance-275) !important }
  .neg-mb3-desktop { margin-bottom: var(--distance-3) !important }
  .neg-mb325-desktop { margin-bottom: var(--distance-325) !important }
  .neg-mb35-desktop { margin-bottom: var(--distance-35) !important }
  .neg-mb375-desktop { margin-bottom: var(--distance-375) !important }
  .neg-mb4-desktop { margin-bottom: var(--distance-4) !important }
  .neg-mb425-desktop { margin-bottom: var(--distance-425) !important }
  .neg-mb45-desktop { margin-bottom: var(--distance-45) !important }
  .neg-mb475-desktop { margin-bottom: var(--distance-475) !important }
  .neg-mb5-desktop { margin-bottom: var(--distance-5) !important }
  .neg-mb525-desktop { margin-bottom: var(--distance-525) !important }
  .neg-mb55-desktop { margin-bottom: var(--distance-55) !important }
  .neg-mb575-desktop { margin-bottom: var(--distance-575) !important }
  .neg-mb6-desktop { margin-bottom: var(--distance-6) !important }
  .neg-mb625-desktop { margin-bottom: var(--distance-625) !important }
  .neg-mb65-desktop { margin-bottom: var(--distance-65) !important }
  .neg-mb675-desktop { margin-bottom: var(--distance-675) !important }
  .neg-mb7-desktop { margin-bottom: var(--distance-7) !important }
  .neg-mb725-desktop { margin-bottom: var(--distance-725) !important }
  .neg-mb75-desktop { margin-bottom: var(--distance-75) !important }
  .neg-mb775-desktop { margin-bottom: var(--distance-775) !important }
  .neg-mb8-desktop { margin-bottom: var(--distance-8) !important }
  .neg-mb825-desktop { margin-bottom: var(--distance-825) !important }
  .neg-mb85-desktop { margin-bottom: var(--distance-85) !important }
  .neg-mb875-desktop { margin-bottom: var(--distance-875) !important }
  .neg-mb9-desktop { margin-bottom: var(--distance-9) !important }
  .neg-mb925-desktop { margin-bottom: var(--distance-925) !important }
  .neg-mb95-desktop { margin-bottom: var(--distance-95) !important }
  .neg-mb975-desktop { margin-bottom: var(--distance-975) !important }
  .neg-mb10-desktop { margin-bottom: var(--distance-10) !important }
  .neg-ml0-desktop { margin-left: 0 !important }
  .neg-ml025-desktop { margin-left: var(--distance-025) !important }
  .neg-ml05-desktop { margin-left: var(--distance-05) !important }
  .neg-ml075-desktop { margin-left: var(--distance-075) !important }
  .neg-ml1-desktop { margin-left: var(--distance-1) !important }
  .neg-ml125-desktop { margin-left: var(--distance-125) !important }
  .neg-ml15-desktop { margin-left: var(--distance-15) !important }
  .neg-ml175-desktop { margin-left: var(--distance-175) !important }
  .neg-ml2-desktop { margin-left: var(--distance-2) !important }
  .neg-ml225-desktop { margin-left: var(--distance-225) !important }
  .neg-ml25-desktop { margin-left: var(--distance-25) !important }
  .neg-ml275-desktop { margin-left: var(--distance-275) !important }
  .neg-ml3-desktop { margin-left: var(--distance-3) !important }
  .neg-ml325-desktop { margin-left: var(--distance-325) !important }
  .neg-ml35-desktop { margin-left: var(--distance-35) !important }
  .neg-ml375-desktop { margin-left: var(--distance-375) !important }
  .neg-ml4-desktop { margin-left: var(--distance-4) !important }
  .neg-ml425-desktop { margin-left: var(--distance-425) !important }
  .neg-ml45-desktop { margin-left: var(--distance-45) !important }
  .neg-ml475-desktop { margin-left: var(--distance-475) !important }
  .neg-ml5-desktop { margin-left: var(--distance-5) !important }
  .neg-ml525-desktop { margin-left: var(--distance-525) !important }
  .neg-ml55-desktop { margin-left: var(--distance-55) !important }
  .neg-ml575-desktop { margin-left: var(--distance-575) !important }
  .neg-ml6-desktop { margin-left: var(--distance-6) !important }
  .neg-ml625-desktop { margin-left: var(--distance-625) !important }
  .neg-ml65-desktop { margin-left: var(--distance-65) !important }
  .neg-ml675-desktop { margin-left: var(--distance-675) !important }
  .neg-ml7-desktop { margin-left: var(--distance-7) !important }
  .neg-ml725-desktop { margin-left: var(--distance-725) !important }
  .neg-ml75-desktop { margin-left: var(--distance-75) !important }
  .neg-ml775-desktop { margin-left: var(--distance-775) !important }
  .neg-ml8-desktop { margin-left: var(--distance-8) !important }
  .neg-ml825-desktop { margin-left: var(--distance-825) !important }
  .neg-ml85-desktop { margin-left: var(--distance-85) !important }
  .neg-ml875-desktop { margin-left: var(--distance-875) !important }
  .neg-ml9-desktop { margin-left: var(--distance-9) !important }
  .neg-ml925-desktop { margin-left: var(--distance-925) !important }
  .neg-ml95-desktop { margin-left: var(--distance-95) !important }
  .neg-ml975-desktop { margin-left: var(--distance-975) !important }
  .neg-ml10-desktop { margin-left: var(--distance-10) !important }
  .p0-desktop { padding: 0 !important }
  .p025-desktop { padding: var(--distance-025) !important }
  .p05-desktop { padding: var(--distance-05) !important }
  .p075-desktop { padding: var(--distance-075) !important }
  .p1-desktop { padding: var(--distance-1) !important }
  .p125-desktop { padding: var(--distance-125) !important }
  .p15-desktop { padding: var(--distance-15) !important }
  .p175-desktop { padding: var(--distance-175) !important }
  .p2-desktop { padding: var(--distance-2) !important }
  .p225-desktop { padding: var(--distance-225) !important }
  .p25-desktop { padding: var(--distance-25) !important }
  .p275-desktop { padding: var(--distance-275) !important }
  .p3-desktop { padding: var(--distance-3) !important }
  .p325-desktop { padding: var(--distance-325) !important }
  .p35-desktop { padding: var(--distance-35) !important }
  .p375-desktop { padding: var(--distance-375) !important }
  .p4-desktop { padding: var(--distance-4) !important }
  .p425-desktop { padding: var(--distance-425) !important }
  .p45-desktop { padding: var(--distance-45) !important }
  .p475-desktop { padding: var(--distance-475) !important }
  .p5-desktop { padding: var(--distance-5) !important }
  .p525-desktop { padding: var(--distance-525) !important }
  .p55-desktop { padding: var(--distance-55) !important }
  .p575-desktop { padding: var(--distance-575) !important }
  .p6-desktop { padding: var(--distance-6) !important }
  .p625-desktop { padding: var(--distance-625) !important }
  .p65-desktop { padding: var(--distance-65) !important }
  .p675-desktop { padding: var(--distance-675) !important }
  .p7-desktop { padding: var(--distance-7) !important }
  .p725-desktop { padding: var(--distance-725) !important }
  .p75-desktop { padding: var(--distance-75) !important }
  .p775-desktop { padding: var(--distance-775) !important }
  .p8-desktop { padding: var(--distance-8) !important }
  .p825-desktop { padding: var(--distance-825) !important }
  .p85-desktop { padding: var(--distance-85) !important }
  .p875-desktop { padding: var(--distance-875) !important }
  .p9-desktop { padding: var(--distance-9) !important }
  .p925-desktop { padding: var(--distance-925) !important }
  .p95-desktop { padding: var(--distance-95) !important }
  .p975-desktop { padding: var(--distance-975) !important }
  .p10-desktop { padding: var(--distance-10) !important }
  .pt0-desktop { padding-top: 0 !important }
  .pt025-desktop { padding-top: var(--distance-025) !important }
  .pt05-desktop { padding-top: var(--distance-05) !important }
  .pt075-desktop { padding-top: var(--distance-075) !important }
  .pt1-desktop { padding-top: var(--distance-1) !important }
  .pt125-desktop { padding-top: var(--distance-125) !important }
  .pt15-desktop { padding-top: var(--distance-15) !important }
  .pt175-desktop { padding-top: var(--distance-175) !important }
  .pt2-desktop { padding-top: var(--distance-2) !important }
  .pt225-desktop { padding-top: var(--distance-225) !important }
  .pt25-desktop { padding-top: var(--distance-25) !important }
  .pt275-desktop { padding-top: var(--distance-275) !important }
  .pt3-desktop { padding-top: var(--distance-3) !important }
  .pt325-desktop { padding-top: var(--distance-325) !important }
  .pt35-desktop { padding-top: var(--distance-35) !important }
  .pt375-desktop { padding-top: var(--distance-375) !important }
  .pt4-desktop { padding-top: var(--distance-4) !important }
  .pt425-desktop { padding-top: var(--distance-425) !important }
  .pt45-desktop { padding-top: var(--distance-45) !important }
  .pt475-desktop { padding-top: var(--distance-475) !important }
  .pt5-desktop { padding-top: var(--distance-5) !important }
  .pt525-desktop { padding-top: var(--distance-525) !important }
  .pt55-desktop { padding-top: var(--distance-55) !important }
  .pt575-desktop { padding-top: var(--distance-575) !important }
  .pt6-desktop { padding-top: var(--distance-6) !important }
  .pt625-desktop { padding-top: var(--distance-625) !important }
  .pt65-desktop { padding-top: var(--distance-65) !important }
  .pt675-desktop { padding-top: var(--distance-675) !important }
  .pt7-desktop { padding-top: var(--distance-7) !important }
  .pt725-desktop { padding-top: var(--distance-725) !important }
  .pt75-desktop { padding-top: var(--distance-75) !important }
  .pt775-desktop { padding-top: var(--distance-775) !important }
  .pt8-desktop { padding-top: var(--distance-8) !important }
  .pt825-desktop { padding-top: var(--distance-825) !important }
  .pt85-desktop { padding-top: var(--distance-85) !important }
  .pt875-desktop { padding-top: var(--distance-875) !important }
  .pt9-desktop { padding-top: var(--distance-9) !important }
  .pt925-desktop { padding-top: var(--distance-925) !important }
  .pt95-desktop { padding-top: var(--distance-95) !important }
  .pt975-desktop { padding-top: var(--distance-975) !important }
  .pt10-desktop { padding-top: var(--distance-10) !important }
  .pr0-desktop { padding-right: 0 !important }
  .pr025-desktop { padding-right: var(--distance-025) !important }
  .pr05-desktop { padding-right: var(--distance-05) !important }
  .pr075-desktop { padding-right: var(--distance-075) !important }
  .pr1-desktop { padding-right: var(--distance-1) !important }
  .pr125-desktop { padding-right: var(--distance-125) !important }
  .pr15-desktop { padding-right: var(--distance-15) !important }
  .pr175-desktop { padding-right: var(--distance-175) !important }
  .pr2-desktop { padding-right: var(--distance-2) !important }
  .pr225-desktop { padding-right: var(--distance-225) !important }
  .pr25-desktop { padding-right: var(--distance-25) !important }
  .pr275-desktop { padding-right: var(--distance-275) !important }
  .pr3-desktop { padding-right: var(--distance-3) !important }
  .pr325-desktop { padding-right: var(--distance-325) !important }
  .pr35-desktop { padding-right: var(--distance-35) !important }
  .pr375-desktop { padding-right: var(--distance-375) !important }
  .pr4-desktop { padding-right: var(--distance-4) !important }
  .pr425-desktop { padding-right: var(--distance-425) !important }
  .pr45-desktop { padding-right: var(--distance-45) !important }
  .pr475-desktop { padding-right: var(--distance-475) !important }
  .pr5-desktop { padding-right: var(--distance-5) !important }
  .pr525-desktop { padding-right: var(--distance-525) !important }
  .pr55-desktop { padding-right: var(--distance-55) !important }
  .pr575-desktop { padding-right: var(--distance-575) !important }
  .pr6-desktop { padding-right: var(--distance-6) !important }
  .pr625-desktop { padding-right: var(--distance-625) !important }
  .pr65-desktop { padding-right: var(--distance-65) !important }
  .pr675-desktop { padding-right: var(--distance-675) !important }
  .pr7-desktop { padding-right: var(--distance-7) !important }
  .pr725-desktop { padding-right: var(--distance-725) !important }
  .pr75-desktop { padding-right: var(--distance-75) !important }
  .pr775-desktop { padding-right: var(--distance-775) !important }
  .pr8-desktop { padding-right: var(--distance-8) !important }
  .pr825-desktop { padding-right: var(--distance-825) !important }
  .pr85-desktop { padding-right: var(--distance-85) !important }
  .pr875-desktop { padding-right: var(--distance-875) !important }
  .pr9-desktop { padding-right: var(--distance-9) !important }
  .pr925-desktop { padding-right: var(--distance-925) !important }
  .pr95-desktop { padding-right: var(--distance-95) !important }
  .pr975-desktop { padding-right: var(--distance-975) !important }
  .pr10-desktop { padding-right: var(--distance-10) !important }
  .pb0-desktop { padding-bottom: 0 !important }
  .pb025-desktop { padding-bottom: var(--distance-025) !important }
  .pb05-desktop { padding-bottom: var(--distance-05) !important }
  .pb075-desktop { padding-bottom: var(--distance-075) !important }
  .pb1-desktop { padding-bottom: var(--distance-1) !important }
  .pb125-desktop { padding-bottom: var(--distance-125) !important }
  .pb15-desktop { padding-bottom: var(--distance-15) !important }
  .pb175-desktop { padding-bottom: var(--distance-175) !important }
  .pb2-desktop { padding-bottom: var(--distance-2) !important }
  .pb225-desktop { padding-bottom: var(--distance-225) !important }
  .pb25-desktop { padding-bottom: var(--distance-25) !important }
  .pb275-desktop { padding-bottom: var(--distance-275) !important }
  .pb3-desktop { padding-bottom: var(--distance-3) !important }
  .pb325-desktop { padding-bottom: var(--distance-325) !important }
  .pb35-desktop { padding-bottom: var(--distance-35) !important }
  .pb375-desktop { padding-bottom: var(--distance-375) !important }
  .pb4-desktop { padding-bottom: var(--distance-4) !important }
  .pb425-desktop { padding-bottom: var(--distance-425) !important }
  .pb45-desktop { padding-bottom: var(--distance-45) !important }
  .pb475-desktop { padding-bottom: var(--distance-475) !important }
  .pb5-desktop { padding-bottom: var(--distance-5) !important }
  .pb525-desktop { padding-bottom: var(--distance-525) !important }
  .pb55-desktop { padding-bottom: var(--distance-55) !important }
  .pb575-desktop { padding-bottom: var(--distance-575) !important }
  .pb6-desktop { padding-bottom: var(--distance-6) !important }
  .pb625-desktop { padding-bottom: var(--distance-625) !important }
  .pb65-desktop { padding-bottom: var(--distance-65) !important }
  .pb675-desktop { padding-bottom: var(--distance-675) !important }
  .pb7-desktop { padding-bottom: var(--distance-7) !important }
  .pb725-desktop { padding-bottom: var(--distance-725) !important }
  .pb75-desktop { padding-bottom: var(--distance-75) !important }
  .pb775-desktop { padding-bottom: var(--distance-775) !important }
  .pb8-desktop { padding-bottom: var(--distance-8) !important }
  .pb825-desktop { padding-bottom: var(--distance-825) !important }
  .pb85-desktop { padding-bottom: var(--distance-85) !important }
  .pb875-desktop { padding-bottom: var(--distance-875) !important }
  .pb9-desktop { padding-bottom: var(--distance-9) !important }
  .pb925-desktop { padding-bottom: var(--distance-925) !important }
  .pb95-desktop { padding-bottom: var(--distance-95) !important }
  .pb975-desktop { padding-bottom: var(--distance-975) !important }
  .pb10-desktop { padding-bottom: var(--distance-10) !important }
  .pl0-desktop { padding-left: 0 !important }
  .pl025-desktop { padding-left: var(--distance-025) !important }
  .pl05-desktop { padding-left: var(--distance-05) !important }
  .pl075-desktop { padding-left: var(--distance-075) !important }
  .pl1-desktop { padding-left: var(--distance-1) !important }
  .pl125-desktop { padding-left: var(--distance-125) !important }
  .pl15-desktop { padding-left: var(--distance-15) !important }
  .pl175-desktop { padding-left: var(--distance-175) !important }
  .pl2-desktop { padding-left: var(--distance-2) !important }
  .pl225-desktop { padding-left: var(--distance-225) !important }
  .pl25-desktop { padding-left: var(--distance-25) !important }
  .pl275-desktop { padding-left: var(--distance-275) !important }
  .pl3-desktop { padding-left: var(--distance-3) !important }
  .pl325-desktop { padding-left: var(--distance-325) !important }
  .pl35-desktop { padding-left: var(--distance-35) !important }
  .pl375-desktop { padding-left: var(--distance-375) !important }
  .pl4-desktop { padding-left: var(--distance-4) !important }
  .pl425-desktop { padding-left: var(--distance-425) !important }
  .pl45-desktop { padding-left: var(--distance-45) !important }
  .pl475-desktop { padding-left: var(--distance-475) !important }
  .pl5-desktop { padding-left: var(--distance-5) !important }
  .pl525-desktop { padding-left: var(--distance-525) !important }
  .pl55-desktop { padding-left: var(--distance-55) !important }
  .pl575-desktop { padding-left: var(--distance-575) !important }
  .pl6-desktop { padding-left: var(--distance-6) !important }
  .pl625-desktop { padding-left: var(--distance-625) !important }
  .pl65-desktop { padding-left: var(--distance-65) !important }
  .pl675-desktop { padding-left: var(--distance-675) !important }
  .pl7-desktop { padding-left: var(--distance-7) !important }
  .pl725-desktop { padding-left: var(--distance-725) !important }
  .pl75-desktop { padding-left: var(--distance-75) !important }
  .pl775-desktop { padding-left: var(--distance-775) !important }
  .pl8-desktop { padding-left: var(--distance-8) !important }
  .pl825-desktop { padding-left: var(--distance-825) !important }
  .pl85-desktop { padding-left: var(--distance-85) !important }
  .pl875-desktop { padding-left: var(--distance-875) !important }
  .pl9-desktop { padding-left: var(--distance-9) !important }
  .pl925-desktop { padding-left: var(--distance-925) !important }
  .pl95-desktop { padding-left: var(--distance-95) !important }
  .pl975-desktop { padding-left: var(--distance-975) !important }
  .pl10-desktop { padding-left: var(--distance-10) !important }
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .m0-tablet { margin: 0 !important }
  .m025-tablet { margin: var(--distance-025) !important }
  .m05-tablet { margin: var(--distance-05) !important }
  .m075-tablet { margin: var(--distance-075) !important }
  .m1-tablet { margin: var(--distance-1) !important }
  .m125-tablet { margin: var(--distance-125) !important }
  .m15-tablet { margin: var(--distance-15) !important }
  .m175-tablet { margin: var(--distance-175) !important }
  .m2-tablet { margin: var(--distance-2) !important }
  .m225-tablet { margin: var(--distance-225) !important }
  .m25-tablet { margin: var(--distance-25) !important }
  .m275-tablet { margin: var(--distance-275) !important }
  .m3-tablet { margin: var(--distance-3) !important }
  .m325-tablet { margin: var(--distance-325) !important }
  .m35-tablet { margin: var(--distance-35) !important }
  .m375-tablet { margin: var(--distance-375) !important }
  .m4-tablet { margin: var(--distance-4) !important }
  .m425-tablet { margin: var(--distance-425) !important }
  .m45-tablet { margin: var(--distance-45) !important }
  .m475-tablet { margin: var(--distance-475) !important }
  .m5-tablet { margin: var(--distance-5) !important }
  .m525-tablet { margin: var(--distance-525) !important }
  .m55-tablet { margin: var(--distance-55) !important }
  .m575-tablet { margin: var(--distance-575) !important }
  .m6-tablet { margin: var(--distance-6) !important }
  .m625-tablet { margin: var(--distance-625) !important }
  .m65-tablet { margin: var(--distance-65) !important }
  .m675-tablet { margin: var(--distance-675) !important }
  .m7-tablet { margin: var(--distance-7) !important }
  .m725-tablet { margin: var(--distance-725) !important }
  .m75-tablet { margin: var(--distance-75) !important }
  .m775-tablet { margin: var(--distance-775) !important }
  .m8-tablet { margin: var(--distance-8) !important }
  .m825-tablet { margin: var(--distance-825) !important }
  .m85-tablet { margin: var(--distance-85) !important }
  .m875-tablet { margin: var(--distance-875) !important }
  .m9-tablet { margin: var(--distance-9) !important }
  .m925-tablet { margin: var(--distance-925) !important }
  .m95-tablet { margin: var(--distance-95) !important }
  .m975-tablet { margin: var(--distance-975) !important }
  .m10-tablet { margin: var(--distance-10) !important }
  .mt0-tablet { margin-top: 0 !important }
  .mt025-tablet { margin-top: var(--distance-025) !important }
  .mt05-tablet { margin-top: var(--distance-05) !important }
  .mt075-tablet { margin-top: var(--distance-075) !important }
  .mt08-tablet { margin-top: var(--distance-08) !important}
  .mt1-tablet { margin-top: var(--distance-1) !important }
  .mt125-tablet { margin-top: var(--distance-125) !important }
  .mt15-tablet { margin-top: var(--distance-15) !important }
  .mt175-tablet { margin-top: var(--distance-175) !important }
  .mt2-tablet { margin-top: var(--distance-2) !important }
  .mt225-tablet { margin-top: var(--distance-225) !important }
  .mt25-tablet { margin-top: var(--distance-25) !important }
  .mt275-tablet { margin-top: var(--distance-275) !important }
  .mt3-tablet { margin-top: var(--distance-3) !important }
  .mt325-tablet { margin-top: var(--distance-325) !important }
  .mt35-tablet { margin-top: var(--distance-35) !important }
  .mt375-tablet { margin-top: var(--distance-375) !important }
  .mt4-tablet { margin-top: var(--distance-4) !important }
  .mt425-tablet { margin-top: var(--distance-425) !important }
  .mt45-tablet { margin-top: var(--distance-45) !important }
  .mt475-tablet { margin-top: var(--distance-475) !important }
  .mt5-tablet { margin-top: var(--distance-5) !important }
  .mt525-tablet { margin-top: var(--distance-525) !important }
  .mt55-tablet { margin-top: var(--distance-55) !important }
  .mt575-tablet { margin-top: var(--distance-575) !important }
  .mt6-tablet { margin-top: var(--distance-6) !important }
  .mt625-tablet { margin-top: var(--distance-625) !important }
  .mt65-tablet { margin-top: var(--distance-65) !important }
  .mt675-tablet { margin-top: var(--distance-675) !important }
  .mt7-tablet { margin-top: var(--distance-7) !important }
  .mt725-tablet { margin-top: var(--distance-725) !important }
  .mt75-tablet { margin-top: var(--distance-75) !important }
  .mt775-tablet { margin-top: var(--distance-775) !important }
  .mt8-tablet { margin-top: var(--distance-8) !important }
  .mt825-tablet { margin-top: var(--distance-825) !important }
  .mt85-tablet { margin-top: var(--distance-85) !important }
  .mt875-tablet { margin-top: var(--distance-875) !important }
  .mt9-tablet { margin-top: var(--distance-9) !important }
  .mt925-tablet { margin-top: var(--distance-925) !important }
  .mt95-tablet { margin-top: var(--distance-95) !important }
  .mt975-tablet { margin-top: var(--distance-975) !important }
  .mt10-tablet { margin-top: var(--distance-10) !important }
  .mr0-tablet { margin-right: 0 !important }
  .mr025-tablet { margin-right: var(--distance-025) !important }
  .mr05-tablet { margin-right: var(--distance-05) !important }
  .mr075-tablet { margin-right: var(--distance-075) !important }
  .mr1-tablet { margin-right: var(--distance-1) !important }
  .mr125-tablet { margin-right: var(--distance-125) !important }
  .mr15-tablet { margin-right: var(--distance-15) !important }
  .mr175-tablet { margin-right: var(--distance-175) !important }
  .mr2-tablet { margin-right: var(--distance-2) !important }
  .mr225-tablet { margin-right: var(--distance-225) !important }
  .mr25-tablet { margin-right: var(--distance-25) !important }
  .mr275-tablet { margin-right: var(--distance-275) !important }
  .mr3-tablet { margin-right: var(--distance-3) !important }
  .mr325-tablet { margin-right: var(--distance-325) !important }
  .mr35-tablet { margin-right: var(--distance-35) !important }
  .mr375-tablet { margin-right: var(--distance-375) !important }
  .mr4-tablet { margin-right: var(--distance-4) !important }
  .mr425-tablet { margin-right: var(--distance-425) !important }
  .mr45-tablet { margin-right: var(--distance-45) !important }
  .mr475-tablet { margin-right: var(--distance-475) !important }
  .mr5-tablet { margin-right: var(--distance-5) !important }
  .mr525-tablet { margin-right: var(--distance-525) !important }
  .mr55-tablet { margin-right: var(--distance-55) !important }
  .mr575-tablet { margin-right: var(--distance-575) !important }
  .mr6-tablet { margin-right: var(--distance-6) !important }
  .mr625-tablet { margin-right: var(--distance-625) !important }
  .mr65-tablet { margin-right: var(--distance-65) !important }
  .mr675-tablet { margin-right: var(--distance-675) !important }
  .mr7-tablet { margin-right: var(--distance-7) !important }
  .mr725-tablet { margin-right: var(--distance-725) !important }
  .mr75-tablet { margin-right: var(--distance-75) !important }
  .mr775-tablet { margin-right: var(--distance-775) !important }
  .mr8-tablet { margin-right: var(--distance-8) !important }
  .mr825-tablet { margin-right: var(--distance-825) !important }
  .mr85-tablet { margin-right: var(--distance-85) !important }
  .mr875-tablet { margin-right: var(--distance-875) !important }
  .mr9-tablet { margin-right: var(--distance-9) !important }
  .mr925-tablet { margin-right: var(--distance-925) !important }
  .mr95-tablet { margin-right: var(--distance-95) !important }
  .mr975-tablet { margin-right: var(--distance-975) !important }
  .mr10-tablet { margin-right: var(--distance-10) !important }
  .mb0-tablet { margin-bottom: 0 !important }
  .mb025-tablet { margin-bottom: var(--distance-025) !important }
  .mb05-tablet { margin-bottom: var(--distance-05) !important }
  .mb075-tablet { margin-bottom: var(--distance-075) !important }
  .mb1-tablet { margin-bottom: var(--distance-1) !important }
  .mb125-tablet { margin-bottom: var(--distance-125) !important }
  .mb15-tablet { margin-bottom: var(--distance-15) !important }
  .mb175-tablet { margin-bottom: var(--distance-175) !important }
  .mb2-tablet { margin-bottom: var(--distance-2) !important }
  .mb225-tablet { margin-bottom: var(--distance-225) !important }
  .mb25-tablet { margin-bottom: var(--distance-25) !important }
  .mb275-tablet { margin-bottom: var(--distance-275) !important }
  .mb3-tablet { margin-bottom: var(--distance-3) !important }
  .mb325-tablet { margin-bottom: var(--distance-325) !important }
  .mb35-tablet { margin-bottom: var(--distance-35) !important }
  .mb375-tablet { margin-bottom: var(--distance-375) !important }
  .mb4-tablet { margin-bottom: var(--distance-4) !important }
  .mb425-tablet { margin-bottom: var(--distance-425) !important }
  .mb45-tablet { margin-bottom: var(--distance-45) !important }
  .mb475-tablet { margin-bottom: var(--distance-475) !important }
  .mb5-tablet { margin-bottom: var(--distance-5) !important }
  .mb525-tablet { margin-bottom: var(--distance-525) !important }
  .mb55-tablet { margin-bottom: var(--distance-55) !important }
  .mb575-tablet { margin-bottom: var(--distance-575) !important }
  .mb6-tablet { margin-bottom: var(--distance-6) !important }
  .mb625-tablet { margin-bottom: var(--distance-625) !important }
  .mb65-tablet { margin-bottom: var(--distance-65) !important }
  .mb675-tablet { margin-bottom: var(--distance-675) !important }
  .mb7-tablet { margin-bottom: var(--distance-7) !important }
  .mb725-tablet { margin-bottom: var(--distance-725) !important }
  .mb75-tablet { margin-bottom: var(--distance-75) !important }
  .mb775-tablet { margin-bottom: var(--distance-775) !important }
  .mb8-tablet { margin-bottom: var(--distance-8) !important }
  .mb825-tablet { margin-bottom: var(--distance-825) !important }
  .mb85-tablet { margin-bottom: var(--distance-85) !important }
  .mb875-tablet { margin-bottom: var(--distance-875) !important }
  .mb9-tablet { margin-bottom: var(--distance-9) !important }
  .mb925-tablet { margin-bottom: var(--distance-925) !important }
  .mb95-tablet { margin-bottom: var(--distance-95) !important }
  .mb975-tablet { margin-bottom: var(--distance-975) !important }
  .mb10-tablet { margin-bottom: var(--distance-10) !important }
  .ml0-tablet { margin-left: 0 !important }
  .ml025-tablet { margin-left: var(--distance-025) !important }
  .ml05-tablet { margin-left: var(--distance-05) !important }
  .ml075-tablet { margin-left: var(--distance-075) !important }
  .ml1-tablet { margin-left: var(--distance-1) !important }
  .ml125-tablet { margin-left: var(--distance-125) !important }
  .ml15-tablet { margin-left: var(--distance-15) !important }
  .ml175-tablet { margin-left: var(--distance-175) !important }
  .ml2-tablet { margin-left: var(--distance-2) !important }
  .ml225-tablet { margin-left: var(--distance-225) !important }
  .ml25-tablet { margin-left: var(--distance-25) !important }
  .ml275-tablet { margin-left: var(--distance-275) !important }
  .ml3-tablet { margin-left: var(--distance-3) !important }
  .ml325-tablet { margin-left: var(--distance-325) !important }
  .ml35-tablet { margin-left: var(--distance-35) !important }
  .ml375-tablet { margin-left: var(--distance-375) !important }
  .ml4-tablet { margin-left: var(--distance-4) !important }
  .ml425-tablet { margin-left: var(--distance-425) !important }
  .ml45-tablet { margin-left: var(--distance-45) !important }
  .ml475-tablet { margin-left: var(--distance-475) !important }
  .ml5-tablet { margin-left: var(--distance-5) !important }
  .ml525-tablet { margin-left: var(--distance-525) !important }
  .ml55-tablet { margin-left: var(--distance-55) !important }
  .ml575-tablet { margin-left: var(--distance-575) !important }
  .ml6-tablet { margin-left: var(--distance-6) !important }
  .ml625-tablet { margin-left: var(--distance-625) !important }
  .ml65-tablet { margin-left: var(--distance-65) !important }
  .ml675-tablet { margin-left: var(--distance-675) !important }
  .ml7-tablet { margin-left: var(--distance-7) !important }
  .ml725-tablet { margin-left: var(--distance-725) !important }
  .ml75-tablet { margin-left: var(--distance-75) !important }
  .ml775-tablet { margin-left: var(--distance-775) !important }
  .ml8-tablet { margin-left: var(--distance-8) !important }
  .ml825-tablet { margin-left: var(--distance-825) !important }
  .ml85-tablet { margin-left: var(--distance-85) !important }
  .ml875-tablet { margin-left: var(--distance-875) !important }
  .ml9-tablet { margin-left: var(--distance-9) !important }
  .ml925-tablet { margin-left: var(--distance-925) !important }
  .ml95-tablet { margin-left: var(--distance-95) !important }
  .ml975-tablet { margin-left: var(--distance-975) !important }
  .ml10-tablet { margin-left: var(--distance-10) !important }
  .neg-m0-tablet { margin: 0 !important }
  .neg-m025-tablet { margin: var(--distance-025) !important }
  .neg-m05-tablet { margin: var(--distance-05) !important }
  .neg-m075-tablet { margin: var(--distance-075) !important }
  .neg-m1-tablet { margin: var(--distance-1) !important }
  .neg-m125-tablet { margin: var(--distance-125) !important }
  .neg-m15-tablet { margin: var(--distance-15) !important }
  .neg-m175-tablet { margin: var(--distance-175) !important }
  .neg-m2-tablet { margin: var(--distance-2) !important }
  .neg-m225-tablet { margin: var(--distance-225) !important }
  .neg-m25-tablet { margin: var(--distance-25) !important }
  .neg-m275-tablet { margin: var(--distance-275) !important }
  .neg-m3-tablet { margin: var(--distance-3) !important }
  .neg-m325-tablet { margin: var(--distance-325) !important }
  .neg-m35-tablet { margin: var(--distance-35) !important }
  .neg-m375-tablet { margin: var(--distance-375) !important }
  .neg-m4-tablet { margin: var(--distance-4) !important }
  .neg-m425-tablet { margin: var(--distance-425) !important }
  .neg-m45-tablet { margin: var(--distance-45) !important }
  .neg-m475-tablet { margin: var(--distance-475) !important }
  .neg-m5-tablet { margin: var(--distance-5) !important }
  .neg-m525-tablet { margin: var(--distance-525) !important }
  .neg-m55-tablet { margin: var(--distance-55) !important }
  .neg-m575-tablet { margin: var(--distance-575) !important }
  .neg-m6-tablet { margin: var(--distance-6) !important }
  .neg-m625-tablet { margin: var(--distance-625) !important }
  .neg-m65-tablet { margin: var(--distance-65) !important }
  .neg-m675-tablet { margin: var(--distance-675) !important }
  .neg-m7-tablet { margin: var(--distance-7) !important }
  .neg-m725-tablet { margin: var(--distance-725) !important }
  .neg-m75-tablet { margin: var(--distance-75) !important }
  .neg-m775-tablet { margin: var(--distance-775) !important }
  .neg-m8-tablet { margin: var(--distance-8) !important }
  .neg-m825-tablet { margin: var(--distance-825) !important }
  .neg-m85-tablet { margin: var(--distance-85) !important }
  .neg-m875-tablet { margin: var(--distance-875) !important }
  .neg-m9-tablet { margin: var(--distance-9) !important }
  .neg-m925-tablet { margin: var(--distance-925) !important }
  .neg-m95-tablet { margin: var(--distance-95) !important }
  .neg-m975-tablet { margin: var(--distance-975) !important }
  .neg-m10-tablet { margin: var(--distance-10) !important }
  .neg-mt0-tablet { margin-top: 0 !important }
  .neg-mt025-tablet { margin-top: var(--distance-025) !important }
  .neg-mt05-tablet { margin-top: var(--distance-05) !important }
  .neg-mt075-tablet { margin-top: var(--distance-075) !important }
  .neg-mt08-tablet { margin-top: var(--distance-08) !important}
  .neg-mt1-tablet { margin-top: var(--distance-1) !important }
  .neg-mt125-tablet { margin-top: var(--distance-125) !important }
  .neg-mt15-tablet { margin-top: var(--distance-15) !important }
  .neg-mt175-tablet { margin-top: var(--distance-175) !important }
  .neg-mt2-tablet { margin-top: var(--distance-2) !important }
  .neg-mt225-tablet { margin-top: var(--distance-225) !important }
  .neg-mt25-tablet { margin-top: var(--distance-25) !important }
  .neg-mt275-tablet { margin-top: var(--distance-275) !important }
  .neg-mt3-tablet { margin-top: var(--distance-3) !important }
  .neg-mt325-tablet { margin-top: var(--distance-325) !important }
  .neg-mt35-tablet { margin-top: var(--distance-35) !important }
  .neg-mt375-tablet { margin-top: var(--distance-375) !important }
  .neg-mt4-tablet { margin-top: var(--distance-4) !important }
  .neg-mt425-tablet { margin-top: var(--distance-425) !important }
  .neg-mt45-tablet { margin-top: var(--distance-45) !important }
  .neg-mt475-tablet { margin-top: var(--distance-475) !important }
  .neg-mt5-tablet { margin-top: var(--distance-5) !important }
  .neg-mt525-tablet { margin-top: var(--distance-525) !important }
  .neg-mt55-tablet { margin-top: var(--distance-55) !important }
  .neg-mt575-tablet { margin-top: var(--distance-575) !important }
  .neg-mt6-tablet { margin-top: var(--distance-6) !important }
  .neg-mt625-tablet { margin-top: var(--distance-625) !important }
  .neg-mt65-tablet { margin-top: var(--distance-65) !important }
  .neg-mt675-tablet { margin-top: var(--distance-675) !important }
  .neg-mt7-tablet { margin-top: var(--distance-7) !important }
  .neg-mt725-tablet { margin-top: var(--distance-725) !important }
  .neg-mt75-tablet { margin-top: var(--distance-75) !important }
  .neg-mt775-tablet { margin-top: var(--distance-775) !important }
  .neg-mt8-tablet { margin-top: var(--distance-8) !important }
  .neg-mt825-tablet { margin-top: var(--distance-825) !important }
  .neg-mt85-tablet { margin-top: var(--distance-85) !important }
  .neg-mt875-tablet { margin-top: var(--distance-875) !important }
  .neg-mt9-tablet { margin-top: var(--distance-9) !important }
  .neg-mt925-tablet { margin-top: var(--distance-925) !important }
  .neg-mt95-tablet { margin-top: var(--distance-95) !important }
  .neg-mt975-tablet { margin-top: var(--distance-975) !important }
  .neg-mt10-tablet { margin-top: var(--distance-10) !important }
  .neg-mr0-tablet { margin-right: 0 !important }
  .neg-mr025-tablet { margin-right: var(--distance-025) !important }
  .neg-mr05-tablet { margin-right: var(--distance-05) !important }
  .neg-mr075-tablet { margin-right: var(--distance-075) !important }
  .neg-mr1-tablet { margin-right: var(--distance-1) !important }
  .neg-mr125-tablet { margin-right: var(--distance-125) !important }
  .neg-mr15-tablet { margin-right: var(--distance-15) !important }
  .neg-mr175-tablet { margin-right: var(--distance-175) !important }
  .neg-mr2-tablet { margin-right: var(--distance-2) !important }
  .neg-mr225-tablet { margin-right: var(--distance-225) !important }
  .neg-mr25-tablet { margin-right: var(--distance-25) !important }
  .neg-mr275-tablet { margin-right: var(--distance-275) !important }
  .neg-mr3-tablet { margin-right: var(--distance-3) !important }
  .neg-mr325-tablet { margin-right: var(--distance-325) !important }
  .neg-mr35-tablet { margin-right: var(--distance-35) !important }
  .neg-mr375-tablet { margin-right: var(--distance-375) !important }
  .neg-mr4-tablet { margin-right: var(--distance-4) !important }
  .neg-mr425-tablet { margin-right: var(--distance-425) !important }
  .neg-mr45-tablet { margin-right: var(--distance-45) !important }
  .neg-mr475-tablet { margin-right: var(--distance-475) !important }
  .neg-mr5-tablet { margin-right: var(--distance-5) !important }
  .neg-mr525-tablet { margin-right: var(--distance-525) !important }
  .neg-mr55-tablet { margin-right: var(--distance-55) !important }
  .neg-mr575-tablet { margin-right: var(--distance-575) !important }
  .neg-mr6-tablet { margin-right: var(--distance-6) !important }
  .neg-mr625-tablet { margin-right: var(--distance-625) !important }
  .neg-mr65-tablet { margin-right: var(--distance-65) !important }
  .neg-mr675-tablet { margin-right: var(--distance-675) !important }
  .neg-mr7-tablet { margin-right: var(--distance-7) !important }
  .neg-mr725-tablet { margin-right: var(--distance-725) !important }
  .neg-mr75-tablet { margin-right: var(--distance-75) !important }
  .neg-mr775-tablet { margin-right: var(--distance-775) !important }
  .neg-mr8-tablet { margin-right: var(--distance-8) !important }
  .neg-mr825-tablet { margin-right: var(--distance-825) !important }
  .neg-mr85-tablet { margin-right: var(--distance-85) !important }
  .neg-mr875-tablet { margin-right: var(--distance-875) !important }
  .neg-mr9-tablet { margin-right: var(--distance-9) !important }
  .neg-mr925-tablet { margin-right: var(--distance-925) !important }
  .neg-mr95-tablet { margin-right: var(--distance-95) !important }
  .neg-mr975-tablet { margin-right: var(--distance-975) !important }
  .neg-mr10-tablet { margin-right: var(--distance-10) !important }
  .neg-mb0-tablet { margin-bottom: 0 !important }
  .neg-mb025-tablet { margin-bottom: var(--distance-025) !important }
  .neg-mb05-tablet { margin-bottom: var(--distance-05) !important }
  .neg-mb075-tablet { margin-bottom: var(--distance-075) !important }
  .neg-mb1-tablet { margin-bottom: var(--distance-1) !important }
  .neg-mb125-tablet { margin-bottom: var(--distance-125) !important }
  .neg-mb15-tablet { margin-bottom: var(--distance-15) !important }
  .neg-mb175-tablet { margin-bottom: var(--distance-175) !important }
  .neg-mb2-tablet { margin-bottom: var(--distance-2) !important }
  .neg-mb225-tablet { margin-bottom: var(--distance-225) !important }
  .neg-mb25-tablet { margin-bottom: var(--distance-25) !important }
  .neg-mb275-tablet { margin-bottom: var(--distance-275) !important }
  .neg-mb3-tablet { margin-bottom: var(--distance-3) !important }
  .neg-mb325-tablet { margin-bottom: var(--distance-325) !important }
  .neg-mb35-tablet { margin-bottom: var(--distance-35) !important }
  .neg-mb375-tablet { margin-bottom: var(--distance-375) !important }
  .neg-mb4-tablet { margin-bottom: var(--distance-4) !important }
  .neg-mb425-tablet { margin-bottom: var(--distance-425) !important }
  .neg-mb45-tablet { margin-bottom: var(--distance-45) !important }
  .neg-mb475-tablet { margin-bottom: var(--distance-475) !important }
  .neg-mb5-tablet { margin-bottom: var(--distance-5) !important }
  .neg-mb525-tablet { margin-bottom: var(--distance-525) !important }
  .neg-mb55-tablet { margin-bottom: var(--distance-55) !important }
  .neg-mb575-tablet { margin-bottom: var(--distance-575) !important }
  .neg-mb6-tablet { margin-bottom: var(--distance-6) !important }
  .neg-mb625-tablet { margin-bottom: var(--distance-625) !important }
  .neg-mb65-tablet { margin-bottom: var(--distance-65) !important }
  .neg-mb675-tablet { margin-bottom: var(--distance-675) !important }
  .neg-mb7-tablet { margin-bottom: var(--distance-7) !important }
  .neg-mb725-tablet { margin-bottom: var(--distance-725) !important }
  .neg-mb75-tablet { margin-bottom: var(--distance-75) !important }
  .neg-mb775-tablet { margin-bottom: var(--distance-775) !important }
  .neg-mb8-tablet { margin-bottom: var(--distance-8) !important }
  .neg-mb825-tablet { margin-bottom: var(--distance-825) !important }
  .neg-mb85-tablet { margin-bottom: var(--distance-85) !important }
  .neg-mb875-tablet { margin-bottom: var(--distance-875) !important }
  .neg-mb9-tablet { margin-bottom: var(--distance-9) !important }
  .neg-mb925-tablet { margin-bottom: var(--distance-925) !important }
  .neg-mb95-tablet { margin-bottom: var(--distance-95) !important }
  .neg-mb975-tablet { margin-bottom: var(--distance-975) !important }
  .neg-mb10-tablet { margin-bottom: var(--distance-10) !important }
  .neg-ml0-tablet { margin-left: 0 !important }
  .neg-ml025-tablet { margin-left: var(--distance-025) !important }
  .neg-ml05-tablet { margin-left: var(--distance-05) !important }
  .neg-ml075-tablet { margin-left: var(--distance-075) !important }
  .neg-ml1-tablet { margin-left: var(--distance-1) !important }
  .neg-ml125-tablet { margin-left: var(--distance-125) !important }
  .neg-ml15-tablet { margin-left: var(--distance-15) !important }
  .neg-ml175-tablet { margin-left: var(--distance-175) !important }
  .neg-ml2-tablet { margin-left: var(--distance-2) !important }
  .neg-ml225-tablet { margin-left: var(--distance-225) !important }
  .neg-ml25-tablet { margin-left: var(--distance-25) !important }
  .neg-ml275-tablet { margin-left: var(--distance-275) !important }
  .neg-ml3-tablet { margin-left: var(--distance-3) !important }
  .neg-ml325-tablet { margin-left: var(--distance-325) !important }
  .neg-ml35-tablet { margin-left: var(--distance-35) !important }
  .neg-ml375-tablet { margin-left: var(--distance-375) !important }
  .neg-ml4-tablet { margin-left: var(--distance-4) !important }
  .neg-ml425-tablet { margin-left: var(--distance-425) !important }
  .neg-ml45-tablet { margin-left: var(--distance-45) !important }
  .neg-ml475-tablet { margin-left: var(--distance-475) !important }
  .neg-ml5-tablet { margin-left: var(--distance-5) !important }
  .neg-ml525-tablet { margin-left: var(--distance-525) !important }
  .neg-ml55-tablet { margin-left: var(--distance-55) !important }
  .neg-ml575-tablet { margin-left: var(--distance-575) !important }
  .neg-ml6-tablet { margin-left: var(--distance-6) !important }
  .neg-ml625-tablet { margin-left: var(--distance-625) !important }
  .neg-ml65-tablet { margin-left: var(--distance-65) !important }
  .neg-ml675-tablet { margin-left: var(--distance-675) !important }
  .neg-ml7-tablet { margin-left: var(--distance-7) !important }
  .neg-ml725-tablet { margin-left: var(--distance-725) !important }
  .neg-ml75-tablet { margin-left: var(--distance-75) !important }
  .neg-ml775-tablet { margin-left: var(--distance-775) !important }
  .neg-ml8-tablet { margin-left: var(--distance-8) !important }
  .neg-ml825-tablet { margin-left: var(--distance-825) !important }
  .neg-ml85-tablet { margin-left: var(--distance-85) !important }
  .neg-ml875-tablet { margin-left: var(--distance-875) !important }
  .neg-ml9-tablet { margin-left: var(--distance-9) !important }
  .neg-ml925-tablet { margin-left: var(--distance-925) !important }
  .neg-ml95-tablet { margin-left: var(--distance-95) !important }
  .neg-ml975-tablet { margin-left: var(--distance-975) !important }
  .neg-ml10-tablet { margin-left: var(--distance-10) !important }
  .p0-tablet { padding: 0 !important }
  .p025-tablet { padding: var(--distance-025) !important }
  .p05-tablet { padding: var(--distance-05) !important }
  .p075-tablet { padding: var(--distance-075) !important }
  .p1-tablet { padding: var(--distance-1) !important }
  .p125-tablet { padding: var(--distance-125) !important }
  .p15-tablet { padding: var(--distance-15) !important }
  .p175-tablet { padding: var(--distance-175) !important }
  .p2-tablet { padding: var(--distance-2) !important }
  .p225-tablet { padding: var(--distance-225) !important }
  .p25-tablet { padding: var(--distance-25) !important }
  .p275-tablet { padding: var(--distance-275) !important }
  .p3-tablet { padding: var(--distance-3) !important }
  .p325-tablet { padding: var(--distance-325) !important }
  .p35-tablet { padding: var(--distance-35) !important }
  .p375-tablet { padding: var(--distance-375) !important }
  .p4-tablet { padding: var(--distance-4) !important }
  .p425-tablet { padding: var(--distance-425) !important }
  .p45-tablet { padding: var(--distance-45) !important }
  .p475-tablet { padding: var(--distance-475) !important }
  .p5-tablet { padding: var(--distance-5) !important }
  .p525-tablet { padding: var(--distance-525) !important }
  .p55-tablet { padding: var(--distance-55) !important }
  .p575-tablet { padding: var(--distance-575) !important }
  .p6-tablet { padding: var(--distance-6) !important }
  .p625-tablet { padding: var(--distance-625) !important }
  .p65-tablet { padding: var(--distance-65) !important }
  .p675-tablet { padding: var(--distance-675) !important }
  .p7-tablet { padding: var(--distance-7) !important }
  .p725-tablet { padding: var(--distance-725) !important }
  .p75-tablet { padding: var(--distance-75) !important }
  .p775-tablet { padding: var(--distance-775) !important }
  .p8-tablet { padding: var(--distance-8) !important }
  .p825-tablet { padding: var(--distance-825) !important }
  .p85-tablet { padding: var(--distance-85) !important }
  .p875-tablet { padding: var(--distance-875) !important }
  .p9-tablet { padding: var(--distance-9) !important }
  .p925-tablet { padding: var(--distance-925) !important }
  .p95-tablet { padding: var(--distance-95) !important }
  .p975-tablet { padding: var(--distance-975) !important }
  .p10-tablet { padding: var(--distance-10) !important }
  .pt0-tablet { padding-top: 0 !important }
  .pt025-tablet { padding-top: var(--distance-025) !important }
  .pt05-tablet { padding-top: var(--distance-05) !important }
  .pt075-tablet { padding-top: var(--distance-075) !important }
  .pt1-tablet { padding-top: var(--distance-1) !important }
  .pt125-tablet { padding-top: var(--distance-125) !important }
  .pt15-tablet { padding-top: var(--distance-15) !important }
  .pt175-tablet { padding-top: var(--distance-175) !important }
  .pt2-tablet { padding-top: var(--distance-2) !important }
  .pt225-tablet { padding-top: var(--distance-225) !important }
  .pt25-tablet { padding-top: var(--distance-25) !important }
  .pt275-tablet { padding-top: var(--distance-275) !important }
  .pt3-tablet { padding-top: var(--distance-3) !important }
  .pt325-tablet { padding-top: var(--distance-325) !important }
  .pt35-tablet { padding-top: var(--distance-35) !important }
  .pt375-tablet { padding-top: var(--distance-375) !important }
  .pt4-tablet { padding-top: var(--distance-4) !important }
  .pt425-tablet { padding-top: var(--distance-425) !important }
  .pt45-tablet { padding-top: var(--distance-45) !important }
  .pt475-tablet { padding-top: var(--distance-475) !important }
  .pt5-tablet { padding-top: var(--distance-5) !important }
  .pt525-tablet { padding-top: var(--distance-525) !important }
  .pt55-tablet { padding-top: var(--distance-55) !important }
  .pt575-tablet { padding-top: var(--distance-575) !important }
  .pt6-tablet { padding-top: var(--distance-6) !important }
  .pt625-tablet { padding-top: var(--distance-625) !important }
  .pt65-tablet { padding-top: var(--distance-65) !important }
  .pt675-tablet { padding-top: var(--distance-675) !important }
  .pt7-tablet { padding-top: var(--distance-7) !important }
  .pt725-tablet { padding-top: var(--distance-725) !important }
  .pt75-tablet { padding-top: var(--distance-75) !important }
  .pt775-tablet { padding-top: var(--distance-775) !important }
  .pt8-tablet { padding-top: var(--distance-8) !important }
  .pt825-tablet { padding-top: var(--distance-825) !important }
  .pt85-tablet { padding-top: var(--distance-85) !important }
  .pt875-tablet { padding-top: var(--distance-875) !important }
  .pt9-tablet { padding-top: var(--distance-9) !important }
  .pt925-tablet { padding-top: var(--distance-925) !important }
  .pt95-tablet { padding-top: var(--distance-95) !important }
  .pt975-tablet { padding-top: var(--distance-975) !important }
  .pt10-tablet { padding-top: var(--distance-10) !important }
  .pr0-tablet { padding-right: 0 !important }
  .pr025-tablet { padding-right: var(--distance-025) !important }
  .pr05-tablet { padding-right: var(--distance-05) !important }
  .pr075-tablet { padding-right: var(--distance-075) !important }
  .pr1-tablet { padding-right: var(--distance-1) !important }
  .pr125-tablet { padding-right: var(--distance-125) !important }
  .pr15-tablet { padding-right: var(--distance-15) !important }
  .pr175-tablet { padding-right: var(--distance-175) !important }
  .pr2-tablet { padding-right: var(--distance-2) !important }
  .pr225-tablet { padding-right: var(--distance-225) !important }
  .pr25-tablet { padding-right: var(--distance-25) !important }
  .pr275-tablet { padding-right: var(--distance-275) !important }
  .pr3-tablet { padding-right: var(--distance-3) !important }
  .pr325-tablet { padding-right: var(--distance-325) !important }
  .pr35-tablet { padding-right: var(--distance-35) !important }
  .pr375-tablet { padding-right: var(--distance-375) !important }
  .pr4-tablet { padding-right: var(--distance-4) !important }
  .pr425-tablet { padding-right: var(--distance-425) !important }
  .pr45-tablet { padding-right: var(--distance-45) !important }
  .pr475-tablet { padding-right: var(--distance-475) !important }
  .pr5-tablet { padding-right: var(--distance-5) !important }
  .pr525-tablet { padding-right: var(--distance-525) !important }
  .pr55-tablet { padding-right: var(--distance-55) !important }
  .pr575-tablet { padding-right: var(--distance-575) !important }
  .pr6-tablet { padding-right: var(--distance-6) !important }
  .pr625-tablet { padding-right: var(--distance-625) !important }
  .pr65-tablet { padding-right: var(--distance-65) !important }
  .pr675-tablet { padding-right: var(--distance-675) !important }
  .pr7-tablet { padding-right: var(--distance-7) !important }
  .pr725-tablet { padding-right: var(--distance-725) !important }
  .pr75-tablet { padding-right: var(--distance-75) !important }
  .pr775-tablet { padding-right: var(--distance-775) !important }
  .pr8-tablet { padding-right: var(--distance-8) !important }
  .pr825-tablet { padding-right: var(--distance-825) !important }
  .pr85-tablet { padding-right: var(--distance-85) !important }
  .pr875-tablet { padding-right: var(--distance-875) !important }
  .pr9-tablet { padding-right: var(--distance-9) !important }
  .pr925-tablet { padding-right: var(--distance-925) !important }
  .pr95-tablet { padding-right: var(--distance-95) !important }
  .pr975-tablet { padding-right: var(--distance-975) !important }
  .pr10-tablet { padding-right: var(--distance-10) !important }
  .pb0-tablet { padding-bottom: 0 !important }
  .pb025-tablet { padding-bottom: var(--distance-025) !important }
  .pb05-tablet { padding-bottom: var(--distance-05) !important }
  .pb075-tablet { padding-bottom: var(--distance-075) !important }
  .pb1-tablet { padding-bottom: var(--distance-1) !important }
  .pb125-tablet { padding-bottom: var(--distance-125) !important }
  .pb15-tablet { padding-bottom: var(--distance-15) !important }
  .pb175-tablet { padding-bottom: var(--distance-175) !important }
  .pb2-tablet { padding-bottom: var(--distance-2) !important }
  .pb225-tablet { padding-bottom: var(--distance-225) !important }
  .pb25-tablet { padding-bottom: var(--distance-25) !important }
  .pb275-tablet { padding-bottom: var(--distance-275) !important }
  .pb3-tablet { padding-bottom: var(--distance-3) !important }
  .pb325-tablet { padding-bottom: var(--distance-325) !important }
  .pb35-tablet { padding-bottom: var(--distance-35) !important }
  .pb375-tablet { padding-bottom: var(--distance-375) !important }
  .pb4-tablet { padding-bottom: var(--distance-4) !important }
  .pb425-tablet { padding-bottom: var(--distance-425) !important }
  .pb45-tablet { padding-bottom: var(--distance-45) !important }
  .pb475-tablet { padding-bottom: var(--distance-475) !important }
  .pb5-tablet { padding-bottom: var(--distance-5) !important }
  .pb525-tablet { padding-bottom: var(--distance-525) !important }
  .pb55-tablet { padding-bottom: var(--distance-55) !important }
  .pb575-tablet { padding-bottom: var(--distance-575) !important }
  .pb6-tablet { padding-bottom: var(--distance-6) !important }
  .pb625-tablet { padding-bottom: var(--distance-625) !important }
  .pb65-tablet { padding-bottom: var(--distance-65) !important }
  .pb675-tablet { padding-bottom: var(--distance-675) !important }
  .pb7-tablet { padding-bottom: var(--distance-7) !important }
  .pb725-tablet { padding-bottom: var(--distance-725) !important }
  .pb75-tablet { padding-bottom: var(--distance-75) !important }
  .pb775-tablet { padding-bottom: var(--distance-775) !important }
  .pb8-tablet { padding-bottom: var(--distance-8) !important }
  .pb825-tablet { padding-bottom: var(--distance-825) !important }
  .pb85-tablet { padding-bottom: var(--distance-85) !important }
  .pb875-tablet { padding-bottom: var(--distance-875) !important }
  .pb9-tablet { padding-bottom: var(--distance-9) !important }
  .pb925-tablet { padding-bottom: var(--distance-925) !important }
  .pb95-tablet { padding-bottom: var(--distance-95) !important }
  .pb975-tablet { padding-bottom: var(--distance-975) !important }
  .pb10-tablet { padding-bottom: var(--distance-10) !important }
  .pl0-tablet { padding-left: 0 !important }
  .pl025-tablet { padding-left: var(--distance-025) !important }
  .pl05-tablet { padding-left: var(--distance-05) !important }
  .pl075-tablet { padding-left: var(--distance-075) !important }
  .pl1-tablet { padding-left: var(--distance-1) !important }
  .pl125-tablet { padding-left: var(--distance-125) !important }
  .pl15-tablet { padding-left: var(--distance-15) !important }
  .pl175-tablet { padding-left: var(--distance-175) !important }
  .pl2-tablet { padding-left: var(--distance-2) !important }
  .pl225-tablet { padding-left: var(--distance-225) !important }
  .pl25-tablet { padding-left: var(--distance-25) !important }
  .pl275-tablet { padding-left: var(--distance-275) !important }
  .pl3-tablet { padding-left: var(--distance-3) !important }
  .pl325-tablet { padding-left: var(--distance-325) !important }
  .pl35-tablet { padding-left: var(--distance-35) !important }
  .pl375-tablet { padding-left: var(--distance-375) !important }
  .pl4-tablet { padding-left: var(--distance-4) !important }
  .pl425-tablet { padding-left: var(--distance-425) !important }
  .pl45-tablet { padding-left: var(--distance-45) !important }
  .pl475-tablet { padding-left: var(--distance-475) !important }
  .pl5-tablet { padding-left: var(--distance-5) !important }
  .pl525-tablet { padding-left: var(--distance-525) !important }
  .pl55-tablet { padding-left: var(--distance-55) !important }
  .pl575-tablet { padding-left: var(--distance-575) !important }
  .pl6-tablet { padding-left: var(--distance-6) !important }
  .pl625-tablet { padding-left: var(--distance-625) !important }
  .pl65-tablet { padding-left: var(--distance-65) !important }
  .pl675-tablet { padding-left: var(--distance-675) !important }
  .pl7-tablet { padding-left: var(--distance-7) !important }
  .pl725-tablet { padding-left: var(--distance-725) !important }
  .pl75-tablet { padding-left: var(--distance-75) !important }
  .pl775-tablet { padding-left: var(--distance-775) !important }
  .pl8-tablet { padding-left: var(--distance-8) !important }
  .pl825-tablet { padding-left: var(--distance-825) !important }
  .pl85-tablet { padding-left: var(--distance-85) !important }
  .pl875-tablet { padding-left: var(--distance-875) !important }
  .pl9-tablet { padding-left: var(--distance-9) !important }
  .pl925-tablet { padding-left: var(--distance-925) !important }
  .pl95-tablet { padding-left: var(--distance-95) !important }
  .pl975-tablet { padding-left: var(--distance-975) !important }
  .pl10-tablet { padding-left: var(--distance-10) !important }
}
@media screen and (max-width: 768px) {
  .m0-mobile { margin: 0 !important }
  .m025-mobile { margin: var(--distance-025) !important }
  .m05-mobile { margin: var(--distance-05) !important }
  .m075-mobile { margin: var(--distance-075) !important }
  .m1-mobile { margin: var(--distance-1) !important }
  .m125-mobile { margin: var(--distance-125) !important }
  .m15-mobile { margin: var(--distance-15) !important }
  .m175-mobile { margin: var(--distance-175) !important }
  .m2-mobile { margin: var(--distance-2) !important }
  .m225-mobile { margin: var(--distance-225) !important }
  .m25-mobile { margin: var(--distance-25) !important }
  .m275-mobile { margin: var(--distance-275) !important }
  .m3-mobile { margin: var(--distance-3) !important }
  .m325-mobile { margin: var(--distance-325) !important }
  .m35-mobile { margin: var(--distance-35) !important }
  .m375-mobile { margin: var(--distance-375) !important }
  .m4-mobile { margin: var(--distance-4) !important }
  .m425-mobile { margin: var(--distance-425) !important }
  .m45-mobile { margin: var(--distance-45) !important }
  .m475-mobile { margin: var(--distance-475) !important }
  .m5-mobile { margin: var(--distance-5) !important }
  .m525-mobile { margin: var(--distance-525) !important }
  .m55-mobile { margin: var(--distance-55) !important }
  .m575-mobile { margin: var(--distance-575) !important }
  .m6-mobile { margin: var(--distance-6) !important }
  .m625-mobile { margin: var(--distance-625) !important }
  .m65-mobile { margin: var(--distance-65) !important }
  .m675-mobile { margin: var(--distance-675) !important }
  .m7-mobile { margin: var(--distance-7) !important }
  .m725-mobile { margin: var(--distance-725) !important }
  .m75-mobile { margin: var(--distance-75) !important }
  .m775-mobile { margin: var(--distance-775) !important }
  .m8-mobile { margin: var(--distance-8) !important }
  .m825-mobile { margin: var(--distance-825) !important }
  .m85-mobile { margin: var(--distance-85) !important }
  .m875-mobile { margin: var(--distance-875) !important }
  .m9-mobile { margin: var(--distance-9) !important }
  .m925-mobile { margin: var(--distance-925) !important }
  .m95-mobile { margin: var(--distance-95) !important }
  .m975-mobile { margin: var(--distance-975) !important }
  .m10-mobile { margin: var(--distance-10) !important }
  .mt0-mobile { margin-top: 0 !important }
  .mt025-mobile { margin-top: var(--distance-025) !important }
  .mt05-mobile { margin-top: var(--distance-05) !important }
  .mt075-mobile { margin-top: var(--distance-075) !important }
  .mt08-mobile { margin-top: var(--distance-08) !important}
  .mt1-mobile { margin-top: var(--distance-1) !important }
  .mt125-mobile { margin-top: var(--distance-125) !important }
  .mt15-mobile { margin-top: var(--distance-15) !important }
  .mt175-mobile { margin-top: var(--distance-175) !important }
  .mt2-mobile { margin-top: var(--distance-2) !important }
  .mt225-mobile { margin-top: var(--distance-225) !important }
  .mt25-mobile { margin-top: var(--distance-25) !important }
  .mt275-mobile { margin-top: var(--distance-275) !important }
  .mt3-mobile { margin-top: var(--distance-3) !important }
  .mt325-mobile { margin-top: var(--distance-325) !important }
  .mt35-mobile { margin-top: var(--distance-35) !important }
  .mt375-mobile { margin-top: var(--distance-375) !important }
  .mt4-mobile { margin-top: var(--distance-4) !important }
  .mt425-mobile { margin-top: var(--distance-425) !important }
  .mt45-mobile { margin-top: var(--distance-45) !important }
  .mt475-mobile { margin-top: var(--distance-475) !important }
  .mt5-mobile { margin-top: var(--distance-5) !important }
  .mt525-mobile { margin-top: var(--distance-525) !important }
  .mt55-mobile { margin-top: var(--distance-55) !important }
  .mt575-mobile { margin-top: var(--distance-575) !important }
  .mt6-mobile { margin-top: var(--distance-6) !important }
  .mt625-mobile { margin-top: var(--distance-625) !important }
  .mt65-mobile { margin-top: var(--distance-65) !important }
  .mt675-mobile { margin-top: var(--distance-675) !important }
  .mt7-mobile { margin-top: var(--distance-7) !important }
  .mt725-mobile { margin-top: var(--distance-725) !important }
  .mt75-mobile { margin-top: var(--distance-75) !important }
  .mt775-mobile { margin-top: var(--distance-775) !important }
  .mt8-mobile { margin-top: var(--distance-8) !important }
  .mt825-mobile { margin-top: var(--distance-825) !important }
  .mt85-mobile { margin-top: var(--distance-85) !important }
  .mt875-mobile { margin-top: var(--distance-875) !important }
  .mt9-mobile { margin-top: var(--distance-9) !important }
  .mt925-mobile { margin-top: var(--distance-925) !important }
  .mt95-mobile { margin-top: var(--distance-95) !important }
  .mt975-mobile { margin-top: var(--distance-975) !important }
  .mt10-mobile { margin-top: var(--distance-10) !important }
  .mr0-mobile { margin-right: 0 !important }
  .mr025-mobile { margin-right: var(--distance-025) !important }
  .mr05-mobile { margin-right: var(--distance-05) !important }
  .mr075-mobile { margin-right: var(--distance-075) !important }
  .mr1-mobile { margin-right: var(--distance-1) !important }
  .mr125-mobile { margin-right: var(--distance-125) !important }
  .mr15-mobile { margin-right: var(--distance-15) !important }
  .mr175-mobile { margin-right: var(--distance-175) !important }
  .mr2-mobile { margin-right: var(--distance-2) !important }
  .mr225-mobile { margin-right: var(--distance-225) !important }
  .mr25-mobile { margin-right: var(--distance-25) !important }
  .mr275-mobile { margin-right: var(--distance-275) !important }
  .mr3-mobile { margin-right: var(--distance-3) !important }
  .mr325-mobile { margin-right: var(--distance-325) !important }
  .mr35-mobile { margin-right: var(--distance-35) !important }
  .mr375-mobile { margin-right: var(--distance-375) !important }
  .mr4-mobile { margin-right: var(--distance-4) !important }
  .mr425-mobile { margin-right: var(--distance-425) !important }
  .mr45-mobile { margin-right: var(--distance-45) !important }
  .mr475-mobile { margin-right: var(--distance-475) !important }
  .mr5-mobile { margin-right: var(--distance-5) !important }
  .mr525-mobile { margin-right: var(--distance-525) !important }
  .mr55-mobile { margin-right: var(--distance-55) !important }
  .mr575-mobile { margin-right: var(--distance-575) !important }
  .mr6-mobile { margin-right: var(--distance-6) !important }
  .mr625-mobile { margin-right: var(--distance-625) !important }
  .mr65-mobile { margin-right: var(--distance-65) !important }
  .mr675-mobile { margin-right: var(--distance-675) !important }
  .mr7-mobile { margin-right: var(--distance-7) !important }
  .mr725-mobile { margin-right: var(--distance-725) !important }
  .mr75-mobile { margin-right: var(--distance-75) !important }
  .mr775-mobile { margin-right: var(--distance-775) !important }
  .mr8-mobile { margin-right: var(--distance-8) !important }
  .mr825-mobile { margin-right: var(--distance-825) !important }
  .mr85-mobile { margin-right: var(--distance-85) !important }
  .mr875-mobile { margin-right: var(--distance-875) !important }
  .mr9-mobile { margin-right: var(--distance-9) !important }
  .mr925-mobile { margin-right: var(--distance-925) !important }
  .mr95-mobile { margin-right: var(--distance-95) !important }
  .mr975-mobile { margin-right: var(--distance-975) !important }
  .mr10-mobile { margin-right: var(--distance-10) !important }
  .mb0-mobile { margin-bottom: 0 !important }
  .mb025-mobile { margin-bottom: var(--distance-025) !important }
  .mb05-mobile { margin-bottom: var(--distance-05) !important }
  .mb075-mobile { margin-bottom: var(--distance-075) !important }
  .mb1-mobile { margin-bottom: var(--distance-1) !important }
  .mb125-mobile { margin-bottom: var(--distance-125) !important }
  .mb15-mobile { margin-bottom: var(--distance-15) !important }
  .mb175-mobile { margin-bottom: var(--distance-175) !important }
  .mb2-mobile { margin-bottom: var(--distance-2) !important }
  .mb225-mobile { margin-bottom: var(--distance-225) !important }
  .mb25-mobile { margin-bottom: var(--distance-25) !important }
  .mb275-mobile { margin-bottom: var(--distance-275) !important }
  .mb3-mobile { margin-bottom: var(--distance-3) !important }
  .mb325-mobile { margin-bottom: var(--distance-325) !important }
  .mb35-mobile { margin-bottom: var(--distance-35) !important }
  .mb375-mobile { margin-bottom: var(--distance-375) !important }
  .mb4-mobile { margin-bottom: var(--distance-4) !important }
  .mb425-mobile { margin-bottom: var(--distance-425) !important }
  .mb45-mobile { margin-bottom: var(--distance-45) !important }
  .mb475-mobile { margin-bottom: var(--distance-475) !important }
  .mb5-mobile { margin-bottom: var(--distance-5) !important }
  .mb525-mobile { margin-bottom: var(--distance-525) !important }
  .mb55-mobile { margin-bottom: var(--distance-55) !important }
  .mb575-mobile { margin-bottom: var(--distance-575) !important }
  .mb6-mobile { margin-bottom: var(--distance-6) !important }
  .mb625-mobile { margin-bottom: var(--distance-625) !important }
  .mb65-mobile { margin-bottom: var(--distance-65) !important }
  .mb675-mobile { margin-bottom: var(--distance-675) !important }
  .mb7-mobile { margin-bottom: var(--distance-7) !important }
  .mb725-mobile { margin-bottom: var(--distance-725) !important }
  .mb75-mobile { margin-bottom: var(--distance-75) !important }
  .mb775-mobile { margin-bottom: var(--distance-775) !important }
  .mb8-mobile { margin-bottom: var(--distance-8) !important }
  .mb825-mobile { margin-bottom: var(--distance-825) !important }
  .mb85-mobile { margin-bottom: var(--distance-85) !important }
  .mb875-mobile { margin-bottom: var(--distance-875) !important }
  .mb9-mobile { margin-bottom: var(--distance-9) !important }
  .mb925-mobile { margin-bottom: var(--distance-925) !important }
  .mb95-mobile { margin-bottom: var(--distance-95) !important }
  .mb975-mobile { margin-bottom: var(--distance-975) !important }
  .mb10-mobile { margin-bottom: var(--distance-10) !important }
  .ml0-mobile { margin-left: 0 !important }
  .ml025-mobile { margin-left: var(--distance-025) !important }
  .ml05-mobile { margin-left: var(--distance-05) !important }
  .ml075-mobile { margin-left: var(--distance-075) !important }
  .ml1-mobile { margin-left: var(--distance-1) !important }
  .ml125-mobile { margin-left: var(--distance-125) !important }
  .ml15-mobile { margin-left: var(--distance-15) !important }
  .ml175-mobile { margin-left: var(--distance-175) !important }
  .ml2-mobile { margin-left: var(--distance-2) !important }
  .ml225-mobile { margin-left: var(--distance-225) !important }
  .ml25-mobile { margin-left: var(--distance-25) !important }
  .ml275-mobile { margin-left: var(--distance-275) !important }
  .ml3-mobile { margin-left: var(--distance-3) !important }
  .ml325-mobile { margin-left: var(--distance-325) !important }
  .ml35-mobile { margin-left: var(--distance-35) !important }
  .ml375-mobile { margin-left: var(--distance-375) !important }
  .ml4-mobile { margin-left: var(--distance-4) !important }
  .ml425-mobile { margin-left: var(--distance-425) !important }
  .ml45-mobile { margin-left: var(--distance-45) !important }
  .ml475-mobile { margin-left: var(--distance-475) !important }
  .ml5-mobile { margin-left: var(--distance-5) !important }
  .ml525-mobile { margin-left: var(--distance-525) !important }
  .ml55-mobile { margin-left: var(--distance-55) !important }
  .ml575-mobile { margin-left: var(--distance-575) !important }
  .ml6-mobile { margin-left: var(--distance-6) !important }
  .ml625-mobile { margin-left: var(--distance-625) !important }
  .ml65-mobile { margin-left: var(--distance-65) !important }
  .ml675-mobile { margin-left: var(--distance-675) !important }
  .ml7-mobile { margin-left: var(--distance-7) !important }
  .ml725-mobile { margin-left: var(--distance-725) !important }
  .ml75-mobile { margin-left: var(--distance-75) !important }
  .ml775-mobile { margin-left: var(--distance-775) !important }
  .ml8-mobile { margin-left: var(--distance-8) !important }
  .ml825-mobile { margin-left: var(--distance-825) !important }
  .ml85-mobile { margin-left: var(--distance-85) !important }
  .ml875-mobile { margin-left: var(--distance-875) !important }
  .ml9-mobile { margin-left: var(--distance-9) !important }
  .ml925-mobile { margin-left: var(--distance-925) !important }
  .ml95-mobile { margin-left: var(--distance-95) !important }
  .ml975-mobile { margin-left: var(--distance-975) !important }
  .ml10-mobile { margin-left: var(--distance-10) !important }
  .neg-m0-mobile { margin: 0 !important }
  .neg-m025-mobile { margin: var(--distance-025) !important }
  .neg-m05-mobile { margin: var(--distance-05) !important }
  .neg-m075-mobile { margin: var(--distance-075) !important }
  .neg-m1-mobile { margin: var(--distance-1) !important }
  .neg-m125-mobile { margin: var(--distance-125) !important }
  .neg-m15-mobile { margin: var(--distance-15) !important }
  .neg-m175-mobile { margin: var(--distance-175) !important }
  .neg-m2-mobile { margin: var(--distance-2) !important }
  .neg-m225-mobile { margin: var(--distance-225) !important }
  .neg-m25-mobile { margin: var(--distance-25) !important }
  .neg-m275-mobile { margin: var(--distance-275) !important }
  .neg-m3-mobile { margin: var(--distance-3) !important }
  .neg-m325-mobile { margin: var(--distance-325) !important }
  .neg-m35-mobile { margin: var(--distance-35) !important }
  .neg-m375-mobile { margin: var(--distance-375) !important }
  .neg-m4-mobile { margin: var(--distance-4) !important }
  .neg-m425-mobile { margin: var(--distance-425) !important }
  .neg-m45-mobile { margin: var(--distance-45) !important }
  .neg-m475-mobile { margin: var(--distance-475) !important }
  .neg-m5-mobile { margin: var(--distance-5) !important }
  .neg-m525-mobile { margin: var(--distance-525) !important }
  .neg-m55-mobile { margin: var(--distance-55) !important }
  .neg-m575-mobile { margin: var(--distance-575) !important }
  .neg-m6-mobile { margin: var(--distance-6) !important }
  .neg-m625-mobile { margin: var(--distance-625) !important }
  .neg-m65-mobile { margin: var(--distance-65) !important }
  .neg-m675-mobile { margin: var(--distance-675) !important }
  .neg-m7-mobile { margin: var(--distance-7) !important }
  .neg-m725-mobile { margin: var(--distance-725) !important }
  .neg-m75-mobile { margin: var(--distance-75) !important }
  .neg-m775-mobile { margin: var(--distance-775) !important }
  .neg-m8-mobile { margin: var(--distance-8) !important }
  .neg-m825-mobile { margin: var(--distance-825) !important }
  .neg-m85-mobile { margin: var(--distance-85) !important }
  .neg-m875-mobile { margin: var(--distance-875) !important }
  .neg-m9-mobile { margin: var(--distance-9) !important }
  .neg-m925-mobile { margin: var(--distance-925) !important }
  .neg-m95-mobile { margin: var(--distance-95) !important }
  .neg-m975-mobile { margin: var(--distance-975) !important }
  .neg-m10-mobile { margin: var(--distance-10) !important }
  .neg-mt0-mobile { margin-top: 0 !important }
  .neg-mt025-mobile { margin-top: var(--distance-025) !important }
  .neg-mt05-mobile { margin-top: var(--distance-05) !important }
  .neg-mt075-mobile { margin-top: var(--distance-075) !important }
  .neg-mt08-mobile { margin-top: var(--distance-08) !important}
  .neg-mt1-mobile { margin-top: var(--distance-1) !important }
  .neg-mt125-mobile { margin-top: var(--distance-125) !important }
  .neg-mt15-mobile { margin-top: var(--distance-15) !important }
  .neg-mt175-mobile { margin-top: var(--distance-175) !important }
  .neg-mt2-mobile { margin-top: var(--distance-2) !important }
  .neg-mt225-mobile { margin-top: var(--distance-225) !important }
  .neg-mt25-mobile { margin-top: var(--distance-25) !important }
  .neg-mt275-mobile { margin-top: var(--distance-275) !important }
  .neg-mt3-mobile { margin-top: var(--distance-3) !important }
  .neg-mt325-mobile { margin-top: var(--distance-325) !important }
  .neg-mt35-mobile { margin-top: var(--distance-35) !important }
  .neg-mt375-mobile { margin-top: var(--distance-375) !important }
  .neg-mt4-mobile { margin-top: var(--distance-4) !important }
  .neg-mt425-mobile { margin-top: var(--distance-425) !important }
  .neg-mt45-mobile { margin-top: var(--distance-45) !important }
  .neg-mt475-mobile { margin-top: var(--distance-475) !important }
  .neg-mt5-mobile { margin-top: var(--distance-5) !important }
  .neg-mt525-mobile { margin-top: var(--distance-525) !important }
  .neg-mt55-mobile { margin-top: var(--distance-55) !important }
  .neg-mt575-mobile { margin-top: var(--distance-575) !important }
  .neg-mt6-mobile { margin-top: var(--distance-6) !important }
  .neg-mt625-mobile { margin-top: var(--distance-625) !important }
  .neg-mt65-mobile { margin-top: var(--distance-65) !important }
  .neg-mt675-mobile { margin-top: var(--distance-675) !important }
  .neg-mt7-mobile { margin-top: var(--distance-7) !important }
  .neg-mt725-mobile { margin-top: var(--distance-725) !important }
  .neg-mt75-mobile { margin-top: var(--distance-75) !important }
  .neg-mt775-mobile { margin-top: var(--distance-775) !important }
  .neg-mt8-mobile { margin-top: var(--distance-8) !important }
  .neg-mt825-mobile { margin-top: var(--distance-825) !important }
  .neg-mt85-mobile { margin-top: var(--distance-85) !important }
  .neg-mt875-mobile { margin-top: var(--distance-875) !important }
  .neg-mt9-mobile { margin-top: var(--distance-9) !important }
  .neg-mt925-mobile { margin-top: var(--distance-925) !important }
  .neg-mt95-mobile { margin-top: var(--distance-95) !important }
  .neg-mt975-mobile { margin-top: var(--distance-975) !important }
  .neg-mt10-mobile { margin-top: var(--distance-10) !important }
  .neg-mr0-mobile { margin-right: 0 !important }
  .neg-mr025-mobile { margin-right: var(--distance-025) !important }
  .neg-mr05-mobile { margin-right: var(--distance-05) !important }
  .neg-mr075-mobile { margin-right: var(--distance-075) !important }
  .neg-mr1-mobile { margin-right: var(--distance-1) !important }
  .neg-mr125-mobile { margin-right: var(--distance-125) !important }
  .neg-mr15-mobile { margin-right: var(--distance-15) !important }
  .neg-mr175-mobile { margin-right: var(--distance-175) !important }
  .neg-mr2-mobile { margin-right: var(--distance-2) !important }
  .neg-mr225-mobile { margin-right: var(--distance-225) !important }
  .neg-mr25-mobile { margin-right: var(--distance-25) !important }
  .neg-mr275-mobile { margin-right: var(--distance-275) !important }
  .neg-mr3-mobile { margin-right: var(--distance-3) !important }
  .neg-mr325-mobile { margin-right: var(--distance-325) !important }
  .neg-mr35-mobile { margin-right: var(--distance-35) !important }
  .neg-mr375-mobile { margin-right: var(--distance-375) !important }
  .neg-mr4-mobile { margin-right: var(--distance-4) !important }
  .neg-mr425-mobile { margin-right: var(--distance-425) !important }
  .neg-mr45-mobile { margin-right: var(--distance-45) !important }
  .neg-mr475-mobile { margin-right: var(--distance-475) !important }
  .neg-mr5-mobile { margin-right: var(--distance-5) !important }
  .neg-mr525-mobile { margin-right: var(--distance-525) !important }
  .neg-mr55-mobile { margin-right: var(--distance-55) !important }
  .neg-mr575-mobile { margin-right: var(--distance-575) !important }
  .neg-mr6-mobile { margin-right: var(--distance-6) !important }
  .neg-mr625-mobile { margin-right: var(--distance-625) !important }
  .neg-mr65-mobile { margin-right: var(--distance-65) !important }
  .neg-mr675-mobile { margin-right: var(--distance-675) !important }
  .neg-mr7-mobile { margin-right: var(--distance-7) !important }
  .neg-mr725-mobile { margin-right: var(--distance-725) !important }
  .neg-mr75-mobile { margin-right: var(--distance-75) !important }
  .neg-mr775-mobile { margin-right: var(--distance-775) !important }
  .neg-mr8-mobile { margin-right: var(--distance-8) !important }
  .neg-mr825-mobile { margin-right: var(--distance-825) !important }
  .neg-mr85-mobile { margin-right: var(--distance-85) !important }
  .neg-mr875-mobile { margin-right: var(--distance-875) !important }
  .neg-mr9-mobile { margin-right: var(--distance-9) !important }
  .neg-mr925-mobile { margin-right: var(--distance-925) !important }
  .neg-mr95-mobile { margin-right: var(--distance-95) !important }
  .neg-mr975-mobile { margin-right: var(--distance-975) !important }
  .neg-mr10-mobile { margin-right: var(--distance-10) !important }
  .neg-mb0-mobile { margin-bottom: 0 !important }
  .neg-mb025-mobile { margin-bottom: var(--distance-025) !important }
  .neg-mb05-mobile { margin-bottom: var(--distance-05) !important }
  .neg-mb075-mobile { margin-bottom: var(--distance-075) !important }
  .neg-mb1-mobile { margin-bottom: var(--distance-1) !important }
  .neg-mb125-mobile { margin-bottom: var(--distance-125) !important }
  .neg-mb15-mobile { margin-bottom: var(--distance-15) !important }
  .neg-mb175-mobile { margin-bottom: var(--distance-175) !important }
  .neg-mb2-mobile { margin-bottom: var(--distance-2) !important }
  .neg-mb225-mobile { margin-bottom: var(--distance-225) !important }
  .neg-mb25-mobile { margin-bottom: var(--distance-25) !important }
  .neg-mb275-mobile { margin-bottom: var(--distance-275) !important }
  .neg-mb3-mobile { margin-bottom: var(--distance-3) !important }
  .neg-mb325-mobile { margin-bottom: var(--distance-325) !important }
  .neg-mb35-mobile { margin-bottom: var(--distance-35) !important }
  .neg-mb375-mobile { margin-bottom: var(--distance-375) !important }
  .neg-mb4-mobile { margin-bottom: var(--distance-4) !important }
  .neg-mb425-mobile { margin-bottom: var(--distance-425) !important }
  .neg-mb45-mobile { margin-bottom: var(--distance-45) !important }
  .neg-mb475-mobile { margin-bottom: var(--distance-475) !important }
  .neg-mb5-mobile { margin-bottom: var(--distance-5) !important }
  .neg-mb525-mobile { margin-bottom: var(--distance-525) !important }
  .neg-mb55-mobile { margin-bottom: var(--distance-55) !important }
  .neg-mb575-mobile { margin-bottom: var(--distance-575) !important }
  .neg-mb6-mobile { margin-bottom: var(--distance-6) !important }
  .neg-mb625-mobile { margin-bottom: var(--distance-625) !important }
  .neg-mb65-mobile { margin-bottom: var(--distance-65) !important }
  .neg-mb675-mobile { margin-bottom: var(--distance-675) !important }
  .neg-mb7-mobile { margin-bottom: var(--distance-7) !important }
  .neg-mb725-mobile { margin-bottom: var(--distance-725) !important }
  .neg-mb75-mobile { margin-bottom: var(--distance-75) !important }
  .neg-mb775-mobile { margin-bottom: var(--distance-775) !important }
  .neg-mb8-mobile { margin-bottom: var(--distance-8) !important }
  .neg-mb825-mobile { margin-bottom: var(--distance-825) !important }
  .neg-mb85-mobile { margin-bottom: var(--distance-85) !important }
  .neg-mb875-mobile { margin-bottom: var(--distance-875) !important }
  .neg-mb9-mobile { margin-bottom: var(--distance-9) !important }
  .neg-mb925-mobile { margin-bottom: var(--distance-925) !important }
  .neg-mb95-mobile { margin-bottom: var(--distance-95) !important }
  .neg-mb975-mobile { margin-bottom: var(--distance-975) !important }
  .neg-mb10-mobile { margin-bottom: var(--distance-10) !important }
  .neg-ml0-mobile { margin-left: 0 !important }
  .neg-ml025-mobile { margin-left: var(--distance-025) !important }
  .neg-ml05-mobile { margin-left: var(--distance-05) !important }
  .neg-ml075-mobile { margin-left: var(--distance-075) !important }
  .neg-ml1-mobile { margin-left: var(--distance-1) !important }
  .neg-ml125-mobile { margin-left: var(--distance-125) !important }
  .neg-ml15-mobile { margin-left: var(--distance-15) !important }
  .neg-ml175-mobile { margin-left: var(--distance-175) !important }
  .neg-ml2-mobile { margin-left: var(--distance-2) !important }
  .neg-ml225-mobile { margin-left: var(--distance-225) !important }
  .neg-ml25-mobile { margin-left: var(--distance-25) !important }
  .neg-ml275-mobile { margin-left: var(--distance-275) !important }
  .neg-ml3-mobile { margin-left: var(--distance-3) !important }
  .neg-ml325-mobile { margin-left: var(--distance-325) !important }
  .neg-ml35-mobile { margin-left: var(--distance-35) !important }
  .neg-ml375-mobile { margin-left: var(--distance-375) !important }
  .neg-ml4-mobile { margin-left: var(--distance-4) !important }
  .neg-ml425-mobile { margin-left: var(--distance-425) !important }
  .neg-ml45-mobile { margin-left: var(--distance-45) !important }
  .neg-ml475-mobile { margin-left: var(--distance-475) !important }
  .neg-ml5-mobile { margin-left: var(--distance-5) !important }
  .neg-ml525-mobile { margin-left: var(--distance-525) !important }
  .neg-ml55-mobile { margin-left: var(--distance-55) !important }
  .neg-ml575-mobile { margin-left: var(--distance-575) !important }
  .neg-ml6-mobile { margin-left: var(--distance-6) !important }
  .neg-ml625-mobile { margin-left: var(--distance-625) !important }
  .neg-ml65-mobile { margin-left: var(--distance-65) !important }
  .neg-ml675-mobile { margin-left: var(--distance-675) !important }
  .neg-ml7-mobile { margin-left: var(--distance-7) !important }
  .neg-ml725-mobile { margin-left: var(--distance-725) !important }
  .neg-ml75-mobile { margin-left: var(--distance-75) !important }
  .neg-ml775-mobile { margin-left: var(--distance-775) !important }
  .neg-ml8-mobile { margin-left: var(--distance-8) !important }
  .neg-ml825-mobile { margin-left: var(--distance-825) !important }
  .neg-ml85-mobile { margin-left: var(--distance-85) !important }
  .neg-ml875-mobile { margin-left: var(--distance-875) !important }
  .neg-ml9-mobile { margin-left: var(--distance-9) !important }
  .neg-ml925-mobile { margin-left: var(--distance-925) !important }
  .neg-ml95-mobile { margin-left: var(--distance-95) !important }
  .neg-ml975-mobile { margin-left: var(--distance-975) !important }
  .neg-ml10-mobile { margin-left: var(--distance-10) !important }
  .p0-mobile { padding: 0 !important }
  .p025-mobile { padding: var(--distance-025) !important }
  .p05-mobile { padding: var(--distance-05) !important }
  .p075-mobile { padding: var(--distance-075) !important }
  .p1-mobile { padding: var(--distance-1) !important }
  .p125-mobile { padding: var(--distance-125) !important }
  .p15-mobile { padding: var(--distance-15) !important }
  .p175-mobile { padding: var(--distance-175) !important }
  .p2-mobile { padding: var(--distance-2) !important }
  .p225-mobile { padding: var(--distance-225) !important }
  .p25-mobile { padding: var(--distance-25) !important }
  .p275-mobile { padding: var(--distance-275) !important }
  .p3-mobile { padding: var(--distance-3) !important }
  .p325-mobile { padding: var(--distance-325) !important }
  .p35-mobile { padding: var(--distance-35) !important }
  .p375-mobile { padding: var(--distance-375) !important }
  .p4-mobile { padding: var(--distance-4) !important }
  .p425-mobile { padding: var(--distance-425) !important }
  .p45-mobile { padding: var(--distance-45) !important }
  .p475-mobile { padding: var(--distance-475) !important }
  .p5-mobile { padding: var(--distance-5) !important }
  .p525-mobile { padding: var(--distance-525) !important }
  .p55-mobile { padding: var(--distance-55) !important }
  .p575-mobile { padding: var(--distance-575) !important }
  .p6-mobile { padding: var(--distance-6) !important }
  .p625-mobile { padding: var(--distance-625) !important }
  .p65-mobile { padding: var(--distance-65) !important }
  .p675-mobile { padding: var(--distance-675) !important }
  .p7-mobile { padding: var(--distance-7) !important }
  .p725-mobile { padding: var(--distance-725) !important }
  .p75-mobile { padding: var(--distance-75) !important }
  .p775-mobile { padding: var(--distance-775) !important }
  .p8-mobile { padding: var(--distance-8) !important }
  .p825-mobile { padding: var(--distance-825) !important }
  .p85-mobile { padding: var(--distance-85) !important }
  .p875-mobile { padding: var(--distance-875) !important }
  .p9-mobile { padding: var(--distance-9) !important }
  .p925-mobile { padding: var(--distance-925) !important }
  .p95-mobile { padding: var(--distance-95) !important }
  .p975-mobile { padding: var(--distance-975) !important }
  .p10-mobile { padding: var(--distance-10) !important }
  .pt0-mobile { padding-top: 0 !important }
  .pt025-mobile { padding-top: var(--distance-025) !important }
  .pt05-mobile { padding-top: var(--distance-05) !important }
  .pt075-mobile { padding-top: var(--distance-075) !important }
  .pt1-mobile { padding-top: var(--distance-1) !important }
  .pt125-mobile { padding-top: var(--distance-125) !important }
  .pt15-mobile { padding-top: var(--distance-15) !important }
  .pt175-mobile { padding-top: var(--distance-175) !important }
  .pt2-mobile { padding-top: var(--distance-2) !important }
  .pt225-mobile { padding-top: var(--distance-225) !important }
  .pt25-mobile { padding-top: var(--distance-25) !important }
  .pt275-mobile { padding-top: var(--distance-275) !important }
  .pt3-mobile { padding-top: var(--distance-3) !important }
  .pt325-mobile { padding-top: var(--distance-325) !important }
  .pt35-mobile { padding-top: var(--distance-35) !important }
  .pt375-mobile { padding-top: var(--distance-375) !important }
  .pt4-mobile { padding-top: var(--distance-4) !important }
  .pt425-mobile { padding-top: var(--distance-425) !important }
  .pt45-mobile { padding-top: var(--distance-45) !important }
  .pt475-mobile { padding-top: var(--distance-475) !important }
  .pt5-mobile { padding-top: var(--distance-5) !important }
  .pt525-mobile { padding-top: var(--distance-525) !important }
  .pt55-mobile { padding-top: var(--distance-55) !important }
  .pt575-mobile { padding-top: var(--distance-575) !important }
  .pt6-mobile { padding-top: var(--distance-6) !important }
  .pt625-mobile { padding-top: var(--distance-625) !important }
  .pt65-mobile { padding-top: var(--distance-65) !important }
  .pt675-mobile { padding-top: var(--distance-675) !important }
  .pt7-mobile { padding-top: var(--distance-7) !important }
  .pt725-mobile { padding-top: var(--distance-725) !important }
  .pt75-mobile { padding-top: var(--distance-75) !important }
  .pt775-mobile { padding-top: var(--distance-775) !important }
  .pt8-mobile { padding-top: var(--distance-8) !important }
  .pt825-mobile { padding-top: var(--distance-825) !important }
  .pt85-mobile { padding-top: var(--distance-85) !important }
  .pt875-mobile { padding-top: var(--distance-875) !important }
  .pt9-mobile { padding-top: var(--distance-9) !important }
  .pt925-mobile { padding-top: var(--distance-925) !important }
  .pt95-mobile { padding-top: var(--distance-95) !important }
  .pt975-mobile { padding-top: var(--distance-975) !important }
  .pt10-mobile { padding-top: var(--distance-10) !important }
  .pr0-mobile { padding-right: 0 !important }
  .pr025-mobile { padding-right: var(--distance-025) !important }
  .pr05-mobile { padding-right: var(--distance-05) !important }
  .pr075-mobile { padding-right: var(--distance-075) !important }
  .pr1-mobile { padding-right: var(--distance-1) !important }
  .pr125-mobile { padding-right: var(--distance-125) !important }
  .pr15-mobile { padding-right: var(--distance-15) !important }
  .pr175-mobile { padding-right: var(--distance-175) !important }
  .pr2-mobile { padding-right: var(--distance-2) !important }
  .pr225-mobile { padding-right: var(--distance-225) !important }
  .pr25-mobile { padding-right: var(--distance-25) !important }
  .pr275-mobile { padding-right: var(--distance-275) !important }
  .pr3-mobile { padding-right: var(--distance-3) !important }
  .pr325-mobile { padding-right: var(--distance-325) !important }
  .pr35-mobile { padding-right: var(--distance-35) !important }
  .pr375-mobile { padding-right: var(--distance-375) !important }
  .pr4-mobile { padding-right: var(--distance-4) !important }
  .pr425-mobile { padding-right: var(--distance-425) !important }
  .pr45-mobile { padding-right: var(--distance-45) !important }
  .pr475-mobile { padding-right: var(--distance-475) !important }
  .pr5-mobile { padding-right: var(--distance-5) !important }
  .pr525-mobile { padding-right: var(--distance-525) !important }
  .pr55-mobile { padding-right: var(--distance-55) !important }
  .pr575-mobile { padding-right: var(--distance-575) !important }
  .pr6-mobile { padding-right: var(--distance-6) !important }
  .pr625-mobile { padding-right: var(--distance-625) !important }
  .pr65-mobile { padding-right: var(--distance-65) !important }
  .pr675-mobile { padding-right: var(--distance-675) !important }
  .pr7-mobile { padding-right: var(--distance-7) !important }
  .pr725-mobile { padding-right: var(--distance-725) !important }
  .pr75-mobile { padding-right: var(--distance-75) !important }
  .pr775-mobile { padding-right: var(--distance-775) !important }
  .pr8-mobile { padding-right: var(--distance-8) !important }
  .pr825-mobile { padding-right: var(--distance-825) !important }
  .pr85-mobile { padding-right: var(--distance-85) !important }
  .pr875-mobile { padding-right: var(--distance-875) !important }
  .pr9-mobile { padding-right: var(--distance-9) !important }
  .pr925-mobile { padding-right: var(--distance-925) !important }
  .pr95-mobile { padding-right: var(--distance-95) !important }
  .pr975-mobile { padding-right: var(--distance-975) !important }
  .pr10-mobile { padding-right: var(--distance-10) !important }
  .pb0-mobile { padding-bottom: 0 !important }
  .pb025-mobile { padding-bottom: var(--distance-025) !important }
  .pb05-mobile { padding-bottom: var(--distance-05) !important }
  .pb075-mobile { padding-bottom: var(--distance-075) !important }
  .pb1-mobile { padding-bottom: var(--distance-1) !important }
  .pb125-mobile { padding-bottom: var(--distance-125) !important }
  .pb15-mobile { padding-bottom: var(--distance-15) !important }
  .pb175-mobile { padding-bottom: var(--distance-175) !important }
  .pb2-mobile { padding-bottom: var(--distance-2) !important }
  .pb225-mobile { padding-bottom: var(--distance-225) !important }
  .pb25-mobile { padding-bottom: var(--distance-25) !important }
  .pb275-mobile { padding-bottom: var(--distance-275) !important }
  .pb3-mobile { padding-bottom: var(--distance-3) !important }
  .pb325-mobile { padding-bottom: var(--distance-325) !important }
  .pb35-mobile { padding-bottom: var(--distance-35) !important }
  .pb375-mobile { padding-bottom: var(--distance-375) !important }
  .pb4-mobile { padding-bottom: var(--distance-4) !important }
  .pb425-mobile { padding-bottom: var(--distance-425) !important }
  .pb45-mobile { padding-bottom: var(--distance-45) !important }
  .pb475-mobile { padding-bottom: var(--distance-475) !important }
  .pb5-mobile { padding-bottom: var(--distance-5) !important }
  .pb525-mobile { padding-bottom: var(--distance-525) !important }
  .pb55-mobile { padding-bottom: var(--distance-55) !important }
  .pb575-mobile { padding-bottom: var(--distance-575) !important }
  .pb6-mobile { padding-bottom: var(--distance-6) !important }
  .pb625-mobile { padding-bottom: var(--distance-625) !important }
  .pb65-mobile { padding-bottom: var(--distance-65) !important }
  .pb675-mobile { padding-bottom: var(--distance-675) !important }
  .pb7-mobile { padding-bottom: var(--distance-7) !important }
  .pb725-mobile { padding-bottom: var(--distance-725) !important }
  .pb75-mobile { padding-bottom: var(--distance-75) !important }
  .pb775-mobile { padding-bottom: var(--distance-775) !important }
  .pb8-mobile { padding-bottom: var(--distance-8) !important }
  .pb825-mobile { padding-bottom: var(--distance-825) !important }
  .pb85-mobile { padding-bottom: var(--distance-85) !important }
  .pb875-mobile { padding-bottom: var(--distance-875) !important }
  .pb9-mobile { padding-bottom: var(--distance-9) !important }
  .pb925-mobile { padding-bottom: var(--distance-925) !important }
  .pb95-mobile { padding-bottom: var(--distance-95) !important }
  .pb975-mobile { padding-bottom: var(--distance-975) !important }
  .pb10-mobile { padding-bottom: var(--distance-10) !important }
  .pl0-mobile { padding-left: 0 !important }
  .pl025-mobile { padding-left: var(--distance-025) !important }
  .pl05-mobile { padding-left: var(--distance-05) !important }
  .pl075-mobile { padding-left: var(--distance-075) !important }
  .pl1-mobile { padding-left: var(--distance-1) !important }
  .pl125-mobile { padding-left: var(--distance-125) !important }
  .pl15-mobile { padding-left: var(--distance-15) !important }
  .pl175-mobile { padding-left: var(--distance-175) !important }
  .pl2-mobile { padding-left: var(--distance-2) !important }
  .pl225-mobile { padding-left: var(--distance-225) !important }
  .pl25-mobile { padding-left: var(--distance-25) !important }
  .pl275-mobile { padding-left: var(--distance-275) !important }
  .pl3-mobile { padding-left: var(--distance-3) !important }
  .pl325-mobile { padding-left: var(--distance-325) !important }
  .pl35-mobile { padding-left: var(--distance-35) !important }
  .pl375-mobile { padding-left: var(--distance-375) !important }
  .pl4-mobile { padding-left: var(--distance-4) !important }
  .pl425-mobile { padding-left: var(--distance-425) !important }
  .pl45-mobile { padding-left: var(--distance-45) !important }
  .pl475-mobile { padding-left: var(--distance-475) !important }
  .pl5-mobile { padding-left: var(--distance-5) !important }
  .pl525-mobile { padding-left: var(--distance-525) !important }
  .pl55-mobile { padding-left: var(--distance-55) !important }
  .pl575-mobile { padding-left: var(--distance-575) !important }
  .pl6-mobile { padding-left: var(--distance-6) !important }
  .pl625-mobile { padding-left: var(--distance-625) !important }
  .pl65-mobile { padding-left: var(--distance-65) !important }
  .pl675-mobile { padding-left: var(--distance-675) !important }
  .pl7-mobile { padding-left: var(--distance-7) !important }
  .pl725-mobile { padding-left: var(--distance-725) !important }
  .pl75-mobile { padding-left: var(--distance-75) !important }
  .pl775-mobile { padding-left: var(--distance-775) !important }
  .pl8-mobile { padding-left: var(--distance-8) !important }
  .pl825-mobile { padding-left: var(--distance-825) !important }
  .pl85-mobile { padding-left: var(--distance-85) !important }
  .pl875-mobile { padding-left: var(--distance-875) !important }
  .pl9-mobile { padding-left: var(--distance-9) !important }
  .pl925-mobile { padding-left: var(--distance-925) !important }
  .pl95-mobile { padding-left: var(--distance-95) !important }
  .pl975-mobile { padding-left: var(--distance-975) !important }
  .pl10-mobile { padding-left: var(--distance-10) !important }
}

/*  --- TITLES---  */
.title{
  font-size: var(--font-size-l);
  margin-top: var(--distance-1);
  margin-bottom: var(--distance-1);
}

.subtitle{
  margin-bottom: var(--distance-1);
  font-size: var(--font-size-m);
}

/*  --- COLUMNS ---  */
.column-1 {}
  .column-2 {
    display: block;
    width: 50%;
    float: left;
  }
  .column-7 {
    width: 75%;
    float: left;
  }

  .column-6 {
    width:16.666%;
    float: left;
    display: block;
  }
  .column-3 {
    display: block;
    width: 27.5%;
    margin-right: 8.75%;
    float: left;
  }
  .column-3:nth-of-type(3n) {
    margin-right: 0
  }
  .select-address-list .column-3:nth-of-type(3n) {
    margin-right: 8.75%;
  }
  .select-address-list .column-3:nth-of-type(2), .select-address-list .column-3:nth-of-type(3n +2) {
    margin-right: 0;
  }
  .column-4 {
    display: block;
    float: left;
    width: 20%;
    margin-right: 6.666%;
  }
  .column-4:nth-of-type(4n) {
    margin-right: 0;
  }
  .column-4:nth-of-type(4n) h6 {
    text-align: right;
  }

  @media screen and (max-width: 768px) {
    .columns-mobile {
      display:flex;
      flex-wrap: wrap;
    }
    .column-2-mobile {
      width: 50%;
      margin-right: 0;
      float: left;
      text-align: left !important;
    }
    .column-2-mobile:nth-of-type(2n) {
      margin-right: 0;
    }
    .column-4:nth-of-type(4n) h6 {
      text-align: left;
    }
  }

  /*  --- FOOTER ---  */
  footer * {
    color: var(--grey-color);
  }
  .footer-main{
    background-color: var(--footer-bg-color);   /*  from light-color by HR */
    padding-top: var(--distance-0);     /*  by HR; orig: 3 */
    padding-bottom: var(--distance-0);     /*  by HR; orig: 3 */
  }
  footer .logo {
    display: block;
    width: 150px;
    float: none;
    padding: 0;
  }
  .footer-link li {
    margin-bottom: var(--distance-05);
    color: var(--grey-color);
  }
  .footer-link li a {
    color: var(--grey-color);
    text-decoration: none;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
  .footer-link li a:hover, .footer-link li.active a {
    color: var(--main-color);
  }
  .footer-sub {
    background-color: var(--footer-bg-color);  /*  from whitegrey-color by HR */
    color: var(--brightgrey-color);
    padding-top: var(--distance-0);     /*  by HR; orig: 2 */
    padding-bottom: var(--distance-0);     /*  by HR; orig: 2 */
  }
  .footer-sub-left {
    float:left;
  }
  .footer-sub-right {
    width: 148px;
    margin-top: -5px !important;
    float:right;
  }
  .footer-sub-right a {
    max-width: 25px;
    max-height: 25px;
    width: 100%;
    display: block;
    float: right;
    margin-left: var(--distance-1);
  }
  .footer-sub-right a:last-of-type {
    margin-left: 0;
  }
  .footer-sub-right a svg {
    width:100% !important;
    max-width: 25px;
    height:100%;
    max-height: 25px;
  }
  .footer-sub-right a svg path, .footer-sub-right a svg polygon {
    fill: var(--brightgrey-color);
    -webkit-transition: fill 0.3s ease;
    -moz-transition: fill 0.3s ease;
    -ms-transition: fill 0.3s ease;
    -o-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
  }
  .footer-sub-right a:hover svg path, .footer-sub-right a:hover svg polygon {
    fill: var(--main-color);
  }
  .footer-sub-link li {
    float: left;
    margin-right: var(--distance-15);
  }
  .footer-sub-link li:last-of-type {
    margin-right: 0;
  }
  .footer-sub-link li a {
    font-size: var(--font-size-s);
    color: var(--brightgrey-color);
    text-decoration: none;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
  .footer-sub-link li.active a, .footer-sub-link li a:hover {
    color: var(--main-color);
  }
  @media screen and (min-width: 769px) {
    /* .footer-main .column-4:nth-of-type(4) h6 {
    text-align: right;
    } */
    .footer-main .column-4:nth-of-type(4) .footer-link li {
      text-align: right;
    }
    .footer-accordion .footer-accordion-trigger-icon {
      display: none;
    }
    .footer-spacer {
      display: none;
    }
  }
  @media screen and (max-width: 768px) {
    footer .logo svg {
      width: 110px;
    }
    .footer-main {
      padding-top: var(--distance-05);         /* by HR; orig:  padding-top: var(--distance-2); */
      padding-bottom: var(--distance-05);        /* by HR; orig:  padding-top: var(--distance-1); */
    }
    .footer-main .column-4 {
      width: 100%;
      float: none;
    }
    .footer-main #footer-fourth.column-4 .footer-accordion-content {
      border-bottom: none;
    }
    #footer-first .footer-link{
      display: none;
    }
    .footer-sub {
      padding-top: var(--distance-05);       /* by HR; orig:  padding-top: var(--distance-1); */
      padding-bottom: var(--distance-05);       /* by HR; orig:  padding-top: var(--distance-1); */
    }
    .footer-sub-link {
      float: none;
      width: 100%;
      margin-bottom: var(--distance-1);
    }
    .footer-sub-link li {
      margin-right: var(--distance-075);
    }
    .footer-sub-link li a {
      font-size: var(--font-size-xs);
    }
    .footer-sub-right {
      float: none;
      width: 100%;
      margin-top: var(--distance-05) !important;
    }
    .footer-sub-right a {
      float: left;
      margin-right: var(--distance-15);
      margin-left: 0;
    }
    .footer-sub-right a:last-of-type {
      margin-right: 0;
    }
    .footer-sub-right a svg {
      max-width: 20px;
    }

    /*  --- FOOTER MOBILE ACCORDION ---  */
    .footer-accordions {
      display: block;
      clear: both;
      float: none;
    }
    .footer-accordion {
      position: relative;
      display: block;
      clear: both;
      float: none;
      width: 100%;
      height: auto;
    }
    .footer-accordion h6 {
      position: relative;
      display: block;
      float: none;
      clear: both;
      cursor: pointer;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding-top: var(--distance-15);
      padding-bottom: var(--distance-15);
      font-size: var(--font-size-m);
    }
    .footer-accordion .footer-accordion-trigger-icon {
      position: absolute;
      display: block;
      content: '';
      pointer-events: none;
      width: 20px;
      height: 23px;
      top: 1.4rem;
      right: 0;
      -webkit-transition: transform 0.5s ease;
      -moz-transition: transform 0.5s ease;
      -ms-transition: transform 0.5s ease;
      -o-transition: transform 0.5s ease;
      transition: transform 0.5s ease;
    }
    .footer-accordion .footer-accordion-trigger-icon svg {
      width: 100%;
    }
    .footer-accordion.active .footer-accordion-trigger-icon {
      transform: rotate(180deg);
    }
    .footer-accordion-content {
      max-height: 0;
      overflow: hidden;
      border-bottom-width: var(--border-width);
      border-bottom-style: var(--border-style);
      border-bottom-color: var(--lightgrey-color);
      -webkit-transition: max-height 0.5s ease, padding 0.5s ease;
      -moz-transition: max-height 0.5s ease, padding 0.5s ease;
      -ms-transition: max-height 0.5s ease, padding 0.5s ease;
      -o-transition: max-height 0.5s ease, padding 0.5s ease;
      transition: max-height 0.5s ease, padding 0.5s ease;
    }
    .footer-accordion.active .footer-accordion-content {
      max-height: 2000px;
      padding-top: 0;
      padding-bottom: var(--distance-15);
    }
    .footer-spacer {
      display: block;
      clear: both;
      float: none;
      width: 100%;
      height: 52px;
    }
  }

  /*  --- SHIPPING/PAYMENT-BANNER ---  */
  /*
  .payment-shipping-area {
  background: var(--lightgrey-color);
}
.payment-banner {
position: relative;
float: left;
background-color: var(--brightgrey-color);
width: 50%;
padding-top: var(--distance-25);
padding-bottom: var(--distance-05);
color: var(--grey-color);
}
.payment-banner:before {
position: absolute;
content: '';
display: block;
width: 50vw;
height: 100%;
top: 0;

right: 100%;
background-color: var(--brightgrey-color);
}
.payment-banner .partner-logo, .shipping-banner .partner-logo {
position: relative;
height: 40px;
float: left;
margin-right: var(--distance-3);
margin-bottom: var(--distance-2);
}
.partner-logo.mastercard, .partner-logo.visa, .partner-logo.amex { width: 52px; }
.partner-logo.paypal { width: 34px; }
.partner-logo.apple-pay { width: 72px; }
.partner-logo.apple-pay svg { height: 30px !important; }
.partner-logo.amazon-pay { width: 63px; }
.partner-logo.sepa { width: 98px; }
.partner-logo.sofort { width: 94px; }
.partner-logo.sofort svg { height: 30px !important; }
.partner-logo.rechnung { width: 52px; }
.partner-logo.vorkasse { width: 52px; }
.partner-logo.dhl { width: 140px; }
.partner-logo.dhl svg { height: 21px !important; }
.partner-logo.hermes { width: 125px; }
.partner-logo.gls { width: 100px; }
.partner-logo.ups { width: 39px; }
.partner-logo.fedex { width: 84px; }
.partner-logo.fedex svg { height: 25px !important; }
.payment-banner .partner-logo svg, .shipping-banner .partner-logo svg {
position: absolute;
width: auto;
height: 100%;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.payment-banner svg path, .payment-banner svg polygon {
fill: var(--grey-color);
}
.shipping-banner svg path, .shipping-banner svg polygon {
fill: var(--brightgrey-color);
}
.shipping-banner {
position: relative;
float: right;
background-color: var(--lightgrey-color);
width: 50%;
padding-top: var(--distance-25);
padding-bottom: var(--distance-05);
height:100%;
color: var(--brightgrey-color);
}
.shipping-banner:before {
position: absolute;
content: '';
display: block;
height: 100%;
width: 50vw;
left: 100%;
background-color: var(--lightgrey-color);
top:0;
}
.shipping-banner h4, .shipping-banner a, .shipping-banner .partner-logo {
float: right;
}
.shipping-banner .partner-logo {
margin-right: 0;
margin-left: var(--distance-3);
}
.shipping-banner .partner-logo:first-of-type {
clear: right;
}
.shipping-banner .partner-logo svg {
left: initial;
right: 0;
}
@media screen and (max-width: 1028px) {
.payment-banner, .shipping-banner {
width: 100%;
}
.payment-banner::before, .shipping-banner::before {
width: 200vw;
right: initial;
left: -50vw;
z-index: 0;
}
.payment-banner h4, .shipping-banner h4 {
position: relative;
z-index: 2;
}
.shipping-banner h4, .shipping-banner a, .shipping-banner .partner-logo {
float: left;
}
.shipping-banner .partner-logo:first-of-type {
clear: left;
}
.shipping-banner .partner-logo {
margin-right: var(--distance-3);
margin-left: 0;
}
}*/
.payment-banner .partner-logo, .shipping-banner .partner-logo {
  display: block;
  margin: 0px auto;
  float: unset;
  margin-bottom: var(--distance-1);
}
.shippingTable {
  width: 100%;
}
.shippingTable th, .shippingTable td {
  border: 1px solid;
  padding: var(--distance-1);
  text-align: center;
}
.payment-shipping-banner {
  display: block;
  clear: both;
  float: none;
  width: 100%;
  height: auto;
  padding-top: var(--distance-1);
  padding-bottom: var(--distance-1);
  background: var(--lightgrey-color);
}
.payment-shipping-icons svg {
  display: block;
  float: left;
  margin-top: var(--distance-1);
  margin-right: var(--distance-15);
  margin-bottom: var(--distance-1);
  font-size: 2rem;
}
.payment-shipping-icons svg:last-of-type {
  margin-right: 0;
}
.payment-shipping-icons svg path, .payment-shipping-icons svg polygon {
  fill: var(--brightgrey-color);
}
.payment-shipping-icons .payment-shipping-icon {
  width: 50px;
}
.payment-shipping-icons .mastercard, .payment-shipping-icons .visa, .payment-shipping-icons .amex, .payment-shipping-icons .paypal, .payment-shipping-icons .amazonpay, .payment-shipping-icons .applepay {
  margin-bottom: 12px;
}
.payment-shipping-icons .payment-shipping-icon.sepa {
  margin-top: 19px;
  margin-bottom: 8px;
  width: 65px;
}
.payment-shipping-icons .payment-shipping-icon.sofort {
  width: 65px;
  margin-top: 23px;
  margin-bottom: 10px;
}
.payment-shipping-icons .payment-shipping-icon.rechnung {
  width: 90px;
  margin-top: 22px;
  margin-bottom: 10px;
}
.payment-shipping-icons .payment-shipping-icon.vorkasse {
  width: 90px;
  margin-top: 22px;
  margin-bottom: 10px;
}
.payment-shipping-icons .payment-shipping-icon.dhl {
  width: 80px;
  margin-top: 25px;
  margin-bottom: 17px;
}
.payment-shipping-icons .payment-shipping-icon.hermes {
  width: 90px;
  margin-top: 24px;
}
.payment-shipping-icons .payment-shipping-icon.gls {
  width: 68px;
  margin-top: 14px;
}
@media screen and (min-width: 1790px) {
  .payment-shipping-icons svg {
    margin-right: 3.5rem;
  }
}
@media screen and (max-width: 1789px) and (min-width: 1583px) {
  .payment-shipping-icons svg {
    margin-right: 3%;
  }
}
@media screen and (max-width: 1582px) and (min-width: 1414px) {
  .payment-shipping-icons svg {
    margin-right: 2.5%;
  }
}
@media screen and (max-width: 1413px) and (min-width: 1295px) {
  .payment-shipping-icons svg {
    margin-right: 2%;
  }
}
@media screen and (max-width: 1294px) {
  .payment-shipping-icons svg {
    margin-right: var(--distance-5);
  }
  .payment-shipping-icons svg:nth-of-type(8) {
    margin-right: 0;
  }
  .payment-shipping-icons svg:nth-of-type(9) {
    clear: left;
  }
}
@media screen and (max-width: 768px) {
  .payment-shipping-icons .payment-shipping-icon.sofort {
    margin-bottom: 9px;
  }

}
@media screen and (max-width: 1080px) {
  .payment-shipping-icons svg {
    margin-right: var(--distance-3);
  }
}
@media screen and (max-width: 860px) {
  .payment-shipping-icons svg {
    margin-right: var(--distance-15);
  }
}
@media screen and (max-width: 700px) {
  .payment-shipping-icons svg:nth-of-type(5n) {
    margin-right: 0;
  }
  .payment-shipping-icons svg:nth-of-type(5n+1) {
    clear: left;
  }
  .payment-shipping-icons svg:nth-of-type(8) {
    margin-right: var(--distance-15);
  }
  .payment-shipping-icons svg:nth-of-type(9) {
    clear: none;
  }
}
@media screen and (max-width: 504px) {
  .payment-shipping-icons .payment-shipping-icon.sofort {
    clear: left;
  }
  .payment-shipping-icons svg:nth-of-type(5n) {
    margin-right: var(--distance-15);
  }
  .payment-shipping-icons svg:nth-of-type(5n+1) {
    clear: none;
  }
}

/*  --- MASTERPAGES INPRINT / ABOUT US / HELP ---  */
.content-with-nl {
  padding-top:
}

/*  --- NEWSLETTER/TOPSELLER-BANNER ---  */

#newsletter-banner-container {
  overflow-x: hidden;
}
.newsletter-area {
  position: relative;
  width: 100%;
  z-index: 0;
  background: var(--light-color);
  overflow: hidden;
}
.newsletter-area-background {
  position: absolute;
  right: 15%;
  bottom: 15%;
  color: var(--main-color);
  width: 250px;
  height: 250px;
  opacity: 0.2;
}
.newsletter-banner {
  position: relative;
  float: left;
  width: 50%;
  /*height: 400px;*/
  padding-top: var(--distance-5);
  padding-bottom: var(--distance-5);
  color: var(--black-color);
  z-index: 0;
  padding-right: var(--distance-3);
}
.newsletter-banner-background {
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
}
.newsletter-banner-background-inner {
  position: relative;
  width:100%;
  height: 100%;
  overflow: hidden;
}
.newsletter-form-container .input {
  display: block;
  float: left;
  margin-right: var(--distance-1);
  width: calc(100% - 200px);
}
.newsletter-banner-background-inner img {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:100%;
  height:auto;
  /*min-width:100%;
  min-height:100%;*/
  opacity:0.5;
}
.top-seller-banner {
  position:relative;
  float:right;
  width:50%;
  /*height: 400px;*/
  padding-top:var(--distance-5);
  padding-bottom:var(--distance-5);
  color:var(--black-color);
  z-index:0;
  padding-left: var(--distance-3);
}
.top-seller-banner h1{
  float:right;
}
.top-seller-banner-background {
  position: absolute;
  width: 50vw;
  height: 100%;
  top: 0;
  right: initial;
  left: 0;
  z-index: -1;
}
.top-seller-banner-background-inner {
  position:relative;
  width:100%;
  height: 100%;
  overflow:hidden;
}
.top-seller-banner-background-inner img {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:100%;
  height:auto;
  /*min-width:100%;
  min-height:100%;*/
  opacity:0.5;
}
@media screen and (max-width: 1420px) {
  .newsletter-banner{
    width:66%
  }
  .newsletter-banner-background-inner img, .top-seller-banner-background-inner img {
    width:auto;
  }
}
@media screen and (max-width: 768px) {
  .newsletter-area-background {
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
  }
  .newsletter-banner-background, .top-seller-banner-background {
    width: 100%;
  }
  .newsletter-banner {
    width: 100%;
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
    display: block;
    overflow: auto;
    padding-top: var(--distance-4);
    padding-bottom: var(--distance-4);
  }
  .top-seller-banner {
    width: 100%;
    padding-right: var(--distance-3);
    display: block;
    overflow: auto;
    height: 250px;
    padding-top: var(--distance-4);
    padding-bottom: var(--distance-4);
  }
  .top-seller-banner h5 {
    text-align: center!important;
  }
  .newsletter-banner-background-inner img, .top-seller-banner-background-inner img {
    width: 100%;
    height: auto;
  }
}
/*@media screen and (min-width: 769px) {
.newsletter-input {
width: 300px !important;
float: left !important;
}
}*/
@media screen and (max-width: 500px) {
  .newsletter-banner-background-inner img {
    width: initial;
    height: 110%;
  }
}


/*  --- BUTTON ---  */
.button {
  -webkit-appearance: none;
  position: relative;
  z-index: 1;
  display: inline-block;
  background: var(--main-color);
  color: white;
  font-weight: 700;
  width: auto;
  height: 40px;
  font-size: var(--font-size-s);
  line-height: 1.4;
  padding: 0.5rem 1.5rem;
  border-radius: var(--round-border-radius);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: color 0.3s ease, border 0.3s ease, background 0.3s ease;
  -moz-transition: color 0.3s ease, border 0.3s ease, background 0.3s ease;
  -ms-transition: color 0.3s ease, border 0.3s ease, background 0.3s ease;
  -o-transition: color 0.3s ease, border 0.3s ease, background 0.3s ease;
  transition: color 0.3s ease, border 0.3s ease, background 0.3s ease;
}
.button svg, button svg {
  margin-right: var(--distance-05);
}
.button.icon-centered {
  padding: 0.75rem .825rem !important;
}
.button.icon-centered svg, button.icon-centered svg {
  margin-right: 0;
}
.button.is-outlined {
  background: transparent;
  color: var(--black-color);
  border: 1px solid;
}
.button * {
  position: relative;
  z-index: 1;
}
.button:focus, button:focus {
  outline: none !important;
}
.button::after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: var(--sub-color);
  -webkit-transition: right 0.3s ease;
  -moz-transition: right 0.3s ease;
  -ms-transition: right 0.3s ease;
  -o-transition: right 0.3s ease;
  transition: right 0.3s ease;
}
.button:hover::after {
  right: 0;
}
.button:hover * {
  color: var(--white-color);
}
input.button:hover, a.button:hover {
  color: var(--white-color);
  border-color: var(--sub-color);
  background: var(--sub-color) !important;
}
input.button::after, a.button::after {
  display: none;
}
div.button:hover {
  color: var(--white-color) !important;;
}
button.no-hover:hover, .button.no-hover:hover {
  background: inherit !important;
  border: inherit !important;
  color: var(--main-color) !important;
}
button.small, .button.small, input.small, .input.small, select.small, .select.small {
  width: auto;
  height: 30px;
  float: left;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.4rem var(--distance-075) 0.4rem var(--distance-075);
  font-size: var(--font-size-xs);
}

.button.white-cl:hover, 
.button.light-cl:hover, 
.button.lightgrey-cl:hover, 
.button.brightgrey-cl:hover, 
.button.grey-cl:hover, 
.button.dullgrey-cl:hover, 
.button.darkgrey-cl:hover, 
.button.dark-cl:hover, 
.button.black-cl:hover { color: var(--white-color) !important; }

.button.transparent-bg.white-cl:hover, 
.button.transparent-bg.light-cl:hover, 
.button.transparent-bg.lightgrey-cl:hover, 
.button.transparent-bg.brightgrey-cl:hover, 
.button.transparent-bg.grey-cl:hover, 
.button.transparent-bg.dullgrey-cl:hover, 
.button.transparent-bg.darkgrey-cl:hover, 
.button.transparent-bg.dark-cl:hover, 
.button.transparent-bg.black-cl:hover { border-color: var(--sub-color) !important; }

/*  --- INPUT ---  */
.input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  float: none;
  width: 100%;
  min-height: 40px;
  margin-right: 0;
  margin-bottom: var(--distance-1);
  padding-top: var(--distance-05);
  padding-right: var(--distance-1);
  padding-bottom: .6rem;
  padding-left: var(--distance-1);
  background: var(--white-color);
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--lightgrey-color);
  border-radius: var(--round-border-radius);
  outline: none !important;
  -webkit-transition: border 0.3s ease;
  -moz-transition: border 0.3s ease;
  -ms-transition: border 0.3s ease;
  -o-transition: border 0.3s ease;
  transition: border 0.3s ease;
  text-align: left;
}
.input:focus {
  border-color: var(--main-color);
}
.input::placeholder {
  color: var(--brightgrey-color);
}
.input-column-2 {
  width: 49%;
  margin-right: 1%;
  display: block;
  float: left;
}
.input-column-2:nth-of-type(2n) {
  margin-right: var(--distance-0);
  margin-left: 1%;
}
.input.disabled {
  background: var(--lightgrey-color) !important;
  border-color: var(--lightgrey-color) !important;
  color: var(--darkgrey-color) !important;
}
.input.disabled:focus {
  background: var(--lightgrey-color) !important;
  border-color: var(--lightgrey-color) !important;
  color: var(--darkgrey-color) !important;
}
@media screen and (max-width: 768px) {
  .input-column-2 {
    width: 100%;
    margin-right: 0;
  }
  .input-column-2:nth-of-type(2n) {
    margin-left: 0;
    width: 100%;
  }
}

/*  --- CHECKBOX ---  */
.checkbox-complete {
  display: block;
  position: relative;
  float: left;
  width: auto;
}
input[type="checkbox"] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  left: 0;
  top: 0;
}
input[type="checkbox"] + label {
  position: relative;
  display: block;
  height: 30px;
  padding-top: var(--distance-05);
  padding-bottom: var(--distance-05);
  font-size: var(--font-size-xs);
  color: var(--brightgrey-color);
  line-height: 1.2;
  pointer-events: none;
  cursor: auto;
  transition: color 0.3s ease;
  text-align: left;
}
input[type="checkbox"]:hover + label, input[type="checkbox"]:checked + label {
  color: var(--main-color);
}
input[type="checkbox"] + label::before {
  width: 16px;
  height: 16px;
  border-radius: 0;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--grey-color);
  border-radius: var(--border-radius);
  background-color: transparent;
  display: block;
  content: '';
  float: left;
  margin-top: -2px;
  margin-right: .5rem;
  cursor: pointer;
  pointer-events: none;
  -webkit-transition: background 0.3s ease, border-color 0.3s ease;
  -moz-transition: background 0.3s ease, border-color 0.3s ease;
  -ms-transition: background 0.3s ease, border-color 0.3s ease;
  -o-transition: background 0.3s ease, border-color 0.3s ease;
  transition: background 0.3s ease, border-color 0.3s ease;
}
input[type="checkbox"]:checked + label::before {
  background-color: var(--main-color);
  border-color: var(--main-color);
}
input[type="checkbox"]:checked + label::after {
  display: block;
  content: '';
  position: absolute;
  top: 8px;
  left: 6px;
  width: 4px;
  height: 8px;
  border-radius: 0;
  border-right-width: 2px;
  border-right-style: var(--border-style);
  border-right-color: var(--white-color);
  border-bottom-width: 2px;
  border-bottom-style: var(--border-style);
  border-bottom-color: var(--white-color);
  cursor: pointer;
  pointer-events: none;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
input[type="checkbox"] + label a, input[type="checkbox"] + span a {
  pointer-events: visible;
  color: var(--main-color);
}
input[type="checkbox"].hidden {
  display: block !important;
  viibility: hidden !important;
}
input[type="checkbox"].hidden + label {
  display: none !important;
  visibility: hidden !important;
}


/*  --- SELECT ---  */
select, .select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  float: none;
  width: auto;
  height: 40px;
  margin-right: 0;
  margin-bottom: var(--distance-1);
  padding-top: var(--distance-05);
  padding-right: var(--distance-25);
  padding-bottom: .6rem;
  padding-left: var(--distance-1);
  background-image: var(--select-arrow-black);
  background-size: 13px 13px;
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-color: var(--white-color);
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--lightgrey-color);
  border-radius: var(--round-border-radius);
  outline: none !important;
  color: var(--brightgrey-color);
  text-align: left;
  line-height: var(--line-height-s);
  -webkit-transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
  -moz-transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
  -ms-transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
  -o-transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
  transition: color 0.3s ease, background-color 0.3s ease, border 0.3s ease;
  cursor: pointer;
}
select.was-selected, .select.was-selected {
  background-image: var(--select-arrow-white) !important;
  background-size: 13px 13px !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-color: var(--main-color) !important;
  color: var(--white-color) !important;
  border-color: var(--main-color) !important;
}
select:focus, select:hover {
  border-width: var(--border-width) !important;
  border-style: var(--border-style) !important;
  border-color: var(--main-color) !important;
  color: var(--main-color);
}
select option {
  background: var(--light-color);
  color: var(--main-color);
}
select:focus::-ms-value, .select:focus::-ms-value {
  background-color: var(--white-color);
}

/*  --- TEXTAREA ---  */
textarea, .textarea {
  display: block;
  float: none;
  width: 100%;
  margin-right: 0;
  margin-bottom: var(--distance-1);
  padding-top: var(--distance-05);
  padding-right: var(--distance-1);
  padding-bottom: .6rem;
  padding-left: var(--distance-1);
  background: var(--white-color);
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--lightgrey-color);
  border-radius: 20px;
  outline: none !important;
  -webkit-transition: border 0.3s ease;
  -moz-transition: border 0.3s ease;
  -ms-transition: border 0.3s ease;
  -o-transition: border 0.3s ease;
  transition: border 0.3s ease;
  text-align: left;
}
textarea:focus, .textarea:focus {
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--main-color);
}
textarea::placeholder, .textarea::placeholder {
  color: var(--brightgrey-color);
}
textarea.auto-resize, .textarea.auto-resize {
  height: 40px;
  line-height: var(--line-height-s);
  resize: none;
}

/*  --- ARTICLE DETAIL SITE ---  */
.article-detail-slider {
  display: block;
  width: 50%;
  height: var(--slider-container-height);
  position: absolute;
  top: 0;
  left: 0;
}
.article-detail-image-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: var(--menu-spacer);
  transition: top 0.3s ease;
}
/*.article-detail-image-sticky.scrolled {
top: var(--menu-spacer-scrolled);
}*/
.scrolled .article-detail-image-sticky {
  top: var(--menu-spacer-scrolled);
}
.article-detail-slider-mobile {
  display: none;
}
.article-detail-slider-inner {
  position: relative;
  display: block;
  width: 100%;
  height: var(--slider-height);
}
.article-detail-labels {
  position: absolute;
  top: var(--distance-6);
  right: 0;
  z-index: 5555;
  margin-right: var(--distance-05);
}
.article-detail-label {
  display: block;
  float: right;
  clear: right;
  margin-bottom: var(--distance-05);
  padding: 12px 15px;
  background: var(--white-color);
  font-weight: 700;
}
.article-detail-label.sale {
  background: var(--sale-color);
  color: var(--white-color);
}
.article-detail-label.topseller {
  color: var(--sale-color);
}
.article-detail-label.new {
  color: var(--black-color);
}
.article-detail-slider-relative {
  position: relative;
  height: var(--slider-container-height);
}
.article-detail-slider-sticky {
  position: -webkit-sticky;
  position: sticky;
  display: block;
  width: 100%;
  height: var(--slider-height);
  top: var(--menu-spacer);
  transition: top 0.3s ease;
}
.scrolled .article-detail-slider-sticky {
  top: var(--menu-spacer-scrolled);
}
.article-detail-gallery {
  display: block;
  width: 100%;
  clear: both;
}
.article-detail-gallery .easyzoom {
  float: right;
}
/*.article-detail-gallery-sticky {
position: -webkit-sticky;
position: sticky;
display: block;
width: 100%;
height: var(--slider-height);
top: var(--menu-spacer);
transition: top 0.3s ease;
}
.scrolled .article-detail-gallery-sticky {
top: var(--menu-spacer-scrolled);
}*/
.article-detail-image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 289px);
  float: right;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.article-detail-thumb-container {
  float: right;
  clear: right;
  width: 100%;
}
.article-detail-thumb {
  display: block;
  float: right;
  width: auto;
  height: 120px;
  padding-top: var(--distance-1);
  padding-bottom: var(--distance-1);
  margin-left: var(--distance-1);
  cursor: pointer;
  opacity: 0.25;
  transition: opacity 0.3s ease;
}
.article-detail-thumb:nth-of-type(2) {
  clear: right;
}
.article-detail-thumb:hover, .article-detail-thumb.active {
  opacity: 1;
}
.product-price-cut::before {
  width: 135%;
  position: absolute;
  top: 50%;
  left: var(--distance-0);
  content: '';
  border-top: .1rem solid var(--sale-color);
  -webkit-transform: skewY(-10deg);
  transform: skewY(-8deg);
}
.product-price-cut {
  position: relative;
  display: inline-block;
  color: var(--sale-color);
  font-size: var(--font-size-s);
  margin-top: var(--distance-025);
}
.product-price-cut.detail {
  margin-top: var(--distance-075);
}
.product-price-cut-after-label {
  margin-right: var(--distance-05);
  color: var(--sale-color);
}
.product-price-cut-pre-label {
  margin-left: var(--distance-05);
  color: var(--sale-color);
}
.article-detail-content .product-price-cut-pre-label {
  float: right;
  margin-top: var(--distance-05);
  margin-left: 0;
}
.article-detail-content .product-price-cut.detail {
  float: right;
  margin-top: var(--distance-05);
}
.article-detail-content .product-price-cut-after-label {
  float: right;
  margin-top: var(--distance-05);
  margin-right: .2rem;
}
.article-detail-content .product-price-final-pre-label {
  float: right;
  clear: right;
  font-size: var(--font-size-xxl);
  color: var(--black-color);
  font-weight: 700;
  line-height: var(--line-height-s);
}
.article-detail-content .product-price-final {
  float: right;
  font-size: var(--font-size-xxl);
  color: var(--black-color);
  font-weight: 700;
  line-height: var(--line-height-s);
}
.article-detail-content .product-price-tax {
  clear: right;
}
.article-detail-variations {
  display: block;
  float: none;
  clear: both;
  width: 100%;
  margin-top: var(--distance-1);
  margin-bottom: var(--distance-0);
}
.article-detail-variations .product-availability-detail {
  float: right;
  clear: right;
}
.article-detail-content .product-availability-detail span {
  margin-top: 0;
}
.article-detail-variations .article-number {
  float: right;
  clear: right;
  margin-top: var(--distance-05);
  margin-bottom: 0;
}
@media screen and (max-width: 1450px) {
  .article-detail-variations .scale-price-list-trigger {
    clear: left;
  }
}
@media screen and (max-width: 1080px) {
  .article-detail-slider {
    top: 0;
  }
  .article-detail-image {
    float: none;
    margin: 0 auto;
    display: block;
  }
  .article-detail-content .product-price-cut-pre-label {
    margin-bottom: var(--distance-025);
  }
  .article-detail-variations .scale-price-list-trigger {
    clear: none;
  }
  .article-detail-gallery .easyzoom {
    width: 100%;
    float: none;
  }
  .article-detail-gallery .easyzoom .article-detail-image {
    margin: 0;
  }
}
@media screen and (max-width: 768px) {
  .article-detail-variations .product-availability-detail {
    float: left;
    clear: left;
    margin-left: 0;
  }
  .article-detail-variations .article-number {
    float: left;
    margin-top: .35rem;
    margin-left: var(--distance-075);
  }
  .product-dimension-label {
    clear: left;
  }
  .article-detail-variations .scale-price-list-trigger {
    clear: left;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
  .product-dimension-label {
    width: 40%;
  }
  .product-dimension {
    width: calc(60% + var(--distance-1));
    margin-right: 0 !important;
  }
}

.article-detail-slider-image {
  display: block;
  width: 100%;
  height: auto;
  clear: both;
}
.article-detail-slider-image img {
  display: none;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 174px);
  float: right;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.article-detail-slider-image img.active {
  display: block;
  opacity: 1;
  visibility: visible;
}
.article-detail-slider-thumbs {
  display: block;
  float: right;
  clear: right;
  width: 100%;
  max-width: 1280px;
  height: 120px;
  padding: 1rem 0 1rem 1rem;
}
.article-detail-slider-thumbs * {
  display: block;
  height: 100%;
  max-height: 100%;
}
.article-detail-slider-thumbs-images {
  display: block;
  float: right;
  width: auto;
  height: 100%;
  margin-left: 1rem;
}
.article-detail-slider-thumbs-images:last-of-type {
  margin-left: 0;
}
.article-detail-slider-thumbs-images img {
  display: block;
  cursor: pointer;
  width: auto;
  height: 100%;
  opacity: 0.25;
  transition: opacity 0.3s ease;
}
.article-detail-slider-thumbs-images:hover img {
  opacity: 0.75;
}
.article-detail-slider-thumbs-images.active img {
  opacity: 1;
}
.article-detail-content {
  display: block;
  float: right;
  width: 50%;
  height: auto;
  min-height: calc(100vh - 54px);
  padding: var(--distance-25) 0 var(--distance-2) var(--distance-4);
}
.delivery-content-article {
  width: calc(50% - .5rem);
  float: left;
  margin-right: var(--distance-1);
  margin-bottom: var(--distance-05);
  position: relative;
}
.delivery-content-article:nth-of-type(2n) {
  margin-right: var(--distance-0);
}
.delivery-content-article img {
  max-width: 100%
}
.delivery-content-article-label {
  background-color: var(--white-color);
  position: absolute;
  margin: var(--distance-05) var(--distance-0) var(--distance-0) var(--distance-05);
  padding: var(--distance-05);
}
/*.easyzoom {
  display: inline!important;
}*/
.manufacturer {
  display: inline-block;
  margin-bottom: var(--distance-0);
  font-size: var(--font-size-m);
  color: var(--grey-color);
}
.return-to {
  display: inline-block;
  height: auto;
  float: right;
  margin-top: 1rem;
  padding: 0.5rem 0.75rem !important;
  background: var(--lightgrey-color);
  border-radius: 20px;
  border-color: var(--lightgrey-color);
  font-size: var(--font-size-xs);
  color: var(--darkgrey-color);
  text-decoration: none;
}
.product-name {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  line-height: var(--line-height-s);
  margin-bottom: var(--distance-025);
}
.article-number {
  display: inline-block;
  float: left;
  color: var(--grey-color);
  margin-bottom: var(--distance-15);
}
.product-price {
  display: block;
  float: left;
  clear: left;
  width: 49.5%;
}
.product-dimension {
  float: left;
  display: block;
  margin-right: var(--distance-1);
  margin-left: var(--negative-distance-1);
}
.product-dimension-label {
  display: inline-block;
  float: left;
  height: 40px;
  padding-top: .85rem;
  padding-right: var(--distance-15);
  padding-bottom: .8rem;
  padding-left: var(--distance-1);
  background: var(--lightgrey-color);
  border-radius: var(--round-border-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--grey-color);
}
.product-price-discount {
  display: block;
  clear: both;
  font-size: var(--font-size-m);
  color: var(--sale-color);
  line-height: 1.5;
}
.product-price-final {
  font-size: var(--font-size-xl);
  color: var(--black-color);
  font-weight: 700;
}
.product-price-base-price {
  clear: right;
  text-align: right;
}
.article-listed .product-price-final {
  float: right;
}
.product-price-final.discount {
  color: var(--sale-color);
}
.product-price-normal {
  font-size: var(--font-size-s);
  color: var(--grey-color);
  text-decoration: line-through;
  margin-right: 5px;
}
.product-price-tax {
  display: block;
  font-size: var(--font-size-s);
  color: var(--grey-color);
  margin-top: var(--distance-05);
  clear: left;
}
.product-price-tax-nm {
  display: inline-block;
  font-size: var(--font-size-s);
  color: var(--grey-color);
}
/*.product-availability {
display: block;
float: right;
width: 49.5%;
margin-bottom: var(--distance-05);
}*/
.product-availability {
  display: inline-block;
  float: left;
  margin-left: var(--distance-1);
}
.product-availability span {
  display: block;
  font-size: var(--font-size-s);
  text-align: right;
  margin-bottom: var(--distance-1);
}
.product-availability-detail {
  display: block;
  float: left;
  margin-left: var(--distance-1);
}
.product-availability-detail span {
  display: block;
  padding: var(--distance-05);
  margin-top: var(--distance-075);
  font-size: var(--font-size-xs);
  line-height: 1;
}
.availability-available { color: var(--white-color); background-color: var(--available-color); }
.availability-low-stock { color: var(--white-color); background-color: var(--low-stock-color); }
.availability-not-in-stock { color: var(--white-color); background-color: var(--not-in-stock-color); }
.availability-on-request { color: var(--white-color); background-color: var(--on-request-color); }
.availability-available-detail { color: var(--white-color); background-color: var(--available-color); }
.availability-low-stock-detail { color: var(--white-color); background-color: var(--low-stock-color); }
.availability-not-in-stock-detail { color: var(--white-color); background-color: var(--not-in-stock-color); }
.availability-on-request-detail { color: var(--white-color); background-color: var(--on-request-color); }
.product-rating {
  display: block;
  float: right;
  clear: right;
  width: 49.5%;
  margin-top: var(--distance-15);
}
.product-rating-image {
  width: 20px;
  height: 20px;
}
.product-rating-image.product-rating-average {
  width: 35px;
  height: 35px;
}
#product-rating-result {
  float: right;
}
#product-rating-result span {
  text-align: right;
  color: var(--grey-color);
  margin-bottom: 5px;
}
#rating-number {
  position: relative;
  float: right;
  margin-top: 0;
  margin-left: var(--distance-05);
}
#rating-number span:first-of-type {
  position: absolute;
  right: 0;
  top: -20px;
  color: var(--grey-color);
  font-weight: 400;
  font-size: var(--font-size-x);
}
#rating-number span {
  float: right;
  clear: right;
  font-size: var(--font-size-m);
  font-weight: 700;
}
#rating-result-summary {
  float: left;
}
#rating-number-summary {
  float: left;
  margin-left: var(--distance-05);
}
#rating-number-summary span:first-of-type {
  display: inline-block;
  float: right;
  margin-left: 5px;
  margin-top: 11px;
  font-size: var(--font-size-s);
  color: var(--grey-color);
  line-height: 1.5;
}
#rating-number-summary span {
  display: inline-block;
  margin-top: 2px;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--black-color);
}
.rating-number-summary-max {
  display: inline-block;
  margin-left: 5px;
  margin-top: 11px;
}
#user-rating .button {
  float: left;
}
#user-rating-stars {
  clear: left;
  float: none;
  margin-top: var(--distance-2);
  font-size: var(--font-size-m);
  font-weight: 700;
  color: var(--black-color);
}
#user-rating-stars .product-rating-image {
  cursor: pointer;
}
.user-rating-text {
  resize: none;
  width: 100% !important;
  height: 40px;
  margin-top: var(--distance-1);
  line-height: 1.2;
}
.user-rating-list {
  margin-top: var(--distance-2);
}
.user-rating-listed {
  padding-top: .5rem;
  padding-bottom: .5rem;
  border-top: 1px solid #ececec;
}
.product-order-buttons {
  display: block;
  margin-top: var(--distance-15);
  margin-bottom: var(--distance-15);
}
.product-in-cart {
  display: block;
  float: left;
  width: 49.5%;
  height: auto;
}
.product-in-cart input {
  display: block;
  float: left;
  width: 60px;
  height: 40px;
  padding: 8px 10px 11px 10px;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--black-color);
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  font-family: var(--sub-font);
  font-size: var(--font-size-s);
  text-align: center;
}
.product-in-cart button {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
/*.product-in-cart button {
margin-left: var(--distance-05);
padding: 12px 2rem;
background: var(--main-color);
color: var(--white-color);
text-transform: uppercase;
}*/
.product-wish {
  display: block;
  float: right;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--main-color);
}

@media screen and (min-width: 1488px) {
  /*.article-detail-slider {
  max-height: 640px;
  }*/
}
@media screen and (max-width: 1450px) {
  .product-in-cart {
    width: 100%;
  }
  .product-wish {
    float: left;
    clear: left;
    margin-top: var(--distance-0);
  }
}
@media screen and (max-width: 1080px) {
  .article-detail-slider-image img {
    width: 100%;
  }
  .article-detail-slider {
    display: none;
  }
  .article-detail-slider-mobile {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    margin-top: var(--distance-15);
  }
  .article-detail-slider-mobile .article-detail-thumb {
    padding-top: 0;
  }
  .article-detail-slider-inner {
    height: auto;
  }
  .article-detail-slider-thumbs {
    padding-left: 0;
    height: auto;
    margin-bottom: var(--distance-3);
  }
  .article-detail-slider-thumbs-images {
    float: left;
    width: 100px;
    margin-left: 0;
    margin-right: var(--distance-2);
    height: auto;
  }
  .article-detail-slider-thumbs-images:nth-of-type(3n) {
    margin-right: 0;
  }
  .article-detail-slider-thumbs-images img {
    width: 100%;
    height: auto;
  }
  .article-detail-content {
    width: 100%;
    padding: 0;
  }
  .product-in-cart {
    width: 49.5%;
  }
  .product-wish {
    float: right;
    clear: right;
    margin-top: 0;
  }
}
@media screen and (max-width: 768px) {
  .article-detail-slider-thumbs-images {
    float: left;
    width: 30%;
    margin-left: 0;
    margin-right: 5%;
    height: auto;
  }
  .article-detail-slider-thumbs-images:nth-of-type(3n) {
    margin-right: 0;
  }
  .manufacturer {
    margin-bottom: var(--distance-05);
  }
  /*.product-name {
  margin-bottom: var(--distance-1);
  }*/
  .product-price-tax {
    margin-left: 0;
  }
  .product-in-cart {
    width: 100%;
    clear: both;
    float: none;
  }
  .product-in-cart input {
    width: 50px;
  }
  .product-in-cart button {
    width: calc(100% - 50px);
    margin-left: 0;
    padding: 0.5rem 4rem 0.5rem 1.5rem;
  }
  .product-in-cart button svg {
    display: none;
  }
  .product-wish {
    clear: both;
    float: none;
    width: 100%;
    margin-top: var(--distance-05);
  }
  .article-detail-thumb {
    height: 70px;
  }
  .product-availability {
    margin-top: 3px;
  }
  .article-detail-content .product-availability {
    margin-top: 0;
  }
  .product-availability span, .product-price-tax {
    font-size: var(--font-size-xs);
  }
  .article-detail-content .product-availability span, .article-detail-content .product-price-tax {
    font-size: var(--font-size-s);
  }
  .article-detail-labels {
    top: var(--distance-1);
  }
  .article-detail-label {
    padding: 10px 12px;
    font-size: var(--font-size-xs);
  }
  .product-order-buttons {
    margin-top: var(--distance-1);
    margin-bottom: var(--distance-05);
  }
  #user-rating .button {
    width: 100%;
  }
  #rating-number-summary span {
    margin-top: 8px;
  }
  .return-to {
    margin-top: var(--distance-1);
  }
}

/* --- LAST WATCHED ARTICLE --- */
.last-watched {
  display: block;
  float: left;
  width: 150px;
  height: auto;
  margin-right: var(--distance-15);
}
.last-watched-image {
  display: block;
  float: none;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  margin: 0 auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.last-watched:hover .last-watched-image {
  opacity: 1;
}

/* --- SCALE PRICE TABLE ---*/
.scale-price-list-trigger {
  position: relative;
  display: block;
  width: auto;
  float: left;
}
.scale-price-list-trigger span {
  line-height: var(--line-height-s);
}
.scale-price-list {
  position: absolute;
  top: 38px;
  left: 50%;
  z-index: 3;
  display: none;
  width: 225px;
  min-width: 100%;
  background: var(--white-color);
  border-radius: 10px;
  transform: translateX(-50%);
  cursor: auto;
}
.scale-price-list.shipping {
  position: relative !important;
  top: initial !important;
  left: initial !important:
  z-index: initial !important;
  display: block !important;
}

.select-container form select {
  width:100%;
}
.scale-price-list.shipping div div .scale-price-list-head:last-of-type {
  font-weight:400;
}
.scale-price-list.shipping div div .scale-price-list-head {
  padding: var(--distance-1);
}
.scale-price-list.shipping div div .scale-price-list-value {
  padding: var(--distance-1);
}
.scale-price-list-trigger.open .scale-price-list {
  display: block;
}
.scale-price-list-head {
  display: block;
  float: left;
  padding: 5px 12px;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--lightgrey-color);
  color: var(--darkgrey-color);
  font-weight:700;
  /*font-size: var(--font-size-m);*/
}
.scale-price-list-head:first-of-type {
  width: 40%;
  border-right:none;
  border-top-left-radius:10px;
}
.scale-price-list-head:last-of-type {
  width: 60%;
  border-top-right-radius:10px;
}
.scale-price-list-value {
  display: block;
  float: left;
  width: 60%;
  padding: 5px 12px;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--lightgrey-color);
  color: var(--grey-color);
  border-top:none;
}
.scale-price-list-value:first-of-type {
  border-right:none;
  width: 40%;
}
.scale-price-list div div:last-of-type .scale-price-list-value:first-of-type {
  border-bottom-left-radius:10px;
}
.scale-price-list div div:last-of-type .scale-price-list-value:last-of-type {
  border-bottom-right-radius:10px;
}
@media and screen(max-width:1080px) {
  .scale-price-list {
    margin-top:var(--distance-125);
  }
}

/*  --- PRODUCT ACCORDION ---  */
.product-accordions {
  display: block;
  clear: both;
  float: none;
  margin-top: var(--distance-1);
  margin-bottom: var(--distance-2);
}
.product-accordion {
  position: relative;
  display: block;
  clear: both;
  float: none;
  width: 100%;
  height: auto;
}
.product-accordion h2 {
  position: relative;
  display: block;
  float: none;
  clear: both;
  cursor: pointer;
  padding-top: var(--distance-15);
  padding-bottom: var(--distance-15);
  font-size: var(--font-size-m);
}
.product-accordion .poduct-accordion-trigger-icon {
  position: absolute;
  display: block;
  content: '';
  pointer-events: none;
  width: 20px;
  height: 23px;
  top: 1.4rem;
  right: 0;
  -webkit-transition: transform 0.5s ease;
  -moz-transition: transform 0.5s ease;
  -ms-transition: transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
}
.product-accordion .poduct-accordion-trigger-icon svg {
  width: 100%;
}
.product-accordion.active .poduct-accordion-trigger-icon {
  transform: rotate(180deg);
}
.product-accordion-content {
  max-height: 0;
  overflow: hidden;
  border-bottom-width: var(--border-width);
  border-bottom-style: var(--border-style);
  border-bottom-color: var(--lightgrey-color);
  -webkit-transition: max-height 0.5s ease, padding 0.5s ease;
  -moz-transition: max-height 0.5s ease, padding 0.5s ease;
  -ms-transition: max-height 0.5s ease, padding 0.5s ease;
  -o-transition: max-height 0.5s ease, padding 0.5s ease;
  transition: max-height 0.5s ease, padding 0.5s ease;
}
.product-accordion.active .product-accordion-content {
  max-height: 2000px;
  padding-top: var(--distance-0);
  padding-bottom: var(--distance-15);
}
.product-accordion-rating .product-accordion-trigger div, .product-accordion-rating .product-accordion-trigger span {
  font-size: var(--font-size-m);
}
.product-accordion-rating .product-accordion-trigger #product-rating-amount, .product-accordion-rating .product-accordion-trigger .product-rating-label, .product-accordion-rating .product-accordion-trigger #product-rating-result-summary, .product-accordion-rating .product-accordion-trigger #product-rating-number-summary {
  display: block;
  float: left;
}
.product-accordion-rating .product-accordion-trigger #product-rating-amount {
  margin-right: var(--distance-05);
}
.product-accordion-rating .product-accordion-trigger #product-rating-result-summary {
  margin-right: var(--distance-05);
  margin-left: var(--distance-05);
}
.product-accordion-rating .product-accordion-trigger .product-rating-image.product-rating-average {
  width: 22px;
  height: 20px;
}
.product-accordion-rating .product-accordion-trigger #product-rating-number-summary span:first-of-type {
  display: inline-block;
  float: right;
  margin-top: 4px;
  margin-left: var(--distance-025);
  font-size: var(--font-size-s);
  color: var(--grey-color);
}
.product-accordion-rating .product-accordion-content {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .product-accordions {
    margin-top: var(--distance-05);
  }
  .product-accordion h2 {
    padding-top: var(--distance-1);
    padding-bottom: var(--distance-1);
  }
  .product-accordion .poduct-accordion-trigger-icon {
    top: var(--distance-1);
  }
  .product-accordion.active .product-accordion-content {
    padding-top: var(--distance-05);
    padding-bottom: var(--distance-15);
  }
  .product-accordion-rating .product-accordion-trigger #product-rating-result-summary {
    display: none;
  }
  .product-accordion-rating .product-accordion-trigger #product-rating-number-summary {
    margin-left: var(--distance-05);
  }
}

/*  --- DETAIL LIST ---  */
.detail-list-label {
  display: block;
  float: left;
  clear: left;
  width: 150px;
  padding: 5px 8px;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--lightgrey-color);
  border-right: none;
  color: var(--grey-color);
}
.detail-list:last-of-type .detail-list-label {
  border-bottom-width: var(--border-width);
  border-bottom-style: var(--border-style);
  border-bottom-color: var(--lightgrey-color);
}
.detail-list-value {
  display: block;
  float: left;
  width: calc(100% - 150px);
  color: var(--grey-color);
  padding: 5px 8px;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--lightgrey-color);
  color: var(--grey-color);
}
.detail-list:last-of-type .detail-list-value {
  border-bottom-width: var(--border-width);
  border-bottom-style: var(--border-style);
  border-bottom-color: var(--lightgrey-color);
}

/*  --- BREADCRUMBS OLD ---  */
.breadcrumb {
  color: var(--brightgrey-color);
  font-size: var(--font-size-s);
  margin-top: var(--distance-15);
  margin-bottom: var(--distance-125);
}
.breadcrumb a {
  color: var(--brightgrey-color);
  text-decoration: none;
  transition: color 0.3s ease;
}
.breadcrumb a {
  font-size: var(--font-size-s);
}
.breadcrumb a:first-of-type, .breadcrumb svg:first-of-type {
  display: none;
}
.breadcrumb a:last-of-type {
  font-weight: 700;
  text-decoration: underline;
}
.breadcrumb a:hover {
  color: var(--black-color);
}
.breadcrumb svg {
  height: 11px;
  margin-right: var(--distance-05);
  margin-left: var(--distance-05);
}
.article-detail-content .breadcrumb {
  width: calc(100% - 100px);
  float: left;
}
@media screen and (max-width:768px) {
  .article-detail-content {
    min-height: initial;
  }
  .breadcrumb {
    margin-top: var(--distance-125);
    margin-bottom: var(--distance-1);
  }
}

/*  --- BREADCRUMBS ---  */
.breadcrumbs {
  display: inline-block;
  width: auto;
  height: 32px;
  margin-top: var(--distance-1);
  margin-bottom: var(--distance-125);
  padding: 0.55rem 0.8rem !important;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--lightgrey-color);
  border-radius: var(--round-border-radius);
  font-size: var(--font-size-xxs);
  color: var(--brightgrey-color);
}
.breadcrumbs a {
  color: var(--brightgrey-color);
  text-decoration: none;
  transition: color 0.3s ease;
}
.breadcrumbs a {
  font-size: var(--font-size-xs);
}
.breadcrumbs a:first-of-type, .breadcrumbs svg:first-of-type {
  display: none;
}
.breadcrumbs a:last-of-type {
  color: var(--black-color);
  font-weight: 700;
  text-decoration: underline;
}
.breadcrumbs a:hover {
  color: var(--black-color);
}
.breadcrumbs svg {
  height: 8px;
  margin-right: var(--distance-05);
  margin-left: var(--distance-05);
}
.article-detail-content .breadcrumbs {
  max-width: calc(100% - 100px);
  float: left;
}
@media screen and (max-width:768px) {
  .breadcrumbs {
    margin-top: var(--distance-1);
    margin-bottom: var(--distance-1);
  }
}

/* --- CATALOG HEADER --- */
.shop-area-head {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--distance-3);
}
.shop-area-head-image {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
}
.shop-area-head::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgb(25,25,29);
  background: linear-gradient(0deg, rgba(25,25,29,0.7525385154061625) 0%, rgba(25,25,29,0) 100%);
}
.shop-area-head .wrap {
  position: absolute;
  bottom: var(--distance-3);
  left: 50%;
  z-index: 3;
  transform: translate(-50%, 0);
  height: auto;
}
.breadcrumb a {
  color: var(--white-color);
}
.breadcrumb a:hover {
  color: var(--main-color);
}
.shop-area-head {
  height: 345px;
}
@media screen and (max-width: 1680px) {
  .shop-area-head-image {
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    max-height: 101%;
  }
}
@media screen and (max-width: 768px) {
  .shop-area-head {
    height: 145px;
  }
  .shop-area-head-image {
    width: 180%;
    min-width: initial;
    height: auto;
    min-height: initial;
    max-height: initial;
  }
  .shop-area-head .wrap {
    bottom: var(--distance-15);
  }
}

/*  --- ARTICLE DETAIL LIST NEW ---  */
.article-detail-head-main {
  display: block;
  float: left;
  width: calc(100% - 175px);
}
.article-detail-head-sub {
  display: block;
  float: right;
  width: 175px;
}
.article-detail-head-sub .product-price {
  width: 100%;
}
.article-detail-head-main .article-number {
  margin-top: var(--distance-025);
  margin-bottom: 0;
}
@media screen and (max-width: 500px) {
  .article-detail-head-main {
    width: 100%;
  }
  .article-detail-head-sub {
    width: 100%
  }
}

/*  --- SHOP AREA ARTICLE LIST ---  */
.shop-list-area {
  float: right;
  width: calc(100% - 275px);
}
.articles-list {
  display: block;
  width: 100%;
  height: auto;
  float: none;
  clear: both;
}
.article-list-loading-circle {
  display: block;
  float: none;
  clear: both;
  margin: var(--distance-15) auto;
}
.article-listed {
  display: block;
  width: 27.5%;
  margin-right: 8.75%;
  float: left;
  margin-top: var(--distance-4);
}
.article-listed:nth-of-type(1), .article-listed:nth-of-type(2), .article-listed:nth-of-type(3) {
  margin-top: 0;
}
.article-listed:nth-of-type(3n) {
  margin-right: 0;
}
.article-listed:nth-of-type(3n+1) {
  clear: left;
}
.article-listed-image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.article-listed-image img {
  display: block;
  width: auto;
  /*min-width: 100%;*/
  max-width: 100%;
  height: auto;
  max-height: 370px;
  margin: 0 auto;
}
.article-listed .article-detail-labels {
  top: var(--distance-05);
  right: var(--distance-0);
}
.article-listed .article-detail-labels .article-detail-label {
  clear: none;
  margin-bottom: 0;
  margin-left: var(--distance-05);
  padding: 8px 12px;
  font-size: var(--font-size-xs);
}
.article-listed .article-detail-labels .article-detail-label:last-of-type {
  margin-left: var(--distance-0);
}
.article-listed-ecommerce {
  position: absolute;
  display: block;
  width: calc(100% - 1rem);
  right: var(--distance-05);
  bottom: -100%;
  transition: bottom 0.3s ease;
}
.article-listed:hover .article-listed-ecommerce {
  bottom: var(--distance-05);
}
.article-listed-ecommerce-availability {
  float: left;
  padding: var(--distance-05);
  margin-top: var(--distance-075);
  font-size: var(--font-size-xs);
  max-width: calc(100% - 102px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-listed-ecommerce-article-number {
  /*display: block;
  margin-bottom: var(--distance-975);
  background-color: var(--white-color);
  width: 25%;
  text-align: center;
  padding: var(--distance-05);
  font-size: var(--font-size-xs);*/
  position: absolute;
  background-color: var(--white-color);
  top: -100%;
  left: var(--distance-05);
  padding: var(--distance-05);
  font-size: var(--font-size-xs);
  transition: top 0.3s ease;
}
.article-listed:hover .article-listed-ecommerce-article-number {
  top: var(--distance-05);
}
.article-listed-ecommerce-variant-text {
  background-color: var(--white-color);
  padding: var(--distance-05);
  font-size: var(--font-size-xs);
  float: right;
}
.article-listed-ecommerce-buttons {
  display: block;
  float: right;
  padding: 10px 12px;
  background: var(--grey-color);
  font-size: var(--font-size-m);
  /* margin-bottom: var(--distance-05); */
  margin-left: var(--distance-05);
}
.article-listed-ecommerce-buttons svg {
  margin-right: var(--distance-0);
}
.article-listed-ecommerce-buttons svg path {
  fill: var(--black-color);
}
.article-listed-detail {
  display: block;
  padding-top: var(--distance-15);
  padding-bottom: var(--distance-1);
}
.article-listed-detail-name {
  float: left;
}
.article-listed-name {
  font-size: var(--font-size-m);
  font-weight: 700;
  color: var(--black-color);
  margin-bottom: var(--distance-05);
}
.swiper-slide .article-listed-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-top: -4px;
}
.swiper-slide .article-listed-detail {
  border-bottom: none;
}
.article-listed-manufacturer {
  display: inline-block;
  font-size: var(--font-size-s);
  color: var(--grey-color);
}
.article-listed-detail-price {
  float: right;
}
.article-listed-detail-price .product-price-final {
  display: inline-block;
  font-size: var(--font-size-m);
  font-weight: 700;
  margin-bottom: var(--distance-05);
}
.article-listed-detail-price .product-price-normal {
  text-align: right;
  margin-right: var(--distance-0);
}
@media screen and (min-width: 1680px) {
  .article-listed-image img {
    min-width: 100%;
  }
}
@media screen and (max-width: 1440px) {
  .article-listed {
    width: 42.5%;
    margin-right: 15%;
  }
  .article-listed:nth-of-type(3) {
    margin-top: var(--distance-4);
  }
  .article-listed:nth-of-type(3n) {
    margin-right: 15%;
  }
  .article-listed:nth-of-type(2n) {
    margin-right: var(--distance-0);
  }
  .article-listed:nth-of-type(3n+1) {
    clear: none;
  }
  .article-listed:nth-of-type(2n+1) {
    clear: left;
  }
  .article-listed-image img {
    min-width: 100%;
    max-width: 100%;
    max-height: unset;
  }
}
@media screen and (max-width: 1024px) {
  .shop-menu-area {
    display: none;
    width: 100%;
    float: none;
  }
  .shop-list-area {
    width: 100%;
    float: none;
  }
}
@media screen and (max-width: 768px) {
  .article-listed .article-listed-ecommerce {
    bottom: var(--distance-0);
  }
  .article-listed {
    width: 100%;
    margin-right: var(--distance-0);
  }
  .article-listed {
    margin-top: var(--distance-15);
  }
  .article-listed:first-of-type {
    margin-top: var(--distance-0);
  }
  .article-listed:nth-of-type(2n), .article-listed:nth-of-type(3n)  {
    margin-top: var(--distance-15);
  }
  .article-listed-detail {
    padding-bottom: var(--distance-15);
    border-bottom-width: var(--border-width);
    border-bottom-style: var(--border-style);
    border-bottom-color: var(--lightgrey-color);
  }
  .article-listed-image img {
    display: block;
    width: auto;
    min-width: 100%;
    max-width: 100%;
    height: auto;
    max-height: initial;
    margin: 0 auto;
  }
  .article-listed-ecommerce-article-number {
    top: var(--distance-05);
  }
  .article-listed .article-listed-ecommerce {
    bottom: var(--distance-05);
  }
  .article-listed .article-listed-ecommerce-article-number {
    top: var(--distance-05);
  }
}

/*  --- NO ARTICLE FOUND ---  */
.not-found {
  font-size: var(--font-size-xl);
  font-weight: 700;
  text-align: center;
}
.not-found .icon {
  display: block;
  width: 200px;
  margin: 4rem auto 2rem auto;
  font-size: 200px;
}

/*  --- FILTER ---  */
.shop-filter-area {
  padding-bottom: var(--distance-05);
  margin-bottom: var(--distance-1);
  border-bottom-width: var(--border-width);
  border-bottom-style: var(--border-style);
  border-bottom-color: var(--lightgrey-color);
}
.shop-filter-area select {
  /*-webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  position: relative;
  padding: 0.5rem 1.75rem 0.5rem .75rem;
  background-image: var(--select-arrow-white);
  background-size: 13px 13px;
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-color: var(--black-color);
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--black-color);
  font-size: var(--font-size-xs);
  color: var(--white-color);
  cursor: pointer;*/
  width: auto;
  height: 30px;
  float: left;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.4rem 2.5rem 0.4rem .75rem;
  font-size: var(--font-size-xs);
}
.shop-filter-area select:focus {
  border-width: var(--border-width) !important;
  border-style: var(--border-style) !important;
  border-color: var(--main-color) !important;
}
.shop-filter-area select option {
  background: var(--light-color);
  color: var(--black-color);
}
.filter-dropdown select {
  margin-top: var(--distance-05);
}
.filter-dropdown-trigger {
  position: relative;
  padding: 0.5rem 0.75rem 0.5rem .75rem;
  font-size: var(--font-size-xs);
  color: var(--black-color);
  cursor: pointer;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: transparent;
}
.filter-dropdown-trigger svg {
  transition: transform 0.3s ease;
}
.filter-dropdown-trigger.active svg {
  transform: rotate(180deg);
}
.filter-dropdown-trigger:focus {
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: transparent;
}
.filter-reset, .filter-reset:focus {
  position: relative;
  padding: 0.5rem 0.75rem 0.5rem .75rem;
  background: transparent;
  font-size: var(--font-size-xs);
  color: var(--grey-color);
  cursor: pointer;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: transparent;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.filter-reset:hover {
  color: var(--black-color);
}
.filter-reset {
  display: none;
}
.filter-reset.filters-been-set {
  display: inline-block;
}
.filter-dropdown {
  max-height: 0px;
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-top-width: var(--border-width);
  border-top-style: var(--border-style);
  border-top-color: transparent;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, border 0.3s ease;
}
.filter-dropdown.active {
  max-height: 400px;
  padding-top: 0;
  margin-top: var(--distance-05);
  padding-top: var(--distance-1);
  padding-bottom: var(--distance-1);
  border-top-color: var(--lightgrey-color);
  opacity: 1;
  visibility: visible;
  overflow: show;
}
.filter {
  display: block;
  float: left;
  margin-top: var(--distance-15);
  margin-right: var(--distance-15);
}
.filter-dropdown-close {
  display: block;
  float: none;
  clear: both;
  margin-top: var(--distance-1);
  margin-bottom: var(--distance-05);
  width:100%;
  font-size: var(--font-size-xs);
  color: var(--black-color);
  text-align:center;
}
.filter-dropdown .checkbox-filter-complete {
  display: block;
  position: relative;
  float: left;
  width: auto;
  margin-top: var(--distance-05);
  margin-right: var(--distance-15);
}
.filter-dropdown input[type="checkbox"] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.filter-dropdown input[type="checkbox"] + span {
  position: relative;
  display: block;
  height: 30px;
  float: left;
  padding-top: var(--distance-05);
  padding-bottom: var(--distance-05);
  font-size: var(--font-size-xs);
  line-height: 1.2;
  pointer-events: none;
  cursor: auto;
}
.filter-dropdown input[type="checkbox"] + span::before {
  width: 16px;
  height: 16px;
  border-radius: 0;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--grey-color);
  border-radius: var(--border-radius);
  background-color: #fff;
  display: block;
  content: '';
  float: left;
  margin-top: -2px;
  margin-right: .5rem;
  cursor: pointer;
  pointer-events: none;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -ms-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.filter-dropdown input[type="checkbox"]:checked + span::before {
  background-color: var(--main-color);
  border-color: var(--main-color);
}
.filter-dropdown input[type="checkbox"]:checked + span::after {
  display: block;
  content: '';
  position: absolute;
  top: 8px;
  left: 6px;
  width: 4px;
  height: 8px;
  border-radius: 0;
  border-right-width: 2px;
  border-right-style: var(--border-style);
  border-right-color: var(--white-color);
  border-bottom-width: 2px;
  border-bottom-style: var(--border-style);
  border-bottom-color: var(--white-color);
  cursor: pointer;
  pointer-events: none;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media screen and (max-width: 768px) {
  .filter-dropdown select {
    margin-right: var(--distance-075);
  }
  .shop-filter-area select {
    float: none;
    width: 100%;
  }
  .filter-dropdown-trigger {
    display: block;
    float: none;
    margin: 10px 0;
    width: 100%;
  }
  .filter-counter.filters-been-set {
    width: 50%;
    display: block;
    float: left;
    text-align: center;
  }
  .filter-reset.filters-been-set {
    width: 50%;
    float: right;
    text-align: center;
  }
}

/*  --- FILTER COUNTER ---  */
.filter-counter {
  display: none;
  position: relative;
  padding: 0.5rem 0.75rem 0.5rem .75rem;
  background: var(--main-color);
  font-size: var(--font-size-xs);
  color: var(--white-color);
  border-radius: 20px;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: transparent;
}
.filter-counter.filters-been-set {
  display: inline-block;
}
.filter-counter .counter {
  display: inline-block;
  font-size: inherit;
}
.filter-counter .filters-set {
  display: inline-block;
  font-size: inherit;
}

/* --- DYNAMIC FILTER --- */
.dynamic-filters {
  columns: 3;
  column-gap: 0.5rem;
}
/*.dynamic-filters .checkboxFilter.checkboxFilterSingle {
  padding: .4rem !important;
}*/
.dynamic-filter-group {
  break-inside: avoid-column;
  margin-bottom: 0.5rem;
  padding: var(--distance-1);
  background: var(--light-color);
  border-radius: var(--border-radius);
}
.dynamic-filter-group:last-of-type {
  margin-bottom: 0;
}
.dynamic-filter-group-select {
  min-height: 96px;
}
.dynamic-filter-group .checkbox-complete {
  float: none;
}
.dynamic-filters .select {
  width: 100%;
  height: 40px;
  margin-top: 0;
  font-size: var(--font-size-s);
  display: block;
  float: none;
}
.dynamic-filter-from-to {
  width: calc(50% - 20px) !important;
  float: left;
}
.dynamic-filter-divider {
  float: left;
  margin: 10px 15px;
}
.moreFilterDynamic {
  width: 100%;
}
.dynamic-filter-group input[type="checkbox"] + label {
  font-size: var(--font-size-s);
}
.dynamic-filter-group input[type="checkbox"] + label::before {
  margin-top: 0;
}
@media screen and (max-width: 1024px) {
  .dynamic-filters {
    columns: 2;
  }
}
@media screen and (max-width: 768px) {
  .dynamic-filters {
    columns: 1;
  }
  .dynamic-filter-group {
    max-height: initial !important;
  }
}

.is-active {
  display: block!important;
}

/*  --- PAGINATION ---  */
.pagination {
  display: block;
  float: right;
  clear: right;
  width: auto;
  margin-top: var(--distance-025);
}
.pagination-first-last, .pagination-prev-next {
  position: relative;
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  margin: 0 3px;
  padding: 0;
  border-radius: 50%;
  background: var(--lightgrey-color);
  font-size: 10px;
  color: var( --black-color);
  text-align: center;
  line-height: 1.8;
  text-decoration: none;
  -webkit-transition: color 0.3s ease, background 0.3s ease;
  -moz-transition: color 0.3s ease, background 0.3s ease;
  -ms-transition: color 0.3s ease, background 0.3s ease;
  -o-transition: color 0.3s ease, background 0.3s ease;
  transition: color 0.3s ease, background 0.3s ease;
}
.pagination-first-last:hover, .pagination-prev-next:hover {
  background: var(--main-color);
  color: var(--white-color);
}
.pagination-first-last svg, .pagination-prev-next svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pagination-first-last:first-of-type svg {
  transform: translate(-60%, -50%);
}
.pagination-first-last:last-of-type svg {
  transform: translate(-40%, -50%);
}
.pagination-prev-next:nth-of-type(2) svg {
  transform: translate(-70%, -50%);
}
.pagination-prev-next:nth-of-type(5) svg {
  transform: translate(-25%, -50%);
}
.pagination-pages {
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  margin: 0 3px;
  padding: 1px;
  border-radius: 50%;
  background: var(--lightgrey-color);
  font-size: var(--font-size-xs);
  color: var( --black-color);
  text-align: center;
  line-height: 1.5;
  text-decoration: none;
  -webkit-transition: color 0.3s ease, background 0.3s ease;
  -moz-transition: color 0.3s ease, background 0.3s ease;
  -ms-transition: color 0.3s ease, background 0.3s ease;
  -o-transition: color 0.3s ease, background 0.3s ease;
  transition: color 0.3s ease, background 0.3s ease;
}
.pagination-pages:hover {
  background: var(--main-color);
  color: var(--white-color);
}
.pagination-active-page {
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  margin: 0 3px;
  padding: 1px;
  border-radius: 50%;
  background: var(--main-color);
  font-size: var(--font-size-xs);
  color: var(--white-color);
  text-align: center;
  line-height: 1.5;
  text-decoration: none;
}
.pagination-dots {
  display: block;
  float: left;
  width: 20px;
  height: 20px;
  margin: 0 3px;
  padding: 1px;
  border-radius: 50%;
  background: transparent;
  font-size: var(--font-size-xs);
  color: var(--black-color);
  text-align: center;
  line-height: 1;
  text-decoration: none;
}

/*  --- INTRO SLIDER ---  */
.intro-slider {
  position: relative;
  width: 100%;
  height: 500px;
  padding: 0;
  background: #292930;
}
.intro-slider .swiper-slide {
  height: 500px;
}
.intro-slider .slider-controls {
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3333;
  transform: translateX(-50%);
  pointer-events: none    ;
}
.intro-slider .swiper-pagination {
  bottom: 3.25rem;
  right: 6rem;
  pointer-events: visible;
}
.intro-slider .swiper-pagination-bullet {
  border-radius: 0;
  width: 3rem;
  height: 2px;
  margin-right: 1rem;
  background: #fff;
  opacity: 1;
  -webkit-transition: opacity 0.2s ease, height 0.2s ease, background 0.2s ease;
  -moz-transition: opacity 0.2s ease, height 0.2s ease, background 0.2s ease;
  -ms-transition: opacity 0.2s ease, height 0.2s ease, background 0.2s ease;
  -o-transition: opacity 0.2s ease, height 0.2s ease, background 0.2s ease;
  transition: opacity 0.2s ease, height 0.2s ease, background 0.2s ease;
}
.intro-slider .swiper-pagination-bullet:last-of-type {
  margin-right: 0;
}
.intro-slider .swiper-pagination-bullet:hover {
  opacity: 1;
  background: var(--main-color) !important;
}
.intro-slider .swiper-pagination-bullet-active {
  height: 4px !important;
  background: #fff !important;
  background: var(--main-color) !important;
}
.intro-slider .swiper-button-prev, .intro-slider .swiper-button-next {
  display: block;
  width: 13px;
  height: 34px;
  top: initial;
  bottom: 1.5rem;
  opacity: 1;
  pointer-events: visible;
  transform: translateY(-50%);
  -webkit-transition: opacity 0.2s ease, background 0.2s ease;
  -moz-transition: opacity 0.2s ease, background 0.2s ease;
  -ms-transition: opacity 0.2s ease, background 0.2s ease;
  -o-transition: opacity 0.2s ease, background 0.2s ease;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.intro-slider .swiper-button-prev {
  left: initial;
  right: 3rem;
}
.intro-slider .swiper-button-prev:hover, .intro-slider .swiper-button-next:hover {
  opacity: 1;
}
.intro-slider .swiper-button-prev:before, .intro-slider .swiper-button-prev:after, .intro-slider .swiper-button-next:before, .intro-slider .swiper-button-next:after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  -ms-transition: background 0.2s ease;
  -o-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
.intro-slider .swiper-button-prev:hover:before, .intro-slider .swiper-button-prev:hover:after, .intro-slider .swiper-button-next:hover:before, .intro-slider .swiper-button-next:hover:after {
  background: var(--main-color);
}
.intro-slider .swiper-button-prev:before, .intro-slider .swiper-button-next:before {
  margin: 8px 0 0 -4px;
}
.intro-slider .swiper-button-prev:after, .intro-slider .swiper-button-next:after {
  margin: 14px 0 0 -4px;
}
.intro-slider .swiper-button-prev:before, .intro-slider .swiper-button-next:after {
  transform: rotate(-55deg);
}
.intro-slider .swiper-button-prev:after, .intro-slider .swiper-button-next:before {
  transform: rotate(55deg);
}
.intro-slider .swiper-slide .wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4444;
  transform: translate(-50%, -50%);
  pointer-events: visible;
  opacity: 0;
  margin-left: 50px;
  transition: opacity 0.5s ease 0s, margin-left 0.5s ease 0s;
}
.intro-slider .swiper-slide.swiper-slide-active .wrap {
  opacity: 1;
  margin-left: 0;
  transition: opacity 0.5s ease 0.2s, margin-left 0.5s ease 0.2s;
}
.intro-slider .swiper-slide .wrap div * {
  transform: translateX(50px);
  opacity: 0;
  transition: transform 0.5s ease 0.2s, opacity 0.5s ease 0.2s;
}
.intro-slider .swiper-slide .wrap div *:nth-child(2) { transition: transform 0.5s ease 0.3s, opacity 0.5s ease 0.3s; }
.intro-slider .swiper-slide .wrap div *:nth-child(3) { transition: transform 0.5s ease 0.4s, opacity 0.5s ease 0.4s; }
.intro-slider .swiper-slide .wrap div *:nth-child(4) { transition: transform 0.5s ease 0.3s, opacity 0.5s ease 0.5s; }
.intro-slider .swiper-slide.swiper-slide-active .wrap div * {
  transform: translateX(0px);
  opacity: 1;
}
.intro-slider .swiper-slide .swiper-slide-image {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.intro-slider .swiper-slide .swiper-slide-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  min-width: 101%;
  height: auto;
  min-height: 100%;
}
.intro-slider .swiper-slide .swiper-slide-main-image img, .intro-slider .swiper-slide .swiper-slide-sub1-image img, .intro-slider .swiper-slide .swiper-slide-sub2-image img {
  position: absolute;
  max-width: 300px;
  top: 50%;
  left: 25%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: left 0.5s ease 0.5s, opacity 0.5s ease 0.5s;
}
.intro-slider .swiper-slide .swiper-slide-main-image img {
  left: 25%;
  z-index: 333;
  transition: left 0.5s ease, opacity 0.5s ease;
}
.intro-slider .swiper-slide.swiper-slide-active .swiper-slide-main-image img {
  left: 25%;
  opacity: 1;
}
.intro-slider .swiper-slide .swiper-slide-sub1-image img {
  z-index: 222;
  transition: left 0.5s ease 0.5s, opacity 0.5s ease 0.5s;
}
.intro-slider .swiper-slide.swiper-slide-active .swiper-slide-sub1-image img {
  left: 20%;
  opacity: 1;
}
.intro-slider .swiper-slide .swiper-slide-sub2-image img {
  z-index: 111;
  transition: left 0.5s ease 0.5s, opacity 0.5s ease 0.5s;
}
.intro-slider .swiper-slide.swiper-slide-active .swiper-slide-sub2-image img {
  left: 30%;
  opacity: 1;
}
@media screen and (min-width: 1781px) {
  .intro-slider .swiper-slide .swiper-slide-main-image img, .intro-slider .swiper-slide .swiper-slide-sub1-image img, .intro-slider .swiper-slide .swiper-slide-sub2-image img {
    left: 30%;
  }
  .intro-slider .swiper-slide .swiper-slide-main-image img {
    left: 30%;
  }
  .intro-slider .swiper-slide.swiper-slide-active .swiper-slide-main-image img {
    left: 30%;
  }
  .intro-slider .swiper-slide.swiper-slide-active .swiper-slide-sub1-image img {
    left: 25%;
  }
  .intro-slider .swiper-slide.swiper-slide-active .swiper-slide-sub2-image img {
    left: 35%;
  }
}
@media screen and (min-width: 2551px) {
  .intro-slider .swiper-slide .swiper-slide-main-image img, .intro-slider .swiper-slide .swiper-slide-sub1-image img, .intro-slider .swiper-slide .swiper-slide-sub2-image img {
    left: 35%;
  }
  .intro-slider .swiper-slide .swiper-slide-main-image img {
    left: 35%;
  }
  .intro-slider .swiper-slide.swiper-slide-active .swiper-slide-main-image img {
    left: 35%;
  }
  .intro-slider .swiper-slide.swiper-slide-active .swiper-slide-sub1-image img {
    left: 30%;
  }
  .intro-slider .swiper-slide.swiper-slide-active .swiper-slide-sub2-image img {
    left: 40%;
  }
}
@media screen and (max-width: 1080px) {
  .intro-slider .swiper-slide .swiper-slide-image img {
    width: auto;
    min-width: 100%;
    max-width: unset;
    height: 550px;
    max-height: unset;
    min-height: unset;
    /*min-height: calc(100vh - 78px);*/
  }
  .intro-slider .swiper-slide .swiper-slide-main-image img, .intro-slider .swiper-slide .swiper-slide-sub1-image img, .intro-slider .swiper-slide .swiper-slide-sub2-image img {
    max-width: 200px;
  }
  .intro-slider .swiper-slide.swiper-slide-active .wrap .column.is-5.is-offset-7 {
    width: 50.66667%;
    margin-left: 49.33333%;
  }
}
@media screen and (max-width: 768px) {
  .intro-slider {
    max-height: calc(100vh - var(--menu-spacer));
  }
  .intro-slider .swiper-slide {
    max-height: calc(100vh - var(--menu-spacer));
  }
  .intro-slider .swiper-slide .swiper-slide-main-image img, .intro-slider .swiper-slide .swiper-slide-sub1-image img, .intro-slider .swiper-slide .swiper-slide-sub2-image img {
    max-width: 150px;
    top: 25%;
    left: 50%;
  }
  .intro-slider .swiper-slide .swiper-slide-main-image img {
    left: 50%;
  }
  .intro-slider .swiper-slide.swiper-slide-active .swiper-slide-main-image img {
    left: 50%;
  }
  .intro-slider .swiper-slide.swiper-slide-active .swiper-slide-sub1-image img {
    left: 40%;
  }
  .intro-slider .swiper-slide.swiper-slide-active .swiper-slide-sub2-image img {
    left: 60%;
  }
  .intro-slider .swiper-slide.swiper-slide-active .wrap .column.is-5.is-offset-7 {
    width: 100%;
    margin-top: 260px;
    margin-left: 0;
  }
  .intro-slider .swiper-pagination {
    bottom: 1rem;
  }
  .intro-slider .swiper-button-prev, .intro-slider .swiper-button-next {
    bottom: 0;
  }
  .intro-slider .swiper-slide.swiper-slide-active .wrap .column.is-5.is-offset-7 div:first-of-type {
    display: none;
  }
  .intro-slider .swiper-slide.swiper-slide-active .wrap .column.is-5.is-offset-7 div * {
    display: none;
  }
  .intro-slider .swiper-slide.swiper-slide-active .wrap .column.is-5.is-offset-7 div a {
    display: block;
  }
}
@media screen and (max-width: 500px) {
  .intro-slider .swiper-slide.swiper-slide-active .wrap .column.is-5.is-offset-7 {
    margin-top: 200px;
  }
}

/*  --- INTRO SLIDER OLD SAVE ---  */
/*.intro-slider {
position: relative;
width: 100%;
height: var(--fullheight-menu-spacer);
padding: 0;
background: #292930;
}
.intro-slider .swiper-slide {
height: var(--fullheight-menu-spacer);
}
.intro-slider .slider-controls {
height: 100%;
position: absolute;
top: 0;
left: 50%;
z-index: 3333;
transform: translateX(-50%);
pointer-events: none    ;
}
.intro-slider .swiper-pagination {
bottom: 3.25rem;
right: 6rem;
pointer-events: visible;
}
.intro-slider .swiper-pagination-bullet {
border-radius: 0;
width: 3rem;
height: 2px;
margin-right: 1rem;
background: #fff;
opacity: 1;
-webkit-transition: opacity 0.2s ease, height 0.2s ease;
-moz-transition: opacity 0.2s ease, height 0.2s ease;
-ms-transition: opacity 0.2s ease, height 0.2s ease;
-o-transition: opacity 0.2s ease, height 0.2s ease;
transition: opacity 0.2s ease, height 0.2s ease;
}
.intro-slider .swiper-pagination-bullet:last-of-type {
margin-right: 0;
}
.intro-slider .swiper-pagination-bullet:hover {
opacity: 1;
background: var(--main-color) !important;
}
.intro-slider .swiper-pagination-bullet-active {
height: 4px !important;
background: #fff !important;
background: var(--main-color) !important;
}
.intro-slider .swiper-button-prev, .intro-slider .swiper-button-next {
display: block;
width: 13px;
height: 34px;
top: initial;
bottom: 1.5rem;
opacity: 0.5;
pointer-events: visible;
transform: translateY(-50%);
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.intro-slider .swiper-button-prev {
left: initial;
right: 3rem;
}
.intro-slider .swiper-button-prev:hover, .intro-slider .swiper-button-next:hover {
opacity: 1;
}
.intro-slider .swiper-button-prev:before, .intro-slider .swiper-button-prev:after, .intro-slider .swiper-button-next:before, .intro-slider .swiper-button-next:after {
content: '';
display: block;
width: 20px;
height: 2px;
background: #fff;
}
.intro-slider .swiper-button-prev:before, .intro-slider .swiper-button-next:before {
margin: 8px 0 0 -4px;
}
.intro-slider .swiper-button-prev:after, .intro-slider .swiper-button-next:after {
margin: 14px 0 0 -4px;
}
.intro-slider .swiper-button-prev:before, .intro-slider .swiper-button-next:after {
transform: rotate(-55deg);
}
.intro-slider .swiper-button-prev:after, .intro-slider .swiper-button-next:before {
transform: rotate(55deg);
}
.intro-slider .swiper-slide .wrap {
position: absolute;
top: 50%;
left: 50%;
z-index: 4444;
transform: translate(-50%, -50%);
pointer-events: visible;
opacity: 0;
margin-left: 50px;
transition: opacity 0.5s ease 0s, margin-left 0.5s ease 0s;
}
.intro-slider .swiper-slide.swiper-slide-active .wrap {
opacity: 1;
margin-left: 0;
transition: opacity 0.5s ease 0.2s, margin-left 0.5s ease 0.2s;
}
.intro-slider .swiper-slide .wrap div * {
transform: translateX(50px);
opacity: 0;
transition: transform 0.5s ease 0.2s, opacity 0.5s ease 0.2s;
}
.intro-slider .swiper-slide .wrap div *:nth-child(2) { transition: transform 0.5s ease 0.3s, opacity 0.5s ease 0.3s; }
.intro-slider .swiper-slide .wrap div *:nth-child(3) { transition: transform 0.5s ease 0.4s, opacity 0.5s ease 0.4s; }
.intro-slider .swiper-slide .wrap div *:nth-child(4) { transition: transform 0.5s ease 0.3s, opacity 0.5s ease 0.5s; }
.intro-slider .swiper-slide.swiper-slide-active .wrap div * {
transform: translateX(0px);
opacity: 1;
}
.intro-slider .swiper-slide .swiper-slide-image img {
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: calc(100vh - 78px);
}
.intro-slider .swiper-slide .swiper-slide-main-image img, .intro-slider .swiper-slide .swiper-slide-sub1-image img, .intro-slider .swiper-slide .swiper-slide-sub2-image img {
position: absolute;
max-width: 500px;
top: 50%;
left: 30%;
opacity: 0;
transform: translate(-50%, -50%);
transition: left 0.5s ease 0.5s, opacity 0.5s ease 0.5s;
}
.intro-slider .swiper-slide .swiper-slide-main-image img {
left: 20%;
z-index: 333;
transition: left 0.5s ease, opacity 0.5s ease;
}
.intro-slider .swiper-slide.swiper-slide-active .swiper-slide-main-image img {
left: 30%;
opacity: 1;
}
.intro-slider .swiper-slide .swiper-slide-sub1-image img {
z-index: 222;
transition: left 0.5s ease 0.5s, opacity 0.5s ease 0.5s;
}
.intro-slider .swiper-slide.swiper-slide-active .swiper-slide-sub1-image img {
left: 25%;
opacity: 1;
}
.intro-slider .swiper-slide .swiper-slide-sub2-image img {
z-index: 111;
transition: left 0.5s ease 0.5s, opacity 0.5s ease 0.5s;
}
.intro-slider .swiper-slide.swiper-slide-active .swiper-slide-sub2-image img {
left: 35%;
opacity: 1;
}*/

.columns {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}
.column {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 0.75rem;
}

@media screen and (min-width: 769px), print {
  .column.is-5, .column.is-5-tablet {
    flex: none;
    width: 41.66667%;
  }
  .column.is-offset-7, .column.is-offset-7-tablet {
    margin-left: 58.33333%;
  }
}

.columns:last-child {
  margin-bottom: -0.75rem;
}

.columns.is-vcentered {
  align-items: center;
}

@media screen and (min-width: 769px), print {
  .columns:not(.is-desktop) {
    display: flex;
  }
}

/*  --- BRAND SLIDER ---  */
.brand-slider-wrap {
  padding-top: var(--distance-1);    /*  --- var(--distance-3); by HR ---  */
  padding-bottom: var(--distance-1);    /*  --- var(--distance-3); by HR ---  */
  background: var(--lightgrey-color);
}
.brand-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.brand-slider::before, .brand-slider::after {
  position: absolute;
  display: block;
  content: '';
  top: 0;
  left: 0;
  z-index: 100;
  width: 50px;
  height: 100%;
  background: -moz-linear-gradient(left,  rgba(236,236,236,1) 0%, rgba(236,236,236,0) 100%);
  background: -webkit-linear-gradient(left,  rgba(236,236,236,1) 0%,rgba(236,236,236,0) 100%);
  background: linear-gradient(to right,  rgba(236,236,236,1) 0%,rgba(236,236,236,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#00ececec',GradientType=1 );
  pointer-events: none;
}
.brand-slider::after {
  right: 0;
  left: initial;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.brand-slider .swiper-slide {
  /* Center slide text vertically */
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.brand-slide.no-image {
  display: none !important;
}
.nav-brands-link-container a {
  float: left;
  padding-top: var(--distance-225);
  padding-right: var(--distance-1);
  padding-bottom: var(--distance-225);
  padding-left: var(--distance-1);
  font-size: var(--font-size-s);
  font-weight: 700;
  color: var(--black-color);
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.nav-brands-link-container a:hover {
  color: var(--border-color);
}
.nav-brands-link-container {
  position: relative;
  display: block;
  float: left;
  width: auto;
  height: 88px;
}

.nav-brands-link-container.brands a{
  margin-left: 2px;
  padding-right: var(--distance-2);
}

.sale-container a {
  color: var(--white-color);
  padding-top: var(--distance-1);
  margin-top: var(--distance-125);
  padding-bottom: var(--distance-1);
  margin-bottom: var(--distance-125);
  background-color: var(--sale-color);
}
.sale-container:hover a {
  color: #e4e4e4;
}
.swiper-slide.brand-slide img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  margin: 0 auto;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.swiper-slide.brand-slide img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.swiper-slide.brand-slide a {
  display: block;
  height: 100%;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .brand-slider-wrap {
    padding-top: var(--distance-2);
    padding-bottom: var(--distance-2);
  }
}

/*  --- FEATURE ---  */
.feature-image-wrap {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 425px;
  overflow: hidden;
}
.feature-image-wrap img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* max-height: 425px; */
  margin: 0 auto;
}
.feature-image-wrap.feature-image-wrap-higher img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 525px;
  margin: -100px auto 0 auto;
}

/*  --- FEATURE CATEGORIES ---  */
.feature-catagories h1, .feature-catagories h2, .feature-catagories h3, .feature-catagories h4, .feature-catagories h5, .feature-catagories h6 {
  display: inline;
}
.feature-catagories .columns {
  margin: 0 auto;
}
.feature-catagories .column a {
  display: block;
  position: relative;
  overflow: hidden;
  outline: 1px solid #e9e9e9;
}
.feature-catagories .column a::after {
  display: block;
  content: '';
  width: 0;
  height: 100%;
  background: #19191d75;
  backdrop-filter: blur(10px);
  position: absolute;
  top: 0;
  left: -15%;
  z-index: 555;
  -webkit-transition: width 0.5s ease;
  -moz-transition: width 0.5s ease;
  -ms-transition: width 0.5s ease;
  -o-transition: width 0.5s ease;
  transition: width 0.5s ease;
  transform: skew(-20deg);
}
.feature-catagories .column a:hover::after {
  width: 130%;
}
.feature-catagories .column img {
  width: 100%;
  display: block;
  z-index: 0;
}
.feature-catagories .column h4 {
  position: absolute;
  top: 2.75rem;
  right: 3rem;
  z-index: 1111;
}
.feature-catagories .column:nth-of-type(2) h4 {
  right: initial;
  left: 3rem;
}
.feature-series .column a {
  outline: 1px solid #19191d;
}
.feature-series .column a::after {
  left: -30%;
}
.feature-series .column a:hover::after {
  width: 160%;
}
.feature-series .column h4 {
  color: #fff;
}
.feature-series .column a .feature-content {
  position: absolute;
  width: 100%;
  padding: 0 3rem;
  top: 50%;
  left: 50%;
  z-index: 2222;
  transform: translate(-50%, -50%);
  font-size: 1.25rem;
  line-height: 1.8;
  color: #fff;
  opacity: 0;
  margin-left: -1.5rem;
  transition: opacity 0.5s ease, margin 0.5s ease;
}
.feature-series .column a:hover .feature-content {
  opacity: 1;
  margin-left: 0;
  transition: opacity 0.5s ease 0.3s, margin 0.5s ease 0.3s;
}
.feature-series .column h4 {
  right: initial;
  left: 3rem;
}

/*  --- CATEGORIES FEATURE ---  */
.categories-feature {
  display: block;
  clear: both;
  float: none;
  width: 100%;
}
.categories-feature-half {
  position: relative;
  display: block;
  width: 50%;
  height: 425px;
  float: left;
}
.categories-feature-half.float-right {
  float: right;
}
.categories-feature-text-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 80%;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.categories-feature-image-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.categories-feature-image-wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: auto;
  max-width: 110%;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 1280px) {
  .categories-feature-image-wrap img {
    max-width: initial;
    max-height: 110%;
  }
}
@media screen and (max-width: 768px) {
  .categories-feature-half, .categories-feature-half.float-right {
    width: 100%;
    height: 250px;
    float: none !important;
  }
  .categories-feature-image-wrap img {
    max-width: 120%;
    max-height: initial;
  }
}

/*  --- SHOP-AREA-MENU ---  */
.shop-menu-area {
  float: left;
  width: 250px;
  height: auto;
  position: sticky;
  top: var(--sticky-top-gap);
}
/*
.shop-menu {
display: block;
float: none;
clear: both;
width: 100%;
height: auto;
}
.shop-menu li {
display: block;
float: none;
clear: both;
width: 100%;
margin-bottom: var(--distance-05);
}
.shop-menu li:last-of-type {
margin-bottom: 0;
}
.shop-menu li a {
font-size: var(--font-size-m);
font-weight: 400;
color: var(--grey-color);
text-decoration: none;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-ms-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.shop-menu li a:hover {
color: var(--black-color);
}
.shop-menu li.active a {
color: var(--black-color);
font-weight: 700;
}
.shop-menu li.active .shop-menu-sec li a {
font-weight: 400;
}
.shop-menu-sec {
margin-top: var(--distance-05);
margin-left: var(--distance-1);
}
.shop-menu-sec:last-of-type {
margin-bottom: var(--distance-15);
}
.shop-menu-sec li.active .shop-menu-sec {
margin-bottom: var(--distance-1);
}
.shop-menu-sec .shop-menu-sec:last-of-type {
margin-bottom: var(--distance-05);
}
.shop-menu-sec li a {
font-size: var(--font-size-s);
font-weight: 400;
color: var(--grey-color);
}
.shop-menu li.active .shop-menu-sec li a {
color: var(--grey-color);
}
.shop-menu li.active .shop-menu-sec li a:hover {
color: var(--black-color);
}
.shop-menu li.active .shop-menu-sec li.active a {
color: var(--black-color);
font-weight: 700;
}
.shop-menu li.active .shop-menu-sec li.active .shop-menu-sec li a {
color: var(--grey-color);
font-weight: 400;
}
.shop-menu li.active .shop-menu-sec li.active .shop-menu-sec li.active a {
color: var(--black-color);
font-weight: 700;
}
*/

/*  --- ACCOUNT MENU ---  */
.account-menu-area {
  float: left;
  clear: left;
  width: 250px;
  height: auto;
  position: -webkit-sticky;
  position: sticky;
  top: var(--sticky-top-gap);
}
.account-menu {
  display: block;
  float: none;
  clear: both;
  width: 100%;
  height: auto;
}
.account-menu li {
  display: block;
  float: none;
  clear: both;
  width: 100%;
  margin-bottom: var(--distance-1);
}
.account-menu li:last-of-type {
  margin-bottom: 0;
}
.account-menu li a {
  display: inline;
  position: relative;
  font-size: var(--font-size-m);
  font-weight: 400;
  color: var(--grey-color);
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.account-menu li a:hover {
  color: var(--main-color);
}
.account-menu li a::after {
  display: block;
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background: transparent;
  transition: width 0.3s ease, background 0.3s ease;
}
.account-menu li a:hover::after {
  width: 100%;
  background: var(--main-color);
}
.account-menu li.active a::after {
  width: 0;
  background: var(--main-color);
}
.account-menu li.active a:hover::after {
  width: 100%;
}
.account-menu li.active a {
  color: var(--main-color);
  font-weight: 700;
}
.account-menu li.active .shop-menu-sec li a {
  font-weight: 400;
}
.account-menu-sec {
  margin-top: var(--distance-1);
  margin-left: var(--distance-1);
}
.account-menu-sec:last-of-type {
  margin-bottom: var(--distance-15);
}
.account-menu-sec li.active .account-menu-sec {
  margin-bottom: var(--distance-1);
}
.account-menu-sec .account-menu-sec:last-of-type {
  margin-bottom: var(--distance-05);
}
.account-menu-sec li a {
  font-size: var(--font-size-s);
  font-weight: 400;
  color: var(--grey-color);
}
.account-menu li.active .account-menu-sec li a {
  font-weight: 400;
  color: var(--grey-color);
}
.account-menu li .account-menu-sec li a::after {
  height: 1px;
}
.account-menu li.active .account-menu-sec li a::after {
  width: 0;
}
.account-menu li.active .account-menu-sec li a:hover {
  color: var(--main-color);
}
.account-menu li.active .account-menu-sec li a:hover::after {
  width: 100%;
}
.account-menu li.active .account-menu-sec li.active a {
  color: var(--black-color);
  font-weight: 700;
}
.account-menu li.active .account-menu-sec li.active .account-menu-sec li a {
  color: var(--grey-color);
  font-weight: 400;
}
.account-menu li.active .account-menu-sec li.active .account-menu-sec li.active a {
  color: var(--black-color);
  font-weight: 700;
}

/*  --- ACCOUNT CONTENT ---  */
.account-content-area {
  float: right;
  width: calc(100% - 275px);
}
.account-setting-listed {
  display: block;
  float: left;
  width: 27.5%;
  margin-right: var(--distance-3);
  margin-bottom: var(--distance-3);
  padding: var(--distance-15);
  background: var(--modal-background);
  background-color: var(--white-color);
  background-repeat: no-repeat;
  background-size: cover;
}
.account-setting-listed:nth-of-type(3n) {
  margin-right: 0;
}
.account-setting-icon {
  position: relative;
  display: block;
  float: left;
  width: 44px;
  height: 40px;
  color: var(--main-color);
}
.account-setting-icon svg {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.account-setting-info {
  display: block;
  float: left;
  width: calc(100% - 44px);
  padding-left: 1rem;
}
.account-settings-edit {
  cursor: pointer;
  display: inline-block;
  color: var(--brightgrey-color);
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.account-settings-edit:hover {
  color: var(--black-color);
}
.account-settings-edit svg {
  display: block;
  margin-top: -1px;
}
.change-account-info .button {
  width: 47.5%;
  margin-right: 5%;
}
.change-account-info .button:nth-of-type(2) {
  margin-right: 0;
}
@media screen and (max-width: 1580px) {
  .account-setting-listed {
    width: 30%;
    margin-right: 5%;
  }
}
@media screen and (max-width: 1440px) {
  .account-setting-listed {
    width: 32%;
    margin-right: 2%;
  }
}
@media screen and (max-width: 1380px) {
  .account-setting-listed {
    width: 45%;
    margin-right: 10%;
  }
  .account-setting-listed:nth-of-type(3n) {
    margin-right: 10%;
  }
  .account-setting-listed:nth-of-type(2n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 1028px) {
  .account-menu-area {
    display: none;
  }
  .account-content-area {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .account-setting-listed {
    width: 100%;
    margin-right: 0;
  }
  .account-setting-listed:nth-of-type(3n) {
    margin-right: 0;
  }
  .account-setting-listed:nth-of-type(2n) {
    margin-right: 0;
  }
}

/*  --- ACCOUNT INFORMATION SITE ---  */
.account-info-list {
  border-bottom-style: var(--border-style);
  border-bottom-width: var(--border-width);
  border-bottom-color: var(--lightgrey-color);
  padding-top: var(--distance-15);
  padding-bottom: var(--distance-15);
}
.account-info-list:first-of-type {
  padding-top: var(--distance-0);
}
.account-info-list-half {
  display: block;
  float: left;
  width: 47.5%;
  max-width: 500px;
}
.account-info-list-half:nth-of-type(2) {
  margin-left: 5%;
}
.account-info-icon {
  position: relative;
  display: block;
  float: left;
  width: 44px;
  height: 40px;
  color: var(--main-color);
}
.account-info-icon svg {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.account-info-list-name, .account-info-list-name-spacer {
  display: block;
  float: left;
  width: calc(100% - 60px);
  height: 40px;
  margin-left: var(--distance-1);
  margin-bottom: var(--distance-1);
}
.account-info-list-name h3 {
  margin-top: var(--distance-05);
  font-size: var(--font-size-m);
}
.account-info-change {
  display: block;
  float: none;
  clear: both;
  width: calc(100% - 60px);
  margin-left: 60px;
}
.account-info-change span {
  display: block;
  float: none;
  font-family: var(--sub-font);
  font-size: var(--font-size-s);
  line-height: 1;
  color: var(--grey-color);
  margin-left: var(--distance-1);
  margin-bottom: var(--distance-025);
}
.account-info-change select, .account-info-change .select, .account-info-change input , .account-info-change .input  {
  display: block;
  float: left;
  width: calc(100% - 135px);
  height: 40px;
  color: var(--black-color);
}
.account-info-change.fullwidth-inputs input, .account-info-change.fullwidth-inputs .input, .account-info-change.fullwidth-inputs select, .account-info-change.fullwidth-inputs .select, .account-info-change.fullwidth-inputs button, .account-info-change.fullwidth-inputs .button {
  width: 100%;
  max-width: initial;
}
.account-info-change .input.salutation  {
  width: 100%;
  padding-top: .6rem);
  padding-right: var(--distance-25);
  padding-bottom: .6rem;
  padding-left: var(--distance-1);
  line-height: var(--line-height-s);
}
.account-info-change .button {
  float: right;
  max-width: 120px;
  height: 40px;
}
.button.pw-text span {
  color: var(--white-color);
}
.account-info-list:nth-of-type(3) {
  border-bottom: none;
}

@media screen and (max-width: 1280px) and (min-width: 1029px) {
  .account-info-list {
    padding-bottom: var(--distance-2);
  }
  .account-info-list-half {
    float: none;
    clear: both;
    width: 100%;
  }
  .account-info-list-half:nth-of-type(2) {
    margin-left: 0;
  }
  .account-info-list:nth-of-type(1) .account-info-list-half:nth-of-type(1) .mb0 {
    margin-bottom: var(--distance-1) !important;
  }
  .account-info-list-half:nth-of-type(2) .account-info-list-name, .account-info-list-half:nth-of-type(2) .account-setting-icon {
    margin-top: var(--distance-15);
  }
  .account-info-list-name-spacer {
    display: none;
  }
}
@media screen and (max-width: 920px) {
  .account-info-list {
    padding-bottom: var(--distance-2);
  }
  .account-info-list-half {
    float: none;
    clear: both;
    width: 100%;
  }
  .account-info-list-half:nth-of-type(2) {
    margin-left: 0;
  }
  .account-info-list:nth-of-type(1) .account-info-list-half:nth-of-type(1) .mb0 {
    margin-bottom: var(--distance-1) !important;
  }
  .account-info-list-half:nth-of-type(2) .account-info-list-name, .account-info-list-half:nth-of-type(2) .account-setting-icon {
    margin-top: var(--distance-15);
  }
  .account-info-list-name-spacer {
    display: none;
  }
  .account-info-change select, .account-info-change .select, .account-info-change input, .account-info-change .input {
    float: none;
    width: 100%;
  }
  .account-info-change .button {
    float: none;
    width: 100%;
    max-width: unset;
  }
}
@media screen and (max-width: 768px) {
  .account-setting-icon .font-size-xxl {
    font-size: 2rem !important;
  }
  .account-info-change, .account-info-change.fullwidth-inputs {
    width: 100%;
    margin-left: 0;
  }
  .account-info-change .button {
    margin-bottom: var(--distance-1)
  }
}

/*  --- SELECT ADDRESSES ---  */
.select-address {
  display: block;
  width: 21%;
  margin-right: 5%;
  float: left;
  min-height: 332px;
  padding: var(--distance-25);
  background: var(--modal-background);
  background-color: var(--white-color);
  background-repeat: no-repeat;
  background-size: cover;
  /*border-style: var(--border-style);
  border-width: var(--border-width);
  border-color: var(--black-color);*/
}
.select-address.selected-address {
  background: var(--main-color);
  color: var(--white-color);
}
.select-address:nth-of-type(4n) {
  margin-right: 0
}
.select-address-list .select-address:nth-of-type(4n) {
  margin-right: 5%;
}
.select-address-list .select-address:nth-of-type(3), .select-address-list .select-address:nth-of-type(4n + 3) {
  margin-right: 0;
}
.address-status {
  margin-bottom: var(--distance-15);
}
.address-company {
  font-size: var(--font-size-s);
  font-weight: 700;
}
.address-name {
  font-size: var(--font-size-s);
  font-weight: 700;
}
.address-street {
  display: block;
  margin-top: var(--distance-025);
  font-size: var(--font-size-s);
}
.address-postcode, .address-city {
  display: inline-block;
  margin-top: var(--distance-025);
  font-size: var(--font-size-s);
}
.address-country {
  display: block;
  margin-top: var(--distance-025);
  font-size: var(--font-size-s);
}
.wk-list .select-address {
  width: 30%;
  margin-right: 5%;
  background: var(--black-color);
  color: var(--black-color);
}
.wk-list .select-address:nth-of-type(4n) {
  margin-right: 0
}
.wk-list .select-address-list .select-address {
  background: none;
  border-color: var(--black-color);
  color: var(--black-color);
}
.wk-list .select-address-list .select-address:nth-of-type(4n) {
  margin-right: 5%;
}
.wk-list .select-address-list .select-address:nth-of-type(3), .select-address-list .select-address:nth-of-type(4n + 3) {
  margin-right: 0;
}
.select-address .select-this-address {
  display: block;
  width: 100%;
  float: left;
  padding-left: 0;
  padding-right: 0;
}
.select-address.add-new-address {
  position: relative;
  margin-right: 0;
  padding-top: var(--distance-4);
  cursor: pointer;
  background: transparent;
  border-style: var(--border-style);
  border-width: var(--border-width);
  border-color: var(--lightgrey-color);
  color: var(--light-color);
  transition: background 0.3s ease, border 0.3s ease;
}
.select-address.add-new-address:hover {
  background: var(--light-color);
}
.select-address.add-new-address .add-new-address-content {
  position: absolute;
  width: 90%;
  height: auto;
  top: 50%;
  left: 50%;
  color: var(--lightgrey-color);
  transform: translate(-50%, -50%);
  transition: color 0.3s ease;
}
.select-address.add-new-address:hover .add-new-address-content {
  color: var(--brightgrey-color);
}
.select-address.add-new-address .add-new-address-content div {
  margin-top: var(--distance-1);
  font-size: var(--font-size-s);
  font-weight: 400;
  text-align: center;
  margin-bottom: 0;
}
.add-new-address-icon {
  display: block;
  width: 60px;
  margin: 0 auto;
  margin-top: 0 !important;
  font-size: 5rem !important;
  color: var(--lightgrey-color);
  transition: color 0.3s ease;
}
.select-address.add-new-address:hover .add-new-address-icon {
  color: var(--brightgrey-color);
}
.order-area .select-address {
  width: 100%;
  height: auto;
  min-height: initial;
  float: none;
  clear: both;
  padding: var(--distance-15);
  padding-top: var(--distance-1);
  padding-bottom: var(--distance-1);
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--grey-color);
  border-radius: var(--border-radius);
  background: var(--white-color);
}
.order-area .select-address .address-status {
  display: block;
  float: right;
  margin-top: -1rem;
}
.order-area .address-company, .order-area .address-name, .order-area .address-street, .order-area .address-postcode, .order-area .address-city, .order-area .address-country {
  display: inline-block;
}
.order-area .select-address-list, .order-area .select-address.add-new-address {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  border-color: var(--brightgrey-color);
  transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.order-area.open-accordion .select-address-list, .order-area.open-accordion .select-address.add-new-address {
  max-height: 1000px;
  opacity: 1;
  visibility: visible;
  overflow: auto;
}
.order-area .select-address-list .select-address {
  background: var(--modal-background);
  background-color: var(--white-color);
  background-repeat: no-repeat;
  background-size: cover;
  border-color: var(--brightgrey-color);
}
.order-area .select-address-list .select-address .button {
  width: auto !important;
  font-size: var(--font-size-s);
  float: right !important;
  margin-top: -1rem !important;
}
.order-area .select-address.add-new-address {
  background: var(--light-color);
}
.order-area .select-address.add-new-address {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}
.order-area.open-accordion .select-address.add-new-address {
  height: auto;
  margin-bottom: var(--distance-3);
  padding-top: var(--distance-075);
  padding-bottom: var(--distance-075);
}
.order-area .select-address.add-new-address .add-new-address-content {
  position: relative;
  width: 185px;
  height: 100%;
  top: initial;
  left: initial;
  margin: 0 auto;
  transform: none;
}
.order-area .select-address.add-new-address .add-new-address-content .add-new-address-icon {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  font-size: var(--font-size-s) !important;
}
.account-content-area .address-status {
  margin-bottom: var(--distance-15);
}
.account-content-area .address-company, .account-content-area .address-name {
  font-size: var(--font-size-m);
  font-weight: 700;
}
.account-content-area .address-name {
  line-height: var(--line-height-m);
}
.account-content-area .address-street {
  margin-top: var(--distance-1);
}
.account-content-area .select-address button, .account-content-area .select-this-address {
  margin-top: var(--distance-2);
  width: 100%;
}
.account-content-area .select-address button::after {
  z-index: -1;
}
@media screen and (max-width: 1680px) {
  .select-address {
    width: 23.5%;
    margin-right: 2%;
  }
  .select-address-list .select-address:nth-of-type(4n) {
    margin-right: 2%;
  }
}
@media screen and (max-width: 1480px) {
  .select-address {
    width: 32%;
    margin-right: 2%;
  }
  .select-address-list .select-address:nth-of-type(4n), .select-address-list .select-address:nth-of-type(4n + 3) {
    margin-right: 2%;
  }
  .select-address-list .select-address:nth-of-type(4n + 2) {
    margin-right: 0;
  }
  .wk-list .select-address-list .select-address:nth-of-type(4n) {
    width: 100%;
    margin-right: 0;
  }
}
@media screen and (max-width: 1280px) {
  .select-address {
    width: 47.5%;
    margin-right: 5%;
  }
  .select-address-list .select-address:nth-of-type(4n + 2) {
    margin-right: 5%;
  }
  .select-address-list .select-address:nth-of-type(2n + 1) {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .select-address {
    width: 100%;
    min-height: initial;
  }
  .select-address-list .select-address:nth-of-type(1), .select-address-list .select-address:nth-of-type(2n + 1) {
    margin-right: 0;
  }
  .select-address-list .select-address:nth-of-type(2), .select-address-list .select-address:nth-of-type(3n +2) {
    margin-right: 0;
  }
  .select-address-list .select-address:nth-of-type(4n) {
    width: 100%;
    margin-right: 0;
  }
  .select-address.add-new-address {
    height: 200px;
  }
  .account-content-area .select-address {
    padding: var(--distance-15);
  }
  .account-content-area .address-status {
    margin-bottom: var(--distance-075);
  }
  .account-content-area .select-address-list .address-status {
    display: none;
  }
  .account-content-area .address-company, .account-content-area .address-name {
    font-size: var(--font-size-s);
    line-height: initial;
  }
  .account-content-area .address-company::after, .account-content-area .address-street::after, .account-content-area .address-city::after {
    content: ', ';
    display: inline;
  }
  .select-address br {
    display: none;
  }
  .account-content-area .address-street::before {
    display: block;
    content: '';
    width: 100%;
    height: 0;
    float: none;
    clear. both;
  }
  .account-content-area .address-street, .account-content-area .address-postcode, .account-content-area .address-city, .account-content-area .address-country {
    display: inline !important;
    line-height: 1.2;
  }
  .account-content-area .select-address button, .account-content-area .select-this-address {
    width: 100%;
    margin-top: var(--distance-1) !important;
  }
  .account-content-area  .select-address.add-new-address {
    height: auto;
    margin-bottom: var(--distance-1);
  }
  .account-content-area .select-address.add-new-address {
    height: auto;
    background: var(--light-color);
    padding-top: var(--distance-075);
    padding-bottom: var(--distance-075);
  }
  .account-content-area .select-address.add-new-address .add-new-address-content {
    position: relative;
    width: 180px;
    height: 100%;
    top: initial;
    left: initial;
    margin: 0 auto;
    transform: none;
  }
  .account-content-area .select-address.add-new-address .add-new-address-content .add-new-address-icon {
    display: inline-block;
    width: auto;
    margin: 0 auto;
    font-size: var(--font-size-s) !important;
  }
}

/*  --- DYNAMIC MENU FOR AGB / ETC ---  */
.autoContent_headline {
  display: block;
  float: right;
  width: calc(100% - 400px);
}
.autoContent_menu_parent {
  position: sticky;
  top: var(--menu-spacer);
  float: left;
  width: 350px;
}
.autoContent-menu {
  display: block;
  float: none;
  clear: both;
  width: 350px;
  height: auto;
  max-height: calc(95vh - var(--menu-spacer));
  overflow-y: scroll;
  padding: var(--distance-15);
  padding-bottom: var(--distance-05);
  background: var(--light-color);
  border-radius: var(--border-radius);
}
.autoContent-menu li {
  display: block;
  float: none;
  clear: both;
  width: 100%;
  margin-bottom: var(--distance-1);
  text-align: left;
}
.autoContent-menu li:last-of-type {
  margin-bottom: 0;
}
.autoContent-menu li a {
  position: relative;
  font-size: var(--font-size-s);
  font-weight: 400;
    line-height: var(--line-height-s);
  text-align: right;
  color: var(--grey-color);
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.autoContent-menu li a:hover {
  color: var(--main-color);
}
.autoContent-menu li.active a {
  color: var(--black-color);
  font-weight: 700;
}
.autoContent-menu li.active .shop-menu-sec li a {
  font-weight: 400;
}
.autoContent_container {
  float: right;
  width: calc(100% - 400px);
}

.autoContent_container h2, .autoContent_container h2 strong {
  font-size: var(--font-size-l) !important;
  color: var(--main-color) !important;
  line-height: var(--line-height-s) !important;
  margin-top: var(--distance-15) !important;
  margin-bottom: var(--distance-025) !important;
}
@media screen and (max-width: 768px) {
  .autoContent_headline {
    float: none;
    width: 100%;
  }
  .autoContent_menu_parent {
    margin-top: var(--distance-1);
  }
  .autoContent_menu_parent, .autoContent-menu {
    float: none;
    width: 100%;
  }
  .autoContent_container {
    float: none;
    width: 100%;
  }
}

/*  OLD DYNAMIC MENU FOR AGB / ETC  */
/*.autoContent-menu {
  display: block;
  float: none;
  clear: both;
  width: auto;
  height: auto;
  margin-right: var(--distance-15);
  padding-top: var(--distance-075);
  padding-right: var(--distance-3);
  padding-bottom: var(--distance-075);
  border-right-width: var(--border-width);
  border-right-style: var(--border-style);
  border-right-color: var(--lightgrey-color);
}
.autoContent-menu li {
  display: block;
  float: none;
  clear: both;
  width: 100%;
  margin-bottom: var(--distance-1);
  text-align: right;
}
.autoContent-menu li:last-of-type {
  margin-bottom: 0;
}
.autoContent-menu li a {
  position: relative;
  font-size: var(--font-size-s);
  font-weight: 400;
  text-align: right;
  color: var(--grey-color);
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.autoContent-menu li a:hover {
  color: var(--main-color);
}
.autoContent-menu li.active a {
  color: var(--black-color);
  font-weight: 700;
}
.autoContent-menu li.active .shop-menu-sec li a {
  font-weight: 400;
}
.autoContent_menu_parent {
  position: sticky;
  top: var(--menu-spacer);
}
.autoContent-menu {
  max-height: calc(95vh - var(--menu-spacer));
  overflow-y: scroll
}
.autoContent_container h2, .autoContent_container h2 strong {
  font-size: var(--font-size-l) !important;
  color: var(--main-color) !important;
  line-height: var(--line-height-s) !important;
  margin-top: var(--distance-15) !important;
  margin-bottom: var(--distance-025) !important;
}
@media screen and (max-width: 768px) {
  #CPConditions_ContainerAutoMenu {
    display: none;
  }
  #CPDateSecure_ContainerAutoMenu {
    display: none;
  }
  #CPConditions_2 {
    display: none;
  }
}*/

/*  --- MODALS ---  */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
}
.modal.is-active {
  display: block;
}
.modal-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #00000050;
  backdrop-filter: blur(5px);
}
.modal.is-active .modal-background {
  display: block;
}
.modal-content {
  position: fixed;
  width: 90%;
  max-width: 600px;
  height: auto;
  max-height: 90vh;
  padding-top: var(--distance-3);
  padding-right: var(--distance-3);
  padding-bottom: var(--distance-3);
  padding-left: var(--distance-3);
  overflow-y: scroll;
  z-index: 9999;
  top: 50%;
  left: 50%;
  background: var(--modal-background);
  background-color: var(--white-color);
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -50px;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, margin 0.3s ease;
}
.modal-close-button {
  position: absolute;
  top: var(--distance-1);
  right: var(--distance-1);
}
.modal.is-active .modal-content {
  opacity: 1;
  margin-top: 0;
}

.modal-content .input {
  /*display: block;
  float: none;
  width: 100%;
  margin-right: 0;
  margin-bottom: var(--distance-1);
  padding-right: var(--distance-075);
  padding-left: var(--distance-075);
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom-width: var(--border-width);
  border-bottom-style: var(--border-style);
  border-bottom-color: var(--grey-color);
  -webkit-transition: border 0.3s ease;
  -moz-transition: border 0.3s ease;
  -ms-transition: border 0.3s ease;
  -o-transition: border 0.3s ease;
  transition: border 0.3s ease;*/
  text-align: center;
}
/*.modal-content .input:focus {
border-bottom-color: var(--black-color);
}*/
.modal-content .input.postcode {
  float: left;
  width: calc(35% - .5rem);
  margin-right: 1rem;
}
.modal-content .input.city {
  float: left;
  width: calc(65% - .5rem);
}
.modal-content select {
  width: 100%;
  text-align: center;
  text-align-last:center;
}
/*.modal-content select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
border-bottom-width: var(--border-width);
border-bottom-style: var(--border-style);
border-bottom-color: var(--grey-color);
background: transparent;
cursor: pointer;
width: 100%;
height: 40px;
-moz-padding-start: calc(10px - 3px);
padding-left: 10px;
margin-bottom: var(--distance-2);
outline: none;
text-align-last:center;
transition: border 0.3s ease;
}
.modal-content select:focus {
border: none;
border-bottom-width: var(--border-width) !important;
border-bottom-style: var(--border-style) !important;
border-bottom-color: var(--black-color);
}
.modal-content select.salutation {
margin-bottom: var(--distance-1);
}
.modal-content select:focus::-ms-value {
background-color: transparent;
}*/
.modal-content .select-wrapper {
  position: relative;
  display: block;
  float: none;
  clear: both;
}
/*.modal-content .select-wrapper::before {
position: absolute;
right: var(--distance-1);
top: 13px;
display: block;
content: '';
width: 9px;
height: 9px;
border-right: 2px solid;
border-right-color: var(--black-color);
border-bottom: 2px solid;
border-bottom-color: var(--black-color);
pointer-events: none;
transform: rotate(45deg);
}*/
.error {
  display: block;
  position: relative;
}
.error .close-error {
  position: absolute;
  top: -1.75rem;
  right: -2rem;
  background: transparent;
}
.register-error {
  width: 100%;
  display: block;
  padding: var(--distance-1);
  margin-bottom: var(--distance-2);
  background: #c30b1d;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .modal-content {
    padding-top: var(--distance-15);
    padding-right: var(--distance-15);
    padding-bottom: var(--distance-15);
    padding-left: var(--distance-15);
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .modal-content {
    top: 40%;
    transform: translate(-50%, -100%);
  }
}
/*  --- SHOPPING CART ---  */
.wk-headline-amount {
  color: var(--brightgrey-color);
  font-size: var(--font-size-m);
}
.wk-control {
  display: block;
  width: 350px;
  float: right;
  position: -webkit-sticky;
  position: sticky;
  top: var(--sticky-top-gap);
}
.wk-control-container {
  padding: var(--distance-2);
  margin-bottom: var(--distance-2);
  background: var(--light-color);
  border-radius: var(--border-radius);
}
.wk-list {
  display: block;
  width: calc(100% - 400px);
  height: auto;
  float: left;
}
.wk-article-listed {
  padding-bottom: var(--distance-2);
  margin-bottom: var(--distance-2);
  border-bottom-width: var(--border-width);
  border-bottom-style: var(--border-style);
  border-bottom-color: var(--lightgrey-color);
}
.wk-article-listed:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom-width: 0;
  border-bottom-style: 0;
  border-bottom-color: 0;
}
.wk-article-img-container {
  display: block;
  float: left;
  width: 200px;
  height: auto;
  margin-right: var(--distance-2);
}
.wk-article-img-container.wk-overview {
  width: 150px;
  height: 150px;
}
.wk-article-img {
  display: block;
  width: auto;
  max-width: 200px;
  height: auto;
  max-height: 200px;
}
.wk-article-img-container.wk-overview .wk-article-img {
  display: block;
  max-width: 150px;
  max-height: 100px;
  margin: 0 auto;
}
.wk-article-info {
  display: block;
  float: left;
  width: calc(100% - 360px);
  margin-top: var(--distance-025);
}
.wish-dropmenu .wk-article-info {
  margin-top: var(--distance-25);
}
.wk-article-listed .wk-article-info {
  margin-top: var(--distance-1);
}
.wk-article-listed.wish-article-listed .wk-article-info {
  margin-top: var(--distance-05);
}
.wk-article-info-first {
  display: inline-block;
  margin-bottom: var(--distance-05);
  font-size: var(--font-size-s);
  color: var(--brightgrey-color);
  text-decoration: none;
}
.wk-article-info-name {
  display: inline-block;
  width: 100%;
  margin-bottom: var(--distance-05);
  font-size: var(--font-size-m);
  font-weight: 700;
  line-height: var(--line-height-s);
  color: var(--black-color);
  text-decoration: none;
}
.wk-article-info-number {
  font-size: var(--font-size-s);
  color: var(--brightgrey-color);
}
.wk-article-info-variety {
  display: block;
  margin-top: var(--distance-05);
  color: var(--brightgrey-color);
}
.shopping-drop-list .wk-article-info-variety {
  margin-top: .7rem;
}
.wk-article-listed .wk-article-info-variety {
  margin-top: .7rem;
}
.wk-article-control {
  display: block;
  float: right;
  max-width: 150px;
  min-width: 110px;
  margin-top: var(--distance-025);
}
.wish-dropmenu .wk-article-control {
  margin-top: var(--distance-25);
}
.wk-article-listed .wk-article-control {
  margin-top: var(--distance-1);
}
.wk-article-listed.wish-article-listed .wk-article-control {
  margin-top: var(--distance-05);
}
.wk-article-control-single-price {
  display: inline-block;
  float: right;
  clear: right;
  margin-bottom: var(--distance-05);
  font-size: var(--font-size-s);
  color: var(--brightgrey-color);
  text-align: right;
}
.wk-article-control-price {
  display: inline-block;
  float: right;
  clear: right;
  margin-bottom: var(--distance-05);
  font-size: var(--font-size-m);
  font-weight: 700;
  line-height: var(--line-height-s);
  color: var(--black-color);
  text-align: right;
  text-decoration: none;
}
.wk-article-amount-refresh {
  float: right;
  clear: right;
  width: 12px;
  background: transparent;
}
.wk-article-amount-refresh svg {
  margin-top: -2px;
  font-size: var(--font-size-xxs);
  color: var(--brightgrey-color);
  transition: color 0.3s ease;
}
.wk-article-amount-refresh:hover svg {
  color: var(--black-color);
}
.wk-article-amount {
  display: block;
  width: 35px;
  float: right;
  margin-top: -2px;
  margin-right: var(--distance-025);
  padding-bottom: var(--distance-025);
  background: transparent;
  border-bottom-width: var(--border-width);
  border-bottom-style: var(--border-style);
  border-bottom-color: var(--brightgrey-color);
  border-radius: 0;
  color: var(--brightgrey-color);
  text-align: center;
}
.wk-article-amount:focus {
  color: var(--black-color);
  outline: none !important;
  border-bottom-color: var(--black-color);
}
.wk-article-amount.wk-overview {
  display: inline;
  float: right;
  clear: right;
  width: 25px;
  margin-right: 0;
  border-bottom: none;
  text-align: right;
}
input.wk-article-amount::-webkit-outer-spin-button,
input.wk-article-amount::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number].wk-article-amount {
  -moz-appearance: textfield;
}
.wk-article-amount-post {
  display: block;
  float: right;
  margin-right: var(--distance-025);
  color: var(--brightgrey-color);
  text-align: right;
}
.shopping-drop-list .wk-article-buttons {
  width: calc(100% - 132px);
}
.wish-dropmenu .shopping-drop-list .wk-article-buttons {
  width: auto !important;
  margin-top: 0;
}
.wk-article-buttons {
  display: block;
  float: left;
  width: calc(100% - 232px);
  margin-top: var(--distance-1);
}
.wish-article-listed .wk-article-buttons {
  display: block;
  float: left;
  width: calc(100% - 232px);
  margin-top: var(--distance-075);
}
.wk-article-buttons-wish {
  float: left;
  background: transparent;
  font-size: var(--font-size-s);
  color: var(--brightgrey-color);
}
.wk-article-buttons-delete {
  float: right;
  background: transparent;
  font-size: var(--font-size-s);
  color: var(--brightgrey-color);
}
@media screen and (max-width: 1024px) {
  .wk-list {
    width: 100%;
    float: unset;
  }
  .wk-control {
    width: 100%;
    float: unset;
  }
  .wk-article-listed:last-of-type {
    /* border-bottom: 1px solid #ececec;
    padding-bottom: var(--distance-2); */
    margin-bottom: var(--distance-2);
  }
}
@media screen and (max-width: 768px) {
  .wk-article-buttons {
    width: 100%;
  }
  .wk-article-control {
    float: right;
  }
  .wk-article-info {
    width: calc(100% - 150px);
  }
  .wk-article-info-first {
    display: none;
  }
  .wk-article-info-first + br {
    display: none;
  }
  .wk-control-container {
    margin-bottom: var(--distance-1);
  }
  .wk-article-img-container.wk-overview {
    width: 100%;
  }
  .wk-article-control-single-price {
    display: none;
  }
  .wk-article-info-first {
    display: none;
  }
  .wk-article-img {
    max-width: unset!important;
    width: 100%;
    max-height: unset!important;
  }
  .wk-article-img-container {
    float: unset;
    width: 100%;
  }
  .wish-article-listed .wk-article-buttons {
    width: 100%;
  }
  .shopping-drop-list .wk-article-info-variety {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .wk-article-container {
    min-height: 170px;
  }
  .wk-header-cont  {
    width: 50%;
    float: left;
    text-align: right;
  }

  .wk-amount-cont {
    width: 50%;
    float: left;
    text-align: left;
    padding-left: var(--distance-2);
    padding-top: var(--distance-1);
  }
}

/*  --- WISHLIST ---  */
.mz-article-buttons-delete {
  float: right;
  background: transparent;
  font-size: var(--font-size-s);
  color: var(--brightgrey-color);
  margin: 0.75rem 1.5rem;
}

/*  --- SHOPPING CART ACCORDION ---  */
.wk-accordions {
  display: block;
  clear: both;
  float: none;
  background: var(--light-color);
  border-radius: var(--border-radius);
  padding: var(--distance-2);
}
.wk-accordion {
  position: relative;
  display: block;
  clear: both;
  float: none;
  width: 100%;
  height: auto;
}
.wk-accordion h2 {
  position: relative;
  display: block;
  float: none;
  clear: both;
  cursor: pointer;
  font-size: var(--font-size-m);
}
.wk-accordion .wk-accordion-trigger-icon {
  position: absolute;
  display: block;
  content: '';
  pointer-events: none;
  width: 20px;
  height: 20px;
  top: 0;
  right: 0;
  -webkit-transition: transform 0.5s ease;
  -moz-transition: transform 0.5s ease;
  -ms-transition: transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
}
.wk-accordion .wk-accordion-trigger-icon svg {
  width: 100%;
}
.wk-accordion.active .wk-accordion-trigger-icon {
  transform: rotate(180deg);
}
.wk-accordion-content {
  max-height: 0;
  overflow: hidden;
  border-bottom-width: var(--border-width);
  border-bottom-style: var(--border-style);
  border-bottom-color: var(--lightgrey-color);
  -webkit-transition: max-height 0.5s ease, padding 0.5s ease;
  -moz-transition: max-height 0.5s ease, padding 0.5s ease;
  -ms-transition: max-height 0.5s ease, padding 0.5s ease;
  -o-transition: max-height 0.5s ease, padding 0.5s ease;
  transition: max-height 0.5s ease, padding 0.5s ease;
}
.wk-accordion-content:last-of-type {
  border-bottom-width: 0;
  border-bottom-style: 0;
  border-bottom-color: 0;
}
.wk-accordion.active .wk-accordion-content {
  max-height: 500px;
  padding-top: var(--distance-1);
  padding-bottom: 0;
}
.coupon input::placeholder {
  content: 'Test';
  background: red;
}

/*  --- MOBILE ORDER ---  */
@media screen and (min-width: 769px) {
  .mobile-order-now {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .mobile-order-now {
    display: block;
    width: 100%;
    height: 52px;
    background: var(--light-color);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 6666;
    box-shadow: 0px 0px 4px 4px #00000015;
  }
  .mobile-order-now button, .mobile-order-now input, .mobile-order-now .button {
    border-radius: 0 !important;
    padding: 1rem 5%;
    height: 52px;
    text-align: right;
  }
  /*.mobile-order-now .checkbox-complete {
  float: none;
  clear: both;
  width: 182px;
  margin: 0 auto;
  }*/
  .mobile-order-now-price {
    position: absolute;
    bottom: 1rem;
    left: 5%;
    z-index:2;
    font-size: var(--font-size-s);
    color: var(--white-color);
    font-weight: 700;
  }
}

/*  --- ORDER PROCESS ---  */
.order-area {
  width: calc(100% - 1rem);
  margin-left: 1rem;
  padding-left: 50px;
  border-left-width: var(--border-width);
  border-left-style: var(--border-style);
  border-left-color: var(--lightgrey-color);
}
.order-icon {
  display: block;
  float: left;
  width: calc(2rem + 1px);
  height: calc(2rem + 1px);
  margin-right: 32px;
}
.order-icon svg {
  width: 100% !important;
  height: 100% !important;
}
.order-headline {
  display: inline-block;
  margin-top: var(--distance-025);
  margin-bottom: var(--distance-2);
  font-size: var(--font-size-l);
}
.order-area .wk-article-info, .order-area .wk-article-control {
  margin-top: 0.85rem;
}
.order-area .wk-article-img-container.wk-overview {
  height: 100px;
}
.order-area .wk-article-info {
  width: calc(100% - 295px);
}
.order-accordion-trigger {
  display: inline-block;
  width: calc(100% - 65px);
  position: relative;
  cursor: pointer;
  transition: color 0.3s ease;
}
.order-accordion-trigger:hover {
  color: var(--main-color);
}
.order-accordion-trigger::after {
  display: inline-block;
  content: '';
  width: 17px;
  height: 15px;
  background-image: var(--select-arrow-black);
  background-size: 17px 15px;
  margin-left: var(--distance-05);
  transition: transform 0.3s ease;
}
.order-accordion-trigger:hover::after {
  /*background-image: var(--select-arrow-black);
  background-size: 17px 15px;*/
}
.order-accordion-trigger.open-accordion::after  {
  transform: rotate(180deg);
}
/*.order-area.order-articles-listed {
max-height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.order-area.open-accordion.order-articles-listed {
max-height: 2000px;
opacity: 1;
visibility: visible;
overflow: auto;
}*/

@media screen and (min-width: 1024px) {
  .order-content-area {
    float: right;
    width: calc(100% - 275px);
  }
}
@media screen and (max-width: 768px) {
  .order-area .wk-article-img-container.wk-overview {
    height: unset;
  }
  .order-area .wk-article-info {
    width: calc(100% - 150px);
  }
}

/*  --- PAYMENT METHODS ---  */
.payment-methods {
  position: relative;
  display: block;
  width: auto;
  float: left;
  margin-right: 1rem;
}
.secret-button {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0px;
  height: 0px;
  visibility: hidden;
  opacity: 0;
}
.payment-methods label span {
  display: block;
  padding: 0.55rem 1.5rem 0.55rem 1.5rem;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--lightgrey-color);
  border-radius: var(--round-border-radius);
  background: var(--light-color);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  -webkit-transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  -moz-transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  -ms-transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  -o-transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
}
.payment-methods label span:hover {
  background: var(--main-color);
  border-color: var(--main-color);
  color: var(--white-color);
}
.payment-methods input:checked ~ label span {
  background: var(--main-color);
  color: var(--white-color);
  border-color: var(--main-color);
}

.payment-methods.payment-has-input {
  position: relative;
  width: auto;
  height: auto;
  max-height: 43.4px;
  background: var(--light-color);
  margin-bottom: var(--distance-1);
  padding-bottom: var(--distance-0);
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--lightgrey-color);
  border-radius: var(--round-border-radius);
  overflow: hidden;
  transition: width 0.3s ease, max-height 0.3s ease;
}
.payment-methods.payment-has-input.open-payment {
  width: 100%;
  max-height: 500px;
  padding-bottom: var(--distance-4);
}
.payment-methods.payment-has-input .payment-dropdown-trigger {
  display: block;
  content: '';
  padding: 0.55rem 1.5rem 0.55rem 1.5rem;
  background: var(--light-color);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  -webkit-transition: background 0.3s ease, color 0.3s ease;
  -moz-transition: background 0.3s ease, color 0.3s ease;
  -ms-transition: background 0.3s ease, color 0.3s ease;
  -o-transition: background 0.3s ease, color 0.3s ease;
  transition: background 0.3s ease, color 0.3s ease;
}
.payment-methods.payment-has-input .payment-dropdown-trigger:hover, .payment-methods.payment-has-input.payment-checked .payment-dropdown-trigger {
  background: var(--main-color);
  color: var(--white-color);
}
.payment-methods.payment-has-input.open-payment .payment-dropdown-trigger {
  border-bottom-width: var(--border-width);
  border-bottom-style: var(--border-style);
  border-bottom-color: var(--lightgrey-color);
}
.payment-methods.payment-has-input br {
  display: none;
}
.payment-methods.payment-has-input label, .payment-methods.payment-has-input .label, .payment-methods.payment-has-input input, .payment-methods.payment-has-input .input, .payment-methods.payment-has-input .payment-dropdown-info {
  display: none !important;
}
.payment-methods.payment-has-input.open-payment label, .payment-methods.payment-has-input.open-payment .label, .payment-methods.payment-has-input.open-payment input, .payment-methods.payment-has-input.open-payment .input, .payment-methods.payment-has-input.open-payment .payment-dropdown-info {
  display: block !important;
}
.payment-methods.payment-has-input .payment-dropdown-info {
  display: block;
  margin: 1rem 1.5rem 1rem 1.5rem;
  font-size: var(--font-size-xs);
  font-weight: 400;
  line-height: 1.2;
}
.payment-methods.payment-has-input label span {
}
.payment-methods.payment-has-input .label, .payment-methods.payment-has-input .input {
  display: block;
  float: left;
  clear: none;
  width: calc(50% - 3rem);
  margin: 0 1.5rem;
  text-align: left;
}
.payment-methods.payment-has-input .input {
  clear: left;
  margin-bottom: var(--distance-2);
}
.payment-methods.payment-has-input .label:nth-of-type(2n+2) {
  float: right;
  margin-top: -1.5rem;
}
.payment-methods.payment-has-input .input:nth-of-type(2n+3) {
  float: right;
  clear: right;
}
.payment-methods.payment-has-input .label {
  margin: 0rem 1.5rem .5rem 1.5rem;
  font-weight: 700;
}
.payment-methods.payment-has-input .input {
  padding-right: 1rem;
  padding-left: 1rem;
  border-color: var(--grey-color);
}
.payment-methods.payment-has-input .input:hover, .payment-methods.payment-has-input .input:focus {
  border-color: var(--black-color);
}
.payment-methods.payment-has-input .secret-button {
  position: absolute;
  bottom: var(--distance-15);
  right: var(--distance-15);
  width: 0px;
  height: 0px;
  visibility: hidden;
  opacity: 0;
}
.payment-methods.payment-has-input .secret-button + label {
  position: absolute;
  bottom: var(--distance-15);
  right: var(--distance-15);
  border-top: none;
  border-right: 0;
  border-left: 0;
  visibility: hidden;
}
.payment-methods.payment-has-input .secret-button + label::after {
  display: block;
  content: 'Speichern';
  padding: 0.5rem 1.5rem;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--black-color);
  border-radius: var(--round-border-radius);
  background: var(--light-color);
  font-size: var(--font-size-s);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  visibility: visible;
  -webkit-transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  -moz-transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  -ms-transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  -o-transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
}
.payment-methods.payment-has-input .secret-button + label:hover::after {
  background: var(--main-color);
  color: var(--white-color);
  border-color: var(--main-color);
}
.payment-methods.payment-has-input .secret-button:checked + label::after {
  content: 'Ausgewählt';
  background: var(--main-color);
  color: var(--white-color);
  border-color: var(--main-color);
}
/*.order-area .selection {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
position: relative;
padding: 0.75rem 3rem 0.75rem 1.5rem;
background-image: var(--select-arrow-white);
background-size: 15px 15px;
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-color: var(--main-color);
border-width: var(--border-width);
border-style: var(--border-style);
border-color: var(--main-color);
color: var(--white-color);
cursor: pointer;
}
.order-area .selection:focus {
border-width: var(--border-width) !important;
border-style: var(--border-style) !important;
border-color: var(--black-color) !important;
}
.order-area .selection option {
background: var(--light-color);
color: var(--black-color);
}*/
.selected-payment-method {
  display: inline-block;
  height: 40px;
  margin-bottom: var(--distance-1);
  position: relative;
  padding: 0.7rem 2.5rem 0.7rem 1rem;
  background-image: var(--select-arrow-black);
  background-size: 13px 13px;
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-color: var(--white-color);
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--lightgrey-color);
  border-radius: var(--round-border-radius);
  font-weight: 400;
  color: var(--grey-color);
  cursor: pointer;
  border-radius: 3487567px;
}
.selected-payment-method:hover {
  border-color: var(--main-color);
  color: var(--main-color);
}
.order-area #order-payment-method-accordion {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
#order-shipping-method.order-area select {
  margin-bottom: 0;
}
.order-area.open-accordion #order-payment-method-accordion {
  max-height: 2000px;
  opacity: 1;
  visibility: visible;
  overflow: auto;
}
@media screen and (max-width: 768px) {
  .payment-methods.payment-has-input .label:nth-of-type(2n+2) {
    float: left;
    width: 100%;
  }
  .payment-methods.payment-has-input .label, .payment-methods.payment-has-input .input {
    width: calc(100% - 3rem);
  }
  .payment-methods.payment-has-input .secret-button + label {
    width: calc(100% - 3rem);
  }
}

/*  --- ORDER OVERVIEW RESPONSIVE ---  */
@media screen and (max-width: 1170px) {
  .order-area .payment-methods.payment-has-input .label, .payment-methods.payment-has-input .input {
    width: calc(100% - 3rem);
  }
  .order-area .payment-methods.payment-has-input .label:nth-of-type(2n+2) {
    float: none;
    margin-top: 0;
  }
  .order-area .payment-methods.payment-has-input .input {
    margin-bottom: var(--distance-1);
  }
  .order-area .payment-methods.payment-has-input .secret-button, .order-area .payment-methods.payment-has-input .secret-button + label {
    width: calc(100% - 3rem);
  }
}
@media screen and (max-width: 1028px) {

}
@media screen and (max-width: 768px) {
  .order-area {
    width: calc(100% - 1rem);
    margin-left: 8px;
    padding-left: 20px;
  }
  .order-icon {
    width: calc(1rem + 1px);
    height: calc(1rem + 1px);
    margin-right: var(--distance-075);
  }
  .order-headline {
    width: calc(100% - 29px);
    margin-top: -1px;
    margin-bottom: var(--distance-1);
    font-size: var(--font-size-m);
  }
  .order-area .select-address .address-status {
    display: block;
    float: none;
    margin-top: var(--distance-075) !important;
    margin-bottom: var(--distance-05) !important;
  }
  .order-area .select-address-list .select-address .button {
    width: 100%;
    font-size: var(--font-size-s);
    float: right !important;
    margin-top: var(--distance-05) !important;
    margin-bottom: var(--distance-05) !important;
  }
  .order-area .payment-methods {
    margin-right: var(--distance-05);
  }
}

/*  --- MY ORDERS OVERVIEW ---  */
.my-orders-listed {
  display: block;
  width: 100%;
  margin-right: 0;
  padding: var(--distance-2);
  border: none;
  position: relative;
  margin-bottom: var(--distance-2);
  background: var(--modal-background);
  background-color: var(--white-color);
  background-repeat: no-repeat;
  background-size: cover;
}
.my-orders-ordernumber {
  display: inline-block;
  float: left;
  margin-bottom: var(--distance-1);
  font-size: var(--font-size-m);
  font-weight: 700;
}
.my-orders-price {
  display: inline-block;
  float: right;
  font-size: var(--font-size-m);
  font-weight: 700;
}
.my-orders-date {
  display: inline-block;
  float: left;
  margin-top: var(--distance-075);
  margin-right: var(--distance-3);
}
.my-orders-date-label {
  display: inline-block;
  float: left;
  margin-top: var(--distance-075);
  margin-right: var(--distance-025);
}
.my-orders-print {
  display: inline-block;
  float: left;
  margin-top: var(--distance-075);
  color: var(--black-color);
  text-decoration: none;
}
.my-orders-details-button {
  display: block;
  float: left;
  margin-top: -0.5rem;
  margin-left: var(--distance-1);
}

@media screen and (max-width:1120px){
  .my-orders-date-label{
    clear:left;
  }
}

@media screen and (max-width: 768px) {
  .my-orders-details-button {
    clear: both;
    margin-top: 0;
    margin-left: 0;
  }
  .my-orders-price {
    clear: both;
    float: left;
    margin-top: var(--distance-075);
  }
  .my-orders-listed {
    margin-bottom: var(--distance-15);
  }
}
@media screen and (max-width: 572px) {
  .my-orders-price {
    float: left;
    clear: both;
    margin-bottom: var(--distance-05);
    line-height: var(--line-height-m);
  }
}

/*  --- MY ORDERS DETAIL ---  */
.my-order-detail {
  display: block;
  clear: both;
  float: none;
  width: 100%;
  height: auto;
  border-bottom-width: var(--border-width);
  border-bottom-style: var(--border-style);
  border-bottom-color: var(--lightgrey-color);
  padding-bottom: var(--distance-2);
  margin-bottom: var(--distance-2);
}
.my-order-detail:last-of-type {
  border-bottom-width: 2px;
}
.my-order-detail .wk-article-info-name {
  display: inline-block;
  float: left;
  clear: left;
  font-size: var(--font-size-s);
}
.order-detail-article-total {
  display: inline-block;
  float: right;
  font-size: var(--font-size-s);
  font-weight: 700;
}
.my-orders-detail-articlenumber {
  display: inline-block;
  margin-right: var(--distance-2);
  color: var(--brightgrey-color);
}
.my-orders-detail-pieceprice {
  display: inline-block;
  margin-right: var(--distance-2);
  color: var(--brightgrey-color);
}
.my-orders-detail-amount {
  display: inline-block;
  color: var(--brightgrey-color);
}
#my-order-rebuy_Form {
  float: right;
}
.order-detail-wk-button {
  display: block;
  float: right;
  background: transparent;
  color: var(--brightgrey-color);
}
.my-order-detail-final-price {
  display: inline-block;
  float: right;
  margin-left: var(--distance-1);
  font-size: var(--font-size-m);
  font-weight: 700;
}
.my-order-detail-final-price-label {
  display: inline-block;
  float: right;
  font-size: var(--font-size-m);
  font-weight: 700;
}


/*  --- MY ORDERS MARKUS ---  */

.order-detail-back-button {
  display: block;
  float: left;
  clear: left;
  margin-top: -0.75rem;
}

@media screen (min-width: 1024px) {
  .order-date {
    width: 40%;
    float: left;
  }
  .order-print {
    width: 50%;
    float: right;
  }
  .sub-bestelldetails {
    width: calc(100% - 275px);
    float: right;
  }
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .order-detail-wk-button {
    float: unset;
  }
}
@media screen and (max-width: 768px) {
  .order-detail-back-button {
    width: 100%;
  }
  .sub-bestelldetails {
    width: unset;
    float: unset;
  }
  .order-box {
    width: 100%;
    margin-right: 0;
  }
}


/*  --- DASHBOARD ---  */
.dashboard {
  border-radius: 5px;
  background: var(--bright-color);
}
.dashboard.half {
  width: calc(50% - 1.5rem);
  float: left;
  margin-bottom: var(--distance-3);
  padding: var(--distance-15);
}
.dashboard.quater {
  width: calc(25% - 2.25rem);
  float: left;
  margin-right: var(--distance-3);
  padding: var(--distance-15);
}
@media screen and (max-width: 1024px) {
  .dashboard.half {
    width: 100%;
  }
  .dashboard.quater {
    width: calc(50% - 1.5rem);
    margin-right: var(--distance-3);
    margin-bottom: var(--distance-3);
  }
}
@media screen and (max-width: 768px) {
  .dashboard.half, .dashboard.quater {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: var(--distance-15);
  }
}

/*  --- FAST ACQUISITION---  */
.fast-acquisition-customer {
  width: 37.5%;
  float: left;
  margin-top: var(--distance-15);
  /*padding: var(--distance-3);
  background: var(--bright-color);
  border-radius: 5px;*/
}
.fast-acquisition-customer-search {
  padding: var(--distance-15);
  background: var(--bright-color);
  border-radius: 5px;
}
.fast-acquisition-customer-list {
  width: 100%;
  float: none;
  clear: both;
  margin-top: var(--distance-05);
  padding: 0;
}
.fast-acquisition {
  width: 60%;
  float: right;
  margin-top: var(--distance-15);
  padding: var(--distance-15);
  background: var(--bright-color);
  border-radius: 5px;
}
.fast-number {
  display: block;
  width: calc(100% - 7rem);
  float: left;
}
.fast-amount {
  display: block;
  width: var(--distance-6);
  float: right;
  text-align: center;
}
.fast-acquisition-line:nth-of-type(n + 10) {
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
  -webkit-transition: visibility 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  -moz-transition: visibility 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  -ms-transition: visibility 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  -o-transition: visibility 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  transition: visibility 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
}
.fast-acquisition-line {
  display: block;
  width: 100%;
  float: none;
  clear: both;
}
.fast-acquisition-line.show-acquisition {
  visibility: visible;
  opacity: 1;
  height: auto;
  overflow: auto;
}
.fast-acquisition-add {
  display: block;
  position: relative;
  z-index: 5;
  margin-top: -5.75rem;
  margin-bottom: 3rem;
  cursor: pointer;
}
@media screen and (max-width: 1080px) {
  .fast-acquisition, .fast-acquisition-customer {
    width: 100%;
    padding: var(--distance-15);
    float: none;
  }
  .fast-acquisition-customer {
    padding: 0;
  }
}

/*  --- FAST ACQUISITION CUSTOMERS ---  */
.fast-acquisition-customer-list .select-address {
  width: 100%;
  min-height: initial;
  margin-bottom: var(--distance-05);
}
.select-address-list.fast-acquisition-customer-list .select-address:nth-of-type(1), .select-address-list.fast-acquisition-customer-list .select-address:nth-of-type(2n + 1) {
  margin-right: 0;
}
.select-address-list.fast-acquisition-customer-list .select-address:nth-of-type(2), .select-address-list.fast-acquisition-customer-list .select-address:nth-of-type(3n +2) {
  margin-right: 0;
}
.select-address-list.fast-acquisition-customer-list .select-address:nth-of-type(4n) {
  width: 100%;
  margin-right: 0;
}
.fast-acquisition-customer-list .select-address.add-new-address {
  height: 200px;
}
.fast-acquisition-customer-list .select-address {
  padding: var(--distance-15);
  background: var(--light-color);
}
.fast-acquisition-customer-list .address-status {
  margin-bottom: var(--distance-075);
}
.select-address-list.fast-acquisition-customer-list .address-status {
  display: none;
}
.fast-acquisition-customer-list .address-company, .fast-acquisition-customer-list .address-name {
  font-size: var(--font-size-s);
  line-height: initial;
}
.fast-acquisition-customer-list .select-address br {
  display: none;
}
.fast-acquisition-customer-list .address-street::before {
  display: block;
  content: '';
  width: 100%;
  height: 0;
  float: none;
  clear. both;
}
.fast-acquisition-customer-list .address-street, .fast-acquisition-customer-list .address-postcode, .fast-acquisition-customer-list .address-city, .fast-acquisition-customer-list .address-country {
  display: inline !important;
  line-height: 1.2;
}
.fast-acquisition-customer-list .select-address button, .fast-acquisition-customer-list .select-this-address {
  width: 100%;
  margin-top: var(--distance-1) !important;
}
.fast-acquisition-customer-list  .select-address.add-new-address {
  height: auto;
  margin-bottom: var(--distance-1);
}
.fast-acquisition-customer-list .select-address.add-new-address {
  height: auto;
  background: var(--light-color);
  padding-top: var(--distance-075);
  padding-bottom: var(--distance-075);
}
.fast-acquisition-customer-list .select-address.add-new-address .add-new-address-content {
  position: relative;
  width: 180px;
  height: 100%;
  top: initial;
  left: initial;
  margin: 0 auto;
  transform: none;
}
.fast-acquisition-customer-list .select-address.add-new-address .add-new-address-content .add-new-address-icon {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  font-size: var(--font-size-s) !important;
}
.fast-acquisition-customer-list .select-address button, .fast-acquisition-customer-list .select-this-address {
  width: 130px !important;
  float: right;
  clear: right;
  margin-top: 0 !important;
}
.fast-acquisition-customer-list .fast-acquisition-customer-selected {
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--main-color);
  -webkit-transition: max-height 0.3s ease, opacity 0.3s ease,visibility 0.3s ease, margin 0.3s ease, padding 0.3s ease;
  -moz-transition: max-height 0.3s ease, opacity 0.3s ease,visibility 0.3s ease, margin 0.3s ease, padding 0.3s ease;
  -ms-transition: max-height 0.3s ease, opacity 0.3s ease,visibility 0.3s ease, margin 0.3s ease, padding 0.3s ease;
  -o-transition: max-height 0.3s ease, opacity 0.3s ease,visibility 0.3s ease, margin 0.3s ease, padding 0.3s ease;
  transition: max-height 0.3s ease, opacity 0.3s ease,visibility 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}
.fast-acquisition-customer-list .fast-acquisition-customer-selected.selected {
  visibility: visible;
  opacity: 1;
  max-height: 300px;
  margin-bottom: var(--distance-05);
  padding-top: var(--distance-15);
  padding-bottom: var(--distance-15);
}
.fast-acquisition-customer-selected * {
  color: var(--white-color);
}

/*  --- RECAPTCHA ---  */
.g-recaptcha {
  width: 304px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .g-recaptcha {
    max-width: 100%;
    overflow: hidden;
    overflow-x: scroll;
  }
}

/* --- Forgot Password ---*/

.pwd-forgotten-link{
  color: var(--grey-color);
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.forgot-password-container {
  position: absolute;
  width: 55%;
}

@media screen and (min-width: 769px) {
  .forgot-pw-text-container {
    width: 50%;
    float: left;
    margin-right: 2%;
  }

  .forgot-pw-form-container {
    width: 48%;
    float: right;
  }
}

/* --- Search ---*/

.container {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 100px;
}
.container .search {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 80px;
  background: crimson;
  border-radius: 50%;
  transition: all 1s;
  z-index: 4;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
}
.container .search:hover {
  cursor: pointer;
}
.container .search::before {
  content: "";
  position: absolute;
  margin: auto;
  top: 22px;
  right: 0;
  bottom: 0;
  left: 22px;
  width: 12px;
  height: 2px;
  background: white;
  transform: rotate(45deg);
  transition: all .5s;
}
.container .search::after {
  content: "";
  position: absolute;
  margin: auto;
  top: -5px;
  right: 0;
  bottom: 0;
  left: -5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid white;
  transition: all .5s;
}
.container input {
  font-family: 'Inconsolata', monospace;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  outline: none;
  border: none;
  background: crimson;
  color: white;
  text-shadow: 0 0 10px crimson;
  padding: 0 80px 0 20px;
  border-radius: 30px;
  box-shadow: 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2);
  transition: all 1s;
  opacity: 0;
  z-index: 5;
  font-weight: bolder;
  letter-spacing: 0.1em;
}
.container input:hover {
  cursor: pointer;
}
.container input:focus {
  width: 300px;
  opacity: 1;
  cursor: text;
}
.container input:focus ~ .search {
  right: -250px;
  background: #151515;
  z-index: 6;
}
.container input:focus ~ .search::before {
  top: 0;
  left: 0;
  width: 25px;
}
.container input:focus ~ .search::after {
  top: 0;
  left: 0;
  width: 25px;
  height: 2px;
  border: none;
  background: white;
  border-radius: 0%;
  transform: rotate(-45deg);
}
.container input::placeholder {
  color: white;
  opacity: 0.5;
  font-weight: bolder;
}

/* --- News --- */

.post-module {
  position: relative;
  z-index: 1;
  display: block;
  background: va(--white-color);
  min-height: 400px;
  -webkit-box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.post-module:hover,
.hover {
  -webkit-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
}
.post-module:hover .thumbnail img,
.hover .thumbnail img {
  -webkit-transform: translate(-50%, -50%) scale(1.1);
  -moz-transform: translate(-50%, -50%) scale(1.1);
  -ms-transform: translate(-50%, -50%) scale(1.1);
  -o-transform: translate(-50%, -50%) scale(1.1);
  transform: translate(-50%, -50%) scale(1.1);
  opacity: 0.6;
}
.post-module .thumbnail {
  background: var(--black-color);
  height: 258px;
  overflow: hidden;
}
.post-module .thumbnail > div {
  height: 100%;
  display: block;
  position: relative;
}
.post-module .thumbnail .thumbnail-anchor {
  position: relative;
  min-height: 280px;
}
.post-module .thumbnail .date {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  background: #e74c3c;
  width: 55px;
  height: 55px;
  padding: 12.5px 0;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  color: var(--white-color);
  font-weight: 700;
  text-align: center;
  -webkti-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.post-module .thumbnail .date .day {
  font-size: 18px;
}
.post-module .thumbnail .date .month {
  font-size: 12px;
  text-transform: uppercase;
}
.post-module .thumbnail img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  min-width: 100%;
  height: auto;
  max-height: 280px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}
.post-module .post-content {
  position: absolute;
  bottom: 0;
  background: var(--white-color);
  width: 100%;
  padding: 30px;
  -webkti-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  -moz-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  -ms-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  -o-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
  transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
}
.post-module .post-content .category {
  position: absolute;
  top: -34px;
  left: 0;
  background: var(--main-color);
  padding: 10px 15px;
  color: var(--white-color);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}
.post-module .post-content .title {
  margin: 0;
  padding: 0 0 10px;
  color: var(--darkgrey-color);
  font-size: 26px;
  font-weight: 700;
  -moz-hyphens: auto;
  hyphens: auto;
}
.post-module .post-content .sub_title {
  margin: 0;
  padding: 0 0 20px;
  color:var(--main-color);
  font-size: 20px;
  font-weight: 400;
}
.post-module .post-content .description {
  display: none;
  color: var(--dullgrey-color);
  font-size: 14px;
  line-height: 1.8em;
}
.post-module .post-content .post-meta {
  margin: 30px 0 0;
  color: #999999;
}
.post-module .post-content .post-meta .timestamp {
  margin: 0 16px 0 0;
}
.post-module .post-content .post-meta a {
  color: #999999;
  text-decoration: none;
}
.hover .post-content .description {
  display: block !important;
  height: auto !important;
  opacity: 1 !important;
}

.column-news {
  width: 33.333333333%;
  padding: 0 1rem;
  -webkti-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
}

.info {
  width: 300px;
  margin: 50px auto;
  text-align: center;
}
.info h1 {
  margin: 0 0 15px;
  padding: 0;
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}
.info span {
  color: var(--dullgrey-color);
  font-size: 12px;
}
.info span a {
  color: var(--black-color);
  text-decoration: none;
}
.info span .fa {
  color: var(--main-color);
}

@media screen and (max-width:1780px){
  .column-news {
    width: 33.333333333%;
  }
}

@media screen and (max-width: 1240px){
  .column-news {
    width: 50%;
  }
}

@media screen and (max-width:768px){

  .news-listed{
    width:100%;
  }

  .column-news {
    width: 100%;
  }
}

/* --- NEWS-DETAILS --- */

.news-image-container{
  position:relative;
}

.news-text-container-background{
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(7,7,7,0.75) 100%);
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(7,7,7,0.75) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(7,7,7,0.75) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#070707',GradientType=0 );
}

.news-text-container{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  color:var(--white-color);
  text-align:center;
}

.news-image-container img {
  width:100%;
  display:block;
}

/* --- Homepage article slider --- */

.article-slider{
  position:relative;
  overflow:hidden;
}

.article-slider .article-listed{
  margin-top: 0px;
}

.article-slider .swiper-button-prev, .article-slider .swiper-button-next {
  display: block;
  width: 20px;
  height: 30px;
  top: 2.5rem;
  bottom: initial;
  opacity: 0.5;
  pointer-events: visible;
  transform: translateY(-50%);
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  -ms-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.article-slider .swiper-button-prev {
  left: 10rem;
  right: initial;
}
.article-slider-article-number {
  left: var(--distance-1);
}
.article-slider .swiper-button-next{
  left: 11.5rem;
  right: initial;
}

.article-slider .swiper-button-prev:hover, .article-slider .swiper-button-next:hover {
  opacity: 1;
}
.article-slider .swiper-button-prev:before, .article-slider .swiper-button-prev:after, .article-slider .swiper-button-next:before, .article-slider .swiper-button-next:after {
  content: '';
  display: block;
  width: 15px;
  height: 2px;
  background: var(--black-color);
}
.article-slider .swiper-button-prev:before, .article-slider .swiper-button-next:before {
  margin: 8px 0 0 2px;
}
.article-slider .swiper-button-prev:after, .article-slider .swiper-button-next:after {
  margin: 10px 0 0 2px;
}
.article-slider .swiper-button-prev:before, .article-slider .swiper-button-next:after {
  transform: rotate(-55deg);
}
.article-slider .swiper-button-prev:after, .article-slider .swiper-button-next:before {
  transform: rotate(55deg);
}

@media screen and (max-width:768px){
  .article-slider .swiper-button-prev {
    left: 8rem;
    right: initial;
  }

  .article-slider .swiper-button-next{
    left: 9.5rem;
    right: initial;
  }
}


    /* --- Catalog Menu --- */

    .catalog-menu-sub-link {
      line-height: 2.5;
      width: 17%;
      float: left;
      margin: 1em;
      display: block;
      text-align: center;
    }

    .catalog-menu-sub-link:hover > span {
      color: var(--black-color);
    }

    .catalog-menu-sub-link> img {
      width: 100%;
      display: block;
      filter: grayscale(100%);
      transition: 1s ease;
    }

    .catalog-menu-sub-link:hover > img {
      filter: unset;
    }

    .no-text-deco {
      text-decoration: none!important;
    }

    .catalog-menu-link {
      color: var(--black-color);
    }

    .catalog-menu-main-link {
      position: relative;
    }

    .catalog-menu-main-link-container {
      width: auto;
      position: relative;
      margin-right: var(--distance-2);
      padding-right: var(--distance-1);
    }

    .catalog-menu-main-link-container::after {
      border: 3px solid var(--border-color);
      border-radius: 2px;
      border-right: 0;
      border-top: 0;
      content: " ";
      display: block;
      height: .625em;
      pointer-events: none;
      position: absolute;
      top: 0;
      transform: rotate(-45deg);
      transform-origin: center;
      width: .625em;
      right: -.5rem;
      transition: .5s ease;
    }

    .catalog-menu-main-container:hover>.catalog-menu-main-link-container::after {
      transform: rotate(135deg);
      top: 4px;
    }

    .catalog-menu-sub-container-centered {
      width: 70%;
      margin: 0px auto;
    }

    .catalog-menu-container {
      width:70%;
      float: left;
      margin-left: var(--distance-2);
    }

    .catalog-menu-main-container {
      float: left;
      margin-top: var(--distance-1);
      min-height: 37px;
    }

    .catalog-menu-sub-container {
      display: none;
    }

    .catalog-menu-main-container:hover> .catalog-menu-sub-container {
      display: block;
      position: absolute;
      background-color: var(--white-color);
      width: 100%;
      left: var(--distance-0);
      margin-top: var(--distance-1);
      padding-top: var(--distance-2);
      padding-bottom: var(--distance-2);
    }

    /*  --- CATALOG OVERVIEW ---  */
    .articles-list.catalog-list .article-listed {
      position: relative;
      width: 30%;
      float: left;
      margin-top: 5%;
      margin-right: 5%;
    }
    .articles-list.catalog-list .article-listed:nth-of-type(1), .articles-list.catalog-list .article-listed:nth-of-type(2), .articles-list.catalog-list .article-listed:nth-of-type(3) {
      margin-top: 0;
    }
    .articles-list.catalog-list .article-listed:nth-of-type(3n) {
      margin-right: 0;
    }
    .articles-list.catalog-list a {
      display: block;
    }
    .articles-list.catalog-list .article-listed img {
      display: block;
      width: 100%;
    }
    .catalog-listed-label {
      position: absolute;
      left: 50%;
      bottom: var(--distance-1);
      transform: translate(-50%,-50%);
      font-size: var(--font-size-l);
      font-weight: 700;
      color: var(--white-color);
      pointer-events: none;
    }
    .catalog-listed-label-bg {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: var(--distance-5);
      background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
      background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);
      background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cf000000',GradientType=0 );
      pointer-events: none;
    }
    @media screen and (min-width: 1680px) {
      .articles-list.catalog-list .article-listed {
        width: 22.5%;
        float: left;
        margin-top: 3.333%;
        margin-right: 3.333%;
      }
      .articles-list.catalog-list .article-listed:nth-of-type(3n) {
        margin-right: 3.333%;
      }
      .articles-list.catalog-list .article-listed:nth-of-type(1), .articles-list.catalog-list .article-listed:nth-of-type(2), .articles-list.catalog-list .article-listed:nth-of-type(3), .articles-list.catalog-list .article-listed:nth-of-type(4) {
        margin-top: 0;
      }
      .articles-list.catalog-list .article-listed:nth-of-type(4n) {
        margin-right: var(--distance-0);
        clear: none;
      }
      .articles-list.catalog-list .article-listed:nth-of-type(3n+1) {
        clear: none;
      }
    }
    @media screen and (max-width: 1440px) {
      .articles-list.catalog-list .article-listed:nth-of-type(2n+1) {
        clear: none;
      }
    }
    @media screen and (max-width: 768px) {
      .articles-list.catalog-list .article-listed {
        width: 47.5%;
        float: left;
        margin-top: 5%;
        margin-right: 5%;
      }
      .articles-list.catalog-list .article-listed:nth-of-type(2n) {
        margin-right: 0;
      }
      .articles-list.catalog-list .article-listed:nth-of-type(3) {
        margin-top: 5%;
        margin-right: 5%;
      }
    }
    @media screen and (max-width: 380px) {
      .articles-list.catalog-list .article-listed {
        width: 100%;
        float: none;
        margin-top: 5%;
        margin-right: 0%;
      }
      .articles-list.catalog-list .article-listed:nth-of-type(2) {
        margin-top: 5%;
      }
      .articles-list.catalog-list .article-listed:nth-of-type(3) {
        margin-top: 5%;
        margin-right: 0%;
      }
    }

    /*  --- BRANDS OVERVIEW ---  */
    .articles-list.brand-list .article-listed {
      position: relative;
      height: 250px;
      border-radius: var(--border-radius);
      background: var(--light-color);
    }
    .articles-list.brand-list .brand-listed-image {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: auto;
      max-width: 80%;
      height: auto;
      max-height: 175px;
    }
    @media screen and (max-width: 1080px) {
      .articles-list.brand-list .article-listed {
        height: 175px;
      }
    }
    @media screen and (max-width: 380px) {
      .articles-list.brand-list .article-listed {
        width: 47.5%;
        float: left;
        margin-top: 5%;
        margin-right: 5%;
      }
      .articles-list.brand-list .article-listed:nth-of-type(2) {
        margin-top: 0;
      }
      .articles-list.brand-list .article-listed:nth-of-type(2n) {
        margin-right: 0;
      }
      .articles-list.brand-list .article-listed:nth-of-type(3) {
        margin-top: 5%;
        margin-right: 5%;
      }
      .articles-list.brand-list .article-listed {
        height: 100px;
      }
    }

    /* --- Widths --- */
    .img-width-100 {
      width: 100%;
    }

    .width-40 {
      width:40%;
    }

    .width-53 {
      width: 53%;
    }

    .unset-width {
      width: unset;
    }

    /* --- Complaint --- */
    .reclamationSentRight {
      width: 50%;
      margin: 0px auto;
      padding-left: var(--distance-2);
      float: right;
    }
    .reclamationSentLeft {
      width: 50%;
      margin: 0px auto;
      padding-right: var(--distance-2);
      border-right: 1px solid var(--brightgrey-color);
      float: left;
    }

    /*  --- SCROLL TO TOP BUTTON --- */
    .myBtn {
      display: none;
      position: fixed;
      bottom: var(--distance-05);
      right: var( --distance-05);
      z-index: 7777;
      border: none;
      outline: none;
      background-color: var( --lightgrey-color);
      color: var(--dark-color);
      cursor: pointer;
      padding: var(--distance-1);
      font-size: var( --font-size-xs);
      transition: background 0.3s ease, color 0.3s ease;
    }
    .myBtn:hover {
      background-color: var(--main-color);
      color: var(--white-color);
    }
    .myBtn svg {
      margin-right: 0;
    }

    @media screen and (max-width: 768px) {
      .myBtn {
        bottom: 57px;
      }
    }

    /* --- CONTAINER --- */

    .data-wrapper {
      width: 50%;
      margin: 0px auto;
      height: 250px;
    }
    .data-left {
      width: 50%;
      float: left;
      text-align: right;
      padding-right: var(--distance-2);
    }
    .data-right {
      width: 50%;
      float: right;
      padding-left: var(--distance-2);
      border-left: 1px solid var(--brightgrey-color);
    }
    @media screen and (max-width: 768px) {
      .shipping-right {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--brightgrey-color);
        padding-top: var(--distance-2);
        padding-left: var(--distance-0);
        margin-top: var(--distance-2);
      }
      .shipping-left {
        width: 100%;
        float: unset;
        padding-right: var(--distance-0);
      }
      .data-wrapper {
        width: 100%;
        margin: 0px auto;
        height: none;
      }
      .data-left {
        width: 100%;
        float: unset;
        text-align: center;
        padding-right: var(--distance-0);
      }
      .data-right {
        width: 100%;
        text-align: center;
        padding-left: var(--distance-0);
        border-left: none;
        border-top: 1px solid var(--brightgrey-color);
        padding-top: var(--distance-2);
        margin-top: var(--distance-2);
        margin-bottom: var(--distance-2);
      }
    }

    @media screen and (min-width: 769px) {
      .contactContainer {
        width: 100%;
        max-width: 990px;
        margin: 0px auto;
      }
      .shipping-right {
        width:50%;
        margin: 0px auto;
        float: right;
        border-left: 1px solid var(--brightgrey-color);
        padding-left: var(--distance-2);
      }
      .shipping-left {
        width: 50%;
        margin: 0px auto;
        float: left;
        padding-right: var(--distance-2);
      }
      .contact-cont-left {
        width: 47%;
        float: left;
      }

      .contact-cont-right {
        width: 53%;
        float: right;
        border-left: 1px solid #acacac;
        padding-left: 3%;
      }
    }

    /* --- Amazon Pay --- */

    #divPayment{
      height:400px;
    }

    #amzlgin121417_LoginWithAmazon, #login_with_amazon_LoginWithAmazon, #amzlgin121417_1_LoginWithAmazon{
      display: block;
      text-align: center;
    }

    .amzn-logout-wk{
      display: block;
      margin: 0 auto;
      text-decoration: underline;
    }

    .amazon-divider{
      display: inline-block;
      width: 100%;
      height: auto;
      position: relative;
      text-align: center;
      color: var(--brightgrey-color);
      margin-top: var(--distance-15);
      margin-bottom: var(--distance-15);
    }
    .amazon-divider::before, .amazon-divider::after{
      display: block;
      width: calc(50% - 30px);
      height: 1px;
      position: absolute;
      top:8px;
      content: "";
      background-color: var(--lightgrey-color);
    }
    
    .amazon-divider::before{
      left:0;
    }
    .amazon-divider::after{
      right:0;
    }

    .amzn-sidebar-button{
      float: right;
      width: 50%;
    }
    .amzn-sidebar-button div{
      display: block;
      width: 200px;
      margin: var(--distance-1) auto;
    }
    @media screen and (max-width: 768px) {
        .amzn-sidebar-button{
            margin: 0 auto;
            width: 200px;
            padding-top: var(--distance-3);
            float: unset;
        }
    }

    /* --- CONTACT --- */

    .contact-content{
      width:600px;
      margin: 0 auto;
    }

    @media screen and (max-width:720px){
      .contact-content{
        width:auto;
      }
    }

/* --- IMPRINT --- */
.imprint-left {
  margin-right: var(--distance-15);
  padding-right: var(--distance-3);
  padding-bottom: var(--distance-075);
  border-right-width: var(--border-width);
  border-right-style: var(--border-style);
  border-right-color: var(--lightgrey-color);
  text-align:right;
}
@media screen and (max-width: 768px) {
  .imprint-left {
    margin-right: var(--distance-15);
    padding-right: var(--distance-3);
    padding-bottom: var(--distance-075);
    border-right: none;
    text-align: left;
  }
}

/* --- TOOLTIP --- */

.pwToolTipContainer > p {
    color: var(--brightgrey-color);
}

.pwToolTipContainer:hover {
    cursor: pointer;
}

.pwToolTipContainer:hover > div {
    display: block!important;
    cursor: auto;
}

.pwToolTip {
    position: absolute;
    background: var(--bright-color);
    padding: var(--distance-1);
    border: 1px solid var(--lightgrey-color);
    border-radius: 5px;
    display: none;
    margin-top: var(--distance-05);
    color: var(--brightgrey-color);
    z-index: 2;
}

.pwToolTipList {
    margin-top: var(--distance-1);
}

.pwToolTipList > li {
    float: left;
    clear: left;
    margin: .25rem 0 .25rem 0
}

.pwToolTipList > li .svg-inline--fa {
    height: .9em;
}

/* --- TOOLTIP NEW --- */
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip span[role=tooltip] {
  display: none;
}
.tooltip:hover span[role=tooltip] {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  min-width: 100%;
  max-width: 300%;
  padding: 0.5em;
  z-index: 100;
  color: var(--white-color) !important;
  line-height: var(--line-height-s);
  text-align: center;
  background-color: var(--sub-color);
  border: solid 1px var(--main-color);
  border-radius: var(--border-radius);
  transform: translate(-50%, -125%);
}
.tooltip-inner {
  position: relative;
  color: var(--white-color);
}
.tooltip-inner::after {
  display: block;
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: var(--sub-color);
  transform: translate(-50%, 0) rotate(45deg);
}
@media screen and (min-width: 992px) {
  .tooltip {
    width: auto !important;
  }
}




.shop-area-head {
  height: 345px;
}
@media screen and (max-width: 1680px) {
  .shop-area-head-image {
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    max-height: 101%;
  }
}
@media screen and (max-width: 768px) {
  .shop-area-head {
    height: 145px;
  }
  .shop-area-head-image {
    width: 180%;
    min-width: initial;
    height: auto;
    min-height: initial;
    max-height: initial;
  }
  .shop-area-head .wrap {
    bottom: var(--distance-15);
  }
}