@font-face {
    font-family: Lemonmilk;
    font-weight: 600;
    src: url("fonts/lemonmilk.otf") format("opentype");
}

/* fira-sans-regular - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/fira-sans-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Regular'), local('FiraSans-Regular'),
       url('fonts/fira-sans-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/fira-sans-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/fira-sans-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/fira-sans-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/fira-sans-v8-latin-regular.svg#FiraSans') format('svg'); /* Legacy iOS */
}

/* fira-sans-italic - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/fira-sans-v8-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Italic'), local('FiraSans-Italic'),
       url('fonts/fira-sans-v8-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/fira-sans-v8-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/fira-sans-v8-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/fira-sans-v8-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/fira-sans-v8-latin-italic.svg#FiraSans') format('svg'); /* Legacy iOS */
}

/* fira-sans-600 - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/fira-sans-v8-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans SemiBold'), local('FiraSans-SemiBold'),
       url('fonts/fira-sans-v8-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/fira-sans-v8-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/fira-sans-v8-latin-600.woff') format('woff'), /* Modern Browsers */
       url('fonts/fira-sans-v8-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/fira-sans-v8-latin-600.svg#FiraSans') format('svg'); /* Legacy iOS */
}

/* fira-sans-600italic - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/fira-sans-v8-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans SemiBold Italic'), local('FiraSans-SemiBoldItalic'),
       url('fonts/fira-sans-v8-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/fira-sans-v8-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/fira-sans-v8-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/fira-sans-v8-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/fira-sans-v8-latin-600italic.svg#FiraSans') format('svg'); /* Legacy iOS */
}
/* ========================================================================
   Base
 ========================================================================== */

:root {
	--off-black: #262121;
	--hkf-creme: #fdf9ed;
	--hkf-green: #74b848;
	--hkf-light-green: #cde3bd;
	--hkf-card: #d7dcb3;
}


html,body { width: 100%; -webkit-overflow-scrolling: touch; }
body {  margin: 0; padding: 0; background-color: var(--hkf-creme);  overflow-x: hidden;  }
body.noscroll { overflow-y: hidden;  }
html { -webkit-text-size-adjust: 100%;  -ms-text-size-adjust: 100%; scroll-behavior: smooth; font-family: 'Fira Sans', Arial, sans-serif; font-weight: 400; font-size: 62.5%;  }


* {
  box-sizing: border-box;
}

.nobr { white-space: nowrap; }

/* ========================================================================
   Grid
 ========================================================================== */
 
.nodisp_phone { display: none; }
.phone_only { display: inline;}

#header-hkf { background: var(--hkf-creme) url('../img/header_back.png') top center repeat-x; }
#header-hkf-inner { display: block; position: relative; height: 440px;  max-width: 1200px; margin: 0px auto; z-index: 2; }
#header-hkf-inner.container { padding: 0; }

#header-titel { position: absolute; margin-top: 40px; width: 100%; height: 320px; align-items: center; justify-content: center; display: flex; z-index: 4; overflow: hidden !important; } 

#backdrop-hkf { display: block; margin-top: 40px; border-radius: 12px; height: 320px; overflow: hidden !important; }
#backdrop-hkf-caption { position: absolute; left: 0; bottom: 0; } 

#topmenu { position: absolute; bottom: 60px; right: 80px; z-index: 4; }

#header-hkf-top-left { position: absolute; top: 0; left: 0; width: 196px; height: 200px; background: var(--hkf-green) url('../img/top_left_vrij.png') top left no-repeat; z-index: 1; }
#header-hkf-top-right { position: absolute; top: 0; right: 0; width: 221px; height: 408px; background: var(--hkf-creme) url('../img/top_right_vrij.png') top left no-repeat; z-index: 1; }


#header_top { width: 100%; display: grid; grid-template-columns: 70px 1fr 70px; gap: 0; background: url('../img/top_mid.png') top center no-repeat; background-size: 100% 333px; }
#header_top .top_left { height:333px;  }
#header_top .top_mid { height: 333px; display: grid; grid-template-rows: 96px 1fr; gap: 0; }
#header_top .top_mid .title { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding-top: 33px; }
#header_top .top_right { height: 333px;  }


#header_bot { width: 100%; display: grid; grid-template-columns: 37px 33px 1fr 37px 33px; gap: 0; }
#header_bot div { height:33px;  }
#header_bot .bot_mid { position: relative; background-color: var(--off-black); }
#header_bot .bot_corner { width: 100%; height: 100%; background-color: var(--off-black); }
#header_bot .bot_mid_left .bot_corner {  border-bottom-left-radius: 12px;  }
#header_bot .bot_mid_right .bot_corner {  border-bottom-right-radius: 12px;  }


section { position: relative; width: 100vw; margin: 0; padding: 0 33px; overflow-x: hidden; }

article { display: block; width: 100%; max-width: 1500px; margin: 0px auto; }

.container { width: 100%; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2.25vw; grid-template-rows: 1fr; row-gap: 0; padding: 2rem 0;  }
.card-container { padding-top: 2rem; }


.logokop { display: grid; grid-template-columns: 1fr; gap:3rem; }
.logokop img { width: 100%; max-width: 200px; }



#nieuws { padding-bottom : 40px; }



#map { position: relative; width: 100%; height: 600px; }

.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; }

.maplink { display: block; margin: 8px auto; width: 40px; font-size: 1.5rem; border-bottom: 1px solid var(--hkf-green); }

grid_dense { grid-auto-flow: dense; }

.span-1-12 { grid-column: 1 / span 12; }
.span-1-6 { grid-column: 1 / span 12; }
.span-8-12 { grid-column: 1 / span 12; }

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

	.nodisp_phone { display: inline; }
	section.nodisp_phone { display: block; }
	.phone_only { display: none; }

	.logokop { display: grid; grid-template-columns: 95px 1fr; }

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

	#header_top { grid-template-columns: 180px 1fr 180px; background: none; }
	#header_top .top_left { background: url('../img/top_left.png') top center no-repeat; background-size: contain; }
	#header_top .top_mid { background: url('../img/top_mid.png') top center no-repeat; background-size: 100% 333px; display: grid; grid-template-rows: 96px 1fr; gap: 0; }
	#header_top .top_mid .title { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding-top: 33px; }
	#header_top .top_right { height: 333px; background: url('../img/top_right.png') top center no-repeat; background-size: contain; }

	#header_bot { grid-template-columns: 147px 33px 1fr 37px 143px;  }

	.logokop { grid-template-columns: 140px 1fr; }
}

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


}



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

}


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

	.span-1-6 { grid-column: 1 / span 6; }
	.span-8-12 { grid-column: 8 / span 5; }
}



.uk-card { background: var(--hkf-light-green); overflow: hidden; border-radius: 8px; }
.uk-card-body { padding: 0; }
.uk-card-inner { padding: 30px; }
.uk-card-inner-label { padding: 15px 20px 0 20px; }
#activiteiten .uk-card-inner-label, #terugblik .uk-card-inner-label { padding: 35px 20px; }
.uk-card-inner-label p { font-size: .9em; margin: 0; padding: 10px 0 14px 0; }
.uk-card-default { box-shadow: 0 5px 5px rgba(0, 0, 0, 0.08);}
.uk-card-default.uk-card-hover { transition: all .5s; }
.uk-card-default.uk-card-hover:hover {
	background: var(--hkf-green);
	z-index: 999;
    -ms-transform: scale(1.05,1.05); /* IE 9 */
    -webkit-transform: scale(1.05,1.05); /* Safari */
    transform: scale(1.05,1.05); /* Standard syntax */
    border-radius: 12px; 
     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.08);
}
.uk-card-default.uk-card-hover:hover h4 { color: var(--hkf-creme); }



 /*  Grid margins
 ========================================================================== */

section  { margin-bottom: 5rem;  }
#contact   { margin-bottom: 0;  }
 
.mb_dflt { margin-bottom: 3rem;  }
.mb_lead { margin-bottom: 4rem;  }


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

	.mb_dflt { margin-bottom: 2rem;  }

}



/* ========================================================================
   Navigation
 ========================================================================== */

#backmenu ul { padding: 0; margin: 24px 0 0 0; list-style: none; }
#backmenu ul li li { display: inline-block; }
#backmenu ul li a { font-size: 1.6rem; color: #fff; text-decoration: none; text-transform: uppercase;	position: relative; display: inline-block; outline: none; padding: 5px 12px; background-color: rgba(0,0,0,.6); }
#backmenu ul li a:hover {
  color: #222; background-color: rgba(255,255,255,.6);
}



#topmenu ul, #stickymenu ul { padding: 0; list-style: none; }
#topmenu ul { margin: -14px 0 0 0; }
#topmenu ul li, #stickymenu ul li { font-size: 1.6rem; display: inline-block; margin-left: 4px; }
#topmenu ul li a { color: #fff; text-decoration: none; text-transform: uppercase;	position: relative; display: inline-block; outline: none; padding: 5px 12px; background-color: rgba(0,0,0,.6); }
#topmenu ul li a,
#topmenu ul li a:after,
#topmenu ul li a:before {  margin: 0; }

#topmenu ul li a:after, #stickymenu ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '';
  color: transparent;
  background: #fff;
  height: 1px;
}
#topmenu ul li a:hover {
  color: #222; background-color: rgba(255,255,255,.6);
}
#topmenu ul li a:hover:after {
  width: 100%;
}


/* ========================================================================
   Articles
 ========================================================================== */

.logo img { width: 80%; height: auto; }


.uk-slidenav { background-color: rgba(0,0,0,.5); border-radius: 50%; }


.white-popup-block { background:#fff; text-align:left; width: 94%; max-width:1000px; margin:40px auto; position:relative;}
.dvkc-popup { min-height: 566px; }
.dvkc-popup-expocol { min-height: 566px !important; text-align: center;  }
.dvkc-popup-expocol img { max-height: 750px !important; margin: 0px auto;  }
.dvkc-popup-img { width: 100%; height: 450px; margin: 0; padding: 0; }
.white-popup-block-content { padding: 50px 80px; }
.white-popup-block-content-locatie { padding: 110px 40px 0 40px; font-size: .8em; }
.white-popup-block-header {  padding: 20px 30px 10px 30px; background-color: var(--hkf-green); }
.white-popup-block h1 { font-weight: 400; padding: 0; }
.white-popup-block h2 { font-size: 1.7em; font-weight: 400; padding: 0; }
.white-popup-block table { border-collapse: collapse; }
.white-popup-block td { vertical-align: top;  }
.white-popup-block table.botpad td { padding-bottom: 16px; }

.podspec, .fotospec { display: none; }
.fotospec table { width: 100%; }
.white-popup-block-podspec {  padding: 0;  }
.podspec_img, .fotospec_img { width: 100%; height: auto; }
.white-popup-podspec-content { padding: 50px 80px; font-size: 1.6em; }
.white-popup-fotospec-content { padding: 20px 0; text-align: center; font-size: 1.6em; }
.white-popup-podspec-marge { padding: 20px 40px; font-size: .8em; }
.podspec_link { font-size: .8em; line-height: 3; }

#foto_staand td img { display: block; width: 45%; max-width: 445px; margin: 0px auto; }

.uk-cover-container { width: 100%; height: 450px; margin: 0; padding: 0; border: 0; }



#contact { background: var(--off-black) url('../img/contact_mike.png') bottom right no-repeat; color: #fff; padding-bottom: 15rem;  }



.dt-wrapper { background-color: transparent; }
table.dataTable { padding-top : 0; }
table.dataTable thead th { text-align: left; padding: 10px 0 10px 25px; font-size: 1.4rem; line-height: 1.4; }

.sortnaam { display: inline-block; width: 0px;  height: 0px; overflow: hidden !important; }



.hkflogo { display: block; width: 60%; margin: 0px auto 3rem auto; }

#mapdwnl { display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 3rem; padding: 35px 20px 15px 20px; width: 220px; height: 220px; border-radius: 50%; background-color: #7ab14c; font-size: 2.3rem; line-height: 1.2;  font-weight: 600; transform: rotate(8deg); }
#mapdwnl a { display: block;   }
#mapdwnl span { color: #fff; }
#mapdwnl span.noot { font-size: .5em;  line-height: 1; }

.leaflet-tooltip-pane { font-size: 1.1rem; }

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

em, .uk-light em { color: #666; }

h1 { font-family: "Lemonmilk", Arial, sans-serif; text-transform: uppercase; color: var(--hkf-creme); text-align: center; font-size: 3rem; }
#hkfkop h1 { text-shadow: 1px 1px 2px #000; }

h2 { font-family: "Lemonmilk", Arial, sans-serif; color: var(--hkf-green); font-size: 2rem; margin-top: 0; }

h3, h3.uk-card-title { font-family: "Lemonmilk", Arial, sans-serif; font-size: 2rem; margin-top: 0; }

h4.uk-card-title { font-family: "Lemonmilk", Arial, sans-serif; font-size: 1.5rem; margin-top: 0; }


.locwijzbanner { position: absolute; left: 0px; top: 0px; width: 100%; padding: 6px 0;  background: var(--hkf-green); font-family: "Lemonmilk", Arial, sans-serif; font-size: 1.2rem; color: var(--hkf-creme); text-align: center;  }

#contact h3 { font-family: 'Lemonmilk', Arial, sans-serif; font-size: 1.7rem; font-weight: 400; color: #fff;  margin: 0; padding: 35px 0 20px 0; text-transform: uppercase; }
#contact h5 { font-family: 'Lemonmilk', Arial, sans-serif; font-size: 1.4rem; font-weight: 400; color: #fff;  margin: 0; padding-bottom: 10px; text-transform: uppercase; }

p, table.dataTable td { font-size: 1.5rem; line-height: 1.4; }
p.lead { font-size: 1.6rem; line-height: 1.5; }
#slidercaption { height: 1.5rem; color: #666; font-size: 1.4rem; text-align: center; }
#backdrop-hkf-caption p { font-size: 1rem; line-height: 2; }

a, a:hover, .uk-card a { color: #333; text-decoration: none;  cursor: pointer;}
.lv { display: inline-block; font-size: .9em; color: #fff; margin-top: 24px; padding: 6px 12px; background: var(--hkf-green); }
a.lv { margin-top: 0px; padding: 12px; font-size: 1em;  }
a.lv:hover { color: #fff; }
a.textlink { border-bottom: 2px dotted #c00;  }
a.textlink:hover { border-top: 2px dotted #c00;  }

a.podspec_link { font-size: .8em; line-height: 3; }

a.webapplink { display: block; width: 23rem; margin: 8px auto; font-family: 'Lemonmilk', Arial, sans-serif; font-size: 1.2em; color: #fff; text-align: center; margin-top: 24px; padding: 12px 0; border-radius: 24px; background: var(--hkf-green); }

.hoofdsponsors { background-color: var(--hkf-green); width: 60%; margin: 3rem auto; padding: 60px; border-radius: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hoofdsponsors div { display: flex; aspect-ratio: 1 /1; align-items: center; justify-content: center; background: #fff; border-radius: 30px; overflow: hidden !important; }
.hoofdsponsors div img { max-width: 100%; }

.sponsors { background-color: var(--hkf-green); width: 100%; margin: 3rem auto; padding: 60px; border-radius: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sponsors a { display: flex; aspect-ratio: 1 /1; align-items: center; justify-content: center; background: #fff; border-radius: 30px; overflow: hidden !important; }
.sponsors a img { max-width: 100%; }

#contact a.textlink { color: #fff; border-bottom: 2px dotted #fff; font-size: 1.4rem;  }
#contact a.textlink:hover { border-top: 2px dotted #fff;  }
#contact a.xs { font-size: .9em;  }


.slick-slider, .slick-track, .slick-slide { height: 320px !important;  }
.slick-slide div, .slick-slide div div { height: 100% !important; }
.slick-slide div div { display: flex; }
.slick-slide img { max-width: 3000px; min-width: 100%; width: auto; height: 100% !important; aspect-ratio: 13/4; object-fit: cover; }
.slick-slide div div.ar img { float: right; margin-right: -200px; }



#backmenu, #topmenu, #nieuws, #artiesten, #programma, #kaart, #sponsors, #introphone { display: none; }




@media (min-width: 612px) { 
	#introcols { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; max-width: 1200px; margin: 0px auto; overflow: hidden; }
}



@media (max-width: 767px) { 
	#introphone { display: block; }
	#mapdwnl { display: none; }
	#header-hkf-inner { height: 370px; }
}


@media (min-width: 768px) { 
	#backmenu, #topmenu, #nieuws, #artiesten, #programma, #kaart, #sponsors { display: block; }
	h1 { font-size: 4vw;  }
	h2 { font-size: 3.7vw;  }
	.slick-slide div div.ar img { margin-right: 0; }
}

@media (max-width: 900px) { 
	#topmenu ul li, #stickymenu ul li { font-size: 1.3rem; }
	#mapdwnl { padding: 35px 20px 15px 20px; width: 190px; height: 190px; font-size: 2rem; line-height: 1.2;  }
}

@media (min-width: 1200px) { 
	h1 { font-size: 5rem;  }
	h2 { font-size: 3.8rem;  }
	.locwijzbanner { left: -60px; top: 50px; transform: rotate(-45deg); }
}
@media (min-width: 1300px) { 
	.locwijzbanner { left: -70px; }
}
@media (min-width: 1400px) { 
	.locwijzbanner { left: -80px; }
}