@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


:root {
	--sub-text-line-height: 25px;
	--head-text-line-height: 55px;
	--head-text-font-size: 2.0em;
}

html, body {
	font-family: 'Montserrat', sans-serif !important;
}

.head-text {
	line-height: var(--head-text-line-height);
}

.sub-text, article {
	line-height: var(--sub-text-line-height);
	word-spacing: 2px;
}

.sub-text, article+ article {
	margin-top: 25px;
	margin-bottom: 25px;
}

.head-text, .sub-text, .text {
	color: #1d1d1b;
}

.head-text.white, .sub-text.white, .text.white {
	color: white;
}

nav {
	position:fixed;
	z-index: 5;
	background: #cb2728;
	text-transform: uppercase;
    width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	min-height: 60px;
	align-items: center;
}

nav ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

nav ul li {
	padding: 0 15px;
}

nav ul li a{
	color:#fff;
	font-weight: 700;
	text-decoration: none;
}

/* VIDEO BLOCK */

#video-container {
	padding-top: 60px;
	display: grid;
	grid-template-rows: 55vh 8vh auto
}

#video-container > .background {
	background: linear-gradient( rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6) ), url('../images/pand.jpg') no-repeat;
	background-size: cover;
	grid-column: 1;
	grid-row: 1 / 3;
	display: grid;
	grid-template-rows: 60px auto 60px 1fr;
	gap: 30px;
	align-content: center;
}

#video-container #logo {
    justify-self: center;
    grid-column: 1;
    grid-row: 2;
}

#video-container #logo img {
	min-width: 250px;
}

#video-container > .background > article {
	grid-column: 1;
	grid-row: 3 / 5;
	color: white;
	text-align: center;
	
}
#video-container > .background > article p {
	font-size: 1.2em;
	line-height: 1.6em;
	text-transform: uppercase;
	font-weight: 700;
}

#video-container > .background > article h1 {
    font-size: 2.5em;
	line-height: 1em;
    margin-bottom: 0.4em;
	text-transform: uppercase;
}

#video-container #video {
	display: grid;
	grid-column: 1;
	grid-row: 1 / 4;
	align-items: center;
	margin-top: -35%;
}

#video-container > article {
	grid-column: 1;
	grid-row: 2 / 4;
	z-index: 1;
	background-color: white;
	width: 35%;
	justify-self: center;
	padding: 2.5em 2em 3em 2.5em;
    color: grey;
}

#video-container > article h2 {
	font-weight: 600;
	font-size: 2.0em;
	line-height: 35px;
}

#video-container #video-text > * {
	text-align: center;
	color: white;
}


#video-container #head-text {
	font-size: 3.7em;
	margin-bottom: 0.4em;
}

#video-container #sub-text {
	font-weight: 700;
	font-size: 1.3em;
	line-height: 1.8em;
}

.sub-text p b {
	font-weight: bold !important;
}

/* INFO BLOCK */

#info-block,
#info-block-right {
	display: grid;
	grid-template-columns: 40% auto;
	/* height: 59vh; */
}

#info-block-left {
	display: grid;
	grid-template-columns: auto 40%;
	/* height: 59vh; */
}

#info-block .background {
	background: url('../images/heftruck_laden.jpg') no-repeat;
	background-size: cover;
	background-position: center;
}

#info-block-left .background {
	background: url('../images/accupack.jpg') no-repeat;
	background-size: cover;
	background-position: center;
}

#info-block-right .background {
	background: url('../images/top_monteur.jpg') no-repeat;
	background-size: cover;
	background-position: center;
}

#info-block .text,
#info-block-right .text{
	background: #393462;
	color: white;
	display: grid;
    grid-template-rows: auto;
	padding: 7em 7em 7em 7em;
}

#info-block-left .text {
	background: #ffa800;
	color: #000000;
	display: grid;
    grid-template-rows: auto;
	padding: 7em 7em 7em 7em;
}


#info-block .head-text,
#info-block-left .head-text,
#info-block-right .head-text{
    font-size: var(--head-text-font-size);
    line-height: 1em !important;
    width: 60%;
}

#info-block .sub-text,
#info-block-left .sub-text {
	grid-row: 3;
	width: 80%;
}

 #info-block .button,
 #info-block-left .button,
 #info-block-right .button {
    --size: 50px;
    --padding: 25px;
    --border-radius: 40px;
    padding: var(--padding) calc(var(--size) / 2);
    border-radius: var(--border-radius);
    color: #000;
    background: #cb2728;
    text-transform: uppercase;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    align-items: center; 
    font-weight: 700;
    transition: 1s;
    font-size: var(--font-size);
    line-height: var(--line-height);
    border: 0;
    cursor: pointer;
    width: 250px;
 	grid-row: 4;
}

 #info-block .button:hover,
 #info-block-left .button:hover,
 #info-block-right .button:hover {
    background: #000000;
    color: #ffffff;
}

#certainty-block ul {
	line-height: 25px;
	margin-left: 25px;
}

#certainty-block ul li {
	padding-left: 10px;
}

#certainty-block ul li::marker {
	content: "\f00c";
	font-family: "Font Awesome 6 Pro";
	font-weight: 700;
	padding-right: -25px;
	color: #cb2728;
}

/* DISTINGUISH BLOCK */

#distinguish-block {
	display: grid;
    grid-template-rows: calc(50vh - 12vh) 12vh auto;
}

#distinguish-block > .background {
	background: url('../images/pickawood.jpg') no-repeat;
	background-size: cover;
	background-position: center;
	grid-row: 1 / 3;
	grid-column: 1;
}

#distinguish-block .content {
	display: grid;
    width: 50%;
	grid-column: 1;
	grid-row: 2 / 4;
	background: white;
	justify-self: center;
	grid-template-columns: 70% 30%;
}

#distinguish-block .content > .background {
	background: url('../images/toyota_heftruck.jpg') no-repeat;
	background-size: contain;
}

#distinguish-block .content > .text {
	padding: 2em 3em 3em 3em;
}

#distinguish-block .content .text .head-text {
	font-weight: 100;
    line-height: 52px;
    font-size: var(--head-text-font-size);
    font-family: 'Montserrat-Light', sans-serif !important;
	margin-bottom: 1em;
}

#distinguish-block .content .text .sub-text ul {
	line-height: 25px;
	margin-left: 25px;
}

#distinguish-block .content .text .sub-text li {
	padding-left: 10px;
}

#distinguish-block .content .text .sub-text li::marker {
	content: "\f00c";
	font-family: "Font Awesome 6 Pro";
	font-weight: 700;
	padding-right: -25px;
	color: #cb2728;
}

#distinguish-block .content .text .sub-text h3 {
	font-weight: bold;
	font-size: 1.3em;
	margin-bottom: 1em;
}

#distinguish-block .content .text .sub-text > div {
	margin-bottom: 1em;
}

#distinguish-block .content .text .sub-text > article {
	font-style: oblique;
}

/* Partnership Block */

#partnership-block {
	display: grid;
	grid-template-columns: 70%;
    justify-content: center;
	background: #ffa800;
	padding: 3em;
}

#partnership-block .content {
	display: grid;
	justify-self: center;
	grid-template-columns: 50% 50%;
}

#partnership-block .image {
	justify-self: right;
    align-self: center;
}

#partnership-block .image > img {
	width: 100%;
}

#partnership-block .column {
	justify-self: left;
    align-self: center;
	padding-left: 3em;
}

#partnership-block .head-text {
	font-family: 'Montserrat-Light', sans-serif !important;
	font-size: var(--head-text-font-size);
	font-weight: 100;
	margin-bottom: 1em;
}

/* Cooperation Block */

#cooperation-block {
	display: grid;
	grid-template-columns: 67%;
	justify-content: center;
}

#cooperation-block .content {
	display: grid;
	grid-template-columns: 55% 45%;
    /* grid-template-rows: 62vh auto; */
	/* padding-left: 15em;
    padding-right: 15em; */
}

#cooperation-block .right-image {
	grid-row: 1 / 3;
    grid-column: 2;
	background: url('../images/vacature_heftruck.jpg') no-repeat;
	background-size: contain;
}

#cooperation-block .head-text {
	font-family: 'Montserrat-Light', sans-serif !important;
	font-size: var(--head-text-font-size);
	font-weight: 100;
	margin-bottom: 1em;
}

#cooperation-block .text {
	padding: 3em 3em 3em 3em;
}

#cooperation-block .text article {
	margin-bottom: 1.2em;
}

#cooperation-block .text span {
	margin-right: 10px;
}

#cooperation-block .list {
	margin-bottom: 1em;
}

#cooperation-block .list ol {
	counter-reset: item;
}

#cooperation-block .list li {
	counter-increment: item;
	font-style: oblique;
}

#cooperation-block .list ol {
	margin-left: 1.3em;
}

#cooperation-block .list li::marker {
	line-height: var(--sub-text-line-height);
	content: counter(item) ')  ';
	padding-right: 20px;
	width: 10px;
}

#cooperation-block #call-me{
	line-height: 25px;
	margin-top: 35px;
}

#cooperation-block #call-me b{
	font-weight: 700;
}

 #cooperation-block #call-me a {
	color: #124395;
    text-decoration: none;
    font-weight: 700;
}

#cooperation-block .bottom-image {
	align-items: end;
    display: grid;
    justify-content: right;
}

#cooperation-block .bottom-image img {
	height: 100%;
	width: 24vw;
	align-self: end;
}

/* About us block */

#about-us-block {
	display: grid;
	grid-template-rows: 28vh 30vh 20vh 9vh
}

#about-us-block > .background {
	background: url('../images/service_bussen.jpg') no-repeat;
	background-size: cover;
	grid-column: 1;
	grid-row: 2 / 5;
}

#about-us-block > .content {
	display: grid;
    z-index: 2;
    width: 77.3%;
    grid-column: 1;
    grid-row: 1 / 3;
    grid-template-columns: 40% 60%;
	background: white;
}

#about-us-block .content .left-image {
	background: url('../images/heftruck_stellingen.jpg') no-repeat;
	background-size: cover;
}


#about-us-block .text {
	padding: 4em 4em 3em 4em;
}

#about-us-block .text .head-text {
	font-size: var(--head-text-font-size);
	margin-bottom: 1em;
	display: flex;
}

#about-us-block .text .sub-text article:nth-child(1) {
	margin-bottom: 1em;
}

#about-us-block .text .sub-text article {
	font-family: 'Montserrat', sans-serif !important;
}

#about-us-block .text .sub-text article h3 {
	font-weight:700;
}

#about-us-block .text .sub-text article a {
	color: #124395;
	text-decoration: none;
	font-weight: 700;
}

#about-us-block .text .logo {
	margin-top: 5%;
}

#about-us-block .text .logo img {
	width: 15vw;
}

#about-us-block .text .bottom-text {
	text-transform: uppercase;
	font-size: var(--head-text-font-size);
	margin-top: 10%;
}

#about-us-block .footer {
	display: grid;
    grid-column: 1;
    grid-row: 4;
    justify-self: center;
    width: 88%;
    padding: 1em;
}

#about-us-block .footer > .background, #about-us-block .footer > .content {
	grid-row: 1;
	grid-column: 1;
}

#about-us-block .footer > .background {
	background: #383838;
    opacity: 0.6;
}

#about-us-block .footer > .content {
	font-family: 'Montserrat-Medium', sans-serif !important;
	display: grid;
	justify-content: center;
	align-items: center;
	color: white;
	z-index: 1;
	letter-spacing: 1.4px;
}

#about-us-block .footer a {
	color: inherit;
	text-decoration: underline;
}


@media screen and (max-width: 1023px) {
	:root {
		--head-text-font-size: 2em;
		--sub-text-line-height: 25px;
		--head-text-line-height: 35px;
	}

	.head-text h2 {
		font-size: 0.8em;
	}

	#info-block .head-text, #info-block-left .head-text, #info-block-right .head-text
	{
    	font-size: var(--head-text-font-size);
    	width: 100%;
    }

	nav ul {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		margin: 25px 0px;
	}

	nav ul li{
		padding: 5px;
	}
	#video-container {
		padding-top: 104px;

	}

	#video-container > article {
		width: 80vw;
	}

	/* INFO */

	#info-block .head-text {
		width: 100%;
	}

	#info-block .sub-text {
		width: 100%;
	}

	#info-block .background {
		height: 35vh;
	}

	#info-block, #info-block-left, #info-block-right {
		grid-template-columns: 1fr;
	}

	#info-block .text, #info-block-left .text, #info-block-right .text {
		grid-template-rows: auto;
		padding: 2.5em 2em 2.5em 2em;
	}

	/* Distinguish */

	#distinguish-block {
		grid-template-columns: 1fr;
		grid-template-rows: calc(40vh - 12vh) 12vh auto;
	}

	#distinguish-block .content {
		width: 90%;
		grid-template-columns: 1fr;
		grid-template-rows: 15vh auto;
		background: unset;
	}

	#distinguish-block .content > .text {
		padding: 2em 1em 2.5em 0em;
		grid-row: 2;
	}

	#distinguish-block .content .background {
		grid-row: 1;
		display: none;
	}

	#distinguish-block .content .text .head-text {
		line-height: 40px;
	}

	#distinguish-block .content .text .sub-text h3 {
		margin-bottom: 0.4em;
	}

	/* Partnetship  */

	#partnership-block {
		padding: 2.5em 1em 2.5em 1em;
		grid-template-columns: 1fr;
	}

	#partnership-block .image {
		grid-row: 2;
		margin-top: 1em;
		display: none;
	}

	#partnership-block .column {
		grid-row: 1;
		padding-left: 0;
		margin-bottom: 1em;
	}

	#partnership-block .content {
		grid-template-columns: 1fr;
		width: 93%;
	}

	/* Cooperation */

	#cooperation-block {
		grid-template-columns: 90%;
	}

	#cooperation-block .content {
		grid-template-columns: 1fr;
		grid-template-rows: auto 28vh;
		/* margin-bottom: 3em; */
	}

	#cooperation-block .right-image {
		display: none;
	}

	#cooperation-block .bottom-image img {
		width: 100%;
	}

	#cooperation-block .text {
		padding: 2.5em 0em 0 0em;
	}

	#cooperation-block .list li {
		margin-bottom: 1em;
	}

	#cooperation-block .text h3, #cooperation-block .text a {
		word-spacing: unset;
		line-height: 30px;
	}

	#cooperation-block #call-me {
		margin-bottom: 2.5em;
		text-align: center;
	}
	#cooperation-block .head-text {
		font-family: 'Montserrat-Light', sans-serif !important;
		font-size: var(--head-text-font-size);
		font-weight: 100;
		margin-bottom: 1em;
	}

	/* About us */

	#about-us-block {
		grid-template-rows: 38vh auto 10vh auto;
	}

	#about-us-block > .content {
		width: 90%;
		grid-template-columns: 1fr;
		grid-template-rows: 38vh auto;
		justify-self: center;
	}

	#about-us-block .footer > .content {
		letter-spacing: unset;
    	line-height: 25px;
		text-align: center;
	}

	#about-us-block .text .logo, #about-us-block .text .bottom-text {
		text-align: center;
	}

	#about-us-block .text .bottom-text {
		font-size: 2.2em;
	}

	#about-us-block .text .logo img {
		width: 75%;
	}

	#about-us-block .text {
		padding: 2.5em 2em 2.5em 2em;
	}
}

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

/* 	#video-container #logo {
		width: 65%;
		margin-top: 175px;
	}

	#video-container #video-text {
		margin-top: 600px;
		padding: 0 1em 0 1em;
	} */

	#distinguish-block .content {
		width: 90%;
		grid-template-columns: 1fr;
		grid-template-rows: 15vh auto;
		background: unset;
	}
}