/*
 Theme Name:   Glabbast
 Description:  brainstorm en concept basisthema
 Author:       brainstorm en concept
 Version:      1.0.0
*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
	--yellow:#FCEB24;
	--gray: #151C2F;
	--green:#229F89;
}


body, html {
	width:100%;
	overflow:auto;
	margin:0px auto;
	font-family: open sans;
	color:var(--gray);
}

body.admin-bar nav {
	*top:32px;
}

h1 {
	font-weight:700;
	font-size:100px;
}

nav.desktop {
	width:100%;

	height:100px;
	position:relative;
	overflow:visible;
	left:0;
	transition:.3s;
}
nav.desktop.scrolling {
	height:80px;
	background-color:white;
}
	nav.desktop .container {
		height:100%;
	}
	nav.desktop .contents {
		display:flex;
		height:100%;
		padding:20px 0;
		gap:20px;
		justify-content:center;
		align-items:center;
	}
		nav.desktop .logo {
			height:100%;
			width:100%;
			max-width:300px;
			background-image:url('img/logo.png');
			background-position:center;
			background-size:contain;
			background-repeat:no-repeat;
		}

			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 .hoofdnavigatie a {
					color:white;
					font-weight:500;
					text-decoration:none;
					position:relative;
					overflow:visible;
					display:block;
					transition:.3s;
				}
				nav.desktop.scrolling .hoofdnavigatie a {
					color:black;
				}
				nav.desktop .hoofdnavigatie a i {
					font-size:24px;
				}



			nav.desktop .burger	{
				height:100%;
				aspect-ratio:1 / 1;
				border:1px solid blue;
				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:white;
	display:none;
}

	nav.mobile .close {
		width:40px;
		height:40px;
		position:absolute;
		top:10px;
		right:20px;
		border:1px solid red;
		line-height:40px;
		text-align:center;
	}
	nav.mobile ul {
		list-style-type:none;
		padding-left:0;
		margin-top:20px;
	}
		nav.mobile ul li {
			height:40px;
			line-height:40px;
			padding:0px 20px;
		}

@media screen and (min-width:1400px) {
	nav.desktop > .container {
		max-width:calc(100% - 200px);
	}
}
@media screen and (max-width:1399px) {
	nav.desktop  .hoofdnavigatie {
		display:none;
	}
	nav.desktop .burger	{
		display:flex;
	}
	nav.mobile.opened {
		display:block;
	}
}

header {
	width:100%;
	aspect-ratio:1290/602;
	max-height:600px;
	background-color:var(--yellow);
	display:flex !important;
	align-items:center;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
	header.sub {
		max-height:400px;
	}

main {
	padding:100px 0px;
}

footer {
	background-color:var(--purple);
	color:white;
	min-height:20px;
	background-color:var(--gray);

}


h1 {
	color:white;
	background-color:var(--gray);
	font-size:32px;
	padding:15px 40px;
	border-radius:100px;
	display:inline-block;
	text-transform:uppercase;
}

h2 {
	font-weight:bold;
	font-size:20px;
	background-image:url('img/kras.png');
	background-size:100% 100%;;
	display:inline-block;
	margin:0 auto;
	padding:10px 30px;
}


.usp {
	display:flex;
	align-items:center;
	gap:20px;
	margin:10px auto;
}
	.usp .icon {
		aspect-ratio:1;
		height:60px;
		border-radius:50%;
		background-color:var(--green);
		color:white;
		font-size:30px;
		display:flex;
		align-items:center;
		justify-content:center;
	}

	.usp p {
		padding:0;
		margin:0;
		font-weight:bold;
	}

.grecaptcha-badge {
	display:none !important;
}

.wpcf7-form.sent, .wpcf7-form.submitting {
	pointer-events:none;
	opacity:.7;
}
	.wpcf7-form.sent *:not(.wpcf7-response-output) {
		display:none;
	}
.form {
	margin:25px 0;
}

	.form p {
		text-align:center;
	}
	.form label {
		font-weight:600;
		font-size:14px;
	}
	.form label i {
		font-weight:400;
	}
	.form .form-control {
		margin:5px 0;
		border-radius:24px;
		border:0;
		transition:transform .4s, box-shadow .3s;
		background: #dedede;
		background: linear-gradient(0deg, rgba(222, 222, 222, 1) 0%, rgba(250, 250, 250, 1) 100%);

	}
	.form .form-control:focus {
		transform:scale(1.03);
		box-shadow:0px 0px 0px 3px var(--green);
	}


	.button {
		background-color:var(--green);
		border:0;
		padding:10px 30px;
		text-transform:uppercase;
		color:white;
		border-radius:30px;
		font-weight:bold;
		display:block;
		cursor:pointer;
		margin:5px auto;
		transition:.2s;
	}
		.button:active {
			transform:scale(.9);
		}
		.button.disabled {
			opacity:.6;
			pointer-events:none; 
		}


@media (max-width:767px) {
	h1 {
		font-size:24px;
	}
}