/* Huisstijl constanten */ :root { --caritas-rood: #b11d24; --caritas-blauw: #0d8aca; --caritas-geel: #d9a606; } /* Gebruik van deze constanten: h1 { color: var(--caritas-rood); } */ body { font-family: "trebuchet ms", arial, helvetica; font-size: 1rem; line-height: 1.65; margin: 0; } #wobi_ldquo { display: block; } #wobi_rdquo { display: block; } #printkop { display: none; } #wobi_ldquo_print { display: none; } #wobi_rdquo_print { display: none; } a { color: #890d00; } a:visited { color: #890d00; } a:active { color: #890d00; } a:hover { text-decoration: underline; } footer a { color: white; } footer a:visited { color: #eee; } footer a:active { color: #eee; } footer a:hover { color: #777; } a.footer { color: #bbb; } td.footer { color: white; } td.footer a { color: white; text-decoration: none; } td.footer a:visited { color: white; } td.footer a:active { color: white; } td.footer a:hover { text-decoration: underline; } h1 { font-size: 22pt; font-family: 'EB Garamond'; font-weight: normal; color: #890d00; margin: 10px 0 12px 0; } h2 { font-size: 18pt; font-family: 'EB Garamond'; font-weight: normal; color: #890d00; margin: 30px 0 8px 0; padding: 0; } h3 { font-size: 15pt; font-family: 'EB Garamond'; font-weight: normal; color: #890d00; margin: 20px 0 4px 0; padding: 0; } myh1 { font-size: 22pt; font-family: 'EB Garamond'; font-weight: normal; color: #890d00; margin: 10px 0 10px 0; } myh2 { font-size: 18pt; font-family: 'EB Garamond'; font-weight: normal; color: #890d00; margin: 30px 0 8px 0; padding: 0; } myh3 { font-size: 15pt; font-family: 'EB Garamond'; font-weight: normal; color: #890d00; margin: 20px 0 4px 0; padding: 0; } select { border: 1px solid #eda; } optgroup { padding: 10px 0 0 0; } textarea { font-size: 80%; font-family: "trebuchet ms", arial, helvetica; } span.g { color: #777; font-size: 9pt; } span.s { font-size: 8pt; vertical-align: super; } span.xsgi { font-size: 75%; font-style: italic; font-weight: normal; text-decoration: none; color: #667; } span.bull { color: #db002f; } p.g { color: #777; font-size: 9pt; line-height: normal; } div.newsheader { font-size: 13pt; font-family: "EB Garamond"; font-weight: normal; color: #890d00; margin: 0; padding: 0; } div.xsg { font-size: 8pt; color: #777; } div.s { font-size: 9pt; vertical-align: top; } div.xsr { font-size: 75%; font-style: normal; font-weight: normal; text-decoration: none; color: black; text-align: right; } div.aut_right { text-align: right; font-size: 90%; margin-right: 7px; font-style: italic; color: #3c60a7; } div.aut_left { text-align: left; font-size: 90%; margin-left: 7px; font-style: italic; color: #3c60a7; } div.caption { text-align: center; font-size: 90%; margin: 0 7px 0 7px; color: #3c60a7; } div.rondgang { float: left; font-size: 90%; text-align: center; margin: 0 0 12px 0; color: #777; } div.breadcrumb { margin: 0 0 20px 180px; color: #aaa; } div.breadcrumb a { color: #aaa; } div.icon { float: left; font-size: 80%; text-align: center; margin: 0; } div.icon250 { float: left; font-size: 80%; text-align: center; margin: 3px; width: 250px; height: 250px; } div.right { text-align: right; } div.center { text-align: center; } div.question { background: url('../bieb/bullets/question.gif') left top no-repeat; font-weight: bold; padding-left: 35px; } table.adres { margin-top: 10px; border-spacing: 8px; border-collapse: separate; } table.lijst { margin-top: 10px; border-spacing: 4px; border-collapse: separate; } table.programma { margin-top: 10px; margin-bottom: 15px; border-spacing: 6px; border-collapse: separate; } table.formulier { margin-top: 10px; margin-bottom: 15px; border-spacing: 6px; border-collapse: separate; } table.programma tr { vertical-align: top; } table.formulier tr { vertical-align: top; } tr.head { height: 20px; background-color: #b10017; font-size: 12pt; color: white; font-weight: bold; } tr.head td { padding: 0 3px; } tr.tablehead { background: transparent url('images/news_month_bar.png') repeat-x top left; color: white; } tr.headingbar { background: transparent url('images/news_month_bar.png') repeat-x top left; color: white; text-align: center; font-size: 13pt; font-weight: bold; } td.headingbar { background: transparent url('images/news_month_bar.png') repeat-x top left; color: white; text-align: center; font-size: 13pt; font-weight: bold; } tr.rkact_header { background: transparent url('images/news_month_bar.png') repeat-x top left; color: white; text-align: center; font-size: 13pt; font-weight: bold; } tr.rkact_spacer { height: 8px; } tr.rkact_odd { background-color: transparent; } tr.rkact_even { background-color: #eee; } tr.rkact_intern { background-color: #ccc; } tr.rkact_extern { background-color: transparent; } td.rkact_date { font-size: 10pt; padding: 0 5px 0 5px; text-align: right; } td.rkact_time { font-size: 10pt; padding: 0 5px 0 5px; text-align: right; } td.rkact_title { font-size: 10pt; font-weight: bold; padding: 0 5px 0 5px; } td.rkact_place { font-size: 10pt; padding: 0 5px 0 5px; } tr.knagenda_header { font-size: 13pt; text-align: center; color: white; background-color: #880f06; } tr.knagenda_spacer { height: 8px; } tr.knagenda_even { background-color: #eee; } td.knagenda_date { font-size: 9pt; padding: 0 5px 0 5px; } td.knagenda_title { font-size: 10pt; padding: 0 5px 0 5px; } td.knagenda_place { font-size: 9pt; padding: 0 5px 0 5px; } div.rka_fromto { font-size: 8pt; color: #777; } div.rka_link { font-size: 10pt; color: #ccc; } div.rka_sep { height: 8px; } div.title { font-size: 18pt; font-family: "EB Garamond"; font-weight: normal; color: #890d00; } div.subtitle { font-size: 15pt; font-family: "EB Garamond"; font-weight: normal; color: #890d00; } td.year { vertical-align: top; padding-top: 20px; text-align: right; padding-right: 12px; font-weight: bold; width: 80px; } td.desc { vertical-align: top; padding-top: 20px; } td.pict { vertical-align: top; padding-top: 20px; font: 7pt verdana; text-align: center; } td.underline { border-top: solid 1px white; border-bottom: solid 1px #ccc; } span.label { font-size: 8pt; color: #777; line-height: 1.8; text-align: right; padding-right: 5px; } td.label { font-size: 8pt; color: #777; line-height: 1.8; text-align: right; padding-right: 5px; } td.rlabel { font-size: 8pt; color: #777; text-align: right; padding-top: 5px; padding-right: 5px; } td.sg { font-size: 8pt; color: #777; } td.s { font-size: 8pt; } td.rsg { text-align: right; font-size: 8pt; padding-top: 5pt; color: #777; } td.rg { text-align: right; color: #777; } td.small { transform: scale(.9); -webkit-transform: scale(.9); } tr.viering:hover { cursor: pointer; background-color: #ff8; } table.balloon { font-size: 11pt; } img.imgr { float: right; margin: 0px 0 30px 40px; } img.imgrr { float: right; margin: 0px -18% 30px 40px; } img.imgrb { float: right; margin: 0px 0 30px 40px; box-shadow: 2px 3px 6px #555; border: 0 none; } img.imgrrb { float: right; margin: 0px -18% 30px 40px; box-shadow: 2px 3px 6px #555; border: 0 none; } img.imgb { box-shadow: 2px 3px 6px #555; border: 0 none; } img.thumb { box-shadow: 2px 3px 6px #555; border: 0 none; margin: 6px; } div.img { font-size: 8pt; color: #777} div.imgr { float: right; margin: 0px 0 30px 40px; font-size: 8pt; color: #777} div.imgrr { float: right; margin: 10px -18% 30px 40px; font-size: 8pt; color: #777} div.img_photo { text-align: right; font-style: italic; margin-bottom: 3px; } div.img_capt { text-align: center; margin-top: 3px; margin-bottom: 10px; } div.imgl { float: left; margin: 0px 30px 20px 0; font-size: 8pt; color: #777} img.leesverder { width: 60px; height: 15px; border: 0; margin-bottom: -3px; } input { background: white url('images/bg_input.jpg') no-repeat top left; } select { background: white url('images/bg_input.jpg') no-repeat top left; } textarea { background: white url('images/bg_input.jpg') no-repeat top left; } #weekprogramma td { border: solid 1px #ccc; } li { margin-top: 5px; } span.badge { background-color: lightgrey; margin-right: 5px; } .shdw { box-shadow: 2px 2px 10px #555; border: 0 none; } .shdw2 { box-shadow: 5px 5px 25px #555; border: 0 none; } div.kader { box-shadow: 2px 2px 10px #555; border: 0 none; margin: 30px 0; padding: 10px 40px 20px 40px; background-color: #eee; } div.kaderr { float: right; box-shadow: 2px 2px 10px #555; border: 0 none; margin: 0 0 20px 40px; padding: 10px 30px 20px 30px; background-color: #eee; } div.kadergebed { box-shadow: 2px 2px 10px #555; border: 0 none; margin: 30px 0; padding: 10px 40px 20px 40px; background: #eee url('/images/bg_gebed.jpg') no-repeat right bottom; background-size: cover; } div.kaderbaby { box-shadow: 2px 2px 10px #555; border: 0 none; margin: 30px 0; padding: 10px 40px 20px 40px; background: #eee url('/images/bg_baby.jpg') no-repeat right bottom; background-size: cover; } div.kaderverloop1 { box-shadow: 2px 2px 10px #555; border: 0 none; margin: 30px 0; padding: 10px 40px 20px 40px; background: #eee url('/images/bg_verloop1.jpg') no-repeat right bottom; background-size: cover; } .question { background: url('/images/icon_question.png') left top no-repeat; padding-left: 35px; min-height: 35px; margin-bottom: 14px; font-style: italic; } .exclamation { background: url('/images/icon_exclamation.png') left top no-repeat; padding-left: 35px; min-height: 35px; margin-bottom: 14px; font-weight: bold; } .scripture { background: url('/images/icon_scripture.png') left top no-repeat; padding-left: 35px; min-height: 35px; margin: 40px 0px 30px 0px; } .tip { background: url('/images/icon_tip.png') left top no-repeat; padding-left: 40px; min-height: 35px; margin-bottom: 14px; } .info { background: url('/images/icon_info.png') left top no-repeat; padding-left: 40px; min-height: 35px; margin-bottom: 14px; } .quote { background: url('/images/icon_quote.png') left top no-repeat; padding-left: 40px; min-height: 35px; margin: 40px 0px 30px 0px; 14px; font-style: italic; } .do { background: url('/images/icon_do.png') left top no-repeat; padding-left: 40px; min-height: 35px; margin-bottom: 14px; } .dont { background: url('/images/icon_dont.png') left top no-repeat; padding-left: 40px; min-height: 35px; margin-bottom: 14px; } .date { background: url('/images/icon_date.png') left top no-repeat; padding-left: 40px; min-height: 35px; margin-bottom: 14px; } .location { background: url('/images/icon_location.png') left top no-repeat; padding-left: 40px; min-height: 35px; margin-bottom: 14px; } .website { background: url('/images/icon_website.png') left top no-repeat; padding-left: 40px; min-height: 35px; margin-bottom: 14px; } .iframe-container { position: relative; overflow: hidden; padding-top: 56.25%; } .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .bg-dark-red { background-color: #b11d24; } .bg-maria-blauw { background-color: #0d8aca; } .bg-stjan-goud { background-color: #d9a606; } .btn.bg-dark-red { background-color: #b11d24 !important; color: white !important; border-color: #b11d24 !important; /* rand dezelfde kleur, voorkomt rare randjes */ } .btn.bg-dark-red:hover, .btn.bg-dark-red:focus, .btn.bg-dark-red:active { background-color: #8f171d !important; /* iets donkerder rood bij hover (pas aan als je wilt) */ color: white !important; border-color: #8f171d !important; } main, body > main, .flex-grow-1 { margin-left: 0.1rem !important; padding-left: 0.1rem !important; } .container { max-width: 1400px important!; } /* Witte menubalk met donkere tekst */ .navbar-light .navbar-nav .nav-link { color: #b11d24 !important; font-size: 17pt; font-weight: bold; opacity: 1 !important; padding-left: .8rem !important; padding-right: .8rem !important; } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: #000 !important; background-color: rgba(0,0,0,0.15) !important; border-radius: 0.25rem; } /* Hamburger-icon donker maken (voor mobiel) */ .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } .info-narrow { max-width: 860px; } div.right15 { margin-right: -20%; } footer { font-size: 1rem; color: #ddd; background: linear-gradient(120deg, #b11d24 0%, #7d0d13 100%); } .dropdown-header { color: #999; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.5px; padding-top: 1rem; padding-bottom: 0.5rem; margin-top: 0.5rem; border-top: 1px solid #eee; } /* smartphone */ @media (max-width: 992px) { .info-narrow { max-width: 100% !important; margin-left: 1rem !important; margin-right: 1rem !important; padding: 0 1rem; } div.right15 { margin-right: 0; } .notonmobile { display:none; } } /* desktop */ @media (min-width: 768px) { footer { font-size: 1.25rem !important; } .notondesktop {display:none;} } /* ********** Plaatjes ********** */ /* Algemene basis voor alle figuren */ figure.img-figure { position: relative; margin: 2rem 0; padding: 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08); } /* PNG-variant: transparant, geen schaduw, geen ronde hoeken */ figure.transparent-png { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; } /* Foto zelf: altijd proportioneel, nooit uitrekken */ figure.img-figure img { display: block; height: auto; max-width: 100%; } /* Fotograaf-credit: rechtsboven */ .img_photo { position: absolute; top: 12px; right: 16px; background: rgba(0,0,0,0.3); color: white; font-size: 0.85rem; padding: 0.4rem 0.85rem; border-radius: 20px; z-index: 10; font-weight: 500; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Onderschrift: gecentreerd onderin */ .img_capt { text-align: center; font-size: 0.92rem; color: #777; padding: 1rem 1.25rem 1.25rem; background: #f9f9f9; margin: 0; } /* ======================== */ /* 1. Links uitgelijnd -180 px (sterk links met overflow) */ figure.img-left-minus { float: left; clear: left; max-width: 360px !important; width: auto !important; margin: 0.75rem 2rem 1.5rem -180px; } /* 2. Links uitgelijnd (normaal links) */ figure.img-left { float: left; clear: left; max-width: 360px !important; width: auto !important; margin: 0.75rem 2rem 1.5rem 0; } /* 3. Volledige breedte (midden) */ figure.img-full { clear: both; max-width: 100% !important; margin: 2rem auto; } /* 4. Rechts uitgelijnd (normaal rechts) */ figure.img-right { float: right; clear: right; max-width: 360px !important; width: auto !important; margin: 0.75rem 0 1.5rem 2rem; } /* 5. Rechts uitgelijnd -180 px (sterk rechts met overflow) */ figure.img-right-minus { float: right; clear: right; max-width: 360px !important; width: auto !important; margin: 0.75rem -180px 1.5rem 2rem; } /* Foto binnen links/rechts-varianten: max 360 px, behoud verhouding */ figure.img-left img, figure.img-right img, figure.img-left-minus img, figure.img-right-minus img { width: auto !important; max-width: 360px !important; height: auto !important; } /* Clear-fix: voorkomt overlappende tekst na float */ figure.img-figure::after { content: ""; display: table; clear: both; } /* ======================== */ /* Mobiel: volledige breedte, gecentreerd, kleine padding links/rechts */ @media (max-width: 767px) { figure.img-figure { float: none !important; clear: both !important; width: calc(100% - 2rem) !important; max-width: calc(100% - 2rem) !important; margin-left: 1rem !important; margin-right: 1rem !important; margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; box-sizing: border-box !important; } figure.img-figure img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; margin: 0 auto !important; } figure.img-left, figure.img-right, figure.img-left-minus, figure.img-right-minus { float: none !important; clear: both !important; margin-left: 1rem !important; margin-right: 1rem !important; width: calc(100% - 2rem) !important; max-width: calc(100% - 2rem) !important; } /* Voorkom horizontale overflow op het hele document */ body, main, .container, .row { overflow-x: hidden !important; box-sizing: border-box !important; } .img_photo { font-size: 0.78rem; padding: 0.3rem 0.6rem; top: 10px; right: 12px; } .img_capt { font-size: 0.88rem; padding: 0.9rem 1rem; } } /* gebruik in html:
Beschrijving
Foto: Anna Jansen
Jaarlijkse nieuwjaarsontmoeting 2025
*/ /* ********** Photoserie ********** */ .photoserie .row { --bs-gutter-x: 1.25rem; } .photoserie img { transition: transform 0.25s ease; } .photoserie img:hover { transform: scale(1.04); box-shadow: 0 8px 25px rgba(0,0,0,0.15); } /* ********** Wie is wie ********** */ .team-card { transition: all 0.3s ease; border: none; border-radius: 16px; overflow: hidden; background: white; box-shadow: 0 12px 40px rgba(0,0,0,0.12); } .team-card:hover { transform: translateY(-12px); box-shadow: 0 25px 60px rgba(0,0,0,0.18); } .team-img { width: 100%; height: 100%; object-fit: cover; } .team-name { font-weight: 700; font-size: 1.5rem; margin-bottom: 0.35rem; color: #222; } .team-role { color: #b10017; font-weight: 600; font-size: 1.1rem; margin-bottom: 0.5rem; } .team-org { color: #555; font-size: 0.95rem; margin-bottom: 1rem; } .team-bio { color: #444; font-size: 1rem; line-height: 1.7; margin-bottom: 1.25rem; } .linkedin-btn { background: #0a66c2; color: white; border: none; border-radius: 50px; padding: 0.5rem 1.25rem; font-weight: 600; transition: all 0.25s; } /* Mobiel: stapel kaarten */ @media (max-width: 991px) { .team-img { height: 220px; } } /* ********** FAQ ********** */ .faq-accordion { max-width: 900px; margin: 2rem auto; } .faq-item { margin-bottom: 1rem; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); background: white; } .faq-question { display: block; padding: 1.25rem 1.5rem; font-weight: 600; font-size: 1.1rem; color: #333; background: #f8f9fa; cursor: pointer; user-select: none; transition: background 0.2s ease; margin: 0; } .faq-question::after { content: '+'; float: right; font-size: 1.5rem; line-height: 1; color: #777; transition: transform 0.3s ease; } .faq-answer { max-height: 0; overflow: hidden; padding: 0 1.5rem; background: white; transition: max-height 0.4s ease, padding 0.3s ease; color: #444; line-height: 1.65; } .faq-question:hover { background: #e9ecef; } /* Wanneer het antwoord open is (door JS) */ .faq-item.open .faq-answer { max-height: 1000px; padding: 1.5rem; } .faq-item.open .faq-question::after { content: '-'; transform: rotate(180deg); } /* Mobiel */ @media (max-width: 576px) { .faq-question { font-size: 1rem; padding: 1rem 1.25rem; } .faq-answer { padding: 1rem 1.25rem; } } .gradient-diagonal { background-image: url('/images/gradient-diagonal.png'); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; background-blend-mode: overlay; } .gradient-shine { background-image: url('/images/gradient-shine.png'); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; background-blend-mode: overlay; } .gradient-glossy { background-image: url('/images/gradient-glossy.png'); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; background-blend-mode: overlay; } .gradient01 { background-image: url('/images/gradient01.png'); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; background-blend-mode: overlay; } .gradient02 { background-image: url('/images/gradient02.png'); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; background-blend-mode: overlay; } .gradient03 { background-image: url('/images/gradient03.png'); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; background-blend-mode: overlay; }