/***********************************************************

 * HOME

 **********************************************************/

body {
	overflow-x: hidden;
}

.content-home {
	margin: 24px auto;
	overflow: visible;
}

.home-doelgroepen-container {
	position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: visible;
}

.home-doelgroepen {
	max-width: 1350px;
	margin: 0 auto;
}

.home-hero {

	position: absolute;

	top: 0;

	left: 0;

	height: 720px;

	width: 100vw;

	z-index: -1;

	overflow: hidden;

}

.home-hero img {

	min-width: 100vw;

	max-width: 500%;

}

.home-tagline {

	margin: 0;

	font-weight: bold;

	color: var(--mot-white);

}

.home-doelgroepen {

	display: flex;

	column-gap: 32px;

	margin-top: 32px;

}

.home-doelgroep {

	position: relative;

	background-color: var(--mot-color);

	color: var(--mot-black);

	height: 480px;

	flex-basis: 30%;

	overflow: hidden;

}

.home-doelgroep:nth-child(2) {

	flex-basis: 33%;

}

.content .home-doelgroep img {

	max-width: unset;

}

.home-doelgroep-image {

	position: absolute;

  height: 100%;

  top: 0;

	opacity: 50%;

	transition: .5s ease-out;

}

.home-doelgroep:hover .home-doelgroep-image {

	opacity: 85%;

}

.home-doelgroep-naam {

	position: relative;

	font-size: 256%;

	text-align: center;

	margin: min(5vw, 70px) 16px;

	color: var(--mot-white);

	text-shadow: -1px -1px 0 var(--mot-black), 1px -1px 0 var(--mot-black), -1px 1px 0 var(--mot-black), 1px 1px 0 var(--mot-black);

}

.home-doelgroep:nth-child(2) .home-doelgroep-naam {

	margin-left: calc(16px + 6%);

	margin-right: calc(16px + 6%);

}

.home-doelgroep-tekst {

	position: absolute;

	bottom: 0;

	background-color: var(--mot-white);

	margin: 16px;

	padding: 16px;

}

.home-doelgroep-button {

	margin-top: 12px;

  width: 100%;

  font-size: 120%;

	font-weight: bold;

  background-color: var(--mot-black);

  color: var(--mot-white);

  padding: 8px;

  border: none;

	pointer-events: none;

}



.home-introductie {

	margin-top: 80px;

	font-size: 110%;

}



.home-video {

	margin-top: 32px;

	background-color: var(--mot-lgray);

	padding: 32px;

	display: flex;

	column-gap: 16px;

}

.home-video-tekst {

	flex-basis: 40%

}

.home-video-player {

	flex-basis: 60%;

}



.home-sectie-klein a:nth-of-type(2n-1) .home-blok {

	clear: left;

}

.home-blok-klein {

	width: 50%;

	float: left;

	color: var(--mot-black);

	padding: 20px;

	box-sizing: border-box;

	transform: scale(1);

	transition: .4s ease;

	font-size: min(1.48vw, 14.8px);

}

.home-blok-klein:hover {

	transform: scale(1.08);

}

.home-blok-klein img {

	width: min(100px, 12vw);

	float: left;

	margin-right: min(20px, 1vw);

}

.home-blok-klein-inhoud {

	padding-left: min(120px, 13vw);

}

.home-blok-klein h3 {

	margin: 0 0 8px 0;

}

.home-blok-klein:hover h3 {

	text-decoration: underline;

	-webkit-text-decoration-color: var(--mot-color);

	text-decoration-color: var(--mot-color);

}

.home-blok-klein-tekst {

	font-weight: normal;

}

.home-blok-form {

	font-size: min(1.6vw, 16px);

	background: var(--mot-lgray);

	clear: left;

	border-top: 24px solid var(--mot-white);

	padding: 20px;

	box-sizing: border-box;

	min-height: 480px;

}

.home-blok-form h2 {

	margin: 0;

	padding: 1vw 0;

}

.content-home + .footer {

	margin-top: max(-100px, -18vw);

}

/***********************************************************

 * HOME - MOBILE

 **********************************************************/

@media screen and (max-width:940px) {

	.home-hero {

		height: 290px;

	}

	.home-video {

		flex-direction: column;

		row-gap: 32px;

	}

	.home-video iframe {

		max-height: 43vw;

	}

}

@media screen and (max-width:700px) {

	.home-doelgroepen {

		flex-direction: column;

		row-gap: 32px;

		margin-top: 102px;

	}

	.home-doelgroep {

		flex-basis: unset;

		height: 300px;

	}

	.home-doelgroep:nth-child(2) {

		flex-basis: unset;

	}

	.home-doelgroep-image {

		height: unset;

		width: 100%;

	}

	.home-doelgroep-inhoud h2 {

		font-size: 6.7vw;

	}

	.home-blok-klein {

		width: 100%;

		font-size: min(13px, 2.78vw);

	}

	.home-blok-form {

		font-size: min(14px, 3vw);

	}

}

@media screen and (max-width:500px) {

	.home-hero {

		height: calc(290px - 0.33 * (100vw - 500px));

	}

}