:root {
  color-scheme: light dark;
  --hex-dark-blue: #002147;
  --hex-grey-blue: #4D6A7F;
  --hex-white: #FFFFFF;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}
*:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #4D6A7F;
}

body.mouse *:focus,
body.mouse *:focus-visible,
body.mouse *:focus:before,
body.mouse *:focus:after {
  outline: none !important;
  box-shadow: none !important;
}

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

html, body {
  overscroll-behavior-x: none;
}

html {
  margin-top: 0 !important;
  font-size: 62.5%;
  scroll-behavior: smooth;
  /*
  // background overflow colouring
  &:before {
      z-index: -2;
      content: '';
      pointer-events: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, $black 250px, transparent 250px);

  body {
      position: relative;
      &:before {
          z-index: -1;
          content: '';
          pointer-events: none;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background light-dark(white, $grey-blue);
      }
  }
  */
}

#wpadminbar {
  transition: background 0.3s ease-in-out;
}
#wpadminbar:not(:hover) {
  background: rgba(0, 0, 0, 0.5);
}

body {
  line-height: 1;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6rem;
  font-variant-numeric: lining-nums;
  color: #002147;
  color: light-dark(#002147, #FFFFFF);
  background: #FFFFFF;
  background: light-dark(#FFFFFF, #002147);
}
body.light {
  color-scheme: light;
}
body.dark {
  color-scheme: dark;
}
body.notrans *,
body.notrans *:before,
body.notrans *:after {
  transition: 0s 0s !important;
}

button, input, select, textarea {
  font-family: inherit;
}

h1, h2, h3, h4, h5, h6, a, p.kicker {
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5em;
  font-style: normal;
  text-wrap: balance;
}
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {
  margin-bottom: 0;
}

h1 {
  font-size: 3.2rem;
  font-size: clamp(3.2rem, 6vw + 1.6rem, 8rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.h1 {
  font-weight: 400;
  text-transform: none;
}
.h1 strong {
  font-weight: 500;
}

h2, .h2 {
  font-size: 2.8rem;
  font-size: clamp(2.8rem, 4vw + 1.6rem, 5rem);
  font-weight: 400;
  line-height: 1.1;
}
h2 strong, .h2 strong {
  font-weight: 500;
}

h3, .h3 {
  font-size: 2.4rem;
  font-size: clamp(2.4rem, 3vw + 1.6rem, 3.6rem);
  font-weight: 500;
  line-height: 1.1;
}
h3.name strong, .h3.name strong {
  display: block;
  font-size: 0.83em;
  font-weight: 400;
}

h4, .h4 {
  font-size: 2rem;
  font-size: clamp(2rem, 3vw + 1.6rem, 3rem);
  line-height: 1.1;
}

h5, .h5 {
  font-size: 1.8rem;
  font-size: clamp(1.8rem, 3vw + 1.6rem, 2rem);
  line-height: 1.1;
}

h6, .h6 {
  font-size: 1.4rem;
  font-size: clamp(1.4rem, 3vw + 1.6rem, 1.8rem);
  line-height: 1.1;
}

p, li, address {
  font-size: clamp(1.6rem, 3vw + 1.6rem, 1.8rem);
  font-style: normal;
  line-height: 1.4;
  text-wrap: pretty;
}

p strong {
  font-weight: 500;
}
p:not(:last-child) {
  margin-bottom: 1em;
}
p:empty {
  display: none;
}
p.intro {
  font-size: clamp(2rem, 3vw + 1.6rem, 2.5rem);
  line-height: 1.2;
}
p.name {
  margin-top: 1em;
  line-height: 1.2;
  font-size: 2.2rem;
}
p.name strong {
  font-size: 0.8182em;
  font-weight: 600;
}
p.kicker {
  padding: 0.333em 0.666em;
  display: inline-flex;
  margin-bottom: 0.667em;
  align-items: center;
  font-size: clamp(1.6rem, 2vw + 1rem, 2rem);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  color: #002147;
  background: #FFFFFF;
}
p.kicker a:not(:hover) {
  text-underline-offset: 6px;
  text-decoration-color: transparent;
}
p.kicker a:hover {
  text-underline-offset: 3px;
  text-decoration-color: inherit;
}

ol.newsletter {
  list-style-type: none;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media screen and (min-width: 370px) and (max-width: 539px) {
  ol.newsletter {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 540px) {
  ol.newsletter {
    grid-template-columns: repeat(4, 1fr);
  }
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-underline-offset 0.3s ease-in-out, text-decoration-color 0.3s ease-in-out;
}
a.td-none {
  text-decoration: none;
}
a:hover {
  text-underline-offset: 6px;
  text-decoration-color: transparent;
}

li strong {
  font-weight: 500;
}

main {
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 320px;
  overflow-x: clip;
}

dl.accordion {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: 40px;
  padding-block: clamp(40px, 5vw, 80px);
  padding-inline: 20px;
}
dl.accordion dt {
  z-index: 0;
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding-left: 60px;
}
dl.accordion dt button {
  cursor: pointer;
  display: flex;
  align-items: center;
  min-height: 60px;
  width: 100%;
  max-width: 800px;
  margin: auto;
  padding: 10px;
  font-size: 1.8rem;
  font-weight: 500;
  text-align: left;
}
dl.accordion dt button:before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  background: #BACED9;
  background: light-dark(#BACED9, transparent);
  border-color: transparent;
  border-color: light-dark(transparent, #FFFFFF);
  transition: 0.3s ease-in-out;
}
dl.accordion dt button:after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 15px;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: no-repeat center;
  background-color: #FFFFFF;
  background-image: url(/lib/media/icon-arrow-darkblue.svg);
  transform: rotate(90deg);
  transition: 0.3s ease-in-out;
}
dl.accordion dt button[aria-expanded=true]:before {
  background: #A2BECC;
  background: light-dark(#A2BECC, transparent);
}
dl.accordion dt button[aria-expanded=true]:after {
  transform: rotate(-90deg);
}
dl.accordion dt:hover button:before {
  background: #A2BECC;
  background: light-dark(#A2BECC, transparent);
}
dl.accordion dd {
  margin-top: -20px;
}
dl.accordion dd > * {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease-in-out;
}
dl.accordion dd > section {
  background: none !important;
}
dl.accordion dd[hidden] {
  display: block;
  height: 0;
  overflow: clip;
}
dl.accordion dd[hidden] > * {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 0.6s, opacity 0.6s ease-in-out;
}
@media screen and (min-width: 880px) {
  dl.accordion dt {
    padding-right: 60px;
  }
  dl.accordion dt button {
    justify-content: center;
  }
}

.accordion.bg-white {
  background: #FFFFFF;
  background: light-dark(#FFFFFF, #4D6A7F);
}

section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  gap: clamp(20px, 5vw, 40px);
  padding-block: 40px;
  padding-block: clamp(40px, 5vw, 80px);
  padding-inline: 20px;
  padding-inline: clamp(20px, 5vw, 40px);
}
section.fullwidth > div {
  max-width: none;
}
section.bg-darkblue {
  color: #FFFFFF;
  background: #002147;
}
section.bg-greyblue {
  color: #FFFFFF;
  background: #4D6A7F;
}
section.bg-lighterblue {
  background: #BACED9;
}
section.bg-white:not(.event):not(.sec-papers):not(.archive):not(.bg-dark-none) {
  color: #002147;
  color: light-dark(#002147, #FFFFFF);
  background: #FFFFFF;
  background: light-dark(#FFFFFF, #4D6A7F);
}
section.bg-white:not(.event):not(.sec-papers):not(.archive):not(.bg-dark-none) .kicker {
  color: #FFFFFF;
  background: #4D6A7F;
  font-weight: 500;
}
section.bg-white:not(.event):not(.sec-papers):not(.archive):not(.bg-dark-none) + .accordion {
  background: #FFFFFF;
  background: light-dark(#FFFFFF, #4D6A7F);
}
section > div,
section > header,
section > footer {
  width: 100%;
  max-width: 1280px;
  margin: auto;
}
section > header {
  display: flex;
  flex-direction: column;
}
section > header:not(.align-l):not(.align-r) > div > * {
  text-wrap: balance !important;
}

picture {
  background: #000;
}
picture img {
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
}

figure.img:before,
figure.video:before,
picture[class*=ratio]:before {
  z-index: 1;
  pointer-events: none;
  position: relative;
  content: "";
  display: block;
  width: 100%;
  margin-left: -100%;
  background: pink;
}

picture[class*=ratio] {
  position: relative;
}
picture[class*=ratio] img {
  position: absolute;
  top: 0;
  left: 0;
}

figure.video,
figure.img {
  overflow: clip;
  position: relative;
  width: 100%;
  background: #000;
}
figure.video[hidden],
figure.img[hidden] {
  display: none !important;
}
figure.video video,
figure.video iframe,
figure.video picture,
figure.video figcaption,
figure.video button:before,
figure.img video,
figure.img iframe,
figure.img picture,
figure.img figcaption,
figure.img button:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
figure.video video,
figure.video iframe,
figure.video picture,
figure.img video,
figure.img iframe,
figure.img picture {
  -o-object-fit: cover;
     object-fit: cover;
}
figure.video figcaption,
figure.img figcaption {
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 0.3s opacity ease-in-out;
}
figure.video figcaption > span,
figure.img figcaption > span {
  width: 100%;
  margin-top: auto;
  padding: 0 20px 20px 20px;
  font-size: 1.6rem;
}
figure.video figcaption strong,
figure.img figcaption strong {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  font-size: 2rem;
  font-weight: 500;
}
figure.video figcaption button:not(:only-child),
figure.img figcaption button:not(:only-child) {
  margin-top: auto;
}
figure.video figcaption button.enlarge,
figure.img figcaption button.enlarge {
  position: absolute;
  bottom: 10px;
  bottom: clamp(10px, 5vw, 20px);
  right: 10px;
  right: clamp(10px, 5vw, 20px);
}
figure.video figcaption button.enlarge + span,
figure.img figcaption button.enlarge + span {
  padding-right: 40px;
  padding-right: clamp(40px, 5vw, 80px);
}

.sec-media figure.video picture,
.sec-media figure.video iframe,
.sec-media figure.video video,
.sec-textmedia figure.video picture,
.sec-textmedia figure.video iframe,
.sec-textmedia figure.video video {
  z-index: 1;
}

figure.map {
  position: relative;
  aspect-ratio: 3/2;
}
figure.map iframe {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
figure.map:after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 20px;
  left: -20px;
  width: 100%;
  height: 100%;
  background: #BACED9;
}
figure.video:before {
  min-height: 280px;
}
figure.video figcaption {
  z-index: 21;
  padding-top: 40px;
  color: #FFFFFF;
}
figure.video figcaption .play {
  height: 60px;
  width: 80px;
  text-indent: 80px;
}
figure.video figcaption .play span {
  margin-left: -80px;
}
figure.video figcaption .play:before {
  z-index: -1;
  content: "";
  backdrop-filter: blur(10px);
  background: rgba(0, 33, 71, 0.5);
}
figure.video figcaption .play ~ * {
  pointer-events: none;
}
figure.video video.playing + figcaption button:before, figure.video video[data-play=auto] + figcaption button:before {
  backdrop-filter: none;
  background: none;
}
figure.video video.playing:not([data-play=auto]) + figcaption {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;
}
figure.video picture.poster {
  z-index: 1;
  pointer-events: none;
  transition: 0.3s ease-in-out;
}
figure.video picture.poster.hidden {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;
}
figure.video .but.pause {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
}
figure.video .but.pause + span {
  padding-right: 80px;
}
figure.quote {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
figure.quote blockquote {
  position: relative;
  padding: 30px 20px;
  border: 2px solid #4D6A7F;
  border-bottom: 0;
  border-color: #4D6A7F;
  border-color: light-dark(#4D6A7F, #FFFFFF);
}
figure.quote blockquote strong {
  font-weight: 500;
}
figure.quote blockquote:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  /*background-image: linear-gradient(
      to right, 
      $grey-blue 0%, $grey-blue calc(100% - 70px), // line from left to 60px from right
      transparent calc(100% - 70px), transparent calc(100% - 30px), // 30px gap
      $grey-blue calc(100% - 30px), $grey-blue 100% // new 30px line
  );*/
  background-repeat: no-repeat;
  background-position-y: bottom;
}
figure.quote blockquote:after {
  content: "";
  position: absolute;
  top: calc(100% - 2px);
  right: 30px;
  width: 40px;
  height: 40px;
  background: url(/lib/media/quote-bottom.svg) no-repeat;
  background-size: contain;
}
figure.quote figcaption {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 40px;
  padding-right: 90px;
  font-weight: 500;
}
figure.quote:not(.small) p {
  font-size: 2rem;
  font-size: clamp(2rem, 4vw + 1.6rem, 3rem);
  line-height: 1.2;
  font-weight: 300;
}

body.light figure.quote blockquote:before {
  background-image: linear-gradient(to right, #4D6A7F 0%, #4D6A7F calc(100% - 70px), transparent calc(100% - 70px), transparent calc(100% - 30px), #4D6A7F calc(100% - 30px), #4D6A7F 100%);
}
body.dark blockquote:before {
  background-image: linear-gradient(to right, #FFFFFF 0%, #FFFFFF calc(100% - 70px), transparent calc(100% - 70px), transparent calc(100% - 30px), #FFFFFF calc(100% - 30px), #FFFFFF 100%);
}
body.dark blockquote:after {
  background-image: url(/lib/media/quote-bottom-white.svg);
}

button {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  font-size: 1.6rem;
}
button[hidden] {
  pointer-events: none;
  opacity: 0.5;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.but-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 10px 20px;
  border-radius: 25px;
  border: 2px solid transparent;
  line-height: 0.9;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease-in-out;
  background: #4D6A7F;
  background: light-dark(#4D6A7F, #FFFFFF);
  color: #FFFFFF;
  color: light-dark(#FFFFFF, #4D6A7F);
}
.but-solid:hover {
  border-color: transparent;
  border-color: light-dark(transparent, #FFFFFF);
  background: #002147;
  background: light-dark(#002147, transparent);
  color: #FFFFFF;
  color: light-dark(#FFFFFF, #FFFFFF);
}

.but {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
.but span {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
.but span:before, .but span:after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent no-repeat center;
  background-size: contain;
}
.but span:before {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;
}
.but span:after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}
.but:hover span:before {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}
.but:hover span:after {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;
}
.but.play span {
  overflow: hidden;
}
.but.play span:before {
  background-image: url(/lib/media/icon-video-outline.svg);
}
.but.play span:after {
  background-image: url(/lib/media/icon-video-solid.svg);
}
.but.x, .but.linkedin {
  width: 40px;
  height: 40px;
  text-indent: 40px;
  white-space: nowrap;
  overflow: hidden;
  background: no-repeat center;
  background-size: contain;
}
.but.x:hover, .but.linkedin:hover {
  opacity: 0.5;
}
.but.x {
  background-image: url(/lib/media/but-x-white.svg);
}
.but.linkedin {
  background-image: url(/lib/media/but-linkedin-white.svg);
}
.but.pause, .but.prev, .but.next, .but.close, .but.open, .but.enlarge {
  z-index: 1;
  width: 40px;
  height: 40px;
}
.but.pause span, .but.prev span, .but.next span, .but.close span, .but.open span, .but.enlarge span {
  border: 2px solid #FFFFFF;
  background: #FFFFFF;
  text-indent: 40px;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
.but.pause span:before, .but.prev span:before, .but.next span:before, .but.close span:before, .but.open span:before, .but.enlarge span:before {
  filter: brightness(0) invert(1);
}
.but.pause span:after, .but.prev span:after, .but.next span:after, .but.close span:after, .but.open span:after, .but.enlarge span:after {
  filter: none;
}
.but.pause:hover span, .but.prev:hover span, .but.next:hover span, .but.close:hover span, .but.open:hover span, .but.enlarge:hover span {
  background: transparent;
}
.but.close span, .but.open span, .but.enlarge span {
  display: block;
}
.but.close span:before, .but.close span:after, .but.open span:before, .but.open span:after, .but.enlarge span:before, .but.enlarge span:after {
  background-image: url(/lib/media/icon-open-darkblue.svg);
}
.but.prev span:before, .but.prev span:after, .but.next span:before, .but.next span:after {
  background-image: url(/lib/media/icon-arrow-darkblue.svg);
}
.but.prev span:before, .but.prev span:after {
  transform: rotate(180deg);
}
.but.close span:before, .but.close span:after {
  transform: rotate(45deg);
}
.but.pause[aria-pressed=false] span:before {
  background-image: url(/lib/media/icon-pause.svg);
  filter: brightness(0) invert(1);
}
.but.pause[aria-pressed=false] span:after {
  background-image: url(/lib/media/icon-pause.svg);
}
.but.pause[aria-pressed=true] span:before {
  background-image: url(/lib/media/icon-play.svg);
  filter: brightness(0) invert(1);
}
.but.pause[aria-pressed=true] span:after {
  background-image: url(/lib/media/icon-play.svg);
}
.but.view span {
  min-height: 40px;
  padding-left: 50px;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: 0.3s ease-in-out;
}
.but.view span:before, .but.view span:after {
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: no-repeat center;
}
.but.view span:before {
  background-image: url(/lib/media/icon-arrow-white.svg);
}
.but.view span:after {
  background-color: #FFFFFF;
  background-image: url(/lib/media/icon-arrow-greyblue.svg);
}
body.light section.bg-white .but.view:not(.maintain) span {
  text-decoration-color: #002147;
  text-decoration-color: light-dark(#002147, #FFFFFF);
  color: #002147;
  color: light-dark(#002147, #FFFFFF);
}
body.light section.bg-white .but.view:not(.maintain) span:before {
  border-color: #002147;
  border-color: light-dark(#002147, #FFFFFF);
  background-color: transparent;
  background-image: url(/lib/media/icon-arrow-darkblue.svg);
}
body.light section.bg-white .but.view:not(.maintain) span:after {
  border-color: #002147;
  border-color: light-dark(#002147, #FFFFFF);
  background-color: #002147;
  background-color: light-dark(#002147, #FFFFFF);
  background-image: url(/lib/media/icon-arrow-white.svg);
}

.but.view:not(:hover) span {
  text-underline-offset: 6px;
  text-decoration-color: transparent !important;
}
.but.solid, .but.outline {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  min-width: 90px;
  padding: 10px 20px;
  line-height: 1;
  border-radius: 4px;
  border: 2px solid #FFFFFF;
  text-transform: uppercase;
  text-align: center;
}
.but.solid.white {
  color: #4D6A7F;
  background: #FFFFFF;
}
.but.solid.white:hover {
  color: #FFFFFF;
  background: transparent;
}
.but.outline.white {
  color: #FFFFFF;
}
.but.outline.white:hover {
  color: #4D6A7F;
  background: #FFFFFF;
}

body.light .but.open span {
  border-color: #4D6A7F;
  background: #4D6A7F;
}
body.light .but.open span:before {
  filter: none;
}
body.light .but.open span:after {
  filter: brightness(0) invert(1);
}
body.light .but.open:hover span {
  border-color: #002147;
  background: none;
}

.pos-t,
.pos-b {
  position: absolute !important;
  left: 50%;
  width: 100%;
  max-width: none;
  transform: translateX(-50%);
}

.pos-t {
  top: 0;
}

.pos-b {
  bottom: 0;
}

.align-l {
  text-align: left;
}

.align-c {
  text-align: center;
}

.align-r {
  text-align: right;
}

.mt-0,
.my-0 {
  margin-top: 0;
}

.mb-0,
.my-0 {
  margin-bottom: 0;
}

.ml-auto,
.mx-auto {
  margin-left: auto;
}

.mr-auto,
.mx-auto {
  margin-right: auto;
}

.p0 {
  padding: 0;
}

.pt-0,
.py-0 {
  padding-top: 0;
}

.pb-0,
.py-0 {
  padding-bottom: 0;
}

.gap-0 {
  gap: 0;
}

.ratio-fs:before {
  height: 100vh;
  height: 100dvh;
}

.ratio-1x1:before {
  aspect-ratio: 1/1;
}

.ratio-4x3:before {
  aspect-ratio: 4/3;
}

.ratio-3x2:before {
  aspect-ratio: 3/2;
}

.ratio-16x9:before {
  aspect-ratio: 16/9;
}

.ratio-21x9:before {
  aspect-ratio: 21/9;
}

.ratio-2x1:before {
  aspect-ratio: 21/1;
}

.sr-only {
  pointer-events: none;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.socials {
  display: flex;
  gap: 10px;
}

.social {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-left: 50px;
}
.social:before,
.social span:before,
.social span:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  background: no-repeat center;
  background-size: contain;
  transition: 0.3s ease-in-out;
}
.social:before {
  border: 2px solid transparent;
}
.social.youtube span:before, .social.youtube span:after {
  background-image: url(/lib/media/logo-youtube-darkblue.svg);
}
.social.linkedin span:before, .social.linkedin span:after {
  background-image: url(/lib/media/logo-linkedin-darkblue.svg);
}
.social {
  /*    &:hover {
          @include light-dark(border-color, $dark-blue, $white);
          background: none;
      }*/
}

body.light .socialspan:after {
  opacity: 1;
}
body.light .social:hover span:after {
  opacity: 0;
}

body.dark .socialspan:after {
  opacity: 0;
}
body.dark .social:hover span:after {
  opacity: 1;
}

#menu .social {
  color: #FFFFFF;
  transition: 0.3s ease-in-out;
}
#menu .social:before {
  border: 2px solid #FFFFFF;
}
#menu .social span:before {
  filter: brightness(0) invert(1);
}
#menu .social.linkedin span:before,
#menu .social.linkedin span:after {
  background-image: url(../media/logo-linkedin-greyblue.svg);
}
#menu .social.youtube span:before,
#menu .social.youtube span:after {
  background-image: url(../media/logo-youtube-greyblue.svg);
}
#menu .social:hover {
  color: rgba(255, 255, 255, 0.5);
}
#menu .social:not(:hover):before {
  background: #FFFFFF;
}

#foot .socials {
  flex-direction: column;
  gap: 15px;
}
#foot .social:before {
  background: #002147;
  background: light-dark(#002147, #FFFFFF);
}
#foot .social:hover:before {
  background: #4D6A7F;
  background: light-dark(#4D6A7F, #FFFFFF);
}

body.light #foot .social span:before,
body.light #foot .social span:after {
  filter: brightness(0) invert(1);
}

::-moz-placeholder {
  color: #FFFFFF;
  -moz-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

::placeholder {
  color: #FFFFFF;
  transition: 0.3s ease-in-out;
}

.field {
  display: flex;
  align-items: center;
}
.field label {
  width: 100%;
}

label {
  position: relative;
}
label.icon input,
label.icon select {
  padding-left: 45px !important;
}
label.icon:after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 5px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  background: no-repeat center;
  background-size: contain;
}
label.search input, label.filter select {
  padding-right: 50px !important;
}
label.search input:not(:-moz-placeholder) {
  background: #EE0000;
}
label.search input:not(:placeholder-shown) {
  background: #EE0000;
}
label.search:after {
  background-image: url(/lib/media/icon-search.svg);
}
label.filter select:valid {
  background: #EE0000;
}
label.filter:after {
  background-image: url(/lib/media/icon-filter.svg);
}

textarea,
select,
input {
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 500;
  transition: 0.3s ease-in-out;
}

select,
input:not([type=checkbox]):not([type=radio]) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 50px;
  width: 100%;
  padding: 0 20px;
  border-radius: 25px;
  color: #FFFFFF;
  background: #4D6A7F;
}

select:hover,
input:hover {
  color: rgba(255, 255, 255, 0.5);
}

input:hover::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

input:hover::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
input:hover::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
input:hover::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

[type=search]::-webkit-search-decoration, [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-results-button, [type=search]::-webkit-search-results-decoration {
  display: none;
}

.cky-consent-bar {
  border-radius: 0 !important;
}

.cky-overlay {
  opacity: 0.9 !important;
  background: #002147 !important;
}

.cky-accordion .cky-accordion-chevron i::before {
  border-width: 1px !important;
  transform: rotate(-45deg) scale(2) !important;
}
.cky-accordion.cky-accordion-active .cky-accordion-chevron i::before {
  transform: rotate(45deg) scale(2) translate(0, -2px) !important;
}

.cky-notice {
  max-width: 1280px;
  margin-inline: auto;
}

.cky-notice .cky-title,
.cky-preference-header .cky-preference-title {
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 2rem !important;
  color: #002147 !important;
}

.cky-audit-table .cky-empty-cookies-text {
  font-size: 1.4rem !important;
  font-weight: 500 !important;
}

.cky-accordion-btn {
  font-weight: 600 !important;
  color: #002147 !important;
}

.cky-accordion .cky-accordion-chevron i::before {
  border-color: #4D6A7F !important;
}

.cky-audit-table {
  background-color: #BACED9 !important;
}

.cky-btn-close {
  position: relative;
  width: 35px !important;
  height: 40px !important;
}
.cky-btn-close:before, .cky-btn-close:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: 0.3s ease-in-out !important;
}
.cky-btn-close:after {
  filter: brightness(0) invert(1);
  opacity: 0;
}
.cky-btn-close img {
  display: none !important;
}
.cky-btn-close:hover:before {
  opacity: 0;
}
.cky-btn-close:hover:after {
  opacity: 1;
}

.cky-always-active,
.cky-show-desc-btn {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #4D6A7F !important;
}

.cky-prefrence-btn-wrapper,
.cky-notice-btn-wrapper {
  gap: 10px;
}

.cky-btn {
  margin: 0 !important;
  padding: 10px 20px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  font-weight: 550 !important;
  transition: 0.3s ease-in-out !important;
  border-radius: 4px !important;
}
.cky-btn.cky-btn-customize {
  opacity: 1 !important;
  border-color: #4D6A7F !important;
  color: #4D6A7F !important;
}
.cky-btn.cky-btn-customize:hover {
  color: #FFFFFF !important;
  background: #4D6A7F !important;
}
.cky-btn.cky-btn-reject, .cky-btn.cky-btn-accept, .cky-btn.cky-btn-preferences {
  color: #FFFFFF !important;
  background: #4D6A7F !important;
  border-color: #4D6A7F !important;
}
.cky-btn.cky-btn-reject:hover, .cky-btn.cky-btn-accept:hover, .cky-btn.cky-btn-preferences:hover {
  opacity: 1 !important;
  color: #4D6A7F !important;
  background: none !important;
}

.cky-btn-revisit-wrapper {
  background-color: #4D6A7F !important;
  border: 2px solid #FFFFFF !important;
}

#head a,
nav ul:not(#contact) > li > a {
  text-decoration: none;
}

dialog,
#menu {
  display: block !important;
  position: fixed !important;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  background: #333;
  overscroll-behavior: contain;
  overflow-y: auto;
  overflow-x: clip;
}
dialog[hidden],
#menu[hidden] {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;
}
dialog:not([hidden]),
#menu:not([hidden]) {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}

dialog {
  z-index: 101;
}

#menu {
  z-index: 99;
  background: none;
  background: rgba(0, 33, 71, 0.9);
}
#menu > div {
  z-index: 0;
  position: relative;
  max-width: 1360px;
  min-height: 100%;
  margin: auto;
  display: flex;
}
#menu li {
  list-style-type: none;
}
#menu ul {
  width: 100%;
  max-width: 450px;
  display: block;
  padding: 180px 40px 40px 40px;
}
#menu ul ul {
  position: absolute;
  top: 0;
  left: 100%;
  height: 100%;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}
#menu ul ul[hidden] {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;
}
#menu a[target=_blank]:not(.social):before {
  content: "External Link";
  display: block;
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 5px;
}
#menu .lv1 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 400px;
}
#menu .lv1 > li > a:not(.social),
#menu .lv1 > li > button {
  display: inline-flex;
  text-align: left;
  line-height: 0.85;
  font-size: 4.5rem;
  font-weight: 500;
  color: #FFFFFF;
  transition: 0.3s ease-in-out;
}
#menu .lv1 > li > a:not(.social):not([aria-expanded=true]):hover,
#menu .lv1 > li > button:not([aria-expanded=true]):hover {
  color: rgba(255, 255, 255, 0.5);
}
#menu .lv2 {
  z-index: -1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 350px;
  transition-delay: 0.6s;
}
#menu .lv2:not(#contact) a,
#menu .lv2:not(#contact) button {
  line-height: 0.85;
  font-size: 3rem;
  font-weight: 500;
  color: #FFFFFF;
  transition: 0.3s ease-in-out;
}
#menu .lv2:not(#contact) a:hover,
#menu .lv2:not(#contact) button:hover {
  opacity: 0.5;
}
#menu #contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #FFFFFF;
}
#menu #contact a {
  color: inherit;
}
#menu #contact address {
  margin-bottom: 10px;
  color: #FFFFFF;
}
#menu #contact span {
  display: block;
  font-weight: 600;
  text-transform: uppercase;
}
#menu .socials {
  margin-top: auto;
}
#menu div.pixelize {
  pointer-events: none;
}
#menu div.pixelize.l1 {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 750px;
  height: 100%;
  /*TEST            &:before { // left side fill
                  z-index: -1;
                  content: '';
                  position: fixed;
                  top: 0;
                  left: calc((100vw - 1360px) / 2);
                  width: calc((100vw - 1360px) / 2);
                  height: 100%;
                  transform: translateX(-100%);
                  background: $grey-blue;
                  transition: opacity .5s 0s ease-in-out;
              }*/
}
#menu div.pixelize.l2 {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 750px;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
@media only screen and (min-width: 960px) {
  #menu div.pixelize.l2, #menu div.pixelize.l1 {
    width: round(750px + (100vw - 1360px) / 2, 50px);
  }
  #menu div.pixelize.l2 {
    transform: translateX(150px);
  }
}
@media only screen and (min-width: 1360px) {
  #menu div.pixelize.l2, #menu div.pixelize.l1 {
    left: calc(0px - (100vw - 1360px) / 2);
  }
}
@media only screen and (max-width: 799px) {
  #menu {
    overflow-y: auto;
    overflow-x: clip;
  }
  #menu .l1,
  #menu .l2 {
    display: none;
  }
  #menu .lv1,
  #menu .lv2 {
    width: 100%;
    max-width: none;
    background: #4D6A7F;
  }
  #menu .lv1 {
    transition: transform 0.6s ease-in-out;
  }
  #menu .lv2 {
    z-index: 1;
    transition-delay: 0s;
  }
  #menu:has([aria-expanded=true]) .lv1 {
    transform: translateX(-100%);
  }
}

body.submenu-open #menu .lv1 > li > a:not(.social),
body.submenu-open #menu .lv1 > li > button[aria-expanded=false] {
  color: #3D5465;
}
body.submenu-open #menu .lv1 > li > a:not(.social):hover,
body.submenu-open #menu .lv1 > li > button[aria-expanded=false]:hover {
  color: rgba(255, 255, 255, 0.5);
}
body.submenu-open #menu .l2 {
  opacity: 1;
}

body:not(.menu-open) #menu .lv1 {
  opacity: 0;
  transition-delay: 0.3s;
  transition-duration: 0s;
}
body:not(.menu-open) #menu .l1:before {
  opacity: 0;
}

#head {
  z-index: 100;
  pointer-events: none;
  display: flex;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
  width: 100%;
  max-width: 1440px;
}
#head a, #head button {
  pointer-events: auto;
}

#search-close,
#head button {
  position: absolute;
  display: flex;
  align-items: center;
  border-radius: 50%;
  overflow: clip;
  white-space: nowrap;
  text-indent: 100vw;
}

#skip {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  line-height: 1;
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 500;
  color: #FFFFFF;
}
#skip:not(:focus) {
  pointer-events: none;
  opacity: 0;
}

#logo {
  display: block;
  width: 130px;
  height: 130px;
  width: clamp(100px, 20vw, 130px);
  height: clamp(100px, 20vw, 130px);
  margin-right: auto;
  overflow: clip;
  white-space: nowrap;
  text-indent: 100vw;
}
#logo:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1);
  background: url(/lib/media/logo-omi-outline-darkblue.svg) no-repeat;
  background-size: contain;
}

#search-close {
  position: relative;
  width: 50px;
  min-width: 50px;
  height: 50px;
  overflow: visible;
}
#search-close:after,
#search-close span:before,
#search-close span:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
}
#search-close:after {
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 4px solid #FFFFFF;
  border-radius: 50%;
  transition: 0.3s ease-in-out;
}
#search-close:hover:after {
  transform: translate(-50%, -50%) scale(1.2);
  border-width: 3px;
}
#search-close span {
  overflow: hidden;
}
#search-close span:before, #search-close span:after {
  width: 28px;
  height: 2px;
  background: #FFFFFF;
}
#search-close span:before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
#search-close span:after {
  transform: translate(-50%, -50%) rotate(45deg);
}

#search {
  padding: 40px 20px;
  background: none;
}
#search:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #4D6A7F;
  transition: opacity 0.6s 1s linear;
}
#search search {
  max-width: 1050px;
  margin: 0 auto;
  transition: opacity 0.6s 1s ease-in-out;
}
#search search form {
  position: relative;
  width: 100%;
  display: flex;
  gap: 20px;
}
#search search label {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  display: flex;
  align-items: center;
  font-weight: 500;
}
#search search label,
#search search input {
  padding: 0 20px;
  color: #4D6A7F;
}
#search search input {
  background: #FFFFFF;
}
#search search input:required:valid + label {
  opacity: 0;
}

body:not(.search-open) #search:before,
body:not(.search-open) #search search {
  opacity: 0;
  transition-delay: 0s;
}

#search-status {
  pointer-events: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 50px;
  width: calc(100% - 70px);
  margin-top: -50px;
  padding-right: 20px;
  font-weight: 500;
  color: #4D6A7F;
}

#search-canvas {
  z-index: -1;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#head {
  position: sticky;
  top: -170px;
  height: 170px;
  flex-direction: column;
  gap: 13px;
  align-items: flex-end;
}
#head > div {
  position: fixed;
  top: 20px;
  width: 140px;
  height: 130px;
}
#head button:before,
#head button:after,
#head button span:before,
#head button span:after {
  content: "";
  position: absolute;
  transition: 0.3s ease-in-out;
  transform-origin: center;
}

#main {
  margin-top: -170px;
}

#menu-toggle,
#mode-toggle,
#search-toggle {
  overflow: visible !important;
  transition: 0.3s ease-in-out;
}
#menu-toggle span,
#mode-toggle span,
#search-toggle span {
  overflow: hidden;
}
#menu-toggle:after,
#mode-toggle:after,
#search-toggle:after {
  z-index: -1;
}
#menu-toggle:hover,
#mode-toggle:hover,
#search-toggle:hover {
  border-color: #FFFFFF;
}
#menu-toggle.on-white:after,
#mode-toggle.on-white:after,
#search-toggle.on-white:after {
  background: rgba(255, 255, 255, 0.9);
}

#menu-toggle {
  top: 20px;
  right: 0;
  width: 70px;
  height: 70px;
}
#menu-toggle:before,
#menu-toggle span:after,
#menu-toggle span:before {
  top: 50%;
  left: 50%;
  width: 32px;
  border-top: 2px solid #FFFFFF;
  margin: -6px 0 0 0;
}
#menu-toggle span:before {
  background: #FFFFFF;
  transform: translate(-16px, -8px);
}
#menu-toggle span:after {
  background: #FFFFFF;
  transform: translate(-16px, 8px);
}
#menu-toggle:before {
  content: "Menu" !important;
  margin-left: -16px;
  padding-top: 12px;
  text-indent: 0;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #FFFFFF;
}
#menu-toggle:after {
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 3px solid #A2BECC;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
#menu-toggle.on-white:before,
#menu-toggle.on-white span:before,
#menu-toggle.on-white span:after {
  border-color: #002147;
}
#menu-toggle.on-white:before {
  color: #002147;
}
#menu-toggle.on-white:hover {
  border-color: #002147;
}
#menu-toggle:hover:before {
  transition-delay: 0.3s;
}
#menu-toggle:hover span:before {
  transform: translate(-16px, 0);
}
#menu-toggle:hover span:after {
  transform: translate(-16px, 0);
}
#menu-toggle:hover:after {
  transform: translate(-50%, -50%) scale(1.25);
  border-width: 2px;
}
body.menu-open #menu-toggle:before {
  transition-duration: 0s;
  transition-delay: 0s;
}
body.menu-open #menu-toggle span:before {
  width: 28px;
  transform: translateX(-14px) rotate(45deg);
}
body.menu-open #menu-toggle span:after {
  width: 28px;
  transform: translateX(-14px) rotate(-45deg);
}
body.menu-open #menu-toggle:before {
  border-color: transparent;
}

#mode-toggle {
  bottom: 0;
  left: 22px;
  width: 52px;
  height: 52px;
}
#mode-toggle:before, #mode-toggle:after,
#mode-toggle span:before,
#mode-toggle span:after {
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background: no-repeat center;
}
#mode-toggle span {
  overflow: hidden;
}
#mode-toggle span:before {
  background-image: url(/lib/media/mode-sun-darkblue.svg);
}
#mode-toggle span:after {
  background-image: url(/lib/media/mode-moon-darkblue.svg);
}
#mode-toggle:before {
  z-index: 1;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
}
#mode-toggle:after {
  border-radius: 50%;
  border: 6px solid #A2BECC;
}
#mode-toggle:not(.on-white) span:before, #mode-toggle:not(.on-white) span:after {
  filter: brightness(0) invert(1);
}
#mode-toggle.on-white:before {
  background: #002147;
}
#mode-toggle.on-white:hover {
  border-color: #002147;
}
#mode-toggle:hover:after {
  transform: translate(-50%, -50%) scale(1.3);
  border-width: 4px;
}
body.light #mode-toggle span:after {
  transform: translate(-50%, -50%) scale(0.3);
}

body.dark #mode-toggle span:before {
  transform: translate(-50%, -50%) scale(0);
}
body.dark #mode-toggle:before {
  transform: translate(-50%, -50%) scale(0);
}

#search-toggle {
  z-index: 9000;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
}
#search-toggle:before {
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -8px 0 0 -4px;
  border-radius: 50%;
}
#search-toggle:after {
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 4px solid #A2BECC;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
#search-toggle span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: -2px 0 0 -2px;
  transform: rotate(45deg);
  transition: 0.3s ease-in-out;
}
#search-toggle span:before {
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
}
#search-toggle span:after {
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 10px;
  border-radius: 1px;
  background: #FFFFFF;
}
#search-toggle.on-white span:after {
  background: #002147;
}
#search-toggle.on-white span:before {
  border-color: #002147;
}
#search-toggle.on-white:hover {
  border-color: #002147;
}
#search-toggle:hover:after {
  transform: translate(-50%, -50%) scale(1.3);
  border-width: 3px;
}

#enlarge-close {
  position: absolute;
  top: 20px;
  right: 20px;
}

search.list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
search.list .but.clear {
  z-index: 1;
  width: 40px;
  height: 40px;
  margin: 0 5px 0 -45px;
  border-radius: 50%;
  overflow: clip;
  white-space: nowrap;
  text-indent: 100vw;
}
search.list .but.clear[hidden] {
  visibility: hidden;
}
search.list .but.clear {
  background: url(/lib/media/icon-clear.svg) no-repeat;
}
@media only screen and (max-width: 519px) {
  search.list .field {
    width: 100%;
  }
}
@media only screen and (min-width: 520px) {
  search.list .field {
    flex: 1;
  }
}

body.menu-open, body.search-open, body.enlarge-open {
  overflow: hidden;
}
body.menu-open #logo,
body.menu-open #search-toggle,
body.menu-open #mode-toggle {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;
}

#foot {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-block: 20px;
  padding-block: clamp(20px, 5vw, 40px);
  padding-inline: 20px;
  padding-inline: clamp(20px, 5vw, 40px);
}
#foot > div {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1280px;
  margin: auto;
}
#foot > div > ul {
  gap: 20px 40px;
}
#foot ul {
  display: flex;
}
#foot ul ul {
  flex-direction: column;
  gap: 20px;
}
#foot li, #foot address {
  font-size: 1.6rem;
  line-height: 1.2;
}
#foot li {
  list-style-type: none;
}
#foot li strong {
  display: block;
}
#foot #top {
  display: none;
}
#foot #omi,
#foot #uofo,
#foot #support {
  display: block;
  text-indent: 100vw;
  white-space: nowrap;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: contain;
}
#foot #support {
  width: 94px;
  height: 90px;
  background-image: url(/lib/media/logos-supported-by-darkblue.svg);
  background-size: auto 100%;
}
@media only screen and (max-width: 429px) {
  #foot #info > li:nth-child(3) {
    width: 100% !important;
  }
}
@media only screen and (max-width: 1099px) {
  #foot #info {
    flex-wrap: wrap;
  }
  #foot #info:before {
    content: "";
    display: block;
    width: 100%;
  }
  #foot #info > li:nth-child(-n+2) {
    order: -1;
  }
  #foot #info #support {
    max-width: 240px;
  }
}
@media only screen and (min-width: 520px) and (max-width: 1099px) {
  #foot #info address {
    display: flex;
    flex-wrap: wrap;
    gap: 0 5px;
  }
  #foot #info ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
  #foot #info > li:nth-child(3) {
    order: -2;
    flex-grow: 1;
    width: calc(100% - 280px);
  }
  #foot #info > li:nth-child(4) {
    width: calc(100% - 280px);
  }
}
@media only screen and (min-width: 1100px) {
  #foot #info > li {
    flex-shrink: 0;
  }
  #foot #info #support {
    flex-shrink: 1;
    margin-left: auto;
  }
}
#foot #copy {
  flex-wrap: wrap;
  gap: 10px 20px;
}
#foot #copy li {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 500;
}
#foot #copy a:not(:hover) {
  text-underline-offset: 2px;
}
@media only screen and (max-width: 374px) {
  #foot #copy > :last-child {
    width: 100%;
    margin-top: 10px;
  }
}
@media only screen and (min-width: 520px) {
  #foot #copy > :last-child {
    margin-left: auto;
  }
}
@media only screen and (max-width: 799px) {
  #foot #copy > :first-child {
    width: 100%;
  }
}
#foot #omi,
#foot #uofo {
  width: 110px;
  height: 110px;
  transition: none;
}
#foot #omi {
  margin-left: -20px;
  background-image: url(/lib/media/logo-omi-outline-darkblue.svg);
}
#foot #uofo {
  position: relative;
  background-image: url(/lib/media/logo-university-of-oxford.svg);
}
#foot #uofo:after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-color: #002147;
  border-color: light-dark(#002147, transparent);
}
#foot #redbot {
  display: flex;
  align-items: center;
  gap: 5px;
}
#foot #redbot span {
  display: inline-block;
  width: 40px;
  height: 23px;
  text-indent: 50px;
  white-space: nowrap;
  overflow: hidden;
  background: url(/lib/media/logo-redbot-darkblue.svg) no-repeat center;
  background-size: contain;
}
#foot strong {
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
}
#foot address {
  margin-bottom: 10px;
}
#foot address strong {
  width: 100%;
}
#foot address span {
  display: block;
}
#foot address span:not(:last-child):after {
  content: ",";
}

#info > li {
  margin-bottom: auto;
}
#info > li:first-child {
  background-color: #002147;
  background-color: light-dark(#002147, transparent);
}

.close {
  margin-left: 50px;
}
.close:only-child {
  margin-left: auto;
}

#subscribe {
  color: #FFFFFF;
  background: rgba(77, 106, 127, 0.6);
  backdrop-filter: blur(50px);
  padding: 80px 20px 40px 20px;
}
#subscribe .pixelize {
  z-index: -1;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#subscribe > header {
  margin-bottom: 40px;
  text-align: center;
}
#subscribe > div {
  overflow-x: clip;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 40px;
  padding-inline: 20px;
  padding-inline: clamp(20px, 5vw, 40px);
  transition: background 0s 0.6s linear;
}
#subscribe > div > :not(.pixelize) {
  opacity: 0;
  transition: opacity 0.3s 0.6s ease-in-out;
}
#subscribe form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#subscribe form [aria-hidden=true] {
  position: absolute;
  top: 0;
  left: 100%;
}
#subscribe .req {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  margin-top: -60px;
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 600;
  color: #002147;
}
#subscribe .req span,
#subscribe label span {
  order: -1;
  transform: translateY(-2px);
  font-size: 24px;
}
#subscribe .field {
  flex-direction: column;
  gap: 10px;
}
#subscribe label {
  display: flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  text-align: left;
  color: #002147;
  font-size: 1.8rem;
  font-weight: 600;
}
#subscribe input {
  font-weight: 500;
}
#subscribe input::-moz-placeholder {
  color: #4D6A7F;
}
#subscribe input::placeholder {
  color: #4D6A7F;
}
#subscribe input::-webkit-input-placeholder {
  color: #002147;
}
#subscribe input {
  transition: 0.3s ease-in-out;
}
#subscribe input[type=submit] {
  text-transform: uppercase;
  margin-top: 20px;
}
#subscribe input.mce_inline_error {
  border-color: #EE0000 !important;
}
#subscribe input:not([type=submit]) {
  border: 2px solid #4D6A7F;
  font-weight: 400;
  color: #4D6A7F;
  background: none;
}
#subscribe #mce-success-response {
  font-size: 1.8rem;
  line-height: 1.2;
}
#subscribe #mce-success-response:not(:empty) ~ .field {
  cursor: not-allowed;
}
#subscribe #mce-success-response:not(:empty) ~ .field [type=submit] {
  opacity: 0.5;
  pointer-events: none;
}

#subscribe-close {
  margin-left: auto;
}
#subscribe-close span {
  background: #002147;
  border: 2px solid #002147;
}
#subscribe-close span::before {
  filter: none;
}
#subscribe-close span::after {
  filter: brightness(0) invert(1);
}
#subscribe-close span:hover {
  background: none;
}

#subscribe-open {
  display: inline-flex;
  align-items: center;
  margin: auto;
  gap: 10px;
  text-transform: uppercase;
  font-size: 2.8rem;
  font-weight: 500;
}
#subscribe-open em {
  font-style: normal;
}
@media only screen and (max-width: 319px) {
  #subscribe-open .but-solid {
    font-size: 2.4rem;
    min-height: 40px;
  }
  #subscribe-open em {
    display: none;
  }
}
@media screen and (max-width: 374px) {
  #subscribe-open {
    margin-left: 0;
  }
}

body.dark #subscribe-open .but-solid:not(:hover) {
  color: #002147;
}
body.subscribe-open #subscribe > div {
  background: #FFFFFF;
}
body.subscribe-open #subscribe > div > :not(.pixelize) {
  opacity: 1;
}
body.dark #omi,
body.dark #support,
body.dark #redbot span {
  filter: brightness(0) invert(1);
}

.txt {
  padding: 20px;
}
.txt h2 {
  margin-bottom: 20px;
  font-size: 1.5em;
  font-weight: 600;
}

.text {
  display: flex;
  flex-direction: column;
}
.text.align-c {
  align-items: center;
}
.text.align-c .kicker {
  margin-inline: auto;
}
.text .quote:only-child {
  margin: auto;
}
.text address {
  margin-bottom: 1em;
}
.text .contact {
  margin-block: auto;
}
.text .contact span {
  display: block;
  text-transform: uppercase;
  font-size: 1.6rem;
  font-weight: 550;
}
.text ul {
  list-style-type: square;
  padding-left: 20px;
}
.text ul:not(:last-child) {
  margin-bottom: 1.5em;
}
.text ul li {
  line-height: 1.2;
}
.text ul li:not(:last-child) {
  margin-bottom: 10px;
}
.text ul strong {
  font-weight: 500;
}
@media screen and (min-width: 600px) {
  .text ul.twocol {
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-gap: 40px;
         column-gap: 40px;
  }
}

.sec-text {
  position: relative;
}
.sec-text header {
  text-align: center;
}
.sec-text .text p.kicker {
  margin-right: auto;
}
.sec-text > div {
  display: flex;
  -moz-column-gap: 20px;
       column-gap: 20px;
  -moz-column-gap: clamp(20px, 5vw, 40px);
       column-gap: clamp(20px, 5vw, 40px);
  row-gap: 20px;
  row-gap: clamp(20px, 5vw, 30px);
}
.sec-text.bg-img {
  padding-block: 80px;
}
.sec-text.bg-img:after {
  z-index: 2;
  content: "";
  pointer-events: none;
  position: absolute;
  top: 80px;
  bottom: 80px;
  width: 100%;
  backdrop-filter: blur(40px);
  left: 50%;
  transform: translatex(-50%);
  width: calc(100% - clamp(20px, 5vw, 40px));
  max-width: 1360px;
  background-color: rgba(0, 33, 71, 0.3);
  background-size: auto 175px;
}
.sec-text.bg-img > .img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
}
.sec-text.bg-img > .img ~ * {
  z-index: 3;
  padding-block: 20px;
  padding-block: clamp(20px, 5vw, 40px);
  color: #FFFFFF;
}
.sec-text.bg-img > .img ~ *:last-child {
  padding-top: 0;
}
.sec-text.bg-img > .img + * {
  padding-bottom: 0;
}
.sec-text.bg-img header {
  position: relative;
  text-align: left;
}
@media only screen and (min-width: 980px) {
  .sec-text.bg-img header > div {
    position: relative;
    max-width: 50%;
    max-width: calc((100% - clamp(20px, 5vw, 40px)) / 2);
    min-height: 175px;
  }
  .sec-text.bg-img header > div:after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: -40px;
    left: 100%;
    left: calc(100% + clamp(20px, 5vw, 40px));
    width: round(nearest, 100%, 50px);
    height: 250px;
    background: url(/lib/media/pixelized-lightbluegrey.svg) top right no-repeat;
    background-size: auto 250px;
  }
}
@media only screen and (min-width: 1400px) {
  .sec-text.bg-img header > div:after {
    left: 720px;
  }
}
.sec-text .text {
  width: calc((100% - clamp(20px, 5vw, 40px)) / 2);
}
.sec-text .text:only-child {
  width: 100%;
  max-width: 950px;
  margin-inline: auto;
  /*>* {
      margin-left: auto;
      margin-right: auto;
  }*/
}
.sec-text.col-1 .text:not(.align-l):not(.align-r) p.intro:only-child {
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .sec-text > div {
    flex-direction: column;
  }
  .sec-text .text {
    width: 100%;
  }
}
@media only screen and (min-width: 769px) {
  .sec-text.staggered > div {
    flex-direction: column;
  }
  .sec-text.staggered .text:first-child {
    margin-right: auto;
  }
  .sec-text.staggered .text:last-child {
    margin-left: auto;
  }
  .sec-text.split-66 .text:first-child {
    width: 65%;
  }
  .sec-text.split-66 .text:last-child {
    width: 35%;
    min-width: 240px;
  }
}

.sec-textmedia img {
  opacity: 1 !important;
}
.sec-textmedia.temp {
  border-bottom: 120px solid transparent;
  border-color: #FFFFFF;
  border-color: light-dark(#FFFFFF, #4D6A7F);
}
.sec-textmedia.temp ~ section:not(:last-of-type) {
  border-bottom: 40px solid transparent;
  border-color: #FFFFFF;
  border-color: light-dark(#FFFFFF, #4D6A7F);
}
.sec-textmedia.temp {
  /*&:after { // bg extender
      z-index: -1;
      content: '';
      pointer-events: none;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 120px;
      background: inherit;
  }*/
}
.sec-textmedia > div {
  display: flex;
  -moz-column-gap: clamp(20px, 5vw, 40px);
       column-gap: clamp(20px, 5vw, 40px);
  row-gap: 40px;
}
.sec-textmedia > div.valign-c {
  align-items: center;
}
.sec-textmedia .text .kicker {
  margin-right: auto;
}
.sec-textmedia .img,
.sec-textmedia .video,
.sec-textmedia > div:before {
  margin-bottom: auto;
}
.sec-textmedia .video:after {
  content: "";
  z-index: 21;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #4D6A7F;
}
.sec-textmedia .img {
  z-index: 0;
  overflow: visible !important;
}
.sec-textmedia .img:before {
  z-index: -1;
  margin-left: 0 !important;
}
.sec-textmedia .img:after {
  content: "";
  z-index: -1;
  pointer-events: none;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100%;
  height: 100%;
  background: #BACED9;
}
.sec-textmedia .img.bg-top:after {
  top: -20px;
}
.sec-textmedia.reorder .text {
  order: -1;
}
.sec-textmedia.reorder .img:after {
  left: -20px;
}
.sec-textmedia.featured {
  color: #FFFFFF;
  background: none;
}
.sec-textmedia.featured > div {
  background: #4D6A7F;
}
.sec-textmedia.featured > div:after {
  content: "";
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 345px;
  height: 200px;
  transform: scaleY(-1);
  background: url(../media/pixelized-lightbluegrey.svg) no-repeat;
  background-size: auto 250px;
  background-position: -685px -100px;
}
.sec-textmedia.featured .text {
  z-index: 1;
  padding: 40px 0 40px 40px;
}
.sec-textmedia.featured .text .img {
  top: 0;
}
.sec-textmedia.featured .text .img:after {
  display: none;
}
.sec-textmedia.featured .actions {
  margin-top: auto;
}
@media only screen and (max-width: 979px) {
  .sec-textmedia > div {
    flex-direction: column;
  }
  .sec-textmedia > div > .img,
  .sec-textmedia > div > .video {
    max-width: 620px;
    margin-inline: auto;
  }
  .sec-textmedia .text:only-child {
    flex-grow: 1;
  }
  .sec-textmedia .text .img,
  .sec-textmedia .text .video {
    max-width: 620px;
    width: calc(100% - 20px);
    margin: 20px auto 60px auto;
  }
  .sec-textmedia .text .img + h2,
  .sec-textmedia .text .img + h3,
  .sec-textmedia .text .video + h2,
  .sec-textmedia .text .video + h3 {
    order: -1;
  }
  .sec-textmedia .text .img + .kicker,
  .sec-textmedia .text .video + .kicker {
    order: -2;
  }
  .sec-textmedia .text .img + .kicker + h2,
  .sec-textmedia .text .img + .kicker + h3,
  .sec-textmedia .text .video + .kicker + h2,
  .sec-textmedia .text .video + .kicker + h3 {
    order: -1;
  }
  .sec-textmedia .text .img,
  .sec-textmedia .text .video {
    /*&.bg-top {
        margin: $pad-hlf auto;
    }
    &.bg-bot {
        margin: 0 auto $pad auto;
    }*/
  }
  .sec-textmedia.reorder .text .img,
  .sec-textmedia.reorder .text .video {
    transform: translateX(10px);
  }
  .sec-textmedia:not(.reorder) .text .img,
  .sec-textmedia:not(.reorder) .text .video {
    transform: translateX(-10px);
  }
}
@media only screen and (min-width: 980px) {
  .sec-textmedia .text,
  .sec-textmedia .img,
  .sec-textmedia .video,
  .sec-textmedia > div:before {
    width: calc((100% - clamp(20px, 5vw, 40px)) / 2);
  }
  .sec-textmedia > div[class*=ratio-] {
    position: relative;
  }
  .sec-textmedia > div[class*=ratio-]:before {
    content: "";
    pointer-events: none;
  }
  .sec-textmedia > div[class*=ratio-] .img,
  .sec-textmedia > div[class*=ratio-] .video {
    position: absolute;
    top: -20px;
  }
  .sec-textmedia.reorder > div > .video {
    right: 0;
  }
  .sec-textmedia.reorder .text .img,
  .sec-textmedia.reorder .text .video {
    right: 0;
  }
  .sec-textmedia:not(.reorder) > div > .video {
    left: 0;
  }
  .sec-textmedia:not(.reorder) .text .img,
  .sec-textmedia:not(.reorder) .text .video {
    left: 0;
  }
}
@media only screen and (min-width: 1440px) {
  .sec-textmedia:not(.featured) .img {
    width: calc((100% - clamp(20px, 5vw, 40px)) / 2 + 20px);
  }
  .sec-textmedia.featured .img {
    width: calc((100% - clamp(20px, 5vw, 40px)) / 2);
  }
  .sec-textmedia .video {
    width: calc((100% - clamp(20px, 5vw, 40px)) / 2 + 40px);
  }
  .sec-textmedia:not(.reorder) .img {
    margin-left: -20px;
    transform: translateX(-20px);
  }
  .sec-textmedia:not(.reorder) .video {
    margin-left: -40px;
  }
  .sec-textmedia.reorder:not(.featured) .img {
    margin-right: -20px;
    transform: translateX(20px);
  }
  .sec-textmedia.reorder:not(.featured) .video {
    margin-right: -40px;
  }
}

.sec-hero {
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 0;
}
.sec-hero:before, .sec-hero.scroll:after {
  content: "";
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
}
.sec-hero:before {
  z-index: 10;
  height: 100%;
  background-image: linear-gradient(to bottom, #000000, transparent 210px);
  opacity: 0.5;
}
.sec-hero > div {
  position: relative;
  max-width: none;
  margin: 0 0 0 -100%;
  padding-top: 170px;
  padding-bottom: 80px;
  padding-inline: clamp(20px, 5vw, 40px);
  text-align: center;
}
.sec-hero .text {
  position: relative;
  z-index: 21;
  max-width: 1280px;
  margin: auto;
}
.sec-hero .kicker {
  margin-inline: auto;
}
.sec-hero figure {
  width: 100%;
  max-width: none;
}
.sec-hero figure.ratio-min + div, .sec-hero figure.ratio-mid + div {
  z-index: 21;
}
.sec-hero figure.ratio-min:before {
  aspect-ratio: 21/9;
  min-height: 420px;
  max-height: 480px;
}
.sec-hero figure.ratio-mid:before {
  aspect-ratio: 16/9;
  min-height: 420px;
  max-height: 620px;
}
.sec-hero figure iframe {
  left: 50%;
  transform: translateX(-50%);
  min-width: 100vw;
  min-height: 100%;
  width: auto;
  height: auto;
  aspect-ratio: 16/9;
  background: #002147;
}
.sec-hero figcaption {
  z-index: 2;
  pointer-events: none;
}
.sec-hero figcaption span {
  padding: 0 0 20px 0 !important;
}
.sec-hero figcaption > * {
  pointer-events: auto;
}
.sec-hero .video figcaption {
  left: 50%;
  transform: translateX(-50%);
  max-width: 1360px;
  padding-inline: clamp(20px, 5vw, 40px);
}
.sec-hero .video .but.pause {
  position: unset;
  margin: auto 10px 20px auto;
}
.sec-hero .video .but.pause:before {
  display: none;
}
.sec-hero.scroll .text {
  position: relative;
  min-height: 100%;
}
.sec-hero.scroll .text:after {
  z-index: 21;
  content: "Scroll";
  pointer-events: none;
  position: absolute;
  right: 0;
  bottom: -80px;
  height: 150px;
  padding: 10px 10px 0 0;
  border-right: 2px solid #FFFFFF;
  text-transform: uppercase;
  text-align: right;
  font-size: 1.4rem;
  font-weight: 600;
  color: #FFFFFF;
  transition: opacity 0.3s ease-in-out;
}
.sec-hero.titled:before {
  display: none;
}
.sec-hero.titled > div {
  margin-left: 0;
}
.sec-hero.titled .text {
  color: #FFFFFF;
}
.sec-hero.bg-greyblue .kicker {
  color: #4D6A7F;
}
.sec-hero .subheader {
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: 500;
}
@media screen and (max-width: 599px) {
  .sec-hero.scroll .text:after {
    display: none;
  }
}

body #logo,
body #menu-toggle:after,
body #mode-toggle:after,
body #search-toggle:after {
  will-change: backdrop-filter;
}
body.scrolled #logo,
body.scrolled #menu-toggle:after,
body.scrolled #mode-toggle:after,
body.scrolled #search-toggle:after {
  backdrop-filter: blur(5px);
}
body.scrolled .sec-hero .pause,
body.scrolled .sec-hero .text:after {
  pointer-events: none;
  opacity: 0;
}
body:not(.scrolled) .sec-hero.video canvas,
body:not(.scrolled) .sec-hero.vimeo canvas,
body:not(.scrolled) .sec-hero.youtube canvas {
  visibility: hidden;
}
body.news .sec-hero h1 {
  text-transform: none;
  font-size: clamp(3.2rem, 4vw + 1.6rem, 6rem);
  font-weight: 500;
}
body.home .sec-hero .text {
  display: flex;
  height: 100%;
}
body.home .sec-hero h1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  line-height: 0.95;
}
body.home .sec-hero h1 strong {
  z-index: 21;
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 20px auto;
  text-align: right;
  font-size: 3.2rem;
  font-size: clamp(6.4rem, 7vw + 1.6rem, 11rem);
}
body.home .sec-hero h1 span {
  margin-right: auto;
  padding: 0.4em 0.7em;
  font-size: 6rem;
  font-size: clamp(2.6rem, 3vw + 1.6rem, 6rem);
  text-align: left;
  color: #002147;
  background: #FFFFFF;
}
body.home .sec-hero h1 span:first-of-type {
  z-index: 22;
}
body.home .sec-hero h1 span + span {
  z-index: 21;
  margin-top: -0.5em;
}
body.cvent_event .sec-hero .subheader {
  font-size: 3rem;
}
body.cvent_event #detail header div {
  max-width: 950px;
  width: 100%;
  margin-inline: auto;
  text-align: left;
}
body.cvent_event #detail > div {
  max-width: 950px;
}
body.cvent_event #detail strong {
  font-weight: 500;
}
body.cvent_event #detail address {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 0.25em;
       column-gap: 0.25em;
}
body.cvent_event #detail address:not(:last-child) {
  margin-bottom: 20px;
}
body.cvent_event #detail address strong {
  width: 100%;
}
body.cvent_event #detail address span:not(:last-child):after {
  content: ",";
}

.sec-media header {
  text-align: center;
}
.sec-media.video > div {
  max-width: 880px;
}
.sec-media.video figure.video {
  overflow: visible;
}
.sec-media.video figure.video:before {
  transform: translate(20px, 20px);
  margin-left: 0;
  background: #BACED9;
}
.sec-media.gallery > div {
  display: grid;
  gap: 20px;
  gap: clamp(20px, 5vw, 40px);
}
.sec-media.gallery figcaption > span {
  height: 100%;
  align-items: flex-end;
  display: flex;
  color: #FFFFFF;
  background: rgba(0, 33, 71, 0.5);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: 0.3s ease-in-out;
}
.sec-media.gallery figcaption:hover > span {
  opacity: 1;
}
.sec-media.gallery .img img {
  transition: 0.3s ease-in-out;
}
.sec-media.gallery .img:not(:hover) img {
  transform: scale(1.05);
}
@media only screen and (min-width: 752px) and (max-width: 1119px) {
  .sec-media.gallery > div {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 1120px) {
  .sec-media.gallery > div {
    grid-template-columns: repeat(3, 1fr);
  }
}

body .news .sec-media.feature .img:before {
  min-height: 650px;
}

body:not(.mouse) .sec-people .but.open {
  transform: translateX(-4px);
}

.sec-people #list-status {
  display: block !important;
  margin-bottom: 10px;
}
.sec-people #list-status:empty:before {
  content: attr(data-empty);
}
.sec-people > div {
  display: grid;
  gap: 20px;
  gap: clamp(20px, 5vw, 40px);
  gap: 40px 20px;
  grid-template-columns: repeat(1, 1fr);
}
.sec-people .person {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: none;
}
.sec-people .person[hidden] {
  order: 1;
  visibility: hidden !important;
  display: flex !important;
}
.sec-people .person picture {
  overflow: hidden;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  background: none;
}
.sec-people .person picture img {
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.3s ease-in-out;
  filter: grayscale(100%);
}
.sec-people .person figcaption {
  position: unset;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  height: auto;
}
.sec-people .person figcaption span {
  padding: 0;
  margin: 0;
}
.sec-people .person .but.open {
  order: 1;
  height: 40px;
  width: 40px;
  min-width: 40px;
  margin: 0 !important;
}
.sec-people .person .but.open:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sec-people .person h3 {
  line-height: 1.2;
  font-size: 1.8rem;
  font-weight: 500;
}
.sec-people .person h3 strong {
  margin-bottom: 5px;
  font-size: 2.4rem;
  font-weight: 600;
}
.sec-people .person.placeholder:before {
  transform: translateX(100%);
  background: rgba(77, 106, 127, 0.1) url(../media/pixelized-lightbluegrey.svg) no-repeat;
  background-size: auto 250px;
  background-position: -860px -50px;
}
.sec-people .person.placeholder:nth-of-type(odd):before {
  transform: rotate(90deg) scaleX(-1) translateY(-100%);
  background-position: -920px -50px;
}
.sec-people .person:not(:hover) .img img {
  transform: scale(1.05);
}
.sec-people dialog {
  color: #FFFFFF;
  background: rgba(77, 106, 127, 0.4);
  backdrop-filter: blur(50px);
  padding: 80px 20px 40px 20px;
}
.sec-people dialog .pixelize {
  z-index: -1;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sec-people dialog > div {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 40px;
  padding-inline: 20px;
  padding-inline: clamp(20px, 5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: background 0s 0.6s linear;
}
.sec-people dialog > div > div:not(.pixelize) {
  opacity: 0;
}
.sec-people dialog > div > div:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sec-people dialog > div > div:nth-child(2) {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0;
  border-top: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
}
.sec-people dialog > div > div:nth-child(2) div {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.sec-people dialog > div > div:nth-child(2) ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.sec-people dialog > div > div:nth-child(2) li {
  list-style-type: none;
  display: flex;
}
.sec-people dialog > div > div:nth-child(2) h4 {
  font-size: 3rem;
  font-weight: 500;
}
.sec-people dialog > div > div:nth-child(2) h4 strong {
  font-size: 5rem;
  font-weight: 400;
}
.sec-people dialog > div > div:nth-child(2) h4 strong + strong {
  font-weight: 600;
}
.sec-people dialog > div > div:nth-child(2) h4 span {
  display: block;
}
@media only screen and (max-width: 629px) {
  .sec-people dialog > div > div:nth-child(2) div {
    align-items: center;
  }
  .sec-people dialog > div > div:nth-child(2) h4 {
    text-align: center;
  }
}
@media only screen and (min-width: 630px) {
  .sec-people dialog > div > div:nth-child(2) {
    flex-direction: row;
  }
  .sec-people dialog > div > div:nth-child(2) h4 strong {
    display: block;
  }
  .sec-people dialog > div > div:nth-child(2) h4 strong + strong {
    margin-top: -10px;
  }
  .sec-people dialog > div > div:nth-child(2) picture {
    order: 1;
  }
  .sec-people dialog > div > div:nth-child(2) li:nth-child(2):nth-last-child(3) {
    width: calc(100% - 50px);
  }
}
.sec-people dialog h5 {
  font-size: 3rem;
  font-weight: 400;
}
.sec-people dialog ul.me {
  display: flex;
  gap: 20px;
}
.sec-people dialog ul.me li {
  z-index: 0;
  position: relative;
  list-style-type: none;
  margin: 0 auto;
  max-width: 200px;
  padding-top: 60px;
  text-align: center;
}
.sec-people dialog ul.me p {
  line-height: 1.2;
  font-size: 1.6rem;
}
.sec-people dialog ul.me h6 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  min-width: 160px;
  line-height: 1;
  padding: 5px 10px;
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 600;
  color: #4D6A7F;
  background: #FFFFFF;
}
.sec-people dialog ul.me h6:before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #FFFFFF no-repeat center;
  background-size: auto 40px;
}
.sec-people dialog ul.me h6.heart:before {
  background-image: url(/lib/media/icon-heart.svg);
}
.sec-people dialog ul.me h6.location:before {
  background-image: url(/lib/media/icon-location.svg);
}
.sec-people dialog ul.me h6.book:before {
  background-image: url(/lib/media/icon-book.svg);
}
@media only screen and (max-width: 629px) {
  .sec-people dialog ul.me {
    flex-wrap: wrap;
  }
  .sec-people dialog ul.me h6 {
    display: inline-flex;
  }
  .sec-people dialog ul.me li:last-child {
    width: 100%;
  }
}
@media only screen and (min-width: 630px) {
  .sec-people dialog ul.me li {
    flex: 1;
  }
}
.sec-people dialog nav {
  display: flex;
  gap: 10px;
}
.sec-people dialog .close {
  margin-left: 50px;
}
.sec-people dialog .close:only-child {
  margin-left: auto;
}
.sec-people dialog picture {
  position: relative;
  max-width: 290px;
  margin: auto;
}
.sec-people:not(.filtering) .person,
.sec-people:not(.filtering) #list-status {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}
.sec-people.filtering .person,
.sec-people.filtering #list-status {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;
}
.sec-people.archive header {
  order: -10;
}
.sec-people.archive .person .open.hide {
  display: none;
}
.sec-people.archive.filtered .description {
  order: -1;
}
.sec-people.archive:not(.filtered):not(.searched) .description.unfiltered {
  grid-column: span 1;
  display: block;
}
.sec-people.archive:not(.filtered):not(.searched) .description.unfiltered:not(:first-of-type) {
  grid-column-start: 1;
}
.sec-people.archive:not(.filtered):not(.searched) .description.unfiltered h3 {
  display: flex;
  align-items: center;
  aspect-ratio: 1/1;
  padding: 20px;
  font-weight: 400;
  color: #FFFFFF;
  background: #4D6A7F;
}
.sec-people.archive:not(.filtered):not(.searched) .description.unfiltered h3 ~ * {
  display: none;
}
@media only screen and (min-width: 480px) {
  .sec-people .span-2 {
    grid-column: span 2;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .sec-people > div {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .sec-people > div {
    grid-template-columns: repeat(3, 1fr);
  }
  .sec-people > div div.span-2 + figure {
    margin-top: -80px;
  }
}
@media only screen and (min-width: 1000px) {
  .sec-people > div {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sec-people dialog > div {
  transition: background 0s 0.9s linear;
}
.sec-people dialog > div > div:not(.pixelize) {
  transition: opacity 0.6s 0.9s ease-in-out;
}

body.dark .sec-people {
  background: #002147;
}
body.dark .sec-people .person.placeholder:before {
  border: 2px solid #A2BECC;
}
body.profile-open .sec-people dialog > div {
  background: #4D6A7F;
}
body.profile-open .sec-people dialog > div > div:not(.pixelize) {
  opacity: 1;
}

.sec-people.people > header {
  text-align: center;
}

.sec-feed.news > header h2, .sec-feed.latest > header h2 {
  margin-bottom: 0;
}
.sec-feed.news > header .actions, .sec-feed.latest > header .actions {
  margin-left: auto;
}
.sec-feed.event > div > div {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1/1;
  padding: 20px;
  color: #FFFFFF;
  background: #4D6A7F;
}
.sec-feed.event header {
  text-align: center;
}
.sec-feed.event .kicker {
  margin-right: auto;
  font-size: 1.8rem;
}
.sec-feed.event .actions {
  margin-top: auto;
}
.sec-feed.event .h4 {
  font-size: clamp(2rem, 3vw + 1.6rem, 2.8rem);
}
.sec-feed:not(.event) > div {
  max-width: 1360px;
}
.sec-feed figure {
  display: flex;
  overflow: hidden;
}
.sec-feed figure img {
  transition: 0.3s ease-in-out;
}
.sec-feed figure:not(:hover) img {
  transform: scale(1.05);
}
.sec-feed figure {
  /*&.placeholder {
      background: transparent;
      &:before {
          transform: translateX(100%);
          background: rgba($grey-blue, .1) url(../media/pixelized-lightbluegrey.svg) no-repeat;
          background-size: auto 250px;
          background-position: -860px -50px;
      }
      figcaption {
          z-index: 1;
      }
      h3 {
          backdrop-filter: none;
      }
      &:nth-of-type(odd):before {
          transform: rotate(90deg) scaleX(-1) translateY(-100%);
          background-position: -920px -50px;
      }
  }*/
}
.sec-feed figcaption {
  flex-wrap: wrap;
  position: relative !important;
  height: auto !important;
  overflow: hidden;
}
.sec-feed figcaption h3 {
  width: 100%;
  margin-bottom: 0;
  padding: 10px 15px;
  display: flex;
  align-items: flex-end;
  margin-top: auto;
  line-height: 1.2;
  font-size: 2.6rem;
  font-size: clamp(2rem, 3vw + 1.6rem, 2.4rem);
  font-weight: 500;
  color: #FFFFFF;
  backdrop-filter: blur(10px);
  transition: opacity 0.3s ease-in-out;
}
.sec-feed figcaption > div {
  position: absolute;
  top: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-height: 100%;
  transition: all 0.3s ease-in-out;
}
.sec-feed figcaption:hover h3 {
  opacity: 0;
}
.sec-feed figcaption:hover > div {
  transform: translateY(-100%);
}
.sec-feed figcaption:hover .but:before {
  transform: translateY(100%);
}
.sec-feed figcaption h4 {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 1;
  font-size: 4rem;
  text-indent: 20px;
}
.sec-feed figcaption h4:before,
.sec-feed figcaption h4 span {
  background: light-dark(#4D6A7F, #002147);
}
.sec-feed figcaption h4:before {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 100%;
  padding-top: 100%;
}
.sec-feed figcaption h4 span {
  margin: 10px auto 0 0;
  padding: 10px 20px 0 0;
  font-size: 3rem;
}
.sec-feed figcaption .but {
  margin: 0 20px 20px 20px;
}
.sec-feed figcaption .but span {
  z-index: 1;
  color: #FFFFFF !important;
}
.sec-feed figcaption .but span:not(:hover) {
  text-underline-offset: 6px;
  text-decoration-color: transparent !important;
}
.sec-feed figcaption .but:before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.3s ease-in-out;
}
.sec-feed li {
  list-style-type: none;
}
@media only screen and (max-width: 599px) {
  .sec-feed:not(.archive) > div {
    position: relative;
    width: 100vw;
    margin-left: calc(0px - clamp(20px, 5vw, 40px));
  }
  .sec-feed:not(.archive) > div:after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 20px;
    left: 0;
    bottom: 0;
    right: 0;
  }
  body.light .sec-feed:not(.archive) > div:after {
    background: linear-gradient(to left, #FFFFFF, transparent) right/clamp(20px, 5vw, 100px) 100% no-repeat, linear-gradient(to right, #FFFFFF, transparent) left/clamp(20px, 5vw, 100px) 100% no-repeat;
  }
  body.dark .sec-feed:not(.archive) > div:after {
    background: linear-gradient(to left, #4D6A7F, transparent) right/clamp(20px, 5vw, 100px) 100% no-repeat, linear-gradient(to right, #4D6A7F, transparent) left/clamp(20px, 5vw, 100px) 100% no-repeat;
  }
  .sec-feed:not(.archive) ol {
    display: flex;
    gap: 20px;
    margin-top: -20px;
    padding-left: clamp(20px, 5vw, 40px);
    padding-bottom: 40px;
    transform: translateY(40px);
    overflow-x: auto;
    overflow-y: clip;
  }
  .sec-feed:not(.archive) li {
    width: 75%;
    min-width: 75%;
  }
  .sec-feed:not(.archive) figure:before {
    padding-top: 75% !important;
  }
  .sec-feed:not(.archive) header .actions {
    margin-top: 10px;
    margin-left: 0;
  }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
  .sec-feed:not(.archive) ol {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    /*li:nth-child(even) {
        padding-top: $pad-hlf;
    }*/
  }
  .sec-feed:not(.archive) figure {
    min-height: 180px;
  }
  .sec-feed:not(.archive) figure:before {
    padding-top: 75% !important;
  }
}
@media only screen and (max-width: 499px) {
  .sec-feed:not(.archive) figure:before {
    aspect-ratio: 1/1;
  }
}
@media only screen and (min-width: 500px) and (max-width: 999px) {
  .sec-feed:not(.archive) figure:before {
    aspect-ratio: 3/2;
  }
}
@media only screen and (min-width: 1000px) {
  .sec-feed:not(.archive) ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
  }
  .sec-feed:not(.archive) ol li:nth-child(-n+2) {
    grid-row: span 2;
  }
  .sec-feed:not(.archive) ol li {
    /*&:nth-child(2) {
        padding-top: $pad-hlf;
    }
    &:nth-child(3) {
        padding-top: $pad;
    }*/
  }
  .sec-feed:not(.archive) ol li .ratio-2x1:before {
    padding-top: calc((100% - 20px) / 2);
  }
}
.sec-feed.archive > div {
  display: grid;
  gap: 40px;
}
@media screen and (min-width: 579px) and (max-width: 879px) {
  .sec-feed.archive > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /*figure {
        &:nth-child(even of :not([hidden])) {
            transform: translateY($pad-hlf);
        }
    }*/
  }
}
@media screen and (min-width: 960px) {
  .sec-feed.archive > header {
    display: grid;
    gap: 20px 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sec-feed.archive #list-status {
    display: flex;
    align-items: center;
  }
  .sec-feed.archive #list-status:empty:before {
    content: attr(data-empty);
  }
}
@media screen and (min-width: 880px) and (max-width: 1159px) {
  .sec-feed.archive > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /*figure {
        &:nth-child(3n+2 of :not([hidden])) {
            transform: translateY($pad-hlf);
        }
        &:nth-child(3n+3 of :not([hidden])) {
            transform: translateY($pad);
        }
    }*/
  }
}
@media screen and (min-width: 1160px) {
  .sec-feed.archive > div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /*figure {
        &:nth-child(4n+2 of :not([hidden])) {
            transform: translateY($pad-hlf);
        }
        &:nth-child(4n+3 of :not([hidden])) {
            transform: translateY($pad);
        }
        &:nth-child(4n+4 of :not([hidden])) {
            transform: translateY($pad+$pad-hlf);
        }
    }*/
  }
}

.sec-papers {
  background: #FFFFFF;
  background: light-dark(#FFFFFF, #002147);
}
.sec-papers header,
.sec-papers > div {
  display: grid;
  gap: 20px 40px;
}
.sec-papers article {
  display: flex;
  flex-direction: column;
  padding: 30px 20px;
  border: 2px solid #BACED9;
  border-radius: 4px;
}
.sec-papers article[hidden] {
  order: 1;
  visibility: hidden !important;
  display: flex !important;
}
.sec-papers article h2 {
  font-size: 3rem;
}
.sec-papers article ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 20px;
}
.sec-papers article ul:not(:last-child) {
  margin-bottom: 30px;
}
.sec-papers article li {
  list-style-type: none;
}
.sec-papers article li strong {
  font-weight: 600;
}
.sec-papers article .but {
  color: #FFFFFF;
  border-color: #4D6A7F;
  background: #4D6A7F;
}
.sec-papers article .but:hover {
  color: #4D6A7F;
  background: transparent;
}
.sec-papers article .actions {
  row-gap: 20px;
  margin-top: auto;
}
.sec-papers article .actions:after {
  pointer-events: none;
  content: "";
  flex-grow: 1;
  display: block;
  width: 90px;
  height: 40px;
  background: right center no-repeat;
}
.sec-papers article.working:before {
  content: "Working Paper";
  display: flex;
  align-items: center;
  min-height: 30px;
  margin: -30px -20px 10px auto;
  padding: 5px 10px;
  border-radius: 0 2px 0 0;
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 600;
  color: #002147;
  color: light-dark(#002147, #4D6A7F);
  background: #BACED9;
}
.sec-papers article.ssrn .actions:after {
  background-image: url(../media/logo-ssrn.svg);
  background-size: auto 30px;
}
.sec-papers article.arxiv .actions:after {
  background-image: url(../media/logo-arxiv.svg);
  background-size: auto 40px;
}
.sec-papers article.ora .actions:after {
  background-image: url(../media/logo-ora.svg);
  background-size: auto 40px;
}
.sec-papers:not(.filtering) article,
.sec-papers:not(.filtering) #list-status {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}
.sec-papers.filtering article,
.sec-papers.filtering #list-status {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;
}
@media screen and (max-width: 459px) {
  .sec-papers article .actions:after {
    width: 100%;
    background-position-x: left;
  }
}
@media screen and (min-width: 960px) {
  .sec-papers header,
  .sec-papers > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sec-papers {
    /*article {
        &:nth-child(even of :not([hidden])) {
            transform: translateY($pad-hlf);
        }
    }*/
  }
  .sec-papers #list-status {
    display: flex;
    align-items: center;
  }
}

.pixelize {
  position: relative;
}
.pixelize canvas {
  z-index: 20;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pixelize.static {
  height: 250px;
  /*        transform: translateY(-50px);
          &:after {
              content: '';
              pointer-events: none;
              position: absolute;
              top: 100%;
              left: 0;
              width: 100%;
              height: 50px;
              background-color: inherit;
          }*/
}
.pixelize.static + .static {
  z-index: -1;
  margin-top: -250px;
  transform: translateY(-100px);
}
.pixelize {
  /*&[class*="static"] {
      position: absolute;
      left: 0;
      height: 250px;
      width: 100%;
      max-width: none;
      padding: 0;
  }
  &.static-top {
      top: 0;
  }
  &.static-bot {
      bottom: 0;
  }*/
}

.sec-pixelize {
  pointer-events: none;
  height: 600px;
  margin-top: -50px;
  padding: 0;
}
.sec-pixelize + section {
  margin-top: -250px;
}

@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-200px);
  }
}
@keyframes move-down {
  from {
    transform: translateY(200px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes parallax {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100px);
  }
}
@keyframes parallax-iframe {
  from {
    transform: translate(-50%, 0);
  }
  to {
    transform: translate(-50%, 100px);
  }
}
@supports (animation-timeline: view()) {
  .sec-pixelize + section {
    margin-top: -200px;
    animation: move-up linear both;
    animation-timeline: scroll(root);
  }
  .sec-pixelize + section + section,
  #main:has(.sec-pixelize + section:last-of-type) ~ #foot {
    margin-top: -200px;
  }
  .sec-pixelize + section + section > div,
  #main:has(.sec-pixelize + section:last-of-type) ~ #foot > div {
    animation: move-down linear both;
    animation-timeline: scroll(root);
  }
  .sec-hero video,
  .sec-hero picture {
    animation: parallax linear both;
  }
  .sec-hero iframe {
    animation: parallax-iframe linear both;
  }
  .sec-hero video,
  .sec-hero picture,
  .sec-hero iframe {
    animation-timeline: view();
    animation-range: exit 14% exit 100%;
  }
}
.sec-media {
  position: relative;
}
.sec-media .pixelize {
  pointer-events: none;
}
.sec-media .pixelize.pos-t, .sec-media .pixelize.pos-b {
  z-index: 1;
  height: 100%;
}
.sec-media .pixelize {
  /*        &.pos-t {
              z-index: 1;
              height: 250px;
          }
          &.pos-b {
              height: 100%;
          }*/
}