/* Global variables */
:root {
	--hg_header_width: 98%;
	--hg_header_height:auto;/*calc(var(--hg_header_width) / 15);*/
	--hg_rand_width: 2px;
	--hg_header_text_size: 3vmax;
	
	--hg_header_text_color:#f6e52a;
	
	--hg_achtergrd_klr : #1cff3c;
	--hg_grond_klr : #1ac445;
	--hg_grond_klr1 : Yellow;
	--hg_rand_klr : #1a7b0c;
	--hg_rand_klr1:#134e0d;
	--hg_rand_klr3:Yellow;
	--hg_linkveld_klr : #00FF00;
	--hg_linkveld_hov_klr: Yellow ;
	--hg_linkveld_bg_klr: #CAA911;
	--hg_tekstveld_klr :#00FF00;
  
	--hg_img_width:44vw;
	--hg_img_padd:0vw;
	--hg_img_marg:1vw;
	
	--hg_br:4;
}

/* Algemene Instellingen*/


#header {
	position: fixed;
	z-index: 1;
	width: 98%;
	height:13vmin;/*auto*/
	/*height: calc(var(--hg_header_height) - var(--hg_rand_width));*/
	
	left: 0px;
	top: 0px;
	margin:5px;
	border: var(--hg_rand_width) solid var(--hg_rand_klr1);
	background-color:var(--hg_grond_klr);
	text-align: center;
	overflow: hidden;
}


#header h1{ font-size: var(--hg_header_text_size);
    letter-spacing: 0.1em;
	text-align: center;
	color:var(--hg_header_text_color);
    top:10px;
}


.flag-right {
    
    /*float: left;*/
	position: absolute;
	right : 2vmax;
	z-index: 2;
	top : 10px;
	width: 4vmax;
	height: auto;
	border: 1px solid var(--pt_rand_klr);
	}
	
.flag-left {
	position: absolute;
	left : 2vmax;
	z-index: 2;
	top : 10px;
	width: 4vmax;
	height: auto;
	border: 1px solid var(--pt_rand_klr);
    box-shadow:2px 2px;
	}	
	


/*HOOFDVENSTER*/

#hoofd { 
    position: absolute;
	z-index: 0;
    top:16vmin;
    left:0px;
    width: 98.3%;
    
    /*calc(var(--hg_header_width) - var(--hg_rand_width));*/
    margin:5px;
	box-sizing: border-box;
	border: 2px solid var(--hg_rand_klr1);;
	background-color: var(--hg_grond_klr1);
	
	
	overflow : hidden;

}


#hoofd h1{
	text-align: center;
	font-size: 2vmax;
	font-family: Times ,"Edwardian Script ITC", serif, sans-serif;
	color: var(--hg_header_text_color);
	font-weight: bold;
}

.blok
{ 
    box-sizing: border-box;
    padding:1vmax;
    word-wrap: break-word;
    font-size: 2vmax;/*1.8vmax;*/
    border: 2px solid var(--hg_rand_klr1);
    background-color: var(--hg_grond_klr);
}

/* footnote */

.blok_footnote
{ 
    box-sizing: border-box;
    padding:1vmax;
    word-wrap: break-word;
    font-size: 1vmax;/*1.8vmax;*/
    border: 2px solid var(--hg_rand_klr1);
    background: var(--hg_ftn_achtergrd_klr);
    color:white;
    text-align:center;
}

.par
{
    padding:1vmax;
    word-wrap: break-word;
    font-size: 2vmax;/*1.8vmax;*/
	color:white;
}


.img_blok_c
{ 
    float: left;
    box-sizing: border-box;
    box-shadow: 2px 3px black;
    margin: 1vmax;
    width :var(--hg_img_width);
    height:auto;
    padding: var(--hg_img_padd);
    margin: var(--hg_img_marg);
    border: 2px solid var(--hg_rand_klr3);
    
}

.img_blok_cr
{ 
    float: right;
    box-sizing: border-box;
    box-shadow: 2px 3px black;
    margin: 1vmax;
    width :var(--hg_img_width);
    height:auto;
    padding:var(--hg_img_padd);
    margin:var(--hg_img_marg);
    
    border: 2px solid var(--hg_rand_klr3);
    
}


.img_blok_l
{ 
    float: left;
    box-sizing: border-box;
    box-shadow: 2px 3px black;
    margin: 1vmax;
    width :calc(var(--hg_img_width)/2);
    height:auto;
    padding:var(--hg_img_padd);
    margin:var(--hg_img_marg);
    
    border: 2px solid var(--hg_rand_klr3);
    
}


.img_blok_r
{ 
    float: right;
    box-sizing: border-box;
    box-shadow: 2px 3px black;
    margin: 1vmax;
    width :calc(var(--hg_img_width)/2);
    height:auto;
    padding:var(--hg_img_padd);
    margin:var(--hg_img_marg);
    
    border: 2px solid var(--hg_rand_klr3);
    
}

.boxje {
  
  float: left; 
  border: none ;
  background-color: var(--hg_grond_klr1);
  box-sizing: border-box;
  font-size: 1.8vmax;
  font-weight:bold;
  width: 20vmax;
  height:auto;
  padding:2px;
  margin:1vmax;
  
  text-align: center;
  } 



.button {
  border: 2px solid var(--hg_rand_klr1);
  color: white;
  border-radius: 10px;
  padding: 0px 3px 0px 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 1px;
  cursor: pointer;
}

.button1 {background-color: lightgreen;} /* Green */
.button2 {background-color: lightblue;} /* Blue */
.button3 {background-color: grey;} 
     /* Grey*/



#p1 {
	text-align: center;
	font-size: 8px;
	font-family: Arial, "Edwardian Script ITC", serif, sans-serif;
	color: black;
	font-weight: bold;
}

#mainli {
	text-align: left;
	font-family: Arial, "Edwardian Script ITC", serif, sans-serif;
	font-size: 18px;
	color: black;
	padding-left:5%;
}

#main-bar{
	position: fixed;
	z-index: 1;
	top: 145px; 
	height: auto;
	width: 40%;
    left: 5px; 
	padding: 10px;
	margin: 0px;
	border: 1px solid var(--hg_rand_klr);
	background-color: #CAA911;*/
}



.centreer{text-align: center;}



/* desktop  , tablet in landscape */

@media screen and (min-width: 924px)
{
#scherm
   {
    width: 100%;
   
    background:Lightgreen;
    
    z-index: -1;
    
   var(--hg_br) = calc (var(--hg_br) * 10);
    
   }
}

/* tablet in portret , smartphone in landscape */

@media screen and (min-width: 500px) and (max-width: 923px)
{
#scherm 
  {
    width: 100%;
    
    background: yellow;
    
    z-index: -1;
    
  var(--hg_br) = calc (var(--hg_br) + 10);
    
  }
}

/* smartphone */

@media screen and (min-width: 300px)
       and (max-width:499px)
{
#scherm
   {
    width: 100%;
    
    background:Lightblue;
    
    z-index: -1;
    
    var(--hg_br) = calc(var(--hg_br) + 1);
   }
}

/* smartphone in portret */

@media screen and (min-width:200px)
       and (max-width: 299px)
{
#scherm
   {
    width: 100%;
    
    background:Lightblue;
    
    z-index: -1;
    
    var(--hg_br) = calc(var(--hg_br) + 2);
   }
}


/* kleiner dan smartphone */

@media screen and (max-width: 199px)
{
#scherm
   {
    width: 100%;
    
    background:red;
    
    z-index: -1;
    
    var(--hg_br) = calc(var(--hg_br) + 1);
    
   }
}

.ruimte {line-height: var(--hg_br);}