/*
- Font sizes (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Spacing system (px) 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

/*rem and em do NOT depend on html font-size in media queries. instead, 1rem = 1em = 16px*/

/******************
/**below 1200px*/
/*****************/
@media (max-width: 75em){
	html{
		font-size:56.25% ;
	}
	
}

/*************/
/**Below 1040px*/
/****************/
@media (max-width: 65em){

	/*voorbereiding*/

	.modal-content-el-1 {
		margin: 10rem auto;
		max-width: 60rem;
		}
	.close-el-1 {
		top: 10rem;
		right: 20rem;
		}

}	
/**************/
/**BELOW 960PX*/
/****************/
@media (max-width: 60em){
	
	.container {
		padding: 1rem 2.4rem
		}
	.main {
		margin: 6.4rem auto 0 auto;
		max-width: 80rem;

		}
	.section{
		margin-bottom: 8rem;
		}
	.home-el-1 {
		grid-template-columns:1fr;
		row-gap: 1.2rem;
		}
	.home-img-box-desktop{
		display:none ;
		}
	.home-img-box-tablet {
		display:grid;
		grid-template-columns: repeat(4, 1fr);
		align-items: center;
		column-gap: 0.4rem;
		}
	.home-img-box-desktop {
		display: none;
		}
	
	/*voorbereiding*/
	.voorbereiding-el-1{
		display: grid;
		grid-template-columns:1fr;
		column-gap: 2.4rem;
		align-items: center;
		justify-content: center;
		}
	.gallery-el-1{
		grid-template-columns: repeat(6,1fr);
	}

	/*het toernooi*/

	.toernooi-el-1{
		grid-template-columns: 1fr;
		row-gap: 2rem;
		}
		.toernooi-el-3{
		display: none;	
		}
	.el-gallery{
			grid-template-columns:repeat(4,1fr) ;
		}
	.table-wedstrijd {
		font-size: 1.4rem;
		}

	/**HET TEAM*/
	.card { 
		grid-template-columns: repeat(3, 1fr);
		column-gap: 1rem;
		row-gap: 4.8rem;
		} 
	.list-card {
		font-size: 1.4rem;
		}

		/*sponsoren*/
		.sponsoren-el-1{
			grid-template-columns: 1fr;
			row-gap: 2.4rem;
		}
		.sponsoren-el-1 .bedrijven{
			order:1;
		}

		/***Contact***/
	.h2-contact {
		padding: 0 2rem;
			}

		.card {
		grid-template-columns: repeat(3, 1fr);
		column-gap: 1rem;
		}
	.slide img {
	filter: none;
		}

		/*mobile navigation*/
	.btn-mobile-nav {
		display: block;
		display: flex;
		align-items: center;
		align-content: CENTER;
		z-index: 9999;
		}
	.text-menu-btn {
		font-size: 1.6rem;
		font-weight: 600;
		color: #0061af
		}
	.main-nav {
		background: linear-gradient(#e6eff7, #fff);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		/* height: 100vh; */
		padding: 2.0rem 0;
		transform: translateX(100%);
				
		display: flex;
		align-items: start;
		justify-content: center;
		transition: all 0.5s ease-in;
		/*hide nav*/
		/*1. Hide it visually*/
		opacity: 0;
		/*2. Make it unaccessible to mouse and keyboard*/
		pointer-events: none;
		/*3. Hide it from screen readers*/
		visibility: hidden;
		}
	.nav-open .main-nav {
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
		transform: translateX(0);
		}
	.nav-open .icon-mobile-nav[name="close-outline"] {
		display: block;
		}
	.nav-open .icon-mobile-nav[name="menu-outline"]{
		display: none;
		}
	.main-nav-list {
		flex-direction: column;
		gap: 3.2rem
		}


	.slide img {
		filter: none;
		}

		}

/*************/
/**Below 800px*/
/**************/
@media (max-width: 50em){
	/*home*/
	.home-media {
		grid-template-columns: 1fr;
		}

	/*Voorbereiding*/
	.close-el-1 {
		top: 10rem;
		right: 10rem;
		}
	table{
		font-size: 1.4rem;
		}
		/*toernooi*/
	.toernooi-el-3{
		grid-template-columns: 1fr;
		row-gap: 2.4rem;
	}
	.section-wedstrijdschema{
		grid-template-columns: 1fr;
		margin: 0 2.4rem;
		}
	.table-wedstrijd {
		font-size: 1.6rem;
		}

	/*team*/
	.card {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 1rem;
		}
	.close{
		right: 20rem;
		}

	}

/**************/
/**BELOW 600PX*/
/****************/
@media (max-width: 37.5em){
	.container{
		padding: 1rem 0.8rem
	 }
	 .main{
		margin-top: 3.2rem;
	 }
	 p{
		line-height: 1.5;
	 }
	 h2{
		font-size: 2.0rem;
		margin-bottom: 1.6rem;
	 }
	 .section{
		margin-bottom: 6.4rem;
	 }

	 /*home*/
	.action-list {
		padding: 0 1rem;
	 }	
	
	@-webkit-keyframes scroll {
		0% {
					-webkit-transform: translateX(0);
					transform: translateX(0);
				}
			100% {
				-webkit-transform: translateX(calc(-10.0rem * 8));
				transform: translateX(calc(-10.0rem * 8));
			}
		}
		
	@keyframes scroll {
			0% {
				-webkit-transform: translateX(0);
				transform: translateX(0);
			}
			100% {
				-webkit-transform: translateX(calc(-10.0rem * 8));
				transform: translateX(calc(-10.0rem * 8));
			}
		}

	.section-slider {
		margin-bottom: 1rem;
		}
	.slider .slide-track {
		-webkit-animation: scroll 20s linear infinite;
			animation: scroll 20s linear infinite;
			display: flex;
			width: calc(10.0rem * 16);
		}
	.slider .slide {
			height: 4rem;
			width: 10.0rem;
		}
		
	.slide img {
		filter: none;
		height: 4rem;
		width: 10rem;
		}
	.slider{
		height: 5rem;
		}
	.grid--footer {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 2.4rem;
		column-gap: 2rem;
		padding-top: 2.4rem;
		padding: 0 2.4rem;
		}

	/*De voorbereiding*/
	table{
		font-size: 1.1rem;
		}
	.gallery-el-1{
		grid-template-columns: repeat(4,1fr);
		}
	.close-el-1 {
		right: 5rem;
		}

		/*gallery voorbereiding-1*/
	
	.section-wedstrijdschema {
		margin: 0 0.4rem;
		row-gap: 3.2rem;
		}



				/**HET TEAM**/
	.card {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 1rem;
		row-gap: 4.8rem;
		}
	.list-card {
		font-size: 1.4rem;
		}
	.table-wedstrijd{
		font-size: 1.4rem;
		}
	.h2-team {
		padding: 0 1rem
		}
	.p-team {
		padding: 0 1rem;
		}
	.p-contact {
		font-size: 1.4rem;
		}
	.close{
			right: 15rem;
		}
	.gallery{
			grid-template-columns: repeat(5, 1fr);
		}
	}

		/***************/
		/**BELOW 512PX**/
		/***************/
	@media (max-width: 32em) {
	.home-media h3 {
		font-size: 4rem;
		font-weight: 500;
		color: #0061AF;
		}
		
	.home-media p {
		font-size: 1.6rem;
		color: #0061AF;
		margin-bottom: 3.2rem;
		}
	.card {
		grid-template-columns: 1fr;
		column-gap: 1rem;
		margin-bottom:4.8rem;
		row-gap: 4.8rem;
		margin: 0 1rem 6.4rem 1rem;
		}
	.section-card{
		border-bottom: none;
		}
	.list-card{
		font-size: 1.4rem;
		}

	/*toernooi*/

	.toernooi-media{
		grid-template-columns: 1fr;
		}	
		.toernooi-video{
	height: 25rem;
	}



		/*sponsoren*/
	.sponsoren-img-1{
			height: 6rem;
			width: 100%;
			box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 10px 2px;
		}	
	.sponsoren-img-2{
			height: 6rem;
			width: 100%;
			box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 10px 2px;
		}	
		sp-el-3{
			font-size: 1.4rem;
		}

	/********contact****/
	.contact{
		background-position: center;
		}
	.sub-form{
		grid-template-columns:1fr ;
		width: 100%;	
		}
	.contact-box{
		padding: 1rem;
		}
	.contact-form{
		column-gap: 1.2rem;
		}
	.sub-form{
		row-gap: 1.2rem;
		}
	.heading-form{
		margin-bottom: 1.6rem;
		}
	.contact-form label{
		margin-top: 1.2rem;
		}
	.btn-form{
		margin:1.4 0;
		}
	.p-contact {
		font-size: 1.2rem;
		}
	.close{
		right: 10rem;
		}
	}

/*
- Font sizes (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Spacing system (px) 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/