body{background-color:#f8f8f8}

main{display:block;margin:0 auto;max-width:1200px;width:100%}

section{width:100%}

#header{background-color:#fff}
#header h1{border-bottom:1px solid #bcd;color:#232f34;font-size:32px;font-weight:700;padding:0}
#header #acties{display:flex; flex-direction: row;}
#header #acties ul{list-style:none;margin:0;padding:0}
#header #acties li{border-bottom:1px solid #bcd;margin:0}
#header #acties li a{color:#232f34;display:flex;padding:14px 16px;position:relative}
#header #acties li a:hover{color:green;text-decoration:underline}
#header #acties li a::after{content:"\f138";display:inline-block;font-family:"bootstrap-icons";position:absolute;right:16px;top:16px}
#header #acties li a.telephone::after{content:"\f5bc";display:inline-block;font-family:"bootstrap-icons";position:absolute;right:16px;top:16px}

#service{background-color:#fff;display:grid;margin:32px 0;padding:16px}
#service a{background-color:green;border:1px solid green;border-radius:2px;color:#fff;display:inline-block;font-size:20px;font-weight:400;line-height:30px;margin:16px;padding:8px 24px 8px 32px;text-align:center;transition:box-shadow .3s;white-space:nowrap}
#service a:hover { box-shadow: 0 0 11px rgba(33,33,33,.2) }

#onderwerpen{margin:32px 0}
#onderwerpen{display:-ms-grid;display:grid;grid-gap:16px}
#onderwerpen .onderwerp{background-color:#fff;border-radius:2px;box-shadow:0 1px 2px 0 rgba(17,34,68,0.4);padding-bottom:14px}
#onderwerpen .onderwerp h2{background-color:#232f34;color:#fff;font-size:16px;font-weight:400;margin:0;padding:14px 16px}
#onderwerpen .onderwerp a{color:#232f34;border-bottom:1px solid #bcd;display:flex;margin:0 16px;padding:14px 16px;position:relative}
#onderwerpen .onderwerp a:hover{color:#9ab;text-decoration:underline}

@media screen and (max-width: 1023px){
    #header h1{line-height:58px;margin:0;padding-left:8px}
    #header #acties{flex-flow:column}
    #header #acties img{display:none}
    #header #acties ul{width:100%}
    /*#onderwerpen{grid-template-columns:1fr 1fr}*/
    #service{grid-gap:0;grid-template-columns:1fr}
}
@media screen and (min-width: 470px){
    #onderwerpen { grid-template-columns: 1fr 1fr; }
}

@media screen and (min-width: 1024px){
    #header h1{line-height:58px;margin:0 16px}
    #header #acties img{align-self: baseline;flex:1 1 34%;margin:0 16px 16px 16px;max-width:34%}
    #header #acties ul{flex:1 1 66%;margin:0 16px;max-width:66%}
    #onderwerpen{grid-template-columns:1fr 1fr 1fr 1fr}
    #service{grid-gap:32px;grid-template-columns:1fr 1fr 1fr}
}


@media screen and (min-width: 1200px){
    #header{border-radius:2px;box-shadow:0 1px 2px 0 rgba(17,34,68,0.4)}
    #service{border-radius:2px;box-shadow:0 1px 2px 0 rgba(17,34,68,0.4)}
}