body {
    font-family: 'Puritan', sans-serif;
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.95em;
    color: #012C78;
    *background: url(images/lijntmkol.png) right 400px no-repeat;
}

html {scroll-padding-top: 110px;}

/* Grid Templates */
div[class*="grid"] {hyphens: auto; -webkit-hyphens: auto; display: grid; grid-gap: 30px;}
div[class*="grid"].vertical-align-middle > div {margin: auto 0;}
div[class*="grid"] img {max-width: 100%; height: auto !important;}
.grid-2x {grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));}
.grid-3x {grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));}
.grid-4x {grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));}
/* Einde Grid Templates */

a img   {border: 0;}
p       {margin:0 0 1.5em 0;}

/* Links */
a, a:link, a:visited, a.visited, a:hover, a.hover {font-family: inherit; text-decoration: underline; color: #012C78; transition: all .3s ease;}
a:link                   {text-decoration: underline; color: #012C78;}
a:visited, a.visited     {text-decoration: underline; color: #012C78;}
a:hover, a.hover         {text-decoration: none; color: #012C78;}


/* Verschillende styles resetten */
h1, .h1, h2, .h2, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {font-weight: bold; font-style: normal; text-decoration: none; margin: 0 0 0.5em 0; line-height: 1em; font-family: 'Puritan', sans-serif;}

/* Start Content headings Fonts & Colors  */
h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {
  color: #122f71;
  font-size: 30px;}

h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {
  color: #012C78;
  font-size: 25px;}

h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {
  color: #222;
  font-size: 17px;
}

h4, .h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover {
  color: #5e5e5e;
  font-size: 17px;
}

h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {
  color: #999;
  font-size: 16px;
}

h6, .h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover {
    color: #333333;
    font-size: 16px;
}

/* Koppen margins */
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6,
ul + h2, ul + h3, ul + h4, ul + h5, ul + h6,
ol + h2, ol + h3, ol + h4, ol + h5, ol + h6 {margin-top:1.5em;}
h1 + h5 {margin-top:-0.75em; margin-bottom:1em;}
h2 + h5 {margin-top:-0.75em; margin-bottom:1em;}

h1 b, h2 b, h3 b {color:#68a699}

/* begin PostBullets */
ol, ul              {color: inherit; font-family: inherit; font-size: inherit; line-height: inherit;}
li ol, li ul        {margin:0.5em 0 0.5em 2em; padding:0;}
li                  {padding:0;}
ul                  {list-style-position:outside;}
ol                  {list-style-position:outside;}


.bovenkantHouder {box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); border-top: 3px solid #ce003d; background-color: #FFF; position: relative; width: 100%; z-index: 4;}
.bovenkantHouder .bovenkant {max-width: 1200px; margin: 0 auto; display: flex; align-items: center; padding: 10px 30px; box-sizing: border-box; min-height: 100px;}

a.logo {margin: auto 0; outline: 0; display: block; line-height: 0; position: absolute; left: 50%; transform: translate(-50%, -50%); top: 50%; }
a.logo img {width: 200px; height: auto;} 

.vak.zwart {background-color: #333;}
.vak.grijs  {background-color:#f5f5f5;}

.vak .inhoud {max-width: 1200px; margin: 0 auto; padding:50px 20px; box-sizing: border-box;}

.vak.header .inhoud {padding-bottom: 0; padding-top: 0; line-height: 0;}

p:last-of-type {margin-bottom:0;}

a.knop          {background-color: #68a699; padding:15px 20px; border-radius:3px; color:#fff; font-family: "Bebas Neue"; text-decoration: none; font-size:20px; letter-spacing: 0.1em;}
a.knop:hover    {background-color: #000;}

img.foto {width: 100% !important; height: auto !important;}

.grid-2x {grid-template-columns: 1fr 1fr; gap: 50px;}
.grid-2x.center {text-align: center;}

.inhoud.max900 {max-width: 900px; margin-left: auto; margin-right: auto;}
.inhoud.max700 {max-width: 700px; margin-left: auto; margin-right: auto;}

.footerHolder {background: url(images/footerbg.png) repeat-x scroll 0 0 #012462;}
.footerHolder .footer {max-width: 1200px; margin: 0 auto; padding: 50px 30px; box-sizing: border-box; color: #FFF; text-align: center;}
.footerHolder .footer a {text-decoration: none; color: #FFF;}
.footerHolder .footer a:hover {opacity: .6;}
.footerHolder .footer .h2 {color: #FFF; font-size: 20px;}

@media screen and (max-width: 900px) {

  .bovenkantHouder .bovenkant {min-height: 70px;}

  a.logo img {width: 150px;}

  .vak .inhoud {padding: 20px;}

  .grid-2x {grid-template-columns: 1fr;}
  
  .footerHolder .footer {padding: 30px 20px;}

}