:root {
    --neutral-color: #eee1e9;
    --neutral-color-dark: rgb(58, 57, 56);
    --primary-color: rgb(137, 74, 196);
    --primary-color-light: hsl(251, 87%, 88%);

    /* --hue: 190;
    --neutral-color: hsl(var(--hue), 11%, 81%);
    --neutral-color-dark: hsl(var(--hue), 12%, 51%);
    --primary-color: hsl(var(--hue), 35%, 49%);
    --primary-color-light: hsl(var(--hue), 87%, 88%); */
}

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html {
    line-height:1.15;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    
  }
  body {
    display: flex;
    flex-direction: column;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    margin:0;
    min-height: 100vh;
  }

  h1 {
    font-size:2em;
    margin:0.67em 0
  }

  figure {
    margin:1em 40px
  }
  hr {
    box-sizing:content-box;
    height:0;
    overflow:visible
  }
  pre {
    font-family:monospace, monospace;
    font-size:1em
  }
  a {
    background-color:transparent;
    -webkit-text-decoration-skip:objects
  }
  abbr[title] {
    border-bottom:none;
    text-decoration:underline;
    text-decoration:underline dotted
  }
  b,
  strong {
    font-weight:inherit
  }
  b,
  strong {
    font-weight:bolder
  }
  code,
  kbd,
  samp {
    font-family:monospace, monospace;
    font-size:1em
  }
  dfn {
    font-style:italic
  }
  mark {
    background-color:#ff0;
    color:#000
  }
  small {
    font-size:80%
  }
  sub,
  sup {
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
  }
  sub {
    bottom:-0.25em
  }
  sup {
    top:-0.5em
  }
  audio,
  video {
    display:inline-block
  }
  audio:not([controls]) {
    display:none;
    height:0
  }
  img {
    border-style:none
  }
  svg:not(:root) {
    overflow:hidden
  }
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family:sans-serif;
    font-size:100%;
    line-height:1.15;
    margin:0
  }
  button,
  input {
    overflow:visible
  }
  button,
  select {
    text-transform:none
  }
  button,
  html [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance:button
  }
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner,
  button::-moz-focus-inner {
    border-style:none;
    padding:0
  }
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring,
  button:-moz-focusring {
    outline:1px dotted ButtonText
  }
  fieldset {
    padding:0.35em 0.75em 0.625em
  }
  legend {
    box-sizing:border-box;
    color:inherit;
    display:table;
    max-width:100%;
    padding:0;
    white-space:normal
  }
  progress {
    display:inline-block;
    vertical-align:baseline
  }
  textarea {
    overflow:auto
  }
  [type="checkbox"],
  [type="radio"] {
    box-sizing:border-box;
    padding:0
  }
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height:auto
  }
  [type="search"] {
    -webkit-appearance:textfield;
    outline-offset:-2px
  }
  [type="search"]::-webkit-search-cancel-button,
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance:none
  }
  ::-webkit-file-upload-button {
    -webkit-appearance:button;
    font:inherit
  }
  details,
  menu {
    display:block
  }
  summary {
    display:list-item
  }
  canvas {
    display:inline-block
  }
  template {
    display:none
  }
  [hidden] {
    display:none
  }
  header {
    text-align: center;
    width:100%;
    padding-top: 5em;
    padding-bottom: 3em;
    background-color:var(--primary-color)
  }

  header img {
    height: 10em;
  }
  
  
  .banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 900px;
  }

  .banner-txt {
    color:var(--primary-color);
    font-weight:400 !important;
    font-size:2em;
    line-height:1.4em;
    letter-spacing:0.025em;
    margin-left:2em;
    
    margin: 2em 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  @media screen and (max-width: 1080px) {
    .banner {
      display: block;
      width: 100%;
    }
  }
  
  .devices {
    background-image: url(devices.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    height: 400px;
  }


.slideshow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 3em;
  flex-grow: 1;
}


  .ruler-top {
    height:2px;
    background:var(--primary-color-light);
    max-width:60%;
    margin:0 auto 25px;
    width:80%;
    max-width:600px
  }
  .ruler-bottom {
    height:2px;
    background:var(--primary-color-light);
    max-width:60%;
    margin:20px auto 0;
    width:80%;
    max-width:600px
  }

  main {
    flex-grow: 1;
  }

  .blauwe-txt-kader {
    width:100%;

    display:table;
    padding-bottom:50px;
    background-color: var(--primary-color);

  }
  .blauwe-txt-kader .col-3 {
    width:60%;
    column-count:3;
    column-gap:50px;
    column-rule:1px solid lightblue;
    column-width:100px;
    margin-left:auto;
    margin-right:auto;
    display:block
  }
  .blauwe-txt-kader .col-4 {
    max-width:970px;
    width:80%;
    margin-left:auto;
    margin-right:auto;
    padding-top:40px
  }
  @media screen and (max-width: 1200px) {
    .blauwe-txt-kader .col-4 {
      width:80%
    }
  }
  .blauwe-txt-kader .col-4 .col-2 {
    float:left;
    display:inline-block;
    width:50%
  }
  @media screen and (max-width: 1092px) {
    .blauwe-txt-kader .col-4 .col-2 {
      width:100%
    }
  }
  @media screen and (max-width: 700px) {
    .blauwe-txt-kader .col-4 .col-2 {
      width:100%;
      float:inherit;
      display:80%
    }
  }
  .blauwe-txt-kader .col-4 .col-2 div {
    min-width:175px;
    width:40%;
    float:left;
    margin:0 20px;
    display:inline-block
  }
  @media screen and (max-width: 1092px) {
    .blauwe-txt-kader .col-4 .col-2 div {
      width:42%
    }
  }
  @media screen and (max-width: 700px) {
    .blauwe-txt-kader .col-4 .col-2 div {
      width:100%;
      display:inline-block;
      margin:0
    }
  }
  .blauwe-txt-kader .col-4 .col-2 div p {
    color:white
  }
  p {
    
    font-size:1rem;
    line-height:1.5rem;
    letter-spacing:0.03rem;
    color:var(--neutral-color-dark)
  }
  .call {
    width:80%;
    margin:75px auto 0;
    text-align:center
  }
  a {
    color:var(--primary-color);
    text-decoration:none;
    font-weight:600
  }
  .flowchart {
    margin:auto;
    width:80%;
    max-width:700px;
    padding:80px;
  }
  .flowchart img {
    display:block;
    width:100%;
    margin:auto
  }
  footer {
    background-color:var(--neutral-color-dark);
    padding: 1.5em;
    margin: 0;
    height: 100%;
    display:flex;
    flex-direction:column;
    justify-content:center
  }
  footer p {
    color:white;
    text-align:center
  }
  .white {
    color:#fff !important
  }
  .loc {
    display:inline-block;
    height:16px;
    width:16px;
    margin:0 4px 0 0;
    background-size:cover;
    background-image:url("../img/gps.svg")
  }
  .mail {
    display:inline-block;
    height:16px;
    width:20px;
    margin:0 4px 0 0;
    background-size:cover;
    background-image:url("../img/mail.svg")
  }
  .phone {
    display:inline-block;
    height:16px;
    width:19px;
    margin:0 4px 0 0;
    background-size:cover;
    background-image:url("../img/phone.svg")
  }
 
  
  footer h4 {
    text-align:center;
    color:white
  }
  footer .adres p {
    font-style:normal !important;
    font-weight:normal !important;
    font-size:0.9rem;
    margin:0;
    padding:0
  }
  footer .adres p a {
    font-style:normal !important;
    font-weight:normal !important
  }
  footer .adres .copy {
    font-size:0.8rem
  }