/* FONT: Google Font 'Poppins' (// betalende Campton Book) stijlen 300 (light), 400 (regular), 800 (extra-bold)  */

/* Poppins self-hosted */

/* Poppins Light 300 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Poppins Light'),
       url('/fonts/poppins-light-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-light-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* Poppins Regular 400 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Poppins Regular'),
       url('/fonts/poppins-regular-400.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-regular-400.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* Poppins Bold 600 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Poppins Bold 600'),
       url('/fonts/poppins-bold-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-bold-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* Poppins Bold 800 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Poppins Bold 800'),
       url('/fonts/poppins-bold-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/poppins-bold-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
	font-family: 'Poppins', sans-serif;
	font-weight:400;
	font-size:1.6em;
	color:#555555;
	background-color: #efefef;
}

.container {
	width:100%; /* Specificeren, anders vult Bootstrap niet uit tot 1366px. Omdat er geen object zoals een header image is om het open te duwen. */
	max-width:1366px;
}

.offscreen { /* Haalt element uit de flow en maakt het onzichtbaar voor zienden, maar niet voor blinden (itt. display:none) */
     position: absolute;
     left: -999em;
}

abbr[title] {
	border:none;
	cursor:pointer; /* Default voor abbr is pijl met vraagteken => veranderen in gewone pointer bij link. */
}

.highlight-orange {
	color:#e94e0f;
}

.highlight-blue {
	color:#00889e;
}

p {
	line-height:2.0em;
	margin-top:20px;
	margin-bottom:20px;
}

#content li {
	line-height:2.0em;
}

a {
	color:#990033;
	text-decoration:underline;
}

a:hover, a:focus {
	text-decoration:none;
	background-color:#990033 !important;
	color:#FFFFFF !important;
}

a:focus img {
	border:solid 5px #c42709;
}
hr {
	border-color:#efefef;
}

/* FEDERAL HEADER ----------------------------------------------------------------------------------------------- */

#skip-navigation:focus, #skip-content:focus { /* Zo verschijnen de skiplinks enkel wanneer iemand de tab-toets gebruikt en de link 'in focus' is. In combinatie met .offscreen */
     position: static;
     left: auto;
     float: left;
     font-size: 14px;
     text-decoration: none;
     background-color: #000;
     color: #FFF;
     padding: 2px 7px 3px 7px;
	 margin-right:5px;
     border-radius: 5px;
}

#federal-header {
	font-size:0.7em;
	margin-bottom:10px;
}

#federal-header .federal-header-background {
	padding:5px 0 5px 0;
	background-image:url(../images/federal-header-background.png);
	background-position:bottom right;
	background-repeat:no-repeat;
}

#federal-header ul {
	margin:0;
	padding:5px 0 2px 0;
}

#federal-header li {
	display:inline;
	margin-right:3px;
}

#federal-header .langswitch-nl, .langswitch-fr, .langswitch-en { /* Geen a gespecifieerd, dan werkt het ook met <span> rond de actieve taal */
	padding:2px 5px 2px 5px;
	background-color:#ffffff;
	border:1px solid #d7d7d7;
	border-radius:20%;
	color:#000000;
	text-decoration:none;
	font-weight:600;
	font-size:0.9em;
	text-transform:uppercase;
}

#federal-header .langswitch a:hover,
 body.nl #federal-header .langswitch-nl,
 body.fr #federal-header .langswitch-fr,
 body.en #federal-header .langswitch-en {
	background-color:#555555!important;
	border-color: #000000!important;
	color:#ffffff!important;
	text-decoration:none!important;
}

#federal-header .belgium-link {
	padding:5px 60px 2px 0;
	text-align:right;
}

#federal-header .belgium-link a {
	color:#555555;
}

@media (max-width: 420px) { 
	.belgium-link {
		display:none /* Beneden deze width is het immers niet mooi meer om de link naar belgium.be te tonen (verspringt naar drie lijnen) */
	}
} 

/* NAVIGATION -------------------------------------------------------------------------------- */
#navigation {
	margin-bottom:10px;
}

.navbar-brand {
	font-family: 'Poppins', sans-serif;
	font-weight:600;
	font-size:1.5em;
	color:#FFFFFF!important;
}

nav.navbar {
	margin-bottom:0px;
	border-radius:0px;
	background-color:#3a2e32;
}

.navbar-padding {
	padding-left:0px;
	padding-right:0px;
}

ul.navbar-nav {
	float:right;
}

.navbar-default {
	background:none;
	border:none;
}

.navbar a {
	color:#FFFFFF!important;
	text-decoration:none;
}

.hidden { 
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

@media (max-width: 767px) { 
	ul.navbar-nav {
		float:none;
		border:none;
	}
	nav {
		margin-right:auto;
	}
	.navbar-brand {
		float:none;
		padding-left:0px;
	}
}

/* HEADER -------------------------------------------------------------------------------- */

#header.container {
	background-image:
	linear-gradient(280deg, rgba(255, 255, 255, 0) 15%, rgba(153, 0, 51, 1.0) 65%),
	url('../images/bg-header.jpg');
	background-position:center;
	height:460px;
	margin-bottom:0;
}

#header h1 {
	margin-top:90px;
	font-weight:normal;
	color:#FFFFFF;
	text-shadow: 1px 1px 10px #000000;
	border:none;
}

#header h1 .h1-strong {
	display:block;
	font-family: 'Poppins', sans-serif;
	font-weight:800;
	font-size:2.2em;
}

#header h1 .h1-regular {
	display:block;
	font-family: 'Poppins', sans-serif;
	font-weight:300;
	font-size:1.3em;
	margin-top:-15px;
}

/* Responsive adjustments */

@media (max-width: 767px) { 
	#header.container {
		background-position:60%;
		height:300px;
	}
	#header h1 {
		margin-top:40px;
	}
	#header h1 .h1-strong {
		font-size:1.2em;
	}
	#header h1 .h1-regular {
		font-size:1.0em;
	}
}

/* CONTENT -------------------------------------------------------------------------------- */

/* Algemeen voor de hele zone */

#content h1 {
	line-height:1.6em;
	margin-top:20px;
	margin-bottom:20px;
	font-weight:600;
	font-size:2.0em;
	color:#555555;
}

#content h2 {
	line-height:1.6em;
	margin-top:20px;
	margin-bottom:20px;
	font-weight:600;
	font-size:1.4em;
	color:#990033;
}

#content h3 {
	line-height:1.6em;
	margin-top:20px;
	margin-bottom:20px;
	font-weight:600;
	font-size:1.0em;
	color:#990033;
}

#content h3.h3-subtitle {
	font-size:1.3em!important;
}

#content h4 {
	line-height:1.6em;
	margin-top:20px;
	margin-bottom:20px;
	font-weight:600;
	font-size:1.2em;
	color:#990033;
}

#content li {
	list-style-type:square;
}

table th.table-beschrijving {
	padding-top:12px!important;
}

table p, td h3 {
	margin-top:0px!important;
}
td h3 {
	font-size:1.2em!important;
	color:#555555!important;
}

caption {
	line-height:1.6em;
	margin-top:20px;
	margin-bottom:20px;
	font-weight:600;
	font-size:1.4em;
	color:#990033;
}

/* Specifiek: blok Text */

.textblock-news {
	margin-top:10px;
	margin-bottom:10px;
	background-color:#FFFFFF;
	padding:20px 20px 20px 20px;
}

.textblock-newsitem {
	padding-top:40px;
	border-bottom: 1px solid #cccccc;
}

.textblock-newsitem-icon {
	color:#FFFFFF;
	background-color: #990033;
	font-weight:600;
	width:auto;
	padding:5px 5px 5px 5px;
}

.textblock-container {
	margin-top:10px;
	margin-bottom:50px;
	background-color:#FFFFFF;
}

body.subpage div.textblock-container {
	margin-bottom:0px;
}

#text div.textblock-1 {
	padding-right:20px;
	padding-top:20px;
	padding-bottom:20px;
}

#text div.textblock-2 {
	padding-left:20px;
	padding-top:20px;
	padding-bottom:20px;
}

/* Responsive adjustments */

@media (max-width: 991px) { 
	#text div.textblock-1 {
		padding-right:0;
	}
	#text div.textblock-2 {
		padding-left:0;
	}
}

/* Specifiek: blok Video */

#video img {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	boder:none;
}

#video {
	margin-bottom:20px;
}

/* Responsive adjustments */

@media (max-width: 767px) { 
	#video img {
		margin-bottom:20px;
	}
}

/* Specifiek: blok Info */

#info {
	margin-bottom:60px;
}

/* FOOTER -------------------------------------------------------------------------------- */

#footer {
	font-size:0.8em;
	background-color: #FFFFFF;
	margin-bottom:20px;
}

#footer .col-sm-12, #footer .col-sm-4 {
	padding:0;
}

#footer .footer-second .col-sm-12 {
	text-align: center;
}

#footer .footer-second {
	margin-top:40px;
	margin-bottom:40px;
}

/* COPYRIGHT --------------------------------------------------------------------------- */

#copyright {
	text-align:center;
	font-size:0.8em;
	margin-bottom:10px;
}

#copyright li {
	display:inline;
	padding-left:8px;
	padding-right:8px;
	border-left:1px solid #555555;
}

#copyright li.copyright-first {
	padding-left:0px;
	border-left:none;
}

/* SUBPAGE ----------------------------------------------------------------------------- */

body.subpage #header-bottom.container {
	height:81px;
	background: url(../images/bg-header-bottom-subpage.jpg) no-repeat;
}

body.subpage #text.container {
	margin-bottom:50px;
}

body.subpage #header-intro h2 {
	font-size:2.2em;
	font-weight:600;
}

body.subpage #content h3 {
	font-size:1.8em;
	font-weight:600;
}

.bg-light {
	background-color:#f0f8fa;
}