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


body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	color: #360;
	font-size: 30px;
    background: #cfc;
}
/* het blok centreren, maar dit zijn geen goede instellingen, gebruik de volgende:
.blok {
    width: 800px;
    margin-left: 20%;
    margin-right: 50%;
}*/
/* het blok mooi centreren, max 800 px breed en bij smallere schermen 92% breed. Er moeten voor smallere schermen geen gewijzigde regels komen! */
.blok {
    width: min(800px, 96%);
    margin: 0 auto;
}

h5 {
	color: #357;
	font-size: 10px;
}
a {
	color: #adf;
}
a:link {
	text-decoration: none;
	color: #adf;
}
a:visited {
	text-decoration: none;
	color: #bbb;
}
a:hover {
	text-decoration: underline;
	color: #d5d;
}
a:active {
	text-decoration: none;
	color: #afd;
}
.accordion {
  /*background-color: #eee;*/
  /*color: #444;*/
  /*cursor: pointer;*/
  /*padding: 12px;*/
  /*width: 100%;*/
  /*border: 1px solid #49d;*/
  /*border-radius: 20px;*/
  /*text-align: left;*/
  /*outline: none;*/
  /*font-size: 15px;*/
  /*transition: 0.4s;*/
}

.active, .accordion:hover {
  /*background-color: #ccc; */
}

/* panel v1
.panel {
  padding: 0 1px;
  display: none;
  overflow: hidden;

}*/
/* panel v2 */
.panel {
  padding: 0 1px;
  max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s ease;

}
/* Zachte fade-in van accordion-inhoud */
.panel-content {
    opacity: 0;
    transition: opacity 0.9s ease;
}
.panel-content.visible {
    opacity: 1;
}





.centreren {
    text-align: center;
}

.progr {
	width: 100%;
	font-size: 30px;
	font-weight: bold;
	border: 0px solid;
	border-radius: 20px 20px 7px 7px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-top: 2px;
	margin-bottom: 1px;
	margin-left: 1px;
	margin-right: 1px;
  transition: 0.15s;
  cursor: pointer;
}

.progrsmal {
	font-size: 18px;
	border: 0px solid;
	border-radius: 7px 7px 20px 20px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 3px;
	padding-bottom: 15px;
	margin-top: 2px;
	margin-bottom: 6px;
	margin-left: 1px;
	margin-right: 1px;
  transition: 0.15s;
}
.bannerradius {
	border-radius: 16px 16px 0px 0px;
    border: 1px solid #dbc00a;
}
.fotoradius {
	border-radius: 0px 0px 16px 16px;
}
.fotorand {
    border: 1px solid #357;
}
.paars {
	color: #fff;
    background: #5f3f91;
}
.paars:hover {
	color: #5d3d90;
    background: #b191e5;
}
.paars:visited {
	color: #aaa;
    background: #aaa;
}
.donkblauw {
	color: #fff;
    background: #284a9a;
}
.donkblauw:hover {
	color: #264898;
    background: #5d84de;
}
.donkblauw:visited {
	color: #aaa;
    background: #aaa;
}
.blauw {
	color: #fff;
    background: #009ec4;
}
.blauw:hover {
	color: #006b84;
    background: #88dbef;
}
.blauw:visited {
	color: #aaa;
    background: #aaa;
}
.groen {
	color: #fff;
    background: #65b22e;
}
.groen:hover {
	color: #62922c;
    background: #96dd5c;
}
.groen:visited {
	color: #aaa;
    background: #aaa;
}
.geel {
	color: #449;
    background: #dbc00a;
}
.geel:hover {
	color: #b09b0a;
    background: #f4f080;
}
.geel:visited {
	color: #777;
    background: #aaa;
}
.oranje {
	color: #fff;
    background: #ef7d1a;
}
.oranje:hover {
	color: #ed7b18;
    background: #ecbe76;
}
.oranje:visited {
	color: #aaa;
    background: #aaa;
}
.rood {
	color: #fff;
    background: #e52620;
}
.rood:hover {
	color: #c52620;
    background: #f8787d;
}
.rood:visited {
	color: #aaa;
    background: #aaa;
}
.wit {
	color: #fff;
}
.zwart {
	color: #fff;
    background: #005;
}
.zwart:hover {
	color: #005;
    background: #77a;
}
.zwart:visited {
	color: #aaa;
    background: #aaa;
}
.breedte {
width: 100%;
}

hr {
  border: 3px solid #9CA;
  border-radius: 50%;
    margin-left: 10%;
    margin-right: 10%;
}

.drukknop {
	color: #a0f;
	font-size: 20px;
	border: solid 2px #f00;
	border-radius: 20px;
	background: #ff8;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: -2px;
	padding-bottom: -2px;
}
.drukknop:hover {
	color: #ccf;
	border: solid 2px #00f;
	background: #b83;
}
.drukknop:visited {
	color: #aaa;
	border: solid 2px #333;
	background: #777;
}
.duiding {
	font-family: Verdana, Geneva, sans-serif;
	color: #360;
	font-size: 20px;
}

/*======================================================
  Accordion-pijltje
======================================================*/

.accordion {
    position: relative;
    padding-right: 60px;
    transition: opacity 0.45s ease, box-shadow 0.3s ease;

}

.accordion::after {
    content: "▶";
    position: absolute;
    right: 18px;
    top: 18px;
    font-size: 0.8em;
    transition: transform 0.25s ease;
}

.accordion.active::after {
    transform: rotate(90deg);
}

/* Andere accordion-balkjes zachter maken wanneer één geopend is */

.accordion.dimmed {
    opacity: 0.55;
    transition: opacity 0.3s ease;
}

.accordion {
    transition: opacity 0.3s ease;
}
.accordion.active {
    /*box-shadow: inset 0 3px 6px rgba(0,0,0,0.25);*/
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.3);
}



/*================================================================================================================================*/
/*================================================================================================================================*/
/*================================================================================================================================*/
@media (max-width:1000px) {
    

body,td,th {
	font-size: 50px;
}
h5 {
	font-size: 14px;
}

.panel {
  padding: 0 1px;
}

.progr {
	font-size: 50px;
	border-radius: 20px 20px 7px 7px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 1px;
	margin-right: 1px;
}

.progrsmal {
	font-size: 32px;
	border-radius: 7px 7px 20px 20px;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 1px;
	margin-right: 1px;
}
.breedte {
width: 100%;
}
    
    
}