@charset "utf-8";
/* CSS Document */

@font-face{
    font-family: "FrutigerLTStdCond";
    src: url("/fonts/Frutiger LT Std 57 Condensed.woff2")format("woff2");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}
/* Classic Regular FontAwesome 7.1.0 (Free) */
/*@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 400;                 /* regular */
/*  font-display: swap;
  src: url("/fonts/fa-regular-400.woff2") format("woff2");
}
/* Brands (Free) FontAwesome 7.1.0 */
/*@font-face {
  font-family: "Font Awesome 7 Brands";
  font-style: normal;
  font-weight: 400;                 /* brands */
/*  font-display: swap;
  src: url("/fonts/fa-brands-400.woff2") format("woff2");
}*/


* {	box-sizing: border-box; -moz-box-sizing:border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; margin: 0; overflow-x: hidden; position: relative;	}
body {	font-family:'Arial', sans-serif; font-weight:400; font-size: 1em; letter-spacing: 0.01em; /* subtiel effect */ line-height:1.6; background: rgba(155,164,180,.2) url('../images/bg3.svg') top center no-repeat; background-size: cover; background-attachment: fixed;  }

/* slideshow bovenaan tekstpagina's */
#imagecontainer { padding: 0 2em; background-color: #fff; position: relative; top: -1em; }
.splide { margin: 2em 0; }
.splide__slide {  /*aspect-ratio: 16 / 9;*/ text-align:center;  }
.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* i.p.v. contain */
  background: #f5f5f5;   /* optioneel: rustige achtergrondkleur voor letterbox */
}
/* overlay */
.cycle-overlay { position: absolute; bottom: .7em; left: 0%; width: 100%; z-index: 600; opacity: .5; transition: all .5s ease-in-out;  /*background: rgb(23,69,143);*/ color: white; padding: .5em; }
.cycle-overlay h3 { font-size: 1.2em; text-align: left; padding: 0 .5em; margin-bottom: 0; }
.cycle-overlay a { 		text-decoration: none; }
.splide__arrow { opacity: 0 !important; }
@media screen and (min-width:48em) {
.cycle-overlay h3 { font-size: 4em;  }
.splide__slide:hover .cycle-overlay { opacity:.8; transform: all .5s ease-in-out; }
.splide__arrow { opacity: 0.7 !important; }
}

.pagecontainer { display: flex; flex-direction: column; min-height: 100vh; background:rgba(255,255,255,.4); }
#sitecontainer { flex: 1; padding: 40px 2em; }
	#content { max-width: 1000px; margin: 0 auto; position: relative;   }
	#kruimelpadcontainer { max-width: 1000px; margin: 0 auto; font-size: 0.8em; color: #9BA4B4; }
	
	#content img { max-width: 100%; height: auto; }
#footercontainer { background: #fff; padding: 2em; }
#footercontent { display: flex; flex-flow: row wrap; max-width: 1000px; gap: 10px; margin: 0 auto; padding: 3em 0em; position: relative; }
#footercontent div { flex: 1 1 32%; }
#footer { text-align: center; padding: 1em; font-size: 1em; }

@media screen and (max-width: 767px) {
	#footercontent div { flex: 1 1 100%; }
}

#social_media .fa-brands {	font-size:1.8em; color: #00A2E0; transition: all .25s ease; }
#social_media .fa-brands:hover { color: #17458F; }

.header { display: flex; width: 100%; min-height: 100px; justify-content: center; align-items: center; gap: 20px; padding: 10px; background:#fff; }
.nav { flex: 1 1 auto; font-size: .9em; position:relative; /*top: -10px;*/ }
.loginmenu {   display: block;  text-align: right; }

#rotarylogo { display: inline-block; margin: 1em; max-height: 68px; max-width: 100%; height: auto;     }
@media screen and (max-width: 360px) {
	#rotarylogo { max-width: 220px; }
}
h1 { font-family: "FrutigerLTStdCond", sans-serif; font-weight: normal; font-size: 2em; line-height: 1.4; margin-bottom: 1em; color: #17458f; }
h2, h3, h4 { font-family: 'FrutigerLTStdCond';   }
h5, h6 { font-family: 'Arial', sans-serif; letter-spacing: 0.05; font-weight:300;  }


h2 { font-size: 1.7em; margin-bottom: 1em; font-weight: 500; color: #17458F;  }
h3 { font-size: 1.3em; margin-bottom: 1em; font-weight: 700; line-height: 1.2;  }
h4 { font-size: 1.1em; margin-bottom: 1em; }

@media screen and (max-width: 767px) {
	h3 { font-size: 1.2em; }	
}

p { margin: 1em 0; overflow-wrap: anywhere; word-break: normal; }

hr {
  border: none;              /* verwijder standaard rand */
  height: 1px;               /* hoogte van het streepje */
  width: 60px;               /* lengte van het streepje */
  background-color: #333;    /* kleur van het streepje */
  margin: 3em auto;          /* centreren en wat ruimte erboven/onder */
}
iframe.hidemail { display: none; }
/*responsive youtube video*/
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* Dit is de verhouding 16:9 (9/16 * 100) */
  padding-top: 25px; /* Optioneel, voor extra ruimte */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ronde nummerlabels */
ol.rond { counter-reset: li; list-style: none; margin: 1em 0 0 0; padding: 0;	}
ol.rond > li {	position: relative; margin-bottom: 1.75em; padding-left: 2.5em;}
ol.rond > li span.listlabel { color: rgb(23,69,143); font-weight: bold; display: inline-block; margin-bottom: 1em; }
ol.rond > li:last-child { margin-bottom: 0em; }
ol.rond > li:before {
	content: counter(li); counter-increment: li;
	position: absolute; top: .9em; left:0em; 
	font-size: 1.2em; /*line-height: 1;*/ color: #fff; background: rgb(23,69,143); 
	margin-top: -1.1em; height: 1.5em; width: 1.5em; line-height: 1.5em; text-align: center; border-radius: 1.5em;
}



#content img { padding: 0 10px 10px; }

a:link, a:visited, a:active { color: #00A2E0; }
a:hover { color: #17458F; }

a#prev, a#next {	display: inline-block; text-decoration: none; color: #fff; margin-right: 1px; background-color: rgba(0,162,224,.8); padding: 0.35em 1.05em; text-align: center; }
a#next:hover, a#prev:hover { background-color: rgb(0,162,224); }
a#next.disabled, a#prev.disabled { background-color: rgba(155,164,180,.4); color: #fff; cursor: default; }

.paginering {	margin: 3rem 0; padding: 1.05em 0 0 0; }
.paginering a {	display: inline-block; text-decoration:	none; background: #fff; color: rgba(0,162,224,.8); padding: 0.35em .65em; margin-right: 2px; }
.paginering a:hover, .paginering a.here { background: rgb(0,162,224); color: #fff; }

#kruimelpadcontainer a:link, #kruimelpadcontainer a:visited, #kruimelpadcontainer a:active { text-decoration:none; color: #9BA4B4; }
#kruimelpadcontainer a:hover { color: #17458F; }


/*formulieren algemeen*/
form { 					padding: .75em 0; margin: 0 0 2em 0 }
form span.label	{		display: inline-block; width: 30%; }
input {					width: 60%; background: #fff; border: 1px solid rgba(216,199,157,.3); border-radius: 8px; padding: .55em; margin: .375em 0; font-family: Arial, Helvetica, sans-serif; font-size: 1em; }
textarea {				width: 60%; padding: .55em; margin: .375em 0; font-family: Arial, Helvetica, sans-serif; border: 1px solid rgba(216,199,157,.3); border-radius: 8px; }
select {				width: 60%; background: #fff; border: 1px solid rgba(216,199,157,.3); border-radius: 8px; padding: .55em; font-family:Arial, Helvetica, sans-serif; font-size: 1em;  }
#radio, .radio {		width: 20px; }
#button, .button, input[type='submit']  {		border: none; font-size: 1.05em; border-radius: 8px; color: #fff; background: #01B4E7; padding: .25em .75em; margin: auto 5px; width: auto; line-height: 1.6;  }
#button:hover, .button:hover { background: #f7a81b; }
a.button { 				text-decoration: none; color:#fff; background: #01B4E7; display: inline-block; padding: .25em .75em; margin-bottom: .25em; }
a.button2, input[type=submit].button2 { text-decoration: none; background:none; color:#01B4E7; border: 1px solid #01B4E7; border-radius: 8px;  display: inline-block; padding: .25em .75em;  margin-bottom: .25em; }
/*a.button:hover { background: #f7a81b !important; }*/
a.button2:hover, input[type=submit].button2:hover { background: #fff !important; }
a.button3 { 		    text-decoration: none; background: none; color: #fff; border: 1px solid #fff; border-radius: 8px; display: inline-block; padding: .25em .75em; margin-bottom: .75em; }
a.button3:hover { 		background: #fff !important; color:#01B4E7;  }

.error {				color: #d91b5c; }
.small {				font-size: 0.9em; line-height: 1.5em; font-weight:normal; }
.special {				width: 5px;	visibility:	hidden; }
.errormsg {				color:#d91b5c; margin-bottom:2.4em;  }
	.errormsg ul {		list-style: none; }
.msg {					font-weight: bold; padding:.75em 0; }
.msg img { 				padding-right: .7em; }
.fielderror {			border: 1px solid #d91b5c; }
.maxwidth {				width: 100%; }
@media screen and (max-width: 767px) {
	form span.label	{	display: block; width: 100%; }
	input { width: 100%; }
	/*input {				width: 100%; padding: .375em; margin: .375em 0;	 /*210px;*/ /*}*/
}
/*form flex*/
form .row {				display: flex; flex-flow: row wrap; align-items: flex-start; gap: 0px; justify-content: flex-start; align-items: flex-start; }
form .item1 {			flex: 0 1 28%; }
form .item2 {			flex: 0 1 70%; }
	form .item2 input, form .item2 textarea {	width: 100%; }
@media screen and (max-width: 767px) {
	form .item1 {			flex: 0 1 100%; margin-bottom: 0; }
	form .item2 {			flex: 0 1 100%; margin-bottom: .5em; }
}


/*loginform*/
.loginform { max-width: 800px; margin: 4em auto; }
.loginform h1, .loginform p { text-align: left; }
.loginform span.label { min-width: 130px; }
.loginform a#wachtwoord { margin-left: 2em; }
@media screen and (max-width: 767px) { 
	.loginform { margin: 0 auto; } 
	.loginform input { width: 100%; } 
} 

/* zoeken */
.zoeken { background: #fff; padding-top: 20px; width: 100%; }
.zoeken form { 	display: flex; gap: 8px; max-width: 1000px; box-sizing: border-box; margin: 0 auto; padding: 0; text-align:center; background: none;  }
.zoeken input.button { width: auto; margin: 5px 0; }
.zoeken .breed { flex: 1; font-family:'Arial', sans-serif; border-radius: 8px; border: 0; background:rgba(155,164,180,.1); padding: 5px; }
.zoeken input#button {
  white-space: nowrap;        /* voorkomt dat tekst afbreekt */
  padding: 8px 16px;
}

#zoekform form { 		display: flex; flex-flow:row nowrap; gap: 10px;  }
#zoekform input {		flex: 1 1 auto; }
#zoekform input:not(#button) { border-radius: 8px; border: 0; background:rgba(255,255,255); padding: 5px; line-height: 2; font-size: 1em; }
#zoekform input#button { max-width: 80px; }
h5.gevonden {			text-align:right; }
@media screen and (		max-width: 767px) {
	h5.gevonden { 		text-align:left; }	
}

/* Responsive breakpoint */
@media (max-width: 500px) {
  .zoeken form { 		flex-direction: column;  /* stapel onder elkaar */  }
  .zoeken input#button {  width: 100%;             /* button ook breed */  }
}

/* agenda */

/*lijstweergave*/
.day 			{ 		display: flex; flex-direction: row; gap: 10px; border-bottom:1px solid #f2f2f2; padding: .35em; background:#fff; font-size: .9em;  }
.weekend 		{ 		display: flex; flex-direction: row; gap: 10px; background: rgba(244,243,242,.7); border-bottom:1px solid #fff; padding: .35em; font-size: .9em;  }
.today 			{ 		display: flex; flex-direction: row; gap: 10px; background:#fff; border: 2px solid #FFAF3E; padding: .35em; font-size: .9em;  }

.dagnr			{ 		flex: 0 0 30px; text-align: center; /*display: inline-block; font-family: 'Cabin Condensed', sans-serif;  text-align: center*/ }
.dagnaam		{ 		flex: 0 0 30px; text-align: center; color: #9BA4B4;/*font-size: .8em; /*display: inline-block; min-width:30px; font-family: 'Cabin Condensed', sans-serif; text-align:center;*/ }
.dagcontent		{ 		flex: 1; display: flex; flex-direction: column; }

.agendaline		{ 		/*flex: 1 1 auto; padding-left: .5em;*/ display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 0em 0 1em; }
.event_tijd 	{ 		display: inline-block; min-width:100px;  }
.event_titel 	{ 		flex-grow: 2; }
.event_inteken 	{ 		margin-left: auto; margin-right: 1em; min-width: 110px; }

.nadruk a		{ 		color: #d91b5c; text-decoration: none; }
.nadruk a:hover { 		color: #f7a81b; }

.verjaardag	{ 			display: inline-block; line-height: 2; padding-left: 1.5rem; background: url('/img/verjaardag.png') left center no-repeat; padding-right: .5em; }
.trouwdag		{ 		display: inline-block; line-height: 2; padding-left: 1.5rem; background: url('/img/trouwdag.png') left center no-repeat; padding-right: .5em; }
.jubileum		{ 		display: flex; flex-direction: row; font-size: .8em; color: #9BA4B4;   }

	@media screen and (max-width: 767px) {
		.agendaline { flex-direction: column; }	
		.event_inteken { margin-left: 0px; }
		.verjaardag, .trouwdag { background-position: left top 3px; }
		.jubileum		{ flex-direction: column; }
		.day, .weekend, .today {	gap: 0px; }
	}



/*kalenderweergave*/
.agendakal {			font-size: .9em; }
.kal_day {				background: #fff; border-top: 1px solid #ddd; border-left: 1px solid #ddd; height: 85px; vertical-align: top; box-sizing: border-box; padding: .35em;	}
	.kal_weekend {		background: rgba(244,243,242,.7);  }
	.kal_today {		border: 2px solid #FFAF3E; padding: .35em; font-size: .9em;   }
.kal_dagnr {			display: block; text-align: right; font-weight: normal; color: #0c3d91; }
.today .kal_dagnr { 	font-weight: bold; }
.kal_daynames {			text-align: center; background: #fff; width: 14.28%; border-top: 1px solid #fff; }
.kal_spacer { 			background: #fff; border-left: 1px solid #ddd; border-top: 1px solid #ddd; }
.kal_ev	{ 				margin-bottom: 1.5em;	 }
a.kal_evtitel { 		text-decoration: none; }

.agendakal .verjaardag, .agendakal .trouwdag { background-position: left top 2px;}


/*slid-in*/
.slide-in {
  position: relative;
  animation: slideFromRight 0.8s ease-out forwards;
  border-radius: 8px;                         /* optioneel: ronde hoeken */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* subtiele schaduw */
}

@keyframes slideFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}


/*#kal_viewselect { 		display: none; }*/
.agendatabel {			width: 100%; margin-bottom: 3em; }
.agendatabel .last {	background: #fff; border-bottom-left-radius: 10px; border-bottom-right-radius:10px; height: 2em; }
#kal_bediening {		width: 100%; text-align: right; vertical-align: middle; margin-bottom: .5em; }
#kal_bediening form { 	background: none; box-sizing:border-box; padding: 0; }
#kal_bediening button { background: rgba(255,255,255,.8); color: #00A8E4; border: none; height: 37px; width: 37px; border-radius: 8px; }
#kal_bediening button.disabled { color:#666; top: 2px; }
#kal_viewselect { 		display: inline-block; }
#maandselector { 		display: inline-block; margin-right: .5em; margin-bottom: 0; }
#maandselector button { background: #00A8E4; color: #fff; border-radius: 8px; }
#kal_bediening form input { height: 40px !important; }
#kal_bediening .fa { 	font-size: 1.4em; }

.maandaanduiding {		background: #fff; color:#17458F; padding: 1em .5em .5em; font-size: 1.2em; border-top-left-radius: 8px; border-top-right-radius: 8px;   }
.kalenderselect {		height: 2.6em; width: auto; min-width: 10em; line-height: 30px; position: relative; top: -2px; background: #fff; padding: 0em .5em; border: none; border-radius: 8px; font-family:Arial, Helvetica, sans-serif; font-size: .9em;  }
a.intekenlink	{ 		color:#00A2E0; font-weight:bold; text-decoration:none; }
a.intekenlink:hover { 	color:#006AB6; }

@media screen and (max-width: 767px) {
	.kalenderselect {	min-width:0px; font-size: 0.8em; height: 2.2em; }	
	#kal_bediening button { background: rgba(255,255,255,.8); color: #00A8E4; border: none; height: 30px; width: 30px; border-radius: 8px; }
}

/*EVENEMENTEN*/
#itlijst_data {			display: flex; flex-flow: row wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start; gap: 20px;  }
#itlijst_data .label {	color: #9BA4B4; }
#titel_aanmeldform { 	padding: .7em 0; color: #3155A4;  }
.event {				display: flex; }


.evenementen > div { 	width: 100%; line-height: 2; vertical-align: top; box-sizing: border-box;  }
.ev_datum { 			display: inline-block; width: 45%; }
.ev_tijd { 				display: inline-block; width: 50%; }
.ev_icon { 				display: inline-block; width: 20%; }
.ev_naam { 				display: inline-block; width: 75%; }
.evenementen .rij1 { 	background: #E7ECF3; }

.intekenlijst {		background: #fff; padding: 3em 20px;  }
.afmeldingen {		padding: 1em;  }

.intekenlijst h3 { 	display: inline-block; }
.intekenlijst .label, .event .label { display: inline-block; box-sizing: border-box; width: 30%; vertical-align:top; color: #17458F;  }
.intekenlijst .label_info, .event .label_info { display: inline-block; box-sizing: border-box; width: 70%; vertical-align:top;  }
.intekenlijst form { padding: .75em 0 0; max-width: 1000px; margin: 0 auto; }
.intekenlijst form select { /*line-height: 30px;*/ background: #fff; border: 1px solid rgba(216,199,157,.3); border-radius: 8px; padding: .25em; font-family:Arial, Helvetica, sans-serif; font-size: .7em; }

.intekenregel { 		padding: .25em; display: flex; flex-flow: row wrap; align-items: flex-start; gap: 10px;  }
	.rij1, .rij2 { 		border-bottom: 1px solid rgba(216,199,157,.3); padding: .25em; display: flex; flex-flow: row wrap; align-items: flex-start;  gap: 10px;   }
	.intekenregel div { flex: 1 1 0; }
	.intekenregel .small { margin-left: auto; min-width: 200px; }
	.aanmelder {		display: block; font-size:0.7em; color: #9BA4B4; }

@media screen and (max-width: 767px) {
.event { display: block; }
.intekenlijst .label, .event .label { 	display: block; width: 100%; }
.intekenlijst .label_info, .event .label_info { display: block; width: 100%; margin-bottom: 1em; }
#itlijst_data, itlijst_data div { 	display: block;width: 100%; }
#itlijst_data .label {	display: inline-block; width: 70%; }
.intekenlijst .label_info, #aanmelden .label_info { width: 100%; }
}

/*zoekresultaten*/
.categorie { 			font-size: 0.9em; color: rgba(155,164,180,.6); }

.result {				/*background:#fff; margin-bottom: 1px;*/ border-bottom: 1px solid rgba(216,199,157,.3);  }
	.resheader {		display: flex; flex-flow: row nowrap; justify-content: flex-start; }
	.resheader div { 	flex-basis: 1 1 0; padding: .5em; }
	.resheader div.categorie { margin-left: auto; font-size: .8em; min-width: 150px; text-align:right; }
	.resnum {			flex: 0 0 40px; }
	.resulttekst {		margin-left: 40px !important; padding: 0 .5em .5em; font-size: .9em; }


/*ledenlijst*/
.ledenlijst { 			display: flex; flex-flow: row wrap; gap: 10px; margin-top: 2em; }
.persoon {				flex: 0 0 23%; height: 250px; border-radius: 8px; background-position: center center; background-size:cover; background-repeat:no-repeat; position:relative; overflow: hidden;}

.overlay { 				position: absolute; inset: 0; background: rgba(17,53,109,.45); color:#fff; z-index: 1; display: grid; place-items: center; padding: 1.5em; text-align: center; 
						/* start buiten beeld (van onder naar boven inschuiven) */
  						transform: translateY(100%); transition: transform .5s ease;  }
.persoon:hover .overlay,
.persoon:focus-within .overlay {  transform: translateY(0); }
.persoon a  { 			text-decoration: none; color:#fff; }

@media screen and (max-width: 800px) { 
	.persoon { flex: 0 0 48%; height: 250px; }
}
@media screen and (min-width: 1400px ) {
	.persoon {			flex: 0 0 24%; height: 250px;	}	
	.persoon.oudlid {	flex: 0 0 19%; height: 200px; }
	.overlay { 			padding: 3em 1.5em 1.5em; }
}


#personen_nav { 		position: absolute; right: 0; }
@media screen and (max-width: 767px) { #personen_nav { position: relative; width: 100%; height: 2rem; margin: .5em 0 1em;  } }
#personen_nav a { 		text-decoration: none; color: #fff; margin-right:	1px; }
#personen_nav a#back {  display: inline-block; background-color: rgba(0,162,224,.8); padding: 0.35em 1.05em; text-align: center;  }

.persoon_details {		display: flex; flex-flow: row wrap; gap: 10px; justify-content: flex-start; align-items: flex-start; }

.persoon_details > div {	flex: 1 1 0; min-width: 320px; }
/*.persoon_details_label {	font-size: 1.125rem; margin-bottom: .7em; }*/
.persoon_details #pasfoto img { 
						display: inline-block; margin: .35em 0.5em 1.05em 0em; padding: 0; border-radius: 8px; max-width: 150px;  }
.persoon_details #pasfoto img.overleden { opacity: .4; }
.persoon_details .label { display: inline-block; width: 40%; vertical-align:top; color: #9BA4B4; font-size: .8em;  }
.persoon_details .label_info { 	display: inline-block; width: 60%; vertical-align:top; }

@media screen and (max-width:767px ) { 
	.persoon_details { flex-flow: column wrap; line-height: 1.3; } 
	.persoon_details .label { width: 100%; }
	.persoon_details .label_info { width: 100%; padding-bottom: .25em; }
}

/* Driehoekje in de hoek */
.erelid-label {
  position: absolute;
  top: 5px;
  right:-30px;
  background-color: #F7A81B; 
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 40px;
  transform: rotate(45deg);
}
h4.erelid { color: #F7A81B; }

/*personalia*/
.pers_formlabel {		padding: .375em 0 0; margin: .1875em 0 0; }
.pers_formfield input:not(.button) {		width: 100%;  }	
@media screen and (min-width: 48em) {
	/*personalia*/
	.pers_formlabel { 	float:left; width:30%; box-sizing:border-box; padding: .375em 0; margin: .1875em 0; }
	.pers_formfield { 	float:left; width:70%; box-sizing:border-box; }	
	.pers_formfield .button { width: 15%; }
}

/*tinymce + flmngr*/
.tox .tox-promotion, .tox-statusbar__branding { display: none; }
.tox iframe { display: block; }
/*tinymce editor*/
.tox-tinymce { margin-bottom: .5em; }

#pasfotobody {			padding: 2em; }
.fotogalerij {			display: flex; flex-flow: row wrap; gap: 10px; justify-content: flex-start; align-items: stretch; align-content: flex-start; }
	.fotogalerij .pic {	flex: 0 1 auto; padding: 1em; background:#fff; }



/*filepond*/
.filepond--panel-root { background-color: #fff !important;  }
.filepond--root .filepond--drop-label{
  background: url('/img/photo_camera.png') center 28px no-repeat;
  background-size: 64px;          /* pas aan naar wens */
  min-height: 180px;               /* ruimte voor icoon */
  padding-top: 110px;              /* duw tekst omlaag */
}
.filepond--root .filepond--credits { display: none !important; }




/*adreslijst*/
a#veldenkiezer { 		padding-right:	3em; text-decoration: none; }
.modusform { 			display: inline; margin: 0; padding: 0; vertical-align: top; }
#adreslijst_select select { width: auto; } 
#adreslijst_select ol li { display: inline-block; width: auto; vertical-align: top; margin-right: 1em; margin-bottom: .25em; }
#adreslijst_select ol.rond > li::before { margin-top: -0.75em; }
#adreslijst_select .button { width: auto; }

#adressen {				background:#fff; padding: 1em; border-radius: 8px; font-size: .8em; }
#adreslijst { 				width: 100%; margin: 0%; }
#adreslijst_naam_even { 	width: 35%; vertical-align: top; padding: .75em 0.375em; }
#adreslijst_naam_oneven { 	width: 35%; background-color: #EBEDF0; vertical-align:	top; padding: .75em 0.375em; }
#adreslijst_adres_even { 	width: 65%; vertical-align: top; padding: .75em 0; }
#adreslijst_adres_oneven { 	width: 65%; background-color: #EBEDF0; vertical-align: top; padding: .75em 0; }

#printsmoelenboek_naam_even { width: 20%; vertical-align: top; padding: .75em 0.375em; }
#printsmoelenboek_naam_oneven { width: 20%; background-color: #EBEDF0; vertical-align: top; padding: .75em 0.375em; }
#printsmoelenboek_adres_even { width: 80%; vertical-align: top; padding: .75em 0; }
#printsmoelenboek_adres_oneven { width:	80%; background-color: #EBEDF0; vertical-align: top; padding: .75em 0; }

#clear { 				clear: both; }
.no_break { 			white-space: nowrap; }
.ui-datepicker { 		z-index: 9999 !important; }

/* weekberichten */
#wb_tekst { 			background:#fff; padding: 3em; }
	#wb_tekst * { 		font-family:'Arial',sans-serif !important; font-size: 1rem !important; }
.weekbericht_view { 	width: 100%;  }
.weekbericht_view .label {	display: inline-block; width: 100px; vertical-align:top; color: #9BA4B4; }

.details_att {			padding-top: .5rem; padding-bottom:1.5rem; font-size: .8em; }
.attlabel {				white-space:nowrap; }

#weekbericht_nav {		position: absolute; right: 0; }
@media screen and (max-width: 767px) { 
	#wb_tekst {			padding: 1em; }
	#weekbericht_nav { position: relative; width: 100%; height: 2rem; margin: .5em 0 1em;  } 
}

#wb_functies {			display: flex; flex-flow: row wrap; padding: .35em; margin: 3em 0; }
	#wb_functies div {	flex: 1 1 0; }
@media screen and (max-width: 767px) { 
	#wb_functies { flex-flow: column nowrap; } 
	#wb_functies div {	flex: 1 1 auto; }
}

#wb_functies h4 { 		margin-bottom: 0; }
#zoekresultaten { 		padding: 1.05em 1.05em 2rem 0; }

/*fotoalbum*/
.fotoalbum {			display: flex; flex-flow: row wrap; gap: 10px; margin-top: 2em; }
.f_album {				flex: 1 1 300px; 
aspect-ratio: 1 / 1;   /* houd 1:1 verhouding */
  width: 100%;           /* of elke gewenste breedte */
  max-width: 320px;      /* optioneel limiet */
  border-radius: 8px; background-position: center center; background-size:cover; background-repeat:no-repeat; position:relative; overflow: hidden;}
.f_album:hover .overlay,
.f_album:focus-within .overlay {  transform: translateY(0); }

.fa_group {				display: flex; flex-flow: row wrap; gap: 10px; }
.fa_group .fa_pic {		flex: 0 1 200px; aspect-ratio: 1/1; background-position: center center; background-size:cover; background-repeat:no-repeat; position:relative; overflow: hidden; border-radius: 8px;  }

/*intranet startpagina*/
.intranet_intro { 		display: flex; flex-flow: row wrap; gap: 10px; width: 100%; align-items: stretch; }
.intranet_intro #col1,
.intranet_intro #col2 {	flex: 0 1 49%; }
@media screen and (max-width: 767px) {
	.intranet_intro { 		display: flex; flex-flow: column nowrap; }		
	.intranet_intro #col1,
	.intranet_intro #col2 {	flex: 0 1 100%; }

	.f_album .overlay { position: absolute; inset: 0; background: rgba(17,53,109,.35); color:#fff; z-index: 1; display: grid; place-items: center; padding: 1.5em; text-align: center; 
						/* start buiten beeld (van onder naar boven inschuiven) */
  						transform: translateY(0);/* transition: transform .5s ease; */ }
	.fa_group .fa_pic {		flex: 0 1 48%; aspect-ratio: 1/1; background-position: center center; background-size:cover; background-repeat:no-repeat; position:relative; overflow: hidden; border-radius: 8px;  }

}
.intranet_intro h3 a:link, .intranet_intro h3 a:active, .intranet_intro h3 a:visited { 	color: #3155A4; }
.intranet_intro h3 a:hover { color:#f7a81b ; }

ul#intra_il { 			margin: .675em 0; list-style:none; position: relative; padding: .375em;  }
ul#intra_il li { 		padding: .375em 0; }
ul#intra_il li:hover {		background: #01b4e7; color:#fff; }
ul#intra_il li:hover a {	color:#fff; text-decoration: none;  }
.ak { 					display: table; width: 100%; }
.ak:hover, .ak:hover .date { background: #01B4E7; color:#fff; }
.ak a {					text-decoration:none; }
.ak:hover a {			color:#fff; }
.ak a:hover {			color:#fff; }
.ak_titel {				display: table-cell; vertical-align:top; padding: .375em 0; text-decoration:underline; }
a:hover .ak_titel {		text-decoration:none; }
.date { 				display: table-cell; vertical-align:top; width: 4.675em; color:#202020; position: relative; padding: .375em .675em .375em .375em; text-decoration: none; }



/*rondvraag*/
.rondvraag { 			box-sizing: border-box; }
.rondvraag .nieuws {	margin: 1.75em 0 .7em;   }
.rondvraag_xl {			display: flex; flex-flow: row nowrap; gap: 1rem; margin-bottom: .7em; padding: 1em; background: #fff; border-radius: 8px;  }
	.rv_pic {  			flex: 1 1 50px; max-width: 10%; }
	.rv_pic img {		padding: 0 !important; height: auto; display: block; }
	.rv_tekst { 		flex: 2 3 90%;  }
	.rv_naam {			line-height: 1; padding: 0em; color: rgb(23,69,143);  }
	.rv_datum {			color:rgba(155,164,180,.5); font-weight: normal; }
.credits {				background: #E8F0F9; padding: .7em; color: #00246C; }
.navbalk { 				padding: 0 0 .7em 0; width: 100%; text-align: right; }
.read, .edit, .del {	margin-top: .7em; }
.rvform #button {		width: auto; }


/* stuur bericht */
#mailform div {			display: flex; flex-flow: row nowrap; justify-content: flex-start; margin-bottom: .5em; }
#mailform div#columns {	flex-flow: row wrap; }
#mailform div div#columns { display: flex; flex-flow: column wrap; gap: 2px 40px; padding: 0 1em 1em 0; }
#mailform .button {		width: 55px; margin: 0 5px; }
#mailform #button {		text-decoration:none; width: auto; max-width: 300px; margin: .25em; }
#mailform .veld	{ 		width:100%; height:100px; overflow:auto; background-color:rgba(155,164,180,.2); padding: .35em; border-radius: 8px; font-size: .8em; }

#sent_mail .label 		{ display: block; width: 100%; /*vertical-align:top;*/ color: #bcbdc0;   }
#sent_mail .label_info 	{ display: block; width: 100%; /*vertical-align:top;*/ }

/* clubstructuur */
#main { 				padding: 2em; }
#cs_parent { 			display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; align-content: flex-start; }
.cs_item { 				flex: 1 1 auto; margin-bottom: 2rem; }
@media screen and (min-width: 48em) {
	#mailform div#columns {	flex-flow: row nowrap; }
	#mailform div div#columns { display: flex; flex-flow: column wrap; gap: 2px 40px; padding: 0 1em 1em 0; }
	.cs_item { 			flex-basis: 46%; margin-bottom: 3rem; }
}
ul#cs_parent {			list-style:none; }


/* attendance overzicht */
.att_regel { 			display: flex; flex-flow: row nowrap; width: 100%; }
.att_att { 				margin-left: auto; }
#adressen td {			padding: 5px; }

/* online clubattendance registreren */
form.editatt {			background: none; padding: 0; }
.attrow { 				display: flex; flex-flow: row nowrap; margin-bottom: 1em; background: #fff; align-items: stretch; font-size: .9em; }
.attrow > div {			flex: 0 1 auto;    }
.attrow .attkol {		display: flex; flex-flow: column wrap; } 
.att_set { 				color: #777; }
.attpic {				flex-basis: 30%; }
.attpic img {			padding: 0 1em 0 0 !important;   }
.attname {				font-weight: bold; padding-top: .5em; padding-bottom: .5em; }
.attimg {  				display: block; height:100px !important; width: auto !important; padding-left: 0; padding-right: 1em; }
#content .attpic img {   max-width:fit-content;  }
.att_set > .attname { 	font-weight: normal; }
.attfields {			padding-bottom: .5em; }
.attfields fieldset {	border: none; }
.attfields input[type="radio"] {    display:none; }
.attfields input[type="radio"] + label {
    display:inline-block;
	padding: .35em .5em;
    background:#eee;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 5px;
	color: #000;
	font-size: .8em;
}
.attfields input[type="radio"] + label:hover { background: #ddd; }
.attfields input[type="radio"]:checked + label {
	background: #00A8E4; color:#fff;	
}
.editatt input.button { width: auto; }

@media screen and (min-width: 767px) {
	form.editatt .kolommen { display: flex; flex-flow: row wrap; gap: 20px; }
	.kolommen .col { flex: 1 1 auto;  }
	.attpic {				flex-basis: 30%; }
}

/*kolomstructuur*/
/* basis opmaak tekstpagina */

.tabel_opmaak tr:nth-child(even) { background-color: #eee; }
.tabel_opmaak td { padding: .25em; }


.grid { width: 100%; max-width: 1220px; margin: 0 auto; position: relative; /*display: table;*/  }
.grid:after { content: ''; display: table; clear: both;  }
.grid-pad { padding: 0 20px; padding: 0; }


[class*='col-'] { float: left; padding: 0 20px 0 0; margin-bottom: 40px; position: relative; vertical-align: top; width: 100%;   }
[class*='col-'] .grid-pad { padding: 1em 0;}
	#titelbalk [class*='col-'] { margin-bottom: 0; }

.grid-pad .grid-pad { padding: 0; }
.grid-pad .grid-pad [class*='col-'] { padding: 0 20px 0 0; }

[class*='col-'] p { padding: .6em 0px; }
[class*='col-'] h1, [class*='col-'] h2, [class*='col-'] h3, [class*='col-'] h4, [class*='col-'] h5,[class*='col-'] h6, [class*='col-'] p, [class*='col-'] table, [class*='col-'] ul, [class*='col-'] ol, [class*='col-'] form { padding-left: 0px; padding-right: 0px; }
[class*='col-']:last-of-type {  padding-right: 0; }
.grid-pad > [class*='col-']:last-of-type { padding-right: 0px; }


.col-1-2 { width: 100%; }
.col-1-5 { width: 50%; }

@media screen and (min-width : 48em)  {	/* 768px */

	[class*='col-'] { float: left; padding: 0 40px 0 0; margin-bottom: 0px; position: relative; vertical-align: top;   }
	/*.grid-pad > [class*='col-']:last-of-type { padding-right: 40px; }*/
	/*[class*='col-'] .grid-pad  { padding: 1em 0 ;}*/
	.grid-pad .grid-pad [class*='col-'] { padding: 0 40px 0 0; }

	.col-1-2 { width: 50%;  }
	.col-1-5 { width: 33.3333%; }
}

@media screen and (min-width : 64em)  {	/* 768px */
	.col-1-3 { width: 33.3333%; }
	.col-1-4 { width: 25%; }
	.col-1-5 { width: 20%; }
	.col-1-6 { width: 16.6667%; }
	.col-1-7 { width: 14.2857%; }
	.col-1-8 { width: 12.5%; }
	
	.col-2-3 { width: 66.6666%;  }
	.col-3-4 { width: 75%; }
	.col-5-6 { width: 83.3333%; }
}


/*footer*/
.arrow-to-top { display: none; position: fixed; bottom: 1em; right: 1em; z-index: 99999; background:#00A8E4; text-decoration: none; color:#fff; font-size: 1em; text-align:center; width: 40px; height: 40px; line-height: 36px; border: 2px solid #fff; border-radius: 50%;   }
.arrow-to-top:hover { background: #FFAF3E; }
.arrow-to-top .fa { padding: 0; padding-top: .5em; margin: 0; color:#fff; }