@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i');


/* CSS Document */


* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}

/* For mobile phones: */
[class*="col-"] {
    float: left;
    padding: 10px;
	width: 100%;
}

html {
	margin: 0;
	padding: 0;
}

body {
	margin: 0px;
	background-color: #eeeeee;
	color: #000000;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
	line-height: 15pt;
}

.bgcontainer {
	top: 0px;
	position: relative;
	align-content: center; 
	width: 100%;
}

	.dark { background-color: #333;	}
	.white { background-color: #fff; }
	.lightblue { background-color: #D5E3F1; }
	.grey {background-color: #eeeeee; }
	.lightgrey {background-color: #F5F5F5; }
	.small { font-size: 85%; }
	

.container {
	position: relative;
	max-width: 1200px;
	margin: auto;  /* center container   */
	margin-top: -7px;
	text-align: left;
	overflow: hidden;    /* growing background-height after floats for FF, Opera...   */
}

	.light { background-color: #fff; margin-bottom: 7px; }

/* Belgium Header */

.be {
	padding: 15px 0px;
	font-family: Arial, Verdana, sans-serif;
	margin: 5px 15px 0px 15px;
}

.benav {
	display: inline-block;
	vertical-align: bottom;
	font-size: 85%;
}

.benav a {
	padding: 4px;
	text-decoration: none;
	color: #666;
	margin: 0px 2px;
	border-radius: 3px 3px 3px 3px;

}

.benav a:hover {
	background-color: #333;
	color: #fff;
	border-radius: 3px 3px 3px 3px;
}

.benav .active {
 	border: 1px solid #333; 
	border-radius: 3px 3px 3px 3px;
	background-color: #333; 
	color: #ffffff;
}

.benav .lineThrough { 
	text-decoration: line-through; 
	padding: 4px;
	color: #666;
	margin: 0px 2px;
}


.betext {
  	float: right;
 	vertical-align: bottom;
	text-align: right;
	color: #333;
	font-size: 80%;
}

.betext a {
	color: #333;
	font-family: arial,verdana,sans-serif; 
}

.betext image {
	  width: 27px;
	  margin-left: 5px;
	  }

@media screen and (max-width: 800px) {
  .hidden {display: none;}
  .betext a {
	color: #333;
	font-size: 100%;  
	font-family: arial,verdana,sans-serif; 
}
}

/* Header */

.header {
	align-content: center;
	padding: 0px;
	font-size: 80%;
}

.header image {
	margin-bottom: 0px;
	padding: 0px;
}




/* Header menu */

.top {
	top: 0px;
	position: relative;
	align-content: center; 
	width: 100%;
	background-color: #333;
}

.topnav {
    background-color: #333;
	padding-left:15px;
	max-width: 1200px;
	overflow: hidden;
	align-items: center;
	}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .active {
  background-color: #4b79ab;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon  {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .header image {
	max-width: 800px;
	}	
}



/* Breadcrumb */


.breadcrumb {
	position: relative;
    float: left;
	left: 10px;
	padding: 0px 10px;
	font-size: 90%;	
}

.breadcrumbnav {
	margin: 20px 0px;
	width: auto;
	font-size: 90%;
	color: #000000;
	text-decoration: none;
}

.breadcrumbnav a {
 	color: #000000;
	border-right: solid;
	border-right-color: #939393;	
	border-right-width: 1px;
	padding: 0px 10px; 	
	text-decoration: none;
}

.breadcrumbnav a.end {
  	border-right: none;
}

.breadcrumbnav a.title {
  	border-right: none;
		font-weight: 600;
}

.breadcrumbnav a:hover {
    color: #5280b2;
	text-decoration: none;
}

.breadcrumbnav a.end:hover {
  	text-decoration: none;
	color: #5280b2;
}

.breadcrumbnav a.title:hover {
  	text-decoration: none;
	color: #000000;
}

.breadcrumbnav a.end:hover {
  	text-decoration: none;
	color: #5280b2 ;
}


@media screen and (max-width: 800px) {
	.breadcrumb {
	float: none;
    display: block;
    text-align: left;
	padding-top: 0px;
	}
	
	.breadcrumbnav a {
    float: none;
    display: block;
    text-align: left;
	border-right: none;
  }

}

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}



/* Content */

.wrapper {
  align-content: center;
  margin: 40px 0px;
  padding: 0px;
   }

.column {
	float: left;
   	text-align: left;
	font-family: 'Roboto', sans-serif;
}

	ul a:link, p a:visited, p a:active { color:#000000; text-decoration:none; }
	ul a:hover { color:#3E6B9C; text-decoration:underline; }


.index {
	border: 1px solid #bdbdbd;
	background-color: #ffffff;
	margin-right: 10px;
}

.index.blue {
	border: 1px solid #bdbdbd;
	background-color:#F5F8FB;
	margin-right: 10px;
}

	.index:hover {
		box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
	}



.indexheader {
	background-color: #ffffff;
	text-align: center;
	font-size: 110%;
	padding: 20px 0px; 
	color: #000000; 
	font-weight: 600; 
	text-decoration: none;
}
	.indexheader a { display:block; } 

.indexcontent {	
	min-height: 220px;	
}

.indexcontent.large {	
	min-height: 280px;	
}

.indexcontent.xlarge {	
	min-height: 400px;	
}

.indexcontent.xsmall {	
	min-height: 100px;	
}

	.indexcontent ul { 
		font-size: 100%; 
		padding: 5px 5px 0px 10px; 
		color:#000000; 
		}

		.indexcontent ul a:link, .indexcontent ul a:visited, .indexcontent ul a:active { color:#000000; text-decoration:none; 	}
		.indexcontent ul a:hover { color:#4b79ab; text-decoration:underline; }


	.indexcontent p { 
		font-size: 100%; 
		padding: 5px 20px; 
		color:#000000; 
		}

		.index ul, .indexcontent ul { list-style-type: none; }
		.index li, .indexcontent li { font-size: 85%; color:#767676; }

	.indexcontent h1 { 
		font-size: 110%; 
		padding: 5px 20px 3px 20px; 
		color:#000000; 
		font-weight: 700;
		}

		.indexcontent h1 a:link, .indexcontent h1 a:visited, .indexcontent h1 a:active { color:#000000; text-decoration:none; 	}
		.indexcontent h1 a:hover { color:#4b79ab; text-decoration:underline; }

.main {
	float: left;
   	text-align: left;
	font-family: 'Roboto', sans-serif;
}

.main ul { 
		font-size: 100%; 
		padding: 5px 5px 0px 30px; 
		color:#000000; 
	}

	.main ul a:link, .main ul a:visited, .main ul a:active { color:#000000; text-decoration:underline; }
	.main ul a:hover { color:#4b79ab; text-decoration:underline; }


	.main p { 
			font-size: 100%; 
			padding: 5px 20px; 
			color:#000000; 
		}

	.main p a:link, .main p a:visited, .main p a:active { color:#000000; text-decoration:underline; }
	.main p a:hover { color:#4b79ab; text-decoration:underline; }



/* For tablets and desktop */

@media only screen and (min-width: 550px) {
    /* For tablets: */
	.col-s-0 {width: 3%;}
	.col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
   	.col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 900px) {
    /* For desktop: */
	.col-0 {width: 3%;}
	.col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
	

/* Design */

.bottomline {
	border-bottom: dotted 1px;
	border-bottom-color: #999999;
	padding: 15px 0px;
}

.lastbottomline {
	padding: 15px 0px;
	border-bottom: none;
	}

	  p.date { color: #6c6c6c; margin-bottom: -2px;   }
	  p.title { font-size: 110%; margin-bottom: 0.4cm; font-weight: 700; }
 	  p.text { font-size: 100%; margin: 0; }
	  p.place { font-size: 100%; margin-top: 0; font-weight: 700; }
 	  p.job { font-size: 100%; margin-top: 0; }	
	  
	  p.agenda { font-size: 100%; margin-top: 0; margin-bottom: 0.4cm; margin-left: 0.4cm; margin-right: 0 }
	  p.place { font-size: 100%; margin-top: 0; font-weight: 700; }
	  p.job1 { font-size: 100%; margin-top: 0.1cm; }


.frame {
	border: solid 1px #ccc;
	border-radius: 10px 10px 10px 10px;
	margin-bottom: 20px;
	font-size: 97%;
	padding: 10px 5px;
}

	a.bold:link, a.bold :visited, a.bold:active { color:#000000; text-decoration:underline; font-weight: 700; }
	a.bold:hover { color:#4b79ab; text-decoration:underline; font-weight: 700; }

.memo {
	border: solid 1px #E9F0F7;
	background-color: #E9F0F7;
	border-radius: 5px 5px 5px 5px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 900px;
  margin: 15px;
  padding: 15px;
  text-align: center;
  font-size: 85%; 
  font-weight: 100; 
  border: 1px solid #ccc;
}

.card a:link, .card a:visited, .card a:active { color:#000000; text-decoration:underline; }
.card a:hover { color:#3E6B9C; text-decoration:underline; }

.card.rooms {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 900px;
  margin: 15px;
  padding: 15px;
  text-align: left;
  font-size: 85%; 
  font-weight: 100; 
  border: 1px solid #ccc;
}

.card.rooms a:link, .card a:visited, .card a:active { color:#000000; text-decoration:underline; }
.card.rooms a:hover { color:#3E6B9C; text-decoration:underline; }



.rooms {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 900px;
  margin: 15px;
  padding: 15px;
  text-align: left;
  font-size: 95%; 
  font-weight: 100; 
  border: 1px solid #ccc;
}

.rooms a:link, .rooms a:visited, .rooms a:active { color:#000000; text-decoration:underline; }
.rooms a:hover { color:#3E6B9C; text-decoration:underline; }

.gallery {
  margin: 10px;
  border: 1px solid #ccc;
  float: left;
  width: 210px;
}


.gallery:hover {
  border: 1px solid #777;
}

.gallery img {
  width: 100%;
  height: auto;
}

.gallery a:link, .gallery a:visited, .gallery a:active { color:#000000; text-decoration:underline; }
.gallery a:hover { color:#4b79ab; text-decoration:underline; }

.desc {
  padding: 10px;
  text-align: center;
  font-size: 90%;
}

.mySlides {display:none;}



/* --- Full line below image layout (publications) --- */

.publ {
	height: 180px;
	margin-top: 13px;
	border-bottom-color: #666666;
	border-bottom-style: solid;
	border-bottom-width: 1px;

}

.publ img {	
	float: left;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	margin-right: 10px;
	margin-bottom: 10px;
	    *margin-bottom: 0px;
	}

.publ p {	
	padding-top: 0px;
	}
	

/*  Footer */

.footer {
	position: relative;
    float: left;
	left: 10px;
	padding: 10px 0px;
}

.footernav {
	margin: 20px 0px;
	width: auto;
	font-size: 90%;
	color: #939393;
}

.footernav a {
    color:#A2A2A2;
	text-decoration: none;
	border-right: solid;
	border-right-color: #939393;	
	border-right-width: 1px;
	padding: 0px 10px; 
	
}

.footernav a.end {
  	border-right: none;
}

.footernav a:hover {
    color: #4b79ab;
	text-decoration: underline;
}

.footernav a.end:hover {
  	text-decoration: none;
	color: #939393 ;
}

.footersoc {
	float: right;
	margin-right: 20px;
	width: auto;
	font-size: x-small;
	color: #939393;
}

.footersoc a {
	padding: 0px; 
	border: none;
	text-decoration: none;
}

.footersoc a:hover {
 	text-decoration: none;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media screen and (max-width: 800px) {
	.footernav {
	float: none;
    display: block;
    text-align: left;
	padding-top: 0px;
	}
	
	.footernav a {
    float: none;
    display: block;
    text-align: left;
	border-right: none;
  }
	.footersoc {
	float: left;
	margin-left: 15px;
	margin-top: 0px;
	padding-top: 0px;
	width: auto;
	}
}



/*  Lay-out */


h1 { 
	font-size: 130%; 
	padding: 10px 5px 1px 8px; 
	color: #000000; 
	font-weight: 700; 
}


h2 { 
	font-size: 110%; 
	padding: 5px 5px 2px 8px; 
	color: #000000; 
	font-weight: 700; 
}

	h2 a:link, h2 a:visited, h2 a:active { color:#000000; text-decoration:underline; }
	h2 a:hover { color:#3E6B9C; text-decoration:underline; }


p { 
	font-size: 100%; 
	padding: 5px 5px 0px 10px; 
	color:#000000; 
}
	
	p a:link, p a:visited, p a:active { color:#000000; text-decoration:underline; }
	p a:hover { color:#3E6B9C; text-decoration:underline; }


label { 
	font-size: 100%; 
	padding: 5px 5px 0px 10px; 
	color:#000000; 
}


ul { 
	font-size: 100%; 
	padding: 5px 5px 0px 50px; 
	color:#000000; 
	list-style: disc;
}

	ul a:link, ul a:visited, ul a:active { color:#000000; text-decoration:underline; }
	ul a:hover { color:#3E6B9C; text-decoration:underline; }


ol { 
	font-size: 100%; 
	padding: 5px 5px 0px 50px; 
	color:#000000; 
}

	ol a:link, ol a:visited, ol a:active { color:#000000; text-decoration:underline; }
	ol a:hover { color:#3E6B9C; text-decoration:underline; }


li {
	padding-left: 10px;
}

.cap {
	text-transform: uppercase;
	color: #6c6c6c;
}


table   { 
	width: 97%;
	table-layout: auto;
	border-collapse: collapse; 
	border: 1px solid #C0C0C0; 
	margin: 20px 5px 0px 10px;
	font-size: 100%; 
}


table.noborder   { 
	width: 97%;
	table-layout: auto;
	border-collapse: collapse;
	border: 1px solid #ffffff; 
	margin: 20px 5px 0px 10px;
	
}


table.small   { 
	width: 97%;
	table-layout: auto;
	border-collapse: collapse;
	border: 1px solid #ffffff; 
	margin: 20px 5px 0px 10px;
	font-size: 85%; 
	
}

table.rooms {
	width: 97%;
	table-layout: auto;
	border-collapse: collapse;
	border: 1px solid #ffffff; 
	margin: 20px 5px 0px 10px;
	font-size: 85%; 
}

	table.rooms td {
		aborder: 1px solid #eeeeee; 
		text-align: left;
		padding: 10px 5px 5px 5px;
		vertical-align: top;
}

	table.rooms th {
		border: 1px solid #eeeeee; 
		background-color: #987011;
		text-align: center;
		padding: 15px;
		vertical-align: top;
		font-weight: 700;
		color: #ffffff;
}

   table.rooms tr:nth-child(odd) {color: #000; background: #FFF}
   table.rooms tr:nth-child(even) {color: #000; background:#FFFBF2}

   table.rooms {border: 1px solid #C0C0C0; }
   table.rooms td, th {padding: 15px;}
   table.rooms col:first-child {background: #FF0}
   table.rooms col:nth-child(2n+3) {background: #CCC}


table.collaps   { 
	width: 99%;
	table-layout: auto;
	border-collapse: collapse;
	border: 1px solid #ffffff; 
	margin: 5px 5px 0px 5px;
	font-size: 85%; 
	
}

	table.collaps td   { 
		border: 1px solid #eeeeee; 
		text-align: left;
		padding: 10px 5px 5px 5px;
		vertical-align: top;
	}



	th   { 
		border: 1px solid #eeeeee; 
		background-color: #eeeeee;
		text-align: left;
		padding: 15px;
		vertical-align: top;
	}
	
	td   { 
		border: 1px solid #eeeeee; 
		text-align: left;
		padding: 10px 15px 7px 15px;
		vertical-align: top;
	}
	
	td a:link, td a:visited, td a:active { color:#000000; text-decoration:underline; }
	td a:hover { color:#4b79ab; text-decoration:underline; }

.right {float: right; }
.center {text-align: center; }

span.grey { color: #767676; }
span.greydark { color: #666666; }
span.greysmall { color: #444343; font-size: 80%; }
span.blue { color: #5599ff; }
span.bold { font-weight: 700; }
span.small { font-size: 85%; }
span.aspgrey { color: #767676; }
span.aspblue { color: #336699; }
span.asplightblue { color: #007eb4; }
span.aspred { color: #C30000; }
span.aspgreen { color: #10780D; }
span.asporange { color: #d04a00; }
span.underline { text-decoration: underline; }
span.italic { font-style: italic; }
span.right {text-align: right; }
span.center {text-align: center; }