:root{
  --paper:#f5f3ee;   
  --ink:#1c1c1c;      
  --navy:#1c2b3a;     
  --red:#c62828;      
  --red-dark:#8f1d1d; 
  --muted:#6e6a62;    
  --font-display: 'Arvo', Georgia, 'Times New Roman', serif;
  --font-body: 'PT Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size:16px;
  line-height:1.6;
}
.wrapper{ min-height:100vh; display:flex; flex-direction:column; }
a{ color: var(--red); text-decoration:none; }
a:hover, a:focus{ color: var(--red-dark); text-decoration:underline; }
img{ display:block; }


.reveal-modal{ display:none; }


.headerWrapper{ background: var(--navy); }
header{
  max-width:1140px;
  margin:0 auto;
  padding:14px 20px 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 16px;
  position:relative;
}
.logo{
  font-family: var(--font-display);
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  padding-bottom:12px;
}
.logo a{ color:#fff; }
.logo a:hover{ color: var(--red); text-decoration:none; }

.nav-toggle{ display:none; }
.nav-toggle-label{ display:none; }

nav{ order:3; width:100%; }
header .headerLinks{ order:2; }

nav ul{
  list-style:none;
  margin:0;
  padding:0 0 6px;
  display:flex;
  flex-wrap:wrap;
}
nav ul .clearfloat{ display:none; }
nav li{ margin:0; list-style:none; }
nav a{
  display:block;
  padding:8px 12px;
  color:#f0ede5;
  font-family: var(--font-body);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
nav a:hover{ background: var(--red); color:#fff; text-decoration:none; }
nav span{
  display:block;
  padding:8px 12px;
  color:rgba(240,237,229,.35);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.headerLinks{
  width:100%;
  text-align:right;
  font-size:.72rem;
  color:rgba(240,237,229,.6);
  padding-bottom:10px;
}
.headerLinks span{ color:rgba(240,237,229,.8); }


.container{ max-width:1140px; margin:0 auto; padding:32px 20px 56px; flex:1; width:100%; }
.row3ColumnsVariable{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:28px;
}
.row3ColumnsVariable > .clearfloat{ display:none; }
.content{ flex:3 1 420px; min-width:0; }
aside.sidebar1, aside.sidebar2{ flex:1 1 230px; min-width:230px; }

article.panel, section.panel{
  background:#fff;
  border:1px solid #e3e0d4;
  border-radius:2px;
  padding:22px 24px;
  margin:0 0 22px;
}
.content > article.panel:last-child{ margin-bottom:0; }
.clearfloat{ clear:both; }

h1,h2,h3{ font-family: var(--font-display); color: var(--navy); }
h1{ font-size:1.9rem; line-height:1.2; margin:0 0 .5em; }
h2{ font-size:1.35rem; margin:0 0 .5em; }
h3{
  font-size:1rem;
  margin:0 0 .5em;
  color: var(--red);
  text-transform:uppercase;
  letter-spacing:.03em;
}
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.headerRubriek{
  font-family: var(--font-display);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--navy);
  border-bottom:2px solid var(--red);
  padding-bottom:7px;
  margin:0 0 14px;
}


.contentbox.transparant{
  background: var(--navy);
  color:#f5f3ee;
  padding:34px 30px;
  border-radius:3px;
  position:relative;
  overflow:hidden;
}
.contentbox.transparant h1{
  color:#fff;
  font-size:2.4rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0 0 .5em;
}
.contentbox.transparant h1 span{
  border-bottom:6px solid var(--red);
  padding-bottom:8px;
  display:inline-block;
}
.contentbox.transparant p{
  font-size:1.05rem;
  max-width:54ch;
  color:#e9e5db;
  position:relative;
  z-index:1;
}
.contentbox.transparant::after{
  content:"";
  position:absolute;
  top:-50px; right:-50px;
  width:170px; height:170px;
  background: repeating-linear-gradient(45deg, var(--red) 0 14px, transparent 14px 28px);
  opacity:.55;
  pointer-events:none;
}


.contentbox.image{
  height:14px;
  margin-top:18px;
  border-radius:2px;
  background: repeating-linear-gradient(115deg, var(--red) 0 11px, var(--navy) 11px 22px);
}
aside .contentbox.image{ margin-top:0; }


.contentboxContainerFretzHome{
  display:flex;
  align-items:flex-end;
  min-height:150px;
  background: var(--navy);
  color:#fff;
  border-radius:3px;
  padding:18px 20px;
  font-family: var(--font-display);
  font-size:1.2rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  position:relative;
  overflow:hidden;
}
.contentboxContainerFretzHome::after{
  content:"";
  position:absolute;
  top:-28px; right:-28px;
  width:100px; height:100px;
  background: repeating-linear-gradient(45deg, var(--red) 0 10px, transparent 10px 20px);
  opacity:.5;
}
aside.sidebar1 > a{ display:block; }
aside.sidebar1 > a:hover{ text-decoration:none; }
aside.sidebar1 > a:hover > .contentboxContainerFretzHome{ background: var(--red); }


.imageleft{ float:left; margin:0 18px 10px 0; max-width:160px; height:auto; }
article.panel img{ max-width:100%; height:auto; }


.footerWrapper{ background: var(--navy); margin-top:auto; }
footer#footer{ display:block; min-height:0; padding:0; }
footer#footer:not(:empty){ padding:18px 20px; color:rgba(240,237,229,.6); font-size:.8rem; text-align:center; }


@media (max-width:768px){
  header{ padding:14px 64px 0 20px; }
  .logo{ padding-bottom:10px; }

  .nav-toggle-label{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:40px;
    height:40px;
    position:absolute;
    top:12px;
    right:16px;
    cursor:pointer;
  }
  .nav-toggle-label .bar{ display:block; width:100%; height:3px; background:#fff; border-radius:2px; }

  nav ul{
    flex-direction:column;
    flex-wrap:nowrap;
    padding-bottom:0;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }
  .nav-toggle:checked ~ nav ul{ max-height:600px; padding-bottom:4px; }
  nav a, nav span{ padding:12px 4px; border-top:1px solid rgba(240,237,229,.12); }
  nav li:first-child > a{ border-top:none; }
  .headerLinks{ text-align:left; }

  .row3ColumnsVariable{ flex-direction:column; gap:22px; }
  .content, aside.sidebar1, aside.sidebar2{ flex:auto; width:100%; min-width:0; }

  .contentbox.transparant h1{ font-size:1.8rem; }
  .contentbox.transparant{ padding:26px 20px; }

  article.panel, section.panel{ padding:18px; }
}