/*-- FLEXBOX --*/
.flex_container{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;}
.flex_container.nowrap{
	flex-flow: nowrap;}
.flex_container.start{
  justify-content: flex-start;}
.flex_container.end{
	justify-content: flex-end;}
.flex_container.middled{
	align-items: center;
	justify-content: center;}
.flex_container.evenly{
	justify-content: space-evenly;}

.flex_item{
	flex: 1 auto;}
.flex_item.middle{
	align-self: center;}
.flex_item.end{
	align-self: flex-end;}

.container{
  width:100%;
  max-width:100%;
  margin:auto;}
.container_1600{
  width:100%;
  max-width:1600px;
  margin:auto;}
.container_1400{
  width:100%;
  max-width:1400px;
  margin:auto;}
.container_1300{
  width:100%;
  max-width:1300px;
  margin:auto;}
.container_1200{
  width:100%;
  max-width:1200px;
  margin:auto;}
.container_1100{
  width:100%;
  max-width:1100px;
  margin:auto;}
.container_1000{
  width:100%;
  max-width:1000px;
  margin:auto;}
.container_900{
  width:100%;
  max-width:900px;
  margin:auto;}
.container_800{
  width:100%;
  max-width:800px;
  margin:auto;}
.container_400{
  width:100%;
	max-width:400px;
  margin:auto;}
.grow5{flex-grow:5;}

.width10{width:10%;}
.width15{width:15%;}
.width20{width:20%;}
.width25{width:25%;}
.width30{width:30%;}
.width33{width:33.33%;}
.width35{width:35%;}
.width40{width:40%;}
.width45{width:45%;}
.width50{width:50%;}
.width55{width:55%;}
.width60{width:60%;}
.width65{width:65%;}
.width66{width:66.66%;}
.width70{width:70%;}
.width75{width:75%;}
.width80{width:80%;}
.width85{width:85%;}
.width90{width:90%;}
.width100{width:100%;}

.gap20{gap:20px;}

/* Alle blokken naar 100% */
@media (max-width : 850px) {
	.width10, .width15, .width20, .width25, .width30, .width33, .width35, .width40, .width45, .width50, .width55, .width60, .width65, .width66, .width70, .width75, .width80, .width85, .width90, .width100{
		width:100%;
		max-width:100%;}
	.respReverse{
		flex-direction: column-reverse;
	}
}

.minWidth100{min-width:100px;}
.minWidth150{min-width:150px;}
.minWidth200{min-width:200px;}
.minWidth250{min-width:250px;}
.minWidth300{min-width:300px;}
.minWidth350{min-width:350px;}
.minWidth400{min-width:400px;}

/*-- LAYOUT --*/

body{}
.top .logo{max-width:320px;}

header{}
	/* menu */
	.main-nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
		display:flex;
		justify-content: space-between;}
	.main-nav ul li{}
	.main-nav ul li a{
		padding:20px;
		color: #949597;
		width:100%;
		font-size:1.1em;
		font-family: "Titillium semibold";
		text-transform:uppercase;
		text-decoration: none;
		border-bottom:2px solid #FFF;}
	.main-nav ul li.active a{
		color: #000;
		padding: 5px 10px;
		border-color:#000;}

@media (max-width : 850px) {
	.main-nav ul {
		height:auto;
		justify-content: space-between;}
	.main-nav ul li{}
	.main-nav ul li a{
		font-size:1em;}
	.main-nav ul li.active a{}
}

.intro{
	min-height:100px;
	background:#000;
	background-image:url('../img/intro_bg.jpg');
	background-repeat:no-repeat;
	background-position:center top;}
.intro article{}
.intro article p{color:#fff;text-align:center;}
.intro article p .fa-caret-down{font-size:2em;}

.expo{display:flex;}
.expo .agenda{
	border:1px solid #A4A4A4;}
.expo .agenda .datum{
	font-size:90%;
	font-family: "Titillium light";}
.expo .agenda .titel{
	text-transform:uppercase;
	font-family: "Titillium bold";}
.expo .agenda .fa-caret-right{
	font-size:2em;}
.expo .current{
	position:relative;
	background-repeat:no-repeat;
	background-position:left top;
	background-size:cover;
	min-height:600px;}
.expo .current .currentExpo{
	position:absolute;
	left:60px;
	bottom:200px;}
.expo .current .expoExpo{
	position:absolute;
	left:60px;
	bottom:100px;}
	.expo .current .currentExpo .datum,
	.expo .current .expoExpo .datum{
		display:inline-block;
		color:#000;
		font-size:1.5em;
		padding:0 20px;
		font-family: "Titillium semibold";}
	.expo .current .currentExpo .titel,
	.expo .current .expoExpo .titel{
		display:inline-block;
		color:#FFF;
		font-size:1.8em;
		padding:0 20px;}
	.expo .current .currentExpo .titel span,
	.expo .current .expoExpo .titel span{
		font-family: "Titillium bold";}
	.expo  article p{}
.expo .current .moreExpo{
	position:absolute;
	bottom:0;
	width:100%;
	padding:0 60px 1px 60px;}
.expo .current .moreExpo{}
@media (max-width : 1100px) {
	.expo{
		display:flex;
		flex-direction:column-reverse;}
	.expo .width33,
	.expo .width66{width:100%;}
	.expo .width90{width:90%;}
	.expo .width10{width:10%;}
	.expo .current .currentExpo{
		width:90%;
		left:calc(10% / 2);
		bottom:120px;}
	.expo .current .moreExpo{padding:0 40px;}
}
@media (max-width : 900px) {
	.expo .current .moreExpo{padding:0 20px;}
}
.beeldbeeld .socials .fa{
	color:#000;
	font-size:1.5em;
	margin:0 5px 5px 10px;}

.drieluik{display:flex; flex-wrap:nowrap;}
.drieluik div{background-color:#000;}
.drieluik .flex_container{flex-direction:column;}
.drieluik .width33:nth-child(2) .flex_container{flex-direction:column-reverse;}
.drieluik article a{
	display:block;
	text-align:center;
	padding:100px 0;
	color:#FFF;
	font-size:110%;
	font-family: "Titillium semibold";
	text-decoration: none;}
.drieluik article a .fa{color:#fff;font-size:1.5em}
@media (max-width : 900px) {
	.drieluik article a{padding:10vw 0;}
}

.partners{
	--s: 200px; /* size of the logo */
	--d: 28s; /* animation duration*/
	--n: 5; /* number of visible logos */
  display: flex;
	align-items:center;
  overflow: hidden;
  mask:
		linear-gradient(90deg,#0000, #000 5% 95%,#0000);
}
.partners img{
	display:block;
	max-width:220px;
	max-height:80px;
	width: auto;
  height: auto;
	filter: grayscale(100%);
	opacity:0.8;
	/* width: var(--s); */
  offset: shape(from calc(var(--s)/-2) 50%,hline by calc(sibling-count()*max(100%/var(--n),var(--s) + 10px)));
  animation: x var(--d) linear infinite calc(-1*sibling-index()*var(--d)/sibling-count());
	animation-direction: reverse;
}
@keyframes x {
  to {offset-distance: 100%}
}

.container:hover img {
  /* animation-play-state: paused */
}

.tekeningen{display:flex;flex-wrap:wrap;align-items:center;gap:20px;width:100%;}
.tekeningen img{max-width:calc(33% - 20px);height:auto;}

.affiches{display:flex;flex-wrap:wrap;align-items:center;gap:20px;width:100%;}
.affiches img{max-height:430px;margin:auto;}

.projecten{display:flex;flex-wrap:wrap;align-items:center;gap:20px;width:100%;}
.project{width:calc(50% - 20px);min-width:450px;height:auto; border:1px solid #AFAFAF;margin:auto;}
.project figure{padding:10px;background-color:#EAEAEA;}
.project figure img{height:300px;width:auto;margin:auto;}
.project article{position:relative; height:calc(100% - 20px);}
.project h4{font-family: "Titillium bold";}
.project p{margin: 0.5em 0;}
.project .year{display:inline-block;background-color:#000;color:#fff;padding:5px 10px;line-height:1;}
.project article .projectMore{position:absolute; bottom:20px;right:0;}
.project article .projectMore a{background-color:#DBDBDB;padding:5px 10px;line-height:1;text-decoration:none;color:#000;font-family: "Titillium semibold";}
.project article .projectMore a .fa{margin-left:20px;}
@media (max-width : 900px) {
	.project{width:calc(100% - 40px);}
	.project figure img{height:auto;}
	.project .width40{width:auto;flex-grow:1;}
	.project .width60{width:auto;flex-grow:2;}
}
.agendas{
	display:flex;
	flex-wrap:wrap;
	align-items:stretch;
	/* align-items: flex-start; */
	gap:20px;
	width:100%;
	/* justify-content: space-around; */
}
.agenda{width:calc(33% - 20px); border:1px solid #AFAFAF;min-height:240px;}
.agendas .agenda .titel{font-family: "Titillium bold";}
.agendas .agenda .datum{font-size:90%;font-family: "Titillium light";}
.agendas .agenda p span{font-size:90%;font-family: "Titillium semibold";}
.agendas .agenda a{text-decoration:none;color:#000;height:100%;}
.agendas .agenda a:hover{background-color:#EAEAEA;}

.praktisch{}
.praktisch h2 span{font-family: "Titillium semibold";}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
	background-color:rgba(255,255,255,0.8);
	z-index: 999;}
.sticky:before,
.sticky:after {
  content: '';
  display: table;}
.sidebar{
  border-right:1px solid #f6f6f8;}
.sidebaritem{
	background-color: #f6f6f8;
	padding:10px;
	margin-top:10px;
	border-radius:4px;}
	.sidebaritem a{
		display:block;
		color:#555;
		text-decoration:none;}
	.sidebaritem.active{
		background-color: #22bbdd;}
	.sidebaritem.active a{
		color: #fff;}

.cta{
	margin:30px 0;
}

.cta a{
	display:inline-block;
	padding:0 20px;
	color: #fff;
	font-size:1em;
	line-height:2.2em;
	background-color: #22bbdd;
	/* background-color: rgb(53, 140, 229); */
	border-radius: 8px;
	text-decoration: none;
}

@media (max-width : 900px) {

}
@media (max-width : 750px) {

}

section,
main{
  min-height:100px;}

.footer{
	font-size:90%;
	line-height:1.6em;
	padding:20px 20px 30px 20px;
	background-color:#000;
	color:#fff;}
.footer .small_logo{
	filter: invert(0.7);
	max-width:120px;
	max-height:70px;
	margin:auto;}
.footer .socials .fa{
	color:#fff;
	font-size:2.5em;
	padding:0 5px 5px 0;}
.footer .partners{
	width: fit-content;
  margin: auto;}
.footer .partner img{
	filter: grayscale(100%);
	opacity:0.6;
	max-width:130px;
	max-height:70px;
	margin:15px;}
.footer .mininav ul{
	display:flex;
	flex-wrap:wrap;
	justify-content: flex-end;}
.footer .mininav ul li{
	border-left:2px solid rgba(255, 255, 255, 0.5);
	padding:0;
	margin:5px;}
.footer .mininav ul li:first-child{border-width:0;}
.footer .mininav ul li:before{
	content: '';}
.footer .mininav a{
	color:rgba(255, 255, 255, 0.9);
	line-height:1;
	text-decoration: none;}
.footer .adres p{text-align: right;}

.footer .adres p a{
	color:rgba(255, 255, 255, 1);
	text-decoration: none;}

/*-- TYPO --*/

body{
	/* font-family: 'Barlow Condensed regular', sans-serif; */
	font-family: 'Titillium regular', sans-serif;
	font-size:110%;}
article{}
article p,
article ul,
article ol{
	padding:5px 0;
}
article p b,
article p .vet{
	font-family: 'Titillium semibold', sans-serif;}
article p strong{
	font-family: 'Titillium bold', sans-serif;}
article ol{
	margin-left: 15px;}
article ul li:before{
	font-family: "fontAwesome";
	content: "\f111";
	font-size:0.3em;
	vertical-align: middle;
	margin-right:5px;
	color:#444;
}
article p a,
article li a{
	color:rgb(53, 170, 229);}

.sub{
	color:#777;
	min-height:33px;
/*	line-height:35px;*/
	border-radius:17px;
	border:1px solid #777;
	display:inline-block;
	font-weight:300;
	text-decoration: none;
	padding:4px 15px;
	margin:0 15px 10px 0;
    line-height:1.5;
/*	white-space: nowrap;*/
    background-color:#fff;
/*	min-width:250px;*/
/*	max-width:280px;*/
}
.sub.active,
.sub:hover{
    color:#1c5661;
	font-weight:500;}
.sub:before{
    line-height:19px;
    display:inline-block;
	font-family: 'fontAwesome';
	content: "\f105";
	margin-right:8px;}


.album ul{
  display: flex;
  flex-wrap: wrap;}
.album li{
	height: 23vh;
	flex-grow: 1;}
.album ul li:last-child{
	flex-grow: 10;}
.album img{
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
	object-position: 50% 70%;
  /* vertical-align: bottom;
  vertical-align: center; */
	border:1px solid #fff;}

@media (max-aspect-ratio: 1/1) {
	.album li{
		height: 30vh;}
}
@media (max-height: 480px) {
	.album li{
	  height: 80vh;}
}
@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
	.album ul{
		flex-direction: row;}
	.album li {
  	height: auto;
    width: 100%;}
	.album img {
    width: 100%;
    max-height: 75vh;
    min-width: 0;}
	}

	.sidebar{
	}
	.sidebar:before{
	}
/*-- MISCELLANEOUS --*/
.bg_lichtgrijs{
	background-color:#efefef;}
.bg_lichtlichtgrijs{
	background-color:#F2F2F2;}
.bg_zwart{
	background-color:#000;}
.bg_wit{
	background-color:#FFF;}
.bg_gifgroen{
	background-color:#97B72A;}
.bg_lichtgroen{
	background-color:#E4EFC4;}
.containerBlue{
	background-color: #e3f0f4;
  padding: 10px;}
.containerGrey{
	background-color: #f6f6f8;
	padding: 10px;}
/* .more{background-color:#000;} */
.more a{
	color:#fff;
	display:block;
	padding:5px 20px;
	text-transform:uppercase;
	text-decoration:none;}
.inlineBlock{
	display:inline-block;
}

.more a .fa-caret-right{
	font-size:1.5em !important;
	float:right;
	margin-left:20px;}

.border_dashed{
  border-width:0px;
  border-style: dashed;}
.border_dotted{
  border-width:0px;
  border-style: dotted;}
.border_gifgroen{
  border-width:1px;
	border-color:#97B72A;}
.border_bottom_gifgroen{
	border-bottom-width:1px;
	border-bottom-color:#97B72A;}
.border_top_gifgroen{
	border-top-width:1px;
	border-top-color:#97B72A;}
.border_left_gifgroen{
	border-left-width:1px;
	border-left-color:#97B72A;}
.border_right_gifgroen{
	border-right-width:1px;
	border-right-color:#97B72A;}

.gray{
	color:#888;}
.black{
	color:#000;}
.firebrick{
	color: firebrick;}
.gifgroen{
  color:#97B72A;}

hr{
  display:block;
  height:1px;
  border:0;
	border-top: 1px solid #000;
	margin:0.1em 0;
  padding:0;}
hr.fat{
  border-width:5px;}
hr.lichtgroen{
	border-color:#E4EFC4;}
hr.lichtgrijs{
	margin:0;
	border-color:#E0E0E0;}
.objcentered{
  margin:auto;
}

.margin10_30{
    margin:10px 30px;}
.margin15_30{
    margin:15px 30px;}
.margin20_30{
    margin:20px 30px;}
.margin10_40{
    margin:10px 40px;}
.margin15_40{
    margin:15px 40px;}
.margin20_40{
    margin:20px 40px;}
.margin10_50{
    margin:10px 50px;}
.margin15_50{
    margin:15px 50px;}
.margin20_50{
    margin:20px 50px;}
.margin10{
	margin:10px;}
.margin020{
	margin:0 20px;}
.margin20{
    margin:20px;}
.margin30{
    margin:30px;}
.margin40{
    margin:40px;}
.margin50{
    margin:50px;}
.nomargin{
	margin:auto;}
@media (max-width : 720px) {
    .margin10_30,
    .margin15_30,
    .margin20_30,
    .margin10_40,
    .margin15_40,
    .margin20_40,
    .margin10_50,
    .margin15_50,
    .margin20_50,
    .margin10,
    .margin20,
    .margin30,
    .margin40,
    .nomargin{
        margin:20px;
    }
}
article.marginauto{
	margin-left:auto;
	margin-right:auto;}

.padding10{
  padding:10px;}
.padding20{
  padding:20px;}
.padding30{
  padding:30px;}
.padding40{
  padding:40px;}
.nopadding{
  padding:0;}
@media (max-width : 720px) {
  .padding10,
  .padding20,
  .padding30,
  .padding40,
  .nopadding{
    padding:20px;}
}

.clear{clear:both;}
.clear_5{clear:both;height:5px}
.clear_10{clear:both;height:10px}
.clear_15{clear:both;height:15px}
.clear_20{clear:both;height:20px}
.clear_30{clear:both;height:30px}
.clear_40{clear:both;height:40px}
.clear_50{clear:both;height:50px}

.centered{
	text-align: center;}
.lefted{
	text-align: left;}
.righted{
	text-align: right;}
figure img,
figure a img{
	display:block;
	width:100%;
	max-width:100%;}
.objectfit img{
	object-fit: cover;}
.blocked{
	display: block;}