@font-face {
  font-family: 'LemonMilkBold';
  font-style: normal;
  src: url('fonts/LEMONMILK-Bold.otf');
}
@font-face {
  font-family: 'LemonMilkMedium';
  font-style: normal;
  src: url('fonts/LEMONMILK-Medium.otf');
}
@font-face {
  font-family: 'LemonMilk';
  font-style: normal;
  src: url('fonts/LEMONMILK-Regular.otf');
}
@font-face {
  font-family: 'LemonMilkLight';
  font-style: normal;
  src: url('fonts/LEMONMILK-Light.otf');
}
@font-face {
  font-family: 'Source';
  font-style: normal;
  src: url('fonts/SourceSansProRegular.woff');
}
@font-face {
  font-family: 'SourceSB';
  font-style: normal;
  src: url('fonts/SourceSansProSemibold.woff');
}
@font-face {
  font-family: 'SourceIT';
  font-style: normal;
  src: url('fonts/SourceSansPro-It.woff');
}
@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff');
  font-weight: normal;
  font-style: normal;
}


:root {
--hkf: #fdf9ed;
--green: #458420;
--darkgreen: #163a2f;
--lightgreen: #7ab14d;
--lightblue: #cee3f7;


}

* {
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }


html,body { width: 100%; height: 100%;  -webkit-overflow-scrolling: touch;  overflow: hidden; }

html { -webkit-text-size-adjust: 100%;  -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth;  overscroll-behavior-y: none; -webkit-tap-highlight-color: rgba(0,0,0,0);  }

body { font-size: 16px;  font-weight: normal; background: var(--hkf);  }

em { font-family: SourceIT, Helvetica, sans-serif; }

.nobr { white-space: nowrap; }

/* Typography
   ========================================================================== */
   


h1,h2,h3,h4,h5,h6,p,a, td { margin: 0; padding: 0; line-height: 1.4; font-weight: normal; letter-spacing: 0.05rem; }

h2 { font-family: LemonMilkBold, Helvetica, sans-serif; font-size: 1rem; line-height: 1.2; color: var(--hkf); }

h3 { font-family: LemonMilkMedium, Helvetica, sans-serif; font-size: 1rem; line-height: 1.2; }

h4 { text-transform: uppercase; }

h5 { }

h6 { }


/* Basic segment: Right
   ========================================================================== */

#right { display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;  background-color: var(--hkf); z-index: 1; }
#right_header {  position: relative; top: 0px; left: 0px; width: 100%; height: 82px; background: var(--darkgreen); display: flex; align-items: center; padding: 0 1.5rem 0 6rem;  }
#right_header h2  { color: var(--lightblue); width: 100%; padding: 0 1.5rem;  text-align: center;}
#right_inner { height: calc(100% - 82px); overflow: auto; }
#right_inner.pb { padding-bottom: 48px; }
#right_img { position: relative; width: 87%; margin-left: 13%; overflow: hidden; }
#right_img img { width: 100%; height: auto; }
#right_text { display: block; width: 80%; margin-left: 20%; }
#right_text p { font-family: Source, Helvetica, sans-serif; font-size: 1rem; color: #000; padding: 14px 14px 0 14px; }
#right_text p.info { font-size: .9rem; }
#right_text a { font-family: SourceSB, Helvetica, sans-serif; color: var(--green); text-decoration: none; }
#right_map { width: 100%; height: 320px; margin-top: 2rem; background-color: var(--hkf); }

/* Basic segment: Left
   ========================================================================== */

#left { display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--lightgreen); background: linear-gradient(180deg, rgba(122,177,77,1) 60%, rgba(69,132,32,1) 100%);  z-index: 1; }
#left_header {  position: relative; top: 0px; left: 0px; width: 100%; height: 82px; background: var(--darkgreen); display: flex; align-items: center; padding-left: 15%;  }
#left_header h2  { color: var(--lightblue); width: 80%; }

#left_overlay_closer { display:none; position: absolute; top: 20px; left: 10px; width: 40px; height: 40px; border-radius: 50%; padding: 7px 0 0 7px; background-color: var(--lightblue); color: var(--green); z-index: 99; cursor: pointer; }
#left_overlay_closer i { font-size: 26px; padding-top: 0; margin-right: 4px; }
#left_header.itemdisp #left_overlay_closer { display: block; }
#left_header.itemdisp h2 { padding-left: 40px; }

#left_inner { position: absolute; top: 121px; width: 100%; padding-left: 24px; margin-bottom: 60px; background-color: var(--hkf); }

#left ul { position: relative; width: 100%; margin: 0 0 24px 0; padding: 0; list-style: none; }
#left ul li { position: relative; border-bottom: 4px solid var(--green); }
#left ul li a { position: relative; display: flex; width: 90%; min-height: 3rem; align-items: flex-end; text-decoration: none; padding: 16px 16px 0 0; color: var(--darkgreen); font-family: LemonMilkMedium, Helvetica, sans-serif; font-size: .95rem; }
#left ul li a:after { content: "\f04b"; font-family: FontAwesome; position: absolute; font-size: 14px; color: var(--darkgreen); bottom: 1px; left: 100%; }


#left_overlay { position: relative; width: 1px; height: 1px; background-color: var(--hkf); overflow: hidden; z-index: 2; transition: all .3s; }
#left_overlay.active { overflow: auto; }
#left_overlay_inner { display: block; width: 80%; height: 100%; }
#left_overlay_inner p { font-family: Source, Helvetica, sans-serif; font-size: 1rem; color: #000; padding: 14px 0 0 14px; }
#left_overlay_inner h3 { padding: 24px 0 0 14px; }
#left_overlay_inner a { font-family: SourceSB, Helvetica, sans-serif; color: var(--green); text-decoration: none; }

.hoofdsponsors a { display: block; width: 80%; max-width: 300px; margin: 24px; padding: 4px; background-color: #fff; border: 1px solid var(--green);}
.sponsors { display: flex; flex-flow: row wrap; padding: 24px 0 0 20px;  }
.sponsors a { display: flex; width: 40%; margin: 4px; padding: 4px; background-color: #fff; border: 1px solid var(--green); aspect-ratio: 1 /1; align-items: center; }
.hoofdsponsors a img, .sponsors a img { width: 100%; height: auto; }


/* Basic segment: Center
   ========================================================================== */

#center { display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: var(--hkf); z-index: 10; }

#center_header {  position: absolute; top: 0px; left: 0px; width: 100%; height: 120px; background: var(--green); margin-bottom: 60px; display: grid; grid-template-columns: 15% 55% 20%; grid-column-gap: 5%; grid-template-rows: 82px 38px; grid-row-gap: 0; z-index: 9;   }
#center_header > div { position: relative; height: 100%; display: flex; align-items: center; justify-content: center;}

#center_header_left { height: 82px; justify-content: flex-end; }

#center_header_center { height: 82px;  }
#center_header_center h2 span { font-family: LemonMilkMedium, Helvetica, sans-serif; font-size: 1rem;  }

#center_header_right { height: 82px;  }
#center_header_right img { display:block; width: 80%; height: auto; }

#center_header_bot { height: 38px;  grid-column-start: 1; grid-column-end: 4; font-size: 1.6rem; color: var(--hkf); background-color: var(--darkgreen); }


#center_header_closeright { display:none; position: absolute; top: 10px; right: 15px; width: 40px; height: 40px; z-index: 99; cursor: pointer; }


#list, #map { position: absolute; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; transition: opacity .3s; }
#list.active, #map.active { opacity: 1; z-index: 2; }
#map { box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.8), -4px 4px 8px 0 rgba(0, 0, 0, 0.8);   }
#list { padding-top: 120px; box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.8), -4px 4px 8px 0 rgba(0, 0, 0, 0.8); overflow: auto; }

.leaflet-hkf-icon { position: relative; }
.leaflet-hkf-icon .number { position: absolute; top: 4px; left: 2px; display: flex; width: 24px; height: 24px; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; font-weight: 600; }

.listitem { width: 100%; height: 101px; display: grid; grid-template-columns: 150px auto; gap: 0; margin: 0; padding: 0; text-decoration: none; border-bottom: 1px solid var(--green); } 
.listthumb { width: 150px; height: 100px; overflow: hidden; padding: 0;  }
.listthumb img { width: 100%; height: auto; }
.listact { width: 100%; height: 100px; display: grid; grid-template-rows: auto 1fr; gap: 0; padding: 9px 12px 0 12px;  }
.listactlast {border-bottom: 1px solid var(--hkf); }
.listact h5 { font-family: LemonMilkMedium, Helvetica, sans-serif;  font-size: .75rem; line-height: 1.05; margin: 0; text-transform: uppercase; color: var(--darkgreen); }
.listloclink { display: flex; align-items: center; }
.listloc { width: calc(100% - 15px); font-family: Source, Helvetica, sans-serif; font-size: .85rem; line-height: 1.05; color: var(--darkgreen); }
.listlink { 15px; color: var(--green); }



/* Splash screen
   ========================================================================== */

#splash { display: block; position: relative; width: 100%; height: 100%; z-index: 9999; padding-top: 15%; overflow: hidden; background: var(--hkf) url('../img/splash.jpg') bottom center no-repeat; background-size: cover; text-align: center; transition: all .7s; }
#splash h1 { width: 100vw; text-align: center; font-family: LemonMilkBold, Helvetica, sans-serif; font-size: 1.7rem; line-height: 1.5; color: var(--green); }
#splash i { margin-top: 32px; font-size: 2rem; color: var(--green); }




/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
 
 .hamburger{font:inherit;display:inline-block;overflow:visible;margin:0;padding:15px;cursor:pointer;transition-timing-function:linear;transition-duration:.15s;transition-property:opacity,filter;text-transform:none;color:inherit;border:0;background-color:transparent}
.hamburger.is-active:hover,.hamburger:hover{opacity:.7}
.hamburger.is-active .hamburger-inner,.hamburger.is-active .hamburger-inner:after,.hamburger.is-active .hamburger-inner:before{background-color:var(--hkf)}
.hamburger-box{position:relative;display:inline-block;width:30px;height:24px}
.hamburger-inner{top:50%;display:block;margin-top:-2px}
.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{position:absolute;width:30px;height:3px;transition-timing-function:ease;transition-duration:.15s;transition-property:transform;border-radius:3px;background-color:var(--hkf)}
.hamburger-inner:after,.hamburger-inner:before{display:block;content:""}
.hamburger-inner:before{top:-10px}
.hamburger-inner:after{bottom:-10px}

.hamburger--squeeze .hamburger-inner{transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:300ms}
.hamburger--squeeze .hamburger-inner:before{transition:top 300ms ease .12s,opacity 300ms ease}
.hamburger--squeeze .hamburger-inner:after{transition:bottom 300ms ease .12s,transform 300ms cubic-bezier(.55,.055,.675,.19)}
.hamburger--squeeze.is-active .hamburger-inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(45deg)}
.hamburger--squeeze.is-active .hamburger-inner:before{top:0;transition:top 300ms ease,opacity 300ms ease .12s;opacity:0}
.hamburger--squeeze.is-active .hamburger-inner:after{bottom:0;transition:bottom 300ms ease,transform 300ms cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}


.hamburger--squeezeright .hamburger-inner{transform:rotate(45deg)}
.hamburger--squeezeright .hamburger-inner:before{top:0;transition:top 300ms ease,opacity 300ms ease .12s;opacity:0}
.hamburger--squeezeright .hamburger-inner:after{bottom:0;transition:bottom 300ms ease,transform 300ms cubic-bezier(.215,.61,.355,1) .12s;transform:rotate(-90deg)}


 /* The switch */
.switch { position: relative; display: inline-block; width: 50px; height: 24px; margin: 0 18px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--lightgreen); -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: var(--lightblue); -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
.slider.round { border-radius: 24px; }
.slider.round:before { border-radius: 50%; } 


/* PWA install prompt */
#ios_install_prompt { display: block; position: absolute; bottom: 15px; left: -120%; width: 98%; margin-left: 1%; z-index: 10001; transition: left .5s; }
#ios_install_prompt.active { left: 0; }
.prompt-message { display: block; width: 100%; padding: 12px; border-radius: 6px; background-color: var(--hkf); font-family: SourceSB, Helvetica, sans-serif; font-size: .8rem; line-height: 1.3; box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.3), -4px 4px 8px 0 rgba(0, 0, 0, 0.3); }
.caret-down { display: block; margin: 0px auto; width: 0; height: 0; border-left: 10px solid transparent;border-right: 10px solid transparent; border-top: 10px solid #f2f8ff; }