/* Global Defaults */
/* blauw #229BC8 lichter:#33ACD9 donker: #003562 */
/* groen #2E8D33 donker: #0C5B11 */ 
/* oranje #E6953A lichter:#F7DCBF */

/* Serif - 	Times New Roman - Georgia - Garamond  */
/* Sans-serif	Arial - Verdana - Helvetica - CORBEL  - San Francisco (apple) */
/* Monospace	Courier New - Lucida Console - Monaco */
/* Cursive -	Brush Script MT - Lucida Handwriting  */
/* Fantasy -	Copperplate - Papyrus */

/* screen font size
 320px  16px (eg: iPhone 4 & 5)	
 768px  18px (eg: iPad portrait)	18px
1024px  19px (eg: iPad landscape)
1280px	20px
1536px	21px
1920px	23px HD
2560px	25px 

cm	centimeters
mm	millimeters
in	inches (1in = 96px = 2.54cm)
px  pixels (1px = 1/96th of 1in) are relative to the viewing device
pt	points (1pt = 1/72 of 1in)
pc	picas (1pc = 12 pt)

em	  Relative to the font-size of the element (2em means 2 times the size of the current font)	
ex	  Relative to the x-height of the current font (rarely used)	
ch	  Relative to width of the "0" (zero)	
rem  	Relative to font-size of the root element	
vw	  Relative to 1% of the width of the viewport*	
vh	  Relative to 1% of the height of the viewport*	
vmin	Relative to 1% of viewport's* smaller dimension	
vmax	Relative to 1% of viewport's* larger dimension	
%	    Relative to the parent element

Tip: The em and rem units are practical in creating perfectly scalable layout!
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.
* object-fit * object-position * clip-path

h1 Headings
h2 Subheadings
h3 Paragaph text   17pt     //iOS’s default font size is 17px SF Pro and secondary font size is 15px //   
h4 Secondary text  15pt
h5 Tertiary text   13pt
h6 Input fields 

1px = 1/96inch = 0.026cm => viewport 20cm => 1vw = 0.2 cm 
*/


html{ box-sizing:border-box}*,*:before,*:after{box-sizing:inherit }
html{ -webkit-text-size-adjust:100%; }
 
body{ display:flex; flex-direction:column; text-align:left; min-height: 100vh; margin:0; font-family:corbel,sans-serif; width:100vw; } 
main{ position:absolute; left:0px; top:0px; padding:0px; background-color: #003562; background-attachment:fixed; z-index:1; } 

.header{ position:fixed;   top:10px; right:15px; width:auto; padding:5px; text-align:center; background-color: #2E8D33; z-index:7; } 
.footer{ position:fixed; bottom:9px; right:15px; width:auto; padding:9px; text-align:center; background-color: #2E8D33; z-index:7; }

li    { list-style-type: square; }
li li { list-style-type: disc; }

hr { display: block; height:5px; background-color:#2E8D33; }

 h1 { font-size: 4vh;  color:#E6953A; font-weight:800; line-height:110%; text-shadow: 1px 1px 1px #000;}
 h2 { font-size: 3vh;  color:#229BC8; font-weight:800; }
 h3 { font-size: 2vw;  color:#003562; font-weight:400; }
 h4 { font-size: 2vh;  color:#FFFFFF; font-weight:400; }
 h5 { font-size: 1vw;  color:#FFFFFF; font-weight:400; }
 h6 { font-size: 2vw;  color:#003562; font-weight:400; }
 
 .foto { height:fit-content; width:49%; border:none; margin:1%; }
 .icon { inline-size: 1.5rem; height:fit-content; border:none; margin:3%; float:right;}
 .knop { height:29px; border:none; }  /* hamburger */
 .link { inline-size: 2rem; height:fit-content; border:none; }
 .logo { inline-size: 11rem; height:fit-content; border:none; float:left; padding:1rem;}
 .pltj { width:99%; border:0px; height:auto; }

 .grid { display: grid; grid-template-columns: 45% 45%;}
 .grid > div { padding: 2vh 0 1vh 3.0rem; border-radius: 0.1rem; }

  a:link     { color: #FFFFFF; text-decoration: none;}
  a:visited  { color: #FFFFFF; text-decoration: none;}
  a:hover    { color: #FFFFFF; background-color: #E6953A; box-shadow: 0px 8px 10px 0px #2E8D33; text-decoration: none;}
  a:active   { color: #E6953A; background-color: #FF8888; text-decoration: underline;}

/* NAVIGATIE MENU */
    .dropknop { display:inline-block; background-color:#229BC8; border:none; margin:0px; cursor:pointer;  overflow: hidden; }
    .dropdown { position:sticky; top: 0px; left:0px; padding-left:20px; margin:0px; width:100%; height:34px; background-color: #229BC8; z-index: 6; } 
    .dropmenu { display:none; position:absolute; background-color:#229BC8; min-width:252px; padding-left:10px; padding-right:10px; box-shadow: 0px 8px 10px 0px #2E8D33; } 
    .dropmenu a { display:inline-block; color:#FFF; font-size:1.5rem; background-color:#33ACD9; width:100%; line-height: 150%; text-decoration:none; padding: 0px 8px 0px 8px; margin-bottom:8px; } 
    .dropmenu a:hover {background-color: #E6953A; box-shadow: 0px 8px 10px 0px #2E8D33; padding: 0px 11px 1px 11px;}  /* breder oranje */
 /* .dropmenu a:active { background-color: #E6953A; box-shadow:none; } */
    .dropdown:hover .dropmenu { display:block; width:200px; }



 #home{ background-image: url("images/digikunde1 (VGA).jpg"); }
 #land{ background-image: url("images/digikunde5 (VGA).jpg"); }
 #safe{ background-image: url("images/digikunde7 (VGA).jpg"); }
 #ware{ background-image: url("images/digikunde3 (VGA).jpg"); }
 #info{ background-image: url("images/digikunde6 (VGA).jpg"); }

 .back { 
   height: 100vh; width:100vw;
   border:0px;
   background-position:center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;
   image-rendering:smooth; filter:opacity(97%); -webkit-filter:opacity(97%); /* transparant */
  } 


  .frame0 { 
    position:relative; text-align:center; top: 7vh;
    width: 44%; margin-left: 4%; padding: 1px;
    border: 0px; background-color: #EEED; /* transparant */
    z-index: 5;
  } 


  .frame1 { 
    position:relative; text-align:left; top: 5vh; height:auto;
    width: 83%; margin-left: 11%; padding: 5%;
    border: 1px; background-color: #EEEE; /* transparant */
    z-index: 4;
  } 


  .frame2 { 
    position:relative; text-align:left; top: 30vh;
    width: 90%; margin-left: 8%; padding: 5%;
    border: 1px; background-color: #EEED; /* transparant */
    z-index: 3;
  } 

  .frame3 { 
    text-align:center; height:auto;  
    padding: 1%;
    border: 0px;     
    background-position:center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed;
    image-rendering:smooth; 
  }

  .frame4 { 
    text-align:left; height:auto; position:relative; top: 5vh; 
    width: 83%; margin-left: 11%; padding: 1%;
    border: 1px; background-color: #E6953A; background-image: url("images/digikunde2 (VGA).jpg");
    background-position:center; background-repeat:no-repeat; background-size:contain; background-attachment:fixed;
    image-rendering:smooth; filter:opacity(90%); -webkit-filter:opacity(90%); /* transparant */
    z-index: 4;
  } 



/* RESPONSIVE SCREENS */   /* RESPONSIVE SCREENS */   /* RESPONSIVE SCREENS */   /* RESPONSIVE SCREENS */
@media screen and (max-aspect-ratio: 1/3) {
   .grid { grid-template-columns: 99%; }
  }


/* RESPONSIVE SCREENS DESKTOP */
@media screen and (max-width: 1920px) {
  h1 { font-size:  4vh; }
  h2 { font-size:  3vh; }
  h3 { font-size:  2vw; }
  h4 { font-size:  2vw; }
  h5 { font-size:  1vw; }
  h6 { font-size:  2vw; }
}

/* RESPONSIVE SCREENS TABLET */
@media screen and (max-width: 1080px) {
  h1 { font-size:  3vh; }
  h2 { font-size:  3vh; }
  h3 { font-size:  2.5vw; }
  h4 { font-size:  2vw; }
  h5 { font-size:  1vw; }
  h6 { font-size:  2vw; }

  #back20{ background-image: url("images/WP20P.jpg"); }
  #back33{ background-image: url("images/WP33P.jpg"); }
 }

/* RESPONSIVE SCREENS MOBIEL */
@media screen and (max-width: 740px) {
  h1 { font-size:  32px; }
  h2 { font-size:  26px; }
  h3 { font-size:  20px; }
  h4 { font-size:  20px; }
  h5 { font-size:  22px; }
  h6 { font-size:  16px; }

  .grid { grid-template-columns: 99%; }
  .frame0 { width: 70%; margin-left: 1%; padding: 1%; }
  .frame1 { width: 94%; margin-left: 4%; padding: 2%; }
  .frame2 { width: 99%; margin-left: 1%; padding: 1%; }
  .frame3 { width: 99%; margin-left: 0%; padding: 0%; }
  .frame4 { width: 99%; margin-left: 0%; padding: 0%; }

  #back20{ background-image: url("images/WP20P.jpg"); }
  #back33{ background-image: url("images/WP33P.jpg"); }
}

/* EINDE RESPONSIVE SCREEN */