/***********************************************************
 * HOME
 **********************************************************/
body {
	overflow-x: hidden;
}
.content-home {
	margin: 24px 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));
	}
}
