/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/

/* Overall
–––––––––––––––––––––––––––––––––––––––––––––––––– */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container{
	width: 88%;
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
	display:block;
}

[class*='col-']{
	float:left;
	position: relative;
	min-height: 1px; 
	width: 100%;
}


/* For devices smaller than 550px */
@media (max-width: 550px) {
	.image {
		width: 70% !important;
		margin: 0 auto 0;
	}

  .image > .img { background-position: 50% 30% !important; }
  
	.voorkant {
		width: 70% !important;
		margin: 0 auto 0;
	}

	.RB {
		width: 95% !important;
		margin: 0 auto 0;
	}
	
	.map {
		width: 95% !important;
		margin: 0 auto 0;
	}

	.center {
		margin: 0 auto 0 !important;
		text-align: center!important;
	}
	.social {
		margin: 0 auto 0!important;
	}
	.res-name, .res-name > .name {
		display:block !important;
	}
	.name {
		display: none;
	}
}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
		width: 94%;
		padding: 0;
	}
}

/* For devices larger than 550px */
@media (min-width: 550px) {
	.container {
		width: 94%;
	}
	.row{
		margin: 0 -15px;
	}
	
	[class*='col-']{
		padding: 0 15px;
	}
	
	.col-1{
		width: 8.33333333%;
	}
	
	.col-2{
		width: 16.66666667%;
	}
	
	.col-3{
		width: 25%;
	}
	
	.col-4{
		width: 33.33333333%;
	}
	
	.col-5{
		width: 41.66666667%;
	}
	
	.col-6{
		width: 50%;
	}
	
	.col-7{
		width: 58.33333333%;
	}
	
	.col-8{
		width: 66.66666667%;
	}
	
	.col-9{
		width: 75%;
	}
	
	.col-10{
		width: 83.33333333%;
	}
	
	.col-11{
		width: 91.66666667%;
	}
	
	.col-12{
		width: 100%;
	}
	
	.col-pull-0{
		right: 0
	}
	
	.col-pull-1{
		right: 8.33333333%
	}
	
	.col-pull-2{
		right: 16.66666667%
	}
	
	.col-pull-3{
		right: 25%
	}
	
	.col-pull-4{
		right: 33.33333333%
	}
	
	.col-pull-5{
		right: 41.66666667%
	}
	
	.col-pull-6{
		right: 50%
	}
	
	.col-pull-7{
		right: 58.33333333%
	}
	
	.col-pull-8{
		right: 66.66666667%
	}
	
	.col-pull-9{
		right: 75%
	}
	
	.col-pull-10{
		right: 83.33333333%
	}
	
	.col-pull-11{
		right: 91.66666667%
	}
	.col-pull-12{
		right: 100%
	}

	.col-push-0{
		left: 0
	}
	
	.col-push-1{
		left: 8.33333333%
	}
	
	.col-push-2{
		left: 16.66666667%
	}
	
	.col-push-3{
		left: 25%
	}
	
	.col-push-4{
		left: 33.33333333%
	}
	
	.col-push-5{
		left: 41.66666667%
	}
	
	.col-push-6{
		left: 50%
	}
	
	.col-push-7{
		left: 58.33333333%
	}
	
	.col-push-8{
		left: 66.66666667%
	}
	
	.col-push-9{
		left: 75%
	}
	
	.col-push-10{
		left: 83.33333333%
	}
	
	.col-push-11{
		left: 91.66666667%
	}
	
	.col-push-12{
		left: 100%}
	
	.col-offset-0{
		margin-left: 0
	}
	
	.col-offset-1{
		margin-left: 8.33333333%
	}
	
	.col-offset-2{
		margin-left: 16.66666667%
	}
	
	.col-offset-3{
		margin-left: 25%
	}
	
	.col-offset-4{
		margin-left: 33.33333333%
	}
	
	.col-offset-5{
		margin-left: 41.66666667%
	}
	
	.col-offset-6{
		margin-left: 50%
	}
	
	.col-offset-7{
		margin-left: 58.33333333%
	}
	
	.col-offset-8{
		margin-left: 66.66666667%
	}
	
	.col-offset-9{
		margin-left: 75%
	}
	
	.col-offset-10{
		margin-left: 83.33333333%
	}
	
	.col-offset-11{
		margin-left: 91.66666667%
	}
	
	.col-offset-12{
		margin-left: 100%
	}
}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements are based 
on 10px sizing. So basically 1.5rem = 15px */
html{
	font-size: 62.5%; 
}

body{
	font-size: 1.5rem; 
	line-height: 1.6;
	font-weight: 400;
	font-family: Helvetica, Arial, sans-serif;
	color: #222; 
}

/* Custom
–––––––––––––––––––––––––––––––––––––––––––––––––– */

::selection {
  background: #eaeaea;
}

.image {
	position: relative;
	width: 100%;
}

.image:after {
	content: "";
	display: block;
	padding-bottom: 120%;
}

.image > .img {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../images/picture_website.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0% 30%;
	border-radius: 0%;
}

.imageLF {
  width: 50%;
  max-width: 480px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.map {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.akte {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.stamboom {
  width: 100%;
  max-width: 1440px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.voorkant {
	position: relative;
	width: 95%;
}

.voorkant:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.voorkant > .img {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../images/voorkant.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 30%;
	border-radius: 0%;
}

.RB {
	position: relative;
	width: 350%;
}

.RB:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.RB > .img {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url(../images/RB.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0% 30%;
	border-radius: 0%;
}

.social {
	margin: 0;	
	width: 74px;
}

.btn-tw {
	float: left;
	margin-right: 7px;
	display: block;
	color: #ffffff;
	background: #949494;
	border-radius: 50%;
	cursor: pointer;
}

.fa {
	padding: 10px;
}
.btn-li {
	float: left;
	display: block;
	color: #ffffff;
	background: #949494;
	border-radius: 50%;
	cursor: pointer;
}

.btn-tw:hover, .btn-li:hover{
	color: #ffffff;
	background: #000000;
}

.name > h1 {
	margin: 0;
}

.name > span {
	margin: 0;
	font-size: 1.6rem;
	color: #919191;
}

.name > .jobmarket {
  display: block;
  margin-top: 0.2em;
  font-weight: 700;
  color: #000; /* force black */
}

.home {
	text-decoration: none;
	color: inherit;
}

.home:hover {
	text-decoration: underline;
	color: inherit;
}

.res-name {
	display: none;
}

.badge{
	display:inline-block;
	font-weight: bold;
	text-transform: uppercase;
	color: #f00066;
}

#three-columns {
    width:500px;
        -moz-column-count: 3;
        -moz-column-gap: 20px;
        -webkit-column-count: 3;
        -webkit-column-gap: 20px;
        column-count: 3;
        column-gap: 20px;
    }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6{
	margin-bottom: 2rem;
	font-weight: 300; 
	color: #000000;
}

h1{
	font-size: 3.6rem; 
	line-height: 1.2; 
	letter-spacing: -.1rem;
}

h2{
	font-size: 2.0rem;
	margin-bottom: 1rem;	
	line-height: 1.25; 
	font-weight:bold;
}

h3{
	font-size: 2.4rem; 
	line-height: 1.3; 
	letter-spacing: -.1rem;
}

h4{
	font-size: 1.8rem; 
	margin-bottom: 1rem;	
	line-height: 1.35; 
	letter-spacing: -.08rem;
}

h5{
	font-size: 1.5rem; 
	line-height: 1.5; 
	letter-spacing: -.05rem;
}

h6{
	font-size: 1.3rem; 
	line-height: 1.6; 
	letter-spacing: 0;
}

/* Larger than phablet */
@media (min-width: 550px){
	h1{
		font-size: 3.6rem;
	}
	
	h2{
		font-size: 2.0rem;
	}
	
	h3{
		font-size: 3.0rem;
	}
	
	h4{
		font-size: 2.4rem;
	}
	
	h5{
		font-size: 1.5rem;
	}
	
	h6{
		font-size: 1.3rem;
	}
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a{
	color: #1EAEDB;
	text-decoration: none;
}

a:hover{
	color: #0FA0CE;
	text-decoration: underline;
}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button, button, input[type="submit"], input[type="reset"], input[type="button"]{
	display: inline-block;
	height: 38px;
	padding: 0 30px;
	color: #555;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 38px;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border-radius: 4px;
	border: 1px solid #bbb;
	cursor: pointer;
	box-sizing: border-box; 
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus{
	color: #333;
	border-color: #888;
	outline: 0;
}

.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary{
	color: #FFF;
	background-color: #33C3F0;
	border-color: #33C3F0;
}

.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus,input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus{
	color: #FFF;
	background-color: #1EAEDB;
	border-color: #1EAEDB;
}

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea, select{
	height: 38px;
	padding: 6px 10px;
	background-color: #fff;
	border: 1px solid #D1D1D1;
	border-radius: 4px;
	box-shadow: none;
	box-sizing: border-box; 
}

input[type="email"], input[type="number"], input[type="search"], input[type="text"],input[type="tel"], input[type="url"], input[type="password"], textarea{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

textarea {
	min-height: 65px;
	padding-top: 6px;
	padding-bottom: 6px;
}

input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus,input[type="tel"]:focus, input[type="url"]:focus,input[type="password"]:focus, textarea:focus,select:focus{
	border: 1px solid #33C3F0;
	outline: 0;
}

label,legend{
	display: block;
	margin-bottom: .5rem;
	font-weight: 600;
}

fieldset{
	padding: 0;
	border-width: 0;
}

input[type="checkbox"], input[type="radio"]{
	display: inline;
}

label > .label-body{
	display: inline-block;
	margin-left: .5rem;
	font-weight: normal;
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul{
	list-style: disc outside;
}

ol{
	list-style: decimal inside;
}

ol, ul{
	padding-left: 0;
	margin-top: 0;
	margin-left: 30px;
}

ul ul, ul ol, ol ol, ol ul {
	margin: 1.5rem 0 1.5rem 3rem;
	font-size: 90%; }

li {
	margin-bottom: 1rem;
	padding-left: 5px;
}
  

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code{
	padding: .2rem .5rem;
	margin: 0 .2rem;
	font-size: 90%;
	white-space: nowrap;
	background: #F1F1F1;
	border: 1px solid #E1E1E1;
	border-radius: 4px;
}

pre > code {
	display: block;
	padding: 1rem 1.5rem;
	white-space: pre;
}


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */

 .centertable {
  margin-left: auto;
  margin-right: auto;
} 

th, td{
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid #E1E1E1;
}

th:first-child, td:first-child{
	padding-left: 0;
}

th:last-child, td:last-child{
	padding-right: 0;
}

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button, .button{
	margin-bottom: 1rem;
}

input, textarea, select, fieldset {
	margin-bottom: 1.5rem;
}

pre, blockquote, dl, figure, table, p, ul, ol, form{
	margin-bottom: 2.5rem;
}


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr{
	margin-top: 1rem;
	margin-bottom: 1.5rem;
	border-width: 0;
	border-top: 1px solid #E1E1E1;
}

.m-bottom-m {
	margin-bottom: 2rem;	
} 
.m-top-m {
	margin-top: 2rem;
	margin-bottom: 1rem;	
} 
 
.m-top-l {
	margin-top: 5rem;
}
 
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.row:after{
	content: "";
	display: table;
	clear: both;
}

.u-clr:after{
	content: "";
	display: table;
	clear: both;
}

ul.dash {
  list-style-position: outside; 
  margin-left: 2.00rem;  /* shift list so marker aligns under heading */
  padding-left: 0.5rem;  /* small indent for text after the dash */
}
ul.dash li::marker { content: "—  "; }

/* Collapsible "Other" section */
.other-toggle {
  cursor: pointer;
}

/* Default state: closed, triangle pointing right */
.other-toggle::after {
  content: "▸";
  display: inline-block;
  margin-left: 0.3em;
}

/* Open state: triangle pointing down */
.other-toggle.open::after {
  content: "▾";
}

/* List is hidden by default */
#other-list {
  display: none;
}