@charset "UTF-8";
/* Cosens - statische site
Opmaak gebaseerd op het oorspronkelijke thema (ARDATA / Artisteer),
met de originele thema-afbeeldingen uit /images/.
Kleuren: groen #94b329 / #b2d33c / #72891f, tekst #4b5758, koppen #505c5e. */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:#eceee6 url(/images/page.jpeg) repeat-x center top;
font-family:'Open Sans',Arial,'Helvetica Neue',Helvetica,sans-serif;
font-size:13px;
line-height:1.75;
color:#4b5758;
}
img{max-width:100%;height:auto}
a{color:#768d20;text-decoration:none}
a:hover{color:#98b72a;text-decoration:underline}

.page{max-width:975px;margin:0 auto;padding:0 10px 30px}

/* ---------- Header ---------- */
.top{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
height:130px;
background:url(/images/header.png) no-repeat center top;
}
.logo{
display:block;
flex:0 0 auto;
align-self:center;
width:148px;height:128px;
margin-left:4px;
background:url(/images/cosens-logo.png) no-repeat center center;
background-size:contain;
font-size:0;
text-decoration:none;
}
.logo:hover{text-decoration:none}
.logo svg,.logo span{display:none}

/* de knoppen lijnen strak tegen de bovenrand uit */
.tabs{display:flex;align-items:flex-start;align-self:flex-start;margin-top:0}
.tabs a{
display:block;
width:116px;height:74px;
background-repeat:no-repeat;
background-position:center top;
font-size:0;color:transparent;
text-decoration:none;
}
.tabs a:hover{text-decoration:none;filter:brightness(1.07)}
.tabs a.here{filter:brightness(.9)}
.tabs a[href="/kinderen/"]{background-image:url(/images/kinderen0.png)}
.tabs a[href="/jongeren/"]{width:115px;background-image:url(/images/jongeren0.png)}
.tabs a[href="/volwassenen/"]{background-image:url(/images/volwassenen0.png)}
.tabs a[href="/reacties/"]{width:115px;background-image:url(/images/reacties0.png)}
.tabs a[href="/tarieven/"]{width:113px;background-image:url(/images/tarieven0.png)}

/* ---------- Kolommen ----------
De groene balk in page.jpeg loopt tot precies 164px; het grijze vlak
begint daar strak onder (130px .top + 34px marge). */
.sheet{
display:flex;
gap:20px;
align-items:flex-start;
margin-top:34px;
background:#f8f8f7 url(/images/sheet-home.png) no-repeat center -34px;
background-size:100% auto;
padding:24px 20px 28px;
box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.menu{flex:0 0 160px}
.menu ul{list-style:none;margin:0;padding:0}
.menu>ul>li>a{
display:block;padding:7px 6px;
color:#505c5e;font-size:13px;text-transform:uppercase;
border-bottom:1px solid rgba(80,92,94,.12);
}
.menu>ul>li>a:hover{color:#94b329;text-decoration:none}
.menu>ul>li>a.here{color:#94b329;font-weight:700}
.menu ul ul{margin:4px 0 6px 10px}
.menu ul ul a{
display:block;padding:2px 6px 2px 18px;font-size:12px;color:#5f7014;text-transform:none;
background:url(/images/vmenusubitemicon.png) no-repeat 2px 9px;
}
.menu ul ul a:hover{color:#94b329;text-decoration:none;background-image:url(/images/vmenuhoveredsubitemicon.png)}
.menu ul ul a.here{background-image:url(/images/vmenuactivesubitemicon.png)}

.content{flex:1 1 auto;min-width:0}
.side{flex:0 0 205px;color:#303030}
.side .links{
text-align:right;margin:0 0 14px;
font-size:12px;letter-spacing:1px;text-transform:uppercase;
}
.side .links a{color:#677779}
.side blockquote{
margin:0 0 16px;padding:2px 0 0 30px;
background:url(/images/postquote.png) no-repeat 0 2px;
background-size:22px 22px;
font-style:italic;font-size:13px;line-height:1.6;color:#3f4a2a;
}

/* ---------- Tekst ---------- */
.content h1{
margin:0 0 12px;
font-size:19px;font-weight:700;color:#505c5e;line-height:1.3;
}
.content h2{margin:22px 0 4px;font-size:15px;font-weight:700;color:#505c5e}
.content h3{margin:18px 0 4px;font-size:14px;font-weight:700;color:#505c5e}
.content p{margin:12px 0}
.content ul{margin:12px 0;padding:0;list-style:none}
.content ul li{
padding-left:24px;margin:5px 0;color:#303030;
background:url(/images/blockbullets.png) no-repeat 0 7px;
}
.content .lead{font-style:italic;color:#6b8118;font-size:14px}
.content figure{margin:14px 0;text-align:center}
.content figure img{box-shadow:0 1px 4px rgba(0,0,0,.25)}
/* In de oorspronkelijke opmaak hing het logo over de linkerbovenhoek van de
welkomstfoto; dat stukje logo zit in de jpg ingebakken en wordt weggesneden. */
.content img[src*="welkomstfoto1"]{display:block;clip-path:inset(9% 0 0 0);margin-top:-5%}
.content .photo-left{float:left;margin:4px 18px 10px 0;max-width:230px}
.poem{margin:16px 0;text-align:center;font-style:italic;color:#5f7014;line-height:1.9}
.poem .author{display:block;margin-top:10px;font-size:12px;color:#707070}
.divider{border:0;border-top:1px dotted #b9cf6a;margin:26px 0}
.contactcard p{margin:4px 0}

/* ---------- Footer ---------- */
.foot{
padding:14px 4px 0;
text-align:center;
font-size:11px;color:#40484a;
}
.foot a{color:#72891f}

/* ---------- Responsive ---------- */
@media (max-width:860px){
body{background:#eceee6}
.top{
height:auto;
flex-direction:column;align-items:center;
padding:14px 8px 0;
background:linear-gradient(to bottom,#5f635e 0,#8aab30 70%,#a9c74b 100%);
}
.tabs{flex-wrap:wrap;justify-content:center;align-self:center;margin-top:8px}
.sheet{flex-direction:column;background-size:auto;margin-top:0}
.menu,.side{flex:1 1 auto;width:100%}
.side .links{text-align:left}
.menu>ul{display:flex;flex-wrap:wrap;gap:0 18px}
.menu>ul>li{flex:0 0 auto}
.content .photo-left{float:none;margin:0 auto 14px;display:block}
}
@media (max-width:520px){
.menu>ul{display:block}
.logo{width:120px;height:104px}
}