html {height: 100%; scroll-behavior: smooth;  margin: 0;}

body {height: 100%; margin: 0; overflow-x: hidden;}

#rij1, #rij2, #rij3, #rij4, #rij5{height: 100%; width: 100%; background-size: cover; background-position: top center; position: relative;}

#rij1 {background-image: url('../images/Arjan-01-cam.jpg');}
#rij2 {background-image: url('../images/Arjan-05.jpg');}
#rij3 {background-image: url('../images/Arjan-02.jpg');}
#rij4 {background-image: url('../images/Arjan-03.jpg');}

.content1, .content2, .content3, .content4 {width: 50%; height: 100%; background: rgba(255, 139, 15, 0.7);	box-sizing: border-box;	padding: 5%;	display: flex;  align-items: center;}

.content1, .content3 {float: left;}

.content2, .content4 {float: right;}

.content5 {width: 100%; height: 100%; background: black;	box-sizing: border-box;	padding: 5%;	display: flex;  align-items: center;}

#logo {
	position: fixed;
	z-index: 100;
	left: 3%;
	top: 8%;
}

.logoimage {
	height: 12vw;
	width: 12vw;
}

H1 {
	font-family: 'Pattaya', sans-serif;
	font-weight: normal;
	font-size: 2.5vw;
	line-height: 1.2em;
	letter-spacing: 0.1em;
	color: white;
	margin: -0.1em 0 0.3em 0.1em;
}

H2 {
	font-family: 'Pattaya', sans-serif;
	font-weight: normal;
	font-size: 2vw;
	line-height: 1.2em;
	letter-spacing: 0.1em;
	color: white;
	margin: -0.1em 0 0.3em 0.1em;
}

p {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 1.3vw;
	line-height: 1.7em;
	letter-spacing: 0.04em;
	color: white;
	margin: 0 0 0 0.3em;
}

.scrolldowntext {
	font-family: 'Pattaya', sans-serif;
	font-size: 1.6vw;
	letter-spacing: 0.1em;
	color: white;
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 115px;
	z-index: 15;
}

.scrollpijldown {
  position: absolute;
  left: calc(50% - 50px);
  bottom: 20px;
	z-index: 10;
}

.scrollpijlup {
  position: absolute;
  left: calc(50% - 50px);
  transform: rotate(180deg);
  top: 20px;
	z-index: 10;
}

.scrollpijlpic {
	width: 100px;
	height: 100px;
}

@media only screen and (max-width: 768px) {
	.content1, .content2, .content3, .content4 {width: 75%;}
	
	#logo {
		left: 2%;
		top: 5%;
	}

	.logoimage {
		height: 20vw;
		width: 20vw;
	}
	
	H1 {
		font-size: 6vw;
	}

	H2 {
		font-size: 4.5vw;
	}

	p {
		font-size: 4vw;
	}

	.scrolldowntext {
		font-size: 3vw;
	  bottom: 50px;
	}
	
	.scrollpijldown {
	  left: calc(50% - 25px);
	  bottom: 0px;
	}

	.scrollpijlup {
	  left: calc(50% - 25px);
	  top: 0px;
	}
	
	.scrollpijlpic {
	width: 50px;
	height: 50px;
	}
}

#rij5{
  position: relative;
  height: 100vh;
  overflow: hidden;
}
#content5 {
  position: absolute;
  width: calc(100vh * (1000 / 562));    /*  video width / height  */
  height: calc(100vw * (562 / 1000));   /*  video height / width  */
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
video {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
}