*,
*::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: 163, 114, 82;
    --main-link-color: rgb(var(--main-link-color-base));

    --second-bg-color-base: 14, 64, 124;
    --second-bg-color: rgb(var(--second-bg-color-base));

    --second-color-base: 214, 129, 71;
    --second-color: rgb(var(--second-color-base));
    
    --second-link-color-base: 119, 82, 61;
    --second-link-color: rgb(var(--second-link-color-base));

    --third-bg-color-base: 90, 220, 255;
    --third-bg-color: rgb(var(--third-bg-color-base));

    --third-color-base: 14, 64, 124;
    --third-color: rgb(var(--third-color-base));
         
    --third-link-color-base: 255, 124, 59;
    --third-link-color: rgb(var(--third-link-color-base));

    --fourth-bg-color-base: 163, 114, 82;
    --fourth-bg-color: rgb(var(--fourth-bg-color-base));
    --fourth-color:rgb(255, 255, 255);

    --fifth-bg-color-base: 119, 82, 61;
    --fifth-bg-color: rgb(var(--fifth-bg-color-base));
    --fifth-color:rgb(255, 255, 255);

    --sixth-bg-color-base: 232, 217, 202;
    --sixth-bg-color: rgb(var(--sixth-bg-color-base));
    --sixth-color: rgb(var(--main-color-base));

    --seventh-bg-color-base: 232, 177, 86;
    --seventh-bg-color: rgb(var(--seventh-bg-color-base));
    --seventh-color:rgb(255, 255, 255);

    --eight-bg-color-base: 247, 242, 237;
    --eight-bg-color: rgb(var(--eight-bg-color-base));
    --eight-color: rgb(var(--main-color-base));

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

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

    --eleventh-bg-color-base: 22, 85, 178;
    --eleventh-bg-color: rgb(var(--eleventh-bg-color-base));
    --eleventh-color: rgb(255, 255, 255);

    --twelfth-bg-color-base: 60, 142, 239;
    --twelfth-bg-color: rgb(var(--twelfth-bg-color-base));
    --twelfth-color: rgb(var(--main-color-base));

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

    --light-color-base: 247, 242, 237;
    --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: 14, 64, 124;
   --second-color-base: 255, 124, 59;
   --second-link-color-base: 90, 220, 255;

   --third-bg-color-base: 255, 124, 59;
   --third-color-base: 255, 255, 255;
   --third-link-color-base: 255, 255, 255;

   --fourth-bg-color-base: 163, 114, 82;
   --fifth-bg-color-base: 214, 129, 71;
   --sixth-bg-color-base: 232, 217, 202;
   --seventh-bg-color-base: 232, 177, 86;
   --eight-bg-color-base: 247, 242, 237;
   --ninth-bg-color-base: 37, 37, 37;
   --tenth-bg-color-base: 255, 124, 59;
   --eleventh-bg-color-base: 22, 85, 178;
   --twelfth-bg-color-base: 60, 142, 239;
}

: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);
   --tenth-bg-color-base:var(--main-bg-color-base);
   --eleventh-bg-color-base:var(--main-bg-color-base);
   --twelfth-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);
   --tenth-bg-color-base: var(--main-bg-color-base);
   --eleventh-bg-color-base:var(--main-bg-color-base);
   --twelfth-bg-color-base:var(--main-bg-color-base);

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

.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);
   --tenth-bg-color-base: var(--main-bg-color-base);
   --eleventh-bg-color-base:var(--main-bg-color-base);
   --twelfth-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);
}

.unselectable,
.unselectable * {
  -webkit-user-select: none; /* Safari, Chrome, Edge */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer 10+ */
  -o-user-select: none;      /* Opera */
  user-select: none;         /* Standard syntax */
}