body
{font-family: Arial, Sans-serif}


h1, h2, h3, h4, h5, h6
{font-family: Arial, Sans-serif;
 color: #808080; 
 padding: 1em}


h1.nt
{background-color: #F8C471;
 font-size: 24pt;}

h2.nt
{background-color: #FAD7A0;
 font-size: 18px;}

h3.nt, h4.nt
{background-color: #F9E79F}

img.center
  {display: block;
  margin-left: auto;
  margin-right: auto}

img.text
  {display: inline-block;
   vertical-align: baseline;}

a.button
{border: none;
 color: white;
 width: 200px;
 padding: 6px 12px;
 text-align: center;
 font-size: 11pt;
 display: inline-block;
 text-decoration: none;
 margin-top: 6px;
 margin-bottom: 6px;
 margin-right: 6x;
 margin-left: 6px}

a.button-bruin
{background-color: #935116}

a.button-grijs
{background-color: #AAB7BB}

a.button-groen
{background-color: #4CAF50;}

a.button-oranje
{background-color: orange}

a.button-rood
{background-color: red;}

a.button-blauw
{background-color: navy}

a.button-bleu
{background-color: #33809e;}

a.button-zwart
{background-color: black;}

a.button-rose
{background-color: #FF7777;}

a.button-zeegroen
{background-color: #3CB371;}

p.kopH2
{font-size: 18pt;
 font-family: Arial, Sans-serif;
 color: #808080; 
 padding: 1em;
 background-color: #FAD7A0}

.topnav {
  overflow: hidden;
  background-color: DarkOliveGreen;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: Beige;
  color: DarkOliveGreen;
}

.scrolling-text-container {
    background-color: Orange;
    border-radius: 4px;
    overflow: hidden;
}

/* Inner container styles */
.scrolling-text-inner {
    display: flex;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 0;
}

/* Text styles */
.scrolling-text
{display: flex;}

.scrolling-text-item
{padding: 0 30px;}

/* Apply the animation to the text items */
.scrolling-text-inner>div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}

/* Pause the animation when a user hovers over it */
.scrolling-text-container:hover .scrolling-text-inner>div {
    animation-play-state: paused;
}

/* Setting the Animation using Keyframes */
@keyframes scroll-left {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-100%);}
}

@keyframes scroll-right {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(0%);}

table
{vertical-align: top;
 border: 1px solid black;
 border-collapse: collapse}

th.sxm
{text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 17px;}

tr
{vertical-align: top}

td
{vertical-align: top;
 border: 1px solid black;
 padding: 0.3em}

td.nt
{text-align: center}


.red
{color: #FF0000}

.rood
{background-color: #FF0000;
 color: white}
 
.zwart
 {background-color: #000000;
 color: white}