@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/static/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans/static/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
	font-family: "DM Sans";
	src: url('fonts/DM_Sans/static/DMSans-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "DM Sans";
	src: url('fonts/DM_Sans/static/DMSans-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "PlusJakarta Sans";
	src: url('fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "PlusJakarta Sans";
	src: url('fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

body {
    font-family: 'DM Sans';
	margin:0;
	font-size: clamp(10px, 1vw + 0.5vh, 15px);
	background-color: rgb(220,220,220);
	overflow-x: hidden;
	padding-top: 7vh;
}


.top_banner { 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100vw;
	height: 7vh; 
	background-color: #46C246; 
	text-align: left; 
	font-size: clamp(10px,2vw,18px); 
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 2vw;
	z-index: 1000;
}

.toplogo {
	margin-left: -2vw;
}

.topnav {
	display: flex;
	gap: 2vw;
}

.topnav a {
	color: white;
	text-decoration: none;
	font-weight: bold;

	transition: opacity 0.2s;
}

.topnav a:hover {
	opacity: 0.7;
}


#background_head {
	position: absolute;
	object-fit: cover;
	z-index:-1;
	width:100%;
	height:100%;
}

#hero {
    position: relative;
    height: 30vh;
    width: 100%;
    overflow: hidden;
	padding:0;
}

.hero_text {
	position: absolute;
	color:white;
	transform:translate(-50%, -50%);
	left:50%;
	filter: brightness(0.5);
	animation: darken 1s ease forwards;
}

.minsize {
	min-height:86vh;
}

#hero_title {
	top: 20%;
	font-size: clamp(20px, 2.5vw, 40px);
}
#hero_desc {
	top:40%;
	font-size: clamp(15px, 1.75vw, 30px);
}
#leesmeer {
	top:80%;
	width:clamp(100px,20vw,140px);
	height:15%;
}

#bottom_banner {
	background-color: #46C246;
	height: 7vh;
	width: 100vw;
	align-items:center;
	display:flex;
	justify-content: space-between;
}

#zon {
	object-fit:contain;
	height: 23vh;
	margin:auto;
	display:block;
}

#bottom_banner p {
	margin-left: 2.5vw;
	color: white;
	text-decoration: none;
	font-weight: bold;
}

.link {
	margin-right: 2.5vw;
	text-decoration: underline;
	text-align: right;
	color: white;
	font-weight: bold;
}

.modw.b2 {
	width:clamp(165px,20vw,200px);
}

.modw.b3 {
	width:clamp(90px,20vw,150px);
}

.modw.b4 {
	width:50vw;
	margin-left: 25vw;
	max-width: none;
	height: 6.5vh;
}

.modw {
	width:clamp(100px,20vw,140px);
	height: 4.2vh;
	min-width: 129px;
	max-width: 180px;
	width: 25vw;
	margin-left: 2.5vw;
}

.list li.green::marker {
    content: "🟢 ";
}

.list li.green {
	list-style: none;
}

button {
	background-color: #46C246;
	border: 2px solid #F0F00E;
	border-radius: 8px;
	transition-duration: 0.4s;
	color: white;
}

button:hover {
  background-color: #2C732C;
}

h2 {
	color: #46C246;
	padding-left: 2.5vw;
	margin-bottom: 0;
	font-family: "PlusJakarta Sans";
}

img {
	filter: brightness(0.5);
	animation: darken 1s ease forwards;
}

.infotext {
	padding-left: 2.5vw;
	width: 60vw;
}

.infotext.list {
	padding-left: 5vw;
}

.infotextright {
	padding-right: 2.5vw;
}

.infoimg {
    width: min(40vw, 500px);
    object-fit: contain;
}

.infocontainer {
    display: flex;
    align-items: stretch;
    height: 60vh;
	padding-bottom: 2rem;
}

.infocontainer.small {
	height: 40vh;
}

.infocontainer.xtrasmall {
	height:30vh;
}

.infotextbox {
    display: flex;
    flex-direction: column;
    max-width: 60vw;
}

.outimg {
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	  width: 25vw;
}

h2.tr {
	padding-left: 0;
	padding-right: 2.5vw;
}

button.right {
	margin-left: 0;
	margin-right: 2.5vw;
}

@keyframes darken {
	to {filter: brightness(1);}
}

@media (max-width: 800px) {
    .infocontainer {
        flex-direction: column;
        height: auto;
		align-items: center;
    }

    .infotextbox {
        max-width: 100%;
    }

    .infotext {
        width: auto;
        padding-right: 2.5vw;
    }

    .infoimg {
        height: auto;
        margin: 0 auto;
    }

	.infotextright {
		padding-right: 0;
		padding-left: 2.5vw;
	}

	.outimg {
		width:60vw;
	}

	h2.tr {
		padding-right: 0;
		padding-left: 2.5vw;
	}

	button.right {
		margin-left: 2.5vw;
		margin-right: 0;
	}
}