/* Indien de video fullscreen moet, .header_video weghalen */
.header_video_home { 
	margin-top: var(--jumbotron-standard-margin);
}
 
.header_video_home_container header, .header_video_home_container .content { 
    position: relative;
    z-index: 99; 
}

.jumbotron .header_video_home h2 {
    font-size: 2.8rem;
    line-height: 3.6rem;
	color: var(--kleur_zwart);
	font-weight: 700;
	font-family: 'pt-sans', sans-serif; 
}
 
.header_video_home header {
	margin-bottom: 3rem !important;
	padding-top: 10vh;
}

.header_video_home header h1 {
	position: relative; 
	font-size: 8rem;
	line-height: 9rem;
	color: #fff;
}

.header_video_home header h1 span {
	color: #F36F21;
}
 
.header_video_home 
.content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    color: var(--kleur_wit);
    text-align: left;
    padding: 0;
} 

.row-details {
	margin-top: var(--jumbotron-standard-margin);
}

.video_container {
	margin-top: 0rem;
    margin-left: 11rem;
    margin-bottom: 0rem;
    margin-right: calc((-1 * (100vw - var(--container-width)) / 2) - var(--bs-gutter-x));
    border-top-left-radius: 3rem;
    border-bottom-left-radius: 3rem;
    overflow: hidden;
    position: relative;
    max-height: 70rem;
	-webkit-transform: scale(1);
} 

.video_overlay {
	overflow: hidden;
}

.video_overlay::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    top: 0px;
    position: absolute;
    background: rgb(0,0,0); 
	border-top-left-radius: 3rem;
    border-bottom-left-radius: 3rem;
    background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); 
}

#header-video { 
    opacity: 0;
    height: 70rem;
    object-fit: cover;
    width: 100%;
    display: block; 
} 

#header-video-duration {
    position: absolute;
    right: 56%;
    margin-right: calc((-1 * (100vw - var(--container-width)) / 2) - var(--bs-gutter-x));
    top: 50%;
    margin-top: -70px; 
    text-align: center;
    z-index: 99;
    color: #fff; 
}

#header-video-duration a {
    width: 200px;
    height: 96px;
    display: block;
    background-position: top center;
    background-size: inherit; 
    background-repeat: no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='82.614' height='59.383' viewBox='0 0 82.614 59.383'%3E%3Cg id='play_icon_video' transform='translate(1.25 1.254)'%3E%3Crect id='Rectangle_2570' data-name='Rectangle 2570' width='34.388' height='37.254' transform='translate(23.119 9.552)' fill='%23fff'/%3E%3Cpath id='Path_4515' data-name='Path 4515' d='M70.45,1.25H11.417A9.048,9.048,0,0,0,2.39,10.267V49.021a9.046,9.046,0,0,0,9.017,9.017H70.45a9.046,9.046,0,0,0,9.017-9.017V10.267A9.046,9.046,0,0,0,70.45,1.25Zm-18.1,29.134L32.145,42.86a1.778,1.778,0,0,1-2.713-1.509v-26.5a1.777,1.777,0,0,1,2.789-1.461l20.2,14.023a1.777,1.777,0,0,1-.076,2.971Z' transform='translate(-1.301 -1.245)' fill='%237bb155'/%3E%3Cpath id='Path_4516' data-name='Path 4516' d='M74.659,25.436c2.952-6.524.42-25.084-16-24.158l-45.517.038C8.175,1.317,2.1,4.641,1.25,11.413L2.864,45.028c0,4.958,5.311,13.1,10.269,13.1h53.34a15.156,15.156,0,0,0,13.02-8.893S82.435,26.716,80.754,14.5' transform='translate(-1.25 -1.245)' fill='none' stroke='%231d1d1b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3Cpath id='Path_4517' data-name='Path 4517' d='M34.87,18.33V46.968L56.7,33.489Z' transform='translate(-2.755 -2.01)' fill='none' stroke='%231d1d1b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

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

article > .jumbotron:first-child.header_video_home {
    padding-top: 10rem;
	padding-bottom: calc(var(--jumbotron-standard-margin));
}

@media (max-width:1399px){
	
	.header_video_home header { 
		padding-top: 0; 
	} 

	.header_video_home header h1 {
		font-size: 3.6rem;
		line-height: 4.6rem; 
	}

	.video_container {
		max-height: 60rem;
		margin-left: 0;
	} 
}
  
@media (max-width:992px){
	
	.header_video_home_container {  
		margin-top: -21rem;
		pointer-events: none;
	} 
	
    #header-video {
		max-height: 40rem;
    }
	
	.header_video_home header h1 {
		font-size: 3.6rem;
		line-height: 4.6rem; 
	}

	.header_video_home header h1:before { 
		width: 3.6rem;
		height: 4.1rem;
		top: -2rem;
		left: -2rem;
		background-size: 100%;
	} 
	
	.header_video_home_figuur {
		right: -20rem;
		bottom: -40rem;
		background-size: 80%; 
	} 
	
}

@media (max-width:991px){
	.video_container {
        max-height: 34.7rem;
        margin-left: 0;
        margin-bottom: 11rem;
    }
	
}

@media (max-width:767px){
	.video_container {
        max-height: 24.7rem;
        margin-left: 0;
        margin-bottom: 11rem;
    }
	
	 #header-video {
		 max-height: 39.7rem;
	}
	
}