.elementor-kit-13{--e-global-color-primary:#EEEEEE;--e-global-color-secondary:#292929;--e-global-color-text:#292929;--e-global-color-accent:#F9FEBB;--e-global-color-144637c:#F9FEBB;--e-global-color-bd9ed1d:#B5E7FF;--e-global-color-0ef4414:#EEEEEE;--e-global-color-ebc286b:#F7F7F5;--e-global-color-f7e80e2:#FFFFFF;--e-global-color-5e8f1c8:#292929;--e-global-color-0f5986d:#F6F2EA;--e-global-color-1eec204:#CACBBF;--e-global-typography-primary-font-family:"Urbanist";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-362b030-font-family:"Urbanist";--e-global-typography-362b030-font-size:clamp(32px, 3.5vw + 8px, 65px);--e-global-typography-362b030-font-weight:700;--e-global-typography-362b030-line-height:100%;--e-global-typography-362b030-letter-spacing:0.25px;--e-global-typography-3b09488-font-family:"Urbanist";--e-global-typography-3b09488-font-size:clamp(24px, 2.2vw + 6px, 45px);--e-global-typography-3b09488-font-weight:700;--e-global-typography-3b09488-line-height:100%;--e-global-typography-3b09488-letter-spacing:-0.25px;--e-global-typography-6ba1787-font-family:"Urbanist";--e-global-typography-6ba1787-font-size:clamp(22px, 1.8vw + 5px, 40px);--e-global-typography-6ba1787-font-weight:700;--e-global-typography-6ba1787-line-height:100%;--e-global-typography-6ba1787-letter-spacing:-0.25px;--e-global-typography-4659222-font-family:"Urbanist";--e-global-typography-4659222-font-size:clamp(20px, 1.4vw + 4px, 35px);--e-global-typography-4659222-font-weight:700;--e-global-typography-4659222-line-height:100%;--e-global-typography-4659222-letter-spacing:-0.25px;--e-global-typography-cf1bc7c-font-family:"Urbanist";--e-global-typography-cf1bc7c-font-size:clamp(18px, 1.1vw + 3px, 30px);--e-global-typography-cf1bc7c-font-weight:700;--e-global-typography-cf1bc7c-line-height:100%;--e-global-typography-cf1bc7c-letter-spacing:-0.25px;--e-global-typography-ee86f6c-font-family:"Urbanist";--e-global-typography-ee86f6c-font-size:clamp(16px, 1vw + 1px, 16px);--e-global-typography-ee86f6c-font-weight:400;--e-global-typography-ee86f6c-line-height:25px;--e-global-typography-ee86f6c-letter-spacing:-0.25px;--e-global-typography-3f791c3-font-family:"Space Grotesk";--e-global-typography-3f791c3-font-size:clamp(12px, 1vw + 1px, 13px);--e-global-typography-3f791c3-font-weight:300;--e-global-typography-3f791c3-text-transform:uppercase;--e-global-typography-3f791c3-word-spacing:3px;--e-global-typography-136afb7-font-family:"Urbanist";--e-global-typography-136afb7-font-size:clamp(16px, 1vw + 4px, 32px);--e-global-typography-136afb7-font-weight:300;--e-global-typography-136afb7-line-height:20px;--e-global-typography-136afb7-letter-spacing:-0.25px;}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{background-color:var( --e-global-color-f7e80e2 );font-family:var( --e-global-typography-3f791c3-font-family ), Sans-serif;font-size:var( --e-global-typography-3f791c3-font-size );font-weight:var( --e-global-typography-3f791c3-font-weight );text-transform:var( --e-global-typography-3f791c3-text-transform );word-spacing:var( --e-global-typography-3f791c3-word-spacing );color:var( --e-global-color-text );border-radius:5px 5px 5px 5px;padding:16px 18px 16px 18px;}.elementor-kit-13 e-page-transition{background-color:#FFBC7D;}.elementor-kit-13 img{border-radius:5px 5px 5px 5px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{font-size:var( --e-global-typography-3f791c3-font-size );word-spacing:var( --e-global-typography-3f791c3-word-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-13{--e-global-typography-ee86f6c-font-size:clamp(17px, 1vw + 1px, 16px);}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{font-size:var( --e-global-typography-3f791c3-font-size );word-spacing:var( --e-global-typography-3f791c3-word-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */html,
body {
  width:100%;
  overflow-x:hidden;
}

p a {
  color: black;
  text-decoration: underline !important;
}

/* LAYOUT UTILITIES */
:root {
  --space-0:  0;

  --space-20:  clamp(0.5rem, 0.4rem + 0.6vw, 1.25rem);    /* 8 → 20 */
  --space-40:  clamp(1rem, 0.8rem + 1.5vw, 2.5rem);       /* 16 → 40 */
  --space-60:  clamp(1.25rem, 0.95rem + 2vw, 3.75rem);    /* 20 → 60 */
  --space-80:  clamp(1.5rem, 1.1rem + 2.5vw, 5rem);       /* 24 → 80 */
  --space-100: clamp(1.75rem, 1.1rem + 3vw, 6.25rem);     /* 28 → 100 */
  --space-120: clamp(2rem, 1.2rem + 3.5vw, 7.5rem);       /* 32 → 120 */
  --space-140: clamp(2.25rem, 1.3rem + 4.5vw, 8.75rem);   /* 36 → 140 */
  --space-160: clamp(2.5rem, 1.2rem + 5.5vw, 10rem);      /* 40 → 160 */
  --space-200: clamp(3rem, 1.6rem + 6.5vw, 12.5rem);      /* 48 → 200 */
  --space-240: clamp(3.5rem, 1.8rem + 8vw, 15rem);        /* 56 → 240 */
  --space-300: clamp(4rem, 2rem + 9vw, 18.75rem);         /* 64 → 300 */
}

/* Margin left */
.ml-0   { margin-left: var(--space-0); }
.ml-20  { margin-left: var(--space-20); }
.ml-40  { margin-left: var(--space-40); }
.ml-60  { margin-left: var(--space-60); }
.ml-80  { margin-left: var(--space-80); }
.ml-100 { margin-left: var(--space-100); }
.ml-120 { margin-left: var(--space-120); }
.ml-140 { margin-left: var(--space-140); }
.ml-160 { margin-left: var(--space-160); }
.ml-200 { margin-left: var(--space-200); }
.ml-240 { margin-left: var(--space-240); }
.ml-300 { margin-left: var(--space-300); }

/* Margin right */
.mr-0   { margin-right: var(--space-0); }
.mr-20  { margin-right: var(--space-20); }
.mr-40  { margin-right: var(--space-40); }
.mr-60  { margin-right: var(--space-60); }
.mr-80  { margin-right: var(--space-80); }
.mr-100 { margin-right: var(--space-100); }
.mr-120 { margin-right: var(--space-120); }
.mr-140 { margin-right: var(--space-140); }
.mr-160 { margin-right: var(--space-160); }
.mr-200 { margin-right: var(--space-200); }
.mr-240 { margin-right: var(--space-240); }
.mr-300 { margin-right: var(--space-300); }


/* Margin top */
.mt-0   { margin-top: var(--space-0); }
.mt-20  { margin-top: var(--space-20); }
.mt-40  { margin-top: var(--space-40); }
.mt-60  { margin-top: var(--space-60); }
.mt-80  { margin-top: var(--space-80); }
.mt-100 { margin-top: var(--space-100); }
.mt-120 { margin-top: var(--space-120); }
.mt-140 { margin-top: var(--space-140); }
.mt-160 { margin-top: var(--space-160); }
.mt-200 { margin-top: var(--space-200); }
.mt-240 { margin-top: var(--space-240); }
.mt-300 { margin-top: var(--space-300); }

/* Margin bottom */
.mb-0   { margin-bottom: var(--space-0); }
.mb-20  { margin-bottom: var(--space-20); }
.mb-40  { margin-bottom: var(--space-40); }
.mb-60  { margin-bottom: var(--space-60); }
.mb-80  { margin-bottom: var(--space-80); }
.mb-100 { margin-bottom: var(--space-100); }
.mb-120 { margin-bottom: var(--space-120); }
.mb-140 { margin-bottom: var(--space-140); }
.mb-160 { margin-bottom: var(--space-160); }
.mb-200 { margin-bottom: var(--space-200); }
.mb-240 { margin-bottom: var(--space-240); }
.mb-300 { margin-bottom: var(--space-300); }

/* Padding left */
.pl-0   { padding-left: var(--space-0); }
.pl-20  { padding-left: var(--space-20); }
.pl-40  { padding-left: var(--space-40); }
.pl-60  { padding-left: var(--space-60); }
.pl-80  { padding-left: var(--space-80); }
.pl-100 { padding-left: var(--space-100); }
.pl-120 { padding-left: var(--space-120); }
.pl-140 { padding-left: var(--space-140); }
.pl-160 { padding-left: var(--space-160); }
.pl-200 { padding-left: var(--space-200); }
.pl-240 { padding-left: var(--space-240); }
.pl-300 { padding-left: var(--space-300); }

/* Padding right */
.pr-0   { padding-right: var(--space-0); }
.pr-20  { padding-right: var(--space-20); }
.pr-40  { padding-right: var(--space-40); }
.pr-60  { padding-right: var(--space-60); }
.pr-80  { padding-right: var(--space-80); }
.pr-100 { padding-right: var(--space-100); }
.pr-120 { padding-right: var(--space-120); }
.pr-140 { padding-right: var(--space-140); }
.pr-160 { padding-right: var(--space-160); }
.pr-200 { padding-right: var(--space-200); }
.pr-240 { padding-right: var(--space-240); }
.pr-300 { padding-right: var(--space-300); }


/* Padding top */
.pt-0   { padding-top: var(--space-0); }
.pt-20  { padding-top: var(--space-20); }
.pt-40  { padding-top: var(--space-40); }
.pt-60  { padding-top: var(--space-60); }
.pt-80  { padding-top: var(--space-80); }
.pt-100 { padding-top: var(--space-100); }
.pt-120 { padding-top: var(--space-120); }
.pt-140 { padding-top: var(--space-140); }
.pt-160 { padding-top: var(--space-160); }
.pt-200 { padding-top: var(--space-200); }
.pt-240 { padding-top: var(--space-240); }
.pt-300 { padding-top: var(--space-300); }

/* Padding bottom */
.pb-0   { padding-bottom: var(--space-0); }
.pb-20  { padding-bottom: var(--space-20); }
.pb-40  { padding-bottom: var(--space-40); }
.pb-60  { padding-bottom: var(--space-60); }
.pb-80  { padding-bottom: var(--space-80); }
.pb-100 { padding-bottom: var(--space-100); }
.pb-120 { padding-bottom: var(--space-120); }
.pb-140 { padding-bottom: var(--space-140); }
.pb-160 { padding-bottom: var(--space-160); }
.pb-200 { padding-bottom: var(--space-200); }
.pb-240 { padding-bottom: var(--space-240); }
.pb-300 { padding-bottom: var(--space-300); }

/* Horizontal container */
.container {
  padding-left: 4%;
  padding-right: 4%;
}



/* PREV ARROW */
.jet-listing-grid__slider-icon.prev-arrow {
    left: 18%;
    right: auto;
    content: url(https://surfweer.nl/wp-content/uploads/2026/01/yellow-arrow-left.svg);
   
}

.jet-listing-grid__slider-icon.prev-arrow:hover {
    content: url(https://surfweer.nl/wp-content/uploads/2026/02/Group-1975.svg);
}


/* NEXT ARROW */
.jet-listing-grid__slider-icon.next-arrow {
    left: 18%;
    right: auto;
    content: url(https://surfweer.nl/wp-content/uploads/2026/01/yellow-arrow-left.svg);
    transform: rotate(180deg); /* als dit je rechter pijl is */
  
}

.jet-listing-grid__slider-icon.next-arrow:hover {
    content: url(https://surfweer.nl/wp-content/uploads/2026/02/Group-1975.svg);
        transform: rotate(180deg);

}




/* Menu-item als flex container */
.menu-webcams {
  display: flex;
  align-items: center;     /* verticaal centreren */
  justify-content: center; /* horizontaal centreren */
  gap: 0px;
  padding: 0px;
}

/* Surf Icoon */
.menu-webcams::before {
  content: "";
 width: clamp(22px, 2.5vw, 28px);
  height: clamp(22px, 2.5vw, 28px);
  background-image: url("https://surfweer.nl/wp-content/uploads/2026/02/menu-webcams.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
}


/* Menu-item als flex container */
.menu-surf {
  display: flex;
  align-items: center;     /* verticaal centreren */
  justify-content: center; /* horizontaal centreren */
  gap: 0px;
  padding: 0px;
}

/* Surf Icoon */
.menu-surf::before {
  content: "";
 width: clamp(22px, 2.5vw, 28px);
  height: clamp(22px, 2.5vw, 28px);
  background-image: url("https://surfweer.nl/wp-content/uploads/2026/02/surf-menu.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
}

/* Menu-item als flex container */
.shop-icon {
  display: flex;
  align-items: center;     /* verticaal centreren */
  justify-content: center; /* horizontaal centreren */
  gap: 0px;
  padding: 0px;
}

/* Surf Icoon */
.shop-icon::before {
  content: "";
 width: clamp(22px, 2.5vw, 28px);
  height: clamp(22px, 2.5vw, 28px);
  background-image: url("https://surfweer.nl/wp-content/uploads/2026/03/shop-icon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
}

/* Menu-item als flex container */
.menu-wind {
  display: flex;
  align-items: center;     /* verticaal centreren */
  justify-content: center; /* horizontaal centreren */
  gap: 0px;
  padding: 0px;
}

/* Surf Icoon */
.menu-wind::before {
  content: "";
 width: clamp(22px, 2.5vw, 28px);
  height: clamp(22px, 2.5vw, 28px);
  background-image: url("https://surfweer.nl/wp-content/uploads/2026/02/wind-menu.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
}


@media (max-width: 1024px) {
  .menu-surf {
    flex-direction: column; /* icoon boven tekst */
    gap: 6px;
    text-align: center;
    padding: 0px;
  }

  .menu-surf::before {
    width: 24px;
    height: 24px;
    margin-bottom: -10px;
    margin-right: px;
  } 
  
    .shop-icon {
    flex-direction: column; /* icoon boven tekst */
    gap: 6px;
    text-align: center;
    padding: 0px;
  }

  .shop-icon::before {
    width: 24px;
    height: 24px;
    margin-bottom: -10px;
    margin-right: px;
  } 
  
  .menu-wind {
    flex-direction: column; /* icoon boven tekst */
    gap: 6px;
    text-align: center;
    padding: 0px;
  }

  .menu-wind::before {
    width: 24px;
    height: 24px;
    margin-bottom: -10px;
    margin-right: px;
  }  
  .menu-webcams {
    flex-direction: column; /* icoon boven tekst */
    gap: 6px;
    text-align: center;
    padding: 0px;
  }

  .menu-webcams::before {
    width: 24px;
    height: 24px;
    margin-bottom: -10px;
    margin-right: px;
  } .elementor-nav-menu__align-center .elementor-nav-menu {
    justify-content: space-between;
    margin-inline-end: auto;
    margin-inline-start: auto;
    margin: 0;
    gap: 0px;
    width: 100%;
}




/* padding header nav*/
.elementor-nav-menu--layout-horizontal .elementor-nav-menu>li:not(:last-child)>a {
padding: clamp(0px, calc((100vw - 320px) * 7 / 880), 7px); /* all sides */;

;
}




@media (max-width: 639px) {
  .mobile-border.pl-40,
  .mobile-border.pr-40,
  .mobile-border.pt-40 {
    padding: 0 !important;
  }
}


#bekijk, #webcams, #getijden, #aanmelden, #reacties, #forecast{ scroll-margin-top: 15vh; }



/* css annimaties*/

/*devider*/
.line--divider {
  position: relative;
  width: 100%;
  height: 1px;
  background: transparent; /* start onzichtbaar */
  overflow: hidden;
}

/* lijn die ‘opbouwt’ */
.line--divider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #CACBBF; /* kleur van de lijn */
  transform: scaleX(0);
  transform-origin: left;
  animation: lineReveal 1.1s ease-out forwards;
}

@keyframes lineReveal {
  to {
    transform: scaleX(1);
  }
}



.slide-counter {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #F6F2EA2E;
  border: solid 1px white;
  color: black;
  padding: 8px 28px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  z-index: 11;
  pointer-events: none;
  font-family: "Space Grotesk";
  font-weight: 100;
  letter-spacing: 2px;
  backdrop-filter: blur(10px);
  height: 40px;
  ;
}

.slide-progress-bar {
  position: absolute;
  top: 40px;
  left: 4%;
  max-width: 84%;
  height: 1px;
  background: rgba(255,255,255,0.8);
  transition: none;
  z-index: 10;
}/* End custom CSS */