/* Indien de video fullscreen moet, .header_video weghalen */
#content .jumbotron.header_video{
	overflow-x: clip;
	padding: 0 !important;
	display: grid;
	height: calc(100vh - var(--body-padding));
	height: calc(100svh - var(--body-padding));
	position: relative;
	margin-left: auto;
	margin-right: auto;

	/* Variables for Logic */
	--padding-inline: var(--bs-gutter-x, .75rem);
	--content-max-width: var(--container-width);

	/* Responsive Column Count */
	--grid-columns: 10;

	/* Calculating the "Dead Space" on the sides */
	/* max(0px, ...) prevents negative values on small screens */
	--narrow-size-reduction: max(0px, calc(((100% - var(--content-max-width)) / 2) - 3rem));

	/* Splitting that space into two "Breakout" tracks */
	--_content-column-size: calc(var(--narrow-size-reduction) / 2);

	/* The Grid Definition */
	grid-template-columns:
		/* Left Side Breakouts */
		[outer-full-width-start] minmax(0, var(--_content-column-size))
		[full-width-start] minmax(0, var(--_content-column-size))

		/* Inner Gutter */
		[content-start] minmax(var(--padding-inline), 1fr)

		/* The Core Dynamic Grid */
		repeat(var(--grid-columns), 1fr)

		/* Inner Gutter */
		minmax(var(--padding-inline), 1fr) [content-end]

		/* Right Side Breakouts */
		minmax(0, var(--_content-column-size)) [full-width-end]
		minmax(0, var(--_content-column-size)) [outer-full-width-end];

	gap: 0 var(--bs-gutter-x, .75rem);
}

.header_video h1{
	font-size: clamp(5rem, 0.8rem + 8.8889vw, 14rem);
	color: #fff !important;
	max-width: 80%;
}

.header_video:after{
	content: "";
	background: linear-gradient(334deg, rgba(0, 0, 0, 0.50) 3.16%, rgba(0, 0, 0, 0.00) 36.04%), linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 1;
}

.header_video > .container{
	grid-column: content-start / content-end;
	grid-row: 1;
	position: relative;
	z-index: 5;
	padding: 0 0 var(--jumbotron-margin-md);
    align-self: end;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 3rem;
}

.header_video > .container > .row{
	display: contents;
}

.header_video > .container > .row > .col-sm-12{
	display: contents !important;
}

.header_video > .container > .row > .col-sm-12 > .flex-grow-1{
	grid-column: 1 / 11;
}

#header-video{
	grid-column: outer-full-width-start / outer-full-width-end;
	grid-row: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
	object-fit: cover;
	z-index: 0;
    opacity: 0;
    -webkit-transition:opacity 0.6s ease-in-out;
	transition:opacity 0.6s ease-in-out;
}

#header-video.visible{
    opacity: 1;
}

.header_slogan{
	color: var(--oranje);
	font-family: "handsome-pro";
	font-size: clamp(3rem, 1rem + 4.5556vw, 8rem);
	line-height: 1;
	grid-column: full-width-start / full-width-end;
	grid-row: 1;
	z-index: 5;
    align-self: flex-end;
    justify-self: flex-end;
	transform: rotate(-13.5deg);
	transform-origin: right bottom;
	pointer-events: none;
}

@media (max-width:767px)
{
	.header_video + .jumbotron:before{
		content: "";
		height: 8rem;
		width: 100%;
        display: block;
	}
	
	.header_video > .container{
		grid-column: full-width-start / full-width-end;
	}
	
	/* Indien de video fullscreen moet, .header_video weghalen */
	#content .jumbotron.header_video{
		/* Responsive Column Count */
		--grid-columns: 1;
	}
	
	.header_video h1{
		max-width: none;
        margin-bottom: 3rem !important;
	}

	.header_video > .container > .row > .col-sm-12 > .flex-grow-1{
		grid-column: 1 / -1;
	}
}

@media (min-width:768px) and (max-width:991px)
{
	.header_video > .container > .row > .col-sm-12 > .flex-grow-1{
		grid-column: 1 / 10;
	}

	.header_video h1{
		max-width: none;
	}
	
	.header_video + .jumbotron:before{
		content: "";
		height: 3rem;
		width: 100%;
        display: block;
	}
}

@media (min-width:992px) and (max-width:1199px)
{
	.header_video > .container > .row > .col-sm-12 > .flex-grow-1{
		grid-column: 1 / 10;
	}
}