@charset "UTF-8";

/* --------------------------------------------------------- */ 
/*                                                           */
/* bootstrap CSS3 file voor de Webbased SCROLLZ Applicatie   */
/*                                                           */
/* --------------------------------------------------------- */
  
@font-face {
            font-family:'Calibri';              /* FONT type declaratie werkt ook onder OS X van Apple */
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),
                 url('calibri.eot')
                 format('opentype');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),
                 url('calibri.eot')
                 format('embedded-opentype');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('calibri.otf')
                 format('opentype');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('calibri.woff')
                 format('woff');                 
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('calibri.ttf')
                 format('truetype');
                 
/* De WOFF files zijn noodzakelijk om het font in Microsoft EDGE te kunnen weergeven */  

            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri.woff')
                 format('woff');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri.woff2')
                 format('woff2');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-Bold.woff')
                 format('woff');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-Bold.woff2')
                 format('woff2');                 
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-BoldItalic.woff')
                 format('woff');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-BoldItalic.woff2')
                 format('woff2');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-Italic.woff')
                 format('woff');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-Italic.woff2')
                 format('woff2');
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-Light.woff')
                 format('woff');                 
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-Light.woff2')
                 format('woff2');                 
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-LightItalic.woff')
                 format('woff');	
            src: local('calibri'),
                 local('Calibri'),
                 local('CALIBRI'),                 
                 url('Calibri-LightItalic.woff2')
                 format('woff2');	
	   
           /* De tweede externe FONT-family voor de website */
	                
            font-family:'Orbitron';
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('orbitron-medium.otf')
                 format('opentype');
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('orbitron-bold.otf')
                 format('opentype');
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('Orbitron.ttf')
                 format('truetype');				 
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('Orbitron Black.ttf')
                 format('truetype');				 
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('Orbitron Bold.ttf')
                 format('truetype');				 		 
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('Orbitron-light.ttf')
                 format('truetype');				 

/* De WOFF files zijn noodzakelijk om het font in Microsoft EDGE te kunnen weergeven */  

            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('orbitron-v25-latin-regular.eot')
                 format('embedded-opentype');
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('orbitron-v25-latin-regular.svg')
                 format('svg');                 
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('orbitron-v25-latin-regular.woff')
                 format('woff');
            src: local('orbitron'),
                 local('Orbitron'),
                 local('ORBITRON'),
                 url('orbitron-v25-latin-regular.woff2')
                 format('woff2');
            }                

/* Een extra declaratie om de font-family import in Microsoft EDGE te garanderen */            
            
@import 'fonts';        
@media screen and (min-width: 10px) {
                                     @font-face {
                                                 font-family: 'Orbitron';
                                                 src: url('orbitron-v25-latin-regular.woff2') format('woff2');
                                                 font-family:'Calibri';
                                                 src: url('Calibri.woff2') format('woff2');                                                 
                                                }
                                    }
                 
/* |--------------------------------------------------------------------------------------------------------------|
   |                                                                                                              |
   | Voor verdere uitleg en informatie over de font-type declaraties zoals hierboven gebruikt, zie de website:    | 
   |  http://www.webdesignerdepot.com/2013/01/how-to-use-any-font-you-like-with-css3/                             |
   |  https://google-webfonts-helper.herokuapp.com/fonts/orbitron?subsets=latin                                   |
   | https://stackoverflow.com/questions/40155468/media-queries-with-css3-and-font-face                           |
   |                                                                                                              |
   |--------------------------------------------------------------------------------------------------------------| */ 

/* |--------------------------------------------------------------------------------------------------------------|
   |                                                                                                              |
   | 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 web structuur met de <body> definiëring   */                     

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0 auto;
  }

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         */
      margin-left:50px;
	  margin-right:50px;
	  margin-top:10px;
	  margin-bottom:50px;
      font-family:calibri, Calibri, CALIBRI, orbitron, Orbitron, ORBITRON, Arial, Helvetica, sans-serif;
     }
          
/* ------------------------------------------------------------------------ */
/*                                                                          */                                                                     
/* 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;             
                 }