/* -------------- Fonts -------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;900&display=swap');

@import url("https://use.typekit.net/wpo0lwn.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
  font-family: DINPro;
  font-weight: 100;
  src: url(../fonts/DINPro-Light.otf);
}

@font-face {
  font-weight: 300;
  font-family: DINPro;
  src: url(../fonts/DINPro-Regular.otf);
}

@font-face {
  font-weight: 500;
  font-family: DINPro;
  src: url(../fonts/DINPro-Medium.otf);
}

@font-face {
  font-weight: 600;
  font-family: DINPro;
  src: url(../fonts/DINPro-Bold.ttf);
}

/* -------------- Variables -------------- */
:root {
  --color-white: #FFFFFF;
  --color-black: #000000;

  --color-darkgrey-mid: #292929;

  --color-grey-light: #b7b3b3;
  --color-grey-mid: #707070;

  --color-lightgrey-mid: #EFEFEF;
  --color-lightgrey-dark: #e2e2e2;
  --color-lightgrey-darker: ;
  --color-lightgrey-darkest: #b0b0b0;

  --color-beige-mid: #f6efe6;
  --color-beige-dark: #cca97a;

  --color-orange-mid: #FE5000;

  --color-green-mid: #005831;

  --font-size-small: 13.4px;
  --font-size-default: 15px;

  --font-size-medium: 18px;
  --font-size-large: 20px;
  --font-size-xlarge: 25px;
  --font-size-xxlarge: 30px;
  --font-size-xxxlarge: 35px;
  --font-size-4xlarge: 40px;
  --font-size-5xlarge: 45px;

  --input-button-height: 42px;

  --shadow-blocks: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);

  --overlay-half: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 85%, rgba(0, 0, 0, 0.6) 100%);

}

/* Standard Animations */
@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* -------------- Default overwrite -------------- */
/* Overflow check
* {
  outline: 1px solid #f00 !important;
}
*/

body {
  font-family: "alverata", serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--font-size-default);
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "alverata", serif;
  line-height: 1.2;
  font-weight: 600;
}

h1,
.h1 {
  font-weight: 700;
}

@media (min-width: 1200px) {

  h1,
  .h1 {
    font-size: 3rem;
  }

  h2,
  .h2 {
    font-size: 2.4rem;
  }
}

.header_divider::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 5px;
  background-color: var(--color-orange-mid);
  left: 0px;
  bottom: -12px;
}

b,
strong {
  font-weight: 700;
}

a,
a:hover {
  text-decoration: none;
  color: inherit;
}

small,
.small {
  font-size: 0.7em;
}

input {
  border: none;
  height: var(--input-button-height);
  padding: 0px 20px;
  border-radius: 0px;
  font-weight: 200;
}

textarea {
  border: none;
  padding: 0px 20px;
  border-radius: 0px;
  font-weight: 200;
}

header#wrapper-navbar {
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 100;
}

/* -------------- Bootstrap overwrite -------------- */
.wrapper {
  padding: 0px;
  margin-top: 70px;
}

.bg-primary {
  background-color: var(--color-white) !important;
}

.border-light {
  border-color: rgba(256, 256, 256, 0.3) !important;
}

.navbar-light .navbar-nav .nav-link {
  color: #000;
  font-family: "alverata", serif;
  font-weight: 600;
  padding-right: 2rem;
}

.nav-link[aria-current="page"] {
  color: var(--color-orange-mid) !important;
}

.accordion-button {
  background-color: transparent;
}

.accordion-item {
  background-color: transparent;
  border: 0px;
}

.accordion-button:not(.collapsed) {
  color: inherit;
  background-color: inherit;
  box-shadow: none;
}

.accordion-button:focus {
  z-index: 3;
  border-color: inherit;
  outline: 0;
  box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}

/* -------------- Custom -------------- */
/* Global */
.alt_font {
  font-family: 'alverata', serif;
}

.alt_font_montserrat {
  font-family: 'montserrat', serif;
}

.color_white {
  color: var(--color-white);
}

.color_black {
  color: var(--color-black) !important;
}

.color_grey_mid {
  color: var(--color-grey-mid);
}

.color_beige_mid {
  color: var(--color-beige-mid);
}

.color_beige_dark {
  color: var(--color-beige-dark);
}

.color_orange_mid {
  color: var(--color-orange-mid);
}

.bgcolor_orange_mid {
  background-color: var(--color-orange-mid) !important;
  color: var(--color-white);
}

.bgcolor_white {
  background-color: var(--color-white);
}

.bgcolor_black {
  background-color: var(--color-black);
  color: var(--color-white);
}

.bgcolor_lightgrey_mid {
  background-color: var(--color-lightgrey-mid);
}

.bgcolor_beige_mid {
  background-color: var(--color-beige-mid);
}

.bgcolor_beige_dark {
  background-color: var(--color-beige-dark);
}

.bg_orange_white_horizontal::after {
  content: '';
  height: 148px;
  width: 100%;
  position: absolute;
  background-color: var(--color-orange-mid);
  top: 88px;
  left: 0px;
}

.font_sm {
  font-size: var(--font-size-small);
}

.font_std {
  font-size: var(--font-size-default);
}

.font_md {
  font-size: var(--font-size-medium);
}

.font_lg {
  font-size: var(--font-size-large);
}

.font_xl {
  font-size: var(--font-size-xlarge);
}

.font_xxl {
  font-size: var(--font-size-xxlarge);
}

.font_xxxl {
  font-size: var(--font-size-xxxlarge);
}

.font_4xl {
  font-size: var(--font-size-4xlarge);
}

.font_5xl {
  font-size: var(--font-size-5xlarge);
}

@media (min-width: 992px) {
  body {
    line-height: 1.2;
  }

  .font_lg_md {
    font-size: var(--font-size-medium);
  }

  .font_lg_lg {
    font-size: var(--font-size-large);
  }

  .font_lg_xl {
    font-size: var(--font-size-xlarge);
  }

  .font_lg_xxl {
    font-size: var(--font-size-xxlarge);
  }

  .font_lg_xxxl {
    font-size: var(--font-size-xxxlarge);
  }

  .font_lg_4xl {
    font-size: var(--font-size-4xlarge);
  }

  .font_lg_5xl {
    font-size: var(--font-size-5xlarge);
  }
}

/* Container padding that puts row > col content at the same 60px page edge as the homepage sections */
@media (min-width: 992px) {
  .px-lg-edge {
    padding-left: 3.75rem !important;
    padding-right: 3.75rem !important;
  }
}

.icon_xs {
  width: 20px;
}

.icon_s {
  width: 40px;
  height: max-content;
}

.icon_m {
  width: 60px;
}

.iconh_m {
  height: 60px;
}

.icon_m_l {
  width: 80px;
}

.iconh_m_l {
  height: 80px;
}

.icon_l {
  width: 100px;
}

.iconh_l {
  height: 100px;
}

.icon_xl {
  width: 150px;
}

.icon_xxl {
  width: 200px;
}

.icon_xxxl {
  width: 250px;
}

.font_roboto {
  font-family: 'Roboto Slab', serif;
}

.font_alverata {
  font-family: 'alverata', serif;
}

.font_w100 {
  font-weight: 100 !important;
}

.font_w300 {
  font-weight: 300 !important;
}

.font_w400 {
  font-weight: 400 !important;
}

.font_w500 {
  font-weight: 500 !important;
}

.font_w600 {
  font-weight: 600 !important;
}

.font_w700 {
  font-weight: 700 !important;
}

.font_w800 {
  font-weight: 800 !important;
}

.z_index_1 {
  z-index: 1;
  position: relative;
}

.udb_label {
  background-color: var(--color-orange-mid);
  font-family: "alverata", serif;
  font-weight: 600;
  color: var(--color-white);
  display: inline-block;
  height: var(--input-button-height);
  padding: 10px 20px 5px;
  clip-path: polygon(0% 0%,
      0% 100%,
      95% 100%,
      100% 60%,
      100% 0%);
}

.udb_button {
  background-color: var(--color-orange-mid);
  border-radius: 0px;
  font-family: "alverata", serif;
  font-weight: 600;
  font-size: initial;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--input-button-height);
  text-align: center;
  padding: 5px 20px 5px;
  min-width: 160px;
  clip-path: polygon(0% 0%,
      0% 100%,
      95% 100%,
      100% 60%,
      100% 0%);
  /* line-height: 2.1; fix voor verschil met input fields (naast elkaar) */
}

.udb_button:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.udb_button_black {
  background-color: var(--color-black);
}

.udb_label_grey {
  background-color: var(--color-beige-mid);
  color: var(--color-black);
}

.udb_label_black {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
}

.button_underline {
  border-bottom: 3px solid var(--color-orange-mid);
  display: inline-block;
  padding: 0px 0px 5px opx;
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
}

.orange_underline_small::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0px;
  width: 100px;
  border-bottom: var(--color-orange-mid) 4px solid;
}

.white_underline_small {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0px;
  width: 100px;
  border-bottom: var(--color-white) 4px solid;
}

.right_slope img {
  height: 700px;
}

.slope_right_left {
  clip-path: polygon(0 0, 100% 0, 65% 100%, 0% 100%);
}

.object-fit-cover {
  object-fit: cover;
}

/* Header */
.header_logo-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 666px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Standaard: klein logo op alle pagina's */
.header_logo {
  width: 120px;
  height: 600px;
  margin-bottom: -50px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/slope_left_orange.svg);
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.4));
  transform-origin: top left;
}

.header_logo a {
  position: relative;
  display: inline-block;
  perspective: 1000px;
  pointer-events: auto;
  margin: 25px 0 0 22px;
}

.header_logo img {
  backface-visibility: hidden;
  max-height: 38px;
  height: auto;
  display: block;
}

/* Achterkant-logo standaard zichtbaar bij kleine variant */
.header_logo .logo-back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(360deg);
}

.header_logo .logo-front {
  transform: rotateY(180deg);
}

/* Alleen homepage: grote intro-versie */
.home .header_logo {
  width: 245px;
  transition: width 0.4s ease-in-out;
  animation: logoScaleIn 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  will-change: transform, width;
}

.home .header_logo a {
  margin: 56px 0 0 26px;
  transition: margin 0.4s ease-in-out;
}

.home .header_logo img {
  max-height: 80px;
  transition:
    max-height 0.4s ease-in-out,
    transform 0.4s ease-in-out 0.3s;
}

/* Homepage start: voorkant-logo zichtbaar */
.home .header_logo .logo-front {
  transform: rotateY(0deg);
}

.home .header_logo .logo-back {
  transform: rotateY(180deg);
}

/* Intro animatie */
@keyframes logoScaleIn {
  0% {
    transform: scale(2.5);
  }

  60% {
    transform: scale(2.5);
  }

  100% {
    transform: scale(1);
  }
}

/* Homepage na scroll: kleine variant */
.home .header_logo.header_logo_small {
  width: 100px;
}

.home .header_logo.header_logo_small a {
  margin: 15px 0 0 15px;
}

.home .header_logo.header_logo_small img {
  max-height: 38px;
}

.home .header_logo.header_logo_small .logo-front {
  transform: rotateY(180deg);
}

.home .header_logo.header_logo_small .logo-back {
  transform: rotateY(360deg);
}

#main-menu li:last-child a {
  padding-right: 0px;
}

.navbar-toggler {
  padding: 8px 7px;
  border-radius: 50px;
}

.navbar-light .navbar-toggler {
  border-color: transparent;
  border: 2px solid var(--color-black);
  background-color: var(--color-white);
  z-index: 10;
}

.navbar-toggler:focus {
  box-shadow: none;
}


/* Footer */
.page-template-homepage #wrapper-footer,
#wrapper-footer {
  margin: 0px 0px 0px 0px;
}

.pre_footer {
  margin: -100px 0px 0px 0px;
}

footer ul,
ul.ul_clean {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

/* footer h2 {
  font-size: calc(3rem + 0.9vw) !important;
} */

footer h3,
footer h3 button {
  color: var(--color-orange-mid) !important;
  font-size: 18px !important;
  font-weight: 600;
}

.footer_newsletter {
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}

.footer_main {
  border-top: 10px solid var(--color-orange-mid);
  margin-top: -1px;
}

.footer_mobile_main ul li {
  margin: 0px 0px 15px 0px;
}

.footer_logo img {
  width: 240px;
}

.footer_bottom {
  font-size: 14px;
}

.footer_bottom span {
  color: var(--color-orange-mid);
  margin: 0px 15px;
}

@media (max-width: 992px) {
  .udb_button {
    padding: 5px 16px 5px;
  }

  .right_slope img {
    height: 190px;
  }

  .header_logo {
    width: 104px;
    z-index: 10;
  }

  .header_logo img {
    max-height: 30px;
  }

  .navbar>.container-fluid {
    justify-content: flex-end;
  }

  .navbar-toggler span {
    display: block;
    background-color: #4f4f4f;
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
  }

  .navbar-toggler span:nth-child(1) {
    transform: translate(0%, 0%) rotate(0deg);
  }

  .navbar-toggler span:nth-child(2) {
    transform: translate(0%, 0%) rotate(0deg);
  }

  .navbar-toggler span:nth-child(1) {
    margin-top: 0.3em;
  }

  .navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translate(15%, -150%) rotate(45deg);
  }

  .navbar-toggler:not(.collapsed) span:nth-child(2) {
    transform: translate(15%, 150%) rotate(-45deg);
  }

  .navbar-collapse {
    position: fixed;
    top: 0;
    right: -100%;
    /* Off-screen initially */
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: right 0.2s;
    padding-top: 60px;
  }

  .navbar-collapse.show {
    right: 0;
   /* max-height: 100%;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch; */
  }
/*
  .dropdown-menu.show {
    display: block;
    border: none;
  }

  .dropdown-menu .dropdown-item {
    font-size: 14px;
    text-align: center;
  }
*/

  .navbar-nav a {
    padding: 15px;
    text-decoration: none;
    font-size: 26px;
    color: var(--color-black);
    display: block;
    transition: 0.3s;
  }

  .navbar-nav a:hover {
    background-color: ;
  }

  .navbar-nav li {
    border-bottom: var(--color-orange-mid) 1px solid;
    font-weight: 500;
    position: relative;
  }

  .navbar-nav li a:after {
    background-image: url(../img/arrow_orange_right.svg);
    width: 12px;
    height: 20px;
    content: '';
    display: inline-block;
    background-repeat: no-repeat;
    position: absolute;
    right: 0px;
    top: 27px;
  }

  #main-menu li:last-child a {
    padding-right: 2rem;
  }

  .wrapper {
    margin-top: 75px;
  }

  .page-template-homepage #wrapper-footer,
  #wrapper-footer {
    margin: 0px 0px 0px 0px;
  }

  .footer_newsletter {
    clip-path: none;
    position: relative;
  }

  .footer_newsletter .right_slope img {
    height: 80px;
  }
}

@media (max-width: 768px) {
  .right_slope img {
    height: 104px;
  }
}

@media (max-width: 375px) {
  .footer_bottom span {
    color: var(--color-orange-mid);
    margin: 0px 5px;
  }
}

/* Homepage */
.home_hero_bg_ct {
  background-image: url(../../../uploads/2026/05/Martens-footer_1.svg);
  background-repeat: no-repeat;
  background-position: bottom 65px left 60px;
  background-size: 76%;
}

.home_hero_ct {
  height: 600px;
  transition: width 1s ease;
  padding: 0px 140px 0px 0px;
}

@media screen and (max-height:800px) {
  .home_hero_ct {
    padding-right: 100px;
  }
}

.home_hero_ct_text {
  position: absolute;
  bottom: 120px;
  left: 0px;
  /* padding-right: 145px !important; */
  z-index: 1;
  animation: slideInFromRight 0.5s ease-in-out 2s both;
}

.home_hero_ct_text p,
.intro_text p,
p.intro_text,
.brandpage_home_hero_ct p,
.lh-std {
  line-height: 1.5;
}

.home_hero_ct img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: right;
  z-index: -2;
  position: relative;
}

.home_hero_main_ct {
  margin: 0px 0px 0px 0px;
  display: flex;
  align-items: stretch;
  height: 100%;
}

.home_hero_mask_image {
  height: 100%;
  width: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-left: -292px;
  -webkit-mask-image: url(../img/form_1.svg);
  mask-image: url(../img/form_1.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-size: 400%;
  mask-position: top right;
  border-bottom: 5px solid var(--color-orange-mid);
}

.mask_image_1 {
  z-index: 3;
  width: 100%;
  margin-left: -242px;
}

.mask_image_2 {
  z-index: 2;
}

.mask_image_3 {
  z-index: 1;
  background-size: cover;
}

.page-id-175 .mask_image_1 {
  background-position: 12px -244px;
  background-size: 132% !important;
}

.home_hero_main_ct .udb_button {
  position: absolute;
  bottom: -7px;
  right: 26px;
  clip-path: polygon(0% 0%, 0% 100%, 90% 100%, 100% 60%, 100% 0%);
}

.hero_switch {
  position: relative;
}

.hero_layer {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  will-change: opacity;
}

.hero_layer.is-active {
  opacity: 1;
}

/* .usp_card:hover {
  box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2); 
  background-image: url(../img/bg_square_bevel_corner.svg);
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
  background-position: right -16px bottom;
  background-size: auto 100%;
} 
  
.usp_card:hover .usp_button {
  border-bottom: 3px solid var(--color-orange-mid);
}

*/

.usp_card_text {
  height: 42px;
}

.usp_button {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  display: inline-block;
}

@media (max-width: 992px) {
  .home_usps_ct .font_lg {
    font-size: 15px !important;
  }

  .home_hero_bg_ct {
    background-position: bottom 46px left 42px;
  }
}

@media (min-width: 992px) {
  .brands-swiper {
    margin-left: 4rem !important;
    overflow: visible !important;
  }

  .brands-swiper .slobe_card {
    width: 33% !important;
  }
}

.home_hero_ct_bottom {
  height: 80px;
}

.home_productrange_ct {
  position: relative;
  background: linear-gradient(180deg, rgba(254, 80, 0, 1) 30%, rgba(255, 255, 255, 1) 30%);
}

.home_productrange_ct::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/slope_left_orange.svg);
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  width: 300px;
  z-index: 0;
}

.home_productrange_ct::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(../img/slope_right_beige.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  height: 100%;
  width: 300px;
  z-index: 0;
}

.home_productrange_ct .slobe_card_inner h3 {
  font-size: 23px !important;
}

.home_range_ct {
  height: 682px;
  background-image: url(../../../uploads/2025/12/productrange_bg_top.webp);
  background-position: bottom 154px center;
  background-size: 100%;
  background-repeat: no-repeat;
  color: var(--color-white);
}

.home_range_ct_title {
  position: absolute;
  left: 80px;
  top: 42px;
}

.range_product_ct {
  margin-top: 256px;
  padding: 0px 40px;
  background-image: url(../../../uploads/2025/12/productrange_bg_bottom.webp);
  background-position: bottom -10px center;
  background-repeat: no-repeat;
  height: 426px;
}

.range_product img {
  height: 300px;
  object-fit: cover;
  transform-origin: bottom center;
  transition: transform 250ms ease;
}

.range_product h3,
#carousel_range h3 {
  font-family: 'Roboto Slab', serif;
  font-weight: 700 !important;
  font-size: 17px;
  margin-bottom: 4px;
  white-space: nowrap;
}

.range_product img:hover {
  transform: translateY(10px) scale(1.5);
}

.range_product_title {
  margin-top: 115px;
  font-size: 18px;
  display: block;
  opacity: 0;
  transform: translateY(-200%);
  /* Move the element up by 100% of its height */
  transition: opacity 0.3s 0.2s, transform 0.3s 0.2s;
  border-bottom: 2px solid var(--color-orange-mid);
}

.range_product_text {
  font-size: 14px;
  display: block;
  opacity: 0;
  transform: translateY(0%);
  /* Move the element up by 100% of its height */
  transition: opacity 0.5s 0.1s, transform 0.5s 0.1s;
}

.range_product:hover .range_product_title,
.range_product:hover .range_product_text {
  opacity: 1;
  /* Fade in by changing opacity to 1 */
  transform: translateY(0);
  /* Reset the transform to move it down to its original position */
}

/* .range_product div:hover {
  display: inline-block;
} */

/* */
.home_range_mobile_ct {
  height: auto;
  background-image: url(../img/productrange_bg.jpg);
  background-position: center -127px;
  background-repeat: no-repeat;
  background-size: inherit;
  color: var(--color-white);
  overflow: hidden;
  margin-bottom: -7px;

}

.home_range_mobile_carousel_ct {
  width: 50%;
  display: inline-block;
}

#carousel_range .owl-wrapper .item {
  height: 575px;
}

#carousel_range img {
  width: 140px;
  padding: 44px 0px 0px;
  height: auto;
  display: inline-block;
}

#carousel_range .active img {
  width: 170px;
  height: auto;
  display: inline-block;
  padding: 0px;
}

#carousel_range .carousel_range_title {
  font-size: 24px;
  display: block;
  opacity: 0;
  transition: opacity 0.3s 0.2s, transform 0.3s 0.2s;
  border-bottom: 3px solid var(--color-orange-mid);
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  margin: 30px 0px 2px;
}

#carousel_range .carousel_range_text {
  font-size: 16px;
  display: block;
  opacity: 0;
  transform: translateY(0%);
  /* Move the element up by 100% of its height */
  transition: opacity 0.5s 0.1s, transform 0.5s 0.1s;
  width: 200%;
  margin-left: -50%;
}

#carousel_range .active .carousel_range_title,
#carousel_range .active .carousel_range_text {
  opacity: 1;
}

#carousel_range .owl-stage-outer {
  position: relative !important;
  overflow: inherit !important;
}

.range_controls .owl-dots button {
  width: 8.33%;
  background: 0 0;
  border: 0px;
  padding: 0px;
  position: relative;
}

.range_controls button.active .range_controls_pointer {
  padding: 0px 0px 0px;
  clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
  background-color: var(--color-orange-mid);
  width: 16px;
  height: 16px;
  display: block;
  left: calc(50% - 8px);
  position: absolute;
  bottom: -16px;
}


/* desktop */
/* @media (min-width: 1780px) {
  .usp_card:hover {
    background-position: right -0px bottom;
    /*background-size: 100% 130%;*/
/*
	background-repeat: no-repeat;
  }
} 
@media (min-width: 1500px) {
  .usp_card:hover {
    background-position: right -0px bottom;
    background-size: cover;
  }
}
*/

@media (min-width: 992px) {
  .col-lg-11.home_hero_ct {
    width: 91.66666667%;
  }

  .range_product_title {
    margin-top: 66px;
    font-size: 18px;
    display: block;
    opacity: 0;
    transform: translateY(-200%);
    /* Move the element up by 100% of its height */
    transition: opacity 0.3s 0.2s, transform 0.3s 0.2s;
    border-bottom: 2px solid var(--color-orange-mid);
  }

  .range_product_text {
    font-size: 16px;
    display: block;
    opacity: 0;
    transform: translateY(0%);
    /* Move the element up by 100% of its height */
    transition: opacity 0.5s 0.1s, transform 0.5s 0.1s;
    position: absolute !important;
    width: 200%;
    margin-left: -58%;
  }

  .range_product:first-child .range_product_text {
    margin-left: -25%;
  }

  .range_product:nth-child(7) .range_product_text {
    width: 220%;
    margin-left: -68%;
  }

}

@media (max-width: 1350px) and (min-width: 992px) {
  .home_range_ct {
    height: 620px;
  }

  .range_product img {
    height: 240px;
  }

  .range_product_title {
    margin-top: 104px;
  }
}

/* Mobiel */
@media (max-width: 380px) {
  .home_range_mobile_ct {
    background-position: center -145px;
  }
}

@media (max-width: 992px) {

  .home_hero_ct,
  .brandpage_home_hero_ct {
    height: calc(100vh - 300px) !important;
    transition: width 1s ease;
    max-height: 550px;
    min-height: 450px;
  }

  .brandpage_home_hero_ct {
    width: 70%;
  }

  .home_hero_ct_text {
    position: initial;
    animation: none;
  }

  .home_hero_ct img {
    object-position: calc(100% + 70px);
  }

  .home_hero_main_ct {
    margin: 0px -270px 0px 0px;
  }

  .home_hero_mask_image {
    margin-left: -220px;
  }

  .usp_card:hover {
    /* box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2); */
    background-image: none;
    filter: none;
    background-position: inherit;
    background-size: auto;
  }

  .usp_card img {
    width: 65px !important;
  }

  /* .usp_card {
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2);
    background-image: url(../img/bg_grey_square_bevel_corner.svg);
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
    background-position: right 0px bottom;
    background-size: cover;
    width: calc(100% + 60px);
    margin-left: -30px;
  }
	
  .usp_card_white {
    background-image: url(../img/bg_square_bevel_corner.svg);
  }
  
  .usp_card:hover {
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2); 
    background-image: url(../img/bg_square_bevel_corner.svg);
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
    background-position: right 0px bottom;
    background-size: cover;
  } */

  .usp_button {
    border-bottom: 3px solid var(--color-orange-mid);
    margin: 0 auto !important;
    display: table;
  }

  .home_hero_ct_bottom {
    height: 46px;
  }

}

@media (min-height: 720px) and (max-width: 992px) {
  .home_hero_mask_image {
    margin-left: -260px;
  }
}

@media (min-width: 992px) {

  /* Keep icon size stable now the columns are wider */
  .home_proces_ct img {
    max-width: 130px;
  }

  /* Connector line from each icon to the next one, so it follows the columns at any width */
  .home_proces_step {
    position: relative;
  }

  .home_proces_step:not(:last-child)::after {
    content: '';
    position: absolute;
    border-top: 2px solid var(--color-black);
    top: 65px;
    left: 200px;
    right: 12px;
  }
}

/* Global section (desktop): bottle cases column is 22.5% smaller, bottles 30% smaller */
@media (min-width: 1200px) {

  /* Cases sit next to the map again: undo the ps-lg-6 used while stacked */
  .home_global_cases {
    padding-left: 2.2rem !important;
  }

  .home_global_cases p {
    font-size: 11.6px;
  }

  .home_global_cases h6 {
    font-size: 12.4px;
  }

  .home_global_ct .icon_s {
    width: 28px;
  }

  /* Bottom padding = button height + mt-4, so the map caption lines up with the italic text in the right column */
  .home_global_left {
    padding-bottom: 66px;
  }
}

.home_insights_ct::before {
  content: '';
  background-image: url(../../../uploads/2026/06/mub_bottleneck-scaled.webp);
  background-repeat: no-repeat;
  background-size: 115%;
  background-position: top left;
  position: absolute;
  height: 100%;
  width: 70%;
  top: 0;
  left: 0;
  z-index: -1;
}

.home_insights_ct::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 101%;
  background-image: url(../img/slope_right_white.svg);
  background-size: 100%;
  background-position: bottom right;
}

/* Above the slopes (z-index -2), so they never cover the map on narrow screens.
   Multiply makes the map's white background see-through, so the slopes still show behind it. */
.home_global_ct #world_map {
  position: relative;
  z-index: -1;
  mix-blend-mode: multiply;
}

.home_global_ct::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/slope_left_beige.svg);
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  width: 300px;
  z-index: -2;
}

.home_global_ct::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 100%;
  background-image: url(../img/slope_right_beige.svg);
  background-size: 100%;
  background-position: bottom right;
  z-index: -2;
}

.home_company_ct {
  height: 700px;
}

.quickscan_ct {
  background-image: url(../img/quickscan_bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.stories_quotes_ct h2 {
  font-size: 2.4rem;
}


.carousel_news_overlay {
  background-size: cover;
  background-repeat: no-repeat;
}

.carousel_news_overlay>div {
  position: absolute;
  text-align: right;
  top: 300px;
  right: 60px;
  z-index: 2;
  width: 40%;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel_news_overlay::after {
  content: "";
  background-image: url(../img/dark_bg_slope_left.png);
  opacity: 0.8;
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  height: 100%;
  z-index: 1;
  transition: width 0.3s ease;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: cover;
}

.carousel_news_overlay>img {
  width: 150px;
  position: absolute;
  bottom: 120px;
  right: 0px;
  z-index: 2;
  opacity: 0;
  transition: right 0.3s, opacity 0.3s;
}

/* .carousel_news_overlay h2 {
  font-size: calc(1.8rem + 0.9vw) !important;
} */

#carousel_quotes .carousel-item>div {
  position: absolute;
  top: 150px;
}

.quote {
  font-family: "alverata", serif;
  font-weight: 200;
  font-size: 34px;
  font-style: italic;
  line-height: 1.1;
}

.home_sustainability {
  background-color: var(--color-green-mid);
}

.home_sustainability>div {
  position: absolute;
  top: 300px;
  left: 60px;
}

.home_sustainability_text {
  visibility: visible;
  position: initial;
}

.home_sustainability img {
  height: 340px;
}

.brandpage_subgroup .brand_image {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
.home_sustainability:hover .home_sustainability_text {
  visibility: visible;
  position: initial;
}

.home_sustainability:hover div {
  bottom: 0px;
}

.home_sustainability_text > div > i > img {
  opacity: 0;
  margin-top: 20px;
  transition: opacity 0.3s ease 0.2s, margin-top 0.3s ease 0.2s;
}

.home_sustainability:hover .home_sustainability_text > div > i > img {
  opacity: 1;
  margin-top: 0px;
}

.home_sustainability .right_slope {
  display: none;
}
*/

@media (min-width: 992px) {
  .home_facts_figures_ct h2 {
    font-size: 25.7px;
    /* h4 (24px) +7% */
    line-height: 1.5;
  }

  .ff_caption {
    font-size: 13.5px;
    /* 18px -25% */
  }
}

.home_cta_ct p {
  font-size: 17.4px;
  /* 15px +16% */
}

.home_facts_figures_ct .number {
  font-size: 62px;
  font-weight: 700;
  color: var(--color-orange-mid);
  margin: 0px 0px 0px 0px;
  /* Width scales with font-size and fits the widest number (1758), so all captions line up */
  width: 3.6em;
  flex-shrink: 0;
}

/* Hard <br>s in captions only fit at wide desktop widths */
@media (max-width: 1499px) {
  .home_facts_figures_ct .ff_caption br {
    display: none;
  }
}


.home_facts_figures_ct_video {
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-mask-image: url(../img/form_1.svg);
  mask-image: url(../img/form_1.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-size: 400%;
  mask-position: -504px;
}

@media screen and (max-width: 992px) {
  .home_proces_ct img {
    width: 60px;
    margin: 0px 15px 0px 0px;
  }

  .home_insights_ct {
    background-size: auto 240px;
    background-position: top left;
  }

  .home_insights_ct::after {
    width: 72%;
    height: 100%;
    background-position: bottom right;
    background-repeat: no-repeat;
    display: none;
  }

  .home_insights_ct::before {
    width: 100%;
  }

  .home_global_ct::before,
  .home_global_ct::after {
    display: none;
  }
}

@media screen and (max-width: 1470px) {
  .home_facts_figures_ct_video {
    mask-position: -400px;
  }
}


.home_facts_figures_ct::before {
  content: '';
  position: absolute;
  bottom: -3px;
  right: 0;
  width: 180px;
  height: 100%;
  background-image: url(../img/slope_right_white.svg);
  background-size: 100%;
  background-position: bottom right;
  background-repeat: no-repeat;
  z-index: 1;
}

.home_facts_figures_ct::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background-image: url('../../../uploads/2026/06/Logo1-scaled.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 4;
}

.home_facts_figures_ct_video video {
  object-fit: cover;
  /* Zorgt dat de video de wrapper vult ZONDER te vervormen */
  object-position: center;
  /* Houdt het middelpunt van de video in beeld */
}

.home_cta_ct_portfolio_image {
  background-image: url(../../../uploads/2026/06/Portfolio_Slider.webp);
  background-size: 90%;
  background-repeat: no-repeat;
  /* Anchor to bottom so bottles stay flush when the CTA grows (zoom / text wrap).
     Column is 25vw wide, so -12vw crops the same ~1/3 of the bottles as before. */
  background-position: left 0 bottom -12vw;
}

/* @media (min-width: 992px) {
   Stretch the column upward (negative top margin on a stretched flex item)
     so the smoke above the bottles isn't cropped, without changing the
     section height. pointer-events off so it never blocks the tiles above.
  .home_cta_ct_portfolio_image {
    margin-top: -3vw;
    pointer-events: none;
  }
}  */

/* Carousel - general */
.carousel-indicators [data-bs-target] {
  background-color: var(--color-lightgrey-mid);
  opacity: 1;
}

.carousel-indicators .active {
  background-color: var(--color-orange-mid);
}

@media screen and (max-width: 992px) {
  .carousel-indicators-small-onmobile {
    margin-bottom: 2rem;
  }

  #Brandpage_carousel .carousel-indicators-small-onmobile {
    bottom: -20px;
  }
}

/* Carousel - did you know */

#carousel_didyouknow .carousel-item {
  height: 380px;
}

#carousel_didyouknow .carousel-item div {
  width: 60%;
  background-color: var(--color-white);
}

#carousel_didyouknow .carousel-item img {
  position: absolute;
  right: -40px;
}

#carousel_didyouknow .carousel-item img {
  animation: slideInRight 0.7s ease-in-out;
}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.carousel-fade.carousel.slide .carousel-inner {
  transition: transform 1s ease-in-out;
}

/* Media queries desktop */
@media (min-width: 992px) {
  #carousel_didyouknow .carousel-inner {
    overflow: inherit;
  }

  #carousel_didyouknow .carousel-item-var img {
    position: absolute;
    right: -40px;
    top: -175px;
    height: 450px;
    width: auto !important;
  }

  #carousel_news:hover .carousel_news_overlay::after {
    width: 90%;
    opacity: 1;
  }

  #carousel_news:hover .carousel_news_overlay>div {
    right: 210px;
  }

  #carousel_news:hover .carousel_news_overlay>img {
    opacity: 1;
    right: 60px;
  }
}

/* Mobiel */
@media (max-width: 1350px) and (min-width: 992px) {
  .home_facts_figures_ct .number {
    /* 62px at 1350px down to 44px at 992px */
    font-size: clamp(44px, 4.6vw, 62px);
  }
}

@media (max-width: 992px) {
  .quickscan_ct {
    background-image: none;
  }

  .quickscan_ct_mobile {
    background-image: url(../img/quickscan_bg_mobile.jpg);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
  }

  #carousel_didyouknow .carousel-item div {
    width: 100%;
  }

  #carousel_didyouknow .carousel-item img {
    position: absolute;
    right: 0px;
    object-fit: cover;
    object-position: left;
    height: 160px;
  }

  .home_company_ct {
    min-height: 580px;
    height: auto;
  }

  .carousel_news_overlay>div {
    position: absolute;
    text-align: right;
    bottom: 80px;
    right: 66px;
    z-index: 2;
    width: 80%;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .carousel_news_overlay>img {
    width: 60px;
    position: absolute;
    bottom: 80px;
    right: 5px;
    z-index: 2;
    opacity: 1;
    transition: right 0.3s, opacity 0.3s;
  }

  .carousel_news_overlay::after {
    bottom: 0;
    top: auto;
    right: 0;
    width: 100%;
    height: 285px;
    background-position: left bottom;
    background-size: cover;
  }

  .home_sustainability h2 {
    font-size: calc(2.5rem + 0.9vw) !important;
  }

  .home_sustainability .home_sustainability_text {
    visibility: visible;
    position: initial;
  }

  .home_sustainability div {
    position: static;
  }

  .home_sustainability .home_sustainability_text>div>i>img {
    opacity: 1;
    margin-top: 0px;
  }

  .home_sustainability .right_slope {
    display: inline-block;
  }

  .home_sustainability .right_slope img {
    height: 120px;
  }

  .home_facts_figures_ct {
    background-position: center top;
    background-size: cover;
  }

  .home_facts_figures_ct h2 {
    font-size: 20px !important;
    color: var(--color-black);
  }

  .home_facts_figures_ct:hover {
    background-position: center top;
    background-size: cover;
  }

  .home_facts_figures_ct .number {
    font-size: 42px;
    width: 2em;
  }

  .home_facts_figures_ct .text {
    margin-top: 3px;
    padding-top: 20px;
    color: var(--color-black);
    font-size: 24px;
  }
}

/* OWL Carousel */
#carousel-230 .owl-item img {
  width: 70%;
}

/* Mobiel */
@media (max-width: 992px) {
  #carousel-230 .owl-item img {
    width: auto;
  }
}

/* Filter */
.wpc-filters-widget-wrapper {
  display: flex;
}

.wpc-filters-widget-wrapper {
  display: flex;
  gap: 10px;
}

/* Brand portfolio */
.product_portfolio_hero {
  /* background-image: url(../../../uploads/2024/07/portfolio_header_1.png);
  background-position: right bottom;
  background-size: auto 100%;
  background-repeat: no-repeat; */
}

.product_portfolio_hero .col-md-8 {
  height: 340px;
}

@media (max-width:768px) {
  .product_portfolio_hero {
    background-position: calc(50% - -45px) bottom;
    background-size: 100% auto;
    height: 500px;
  }
}

@media (max-width:500px) {
  .product_portfolio_hero {
    height: auto;
  }
}

.slobe_card_ct {
  margin-left: 4rem;
  width: 107%;
}

.slobe_card {
  /* height: 300px; */
  width: 33%;
  margin-left: -10%;
  margin-right: 24px;
  background-image: url(../../../uploads/2024/07/behind_the_scenes_3horses.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: url(../img/form_1.svg);
  mask-image: url(../img/form_1.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-size: 100%;
  mask-position: 0px -4px;
  position: relative;
  aspect-ratio: 3 / 2;
}

/* .slobe_card > h2 {
  position: absolute;
  bottom: 0px;
  background-color: var(--color-darkgrey-mid);
  color: var(--color-white);
  width: 100%;
  padding: 10px 100px 15px;
  font-size: 18px !important;
  margin: 0px;
} */

.slobe_card_title {
  position: absolute;
  bottom: 10px;
  background-color: var(--color-darkgrey-mid);
  color: var(--color-white);
  width: 100%;
  /* padding: 10px; */
  padding: 10px 30%;
  height: 44px;
  z-index: 1;
}

.slobe_card_title h2 {
  font-size: 18px !important;
  /* margin: 0px 0px 0px -16%; */
  width: 100%;
  /* text-align:center; */
  font-weight: 300;
}

.slobe_card_inner {
  display: none;
  position: absolute;
  background-color: rgba(41, 41, 41, 0.6)
    /* var(--color-darkgrey-mid)*/
  ;
  color: var(--color-white);
  height: 100%;
  width: 100%;
  padding: 0px 30% 100px;
}

.slobe_card_inner h3 {
  font-weight: 200;
  font-size: 23px !important;
}

.slobe_card:hover .slobe_card_inner {
  display: flex;
  align-items: center;
}

/* Brands page, tablet: 2 overlapping cards per row instead of one 137%-wide card.
   Negative margin tucks each card under the previous one's slant (~31% of card width). */
@media (min-width: 576px) and (max-width: 991.98px) {
  .brands_page_row {
    display: flex;
    flex-wrap: wrap;
  }

  .brands_page_row .slobe_card:not(.slobe_card_hp) {
    width: 58%;
    margin-right: -15% !important;
    mask-position: 0px -4px;
  }
}

/* Brand cards (homepage + brands page): keep hover text inside the card at any width / zoom level.
   Card is a parallelogram (form_1.svg): left edge runs 31% -> 0%, right edge 100% -> 69%
   from top to bottom. Everything inside the hover overlay is sized in cqw (card width), so the
   text block always keeps the same proportions and never grows up into the narrow top-left corner.
   Only the title bar (54px from the bottom) stays in px. */
@media (min-width: 992px) {
  .slobe_card {
    container-type: inline-size;
  }

  .slobe_card .slobe_card_inner {
    padding: 0 22% 10px 28%;
  }

  .slobe_card .slobe_card_inner h3 {
    font-size: 3.6cqw !important;
    line-height: 1.25;
    margin-bottom: 0;
  }

  .slobe_card .slobe_card_inner .udb_button {
    /* font-size: 3.4cqw; */
    height: 8cqw;
    min-width: 0;
    padding: 0 5cqw;
    margin-top: 2.5cqw !important;
  }
}

@media (max-width:992px) {
  .home_productrange_ct::before {
    width: 140px;
  }

  .home_productrange_ct::after {
    width: 64px;
  }

  .slobe_card_ct {
    margin-left: -0.75rem;
    width: calc(100% + 1.5rem) !important;
  }

  .slobe_card {
    margin-left: inherit;
  }

  /* Swiper slides get their overlap from spaceBetween (inline margin); an !important margin here
     would desync Swiper's slide positions and push later slides off-screen */
  .slobe_card:not(.swiper-slide) {
    margin-right: -70px !important;
  }

  .slobe_card:not(.slobe_card_hp) {
    width: 137%;
    mask-position: -50px -4px;
  }

  .slobe_card_inner,
  .slobe_card:hover .slobe_card_inner {
    display: none;
  }

  */ .slobe_card_title {
    bottom: 0px;
    height: 46px;
    padding: 7px;
    text-align: center;
  }

  .slobe_card_title h2 {
    font-size: 16px !important;
    margin: 0px 0px 0px -12%;
  }

  .home_cta_ct_portfolio_image {
    background-size: 54%;
    /* Extra 54px top padding so the smoke above the bottles isn't cropped;
       image anchored at top 0 so the bottom crop stays the same as before */
    padding-top: calc(1.5rem + 54px) !important;
    background-position: left 204px top -18px;
  }
}

@media screen and (min-width: 680px) and (max-width: 992px) {
  .home_cta_ct_portfolio_image {
    background-position: left 400px top -60px;
    background-size: 40%;
  }
}

.table_content_scroll_ct {
  overflow-x: scroll;
}

.table_matrix_content {
  width: 100%;
  min-width: 1200px;
  table-layout: fixed;
}

.table_content_first_column {
  width: 150px;
}

@media screen and (max-width:1300px) {
  .table_content_scroll_ct {
    overflow-x: scroll;
    width: calc(100% - 170px);
    margin-left: 150px;
  }

  .table_content_first_column {
    width: 150px;
    position: absolute;
    background-color: #fff;
    left: 2rem;
    border-top: 1px solid var(--color-beige-mid);
    border-bottom: 1px solid var(--color-beige-mid);
    margin: -1px;
  }
}

thead th {
  text-align: center;
}

.table_matrix_content th,
.table_matrix_content td {
  padding: 0px 2px;
  font-size: 14px;
  font-weight: inherit;
}

.table_matrix_content td {
  text-align: center;
}

.table_matrix_content .table_content_row {
  border-top: 1px solid var(--color-beige-mid);
  border-bottom: 1px solid var(--color-beige-mid);
}

.table_matrix_content .table_spacer_row {
  height: 5px;
}

.table_matrix_content .table_filled_cell {
  background-color: var(--color-orange-mid);
  color: var(--color-white);
  text-align: center;
  padding: 0px 0px 2px;
}

.product_finder_header_ct {
  background-image: url(../../../uploads/2026/07/beer_bg_1-scaled.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center -150px;
}

.product_finder_header {
  height: 300px;
}

.product_finder_product_divider {
  width: 140px;
  display: block;
}

.product_finder_product_title {
  display: inline-block;
  font-family: 'alverata', serif;
  font-size: 20px;
  font-weight: 600;
}

.product_finder_content ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.product_finder_product_percentage {
  font-family: 'alverata', serif;
  font-size: 30px;
  font-weight: 300;
}

.wpc-filter-title {
  margin-bottom: 0em !important;
}

.multiselect-container {
  position: relative;
  display: inline-block;
  width: 23%;
  margin-right: 1.5%;
}

.multiselect-container.open .selected-items {
  background-color: var(--color-orange-mid);
  color: var(--color-white);
}

@media (max-width:992px) {
  .product_finder_header_ct {
    background-position: center -26px;
  }

  .product_finder_product_title {
    font-size: 16px;
    height: 42px;
  }

  .product_finder_product_percentage {
    font-size: 24px;
    line-height: 1.1;
  }

  .product_finder_content ul {
    font-size: 12px;
  }
}

@media screen and (max-width: 768px) {
  .multiselect-container {
    width: 100%;
    margin: 0px 0px 10px 0px;
  }
}

.selected-items {
  padding: 10px;
  cursor: pointer;
  background-color: rgba(256, 256, 256, 0.7);
  position: relative;
  font-weight: 600;
  font-size: 18px;
}

.selected-items:after {
  font-family: "Material Symbols Outlined";
  font-size: 22px;
  content: "\e313";
  position: absolute;
  top: 8px;
  right: 10px;
}

.dropdown-content {
  font-family: 'montserrat', serif;
  display: none;
  position: absolute;
  background-color: var(--color-white);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  width: 100%;
  /*max-height: 200px;*/
  overflow-y: auto;
}

.dropdown-content label {
  display: block;
  padding: 0px 0px 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.dropdown-content label p {
  margin: 0;
  margin-left: 5px;
}

.dropdown-content label:hover {
  background-color: #ddd;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: var(--color-orange-mid);
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
    padding: 20px 15px;
    border: 0px;
    box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.1);
    border-radius: 0px !important;
  }
}

.multiselect-container.open .dropdown-content {
  display: block;
  padding: 10px 15px 0px;
}

.multiselect-container input {
  height: 28px;
}

/* Brandpage */
.brandpage_home_hero_ct {
  height: 550px;
}

.brandpage_home_hero_ct .home_hero_mask_image {
  background-size: cover;
}

.brandpage_subtitle {
  font-family: 'alverata', serif;
  font-weight: 200;
  font-size: 32px;
  line-height: 1;
}

.brandpage_link_icons a {
  background-color: var(--color-beige-mid);
  border-radius: 20px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-content: center;
}

.brandpage_link_icons svg {
  width: 16px;
}

h2.h2_small {
  font-size: calc(0.8rem + 0.9vw) !important;
  font-weight: 500;
}

.brandpage_portfolio {}

.brandpage_portfolio img {
  height: 160px;
  margin-right: 10px;
  max-width: inherit;
  width: auto;
  max-width: none;
}

/* Scale packshot with viewport width (770px / -180px at 1920px) so it doesn't cover the intro text on smaller/zoomed screens */
.brandpage_hero_productshot {
  margin: 0px max(-180px, -9.375vw) 192px 0px;
}

.brandpage_hero_productshot img {
  height: min(770px, 40vw);
}

/* Stop off-canvas decorations (packshots, carousel offsets) from widening the page on mobile */
#homepage-wrapper {
  overflow-x: clip;
}

/* Equal-width USP columns instead of sizing to text length */
@media (min-width: 992px) {
  .brandpage_usp {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (min-width: 992px) and (max-width: 1499.98px) {
  .brandpage_home_hero_ct+div .intro_text {
    padding-left: 2.5rem !important;
    padding-right: 3rem !important;
  }
}

.brandpage_hero_slope_element img {
  height: 300px;
}

.brandpage_hero_border {
  border-bottom: 20px solid var(--color-orange-mid);
  bottom: 0px !important;
}

.brandpage_subgroup::before {
  content: '';
  background-image: url(../img/beige_slope_left.png);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: auto;
  position: absolute;
  top: 0px;
  left: 18%;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.brandpage_subgroup img {
  height: auto;
  width: 90%;
}

/* Monastère: keep face in frame on last story slide */
.page-id-169 #Brandpage_carousel .carousel-item:nth-child(4) img {
  object-position: 80% center;
}

/* Trio stout: keep man on the right in frame on last story slide */
.page-id-177 #Brandpage_carousel .carousel-item:nth-child(4) img {
  object-position: 63% center;
}

/* Magic Malt: center subjects on story slides 3 and 4 */
.page-id-179 #Brandpage_carousel .carousel-item:nth-child(3) img {
  object-position: 35% center;
}

.page-id-179 #Brandpage_carousel .carousel-item:nth-child(4) img {
  object-position: 25% center;
}

/* CraftNation: show more of the glass on first story slide */
.page-id-167 #Brandpage_carousel .carousel-item:nth-child(1) img {
  object-position: 65% center;
}

/* Trio stout: shift hero photos left on mobile so faces stay in their strip */
@media (max-width: 992px) {
  .page-id-177 .brandpage_home_hero_ct .mask_image_1,
  .page-id-177 .brandpage_home_hero_ct .mask_image_2 {
    background-position: 100% center;
  }

  .page-id-177 .brandpage_home_hero_ct .mask_image_3 {
    background-position: 75% center;
  }

  /* Weidmann: shift first photo left so the product is visible */
  .page-id-171 .brandpage_home_hero_ct .mask_image_1 {
    background-position: 15% center;
  }

  /* 3 Horses: shift first photo right, second photo slightly left */
  .page-id-163 .brandpage_home_hero_ct .mask_image_1 {
    background-position: 30% center;
  }

  /* Portrait photo: with cover it fits the box width exactly, so the horizontal
     position does nothing. Scale it wider than the box to make it shiftable. */
  .page-id-163 .brandpage_home_hero_ct .mask_image_2 {
    background-size: 140% auto;
    background-position: 0% center;
  }

  /* Breda: square photo has no slack with cover, and the can sits low while the
     visible strip sits high. Zoom in and anchor bottom so the can lands in the strip. */
  .page-id-175 .brandpage_home_hero_ct .mask_image_1 {
    background-size: 150% auto !important;
    background-position: 30% 136%;
  }

  /* CraftNation: shift first photo right */
  .page-id-167 .brandpage_home_hero_ct .mask_image_1 {
    background-position: 85% center;
  }

  /* Magic Malt: shift middle photo right so the bottle is visible */
  .page-id-179 .brandpage_home_hero_ct .mask_image_2 {
    background-position: 20% center;
  }
}

.brandpage_subgroup_table th {
  width: 200px;
  font-weight: 500;
}

.brandpage_subgroup_table tr {
  border-top: 1px solid var(--color-grey-light);
  height: 30px;
}

.brandpage_subgroup_table {
  border-bottom: 1px solid var(--color-grey-light);
  font-weight: 300;
  width: 100%;
}

#Brandpage_carousel .carousel-inner {
  height: 700px;
}

#Brandpage_carousel .carousel-item {
  height: 100%;
}

#Brandpage_carousel .carousel-caption {
  font-weight: 100;
  font-size: 34px;
  color: var(--color-black);
  background-color: rgba(256, 256, 256, 0.8);
  padding: 40px 30px;
  bottom: 100px;
  right: 25%;
  left: 25%;
}

.brand_promo .owl-nav {
  position: absolute;
  top: 38%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 50px;
  font-family: arial;
  padding: 0px 20px;
}

/* Owl sets item widths itself: don't let the flex stage shrink them (stage padding would otherwise squeeze items unevenly) */
.brand_promo .owl-carousel .owl-item {
  flex-shrink: 0;
}

/* Center images in their item so spacing is equal regardless of image width; contain keeps tall images whole */
.brand_promo .owl-carousel .owl-item img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 300px;
  object-fit: contain;
  margin: 0 auto;
  transition: transform 0.5s ease;
}

@media (max-width: 991.98px) {
  .brand_promo .owl-carousel .owl-item.is-featured img {
    transform: scale(1.5);
  }
}

.brand_promo .owl-stage {
  padding: 0px 100px;
}

.global_fanbase_ct {
  z-index: 1;
}

/* Brands: Facts & Figures */
.brandpage_ff {
  background-image: url(../img/xx.png);
  background-color: rgb(3, 3, 62);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 260px 0px 20px;
  color: var(--color-white);
  position: relative;
  margin-top: -230px;
}

.brandpage_ff:before {
  content: '';
  background-image: url('../img/form_white_horizontal.png');
  background-position: top right;
  background-repeat: no-repeat;
  background-size: inherit;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 230px;
  width: 100%;
}

.brandpage_ff_productimage {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 35%;
  display: flex;
  justify-content: end;
  align-items: center;
}

.brandpage_ff_productimage img {
  width: 200px;
  object-fit: cover;
  transform: rotate(-90deg);
  height: 495px;
}

.ff_figure .number {
  position: relative;
  font-size: 86px;
  font-weight: 600;
  color: var(--color-orange-mid);
  font-family: 'alverata';
  font-weight: 500;
}

@media (min-width: 992px) {

  /* Fixed width so the captions wrap to two lines on any desktop size */
  .brandpage_ff .ff_figure .text {
    max-width: 250px;
  }
}

.ff_figure .number:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0px;
  height: 4px;
  width: 90px;
  background-color: var(--color-orange-mid);
}

.bar_chart_outer {
  height: 300px;
  background-color: var(--color-lightgrey-dark);
  width: 50px;
  display: flex;
  align-items: end;
}

.bar_chart_inner {
  background-color: var(--color-lightgrey-darkest);
  height: 60%;
  width: 100%;
}

.pie_chart {
  width: 400px;
  height: 400px;
  display: inline-block;
  border-radius: 50%;
  background-image: conic-gradient(var(--color-orange-mid) 255.6deg,
      var(--color-lightgrey-darkest) 0);
}

.pie_chart_overlay {
  width: 320px;
  left: calc(50% - 160px);
}

.pie_chart_overlay img {
  height: 260px;
  max-width: fit-content;
  margin: -100px 0 0 -30px;
}

.pie_chart_overlay .percentage {
  font-size: 50px;
  margin-top: -20px;
}

/* Brands: Case stury */
.case_study::after {
  content: '';
  background-image: url(../img/beige_slope_right.png);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: auto;
  position: absolute;
  top: 0px;
  right: 37%;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: scaleY(-1);
}

.polaroid {
  width: calc(50% - 30px);
  padding: 10px 10px 40px;
  display: inline-block;
  background-color: var(--color-white);
  box-shadow: 2px 3px 10px 1px rgba(0, 0, 0, 0.2);
}

.polaroid_1 {
  transform: rotate(-5deg) translatex(70px);
  position: relative;
  z-index: 1;
}

.polaroid_2 {
  transform: rotate(5deg) translateY(140px);
}

.polaroid_3 {
  width: 200px;
  height: auto;
  transform: rotate(5deg) translatey(-20px);
}

.polaroid img {
  height: 300px;
  object-fit: cover;
  width: 100%;
}

.polaroid_3 img {
  height: 150px;
  object-fit: cover;
}

/* Brands: News */
.bp_news_image {
  content: '';
  position: absolute;
  top: 0px;
  left: 0%;
  width: 50%;
  height: 100%;
  background-image: url(../../../uploads/2024/08/OB-3.jpg);
  background-position: center;
  background-size: cover;
  mask-image: url(../img/grey_slope_right.png);
  mask-position: top right;
}

@media screen and (max-width:992px) {
  .brandpage_hero_productshot {
    margin-right: -110px;
    top: 350px !important;
  }

  .brandpage_hero_productshot img {
    height: 390px;
  }

  .brandpage_hero_productshot_mobile {
    margin-right: -110px;
    z-index: 2;
  }

  .brandpage_hero_productshot_mobile img {
    height: 390px;
    width: auto;
    max-width: none;
  }

  /* Buttons size to their label instead of stretching full width */
  .brandpage_subgroup .udb_button {
    width: auto !important;
  }

  /* Stage padding is 1rem less on mobile: move the orange band up equally */
  .brand_promo.bg_orange_white_horizontal::after {
    top: 72px;
  }

  /* Slope sits in front of the mobile packshot (z-index 2) */
  .brandpage_hero_slope_element {
    z-index: 3;
  }

  .brandpage_hero_slope_element img {
    height: 100px;
  }

  .brandpage_portfolio img {
    height: 134px;
  }

  /* Fixed image box with equal room above and below, so every packshot
     sits the same way inside the beige slope regardless of its aspect ratio */
  .brandpage_subgroup::before {
    height: 340px;
  }

  .brandpage_subgroup .brand_image {
    height: 340px;
    padding-top: 50px;
    padding-bottom: 50px !important;
  }

  .brandpage_subgroup .brand_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .brandpage_subgroup_table th {
    width: 140px;
    vertical-align: top;
  }

  #Brandpage_carousel .carousel-inner {
    height: 650px;
  }

  #Brandpage_carousel .carousel-caption {
    font-size: 18px;
    padding: 20px 10px 30px;
    bottom: 44px;
    width: 100%;
    left: 0px;
  }

  .brand_promo .owl-stage {
    margin-left: 33%;
    /* room for the 1.5x featured image (300px -> 450px) */
    padding: 4rem 0rem 5rem;
  }

  .brandpage_global_bg {
    height: 40% !important;
    margin: 150px 0px 0px auto;
  }

  .zoomable::after {
    font-family: "Material Symbols Outlined";
    font-size: 22px;
    content: "\f1fa";
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: rgba(0, 0, 0, 0.2);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 2;
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ff_figure .number {
    font-size: 130px;
  }

  .ff_figure .number::after {
    bottom: 0px;
  }

  .brandpage_ff::before {
    right: 0px;
    height: 153px;
  }

  .brandpage_ff_productimage {
    position: relative;
    bottom: 0px;
    left: 140px;
    height: 200px;
    width: 500px;
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .brandpage_ff_productimage img {
    height: 495px;
  }

  .col-lg-4:has(.pie_chart):before,
  .col-lg-4:has(.bar_chart_outer):before {
    content: '';
    background-color: var(--color-lightgrey-mid);
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    transform: scaleX(1.5);
    z-index: -1;
  }

  .pie_chart {
    width: 305px;
    height: 305px;
  }

  .pie_chart_overlay img {
    height: 196px;
    max-width: fit-content;
    margin: -84px 0 0 5px;
  }

  .pie_chart_overlay .question {
    font-size: 17px;
  }

  .case_study .col-lg-3:first-child {
    outline: 50px solid var(--color-white);
    background-color: var(--color-white);
  }

  .polaroid {
    /* width: calc(80% - 30px);
    padding: 15px 15px 40px; */
    display: inline-block;
    background-color: var(--color-white);
    box-shadow: 2px 3px 10px 1px rgba(0, 0, 0, 0.2);
  }

  .polaroid_1 {
    transform: rotate(-5deg) translatex(0px);
    position: relative;
    z-index: 1;
  }

  .polaroid_2 {
    transform: rotate(5deg) translateY(-14px) translatex(2px);
  }

  .polaroid_3 {
    width: 200px;
    height: auto;
    transform: rotate(5deg) translatey(20px);
  }

  .polaroid img {
    height: 200px;
    object-fit: cover;
  }

  .col-lg-6:has(.polaroid) {
    height: 300px;
  }

  .bp_news .col-lg-6:first-child {
    height: 500px;
  }

  .bp_news_image {
    content: '';
    position: absolute;
    top: 0px;
    left: -27px;
    width: calc(100% + 70px);
    height: 100%;
    background-image: url(../../../uploads/2024/08/OB-3.jpg);
    background-position: center;
    background-size: cover;
    mask-image: url(../img/grey_slope_right.png);
    /* Slope pushed further right: smaller white triangle, less of the image cut off */
    mask-position: right -180px top 0px;
  }

  /* Phone below the text instead of absolutely positioned off-screen */
  .bp_news_product_image {
    position: static;
    width: auto;
    max-width: 100%;
    /* Cap tall images (phone) without boxing wide/square ones (badges) in whitespace */
    height: auto;
    max-height: 420px;
    margin: 2rem auto 0;
  }
}

/* Grow with us */
.grow_with_us_hero {
  height: 600px;
  border-bottom: 5px solid var(--color-orange-mid);
}

.grow_with_us_hero .intro_image {
  background-image: url(../../../uploads/2026/07/Bierglas-wide-scaled.webp);
  background-size: 165%;
  background-repeat: no-repeat;
  /* mask-image: url(../img/grey_slope_right.png);
  mask-position: right -20px top 0px; */
  background-position: -460px 80%;
}

.grow_with_us_hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 315px;
  height: calc(100% + 10px);
  background-image: url(../img/slope_right_white.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom;
  z-index: 5;
  margin: -10px 0px;
}

.grow_with_us_horizon_accordion_ct::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70px;
  height: calc(100% + 10px);
  background-image: url(../img/slope_right_orange.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom;
  z-index: 5;
  margin: -10px 0px;
  pointer-events: none;
}

@media screen and (max-width:992px) {
  .grow_with_us_hero::after {
    width: 80px;
    margin-bottom: -6px;
    /* Continues into the beige Discover accordion below */
    background-image: url(../img/slope_right_beige.svg);
  }

  .grow_with_us_hero .intro_image {
    background-position: top left -400px;
    background-size: cover;
  }

  .grow_with_us_hero {
    height: 450px;
  }
}

/* */
.grow_with_us_horizon_slider_ct {
  --closed-width: 250px;
  --panel-height: 700px;
}

/* basis */
.grow_with_us_horizon_slider_ct .horiz-accordion {
  display: flex;
  width: 100%;
  height: var(--panel-height);
  overflow: hidden;
  background: var(--color-white);
}

.grow_with_us_horizon_slider_ct .horiz-panel {
  position: relative;
  flex: 0 0 var(--closed-width);
  width: var(--closed-width);
  min-width: 0;
  height: 100%;
  overflow: visible;
  cursor: pointer;
  background: var(--color-white);
  transition: flex-basis 0.65s cubic-bezier(.25, 1, .5, 1);
}

.grow_with_us_horizon_slider_ct .horiz-panel.is-active {
  flex: 0 0 calc(100% - (3 * var(--closed-width)));
  width: calc(100% - (3 * var(--closed-width)));
  cursor: default;
  background: var(--color-beige-mid);
}

/* schuine rechterzijde met jouw SVG */
.grow_with_us_horizon_slider_ct .horiz-panel.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: -284px;
  width: 324px;
  height: 100%;
  pointer-events: none;
  background-image: url(../img/slope_right_beige.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: left bottom;
  z-index: 1;
}

.grow_with_us_horizon_slider_ct .horiz-panel.is-active::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0px;
  width: 324px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  background-image: url(../img/slope_right_white.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom;
  z-index: 5;
  margin: 0px 0px;
}

.grow_with_us_horizon_slider_ct .panel-inner {
  overflow: hidden;
}

/* lichte diagonale scheidingslijn */
.grow_with_us_horizon_slider_ct .horiz-panel:not(.is-active)::before {
  content: "";
  position: absolute;
  top: 0;
  right: -56px;
  width: 1px;
  height: 110%;
  background: var(--color-beige-mid);
  transform: rotate(25deg);
  transform-origin: top center;
  z-index: 6;
  pointer-events: none;
}

/* content */
.grow_with_us_horizon_slider_ct .panel-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 70px 45px 70px 0px;
  box-sizing: border-box;
}

.grow_with_us_horizon_slider_ct .horiz-panel.is-active .panel-inner {
  padding: 56px 45px;
  z-index: 8;
}

.grow_with_us_horizon_slider_ct .panel-bg-number {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 1;
  font-size: 8rem;
  line-height: .9;
  font-weight: 600;
  color: var(--color-beige-mid);
  pointer-events: none;
  user-select: none;
}

.grow_with_us_horizon_slider_ct .horiz-panel.is-active .panel-bg-number {
  color: var(--color-white);
  font-size: 15rem;
  top: -38px;
  left: -45px;
  z-index: 7;
}

.grow_with_us_horizon_slider_ct .panel-summary {
  position: relative;
  z-index: 3;
  min-width: 160px;
}

.grow_with_us_horizon_slider_ct .panel-summary h2 {
  margin: 0 0 70px 60px;
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 700;
  color: var(--color-orange-mid);
}

.grow_with_us_horizon_slider_ct .panel-summary h3 {
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-black);
}

.grow_with_us_horizon_slider_ct .panel-arrow {
  display: block;
  font-size: 3rem;
  line-height: 1;
  color: var(--color-black);
}

.grow_with_us_horizon_slider_ct .horiz-panel.is-active .panel-summary h2 {
  font-size: 3.4rem;
  margin: 0 0 64px 0px;
}

/* Desktop: continuous marquee */
.growth_stories_swiper.is-marquee .swiper-wrapper {
  transition-timing-function: linear !important;
}

.growth_stories_swiper.is-marquee .swiper-slide {
  width: 40%;
}

.growth_stories_swiper.is-marquee .growth_stories_nav {
  display: none;
}

/* Mobile: single progress bar centered below the slides */
.growth_stories_nav {
  display: flex;
  justify-content: center;
}

.growth_stories_nav .swiper-pagination.swiper-pagination-progressbar {
  position: relative;
  width: 160px;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.3);
}

.growth_stories_nav .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #fff;
}

.horiz-panel.is-active .panel-summary h3 {
  display: none;
}

.grow_with_us_horizon_slider_ct .horiz-panel.is-active .panel-arrow {
  display: none;
}

.grow_with_us_horizon_slider_ct .panel-full {
  width: 80%;
  max-width: calc(100vw - 520px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(25px);
  transition:
    opacity .28s ease,
    transform .28s ease,
    visibility 0s linear .28s;
}

.grow_with_us_horizon_slider_ct .horiz-panel.is-active .panel-full {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: .22s;
}

.grow_with_us_horizon_slider_ct .panel-full p {
  color: var(--color-black);
}

.grow_with_us_horizon_slider_ct .panel-formula strong {
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  margin: 0px 20px;
}

/* ==========================================
   MOBIEL RESPONSIVE OVERRIDES (< 768px)
   ========================================== */
@media (max-width: 1500px) {

  /* Reset van de hoofdcontainer naar verticale stapeling */
  .grow_with_us_horizon_slider_ct .horiz-accordion {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  /* Panelen pakken volle breedte en dynamische hoogte */
  .grow_with_us_horizon_slider_ct .horiz-panel,
  .grow_with_us_horizon_slider_ct .horiz-panel.is-active {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 80px;
    margin-bottom: 8px;
    background: var(--color-beige-mid);
  }

  /* Verwijder SVG-slopes en diagonale lijnen op mobiel */
  .grow_with_us_horizon_slider_ct .horiz-panel::before,
  .grow_with_us_horizon_slider_ct .horiz-panel::after,
  .grow_with_us_horizon_slider_ct .horiz-panel.is-active::before,
  .grow_with_us_horizon_slider_ct .horiz-panel.is-active::after,
  .grow_with_us_horizon_slider_ct .horiz-panel:not(.is-active)::before {
    display: none !important;
  }

  /* Padding-resets voor de content */
  .grow_with_us_horizon_slider_ct .panel-inner,
  .grow_with_us_horizon_slider_ct .horiz-panel.is-active .panel-inner {
    padding: 44px 20px;
  }

  /* Samenvatting / Header layout op mobiel */
  .grow_with_us_horizon_slider_ct .panel-summary {
    position: initial;
  }

  .grow_with_us_horizon_slider_ct .panel-summary,
  .grow_with_us_horizon_slider_ct .horiz-panel.is-active .panel-summary {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    min-width: unset;
  }

  .grow_with_us_horizon_slider_ct .panel-summary h2,
  .grow_with_us_horizon_slider_ct .horiz-panel.is-active .panel-summary h2 {
    font-size: 2.4rem;
    margin: 0;
  }

  /* Watermerk nummer aanpassen voor kleine schermen */
  .grow_with_us_horizon_slider_ct .panel-bg-number,
  .grow_with_us_horizon_slider_ct .horiz-panel.is-active .panel-bg-number {
    font-size: 8rem;
    top: 6px;
    left: -30px;
    opacity: 1;
  }

  /* Pijltje roteren bij actieve status */
  .grow_with_us_horizon_slider_ct .panel-arrow {
    font-size: 2rem;
    transition: transform 0.3s ease;
  }

  .grow_with_us_horizon_slider_ct .horiz-panel.is-active .panel-arrow {
    display: block;
    transform: rotate(90deg);
    position: absolute;
    bottom: 15px;
    left: 1.5rem;
  }

  /* Inhoud uitklappen en breedte-beperkingen opheffen */
  .grow_with_us_horizon_slider_ct .panel-full {
    display: none;
    width: 100%;
    max-width: 100%;
    transform: none;
    margin-top: 40px;
  }

  .grow_with_us_horizon_slider_ct .horiz-panel.is-active .panel-full {
    display: block;
    opacity: 1;
    visibility: visible;
  }

  .grow_with_us_horizon_slider_ct .horiz-panel.is-active .panel-formula {
    flex-direction: column !important;
  }

  /* Formule aanpassing voor smalle schermen */
  .grow_with_us_horizon_slider_ct .panel-formula strong {
    font-size: 24px;
    margin: 0 8px;
  }

  /* Adaptivity */
  .horiz-panel .panel-summary h3 {
    display: block;
  }

  .horiz-panel.is-active .panel-summary h3 {
    display: none;
  }

  .grow_with_us_horizon_slider_ct .font_md {
    font-size: inherit;
  }
}

/* */

.video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.gwu_additional_ct::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 100%;
  background-image: url(../img/slope_right_beige.svg);
  background-size: 100%;
  background-position: bottom right;
  z-index: -2;
  background-repeat: no-repeat;
}

/* Mobile: same icon size as the homepage USP cards */
@media (max-width: 992px) {
  .gwu_additional_ct .iconh_l {
    height: 65px;
  }
}

/* Insights */
.insights_hero {
  background-image: url(../../../uploads/2026/06/mub_bottleneck-scaled.webp);
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: left center;
  position: relative;
  height: 600px;
  border-bottom: 5px solid var(--color-orange-mid);
}

.insights_hero::after,
.story_hero::after,
.contact_hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 315px;
  height: calc(100% + 10px);
  background-image: url(../img/slope_right_white.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom;
  z-index: 5;
  margin: -10px 0px;
}

.insights_featured_ct::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(../img/slope_right_beige.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  height: 100%;
  width: 300px;
  z-index: 0;
}

.insights_featured_item {
  position: relative;
  z-index: 1;
}

.insights_featured_item_img {
  flex: 0 0 55%;
  max-width: 55%;
}

.insights_featured_item_img img {
  width: 100%;
}

.insights_stories_ct::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background-color: var(--color-beige-mid);
  z-index: -1;
}

.insights_stories_ct::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(../img/slope_left_beige.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top left;
  height: 100%;
  width: 400px;
  z-index: -1;
}

.insights_stories_ct_tile {
  border-bottom: 5px solid var(--color-orange-mid);
}

.insights_stories_ct_tile_overlay {
  display: none;
  background-color: rgba(254, 80, 0, 0.7);
}

.insights_stories_ct_tile:hover .insights_stories_ct_tile_overlay {
  display: flex;
}

@media (max-width: 767.98px) {
  .insights_featured_item_img {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }
}

/* Story */
.story_hero {
  background-image: url(../../../uploads/2026/06/Brouwketels-rgb.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: left;
  position: relative;
  height: 600px;
  border-bottom: 5px solid var(--color-orange-mid);
}

.story_intro_ct::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(../img/slope_right_orange.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  height: 100%;
  width: 550px;
  z-index: 0;
}

.story_intro_ct::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(../../../uploads/2026/05/Martens-footer_1.svg);
  background-repeat: no-repeat;
  background-position: bottom -15px left 60px;
  background-size: 76%;
  height: 218px;
  width: 100%;
}

/* Slope always spans the full section height: top edge stays left of the values column (starts at 50%),
   bottom edge stays right of the mission text (ends ~32%), regardless of viewport or text length */
.story_values_ct::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fe5000;
  clip-path: polygon(0 0, 47% 0, 35% 100%, 0 100%);
  height: 100%;
  width: 100%;
  z-index: -1;
}

/* Value icons sit in a flex row: keep them from stretching to the text height */
.story_values_ct .icon_l {
  flex-shrink: 0;
  height: 100px;
  object-fit: contain;
  align-self: center;
}

.story_banner_ct {
  background-image: url(../../../uploads/2026/06/Martens-Heritage-image-2-scaled.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  height: 500px;
}

.story_innovation_ct::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(../img/slope_left_beige.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top right;
  height: 100%;
  width: 35%;
  z-index: -1;
}

.story_innovation_ct::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(../img/slope_right_orange.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  height: 100%;
  width: 150px;
  z-index: 0;
}

@media screen and (max-width:992px) {
  .insights_hero {
    background-size: cover;
    height: 450px;
  }

  .insights_hero::after,
  .story_hero::after,
  .contact_hero::after {
    width: 80px;
  }

  .insights_featured_ct::after {
    width: 100px;
  }

  .insights_stories_ct::after {
    width: 300px;
    bottom: -400px;
  }

  .story_hero {
    background-size: cover;
    height: 450px;
  }

  .story_intro_ct::before {
    width: 70px;
  }

  .story_banner_ct {
    background-size: cover;
  }

  .story_banner_ct img {
    height: 70% !important;
    align-self: center;
  }

  .contact_hero {
    background-size: cover;
    background-position: center center;
    height: 450px;
  }

  .contact_content::after {
    width: 120px;
  }
}

/* Columns stack on mobile, so the slope can't cover the white text: use a solid full-bleed orange instead */
@media (max-width: 991.98px) {
  .story_values_ct::before {
    display: none;
  }

  .story_values_mission {
    background-color: #fe5000;
    box-shadow: 0 0 0 100vmax #fe5000;
    clip-path: inset(0 -100vmax);
  }

  .story_values_mission+.col-lg-6 {
    padding-top: 3rem;
  }
}

.offset_numbers {
  position: absolute;
  top: -40px;
  left: -22px;
  font-size: 100px;
  font-weight: 700;
  z-index: -1;
  line-height: 1;
}

.journey-slider {
  position: relative;
}

.journey_swiper {
  overflow: hidden;
  z-index: -1;
}

.journey_swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.journey-prev,
.journey-next {
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
}

.journey-prev {
  left: -60px;
}

.journey-next {
  right: -70px !important;
  color: var(--color-white) !important;
}

/* Pagination sits outside .journey_swiper (z-index -1) so the bullets stay clickable */
.journey-slider .journey-pagination {
  position: relative;
  bottom: auto;
  top: auto;
  margin-top: 30px;
  z-index: 10;
}

@media (max-width: 991.98px) {
  /* Arrows sit outside the container and get cut off on mobile; swipe instead */
  .journey-prev,
  .journey-next {
    display: none;
  }

  /* Video runs edge to edge, no gutter or baseline gap */
  .story_video_col {
    padding-right: 0;
  }

  .story_partnership_text {
    padding: 2rem 2.2rem 0;
  }
}

/* Contactpage */
.contact_hero {
  background-image: url(../../../uploads/2025/12/Monestere-hero-2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  /* Percentage instead of a fixed px offset, so the crop stays the same at every screen width */
  background-position: center 28%;
  position: relative;
  height: auto;
  min-height: 600px;
  border-bottom: 10px solid var(--color-orange-mid);
}

/* Darken photo behind the text so the white copy stays readable */
.contact_hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 75%);
  z-index: 1;
  pointer-events: none;
}

.contact_hero .intro_text {
  position: relative;
  z-index: 2;
}

/* Fixed reading width instead of a grid column, so the line length holds when zoomed in */
.contact_hero .intro_text p {
  max-width: 24rem;
}

.contact_content::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 320px;
  height: calc(100% + 10px);
  background-image: url(../img/slope_right_orange.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom;
  z-index: 5;
  margin: -10px 0px;
  pointer-events: none;
}

@media screen and (max-width: 991.98px) {
  .contact_hero {
    background-position: center center;
    height: auto;
    min-height: 450px;
  }

  .contact_hero::after {
    width: 80px;
  }

  /* Darken photo so white text stays readable */
  .contact_hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 1;
    pointer-events: none;
  }

  .contact_hero .intro_text {
    position: relative;
    z-index: 2;
    padding-left: 1.5rem;
    padding-right: 5rem;
  }

  .contact_content::after {
    width: 130px;
    height: calc(100% + 100px);
    margin: -150px 0px;
  }
}

.contact_slobe_cards {
  z-index: 6;
  position: relative;
}

.contact_slobe_cards .slobe_card_title {
  width: 75%;
  padding: 10px 0%;
  text-align: center;
}

/* Mobile/tablet: 4 cards in one row get too small, so wrap them 2 per row.
   Card is a parallelogram (form_1.svg, slant ~29% of card width): the negative margin tucks
   each card under the previous one's slant, +16px keeps a gap along the slant like desktop.
   Margin box = 40.5% + 16px, so a third card no longer fits and wraps. */
@media (max-width: 991.98px) {
  .contact_slobe_cards .slobe_card_ct {
    flex-wrap: wrap;
    row-gap: 16px;
  }

  .contact_slobe_cards .slobe_card {
    width: 57%;
    margin-right: calc(-16.5% + 16px) !important;
  }

  .contact_slobe_cards .slobe_card_title {
    left: 4%;
    width: 66%;
    padding: 12px 0;
  }

  .contact_slobe_cards .slobe_card_title h2 {
    font-size: 14px !important;
    margin: 0;
  }
  .container:has(.contact_slobe_swiper) {
    z-index: 10;
    position:relative;
  }
  .contact_slobe_cards .slobe_card_3 {
    
  }
}

/* Form */
.contact_form_container .mdc-text-field,
.contact_form_container .mdc-select__anchor {
  background-color: var(--color-beige-mid) !important;
  border-radius: 0px !important;
  border: 0px;
}

.mdc-notched-outline>span {
  border: none;
}

.contact_form_container .mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label,
.contact_form_container .mdc-select:not(.mdc-select--disabled) .mdc-floating-label {
  color: var(--color-black-std) !important;
}

.mdc-form-field>label {
  color: var(--color-white-std) !important;
  margin-right: 20px !important;
}

.mdc-form-field.radio-margin.prof_cons_select {
  display: inline-flex !important;
}

.udb_contactform_1 label[for="radio-2"] {
  color: #999696 !important;
}

.udb_contactform_1 .mdc-radio {
  padding: 0px !important;
}

.udb_contactform_1 .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,
.udb_contactform_1 .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle {
  border-color: var(--color-white-std) !important;
}

.mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle {
  border-color: var(--color-white-std) !important;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
  border-color: transparent !important;
}

.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
  color: var(--color-white-std) !important;
}

.mdc-select__ripple {
  background-color: var(--color-white-std) !important;
}

.mdc-select--filled .mdc-select__anchor {
  border-radius: 0px !important;
}

.contact_form_container .mdc-button--raised:not(:disabled) {
  width: auto;
  background-color: var(--color-orange-mid);
  border-radius: 0px;
  font-family: "alverata", serif;
  font-weight: 600;
  font-size: initial;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--input-button-height);
  text-align: center;
  padding: 5px 20px 5px;
  clip-path: polygon(0% 0%, 0% 100%, 95% 100%, 100% 60%, 100% 0%);
  line-height: 2.1;
  position: absolute;
}


.mdc-button {
  float: right;
}

.mdc-button__ripple {
  background-color: transparent;
  border-radius: 50px !important;
  border: 2px solid var(--color-white-std);
  padding: 0.4rem 2rem 0.3rem;
  width: 100%;
  box-sizing: border-box !important;
}

.mdc-button__label {
  font-family: Alverata, Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: initial !important;
  width: max-content;
  position: relative !important;
  left: initial !important;
  letter-spacing: initial;
}

.mdc-button__icon {
  display: none !important;
}

.mdc-select {
  margin: 0px 0px 20px 0px !important;
}

.mdc-floating-label {
  background-color: var(--color-white-std);
}

.cnsmr .two_input_row_desktop:has(#country-input) {
  display: block;
}

.udb_contactform_1 .mdc-text-field-helper-text::before {
  height: inherit !important;
  vertical-align: inherit !important;
}

/* OWL */
.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
}

.owl-theme .owl-nav [class*="owl-"]:hover {
  background: transparent !important;
  color: inherit !important;
}

/* Age gate */
.age-gate-wrapper {
  padding: 0px;
  margin: 0px;
}

.age-gate {
  margin: 0px 0px 0px 300px;
  max-width: 600px;
}

.age-gate-form {
  text-align: left;
}

.age-gate-headline {
  font-weight: 700;
  font-size: calc(2rem + 0.9vw) !important;
  line-height: 1.1;
}

.age-gate-headline-custom {
  display: none;
}

.age-gate-headline-custom h2 {
  font-weight: 400;
  font-size: calc(3rem + 0.9vw) !important;
  line-height: 1.1;
}

.age-gate-headline-custom h2 span {
  font-weight: 600;
}

.age-gate-subheadline {
  font-size: calc(0.4rem + 0.9vw) !important;
  line-height: 1.3;
  margin: 15px 0px 30px 0px;
}

.age-gate-challenge {
  font-weight: 700;
  font-size: 20px;
}

.age-gate-buttons {
  justify-content: left;
}

.age-gate-buttons button {
  background-color: var(--color-black) !important;
  background-repeat: no-repeat;
  color: var(--color-white-std);
  padding: 3px 40px 4px;
  border-radius: 0px;
  border: none;
  height: 38px;
  height: var(--input-button-height);
  min-width: 160px;
  padding: 7px 20px 5px;
  clip-path: polygon(0% 0%,
      0% 100%,
      95% 100%,
      100% 60%,
      100% 0%);
}

.age-gate-submit.age-gate-submit-yes {
  color: var(--color-white);
}

.age-gate-submit.age-gate-submit-no {
  background-color: var(--color-white) !important;
  color: var(--color-black) !important;
}

.age-gate-buttons button:hover {}

.age-gate-submit-no:hover {
  color: var(--color-black) !important;
}

.age-gate-additional-information {
  width: 100%;
  font-size: 11px;
}

.age-gate-background-color {
  background: var(--color-orange-mid);
}

.age-gate-errors,
.age-gate__errors {
  padding: 0px;
  width: 100%;
  height: 30px;
}

.age-gate-error,
.age-gate__error {
  color: var(--color-white);
}

.age_gate_corner_animation_logo {
  position: absolute;
  display: flex;
  top: 0px;
  left: 0px;
  z-index: 11;
}

.age_gate_corner_animation_logo img {
  width: 300px;
}

.age_gate_image {
  background-image: url(../../../uploads/2026/06/Agecheck-visual.webp);
  z-index: 10;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 65%;
}

@media screen and (max-width:820px) {
  .age_gate_corner_animation_logo {
    display: none;
  }
}

@media screen and (max-width:992px) {
  .age-gate {
    margin: inherit;
  }
}

/* Swiper */
.swiper {
  width: 100%;
  height: auto;
}

.swiper-pagination-bullet {
  background-color: transparent;
  border: 1px solid var(--color-white);
  opacity: 1;
  height: 3px;
  width: 30px;
}

.swiper-pagination-bullet-active {
  background-color: var(--color-white);
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--color-orange-mid);
}

.journey-pagination .swiper-pagination-bullet,
.brands-swiper .swiper-pagination-bullet,
.whitepaper_swiper .swiper-pagination-bullet {
  background-color: transparent;
  border: 1px solid var(--color-orange-mid);
  opacity: 1;
  height: 3px;
  width: 30px;
  border-radius: 0px;
}

.journey-pagination .swiper-pagination-bullet-active,
.brands-swiper .swiper-pagination-bullet-active,
.whitepaper_swiper .swiper-pagination-bullet-active {
  background-color: var(--color-orange-mid);
}

.journey_swiper .swiper-button-next,
.brands-swiper .swiper-button-next {
  color: var(--color-white);
}

/* DearFlipbook */
.wrapper .df-popup-thumb {
  margin: 0px !important;
  width: 100% !important;
}