@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@font-face {
  font-family: 'Ad Lib';
  src:  url('/theme/fonts/AdLib.woff2') format('woff2');
}
h1,h2,h3,h4 { font-family: 'Ad Lib'; font-weight: normal; font-style: normal; }

html { scroll-behaviour:smooth; }

body { font-family: "Josefin Sans", sans-serif; font-optical-sizing: auto; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #050505; color: #eee;  }

#menu { position: fixed; width: 100%; height: 150px; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%); z-index: 200;transition: .3s;  }
#menu.scroll { top: -50px; transition: .3s; background: rgba(0,0,0,0.8); height: 115px; }
#menu .brand { position: absolute; top: 10px; left: 40px; transition: .3s;}
#menu.scroll .brand { top: 60px; transition: .3s; }
#menu .brand:hover { animation: pulse; animation-duration:.4s; }
#menu .menubut { display: none; position: absolute; right: 30px; top: 30px; font-size: 50px; }

#menu address i { color: #f07e00; }
#menu a { color: #eee; text-decoration: none; }
#menu address { position: absolute; right: 30px; top: 20px; }
#menu ul.menu { position: absolute; right: 20px; top: 70px; list-style: none;}
#menu ul.menu li { display: inline-block; padding: 0 10px; }
#menu ul.menu li a { font-size: 18px; font-weight: 800; padding-bottom: 8px; transition: .3s; border-bottom: 1px solid rgba(0,0,0,0); text-transform: uppercase; }
#menu ul.menu li a:hover { color: #f07e00; border-bottom: 1px solid #f07e00; padding-bottom: 0; }

#header { position: relative; }
#header .container { display: block; position: absolute; top: 0; left: 0; width: 100%; max-width:100%; height: 100%; max-height: 100%; z-index:20;   }
#header img.header_img { width: 100%; heigt: 80vh; object-fit: cover; position: relative; z-index: 1;}
#header h1 { font-size: 60px; color: #fff; text-align: center; width: 900px; text-shadow: 5px 5px 5px #000; text-transform: uppercase; }
#header h1 span { color: #f07e00; }
#header h1:hover { animation: bounce; animation-duration: .2s; }
#header .divider { display: block; width:100%; max-width: 100%; object-fit: fit; position: absolute; bottom: 0px; z-index: 6; height: 100px; }

#featured { background: #000 url("/theme/img/bg1.jpg") center top no-repeat; position: relative; z-index: 30; padding-bottom: 150px;}
#featured .box { margin-top: 0px; display: block; text-align: center; max-width: 100%; }
#featured .box .item1 { display: inline-block; width: 33%; max-width: 300px; height: 400px; position: relative; z-index: 40px; top: -150px; transition: .4s;}
#featured .box .item2 { display: inline-block; width: 33%; max-width: 300px; height: 400px; position: relative; z-index: 40px; top: -200px; transition: .4s;}
#featured .box .item3 { display: inline-block; width: 33%; max-width: 300px; height: 400px; position: relative; z-index: 40px; top: -150px; transition: .4s;}
#featured .box .item1:hover { top: -170px; transition: .4s;}
#featured .box .item2:hover { top: -220px; transition: .4s;}
#featured .box .item3:hover { top: -170px; transition: .4s;}
#featured .foto { position: relative; overflow: hidden; margin: 0px; padding: 0px; color: #fff; text-decoration: none; background: #000; margin: 0; padding: 0px; border: 0;}
#featured .foto img { width: 100%; height: 400px; object-fit: cover; position: absolute; left:0; top:0; z-index: 10; transition: .4s; } 
#featured .foto:hover img { transform: scale(1.4); transition: .5s;  }
#featured .foto .title { position: absolute; bottom: 0px; height: 150px; width: 100%; z-index: 15; background: linear-gradient(180deg, rgba(240,126,0,0) 0%, rgba(240,126,0,0.6) 60%, rgba(240,126,0,0.8) 100%); text-align:center; }
#featured .foto .title h3 { color: #fff; text-transform: uppercase;  } 

#featured .intro { display: inline-block; width: 96%; max-width: 800px; text-align:center;}
#featured .intro h2 { text-transform: uppercase; font-size: 50px; line-height: 48px; color: #fff; margin-top: 10px; }
#featured .intro h2 span { display: block; color: #f07e00; }
#featured .intro p { font-size: 20px; line-height: 33px; }
#featured .intro p a { color: #f07e00;  }

#featured .agenda { margin-top: 150px; position: relative; }
#featured .agenda .container { max-width: 900px;}
#featured .agenda h2 { text-transform: uppercase; font-size: 50px; line-height: 48px; color: #fff; padding-bottom: 40px; }
#featured .agenda-item { display: block; background: #191919; border-radius: 10px; color: #fff; text-decoration: none; padding-bottom: 60px; }
#featured .agenda-item img { width: 100%; height: 250px; object-fit: cover; border-radius: 10px 10px 0 0; }
#featured .agenda-item .title { padding: 20px; }
#featured .agenda-item .title h4 { font-family: "Josefin Sans", sans-serif; font-weight: 900; }
#featured .agenda-item .orange { position: absolute; bottom:0; background: #f07e00; color: #fff; padding: 10px 20px; border-radius: 0 0 10px 10px; width: 100%; font-family: 'Ad Lib'; text-align: left; }

.owl-nav { margin-top: 20px; font-size: 40px; }
.owl-nav button {  font-size: 60px; padding: 20px;  }

#photo { position: relative; display: block; height: 550px; width: 100%; z-index: 20; overflow: hidden; }
#photo img.fotobig { position: absolute; top:0; left: 0; width: 100%; height: 600px; object-fit: cover; }
#photo .top { width:100%; height: 75px; position: absolute; top: 0; left: 0; background: url("/theme/img/foto-divider1.png") bottom center no-repeat; z-index: 30; }
#photo .bottom { width:100%; height: 75px; position: absolute; bottom: 0; left: 0; background: url("/theme/img/foto-divider2.png") top center no-repeat; z-index: 30; }

#about { padding: 170px 0 40px 0; background: url("/theme/img/bg2.jpg") top center no-repeat; position: relative; }
#about h3 { text-transform: uppercase; font-size: 50px; line-height: 48px; color: #fff; margin-top: 10px; }
#about h3 span { color: #f07e00; }
#about p { font-size: 20px; line-height: 33px; }
#about p a { color: #f07e00;  }
#about .bottom { position: absolute; bottom: 40px; height: 150px; width: 100%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.8) 100%); }
#about .holder { position: relative; height: 100%; width: 100%; }
#about .holder .img1 { border: 8px solid #b5aea5; position: absolute; left: 50px; top: -25px; transform: rotate(-5deg); width: 300px; }
#about .holder .img2 { border: 8px solid #b5aea5; position: absolute; left: 150px; top: 220px; transform: rotate(5deg); width: 300px; }
#about .holder .coffee { position: absolute; top: 250px; left: 0px; }

#themafeesten { padding: 140px 0 100px 0; background: url("/theme/img/bg3.png") top center no-repeat; background-size: cover; text-align: center; }
#themafeesten .container { width: 960px; }
#themafeesten h2 { text-transform: uppercase; font-size: 50px; line-height: 48px; color: #fff; margin-top: 10px; width: 100%; text-align: center; }
#themafeesten h2 span { color: #f07e00; }
#themafeesten a.but { background: #f07e00; color: #fff; padding: 15px 25px; border-radius: 8px; font-weight: 800; font-size: 20px; text-decoration: none; transition: .2s; margin-top: 40px;   }
#themafeesten a.but:hover { background:  #333; color: #fff; transition: .4s;  }
#themafeesten img { width: 100%; height: 300px; object-fit: cover; transition: .4s; }
#themafeesten .item:hover img { transform: scale(1.1); transition: .5s;  }
#themafeesten .item { position: relative; margin: 15px 0 0 0; overflow: hidden; text-align: center; }
#themafeesten .item h3 { display: block; position: absolute; top: 30%; width:100%; text-align: center; color: #fff; z-index: 100; text-transform: uppercase; font-size: 34px;  line-height: 40px;
  text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333; padding: 0 25px; } 
#themafeesten .kolom { width: 320px; }
#themafeesten .kolom .item1 { margin-top: 100px; }
#themafeesten .kolom .item5 { margin-top: 50px; }
#themafeesten p { padding: 40px; }

#footer { padding: 0 0 70px 0; color: #eee; }
#footer a { color: #eee; text-decoration: none; }
#footer a:hover { color: #f07e00; text-decoration: underline; }
#footer a.tel { color: #f07e00; }
#footer ul.footermenu { list-style: none; padding: 20px 0 10px 0; margin: 0; }
#footer ul.footermenu li { display: inline-block; padding: 0 10px; border-right: 1px solid #ccc; }
#footer ul.footermenu li:last-child { border-right:none; }
#footer address { margin: 20px 0 0 0; padding:0; font-size: 20px; }
#footer p.address { margin: 0; padding: 0 5px; font-size: 20px; }
#footer hr { margin: 25px 0; }
#footer img:hover { animation: rubberBand; animation-duration:1s; }
#footer i { font-size: 35px; padding: 10px 5px; }

#headersmall { max-height: 50vh; position: relative; }
#headersmall img { max-height: 50vh; width: 100%; object-fit: cover; }
#headersmall img.divider { display: block; width:100%; max-width: 100%; object-fit: fit; position: absolute; bottom:0px; z-index: 6; height: 75px; }

#page { padding: 60px 0; font-size: 20px; line-height: 33px; background: #000 url("/theme/img/bg1.jpg") center top no-repeat; }
#page.margin { padding-top: 200px; }
#page h1 { font-size: 50px; text-transform: uppercase; color: #fff; }
#page h1 span { color: #f07e00; }
#page a { color: #f07e00;  }
#page h2, #page h3, #page h4 { color: #f07e00; } 
#page a.btn { background: #f07e00; padding: 10px 20px; color: #fff; border-radius: 8px; text-decoration: none; font-size: 18px; font-weight: 800; }
#page a.obtn { padding: 14px 20px; color: #fff; border: 1px solid #fff; border-radius: 8px; text-decoration: none; font-size: 18px; font-weight: 800;}

#agenda { padding: 200px 0; font-size: 20px; line-height: 33px; background: #000 url("/theme/img/bg1.jpg") center top no-repeat;  }
#agenda h1 { font-size: 40px; text-transform: uppercase; }
#agenda h1.center {  width: 100%; text-align: center; }
#agenda a { color: #f07e00;  }
#agenda h2 { color: #f07e00; } 
#agenda h1, #agenda h3, #agenda h4 { color: #fff; } 
#agenda a.btn { background: #f07e00; padding: 10px 20px; color: #fff; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 800; }
#agenda a.obtn { padding: 14px 20px; color: #fff; border: 1px solid #fff; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 800;}
#agenda .agendaitem { display: inline-block; background: #333; border-radius: 15px; color: #fff; text-decoration: none; width: 100%; min-height: 620px; text-decoration: none; font-size: 18px; line-height: 30px; margin: 10px 0; }
#agenda .agendaitem a { color: #fff; text-decoration: none; }
#agenda .agendaitem .title { padding: 25px; }
#agenda .agendaitem h2 { font-size: 25px; }
#agenda .agendaitem img { width: 100%; height: 300px; object-fit: cover; border-radius: 15px 15px 0 0; }

#themafeesten_page { padding: 180px 0; font-size: 20px; line-height: 33px; background: #000 url("/theme/img/bg1.jpg") center top no-repeat; }
#themafeesten_page.margin { padding-top: 200px; }
#themafeesten_page a { color: #f07e00;  }
#themafeesten_page h1.center { width: 100%; text-align: center; }
#themafeesten_page h1 { font-size: 40px; text-transform: uppercase; color: #fff; }
#themafeesten_page h1 span { color: #f07e00; }
#themafeesten_page a.btn { background: #f07e00; padding: 10px 20px; color: #fff; border-radius: 8px; text-decoration: none; font-size: 18px; font-weight: 800; }
#themafeesten_page a.obtn { padding: 14px 20px; color: #fff; border: 1px solid #fff; border-radius: 8px; text-decoration: none; font-size: 18px; font-weight: 800;}
#themafeesten_page .item img { width: 100%; height: 300px; object-fit: cover; transition: .4s; }
#themafeesten_page .item:hover img { transform: scale(1.1); transition: .5s; }
#themafeesten_page .item { position: relative; margin: 15px 0 0 0; overflow: hidden; }
#themafeesten_page .item h3 { display: block; position: absolute; bottom: 5%; width:100%; text-align: center; color: #fff; z-index: 100; text-transform: uppercase; font-size: 35px;  line-height: 40px;
  text-shadow: -2px -2px 0 #f07e00, 2px -2px 0 #f07e00, -2px 2px 0 #f07e00, 2px 2px 0 #f07e00; padding: 0 25px; } 

@media (max-width: 1000px) {

#menu ul.menu { display: none; }
#menu .brand { position: absolute; top: 60px; left: 40px; transition: .3s;}
#menu.scroll .brand { top: 60px; transition: .3s; max-width: 200px; }

#header { height: 800px; width: 100%; }
#header img.header_img { width: 100%; height: 900px; object-fit: cover; position: relative; z-index: 1; }
#header h1 { font-size: 40px; color: #fff; text-align: center; width: 100%; max-width: 900px; text-shadow: 5px 5px 5px #000; text-transform: uppercase; padding: 0 50px; }
#featured .foto img {  height: 300px;  } 
#featured .box .item1 { height: 300px; }
#featured .box .item2 { height: 300px; }
#featured .box .item3 { height: 300px; }
#photo { height: 450px; width: 100%; }
#photo .top { background-size: cover; }
#photo .bottom { background-size: cover; }
#themafeesten img { width: 225px; height: 225px; object-fit: cover; transition: .4s; }
#themafeesten .kolom { width: 225px; }
#themafeesten p { padding: 60px 10px 0 10px; }
#themafeesten a.but { background: #f07e00; color: #fff; padding: 15px 25px; border-radius: 8px; font-weight: 800; font-size: 16px; text-decoration: none; transition: .2s; margin-top: 40px;   }
#about .holder { position: relative; width: 100%; display: block; height: 500px;  }
#about .holder .img1 { left: 70px; top:30px;  }
#about .holder .img2 { left: 350px; top: 170px; }
#about .holder .coffee {  top: 250px; left: 200px; }
}

	/* The Overlay */
	.overlay { height: 0; width: 100%; position: fixed; z-index: 9998; left: 0; top: 0; background-color: rgb(0,0,0); background: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.4s; }
	.overlay-content { position: relative; top: 10%; width: 100%; text-align: center; margin-top: 30px; padding-bottom: 40px; }
	.overlay a { text-decoration: none; color: #fff; } 
	.overlay ul { list-style: none; margin: 0; padding: 0;}
	.overlay ul li a { color: #fff; font-family: 'Ad Lib'; font-weight: normal; font-style: normal; padding: 15px 8px 8px 8px; text-decoration: none; font-size: 30px; line-height: 25px;  display: block; transition: 0.3s; font-weight: 600; }
    .overlay ul ul.submenu li a { font-family: 'Poppins', sans-serif; font-size: 17px; line-height: 25px; color: #fff; padding: 8px; }	
    .overlay a:hover, .overlay a:focus { color: #f07e00; }
	.overlay .closebtn { position: absolute; top: 20px; right: 25px; font-size: 60px; z-index: 9999; color: #fff; }
	.overlay .gegevens { font-family: "Josefin Sans", sans-serif; margin-top: 40px; border-top: 1px dashed #ccc; padding: 25px; }
	.overlay .gegevens a.button { background: #f07e00; padding: 10px 20px; color: #fff; border-radius: 8px; text-decoration: none; font-size: 30px; font-weight: 800; }
	.overlay .gegevens i { font-size: 30px; padding: 0 5px;}
	.overlay img.logo { position: absolute; opacity:.2; bottom: -50px; left: -50px;  width: 400px; rotate: -8deg; }


@media (max-width: 992px) {
	#menu .menubut { display: block; }
	#menu address, #menu ul.menu { display: none; }
	#menu .brand { top: 10px; left: 20px; width: 200px; }
	#menu.scroll .brand { width: 150px; }
	#menu.scroll .menubut { top: 60px; transition: .3s; }
}
@media (max-width: 768px) {	

	#featured { padding: 0; }
	#featured .box .item1 { position: relative; width: 100%; height: 175px; top: inherit; margin: -150px 0 5px 0; }
	#featured .box .item2 { position: relative; width: 100%; height: 175px; top: inherit; margin: 5px 0; }
	#featured .box .item3 { position: relative; width: 100%; height: 175px; top: inherit; margin: 5px 0; }
	#featured .foto .title { position: absolute; bottom: 0px; height: auto; width: 100%; z-index: 15;  }
	#featured .foto { position: relative; overflow: hidden; margin: 0px; padding: 0px; color: #fff; text-decoration: none; background: #000; margin: 0; padding: 0px; border: 0; height: 150px; }
	#featured .foto img { width: 100%; height: 175px; object-fit: cover; position: absolute; left:0; top:0; z-index: 10; transition: .4s; } 
	#featured .intro { padding-top: 100px; }
	.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot { font-size: 40px; padding: 0 15px; font: none; }
	#about { padding: 70px 0px 40px 0px; }
	#about .container { padding: 0 20px; }
	#about .holder .img1 { border: 8px solid #b5aea5; position: absolute; left: 5px; top: 5px; transform: rotate(-5deg); width: 250px; }
	#about .holder .img2 { border: 8px solid #b5aea5; position: absolute; left: 140px; top: 190px; transform: rotate(5deg); width: 200px; }
	#about .holder .coffee { position: absolute; top: 280px; left: 30px; }
	#about h3 {font-size: 39px; line-height: 38px; }	
	#intro h2 {font-size: 39px; line-height: 38px; }
	
	#themafeesten .container { width: 100%;}
	#themafeesten .kolom { width: 100%; }
	#themafeesten .kolom .item1 { margin-top: 0px; }
	#themafeesten .kolom .item5 { margin-top: 0px; }
	#themafeesten p { padding: 40px; }	
	#themafeesten h2 {font-size: 39px; line-height: 38px; padding-bottom: 30px; }	
	#themafeesten img { width: 100%; height: 200px; }
	#themafeesten a.but { display: block; }
	#themafeesten .item { margin: 10px; }
	
	#page h1 { font-size: 40px; text-transform: uppercase; color: #fff; }

	#headersmall { max-height: 400px; height: 400px; }
	#headersmall img { max-height: 400px; height: 400px; width: 100%; object-fit: cover; }
}