/* Stijl van de website: eigen opmaak (zie LEESMIJ.md). Kleuren en lettertypen
   als variabelen; breekpunten zoals de site ze altijd had: 1366, 1200, 1024 en 767 px. */
@font-face{font-family:byker;src:url(/fonts/byker-regular.woff2) format("woff2");font-weight:100 599;font-style:normal;font-display:swap}
@font-face{font-family:byker;src:url(/fonts/byker-bold.woff2) format("woff2");font-weight:600 799;font-style:normal;font-display:swap}
@font-face{font-family:byker;src:url(/fonts/byker-black.woff2) format("woff2");font-weight:800 900;font-style:normal;font-display:swap}
/* Deze Byker-bestanden zetten sierverbindingen (ct, sp, st, ch, Th ...) standaard aan; bij Adobe stonden die uit. */
html{font-variant-ligatures:no-common-ligatures}
:root{--groen:#a5c35c;--donker:#20211c;--wit:#fff;--grijs:#69727d}
.schermlezer{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* breedte van de inhoud, 1280 / 1140 / 960 / 720 / 340 px */
.binnen{max-width:1280px;margin-left:auto;margin-right:auto}
@media (max-width:1366px){.binnen{max-width:1140px}}
@media (max-width:1200px){.binnen{max-width:960px}}
@media (max-width:1024px){.binnen{max-width:720px}}
@media (max-width:767px){.binnen{max-width:340px}}

/* ---------------------------------------------------------------------------------------------------- voet */
.voet{font-family:Asap,sans-serif}
.voet ul{list-style:none;margin:0;padding:0}
.voet-boven{position:relative;background:var(--donker);padding:100px 0 0}
.voet-vorm{position:absolute;top:-1px;left:0;width:100%;overflow:hidden;line-height:0}
.voet-vorm svg{position:relative;display:block;left:50%;width:calc(100% + 1.3px);height:120px;transform:translateX(-50%)}
.voet-vorm path{fill:var(--wit)}
.voet-binnen{display:flex}
.voet-merk{width:30%;padding:10px;text-align:center}
.voet-merk img{display:inline-block;width:275px;height:auto;margin-bottom:20px;vertical-align:middle}
.voet-merk h3{margin:0;font:800 2rem/1.3 byker,sans-serif;text-transform:uppercase;color:var(--wit)}
.voet-merk .x7-support{margin-top:25px}
.voet-kolommen{display:flex;flex-wrap:wrap;align-content:flex-start;width:70%;padding:50px 10px 10px}
.voet-kolommen>.voet-kolom{width:25%;padding:10px}
.voet-kolommen>.voet-kolom:nth-child(3){width:27.828%}
.voet-kolommen>.voet-kolom:nth-child(4){width:22.14%}
/* het kopje staat op de basislijn van een regel van 16/24 px, ook als de letters kleiner zijn (zoals in de oude voet) */
.voet-kop{display:block;margin-bottom:10px;font:400 16px/24px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}
.voet-kop>span{font:700 1rem/1 Asap,sans-serif;text-transform:uppercase;color:var(--groen)}
.voet-lijst{margin-bottom:30px!important}
.voet-lijst:last-child{margin-bottom:0!important}
.voet-lijst li,.voet-lijst a{display:flex;align-items:center}
.voet-lijst span{font:500 .9rem/24px Asap,sans-serif;color:var(--wit);transition:color .3s}
.voet-lijst a:hover span{color:var(--groen)}
.voet-lijst svg{flex-shrink:0;width:14px;height:14px;fill:var(--wit)}
.voet-lijst svg+span{padding-left:5px}
.voet-contact svg{width:16px;height:16px;margin-right:4px;fill:var(--groen)}
.voet-contact li:not(:last-child){padding-bottom:2.5px}
.voet-contact li:not(:first-child){margin-top:2.5px}
.voet-bol svg{width:6px;height:6px;margin-right:1.5px}
.voet-keurmerk{text-align:center}
.voet-keurmerk img{display:inline-block;width:170px;height:auto;vertical-align:middle}
/* past het niet op een regel, dan loopt de laatste knop door naar de volgende (zoals in de oude voet) */
.voet-sociaal{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 20px;width:95.976%;margin-top:10px}
.voet-sociaal a{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--groen);transition:background .3s}
.voet-sociaal svg{width:20px;height:20px;fill:var(--wit);transition:fill .3s}
.voet-sociaal a:hover{background:var(--wit)}
.voet-sociaal a:hover svg{fill:var(--groen)}
.voet-onder{padding-bottom:10px;background:var(--donker) url(/uploads/footer-visual.svg) no-repeat 0 0/cover}
.voet-onder>.binnen{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;align-content:flex-end;min-height:130px;padding:10px}
.voet-copyright{font:400 .9rem/1 Asap,sans-serif;color:var(--donker)}
.voet-copyright a{color:inherit}
/* zoals de oude voet: 40 px marge rechts, de lijst steekt 8 px buiten zijn vak */
.voet-links{display:flex;margin:0 32px 0 -8px!important}
.voet-links li{display:flex;margin:0 8px}
.voet-links a{font:400 .9rem/24px Asap,sans-serif;color:var(--donker);transition:color .1s}
.voet-links a:hover{color:var(--groen)}
@media (max-width:1366px){
  .voet-boven{padding-top:60px}
  .voet-vorm svg{height:80px}
  .voet-merk{width:25%}
  .voet-merk img{width:70%}
  .voet-merk h3{font-size:1.5rem}
  .voet-sociaal{gap:0 15px}
}
@media (max-width:1200px){
  .voet-vorm svg{height:60px}
  .voet-merk{width:20%}
  .voet-kolommen{width:80%}
  .voet-merk h3{margin-bottom:10px;font-size:1rem}
  .voet-merk .x7-support{margin-top:35px}
  .voet-kop>span{font-size:.9rem}
  .voet-sociaal a{width:36px;height:36px}
  .voet-sociaal svg{width:18px;height:18px}
}
@media (max-width:1024px){
  .voet-merk{width:30%}
  .voet-kolommen{width:70%}
  .voet-kolommen>.voet-kolom,.voet-kolommen>.voet-kolom:nth-child(n){width:50%}
  .voet-merk h3{font-size:min(1.5rem,2.6vw)}
}
@media (max-width:767px){
  .voet-binnen{flex-direction:column}
  .voet-merk,.voet-kolommen,.voet-kolommen>.voet-kolom,.voet-kolommen>.voet-kolom:nth-child(n){width:100%}
  .voet-merk img{width:min(275px,78vw);margin-bottom:20px}
  .voet-merk h3{font-size:min(2rem,8.9vw)}
  .voet-kolommen{padding-top:10px}
  .voet-sociaal{margin-top:30px}
  .voet-onder{padding:12px 0 10px;background:var(--wit)}
  .voet-onder>.binnen{display:block;min-height:0;padding:0 10px;text-align:center}
  .voet-copyright{font-size:.8rem;line-height:1.5}
  .voet-links{margin:0 0 0 -8px!important}
  .voet-links a{font-size:.8rem}
}

/* ---------------------------------------------------------------------------------------------------- knoppen */
.knoppen{display:flex;flex-wrap:wrap;align-items:center}
.knop{display:inline-block;margin:0 15px;padding:12px 36px;border:1px solid var(--groen);background:var(--groen);
  color:var(--wit);font:700 1rem/1 Asap,sans-serif;text-transform:uppercase;text-align:center;transform:skew(-35deg);transition:all .3s}
.knop>span{display:inline-block;transform:skew(35deg)}
.knop:hover,.knop:focus{background:var(--wit);color:var(--groen)}
.knop-rand{background:transparent;color:var(--groen)}
.knop-rand:hover,.knop-rand:focus{background:var(--groen);color:var(--wit)}
.knoppen-midden{justify-content:center}
@media (max-width:1366px){.knop{padding:8px 24px}.knop-rand{margin-top:10px}}
@media (max-width:767px){.knop{margin:0 15px 15px}.knop-rand{margin:0 15px}}

/* ---------------------------------------------------------------------------------------------------- inloopanimatie (site.js) */
[data-animatie]:not(.animated){visibility:hidden}
.animated.fadeInUp{animation:fadeInUp 2s both}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------------------------------------------- kopbeeld en broodkruimel */
.kopbeeld{position:relative;display:flex;align-items:flex-end;min-height:240px;
  background:url(/uploads/24x7-achtergrond-pagetitle-4.jpg) no-repeat bottom center/cover}
.kopbeeld::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--groen) 70%,#00000024 100%);opacity:.8;mix-blend-mode:multiply}
.kopbeeld-vorm{position:absolute;bottom:-1px;left:0;width:100%;overflow:hidden;line-height:0;transform:rotate(180deg)}
.kopbeeld-vorm svg{position:relative;left:50%;display:block;width:calc(100% + 1.3px);height:78px;transform:translateX(-50%) rotateY(180deg)}
.kopbeeld-vorm path{fill:var(--wit)}
.kopbeeld>.binnen{position:relative;width:100%;padding:10px}
.kopbeeld h1{margin:0 0 50px;font:800 2.6rem/1.4 byker,sans-serif;text-transform:uppercase;color:var(--wit)}
.kruimel{padding:10px;font-family:byker,sans-serif;line-height:24px}
@media (max-width:1366px){.kopbeeld{min-height:220px}.kopbeeld h1{font-size:2.4rem}}
@media (max-width:1200px){.kopbeeld{min-height:200px}.kopbeeld h1{font-size:2rem}}
@media (max-width:1024px){.kopbeeld{min-height:180px}.kopbeeld h1{font-size:1.8rem}}
@media (max-width:767px){.kopbeeld{min-height:100px}.kopbeeld h1{font-size:1.3rem}}

/* ---------------------------------------------------------------------------------------------------- landingspagina */
.lp-twee{display:flex;align-items:center}
.lp-twee>*{width:50%;padding:10px}
.lp-boven{align-items:flex-start}
.lp-beeld{display:flex}
.lp-tekst{display:flow-root}
.lp-beeld-rechts{justify-content:flex-end}
.lp-beeld img{max-width:100%;height:auto}
/* h2 in hetzelfde tekstblok (intro, stappen): eigen marge; in het waarom-blok was de kop een los blok (+10 px) */
.lp-tekst>h2{margin:0 0 .7em}
/* leeg kopje direct na de blokkop: marges tellen op, zoals vroeger in een apart tekstblok */
/* 10 px onder het laatste tekstblok (alinea 10 px, lijst 24 px): opgeteld, zoals bij de losse blokken van vroeger */
.lp-tekst>.knoppen{margin-top:0;padding-top:10px}
/* ondertitel: inline tekst op een regel van 16/24 px in de systeemletter, zoals in de oude band */
/* belang: afbeelding rechts in de linkerkolom, tekst bovenaan (zoals de oude pagina's) */
/* stappen: kop en tekst 10 px naar binnen; tekstvakken 93,316% van de kolom met 10 px boven en 20 px onder */
/* onderaan 20 px, of de eigen marge als die groter is (een lijst: 24 px); de marges vielen vroeger samen */
@media (max-width:767px){
  .lp-twee{flex-direction:column}.lp-twee>*,.lp-twee>*:nth-child(n){width:100%}
}

/* ---------------------------------------------------------------------------------------------------- eigen pagina's */
/* .pg: de inhoud van een pagina in eigen opmaak (één blok in de flexcontainer van het thema) */
.pg{width:100%;font-family:Asap,sans-serif}
.titel{margin:0;font:800 2.8rem/1.3em byker,sans-serif;text-transform:uppercase;color:var(--groen)}
/* tweede knop direct naast (of onder) de eerste, zonder de extra ruimte van de landingspagina's */
.pg .knop-rand{margin-top:0}
/* kopbeeld van de gewone pagina's: regelhoogte in em (zoals vroeger; een getal rondt 1/64 px anders af) */
.pg .kopbeeld h1{line-height:1.4em}
/* lijst met groene pijltjes (de lijsten in Markdown binnen .pijlen) */
.pijlen ul{margin:0;padding:0;list-style:none}
.pijlen li{display:flex;align-items:center}
.pijlen li:not(:last-child){padding-bottom:2.5px}
.pijlen li+li{margin-top:2.5px}
.pijlen li::before{content:"";flex:none;width:16px;height:16px;margin-right:9px;background:var(--groen);
  -webkit-mask:url(/img/pijl.svg) center/contain no-repeat;mask:url(/img/pijl.svg) center/contain no-repeat}
/* kaders met een groene rand naast elkaar (werkplek- en serverbeheer): kop, lijst met pijltjes, knop */
.kaders{display:flex}
.kaders>div{flex:1 1 0;margin:10px;padding:10px;border:4px solid var(--groen)}
.kaders>div>p{margin:0 0 10px;font-weight:600;color:var(--groen)}
.kaders .pijlen ul,.kaders>.pijlen>ul{margin-bottom:30px}
/* YouTube-video met een afbeelding ervoor: de video laadt pas na een klik (site.js) */
.video{position:relative;aspect-ratio:16/9;overflow:hidden}
.video iframe{display:block;width:100%;height:100%;border:0;background:#000}
.video-start{position:absolute;inset:0;width:100%;padding:0;cursor:pointer}
/* knopopmaak van het thema (rand, achtergrondkleur) niet op de afbeelding */
.video .video-start,.video .video-start:hover,.video .video-start:focus{border:0;border-radius:0;background-color:transparent;
  background-position:center;background-size:cover;background-repeat:no-repeat}
.video-start svg{position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-53px 0 0 -50px;fill:var(--wit);opacity:.8}
@media (max-width:1366px){.titel{font-size:2.3rem}}
@media (max-width:1200px){.titel{font-size:1.8rem}}
@media (max-width:767px){.titel{font-size:1.5rem}.kaders{flex-direction:column}}
/* afspraakpagina van een medewerker (/dennis24x7ict/, /bart24x7ict/): foto of initialen, naam, uitleg en de agenda
   van leads.24x7.nl (de hoogte van de agenda regelt site.js) */
.afspraak{max-width:1040px;margin:48px auto 64px;padding:0 16px;color:var(--donker)}
.afspraak-kop{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.afspraak-foto{flex:none;display:flex;align-items:center;justify-content:center;width:76px;height:76px;border:3px solid var(--groen);
  border-radius:50%;object-fit:cover;background:var(--donker);color:var(--groen);font:800 24px byker,sans-serif}
.afspraak h1{margin:0 0 6px;font-size:30px;line-height:1.2;color:var(--donker)}
.afspraak-kop p{margin:0;font-size:15px;line-height:1.5;color:#55564e}
.afspraak-agenda{display:block;width:100%;min-height:640px;border:0}
@media (max-width:640px){.afspraak{margin:28px auto 40px}.afspraak h1{font-size:23px}.afspraak-foto{width:58px;height:58px;font-size:18px}}

/* ---------------------------------------------------------------------------------------------------- kop */
.kop-balk{display:flex;align-items:center;justify-content:center;gap:10px;min-height:62px;padding:4px 10px;background:var(--donker)}
.kop-balk-icoon svg{display:block;width:32px;height:32px;margin:-7px 0 -5px}
.kop-balk-tekst,.kop .kop-balk-tekst{margin:0;font:400 17px/24px Asap,sans-serif;color:var(--groen)}
.kop-balk-tekst a{color:var(--groen)}
.kop-balk-pijl{display:flex;margin-left:-2px}
.kop-balk-pijl svg{width:20px;height:20px}
.kop-hoofd{position:relative;z-index:99;display:flex;align-items:flex-start;min-height:120px;padding:10px;background:var(--wit);box-shadow:0 0 2px 0 rgba(0,0,0,.5)}
.kop-binnen{display:flex;align-items:center;width:100%;max-width:1280px;margin:0 auto}
/* logo-vak 20% en de rest 100%: samen te breed, dus beide krimpen naar verhouding (zoals de oude kop) */
.kop-logo{flex:0 1 20%;display:flex;min-width:0;margin-right:10px}
.kop-logo img{width:200px;max-width:100%;height:auto}
.kop-rechts{flex:0 1 100%;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.kop-knoppen{display:flex;justify-content:flex-end;gap:10px}
/* elk vak mag krimpen, de knop zelf niet verder dan zijn langste woord (zo brak de tekst ook in de oude kop af) */
.kop-knop-vak{display:flex;align-items:flex-start;min-width:0}
.kop-knop{display:inline-block;margin-right:20px;padding:12px 16px;border:1px solid var(--groen);background:var(--groen);color:var(--wit);
  font:700 16px/1 Asap,sans-serif;text-transform:uppercase;text-align:center;transform:skew(-35deg);transition:all .3s}
.kop-knop>span{display:inline-block;transform:skew(35deg)}
.kop-knop:hover,.kop-knop:focus{background:var(--wit);color:var(--groen)}
.kop-knop-rand{background:var(--wit);color:var(--groen)}
.kop-knop-rand:hover,.kop-knop-rand:focus{background:var(--groen);color:var(--wit)}
.menu{display:flex;justify-content:flex-end}
/* .kop ervoor: de knopstijl van de site (groen vlak) mag hier niet gelden */
.kop .menu-knop,.kop .menu-knop:hover,.kop .menu-knop:focus,.kop .menu-knop:active{display:none;width:34px;height:34px;padding:4px;border:0;border-radius:0;
  background:none;box-shadow:none;color:#1f2124;cursor:pointer;-webkit-tap-highlight-color:transparent}
.menu-knop svg{display:block;width:26px;height:26px;fill:#1f2124}
.menu-knop .menu-knop-dicht,.menu-knop[aria-expanded=true] .menu-knop-open{display:none}
.menu-knop[aria-expanded=true] .menu-knop-dicht{display:block}
.menu-lijst{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:30px;margin:0;padding:0;list-style:none}
.menu-item{display:flex;align-items:center}
.menu-link{display:flex;align-items:center;font:600 1rem/24px Asap,sans-serif;color:#1f2124;white-space:nowrap;transition:color .3s}
.menu-link:hover,.menu-link.is-actief,.heeft-paneel:hover>.menu-link{color:var(--groen)}
.menu-icoon{display:flex;margin-right:5px}
.menu-icoon svg{width:16px;height:16px;fill:currentColor}
.menu-icoon .icon-inactive~*,.menu-icoon .icon-active{display:none}
.kop .menu-pijl,.kop .menu-pijl:hover,.kop .menu-pijl:focus{display:flex;align-items:center;height:24px;margin-left:5px;padding:0;border:0;border-radius:0;
  background:none;box-shadow:none;color:#1f2124;cursor:pointer}
.menu-pijl svg{width:16px;height:16px;fill:currentColor}
.heeft-paneel:hover .menu-pijl svg,.heeft-paneel:focus-within .menu-pijl svg,.heeft-paneel.open .menu-pijl svg{transform:rotate(180deg)}
.alleen-mobiel{display:none}
/* uitklappaneel: onder de kopbalk, over de volle breedte; open bij aanwijzen, toetsenbordfocus of een tik op de pijl */
.menu-paneel{position:absolute;top:100%;left:0;right:0;z-index:99;display:none;max-width:1280px;margin:0 auto;padding:0;
  justify-content:flex-end;animation:paneelIn .4s}
/* de grote panelen (Oplossingen, Jouw AI): 85% van de kopbreedte, net als in de oude kop; tot 1366 px de volle breedte */
.menu-paneel-breed>div{flex:0 0 auto;width:calc(83.7199% - 20px);margin:1px calc(1px + 1.2801%) 0 0}
.heeft-paneel:hover>.menu-paneel,.heeft-paneel:focus-within>.menu-paneel,.heeft-paneel.open>.menu-paneel{display:flex}
.heeft-paneel>.menu-link{position:relative}
.heeft-paneel>.menu-link::after{content:"";position:absolute;left:-15px;right:-30px;top:100%;height:40px}
@keyframes paneelIn{from{opacity:0}to{opacity:1}}
.menu-contact{box-sizing:border-box;width:175px;margin:0 75px 0 0;padding:10px 20px;list-style:none;background:var(--wit)}
.menu-contact a{display:flex;align-items:center;color:#20211c;font:400 1rem/24px Asap,sans-serif}
.menu-contact a>span{padding-left:5px}
.menu-contact a:hover{color:var(--groen)}
.menu-contact li:not(:last-child){padding-bottom:2.5px}.menu-contact li:not(:first-child){margin-top:2.5px}
.menu-contact svg{width:14px;height:14px;margin-right:3.5px;fill:var(--groen)}
.m24-holder{position:absolute;top:0;left:0;width:0;height:0}
@media (max-width:1366px){.kop-binnen{max-width:1140px}.menu-paneel{max-width:1140px}
  .menu-paneel.menu-paneel-breed{max-width:none}.menu-paneel-breed>div{width:calc(98.494% - 20px);margin:-2px calc(1px + 1.506%) 0 0}
  .menu-contact{margin-top:-3px}}
@media (max-width:1200px){
  .kop-hoofd{min-height:110px}.kop-binnen{max-width:960px}
  .kop-logo,.kop-rechts{flex:1 1 0}.kop-logo img{width:30%}
  .kop-knop{padding:6px 12px;font-size:.9rem;line-height:1}
  .menu-lijst{display:none}.kop .menu-knop,.kop .menu-knop:hover,.kop .menu-knop:focus,.kop .menu-knop:active{display:block}
}
@media (max-width:1024px){
  .kop-hoofd{min-height:83px}.kop-binnen{max-width:720px}.kop-logo img{width:32%}
  .kop-rechts{flex-direction:row;justify-content:space-between;align-items:center}
}
/* tablet: het vak met de menuknop is 80 px en krimpt mee met de knoppen (zoals de oude kop) */
@media (min-width:768px) and (max-width:1024px){.kop-knoppen{flex:0 1 100%;min-width:0}.menu{flex:0 1 80px}}
@media (max-width:767px){
  .kop-balk{min-height:42px;padding:4px 15px}.kop-balk-icoon,.kop-balk-pijl{display:none}
  .kop .kop-balk-tekst{padding-right:4px;font-size:10px;text-align:center}
  .kop-hoofd{min-height:75px}.kop-binnen{max-width:none}
  /* zoals de oude kop: logo 33%, rechts 66% met de menuknop in een gecentreerd blok van 66% */
  .kop-logo{flex:0 0 33%;margin-right:0}.kop-logo img{width:100%}
  .kop-knoppen{display:none}.kop-rechts{flex:0 0 66%;justify-content:center}.menu{width:66%;margin-top:10px}
}

/* losse pop-up met een formulier (NIS2-folder), zie js/site.js */
.los-popup{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(32,33,28,.75)}
.los-popup[hidden]{display:none}
.los-popup-venster{position:relative;width:100%;max-width:620px;max-height:92vh;overflow:auto;background:#fff;font-family:"Asap",sans-serif}
.los-popup-venster .p-form-card{border:0;border-radius:0;padding:44px 36px 30px}
.los-popup-venster h2{text-align:center;margin-bottom:12px;font-family:"Byker","Asap",sans-serif;font-weight:800}
.los-popup-venster .los-popup-intro{text-align:center;margin-bottom:24px}
.los-popup-sluit{position:absolute;top:0;right:0;z-index:1;width:44px;height:44px;padding:0;border:0;border-radius:0;background:#20211c;color:#fff;font-size:26px;line-height:44px;cursor:pointer}
.los-popup-sluit:hover,.los-popup-sluit:focus{background:#a5c35c;color:#fff}
body.los-popup-open{overflow:hidden}
@media (max-width:767px){.los-popup-venster .p-form-card{padding:48px 20px 24px}}