@charset "utf-8";
/* CSS Document */

/*import Google font - Poppins*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* root */
:root {
  /* colors */
  --clr-red: 359 89% 45%;
  --clr-dark: 230 35% 7%;
  --clr-light: 231 77% 90%;
  --clr-white: 0 0% 100%;
  
  /* font-families */
  --ff-serif: "Bellefair", serif;
  --ff-sans-cond: "Barlow Condensed", sans-serif;
  --ff-sans-normal: "Barlow", sans-serif;

  /* line-height */
  --lh-900: 1.2;
  --lh-800: 1.2;
  --lh-700: 1.1;
  --lh-600: 1.1;
  --lh-500: 1.1;
    
  /* font-sizes */
  /*--fs-900: clamp(1.5rem, 1.75 rem, 2em);*/
  --fs-900: 2.7rem;
  --fs-800: 2.2rem;
  --fs-700: 2.5rem;
  --fs-600: 1.3rem;
  --fs-500: 1rem;
  --fs-400: 1.0rem;
  --fs-300: 1rem;
  --fs-200: 0.875rem;

  /*font-weight*/
  --fw-900: 900;
  --fw-800: 800;
  --fw-700: 700;
  --fw-600: 600;
  --fw-500: 500;
  --fw-400: 400;
  --fw-300: 300;
  --fw-200: 200;
}

@media (min-width: 601px) {
}

@media (min-width: 768px) {
  :root {
    --fs-900: 2.3rem;
    --fs-800: 2.1rem;
    --fs-700: 2.5rem;
    --fs-600: 1.25rem;
    --fs-500: 1.2rem;
    --fs-400: 1.0rem;
  }
}

@media (min-width: 992px) {
	:root {
		--fs-900: 3.3rem;
    --fs-800: 2.9rem;
    --fs-700: 2.5rem;
    --fs-600: 1.5rem;
		--fs-400: 1.3rem;
  }
}

@media (min-width: 1300px) {
  :root {
		--fs-900: 4.5rem;
    --fs-800: 4.2rem;
    --fs-700: 2.5rem;
    --fs-600: 2.5rem;
		--fs-400: 1.7rem;
    }
}

/* ALGEMEEN */
.sr-only {
	position: absolute; 
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px; 
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap; /* added line */
	border: 0;
}

a {
	text-decoration: none;
	color: black;
}

body {
	background-image: url("../hip-square2.png")
}



.desktop {
		display: none;
	}

	.mobile-sponsors {
		display: block;
	}

h1 {
	display: block;
	font-family: cinder, sans-serif;
	font-style: normal;
	font-weight: 800;
	font-size: var(--fs-900);
	text-align: center;
	color: #cd1719;;
	line-height: var(--lh-900);
	letter-spacing: 1.6px;
}
	
h2 {
	font-family: cinder, sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: var(--fs-800);
	text-align: center;
	color: #cd1719;
	line-height: var(--lh-800);
	letter-spacing: 2px;
}

h3 {
	font-family: cinder, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: var(--fs-600);
	text-align: center;
	color: #ffed00;
	line-height: var(--lh-600);
	letter-spacing: 2px;
}

h5 {
	font-family: cinder, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: var(--fs-400);
	text-align: center;
	line-height: var(--lh-400);
	letter-spacing: 2px;
}

.flex {
  display: flex;
  gap: var(--gap, .3rem);
}

.grid {
  display: grid;
  gap: var(--gap, 1rem);
}

.logo {
	max-width: 100%;
}

.container {
	max-width: 1700px;
	margin: 0 auto;
}

/* HOOFDING */
nav {
	background-color: #ffed00;
	font-family: "Poppins", sans-serif;
	min-height: 2.6rem;
}

.navigatie {
	list-style: none;
	padding-right: 4%;
	flex-direction: row;
}

.navigatie ul {
	justify-content: flex-end;
}

.navigatie li {
	display: block;
	text-align: center;
}

.navigatie li a {
	text-decoration: none;
	font-size: var(--fs-500);
	font-weight: 800;
	color: black;
	line-height:  2.6rem;
	padding: 0.5rem 1.5rem;
}

.navigatie li:hover,
.navigatie li:focus{
	background-color: #cd1719;
}

.navigatie li a:hover,
.navigatie li a:focus{
	color: white;
}

.hoofding-midden {
	background-color: rgba(255, 255, 255, 0.7);
	padding-bottom: 5px;
}

.hoofding-inhoud {
  align-items: center;
  justify-content: center;
	font-family: cinder, sans-serif;
	padding-bottom: 5px;
} 

.hoofding-inhoud-vlm {
	width: 100%;
	display: flex;
  color: #ffed00;
  text-align: center;
	padding: .3rem 0;
	background-color: black;
}
.hoofding-inhoud-vlm-jms {
	display: flex;
	width: 50%;
	justify-content: center;
	align-items: center;
}

.hoofding-inhoud-vlm-vlm {
	display: flex;
	width: 50%;
	justify-content: center;
	align-items: center;
}

.hoofding-inhoud-vlm-jms-logo {
	width:10%;
	margin-right: 20px;
}
.hoofding-inhoud-vlm-jms-logo img {
	display: block;
	width: 100%;
	padding: 6px;
	background-color: white;
	border-radius: 50%;
	margin: 5px;
}

.hoofding-inhoud-vlm-vlm-logo {
	width:10%;
	margin-left: 20px;
}

.hoofding-inhoud-vlm-vlm-logo img {
	display: block;
	width: 100%;
	padding: 6px;
	background-color: white;
	border-radius: 50%;
	margin: 5px;
}

.hoofding-inhoud-bmb {
	display: flex;
	width: 100%;
  	text-align: center;
	padding: .3rem 0;
	justify-content: center;
	align-items: center;
}

.hoofding-inhoud-bmb-logoclub {
	width: 13%;
}

.hoofding-inhoud-bmb h3 {
	color: #cd1719;
}

.hoofding-inhoud-bmb-logoclub img {
	display: block;
	margin: 5px 10px 5px 10px;
	width: 100%;
}

.hoofding-inhoud-bmb-info {
	display: grid;
	justify-content: center;
	width: 68%;
}

.hoofding-inhoud-bmb-logobond {
	width: 7%;
	justify-content: center;
}

.hoofding-inhoud-bmb-logobond img {
	display: block;
	width: 100%;
	margin: 10px 10px 0px 10px;
}

.logobond-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  gap: 8px 14px;              /* verticaal | horizontaal */
  align-items: center;
  justify-items: center;
  margin: 0 auto;
}

/* link vak */
.logobond-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* logo zelf */
.logobond-grid img {
  display: block;
  max-height: 80px;           /* hoogte aanpassen naar wens */
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

/* lichte hover (optioneel) */
.logobond-grid img:hover {
  transform: scale(1.06);
}

.hoofding-inhoud-slider {
	max-width: 1700px;
 	width: 100%;
 	position: relative;
	margin: 10px auto;
}

.hoofding-sponsors {
	width: 100%;
	background-color: white;
	border-top: 3px solid #cd1719;
	border-bottom: 3px solid #cd1719;
}

/* JS sponsors */
.sponsors-container {
	max-width: 1700px;
	margin: 0 auto;
}

.sponsors-flex {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: var(--gap, .3rem);
}
.sponsors-box {
	min-width: 120px;
	margin: 4px 4px 0px 0px;
}

/* MAIN ARTIKEL */
.container-main {
	max-width: 1700px;
	width: 98%;
	margin: 0.9rem auto;
}

.artikel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(22.5rem, 4fr));
	grid-auto-flow: row;
	grid-column-gap: .9rem;
	grid-row-gap: .9rem;
}

.foto {
	max-width: 100%;
	overflow: none;
	border: 1px solid black;
}

.artikel-box {
	display: grid;
	grid-column: span 1;
	background-color: rgba(255, 255, 255, 0.7);
	padding: .7rem;
	border-radius: 2px;
	border: black solid 1px;
}

.artikel-box-vet,
.twee-kolommen-tekst-tekst-titel {
	text-align: center;
	font-size: 1.5rem;
	line-height: 1.7rem;
	margin-bottom: .8rem;
}

.artikel-box h4 {
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 2.3rem;
	text-align: center;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.artikel-box p {
	text-align: center;
	font-family: "Poppins", sans-serif;
	font-size: 1.1rem;
	line-height: 1.5rem;
	min-height: 6rem;
}

/* MAIN BESTUUR */

.bestuur-container {
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, 40%);
	justify-content: center;
	grid-column-gap: .9rem;
	grid-row-gap: .9rem;
	padding-left: .9rem;
	padding-right: .9rem;
}

.bestuur-box {
	display: flex;
	flex-wrap: wrap;
	grid-column: span 1;
	background-color: rgba(255, 255, 255, 0.7);
	padding: .7rem;
	border-radius: 2px;
	border: black solid 1px;
}

.bestuur-box-foto {
	flex: 1;
	border-radius: 50%;
	margin-left: .9rem;
}

.bestuur-box-foto img {
	border-radius: 50%;
	border: 1px solid black;
}

.bestuur-box-tekst {
	flex: 3;
	text-align: center;
	font-family: "Poppins", sans-serif;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.bestuur-box-tekst-naam {
	font-size: 1.7rem;
	font-weight: 700;
	width: 100%;
	margin-bottom: 0.9rem;
}

.bestuur-box-tekst-naam-kruisje {
	font-size: 1.3rem;
	font-weight: 400;
}

.bestuur-box-tekst-titel {
	font-size: 1.1rem;
	width: 100%;
	margin-top: 0.9rem;
}

.bestuur-foto {
	display: block;
	max-width: 1500px;
	width: 100%;
	margin: 0.9rem auto 0.9rem auto;
	border: 1px solid black;
}

/* MAIN ACCREDITATIE */
.twee-kolommen {
	display: grid;
	grid-template-columns: repeat(auto-fit, 50%);
	background-color: rgba(255, 255, 255, 0.7);
	border: black solid 1px;
}

.twee-kolommen-tekst {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	grid-column: span 1;
	font-family: "Poppins", sans-serif;
}

.twee-kolommen-tekst-titel {
	font-size: 1.7rem;
	font-weight: 700;
	width: 100%;
	margin-bottom: 1.8rem;
	text-align: center;
	font-family: 'Times New Roman', Times, serif;
}

.twee-kolommen-tekst-tekst { 
	font-size: 1.1rem;
	line-height: 1.5rem;
	width: 100%;
	text-align: center;
}

.twee-kolommen-tekst-tekst-extrap {
	margin-top: 0.8rem;
}

.twee-kolommen-tekst-tekst-prijs {
	font-size: 1.1rem;
	line-height: 1.5rem;
	margin-bottom: 1.5rem;
}

.twee-kolommen-foto {
	grid-column: span 1;
	padding: 1rem;
		display: flex;
	flex-direction: column;
	justify-content: center;
}

.twee-kolommen-foto img {
	display: block;
	width: 100%;
	border: black solid 1px;
}

.sponsoring img {
	border: none;
}

.alles-1-jaar-tweede-regel-categorie,
.alles-1-jaar-tweede-regel-plaats-1,
.alles-1-jaar-tweede-regel-plaats-2,
.alles-1-jaar-tweede-regel-plaats-3,
.alles-1-jaar-derde-regel-categorie,
.alles-1-jaar-derde-regel-plaats-1,
.alles-1-jaar-derde-regel-plaats-2,
.alles-1-jaar-derde-regel-plaats-3,
.alles-1-jaar-vierde-regel-categorie,
.alles-1-jaar-vierde-regel-plaats-1,
.alles-1-jaar-vierde-regel-plaats-2,
.alles-1-jaar-vierde-regel-plaats-3,
.alles-1-jaar-vijfde-regel-categorie,
.alles-1-jaar-vijfde-regel-plaats-1,
.alles-1-jaar-vijfde-regel-plaats-2,
.alles-1-jaar-vijde-regel-plaats-3 {
	display: inline-block;
	width: 20%;
	text-align: center;
}

/* FOOTER */
.footer {
	background-color: black;
}

.footer-inhoud {
	font-family: "Poppins", sans-serif;
	font-size: 1.1rem;
	line-height: 22px;
	font-weight: 100;
	text-align: center;
	color: #e0e0e0;
	padding-top: 1rem;
	padding-bottom: 1rem;
	grid-auto-flow: column;
}

.footer-inhoud-adres {
	margin-right: 10vw;
}

.footer-inhoud-socials {
	display: grid;
	place-items: center;
	cursor: pointer;
	margin-left: 10vw;
}

@media (max-width: 992px) {
	.hoofding-inhoud-vlm-jms-logo img {
		padding: 5px;
	}
}

@media (max-width: 1250px) {
	.bestuur-container {
		grid-template-columns: repeat(auto-fit, 30%);
	}

  .bestuur-box {
		display: flex;
		flex-wrap: wrap;
		padding: .7rem;
		border: black solid 1px;
	}

	.bestuur-box-foto {
		min-width: 100%;
		display: flex;
		grid-auto-flow: row;
		justify-content: center;
		margin-left: .1rem;
	}

	.bestuur-box-tekst {
		width: 100%;
		display: flex;
		grid-auto-flow: row;
		justify-content: center;
	}

	.bestuur-box-tekst-naam {
		font-size: 1.2rem;
		font-weight: 700;
		width: 100%;
		margin: 10px 0;
	}

	.bestuur-box-tekst-naam-kruisje {
		font-size: 0.9rem;
		font-weight: 400;
	}	

	.bestuur-box-tekst-titel {
		margin-top: 0.3rem;
	}
}

@media (max-width: 768px) {
	.logo-mobile {
		flex-grow: row;
		margin: .1rem 0 .1rem .1rem;
	}

	.mobile {
		display: grid;
		max-height: 2.2rem;
		padding: 0 .3rem;
	}

	.logo-bond {
		max-width: 100%;
		margin: .2rem 0;
	}

  .mobile-nav-toggle {
		cursor: pointer;
		display: block;
		position: absolute;
		z-index: 2000;
		right: 1rem;
		top: .35rem;
		background: hsl( var(--clr-dark)/.1);
		border: 0;
		background-image: url("../../opmaak/icon-hamburger.png");
		background-repeat: no-repeat;
		background-size: 1.8rem;
		background-position: center;
		width: 2.2rem;
		aspect-ratio: 1;
	}

	.mobile-nav-toggle[aria-expanded="true"] {
		background-image: url("../../opmaak/icon-close.png");
	}
	
	.navigatie {
		justify-content: flex-start;
		background-color: #ffed00;
		backdrop-filter: blur(2rem);
		--underline-gap: 0rem;
		position: fixed;
		z-index: 1000;
		inset: 0 0 0 25%;
		list-style: none;
		padding: min(20rem, 15vh) 2rem;
		margin: 0;
		flex-direction: column;
		transform: translateX(100%);
		transition: transform ease-in 300ms;
	}

	.navigatie[data-visible="true"] {
		transform: translateX(0);
	}

	.hoofding-midden {
		border-bottom: 3px solid #cd1719;
	}

	.hoofding-inhoud-vlm-jms-logo,
	.hoofding-inhoud-vlm-vlm-logo,
	.hoofding-inhoud-bmb-logoclub,
	.hoofding-inhoud-bmb-logobond
	 {
		display: none;
	}

	.hoofding-inhoud-bmb-info {
		width: 100%;
	}

	.sponsors-flex {
		justify-content: space-around;
		padding: 5px 5px;
	}
	.sponsors-box {
		min-width: fit-content;
		margin: 4px 4px 0px 0px;
	}

	.artikel {
		display: grid;
		grid-template-columns: repeat(auto-fit, 100%);
	}
	.artikel-box {
		padding: .5rem 0.5rem;
	}

	.artikel-box h4,
	.twee-kolommen-tekst-titel {
		font-size: 1.4rem;
		font-weight: 700;
		line-height: 1.9rem;
		margin: 0.5rem 0 0.5rem 0;
	}

	.artikel-box p,
	.twee-kolommen-tekst-tekst {
		font-size: 0.9rem;
		line-height: 1.1rem;
		min-height: auto;
	}

	.twee-kolommen-tekst-tekst-titel {
		font-size: 1.25rem;
		line-height: 1.6rem;
	}

	/* MAIN BESTUUR */
	.bestuur-container {
		grid-template-columns: repeat(auto-fit, 100%);
		grid-auto-flow: row;
		justify-content: center;
		grid-row-gap: 0.5rem;
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	.bestuur-box {
		display: flex;
		flex-wrap: wrap;
		padding: .7rem;
		border: black solid 1px;
	}

	.bestuur-box-foto {
		min-width: 100%;
		display: flex;
		grid-auto-flow: row;
		justify-content: center;
		margin-left: .1rem;
	}

	.bestuur-box-tekst {
		width: 100%;
		display: flex;
		grid-auto-flow: row;
		justify-content: center;
	}

	.bestuur-box-tekst-titel {
		font-size: 0.9rem;
		margin: 0.2rem 0;
	}

	/* MAIN ACCREDITATIE */

	.twee-kolommen {
		display: grid;
		grid-template-columns: repeat(auto-fit, 100%);
		background-color: rgba(255, 255, 255, 0.7);
		border: black solid 1px;
	}
	
	.twee-kolommen-tekst {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: .5rem .5rem;
	}
	
	.twee-kolommen-foto {
		padding: 0.5rem;
	}
	
	.twee-kolommen-foto img {
		display: block;
		width: 100%;
		border: black solid 1px;
	}

	.sponsoring img {
		border: none;
	}
}

@media (max-width: 601px) {
}

@media (min-width: 769px) {
	.logo-mobile {
		display: none;
	} 	

	.desktop {
		display: block;
	}

	.mobile-sponsors {
		display: none;
	}

}

/*@media (min-width:1200px) {

}*/