/* ------------------------- Style ® Code by Dennis -------------------------------------------------- */

.main-wrap {
   transition: var(--animation-nav);
   transform: translate(0, 0) rotate(0.001deg);
   position: relative;
}

.main-fade {
   position: relative;
   width: 100%;
}

main.nav-active .main-wrap {
   transform: translate(25%, 0) rotate(0.001deg);
}

@media screen and (max-width: 540px){ 
   main.nav-active .main-wrap {
      transform: translate(50%, 0);
   } 
}

/* ------------------------- Loading -------------------------------------------------- */

.loading-screen {
   position: fixed;
   z-index: 90;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
   background: var(--primary-dark);
   transform: translateZ(0) rotate(0.001deg) scale(1);
   will-change: transform;
}

.loading-logo {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%) translateZ(0) rotate(0.001deg) scale(1);
   will-change: transform;
   display: block;
   overflow: hidden;
   height: 40px;
   opacity: 0;
}

.loading-logo svg {
   width: auto;
   height: 200%;
   position: relative;
}

.loading-logo svg path {
   fill: var(--white);
}

.loading-illustrations {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%) translateZ(0) rotate(0.001deg) scale(1);
   will-change: transform;
   display: block;
   width: 150px;
   height: 150px;
   opacity: 0;
}

/* Each pepper PNG: same box, centred behind the logo, form untouched (contain).
   The loading animation crossfades them one at a time. */
.loading-illustrations .pep {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 128px;
   height: 128px;
   object-fit: contain;
   opacity: 0;
}

.loading-illustrations svg {
   width: auto;
   height: 100%;
}

.loading-illustrations svg path {
   opacity: 0;
}

.pattern-loading {
   position: absolute;
   z-index: 0;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   pointer-events: none;
   height: 100vh;
}

.pattern-loading svg {
   position: absolute;
   display: block;
   width: 100%;
   left: 0;
   top: 50%;
   transform: translate(0, -50%) rotate(0.0001deg);
   opacity: 0;
}

@media screen and (max-width: 540px){ 
   .pattern-loading {
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      overflow: hidden;
      transform: scale(2);
   }

   .pattern-loading svg {
      width: auto;
      height: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0.0001deg);
      opacity: 0;
   }
}

/* ------------------------- Page Transition -------------------------------------------------- */

.loading-fade {
   position: fixed;
   z-index: 85;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
   pointer-events: none;
   background: var(--primary-dark);
   transform: translateZ(0) rotate(0.001deg) scale(1);
   will-change: transform;
}


/* ------------------------- GDPR - Cookie Bar -------------------------------------------------- */

.gdpr {
   position: fixed;
   bottom: var(--nav-padding);
   right: var(--nav-padding);
   background: var(--white);
   max-width: 30em;
   width: 100%;
   transform: translate(0, calc(var(--nav-padding) + 110%));
   z-index: 89;
   font-size: 1em;
   border-radius: 1.25em;
}

.gdpr.active {
   transform: translate(0, 0);
   display: block;
}

.gdpr.notactive {
   transform: translate(0, calc(var(--nav-padding) + 110%));
   transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
}

.gdpr .row {
   flex-wrap: nowrap;
   align-items: center;
   padding-top: calc(var(--gap-padding) * 1);
   padding-right: calc(var(--gap-padding) * 1);
   padding-bottom: calc(var(--gap-padding) * .95);
   padding-left: calc(var(--gap-padding) * 1.15);
}

.gdpr .row .flex-col {
   width: auto;
}

.gdpr .gdpr-button-accept {
   margin: 0;
   background: var(--secondary);
   border-radius: 2em;
   padding: .65em 1.25em .45em 1.25em;
   transition: var(--animation-primary);
   font-weight: 500;
   margin-left: 1em;
   margin-bottom: 0;
}

.gdpr .gdpr-button-accept .link-text:nth-of-type(2) {
   color: var(--white);
}

.gdpr p {
   line-height: 1.3;
   color: var(--primary-overlay);
   color: #250515;
   font-weight: 500;
   font-size: .85em;
}

.gdpr p a {
   color: var(--primary-overlay);
   font-weight: 500;
   color: #250515;
}

.gdpr p a:hover {
   color: var(--secondary);
   text-decoration: underline;
}

@media screen and (max-width: 540px){
   
   .gdpr.active {
      transform: translate(0%, 0);
      display: block;
   }

   .gdpr, .gdpr.notactive {
      font-size: .9em;
      bottom: 0vw;
      right: auto;
      left: 0;
      transform: translate(0%, calc(6vw + 100%));
      margin-left: 0vw;
      /* border-radius: .5em .5em 0 0; */
      width: 100%;
      max-width: 100%;
      /* max-width: calc(100% - (var(--container-padding) * 2)); */
      border-radius: 1.25em 1.25em 0 0;
   }

   .gdpr .row {
      flex-direction: column;
      padding: var(--container-padding);
      padding-top: calc(var(--container-padding) * 1.2);
   }

   .gdpr .row .flex-col {
      width: 100%;
      text-align: center;
   }

   .gdpr .gdpr-button-accept {
      font-size: 1em;
      width: 100%;
      margin-top: 1em;
      margin-left: 0;
   }

}

/* ------------------------- Error/Default Page -------------------------------------------------- */

main#error header,
main#default header {
   text-align: center;
}

.error-header {
   text-align: center;
}

/* ------------------------- Nav Logo -------------------------------------------------- */

.nav-logo {
   position: absolute;
   top: var(--viewport-padding);
   left: 50%;
   transform: translate(-50%, 0);
   z-index: 19;
   display: block;
}

/* ------------------------- Animate Logo -------------------------------------------------- */

.animate-logo {
   display: block;
   overflow: hidden;
   font-size: 1em;
   height: var(--nav-padding);
}

.animate-logo svg {
   width: auto;
   height: 200%;
   position: relative;
}

.animate-logo svg path {
   transition: var(--animation-primary);
   fill: var(--white);
}

.animate-logo svg path:nth-of-type(1) {transform: translateY(0) rotate(0.0001deg); transition-delay: 0.0s;}
.animate-logo svg path:nth-of-type(2) {transform: translateY(0) rotate(0.0001deg); transition-delay: 0.018s;}
.animate-logo svg path:nth-of-type(3) {transform: translateY(0) rotate(0.0001deg); transition-delay: 0.036s;}
.animate-logo svg path:nth-of-type(4) {transform: translateY(0) rotate(0.0001deg); transition-delay: 0.054s;}
.animate-logo svg path:nth-of-type(5) {transform: translateY(0) rotate(0.0001deg); transition-delay: 0.072s;}
.animate-logo svg path:nth-of-type(6) {transform: translateY(0) rotate(0.0001deg); transition-delay: 0.09s;}
.animate-logo svg path:nth-of-type(7) {transform: translateY(0) rotate(0.0001deg); transition-delay: 0.108s;}
.animate-logo svg path:nth-of-type(8) {transform: translateY(0) rotate(0.0001deg); transition-delay: 0.126s;}
.animate-logo svg path:nth-of-type(9) {transform: translateY(0) rotate(0.0001deg); transition-delay: 0.144s;}
.animate-logo svg path:nth-of-type(10) {transform: translateY(0) rotate(0.0001deg); transition-delay: 0.162s;}
.animate-logo svg path:nth-of-type(11) {transform: translateY(0) rotate(0.0001deg); transition-delay: 0.18s;}
.animate-logo svg path:nth-of-type(12) {transform: translateY(0) rotate(0.0001deg); transition-delay: 0.198s;}
.animate-logo svg path:nth-of-type(13) {transform: translateY(0) rotate(0.0001deg); transition-delay: 0.216s;}
.animate-logo svg path:nth-of-type(14) {transform: translateY(0) rotate(0.0001deg); transition-delay: 0.234s;}

.animate-logo:hover svg path:nth-of-type(1) { transform: translateY(-50%) rotate(0.0001deg); transition-delay: 0.0s;}
.animate-logo:hover svg path:nth-of-type(2) { transform: translateY(-50%) rotate(0.0001deg); transition-delay: 0.018s;}
.animate-logo:hover svg path:nth-of-type(3) { transform: translateY(-50%) rotate(0.0001deg); transition-delay: 0.036s;}
.animate-logo:hover svg path:nth-of-type(4) { transform: translateY(-50%) rotate(0.0001deg); transition-delay: 0.054s;}
.animate-logo:hover svg path:nth-of-type(5) { transform: translateY(-50%) rotate(0.0001deg); transition-delay: 0.072s;}
.animate-logo:hover svg path:nth-of-type(6) { transform: translateY(-50%) rotate(0.0001deg); transition-delay: 0.09s;}
.animate-logo:hover svg path:nth-of-type(7) { transform: translateY(-50%) rotate(0.0001deg); transition-delay: 0.108s;}
.animate-logo:hover svg path:nth-of-type(8) { transform: translateY(-50%) rotate(0.0001deg); transition-delay: 0.126s;}
.animate-logo:hover svg path:nth-of-type(9) { transform: translateY(-50%) rotate(0.0001deg); transition-delay: 0.144s;}
.animate-logo:hover svg path:nth-of-type(10) { transform: translateY(-50%) rotate(0.0001deg); transition-delay: 0.162s;}
.animate-logo:hover svg path:nth-of-type(11) { transform: translateY(-50%) rotate(0.0001deg); transition-delay: 0.18s;}
.animate-logo:hover svg path:nth-of-type(12) { transform: translateY(-50%) rotate(0.0001deg); transition-delay: 0.198s;}
.animate-logo:hover svg path:nth-of-type(13) { transform: translateY(-50%) rotate(0.0001deg); transition-delay: 0.216s;}
.animate-logo:hover svg path:nth-of-type(14) { transform: translateY(-50%) rotate(0.0001deg); transition-delay: 0.234s;}

@media screen and (max-width: 540px){ 
   .animate-logo {
      font-size: .75em;
      margin-top: .5em;
   }
}

/* ------------------------- Nav Bar -------------------------------------------------- */

.nav-bar {
   position: fixed;
   top: var(--viewport-padding);
   left: var(--viewport-padding);
   bottom: var(--viewport-padding);
   z-index: 88;
   display: block;
   pointer-events: none;
}

.nav-bar * {
   pointer-events: all;
}

/* ------------------------- Logo Icon -------------------------------------------------- */

.logo-icon {
   display: block;
   width: 100%;
   overflow: hidden;
   position: relative;
   margin-bottom: 1.25em;
   width: var(--nav-padding);
}

.logo-icon::before {
   display: block;
   content: "";
   padding-top: 96%;
}

.logo-icon svg {
   width: 100%;
   position: absolute;
   top: 0;
}

.logo-icon svg path {
   fill: var(--white);
   stroke: var(--white);
   stroke-width: .05em;
   transition: var(--animation-primary);
   transform: translateY(0);
}

.logo-icon:hover svg path {
   transform: translateY(-52%);
}

@media screen and (max-width: 540px){ 
   .logo-icon {
      display: none;
   }
}

/* ------------------------- Logo Icon - Line -------------------------------------------------- */

.logo-icon-line {
   display: block;
   width: 100%;
   overflow: hidden;
   position: relative;
   margin-bottom: 1.25em;
   width: var(--nav-padding);
}

.logo-icon-line::before {
   display: block;
   content: "";
   padding-top: 96%;
}

.logo-icon-line svg {
   width: 100%;
   position: absolute;
   top: 0;
   transform-origin: 50% 50%;
   transition: transform 1s ease-in-out;
}

.logo-icon-line svg path {
   fill: var(--white);
   stroke: none;
}

.logo-icon-line svg:nth-child(1) path {
   fill: var(--primary-light);
}

.logo-icon-line:hover svg:nth-child(2) {
   transform: rotate(45deg);
}

@media screen and (max-width: 540px){ 
   .logo-icon-line {
      display: none;
   }
}


/* ------------------------- Nav Button -------------------------------------------------- */

.nav-btn {
   display: block;
   width: 100%;
   position: relative;
   width: var(--nav-padding);
}

.nav-bars {
   display: block;
   width: 100%;
   position: relative;
   overflow: hidden;
   margin-bottom: .3em;
}

.nav-bars::before {
   display: block;
   padding-top: 1.5em;
   content: "";
}

.nav-btn-bar {
   position: absolute;
   height: 2px;
   background: var(--white);
   top: 0;
   width: 100%;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   transition: var(--animation-primary);
}

.nav-btn-bar:nth-child(1) {transform: translate(-50%, -450%);}
.nav-btn-bar:nth-child(2) {transform: translate(-62%, -50%); width: 80%; transition-delay: .03s;}
.nav-btn-bar:nth-child(3) {transform: translate(-50%, 350%); transition-delay: .06s;}

.nav-btn-bar:nth-child(4) {transform: translate(-230%, -450%);}
.nav-btn-bar:nth-child(5) {transform: translate(-253%, -50%); width: 80%; transition-delay: .03s;}
.nav-btn-bar:nth-child(6) {transform: translate(-230%, 350%); transition-delay: .06s;}

.nav-btn-text {
   display: block;
   width: 100%;
   font-size: .75em;
   font-size: calc(var(--nav-padding) / 2.7);
   position: relative;
   overflow: hidden;
}

.nav-btn-text::before {
   display: block;
   padding-top: 40%;
   content: "";
}

.nav-btn-text span {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   text-align: right;
   transition: var(--animation-primary);
}

.nav-btn-text span:nth-child(2){
   transform: translateY(110%);
   letter-spacing: 0.05em;
}

.nav-btn-text span:nth-child(3){
   transform: translateY(110%);
   letter-spacing: 0.05em;
}

/* Hover */

.nav-btn:hover {
   cursor: pointer;
}

.nav-btn:hover .nav-btn-text span:nth-child(1){
   transform: translateY(-110%);
}

.nav-btn:hover .nav-btn-text span:nth-child(3){
   transform: translateY(0%);
}

.nav-btn:hover .nav-btn-bar:nth-child(1) {transform: translate(130%, -450%);}
.nav-btn:hover .nav-btn-bar:nth-child(2) {transform: translate(156%, -50%);}
.nav-btn:hover .nav-btn-bar:nth-child(3) {transform: translate(130%, 350%);}

.nav-btn:hover .nav-btn-bar:nth-child(4) {transform: translate(-50%, -450%);}
.nav-btn:hover .nav-btn-bar:nth-child(5) {transform: translate(-38%, -50%);}
.nav-btn:hover .nav-btn-bar:nth-child(6) {transform: translate(-50%, 350%);}

/* Active */

main.nav-active .nav-btn-text span:nth-child(1){
   transform: translateY(0%);
}

main.nav-active .nav-btn:hover .nav-btn-text span:nth-child(2){
   transform: translateY(0%);
}

main.nav-active .nav-btn-text span:nth-child(3),
main.nav-active .nav-btn:hover .nav-btn-text span:nth-child(3) {
   transform: translateY(-110%);
}

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

   .nav-btn-bar:nth-child(1), .nav-btn:hover .nav-btn-bar:nth-child(1) {transform: translate(-50%, -450%);}
   .nav-btn-bar:nth-child(2), .nav-btn:hover .nav-btn-bar:nth-child(2) {transform: translate(-62%, -50%);}
   .nav-btn-bar:nth-child(3), .nav-btn:hover .nav-btn-bar:nth-child(3) {transform: translate(-50%, 350%);}

   .nav-btn-bar:nth-child(4), .nav-btn:hover .nav-btn-bar:nth-child(4) {transform: translate(-230%, -450%);}
   .nav-btn-bar:nth-child(5), .nav-btn:hover .nav-btn-bar:nth-child(5) {transform: translate(-253%, -50%);}
   .nav-btn-bar:nth-child(6), .nav-btn:hover .nav-btn-bar:nth-child(6) {transform: translate(-230%, 350%);}

   .nav-btn:hover .nav-btn-text span:nth-child(1),
   .nav-btn-text span:nth-child(1) {
      transform: translateY(0%);
   }

   main.nav-active .nav-btn-text span:nth-child(1),
   main.nav-active .nav-btn:hover .nav-btn-text span:nth-child(1) {
      transform: translateY(-110%);
   }
   
   .nav-btn-text span:nth-child(2) {
      transform: translateY(110%);
   }

   main.nav-active .nav-btn-text span:nth-child(2) {
      transform: translateY(0%);
   }
   
   .nav-btn-text span:nth-child(3) {
      transform: translateY(110%) !important;
   }

}

/* ------------------------- Nav Button -------------------------------------------------- */

.nav-btn-back-fade {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   transform: translate(-35%, -35%) rotate(-30deg);
   height: 10em;
   width: 150vw;
   background: transparent;
   background: linear-gradient(0deg, rgba(14,82,52,0) 0%, #0E5234 45%);
   pointer-events: none;
   z-index: 18;

   background: linear-gradient(
      to bottom,
      #0E5234 0%,
      hsla(153, 71%, 19%, 0.987) 8.1%,
      hsla(153, 71%, 19%, 0.951) 15.5%,
      hsla(153, 71%, 19%, 0.896) 22.5%,
      hsla(153, 71%, 19%, 0.825) 29%,
      hsla(153, 71%, 19%, 0.741) 35.3%,
      hsla(153, 71%, 19%, 0.648) 41.2%,
      hsla(153, 71%, 19%, 0.55) 47.1%,
      hsla(153, 71%, 19%, 0.45) 52.9%,
      hsla(153, 71%, 19%, 0.352) 58.8%,
      hsla(153, 71%, 19%, 0.259) 64.7%,
      hsla(153, 71%, 19%, 0.175) 71%,
      hsla(153, 71%, 19%, 0.104) 77.5%,
      hsla(153, 71%, 19%, 0.049) 84.5%,
      hsla(153, 71%, 19%, 0.013) 91.9%,
      hsla(153, 71%, 19%, 0) 100%
    );
}

@media screen and (max-width: 540px){ 
   .nav-btn-back-fade {
      display: block;
   }
}



/* ------------------------- WhatsApp Icon -------------------------------------------------- */

.whatsapp-icon {
   display: block;
   width: 100%;
   position: relative;
   width: var(--nav-padding);

   position: absolute;
   bottom: 0;
}

.whatsapp-open,
.whatsapp-link {
   position: absolute;
   bottom: 0;
   width: 9em;
   border-radius: 2em;
   background: transparent;
   height: 100%;
   cursor: pointer;
}

.whatsapp-link {
   display: none;
}

.whatsapp-inner {
   display: block;
   width: 100%;
   position: relative;
   overflow: hidden;
}

.whatsapp-inner::before {
   display: block;
   content: "";
   padding-top: 100%;
}

.whatsapp-icon .whatsapp-inner svg {
   width: 100%;
   position: absolute;
   top: 0;
   transition: var(--animation-primary);
}

.whatsapp-icon:hover .whatsapp-inner svg,
.whatsapp-icon.active .whatsapp-inner svg {
   transform: translateY(-120%);
}

.whatsapp-icon:hover .whatsapp-inner svg:nth-child(1),
.whatsapp-icon.active .whatsapp-inner svg:nth-child(1) {
   transform: translateY(-120%);
}

.whatsapp-icon .whatsapp-inner svg:nth-child(2) {
   transform: translateY(120%);
}

.whatsapp-icon .whatsapp-text {
   position: absolute;
   top: 50%;
   display: block;
   left: 100%;
   transform: translate(-25%, -50%) scale(0) rotate(0.001deg);
   transition: var(--animation-primary);
   padding-left: .5em;
   padding-right: 0.2em;
   opacity: 0;
}

.whatsapp-icon:hover .whatsapp-text,
.whatsapp-icon.active .whatsapp-text {
   color: var(--primary-dark);
   transform: translate(0, -50%) scale(1) rotate(0.001deg);
   opacity: 1;
}

.whatsapp-icon span {
   display: block;
   float: left;
   white-space: nowrap;
   background: var(--white);
   padding: .75em 1.1em .65em 1em;
   border-radius: 5em;
   font-weight: 500;
   font-size: .92em;
}

/* Hover */

.whatsapp-icon:hover svg:nth-child(2),
.whatsapp-icon.active svg:nth-child(2) {
   transform: translateY(0%);
}

/* Top Block Whatsapp */

.whatsapp-block {
   position: absolute;
   top: 0;
   left: 100%;
   transform: translate(-25%, -50%) scale(0) rotate(0.001deg);
   padding: 1em 1.25em 1.75em 1.75em;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   transition: var(--animation-primary);
   transition-delay: 0s;
   opacity: 0;
}

.whatsapp-icon.active .whatsapp-block {
   transform: translate(0, -100%) scale(1) rotate(0.001deg);
   /* transition-delay: .1s; */
   opacity: 1;
}

.whatsapp-block-bg {
   position: absolute;
   top: 0;
   left: .5em;
   width: calc(100% - .5em);
   height: calc(100% - .75em);
   background: var(--white);
   border-radius: 1.25em;
}

.whatsapp-block .flex-col {
   width: 100%;
}

.whatsapp-block .flex-col p {
   line-height: 1.2;
   color: #000;
   font-weight: 500;
   font-size: .75em;
   text-align: center;
   margin-bottom: 1em;
}

.whatsapp-block svg {
   width: 100%;
   display: block;
   padding: 1em 1em 1em 1em;
}

.whatsapp-block .link.whatsapp {
   margin: 0;
   background: var(--secondary);
   border-radius: 2em;
   padding: .65em 1.25em .45em 1.25em;
   transition: var(--animation-primary);
   font-weight: 500;
   margin-bottom: 0;
   font-size: .75em;
}

.whatsapp-block .link.whatsapp .link-text:nth-of-type(2) {
   color: var(--white);
}

.whatsapp-close {
   width: 1.8em;
   height: 1.8em;
   right: 0;
   top: 0;
   position: absolute;
   cursor: pointer;
}

.whatsapp-close svg {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 60%;
   padding: 0;
   transition: var(--animation-primary);
   transform: rotate(0.001deg);
}

.whatsapp-close:hover svg {
   transform: rotate(90deg);
}

@media screen and (max-width: 820px){ 
   .whatsapp-block,
   .whatsapp-open {
      display: none;
   }

   .whatsapp-link {
      display: block;
   }
}


/* ------------------------- Scroll Down Arrow -------------------------------------------------- */

.scroll-down-arrow {
   position: absolute;
   left: 50%;
   bottom: var(--viewport-padding);
   display: block;
   width: var(--nav-padding);
   height: var(--nav-padding);
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   cursor: pointer;
}

.scroll-down-arrow .inner {
   position: absolute;
   width: 100%;
   transition: var(--animation-nav);
   bottom: 0;
   transform: translate(0, 0) rotate(0.001deg);
}

.scroll-down-arrow .inner .animate-inner {
   position: relative;
}

.scroll-down-arrow .svg-wrap {
   position: relative;
   width: 100%;
}

.scroll-down-arrow .inner .svg-wrap::before {
   display: block;
   padding-top: 100%;
   content: "";
}

.scroll-down-arrow svg {
   position: absolute;
   width: 50%;
   padding: 0%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(90deg);
}

/* Hover */

.scroll-down-arrow:hover .inner{
   transform: translate(0, 75%) rotate(0.001deg);
}


/* ------------------------- Navigation Back -------------------------------------------------- */

.nav-back-overlay {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background: var(--black);
   z-index: 19;
   opacity: 0;
   visibility: hidden;
   transition: var(--animation-nav);
}

main.nav-active .nav-back-overlay {
   opacity: .4;
   visibility: visible;
}

.nav-back-left {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   width: 50vw;
   width: max(540px, 50vw);
   background: var(--primary);
   transform: translate(-102%, 0) rotate(.00001deg);
   transition: var(--animation-nav);
   z-index: 20;
   transition-delay: 0s;
}

main.nav-active .nav-back-left {
   transform: translate(0, 0) rotate(.00001deg);
   transition-delay: 0s;
}

.nav-back-right {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   width: 50vw;
   transition: var(--animation-nav);
   z-index: 20;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

main.nav-active .nav-back-right {
   opacity: 1;
   visibility: visible;
}

@media screen and (max-width: 540px){ 
   .nav-back-left {
      width: 100vw;
   }
}

/* ------------------------- Main Navigation -------------------------------------------------- */

.main-nav {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   width: 50vw;
   width: max(540px, 50vw);
   transform: translate(-150%, 0) rotate(0.001deg);
   transition: var(--animation-nav);
   z-index: 21;
   transition-delay: 0s;
   display: flex;
   justify-content: center;
   align-items: center;
}

main.nav-active .main-nav {
   transform: translate(0, 0) rotate(.001deg);
   transition-delay: 0s;
}

.main-nav ul {
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   justify-content: center;
   padding-bottom: 1em;
}

.main-nav ul .ul-wrap {
   position: relative;
   display: flex;
   flex-direction: column;
}

.main-nav ul li {
   display: flex;
   position: relative;
   transform: translate(0, 0) rotate(0.001deg);
   transition: var(--animation-nav);
}

.main-nav ul li:first-of-type {
   display: none;
   display: block;
}

.main-nav ul li a {
   position: relative;
   display: block;
   overflow: hidden;
   padding: 1vh 0;
}

.nav-item-wrap {
   position: relative;
   display: block;
   overflow: hidden;
}

.main-nav ul li a span {
   position: relative;
   display: block;
   margin: 0;
   font-family: roc-grotesk-wide, sans-serif;
   color: var(--white);
   font-size: 2em; /* 34px */
   font-size: clamp(2em, 2.5vw, 2.75em);
   line-height: 1;
   font-weight: 500;
   transition: var(--animation-primary);
   transform: translate(0, 0) rotate(0.001deg);
   padding: .1em 0;
   letter-spacing: -.005em;
}

.main-nav ul li a span.has-number {
   padding: .1em 4rem .1em 0;
}

.main-nav ul li a span:nth-child(2) {
   transform: translate(0, 60%) rotate(0.001deg);
   position: absolute;
   top: 50%;
   display: block;
   color: var(--secondary);
}

/* Number */

.main-nav ul li a .number {
   position: absolute;
   top: 0;
   right: 0;
   transform: translate(calc(100% - 3.5rem), 0);
   padding: 1em .5em .8em .5em;
   background: var(--secondary);
   border-radius: 2em;
   font-size: calc(clamp(2em, 2.5vw, 2.75em) / 6);
   color: var(--white);
   margin: 0;
   line-height: 0;
}

/* Hover */

.main-nav ul li a:hover {
   text-decoration: none;
}

.main-nav ul li a:hover span {
   transform: translate(0, -110%) rotate(0.001deg);
   text-decoration: none;
}

.main-nav ul li a:hover span:nth-child(2) {
   transform: translate(0, -50%) rotate(0.001deg);
}

/* Active */

.main-nav ul li.active a span {
   color: var(--primary-light);
   transform: translate(0, 0%) rotate(0.001deg);
}

.main-nav ul li.active a span:nth-child(2) {
   transform: translate(0, 60%) rotate(0.001deg);
}

/* Animation Open/Close */

main .main-nav ul li:nth-of-type(1) { transform: translateX(-100%) rotate(0.001deg); transition-delay: 0s;}
main .main-nav ul li:nth-of-type(2) { transform: translateX(-100%) rotate(0.001deg); transition-delay: 0s;}
main .main-nav ul li:nth-of-type(3) { transform: translateX(-100%) rotate(0.001deg); transition-delay: 0s;}
main .main-nav ul li:nth-of-type(4) { transform: translateX(-100%) rotate(0.001deg); transition-delay: 0s;}
main .main-nav ul li:nth-of-type(5) { transform: translateX(-100%) rotate(0.001deg); transition-delay: 0s;}
main .main-nav ul li:nth-of-type(6) { transform: translateX(-100%) rotate(0.001deg); transition-delay: 0s;}
main .main-nav ul li:nth-of-type(7) { transform: translateX(-100%) rotate(0.001deg); transition-delay: 0s;}
main .main-nav ul li:nth-of-type(8) { transform: translateX(-100%) rotate(0.001deg); transition-delay: 0s;}
main .main-nav ul li:nth-of-type(9) { transform: translateX(-100%) rotate(0.001deg); transition-delay: 0s;}


main.nav-active .main-nav ul li:nth-of-type(1) { transform: translateX(0%) rotate(0.001deg); transition-delay: 0s;}
main.nav-active .main-nav ul li:nth-of-type(2) { transform: translateX(0%) rotate(0.001deg); transition-delay: .025s;}
main.nav-active .main-nav ul li:nth-of-type(3) { transform: translateX(0%) rotate(0.001deg); transition-delay: .05s;}
main.nav-active .main-nav ul li:nth-of-type(4) { transform: translateX(0%) rotate(0.001deg); transition-delay: .075s;}
main.nav-active .main-nav ul li:nth-of-type(5) { transform: translateX(0%) rotate(0.001deg); transition-delay: .1s;}
main.nav-active .main-nav ul li:nth-of-type(6) { transform: translateX(0%) rotate(0.001deg); transition-delay: .125s;}
main.nav-active .main-nav ul li:nth-of-type(7) { transform: translateX(0%) rotate(0.001deg); transition-delay: .15s;}
main.nav-active .main-nav ul li:nth-of-type(8) { transform: translateX(0%) rotate(0.001deg); transition-delay: .175s;}
main.nav-active .main-nav ul li:nth-of-type(9) { transform: translateX(0%) rotate(0.001deg); transition-delay: .2s;}


@media screen and (max-width: 540px){ 
   .main-nav {
      width: 100vw;
   }

   .main-nav ul li:first-of-type {
      display: block;
   }

   .main-nav ul li a {
      padding: .7em 0;
   }

   .main-nav ul li a span {
      font-size: 1.5em; /* 34px */
      font-size: 1.75em;
      padding: 0;
   }
   
}

/* ------------------------- Navigation Contact Button -------------------------------------------------- */

.btn-nav-contact {
   position: absolute;
   top: var(--nav-padding);
   right: var(--nav-padding);
}

.btn-nav-contact .icon,
.btn-outline-header .icon {
   width: 0.9em;
   height: 0.9em;
   transform: translateY(-0.15em);
   margin-right: 0.4em;
}

.btn-nav-contact svg,
.btn-outline-header svg {
   width: 100%;
}

/* ------------------------- Navigation - Social Icons -------------------------------------------------- */

.nav-s-icons {
   position: absolute;
   right: var(--nav-padding);
   bottom: var(--nav-padding);
}


/* ------------------------- Language -------------------------------------------------- */

.nav-language {
   position: absolute;
   left: 0;
   bottom: var(--nav-padding);
   display: flex;
   flex-direction: row;
}

.nav-language .language-link {
   padding: .25em .25em .15em .25em;
   font-family: roc-grotesk-wide, sans-serif;
   font-weight: 500;
   text-transform: uppercase;
   font-size: .8em;
   color: var(--text-light);
   margin-right: .25em;
   order: 2;
}

.nav-language .language-link.active {
   order: 1;
}

.nav-language .language-link .link-text {
   color: var(--primary-light);
}

.nav-language .language-link .link-text:nth-of-type(2) {
   color: var(--secondary);
}

.nav-language .language-link.active .link-text {
   color: var(--white);
}

.nav-language .language-link.active:hover .link-text {
   color: var(--white);
   transform: translate(0, 0);
}

.nav-language .language-link.active:hover .link-text:nth-of-type(2) {
   color: var(--white);
   transform: translate(0, 100%);
}

@media screen and (max-width: 540px){ 
   .nav-language {
      position: relative;
      left: unset;
      bottom: unset;
      padding-top: calc(var(--gap-padding) * 2);
      transition: var(--animation-nav);
   }

   main .nav-language { transform: translateX(-100%) rotate(0.001deg); transition-delay: 0s;}
   main.nav-active .nav-language { transform: translateX(0%) rotate(0.001deg); transition-delay: .225s;}
}

/* ------------------------- Footer -------------------------------------------------- */

.footer {
   border-top: 1px solid var(--primary-light);
   padding-top: var(--section-padding-medium);
   padding-bottom: var(--section-padding-medium);
}

.footer .row-split {
   flex-wrap: nowrap;
}

.footer .flex-col-logo {
   position: relative;
   width: auto;
   display: flex;
}

.footer .footer-logo-wrap {
   position: relative;
   width: var(--nav-padding);
   height: calc(var(--nav-padding) * 5.5);
   margin-bottom: .5em;
}

.footer .flex-col-logo .footer-logo {
   transform: translate(-50%, -50%) rotate(-90deg);
   position: absolute;
   left: 50%;
   top: 50%;
}

.footer .flex-col-links {
   padding-left: 10%;
}

.flex-col-links {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.flex-col-links .row:nth-of-type(2) .flex-col {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-wrap: wrap;
}

.flex-col-links .footer-credit-small {
   font-size: .8em;
   line-height: 1;
   margin: 0;
   display: inline-block;
   transform: translate(0, 0.075em);
   color: var(--text-light);
   margin-right: 2em;
}

.flex-col-links .footer-nolink {
   padding: 0.15em 0 0.15em 0;
   line-height: 1;
   display: inline-block;
   color: var(--text);
}

.flex-col-links .footer-nolink strong {
   color: var(--white);
}

.flex-col-links .row:nth-of-type(2) {
   flex-wrap: wrap;
}

.flex-col-links .row:nth-of-type(1) {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.flex-col-links .row:nth-of-type(1) .flex-col {
   padding-top: 1.75em;
   width: auto;
}

.flex-col-links .row:nth-of-type(1) .flex-col:nth-child(1) {
   padding-top: 0;
}

.flex-col-links .row:nth-of-type(1) li {
   display: flex;
   margin-bottom: .5em;
}

.flex-col-links.credentials-single li {
   display: flex;
   margin-bottom: .5em;
}

.flex-col-links .row:nth-of-type(1) .link {
   margin: 0;
}

.flex-col-links .row:nth-of-type(1) .flex-col:nth-child(5) {
   padding-top: 1.5em;
}

.flex-col-links .row:nth-of-type(1) .footer-s-icons {
   display: flex;
   flex-direction: column;
}

.flex-col-links .row:nth-of-type(1) .footer-s-icons .s-icon {
   margin-bottom: .25em;
}

.flex-col-links .row:nth-of-type(1) .link.active {
   transform: skew(-12deg, 0);
}

.flex-col-links .row:nth-of-type(1) .link.active .link-text {
   color: var(--secondary-inactive);
}


/*  Hover  */

.flex-col-links .row:nth-of-type(1) .link.active .link-text:nth-of-type(1) {
   transform: translate(0, 0);
}

.flex-col-links .row:nth-of-type(1) .link.active .link-text:nth-of-type(2) {
   transform: translate(0, 100%);
}

@media screen and (max-width: 900px){ 
   .flex-col-links .row:nth-of-type(1) .flex-col {
      min-width: 13em;
   }

   .flex-col-links .row:nth-of-type(1) .footer-s-icons {
      flex-direction: row;
      transform: translate(-.5em, 0);
   }

   .flex-col-links .row:nth-of-type(1) .footer-s-icons .s-icon {
      margin-bottom: 0;
   }

   .flex-col-links .row:nth-of-type(1) .flex-col:nth-child(5) {
      padding-bottom: 2em;
   }
}

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

   .flex-col-links .row:nth-of-type(1) .flex-col,
   .flex-col-links .row:nth-of-type(2) .flex-col * {
      min-width: 60%;
      text-align: left;
      margin: 0;
   }

   .flex-col-links .row:nth-of-type(1) .flex-col:nth-child(2),
   .flex-col-links .row:nth-of-type(1) .flex-col:nth-child(4),
   .flex-col-links .row:nth-of-type(2) .flex-col :nth-child(2),
   .flex-col-links .row:nth-of-type(2) .flex-col :nth-child(4) {
      min-width: 40%;
   }

   .flex-col-links .row:nth-of-type(2) .link .link-wrap {
      justify-content: flex-start;
   }

   .flex-col-links .row:nth-of-type(2) .flex-col span,
   .flex-col-links .row:nth-of-type(2) .flex-col a {
      margin-bottom: .5em;
   }

}

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

   .footer .row-split {
      flex-direction: column;
      padding-bottom: 1em;
   }

   .footer .flex-col-links {
      padding-left: 0;
   }

   .footer .flex-col-logo {
      position: relative;
      width: auto;
      display: flex;
   }
   
   .footer .footer-logo-wrap {
      position: relative;
      width: auto;
      height: auto;
      margin-bottom: 2.5em;
      margin-top: -.5em;
   }
   
   .footer .flex-col-logo .footer-logo {
      transform: translate(0, 0) rotate(0);
      position: relative;
      left: unset;
      top: unset;
   }

}


/* ------------------------- Homepage - Header -------------------------------------------------- */

.home-pattern-top {
   top: 130vh;
}

/* .section-home-header.full-height .video-overlay {
   background: rgba(58, 11, 34, 0.7);
   opacity: 1;
   background: linear-gradient(90deg, rgba(14, 82, 52, .8) 0%, rgba(14, 82, 52, .2) 100%);
}

.section-home-header h1 {
   margin-top: 1em;
} */

.btn-outline-header {
   position: absolute;
   right: var(--nav-padding);
   top: 0;
}

@media screen and (max-width: 720px){ 
   .btn-outline-header {
      display: none;
   } 
}

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

   /* .section-home-header.full-height .video-bg {
      width: 100%;
      left: 0;
      top: 0;
      height: calc((var(--vh, 1vh) * 100));
   }

   .section-home-header.full-height .video-overlay {
      background: rgba(58, 11, 34, .5);
      background: linear-gradient(90deg, rgba(10, 61, 39, .98) 0%, rgba(10, 61, 39, .5) 100%);
   } */

   .section-home-header .video-thumbnail {
      opacity: 1 !important;
   }
}


/* ------------------------- Homepage - Pattern Circ -------------------------------------------------- */

.home-pattern-circ {
   top: 51.8%;
   transform: translateY(-50%);
}

@media screen and (max-width: 540px){ 
   .home-pattern-circ {
      top: 52.6%;
      height: 120vh;
      overflow: hidden;
      transform: translateY(-50%);
   }

   .home-pattern-circ svg {
      width: auto;
      height: 100%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0.0001deg);
      opacity: 0.15;
   }
}

/* ------------------------- Homepage - Circle Info -------------------------------------------------- */

.circ-info .row:nth-child(1) .flex-col{
   text-align: center;
}

.circ-info .row:nth-child(2) .flex-col {
   width: 100%;
   position: relative;
}

.circ-info .row:nth-child(2) .flex-col::before {
   content: "";
   display: block;
   padding-top: 80%;
}

.circ-info .circ-big-image {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(0.001deg);
   width: 60%;
   border-radius: 100em;
   transition: var(--animation-circ);
   overflow: hidden;
   background: var(--primary-dark);
}

.circ-info .circ-big-image::before {
   content: "";
   display: block;
   padding-top: 100%;
}

.circ-info .circ-small-image {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(0.001deg);
   width: 35%;
   border-radius: 100em;
   transition: var(--animation-circ);
   overflow: hidden;
   z-index: 2;
   background: var(--primary-dark);
}

.circ-info .circ-small-image::before {
   content: "";
   display: block;
   padding-top: 100%;
}

.circ-info .text-blocks {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

.circ-info .text-block {
   position: absolute;
   top: 0;
   left: 0;
   width: min(48%, 20em);
   text-align: center;
   height: 40%;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.circ-info .text-block .circ-pop {
   transform: translate(0, 0) scale(0.9) rotate(0.001deg);
   transition: var(--animation-circ);
}

.circ-info .text-block:nth-of-type(2) {
   left: auto;
   right: 0;
}

.circ-info .text-block:nth-of-type(3) {
   top: auto;
   bottom: 0;
}

.circ-info .text-block:nth-of-type(4) {
   top: auto;
   left: auto;
   right: 0;
   bottom: 0;
}

.circ-info .text-block svg {
   position: absolute;
   width: 55%;
   top: 100%;
   left: 50%;
   transform: translate(0%, -35%);
   pointer-events: none;
}

.circ-info .text-block svg path {
   fill: var(--primary-light);
   transition: var(--animation-circ);
}

.circ-info .text-block:nth-of-type(2) svg {
   transform: translate(-100%, -35%) scale(-1,1);
}

.circ-info .text-block:nth-of-type(3) svg {
   top: 0;
   transform: translate(0%, -65%) scale(1,-1);
}

.circ-info .text-block:nth-of-type(4) svg {
   top: 0;
   transform: translate(-100%, -65%) scale(-1,-1);
}

.circ-info .text-block h3 {
   color: var(--primary-light);
   transition: var(--animation-circ);
}

.circ-info .text-block p {
   color: var(--primary-light);
   transition: var(--animation-circ);
}

.circ-info .overlay.circ-overlay {
   background: var(--section-bg, var(--primary));
   opacity: .85;
}

.circ-info .circ-small-image-overlay {
   opacity: 0;
   transition: var(--animation-circ);
   border-radius: 100em;
}

.circ-info .circ-big-image-overlay {
   opacity: 0;
   transition: var(--animation-circ);
   border-radius: 100em;
}

.circ-info .circ-flex-col.active0 .text-block:nth-child(1) .circ-pop {transform: translate(0, 0) scale(1) rotate(0.001deg);}
.circ-info .circ-flex-col.active0 .text-block:nth-child(1) h3 {color: var(--secondary); transform: translateY(0%) rotate(0.0001deg);} 
.circ-info .circ-flex-col.active0 .text-block:nth-child(1) p {color: var(--white);}
.circ-info .circ-flex-col.active0 .text-block:nth-child(1) svg path {fill: var(--secondary);}
.circ-info .circ-flex-col.active0 .circ-small-image-overlay:nth-child(1) {opacity: 1; transform: scale(1);}
.circ-info .circ-flex-col.active0 .circ-big-image-overlay:nth-child(1) {opacity: 1; transform: scale(1);}
.circ-info .circ-flex-col .circ-small-image-overlay:nth-child(1) {transform: rotate(0deg) scale(1);}
.circ-info .circ-flex-col .circ-big-image-overlay:nth-child(1) {transform: rotate(0deg) scale(1);}
.circ-info .circ-flex-col.active0 .circ-small-image {transform: translate(-50%, -50%) rotate(0deg);}
.circ-info .circ-flex-col.active0 .circ-big-image {transform: translate(-50%, -50%) rotate(0deg);}

.circ-info .circ-flex-col.active1 .text-block:nth-child(2) .circ-pop {transform: translate(0, 0) scale(1) rotate(0.001deg);}
.circ-info .circ-flex-col.active1 .text-block:nth-child(2) h3 {color: var(--secondary); transform: translateY(0%) rotate(0.0001deg);} 
.circ-info .circ-flex-col.active1 .text-block:nth-child(2) p {color: var(--white);}
.circ-info .circ-flex-col.active1 .text-block:nth-child(2) svg path {fill: var(--secondary);}
.circ-info .circ-flex-col.active1 .circ-small-image-overlay:nth-child(2) {opacity: 1; transform: rotate(-90deg) scale(1);}
.circ-info .circ-flex-col.active1 .circ-big-image-overlay:nth-child(2) {opacity: 1; transform: rotate(90deg) scale(1);}
.circ-info .circ-flex-col .circ-small-image-overlay:nth-child(2) {transform: rotate(-90deg) scale(1);}
.circ-info .circ-flex-col .circ-big-image-overlay:nth-child(2) {transform: rotate(90deg) scale(1);}
.circ-info .circ-flex-col.active1 .circ-small-image {transform: translate(-50%, -50%) rotate(90deg);}
.circ-info .circ-flex-col.active1 .circ-big-image {transform: translate(-50%, -50%) rotate(-90deg);}

.circ-info .circ-flex-col.active2 .text-block:nth-child(3) .circ-pop {transform: translate(0, 0) scale(1) rotate(0.001deg);}
.circ-info .circ-flex-col.active2 .text-block:nth-child(3) h3 {color: var(--secondary); transform: translateY(0%) rotate(0.0001deg);} 
.circ-info .circ-flex-col.active2 .text-block:nth-child(3) p {color: var(--white);}
.circ-info .circ-flex-col.active2 .text-block:nth-child(3) svg path {fill: var(--secondary);}
.circ-info .circ-flex-col.active2 .circ-small-image-overlay:nth-child(3) {opacity: 1; transform: rotate(90deg) scale(1);}
.circ-info .circ-flex-col.active2 .circ-big-image-overlay:nth-child(3) {opacity: 1; transform: rotate(-90deg) scale(1);}
.circ-info .circ-flex-col .circ-small-image-overlay:nth-child(3) {transform: rotate(90deg) scale(1);}
.circ-info .circ-flex-col .circ-big-image-overlay:nth-child(3) {transform: rotate(-90deg) scale(1);}
.circ-info .circ-flex-col.active2 .circ-small-image {transform: translate(-50%, -50%) rotate(-90deg);}
.circ-info .circ-flex-col.active2 .circ-big-image {transform: translate(-50%, -50%) rotate(90deg);}

.circ-info .circ-flex-col.active3 .text-block:nth-child(4) .circ-pop {transform: translate(0, 0) scale(1) rotate(0.001deg);}
.circ-info .circ-flex-col.active3 .text-block:nth-child(4) h3 {color: var(--secondary); transform: translateY(0%) rotate(0.0001deg);} 
.circ-info .circ-flex-col.active3 .text-block:nth-child(4) p {color: var(--white);}
.circ-info .circ-flex-col.active3 .text-block:nth-child(4) svg path {fill: var(--secondary);}
.circ-info .circ-flex-col.active3 .circ-small-image-overlay:nth-child(4) {opacity: 1; transform: rotate(-180deg) scale(1);}
.circ-info .circ-flex-col.active3 .circ-big-image-overlay:nth-child(4) {opacity: 1; transform: rotate(180deg) scale(1);}
.circ-info .circ-flex-col .circ-small-image-overlay:nth-child(4) {transform: rotate(-180deg) scale(1);}
.circ-info .circ-flex-col .circ-big-image-overlay:nth-child(4) {transform: rotate(180deg) scale(1);}
.circ-info .circ-flex-col.active3 .circ-small-image {transform: translate(-50%, -50%) rotate(180deg);}
.circ-info .circ-flex-col.active3 .circ-big-image {transform: translate(-50%, -50%) rotate(-180deg);}

@media screen and (max-width: 1080px){  
   .circ-info .row:nth-child(2) .flex-col::before {
      padding-top: 80%;
   }

   .circ-info .text-blocks {
      transform: translateY(0) !important;
   }

}

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

   .circ-info {
      border-bottom: 1px solid var(--primary-light);
      margin-bottom: var(--section-padding);
   }

   .circ-info .row:nth-child(1) .flex-col{
      padding-top: var(--section-padding-medium);
   }

   .circ-info .row:nth-child(2) .flex-col::before {
      padding-top: 100%;
   }

   .circ-info .container {
      padding-left: 5vw;
      padding-right: 5vw;
   }

   .circ-info .text-block {
      height: 25%;
   }

   .circ-info .text-block svg {
      transform: translate(0%, 10%);
   }
   
   .circ-info .text-block:nth-of-type(2) svg {
      transform: translate(-100%, 10%) scale(-1,1);
   }
   
   .circ-info .text-block:nth-of-type(3) svg {
      transform: translate(0%, -110%) scale(1,-1);
   }
   
   .circ-info .text-block:nth-of-type(4) svg {
      transform: translate(-100%, -110%) scale(-1,-1);
   }

}

@media screen and (max-width: 800px){  
   .circ-info .row:nth-child(2) .flex-col::before {
      padding-top: 120%;
   }

   .circ-info .row:nth-child(1) .flex-col{
      padding-bottom: var(--section-padding-small);
   }

}

@media screen and (max-width: 540px){  
   .circ-info .row:nth-child(2) .flex-col::before {
      padding-top: 150%;
   }

   .circ-info .container {
      padding-left: 3vw;
      padding-right: 3vw;
   }

   .circ-info .circ-small-image {
      width: 60%;
      top: 51%;
   }

   .circ-info .circ-big-image {
      width: 90%;
      top: 51%;
   }

   .circ-info .text-blocks {
      position: relative;
   }

   .circ-info .row:nth-child(2) .flex-col::before {
      padding-top: unset;
   }  

   .circ-info .text-block {
      width: 100%;
      position: relative;
      height: auto;
      margin-bottom: 2em;
   }

   .circ-info .text-block:nth-child(2) {
      margin-bottom: 110vw;
   }

   .circ-info .text-block:last-child {
      margin-bottom: 0;
   }
   
   .circ-info .text-block svg {
      display: none;
   }

   .circ-info .row:nth-child(2) .flex-col {
      position: relative;
      display: block;
   }

   .circ-info .text-block .circ-pop {
      transform: translate(0, 0) scale(1) rotate(0.001deg);
   }

   .circ-info .circ-flex-col.active0 .text-block:nth-child(1) h3 {transform: translateY(0%) rotate(0.0001deg);} 
   .circ-info .circ-flex-col.active1 .text-block:nth-child(2) h3 {transform: translateY(0%) rotate(0.0001deg);} 
   .circ-info .circ-flex-col.active2 .text-block:nth-child(3) h3 {transform: translateY(0%) rotate(0.0001deg);} 
   .circ-info .circ-flex-col.active3 .text-block:nth-child(4) h3 {transform: translateY(0%) rotate(0.0001deg);} 

   .circ-info .circ-flex-col .text-block h3 {
      color: var(--secondary);
   }

   .circ-info .circ-flex-col .text-block p {
      color: var(--white);
   }
      
}



/* ------------------------- Home Comp Title + Text -------------------------------------------------- */

.comp-title-text-home {
   padding: 0;
}

/* ------------------------- Assortiment Comp Title + Text -------------------------------------------------- */

.comp-title-text-assortiment {
   padding-bottom: 0;
}

/* ------------------------- Section - Assortiment Item -------------------------------------------------- */

.single-assortiment-item {
   transform: translate(0, 0) rotate(0.001deg);
   position: relative;
}

.single-assortiment-item a {
   position: relative;
   display: block;
   background: var(--primary-dark);
   overflow: hidden;
}

.single-assortiment-item a::before {
   padding-top: 110%;
   content: "";
   display: block;
}

.single-assortiment-item a .overlay-image {
   transform: translate(-50%, -50%) translateZ(0) rotate(0.001deg);
   transition: var(--animation-circ);
   height: 80%;
   width: 120%;
   top: 50%;
   left: 50%;
   bottom: 0;
}

.single-assortiment-item a:hover .overlay-image {
   transform: translate(-50%, -50%) translateZ(0) rotate(0.001deg);
   height: 100%;
   width: 100%;
}

.single-assortiment-item .overlay-dark {
   background: var(--section-bg, var(--primary));
   opacity: .6;
   top: -2%;
   left: -2%;
   width: 102%;
   height: 102%;
}

.single-assortiment-item .text-inner {
   position: absolute;
   top: 50%;
   width: 100%;
   transform: translateY(-50%);
   text-align: center;
   padding: min(5vw, 4em);
   transition: var(--animation-circ);
}

.single-assortiment-item a:hover .text-inner {
   transform: translateY(-50%);
   transform: translateY(calc(-50% - 1em));
}

.single-assortiment-item .text-inner h3 {
   color: var(--secondary);
   transition: var(--animation-circ);
   /* reserve two lines so 1-line and 2-line category names align across slides */
   line-height: 1.1;
   min-height: 2.2em;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   gap: .25em;
}

.single-assortiment-item a:hover .text-inner h3 {
   color: var(--white);
   transform: translateY(-100%) rotate(0.0001deg);
}

.single-assortiment-item a .text-inner p {
   transition: var(--animation-circ);
}

.single-assortiment-item a:hover .text-inner p {
   color: var(--white);
}

.single-assortiment-item .text-inner svg {
   margin-left: .4em;
   width: .6em;
   transform: rotate(45deg);
   transition: var(--animation-circ);
}

.single-assortiment-item a:hover .text-inner svg {
   transform: rotate(-45deg);
}

.single-assortiment-item .btn {
   position: absolute; 
   bottom: 0;
   left: 50%;
   font-size: 1em;
   transform: translate(-50%, -100%) rotate(0.001deg);
}

.single-assortiment-item .shutter {
   transition: var(--animation-circ);
}

.single-assortiment-item .shutter {
   position: absolute;
   top: 0;
   left: -1%;
   width: 102%;
   height: 100%;
   pointer-events: none;
}

.single-assortiment-item .shutter::before,
.single-assortiment-item .shutter::after {
   content: "";
   display: block;
   position: absolute;
   top: -2%;
   left: 50%;
   width: 200%;
   height: 150%;
   background: var(--section-bg, var(--primary));
   transition: var(--animation-circ);
   transform: translate(-50%, -50%) rotate(0deg);
}

.single-assortiment-item .shutter::after {
   top: auto;
   bottom: -2%;
   transform: translate(-50%, 50%) rotate(0deg);
}

.single-assortiment-item a:hover .shutter::before {
   height: 0%;
   transform: translate(-50%, -50%) rotate(0.001deg);
}

.single-assortiment-item a:hover .shutter::after {
   height: 0%;
   transform: translate(-50%, 50%) rotate(0.001deg);
}

@media screen and (max-width: 1000px){  
   
   .single-assortiment-item a .overlay-image {
      transform: translate(-50%, -50%) rotate(0.001deg);
      height: 100%;
      width: 100%;
   }
   
   .single-assortiment-item a .text-inner {
      transform: translateY(-50%);
      transform: translateY(calc(-50% - 1em));
   }

   .single-assortiment-item a .text-inner h3 {
      color: var(--white);
      transform: translateY(-100%) rotate(0.0001deg);
   }

   .single-assortiment-item a .text-inner svg {
      transform: rotate(-45deg);
   }

   .single-assortiment-item a .shutter::before {
      height: 0%;
      transform: translate(-50%, -50%) rotate(0.001deg);
   }
   
   .single-assortiment-item a .shutter::after {
      height: 0%;
      transform: translate(-50%, 50%) rotate(0.001deg);
   }

   .section-assortiment-grid .single-assortiment-item {
      transform: translateY(0) !important;
   }

   .single-assortiment-item a::before {
      padding-top: 125%;
   }

}


/* ------------------------- Section - Assortiment Grid (Slider) -------------------------------------------------- */

.section-assortiment-grid {
   padding-top: var(--section-padding-tiny);
   padding-bottom: 0;
}

.section-assortiment-grid .row .uk-slider-items {
   width: 100%;
}

.section-assortiment-grid .row ul .single-assortiment-item {
   width: 33.33%;
}

.section-assortiment-grid .uk-slider-nav {
   position: absolute;
   bottom: calc(var(--section-padding) * .8);
   width: calc(100% - var(--gap-padding));
   left: 0;
   display: block;
   display: flex;
   justify-content: center;
   display: none;
   transform: translateY(50%);
}

.section-assortiment-grid .uk-slider-nav li {
   padding: 0 calc(var(--gap-padding) / 5); 
}

.section-assortiment-grid .uk-slider-nav li a {
   display: block;
   width: 2.5em;
   height: 2em;
   position: relative;
   cursor: pointer;
}

.section-assortiment-grid .uk-slider-nav li a::after {
   content: "";
   display: block;
   width: 100%;
   height: 1px;
   top: 50%;
   background: var(--primary-light);
   position: absolute;
   transition: var(--animation-circ);
}

.section-assortiment-grid .uk-slider-nav li.uk-active a::after {
   background: var(--white);
}


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

   .section-assortiment-grid .row {
      padding-bottom: calc(var(--section-padding) * 1.5);
   }

   .section-assortiment-grid .uk-slider-nav {
      display: flex;
   }

   .section-assortiment-grid .container {
      padding-left: var(--gap-padding);
      padding-right: var(--gap-padding);
   }

   .section-assortiment-grid .row .uk-slider-items {
      width: 100%;
      width: calc(100% + var(--gap-padding));
      margin-left: calc(var(--gap-padding) * -1);
   }
   
   .section-assortiment-grid .row ul .single-assortiment-item {
      width: 46%;
      width: calc(50% - (var(--gap-padding) / 2));
      padding-left: var(--gap-padding);
   }
   
}

@media screen and (max-width: 720px){
    
   .section-assortiment-grid .row ul .single-assortiment-item {
      width: 75%;
   }
   
}

@media screen and (max-width: 540px){
    
   .section-assortiment-grid .row ul .single-assortiment-item {
      width: 100%;
      width: calc(100% - var(--gap-padding));
   }
   
}


/* ------------------------- Section - Stats Section -------------------------------------------------- */

.section-stats .image-col {
   width: 50%;
}

.section-stats .image-col .single-image {
   display: block;
   width: 100%;
   width: calc(100% - (var(--container-padding) / 2));
   position: relative;
   overflow: hidden;
   background: var(--primary-dark);
}

.section-stats .image-col .single-image::before {
   display: block;
   content: "";
   padding-bottom: 100%;
}

.section-stats .image-col .single-image:nth-child(2) {
   width: 40%;
   right: 0;
   bottom: -20vh;
   display: block;
   position: absolute;
}

.section-stats .image-col .single-image:nth-child(2)::before {
   padding-bottom: 150%;
}

.section-stats .image-col .single-image .overlay-image{
   top: -15%;
   height: 115%;
   transform: translateZ(0) rotate(0.001deg);
   will-change: transform;
}

.section-stats .text-col {
   width: 50%;
   padding-left: calc(var(--container-padding) / 4);
   padding-right: calc(var(--container-padding) / 2);
   /* Center the quote/items/button as a group and space them evenly, so there
      are no big empty gaps when items or the button are absent. */
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 2em;
}

.section-stats .quote-row h3 {
   text-align: center;
   margin-bottom: 0;
   line-height: 1.3;
}

.section-stats .stats-row {
   flex-wrap: wrap;
   justify-content: space-evenly;
}

.section-stats .stats-row .flex-col {
   max-width: 50%;
   padding: 1em 0;
   text-align: center;
}

.section-stats .stats-row h3 {
   color: var(--secondary);
   margin-bottom: .1em;
   font-size: calc(clamp(1.3em, 2vw, 2em)* .8);
}

.section-stats .btn-row {
   justify-content: center;
   padding-top: 0;
}

.section-stats .btn-row .flex-col {
   width: auto;
}

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

   .section-stats {
      border-top: 1px solid var(--primary-light);
   }

   .section-stats .container {
      max-width: 50em;
   }
   .section-stats .image-col {
      width: 60%;
      margin-left: 20%;
      padding-bottom: 5em;
   }

   .section-stats .text-col {
      width: 100%;
      padding-left: 5vw;
      padding-right: 5vw;
   }

   .section-stats .image-col .single-image {
      width: 100%;
      width: calc(100% - 10vw);
   }

   .section-stats .image-col .single-image:nth-child(2) {
      right: 5vw;
      bottom: 0;
      width: 35%;
   }

}

@media screen and (max-width: 540px){
   .section-stats .image-col {
      width: 100%;
      margin-left: 0%;
      padding-left: 5vw;
   }
}

/* ------------------------- Homepage - Stats Pattern  -------------------------------------------------- */

.home-pattern-stats {
   top: 10%;
}

/* ------------------------- Section - Quote Slide -------------------------------------------------- */

.section-quote-slide {
   padding-top: var(--section-padding-small);
   padding-bottom: var(--section-padding-small);
   margin-top: var(--section-padding-tiny);
}

.section-quote-slide .container {
   padding: 0;
   max-width: 100vw;
}

.section-quote-slide .flex-col {
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
}

.section-quote-slide .quote-wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 1em;
   font-size: 6vw;
   width: max-content;
   animation: horizontalText 40s linear infinite;
   position: relative;
}

@keyframes horizontalText {
   0% {transform: translate(0, 0) rotate(0.001deg);}
   100% {transform: translate(-50%, 0) rotate(0.001deg);}
}

.section-quote-slide  h5 {
   display: inline-block;
   white-space: nowrap;
   padding: 0 .25em;
   font-size: 1em;
   color: var(--primary-light);
   margin-bottom: 0;
}

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

   .section-quote-slide {
      padding-top: var(--section-padding-small);
      padding-bottom: var(--section-padding-small);
      margin-top: 0;
   }

   .section-quote-slide .quote-wrap {
      font-size: 10vw;
      animation-duration: 26s;
   }
   
}

/* ------------------------- Section - Blog More Grid (Slider) -------------------------------------------------- */


.section-blog-more-grid .container {
   padding-right: calc(var(--container-padding) / 2);
}

.section-blog-more-grid .row .info {
   width: 30%;
   padding-right: calc(2 * var(--gap-padding));
   position: relative;
   z-index: 1;

   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
}

.section-blog-more-grid .row .info h2 {
   position: relative;
}

.section-blog-more-grid .row .info p {
   position: relative;
}

.section-blog-more-grid .row .info a {
   position: relative;
   margin-top: .5em;
}

.section-blog-more-grid .row .info .plate {
   background: var(--section-bg, var(--primary));
   position: absolute;
   top: 0;
   right: 0;
   width: 50vw;
   height: 110%;
}

.section-blog-more-grid .row .items-list {
   width: 70%;
   position: relative;
   display: block;
}

.section-blog-more-grid .row ul {
   width: 100%;
   width: calc(100% + var(--gap-padding));
   margin-left: calc(var(--gap-padding) * -1);

}

.section-blog-more-grid .row ul .single-blog-item {
   width: 49.999%;
   padding-left: var(--gap-padding);
}

.section-blog-more-grid .single-blog-item .image-content .title h4 {
   transition: var(--animation-primary);
   transform: translateY(0) rotate(0.001deg);
}

.section-blog-more-grid .single-blog-item:hover .image-content .title h4 {
   color: var(--white);
   transform: translateY(.5em) rotate(0.001deg);
}

.section-blog-more-grid .single-blog-item .read-button {
   display: none;
}

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

   .section-blog-more-grid .container {
      padding-right: var(--container-padding);
   }
    
   .section-blog-more-grid .row .info {
      width: 38%;
   }

   .section-blog-more-grid .row .items-list {
      width: 62%;
   }

   .section-blog-more-grid .row ul .single-blog-item {
      width: 66%;
      padding-left: var(--gap-padding);
   }

}

@media screen and (max-width: 740px){
    
   .section-blog-more-grid .row .info {
      width: 50%;
   }
   .section-blog-more-grid .row .items-list {
      width: 50%;
   }

   .section-blog-more-grid .row ul .single-blog-item {
      width: 95%;
      padding-left: var(--gap-padding);
   }
}


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

   .section-blog-more-grid .row .info {
      width: 100%;
      padding-bottom: var(--container-padding);
      padding-right: 0;
   }

   .section-blog-more-grid .row .items-list {
      width: 100%;
   }
    
   .section-blog-more-grid .row ul .single-blog-item {
      width: 100%;
      width: calc(100% - var(--container-padding));
   }

   .section-blog-more-grid .row .info .plate {
      display: none;
   }
   
}

/* ------------------------- Section - Blog Row Grid (Slider) -------------------------------------------------- */

/* .section-blog-more-grid-v2 .container {
   padding-right: calc(var(--container-padding) / 2);
   padding-left: calc(var(--container-padding) / 2);
} */

.section-blog-more-grid-v2 h2 {
   text-align: center;
   width: 100%;
   padding-bottom: 1em;
}

.section-blog-more-grid-v2 .row .items-list {
   width: 100%;
   position: relative;
   display: block;
}

.section-blog-more-grid-v2 .row ul {
   width: 100%;
   width: calc(100% + var(--gap-padding));
   margin-left: calc(var(--gap-padding) * -1);
}

.section-blog-more-grid-v2 .row ul .single-blog-item {
   width: 33.3%;
   padding-left: var(--gap-padding);
}

.section-blog-more-grid-v2 .single-blog-item .image-content .title h4 {
   transition: var(--animation-primary);
   transform: translateY(0) rotate(0.001deg);
}

.section-blog-more-grid-v2 .single-blog-item:hover .image-content .title h4 {
   color: var(--white);
   transform: translateY(.5em) rotate(0.001deg);
}

.section-blog-more-grid-v2 .single-blog-item .read-button {
   display: none;
}

.section-blog-more-grid-v2 .container.last .row {
   justify-content: center;
   padding-top: 3em;
}

.section-blog-more-grid-v2 .container.last .row .flex-col {
   width: auto;
}

@media screen and (min-width: 1000px) {
   .section-blog-more-grid-v2 .row ul {
      transform: translate3d(0px, 0px, 0px) !important;
   }
}

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

   /* .section-blog-more-grid-v2 .container {
      padding-right: var(--container-padding);
      padding-left: var(--container-padding);
   } */

   .section-blog-more-grid-v2 .row ul .single-blog-item {
      width: 49.999%;
   }

}

@media screen and (max-width: 740px){
    
   .section-blog-more-grid-v2 .row ul .single-blog-item {
      width: 66%;
   }
}

@media screen and (max-width: 540px){
    
   .section-blog-more-grid-v2 .row ul .single-blog-item {
      width: 100%;
      width: calc(100% - var(--container-padding));
   }
}

/* ------------------------- Section - Quote Wide -------------------------------------------------- */

.section-quote-wide {
   position: relative;
   padding: 0;
}

.section-quote-wide .image-wrap {
   position: absolute;
   transform: translate(-50%, -50%) rotate(0.001deg);
   left: 50%;
   overflow: hidden;
   top: 50%;
   width: 50%;
   width: calc(100% - (var(--container-padding) * 2));
   height: 50%;
   height: calc(100% - 8em);
}

.section-quote-wide .overlay-image {
   top: -15%;
   height: 115%;
}

.section-quote-wide .row {
   justify-content: flex-end;
   min-height: 20em;
   min-height: calc((var(--section-padding) * 2) + 20em);
}

.section-quote-wide .single-quote {
   text-align: center;
   max-width: 34em;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-top: var(--section-padding);
   padding-bottom: var(--section-padding);
   position: relative;
}

.section-quote-wide .single-quote h3 {
   margin-bottom: 2em;
}

.icon-svg-wrap {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 50%) rotate(0.001deg);
   width: 9em;
   height: 9em;
}

.icon-svg-wrap svg:nth-child(1) {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(0.001deg);
   width: 100%;
   animation: rotateText 10s linear infinite;
}

@keyframes rotateText {
   0% {transform: translate(-50%, -50%) rotate(0.001deg);}
   100% {transform: translate(-50%, -50%) rotate(-360deg);}
}

.icon-svg-wrap svg:nth-child(2) {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 42%;
}

.icon-svg-wrap svg:nth-child(2) path {
   fill: var(--white);
   stroke: var(--white);
}

.icon-svg-wrap .badge-text {
   font-family: rialto-script, cursive;
   fill: var(--secondary);
   font-size: 17px;
   letter-spacing: .3px;
}

@media screen and (max-width: 1020px){
   .section-quote-wide .row {
      justify-content: center;
   }
}

/* When quote-wide opens a page, its spinning badge hangs below the section and
   was being covered by the following section (story-split has overflow:hidden and
   paints on top). Lift the opener's stacking so the badge shows IN FULL, overlapping
   onto the next section. */
.main-wrap-inside > .section-quote-wide:first-of-type { z-index: 3; }
.main-wrap-inside > .section-quote-wide:first-of-type .icon-svg-wrap { z-index: 3; }


/* ------------------------- Pre Footer -------------------------------------------------- */

.prefooter {
   overflow: hidden;
}

.prefooter .container {
   padding-left: calc(var(--container-padding) / 1.5);
   padding-right: calc(var(--container-padding) / 2);
}

.prefooter .container .row {
   align-items: center;
}

.prefooter .personal-info {
   width: 34%;
}

.prefooter .personal-info .image-block {
   width: 100%;
   display: block;
   position: relative;
}

.prefooter .personal-info .image-block::before {
   content: "";
   padding-top: 100%;
   display: block;
}

.prefooter .personal-info .name-block {
   width: 100%;
   display: block;
   position: relative;
   font-size: .9em;
   padding-top: 2em;
   text-align: center;
}


.prefooter .general-info {
   width: 46%;
   padding-left: calc(var(--gap-padding) * 2);
   padding-right: var(--gap-padding);
}

.prefooter .general-info .buttons-wrap {
   width: 120%;
   display: block;
}

.prefooter .personal-info .image-block .round-image {
   border-radius: 50%;
   background: var(--primary-light);
   opacity: .15;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.prefooter .personal-info .image-block .round-small-image {
   width: 70%;
   height: 70%;
   opacity: 1;
}

.prefooter .personal-info .image-block svg {
   position: absolute;
   top: 85%;
   left: 35%;
   height: 40%;
   transform: translate(-50%, -50%) rotate(25deg);
}

.prefooter .usp-info {
   width: 20%;
   padding-top: 3em;
}

.prefooter .usp-info ul li {
   display: flex;
   align-items: center;
   padding: 0.5em 0;
}

.prefooter .usp-info ul li svg {
   transform: translate(0, -10%);
   z-index: 2;
}

.prefooter .usp-info ul li p {
   line-height: 1;
   font-size: .9em;
   padding-left: .5em;
}


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

   .prefooter {
      padding-bottom: var(--section-padding-small);
   }

   .prefooter .container {
      padding: 0;
   }

   .prefooter .personal-info {
      width: 40%;
      padding-left: calc(var(--container-padding) / 2);
   }

   .prefooter .general-info {
      width: 60%;
      padding-right: calc(var(--container-padding) / 1.5);
   }

   .prefooter .usp-info {
      width: 100%;
      margin-top: var(--section-padding-small);
      padding-top: var(--section-padding-small);
      border-top: 1px solid var(--primary-light);
      order: 4;
   }

   .prefooter .usp-info ul li {
      float: left;
      width: 50%;
      justify-content: center;
   }
}

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

   .prefooter .row {
      justify-content: center;
   }

   .prefooter .personal-info {
      width: 100%;
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
      padding-top: var(--section-padding-small);

      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .prefooter .general-info {
      width: auto;
      max-width: 40em;
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
      text-align: center;
      padding-top: 1em;
   }

   .prefooter .general-info .buttons-wrap {
      width: 100%;
   }
   
   .prefooter .personal-info .image-block {
      width: auto;
      min-width: 16em;
      display: block;
      position: relative;
   }
}

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

   .stripe + .prefooter {
      padding-top: 0;
   }

   .prefooter .usp-info ul li {
      width: 100%;
   }

   .prefooter .personal-info .image-block {
      width: auto;
      min-width: 10em;
      display: block;
      position: relative;
   }

   .prefooter .buttons-wrap .btn.active {
      margin: 0;
   }

   .prefooter .buttons-wrap .btn.call {
      display: none;
   }

   .prefooter h2 {
      margin-bottom: .5em;
   }

   .prefooter h4 {
      font-family: roc-grotesk, sans-serif;
      color: var(--text);
      font-size: 1em;
      line-height: 1.5;
      font-weight: 400;
      margin-bottom: 1.5em;
   }

   .prefooter .personal-info svg {
      display: none;
   }

   .prefooter .personal-info .name-block {
      display: none;
   }
}

/* ------------------------- Wij - Navigation -------------------------------------------------- */

.wij-nav {
   position: -webkit-sticky; /* Safari */
   position: sticky;
   top: 0;
   background: var(--primary);
   z-index: 5;
   padding: 0;
   transform: translateY(-1px);
}

.wij-nav ul {
   display: flex;
   width: 100%;
   justify-content: space-between;
   border-bottom: 1px solid var(--primary-light);
   padding: var(--section-padding-tiny) 0;
}

.wij-nav ul li a {
   overflow: hidden;
   display: block;
   position: relative;
}

.wij-nav ul li a h3{
   color: var(--white);
   transition: var(--animation-primary);
   font-size: clamp(1em, 1.75vw, 2em);
   line-height: 1.4;
   position: relative;
   transition: var(--animation-primary);
}

.wij-nav ul li a h3:nth-of-type(1){
   transform: translate(0, 5%) rotate(0.0001deg);
   opacity: .2;
}

.wij-nav ul li a h3:nth-of-type(2){
   position: absolute;
   top: 50%;
   transform: translate(0, 55%) rotate(0.0001deg);
   color: var(--secondary);
}

.wij-nav ul li a.current h3:nth-of-type(1),
.wij-nav ul li a:hover h3:nth-of-type(1){
   transform: translate(0, -100%) rotate(0.0001deg);
}

.wij-nav ul li a.current h3:nth-of-type(2),
.wij-nav ul li a:hover h3:nth-of-type(2){
   transform: translate(0, -45%) rotate(0.0001deg);
}

@media screen and (max-width: 720px){
   .wij-nav {
      display: none;
   }
}

/* ------------------------- Wij - Intro -------------------------------------------------- */

.wij-intro {
   padding-top: var(--section-padding-small);
   padding-bottom: calc(var(--section-padding) - var(--section-padding-tiny));
}

.wij-intro .row {
   padding-left: calc(30vw - var(--container-padding));
   position: relative;
}

.wij-intro .row .flex-col {
   width: 67%;
   padding-right: calc(var(--gap-padding) * 2);
}

.wij-intro .row .flex-col:nth-child(2) {
   width: 33%;   
}

.wij-intro .row .flex-col .intro-image {
   width: 100%;
   position: relative;
   z-index: 5;
   transform: translateY(-80%);
   overflow: hidden;
   position: absolute;
   left: 0;
}

.wij-intro .row .flex-col .intro-image::before {
   content: "";
   display: block;
   padding-top: 138%;
}

.wij-intro .overlay-image {
   height: 115%;
   top: -15%;
   transform: translateZ(0) rotate(0.001deg);
   will-change: transform;

}

@media screen and (max-width: 1000px) {
   .wij-intro .row {
      padding-left: 0;
   }
}


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

   .wij-intro {
      padding-bottom: 0;
   }

   .wij-intro .row .flex-col {
      width: 100%;
      padding-right: 0;
   }

   .wij-intro .row .flex-col:nth-child(2) {
      display: none;
   }
}

/* ------------------------- Wij - Verhaal -------------------------------------------------- */

.section-wij-verhaal {
   padding-bottom: 0;
}

.section-wij-verhaal .row .flex-col .image-wrap::before {
   padding-top: 138%;
}

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

   .section-wij-verhaal .row .flex-col .image-wrap::before {
      padding-top: 100%;
   }

   .section-wij-verhaal .row {
      border-top: 1px solid var(--primary-light);
      padding-top: var(--section-padding);
   }
}

/* ------------------------- Wij - Floating Images -------------------------------------------------- */

.wij-floating-images {
   position: relative;
}

.wij-floating-images .row {
   justify-content: center;
}

.wij-floating-images .flex-col {
   text-align: center;
   max-width: 34em;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-top: var(--section-padding);
   padding-bottom: var(--section-padding);
   position: relative;
}

.wij-floating-images .flex-col h3 {
   margin-bottom: 2em;
}

.wij-floating-images .image-wrap {
   position: absolute;
   overflow: hidden;
   position: absolute;
   left: calc(var(--container-padding) * 2);
   width: clamp(10em, 18vw, 20em);
   transform: translateY(30%);
}

.wij-floating-images .image-wrap.image-right {
   left: auto;
   right: calc(var(--container-padding) / 2);
   transform: translateY(-30%);
}

.wij-floating-images .image-wrap::before {
   content: "";
   display: block;
   padding-top: 138%;
}

.wij-floating-images .image-wrap .overlay-image {
   height: 115%;
   top: -15%;
   transform: translateZ(0) rotate(0.001deg);
   will-change: transform;
}

.wij-floating-images .floating-logo {
   position: absolute;
   left: calc(var(--container-padding) + 2em);
   width: calc(clamp(10em, 18vw, 20em) * 1.75);
   top: 50%;
   transform: translate(-50%, -50%) rotate(-90deg);
   opacity: .2;
   pointer-events: none;
}

.wij-floating-images .floating-logo svg {
   display: block;
   width: 100%;
}

.wij-floating-images .floating-logo svg path {
   fill: var(--white);
}

.wij-floating-images .floating-logo span {
   display: block;
   color: var(--white);
   font-family: roc-grotesk-wide, sans-serif;
   font-weight: 600;
   font-size: clamp(1.5em, 3.2vw, 3.6em);
   line-height: .8;
   text-transform: lowercase;
   white-space: nowrap;
}

@media screen and (max-width: 1000px){
   .wij-floating-images .floating-logo {
      display: none;
   }

   .wij-floating-images .flex-col {
      padding-top: 15vh;
      padding-bottom: 15vh;
   }

   .wij-floating-images .image-wrap {
      left: var(--container-padding);
      transform: translateY(60%);
   }
   
   .wij-floating-images .image-wrap.image-right {
      right: var(--container-padding);
      transform: translateY(-20%);
   }

   .wij-floating-images .image-right .image-overlay-30 {
      opacity: .6;
   }
}

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

   .wij-floating-images .flex-col {
      width: 100%;
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
   }

   .wij-floating-images .image-wrap {
      left: var(--container-padding);
      transform: translateY(60%);
   }
   
   .wij-floating-images .image-wrap.image-right {
      right: var(--container-padding);
      transform: translateY(-20%);
   }
}

@media screen and (max-width: 540px){ 
   .wij-floating-images .image-wrap {
      transform: translateY(110%);
   }

   .wij-floating-images .image-wrap.image-right {
      transform: translateY(-10%);
   }
}

/* ------------------------- Wij - Big Image -------------------------------------------------- */

.wij-big-image {
   border: 0;
}

/* ------------------------- Wij - Quote Letters Slide -------------------------------------------------- */

.wij-quote-slide {
   border: 0;
   margin-top: 0;
}

/* ------------------------- Wij - Verantwoordelijkheid -------------------------------------------------- */

.wij-verantwoordelijkheid {
   overflow: hidden;
}

.wij-verantwoordelijkheid .row-text .flex-col {
   width: 50%;
}

/* .wij-verantwoordelijkheid .row-text .flex-col:nth-of-type(1) {
   padding-right: var(--gap-padding);
} */

.wij-verantwoordelijkheid .row-text .flex-col:nth-of-type(2) {
   padding-left: var(--gap-padding);
   padding-top: 3.5em;
}

.wij-verantwoordelijkheid .row-text h2 {
   margin-bottom: 0;
}

.wij-verantwoordelijkheid .row-usp {
   padding-top: var(--section-padding-medium);
   flex-wrap: nowrap;
   justify-content: space-between;
}

.wij-verantwoordelijkheid .row-usp .flex-col {
   max-width: 20em;
   display: flex;
   align-items: center;
   padding-right: 2em;
}

.wij-verantwoordelijkheid .row-usp .flex-col h4 {
   font-weight: 600;
}

.wij-verantwoordelijkheid .row-usp .flex-col svg {
   margin-right: 1em;
   width: clamp(2em, 3vw, 4em);
}

.wij-verantwoordelijkheid .row-usp .flex-col:nth-of-type(2) svg {
   width: calc(clamp(2em, 3vw, 4em) * 1.3);
}

.wij-verantwoordelijkheid .row-usp .flex-col:nth-of-type(3) svg {
   width: calc(clamp(2em, 3vw, 4em) * 1.2);
}

@media screen and (max-width: 840px) {
   .wij-verantwoordelijkheid .row-usp {
      flex-direction: column;
   }

   .wij-verantwoordelijkheid .row-usp .flex-col {
      max-width: 100%;
      padding-right: 0;
      min-height: 3.5em;
   }
}

@media screen and (max-width: 720px) {
   .wij-verantwoordelijkheid .row-text .flex-col {
      width: 100%;
   }
   
   .wij-verantwoordelijkheid .row-text .flex-col:nth-of-type(1) {
      padding-right: 0;
   }
   
   .wij-verantwoordelijkheid .row-text .flex-col:nth-of-type(2) {
      padding-left: 0;
      padding-top: 1.5em;
   }
}

/* ------------------------- Wij - Verantwoordelijkheid (New section: Certifications) -------------------------------------------------- */

.wij-certifications {
   padding-top: 0;
}

.wij-certifications .row {
   align-items: center;
}

.wij-certifications .row .flex-col {
   width: 50%;
}

.wij-certifications .row .flex-col:nth-child(1) {
   padding-right: calc(var(--container-padding) * 0.5);
}

.wij-certifications .row .col-icons {
   padding-left: calc(var(--container-padding) * 0.5);
   --gap: var(--gap-padding);
   --columns: 2;
   display: flex;
   flex-wrap: wrap;
   gap: calc(var(--gap) * 0.5) var(--gap);
}

.wij-certifications .row .col-icons a {
   width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
   display: flex;
   flex-direction: column;
   gap: 0.75em;
   position: relative;
   align-items: center;
}

.wij-certifications .row .col-icons a .certifications-logo {
   width: 100%;
   border-radius: 0.5em;
   padding-bottom: 66.666%;
   overflow: hidden;
   display: block;
   position: relative;
   background: #ffffff;
}

/* Show the whole logo (uncropped) on a white tile with breathing room */
.wij-certifications .row .col-icons a .certifications-logo .overlay-image {
   top: 12%;
   left: 8%;
   width: 84%;
   height: 76%;
}

.wij-certifications .row .col-icons .btn {
   font-size: 0.85em;
}

.wij-certifications .row .col-icons .btn .btn-text-wrap {
   padding-left: 0.2em;
}

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

   .wij-certifications .row .flex-col {
      width: 100%;
   }

   .wij-certifications .row .flex-col:nth-child(1) {
      padding-right: 0;
   }

   .wij-certifications .row .col-icons {
      padding-top: calc(var(--section-padding) * 0.5);
      padding-left: 0;
   } 
}


/* ------------------------- Wij - Team -------------------------------------------------- */

.wij-team {
   padding-bottom: var(--section-padding-tiny);
}

.wij-team.team-header {
   padding-top: 25vh;
}

.wij-team .team-row {
   padding-top: var(--section-padding-small);
}

.wij-team .team-row ul {
   display: flex;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
   width: calc(100% + (var(--gap-padding) * 2));
   margin-left: calc(var(--gap-padding) * -2);
}

.wij-team .team-row .flex-col {
   width: 33.333%;
   position: relative;
   margin-bottom: calc(var(--section-padding) * 1.25);
   padding-left: calc(var(--gap-padding) * 2);
   transition: var(--animation-nav);
   
   opacity: 0;
   transform: translateY(10%) rotate(0.001deg) scale(1);
}

.wij-team .team-row .flex-col.uk-scrollspy-inview {
   transform: translateY(0) rotate(0.001deg) scale(1);
   opacity: 1;
   will-change: opacity, transform;
}

@media screen and (min-width: 1000px) {

   .wij-team .team-row .flex-col.uk-scrollspy-inview:nth-of-type(3n+2) {
      transition-delay: .2s;
   }

   .wij-team .team-row .flex-col.uk-scrollspy-inview:nth-of-type(3n+3) {
      transition-delay: .4s;
   }

}

.wij-team .team-row .flex-col .single-team {
   position: relative;
   display: block;
   width: 100%;
}

.wij-team .team-row .flex-col .single-team::before {
   content: "";
   display: block;
   padding-top: 130%;
}

.wij-team .team-row .flex-col .single-team .team-text{
   position: absolute;
   width: 100%;
   text-align: center;
   top: 100%;
   transform: translateY(-.75em);
   transition: var(--animation-circ);
}

.wij-team .team-row .flex-col .single-team .image-overlay-30 {
   opacity: 0;
   transition: var(--animation-circ);
}

.wij-team .team-row .flex-col .single-team .image-overlay-gradient {
   background: linear-gradient(0deg, rgb(14, 82, 52, .7) 0%, rgb(14, 82, 52, 0) 60%);
   opacity: .7;
   transition: var(--animation-circ);
}

.wij-team .team-row .flex-col .single-team:hover .image-overlay-30 {
   opacity: .5;
}

.wij-team .team-row .flex-col .single-team:hover .image-overlay-gradient {
   opacity: 1;
}

.wij-team .team-row .flex-col .single-team .team-text h3{
   color: var(--secondary);
   font-size: clamp(1em, 1.75vw, 2em);
}

.wij-team .team-row .flex-col .single-team .team-text p{
   line-height: 1.3;
}

.wij-team .team-row .flex-col .single-team:hover .team-text {
   transform: translateY(-2.5em);
}

.wij-team .team-row .flex-col .single-team .single-team-s-icons {
   position: relative;
   display: flex;
   justify-content: center;
   padding-top: 0em;
   padding-bottom: 1em;
}

.wij-team .team-row .flex-col .single-team .single-team-s-icons {
   opacity: .2;
   transition: var(--animation-circ);
}

.wij-team .team-row .flex-col .single-team .single-team-s-icons .s-icon .s-icon-wrap {
   width: 60%;
}

.wij-team .team-row .flex-col .single-team:hover .single-team-s-icons {
   opacity: 1;
}

.single-team .show-drop {
   position: absolute;
   left: 0;
   width: 100%;
   bottom: 0;
   transition: var(--animation-primary);
   transform: translateY(1em);
   opacity: 0;
   visibility: hidden;
}

.single-team .team-text.active-email .show-drop.email,
.single-team .team-text.active-tel .show-drop.tel {
   opacity: 1;
   visibility: visible;
   transform: translateY(1.5em);
}

.single-team .show-drop p {
   background: var(--secondary);
   border-radius: 2em;
   padding: 0.4em 1em 0.3em 1em;
   display: inline-block;
   font-size: .8em;
   font-weight: 500;
}

.wij-team .team-row .flex-col .single-team .team-quote {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 2;
   display: flex;
   align-items: center;

}

.wij-team .team-row .flex-col .single-team .team-quote h4 {
   width: 100%;
   text-align: center;
   color: var(--white);
   padding: 0 1.5em;
   transform: translateY(5em) scale(1) rotate(0.001deg);
   opacity: 0;
   visibility: hidden;
   transition: var(--animation-circ);
   position: relative;
   font-size: 1em;
   font-size: clamp(1em, 1.2vw, 1.25em);
   font-family: roc-grotesk, sans-serif;
   font-weight: 500;
}

.wij-team .team-row .flex-col .single-team:hover .team-quote h4 {
   opacity: 1;
   transform: translateY(0) scale(1) rotate(0.001deg);
   visibility: visible;
}

.wij-team .team-row .flex-col .single-team .info-icon {
   display: none;
}

@media (hover: none) {
   .wij-team .team-row .flex-col .single-team .info-icon {
      display: flex;
      position: absolute;
      width: 1.2em;
      height: 1.2em;
      justify-content: center;
      align-items: center;
      top: 1em;
      right: 1em;
   }

   .wij-team .team-row .flex-col .single-team .info-icon svg {
      width: 100%;
   }
}

@media screen and (max-width: 1000px) {
   .wij-team .team-row .flex-col {
      width: 50%;
      margin-bottom: calc(var(--section-padding) * 1.25);
   }

   .wij-team .team-row .flex-col .single-team .team-text {
      transform: translateY(-.5em);
   }

   .wij-team .team-row .flex-col.uk-scrollspy-inview {
      transform: translateY(0) rotate(0.001deg) scale(1);
      opacity: 1;
      transition-delay: 0s;
      will-change: opacity, transform;
   }

   .wij-team .team-row .flex-col.uk-scrollspy-inview:nth-of-type(even) {
      transition-delay: .2s;
   }
}

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

   .wij-team .team-row ul {
      width: calc(100% + (var(--gap-padding) * 1));
      margin-left: calc(var(--gap-padding) * -1);
   }
   
   .wij-team .team-row .flex-col {
      padding-left: calc(var(--gap-padding) * 1);
      margin-bottom: calc(var(--section-padding) * 2.25);
      width: 100%;
   }

   .wij-team .team-row .flex-col .single-team .team-quote {
      font-size: 1.2em;
   }

   .wij-team .team-row .flex-col .single-team .team-text {
      font-size: 1.2em;
   }

   /* .wij-team .team-row .flex-col .single-team .single-team-s-icons {
      opacity: 1;
   }

   .wij-team .team-row .flex-col .single-team:hover .team-text,
   .wij-team .team-row .flex-col .single-team .team-text {
      transform: translateY(-.75em);
   }

   .single-team .show-drop {
      display: none;
   } */

}

/* ------------------------- Wij - Jobs -------------------------------------------------- */

.section-jobs-wij .row {
   justify-content: center;
   min-height: calc((var(--section-padding) * 2) + 15em);
}

.section-jobs-wij .row h3 {
   margin-bottom: 1.5rem;
   font-size: clamp(1.75em, 2.5vw, 3em);
   padding-top: 1em;
}

.section-jobs-wij .button-wrap {
   position: relative;
   width: 100%;
}

@media screen and (max-width: 540px) { 
   .section-jobs-wij .row {
      min-height: calc((var(--section-padding) * 2) + 28em);
   }
}

/* ------------------------- Wat - Intro -------------------------------------------------- */

.comp-title-text-wat {
   padding-bottom: 0;
}

/* ------------------------- Wat - Services -------------------------------------------------- */

.section-services {
   padding-top: 0;
   /* was: margin-top: calc((var(--section-padding)/2) * -1) — a negative pull that
      only made sense when this was the FIRST section on the page (Chainn's
      wat-doen-we). Mid-page it dragged the block up over the section above it. */
   margin-top: 0;
}
/* keep the original tightening when it really is the first section */
.main-wrap-inside > .section-services:first-child,
#first-section.section-services:first-child {
   margin-top: calc((var(--section-padding) / 2) * -1);
}

.section-services .wat-flex {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
}

.section-services .wat-nav {
   position: -webkit-sticky; /* Safari */
   position: sticky;
   top: 0;
   pointer-events: 0;
   width: 50%;
   height: 100vh;
   pointer-events: none;
}

.section-services .wat-nav .circ-wrap {
   position: relative;
   width: 100%;
   width: calc(100% - (var(--gap-padding) * 1));
   display: block;
   border-radius: 50%;
   top: 50%;
   transform: translateY(-50%);
}

.section-services .wat-nav .circ-wrap::before {
   padding-top: 100%;
   display: block;
   content: "";
}

.section-services .wat-nav .single-circ {
   width: 100%;
   height: 100%;
   position: absolute;
   background: transparent;
   top: 0;
}

.section-services .single-service {
   padding-top: 15vh;
   padding-bottom: 15vh;
   transition: var(--animation-circ);
   padding-left: calc(var(--gap-padding) * 2);
}

.section-services .single-service:first-of-type {
   padding-top: 30vh;
}

.section-services .single-service:last-of-type {
   padding-bottom: 30vh;
}

.section-services .single-service h3 {
   color: var(--primary-light);
   margin-bottom: 1em;
   font-weight: 600;
   transition: var(--animation-circ);
   font-size: clamp(1.6em, 2.5vw, 2.5em);
}

.section-services .single-service p {
   color: var(--primary-light);
   transition: var(--animation-circ);
}

.section-services .single-service.current h3 {
   color: var(--secondary);
}

.section-services .single-service.current p {
   color: var(--white);
}

.section-services .wat-sticky-sections {
   width: 50%;
}

.section-services .wat-nav .single-circ .circ-big-image-overlay {
   transition: var(--animation-circ);
   opacity: 0;
   transform: rotate(-15deg) scale(.9);
   border-radius: 50%;
   transition-delay: 0s;
}

.section-services .wat-nav .single-circ.current .circ-big-image-overlay {
   opacity: .15;
   transform: rotate(0.0001deg) scale(1);
   transition-delay: 0s;
}

.section-services .wat-nav .single-circ .circ-small-image-overlay {
   transition: var(--animation-circ);
   opacity: 0;
   transform: rotate(15deg) scale(.9);
   top: 15%;
   left: 15%;
   height: 70%;
   width: 70%;
   border-radius: 50%;
   transition-delay: 0s;
}

.section-services .wat-nav .single-circ.current .circ-small-image-overlay {
   opacity: 1;
   transform: rotate(0.0001deg) scale(1);
   transition-delay: 0s;
}

.section-services .wat-nav .single-circ svg {
   transition: var(--animation-circ);
   position: absolute;
   top: 50%;
   left: 62%;
   transform: translateY(-50%);
   width: 50%;
   transform: rotate(0.0001deg) scale(1);
   opacity: 0;
   transition-delay: .3s;
}

.section-services .wat-nav .single-circ.current svg {
   transform: rotate(0.0001deg) scale(1);
   opacity: 1;
   transition-delay: 0s;
}

.section-services .hidden-circ-image {
   width: clamp(12em, 65vw, 20em);
   position: relative;
   display: none;
   border-radius: 50%;
   overflow: hidden;
   margin-bottom: 2em;
   transform: rotate(0.001deg) scale(.5);
   transition: var(--animation-circ);
   transition-delay: .2s;
   opacity: 0;
}

.section-services .hidden-circ-image.uk-scrollspy-inview {
   transform: rotate(0.001deg) scale(1);
   opacity: 1;
} 
   

.section-services .hidden-circ-image::before {
   display: block;
   content: "";
   padding-top: 100%;
}

.section-services .hidden-circ-image .circ-big-image-overlay{
   opacity: .15;
   transform: rotate(-45deg) scale(1);
   transition: var(--animation-circ);
   transition-delay: .2s;
}

.section-services .hidden-circ-image .circ-small-image-overlay{
   top: 15%;
   left: 15%;
   height: 70%;
   width: 70%;
   border-radius: 50%;
   transform: rotate(45deg) scale(1);
   transition: var(--animation-circ);
   transition-delay: .2s;
}

.section-services .hidden-circ-image.uk-scrollspy-inview .circ-small-image-overlay {
   transform: translateY(0) rotate(0.001deg) scale(1);
}

.section-services .hidden-circ-image.uk-scrollspy-inview .circ-big-image-overlay {
   transform: translateY(0) rotate(0.001deg) scale(1);
}

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


   .section-services .hidden-circ-image {
      display: block;
   }

   .section-services .wat-nav {
      display: none;
   }

   .section-services .wat-sticky-sections {
      width: 100%;
   }

   .section-services .single-service {
      padding-top: var(--section-padding-small);
      padding-bottom: var(--section-padding-small);
      padding-left: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
   }
   
   .section-services .single-service:first-of-type {
      padding-top: var(--section-padding);
   }
   
   .section-services .single-service:last-of-type {
      padding-bottom: var(--section-padding);
   }


   .section-services .single-service.current h3,
   .section-services .single-service h3 {
      color: var(--secondary);
      margin-bottom: .5em;
      text-align: center;
   }
   
   .section-services .single-service.current p,
   .section-services .single-service p {
      color: var(--white);
      text-align: center;
   }

}

/* ------------------------- Section - Blog Header -------------------------------------------------- */

.section-header-blog {
   padding-top: 28vh;
   padding-bottom: 15vh;
}

.section-header-blog .row .flex-col:nth-of-type(1) {
   width: 50%;
}

.section-header-blog .row .flex-col:nth-of-type(2) {
   width: 50%;
   padding-left: calc(var(--container-padding) / 2);
}

@media screen and (max-width: 820px){
   .section-header-blog .row .flex-col:nth-of-type(1) {
      width: 100%;
   }
   
   .section-header-blog .row .flex-col:nth-of-type(2) {
      width: 100%;
      padding-left: 0;
      padding-top: var(--gap-padding);
   }
}

/* ------------------------- Section - Blog Grid -------------------------------------------------- */

.section-blog-grid {
   padding-top: 0;
}

.section-blog-grid .row:nth-child(1) ul {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   width: calc(100% + var(--container-padding));
   margin-left: calc(var(--container-padding) * -1);
   justify-content: center;
}

.section-blog-grid .row ul .single-blog-item {
   width: 50%;
   padding-left: var(--container-padding);
   margin-bottom: var(--container-padding);
}

.section-blog-grid .single-blog-item .image::before {
   padding-top: 123%;
}

.section-blog-grid .single-blog-item .image-content {
   padding-top: 0;
   position: absolute;
   bottom: 0;
   padding: var(--gap-padding);
   transform: translateY(50%) rotate(0.001deg);
   transition: var(--animation-primary);
}

.section-blog-grid .single-blog-item:hover .image-content {
   transform: translateY(0) rotate(0.001deg);
}

.section-blog-grid .single-blog-item .image-content .title h4 {
   text-align: center;
}

.section-blog-grid .single-blog-item .overlay.image-overlay-30 {
   top: -1%;
   left: -1%;
   width: 102%;
   height: 102%;
   opacity: .7;
   background: linear-gradient(0deg, rgba(14,82,52,.9) 0%, rgba(14,82,52,.7) 25%, rgba(14,82,52,0.15) 100%);
   transition: var(--animation-primary);
}

.section-blog-grid .single-blog-item:hover .overlay.image-overlay-30 {
   opacity: 1;
}

.section-blog-grid .single-blog-item {
   opacity: 0;
   transform: translateY(10%) rotate(0.001deg) scale(1);
   transition: var(--animation-nav);
}

.section-blog-grid .row ul .single-blog-item:nth-of-type(even) {
   transform: translateY(10%) rotate(0.001deg) scale(1);
   transition-delay: 0s;
}

.section-blog-grid .single-blog-item.uk-scrollspy-inview {
   transform: translateY(0) rotate(0.001deg) scale(1);
   opacity: 1;
   transition-delay: 0s;
   will-change: opacity, transform;
}

.section-blog-grid .row ul .single-blog-item.uk-scrollspy-inview:nth-of-type(even) {
   transform: translateY(-20%) rotate(0.001deg) scale(1);
}

/*  First two  */

.section-blog-grid .row ul .single-blog-item:nth-of-type(1) {
   transform: translateY(0) rotate(0.001deg) scale(1);
   opacity: 1;
}

.section-blog-grid .row ul .single-blog-item:nth-of-type(2) {
   transform: translateY(-20%) rotate(0.001deg) scale(1);
   opacity: 1;
}


@media screen and (max-width: 820px){
    
   .section-blog-grid .row ul .single-blog-item {
      width: 100%;
      max-width: 30em;
      margin-bottom: 8em;
   }

   .section-blog-grid .row ul .single-blog-item:last-child {
      margin-bottom: 4em;
   }

   .section-blog-grid .row ul .single-blog-item:nth-of-type(even) {
      transform: translateY(10%) rotate(0.001deg) scale(1);
      transition-delay: 0s;
   }

   .section-blog-grid .row ul .single-blog-item.uk-scrollspy-inview:nth-of-type(even) {
      transform: translateY(0%) rotate(0.001deg) scale(1);
   }
}

/* ------------------------- Section (Row) - Blog Pagination -------------------------------------------------- */

.section-blog-grid .pagination {
   width: 100%;
   position: relative;
   /* padding-top: var(--section-padding-small); */
} 

.section-blog-grid .row:nth-child(2) ul {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   justify-content: center;
}

.section-blog-grid .pagination-prev {
   display: none;
} 

.section-blog-grid .pagination-next {
   display: none;
} 

.section-blog-grid .row:nth-child(2) .pagination-link {
   margin: 0 .35em;
   font-size: 1.15em;
}

.section-blog-grid .pagination-link .link-text:nth-of-type(1) {
   color: var(--primary-light);
   font-weight: 500;
}

.section-blog-grid .pagination-link .link-text:nth-of-type(2) {
   color: var(--secondary);
   font-weight: 500;
}

.section-blog-grid .pagination-link[aria-current="page"] .link-text:nth-of-type(1) {
   color: var(--white);
}

.section-blog-grid .pagination-link[aria-current="page"]:hover .link-text:nth-of-type(1) {
   transform: translate(0, 0%);
}

.section-blog-grid .pagination-link[aria-current="page"]:hover .link-text:nth-of-type(2) {
   transform: translate(0, 100%);
}

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

   .section-blog-grid .pagination {
      padding-top: var(--section-padding-small);
   } 

}
/* ------------------------- Assortiment Single - Assortiment Single Grid -------------------------------------------------- */

.assortiment-single-header .container .row:nth-child(1) {
   padding-right: 20%;
}

.assortiment-single-grid {
   padding-top: 0;
   position: relative;
}

.assortiment-single-grid ul li {
   width: 100%;
}

.assortiment-single-grid .single-assortiment-item {
   border-top: 1px solid rgba(255, 255, 235, 0.2);
   padding: 3em 0;
   position: relative;
   width: 100%;
   display: block;
   transition: var(--animation-primary);
}

.assortiment-single-grid .single-assortiment-item:hover {
   padding-left: var(--gap-padding);
}

.assortiment-single-grid ul li:last-child .single-assortiment-item {
   border-bottom: 1px solid rgba(255, 255, 235, 0.2);
}

.assortiment-single-grid .single-assortiment-item h4.pre-title,
.assortiment-single-grid .single-assortiment-item h1 {
   position: relative;
   display: block;
   color: var(--white);
   transition: var(--animation-primary);
}

.assortiment-single-grid .single-assortiment-item h4.pre-title {
   color: var(--secondary);
}

.assortiment-single-grid .single-assortiment-item h1 {
   margin-bottom: 0;
   max-width: 66%;
}

.mouse-pos-list-image-wrap:hover .single-assortiment-item h4.pre-title,
.mouse-pos-list-image-wrap:hover .single-assortiment-item h1 {
   color: rgba(255, 255, 255, 0.25);
}

.assortiment-single-grid .single-assortiment-item:hover h4.pre-title {
   color: var(--secondary);
}

.assortiment-single-grid .single-assortiment-item:hover h1 {
   color: var(--white);
}

.mouse-pos-list-image {
   width: 0;
   background: var(--primary-dark);
   z-index: 0;
   position: fixed;
   pointer-events: none;
   transform: translate(-50%, -50%);
   overflow: hidden;
   transition: width .4s cubic-bezier(.7, .1, .2, 1);
   display: block;
   left: 50%;
}

.mouse-pos-list-image.active {
   width: clamp(10em, 25vw, 25em);
}

.mouse-pos-list-image::before {
   display: block;
   content: "";
   padding-top: 122%;
}

.mouse-pos-list-image .mouse-pos-list-image-inner {
   opacity: 0;
   transition: all .5s ease-in-out;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
} 

.mouse-pos-list-image .mouse-pos-list-image-inner.active {
   opacity: 1;
} 

.assortiment-single-grid .single-assortiment-item .read-button {
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
   right: 0;
   color: var(--white);
   text-align: center;
   opacity: 0;
   visibility: hidden;
   transition: var(--animation-primary);
   pointer-events: none;
}

.assortiment-single-grid .single-assortiment-item:hover .read-button {
   opacity: 1;
   visibility: visible;
   right: var(--gap-padding);
}

.assortiment-single-grid .single-assortiment-item .read-button svg {
   margin-left: 0.4em;
   width: .8em;
   transform: rotate(45deg);
   transition: var(--animation-primary);
}

.assortiment-single-grid .single-assortiment-item:hover .read-button svg {
   transform: rotate(-45deg);
}

.assortiment-mobile-image {
   position: absolute;
   right: 0;
   top: 0;
   height: 100%;
   width: 7em;
   overflow: hidden;
   display: none;
}

.assortiment-single-grid .intro-h4 {
   padding-bottom: 2em;
}

@media screen and (max-width: 820px){
   .assortiment-single-grid {
      padding-bottom: 0;
   }

   .assortiment-single-grid .container {
      padding: 0;
   }

   .mouse-pos-list-image {
      display: none;
   }

   .read-button {
      display: none;
   }

   .assortiment-mobile-image {
      display: block;
   }

   .assortiment-single-grid .single-assortiment-item h4.pre-title {
      color: var(--secondary);
      font-size: 1em;
      line-height: 1em;
      width: 100%;
      width: calc(100% - 8em);
   }
   
   .assortiment-single-grid .single-assortiment-item h1 {
      color: var(--white);
      font-size: clamp(1.75em, 3vw, 3.25em);
   }

   .assortiment-single-grid .single-assortiment-item,
   .assortiment-single-grid .single-assortiment-item:hover {
      padding-left: var(--container-padding);
   }

   .assortiment-single-grid .intro-h4 {
      padding-bottom: 1.5em;
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
   }

   .mouse-pos-list-image-wrap:hover .single-assortiment-item h4.pre-title {
      color: var(--secondary);
   }

   .mouse-pos-list-image-wrap:hover .single-assortiment-item h1 {
      color: var(--white);
   }
   
}


/* ------------------------- Section - Simple List -------------------------------------------------- */

.section-simple-list {
   padding-top: 0;
}

.section-simple-list h2 {
   padding-bottom: 1em;
}

.section-simple-list li p {
   line-break: 1.25;
}

.section-simple-list ul.row li {
   width: 20%;
   padding-bottom: .4em;
}

@media screen and (max-width: 1020px){
   .section-simple-list ul.row li {
      width: 25%;
   } 
}

@media screen and (max-width: 820px){
   .section-simple-list ul.row li {
      width: 33.333%;
   } 

   .section-simple-list {
      padding-top: var(--section-padding);
   }
}

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

   .section-simple-list ul.row li {
      width: 50%;
   } 
}


/* ------------------------- Wie - Intro Split Text -------------------------------------------------- */


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

   .comp-title-text-wie-single .row {
      padding-bottom: 0;
   }

}

/* ------------------------- Wie - Telers -------------------------------------------------- */

.section-wie-telers {
   padding-top: 0;
}

.section-wie-telers p + ul {
   margin-top: -.75em;
   display: inline-block;
}

.section-wie-telers .row .flex-col .image-wrap::before {
   padding-top: 138%;
}

.section-wie-telers .row .flex-col:nth-child(2) {
   order: 1;
}

.section-wie-telers .row .flex-col:nth-child(1) {
   padding-right: 0;
   padding-left: var(--gap-padding);
}

.section-wie-telers .row .flex-col:nth-child(2) {
   padding-left: 0;
   padding-right: var(--gap-padding);
}

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

   .section-wie-telers .row .flex-col .image-wrap::before {
      padding-top: 100%;
   }

   .section-wie-telers .row {
      border-top: 1px solid var(--primary-light);
      padding-top: var(--section-padding);
   }

   .section-wie-telers .row .flex-col:nth-child(2) {
      order: 2;
   }

   .section-wie-telers .row .flex-col:nth-child(1) {
      padding-left: 0;
   }
   
   .section-wie-telers .row .flex-col:nth-child(2) {
      padding-right: 0;
   }
   
}

/* ------------------------- Wie - Afnemers -------------------------------------------------- */

.section-wie-afnemers {
   padding-top: 0;
   padding-bottom: 0;
}

.section-wie-afnemers p + ul {
   margin-top: -.75em;
   display: inline-block;
}

.section-wie-afnemers .row .flex-col .image-wrap::before {
   padding-top: 138%;
}


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

   .section-wie-afnemers .row .flex-col .image-wrap::before {
      padding-top: 100%;
   }

   .section-wie-afnemers .row {
      border-top: 1px solid var(--primary-light);
      padding-top: var(--section-padding);
   }
}


/* ------------------------- Assortiment Single Sub - Close -------------------------------------------------- */

.close-button {
   position: fixed;
   right: var(--viewport-padding);
   top: var(--viewport-padding);
   display: block;
   width: var(--nav-padding);
   height: var(--nav-padding);
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   cursor: pointer;
   z-index: 10;
   transform: rotate(0.001deg);
   transition: var(--animation-primary);
}

.close-button .close-bar {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(-45deg);
   width: 90%;
   height: 2px;
   background: var(--white);
}

.close-button .close-bar:nth-child(2) {
   transform: translate(-50%, -50%) rotate(45deg);
}

.close-button:hover {
   transform: rotate(-90deg);
}

/* ------------------------- Assortiment Single Sub - Top -------------------------------------------------- */

@media screen and (max-width: 1280px){
   .section-first-sub {
      padding-top: 10em;
   }

}

/* ------------------------- Assortiment Single Sub - Grid -------------------------------------------------- */

.assortiment-single-sub-grid {
   padding-bottom: 0;
}

/* ------------------------- Blog Single - Progress Bar -------------------------------------------------- */

/* Progress Bar */

.progressContainer {
	position: sticky;
	top: 0;
   margin-top: -.25em;
	z-index: 30;
	height: .25em;
	width: 100%;
}

.progressFill {
	height: 100%;
	background: var(--secondary);
	width: 0%;
}


/* ------------------------- Slider Arrows -------------------------------------------------- */

.slider, .uk-slider, .uk-slider:focus {
   outline: 0;
   outline-width: 0px !important;
   outline-offset: 0px;
   border-radius: 0;
   border: 0;
}

.slider .slider-prev, .slider .slider-next {
  background: var(--secondary);
  width: 3em;
  height: 3em;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  opacity: 1;
  cursor: pointer;
  margin: 0;
  z-index: 2;
  transition: var(--animation-primary);
}

.slider .slider-prev:hover, .slider .slider-next:hover {
  background: var(--white);
}

.slider .slider-next {
  transform: translate(50%, -50%);
  left: auto;
  right: 0;
}

.slider .slider-prev svg, .slider .slider-next svg {
  width: 35%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
}

.slider .slider-next svg {
  transform: translate(-50%, -50%) rotate(0deg);
}

.slider .slider-prev svg path, .slider .slider-next svg path {
   fill: var(--white) !important;
   transition: var(--animation-primary);
 }

 .slider .slider-prev:hover svg path, .slider .slider-next:hover svg path {
   fill: var(--secondary) !important;
 }

/* --- Hide Default Arrow --- */

.slider .slider-prev svg:nth-of-type(2), .slider .slider-next svg:nth-of-type(2) {
  display: none;
}

/* --- Invisable --- */

.slider .uk-invisible {
  opacity: 0;
  visibility: visible !important;
}

.slider .slider-prev.uk-invisible {
  transform: translate(-50%, -50%) scale(0);
}

.slider .slider-next.uk-invisible {
  transform: translate(50%, -50%) scale(0);
}

/* --- Hover Button --- */

.slider .slider-prev:hover svg path, .slider .slider-next:hover svg path {
  color: var(--primary);
}


@media screen and (max-width: 1000px){
   .slider .slider-prev {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      visibility: visible;
   }
    
   .slider .slider-next {
      transform: translate(50%, -50%) scale(1);
      opacity: 1;
      visibility: visible;
   }

   .slider .slider-prev:hover, .slider .slider-next:hover {
      background: var(--secondary);
    }

   .slider .slider-prev:hover svg path, .slider .slider-next:hover svg path {
      fill: var(--white) !important;
    }

    .slider .slider-prev.uk-invisible {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1);
    }
    
    .slider .slider-next.uk-invisible {
      opacity: 0;
      transform: translate(50%, -50%) scale(1);
    }
    

}

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

   .slider .slider-prev {
      width: 10vw;
      height: 10vw;
      border-radius: 0 5vw 5vw 0;
   }

   .slider .slider-next {
      width: 10vw;
      height: 10vw;
      border-radius: 5vw 0 0 5vw;
   }

}
/* ------------------------- Slider Arrows - Section Blog More Grid -------------------------------------------------- */

.section-blog-more-grid.slider .slider-prev,
.section-blog-more-grid.slider .slider-next {
   top: 42%;
}

.section-blog-more-grid-v2.slider .slider-prev,
.section-blog-more-grid-v2.slider .slider-next {
   top: 42%;
}


/* ------------------------- Jobs - Quote Slideshow -------------------------------------------------- */

.section-quote-slideshow {
   padding-top: 0;
}

.section-quote-slideshow .row-inside {
   align-items: stretch;
}

.section-quote-slideshow .uk-slideshow-items {
   overflow: visible;
   position: absolute;
   display: block;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

.section-quote-slideshow .single-quote-slideshow-item {
   position: absolute;
   left: 0;
   top: 0;
   overflow: visible;
}

.section-quote-slideshow .flex-content {
   display: flex;
   align-items: center;
   text-align: center;
   flex-direction: column;
   justify-content: center;
}

.section-quote-slideshow .uk-transition-slide-bottom {
   --uk-translate-y: 10vh;
   transition: var(--animation-nav);
}

.section-quote-slideshow .uk-transition-fade {
   transition: var(--animation-nav);
}

.section-quote-slideshow .flex-content p {
   max-width: 25em;
   margin-top: var(--gap-padding);
}

.section-quote-slideshow .flex-col-inside{
   width: 50%;
   position: relative;
}

.section-quote-slideshow .flex-col-inside:nth-child(1){
   padding-right: var(--gap-padding);
}

.section-quote-slideshow .flex-col-inside:nth-child(2){
   padding-left: var(--gap-padding);
}

.section-quote-slideshow .flex-col-inside .image-wrap{
   display: block;
   position: relative;
   background: var(--primary-dark);
   overflow: hidden;
}

.section-quote-slideshow .flex-col-inside .image-wrap::before {
   display: block;
   content: "";
   padding-top: 138%;
}

.section-quote-slideshow .overlay-image {
   height: 115%;
   top: -15%;
   transform: translateZ(0) rotate(0.001deg);
   will-change: transform;
}

.section-quote-slideshow .icon-svg-wrap {
   left: 100%;
   transform: translate(-50%, 50%);
   transform: translate(calc(-50% - var(--gap-padding)), 50%);
   bottom: calc(var(--gap-padding) * 3);

   left: 0;
   top: 65%;
   bottom: auto;
   transform: translate(-50%, -50%);
}

.section-quote-slideshow .uk-slideshow-nav {
   position: absolute;
   top: calc(var(--gap-padding) / 2);
   width: 50%;
   width: calc(50% - var(--gap-padding));
   right: 0;
   display: block;
   display: flex;
   justify-content: center;
}

.section-quote-slideshow .uk-slideshow-nav li {
   padding: 0 calc(var(--gap-padding) / 6); 
}

.section-quote-slideshow .uk-slideshow-nav li a {
   display: block;
   width: 2.5em;
   height: 2em;
   position: relative;
   cursor: pointer;
}

.section-quote-slideshow .uk-slideshow-nav li a::after {
   content: "";
   display: block;
   width: 100%;
   height: 1px;
   top: 50%;
   background: var(--primary-light);
   position: absolute;
   transition: var(--animation-circ);
}

.section-quote-slideshow .uk-slideshow-nav li.uk-active a::after {
   background: var(--white);
}

.section-quote-slideshow .extra-slider-nav {
   position: absolute;
   bottom: calc(var(--gap-padding) * 1);
   right: 0;
   width: 50%;
   width: calc(50% - var(--gap-padding));
   display: flex;
   justify-content: center;
}

.section-quote-slideshow .extra-slider-nav .slider-next {
   transform: translate(0,0);
   right: auto;
   position: relative;
}

.section-quote-slideshow .extra-slider-nav .slider-prev {
   transform: translate(0,0);
   left: auto;
   position: relative;
   margin-right: calc(var(--gap-padding) / 4);
}


@media screen and (max-width: 1000px){ 
   .section-quote-slideshow .flex-col-inside{
      width: 45%;
   }

   .section-quote-slideshow .flex-col-inside:nth-child(2){
      padding-left: calc(var(--gap-padding) * 1);
      width: 55%;
   }

   .section-quote-slideshow .icon-svg-wrap {
      display: none;
   }

   .section-quote-slideshow .uk-slideshow-nav {
      width: 55%;
      width: calc(55% - var(--gap-padding));
   }

   .section-quote-slideshow .extra-slider-nav {
      bottom: 0;
      right: 0;
      width: 55%;
      width: calc(55% - var(--gap-padding));
   }

   .section-quote-slideshow .flex-col-inside .image-wrap::before {
      padding-top: 150%;
   }
}

@media screen and (max-width: 820px){ 
   .section-quote-slideshow .flex-col-inside{
      width: 100%;
   }

   .section-quote-slideshow .uk-slideshow-nav {
      width: 100%;
      top: auto;
      bottom: calc(var(--gap-padding) * 2.5);
   }

   .section-quote-slideshow .extra-slider-nav {
      width: 100%;
   }

   .section-quote-slideshow .flex-col-inside:nth-child(1) {
      padding-right: 0;
   }

   .section-quote-slideshow .flex-col-inside:nth-child(2){
      padding-left: 0;
      width: 100%;
   }

   .section-quote-slideshow .flex-col-inside-inner .image-wrap {
      max-width: 12em;
      margin-top: var(--section-padding);
      margin-bottom: calc(var(--gap-padding) * 2);
   }

   .section-quote-slideshow .flex-col-inside .image-wrap {
      margin-left: auto;
      margin-right: auto;
   }

   .section-quote-slideshow .flex-col-inside .image-wrap::before {
      padding-top: 46em;
   }

   .section-quote-slideshow .flex-col-inside .image-wrap {
      background: transparent;
   }

   .section-quote-slideshow .flex-col-inside-inner .image-wrap::before {
      padding-top: 134%;
   }
   
   .section-quote-slideshow .slider-prev, .section-quote-slideshow .slider-next {
      border-radius: 5vw;
   }

}

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

   .section-quote-slideshow .flex-col-inside-inner .image-wrap::before {
      padding-top: 134%;
   }
}

/* ------------------------- Section - Contact Header -------------------------------------------------- */

.section-header-contact {
   padding-top: 25vh;
}

.section-header-contact .container {
   padding-right: calc(var(--container-padding) / 2);
}

.section-header-contact .row .flex-col:nth-of-type(1) {
   width: 50%;
   padding-right: calc(var(--gap-padding) * 1);
}

.section-header-contact .row .flex-col:nth-of-type(1) h1 {
   margin-bottom: 1em;
}

.section-header-contact .row .flex-col:nth-of-type(2) {
   width: 50%;
   padding-left: calc(var(--gap-padding) * 2);
   position: relative;
}

.section-header-contact .row .sticky form {
   position: sticky;
   top: var(--nav-padding);
   top: 0;
}

.alt-form {
   background: var(--primary-dark);
   padding: calc(var(--gap-padding) * 1.5) calc(var(--gap-padding) * 2);
}

.alt-form .btn {
   margin-right: 0;
}

.section-header-contact .credentials {
   display: flex;
   flex-wrap: wrap;
   position: relative;
   padding: calc(var(--gap-padding) * 1.5) 0 calc(var(--gap-padding) * 1) 0;
}

.section-header-contact .credentials .credentials-single {
   width: 60%;
   justify-content: flex-start;
}

.section-header-contact .credentials .credentials-single:nth-child(2) {
   width: 40%;
}

.section-header-contact .managers {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   position: relative;
   padding: calc(var(--gap-padding) * 1.5) 0 calc(var(--gap-padding) * .5) 0;
}

.section-header-contact .managers .managers-single {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   margin-bottom: .75em;
}

.section-header-contact .managers .managers-single .col-wrap {
   width: 60%;
   display: flex;
   align-items: center;
}

.section-header-contact .managers .managers-single .col-wrap:nth-child(2) {
   width: 40%;
}

.section-header-contact .managers .managers-single .round-image {
   border-radius: 50%;
   background: var(--primary-light);
   position: relative;
   display: block;
   width: 4em;
   height: 4em;
   margin-right: 1em;
   transform: translate(-.25em, 0);
}

.section-header-contact .managers p {
   margin: 0;
}

.section-header-contact .managers p:first-child {
   color: var(--secondary);
}

.section-header-contact .managers .managers-single .col-wrap:nth-child(2) {
   flex-direction: column;
   justify-content: center;
   padding-top: .5em;
}

.section-header-contact .link-wrap-managers {
   width: 100%;
}

.section-header-contact .link {
   margin-right: 0;
}

.section-header-contact .link-wrap-managers .link.small .link-text {
   color: var(--text);
}

.section-header-contact .link-wrap-managers .link.small .link-text:nth-of-type(2) {
   color: var(--secondary);
}

.section-header-contact .desktop-btn {
   margin-bottom: calc(var(--gap-padding) * 1.5);
   display: none;
}

.section-header-contact .desktop-btn .btn-icon svg {
   transform: rotate(90deg);
}


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

   .section-header-contact .desktop-btn {
      display: flex;
   }

   .section-header-contact .container {
      padding-right: 0;
      padding-left: 0;
   }

   .section-header-contact .row .flex-col:nth-of-type(1) {
      width: 100%;
      padding-right: var(--container-padding);
      padding-left: var(--container-padding);
   }
   
   .section-header-contact .row .flex-col:nth-of-type(2) {
      width: 100%;
      padding-right: var(--container-padding);
      padding-left: var(--container-padding);
      padding-top: var(--gap-padding);
   }
}

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

   .section-header-contact {
      padding-bottom: 0;
   }

   .alt-form {
      padding: calc(var(--gap-padding) * 2) calc(var(--gap-padding) * 1);
   }

   .section-header-contact .row .flex-col:nth-of-type(2) {
      padding-right: 0;
      padding-left: 0;
   }

   .section-header-contact + .footer {
      border-top: 0;
   }

   .section-header-contact .credentials .credentials-single {
      width: 55%;
   }

   .section-header-contact .credentials .credentials-single:nth-child(2) {
      width: 45%;
   }

   .section-header-contact .managers .managers-single .col-wrap {
      width: 100%;
      justify-content: space-between;
   }

   .section-header-contact .managers .managers-single {
      margin-bottom: 0;
   }

   .section-header-contact .managers .managers-single .col-wrap .col-1 {
      order: 2;
   }
   
   .section-header-contact .managers .managers-single .col-wrap:nth-child(2) {
      width: 100%;
   }

   .section-header-contact .managers .managers-single .round-image {
      width: 6em;
      height: 6em;
      margin-right: 5vw;
      transform: translate(0, 2.25em);
   }

   .section-header-contact .link-wrap-managers .link.small {
      font-size: 1em;
   }

   .section-header-contact .managers .managers-single .col-wrap:nth-child(2) {
      padding-top: 0;
      margin-top: -1em;
   }

   .section-header-contact .managers {
      padding: calc(var(--gap-padding) * 1) 0 .75em 0;
   }
}

@media screen and (max-width: 400px){
   .section-header-contact p {
      font-size: 1em;
   }
}


/* ------------------------- Section - Single Job Header (Shares contact template) -------------------------------------------------- */

.section-header-job-single .job-info {
   padding: calc(var(--gap-padding) * 1.5) 0 calc(var(--gap-padding) * .5) 0;
}

/* ------------------------- Section - Textpage Header -------------------------------------------------- */

.textpage-header {
   padding-bottom: 0;
   padding-top: 25vh;
   
}

.textpage-content {
   padding-top: var(--section-padding-small);
}


/* ------------------------- Content Blocks - General -------------------------------------------------- */

.section.single-block {
   padding-bottom: 0;
}

.section.single-block:last-of-type {
   padding-bottom: var(--section-padding);
}

/* ------------------------- Time Contact Page Before Title -------------------------------------------------- */

.time-morning-span {display: none;}
.time-evening-span {display: none;}

body.time-morning .time-morning-span {display: block;}
body.time-morning .time-day-span {display: none;}
body.time-morning .time-evening-span {display: none;}

body.time-evening .time-morning-span {display: none;}
body.time-evening .time-day-span {display: none;}
body.time-evening .time-evening-span {display: block;}

/* ------------------------- Video Modal -------------------------------------------------- */

.uk-lightbox {
   background: rgba(6, 41, 27, 0.9);
}

.uk-lightbox-items>* {
   padding: 0 5vw;
}

.uk-lightbox-toolbar.uk-transition-slide-top {
   --uk-translate-y: 0;
   background: transparent;
}

.uk-lightbox-toolbar-icon {
   padding: 1em;
   color: rgba(255,255,255,.7);
   background: var(--secondary);
   border-radius: 5em;
}

@media screen and (max-width: 540px){
   .uk-lightbox-items>* {
      padding: 0;
   }
}


/* ------------------------- Play Button Home -------------------------------------------------- */

.section-stats .image-col .single-image .link-overlay {
   background: rgba(6, 41, 27, 0);
   transition: var(--animation-primary);
}

.section-stats .image-col .single-image .link-overlay:hover {
   background: rgba(6, 41, 27, 0.3);
}

.section-stats .image-col .single-image svg {
   width: 20%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(1);
   transition: var(--animation-primary);
}

.section-stats .image-col .single-image .link-overlay:hover svg {
   transform: translate(-50%, -50%) scale(1.1);
}

/* ------------------------- Video Modal -------------------------------------------------- */

main#video .prefooter,
main#video .footer {
    display: none;
}

.full-video-section {
   overflow: hidden;
}

.video-modal-bg {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: rgba(6, 41, 27, .5);
   z-index: 40;
   opacity: 0;
   visibility: hidden;
}

.video-modal-bg .close-btn {
   width: calc(20px + 2em);
   height: calc(20px + 2em);
   background: var(--secondary);
   top: 10px;
   right: 10px;
   position: absolute;
   border-radius: 30px;
   transform: scale(1);
}

.video-modal-bg .close-btn svg {
   width: 35%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   opacity: .7;
   transition: var(--animation-primary);
}

.video-modal-bg .close-btn svg path {
   fill: #fff;
}

.video-modal-bg .close-btn:hover svg {
   opacity: 1;
}

.video-modal-bg.active {
   opacity: 1;
   visibility: visible;
}

.video-modal-bg:hover {
   cursor: pointer;
}

.video-modal {
   position: fixed;
   left: 50%;
   top: 50%;
   width: 70vw;
   z-index: 41;
   opacity: 0;
   visibility: hidden;
   transform: translate(-50%, -50%) scale(.95);
}

.video-modal.active {
   opacity: 1;
   visibility: visible; 
   transform: translate(-50%, -50%) scale(1);
}

.video-modal div {
   width: 100%;
   position: absolute;
}

@media screen and (max-width: 1040px){
   .video-modal {
       width: calc(100% - var(--container-padding));
   }
}

@media screen and (max-width: 640px){
   .video-modal {
       width: 100%;
   }
   
}

/* ------------------------- Formblock -------------------------------------------------- */

.formpage-content {
   padding-top: var(--section-padding-small);
   padding-bottom: calc(var(--section-padding-small) + 1em);
}

.formblock {
   padding-top: 0;
}

.formblock .form-col:has(input[required]) label::after {
   content: " *";
   color: var(--primary-light);
}

.formblock .form-col + h3 {
   margin-top: 2em;
}

@media screen and (max-width: 540px){ 
   .formblock .container.small {
      padding: 0;
   }

   .formblock .alt-form {
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
   }
}
/* ------------------------- Contact form feedback -------------------------------------------------- */
.alt-form .messagebox{ margin-top:1.2em; padding:.8em 1.1em; border-radius:8px; font-size:.95em; line-height:1.4; }
.alt-form .messagebox.sending{ background:rgba(255,255,255,.10); color:var(--white); }
.alt-form .messagebox.ok{ background:rgba(255,255,255,.16); color:var(--white); }
.alt-form .messagebox.error{ background:rgba(203,41,29,.22); color:#fff; }

 }

/* seamless slogan marquee: each half is one full run of the text */
.section-quote-slide .quote-run { display: inline-flex; align-items: center; }


/* =====================================================================
   MOBILE COMPATIBILITY FIXES (2026-09-04) — appended last so they win.
   Everything here is inside @media (max-width: 767px|540px): DESKTOP IS
   UNTOUCHED. Two global fixes + per-block fixes from the mobile audit.
   ===================================================================== */

/* [global] .container.big has 0 side padding (--container-padding-small) with no
   mobile override, so its blocks touched the screen edges. Restore the gutter. */
@media (max-width: 767px) {
  .container.big { padding-left: var(--container-padding); padding-right: var(--container-padding); }
}

/* [global] GSAP tl.from({opacity:0}) entrance animations (main.js) get stuck at
   opacity:0 on tall phone pages when their ScrollTrigger never fires -> big empty
   gaps. Force the animated content to its painted state on phones. */
@media (max-width: 767px) {
  .section-stats .stats-row .flex-col, .section-stats .btn-row,
  .section-blog-more-grid .items-list .flex-col,
  .section-blog-more-grid-v2 .items-list .flex-col,
  .section-quote-wide .image-wrap,
  .prefooter .image-block, .prefooter .round-image, .prefooter .image-block svg,
  .prefooter .name-block, .prefooter .usp-info li,
  .wij-intro .intro-image, .wij-floating-images .image-wrap,
  .wij-verantwoordelijkheid .row-usp .flex-col,
  .section-simple-list li {
    opacity: 1 !important;
    /* NB: do NOT reset transform here — several of these targets use a base
       centering transform (e.g. .section-quote-wide .image-wrap uses
       translateX(-50%)); clearing it pushed them ~195px off-screen. Forcing
       opacity is enough to defeat the stuck GSAP entrance and reveal them. */
  }
}

/* [block] section-rnd-products */
@media (max-width: 767px) {
  /* R&D varieties showcase (e.g. the "Habanero" panel): the featured image
     (.rp-media) is position:absolute and was laid over .rp-info, so the pepper
     cluster covered the last lines of the description ("grown in / red, orange
     and yellow"). Take it out of absolute flow and stack it ABOVE the copy so
     image and text never overlap; reset the 22em min-height (set in the existing
     max-width:900px block) so the panel sizes to its content with no dead space. */
  .section-rnd-products .rp-stage {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 1.9em var(--container-padding) 2.1em;
  }
  .section-rnd-products .rp-media {
    position: static;
    inset: auto;
    order: -1;
    width: 100%;
    height: 11em;
    margin: 0 0 1.3em;
  }
  .section-rnd-products .rp-img {
    max-height: 11em;
  }
  .section-rnd-products .rp-info {
    max-width: none;
  }
}

/* [block] section-blog-more-grid */
@media (max-width: 767px) {
  /* "What's new" news carousel (.section-blog-more-grid): a GSAP .from() entrance
     tween in main.js sets the .items-list cards to opacity:0 / translateY(2em), and
     on the tall phone layout the ScrollTrigger leaves them stuck at that start state,
     so the slider renders as a ~500px empty block (only the watermark shows) with the
     lone next-arrow — which isn't a .flex-col, so it stays visible — floating at the
     right edge. Force the cards back to their painted state on mobile; the next-arrow
     then lands on top of a real card instead of floating over empty space. */
  .section-blog-more-grid.slider .items-list .single-blog-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* [block] section-stats */
@media (max-width: 767px) {
  /* "One vision, one agricultural system" composed image (the stats block,
     section-stats — NOT comp-image-split, which has no inset). The small inset
     (greenhouse-worker) image is absolutely positioned with right:5vw, so on
     phones its right edge juts 5vw past the main video image and nearly touches
     the screen edge. The main image's right edge sits 10vw in from the image
     column's right edge, so aligning the inset to right:10vw makes the two right
     edges line up and gives the composition consistent side padding. */
  .section-stats .image-col .single-image:nth-child(2) {
    right: 10vw;
  }
}

/* [block] section-certs */
@media (max-width: 767px) {
  /* Certifications carousel: on phones the auto-scrolling marquee left the first
     card flush against the screen edge, so overflow:hidden hard-clipped its label
     to "OFACE QUALITY LABEL". Stop the scroll and lay the cards out as a centered,
     wrapping row with the site's standard side padding so every label reads in full. */
  .section-certs.is-marquee .certs-marquee {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .section-certs.is-marquee .certs-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    gap: 1.6rem 1.2rem;
  }
  /* the marquee duplicates every card for the seamless loop; drop the copies so
     the static grid does not show each certification twice */
  .section-certs.is-marquee .cert-card[aria-hidden="true"] {
    display: none;
  }
}

/* [block] section-stat-band */
@media (max-width: 767px) {
  /* .container.big uses --container-padding-small (0em) and is never
     overridden on mobile, so the band sits edge-to-edge. Restore the
     standard 5vw side gutter so numbers/labels don't touch the screen edges. */
  .section-stat-band .container.big {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  /* Flex items default to min-width:auto (base rule sets 9em), which stops
     the column shrinking below its content and lets a long value push the
     row wider than the screen. Allow it to shrink to its 42% basis. */
  .section-stat-band .sb-item { min-width: 0; }

  /* The big-number style (3.1em) is far too large for a long word value
     like "Multiple" in the narrow 42% mobile column, so it overruns and
     clips off-screen. Scale it down so the longest value fits on one line,
     and break as a last resort so it can never overflow the page. */
  .section-stat-band .sb-num {
    font-size: 2.1em;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

@media (max-width: 540px) {
  /* Extra headroom for the narrowest phones so "Multiple" still fits. */
  .section-stat-band .sb-num { font-size: 1.9em; }
}

/* [block] section-process-steps */
@media (max-width: 767px) {
  /* The `.container.big` variant is full-bleed (var(--container-padding-small) = 0em),
     which on phones lets the 'FROM IDEA TO IMPACT' eyebrow and the 01–05 number column
     touch the left screen edge. Restore the same side inset the rest of the page uses
     (~20px / 5vw at phone widths) on this section only. */
  .section-process-steps .container.big {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
  /* Each mobile step is a flex row (number + label + <p>). Without a shrink floor the
     description can't fit and runs past the right edge (the ~8px overflow). Let the row
     and its paragraph shrink/wrap inside the now-inset container so lines like
     'new opportunities.' keep clearance from the right screen edge. */
  .section-process-steps .ps-step { min-width: 0; }
  .section-process-steps .ps-step p {
    min-width: 0;
    overflow-wrap: break-word;
  }
}

/* [block] section-cta cta-img-side */
@media (max-width: 767px) {
  /* Split image-CTA ("Continuing Our Journey"): on phones the photo becomes a
     band across the TOP of the section and the copy stacks on the cream page
     BELOW it, so the red heading / green body / green button never sit over the
     two-person photo. In the markup .cta-bg comes before .container, so making
     the photo an in-flow band lets the copy flow onto the cream underneath it. */
  .section-cta.cta-img-side { padding-top: 0; }

  /* Photo: was an absolute full-bleed layer; make it an in-flow top band.
     Align-qualified selectors (0,4,0) tie/beat the existing max-width:820px band
     rules and, appended last, win. The bare selector covers any align variant. */
  .section-cta.cta-img-side.cta-align-left  .cta-bg,
  .section-cta.cta-img-side.cta-align-right .cta-bg,
  .section-cta.cta-img-side .cta-bg {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    width: 100%;
    height: 62vw;
    min-height: 230px;
    max-height: 360px;
    margin: 0 0 2rem;
    overflow: hidden;                /* clip the parallax overscan to the band */
    -webkit-mask: linear-gradient(to bottom, #000 88%, transparent 100%);
            mask: linear-gradient(to bottom, #000 88%, transparent 100%);
  }

  /* Keep the (parallax) photo filling the band; overscan stays inside overflow. */
  .section-cta.cta-img-side .cta-bg .overlay-image {
    top: -20%; left: 0; width: 100%; height: 140%;
  }
  .section-cta.cta-img-side .cta-overlay { background: none; }

  /* Copy sits on the cream page: full width, centred, standard 5vw side padding. */
  .section-cta.cta-img-side .container {
    max-width: none;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
  .section-cta.cta-img-side .cta-inner {
    max-width: 100%;
    margin: 0 auto;
    align-items: center;
    text-align: center;
  }
  .section-cta.cta-img-side .cta-text { margin-left: auto; margin-right: auto; }
  .section-cta.cta-img-side .cta-buttons { justify-content: center; }

  /* Safeguard: the heading uses var(--white) (#FFF) because on desktop it sits
     over the image; on the cream stack it must read as ink instead of vanishing. */
  .section-cta.cta-img-side:not(.has-bg) .cta-title { color: #123B28; }
}

/* [block] comp-title-text */
@media (max-width: 767px) {
  /* 'Freshness from the very beginning' (title-text, home variant).
     On phones this section (padding:0 by design for a flush desktop layout)
     rendered with a ~100vh flat cream void above the heading and its first
     line sliced off by the opaque block layered above it.
     Fix: kill any inflated full-height, keep it in normal block flow, lift it
     above the overlapping layer, and give it a real top boundary + clearance so
     the heading (and its ascenders) are no longer clipped. Uses the site's own
     spacing tokens; container keeps the standard 5vw (var(--container-padding))
     side inset. */
  .comp-title-text.comp-title-text-home {
    position: relative;
    z-index: 2;
    min-height: 0;
    height: auto;
    display: block;
    overflow: visible;
    margin-top: 0;
    padding-top: var(--section-padding-medium);
    padding-bottom: var(--section-padding-small);
  }

  .comp-title-text.comp-title-text-home .row,
  .comp-title-text.comp-title-text-home .flex-col {
    min-height: 0;
  }

  /* stop the heading itself from being clipped / pulled under the block above */
  .comp-title-text.comp-title-text-home h2 {
    margin-top: 0;
    overflow: visible;
  }
}

/* [block] section-image-features */
@media (max-width: 767px) {
  /* section-image-features: the media pane (.if-media) carries a hard-coded
     beige fallback (background:#e9e6df) plus a 15em min-height. When the block
     has no image, image-features.ejs emits NO inline background-image, so on
     phones the pane paints as a tall, empty beige rectangle (#e9e6df, the
     reported #E7E3DA) stacked above the text — the "dead space" between the
     hero/cookie banner and the body copy. Collapse the pane, but ONLY when it
     has no image (no inline style attr) so pages that DO set an image keep
     their media untouched. */
  .section-image-features .if-media:not([style]) {
    display: none;
  }
}

/* [block] section-header-contact */
@media (max-width: 767px) {
   /* Contact header: stack the "Address details" / "Contact details" columns
      so each gets the full content width instead of a cramped ~half of 390px.
      The parent .flex-col already carries 5vw (var(--container-padding)) side
      padding, so no extra edge spacing is added here. */
   .section-header-contact .credentials {
      flex-direction: column;
   }

   .section-header-contact .credentials .credentials-single,
   .section-header-contact .credentials .credentials-single:nth-child(2) {
      width: 100%;
   }

   .section-header-contact .credentials .credentials-single:nth-child(2) {
      margin-top: 1.25em;
   }

   /* .link has overflow:hidden + centered .link-wrap; as a flex item it can
      shrink below its content and center-clip the email ("ntact@pepperworld.").
      Give it the full width and left-align so contact@pepperworld.ma renders
      in full from the start with no clipping. */
   .section-header-contact .credentials .credentials-single .link {
      text-align: left;
      margin-right: 0;
      max-width: 100%;
   }

   .section-header-contact .credentials .credentials-single .link .link-wrap {
      justify-content: flex-start;
   }
}

/* [block] comp-header v2 assortiment-single-header */
@media (max-width: 767px) {
  /* ===== Verhalen "What's New" hero (comp-header v2) — mobile-only fixes ===== */

  /* Problem 2: the hero was full-height (min-height:100vh) PLUS a 66vw bottom-band
     reservation (padding-bottom:66vw, meant for the products/peppers hero), which
     left a ~700px empty stretch before the first story card. Make it a compact hero
     and let the poster fill the whole header as a real background image. */
  #verhalen .comp-header.v2 {
    min-height: calc(var(--vh, 1vh) * 60);
    padding-bottom: 0;
  }
  #verhalen .comp-header.v2 .video-bg {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
  }

  /* Problem 1: the heading block overflowed off the LEFT viewport edge (the label,
     the title and the red italic subtitle all lost their first letters). The header
     is display:flex (from .section.full-height) and its .container flex item, being
     wider than the phone, spilled past the left edge instead of keeping the 5vw side
     padding. Pin the text column to a full-width, padded, left-aligned container so
     it can no longer overflow, and let long words wrap. */
  #verhalen .comp-header.v2 .container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  #verhalen .comp-header.v2 .container .row:nth-child(1) {
    padding-right: 0;
    padding-top: 0;
  }
  #verhalen .comp-header.v2 .flex-col {
    width: 100%;
    min-width: 0;
  }
  #verhalen .comp-header.v2 .flex-col h1,
  #verhalen .comp-header.v2 .flex-col h2,
  #verhalen .comp-header.v2 .flex-col h4,
  #verhalen .comp-header.v2 .flex-col h5 {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* [block] section-focus-grid */
@media (max-width: 767px) {
  /* section-focus-grid opts into .container.big, which zeroes horizontal
     padding (--container-padding-small: 0). On phones that leaves the
     'OUR AREAS OF FOCUS' eyebrow clipped at the left edge and every card's
     icon/heading/body flush to 0px with long lines running to the right
     edge. Restore the site's standard mobile side padding. */
  .section-focus-grid .container.big {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
}

/* [block] section-header-contact */
@media (max-width: 767px) {
   /* Stack "Address details" and "Contact details" instead of two cramped side-by-side columns */
   .section-header-contact .credentials {
      flex-direction: column;
   }
   .section-header-contact .credentials .credentials-single,
   .section-header-contact .credentials .credentials-single:nth-child(2) {
      width: 100%;
   }
   .section-header-contact .credentials .credentials-single:nth-child(1) {
      margin-bottom: 1.25em;
   }
   /* Stop the email link from being clipped / overflowing off the right edge */
   .section-header-contact .credentials .credentials-single .link {
      max-width: 100%;
      overflow: visible;
   }
   .section-header-contact .credentials .credentials-single .link .link-wrap {
      justify-content: flex-start;
      white-space: normal;
   }
   .section-header-contact .credentials .credentials-single .link .link-text {
      white-space: normal;
      overflow-wrap: anywhere;
   }
   /* Hide the duplicate hover-animation copy so the wrapped email stays clean */
   .section-header-contact .credentials .credentials-single .link .link-text:nth-of-type(2) {
      display: none;
   }
}

/* [block] section-product-detail */
@media (max-width: 767px) {
  /* Media area = one clean, full-width, single-column image frame under the spec
     list (the desktop max-width:460px/auto-centering made the empty white box read
     as a stray band rather than a framed image). */
  .section-product-detail .pd-media { width: 100%; }
  .section-product-detail .pd-stage {
    aspect-ratio: 4 / 3;
    max-width: 100%;
    margin: 0;
  }

  /* Thumbnails: center a tidy row of fixed-size thumbs instead of leaving 2-3 of
     them jammed against the far-left of a wide auto-fill grid. auto-fit (not
     auto-fill) collapses the empty tracks so justify-content can center them. */
  .section-product-detail .pd-thumbs {
    grid-template-columns: repeat(auto-fit, 76px);
    justify-content: center;
    gap: .7rem;
  }

  /* Pack-format gallery: the desktop side padding (2rem, reserved for hover-zoom
     room) doubles the container's 5vw edge on phones and squeezes the grid into
     the middle; drop it so packs use the full container width, and trim the tall
     3rem top padding that touch devices don't need and that padded out the empty
     middle band. Column count is left to the existing 900/620/420px breakpoints. */
  .section-product-detail .pd-pack-row {
    padding: 1.6rem 0 0;
    gap: 1.4rem 1rem;
  }
}

/* [block] section-blog-more-grid-v2 */
@media (max-width: 767px) {

   /* The UIkit slider pushes its cards off-screen to the right on phones
      (desktop only works because a min-width:1000px rule cancels the JS
      transform). Neutralise that transform here too — !important beats
      UIkit's inline style — and let the cards render in normal flow. */
   .section-blog-more-grid-v2 .row ul.uk-slider-items {
      transform: none !important;
      height: auto !important;
      flex-wrap: wrap;
      width: 100%;
      margin-left: 0;
      gap: var(--gap-padding);
   }

   /* Stack each related-article card full container width, so there is no
      horizontal overflow left to clip them. */
   .section-blog-more-grid-v2 .row ul.uk-slider-items .single-blog-item {
      width: 100%;
      padding-left: 0;
   }

   /* With the carousel now a static stack, the circular prev/next arrows are
      non-functional and the 'next' one is clipped off the right edge — hide them. */
   .section-blog-more-grid-v2.slider .slider-prev,
   .section-blog-more-grid-v2.slider .slider-next {
      display: none;
   }

}

/* [block] comp-image-split */
@media (max-width: 767px) {
  /* "Growing Together Beyond Agriculture" split section — collapse the big empty
     reserved height that split the paragraph in two and pushed the group photo
     far below. Force a clean vertical stack: full text first, photo after. */

  /* --- comp-image-split (image-split.ejs): text + single group photo --- */
  .comp-image-split .container .row {
    display: flex !important;
    flex-direction: column !important;   /* guarantee stacking, kill side-by-side void */
    align-items: stretch !important;      /* undo align-items:center centering gaps */
  }
  .comp-image-split .row .flex-col,
  .comp-image-split .row .flex-col:nth-child(1),
  .comp-image-split .row .flex-col:nth-child(2) {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* text column (nth-child 2 / .textblock) always first so both paragraphs stay
     together — no void tearing "...encourage education," from "...positive difference." */
  .comp-image-split .row .flex-col:nth-child(2),
  .comp-image-split .row .flex-col.textblock {
    order: 0 !important;
    padding-top: 0 !important;
  }
  /* image column follows the text at a real photo ratio instead of a full square,
     removing the tall empty reserved box */
  .comp-image-split .row .flex-col:nth-child(1) {
    order: 1 !important;
    padding-top: 1.6rem !important;
  }
  .comp-image-split .row .flex-col .image-wrap::before {
    padding-top: 66% !important;         /* was 100% (full square) -> landscape group photo */
  }

  /* --- section-story-split (story-split.ejs) fallback: same section, same fix --- */
  .section-story-split .story-split-grid {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .section-story-split .story-split-text {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 0 !important;                  /* text first, whole */
  }
  .section-story-split .story-split-image {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    min-height: 56vw !important;          /* was 80vh (~600px+ void) -> compact photo band */
  }
}

/* [global] Hero horizontal text offset (textOffsetX -> transform:translateX(Nvw) on
   the flex-col) shoves the heading off the LEFT edge on narrow phones (e.g. the
   verhalen hero's -10vw = -39px clip). Reset the offset transform on phones so the
   hero heading keeps its container padding. Desktop keeps the offset. */
@media (max-width: 767px) {
  .comp-header .flex-col { transform: none !important; }
}

/* ============================================================================
   MOBILE FINE-TUNING (2026-09-04, round 2) — reported from a real phone.
   Everything here is either mobile-only (@media) or a stacking-only fix that
   reveals an element already meant to be visible; desktop layout is unchanged.
   ============================================================================ */

/* [all viewports] The quote-wide spinning "pepperworld" badge hangs BELOW its
   section (icon-svg-wrap: bottom:0; translateY(50%)) so it straddles onto the next
   band. Every band/section is a `position:relative; z-index:1` child of
   .main-wrap-inside (components.css ~2150), so the LATER band paints over the
   badge — and a z-index on the section is trapped inside its own band's stacking
   context (proven: even z-index:20 on the section stays clipped). The real fix is
   to lift the block's WRAPPER (page.ejs tags quote-wide with .sec-badge-lift) above
   the sibling bands. This only changes stacking — it reveals an element that was
   always meant to show and moves no desktop content. */
.main-wrap-inside > .sec-badge-lift { position: relative; z-index: 4; }
/* Unwrapped quote-wide (no spacing/band -> it is the direct child itself) + the
   badge above its own in-section siblings. */
.section-quote-wide { z-index: 4; }
.section-quote-wide .icon-svg-wrap { z-index: 3; }

/* [mobile] Centered heroes: the title started at ~65px and crowded the centered
   nav wordmark (pepperworld, y20–50). Give centered heroes top clearance so the
   title clears the wordmark. (The products hero overrides this below with a larger,
   'more centered' offset.) */
@media (max-width: 767px) {
  .comp-header.hero-align-center .container .row:nth-child(1) { padding-top: 2.6em; }
}

/* [mobile] Products hero ("Discover our varieties…"): keep the video full-bleed
   (COVERED like the rest of the site — the earlier letterbox band read as "crap"),
   but zoom out a touch and fix the cramped title:
   - Shorten the hero on phones (78vh) so the 16:9 pepper pile crops LESS and more of
     it shows — "covered, just a bit zoomed out". object-position:bottom keeps the
     pile anchored low (the video also carries videoFocus:bottom).
   - Drop the title into the grey upper half (15vh) so it sits well clear of the nav
     wordmark AND above the peppers — "more centered", readable.
   Scoped to .hero-media-band so other v2 heroes are untouched; desktop keeps the
   original full-height full-bleed hero. */
@media (max-width: 767px) {
  .comp-header.v2.hero-media-band { min-height: 100vh !important; min-height: calc(var(--vh, 1vh) * 100) !important; height: auto !important; padding-bottom: 0 !important; }
  .comp-header.v2.hero-media-band .video-bg {
    top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important; height: 100% !important;
  }
  /* cover/center-bottom is the DEFAULT (unframed); NOT !important so a saved phone
     framing (mobileStyles emits object-fit:contain + transform + object-position:center
     with !important) wins and the video matches the framing box. */
  .comp-header.v2.hero-media-band .video-bg-el { object-fit: cover; object-position: center bottom; }
  .comp-header.v2.hero-media-band .container .row:nth-child(1) { padding-top: 15vh !important; }
}

/* [mobile] R&D showcase prev/next arrows reported as unresponsive to taps on a
   real phone (they work with a synthetic tap in emulation, so this is a touch
   quirk: the 300ms click delay + double-tap-zoom can swallow the tap). Make them
   deliberate, reliable tap targets and guarantee they sit above the (static,
   click-through) featured image on mobile. */
.section-rnd-products .rp-prev,
.section-rnd-products .rp-next {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  z-index: 3;
}