@charset "utf-8";
/***  import cookie-banner styles  ***/
@import 'ccb-panel.css';

/*
    CSS Document
                   */
@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon/icomoon.eot'), url('../fonts/icomoon/icomoon.svg') format('svg'), url('../fonts/icomoon/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon/icomoon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

body {
  background: #fafafa;
  font-family: 'halyard-display', sans-serif;
  font-weight: 300;
  color: #333399;
  font-size: 18px;
  line-height: 1.333;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*
    general
              */
a,
a:visited {
  color: #333399;
  text-decoration: none;
  transition-duration: 0.25s;
}

a:hover,
a:active {
  transition-duration: 0.1s;
}

.content a,
.content a:visited {
  border-bottom: dotted 0.075em;
}

.content a:hover,
.content a:active {
  border-width: 0.1em;
}

a.language:hover,
.social a:hover,
p a:hover,
ul a:hover,
ol a:hover,
footer nav a:hover {
  color: #333399;
}

a.button:hover,
button:hover {
  opacity: 0.6;
}

a.selected,
h1 strong,
h2 strong {
  font-weight: 500;
}

a.button,
button {
  background-color: #bdbe8f;
  border-radius: 100px;
  color: #fff;
  line-height: 2.8em;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  display: inline-block;
  padding: 0 2.83em 0.3em;
  cursor: pointer;
}

a.button.back-btn {
  background-color: #a8d3d1;
}

a.button.more,
a.button.download,
a.button.link {
  padding-right: 5.25%;
}

.small-txt {
  font-size: 70%;
  font-weight: 500;
}

.more::after,
.download::after,
.link::after {
  font-family: 'icomoon' !important;
  content: '\e90a';
  font-size: 0.75em;
  line-height: 0;
  padding-left: 0.5em;
}

.download::after {
  content: '\e90b';
}

.link::after {
  content: '\e90d';
}

.search::before {
  font-family: 'icomoon' !important;
  font-size: 86%;
  line-height: 2.1;
  content: '\e904';
  margin-left: -0.5em;
  top: 0.3em;
  position: relative;
}

.social a {
  border: none !important;
  font-family: 'icomoon' !important;
  font-size: 96%;
  line-height: 1;
}

.facebook::before {
  content: '\e905';
}

.linkedin::before {
  content: '\e906';
  margin-left: 0.3em;
}

.twitter::before {
  content: '\e907';
}

ul,
ol {
  padding-left: 1.333em;
}

ul.highlight,
ul.highlight {
  padding: 2vh;
}

h1,
h2,
h3 {
  color: #efbc00;
}

header figcaption,
h2,
h3 {
  font-weight: 400;
  line-height: 1.08;
  position: relative;
}

h2,
h3 {
  padding-bottom: 0.2em;
}

h2:empty {
  padding-bottom: 0.614em;
}

p + *,
li + *,
.content figure + p,
h3 + p,
h3 + ol,
h3 + ul {
  margin-top: 0.614em;
}

ul + *,
ol + *,
table + *,
p + h2,
p + h3,
p + .inline-media,
ol + .inline-media,
ul + .inline-media,
.inline-media + *:not(.actions),
figure + h2,
figure + h3 {
  margin-top: 1.333em;
}

.intro h2 {
  color: #efbc00;
  font-size: 122.2%;
  line-height: 1.2;
  padding-right: 4.5%;
}

.intro h3 {
  padding: 0.075em 0 0.25em;
}

.content h1 {
  font-size: 200%;
  line-height: 1.15;
  font-weight: 300;
  padding-bottom: 1.333em;
}

.content h2 {
  font-size: 150%;
  line-height: 1.23;
  font-weight: 300;
  padding-bottom: 1.333em;
}

.content h1 + h2,
.content h2 + h2 {
  font-size: 111%;
}

strong {
  font-weight: 400;
}

th,
td {
  padding: 0.666em 1.333em 0.666em 0;
  border-bottom: 1px solid;
}

th {
  font-weight: 400;
  text-align: left;
}

/*
    layout
            */
.ghplab header figure {
  background-image: linear-gradient(to right top, #d6e09f, #cdc375, #c7a54f, #c2852f, #bd6216);
}

.team header figure {
  background-image: linear-gradient(to right top, #a4cc9d, #c2c498, #d2bea0, #d6bbae, #cebcbb);
}

.research header figure {
  background-image: linear-gradient(to right top, #a4cc9d, #98d3bc, #9dd8d6, #b0d9e5, #c8dbea);
}

.publications header figure {
  background-image: linear-gradient(to right top, #c8dbea, #ced2e3, #d3c9d7, #d3c1c8, #cebcbb);
}

.container,
footer > div {
  width: 100%;
  max-width: 1440px;
  padding: 0 3vw;
  margin: 0 auto;
  position: relative;
}

.language {
  font-size: 90%;
  position: absolute;
  top: 1.25vh;
  right: 3vw;
}

header,
header > *,
header nav,
.social,
article,
footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

header div,
header nav,
section,
aside {
  flex-direction: column;
  align-content: space-between;
  padding-top: calc(2.9vh + 1.2em);
}

header div,
aside {
  width: 25%;
}

#navicon {
  display: none;
}

header nav {
  position: relative;
}

header nav > a,
a.search {
  font-size: 136%;
  display: inline-block;
}

header nav > a:not(.language):hover,
.themes a:hover,
.filters a:hover {
  font-weight: 400;
}

header nav > a + a {
  margin-top: 0.35em;
}

.social {
  flex-direction: row;
  flex-basis: auto;
  justify-content: space-between;
  width: 27%;
  min-width: 5.5em;
  padding-top: 2.5vh;
}

.social.share {
  float: right;
  width: auto;
  padding-top: 0.85em;
}

header figure {
  background-image: url('../images/starrynight-333399-web.jpg');
  background-size: cover;
  background-position: left top;
  border-radius: 15rem 15rem 15rem 0;
  width: 75%;
  padding: 4vh 2vh;
  margin-top: calc(2.9vh + 1.2em);
}

header figcaption h1 {
  color: #fdfcf7;
  font-size: clamp(1em, 4vw, 60px);
  position: absolute;
  width: 90%;
  z-index: 5;
  bottom: 0;
  left: 0;
}

#ovv {
  background: url('../images/OVV-logo-RGB.svg') no-repeat left top / contain;
  width: 100%;
  padding-top: 50%;
  display: block;
}

#ughent {
  background: url('../images/ughent_logo.svg') no-repeat left bottom / 66%;
  width: 35%;
  padding-top: 35%;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
}

article {
  flex-direction: row-reverse;
  padding-bottom: 5vh;
}

section {
  width: 75%;
}

aside {
  padding-right: 1.33em;
}

aside:empty {
  padding: 0;
}

aside p {
  font-size: 90%;
  line-height: 1.25;
}

.intro {
  display: block;
  position: relative;
  float: left;
  padding: 1.5vh 2vh;
  transition: transform 0.25s ease-out;
}

aside .intro {
  width: 100%;
  padding-left: 0;
}

a[href].intro:hover {
  transform: translateY(-4%);
  transition: transform 0.15s ease-out;
}

.date {
  color: #333399;
  font-size: 83%;
  font-weight: 500;
  margin-bottom: 0.7em;
  display: block;
}

.highlight {
  box-shadow: 1em 1em 1em -0.5em rgba(153, 153, 195, 0.15);
}

.intro > div {
  display: flex;
  align-items: center;
}

.research .intro > div {
  align-items: flex-start;
}

.intro > div > div {
  width: 100%;
}

.intro div:not(.img-container) img {
  width: auto;
  height: 7.2em;
  margin: 0.2em 1.66em 0 0;
  max-width: 50%;
  border-radius: 10em;
}

.intro .img-container img {
  object-fit: cover;
  width: 7.2em !important;
  max-width: 100% !important;
}

.img-container {
  width: auto !important;
  height: 7.2em;
  border-radius: 3.6em;
  margin: 0.2em 1.66em 0 0;
}

body:not(.research) .intro:nth-of-type(even) img {
  border-radius: 10em;
}

section .intro {
  width: 82%;
}

/*section .intro:nth-of-type(2n) {
  float: right;
}*/
.content {
  position: relative;
  margin: 0 2vh;
}

.content + .content {
  padding-top: 0.614em;
}

section > div:nth-last-of-type(2) {
  margin-bottom: 4vh;
}

.content figure,
.inline-media {
  position: absolute;
  width: 33.333%;
  left: calc(-33.333% - 2.66em);
  margin-top: 0.5em;
  /*cursor: pointer;*/
  box-shadow: 0 0 0 0 rgba(153, 153, 195, 0.25);
  transition: box-shadow 0.25s linear;
}

.inline-media {
  position: relative;
  width: 100%;
  left: 0;
  margin: 0.614em 0;
  padding: 0;
}

.content figure a,
.inline-media a {
  border: none;
  display: inline-block;
  position: relative;
}

.content figure a::before,
.inline-media a::before {
  background-color: #a8d3d1;
  color: #fff;
  font-family: 'icomoon';
  font-size: 0.8em;
  line-height: 1.6em;
  text-align: center;
  content: '\e90a';
  position: absolute;
  opacity: 0.8;
  right: 1.6em;
  bottom: 1.6em;
  width: 1.6em;
  height: 1.6em;
  z-index: 1;
}

.content figure:hover a,
.inline-media:hover a {
  opacity: 0.5;
}

.content figure img,
.inline-media img {
  width: auto;
  max-width: 100%;
  max-height: 540px;
}

.content figure a {
  float: right;
  width: 100%;
}

.content figure img {
  float: right;
  max-height: 250px;
}

.videoWrapper,
.embedWrapper {
  aspect-ratio: 16 / 9;
  clear: both;
  margin: 1.333em 0;
  max-width: 100%;
  position: relative;
  width: 100%;
}

.videoWrapper iframe,
.embedWrapper iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.embedWrapper.embed-spotify {
  aspect-ratio: auto;
  height: var(--embed-height, 352px);
  overflow: hidden;
}

.embedWrapper.embed-spotify iframe {
  border-radius: 12px;
}

.message-gallery {
  clear: both;
  display: grid;
  gap: 0.614em;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  margin-top: 1.333em;
}

.message-gallery a {
  aspect-ratio: 1;
  background-color: #f4f4ed;
  border: none;
  display: block;
  overflow: hidden;
  position: relative;
}

.message-gallery a::before {
  background-color: #a8d3d1;
  bottom: 0.6em;
  color: #fff;
  content: '\e90a';
  font-family: 'icomoon';
  font-size: 0.8em;
  height: 1.6em;
  line-height: 1.6em;
  opacity: 0.8;
  position: absolute;
  right: 0.6em;
  text-align: center;
  width: 1.6em;
  z-index: 1;
}

.message-gallery img {
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s linear;
  width: 100%;
}

.message-gallery a:hover img {
  opacity: 0.5;
}

.mosaic,
.mosaic div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.mosaic > div {
  box-shadow: 0.5em 0.5em 0.5em -0.25em rgba(153, 153, 195, 0.15);
  margin-bottom: 1.75vh;
}

.mosaic > div > div {
  width: 100%;
  align-items: flex-start;
}

.mosaic > div > div:last-of-type {
  padding: 1.33em;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.mosaic.operation * {
  text-align: center !important;
  width: 100%;
}

.mosaic.staff > div,
.mosaic.operation > div:nth-of-type(n + 3) {
  width: calc(33.33% - 1.67vh);
  align-content: space-between;
}

.mosaic.staff > div:first-of-type {
  margin-right: 60%;
}

.mosaic.members {
  margin-top: 1.75vh;
}

.mosaic.members > div {
  background-color: #fff;
  width: calc(25% - 1.67vh);
}

.mosaic.members a {
  border: none !important;
  width: 100%;
  height: 100%;
}

.cookietable th {
  text-align: left;
  font-weight: 400;
  border-bottom: solid 1px;
  padding-bottom: 0.25em;
}

.cookietable td {
  padding: 0.25em 2% 0.25em 0;
  width: 21%;
}

.cookietable td:nth-of-type(2) {
  width: 64% !important;
}

.cookietable td:nth-of-type(3) {
  width: 11% !important;
  padding-right: 0;
}

.actions {
  margin-top: 5vh;
  float: left;
  width: 100%;
}

.content .button {
  border: none !important;
  margin: 0 5% 2vh 0;
}

.themes,
.filters,
.navPublications {
  display: flex;
  flex-direction: column;
  padding-top: 0.2em;
  position: relative;
}

.themes a,
.filters a,
.navPublications a {
  margin-top: 0.4em;
}

.navPublications a::before {
  content: '— ';
}

.navPublications a.selected::before {
  content: '—— ';
  letter-spacing: -0.1rem;
}

.themes a {
  font-size: 110%;
}

.filters a {
  font-size: 83%;
  margin-top: 0.62em;
}

.yearFilters {
  margin-top: 1.4em;
}

.toggle_btn {
  position: absolute;
}

.toggle_btn.open::before,
.toggle_btn.closed::before {
  font-family: 'icomoon';
  content: '\e900';
  position: absolute;
  left: -1.05em;
  top: 0.05em;
  transform: rotate(90deg);
  transition: rotate 0.1s linear;
}

.toggle_btn.closed::before {
  transform: rotate(0deg);
}

.filters .toggle_btn.open::before,
.filters .toggle_btn.closed::before {
  left: -1.25em;
}

.toggle_btn.closed ~ a:nth-child(n + 3) {
  display: none;
}

footer {
  background-color: #fdfcf7;
}

footer > div {
  display: flex;
  justify-content: space-between;
  margin: calc(2.9vh + 1.2em) auto 6vh;
}

.address,
footer nav a {
  font-weight: 400;
  font-size: 111%;
}

.address p {
  font-size: 89%;
  font-weight: 300;
  padding-top: 1em;
}

footer nav {
  display: flex;
  justify-content: space-between;
  width: max(26%, 19em);
}

/*
    lightbox
                 */
#lightbox {
  background-color: #f2f5a6f0;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: 20;
}

#lightbox.open {
  display: flex;
}

#lightbox > div {
  width: 10vw;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  flex-direction: column;
}

#lightbox > * > * {
  height: 15vh;
  width: 100%;
  display: block;
  position: relative;
}

.scroll_btn,
#lightbox figure div {
  height: 70vh !important;
}

.scroll_btn::before,
.close_btn::before,
.download_btn::before {
  color: #bdbe8f;
  font-family: 'icomoon';
  font-size: 140%;
  line-height: 0;
  content: '\e911';
  position: absolute;
  top: 50%;
  margin-left: 50%;
  transform: translateX(-50%);
  transition: margin 0.25s linear, transform 0.25s linear;
}

.scroll_btn.left::before {
  transform: rotate(180deg) translateX(50%);
}

.scroll_btn.right::before {
  content: '\e911';
}

.scroll_btn.left:hover::before {
  margin-left: 45%;
}

.scroll_btn.right:hover::before {
  margin-left: 55%;
}

#lightbox .loading {
  position: fixed !important;
  width: 5vw !important;
  left: 47.5vw;
  top: 47.5vh;
  height: 5vh !important;
}

#lightbox figure {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#lightbox figure span,
#lightbox figcaption {
  height: 15vh;
}

#lightbox figure > div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15vh;
}

#lightbox figure img {
  max-height: 70vh;
  max-width: 80vw;
  width: auto;
}

#lightbox .videoWrapper,
#lightbox .embedWrapper {
  clear: none;
  margin: 0;
  max-width: 80vw;
  width: 100%;
}

#lightbox .videoWrapper,
#lightbox .embedWrapper:not(.embed-spotify) {
  height: auto !important;
}

#lightbox .embedWrapper.embed-spotify {
  height: var(--embed-height, 352px) !important;
  max-height: 70vh;
  max-width: 640px;
}

#lightbox figcaption {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close_btn::before {
  content: '\e90c';
}

.download_btn::before {
  font-size: 120%;
  content: '\e90b';
}

/*** OVERLAYER ***/
#overlayer {
  background-color: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 100;
}

#overlayer .close_btn {
  position: absolute;
  width: 2em;
  height: 2em;
  top: 2em;
  right: 1.5em;
  cursor: pointer;
}

/*
    form
           */
form {
  margin-top: 4vh;
}

select,
input[type='text'],
input[type='submit'],
input[type='email'],
input[type='tel'],
a.button,
a.button:link,
a.button:visited {
  border-bottom: 1px solid #333399;
  background-color: #fdfcf7;
  color: #333399;
  display: inline-block;
  height: 54px;
  line-height: 54px;
  width: 100%;
}

input[name='code'] {
  text-align: center;
  border: 1px solid #333399;
}

input[type='submit'],
a.button,
a.button:link,
a.button:visited,
button {
  border-color: #333399;
  color: #fdfcf7;
  background-color: #333399;
  border-radius: 2em;
  text-align: center;
  text-transform: uppercase;
  width: auto;
  transition: opacity 0.25s;
  font-weight: 500;
}

button:hover,
input[type='submit']:hover {
  background-color: #333399;
}

a:hover {
  color: #333399;
}

input[type='radio'] + label:hover,
input[type='checkbox'] + label:hover {
  color: #333399;
}

textarea {
  border: 1px solid #333399;
  background-color: #fdfcf7;
  color: #333399;
  padding: 1em;
}

label {
  font-weight: bolder;
}

label + * {
  margin: 0.4em 0;
}

.long {
  width: 100%;
}

.long p {
  font-size: 70%;
}

.long,
.second {
  clear: none;
  margin-bottom: 1.5vh !important;
}

input[type='radio'],
input[type='checkbox'] {
  display: none;
}

input[type='radio'] + label,
input[type='checkbox'] + label {
  padding-left: 1.25em;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

input[type='radio'] + label::before,
input[type='checkbox'] + label::before {
  border: 1px solid #333399;
  color: transparent;
  content: '';
  text-align: center;
  cursor: pointer;
  position: absolute;
  width: 0.7em;
  height: 0.7em;
  display: inline-block;
  top: 0.35em;
  left: 0;
}

input[type='radio'] + label::before {
  border-radius: 100px;
}

input[type='radio']:checked + label::before,
input[type='checkbox']:checked + label::before {
  background-color: #333399;
}

.error {
  color: #ff0000 !important;
  border-color: #ff0000 !important;
}

input.error + label::before,
input.error + label,
input.error + label *,
textarea.error + label,
textarea.error + label * {
  border-color: #ff0000 !important;
  color: #ff0000 !important;
}

form .error::-webkit-input-placeholder {
  color: #ff0000;
}

form .error::-moz-placeholder {
  color: #ff0000;
}

form .error:-ms-input-placeholder {
  color: #ff0000;
}

form .error::-ms-input-placeholder {
  color: #ff0000;
}

form .error::placeholder {
  color: #ff0000;
}

input:valid:not(.error):not([type='submit']) {
  border-color: #333399;
  color: #333399;
}

input[name='h8pt'] {
  display: none;
}

.mandatory {
  color: #333399;
  font-size: 70%;
  text-align: right;
}

.mandatorysmall {
  font-size: 70% !important;
  text-align: right;
}

.only-mobile label {
  display: none;
}

#searchform input {
  border-bottom: 1px solid;
  background-color: transparent;
  font-size: 136%;
  line-height: 1.85;
  font-weight: 500;
  margin-right: 0.25em;
  transition: width 0.6s cubic-bezier(0, 0, 0, 1);
  width: 0;
}

#searchform:hover input {
  width: 54%;
}

#search input {
  border-bottom: 1px solid;
  padding: 0;
}

/*
    responsive
                */
@media only screen and (max-width: 900px) {
  html,
  body {
    font-size: 100%;
  }

  .container,
  footer > div {
    padding: 3vw 0 0;
  }

  article {
    flex-direction: column-reverse;
  }

  header,
  .home article,
  footer {
    flex-direction: column;
  }

  #ghplab-v2 {
    width: 94vw;
    margin: 0 0 5vw 6vw;
    padding-top: 20vh;
  }

  #navicon {
    display: block;
    position: fixed;
    top: 6.7vw;
    right: 2vw;
    z-index: 15;
  }

  #navicon::before {
    color: #333399;
    font-family: 'icomoon';
    font-size: min(6vw, 2.5rem);
    content: '\e902';
  }

  /*#navicon.closed::before {
    content: "\e902";
  }*/
  #navicon.open::before {
    color: #333399;
    /*content: "\e903";*/
  }

  header #navicon + nav {
    background-color: #fdfcf7;
    position: fixed;
    width: 90vw;
    height: 100vh;
    left: calc(100vw + 1em);
    top: 0;
    padding: calc(10vw + 5em) 12vw calc(6vw + 4em) 10vw;
    z-index: 10;
    justify-content: space-between;
    box-shadow: -1em 1em 1em -0.5em rgba(60, 64, 60, 0.2);
    transition: left 0.15s ease-in;
  }

  header #navicon.open + nav {
    left: 10vw;
    transition: left 0.25s ease-out;
  }

  header div,
  section,
  aside {
    width: 100%;
  }

  header nav a {
    font-size: 160%;
    margin-top: 0 !important;
  }

  .language {
    font-size: 110%;
    position: relative;
    top: 0;
    right: 0;
    margin: 0 0 3vh !important;
    -ms-flex-item-align: end;
    align-self: flex-end;
  }

  .social {
    font-size: 135%;
    width: 98%;
  }

  #ughent {
    position: relative;
  }

  header figure {
    width: 100%;
    padding: 0 6vw 6vw;
    min-height: 40vh;
    border-radius: 0 0 2rem 0;
  }

  #ovv {
    background: url('../images/OVV-logo-RGB.svg') no-repeat 6vw top / min(65%, 22em);
    padding-top: min(23%, 8em);
  }

  header figcaption {
    font-size: 190%;
  }

  article {
    padding: 0 0 8vw;
  }

  .intro {
    width: 100% !important;
    padding: 1vw 5vw 6vw 6vw !important;
    margin: 0 !important;
    float: left !important;
  }

  .intro::before {
    font-size: 96%;
    line-height: 1.9;
  }

  .date {
    margin-bottom: 3vw;
  }

  .intro > div {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
  }

  section figure {
    width: 48vw !important;
    margin: 1.333em 0 2vh !important;
    display: inline-block;
  }

  .intro img {
    width: 36vw;
    height: auto;
    margin: 0 0 2vh 0.1em;
  }

  aside {
    padding: 4vw 5vw 0 6vw;
  }

  aside p {
    font-size: 100%;
  }

  .filters {
    display: none;
  }

  .filters.yearFilters {
    display: flex;
  }

  .navPublications {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .content {
    margin: 5vw 4vw 4vw 6vw;
  }

  .content h1 {
    font-size: 165%;
  }

  .content h2,
  .content p {
    text-align: left;
  }

  .content figure {
    position: relative;
    left: 0;
  }

  .content figure + p {
    margin-top: 0;
  }

  .content figure img,
  .content .button {
    float: left;
    clear: both;
  }

  .img-container {
    margin: 0 1.66em 1em 0;
  }

  .social.share {
    width: 65vw;
    padding: 0 7vw 6.5vh;
  }

  section > .actions {
    padding-left: 6vw;
  }

  .mosaic.staff > div,
  .mosaic.operation > div {
    width: 88vw !important;
    margin-right: 0 !important;
  }

  .mosaic.members > div {
    width: 41vw;
    margin-bottom: 4vw !important;
  }

  footer > div {
    padding: 8vw 6vw 0;
    flex-direction: column-reverse;
  }

  footer nav {
    width: 100%;
    padding-bottom: 10vw;
    flex-direction: column;
  }

  .address,
  footer nav a {
    font-size: 100%;
    margin-bottom: 5vw;
  }

  .scroll_btn,
  #lightbox figure div {
    height: 68vh !important;
  }

  #lightbox figure span,
  #lightbox figcaption,
  #lightbox > * > * {
    height: 16vh;
  }

  #cookies .txtblock {
    padding: 6vw;
  }

  #cookies .choices {
    margin-top: 6vw;
  }

  #cookies a.button {
    width: 100%;
  }

  #cookies a.button + a.button {
    margin-top: 6vw;
  }
}

.fade {
  animation: fadein 0.5s ease-out;
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hide {
  display: none;
  opacity: 0;
}

.show {
  display: flex;
}