@media print {

  /* Hide stuff you don't want visible on the printed page */

  .nav--container,
  .header--image figure,
  .nieuwsbrief--side,
  .nieuws--side,
  footer .socials-block,
  .button,
  .button--large,
  aside nav {
    display: none;
  }

  .header--image span {
    grid-column: 1 / -1;
    padding: 0;
    margin: 0;
  }

  details[open] {
    display: block;
    border: 1px solid black;
    padding: 1rem;
  }

  article,
  .block--header,
  .block--header h2 {
    grid-column: 1 / -1;
  }

  .header--image .container {
    grid-column: 1 / -1;
  }

  .header--image .container>div {
    max-width: 30%;
  }

  /* Hiding video's and removing ugly whitespace from hidden iframes */

  iframe,
  ins {
    display: none;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    line-height: 0pt !important;
    white-space: nowrap;
  }

  .embed-youtube,
  .embed-responsive {
    position: absolute;
    height: 0;
    overflow: hidden;
  }

  /* Setting a page default for background and text */

  * {
    float: none;
  }

  *,
  *:before,
  *:after,
  *:first-letter,
  p:first-line,
  div:first-line,
  blockquote:first-line,
  li:first-line {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  body,
  article,
  section {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  @page {
    margin: 2cm;
  }

  /* Prevent headers at the end of a page */

  h1,
  h2,
  h3 {
    page-break-after: avoid;
    page-break-inside: avoid
  }

  /* article will start on a fresh page */

  article {
    page-break-before: always;
  }

  /* Images */

  img {
    max-width: 100% !important;
  }

  a img {
    border: none;
  }

  /* Don't show linked images  */

  a[href$=".jpg"]:after,
  a[href$=".jpeg"]:after,
  a[href$=".gif"]:after,
  a[href$=".png"]:after {
    content: " ("attr(href) ") ";
    display: none;
  }
    /* Preventing single lines on end of the page (Currently misses suport in Firefox) */

    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }

    /* prevent large element to be split on multiple page */

    ul,
    ol,
    dl {
      page-break-inside: avoid;
      page-break-before: avoid;
    }

    img {
      page-break-inside: avoid;
      page-break-after: avoid;
    }

    a,
    pre {
      page-break-inside: avoid
    }

    /* Table */

    table {
      margin: 1px;
      text-align: left;
    }

    th {
      border-bottom: 1px solid #333;
      font-weight: bold;
    }

    td {
      border-bottom: 1px solid #333;
    }

    th,
    td {
      padding: 4px 10px 4px 0;
    }

    tfoot {
      font-style: italic;
    }

    caption {
      background: #fff;
      margin-bottom: 2em;
      text-align: left;
    }

    thead {
      display: table-header-group;
    }

    img,
    tr {
      page-break-inside: avoid;
    }

    /* Printing external links and supressing relative local links */

    article a {
      font-weight: bolder;
      text-decoration: none;
    }

    article a[href^=http]:after {
      content: " <"attr(href) "> ";
    }

    /* CSS4 easier way of preventing local links from expanding.. FOR THE FUTURES! */

    a:not(:local-link):after {
      content: " < "attr(href) "> ";
    }

    /* Don't show links that are fragment identifiers (anchor), or use the `javascript:` pseudo protocol */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
      content: "";
    }

    /* Links around images are rather more difficult, because CSS does not currently allow for the selection of an element based on its children.
     Ideally, links around images would have a class that we could target via CSS.
     Longer term, CSS4 features a parent selector that will do the job:
  */

    a:after>img {
      content: "";
    }

    /* Printing abbreviations */

    abbr[title]:after {
      content: " ("attr(title) ")";
    }


    /* CSS filters (and svg for firefox) to invert the header images.

     CSS3 filters do what you’d expect — invert the colors in header images, turning black to white and vice versa — but they only work in Chrome and Safari.
     To cover Firefox, we need a different approach — the equivalent filter written as a separate SVG file:

      <svg xmlns="http://www.w3.org/2000/svg">
          <filter id="negative">
              <feColorMatrix values="-1 0 0 0 1
              0 -1 0 0 1
              0 0 -1 0 1
              0 0 0 1 0" />
          </filter>
      </svg>

  */

    header img {
      filter: url(inverse.svg#negative);
      -webkit-filter: invert(100%);
      filter: invert(100%);
    }



    /* ONLY USE WHEN NEEDED */

    /* Print custom messages after the printed page, like copyright stuff */

    /* Adding custom messages before and after the content */

    /*
      .entry:after {
          content: "\ All Rights Reserved. (c) 2014 - 2016 TechBrain - techbrain.de";
          color: #999 !important;
          font-size: 1em;
          padding-top: 30px;
      }

      #header:before {
          content: "\ Thank you for printing our article. We hope that some of our other articles can catch your eye as well.";
          color: #777 !important;
          font-size: 1em;
          padding-top: 30px;
          text-align: center !important;
      }
  */

  }

  /* Force webkit browsers to print background-images and colors */

  @media print and (color) {
    * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }