@charset "utf-8";

/* Box sizing rules */

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



/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */

html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */

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

/* Remove all animations and transitions for people that prefer not to see them */

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.tns-outer{padding:0 !important}

.tns-outer [hidden]{display:none !important}

.tns-outer [aria-controls],.tns-outer [data-action]{cursor:pointer}

.tns-slider{transition:all 0s}

.tns-slider>.tns-item{box-sizing:border-box}

.tns-horizontal.tns-subpixel{white-space:nowrap}

.tns-horizontal.tns-subpixel>.tns-item{display:inline-block;vertical-align:top;white-space:normal}

.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}

.tns-horizontal.tns-no-subpixel>.tns-item{float:left}

.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item{margin-right:-100%}

.tns-no-calc{position:relative;left:0}

.tns-gallery{position:relative;left:0;min-height:1px}

.tns-gallery>.tns-item{position:absolute;left:-100%;transition:transform 0s, opacity 0s}

.tns-gallery>.tns-slide-active{position:relative;left:auto !important}

.tns-gallery>.tns-moving{transition:all 0.25s}

.tns-autowidth{display:inline-block}

.tns-lazy-img{transition:opacity 0.6s;opacity:0.6}

.tns-lazy-img.tns-complete{opacity:1}

.tns-ah{transition:height 0s}

.tns-ovh{overflow:hidden}

.tns-visually-hidden{position:absolute;left:-10000em}

.tns-transparent{opacity:0;visibility:hidden}

.tns-fadeIn{opacity:1;filter:alpha(opacity=100);z-index:0}

.tns-normal,.tns-fadeOut{opacity:0;filter:alpha(opacity=0);z-index:-1}

.tns-vpfix{white-space:nowrap}

.tns-vpfix>div,.tns-vpfix>li{display:inline-block}

.tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}

.tns-t-ct{width:2333.3333333%;width:calc(100% * 70 / 3);position:absolute;right:0}

.tns-t-ct:after{content:'';display:table;clear:both}

.tns-t-ct>div{width:1.4285714%;width:calc(100% / 70);height:10px;float:left}

.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);opacity:.01;transition:opacity .4s ease;z-index:1000;will-change:opacity}

.basicLightbox--visible{opacity:1}

.basicLightbox__placeholder{max-width:100%;transform:scale(.9);transition:transform .4s ease;z-index:1;will-change:transform}

.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;max-width:95%;max-height:95%}

.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{pointer-events:auto}

.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}

.basicLightbox--iframe .basicLightbox__placeholder,.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}

.basicLightbox--visible .basicLightbox__placeholder{transform:scale(1)}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-ExtraLightItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-BoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Droid */

@font-face {
  font-family: "Droid Serif";
  src: url("../fonts/DroidSerif-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Droid Serif";
  src: url("../fonts/DroidSerif.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Droid Serif";
  src: url("../fonts/DroidSerif-BoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Droid Serif";
  src: url("../fonts/DroidSerif-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Links */

a {
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration: underline;
  }
}

/* === MIXINS === */

/* Utils */

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

:root {
  --outer-gutters: 2rem;
}

@media (min-width: 40.001rem) {

:root {
    --outer-gutters: 2rem
}
  }

:root {
  --flow-space: 0.75rem;
  --flow-space-2: calc(2 * var(--flow-space));
  --flow-space-3: calc(3 * var(--flow-space));
  --flow-space-4: calc(4 * var(--flow-space));
  --flow-space-6: calc(6 * var(--flow-space));
  --flow-space-8: calc(8 * var(--flow-space));
  --flow-space-10: calc(10 * var(--flow-space));
  --flow-space-12: calc(12 * var(--flow-space));
  --flow-space-14: calc(14 * var(--flow-space));
}

:root {
  --scale: 1.125;

  /* scale derived */
  --ms-5: calc(
    1rem * var(--scale) * var(--scale) * var(--scale) * var(--scale) *
      var(--scale)
  );
  --ms-4: calc(
    1rem * var(--scale) * var(--scale) * var(--scale) * var(--scale)
  );
  --ms-3: calc(1rem * var(--scale) * var(--scale) * var(--scale));
  --ms-2: calc(1rem * var(--scale) * var(--scale));
  --ms-1: calc(1rem * var(--scale));
  --ms-0: 1rem;
  --ms-neg-1: calc(1rem / var(--scale));
  --ms-neg-2: calc(1rem / var(--scale) / var(--scale));

  /* font families */
  --font-family-sans: "Source Sans Pro", system-ui, sans-serif;
  --font-family-serif: "Droid Serif", serif;
}

@media (min-width: 40.001rem) {

:root {
    --scale: 1.25
}
  }

/* @media --scale: 1.X  */

body::after {
  content: "";

  display: none;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: whitesmoke;
  padding: 0.25rem;
  opacity: 0.5;
}

@media (max-width: 24rem) {

body::after {
    content: "--viewport-smallest"
}
  }

@media (min-width: 24.001rem) {

body::after {
    content: "--viewport-small"
}
  }

@media (min-width: 40.001rem) {

body::after {
    content: "--viewport-medium"
}
  }

@media (min-width: 62.001rem) {

body::after {
    content: "--viewport-large"
}
  }

@media (min-width: 70.001rem) {

body::after {
    content: "--viewport-extra-large"
}
  }

html {
  font-size: 100%;
}

@media (min-width: 40.001rem) {

html {
    font-size: 112.5%
}
  }

body {
  font-family: var(--font-family-sans);
  font-weight: 400;
  line-height: 1.5;
}

/* Headings */

h1,h2,h3,h4,h5,h6 {
  font-weight: 600;
  font-size: 1rem;
}

/* Misc */

ul {
  margin: 0;
  padding-left: 2rem;
}

.page-title {
  font-size: var(--ms-4);
  line-height: 1.25;
  letter-spacing: 0.05em;
  font-weight: 300;
  max-width: 18em;
}

@media (min-width: 40.001rem) {

.page-title {
    font-size: var(--ms-3);
}
  }

@media (min-width: 62.001rem) {

.page-title {
    font-size: var(--ms-4);
    line-height: 1.1;
}
  }

@media (min-width: 70.001rem) {

.page-title {
    font-size: var(--ms-5);
    line-height: 1.1;
}
  }

/* builder h1, h2 */

.section-title {
  font-size: var(--ms-1);
  line-height: 1.25;
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* builder h3 */

/* Flow */

.flow > * + * {
  margin-top: var(--flow-space, 1rem);
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.site-content {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;
}

.wrap {
  max-width: 84rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--outer-gutters);
  padding-right: var(--outer-gutters);
}

/* === LAYOUT === */

.grid {
  --gutter: 0;
  width: 100%;
  display: grid;
  grid-column-gap: var(--gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 62.001rem) {

.grid {
    grid-template-columns: repeat(24, 1fr);
}
  }

:root {
  --hue: 90deg;
  --hue2: 88deg;
  --hue3: 87deg;
  --hue4: 142deg;
  --hue5: 350deg;

  --color-primary: hsl(var(--hue) 100% 37%);
  --color-primary-light: hsl(var(--hue) 54% 97%);
  --color-primary-lighter: hsl(var(--hue) 53% 94%);
  --color-secondary: hsl(var(--hue4) 100% 23%);
  --color-tertiary: hsl(var(--hue5) 100% 46%);

  --color-primary-ultralight: hsl(var(--hue) 2% 98%);
  --color-text: hsl(var(--hue) 5% 20%);

  --color-white: hsl(var(--hue) 5% 99%);
  --color-grey: hsl(var(--hue) 2% 70%);
  --color-black: hsl(var(--hue) 2% 5%);

  --color-grey-client: #999;
  --color-menu-bg: hsl(137deg 76% 28% / 85%);
  --color-menu-active: hsl(137deg 76% 28% / 45%);
  --color-menu-hover: hsl(137deg 76% 28%);
}

body {
  color: var(--color-text);
}

h1,h2,h3,h4,h5,h6 {
}

a {
  color: currentColor;
}

:root.high-contrast {
  --color-primary: black;
  --color-secondary: black;
  filter: grayscale(100%);
}

:root.high-contrast .hero,
  :root.high-contrast .site-footer {
    background: #000;
  }

:root.high-contrast .bubble img {
    filter: contrast(300%);
  }

:root.high-contrast canvas {
    display: none;
  }

:root.high-contrast .open-menu {
    background: #FFF;
  }

:root.high-contrast .open-menu path {
    fill: #000;
  }

:root.high-contrast .tns-controls path {
    opacity: 1;
  }

:root.high-contrast .article-header {
    background: #000;
  }

:root.high-contrast .site-header .logo #Pin path {
    fill: #fff;
  }

:root.high-contrast .menu-open .site-header .logo #Pin path {
    fill: #000;
  }

:root {
  --header-height: 7.25rem;
}

@media (min-width: 40.001rem) {

:root {
    /* --header-height: 10rem; */
}
  }

.site-content {
  position: relative;
}

.filter .translation-missing .block--text {
  grid-column: 1 / -1;
}

.notification-missing-translation {
  padding: 0.5rem;
  text-align: center;
  background-color: lightgoldenrodyellow;
  margin-bottom: 1rem;
}

.site-header {
  --gap: 0.5rem;
  --menu-row-height: auto;
  --header-bottom-gap: calc(var(--flow-space) * 1.5);

  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  color: var(--color-white);
  height: var(--header-height);
}

@media (max-width: 62rem) {

.site-header {
    overflow: hidden
}
  }

.site-header-inner {
  --gutter: 0;
  width: 100%;
  display: grid;
  grid-column-gap: var(--gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 62.001rem) {

.site-header-inner {
    grid-template-columns: repeat(24, 1fr);
}
  }

.site-header-inner{
  height: auto;

  position: relative;
}

@media (max-width: 62rem) {

.site-header-inner {
    padding-top: 2rem;
    grid-template-rows: auto 1fr;
    height: calc(100% - 0rem)
}
  }

@media (min-width: 62.001rem) {

.site-header-inner {
    align-items: end
}
  }

@media (min-width: 62.001rem) {
  .site-header-inner .logo {
    grid-column: 1 / 4;
  }

  .main-navigation {
    grid-column: 5 / -1;
    margin-left: auto;
  }
}

@media (min-width: 70.001rem) {
  .site-header-inner .logo {
    grid-column: 2 / 8;
  }

  .main-navigation {
    grid-column: 8 / 24;
  }
}

@media (min-width: 62.001rem) {
  .site-header-inner::after {
    content: "";
    display: block;
    height: 1px;
    box-shadow: 0 1px 0 0 var(--color-white);
    position: absolute;
    bottom: 0;
    opacity: 0.5;

    left: var(--outer-gutters);
    right: var(--outer-gutters);
  }
}

.logo {
  margin-bottom: var(--gap);
  display: inline-block;
}

@media (min-width: 40.001rem) {

.logo {
    transform: translateX(-23px)
}
  }

.logo svg {
  height: 3.75rem;
  width: auto;
  vertical-align: bottom;
}

.logo svg path {
    fill: var(--color-white);
  }

@media (min-width: 70.001rem) {

.logo svg {
    height: 4.3125rem
}
  }

.site-header .logo #Pin path {
  fill: var(--color-tertiary);
}

@media (min-width: 62.001rem) {
  .site-header {
    padding-top: 0;
  }

  .logo #Pin {
    --offset: 16px;

    transition: 0.25s;
    transform-origin: var(--offset) var(--offset);
  }

  .logo:hover #Pin {
    transform: translate3d(0, 0, 0) rotate(-45deg);
  }
}

/* === MAIN NAVIGATION === */

.menu {
  padding-left: 0;
}

.menu li {
    list-style: none;
  }

.menu > li > a,
.menu > li > .submenu-list {
  transition: background-color 0.25s, opacity 0.25s;
}

@media (hover: hover) and (pointer: fine) {
  .menu > li:hover > a,
  .menu > li:hover .submenu-list {
    background-color: var(--color-menu-bg);
  }
}

@media (min-width: 62.001rem) {
  .menu {
    /* flex-wrap: wrap; */
    margin-left: calc(-2 * var(--gap));
  }

    .menu > li {
      margin-left: var(--gap);
      height: var(--menu-row-height);
      display: flex;
      align-items: stretch;
      position: relative;
      z-index: 1;
    }

    .menu > li > a {
      white-space: nowrap;
      display: flex;
      align-items: flex-end;
      padding: calc(var(--gap) / 2) var(--gap);

      text-transform: uppercase;
      letter-spacing: 0.075em;
    }

  .menu > .active > a {
    background-color: var(--color-menu-active);
  }

  .menu > * + * {
    margin-left: 1rem;
  }

  .menu [aria-current] {
    font-weight: bold;
  }
}

.menu a:hover {
  text-decoration: none;
}

/* Submenu */

.menu .submenu-list {
  width: 12rem;
  opacity: 0;
  display: none;
  pointer-events: none;
}

.menu .submenu-list {
  padding: 0.5rem 0;
  position: absolute;
  z-index: 1;
  top: var(--menu-row-height);
  left: 0;
}

.menu .submenu-list > li > a {
  padding: calc(var(--gap) / 2) var(--gap);
  display: block;
}

.menu .submenu-list a:hover {
  background-color: var(--color-menu-hover);
}

/* Mobile */

.menu-open .site-header {
  background: var(--color-white);
  height: 100vh;
}

.menu-open .site-header .logo svg #Wordmark path,
  .menu-open .site-header .logo svg #Tagline path {
    fill: var(--color-primary);
  }

.open-menu,
.close-menu {
  all: unset;
  pointer-events: auto;
  border-radius: 10rem;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  display: none;
  position: absolute;
  top: 2.5rem;
  right: var(--outer-gutters);
}

.open-menu {
  background: hsla(0, 0%, 100%, 0.7);
}

.open-menu path {
    fill: var(--color-primary);
  }

.close-menu {
  background: var(--color-primary);
}

.close-menu path {
    fill: var(--color-white);
  }

@media (max-width: 62rem) {
  .main-navigation {
    margin-right: calc(-2 * var(--outer-gutters));
  }

  .menu > li {
    box-shadow: inset 0 1px 0 0 var(--color-primary);
  }

  .menu > li > a {
    padding: 0.75rem 2rem;
    display: block;
    font-size: var(--ms-4);
    font-weight: 300;
    color: var(--color-secondary);
  }

  .menu > li:first-child {
    box-shadow: none;
  }

  .open-menu {
    display: flex;
  }

  .menu-open .close-menu {
    display: flex;
  }

  .menu-open .open-menu {
    display: none;
  }

  .main-navigation {
    margin-top: 1.5rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

    .main-navigation .menu {
      /* height: 1000px; */
    }
}

/* Large */

@media (min-width: 62.001rem) {
  .site-header {
    --gap: 1.25rem;
    --menu-row-height: 7rem;
  }

  .logo {
    margin-bottom: var(--header-bottom-gap);
  }

  .menu {
    display: flex;
  }

  .menu > li {
    margin-left: 0;
  }

  .menu > li > a {
    padding: 0 var(--gap) var(--header-bottom-gap);
  }

  .menu .submenu-list {
    display: block;
  }

  .menu > li:hover > .submenu-list {
    opacity: 1;
    pointer-events: initial;
  }
}

/* layout */

.site-footer {
  padding-top: var(--flow-space-2);
  padding-bottom: var(--flow-space-2);

  background: var(--color-text);
  color: var(--color-white);
}

.footer-navigation {
  margin-bottom: var(--flow-space-2);
}

@media (min-width: 62.001rem) {

  .site-footer {
    background-image: linear-gradient(
      90deg,
      var(--color-text) 0%,
      var(--color-text) 50%,
      var(--color-primary) 50%,
      var(--color-primary) 100%
    );
  }

  .footer-branding {
    grid-column: 1 / span 11;
    grid-row: 1;
  }

  .footer-navigation {
    grid-column: 14 / span 10;
    grid-row: 1;
    margin-bottom: 0;
  }
}

@media (min-width: 62.001rem) {

  .footer-branding {
    grid-column: 2 / span 11;
  }

  .footer-navigation {
    grid-column: 14 / span 10;
  }
}

/* styles */

.site-footer .logo {
  font-size: 1.2rem;
  /* width: 20em; */
  display: flex;
  align-items: center;
  color: var(--color-grey);
  margin-left: -1rem;
}

.site-footer .logo > * {
    padding-left: 1rem;
  }

.site-footer .logo svg {
  width: 10em;
  height: auto;
}

.site-footer .logo svg path {
    fill: currentColor;
  }

.site-footer .logo .tagline-html {
  width: 50%;
  /* white-space: nowrap; */
  transform: translateY(0.25em);

  font-size: 0.6em;
  font-family: var(--font-family-serif);
}

.site-footer .logo #Tagline {
  display: none;
}

/* Menus */

.footer-menu {
  padding-left: 0;
}

.footer-menu li {
    list-style: none;
  }

.footer-menu li {
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

@media (max-width: 62rem) {

.footer-menu li {
    font-size: var(--ms-neg-1);
}
  }

.footer-menu a {
  padding: 0.25rem 0;
  display: block;
}

@media (max-width: 62rem) {

  .footer-navigation .footer-menu {
    margin-bottom: 1rem;
  }
}

@media (min-width: 62.001rem) {

  .footer-navigation {
    display: flex;
    justify-content: space-between;
    /* justify-content: flex-end; */
    align-items: center;
  }

  .footer-menu {
    display: flex;
    margin-left: -1rem;
    margin-right: 2rem;
  }

  .footer-menu li {
    padding-left: 1rem;
  }
}

/* Social Menu */

.social-menu {
  padding-left: 0;
  /* align-items: center; */
}

.social-menu li {
    list-style: none;
  }

.social-menu{
  display: flex;
  height: 1.5rem;
  margin-left: -0.75rem;
}

.social-menu > li {
  padding-left: 0.75rem;
  height: 100%;
}

.social-menu a {
  display: block;
  height: 100%;
}

.social-menu svg {
  height: 100%;
  width: auto;
}

.social-menu path {
  fill: var(--color-white);
}

/* Main */

.main {
  margin-bottom: var(--flow-space-2);
}

@media (min-width: 40.001rem) {

.main {
    margin-bottom: calc(4 * var(--flow-space))
}
  }

.article {
  margin-bottom: var(--flow-space-2);
}

@media (min-width: 40.001rem) {

.article {
    margin-bottom: calc(4 * var(--flow-space))
}
  }

/*
  ------------------------
  Blocks  
  ------------------------
*/

.main-content > .blocks {
  --gutter: 0;
  width: 100%;
  display: grid;
  grid-column-gap: var(--gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 62.001rem) {

.main-content > .blocks {
    grid-template-columns: repeat(24, 1fr);
}
  }

@media (min-width: 62.001rem) {

.block--intro {
    grid-column: 2 / 16
}
  }

@media (min-width: 62.001rem) {

.block--heading,
.block--image,
.block--quote,
.block--list,
.block--text,
.block--video {
    grid-column: 2 / 18;
}
  }

.block--text a,
.block--list a {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (min-width: 62.001rem) {

.block--carousel {
    grid-column: 3 / 24
}
  }

@media (min-width: 62.001rem) {

.block--slider {
    grid-column: 1 / -1
}
  }

.block--slider-inner .wrap {
  --gutter: 0;
  width: 100%;
  display: grid;
  grid-column-gap: var(--gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 62.001rem) {

.block--slider-inner .wrap {
    grid-template-columns: repeat(24, 1fr);
}
  }

.block--slider-inner .wrap{
  align-items: end;
}

.block--slider-inner .wrap > * {
    grid-column: 1 / -1;
  }

@media (min-width: 62.001rem) {
  .block--slider-inner .wrap .block--slider-slides-container {
    grid-column: 9 / -1;
    grid-row: 1;
  }

  .block--slider-inner .wrap .block--carousel-text {
    grid-row: 1;
    grid-column: 1 / 8;
  }
}

/* debug */

.block {
  /* border: 1px solid red; */
}

/* Setup */

.blocks {
}

/* Intro */

.block--intro {
  margin-bottom: calc(2 * var(--flow-space));
}

.flow > * + .block--intro {
  margin-top: calc(3 * var(--flow-space));
}

.block--intro p {
  font-size: var(--ms-1);
  font-family: var(--font-family-serif);
  line-height: 1.5;
}

@media (min-width: 40.001rem) {

.block--intro p {
    font-size: var(--ms-1);
}
  }

/* Heading */

.block--heading h1,
  .block--heading h2 {
    font-size: var(--ms-1);
    line-height: 1.25;
    letter-spacing: 0.02em;
    font-weight: 400;
    color: var(--color-secondary);
  }

.block--heading h3 {
    font-size: var(--ms-0);
    line-height: 1.25;
    letter-spacing: 0.02em;
    font-weight: 600;
  }

.flow > * + .block--heading {
  margin-top: calc(var(--flow-space) * 2);
}

@media (min-width: 40.001rem) {

.flow > * + .block--heading {
    margin-top: calc(var(--flow-space) * 4)
}
  }

/* Slider */

.block--carousel-text {
  margin-top: calc(var(--flow-space) * 2);
}

.block--slider,
.block--carousel {
  margin-top: calc(var(--flow-space) * 3);
  margin-bottom: calc(var(--flow-space) * 3);
}

.block--slider ul, .block--carousel ul {
    padding-left: 0;
  }

.block--slider ul li, .block--carousel ul li {
    list-style: none;
  }

.tns-outer {
  position: relative;
}

.tns-controls:focus {
  outline: none;
}

.tns-controls:focus button {
    outline: none;
  }

.tns-controls {
  pointer-events: none;
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 100%;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
}

.tns-controls > button {
    all: unset;
    pointer-events: auto;
    border-radius: 10rem;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.25s opacity;
    background: var(--color-primary);
  }

.tns-controls path {
    fill: var(--color-white);
    transition: 0.25s opacity;
    opacity: 0.5;
  }

.tns-controls > button:hover path {
    opacity: 1;
  }

.tns-controls [data-controls="next"] {
    transform: translateX(-2.7rem);
  }

.tns-controls [data-controls="next"] svg {
      transform: translateX(2px);
    }

.tns-controls [data-controls="prev"] {
    transform: translateX(2.7rem);
  }

.tns-controls [data-controls="prev"] svg {
      transform: translateX(-2px);
    }

.tns-controls > button:disabled {
    opacity: 0;
    pointer-events: none;
  }

.tns-nav {
  position: absolute;
  bottom: -2rem;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.block--carousel .tns-nav, .block--slider .tns-nav {
    bottom: -1rem;
  }

.block--carousel .tns-nav > button, .block--slider .tns-nav > button {
      all: unset;
      background: var(--color-black);

      height: 2px;
      width: 1.5rem;
      margin: 0 0.2rem;
    }

.block--carousel .tns-nav.tns-nav-active, .block--slider .tns-nav.tns-nav-active {
      background: var(--color-tertiary);
    }

.block--carousel .tns-outer {
    margin-bottom: calc(0 * var(--flow-space));
  }

.block--carousel .tns-nav > button {
    background: var(--color-primary);
  }

.block--carousel .tns-nav .tns-nav-active {
    background: var(--color-secondary);
  }

@media (min-width: 62.001rem) {
    .block--carousel .tns-controls {
      --offset: 4.4rem;

      margin: 0 calc(-1 * var(--offset));
      width: calc(100% + 2 * var(--offset));
    }
  }

.block--slider .tns-nav {
    bottom: 1rem;
    z-index: 1;
  }

.block--slider .tns-nav > button {
    background: var(--color-white);
  }

.block--slider .tns-nav .tns-nav-active {
    background: var(--color-primary);
  }

.block--slider-inner {
  background: var(--color-primary-lighter);
  padding-top: var(--flow-space-4);
  padding-bottom: var(--flow-space-4);
}

.block--slider h1,.block--slider h2,.block--slider h3,.block--slider h4,.block--slider h5,.block--slider h6 {
  color: var(--color-primary);
}

/*
  ------------------------
  Related Pages Slider
  ------------------------
*/

/* Quote */

.block--quote {
  margin-top: calc(var(--flow-space) * 2);
  margin-bottom: calc(var(--flow-space) * 2);
}

@media (min-width: 40.001rem) {

.block--quote {
    /* margin-top: calc(var(--flow-space) * 4); */
    /* margin-bottom: calc(var(--flow-space) * 4); */
}
  }

.block--quote blockquote {
  color: var(--color-primary);
  border-left: 2px solid var(--color-primary);
  padding: 1rem 1.5rem;

  /*
  p::before {
    content: open-quote;
    display: inline;
  }

  p::after {
    content: close-quote;
  }
  */
}

.block--quote blockquote p {
    font-size: var(--ms-2);
    font-family: var(--font-family-serif);
    font-style: italic;
  }

.block--quote blockquote footer {
  font-size: var(--ms-neg-1);
  font-style: italic;
}

/* BLOCK Text */

@media (min-width: 40.001rem) {

.block--text .text-has-columns {
    --flow-space: 1.5rem;
    -moz-columns: 2;
         columns: 2
}

    .block--text .text-has-columns p {
      padding-right: 1rem;
    }
  }

@media (min-width: 62.001rem) {
    .block--text .text-has-columns p {
      padding-right: 1.5rem;
    }
  }

/* Media (src: Starterkit) */

.video,
.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background: var(--color-black);
}

.img img,
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 0;
}

.img[data-contain] img {
  -o-object-fit: contain;
     object-fit: contain;
}

.img-caption,
.video-caption {
  padding-top: 0.75rem;
  line-height: 1.5em;
  color: var(--color-grey-client);
  font-size: 13px;
}

/* Related Pages */

.related-pages .section-title {
  color: var(--color-secondary);
}

/*
  ------------------------
  Subpages Layout
  ------------------------
*/

.article-main > .wrap {
  position: relative;
}

@media (min-width: 62.001rem) {
  .article-subpages {
    height: 0;
    position: absolute;
    top: 0;
    left: var(--outer-gutters);
    right: var(--outer-gutters);
  }

  .subpages-navigation {
    --gutter: 0;
    width: 100%;
    display: grid;
    grid-column-gap: var(--gutter);
    grid-template-columns: 1fr;
  }
    @media (min-width: 62.001rem) {

  .subpages-navigation {
    grid-template-columns: repeat(24, 1fr);
  }
  }

  .subpages-menu {
    grid-column: 19 / -1;
  }
}

/* Skip to Subpages */

html {
  scroll-behavior: smooth;
}

.skip-to-subpages-menu {
  display: none;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

@media (max-width: 62rem) {

.skip-to-subpages-menu {
    font-size: var(--ms-neg-1);
}
  }

.skip-to-subpages-menu{
  font-size: var(--ms-1) !important;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  margin-bottom: var(--flow-space);
  text-decoration: none;
}

.skip-to-subpages-menu:hover {
    text-decoration: none;
  }

.skip-to-subpages-menu svg {
    height: 0.75rem;
    width: auto;
    margin-right: 0.5rem;
  }

.skip-to-subpages-menu path {
    fill: var(--color-white);
  }

@media (max-width: 62rem) {
  .skip-to-subpages-menu {
    display: inline-block;
  }
}

.filter {
  /* margin-top: -1rem; */
  margin-bottom: 2rem;
}

@media (min-width: 40.001rem) {

.filter {
    /* margin-top: -2rem; */
    margin-bottom: 4rem
}
  }

.filter h2 {
  font-family: var(--font-family-serif);
  font-weight: normal;
  font-size: var(--ms-1);
  margin-bottom: 1rem;
}

.filter > * + h2 {
  margin-top: 1rem;
}

.filter .tags {
  padding-left: 0;
}

.filter .tags li {
    list-style: none;
  }

.filter .tags{
  display: flex;
  flex-wrap: wrap;
}

.filter .tags a {
  padding: 0.25rem 1rem;
  font-size: var(--ms-neg-1);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  text-transform: uppercase;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
}

.filter .tags [aria-current] {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.pagination ul {
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: 0;
}

.pagination ul li {
    list-style: none;
  }

.pagination ul{
  display: flex;
  justify-content: center;
}

.pagination a {
  all: unset;
  cursor: pointer;
  margin: 0 0.1rem;
  font-size: var(--ms-neg-1);
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: inset 0 0 0 1px var(--color-primary);
  transition: 0.25s color, 0.25s background;
}

.pagination [aria-current] {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Layout */

.article-header .wrap {
  --gutter: 0;
  width: 100%;
  display: grid;
  grid-column-gap: var(--gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 62.001rem) {

.article-header .wrap {
    grid-template-columns: repeat(24, 1fr);
}
  }

@media (min-width: 62.001rem) {

  .article-header .wrap > * {
    grid-column: 1 / 18;
  }
}

/* Styles */

.article-header * {
  color: currentColor;
}

.article-header {
  background: linear-gradient(-35deg, hsl(144deg 100% 24%), hsl(90deg 60% 50%));
  color: var(--color-white);
  overflow: hidden;
}

.article-header h1,.article-header h2,.article-header h3,.article-header h4,.article-header h5,.article-header h6 {
    margin-bottom: 2rem;
  }

.article-header-meta {
  padding-top: calc(var(--header-height) );
}

@media (min-width: 40.001rem) {

.article-header-meta {
    padding-top: calc(var(--header-height) + var(--flow-space-8))
}
  }

/* Bleed */

.article {
  --bleed-distance: 0rem;
}

.article--has-cover {
  --bleed-distance: var(--flow-space-2);
}

@media (min-width: 40.001rem) {

.article--has-cover {
    --bleed-distance: var(--flow-space-4)
}
  }

.article--has-cover .article-header-cover {
  margin-bottom: calc(-2 * var(--bleed-distance));
}

.article--has-cover .article-header {
  overflow: visible;
  margin-bottom: var(--bleed-distance);
}

.article-main {
  padding-top: calc(var(--flow-space-2) + var(--bleed-distance));
  background: #fff;
}

@media (min-width: 40.001rem) {

.article-main {
    padding-top: calc(var(--flow-space-4) + var(--bleed-distance))
}
  }

.article:not(.article--has-cover) {
  /* padding-top: 800px; */
}

.hero {
  background: linear-gradient(-35deg, hsl(144deg 100% 24%), hsl(90deg 60% 50%));
  margin-bottom: 4rem;
  overflow: hidden;
  position: relative;
}

.hero-inner {
  background-image: url("../images/bubbles/hero_hg.png");
  background-position: center center;
  background-size: cover;

  height: 100vh;
  padding-top: calc(var(--header-height));
  position: relative;
  z-index: 1;
}

@media (min-width: 62.001rem) {

.hero-inner {
    height: 90vh
}
  }

.temp {
  position: absolute;
  opacity: 0.2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* transform: translate(-50%, -50%) scale(.5); */
}

.bubbles {
  position: absolute;
  left: 50%;
  top: 50%;
}

.bubble {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.bubble img {
    max-width: none;
  }

.bubble a {
    pointer-events: auto;
  }

.bubbles {
  --scale: 0.45;
  transform: scale(var(--scale)) translate(38px, 20px);
}

.bubble-inner  {
  display: block;
  transform:  translate(var(--x), var(--y));
}

.bubble--bildungsangebote {
  --x: 132px;
  --y: -190px;
}
.bubble--fortbildung {
  --x: 230px;
  --y: 60px;
}

.bubble--evaluation {
  --x: 80px;
  --y: 200px;
}

.bubble--theorien {
  --x: -130px;
  --y: 220px;
}

.bubble--oer {
  --x: -280px;
  --y: 10px;
}

.bubble--kunst-kultur {
  --x: -130px;
  --y: -150px;
}

@media (min-width: 40.001rem) {
  .bubbles {
    --scale: 0.8;
  }
}

@media (min-width: 62.001rem) {
  .bubbles {
    --scale: 1.2;
    transform: scale(var(--scale)) translate(38px, 45px);
  }
}

.bubble img {
  transition: .25s;
}

.bubble a:hover img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 .5rem hsl(0deg 0% 0% / 25%));
}

@media (min-width: 62rem) and (max-height: 60rem) {
  .hero-inner {
    height: 40rem;
  }
  .bubbles {
    --scale: .8;
    transform: scale(var(--scale)) translate(38px, 80px);
  }
}

/* Canvas */

#canvas {
  position: absolute;
  left: 0;
  top: 0;
}

.breadcrumb-menu {
  padding-left: 0;
  /* display: flex; */
}

.breadcrumb-menu li {
    list-style: none;
  }

.breadcrumb-menu{
  display: none;
  margin-left: -1rem;
}

.breadcrumb-menu a {
    color: var(--color-grey)
  }

.breadcrumb-menu > li {
  padding-left: 1rem;
  font-size: var(--ms-neg-1);
}

.subpages-menu {
  padding-left: 0;
}

.subpages-menu li {
    list-style: none;
  }

.subpages-menu{

  border-top: 1px solid var(--color-primary);
}

.subpages-menu > li {
  border-bottom: 1px solid var(--color-primary);
}

.subpages-menu > li > a {
  color: var(--color-primary);
  display: block;
  padding: 0.75rem 1rem;
}

.subpages-menu > li.active a {
  background: var(--color-primary-lighter);
}

.subpages-menu > li:hover a {
  background: var(--color-primary-lighter);
}

.subpages-menu a:hover {
  text-decoration: none;
}

@media (min-width: 62.001rem) {
  .subpages-navigation {
    pointer-events: none;
  }

  .subpages-menu > li > a {
    pointer-events: auto;
  }
}

/* Layout */

.cards:not(.tns-slider) {
  --gap: calc(2 * var(--flow-space));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  grid-gap: var(--gap);
}

.card a {
  display: block;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-content {
  flex: 1;
}

/* Card */

.post-type {
  text-transform: uppercase;
  font-size: var(--ms-neg-1);
  font-weight: 400;
  letter-spacing: 0.02em;
  display: inline-block;

  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.25rem 2rem;
}

.card {
  --flow-space: 1rem;

  /* max-width: 20rem; */
}

.card-title {
  font-size: var(--ms-1);
  line-height: 1.25;
  letter-spacing: 0.02em;
  font-weight: 400;
}

@media (hover: hover) and (pointer: fine) {

  .card a:hover {
    text-decoration: none;
  }

    .card a:hover .card-content {
      background: var(--color-primary-lighter);
    }
}

.card-content {
  padding-top: calc(var(--flow-space) / 1.5);
  padding-bottom: calc(var(--flow-space) / 1);
  

  box-shadow: inset 0 1px 0 0 var(--color-primary),
    inset 0 -1px 0 0 var(--color-primary);
}

.card-cover {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-ultralight);

  position: relative;
  max-width: 500px;
}

.card-cover::before{
  float: left;
  padding-top: 56.25%;
  content: '';
}

.card-cover::after{
  display: block;
  content: '';
  clear: both;
}

.card-cover::before{
  float: left;
  padding-top: 77.77777777777779%;
  content: '';
}

.card-cover::after{
  display: block;
  content: '';
  clear: both;
}

.card-cover img {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.card-excerpt {
  font-size: var(--ms-neg-1);
}

.card-excerpt p {
    font-size: inherit;
  }

.card-excerpt, .card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
  padding-left: var(--flow-space);
  padding-right: var(--flow-space);
}

.spawnpoint-pin {
  width: 4rem;
  height: 4rem;
  text-align: center;
}

.spawnpoint-pin svg {
    height: 100%;
    width: auto;
    filter: drop-shadow(0px 0px 50px rgba(0, 0, 0, 0.3));
  }

.spawnpoint-pin path {
    fill: var(--color-white);
  }

.related-pages {
  margin-bottom: calc(14 * var(--flow-space));
}

@media (min-width: 40.001rem) {

.related-pages {
    margin-bottom: calc(15 * var(--flow-space))
}
  }

.article + .related-pages {
  margin-top: calc(8 * var(--flow-space));
}

.related-pages .section-title {
  text-align: center;
  margin-bottom: 3rem;
}

.related-pages .cards {
  display: flex;
}

.related-pages .card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

.related-pages .card-content {
  flex: 1;
}

.related-pages .tns-nav {
  bottom: -3rem;
}

.related-pages .tns-nav button {
  all: unset;
  cursor: pointer;
  margin: 0 0.1rem;
  font-size: var(--ms-neg-1);
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: inset 0 0 0 1px var(--color-primary);
  transition: 0.25s color, 0.25s background;
}

.related-pages .tns-nav .tns-nav-active {
  background: var(--color-primary);
  color: var(--color-white);
}

.related-pages .tns-controls {
  width: 8rem;
  left: 50%;
  right: auto;
  top: auto;
  bottom: -8rem;
  transform: translateX(-50%);
}

.related-pages .tns-controls button {
    /* transform: translateY(7.3rem) scale(0.5); */
  }

.related-pages .tns-controls [data-controls] {
  transform: none;
}

.site-header-toprow {
  pointer-events: none;
  color: var(--color-text);
  position: absolute;
  bottom: 0;
  z-index: 2;
  right: 0;
  left: 0;
  padding-left: var(--outer-gutters);
  padding-right: var(--outer-gutters);
  padding-top: 1rem;
  padding-bottom: 1rem;

  display: flex;
  margin-left: -0.5rem;
}

.site-header-toprow > * {
    padding-left: 0.5rem;
    pointer-events: auto;
  }

.site-header-toprow button {
    cursor: pointer;
  }

.languages .active a,
.high-contrast [data-a11y-menu] button {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: bold;
  text-decoration: underline;
  /* box-shadow: 0 0 0 1px var(--color-primary); */
}

.languages ul {
  padding-left: 0;
}

.languages ul li {
    list-style: none;
  }

.languages ul{
  display: flex;
  margin-left: -0.5rem;
}

.languages ul > * {
    padding-left: 0.5rem;
  }

[data-a11y-menu] button,
.languages a {
  all: unset;
  pointer-events: auto;
  padding: 0.2rem 0.6rem;
  box-shadow: 0 0 0 1px var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
}

[data-a11y-menu] button:hover, .languages a:hover {
    text-decoration: underline;
  }

/* display: flex; */

[data-a11y-menu] button svg, .languages a svg {
    height: 1rem;
    width: auto;
    margin-right: 0.5rem;
  }

@media (max-width: 62rem) {
  .site-header-toprow {
    display: none;
  }

  .menu-open .site-header-toprow {
    display: flex;
  }
}

@media (min-width: 62.001rem) {
  .site-header-toprow {
    font-size: var(--ms-neg-1);
    right: 0;
    left: auto;
    top: 0rem;
    bottom: auto;
  }

  .languages a,
  [data-a11y-menu] button {
    color: var(--color-white);
  }

    .languages a path, [data-a11y-menu] button path {
      fill: var(--color-white);
    }

  .languages .active a,
  .high-contrast [data-a11y-menu] button {
    background: var(--color-white);
    color: var(--color-primary);
  }

  .high-contrast [data-a11y-menu] button path {
    fill: black;
  }
}

/* @import "components/van11y-accessible-modal-window-aria.css"; */

pre {
  overflow-x: hidden;  
}
/*# sourceMappingURL=screen.css.map */

@media screen and (min-width: 62.001rem) {
  .block--heading, .block--iframe, .block--html, .block--image, .block--quote, .block--list, .block--text, .block--video, .block--localvideo {
    grid-column: 2 / 18 !important;
  }
  .block--html {
    margin: 0;
  }
}
.web-link {
  position: fixed;
  top: 32%;
  left: -3px;
  z-index: 10;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 2s;
}
.web-link a {
  background: #eb0027;
  padding: 9px 10px 9px 13px;
  color: #fff;
  border-radius: 0px 6px 6px 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.8rem;
  font-weight: 700;
  word-spacing: 8px;
  line-height: 1;
  text-decoration: none;
  text-align: center;
}
@-webkit-keyframes run {
  0% {
    left: -3px;
  }
  50% {
    left: 0px;
  }
  100% {
    left: -3px;    
  }
}

@media (max-width: 37.5rem) {
  .web-link a {
    height: 108px;
  }
}