
/**************//***/
/**HOME PAGE**/
/*******************/

.home-el-1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 4.8rem;
	align-items: center;
	justify-content: center;
}
.home-img-box-desktop{
	display: flex;
	align-items: center;
	justify-content: center;
}
 .home-img{
	width: 100%;
	border-radius: 9px;
 }
 .home-img-box-tablet{
	display: none;
	/* display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
	column-gap: 0.4rem;
	row-gap: 0.4rem; */
 }
 .home-img-box-mobile{
	display: none;
	/* display: grid;
	grid-template-columns:repeat(2, 1fr);
	column-gap: 0.8rem; */
 }
 .action-list{
	font-size: 1.6rem;
	margin: 1rem;
	list-style-position: outside;
	line-height: 1.4;
 }
.home-media{
	display:grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	align-items: center;
	background-color: #f5fafe;
	border-radius: 9px;
	column-gap: 2.4rem;
} 
.media-1{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.home-media h3{
	font-size: 5rem;
	font-weight: 500;
	color:#0061AF ;
}
.home-media p{
	font-size: 2rem;
	color:#0061AF;
	margin-bottom: 3.2rem;
}

.fb-el{
	display: flex;
	justify-content: center;
	align-items: center;
	}



	/*********************/
	/**De Voorbereiding***/
	/**********************/
	.voorbereiding-el-1{
		display: grid;
		grid-template-columns: 1.5fr 1fr;
		column-gap: 4.8rem;
		align-items: start;
		justify-content: center;
		
	}
	.trainingsschema{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	table{
		width: 100rem;
		font-size:1.8rem;
		margin-bottom: 2.4rem;
		border-collapse: collapse;
	}
	th, td{
		/* border: solid 1px #d8d6d6; */
		padding: 1.2rem 1.2rem;
		text-align: left;
	}
	thead th{
		background-color: #0061AF;
		color: #fff;
	}
		tfoot th {
			background-color: #0061AF;
			color: #fff;
		}
	tbody tr:nth-child(odd){
		background-color: #f8f9fa;
	}
tbody tr:nth-child(even) {
	background-color: #e9ecef;
}


/*************************/
/**Het Toernooi
/**********************/
.toernooi-el-1{
	display: grid;
	grid-template-columns:1fr 1fr 1fr;
	column-gap: 4.8rem;
	row-gap: 4.8rem;
	align-items: start;
	justify-content: center;
}
.toernooi-el-2{
	grid-column:1/3;
	align-self: start;
}
.toernooi-el-3{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.toernooi-el-4{
	grid-column: 1/3;
}

.el-gallery{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	column-gap: 1rem;
	row-gap: 1rem;
	align-items: center;
	justify-content: center;
}
.toernooi-media{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.4rem;
}

.toernooi-img1{
	width: 90%;
	border-radius: 9px;
	margin-bottom: 1rem;
	;
}
.toernooi-video{
	height: 35rem;
	border-radius: 9px;
	}


.section-wedstrijdschema{
	grid-template-columns:repeat(2,1fr);
	align-items: start;
	justify-content: center;
	column-gap: 1rem;
	row-gap: 4.8rem;
}
.wedstrijdschema {
	display: flex;
	align-items: center;
	justify-content: center;
}
.table-wedstrijd {
	width: 100%;
	font-size: 1.6rem;
	margin-bottom: 2.4rem;
	border-collapse: collapse;
}
thead .kolom-poule{
	width: 50%;
}
.marker{
	background-color:#FFFF27
}

	/***********************/
	/**HET TEAM**/
	/***********************/

	
.card {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 2.4rem;
	row-gap: 2.4rem;
}
.card-box{
	display: flex;
	flex-direction: column;
	gap:1.2rem;
	box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 10px 2px;
	padding-bottom: 1rem;
}
.card-text-box {
  font-size:1.2rem;
}
.card-text-box{
	padding-left: 1rem;
}
.card-img{
	width: 100%;
	border-radius: 9px;
	}
	.list-card{
		display: flex;
		flex-direction: column;;
		gap: 1.4rem; 
		list-style: none;
		font-size: 1.2rem;
		line-height: 1.2;
	}
	.team-intro{
		max-width: 80rem;
	}

	/************************/
	/***BLOG*/
	/*************************/
		.section-blog-el{
			max-width: 90rem;
			margin: 0 auto;
		}

		.blog-top{
			margin-bottom: 3.2rem;
		}

		.blog-el-1 {
			border-top: solid 1px #0061AF;
			padding-top: 1rem;
			/* border-bottom: solid 1px #0061AF; */
				padding-bottom: 1rem;
			margin-bottom: 9.6rem;
			box-shadow: rgba(99, 99, 99, 0.075) 0px 2px 10px 2px;
			padding-left: 0.6rem;
			border-radius: 9px;
		}

		/**********************/
		/****SPONSOREN***/
		/**********************/
		.sponsoren-text{
			max-width: 80rem;
			margin: 0 auto;
		}
		.sponsoren-el-1{
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 2.4rem;
		}
		.bedrijven{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			gap:2.4rem;
		}
		.sponsoren-img-1{
			height: 5rem;
			width: 100%;
			box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 10px 2px;
		}
		.sponsoren-img-2{
			height: 5rem;
			width: 100%;
			box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 10px 2px;
		}
		.sponsoren-img-3{
			height: 8rem;
			width: 100%;
			box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 10px 2px;
		}
		.sponsoren-img-4{
			width: 100%;
			box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 10px 2px;
		}
		.sp-el-2{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			max-width: 80rem;
		}
		.sp-el-3 li{
			font-size: 1.4rem;
			margin: 1.2rem;
			line-height: 1.4rem;
			}
		

		/******************/
		/***Contact***/
		/******************/
.section-contact1 {
	max-width: 90rem;
	margin: 0 auto;
	background-color: rgba(230, 239, 247, 0.095);
}
.contact-heading{
	margin: 0 auto 3.2rem auto;
	max-width: 90rem;

}
.contact{
	box-shadow: rgb(196, 219, 242) 0px 2px 10px 1px;
	border-radius: 9px;
	background: url("../images/logo/WFG1.png") no-repeat;
	background-size:100%;
	margin-bottom: 3.2rem;
}
.contact-box{
	padding: 6.4rem;
	background: rgba(255, 255, 255, 0.96);
	border-radius: 9px;
	
	}
.heading-form{
	font-size: 2.4rem;
	margin-bottom: 3.2rem;
	text-align: center;
}
.contact-form{
		row-gap: 2.4rem;
	
}
.sub-form{
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2.4rem;
}
.contact-form label{
	display: block;
	color: #0061AF;
	font-family: inherit;
	font-size: 1.6rem;
	font-weight: 500;
	margin-bottom: 1.2rem;
	margin-top: 2.4rem;
}
.contact-form input{
	width: 100%;
	padding: 1.2rem;
	font-size: 1.8rem;
	font-family: inherit;
	background: transparent;
	border:solid 1px #aaa;
	border-radius: 9px;
	color: #001d34;
}
.contact-form input::placeholder{
		color:#cbe1f4;
}
.contact-form textarea{
width: 100%;
padding: 1.2rem;
font-size: 1.8rem;
background: transparent;
	border: solid 1px #aaa;
		border-radius: 9px;
	color: #001d34;
	}
.contact-form textarea::placeholder {
	color: #cbe1f4;
}
.btn-form{
	margin: 2.4rem 0;
	display: inline-block;
	text-decoration: none;
	font-size: 2rem;
	font-weight: 600;
	padding: 1.6rem 3.2rem;
	border: none;
	border-radius: 50px;
	width: 20rem;
	justify-self: center;
	background-color: #0061AF;
	color: #e6eff7;
	cursor: pointer;
	font-family: inherit;
}
.btn-form:hover{
		box-shadow: rgb(0, 97, 175,0.75) 0px 2px 10px 1px;
}

.contact-link:link,
	.contact-link:visited{
		text-decoration: none;
		font-size: 1.6rem;
		color: #767676;
		transition: all 0.3s;
	}
	.contact-link:hover,
	.contact-link:active{
		color:#00579e
	}

	

/*
---TYPOGRAPHY SYSTEM---

---Font sizes (px)--
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

--- WHITESPACE - Spacing system (px) 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 

- Font weights
Default:400, Medium:500, Semi-bold:600, Bold:700

- Line heights
Default: 1, Small: 1.05, Medium: 1.2, large: 1.8
Paragraph default: 1.6


---COLORS---
- Primary: #0061AF,rgb(0, 97, 175)
- secundary: #FFFF27,rgb(255, 255, 39)
- Tints:#e6eff7, #00579e

- Greys
#333, #555, #888
#767676 (lightest grey allowed on #fff)

---SHADOWS----
0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

---ORDER-RADIUS----
Default: 9px Medium: 11px
*/