/* |--------------------------------------------------------------------------------------------------------------|
   |                                                                                                              |
   | Onderstaand de "Food Colours" kleurenset. Voor een overzicht met de desbetreffende kleuren zie webpagina     |
   | https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_colors_food_lib                                  |
   |                                                                                                              |
   |--------------------------------------------------------------------------------------------------------------| */    

.apple       {color:#76cd26;}
.aspargus    {color:#77ab56;}
.apricot     {color:#ffb16d;}
.aubergine   {color:#3d0734;}
.avocado     {color:#87a922;}
.banana      {color:#fafe4b;}
.butter      {color:#ffff81;}
.blueberry   {color:#464196;}
.carrot      {color:#e67e22;}
.cherry      {color:#cf0234;}
.chocolate   {color:#411900;}
.cranberry   {color:#9e003a;}
.coffee      {color:#a6814c;}
.egg         {color:#fffcc4;}
.grape       {color:#6c3461;}
.kiwi        {color:#8ee53f;}
.lemon       {color:#fdff52;}
.lime        {color:#bffe28;}
.mango       {color:#ffa62b;}
.mushroom    {color:#ba9e88;}
.mustard     {color:#ceb301;}
.mint        {color:#c0fa8b;}
.olive       {color:#6e750e;}
.orange      {color:#f97306;}
.pea         {color:#a4bf20;}
.peach       {color:#ffb07c;}
.pear        {color:#cbf85f;}
.pistachio   {color:#c0fa8b;}
.plum        {color:#3f012c;}
.pomegranate {color:#c0392b;}
.pumpkin     {color:#d35400;}
.raspberry   {color:#b00149;}
.saffron     {color:#feb209;}
.salmon      {color:#ff796c;}
.spearmint   {color:#1ef876;}
.squash      {color:#f2ab15;}
.strawberry  {color:#fb2943;}
.tomato      {color:#ec2d01;}
.wheat       {color:#fbdd7e;}
.wine        {color:#80013f;}   
   

/* |-------------------------------------------------------|
   |                                                       |
   | Hier begint de definitie van de responsieve structuur |
   |                                                       |
   |-------------------------------------------------------| */   

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   max-width:100%;
   margin: 0 auto;
  }

html, body {
            background-color:#FFFFFF;     /* Declaratie witte achtergrondkleur           */
            color:rgb(0, 0, 0);           /* Standaard kleur zwart voor de lettertekens  */
            font-size:22px;               /* Standaard fontgrootte op het scherm         */
	        height:100%;    
	        font-family:calibri, Calibri, CALIBRI, orbitron, Orbitron, ORBITRON, Courier Std, Arial, Helvetica, sans-serif;
           }
  
/* |-------------------------------------------------------|
   |                                                       |
   | De status van de diverse hyperlinks in de applicatie. |
   | Onderstaand is de verplichte volgorde voor de layout. |   
   |                                                       |
   |-------------------------------------------------------| */ 			   

/* nog niet bezochte link */
a:link {
        color:#000000;
        text-decoration:none;
       }

/* bezochte link */
a:visited {
           color:#000000;
           text-decoration:none;
          }

/* hoveren met de muis */
a:hover {
         color:#000000;
         text-decoration:none;
         }

/* geselecteerde link */
a:active {
          color:#000000;
          text-decoration:none;
         }			   
		 
/* |----------------------|
   |                      |
   | Diverse declaraties  |   
   |                      |
   |----------------------| */ 	
   
.vertLijn {
           border-left:4px solid #cf0234;
           height:100%;
 }

/* ------------------------------------------------------------------------ */
/*                                                                          */
/* De CSS Class die de standaard layout van de buttons in de applicatie re- */
/* gelt, te weten een specifieke achtergrond- & letterkleur.                */
/*                                                                          */
/* ------------------------------------------------------------------------ */

.button {                          
        background-color:#fbdd7e;
        color:#000000;   
        border: 2px solid black;
		border-bottom:4px solid #808080;  /* grijstint donker */
        border-right:3px solid #BEBEBE;   /* grijstint licht */ 
        border-radius:5px;  
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 18px;
        font-weight:bold;
       }

.button:hover {
               background-color:#77ab56;
               color:#ffffff;
			  }  	   
  
a:link, a:active {                       /* De opmaak van de hyperlinks die parallel lopen   */  
                  text-decoration:none;  /* met de opmaak van de buttons, omdat de links in  */
				  color:black;           /* combinatie met de buttons worden gebruikt.       */
                 }
		
/* ------------------------------------------------------------------------ */
/*                                                                          */                                                                     
/* Onderstaande <STYLE> genereert de layouts/design van de twee buttons     */
/* die standaard rechtsonder op een webpagina verschijnen, waarbij één      */
/* button naar de landing page navigeert, en de andere button naar de bo-   */
/* venkant van de huidige pagina.                                           */  
/*                                                                          */
/* Dit is handig als hij via een zoekmachine op deze pagina terechtkomt,    */
/* maar via de index-pagina INDEX.HTML het standaard-menu en de hoofdpa-    */    
/* gina wil bekijken en gebruiken.                                          */
/*                                                                          */                                                                     
/* ------------------------------------------------------------------------ */  

#indexBtn, #scrollBtn {
                       position:fixed;            
                       bottom: 20px;
		               background-color:#fbdd7e;
                       border:2px solid black;
					   border-radius:5px;
		               border-bottom:4px solid #808080;
                       border-right:2px solid #BEBEBE;
		               color:#000000;
		               padding:3px 10px;
		               text-align:center;
                       text-decoration:none;
                       display:inline-block;
                       font-size:18px;
		               right:95px;
	                   width:75px;
                       height:40px; 	
					   z-index:1;   
                      }
#indexBtn:hover {
                 background-color:#77ab56;
                 color:#ffffff;              
                }
#scrollBtn {
            right:10px;
           }
#scrollBtn:hover {
                  background-color:#77ab56;
                  color:#ffffff;             
                 }		   										

/* ------------------------------------------------------------------------ */
/*                                                                          */
/* De CSS Classes die nodig zijn om de <h> tags, voor de diverse hoofdstuk- */
/* en paragraaf-aanduidingen, op te maken. Overige opmaakdefinities zijn    */
/* tevens in onderstaande CSS-sectie te vinden.                             */
/*                                                                          */
/* ------------------------------------------------------------------------ */

 h1 {                                    /* Dit is een hoofdstuktitel   */
     font-size:36px;
     color:#cf0234;                      /* Lettertypekleur = ".cranberry" */
    }
  
 h2 {                                    /* Dit is een hoofdstuktitel       */
     font-size:32px; 
     color:#9e003a;                      /* Lettertypekleur = ".strawberry" */
    }

 h3 {                                    /* Dit is een paragraaf-titel    */
     font-size:25px;
     color:#cf0234;                      /* Lettertypekleur = ".cherry" */
    }

 h4 {                                    /* Hoofdstuktitel voor een Pop-Up venster  */
     font-size:20px;
     color:#3d0734;                      /* Lettertypekleur = ".aubergine" */
    }
                                
hr.saffronsmall {
                 width:100%;
                 border: 1px solid #feb209;    /* Kleur van de horizontale lijn is ".saffron"    */  
                 border-radius: 5px;           
                }            

hr.yellow {
            width:100%;
            border: 2px solid #F5DF4D;  
            border-radius: 5px;
           }