@import url("https://use.typekit.net/wvs6ovn.css");

.websitecon {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	/* border: 1px solid black; */

}

HTML {
	overflow-x: hidden;
}

@media (min-width: 475px) {
	.websitecon {
		max-width: 475px;
	}
}


@media (min-width: 640px) {
	.websitecon {
		max-width: 640px;
	}
}


@media (min-width: 768px) {
	.websitecon {
		max-width: 768px;
	}

}

@media (min-width: 1024px) {
	.websitecon {
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.websitecon {
		max-width: 1280px;
	}
}

@media (min-width: 1536px) {
	.websitecon {
		max-width: 1536px;
	}
}

.websitecon {
	max-width: 1536px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

@media (max-width: 1536px) {
	.websitecon {
		max-width: 1280px;
	}
}

@media (max-width: 1280px) {
	.websitecon {
		max-width: 1024px;
	}
}

@media (max-width: 1024px) {
	.websitecon {
		max-width: 768px;
	}
}

@media (max-width: 768px) {
	.websitecon {
		max-width: 640px;
	}
}

@media (max-width: 640px) {
	.websitecon {
		max-width: 475px;
	}
}

@media (max-width: 475px) {
	.websitecon {
		width: 100%;
	}
}

body {
	background-color: #f2edd0;
	font-family: "input-sans";
	overflow-x: hidden;
}

header {
	z-index: 10;
	width: 100%;
	height: 50px;
	position: fixed;
	background-color: #f2edd0;
	display: flex;
}

header h1 {
	margin-left: 160px;
	margin-top: 5px;
	font-family: "input-sans";
	font-display: auto;
	font-style: normal;
	font-weight: 900;
	font-stretch: normal;
	font-size: 40px;
	letter-spacing: 48px;
	font: bold;
	letter-spacing: 0px;
	color: #000000;
	opacity: 1;
	float: left;
}

.galtitel h1 {
	padding-top: 135px;
	font-family: "input-sans";
	font-display: auto;
	font-style: normal;
	font-weight: 900;
	font-stretch: normal;
	font-size: 80px;
	font: bold;

}

h2 {
	font-family: "input-sans";
	font-display: auto;
	font-style: normal;
	font-weight: 900;
	font-stretch: normal;
	font-size: 40px;
	font: bold;

}

p {
	font-family: "input-sans";
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
	font-size: 18px;
	line-height: 1.5;
}

nav {
	text-align: right;

	display: flex;
	justify-content: right;
}

.navbar {
	font-family: "input-sans";
	font-display: auto;
	font-style: normal;
	font-weight: 900;
	font-stretch: normal;
	font-size: 20px;
	letter-spacing: 24px;
	font: bold;
	letter-spacing: 0px;
	color: #000000;
	opacity: 1;
	list-style-type: none;
	display: flex;
	margin-top: 18px;
	/* padding-left:100px; */

}

.navbar li {
	display: inline-block;

}

.navbar li a {
	margin-right: 100px;
	text-decoration: none;
	color: black;
}

.cleardiv {
	clear: both;
}

.imgcon1 {
	display: flex;
}

.imgcon2 {
	position: relative;
}

.telefoonimg {
	max-width: 630px;
	height: 534px;
	margin-top: 116px;
	z-index: 9;
}


.logoimg {
	width: 480px;
	height: 334px;
	margin-right: 200px;
	margin-top: 176px;
}

.txtcon1 {
	width: 70%;
	margin: auto;
	background: #9cead9;

	margin-top: 178px;
	padding-top: 49px;
	padding-bottom: 50px;
	border-radius: 20px;

}

.txtcon1 h2 {
	margin-bottom: 49px;
	text-align: center;

}

.txtcon1 p {
	width: 65%;
	margin: auto;
}

.txtcon2 {
	background-color: #F8B2E7;
	width: 70%;
	margin: auto;
	border-radius: 20px;
}

.txtcon2 h2 {
	text-align: center;
	padding-top: 45px;
}

.txtcon2 p {
	width: 65%;
	margin-left: 126px;
	margin-top: 50px;

}

.txtcon3 {
	width: 70%;
	margin: auto;
	background: #F8D2AC;
	margin-top: 678px;
	padding-top: 49px;
	padding-bottom: 50px;
	border-radius: 20px;
}

.txtcon3 p {
	margin-left: 15%;
	font-family: "input-sans";
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
	font-size: 18px;
	letter-spacing: 27px;
	letter-spacing: 0px;
	color: #000000;
	opacity: 1;
	width: 65%;
	margin-bottom: 58px;
}

.txtcon3 h2 {
	text-align: center;
	font-family: "input-sans-narrow";
	font-display: auto;
	font-style: normal;
	font-weight: 900;
	font-stretch: normal;
	font-size: 40px;
	color: #000000;
	opacity: 1;
	margin-bottom: 50px;
}

.txtcon3 h3 {
	margin-left: 15%;

	font-family: "input-sans-narrow";
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0px;
	color: #000000;
	opacity: 1;
}




.txtcon3 img {
	display: block;
	margin: auto;
	margin-top: 50px;
	margin-bottom: 50px;
	width: 80%;
}

.txtcon4 {
	width: 70%;
	margin: auto;
	background: #B7DDE5;
	margin-top: 178px;
	padding-top: 49px;
	padding-bottom: 50px;
	border-radius: 20px;
}

.decon2 {
	position: relative;

}



.decon4 {
	margin-bottom: 100px;
}


.txtcon4 h2 {
	text-align: center;
	font-family: "input-sans-narrow";
	font-display: auto;
	font-style: normal;
	font-weight: 900;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #000000;
	opacity: 1;
	margin-bottom: 28px;

}

.txtcon4 p {
	width: 65%;
	display: block;
	margin: 0 auto;
	font-family: "input-sans";
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
	font-size: 18px;
	letter-spacing: 27px;
	letter-spacing: 0px;
	color: #000000;
	opacity: 1;
	margin-bottom: 48px;
}

.gridimg {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-content: space-around;
	margin-left: 40px;
}

.imghand {
	display: block;
	margin: 0 auto;
	width: 30%;
	margin-left: -400px;
	margin-top: 50px;
}

.vierkant1 {
	float: right;
	width: 826px;
	height: 466px;
	margin-top: -300px;
	margin-right: -510px;
	z-index: -1;
	overflow-x: clip;
	position: relative;
}

.vierkant2 {
	float: left;
	width: 800px;
	z-index: -1;
	margin-left: -400px;
	margin-top: -50px;
	position: relative;
}

.vierkant3 {
	width: 581px;
	margin-left: 1100px;
	margin-top: -200px;
}

.vierkant4 {
	width: 916px;
	margin-top: -800px;
	margin-left: -200px;
	float: left;
	z-index: -1;
	position: relative;
}

.vierkant5 {
	height: 530px;
	float: right;
	z-index: -1;
	margin-top: -630px;
	margin-right: -200px;
	position: relative;
}

.vierkant6 {
	height: 300px;
	float: left;
	z-index: -1;
	margin-top: 180px;
	margin-left: -200px;
	position: relative;
}

.vierkant7 {
	width: 966px;
	float: right;
	z-index: -1;
	margin-top: -800px;
	margin-right: -800px;
	position: relative;
}

.vierkant8 {
	height: 551px;
	float: left;
	z-index: -1;
	margin-top: 100px;
	margin-left: -750px;
	position: relative;
}

.vierkant9 {
	height: 555px;
	float: right;
	z-index: -1;
	margin-top: -1200px;
	margin-right: -800px;
	position: relative;
}

.vierkant10 {
	height: 629px;
	float: left;
	z-index: -1;
	margin-top: -550px;
	margin-left: -600px;
	position: relative;
}

.vierkant11 {
	height: 595px;
	float: right;
	z-index: -1;
	margin-top: -500px;
	margin-right: -200px;
	position: relative;
}

.vierkant12 {
	height: 985px;
	float: left;
	z-index: -1;
	margin-top: -1250px;
	margin-left: -670px;
	position: relative;
}

.vierkant13 {
	height: 465px;
	float: right;
	z-index: -1;
	margin-top: -800px;
	margin-right: -250px;
	position: relative;
}

.vierkant14 {
	height: 450px;
	float: left;
	z-index: -1;
	margin-top: -500px;
	margin-right: -250px;
	position: relative;
}

.vierkant15 {
	height: 290px;
	float: left;
	margin-top: -200px;
	z-index: -1;
	margin-left: -1750px;
	position: relative;
}



.computerimg {
	width: 50%;
	margin: 0 auto;
	display: block;
	margin-left: 450px;
}

.titelcon {
	position: relative;
}

.titelcon1 h2 {

	z-index: 1;
}

.slash1 {
	position: absolute;
	margin-left: 275px;
	margin-top: 38px;
}

.laptop {

	width: 40%;
	padding-left: 30%;
	margin: 0 auto;
	margin-top: 187px;
	margin-bottom: -550px;

}

#Download {
	background-color: #FBA455;
	display: block;
	margin: auto;
	margin-bottom: 24px;
}

a {
	text-decoration: none;
	list-style: none;
}

#workshoppage {
	background-color: #FBA455;
	display: block;
	margin: auto;
}

#gallerij {
	background-color: #5BC4ED;
	display: block;
	margin: auto;
	margin-top: 48px;
}


footer {
	font-family: "input-sans";
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
	font-size: 18px;
	letter-spacing: 0px;
	background-color: #9CEAD9;
	width: 100%;

}

.footdiv {
	width: 100%;
	display: block;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr) 2fr;
	grid-template-rows: 1fr;
	grid-column-gap: 30px;
	grid-row-gap: 0px;
	padding-top: 58px;
}

.footdiv h2 {
	font-size: 20px;
}

.footdiv ul {
	list-style-type: none;
	display: inline;
}

.footdiv ul li {
	font-size: 12px;
}

.footcontact {
	grid-area: 1 / 1 / 2 / 2;
	margin-left: 5%;
}

.footcontactlist {
	margin-left: 5%;
}

.footons {
	grid-area: 1 / 2 / 2 / 3;
}

.footmail {
	grid-area: 1 / 3 / 2 / 4;
}

.email {
	border-radius: 10px;
	height: 43px;
	width: 315px;
	font-family: "input-sans";
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
	font-size: 16px;
	border: none;
}

.email::placeholder {
	padding-left: 10px;
}

.verstuurbtn {
	margin-left: 70px;
	margin-bottom: 20px;
	display: block;
	height: 34px;
	margin-top: 9px;
	width: 179px;
	background-color: black;
	color: white;
	border-radius: 10px;
	font-family: "input-sans";
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
	font-size: 16px;

}

.video {
	position: relative;
	padding-top: 72px;
	padding-bottom: 89px;
	display: block;
	margin: auto;
}


#videoBtn {
	position: absolute;
	opacity: 0;
	width: 100px;
	height: 100px;
	background-color: transparent;
	border-radius: 50%;
	border: none;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	z-index: 1;
	transition: ease all 800ms;
}

#videoBtn:hover {
	background-color: transparent;
	;
}

#videoPlayer {
	display: block;
	margin: 0 auto;
	width: 80%;
	height: 100%;
	border-radius: 20px;

}

.video:hover #videoBtn {
	opacity: 1;


}

#videoBtn.active {
	height: 100px;
	width: 100px;


}

.galcompimg {
	width: 90%;
}

.button {
	border: none;
	border-radius: 10px;
	opacity: 1;
	text-align: center;
	font-family: "input-sans";
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
	font-size: 16px;
	letter-spacing: 0px;
	color: #000000;
	opacity: 1;
	width: 338px;
	height: 51px;
	text-decoration: none;
}

.galintro {
	display: grid;
	grid-template-columns: repeat(2, 1fr);

	grid-column-gap: 50px;
	margin-left: 80px;
	margin-bottom: 190px;
}

.galintrotxt {
	width: 100%;
	height: 300px;
	background-color: #B7DDE5;
	border-radius: 20px;
	margin-top: 200px;
}

.galintrotxt p {
	padding-right: 55px;
	margin-top: 55px;
	margin-left: 55px;
	margin-bottom: 55px;
	font-size: 18px;
	width: 80%;
}

.galintroimg {
	display: inline;
}

.galintroimg img {
	display: inline;
}

.congal {
	height: auto;
	margin: 0 auto;
	width: 70%;
	background-color: #B7DDE5;
	margin-bottom: 150px;
	padding-bottom: 120px;
	padding-right: 10px;
	padding-left: 10px;
	text-align: center;
	padding-top: 79px;
	border-radius: 20px;
}




.congal h3 {
	margin-top: 20px;
}

.gridgal {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(auto, 1fr);
	gap: 40px;
}

.werkjes {
	width: 100%;
	height: 100%;
	font-family: "input-sans";
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
	font-size: 16px;
	font-size: 18px;
	text-align: center;
}

.galvierkant1 {
	height: 638px;
	margin-top: -4830px;
	margin-left: -500px;
	float: left;
	z-index: -1;
	position: relative;
}

.galvierkant2 {
	height: 691px;
	margin-top: -4800px;
	margin-right: -500px;
	float: right;
	z-index: -1;
	position: relative;
}

.galvierkant3 {
	height: 551px;
	margin-top: -4130px;
	margin-left: -200px;
	float: left;
	z-index: -1;
	position: relative;
}

.galvierkant4 {
	height: 330px;
	margin-top: -3850px;
	margin-right: -200px;
	float: right;
	z-index: -1;
	position: relative;
}

.galvierkant5 {
	height: 255px;
	margin-top: -3130px;
	margin-left: -200px;
	float: left;
	z-index: -1;
	position: relative;
}

.galvierkant6 {
	height: 551px;
	margin-top: -3350px;
	margin-right: -200px;
	float: right;
	z-index: -1;
	position: relative;
}

.galvierkant7 {
	height: 638px;
	margin-top: -2500px;
	margin-left: -500px;
	float: left;
	z-index: -1;
	position: relative;
}

.galvierkant8 {
	height: 638px;
	margin-top: -2600px;
	margin-right: -200px;
	float: right;
	z-index: -1;
	position: relative;
}

.galvierkant9 {
	height: 551px;
	margin-top: -1750px;
	margin-left: -200px;
	float: left;
	z-index: -1;
	position: relative;
}

.galvierkant10 {
	height: 330px;
	margin-top: -1650px;
	margin-right: -180px;
	float: right;
	z-index: -1;
	position: relative;
}

.galvierkant11 {
	height: 255px;
	margin-top: -800px;
	margin-left: -350px;
	float: left;
	z-index: -1;
	position: relative;
}

.galvierkant12 {
	height: 551px;
	margin-top: -1200px;
	margin-right: -180px;
	float: right;
	z-index: -1;
	position: relative;
}

.galvierkant13 {
	height: 300px;
	margin-top: -300px;
	margin-right: -450px;
	float: right;
	z-index: -1;
	position: relative;
}


@media (max-width: 1400px) {
	.congal {
		width: 90%;
	}
}

@media (max-width: 1025px) {
	.txtcon1 {
		width: 100%;
	}

	.txtcon1 p {
		width: 80%;
	}

	.txtcon2 {
		width: 100%;
	}

	.txtcon2 p {
		width: 80%;
	}

	.txtcon3 {
		width: 100%;
	}

	.txtcon3 p {
		width: 80%;
	}

	.txtcon4 p {
		width: 80%;
	}

	.txtcon4 {
		width: 100%;
	}
}


@media (max-width: 1050px) {
	.galintro {
		margin-bottom: 50px;
	}

	.galintrotxt {
		height: auto;
	}

	.computerimg {
		margin-left: -100px;
	}

	.vierkant2 {
		display: none;
	}

	.vierkant6 {
		display: none;
	}

	.vierkant5 {
		display: none;
	}

	.vierkant14 {
		display: none;
	}

	.galintro {
		grid-template-rows: repeat(2, 1fr);
	}

	.galintrotxt {
		grid-area: 1 / 1 / 2 / 2;
		width: 150%;
	}

	.galcompimg {
		grid-area: 2 / 1 / 3 / 2;
		display: block;
		margin: 0 auto;
		margin-left: 25%;
		margin-top: 55px;
		width: 100%;
	}

	.txtcon3 {
		margin-top: 100px;
	}

	.computerimg {
		padding-left: 320px;
	}

	.vierkant6 {
		display: none;
	}

	.laptop {
		margin: auto;
		margin-top: 50px;
	}

	.txtcon2 p {
		margin-left: 80px;
	}

	.vierkant2 {
		display: none;
	}

	.imghand {
		width: 60%;
		margin: 0 auto;
		margin-top: 30px;
	}

	.footcontact {
		margin-right: 5%;
		margin-left: 5%;
	}

	.footons {
		margin-right: 15%;
	}

	.telefoonimg {
		width: 420px;
		height: 350px;
		margin-top: 116px;
	}

	.logoimg {
		width: 320px;
		height: 222px;

		margin-right: 0px;
		margin-top: 176px;
	}

	header h1 {
		margin-left: 10%;
		float: none;
	}

	header {
		position: absolute;
	}

	.navbar {
		background-color: #f2edd0;
		margin-left: 50px;
		width: 100%;
		height: 40px;
		margin-top: -10px;
	}

	.navbar li {

		margin-top: 10px;
	}

	.gridimg {
		row-gap: 20px;
		grid-template-columns: repeat(2, 1fr);
	}

	.gridgal {

		grid-template-columns: repeat(1, 1fr);
	}

	.werkjes img {
		width: 70%;
		/* height: 50%; */
	}

	.gridimg img {
		width: 80%;
	}

	.vierkant8 {
		display: none;
	}

	.galintro {
		margin-bottom: 0px;
		margin-top: -150px;
	}
}

@media (max-width: 650px) {

	.congal h2 {
		font-size: 28px;
	}

	.galcompimg {
		margin-left: 10%;
	}

	.button {
		width: 150px;
		height: 75px;
	}

	.computerimg {
		width: 60%;
		margin: 0 auto;
		display: block;
		padding-left: 130px;
	}

	.footdiv {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 30px;
		grid-row-gap: 30px;
	}

	.footcontact {
		grid-area: 1 / 1 / 2 / 2;

	}

	.footons {
		grid-area: 1 / 2 / 2 / 3;
	}

	.footmail {
		grid-area: 2 / 1 / 3 / 2;
		margin-left: 20px;
	}

	h2 {
		padding-top: 0px;
	}

	.telefoonimg {
		width: 210px;
		height: 178px;
		margin-top: 116px;
	}

	.logoimg {
		width: 160px;
		height: 111px;
		margin-left: 10%;
		margin-right: 0px;
		margin-top: 176px;
	}

	.navbar li a {
		margin-right: 20px;
		text-decoration: none;
		color: black;
	}

	.gridimg {
		grid-template-columns: repeat(1, 1fr);
	}

	.gridgal {

		grid-template-columns: repeat(1, 1fr);
	}

	.werkjes img {
		width: 80%;
	}

	.congal {
		margin-top: -200px;
	}



}

@media (max-width: 426px) {
	.galcompimg{
		margin-bottom: 120px;
		margin-top: 20px;
	}
	.congal {
		width: 85%;
	}

	.galtitel h1 {
		font-size: 50px;
	}

	.galintrotxt {
		width: 130%;
	}

	.galintrotxt p {
		margin-left: 30px;
		font-size: 12px;
		margin-top: 30px;
		margin-bottom: 30px;
		margin-right: 30px;
	}

	.galintro {
		margin-left: 20px;
	}

	.vierkant2 {
		display: none;
	}

	.vierkant4 {
		display: none;
	}

	.vierkant6 {
		display: none;
	}

	.vierkant8 {
		display: none;
	}

	.vierkant10 {
		display: none;
	}

	.vierkant12 {
		display: none;
	}

	.vierkant14 {
		display: none;
	}

	.email {
		width: 200px;
	}

	.footmail h2 {
		width: 200px;
	}

	.footmail {
		margin-bottom: -50px;
	}

	.footdiv {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, 1fr);
	}

	.footcontact {
		grid-area: 1 / 1 / 2 / 2;
	}

	.footons {
		grid-area: 2 / 1 / 3 / 2;
		margin-left: 5%;
	}

	.footmail {
		grid-area: 3 / 1 / 4 / 2;
	}

	.computerimg {
		padding-left: 50px;
	}

	.navbar {
		font-size: 10px;
	}

	.telefoonimg {
		width: 140px;
		height: 118px;
		margin-top: 116px;
		z-index: 9;
	}

	.logoimg {
		width: 100px;
		height: 74px;
		margin-top: 76px;
		margin-right: 10%;
	}

	.txtcon1 h2 {
		font-size: 20px;
		margin-bottom: 15px;
	}

	.congal h2 {
		font-size: 20px;
		margin-bottom: 15px;
		margin-top: -45px;
	}

	.txtcon1 {
		width: 80%;
		margin-top: 78px;
	}

	.txtcon1 p {
		width: 80%;
		font-size: 12px;
	}

	.txtcon2 {
		width: 80%;
	}

	.txtcon4 {
		width: 80%;
	}

	.txtcon2 p {
		width: 80%;
		font-size: 12px;
		margin-left: 30px;
	}

	.txtcon4 p {
		width: 80%;
		font-size: 12px;
		margin-left: 30px;
	}

	.congal {
		width: 80%;
	}

	.txtcon2 h2 {
		font-size: 20px;
		margin-bottom: 15px;
	}

	.txtcon4 h2 {
		font-size: 20px;
		margin-bottom: 15px;
	}


	.txtcon3 {
		width: 80%;
	}

	.txtcon3 p {
		width: 80%;
		font-size: 12px;
	}

	.txtcon3 h2 {
		font-size: 20px;
		margin-bottom: 15px;
	}

	.gridimg img {
		width: 80%;
	}
}