.head {
  position: sticky;
  top: 0px;
  z-index: 2000;
}
.body {
    font-family: kontora; 
    background-color: #dddddd;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
    top: 0px;
  z-index: 200;
}

.header {

  background: #dddddd;
    z-index: 2000;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}

}
.bg-text {
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.4);
    color: white;
    font-weight: bold;
    border: 2px solid #f1f1f1;
    position: absolute;
    top: 40%;
    left: 10%;
    z-index: 1;
    width: 80%;
    padding: 15px;
    text-align: center;
    border-radius:50px;
  }

.bg-image {
  background-image: url("images/informatica5.jpg");
  filter: blur(0px);
  -webkit-filter: blur(0px);
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
        z-index:5;

}
  table {  
      border-collapse: collapse;
   padding:10px;
  }

  table.center {
	    margin-left:auto; 
	    margin-right:auto;
  }
td{
  text-align: left;
}
  
ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #E3969D;    /* Kleur menubalk; oorspronkelijk #333 */


	}

li {
      float: left;
  }

  li a{
    display: block;
  color: white;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;

  }

  li a:hover{
      background-color: black;   
  }
.active {
  background-color: black;
}


.menufont {
font-family: Verdana, Geneva, sans-serif;
font-size: 22px;
letter-spacing: 0.4px;
word-spacing: -2.2px;
color: white;
font-weight: 400;
text-decoration: none;
font-style: normal;
font-variant: small-caps;
text-transform: lowercase;
}

.headerfont {
font-family: Verdana, Geneva, sans-serif;
font-size: 40px;
letter-spacing: 6px;
word-spacing: 2px;
color: #FFFFFF;
font-weight: 700;
  text-align:center;
}

.kopje-content {
  display: inline-block;
  color: yellow;
  background-color: #FFFFFF;
}

.kopje {
  list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #E3969D;   
  	  z-index: 1;
  padding: 10px 40px;
  opacity: 75%;
}


  .hyper:link {
      color: lightblue;
  }


.video-placeholder {
    position: relative;
    width: 420px;
    height: 315px;
    background-color: #083D77;
    text-align: center;
  vertical-align: center;
  }

.demoFont {
font-family: Verdana, Geneva, sans-serif;
font-size: 27px;
letter-spacing: 3.6px;
word-spacing: -2.6px;
color: #EBEBD3;
font-weight: 400;
text-decoration: none;
font-style: italic;
font-variant: normal;
text-transform: lowercase;
  margin: auto;
 vertical-align: center;
  position: absolute;
  top: 120px;
  text-align: center; 
  width: 100%;
}

.video-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.video-placeholder:hover .video-embed {
  opacity: 1;
}



.video-placeholder.hover:hover .video-embed {
  opacity: 0;
}
.video-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-between;
  gap: 10px 30px;
}

.column {
  float: left;
  width: 50%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row {
  display: flex;
}

.column {
  flex: 50%;
}

footer {
  text-align: center;
  padding: 3px;
  color: white;
        background-color: #E3969D; 

}
.dropbtn {
  background-color: #E1969D;
  color: white;
  padding: 16px;
  border: none;
  cursor: pointer;
}

li.dropdown {

  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
  z-index: 5;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color:BLACK;
}