*,
*::before,
*::after {
    box-sizing: border-box;
}

/*fancy page transition not all browsers support this*/
@view-transition {
    navigation: auto;
}

.vlizbase *:focus {
    outline: 3px solid var(--second-bg-color) !important;
    outline-offset: 2px !important;
    border-bottom: 3px solid var(--main-color);
    filter: drop-shadow(0 0 0.75rem var(--light-color));
}

.visually-hidden:focus,
.visually-hidden:focus-within {
    position: relative !important;
    clip: initial;
    width: auto !important;
    height: auto !important;
    z-index: 999999;
}

:root,
:root.light-mode{

    --ff-body: 'Montserrat', sans-serif;
    --fw-body: 100;
    --fw-bold: 800;
    --fw-title: 400;
    --fw-number: 800;
    --fs-body: clamp(1rem,1vw,1rem + 0.2vw);
    --fs-h1: clamp(2rem,1.5vw,3rem + 0.2vw);
    --fs-h2: clamp(1.8rem,1.4vw,2.1rem + 0.2vw);
    --fs-h3: clamp(1.6rem,1.3vw,1.9rem + 0.2vw);
    --fs-h4: clamp(1.4rem,1.2vw,1.3rem + 0.2vw);
    --fs-h5: clamp(1.2rem,1.1vw,1.25rem + 0.2vw);
    --fs-h6: clamp(1.1rem,1.15vw,1.2rem + 0.2vw);

    --fs-bq:clamp(7rem,5.5vw,8rem + 0.2vw);

    --bg-transparency: 1;

    --main-bg-color-base: 255, 255, 255;
    --main-bg-color: rgb(var(--main-bg-color-base));

    --main-color-base: 68, 68, 68;	 
    --main-color: rgb(var(--main-color-base));

    --main-link-color-base: 185, 175, 223;
    --main-link-color: rgb(var(--main-link-color-base));

    --second-bg-color-base: 161,212,241;
    --second-bg-color: rgb(var(--second-bg-color-base));

    --second-color-base: 20, 154, 154;
    --second-color: rgb(var(--second-color-base));
    
    --second-link-color-base: 101, 111, 200;
    --second-link-color: rgb(var(--second-link-color-base));

    --third-bg-color-base: 240,231,183;
    --third-bg-color: rgb(var(--third-bg-color-base));

    --third-color-base: 53, 77, 155;
    --third-color: rgb(var(--third-color-base));
         
    --third-link-color-base: 135, 218, 232;
    --third-link-color: rgb(var(--third-link-color-base));

    --fourth-bg-color-base:182,49,31;
    --fourth-bg-color: rgb(var(--fourth-bg-color-base));
    --fourth-color:rgb(255, 255, 255);

    --fifth-bg-color-base:250,194,21;
    --fifth-bg-color: rgb(var(--fifth-bg-color-base));
    --fifth-color:rgb(255, 255, 255);

    --sixth-bg-color-base:95,153,160;
    --sixth-bg-color: rgb(var(--sixth-bg-color-base));
    --sixth-color:rgb(0, 0, 0);

    --seventh-bg-color-base:89, 190, 208;
    --seventh-bg-color: rgb(var(--seventh-bg-color-base));
    --seventh-color:rgb(255, 255, 255);

    --eight-bg-color-base:31, 191, 222;
    --eight-bg-color: rgb(var(--eight-bg-color-base));
    --eight-color:rgb(255, 255, 255);

    --ninth-bg-color-base:241, 241, 241;
    --ninth-bg-color: rgb(var(--ninth-bg-color-base));
    --ninth-color: rgb(var(--main-color-base));

    --gradient-bg-color: linear-gradient(45deg, var(--second-bg-color), var(--main-bg-color));

    --light-color-base: 243, 244, 250;
    --light-color: rgb(var(--light-color-base));

    --dark-color-base: 68, 68, 68;
    --dark-color: rgb(var(--dark-color-base));

}
/*
:root.dark-mode{
   --main-bg-color-base: 61, 67, 81;
   --main-color-base: 208, 205, 213;
   --main-link-color-base: 140, 140, 140;	

   --second-bg-color-base: 53, 77, 155;
   --second-color-base: 255, 123, 0;
   --second-link-color-base: 9, 200, 200;

   --third-bg-color-base: 165, 0, 63;
   --third-color-base: 56, 205, 231;
   --third-link-color-base: 135, 218, 232;

   --fourth-bg-color-base:170, 107, 44;
   --fifth-bg-color-base:16, 115, 115;
   --sixth-bg-color-base:181, 146, 41;
   --seventh-bg-color-base:30, 99, 111;
   --eight-bg-color-base:16, 102, 119;
   --ninth-bg-color-base:37, 37, 37;

}

:root.contrast-mode {
   --main-bg-color-base: 255, 255, 255;
   --main-color-base: 0, 0, 0;
   --main-link-color-base: var(--main-color-base);

   --second-bg-color-base: var(--main-bg-color-base);
   --second-color-base: var(--main-color-base);
   --second-link-color-base: var(--main-color-base);

   --third-bg-color-base: var(--main-bg-color-base);
   --third-color-base: var(--main-color-base);
   --third-link-color-base: var(--main-color-base);

   --fourth-bg-color-base:var(--main-bg-color-base);
   --fifth-bg-color-base:var(--main-bg-color-base);
   --sixth-bg-color-base:var(--main-bg-color-base);
   --seventh-bg-color-base:var(--main-bg-color-base);
   --eight-bg-color-base:var(--main-bg-color-base);
   --ninth-bg-color-base:var(--main-bg-color-base);

   --gradient-bg-color: var(--main-bg-color);
   --bg-transparency:1;
}


:root.contrast-mode.dark-mode {
   --main-bg-color-base: 0, 0, 0;
   --main-color-base: 255, 255, 255;
   --main-link-color-base: var(--main-color-base);

   --second-bg-color-base: var(--main-bg-color-base);
   --second-color-base: var(--main-color-base);
   --second-link-color-base: var(--main-color-base);

   --third-bg-color-base: var(--main-bg-color-base);
   --third-color-base: var(--main-color-base);
   --third-link-color-base: var(--main-color-base);

   --fourth-bg-color-base:var(--main-bg-color-base);
   --fifth-bg-color-base:var(--main-bg-color-base);
   --sixth-bg-color-base:var(--main-bg-color-base);
   --seventh-bg-color-base:var(--main-bg-color-base);
   --eight-bg-color-base:var(--main-bg-color-base);
   --ninth-bg-color-base:var(--main-bg-color-base);

   --gradient-bg-color: var(--main-bg-color);
   --bg-transparency:1;
}
182,49,31
.contrast-mode.light-mode #logo {
    filter: brightness(0);
}

:root.contrast-mode.light-mode{
   --main-bg-color-base: 255, 255, 255;
   --main-color-base: 0, 0, 0;
   --main-link-color-base: var(--main-color-base);

   --second-bg-color-base: var(--main-bg-color-base);
   --second-color-base: var(--main-color-base);
   --second-link-color-base: var(--main-color-base);

   --third-bg-color-base: var(--main-bg-color-base);
   --third-color-base: var(--main-color-base);
   --third-link-color-base: var(--main-color-base);

   --fourth-bg-color-base:var(--main-bg-color-base);
   --fifth-bg-color-base:var(--main-bg-color-base);
   --sixth-bg-color-base:var(--main-bg-color-base);
   --seventh-bg-color-base:var(--main-bg-color-base);
   --eight-bg-color-base:var(--main-bg-color-base);
   --ninth-bg-color-base:var(--main-bg-color-base);

   --gradient-bg-color: var(--main-bg-color);
   --bg-transparency:1;
}

.contrast-mode.dark-mode #logo {
    filter: brightness(100);
}
*/
@media print {
   @page {
       margin-top: 0;
       margin-bottom: 0;
   }
   body {
       padding-top: 72px;
       padding-bottom: 72px ;
       margin: 0 !important;
       color: #000 !important;
       background-color: #fff !important;
   }

   #page-wrapper {
       margin: 2rem !important;
   }

   header,
   footer,
   nav,
   video,
   iframe,
   .accessibility-container,
   #block-vlizbase-primary-local-tasks,
   #sliding-popup,
   .share42init,
   .dspager,
   .pagerfilter {
       display: none;
   }

   .paragraph--type--layout-style .paragraph{
       max-width:100% !important;
   }

   .pvh5,
   .pvh10,
   .pvh20{
       padding:0 !important;
   }

}


@media only screen and (max-width: 1200px) {
    #block-vlizbase-breadcrumbs-2,
    .text-long.field-summary,
    #block-vlizbase-page-title,
    .field-location,
    .field-date-range,
    .w1200,
    .field-volledige-tekst {
        padding: 0 10vw !important;
    }

    /* center the logo for small devices */
   #header .section {
       text-align: center;
   }

}

::selection {
    background:  var(--main-color);
    color:  var(--main-bg-color);
}