/*
 Theme Name:   Glabbast
 Description:  brainstorm en concept basisthema
 Author:       brainstorm en concept
 Version:      1.0.0
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
	--yellow: #E9A52F;
	--darkyellow: #D69629;
	--lightgray: #f7f7f7;
}


body, html {
	width:100%;

	margin:0px auto;
	scroll-behavior: smooth;
	overflow-x:hidden;
	-webkit-scroll-behavior: smooth;
	font-family:poppins;
}
body {
	overflow:hidden;
}


p {
	color:black;
	line-height:24px;
}
a {
	color:var(--yellow);
}
a:hover {
	color:black;
}

h1 {
	font-weight:700;

	text-transform:uppercase;
	color:var(--yellow);
}

h2 {
	color:var(--yellow);
	text-transform:uppercase;
	font-size:35px;
	font-weight:700;
}

h3 {
	font-size:24px;
	font-weight:700;
	text-transform:uppercase;
}


.button {
	padding:10px 30px;
	background-color:var(--yellow);
	color:white !important;
	text-transform:uppercase;
	font-weight:700;
	display:inline-block;
	border-radius:30px;
	cursor:pointer;
	transition:.3s;

}
	.button:hover {
		background-color:var(--darkyellow);
		transform:scale(1.05);
		text-decoration:none;
	}


img.framed {
	aspect-ratio:1 / .9;
	border-radius:50px;
	object-fit:cover;
	object-position:center;
	transform:rotate(-10deg);
}

img.framed.frame-right {
	transform:rotate(7deg);
}



img.half-img {
	width:50vw;
	min-height:100%;
	aspect-ratio:1 / .6;
	object-fit:contain;
	object-position:center left;
}

@media screen and (max-width:991px) {
	img.half-img {
		width:100%;
		min-height:0;
		aspect-ratio:1 / .56;
	}
	img.framed {
		aspect-ratio:1/ .56;
		height:auto;
		width:100%;
		transform:rotate(0deg) !important;
		margin-top:10px;
	}
}
.v-align {
	position: relative;
    top: 50%;
    transform: translateY(-50%);
}

section {
	overflow:visible;
	position:relative;
}

section + section {
	margin-top:120px;
}

@media screen and (min-width:1199px) {
	section.bg-block {
		margin-top:150px;
	}
	section.bg-block:after {
		width:15vw;
		height:100px;
		position:absolute;
		top:-120px;
		left:-10vw;
		transform:rotate(-7deg);
		border-radius:20px;
		background-color:var(--yellow);
		content:" ";
		z-index:-1;
	}
}
@media screen and (min-width:1499px) {

	section.bg-block:after {
		width:20vw;
		top:-50px;
	}
}

nav.desktop {
	width:100%;
	height:100px;
	background-color: white;
	color: black;
	position:fixed;
	overflow:visible;
	top:0;
	left:0;
	transition:.3s;
	z-index:10000;
	box-shadow:0px 0px 50px -10px rgba(0,0,0,.3);
}
nav.desktop.scrolling {
	height:80px;
}
nav.desktop .logo {
	width:200px;
	background-image:url('img/logo.png');
	background-size:contain;
	background-position:center left;
	background-repeat:no-repeat;
}

nav.desktop .hoofdnavigatie a {
	color:black;
	text-decoration: none;
	transition: .2s ease;
}
nav.desktop .hoofdnavigatie a:hover {
	color: var(--yellow);

}

nav.desktop .container {
	height:100%;
}
nav.desktop .contents {
	display:flex;
	height:calc(100% - 30px);
	margin:15px 0;
	gap:20px;
	justify-content: space-between;
}

nav.desktop  .hoofdnavigatie {
	list-style-type:none;
	padding-left:0;
	display:flex;
	height:100%;
	align-items:center;
	justify-content: flex-end;
	width:100%;
	gap:60px;

}

nav.desktop .burger	{
	height:100%;
	aspect-ratio:1 / 1;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:20px;
	cursor:pointer;
	display:none;
}


nav.mobile {
	position:fixed;
	width:100vw;
	height:100vh;
	overflow-y:auto;
	background:var(--yellow);
	color:white;
	opacity: 0;
	transition: .5s ease;
	pointer-events: none;
	right: -2000px;
	z-index:10001;
	padding-top:50px;
}

nav.mobile .close-container {
		position: fixed;
		width: 100%;
		z-index: 1;
		top: 10px;
		left: 0;
}

	nav.mobile .close {
		width: 60px;
		height:60px;
		line-height:40px;
		display: flex;
    justify-content: center;
    align-items: center;
		color:white;
		opacity:1;
		text-shadow:none;
	}
	nav.mobile .contents {
		height:calc(100% - 20px);
		margin:10px 0;
		position: relative;
		transform: translateX(50%);
		transition: .4s .3s;
		opacity: 0;
	}
	nav.mobile.opened .contents {
		transform: translateX(0);
		opacity: 1;
	}
	nav.mobile ul {
		list-style-type:none;
		padding-left:0;
	}
		nav.mobile ul li {
			height:60px;
			line-height:60px;
			padding:0px 20px;
		}
			nav.mobile ul li a {
				color:white;
				font-size:26px;
				text-decoration:none !important;
			}
			nav.mobile ul li a:hover {
				color:black;
			}


@media screen and (max-width:1399px) {
	nav.desktop  .hoofdnavigatie {
		display:none;
	}
	nav.desktop .burger	{
		display:flex;
	}
	nav.mobile.opened {
		display:block;
		opacity: 1;
		pointer-events: auto;
		right: 0;
	}
}

header {
	width:100%;
	aspect-ratio:1 / 0.56;
	max-height:600px;
	background-color:rgba(0,0,0,.15);
	display:flex;
	align-items:center;
	background-size:cover;
	background-position:center;
	position:relative;
	overflow:visible;
	min-height:400px;
}
	header.sub {
		*max-height:400px;
		padding-top:100px;
	}
	header.home {
		*min-height:400px;
	}
	header:before {
		content:" ";
		width:30vw;
		aspect-ratio:1 / .9;
		background-image:url('img/block.png');
		background-size:contain;
		background-position:center;
		background-repeat:no-repeat;
		position:absolute;
		right:-5vw;
		bottom:-7vw;
		max-width:500px;
	}

main {
	padding:100px 0px;
}

header .label {

	background-image:url('img/label.png');
	background-size:100% auto;
	background-position:center bottom;
	background-repeat:no-repeat;
	padding:220px 50px 70px 50px;
	position:absolute;
	top:100px;
	left:50%;
	transform:translateX(-50%);
	transform-origin:center top;
	font-weight:700;
	text-transform:uppercase;
	text-align:center;
	color:var(--yellow);
}
	header .label:after {
		content:" ";
		position:absolute;
		height:100%;
		width:100%;
		top:0%;
		left:0%;
		background-image:inherit;
		background-size:inherit;
		background-position:inherit;
		background-repeat:no-repeat;
		z-index:-1;
		filter:drop-shadow(5px 10px 20px rgba(0,0,0,.2));
	}
	header .logo {
		content:" ";
		position:absolute;
		height:100%;
		width:100%;
		top:-30%;
		left:80%;
		background-image:inherit;
		background-size:inherit;
		background-position:inherit;
		background-repeat:no-repeat;
		z-index:-2;
		transform:rotate(-10deg);
	}
		header .logo img {
			width:66%;
			height:auto;
			position:absolute;
			top:50%;
			left:18%;
			transform:rotate(10deg);
		}
@media screen and (max-width:991px) {
	header .label {
		transform: translateX(-50%) scale(.6);
	}
		header .label .logo {
			display:none;
		}
}
	header .label .dag {
		font-size:52px;
		line-height:52px;
	}
	header .label .datum {
		color:black;
		font-size:33px;
		line-height:40px;
	}
	header .label .tijd {
		font-size:28px;
	}
	header .label .locatie, header .label .adres {
		text-align:left;
		font-size:17px;
		font-weight:600;
	}


.cta {
	background-color:black;
	color:white;
	padding:50px 0;
	position:relative;
	overflow:visible;
	margin-top:100px;
}
.cta:after {
	content:" ";
	width:30vw;
	background-color:var(--yellow);
	border-radius:50px;
	aspect-ratio: 1 / .5;
	position:absolute;
	transform:rotate(-33deg);
	top:-3vw;
	right:0vw;
	z-index:-1;
}
	.cta .button {
		width:100%;
		max-width:400px;
		margin-top:10px;
	}

footer {
	background-color:var(--yellow);
	color:white;
	padding:50px 0;
}

footer .link {
	color:white !important;
}
	footer .link:hover {
		text-decoration:underline!important; ;
	}


footer .footer-logo img {
	object-fit: contain;
	width: 200px;
}

footer .social-icon {
	width:50px;
	height:50px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	background-color:white;
	color:var(--yellow) !important;
	border-radius:25px;
	margin-top:5px;
	font-size:30px;
	text-decoration:none;
	transition:.3s;
	padding:0;
}
	footer .social-icon:hover {
		background-color:black;

	}

 	.subfooter {
		background-color:black;

		padding:10px;
		font-size:12px;
		color:white;
	}
		.subfooter a {
			color:white;
		}
		.subfooter a:hover {
			color:white;
		}

.logo{
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.info-section {
	display: flex;
	align-items: center;
}
.info-section img{
	object-fit: contain;
}


.spelregels-cont {
	width:100%;
	height:auto;
	position:relative;
	overflow:visible;
	margin:20px 0px;
}
	.spelregels-cont .sr {
		width:100%;
		height:auto;
		border-bottom:1px solid #ddd;
		transition:.3s;
	}
	.spelregels-cont .sr.opened {
		background-color:var(--lightgray);
	}
		.spelregels-cont .sr .title {
			width:100%;
			height:auto;
			position:relative;
			overflow:visible;
			display:flex;
			align-items:center;
			gap:20px;
			padding:15px 60px 15px 0px;
			cursor:pointer;
			transition:.3s;

		}
		.spelregels-cont .sr .title:hover {
			background-color:var(--lightgray);;
		}

			.spelregels-cont .sr .title i {
				font-size:30px;
				color:black;
			}

			.spelregels-cont .sr .title h2 {
				line-height:26px;
				font-size:20px;
				margin:0;
				color:black;
				text-transform:none;
				font-weight:500;

			}

			.spelregels-cont .sr .title:after {
				content:"+";
				width:30px;
				height:30px;
				background-color:var(--yellow);
				color:white;
				font-weight:600;
				text-align:center;
				line-height:30px;
				position:absolute;
				top:18px;
				right:20px;
				border-radius:15px;
				transition:.3s;
			}
			.spelregels-cont .sr.opened .title:after {
				content:"-";
				background-color:black;
			}


		.spelregels-cont .sr .content {
			height:0;
			opacity:0;
			pointer-events:none;
			padding:0px 5px 0px 50px;
		}
		.spelregels-cont .sr.opened .content {
			height:auto;
			opacity:1;
			pointer-events:auto;
			transition:.5s;
			padding:15px 5px 15px 50px;
		}
			.spelregels-cont .sr .content ul,
			.spelregels-cont .sr .content ol {
				padding-left:18px;
			}

			.spelregels-cont .sr table {
				width:100%;
			}
				.spelregels-cont .sr table td:first-of-type {
					width:200px;
				}

.extra {
	background-color:var(--lightgray);
	padding:50px;
	margin-top:100px;
}
	.extra h3 {
		font-weight:500;
		text-transform:none;
		margin-bottom:20px;
	}
	.extra ul,
	.extra ol {
		padding-left:18px;
	}

	@media screen and (max-width:767px) {
		.spelregels-cont .sr .title i {
			font-size:20px;
		}

		.spelregels-cont .sr .title h2 {
			line-height:16px;
			font-size:18px;
		}

		.spelregels-cont .sr .title:after {
			top:10px;
			right:10px;

		}
		.spelregels-cont .sr .content {
			padding:0px 5px 0px 40px;
		}
		.spelregels-cont .sr.opened .content {
			padding:10px 5px 10px 40px;
		}

		.extra {
			padding:25px;
			margin-top:50px;
		}

		main {
			padding:50px 0;
		}
	}

	.nf-element {
		border:0 !important;
		border-radius:10px !important;
	}

	.nf-element[type="submit"] {
		cursor:pointer;
		padding:5px 30px !important;
	}