/************************************
URL: www.dvkweb.nl
AUTEUR: André Gelinck
DATUM: 1 nov 2025
VERSIE: 3.2
************************************/
@font-face {font-family: 'Raintion-Black'; src: url(Raintion-Black.woff);}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;}

html {scroll-behavior: smooth;}

:root {
  --bg-k1: #FFF;
  --bg-k2: #EDF5FA;
  --bg-k3: #2887C3;
  --bg-k4: #19498B;
  --bg-k5: #072745;
  --bg-k6: #333;
  --text-kl1: #FFF;
  --text-kl2: #CCE3F1;
  --text-kl3: #2887C3;
  --text-kl4: #0A4FA1;
  --text-kl5: #474748; /* 282829*/
  --link: #01CC8E;
  --menu-bg: #202020;
  --menu-T1: #F1F1F1;
  --menu-T2: #FDFEFF;
  --menu-HT: #FFFFDF;
  --menu-Hbg: #333;
  --header-bg: #FFFFFF;
  --header-T: #13315C;
  --header-top: #13315C;
  --header-bot: #26B3E4;
  --logo: url('DVK-logo2.svg'); 
  --ff-menu: Tahoma,"Segoe UI","Roboto";
  --menu-lijn: #484848;

}
.dn {display: none;}
.center {text-align: center;}
.container {max-width: 1200px;padding: 0 1.25rem;margin: 0 auto;width: 100%;height: 100%;}
li {list-style: none;}
a {font-family:'Tahoma';font-size: .9rem;text-decoration: none; color: var(--link);}
a:hover {background-color: var(--link); color: var(--text-kl1); border-radius: 5px;}
p {font-size: .9rem; text-align: justify;}
.btn{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;border-radius: 5px;
	color:var(--text-kl1);background-color:var(--link);text-align:center;cursor:pointer;white-space:nowrap;}
.btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}

/* NAVBAR */
nav {width: 100%;height: 4.8rem;background: var(--bg-k1);border-top: 5px solid  var(--bg-k1);border-bottom: .5px solid var(--grey);position: sticky;top: 0;z-index: 999;}
nav .container {display: flex;align-items: center;}
nav .logo {font-family:'Raintion-Black';font-size: 2.5rem;font-weight: 600;color: var(--text-kl4);margin:0 auto;}
nav .nav-menu {display: flex;grid-gap: 2rem;align-items: center;}
nav .dlogo {max-width: 7rem; margin: 13px 0;}
nav a img{width: 80%}
nav a:hover{text-decoration: none;background-color: transparent;}

.titel {font-size: 40px; font-family: "Raintion-Black", Tahoma, sans-serif; font-weight: 800; color: var(--text-kl4); min-width: 280px; z-index: 5;}

.top-container {
  --grid-maxWidth: 1340px;
  --grid-gutter: 2rem;
  max-width: var(--grid-maxWidth);
  margin: 0 auto;
  width: 98%;
  padding: 0 calc(var(--grid-gutter) / 2);
  height: 95px; 
}
.topbox {height: 100px;}

.topnav {
  position: fixed;
  overflow: hidden;
 background-color: var(--header-bg);
  border-top: 3px solid var(--header-top);
 /* border-bottom: 2px solid var(--header-bot); */
  top: 0;
  width: 100%;
box-shadow: 0px 1px 17px -14px rgba(16,12,27,0.59);
-webkit-box-shadow: 0px 1px 17px -14px rgba(16,12,27,0.59);
-moz-box-shadow: 0px 1px 17px -14px rgba(16,12,27,0.59);
}

.topnav-centered  {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  z-index: 30;
}

.topnav-right {
  float: right;
    height: 95%;
    width: 42px;
    z-index: 33;
}
.topnav-right img {
      display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  z-index: 35;
  webkit-box-shadow: 0 1px 3px  var(--header-bg);
  box-shadow: 0 1px 3px  var(--header-bg);  
}
.topnav-left {float: left; height: 100%;}
.topnav-left img {height: 100%; width: 100%; object-fit: contain;}
.div1 {
  float: left;
  background-image: var(--logo);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: left center;
  background-size: contain;
  height: 100%;
  width: 150px;
  z-index: 40;
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 15;
  top: 0;
  right: 0;
  background-color: var(--menu-bg);
  font-family: var(--ff-menu);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 70px;
}

.sidebar a {
  padding: 8px 8px 8px 20px;
  text-decoration: none;
  font-size: var(--fs-menu);
  color: var(--menu-T1);
  display: block;
  border-bottom: 1px solid var(--menu-lijn);
  transition: 0.3s;
  margin:0px 30px 0px 20px;
}

.sidebar a:hover {
  color: var(--menu-HT);
  background-color: var(--menu-Hbg);
}

.sidebar .closebtn {
  position: absolute;
  top: 20px;
  color: #fff;
  cursor: pointer;
  font-size: 28px;
  margin-left: 20px;
}
.sidebar a:hover {color: var(--menu-HT); background-color: var(--menu-Hbg);}

.closebtn {
  background-image: url('sluit.png');
  background-repeat: no-repeat;
  height: 30px;
  width: 30px;
  margin-left: 20px;
  margin-top: 15px;
}

.sidebar .closebtn {position: absolute; top: 10px; color: #fff; cursor: pointer; font-size: 28px; margin-left: 20px;}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.1); /* Black background with opacity */
  z-index: 10; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

/* HEADER */
header {padding: 4rem 0;background: var(--bg-k3);}
header .container {display: flex;grid-gap: 2rem;flex-direction: row-reverse;flex-wrap: wrap;align-items: center;}
header .left, header .right {flex: 1 1 calc(769px / 2);}
header .left img {display: block;width:80%;margin:0 auto;}
header .right h4 {font-size: 1.25rem;font-weight: 500;color: var(--text-kl1);margin-bottom: 1rem;}
header .right h1 {font-size: 3rem;font-weight: 600;color: var(--text-kl1);margin-bottom: 2.25rem;}
header .right .links {display: flex;grid-gap: 1rem;align-items: center;}
header .right .links .btn {padding: 1rem 2rem;font-weight: 500;color: var(--text-kl1);background: var(--link);border-radius: 5px;box-shadow: none;transition: all .3s ease;}
header .right .links .btn:hover {box-shadow: 0 4px 24px var(--green);}
header .right .links a:not(.btn):hover {color: var(--green);}
header p {font-size: .9rem; line-height: 1.4; color: var(--text-kl1)}

/* SERVICES */
#stand {padding: 4rem 0;background: var(--bg-k2);}
#stand .container {display: flex;grid-gap: 2rem;flex-wrap: wrap;}
#stand .right {flex:1 1 768px;display: grid;grid-template-columns: repeat(auto-fit, minmax(calc(768px / 2), 1fr));grid-gap: 1.25rem;align-items: flex-start;border-radius: 5px;}
#stand .right .box {background: var(--bg-k1);border-radius: 5px;
						display: flex;flex-direction: column;justify-content: flex-start;align-items: stretch;}
#stand .right .box h4 {font-size: 1.25rem;font-weight: 600;color: var(--text-kl4);margin-bottom: 1rem;}

/* SPELREGELS */
#spelregels {padding: 4rem 0;background: var(--bg-k2);}
#spelregels .container {display: flex;grid-gap: 2rem;flex-wrap: wrap;}
#spelregels .right {flex: 1 1 768px;display: grid;grid-template-columns: repeat(auto-fit, minmax(calc(768px / 2), 1fr));grid-gap: 1.25rem;}
#spelregels .right .box {background: var(--bg-k1);border-radius: 5px;
							display: flex;flex-direction: column;justify-content: flex-start;padding: 1.5rem;align-items: flex-start;color: var(--text-kl5)}
#spelregels .right .box h4 {font-size: 1.25rem;font-weight: 700;color: var(--text-kl4);margin-bottom: 1rem;}

/* ARTIKEL */
#artikel {padding: 4rem 0;background: var(--bg-k1);}
#artikel h1 {font-size: 2.25rem;max-width: 700px;font-weight: 600;margin-bottom: 2.25rem;color: var(--text-kl1);}
#artikel .wrapper {display: grid;grid-template-columns: repeat(auto-fit, minmax(calc(769px / 3), 1fr));grid-gap: 1.25rem;}
#artikel .box {padding: .6rem;border-radius: 5px;background: var(--bg-k3);color: var(--text-kl1);}
#artikel .box img {width: 100%;}
#artikel .box h4 {font-size: 1.25rem;font-weight: 600;margin: 1rem 0;text-align: center;}
#artikel .box:hover h4 {color: var(--link);}

/* INFO */
#info {padding: 4rem 0;background: var(--bg-k3);}
#info .container {display: flex;justify-content: center;align-items: center;min-height: 20vh;}
#info .wrapper {width: 60rem;padding: 1.5rem;border-radius: 10px;background: var(--bg-k2);}
#info .wrapper img {width: 55rem;}
#info h1 {max-width: 768px;margin: 0 auto;font-size: 2rem;font-weight: 600;color: var(--text-kl4);text-align: center;margin-bottom: 1.5rem;}

/* INFO */
#foto {padding: 4rem 0;background: var(--bg-k3);}
#foto .container {display: flex;justify-content: center;align-items: center;min-height: 20vh;}
#foto .wrapper {width: 80rem;padding: 1.5rem;border-radius: 10px;background: var(--bg-k2);}
#foto .wrapper img {width: 100%;}
#foto h1 {max-width: 768px;margin: 0 auto;font-size: 2rem;font-weight: 800;color: var(--text-kl4);text-align: center;margin-bottom: 1.5rem;}

/* jaar40 */
#jaar40 {padding: 2rem 0;}
#jaar40 {background-image: url("../inc/bgb.jpg"); /* The image used */
  background-color: var(--bg-k3); /* Used if the image is unavailable */
  max-height: 660px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  /* position: relative; */
}
#jaar40 .container {display: flex;justify-content: center;align-items: center;min-height: 20vh;}
#jaar40 .wrapper {width: 60rem;padding: 1.5rem;border-radius: 10px;background: var(--bg-k2);}
#jaar40 h1 {max-width: 768px;margin: 0 auto;font-size: 2.6rem;font-weight: 800;color: #faf304;text-align: center;margin-bottom: 1.5rem;}
#jaar40 .slideshow-container {
  max-width: 850px;
  /* position: relative; */
  margin: auto;
}
#jaar40 .dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

#jaar40 .active {
  background-color: #717171;
}

/* Fading animation */
#jaar40 .fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

#jaar40 @keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}



/* mail */
#mailb {padding: 4rem 0;background: var(--bg-k1);}
#mailb .container {display: flex;justify-content: center;align-items: center;}
#mailb .wrapper {width: 60rem;padding: 1.5rem;border-radius: 10px;background: var(--bg-k2);}
#mailb h1 {max-width: 768px;margin: 0 auto;font-size: 2rem;font-weight: 600;color: var(--text-kl4);text-align: center;margin-bottom: 1.5rem;}
#mailb p {color: var(--text-kl1);}

/* DATUMS */
#datums {padding: 2rem 0;background: var(--bg-k2);}
#datums h4 {font-size: 2rem;max-width: 100%;font-weight: 600;margin-bottom: 1.5rem;color: var(--text-kl4);}
#datums h2 {font-size: 1.25rem;max-width: 700px;font-weight: 600;margin-bottom: 2rem;color: var(--text-kl2);}
#datums .wrapper {display: grid;grid-template-columns: repeat(auto-fit, minmax(calc(760px / 3), 1fr));grid-gap: .75rem;}
#datums .box {padding: 1.1rem;border-radius: 5px;background: var(--bg-k1);color: var(--text-kl3);}

/* FOOTER */
footer {padding: 2rem 0;background: var(--bg-k4);}
footer h1 {font-size: 2.25rem;max-width: 700px;font-weight: 600;margin-bottom: 2.25rem;color: var(--text-kl1);}
footer .wrapper {display: grid;grid-template-columns: repeat(auto-fit, minmax(calc(760px / 3), 1fr));grid-gap: .75rem;}
footer .box {padding: 1.1rem;border-radius: 5px;background: var(--bg-k4);color: var(--text-kl1);}
footer .box h4 {font-size: 1rem;font-weight: 600;margin: 1rem 0;}
footer a {padding: 6px;text-decoration: none;display: block;text-align: center;width: 150px;margin: 0 auto;}
footer p {font-size: 0.9rem}
/* FOOTER2 */
.footer2 {postion: absolute; margin-bottom: 0;background-color: var(--bg-k3);font-size: 0.9rem;color: var(--text-kl1);}


/* MEDIA QUERY'S */

@media screen and (max-width: 1200px) {
	.container {max-width: 991px;}
  nav .logo {font-size: 1.5rem}  
}

@media screen and (max-width: 991px) {
	.container {max-width: 768px;}
#page {font-size: 1.3rem; margin-bottom: 500px;}
p {font-size: 0.95rem;}
.sidebar a {font-size: 1.1rem;}  
}

@media screen and (max-width: 768px) {
	.container {max-width: 576px;}
	nav .logo {font-size: 1.1rem}	
.titel {font-size: 28px;}
}

@media screen and (max-width: 576px) {
	nav .logo {font-size: 1.1rem}
	header .right h1 {font-size: 2.5rem;}
	header .right h4 {font-size: 1rem;}
	#contact h1 {font-size: 1.5rem;}
  p {font-size: 1.05rem;}
  .top-container {height: 55px;}
  .titel {font-size: 1.1rem;}
  .topnav-centered {left: 55%; width: 55%;}
  .topnav-left: {width: 60px;}
  .topnav-right img {width: 30px; height: 24px;}
  .topbox {height: 50px;}
  .sidebar a {font-size: 1.1rem;}
  footer .col-2 {width: 400px;}
}

@media screen and (max-width: 400px) {
	nav {height: 3rem}
	nav .dlogo {max-width: 4rem; margin: 3px 0;}
	nav .logo {font-size: 1.1rem}	
	#artikel .wrapper,
	#stand .right,
	#spelregels .right,
	#datums .right {grid-template-columns: 1fr;}
	p {font-size: 1rem;}
}