@charset "UTF-8";

/* Document */

@font-face {
  font-family: Montserrat;
  src: url('montserrat-v23-latin-regular.woff2');
}

html, body, div, .hoofdmenu ul, .hoofdmenu li {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

html, body { overflow-x: hidden; }
body { position: relative; }

html { scroll-behavior: smooth; }

body {
  --kophoogte: 72px;
  --voethoogte: 320px;
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 400;
  padding-top: var(--kophoogte);
}

header {
  position: fixed;
  z-index: 255;
  top: 0;
  left: -2em;
  right: -2em;
  background-color: white;
  box-shadow: 0 8px 8px rgba(0,0,0,.15);
}

/* Breedte */

@media (max-width: 768px) {
  .beperk {
    max-width: 100%;
    margin-left: 2em;
    margin-right: 2em;
  }
}
@media (min-width: 768px) and (max-width: 1050px) {
  .beperk {
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1050px) {
  .beperk {
    max-width: min(1140px, 85%);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Header */

.kop {
  height: var(--kophoogte);
  line-height: var(--kophoogte);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  font-size: 20px;
}

/* Header logo */

.kop .signature {
  padding-top: 12px;
  line-height: 24px;
  display: flex;
  --grootte: 32px;
  font-size: 16px;
  text-decoration: none;
}
.kop .signature .icon {
  display: inline-block;
  position: relative;
  padding: 0;
  margin: 0 2.5em 0 0;
  width: var(--grootte);
  height: var(--grootte);
  border-radius: 50%;
  border: 5.5px solid grey;
  border-right-color: transparent;
  box-sizing: border-box;
}
.kop .signature .icon:after {
  content: "";
  position: absolute;
  display: block;
  width: calc(var(--grootte) / 3);
  height: calc(var(--grootte) / 3);
  border: 5.5px solid green;
  border-top: 0;
  border-left: 0;
  transform:
    translate(calc(var(--grootte) * .667), calc(var(--grootte) * .076))
    rotateZ(-45deg);
}

.kop .signature .foruit {
  height: 32px;
  display: flex;
  flex-direction: column;
}
.kop .signature .slogan {
  color: grey;
  font-size: 13.7px;
  overflow: hidden;
  white-space: nowrap;
}

/* Header menu */

#menu-schakelaar { display: none; }
#menu-aan,
#menu-uit {
  float: right;
  cursor: pointer;
  display: none;
}

.hoofdmenu .link { transition: color 600ms ease; }
.hoofdmenu .link:hover { transition: color 200ms ease; }

@media (min-width: 1050px) {
  .hoofdmenu .menu { display: inline-block; }
  .hoofdmenu .item { float: left; }
  .hoofdmenu .item .link {
    font-size: 18px;
    display: block;
    padding: 0 1em;
    color: #212121;
    text-decoration: none;
  }
  .hoofdmenu .item .link:hover { color: green; }
}
@media (max-width: 1050px) {
  label #menu-aan,
  label #menu-uit {
    font-size: 0;
    height: var(--kophoogte);
    width: var(--kophoogte);
    padding: 0 24px;
    position: relative;
  }
  label #menu-aan:before,
  label #menu-uit:before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 32px;
    font-style: normal;
  }
  label #menu-aan:before { content: "☰"; }
  label #menu-uit:before { content: "✕"; }
  label #menu-aan:hover,
  label #menu-uit:hover { color: green; }
  label #menu-aan { display: block; }
  #menu-schakelaar:checked ~ label #menu-aan { display: none; }
  #menu-schakelaar:checked ~ label #menu-uit { display: block; }
  #menu-schakelaar:checked ~ .menu { 
    transform: translateX(0);
    opacity: 1; 
  }
  .hoofdmenu .menu {
    position: fixed;
    top: var(--kophoogte);
    left: 0;
    right: 0;
    height: calc(100vh - var(--kophoogte));
    height: calc(100dvh - var(--kophoogte));
    background-color: white;
    transform: translateX(-100%);
    text-indent: 2em;
    line-height: var(--kophoogte);
    opacity: 0;
    z-index: 128;
    background-color: rgba(0,0,0,.5);
    overflow: auto;
  }
  .hoofdmenu .item {
    height: 48px;
    line-height: 48px;
    background-color: white;
    box-shadow: inset 0 1px 0 gainsboro;
  }
  .hoofdmenu .item:last-child {
    box-shadow: inset 0 1px 0 gainsboro, 0 8px 8px rgba(0,0,0,.15);
  }
  .hoofdmenu .item .link {
    display: block;
    text-decoration: none;
    color: #212121;
  }
  .hoofdmenu .link:hover { color: green; }
}

/* Pagina */

.pagina {
  min-height: calc(100vh - var(--voethoogte));
}

.artikel {
  padding: 2em 0 4em 0;
  line-height: 1.6em;
  min-height: 10em;
  color: #424242;
}

.artikel .navigeer {
  margin-top: 2em;
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: space-around;
}
.artikel .navigeer .link {
  position: relative;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: #212121;
  transition: all 600ms ease;
}
.artikel .navigeer .link:after {
  content: "";
  position: absolute;
  display: block;
  height: 6px;
  width: 6px;
  right: -12px;
  top: 8.5px;
  border-top: 3px solid green;
  border-right: 3px solid green;
  transform: rotateZ(45deg);
  transition: all 600ms ease;
}
.artikel .navigeer .link:hover {
  color:green;
  transition: all 200ms ease;
}
.artikel .navigeer .link:hover:after {
  transition: all 200ms ease;
  right: -20px;
}

.sfeer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 1em;
  padding: 3em;
  background-color: #5b7fae;
  background-image: url('sfeer.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: rgba(255,255,255,.9);
  text-shadow: 0 0 3px rgba(255,255,255,.3), 2px 4px 16px rgba(0,0,0,.5);
}
.sfeer .tekst {
  text-align:right;
  line-height:120%;
  font-weight:100;
}

@media (min-width: 768px) {
  .sfeer .tekst { font-size: 42px; }
  .sfeer .plaatje { width: 400px; }
}
@media (max-width: 768px) {
  .sfeer .tekst { font-size: 32px; }
  .sfeer .plaatje { width: 320px; }
}

.tekstblok.dienstverlening {
  background-image:
    radial-gradient(ellipse at top left, hsl(163, 40%, 90%) 0%, hsl(163, 40%, 100%) 100%);
}

.tekstblok.visie {
  background-image:
    radial-gradient(ellipse at top left, hsl(223, 40%, 90%) 0%, hsl(223, 40%, 95%) 100%);
}

.tekstblok.pvs {
  background-image:
    radial-gradient(ellipse at top right, #698dad 0%, white 90%);
}

.tekstblok.toepassingen {
  background-image:
    radial-gradient(ellipse at bottom left, lavender 0%, white 90%);
}

.tekstblok.beheer {
  background-image: 
    radial-gradient(ellipse at top right, beige 0%, white 90%);
}

.tekstblok.advies {
  background-image: 
    radial-gradient(ellipse at top left, lightblue 0%, white 90%);
}

.tekstblok.onderhoud {
  background-image: 
    radial-gradient(ellipse at bottom right, #d8e4bf 0%, white 100%);
}

.tekstblok.privacy {
  background-image: 
    radial-gradient(ellipse at top right, gainsboro 0%, white 100%);
}

.tekstblok.innovatie {
  background-image: 
    radial-gradient(ellipse at bottom center, palegoldenrod 0%, white 100%);
}


.rechts {
  float: right;
  margin-right: 0;
  margin-left: 1.5em;
  margin-bottom: 1em;
}
.links {
  float: left;
  margin-left: 0;
  margin-right: 1.5em;
  margin-bottom: 1em;
}
.quote {
  margin-top: .2em;
  position: relative;
  border: 2px solid lightgrey;
  border-radius: 8px;
  padding: 1em;
  text-align: center;
  color: #212121;
}
.quote:before, .quote:after {
  position: absolute;
  display: block;
  width: 36px;
  font-family: 'Noto Serif', serif;
  font-size: 48px;
  font-weight: bold;
  color: lightgrey;
  background-color: white;
}
.quote:before {
  content: '“';
  height: 24px;
  line-height: 36px;
  top: -2px;
  left: -12px;
}
.quote:after {
  content: '”';
  right: -10px;
  bottom: -3px;
  height: 24px;
  line-height: 48px;
}
.quote .tekst {
  font-family: 'Noto Serif', serif;
  font-style: italic;
  font-size: larger;
  margin: .2em .3em;
  color: green;
}
.quote footer cite { font-style: normal; }

.presentatie {
  background: linear-gradient(to bottom, #504f60 0%, rgb(66, 68, 77) 100%);
}
.presentatie .artikel {
  color: white;
  text-shadow: 2px 3px 7px rgba(0, 0, 0, 0.5);
}
.presentatie .navigeer .link {
  color: white;
}
.presentatie .navigeer .link:hover {
  color: lightgreen;
}
img.screenshot {
  max-width: 100%;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.continuiteit {
  height: 48px;
  width: 48px;
  margin: .5em 1.6em 1em 0;
  background-color: transparent;
  border-radius: 50%;
  border-top: 12px solid limegreen !important;
  border-right: 12px solid gold !important;
  border-bottom: 12px solid coral !important;
  border-left: 12px solid steelblue !important;
  transform: rotateZ(45deg);
  box-shadow: 4px 0 4px rgba(0,0,0,.25), inset 4px 0 4px rgba(0,0,0,.25);
}

.maatwerk {
  margin: 2.5em 0 2em 1.6em;
  height: 32px;
  width: 128px;
  background-color: goldenrod;
  background-image:
    linear-gradient(to right, black 0% , black 4%, transparent 4%, transparent 100%),
    linear-gradient(to right, black 0% , black 20%, transparent 20%, transparent 100%);
  background-size: 20px 16px, 4px 8px;
  background-repeat: repeat-x;
  transform: rotateZ(-45deg);
  transform-origin: 50%;
  box-shadow: 0 4px 4px rgba(0,0,0,.25);
}

.ballon {
  width: 167px;
  height: 208px;
  margin: 0 0 1em 1em;
}

.features {
  width: 320px;
  height: 157.5px;
  box-shadow: 2px 3px 5px rgba(0,0,0,.5);
}

.tegelijk {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 2em;
  align-items: center 
}

.rooster {
  width: 320px;
  height: 131.5px;
  box-shadow: 2px 3px 5px rgba(0,0,0,.5);
}

.vraagteken {
  position: relative;
  height: 96px;
  width: 96px;
  font-weight: bold;
  line-height: 96px;
  text-align: center;
  border-radius: 50%;
  color: black;
  background-color: white;
  border: 8px solid green;
  box-shadow: 2px 3px 5px rgba(0,0,0,.25);
}
.vraagteken:after {
  content: "?";
  font-size: 96px;
}

.apparatuur {
  width: 200px;
  height: 131px;
}

.eupl {
  height: 128px;
  width: 192px;
}

.oss {
  width: 121px;
  height: 117.5px;
}

.voet {
  height: var(--voethoogte);
  background-color: #393b42;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.voet .kolommen {
  display: flex;
  justify-content: space-evenly;
  gap: 1em;
  align-items: top;
}
.voet .kolom { 
  line-height: 1.6em;
}
.voet .kolom label {
  font-weight: bold;
  display: inline-block;
  margin-bottom: .5em;
}
.voet .tekst {
  text-align: center;
  color: grey;
}
.voet .link {
  display: inline-block;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid grey;
  height: 1.3em;
  transition: border-bottom 600ms ease;
}
.voet .link:hover {
  border-bottom: 1px solid white;
  transition: border-bottom 200ms ease;
}
.voet .link[target=_blank] { position: relative; }
.voet .link[target=_blank]:after { 
  content: "🡒";
  position: absolute;
  display: block;
  color: grey;
  border: 1px solid grey;
  border-right: 0;
  font-size: smaller;
  width: 8px;
  height: 8px;
  line-height: 8.5px;
  text-indent: 3px;
  top: 6px;
  right: -1em;
  transition: all 600ms ease;
}
.voet .link[target=_blank]:hover:after { 
  color: white;
  border: 1px solid white;
  border-right: 0;
  transition: all 200ms ease;
}