/* Kempen Spaarbank NV - huisstijl website */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Fira Sans",Arial,Helvetica,sans-serif;font-size:15px;line-height:1.6;color:#262626;background:#fff}
a{color:#006b3a}
a:hover{color:#004a28}
img{max-width:100%}
h1,h2,h3,h4{font-weight:500;color:#1b1b1b;line-height:1.25;margin:0 0 .5em}
h1{font-size:30px;color:#006b3a;margin-bottom:.35em}
h2{font-size:21px}
h3{font-size:17px}
p{margin:0 0 1em}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.hide-s{}
@media(max-width:640px){.hide-s{display:none}}
.link-off{color:inherit;cursor:default}
[hidden]{display:none!important}

/* hulpbalk */
.util{background:#f1f1f1;border-bottom:1px solid #dcdcdc;font-size:13px}
.util .wrap{display:flex;justify-content:space-between;align-items:stretch}
.util ul{list-style:none;margin:0;padding:0;display:flex}
.seg li{padding:7px 14px;border-right:1px solid #dcdcdc;color:#555}
.seg li:first-child{border-left:1px solid #dcdcdc}
.seg li.on{background:#fff;color:#006b3a;font-weight:500;margin-bottom:-1px}
.ulinks li{padding:7px 0 7px 18px;color:#555;white-space:nowrap}
@media(max-width:640px){.ulinks li:nth-child(2){display:none}.seg li{padding:7px 10px}}
.ulinks a{color:#333;text-decoration:none}
.ulinks a:hover{text-decoration:underline}

/* kop */
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#1b1b1b}
.logo svg{width:44px;height:44px;flex:none}
.logo .lt b{display:block;font-size:22px;font-weight:600;letter-spacing:-.2px;line-height:1.1;color:#1b1b1b}
.logo .lt i{display:block;font-style:normal;font-size:13px;color:#6a6a6a}
.ob-btn{background:#006b3a;color:#fff;text-decoration:none;font-weight:500;padding:10px 18px;border-radius:2px}
.ob-btn:hover{background:#004a28;color:#fff}

/* hoofdmenu met uitklapmenu's */
.mnav{background:#006b3a;color:#fff}
.mnav .wrap{position:relative}
.lvl1{list-style:none;margin:0;padding:0;display:flex}
.lvl1>li{position:relative}
.lvl1>li>a{display:block;color:#fff;text-decoration:none;padding:12px 18px;font-weight:500}
.lvl1>li.dd>a::after{content:"";display:inline-block;margin-left:7px;border:4px solid transparent;border-top-color:#cfe5d8;vertical-align:-1px}
.lvl1>li>a:hover,.lvl1>li:focus-within>a,.lvl1>li:hover>a{background:#004a28}
.lvl1>li>a.on{background:#fff;color:#006b3a}
.lvl1>li>a.on::after{border-top-color:#006b3a}
.lvl1 ul{display:none;position:absolute;left:0;top:100%;z-index:20;list-style:none;margin:0;padding:6px 0;background:#fff;border:1px solid #c8c8c8;border-top:3px solid #004a28;min-width:240px;box-shadow:0 3px 6px rgba(0,0,0,.12)}
.lvl1>li:hover ul,.lvl1>li:focus-within ul{display:block}
.lvl1 ul a{display:block;padding:7px 16px;color:#262626;text-decoration:none}
.lvl1 ul a:hover{background:#eef5f0;color:#006b3a}
.mbtn{display:none}
@media(max-width:760px){
  .hdr .wrap{height:70px}
  .logo svg{width:36px;height:36px}.logo .lt b{font-size:18px}.logo .lt i{display:none}
  .ob-btn{padding:8px 12px;font-size:14px}
  .mbtn{display:block;background:none;border:0;color:#fff;font:inherit;font-weight:500;padding:11px 0;cursor:pointer;width:100%;text-align:left}
  .mbtn::before{content:"\2261";font-size:20px;margin-right:8px;vertical-align:-2px}
  .lvl1{display:none;flex-direction:column;padding-bottom:8px}
  .mnav .wrap.open .lvl1{display:flex}
  .lvl1>li>a{padding:9px 0;border-top:1px solid rgba(255,255,255,.2)}
  .lvl1>li>a.on{background:none;color:#fff;text-decoration:underline}
  .lvl1 ul,.lvl1>li:hover ul{display:none}
}

.crumbs{font-size:13px;color:#777;padding-top:14px;padding-bottom:4px}
.crumbs a{color:#555}
.crumbs span{margin:0 4px;color:#aaa}

/* startpagina */
.banner{display:flex;margin-top:22px;min-height:330px}
.b-img{flex:1.5;background:#cfd8d2;overflow:hidden}
.b-img img{width:100%;height:100%;object-fit:cover;display:block}
.b-txt{flex:1;background:#006b3a;color:#fff;padding:34px 34px 30px}
.b-txt h1{color:#fff;font-size:32px}
.b-txt p{color:#e3efe8;font-size:16px}
@media(max-width:760px){.banner{flex-direction:column;margin-top:0;padding:0}.b-img{height:200px;flex:none}.b-txt{padding:22px 20px}}
.quick ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;border:1px solid #dcdcdc;border-top:0;background:#fafafa}
.quick li{flex:1 1 25%;border-right:1px solid #dcdcdc}
.quick li:last-child{border-right:0}
.quick a{display:block;padding:12px 16px;text-decoration:none;color:#262626;font-weight:500}
.quick a::before{content:"› ";color:#006b3a;font-weight:600}
.quick a:hover{background:#eef5f0;color:#006b3a}
@media(max-width:760px){.quick{padding:0}.quick li{flex-basis:50%;border-bottom:1px solid #dcdcdc}}

/* inhoud + zijbalk */
.cols2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;padding-top:22px;padding-bottom:50px}
@media(max-width:900px){.cols2{grid-template-columns:1fr;gap:10px}}
.main .intro{font-size:17px;color:#444}
.blk{padding:6px 0 18px;border-bottom:1px solid #e3e3e3;margin-bottom:22px}
.blk:last-of-type{border-bottom:0}
.more{font-weight:500;text-decoration:none}
.more::after{content:" ›"}
.fn{font-size:12.5px;color:#6a6a6a;margin-top:8px}
.art-img{display:block;width:100%;height:240px;object-fit:cover;background:#d9e1dc;margin:4px 0 16px}
.ul{padding-left:20px;margin:0 0 1em}
.ul li{margin-bottom:4px}
.ul li::marker{color:#006b3a}
.ol{padding-left:22px}
.ol li{margin-bottom:8px}
.plist dt{font-weight:500;margin-top:10px;color:#006b3a}
.plist dd{margin:0 0 4px}
.alert{border:1px solid #e3c86a;background:#fff8dc;padding:12px 16px;margin:6px 0 20px}

table.rates{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:15px}
.rates th{background:#006b3a;color:#fff;font-weight:500;text-align:left;padding:8px 10px}
.rates td{padding:8px 10px;border-bottom:1px solid #dcdcdc}
.rates tbody tr:nth-child(even) td{background:#f5f7f6}
.rates .num{text-align:right;white-space:nowrap}
@media(max-width:520px){.rates th,.rates td{padding:7px 6px;font-size:13.5px}}
table.prod{width:100%;border-collapse:collapse;border-top:1px solid #dcdcdc;margin-bottom:4px}
.prod th,.prod td{text-align:left;padding:9px 10px 9px 0;border-bottom:1px solid #dcdcdc;vertical-align:top;font-weight:400}
.prod th{width:180px;font-weight:500}
@media(max-width:520px){.prod th{width:130px}}

.teaser{display:flex;gap:16px;margin-bottom:16px}
.teaser img{width:150px;height:100px;object-fit:cover;background:#d9e1dc;flex:none}
.teaser h3{margin-bottom:4px}
.teaser h3 a{text-decoration:none}
.teaser h3 a:hover{text-decoration:underline}
.teaser p{font-size:14px;color:#444;margin:0}
@media(max-width:520px){.teaser img{width:96px;height:72px}}

.office{border:1px solid #dcdcdc;border-left:4px solid #006b3a;padding:12px 16px 4px;margin-bottom:14px}
.office h2{font-size:19px;margin-bottom:6px}
.office h2 small{font-size:13px;color:#777;font-weight:400;margin-left:6px}
.office.hl{background:#f2f8f4}
table.kv{border-collapse:collapse;margin-bottom:10px}
.kv th{text-align:left;font-weight:400;color:#6a6a6a;padding:3px 24px 3px 0;vertical-align:top}
.kv td{padding:3px 0}

.side .box{border:1px solid #dcdcdc;margin-bottom:16px;padding:14px 16px;background:#fff}
.side .box h3{font-size:16px;margin:-14px -16px 12px;padding:9px 16px;background:#f1f1f1;border-bottom:1px solid #dcdcdc}
.side .box.ob h3{background:#006b3a;color:#fff;border-color:#006b3a}
.side .box.warn h3{background:#fff2c6;border-color:#e8d48c}
.side .box p{font-size:14px}
.kz label{display:block;font-size:13px;color:#555;margin-bottom:3px}
.kz select{width:100%;font:inherit;padding:6px 6px;border:1px solid #9a9a9a;border-radius:0;background:#fff;margin-bottom:10px}

.btn{display:inline-block;background:#006b3a;color:#fff;border:1px solid #006b3a;border-radius:2px;font:inherit;font-weight:500;padding:8px 18px;text-decoration:none;cursor:pointer}
.btn:hover{background:#004a28;border-color:#004a28;color:#fff}
.btn.sec{background:#fff;color:#006b3a}
.btn.sec:hover{background:#eef5f0;color:#004a28}
.btn.wh{background:#fff;color:#006b3a;border-color:#fff}
.btn.wh:hover{background:#e3efe8}

/* voet */
.ftr-top{background:#f1f1f1;border-top:1px solid #dcdcdc;padding:26px 0 14px;font-size:14px}
.ftr .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:760px){.ftr .cols{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.ftr .cols{grid-template-columns:1fr}}
.ftr h4{font-size:15px;margin-bottom:8px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:4px}
.ftr a{color:#333}
.ftr .big{font-size:20px;font-weight:600;color:#006b3a;text-decoration:none}
.ftr-legal{background:#00512c;color:#cfe0d6;font-size:12.5px;padding:14px 0 6px}
.ftr-legal p{margin:0 0 8px}
.ftr-legal .fine{color:#a9c7b6;max-width:900px}

/* nieuws, faq */
.nd{display:block;font-size:12.5px;color:#777}
.toc{border:1px solid #dcdcdc;background:#fafafa;padding:10px 16px;margin-bottom:22px;font-size:14px}
.toc ul{margin:6px 0 0;padding-left:18px}
.toc li{margin-bottom:2px}
.toc .nd{display:inline;margin-left:6px}
h2.yr{font-size:15px;color:#fff;background:#006b3a;padding:4px 10px;margin:26px 0 12px}
.news{border-bottom:1px solid #e3e3e3;padding-bottom:10px;margin-bottom:18px}
.news h2{font-size:19px;margin-top:2px}
.news .nd{margin:0}
.rates.tar td.num{white-space:normal}
.faq{border-bottom:1px solid #e3e3e3}
.faq summary{cursor:pointer;padding:9px 0;font-weight:500;color:#006b3a}
.faq summary:hover{text-decoration:underline}
.faq p{margin:0 0 12px;padding-left:16px}