@font-face {
  font-family: 'Helvetica';
  src: url('font/HelveticaNeue-Roman.eot?#iefix') format('embedded-opentype'),  url('font/HelveticaNeue-Roman.woff') format('woff'), url('font/HelveticaNeue-Roman.ttf')  format('truetype'), url('font/HelveticaNeue-Roman.svg#Helvetica') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica-75';
  src: url('font/HelvNeue75_W1G.eot?#iefix') format('embedded-opentype'),  url('font/HelvNeue75_W1G.woff') format('woff'), url('font/HelvNeue75_W1G.ttf')  format('truetype'), url('font/HelvNeue75_W1G.svg#Helvetica-75') format('svg');
  font-weight: normal;
  font-style: normal;
}




BODY, HTML
{
  background:#000000;
  font-family: Helvetica;
}

::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.overlay::-webkit-scrollbar {
  display: none;
}

#fadetext
{
font-family: 'Helvetica-75';
opacity:1;
transition: opacity 1s ease; /* Voeg een overgang toe voor een langzaam fade-out effect */
}

#orangelogo
{
z-index:3000;
display:block;
transition: opacity 2s ease; /* Voeg een overgang toe voor een langzaam fade-out effect */
opacity:1;
background:#000000;
}

#orangelogo VIDEO {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}


@media only screen and (max-width: 1024px) {
#orangelogo VIDEO {
 width: 100vw;
 height:auto;
}

.content .logo {
    width: 30% !important;
    position: absoute !important;
}

.content H1 {
    color: #ff7900;
    font-family: 'Helvetica-75';
    font-size: 2.8em;
    display:block;
    text-align: right !important;
    margin: 10px 0 0 20px;
}

}

.overlay {
  display: none;
    -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  transition: opacity 0.5s ease; /* Voeg een overgang toe voor een langzaam fade-out effect */
  object-fit: cover;
  overflow:hidden;
  position: fixed;
}

.overlayb {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100.1vh;
  z-index: 999;
  transition: opacity 0.5s ease; /* Voeg een overgang toe voor een langzaam fade-out effect */
  object-fit: cover;
}

#openOverlay
{
visibility:hidden;
opacity:1;
transition: opacity 0.5s ease;
}

#blocksContainer {
  overflow: hidden;
  position: relative; /* Zorg ervoor dat de absolute gepositioneerde blokken binnen deze container correct werken */
}

.blocks-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.block {
  width: 150px;
  height: 150px;
  background-color: #ff7900;
  position: absolute;
  display:block;
  opacity: 1;
}

#background-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.hid
{
display: none;
}

.hidden
{
visibility: hidden;
}

.blok
{
z-index:1500;
position: absolute;
top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%);
}

.grid-container {
    display: grid;
    position:fixed;
    grid-template-columns: repeat(auto-fill, 74px); /* Automatisch aantal kolommen met 75px breedte */
    grid-auto-rows: 74px; /* Hoogte van elke rij is 75px */
    grid-gap: -1px;
    border:0px;
    z-index: 1000;
    margin: 0 auto;
  justify-content: center;
     border-style: none;
 top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%);
}


.table-container {
    display: grid;
    position:fixed;
    grid-template-columns: repeat(12, 74px);
    grid-template-rows: repeat(6, 74px);
    grid-gap: -1px;
    z-index: 1100;
     border-style: none;
  justify-content: center;
     margin: 0 auto;
top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%);
}


.table-mob
{
z-index:1200;
display: grid;
    position:fixed;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%);
}

#enter
{
width: 70px;
    height: 70px;
}

.square {
    width: 74px;
    height: 74px;
    text-align:center;
    font-weight:bolder;
    color:#000000;
    border:1px solid #ffffff;
    box-sizing: border-box;
    display: flex;
     border-style: none;
    align-items: center;
    justify-content: center;
    
}

.squares {
    width: 74px;
    height: 74px;
    text-align:center;
    font-weight:bolder;
    color:#000000;
    border:1px solid #fed42c;
    display: flex;
    box-sizing: border-box;
     border-style: none;
    align-items: center;
    justify-content: center;
    
}

.square IMG
{
width:100%;
}

.square A
{
color:#000000;
text-decoration:none;
}

.table-content {
    background-color: black;
       display: flex;
       color: #ff7900;
    align-items: center;
    border:1px solid #000000;
    justify-content: center;
    padding-left:50px;
    padding-right:50px;
    text-align:center;
    font-size:16pt;
}


.black {
  background-color: black !important;
}

.white {
  background-color: white;
}

.transparent {
  background-color: rgba(255, 255, 255, 0); /* Transparant blokje */
}

.orange {
  background-color: #ff7900;
}

.content {
  position: relative;
  visibility: hidden;
  width:100%;
  z-index: 800;
  opacity:0;
  color: white;
  transition: opacity 1s ease; /* Voeg een overgang toe voor een langzaam fade-out effect */
}

.content .header
{
width:100%;
padding:20px;
box-sizing: border-box;
}

.content .logo
{
width:30%;
position:absolute;
}

.content .logo IMG
{
max-width:320px;
}

.content H1
{
    color: #ff7900;
    font-family: 'Helvetica-75';
    font-size: 3.5em;
    text-align: center;
    margin: 0;
}

.content .videoblok
{
width:80%;
padding-top:10vh;
padding-bottom:5vh;
margin-left:auto;
margin-right:auto;
display: grid;
    grid-template-columns: repeat(3, 33%);
    grid-template-rows: repeat(1, 33%);
    grid-gap: -1px;
    margin: 0 auto;
}


.video .microsoft
{
right:20px;
bottom:10px;
position:fixed;
width:9vw;
text-align:right;
}

.video .microsoft IMG
{
width:100%;
max-width: 15vw;
}

.video .orangelg
{
top:30px;
left:30px;
position:fixed;
width:15vw;
}

.video .orangelg IMG
{
width:100%;
    max-width: 15vw;
}

.content .videoblok H2:hover
{
color: #ff7900;
}

.content .stage
{
  align-items: center;
      justify-content: center;
    padding-left:50px;
    padding-right:50px;
    text-align:center;
 filter: blur(20px); /* begin met een blur */
    transition: filter 1.0s ease; /* voeg overgangen toe aan filter en opacity */
    opacity: 1; /* begin met de inhoud verborgen */
}
.content .stage.loaded
{
 filter: blur(0); /* maak de blur nul */
    opacity: 1; /* maak de inhoud zichtbaar */
}


.content .stage IMG
{
width:100%;
cursor: pointer;
}


.content .stage H2
{
color: #ffffff;
font-family:'Helvetica';
font-size:1.4em;
font-weight:bold;
cursor: pointer;
}

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


.video .microsoft
{
right:0;
bottom:20px;
position:fixed;
width:40vw;
text-align:right;
}

.video .microsoft IMG
{
width:100%;
max-width: 30vw;
}

.video .orangelg
{
top:20px;
left:10px;
position:fixed;
width:40vw;
}

.video .orangelg IMG
{
width:100%;
    max-width: 30vw;
}

#orangelogo
{
  display: flex;
  align-items: center;
  justify-content: center;
}

#orangelogo VIDEO {
width:100%;
height:auto;
top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%);
}

  .content .logo
  {
  position:relative;
  width:100%;
  text-align:center;
  padding-bottom:10px;
  }

  .content .logo IMG
{
max-width:100%;
}

.content H1
{
    color: #ff7900;
    font-size: 2.0em;
    text-align: center;
    margin: 0;
}

.content .videoblok
{
width:100%;
 grid-template-columns: repeat(2, 100%);
    grid-template-rows: repeat(1, 100%);
  display:block;
  padding-top:0px;
}

.content .stage
{
  align-items: center;
      justify-content: center;
    padding-left:50px;
    padding-right:50px;
    display:block;
    text-align:center;
}

.content .stage IMG
{
width:80%;
cursor: pointer;
}

.content .stage H2
{
display:block;
width:100%;
}

}

.mobbig
{
display:inline-grid;
}

.mobsmall
{
display:none;
}

@media only screen and (max-width: 600px) {
.mobbig
{
display:none;
}

.mobsmall
{
display:inline-grid;
}

.overlayb
{
overflow:hidden;
height:100vh;
}


.mobsmall
{
 grid-template-columns: repeat(4, 74px) !important;
    grid-template-rows: repeat(6, 74px) !important;
}

.table-content
{
padding-left:15px;
padding-right:15px;
}

}





.content .getintouch
{
    text-align:center;
    display:block;
}

.content .getintouch IMG
{
max-width:75px;
}

.content .getintouch H3
{
color: #ffffff;
font-size:16pt;
font-weight:bold;
}

.video
{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index:1600;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0);
  opacity: 1;
   transition: opacity 2s ease; /* Voeg een overgang toe voor een langzaam fade-out effect */
}

.video .videotekstvlak
{
color:#ffffff;
top: 120px;
left:30px;
position:fixed;
display:none !important;
line-height:17pt;
width:300px;
font-size:13pt;
font-family: 'Helvetica-75';
}

.video .videotekstvlak .textorange
{
font-size:17pt;
font-family: 'Helvetica-75';
color:#ff7900;
}

.video .buttons
{
position:fixed;
z-index:1650;
right:20px;
top:30px;
}


.video .buttonsbottom
{
position:fixed;
z-index:1651;
left:30px;
bottom:30px;
}


.video IMG
{
max-width:50px;
padding-right:10px;
}

.video VIDEO
{
  width:100%;
  height: 100%;
  cursor: pointer;
  float:left;
}


.video-container {
  width: 100%;
  height: 100%;
}

.timeline {
  width: 5px;
  right:30px;
  top:100px;
  position: fixed;
  z-index:1652;
  height:55vh;
}

.marker {
  width: 100%;
  height: 18vh;
  margin-bottom:10px;
  background-color: #ffffff;
  position:relative;
  cursor: pointer;
}

.marker.active {
  background-color: #ff7900; /* Kleur veranderen naar oranje wanneer actief */
}



.timeline2 {
  width: 5px;
  right:30px;
  top:100px;
  position: fixed;
  z-index:1652;
  height:55vh;
}

.marker2 {
  width: 100%;
  height: 18vh;
  margin-bottom:10px;
  background-color: #ffffff;
  position:relative;
  cursor: pointer;
}

.marker2.active {
  background-color: #ff7900; /* Kleur veranderen naar oranje wanneer actief */
}




.timeline3 {
  width: 5px;
  right:30px;
  top:100px;
  position: fixed;
  z-index:1652;
  height:55vh;
}

.marker3 {
  width: 100%;
  height: 18vh;
  margin-bottom:10px;
  background-color: #ffffff;
  position:relative;
  cursor: pointer;
}

.marker3.active {
  background-color: #ff7900; /* Kleur veranderen naar oranje wanneer actief */
}




.formContainer
{
position: fixed;
width:100%;
height:100%;
top:0;
left:0;
  z-index:1700;
  background-color: black;
  padding: 20px;
 display:none;
 color:#ffffff;
 text-align:center;
  transition: bottom 0.5s ease; 
}

/* Voeg een fade-in effect toe aan het formulier container */
.formContainer.fade-in {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.formContainer .buttons
{
position:fixed;
z-index:1750;
right:40px;
top:20px;
}

.formContainer .buttons IMG
{
max-width:50px;
padding-right:10px;
}