/*
 Theme Name:   Glabbast
 Description:  brainstorm en concept basisthema
 Author:       brainstorm en concept
 Version:      1.0.0
*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

:root {
	--gray:#8A8D8F;
	--orange:#ED6A23;
	--green:#008852;
}


body, html {
	width:100%;
	overflow:auto;
	margin:0px auto;
	font-family:calibri, arial;
}

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

nav {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100px;
	padding-top:30px;
	padding-bottom:30px;
	background-color:white;
	overflow:hidden;
	display:block;
	transition:.3s;
	z-index:1000;
}
.scrolling nav {
	height:80px;
	padding-top:25px;
	padding-bottom:25px;
}
	nav .container {
		position:relative;
		overflow:hidden;
		height:100%;
		display:block;
	}

main  {

	*padding-top:100px;
	background: #FFFFFF;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(230, 230, 230, 1) 100%);
}
	section {
		padding:100px 0;
	}

footer {
	position:relative;
	width:100%;
	height:100px;
	padding-top:30px;
	padding-bottom:30px;
	background-color:black;
	overflow:hidden;
	display:block;
	transition:.3s;
}
	footer .container {
		position:relative;
		overflow:hidden;
		height:100%;
		display:block;
		text-align:right;
	}


.logo {
	height:100%;
	width:auto;
	position:relative;
	display:inline-block;
}


h1, h2, h3 {
	font-family:oswald;
}

h1 {
	text-transform:uppercase;
	font-size:65px;
	color:var(--orange);
	font-weight:900;
	line-height:1;
}
h2 {
	text-transform:uppercase;
	font-size:65px;
	color:var(--green);
	font-weight:400;
	padding-bottom:15px;
}

h3 {
	font-size:32px;
	color:var(--green);
	font-weight:400;
}

p, ul {
	font-size:20px;

}

ul {
	padding-left:0;
}
ul li::marker {
	font-size:0;
}
ul li:before {
	content: " ";
	height:20px;
	aspect-ratio:1;
	background-image:url('img/check.png');
	background-size:contain;
	background-repeat:no-repeat;
	display:inline-block;
	margin-right:10px;
	bottom:-3px;
	position:relative;
}


.button {
	padding:12px 40px;
	color:white;
	background-color:var(--orange);
	border-radius:40px;
	font-weight:bold;
	font-size:20px;
	display:inline-block;
	transition:.3s;
	cursor:pointer;
	border:0;
}
.button:hover {
	transform:scale(1.05);
}
.button:active {
	transition:.1s;
	transform:scale(.95);
}
	.button.bg-white {
		color:black !important;
		background-color:white;
	}

	.v-align {
		position:relative;
		overflow:visible;
		top:50%;
		transform:translateY(-50%);
	}



/* forms */
label {
	margin-bottom:0;
}
.form-control {
	border:0;
	background-color:#EBECEC;
	border-radius:0;
	padding:
}

form.sent .content {display:none; }

form.sent .wpcf7-response-output {
	display:none;
}
.wpcf7-form.sent, .wpcf7-form.submitting, .wpcf7-form.submitting .wpcf7-submit  {
	pointer-events:none;

}
	.wpcf7-form.sent *:not(.popup, .popup *) {
		display:none;
	}

form .popup {
	display:none;

	padding-bottom:50px;
	background-image:url('img/logo_black.png');
	background-position:0 100%;
	background-size:auto 40px;
	background-repeat:no-repeat;
}
form.sent .popup {
	display:block;
}


/* Sections */

#intro {
	padding-top:200px;
	background-image:url('img/mask_dark.png');
	background-size:auto 80%;
	background-position:110% -30%;
	background-repeat:no-repeat;
}
#form {
	padding-top:0;
}
	#form .wk-plaatje {
		width:100%;
		max-width:600px;
		margin:20px auto;
		display:block;
		position:relative;
	}

#cta {
	background-color:var(--green);
	color:white;
	background-image:url('img/mask_light.png');
	background-size:auto 180%;
	background-position:110% 50%;
	background-repeat:no-repeat;
}
	#cta h3 {
		text-transform:uppercase;
		color:inherit;
	 }

	 #cta p {
		 margin:15px 0;
	 }



	@media (max-width:991px) {
		section {
			padding:50px 0;
		}
		h1, h2 {
			font-size:34px;
		}
		h3 {
			font-size:24px;
			font-weight:400;
		}
		p, ul {
			font-size:16px;
		}
		ul li:before {
			height:16px;
		}
		.button {
			font-size:16px;
			padding:10px 25px;
		}
		#intro {
			padding-top:125px;
			background-size:50% auto;
			background-position:110% -10%;

		}
		#cta {
			background-size:auto 140%;
		}
	}

	@media (max-width:767px) {

		#intro {
			background-size:80% auto;
			background-position:150% 10%;

		}
		h1 {
			font-size:30px;
		}
		h2 {
			font-size:24px;
		}

		nav, footer .container {
			text-align:center;
		}
	}