.arrow {
	margin: 20px;
}

/*header*/
.wrapper {
	display: flex;
	justify-content: center;
}

.werk {
	display: flex;
}

.werk p {
	width: 60%;
	margin-right: 15px;
	align-self: center;
	white-space: nowrap;
}

.werk img {
	object-fit: contain;
}

.rechts {
	display: flex;
	margin-left: 5%;
}

.rechts img {
	margin-top: -20%;
	width: 120%;
	align-self: flex-start;
}

.text {
	margin-top: 15%;
	margin-bottom: 15%;
}

.btn-primary {
	white-space: nowrap;
	margin: 5px;
}

/*Administratief medewerker*/

.administratiefMedewerker {
	text-align: center;
}

.TaakomschrijvingFlexA {
	display: flex;
	margin-bottom: 150px;
}

.TaakomschrijvingTextA {
	flex: 50%;
}

.TaakomschrijvingImageA {
	flex: 50%;
}

.ProfielFlexA {
	display: flex;
	margin-bottom: 100px;
}

.ProfielTextA {
	flex: 1;
	margin-top: -50px;
}

.ProfielImageA {
	flex: 1;
}

.RoseBloem {
	width: 500px;
	margin-top: -250px;
}

.AanbodFlexA {
	display: flex;
	margin-bottom: 100px;
}

.AanbodImageA {
	flex: 1;
}

.BrugMetPlakband {
	width: 600px;
}

.AanbodTextA {
	flex: 1;
}

/*kookvrijwilliger*/

.kookVrijwilliger {
	text-align: center;
	margin-right: 7%;
}

.TaakomschrijvingFlexK {
	display: flex;
}

.TaakomschrijvingImageK {
	flex: 1;
	margin-top: -100px;
	margin-left: 100px;
}

.TaakomschrijvingTextK {
	flex: 1;
}

.ProfielFlexK {
	display: flex;
}

.ProfielImageK {
	flex: 1;
	margin-top: 80px;
	margin-left: 250px;
}

.ProfielTextK {
	flex: 1;
	margin-left: 75px;
	margin-bottom: 100px;
}

.AanbodFlexK {
	display: flex;
	margin-bottom: 100px;
}

.AanbodImageK {
	flex: 1;
	margin-top: -50px;
}

.AanbodTextK {
	flex: 1;
}

/*logistiek vrijwilliger*/

.logistiekVrijwilliger {
	text-align: center;
	margin-right: 7%;
}

.TaakomschrijvingFlexL {
	display: flex;
	margin-bottom: 50px;
}

.TaakomschrijvingImageL {
	flex: 1;
	padding-left: 50px;
}

.pen {
	position: absolute;
	right: 20%;
	top: 45%;
}

.TaakomschrijvingTextL {
	flex: 1;
}

.ProfielFlexL {
	display: flex;
}

.ProfielTextL {
	flex: 1;
	margin-top: 60px;
	margin-left: 25px;
}

.ProfielImageL {
	flex: 1;
	margin-top: -150px;
}

.ZetelBloemEnGroen {
	width: 600px;
	margin-right: -150px;
}

.AanbodFlexL {
	margin-top: -200px;
	margin-bottom: 150px;
}

/*Maatschappelijk assistente*/

.maatschappelijkAssisstent {
	text-align: center;
}

.TaakomschrijvingFlex {
	display: flex;
}

.TaakomschrijvingText {
	flex: 1;
}

.TaakomschrijvingImage {
	flex: 1;
	justify-content: left;
}

.schilderij {
	/*width: 350px;*/
	margin-left: 250px;
}

.ProfielFlex {
	display: flex;
}

.ProfielText {
	flex: 1;
	margin-left: 75px;
	margin-top: 50px;
}

.ProfielImage {
	flex: 1;
	width: 50%;
	align-self: center;
}

.plant {
	width: 500px;
	margin-left: 100px;
	margin-top: -100px;
}

.AanbodFlex {
	display: flex;
	margin-bottom: 100px;
}

.AanbodText {
	flex: 1;
	margin-top: -50px;
	margin-left: 150px;
}

.Aanbodleeg {
	flex: 1;
	object-fit: contain;
}

/*RESPONSIVE*/

@media only screen and (max-width: 1280px) {
	.wrapper {
		flex-direction: column;
	}

	.text {
		margin-top: 5%;
		margin-bottom: 0%;
	}

	main {
		padding: 0;
	}

	.rechts img {
		margin-top: -7%;
		width: 100%;
		margin-left: 14%;
	}
}

@media screen and (max-width: 768px) {
	main {
		> * {
			padding: 0 10pt;
		}
	}

	/*BUTTON*/
	.btn-primary {
		margin-left: 0px;
		margin-right: 50%;
	}

	.arrow {
		margin-left: -50px;
	}

	/*FIRST PAGE*/

	body {
		width: 100%;
	}

	nav {
		display: none;
	}

	.wrapper {
		flex-direction: column;
	}

	.werk {
		flex-direction: column;
	}

	.werk img {
		display: none;
	}

	.werk p {
		width: 100%;
		margin-right: 0px;
		align-self: normal;
	}

	.rechts img {
		width: 100%;
	}

	.btn-primary {
		margin-left: -5px;
	}

	/* KOOK VRIJWILLIGER*/

	.kookVrijwilliger {
		width: 100%;
	}

	.TaakomschrijvingFlexK {
		display: flex;
		flex-wrap: wrap;
	}

	.TaakomschrijvingImageK {
		flex: 1;
		margin-top: 0px;
		margin-left: 0px;
	}

	.pan {
		width: 250px;
		height: auto;
	}

	.ProfielImageK {
		display: none;
	}

	.ProfielTextK {
		margin-left: 25px;
		margin-bottom: 50px;
	}

	.AanbodFlexK {
		flex-wrap: wrap;
	}

	.Sponge {
		margin-left: -50px;
		margin-top: 20px;
		width: 300px;
		height: auto;
	}

	/* LOGISTIEK VRIJWILLIGER*/

	.TaakomschrijvingFlexL {
		margin-bottom: 10px;
	}

	.TaakomschrijvingImageL {
		display: none;
	}

	.ProfielFlexL {
		flex-wrap: wrap;
	}

	.ProfielTextL {
		margin-top: 20px;
		margin-left: 25px;
	}

	.ProfielImageL {
		flex: 1;
		margin-top: 0px;
	}

	.ZetelBloemEnGroen {
		width: 300px;
		margin-right: 0px;
	}

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

	/* ADMINISTRASTIEF MEDEWERKER*/

	.TaakomschrijvingFlexA {
		flex-wrap: wrap;
		margin-bottom: 0px;
	}

	.ProfielFlexA {
		flex-wrap: wrap;
		margin-bottom: 50px;
	}

	.ProfielTextA {
		margin-top: 0px;
	}

	.RoseBloem {
		width: 250px;
		margin-top: 0px;
	}

	.AanbodFlexA {
		flex-wrap: wrap;
	}

	.BrugMetPlakband {
		width: 300px;
	}

	/*MAATSCHAPPELIJK ASSISSTENT*/
	.TaakomschrijvingFlex {
		flex-wrap: wrap;
	}

	.schilderij {
		width: 200px;
		margin-left: 0px;
	}

	.ProfielFlex {
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}

	.ProfielText {
		flex: 1;
		margin-left: 0px;
		margin-top: 50px;
	}

	.ProfielImage {
		flex: 1;
		width: 50%;
		align-self: center;
	}

	.plant {
		width: 200px;
		margin-left: 0px;
		margin-top: 0px;
	}

	.AanbodFlex {
		display: block;
		margin-bottom: 100px;
	}

	.AanbodText {
		flex: 1;
		margin-top: 0px;
		margin-left: 0px;
	}
}

/* Mobile S*/
@media screen and (max-width: 320px) {
	main a {
		font-size: 12pt;
	}

	/* ADMINISTRASTIEF MEDEWERKER*/
	.BrugMetPlakband {
		width: 200px;
	}
}