﻿@charset "utf-8";
html, body {
	/* width: 1050px; */
		
	height: 100%;
	/*	width=device-width; 	*/  /* to match the screen's width in device-independent pixels. */
	/* initial-scale=1; 	*/ /* to establish a 1:1 relationship between CSS pixels and device-independent pixels. */
	margin:0 auto;
}
/*
html {
	display: table;
	width: 100%;
}
*/

body {
	background-color: #4E5869;
}

.row-header {
	height: auto;
	width: 95%;
	max-height:345px;
	background-color: #FFF;
	display: flex;
	border: double;
	float: center;
	text-align: center;
	margin: 0px auto;
	overflow: hidden;
}

.cell-header-left {
	display: table-cell;
	float: left;
	width: 20%;
	height: 100%;
	max-width:200px;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	padding: 10px 10px 5px 10px;
}
.cell-header-left img {
	max-width:100%;
	max-height:100%;
	padding: 5px 0 5px 0;
}

.cell-header-center {
	display: table-cell;
	float: left;
	text-align: left;
	vertical-align: middle;
	overflow: hidden;
	padding: 10px 0 5px 0;
}

.cell-header-center img {
	max-width:600px;
	max-height:100%;
	width:100%;
	height:auto;
}

@media all and (max-width:570px) {
.row-header {
	max-width:95%;
	/* max-height:100%; */
}
.cell-header-center {	
	/* width:75%; /*			/* 75% als rechter kolom verdwijnt dan center image de "verloren" width 75 + 20 ( geen 22 meer )erbi halen */
	display:none;
}
.cell-header-right {
	display: none;
}
.cell-header-right-textonly {
	display:table-cell;
}
.containermain {
	max-width:95%;
}
.index-col1 {
	display: none;
}
.glossary-img {
	display: none;
}
.glossary-txt {
	width:100%;
	padding-right:0px;
}
}	
	
	
@media all and (min-width:571px) and (max-width:1019px) {
.row-header {
	max-width:95%;
	/* max-height:100%; */
}
.cell-header-center {	
	width:75%;			/* als rechter kolom verdwijnt dan center image de "verloren" width 75 + 20 ( geen 22 meer )erbi halen */
}
.cell-header-right {
	display: none;
}
.cell-header-right-textonly {
	display:table-cell;
}
.containermain {
	max-width:95%;
}
.index-col1 {
	display:table-cell;
}
.glossary-img img {
	width:120px;
}
.glossary-txt {
	width:95%;
	padding-right:20px;
}
}


@media all and (min-width:1020px) {
.row-header {
	/* max-width:100%; */
	max-width:1075px;	
}
.cell-header-right {
	display: table-cell;
	/* display: block; */
}
.cell-header-center {
	width:auto;	/* 20 + 55 + 22 ?? */
	/* max-width:620px; */
}
.cell-header-right-textonly {
	display:none;
}
.containermain {
	max-width:1075px;
}
.index-col1 {
	display: table-cell;
}
.glossary-img img {
	width:160px;
}
.glossary-txt {
	width:80%;
	padding-right:30px;
}
}



.cell-header-right {
	float: left;
	width: 22%;
	max-width: 280px;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	padding: 10px 10px 5px 10px;
}
.cell-header-right-textonly {
	float: left;
	width: 22%;
	max-width: 280px;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	padding: 10px 10px 5px 10px;
}




.containermain {
	padding: 5px 0px 0px 0px;
	/* min-height: auto; */
	/* max-height:330px; */
	background-color: #FFF;
	margin: 0px auto;
	overflow: hidden;
	border: medium;
	border-style: double;
	/* width: 95%; */
	/* width: 1050px; */
}


.index-row {
	display: table;
	clear: both;
}
.index-row1 {
	display: table;	

}
.index-col1 {
	position: relative;
	/* display: table-cell; */
  	width: 25%; /* depends on the number of columns */
  	border: thin;
	border-style: solid;	
	text-align:left;
	vertical-align:top;
  /*
	display: table-cell;
	float: left;
	text-align: left;
	vertical-align: middle;
	overflow: hidden;
	*/
	padding: 10px 0 5px 0;
}

.index-col1 img {
	max-width:100%;
	max-height:100%;
	width:100%;
	height:auto;
}
.index-col2 {
	position: relative;
	display: table-cell;
  	width: 25%; /* depends on the number of columns */

  	border: thin;
	border-style: solid;
	text-align:left;
	vertical-align:top;
  /*
	display: table-cell;
	float: left;
	text-align: left;
	vertical-align: middle;
	overflow: hidden;
	*/
	padding: 10px 0 5px 0;
}

.index-col3 {
	position: relative;
	display: table-cell;
  	width: 25%; /* depends on the number of columns */

  	border: thin;
	border-style: solid;
	text-align:left;
	vertical-align:top;
  /*
	display: table-cell;
	float: left;
	text-align: left;
	vertical-align: middle;
	overflow: hidden;
	*/
	padding: 10px 10px 10px 10px;
}



.largecentered {
	text-align: center;
	font-weight: bold;
	font-size: large;
	padding: 0px;
	margin: 0px;
}
.mediumcentered {
	text-align: center;
	font-size: medium;
	font-weight: bold;
}
.smallcentered {
	text-align: center;
	font-size: small;
	font-weight: bold;
}
.smalltext {
	border-style: solid;
	border-width: 1px;
	border-color: darkgray;
	background-color: #e0e0e0;
	font-size: smaller;
	width: 85%;
	text-align: left;
	margin-top: auto;
	padding: 0px 15px 0px 15px;
}
.centeredtable {
	margin-left: auto;
	margin-right: auto;
}
.mediumtext {
	font-size: medium;
	font-weight: bold;
}
.footer {
	text-align: center;
	font-size: smaller;
}
.75perc {
	width: 75%;
}
.boldleft {
	text-align: left;
	font-weight: bold;
	float: left;
}
.boldright {
	text-align: right;
	font-weight: bold;
}
.about {
	padding: 10px 10px 0px 0px;
	float: left;
	width: 550px;
	position: relative;
}
.sidebar2 {
	padding: 10px 0px;
	float: left;
	width: 21%;
	text-align: center;
	vertical-align: middle;
	position: relative;
	overflow: hidden;
}
.row {
	padding: 5px 5px 5px 5px;
	width: 100%;
	display: flex;
	border: 0;
	margin: 0px auto;
	text-align: center;
	overflow: hidden;
}
.cell {
	display: table-cell;
	border: 1px;
	float: left;
	width: 24%;
	text-align: left;
	vertical-align: middle;
	overflow: hidden;
	display: block;
	height: auto;
	border: thin;
	border-style: solid;
}
.cell img {
	width: 100%;
	height: 100%;
	display: block;
}
.row2 {
	padding: 0px 5px 0px 5px;
	width: 100%;
	display: flex;
	border: 0;
	margin: 0px auto;
	text-align: center;
	overflow: hidden;
}
.cell2 {
	display: table-cell;
	border: 0;
	float: left;
	width: 24%;
	text-align: left;
	vertical-align: middle;
	overflow: hidden;
	display: block;
	height: auto;
	border: thin;
	border-style: solid;
	padding-left: 10px;
}
.celltext {
	display: table-cell;
	border: 1px;
	float: left;
	width: auto;
	text-align: left;
	vertical-align: top;
	overflow: hidden;
	display: block;
	border: thin;
	border-style: solid;
}
.cell3img {
	border: 0;
	width: 240px;
    height: 170px;
	text-align: left;
	vertical-align: middle;
	overflow: hidden;
	border: thin;
	border-style: solid;	
}
.cell3text {
	border: 1px;
	width: 300px;
    height:170px;
	text-align: left;
	vertical-align: top;
	overflow: hidden;
    padding-left:10px;
	border: thin;
	border-style: solid;
}



.vrow {
	display: table-row;
	width:100%;
}
.vblock {
	display: table-cell;
	width:250px;
	border: thin dashed;
	margin: 2px 2px;
	padding: 2px 2px;
	float:left;
	text-align: center;
	vertical-align: top;
}


.vblock img {
	width:189px;
	height:189px;
	/*
	width: 100%;
	height: 100%;
	max-height:165px;
	max-width:226px;
	*/
}




#left {
	float: left;
	width: 33%;
	height: 20px;
	background: #ff0000
}
#center {
	display: inline-block;
	margin: 0 auto;
	width: 33%;
	height: 20px;
	background: #00ff00
}
#right {
	float: right;
	width: 33%;
	height: 20px;
	background: #0000ff
}
p.clear {
	clear: both
}
.row3 {
	width: 100%;
	display: table-row;
	border: 0;
	float: left;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden
}
.cell3 {
	display: table-cell;
	border: 1px;
	float: left;
	width: 250px;
	height: 350px;
	text-align: left;
	vertical-align: middle;
	overflow: hidden;
	display: block
}
.sizes {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	border-collapse: collapse
}
.sizes td, .sizes th {
	font-size: 1em;
	border: 1px solid #98bf21;
	padding: 3px 7px 2px 7px
}
.sizes th {
	font-size: 1.1em;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 4px;
	background-color: #A7C942;
	color: #ffffff
}
.subjectblock {
	padding: 5px 10px 5px 10px;
	margin: 10px 10px 10px 10px;
	border: thin;
	border-style: solid
}

.row5 {
	padding: 5px 5px 5px 5px;
	width: 95%;
	border: 0;
	display: flex;	
	margin: 0px auto;
	overflow: hidden
}
.cell5 {
	display: table-cell;
	border: 1px;
	float:left;
	width:30%;
	/* text-align: left; */
	text-align: center;
	vertical-align: top;
	overflow: hidden;
	display: block;
	height: auto;
	border: thin;
	border-style: solid;
	margin:10px; 
	padding:0px 10px 0px 10px;
}

.text5 {
	text-align:left;	
}

.koptext1
{
	text-align:left;
 	margin:0 0 0 10px; 
	font-weight:bold;
}

.glossary-img {
	float:left; 
	padding-right:15px; 
	padding-left:15px;
}
.glossary-txt {	 
	float:none; 	
}