html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; vertical-align:baseline;}
/* html5 and ie7 in need of display:block where necessary */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
nav ul, nav li {margin:0; list-style:none;}

/*
body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, img, ins, kbd, samp, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, section, summary, time, mark, audio, video, aside, *, card {border: 1px solid red;}
nav  {border: 2px solid green;}
*/

/*
rgba(255,127,62,1) = #ff7f3e oranje
rgba(255,218,120,1) = #ffda78 geel
rgba(255,218,120,0.2) = #ffda78 20% geel
rgba(255,218,120,0.2) = #ffda78 80% geel
rgba(42,98,154,1) = #2a629a blauw
rgba(0,50,133,1 ) = #003285 donkerblauw
*/

/* structure */
body {margin:0; text-align:left;
font-family: "Raleway", sans-serif;
font-weight:400;
font-size:17px; color:#121212; line-height:1.5em;
background-color:rgba(255,218,120,0.2);
background-color:#fff;}

#hero-area-1 {padding:20px 0 40px 0; background-color:rgba(42,98,154,1.0);} /*home*/
#hero-area-2 {padding:40px 0; background-color:rgba(42,98,154,1.0);}
#service-area-1 {padding:40px 0; background-color:rgba(255,218,120,0.2);}
#service-area-2 {padding:40px 0; background-color:rgba(255,218,120,0.8);}
#service-area-3 {padding:40px 0; background-color:#fff;}
.privacytekst {padding:40px 0; background-color:rgba(255,218,120,0.2);}
@media screen and (min-width:768px) {
	.container.top {margin-top:0;}
}
@media screen and (max-width:767px) {
	.container.top {margin-top:20px;}
	#hero-area-1 {padding:0px 0 40px 0;}
	#service-area-1 {padding:20px 0 40px 0;}
	#service-area-2 {padding:20px 0 40px 0;}
	/* compenseer eerste element in een (nieuwe) sectie met container top */
}

/* general */
h1, h2, h3, h4 {color:#121212; font-weight:600; margin:0; 
font-family:"IBM Plex Serif", serif; font-style: normal;}
h1,
.title-large {font-size:26px; padding:10px; line-height:1.5em;}
h2,
.title-medium {font-size:24px; padding:10px; line-height:1.5em;}
h3,
.title-small {font-size:20px; padding:10px; line-height:1.3em;}
h4,
.title-verysmall {font-size:18px; padding:10px 10px 2px 10px; line-height:1.2em;}

sup {vertical-align:super;}
.size-up {font-size:1.1em; line-height:1.5em;}
.p09 {font-size:0.9em !important;}

a:hover {text-decoration:none; border-bottom:1px solid #373737;}
a {text-decoration:none; font-weight:400;  border-bottom:1px solid #373737;} 


.bg0 {background-color:#fff;} /* wit */
.bg1 {background-color:rgba(42,98,154,1.0);} /* blauw */
.bg1 h1, 
.bg1 h2, 
.bg1 p,
.bg1 a:hover,
.bg1 a {color:#fff !important; } /* blauw */
.bg1 a:hover,
.bg1 a {border-bottom:1px solid #fff;} /* blauw */
.bg2 {background-color:rgba(255,218,120,0.2);} /* geel 20% */
.bg3 {background-color:rgba(255,218,120,0.8);}  /* geel 80% */
.bg4 {background-color:rgba(255,218,120,0.4);}  /* geel 40% */
.white {color:#fff;}


/* ----- home ------ */
.home.artmain h1 {font-size:30px; padding:10px 10px 10px 10px; line-height:1.6em; margin-bottom:10px; margin-top:0px; color:#fff;}
.home.artmain p {color:#fff; font-size:20px; padding:10px 10px 20px 10px; line-height:1.6em;}

@media screen and (max-width:767px) {
	.home.artmain h1 {font-size:24px; padding:0 10px 0 10px; line-height:1.4em; margin-bottom:0px; margin-top:20px;}  
	.home.artmain p {color:#fff; font-size:17px; padding:10px 10px 10px 10px; line-height:1.5em;}
}

/* ---- anything but card ----*/
.artmain  {margin:10px 0 10px 0;}
.artmain h1 {padding:10px 10px 20px 10px; line-height:1.6em;}
.artmain p {font-size:20px; padding:10px 10px 20px 10px; line-height:1.6em;}
@media screen and (max-width:767px) {
	.artmain h2 {padding:10px 10px; font-size:20px;}
}
.privacytekst .artmain p {font-size:16px; padding:10px 10px 20px 10px; line-height:1.5em;}
.privacytekst {font-size:0.85em;line-height:1.2em;}


#hero-area-top {padding:50px 0 30px 0; background-color:rgba(42,98,154,1.0);}
.divtop h1 {color:#fff;font-size:38px; padding:0 10px 0 10px; margin-bottom:0; margin-top:0;}

/**** hoofdstuktitels met bg 1 en 3 ****/
#hero-area-top-img1 {padding:0px 0 0px 0;
background-image: url(../images/styling/bg-img1b-c.jpg); background-size:cover; background-repeat: no-repeat; height:200px; margin-top:0; padding-top:0; background-position: bottom;
display:flex; align-items: center; justify-content: start;}

/* inhoud van hero-area */ 
.divtop-img-w h1 {color:#fff;text-shadow: 1px 1px #373737;
font-size:38px; padding:30px 0px 0 30px; margin-bottom:0px; margin-top:0px;} 
.divtop-img h1 {color:#121212;text-shadow: 1px 1px #ccc;
font-size:38px; padding:30px 0px 0 30px; margin-bottom:0px; margin-top:0px;} 
.first-letter {font-size:100px; color:#202e6d; text-shadow:1px 1px #ddc;}

/* uitzondering: verander opacity bg van h1 uitvoering-beeld en geluid */
#hero-area-top-img3 {
position:relative; height:200px; margin-top:0; padding-top:0;
display:flex; align-items: center; justify-content: start;
background-color: #121212;}
#hero-area-top-img3::before {
position:absolute;
inset:0;
content:'';
background-image: url(../images/styling/bg-img3d-c.jpg); background-size:cover; background-repeat: no-repeat; 
background-position:0% 65%;
opacity:0.8;}
.divtop-img-w h1 {color:#fff; text-shadow: 1px 1px #373737;
font-size:38px; padding:30px 0px 0 30px; margin-bottom:0px; margin-top:0px;
isolation:isolate;}
.first-letter3 {font-size:100px; color:#ff7f3e; text-shadow:1px 1px #373737;
isolation:isolate;
}

@media screen and (max-width:991px) {
	#hero-area-top {padding:16px 0 20px 0;}
	.first-letter {font-size:34px;}
	.first-letter3 {font-size:34px;}		  
}
@media screen and (max-width:767px) {
	#hero-area-top {padding:16px 0 20px 0;}
	.divtop h1 {font-size:22px;}  
	.first-letter {font-size:26px;}
	.first-letter3 {font-size:26px;}	  
}

@media screen and (max-width:767px) {
	#hero-area-top-img1,
	#hero-area-top-img2,
	#hero-area-top-img3 {height:100px; padding-bottom:10px;}
	.divtop-img h1 {font-size:22px; line-height:1.2em; padding-top:20px;} 
	.divtop-img-w h1 {font-size:22px; padding:0px 0px 0 10px;} 
}

/* ------- cards ------------ */
.card img {margin-top:20px; border-radius:5px;}
.card-img-top {width:25%; height:auto;}

.artcard-video {margin-top:0px; background-color:#fff; border-bottom:none; border-radius:10px; text-align:left;}
.artcard-video .card-body {padding-right:0.2rem; padding-left:0.2rem;}
.artcard-video h3 {color:#003285; padding:0 8px; margin-bottom:0; font-size:19px; line-height:1.4em;}
.artcard-video p {color:#121212; padding:5px 8px 2px 8px; font-size:15px; line-height:1.5em;}
.artcard-video iframe {padding:0 2px;}

.artcard {margin-top:0px; background-color:#fff;
 border-bottom:none; border-radius:10px; text-align:left;
  -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1);}
.artcard h1 {color:#003285; padding:10px 10px; font-size:26px; line-height:1.5em;}
.artcard h2 {color:#003285; padding:10px 10px 10px 0; font-size:22px; line-height:1.5em;}
.artcard h3 {color:#003285; padding:13px 10px 0px 0; font-size:20px; line-height:1.5em;}
.artcard p,
.artcard address {color:#121212; padding:5px 10px 10px 0px; font-size:17px; line-height:1.5em;}

.artcard-home:hover {transition: all 300ms ease-out; transition: all 300ms ease-in; transform: scale(1.02); opacity: 1;}
.artcard-bio {font-size:16px !important;}


/* -- met hero als achtergrond --*/
.artcard-dark {margin-top:0px; text-align:left; border-radius:10px; border:1px #dedede solid !important;}
.artcard-dark h1 {color:#fff; padding:10px 10px 10px 0px; font-size:26px; line-height:1.5em;}
.artcard-dark h2 {color:#fff; padding:10px 10px 10px 0; font-size:22px; line-height:1.5em;}
.artcard-dark p {color:#fff; padding:5px 10px 10px 0px; font-size:17px; line-height:1.5em;}
.artcard-dark a:hover,
.artcard-dark a {text-decoration:none; border-bottom:1px solid #fff; color:#fff;}

.artcard-transp {margin-top:0px; text-align:left; border:none !important; background-color:transparent;}
.artcard-transp .card-body {padding-top:0px; text-align:left;}
.artcard-transp h1 {color:#121212; padding:0px 10px 10px 0px; font-size:26px; line-height:1.5em;}
.artcard-transp h2 {color:#373737; padding:10px 10px 10px 0; font-size:22px; line-height:1.5em;}
.artcard-transp h3 {color:#373737; padding:0px 10px 0px 0px; font-size:18px; line-height:1.6em;}
.artcard-transp p {color:#121212; padding:0px 10px 10px 0px; font-size:17px; line-height:1.5em;}


.border {border-radius:10px; border:1px #ff7f3e solid !important;}

.artcard-prikbord {margin-top:0px; text-align:left; border:none !important;
border-bottom:none; border-radius:10px;background-color:rgba(42,98,154,0.9);}
.artcard-prikbord h2 {text-align:center;color:#fff; padding:0px 10px 10px 10px 0; font-size:22px; line-height:1.5em;}
.artcard-prikbord h3 {font-variant:small-caps; color:#fff; padding:0px 10px 0px 0px; font-size:19px; line-height:1.6em;}
.artcard-prikbord p {color:#fff; padding:0px 10px 10px 0; font-size:0.9em; line-height:1.5em;}
.artcard-prikbord a:hover,
.artcard-prikbord a {text-decoration:none; border-bottom:1px solid #fff; color:#fff;}

@media screen and (max-width:767px) {
	.artcard h2, .artcard-dark h2, .artcard-transp h2, .artcard-prikbord h2 {
		font-size:20px; line-height:1.4em;}   
	.artcard p, .artcard-dark p, .artcard-transp p, .artcard-prikbord p {
		font-size:16px; line-height:1.4em;}   
	.artcard-prikbord h2 {text-align:left !important; padding-left:0;}
	.artcard-prikbord h3 {font-size:17px; line-height:1.4em;}
}

/* --- audio toelichting ---- */
.accordion {--bs-accordion-btn-padding-y: 12px;}
.accordion-button{font-weight:500 !important; font-size:15px; line-height:1.2em; } 
.accordion-header {padding:6px; font-weight:600;} 
.accordion-item {font-size:15px; line-height:1.5em; border:none;} 
.accordion-button {background-color:#ffda78;} 
.accordion-button:not(.collapsed){background-color:#ffdf78;} 
.accordion-button:focus {box-shadow:none;} 


/* bv op hero beeld-geluidpagina */
.indent-right {margin-right:20%;}
.indent-left {margin-left:20%;}
@media screen and (max-width:767px) {
	.indent-right {margin-right:0;}
	.indent-left {margin-left:0;}
}

/* ------ lists ----------- */
ul.list1 {list-style:none; margin:0 0 6px 0px; font-size:0.9em; padding-left:0;}
.list1 li {position: relative; padding-left:1.5rem; margin-bottom:0.75rem; line-height:1.5em;}
.list1 li::before {
            content: "\f00c"; font-family: "Font Awesome 6 Free";
            font-weight:900; position: absolute; left:0; top: 2px;
            color: #ff7f3e;}

ul.list2 {list-style:square; margin:0 0 6px 20px; font-size:0.9em; padding-left:0;}
.list2 li {padding-left:10px; line-height:1.5em;}

ul.list2a {list-style:square; margin:0 0 6px 20px; font-size:1.0em; padding-left:0;}
.list2a li {padding-left:10px; line-height:1.5em;}

ul.sitemap {display:block; list-style:square; margin:0 0 6px 30px; font-size:1.0em; padding-left:0;}
.sitemap li {padding-left:10px; line-height:1.5em;}
.sitemap li a {text-decoration: none; border-bottom:none;}
         
ol.list-ol {margin:0 0 0 26px; padding-left:0;}
.list-ol li {padding-left:10px; margin-bottom:6px;}


/* ---------- devices --------*/
.mobya {display:none;}
@media screen and (max-width:767px) {
	.img-no-mob {display:none; visibility:hidden;}
	.mobya {display:block; visibility:visible;}	
	.artmain.home img {margin-top:0;}
}

/* -------- images --------- */
.imgwidth20 {width:20%; height:auto;}
.imgwidth30 {width:30%; height:auto;}
.imgwidth40 {width:40%; height:auto;}
.imgwidth50 {width:50%; height:auto;}
.imgwidth60 {width:60%; height:auto;}
.imgwidth70 {width:70%; height:auto;}
.imgwidth80 {width:80%; height:auto;}
.imgwidth90 {width:90%; height:auto;}
.imgwidth100 {width:100%; height:auto;}

.img-home {margin-top:40px;}
img {border-radius:10px;}
.img-tilt {transform: rotate(5deg);}
figcaption {font-size:14px;}


/* ######## ------ footer  --- ######## */
#footer {display:block; padding-top:40px; width:100%; margin:0px 0 0 0; background-color:#373737;}
#footer .fc1,
#footer .fc2 {display:block;}
#footer .fc3 {display:inline-block;}
#footer .fc2 ul {list-style:none;}
#footer .fc2 ul li {margin-left:0;}
#footer .fc2 p {font-size:0.85em; color:#fff; padding:30px 10px 0px 0px; text-align:start;}
#footer .fc2 address {color:#fff;}
#footer a {color:#fff; text-decoration:none; border-bottom:none;}
#footer a:hover {color:#ff5; text-decoration:underline;}

@media screen and (max-width:767px) {
	.footer-copyright .text-center {text-align:start !important;}
}

/* ------ tarieven table ------- */
h3.tarieven {padding-left:0;font-size:18px; margin-bottom:10px;}
.tar table {width:100%;}
.tar th {font-size:14px; border-right:1px solid #fff; padding:2px 4px 2px 4px; line-height:1.4em;
background-color:#2a629a; color:#fff; font-weight:400 !important;}
th.tar2 {width:65%;}
th.tar1 {text-align:right;}
.tar td {font-size:14px; padding:2px 4px 2px 4px; text-align:right; line-height:1.4em;}
td.tar0 {text-align:left;}
.tar tr:hover td {background-color:rgba(255,127,62,0.3); color:#121212;}

@media screen and (max-width:670px) {/*iphone */
	.tar td, .tar thead {font-size:0.7em;}
	p.tar {font-size:0.8em; line-height:1.0em;}
	#tarieven-toelichting {font-size:0.8em; line-height:1.0em;}
}



/***** media video en audio */
.tube {
	position:relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top:25px;
	height:0;
	overflow:hidden;
	overflow-x:hidden;
	overflow-y:hidden; 
}
.tube iframe {
	position:absolute;
	top: 0;
	left: 0px;
	width:100%;
	height:100%;
	margin-top:0px;
}

/*
Source - https://stackoverflow.com/a/67655097
Posted by Francesco Borzi, modified by community. See post 'Timeline' for change history
Retrieved 2026-08-21, License - CC BY-SA 4.0
*/

/* noodzakelijke standaard conversie van bs4 naar bs5 - ne touch pas */
/* https://stackoverflow.com/questions/67655096/bootstrap-5-form-group-form-row-form-inline-not-working */
.form-group {margin-bottom: 1rem;}
.form-inline .form-control {display: inline-block; width: auto; vertical-align: middle;}
.form-row {display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px;}
.form-row > .col {padding-left: 5px; padding-right: 5px;}



/* ----- contactformulier c1 -------- */
#cf1 .form-row>.col, .form-row>[class*=col-] {padding-right:10px; padding-left:10px;}
#cf1 .form-row {margin-left:0;}
#cf1 fieldset {border:1px solid #e2e2e2; border-radius:10px;}
#cf1 label {font-weight:500; margin-top:10px; padding-bottom:10px; padding-top:20px; font-size:15px;}
#cf1 .form-control {border:1px solid #333 !important; color:#373737 !important;}


/* ----- aanmeldingsformulier c2 -------- */
#cf2 .form-row>.col, .form-row>[class*=col-] {padding-right:10px; padding-left:10px;}
#cf2 legend {font-weight:500; margin-top:10px; padding-bottom:10px; padding-top:20px; font-size:15px;}

#cf2 label {font-weight:500; margin-top:10px; padding-bottom:10px; padding-top:20px; font-size:0.85em;}
#cf2 .form-control {border:1px solid #333 !important; color:#373737 !important;}
#cf2 label.item-title {margin-top:10px; padding-bottom:0px; padding-top:20px; font-size:15px;}

#cf2 option {font-size:13px !important;}
#cf2 .custom-select {font-size:13px; color:#121212;border:1px solid #333; padding: .375rem .75rem;
border:1px solid #333 !important; border-radius:0.375rem;}
#cf2 input.formcontrol {font-size:13px !important;}
/* ruimte tussen button checkbox en label */
#cf2 .form-check-inline .form-check-input {margin-right: 0.35rem;}
/* voor radio */
#cf2 .form-check-label {margin-top:0; padding-bottom:10px; padding-top:0;}


#cf2 .form-check-input[type=checkbox] {border-color:#373737;}
#cf2 .form-check-input[type=radio] {border-color:#373737;}
#cf2 .form-check-input {margin-bottom:0px !important; padding-bottom:0px !important; padding-top:0px !important;}
#cf2 input[type="date"] {font-size:14px;}

.alert-box {width:100%;}

@media screen and (max-width:767px) {
	#cf2 label {margin-top:10px; padding-bottom:10px; padding-top:20px; font-size:14px;}
	#cf2 label.item-title {margin-top:10px; padding-top:20px; font-size:14px;}
}


/* ------ ALERTS ----- */
.alert.alert-success, 
.alert.alert-danger,
.alert.alert-info {border-radius:0; font-size:0.90em; padding:10px; border:1px solid #888; color:#333; font-weight:500;}
.alert.alert-success {background-color:#dff0d8;} 
.alert.alert-danger {background-color:#ffb7b7;}

/* ------------ buttons ---------- */
.btn focus,
.btn active {border:none;}

/* link10 (standaard) en link11 (variant) */
.artcard-dark a.but-link10 {border-bottom:none !important; font-size:16px; font-weight:600;letter-spacing:0.05em; }
.but-link10 a {display:block; text-decoration:none !important; text-align:center;border-bottom:none !important;}

.but-link10 {display:inline-block; text-align:left; white-space: nowrap;
  vertical-align: middle; padding:8px 16px; line-height:1.4em; 
  border-radius:5px; border:1px solid #555;}
.but-link10 i {float:right !important; padding-top:6px;}
.but-link10-left-i i {float:left !important; padding-top:6px;}

.but-link11:hover {background-color:#ffda78;}
.but-link11 {background-color:#fdcc00;}
a.but-link11:hover {color:#121212 !important; text-decoration:none !important; border-bottom:none !important;}
a.but-link11 {color:#121212 !important; text-decoration:none !important; border-bottom:none !important;}
.but-link11 a {color:#121212 !important;}

@media screen and (max-width:767px) {
	.but-link10 {width:100%; font-size:16px;}
}	

.but-link12:hover {background-color:#555;}
.but-link12 {background-color:#2a629a; font-size:16px;}
a.but-link12:hover {color:#fff !important; text-decoration:none !important;}
a.but-link12 {color:#fff !important; text-decoration:none !important;}

.btn-primary {background-color:#2a629a; border-color:#222; color:#fff; font-size:16px; margin-left:0px;}
.btn-primary:hover, 
.btn-primary:focus,
.btn-primary:active {background-color:#4a6299; border-color:#222; color:#fff;}

/* call-to-action circle button */
.button-boek {transition:opacity 0.4s ease, visibility 0.4s ease; opacity:1; visibility:visible;}
.button-boek.is-hidden {opacity:0; visibility:hidden;}
.posrelative {position:relative;}
.button-boek {position: fixed; right:30px; z-index: 9999;
	border-radius:50% !important;display: flex; align-items: center; justify-content: center;
	height: 150px !important; width: 150px !important; font-size: 20px !important; line-height: 1.4em !important;
	border-style:none !important;
	color:#121212 !important; background-color:#fdcc00; padding:16px; text-align:center; font-weight:600;}
.button-boek:hover {text-decoration:none; background-color:#ffc;}

@media screen and (max-width:767px) {
	.button-boek {display:none; visibility:visible;}
}

/* --- smaller gutters cards en margins --- */
.gut10 {
  > .col,
  > [class*="col-"] {padding-right:10px; padding-left:10px;}
}
.gut0 {
  > .col,
  > [class*="col-"] {padding-right:0px; padding-left:0px;}
}
.gut5 {
  > .col,
  > [class*="col-"] {padding-right:5px; padding-left:5px;}
}
.gut2 {
  > .col,
  > [class*="col-"] {padding-right:2px; padding-left:2px;}
}


.mt00 {margin-top: 0px;}
.mt04 {margin-top: 4px;}
.mt06 {margin-top: 6px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.mt60 {margin-top: 60px;}
.mt70 {margin-top: 70px;}
.mb30 {margin-bottom: 30px;}

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

/* CAPTCHA in form */
/* switching off captcha v3 image popping up */
.grecaptcha-badge{width:0 !important;}
#captcha {margin:50px 0 0 0;}
#captcha p {line-height:1.3em;}


/* --- animaties --- */
@keyframes fadeInLeft
 {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeInRight

 {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


.fadeInLeft {animation: fadeInLeft 3s ease-in;}
.fadeInRight {animation: fadeInRight 3s ease-in;}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fadeIn {
    animation: fadeIn 3s ease-in; /* remove infinite*/
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInUp {
    animation: fadeInUp 2s ease-out;
}