@charset "utf-8";
/* CSS Document */

html, body, td, th {  font-family:  "Century Gothic", "Copperplate Gothic Light", 'Copperplate Gothic', "Bell MT", Calibri, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 28px; } 
/* body  {	background-color: #f4f4f4; color: black; font-size: 1em; } */ 
body  {	background-color: #F0F3F8 color: black; font-size: 1em; }
.bovenkant  	{ padding-top: 5px; padding-bottom: 5px; text-align: center; vertical-align: top; display: block; margin-left: auto;  margin-right: auto; width:30%; height: auto; }
.Logo_onder		{	display: block; margin-left: auto;  margin-right: auto; width:30%; height: auto;}
.titel_regel  	{ font-family: "Century Gothic", "Copperplate Gothic Light", "Lucida Calligraphy"; font-size: 0.8em; color: black;  }
.nieuwe_pagina_inhoud   {  position: absolute; top: 250px;  left: 3%; right: 3%; color: black; }
a { cursor: pointer; color: blue; }
a:hover { color:darkgreen; font-style: normal; }

.fbook 	   { font-size:2em; background-color:#6CF; color:white; padding: 9px 11px 0px 11px; border: 3px solid lightGrey; border-radius: 50%; }
.fbook:hover { background-color:#06f; border: 3px solid darkgrey; color: white; font-style:normal; 	}

#Copyright { position: fixed; border: none; left: 10px; width: 125px; height: 80px; bottom: 0px; font-size:0.4em; font-style: italic; color: black; cursor: default; text-decoration:none; font-family: Calibri, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; }
#Copyright a {	color: black; text-decoration:none; } #Copyright a:hover { text-decoration:none; color: black; cursor: default; }

.logo{display:block; width: 200px; height: 182px; z-indez: 2; transition: transform 5s; margin-left: auto;  margin-right: auto;} 
.logo a 		{display: block; background-image: url(/Amber/Afbeeldingen/Amber_logo.png); background-repeat: no-repeat; }
.logo a:link   	{background-image: url(/Amber/Afbeeldingen/Amber_logo.png); background-repeat: no-repeat; 	}
.logo a:hover 	{transform: rotatey(360deg);   } 
.Melding_bericht_verzonden {	position: absolute; Top: 300px; width: 80%; left:10%; padding: 40px;	background-color: LightGray; }

.topnav { overflow: hidden; background-color: black; width: 100%; position: -webkit-sticky; /* Safari */
position: absolute; border-top: 4px solid grey; }
.topnav a  {  float: left; color: white;  text-align: center; text-decoration: none; border-left: 5px solid grey; padding: 4px 10px 7px 10px; font-size: 1em; } 
.topnav a:last-child { border-right: 5px solid grey; } 
.topnav a:first-child { margin-left: 10px ; } 
.topnav a:hover { background-color: #c1bfbf;  color: black; border-bottom: 4px solid grey; }

.active {  background-color: #c1bfbf;  color: black;  }
.knop	   {	border: none; outline: none; cursor: pointer; font-weight: bold;}
.knop:hover  {	box-shadow: 0 9px #999; text-decoration: none;	}
.knop:active { box-shadow: 0 4px #666; transform: translateY(4px);  }
.tabel_breedte { width:  95%; font-family: Calibri, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; padding:20px; } 
 
#tabellen  { width: 98%; font-family: Calibri, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; border: none;	}
#tabellen th {  padding: 10px 20px; background-color: black; color: white; font-size: 1em; border: hidden; }
#tabellen td {  padding: 10px 20px; font-size: 1em; border: LightGreen; }
#tabellen tr:nth-child(even){ background-color: LightGray; color: black; }
#tabellen tr:nth-child(odd) { background-color: LightGray; color: black; }
#tabellen tr:hover {background-color: #c1bfbf}
table.center {	 margin-left:auto;   margin-right:auto; }
.contact_tabel	{  width: 45%; font-size: 1.3em; }
.standaardtekst { margin-left: 1%; width: 98%; }

.locatievak { background-color: #3e4444; color: white; padding: 10px 25px 10px 25px; font-size: 1em;}
.locatievak a:hover { color:lightGreen;  }
.kader_info {
	position: absolute;	top: 380px; padding: 15px 10px 15px 10px; cursor: pointer;
	border: 1px solid  #424242; border-top: 30px solid  #424242; border-bottom: 15px solid #424242; border-left: 4px solid #424242;
	border-top-left-radius: 75px; border-bottom-right-radius: 75px;
	font-family: Calibri, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif,; 
	background-color: white; color: #424242; width: 80%; left:10%;
}
input[type=text], input[type=file], input[type=number], input[type=password], textarea {
  	border: 1px solid white; border-bottom: 3px solid darkGrey; border-left: 4px solid darkGrey; border-radius: 15px;	
  	margin: 6px 0 6px 0; padding: 5px 20px; font-size: 1em; 
  	display: inline-block;  background:  #fafbfd; margin-bottom: 12px; } 
textarea { resize: none;	}
.kader_z, .kader_g, .kader_gr, .kader_r { width: 50%; }

.row::after {  content: "";  clear: both;  display: table;  }
img {  max-width: 100%;  height: auto;  }
* {  box-sizing: border-box; }
/* Voor mobiele telefoons */
[class*="col-"] {  width: 100%; float: left;  padding: 15px; 	}
@media only screen and (max-width: 600px) { 
.kader_z, .kader_g, .kader_gr, .kader_r { width: 96%; } .standaardtekst { margin-left: 1%; width: 98%; }
	.kader_z, .kader_g, .kader_gr, .kader_r { width: 96%; }
	.contact_tabel	{  width:98% } .tabel {   width: 100%;	}
	.nieuwe_pagina_inhoud  {  padding: 40px; font-size: 1em; }
	.img	{	display: block; margin-left: auto;  margin-right: auto; 	}
	.kader_info  	{ 	width: 96%; left: 2%; padding: 12px; font-size: 1em;  }
  }
/* Voor grotere schermen dan telefoons */ 
@media only screen and (min-width: 900px) {
.contact_tabel	{  width:90% }	.kader_z, .kader_g, .kader_gr, .kader_r { width: 90%; } .standaardtekst { margin-left: 3%; width: 94%; }
input[type=text], input[type=number], input[type=password], textarea { font-size: 0.8em }	

h1 { font-size: 1.8em; } h2 { font-size: 1.5em; } h3 { font-size: 1.3em; } h4 { font-size: 1em; } h5 { font-size: 0.8em; } 
h6 { font-size: 0.6em; } .tabel_breedte { width: 88%; } .kader_info {width: 60%; left:15%; font-size: 0.8em }
 #tabellen td, #tabellen th  {padding: 10px 20px 10px;	padding-right: 20px; font-size: 1em}
.titel_regel { font-size: 0.9em;} .nieuwe_pagina_inhoud  { font-size: 0.9em; padding: 25px; } 
th { font-size: 0.8em }
.col-1-1  {width: 8.33%;}  .col-1-2  {width: 16.66%;} .col-1-3 {width: 25%;}    .col-1-4 {width: 33.33%;} .col-1-5 {width: 41.66%;}
.col-1-6  {width: 50%;}    .col-1-7  {width: 58.33%;} .col-1-8 {width: 66.66%;} .col-1-9 {width: 75%;}    .col-1-10 {width: 83.33%;}  .col-1-11 {width: 91.66%;} .col-1-12 {width: 100%;}
}
@media only screen and (min-width: 1000px) {
.contact_tabel	{  width:84% }	.kader_z, .kader_g, .kader_gr, .kader_r { width: 80%; } .standaardtekst { margin-left: 13%;  width: 74%; }
input[type=text], input[type=number], input[type=password], textarea { font-size: 1em }		
.bovenkant, .Logo_onder	{padding-top: 4px; padding-bottom: 4px; width:32%; } 
#tabellen { width: 74%; } .tabel_breedte { width: 73%; } .kader_info {width: 50%; 
left:25%; font-size: 0.9em } .titel_regel { font-size: 0.8em; } .nieuwe_pagina_inhoud { font-size: 0.9em; padding: 25px;} 
h1 { font-size: 1.8em; } h2 { font-size: 1.5em; } h3 { font-size: 1em; } h4 { font-size: 0.8em; } h5 { font-size: 0.7em; } 
h6 { font-size: 0.6em; }
.col-2-1  {width: 8.33%;}  .col-2-2 {width: 16.66%;} .col-2-3 {width: 25%;}    .col-2-4  {width: 33.33%;} .col-2-5  {width: 41.66%;}
.col-2-6  {width: 50%;}    .col-2-7 {width: 58.33%;} .col-2-8 {width: 66.66%;} .col-2-9 {width: 75%;}     .col-2-10 {width: 83.33%;}  
.col-2-11 {width: 91.66%;} .col-2-12 {width: 100%;}
}
@media only screen and (min-width: 1250px) { .standaardtekst { width: 70%; margin-left: 15%; }
.contact_tabel	{  width:70% }	.kader_z, .kader_g, .kader_gr, .kader_r { width: 70%; }	
input[type=text], input[type=number], input[type=password], textarea { font-size: 0.8em}		
.topnav a{  font-size: 0.8em; padding: 4px 10px 7px 10px;} 
.bovenkant, .Logo_onder { padding-top: 4px; padding-bottom: 4px; width: 25%;} 
#tabellen { width: 70%; }	.tabel_breedte { width: 68%; }
.kader_info {width: 40%; left:30%; font-size: 0.9em }
#tabellen td, #tabellen th { padding: 5px 20px 5px; padding-right: 20px;font-size: 1em; } 
.titel_regel{font-size: 0.9em;} .nieuwe_pagina_inhoud { font-size: 0.8em; top: 150px; } 
td { font-size: 0.9em } th { font-size: 0.9em } 
h1 { font-size: 1.8em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; } h4 { font-size: 0.9em; } h5 { font-size: 0.7em; }
h6 { font-size: 0.6em; }
.locatievak { font-size: 0.8em; } 
.col-3-1 {width: 8.33%;}   .col-3-2 {width: 16.66%;} .col-3-3 {width: 25%;}    .col-3-4 {width: 33.33%;} .col-3-5  {width: 41.66%;}  .col-3-6  {width: 50%;}    .col-3-7 {width: 58.33%;} .col-3-8 {width: 66.66%;} .col-3-9 {width: 75%;}    .col-3-10 {width: 83.33%;}  .col-3-11 {width: 91.66%;} .col-3-12 {width: 100%;}
}
@media only screen and (min-width: 1380px) { .standaardtekst { margin-left: 17%; width: 66%; }
.contact_tabel	{  width:60% }	.kader_z, .kader_g, .kader_gr, .kader_r { width: 60%; }	
input[type=text], input[type=number], input[type=password], textarea { font-size: 0.8em }		
.topnav a{ font-size: 0.9em; padding: 4px 10px 7px 10px; } 
.locatievak { font-size: 0.8em; } 
.standaardtekst { margin-left: 17%; width: 66%; }
.bovenkant, .Logo_onder {padding-top: 4px; padding-bottom: 4px; width: 22%;} #tabellen { width: 66%; } .tabel_breedte { width: 63%; }
#tabellen td, #tabellen th { padding: 7px 20px; font-size: 1em;}	.kader_info {width: 40%; left:30%; font-size: 0.9em }
.titel_regel{font-size: 1em; } .nieuwe_pagina_inhoud { font-size: 1em; top: 190px;  } td { font-size: 0.9em } th { font-size: 0.9em }
.col-4-1  {width: 8.33%;}  .col-4-2  {width: 16.66%;} .col-4-3 {width: 25%;}    .col-4-4 {width: 33.33%;} .col-4-5 {width: 41.66%;}   .col-4-6  {width: 50%;}    .col-4-7  {width: 58.33%;} .col-4-8 {width: 66.66%;} .col-4-9 {width: 75%;}    .col-4-10 {width: 83.33%;}  .col-4-11 {width: 91.66%;} .col-4-12 {width: 100%;}
}
@media only screen and (min-width: 1600px) { .standaardtekst { margin-left: 22%;  width: 56%; }
.contact_tabel	{  width:45% }	.kader_z, .kader_g, .kader_gr, .kader_r { width: 50%; }	
input[type=text], input[type=number], input[type=password], textarea { font-size: 0.9em }		
.topnav a  { font-size: 1em; }
.locatievak { font-size: 1.1em }
.bovenkant, .Logo_onder  {padding-top: 5px; padding-bottom: 5px; width: 20%;}  
#tabellen {width: 56%;} .tabel_breedte { width: 53%; }
#tabellen td, #tabellen th { padding: 7px 20px; font-size: 1em;} .kader_info {width: 34%; left:33%; font-size: 1em } 
.titel_regel {	font-size: 1em; } .nieuwe_pagina_inhoud{font-size: 1em; top: 220px; } td { font-size: 0.8em } th { font-size: 0.8em } 
h1 { font-size: 1.9em; } h2 { font-size: 1.6em; } h3 { font-size: 1.3em; } h4 { font-size: 1em; } h5 { font-size: 0.8em; }
h6 { font-size: 0.7em; }
.col-5-1  {width: 8.33%;}  .col-5-2 {width: 16.66%;} .col-5-3 {width: 25%;}    .col-5-4 {width: 33.33%;} .col-5-5 {width: 41.66%;}   .col-5-6  {width: 50%;}    .col-5-7 {width: 58.33%;} .col-5-8 {width: 66.66%;} .col-5-9 {width: 75%;}    .col-5-10 {width: 83.33%;}  .col-5-11 {width: 91.66%;} .col-5-12 {width: 100%;}
}
/* For desktop: */
@media only screen and (min-width: 1850) { .kader_z, .kader_g, .kader_gr, .kader_r { width: 45%; }
input[type=text], input[type=number], input[type=password], textarea { font-size: 1em }		
.topnav a {  font-size: 1.1em;  }
.bovenkant, .Logo_onder {padding-top: 5px; padding-bottom: 5px; width: 18%;}  
#tabellen{width: 54%} .tabel_breedte { width: 53%; } .standaardtekst {margin-left: 23%;  width: 54%; }
#tabellen td, #tabellen th { padding: 8px 20px; font-size: 1em; } .kader_info {width: 28%; left:36%; font-size: 1em} 
.titel_regel {font-size: 1em; } .nieuwe_pagina_inhoud { font-size: 1em; top: 250px; } 
h1 { font-size: 1.9em; } h2 { font-size: 1.7em; } h3 { font-size: 1.3em; } h4 { font-size: 1.1em; } h5 { font-size: 0.9em; }
h6 { font-size: 0.7em; }
.col-6-1  {width: 8.33%;}  .col-6-2 {width: 16.66%;} .col-6-3 {width: 25%;}    .col-6-4 {width: 33.33%;} .col-6-5 {width: 41.66%;}   .col-6-6  {width: 50%;}    .col-6-7 {width: 58.33%;} .col-6-8 {width: 66.66%;} .col-6-9 {width: 75%;}    .col-6-10 {width: 83.33%;}  .col-6-11 {width: 91.66%;} .col-6-12 {width: 100%;}
}
/* maak met onderstaande Lege_tegels wat ruimte	*/
.lege_regels_1  { position: relative; width: 100%; height: 30px; border: none; }
.lege_regels_2  { position: relative; width: 100%; height: 40px; border: none; }
.lege_regels_7  { position: relative; width: 100%; height: 46px; border: none; }
.lege_regels_3  { position: relative; width: 100%; height: 60px; border: none; }
.lege_regels_4  { position: relative; width: 100%; height: 80px; border: none; }
.lege_regels_5  { position: relative; width: 100%; height: 100px; border: none; }
.lege_regels_6  { position: relative; width: 100%; height: 170px; border: none; }

.C:hover  { color: lightgreen;  font-style: italic; }
.knop_rond  	 {  background-color: #f4f4f4; border: 2px solid black; border-radius: 50%; padding: 2px 10px ; font-size:0.9em; color: black; cursor: pointer; }
.knop_rond:hover {	background-color: black; color:white; border: 2px solid white;		}
/* The container voor grotere checkbox*/ 
.container { width: 90%; display: block; position: relative; cursor: pointer; 
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;  }
/* Hide the browser's default checkbox */
.container input {  position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;  }
/* Create a custom checkbox */
.checkmark {  position: absolute; top: 7px; left: 0; height: 25px; width: 25px; background-color:  #fafbfd;
border-radius: 6px;  border: 1px solid darkGrey; border-bottom: 2px solid darkGrey; border-left: 3px solid darkGrey; }
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {  background-color: #d9d7d8;  }
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {  background-color: #00016d;  }
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {  content: "";  position: absolute;  display: none;  }
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {  display: block;  }
/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 10px; top: 3px; width: 5px; height: 15px;
  border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* The container voor grotere radio-box*/
.container2 {  display: block;  position: relative;  margin-bottom: 12px;
  cursor: pointer;  font-size: 0.8em;
  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;
}
/* Hide the browser's default radio button */
.container2 input {  position: absolute;  opacity: 0;  cursor: pointer;	}
/* Create a custom radio button */
.checkmark2 {  position: absolute;  top: 4px;  height: 25px;  width: 25px;  background-color: #fafbfd;  border-radius: 50%; border:1px solid darkGrey }
/* On mouse-over, add a grey background color */
.container2:hover input ~ .checkmark2 {  background-color: #d9d7d8;	}
/* When the radio button is checked, add a blue background */
.container2 input:checked ~ .checkmark2 {  background-color: #00016d;	}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark2:after {  content: "";  position: absolute;  display: none;	}
/* Show the indicator (dot/circle) when checked */
.container2 input:checked ~ .checkmark2:after {  display: block;	}
/* Style the indicator (dot/circle) */
.container2 .checkmark2:after { 	top: 7px;	left: 8px; width: 8px; height: 8px; border-radius: 50%; background: white; }

input:hover 	{  background-color: #d9d7d8;  }
textarea:hover {  background-color: #d9d7d8;  }
input[type=submit]  { border: 1px solid white; border-bottom: 3px solid darkGrey; border-left: 4px solid darkGrey; border-radius: 15px; 
 margin: 6px 0 6px 0; padding: 5px 20px; font-size: 0.8em;  display: inline-block;  }
input[type=submit]:hover  { background-color: #d9d7d8;  color: black;  }

.btn { background-color: black; color:white; border: 2px solid white; border-bottom: 4px solid darkGrey; border-left: 4px solid darkGrey; border-radius: 22px; 
 margin: 6px 0 6px 0; padding: 5px 20px; font-size: 0.8em;  cursor: pointer; } 
.btn:hover  {  background-color: #d9d7d8; color: black; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);	}
.btn:active {  background-color: #00016d;  color: white; }
.gekleurd_vak	{	background-color: #000000; color: #ffffff; border: 2px solid #ffffff;}
.cursor { cursor: pointer; }

.vak_outline { position: absolute; padding:30px 70px; font-size: 1.8em; text-align: center; border: 2px solid darkGrey;  background-color: LightGray;
outline: 5px solid black; outline-offset: 15px; margin-left: 20px; } 


.grote_letters_zwart	  { color:black; font-size: 1.8em; }
.grote_letters_zwart_bold  { color:black; font-size: 50px; font-weight: bold; }
.grote_letters_grijs	  { color:#7b7d7c; font-size: 1.8em; }
.grote_letters_grijs_bold  { color:#7b7d7c; font-size: 1.8em; font-weight: bold; }
.grote_letters_groen	  { color:green; font-size: 1.8em; }
.grote_letters_groen_bold  { color:green; font-size: 1.8em; font-weight: bold; }
.grote_letters_rood		  { color:red; font-size: 1.8em; }
.grote_letters_rood_bold   { color:red; font-size: 1.8em; font-weight: bold; }

.middel_letters_zwart	  { color:black; font-size: 1.4em; }
.middel_letters_zwart_bold { color:black; font-size: 1.4em; font-weight: bold; }
.middel_letters_grijs	  { color:#7b7d7c;  font-size: 1.4em; }
.middel_letters_grijs_bold { color:#7b7d7c;  font-size: 1.4em; font-weight: bold; }
.middel_letters_groen	  { color:green;   font-size: 1.4em; }
.middel_letters_groen_bold { color:green;   font-size: 1.4em; font-weight: bold; }
.middel_letters_rood	  { color:red; font-size: 1.4em; }
.middel_letters_rood_bold  { color:red; font-size: 1.4em; font-weight: bold; }

.kleine_letters_zwart	  { color:black; font-size: 1em; }
.kleine_letters_zwart_bold { color:black; font-size: 1em; font-weight: bold; }
.kleine_letters_grijs	  { color:#7b7d7c; font-size: 1em; }
.kleine_letters_grijs_bold { color:#7b7d7c; font-size: 1em; font-weight: bold; }
.kleine_letters_groen	  { color:green; font-size: 1em; }
.kleine_letters_groen_bold { color:green; font-size: 1em; font-weight: bold; }
.kleine_letters_rood	  { color:red; font-size: 1em; }
.kleine_letters_rood_bold  { color:red; font-size: 1em; font-weight: bold; }

.kader_z {  background-color:#E4E4E4; border-color: black; border-style: double; outline: 8px solid black; 
outline-offset: 20px; padding: 0px 30px 40px 30px; margin: 30px 30px;  }
.kader_g {  background-color:#E4E4E4; border-color: #7b7d7c; border-style: double; outline: 8px solid #7b7d7c; 
outline-offset: 20px; padding: 0px 30px 40px 30px; margin: 30px 30px;  }
.kader_gr { background-color: white; border-color: green; border-style: double; outline: 8px solid Green; 
outline-offset: 20px; padding: 0px 30px 40px 30px; margin:3 0px 30px; display:block;}
.kader_r {  background-color: white; border-color: red; border-style: double; outline: 8px solid red; 
outline-offset: 20px; padding: 0px 30px 40px 30px; margin: 30px 30px; }
.kader_home { text-align:center;  }