@font-face {
	font-family: 'MicroN56';
	src: url('fonts/MicroN56.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}



/* hazard stripes */
.warning-stripes {
	width: 300px;
	height: 40px;

	background-repeat: no-repeat;
	background-size: 100% 100%;

	background-image: url("data:image/svg+xml;utf8,\
		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20'>\
		<defs>\
		<clipPath id='c'>\
		<rect x='20' y='0' width='260' height='60'/>\
		</clipPath>\
		</defs>\
		<g clip-path='url(%23c)' fill='white'>\
		<polygon points='20,40 26,40 46,0 40,0'/>\
		<polygon points='30,40 36,40 56,0 50,0'/>\
		<polygon points='40,40 46,40 66,0 60,0'/>\
		<polygon points='50,40 56,40 76,0 70,0'/>\
		<polygon points='60,40 66,40 86,0 80,0'/>\
		<polygon points='70,40 76,40 96,0 90,0'/>\
		<polygon points='80,40 86,40 106,0 100,0'/>\
		<polygon points='90,40 96,40 116,0 110,0'/>\
		<polygon points='100,40 106,40 126,0 120,0'/>\
		<polygon points='110,40 116,40 136,0 130,0'/>\
		<polygon points='120,40 126,40 146,0 140,0'/>\
		<polygon points='130,40 136,40 156,0 150,0'/>\
		<polygon points='140,40 146,40 166,0 160,0'/>\
		<polygon points='150,40 156,40 176,0 170,0'/>\
		<polygon points='160,40 166,40 186,0 180,0'/>\
		<polygon points='170,40 176,40 196,0 190,0'/>\
		<polygon points='180,40 186,40 206,0 200,0'/>\
		<polygon points='190,40 196,40 216,0 210,0'/>\
		<polygon points='200,40 206,40 226,0 220,0'/>\
		<polygon points='210,40 216,40 236,0 230,0'/>\
		<polygon points='220,40 226,40 246,0 240,0'/>\
		<polygon points='230,40 236,40 256,0 250,0'/>\
		<polygon points='240,40 246,40 266,0 260,0'/>\
		<polygon points='250,40 256,40 276,0 270,0'/>\
		</g>\
		</svg>");
}
.left-panel {
    position: absolute;

    left: 57px;
    bottom: 60px;

    width: 75%;
    height: 68%; /* zelfde als image-wrapper */

    background: rgba(2 5 14 / 60%);

    padding: 20px 40px 60px 40px;
    color: white;

    /* schuine hoeken boven */
    clip-path: polygon(0% 0, 100% 0, 100% 70%, 91% 100%, 9% 100%, 0 88%, 0 8%);
	
    z-index: 2;
	text-align:left;
}
.left-panel.fullpanel {
    position: absolute;

    left: 57px;
    bottom: 60px;

    width: 90%;
    height: 68%; /* zelfde als image-wrapper */
	
	    clip-path: polygon(0% 0, 100% 0, 100% 57%, 91% 100%, 3% 100%, 0 88%, 0 8%)

}

.panel_content{
padding:20px 40px 40px 30px;
}
.bluetitle{
	padding:10px 20px;
	background-color:#23b6f2;
	clip-path: polygon(2% 0, 101% 0, 100% 72%, 98% 99%, 10% 135%, 0 71%, 0 17%);
	display:inline-block;
}
h2.bluetitle{
	color:white;	
	font-weight:700;
	font-size:32px !important;
	
}
.bulletitem{

	background-color: rgba(255, 255, 255, 0.1);
	margin-left:24px;
	border-left:20px solid #23b6f2;	
	padding:10px 30px;
	color:white;
	height:90px;
	margin-top:26px;
	max-width:700px;
	font-family: 'Montserrat', sans-serif;
	border-top:1px solid rgba(255,255,255,0.1);
	border-bottom:1px solid rgba(255,255,255,0.1);
	border-right:1px solid rgba(255,255,255,0.1);
}
.bulletitem.howdoesitwork{

	max-width:620px;
}
.bulletitem.temppush{
margin-left:560px;
}
.howdoesitwork h3{
	font-size:28px !important;
}
.bulletitem.freeheight{
	height:auto;
	padding-bottom:32px;
}

.bulletitem.freeheight .bulletitem{
	display: flex;
  	align-items: center;  
	margin-left:10px;
	border-left:20px solid #d623f2;	
}
.bulletitem.freeheight .bulletitem.small{
	display: flex;
  	align-items: center;  
	line-height:1.2em;
	margin-left:10px;
	border-left:20px solid #d623f2;	
	height: auto;
}
.bulletitem.freeheight .bulletitem.small h4{
	font-size:20px;
}
	
.bulletitem h3{
	color:white;
	font-size:32px;
	line-height:1em;
}
.bulletitem p{
	color:white;
	font-weight:bold;
	font-size:18px;
	line-height:1em;
}
.bulletitem hr{
	color:rgba(255,255,255,0.1);
	background-color: rgba(255,255,255,0.1);
}
/* wrapper = border + vorm */
.section-image-right {
	z-index:99;
    position: absolute;
    right: 270px;
    bottom: 150px;

    width: 600px;
    max-height: 75%;

    /* witte border */
    padding: 1px;
    background: rgba(255,255,255,0.9);

    /* schuine hoek */
    clip-path: polygon(
        0 0,
        100% 0,
        100% 65%,
        84% 100%,
        0 100%
    );
}

/* image zelf */
.section-image-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    display: block;

    /* zelfde clip-path zodat hij netjes binnen de border valt */
    clip-path: polygon(
        0 0,
        100% 0,
        100% 65%,
        84% 100%,
        0 100%
    );
}
.section-loop-right{
	z-index:99;
    position: relative;

	height: 100vh;
 	 place-items: center;
  	container-type: size;
  
    max-height: 60%;
}
.right-bottom-vertical .warning-stripes {
	transform: rotate(90deg) scaleX(-1);
}
.left-top-line{
	pointer-events: none;
	z-index:44;
	position:absolute;
	top:10px;
	left:10px;
	border-top:1px solid white;
	border-left:1px solid white;
	width:400px;
	height:400px;
}
.left-top{
	z-index:999;
	position:absolute;
	top:26px;
	left:16px;
}
.right-bottom-line{
	pointer-events: none;
	z-index:44;
	position:absolute;
	bottom:10px;
	right:10px;
	border-right:1px solid white;
	border-bottom:1px solid white;
	width:400px;
	height:400px;
}
.right-bottom{
	z-index:99999999;
	position:absolute;
	bottom:22px;
	right:12px;
}
.right-bottom-vertical{
	z-index: 99999999;
	position: absolute;
	bottom: 44px;
	right: -110px;
}
.version{
	position:absolute;
	text-align:right;
	font-family: 'MicroN56'; 
	font-size:8px;
	color:white;
	height: 10px;
	width: 130px;
	bottom: 342px;
	right: -48px;
	transform: rotate(270deg);
	z-index:111;
}
.slide{
z-index:99999;	
}
.slide_info{
	clip-path: polygon(
		10% 0%,   /* linksboven */
		100% 0%,  /* rechtsboven */
		100% 100%, /* rechtsonder */
		0% 100%   /* linksonder */
	);
	position:relative;
	display:inline-block;
	right:53px;
	top:14px;
	height:22px;
	line-height:11px;
	padding-left:10px;
	padding-right:4px;

	//border:1px solid white;
	background-color: rgba(0, 0, 0, 0.9);
	background-image: url(imgs/synth_bg.png);
	background-size:1100%;
	background-position: right bottom;
	color:white;
	font-size:8px;
	overflow: hidden; 
	text-align:right;
	font-family: 'MicroN56'; 
	text-shadow:
		-1px -1px 0 black,
		1px -1px 0 black,
		-1px  1px 0 black,
		1px  1px 0 black;
	float:right;
	z-index:99999;

}
.slide_qr{
	z-index:9999999999999999;

	position:absolute;
	display:inline-block;
	width:30px;
	height:30px;
	right:22px;
	bottom:22px;
	background-image: url(imgs/qrcode.png);
	background-size:cover;
	transition: transform 0.3s ease;
	transform-origin: bottom right;
}
.slide_qr:hover{
	transform: scale(10);
	transform-origin: bottom right;
}

/* Style for our header texts
* ---------------------------------------
h1{
	font-size: 5em;
	font-family: arial,helvetica;
	color: #fff;
	margin:0;
	padding:0;
}
 */
/* Centered texts in each section
* --------------------------------------- */
.section{
	text-align:center;
}


/* Backgrounds will cover all the section
* --------------------------------------- */
.section{
	background-size: cover;
}
.slide{
	background-size: cover;
}

/* Defining each section background and styles
* --------------------------------------- */
#section0,#section10{
	background-image: url(imgs/synth_bg.png);
	//background-image: url(imgs/geralt-cyberpunk-10088494.jpg);

}
#section0 h1, #section10 h1{
	top: 10%;
	transform: translateY(-50%);
	position: relative;
}
#section1 h1, #section2 h1,#section3 h1,#section4 h1, #section5 h1,#section6 h1,#section7 h1, #section8 h1,#section9 h1,#section10 h1, #section11 h1,#section12 h1{
	font-size:48px;
	top:20px;
}
#section1 h2, #section2 h2, #section3 h2,#section4 h2, #section5 h2,#section6 h2,#section7 h2, #section8 h2,#section9 h2,#section10 h2, #section11 h2,#section12 h2{
	font-size:48px;
	top:20px;
}
#section1{
	background-image: url(imgs/synth_bg.png);
}
#section2{
	background-image: url(imgs/synth_bg.png);
	//padding: 6% 0 0 0;
}
#section3{
	background-image: url(imgs/synth_bg.png);
	//padding: 6% 0 0 0;
}
#section4{
	background-image: url(imgs/howdoesitwork.png);
	//padding: 6% 0 0 0;
}
#section5{
	background-image: url(imgs/howdoesitwork.png);
	//padding: 6% 0 0 0;
}
#section6{
	background-image: url(imgs/howdoesitwork.png);
	//padding: 6% 0 0 0;
}
#section7{
	background-image: url(imgs/howdoesitwork.png);
	//padding: 6% 0 0 0;
}
#section8{
	background-image: url(imgs/howdoesitwork.png);
	//padding: 6% 0 0 0;
}
#section9{
	background-image: url(imgs/howdoesitwork.png);
	//padding: 6% 0 0 0;
}
#section4{
	background-image: url(imgs/howdoesitwork.png);
	//padding: 6% 0 0 0;
}





/*Adding background for the slides
* --------------------------------------- */
#slide1{
	background-image: url(imgs/synth_bg.png);
	
}
#slide2{
	background-image: url(imgs/synth_bg.png);
	
}
#slide3{
	background-image: url(imgs/synth_bg.png);
	
}
#slide4{
	background-image: url(imgs/synth_bg.png);
	
}
#slide5{
	background-image: url(imgs/synth_bg.png);
	
}
#slide6{
	background-image: url(imgs/synth_bg.png);
	
}
#slide7{
	background-image: url(imgs/synth_bg.png);
	
}


/* Bottom menu
* --------------------------------------- */
#infoMenu li a {
	color: #fff;
}



/* Slide 1 flowing bg
* --------------------------------------- */	
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: none;
	z-index: 0;
}
.section-vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(6, 16, 48, 0.8) 20%,
		rgba(6, 16, 48, 0.6) 35%,
		rgba(4, 12, 40, 0.4) 60%,
		rgba(2, 8, 28, 0.8) 100%
	);
}

.section-content {
	position: relative;
	z-index: 3;
}

.vignette-off .section-vignette {
	display: none;
}
#vignette {
	z-index:1;	
	position: fixed;
	inset: 0;
	pointer-events: none;
	/* Dark blue vignette: 0% opacity at center (up to ~20%), 100% at edges */
	background: radial-gradient(
		circle at 50% 50%,
		rgba(6, 16, 48, 0.8) 20%,
		rgba(6, 16, 48, 0.6) 35%,
		rgba(4, 12, 40, 0.4) 60%,
		rgba(2, 8, 28, 0.8) 100%
	);
	opacity: 1;
	transition: opacity 0.4s ease;
}
#vignette.hidden {
	opacity: 0;
	transform: scale(1.05);
}

canvas {
	z-index:2;
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	display: block;
}


#section0,#section1,#section2,#section3 {
	position: relative;
	overflow: hidden;
}
/* EN Slide 1 flowing bg ----------------- */	

/* fullPage wraps content, so target correctly */
#section0 .bg-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	object-fit: cover;
	z-index: 0;
}

/* fullPage uses .fp-tableCell sometimes */
#section0 .content,
#section0 .fp-tableCell {
	position: relative;
	z-index: 1;
}
#section10 .content,
#section10 .fp-tableCell {
	position: relative;
	z-index: 1;
}


/* Styles for text */
#section0 .hero, #section10 .hero {
	z-index:99999;
	position:relative;
	display: grid;
	grid-template-columns: 10% 1fr; /* start op 20% van links */
	height: 100vh;
	align-items: center; /* verticaal centreren */
	text-align:left;
}
#section1 .hero ,#section2 .hero,#section3 .hero ,#section4 .hero ,#section5 .hero ,#section6 .hero ,#section7 .hero ,#section8 .hero ,#section9 .hero {
	z-index:99999;
	position:relative;
	//display: grid;
	//grid-template-columns: 60px 60px; /* start op 20% van links */
	//height: 100vh;
	margin-top:60px;
	margin-left:60px;
	
	text-align:left;
}

.text-block {
	grid-column: 2; /* plaats tekst na die 20% marge */
}
h1,h2,h3,h4 {
	font-family: 'Montserrat', sans-serif;
}
.bluecolor{
	color:#23b6f2;
}
.whitecolor{
	color:#fff;
}

h1.title{
	color: white;
	font-size: 140px;
	font-weight:700 !Important;
	margin: 0;
	padding:0px;
	line-height:1em;
	text-shadow: rgba(0, 0, 0, 1) 0px 0px 21px;
	//text-shadow: rgba(255,255,255,0.9) 0px 0px 100px;
}

h2.subtitle{
	color: #23b6f2; /* blauw */
	font-size: 62px;
	text-transform:uppercase;
	font-weight:700 !Important;
	margin-top: 10px;
	text-shadow: rgba(0, 0, 0, 1) 0px 0px 21px;
	//text-shadow: rgba(255,255,255,0.9) 0px 0px 9px;
}
h4{
	color:white;
	font-size:32px;
	font-weight:bold;
}
#section0 h2.subtitle, #section10 h2.subtitle{
	margin-top: -10px;
}	
#section0 .hero hr, #section1 .hero hr, .hero hr{
	width:290px;
	text-align:left;
	float:left;
}

.fp-watermark{
display:none !important;	
}