body {
   margin: 0;
   padding: 0;
   font-family: 'Lato';
font-weight:normal;
font-style:normal;
text-align: center;
color: white;
    }





.video-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   z-index: 0;
}


#background-video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 0;
}


.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
}


header {
   position: relative;
   color: #fff;
   text-align: center;
   padding: 50px 0;
   z-index: 1;
}


.header-content {
   position: relative;
   z-index: 2;
}


h1 {
   font-size: 3em;
}


nav ul {
   list-style: none;
   padding: 0;
   margin: 0;
}


nav ul li {
   display: inline;
   margin-right: 20px;
}


nav a {
   text-decoration: none;
   color: #fff;
   font-weight: bold;
   font-size: 1.2em;
   transition: color 0.3s ease-in-out;
}


nav a:hover {
   color: #ffd700; /* Verander deze kleur naar je gewenste hover-kleur */
}


@font-face {
   font-family: 'lemon_milkmedium_italic';
   src: url('lemonmilk-mediumitalic-webfont.woff2') format('woff2'),
        url('lemonmilk-mediumitalic-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;


}
h2 {
   color:white
}

text {
   color:white
}

.forum-container{
   position: absolute;
   text-align :center;
   width: 100%;
   margin-top: 30px;
}


.square{
   position: center;
     margin: 10%;

 background: black;
 line-height: center;
 height: 800px;
 font-size: 18px;
 font-family: 'monospace';
}

.producten-container{
   width: 50%;
   color: white;
   z-index: 1;
}

.inlog-container {
   width: 50%;
   color: white;
   z-index: 1;
}


.box{
  position: middle;
  margin: 10%;

  width: 80%;
  background-color: rgb(83, 76, 76);
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

.tabel{
   text-align: center;
}

.inlog-container{

   display: grid;
   place-items: center;
   margin-top: 2u;
   margin-left: 25%;
}

  table#t01 tr:nth-child(even) {
      background-color: #676666;
  }
  table#t01 tr:nth-child(odd) {
      background-color: black;
  }
  table#t01 th {
      background-color: black;
  }
  th {
      color: white;
  }
  table.center {
	    margin-left:auto; 
	    margin-right:auto;
  }

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

.zondervideo{
   background-image: url("zondervideo.jpg");
}

.grid-container{
   display: grid;
   grid-template-columns: 30% 30% 30%;
      margin-left: 5%;
      grid-column-gap: 2%;
      margin-top: 1%;
      grid-row-gap: 2%;
      margin-bottom: 15%;
}

.grid-item{
   width: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
      border-radius: 6px 6px 6px 6px;
}

.grid-item:hover {
   box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.514);
}

.grid-item:hover h3
 {
      color: #ffd700;
 }

.grid-container img{
   width: 98%;
   border-radius: 6px 6px 6px 6px;
   padding-top: 5px;
   padding-left: 5px;
   padding-right: 5px;
}

.grid-container h3{
   margin-left: 3%;
   text-transform: uppercase;
   color: white;
}

.dark{
background-color: rgba(0, 0, 0, 0.7);
margin-bottom: 0;
}

h1{
   font-family: 'lemon_milkmedium_italic';
}

.header-content{
   font-family: 'lemon_milkmedium_italic';
}

.beschrijving-container{
background-color:   rgba(0, 0, 0, 0.5);
margin-top: 0;
}

.beschrijving-container h3{
   padding: 2%;
   text-align: left;
   color: white;
}

hr{
   display: block;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      margin-left: 2%;
      margin-right: 2%;
      border-style: inset;
      border-width: 1px;
}

.footer{
   background-color: rgba(0, 0, 0, 0.6);
   padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
}

.footer h3{
   font-family: 'lemon_milkmedium_italic';
   text-decoration: none;
   text-transform: uppercase;
   color: white;
   white-space: nowrap;
   display: flex;
}

.footer .contactfooter{
   font-family: 'lemon_milkmedium_italic';
   text-decoration: none;
   text-transform: uppercase;
   color: white;
   text-align: left;
   white-space: nowrap;
   float: left;
   margin-left: 10px;
}

.footer .copyfooter{
   text-align: center;
   white-space: nowrap;
   margin-left: 38%;
}

.footer a:hover
{
color: #ffd700;
}

.footer a{
   transition: color 0.3s ease-in-out;
}

a.active {
    color: white;
}

                #slideshow {
                    max-width: 50%;
                    margin: auto;
                    overflow: hidden;
                    border: 2px solid black;
                    background: white;
                }
        
                .slides {
                    display: flex;
                    transition: transform 0.5s ease-in-out;
                }
        
                .slide {
                    min-width: 100%;
                    box-sizing: border-box;
                }
        
                @media screen and (max-width: 600px) {
                    #slideshow {
                        max-width: 100%;
                    }
                }