:root {
    --green: rgb(0, 219, 255);
    --dark-green: rgb(2, 179, 207);
    --light-gray: #f3f3f3;
    --fontSize: calc(100vw / 60);
    --lineHeight: calc(var(--fontSize) * 1.5);
    --titleBarHeight: 55px;
}

@media print {
     :root {
        --green: black;
        --dark-green: black;
        --light-gray: white;
    }
}

@media only screen and (min-width: 1501px) {
     :root {
        --fontSize: 32px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1500px) {
     :root {
        --fontSize: 22px;
    }
}

@media only screen and (max-width: 991px) {
     :root {
        --fontSize: 16px;
    }
}

html {
    background-color: #f8f8f8;
    background-image: url('/img/noise.png');
    background-size: 256px 256px;
    font-feature-settings: 'kern'1, 'rlig'1, 'liga'1, 'cv04'1, 'cv07'1, 'cv11'1;
}

body {
  padding: calc(var(--lineHeight)*2);
}

@media only screen and (max-width: 600px) {
  body {
    padding: 20px;
  }
}

h1,
h2 {
    font-feature-settings: 'kern'1, 'rlig'1, 'liga'1, 'calt'1, 'cv10'0, 'dlig'1, 'ss01'1, 'cv05'1;
    margin-top: 20px !important;
}

a:hover {
    color: var(--dark-green)
}

.button {
    display: block;
    text-align: center;
    border-width: 3px;
    border-color: black;
    border-style: solid;
    border-radius: 8px;
    margin-top: 20px;
    padding: 20px;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.button:hover {
    color: black;
    background: var(--green);
    border-color: var(--green);
    transition: background-color 0s, border-color 0s;
}

.stroke, h1, h2 {
    position: relative;
}

.stroke:before, h1:before, h2:before {
    content: '';
    background-image: url('/img/stroke1.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    display: block;
    top: 1px;
    left: -15px;
    height: calc(var(--lineHeight) * 2);
    width: 90%;
    position: absolute;
    z-index: -1;
    mix-blend-mode: multiply;
    opacity: 0.8;
}

.second.stroke:before {
    top: 4px;
    background-image: url('/img/stroke2.png');
}

.third.stroke:before {
    top: -2px;
    background-image: url('/img/stroke3.png');
}

blockquote {
    background: var(--light-gray);
    border-left: var(--hrThickness) solid var(--green);
    padding: calc(var(--lineHeight) * 1) calc(var(--lineHeight) * 2) calc(var(--lineHeight) * 1) calc(var(--lineHeight) * 2 - var(--hrThickness));
}

@media only screen and (max-width: 600px) {
    blockquote {
        padding-right: calc(var(--lineHeight) * 1.5);
    }
    blockquote a {
        word-wrap: unset;
        white-space: unset;
    }
}

blockquote p:first-child,
blockquote p:last-child {
    position: relative;
}

blockquote p:first-child::before,
blockquote p:last-of-type::after {
    color: var(--dark-green);
    font-weight: 600;
    font-size: 1rem;
}

blockquote:lang(en) p:first-child::before {
    content: '“';
    position: absolute;
    left: -.42rem;
}

blockquote:lang(en) p:last-of-type::after {
    content: '”';
    margin-left: -.25rem;
}

blockquote:lang(de) p:first-child::before {
    content: '„';
    position: absolute;
    left: -.42rem;
}

blockquote:lang(de) p:last-of-type::after {
    content: '“';
    margin-left: -.25rem;
}

blockquote:lang(fr) p:first-child::before {
    content: '«';
    position: absolute;
    left: -.72rem;
}

blockquote:lang(fr) p:last-of-type::after {
    content: '»';
    margin-left: -.15rem;
}

blockquote p {
    font-style: italic;
}

blockquote footer {
    font-weight: 500;
    font-size: .85rem;
    line-height: var(--lineHeight);
}g

p img {
  max-width: 100%;
}

.link {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

img.sift-logo {
  margin-left: auto;
  margin-right: auto;
  max-height: 100%;
  max-width: 80%;
  object-fit: contain;
}

@media only screen and (max-width: 600px) {
  .sift-logo-container {
    margin-top: 15px !important;
  }
}

.sift-logo-container a {
  text-decoration: none;
}

.logos {
  list-style: none;
  padding-left: 0;
}

.logos {
    --multiplier: 1;
}

.logo {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  position: relative;
  transform: scale(1, 1);
  transition: 0.3s ease;
}

.logo:hover, .logo:active, .logo:focus {
  transform: scale(1.5, 1.5);
}

.logo + .logo {
  margin-bottom: 50px;
}

.logo p {
  font-size: 0.75em;
  margin-bottom: 0;
  text-align: center;
}

.logo p:only-child {
  font-size: 1em;
}

.logo img {
  height: calc(var(--lineHeight) * 3 * var(--multiplier));
  margin-bottom: 0;
  margin-left: 10px;
  margin-top: 0;
  object-fit: contain;
  width: 100px;
}

.individuals {
  list-style: none;
  padding-left: 0;
}

.individual p:first-child {
  margin-bottom: 0;
}

.individual p:last-child:not(:only-child) {
  font-size: 0.65em;
  line-height: 1.25;
}

.update {
  margin-bottom: calc(var(--lineHeight) * 0.5);
}

.update h3, .update h4 {
  margin: 0;
}

.update p {
  margin-top: 0.65em;
}

.update p.date {
  font-size: 0.65em;
  line-height: 1.25;
  margin: 0;
}

.resize a, .wrap-link, .wrap-text li a, li a, p a, div a {
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  white-space: pre-wrap;       /* Since CSS 2.1 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.vh {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; /* added line */
}

.menu-list {
  list-style: none;
  padding-left: 0;
}

.toc {
  margin-top: 30px;
}

footer p {
  font-size: 0.6rem;
}

.letter.rtl div {
  direction: rtl;
}

.main, .sticky {
}

.mobile-hide-content {
  display: none;
}
.mobile-footer-content {
  margin-bottom: 1em;
}

@media only screen and (min-width: 600px) {
  aside p {
    /* font-size: 0.7rem !important; */
  }

  .footer {
  }

  .mobile-hide-content {
    display: block;
  }

  .mobile-footer-content {
    display: none;
  }

  .logos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: -20px;
  }

  .logo {
    margin-left: 20px;
    width: 22%;
  }

  .individuals {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }

  .individual {
    flex-basis: 49%;
  }

  .main {
    max-width: 100%;
  }

  .resize {
    font-size: 1.75vh;
    line-height: 1.5;
  }

  .sticky {
    left: 0;
    max-width: 250px;
    padding-bottom: calc(var(--lineHeight));
    padding-left: calc(var(--lineHeight));
    padding-top: calc(var(--lineHeight));
    position: fixed;
    top: 0;
    /* transform: translateY(-50%); */
    width: 20%;
  }

  .sticky-parent {
    position: relative;
  }

}

@media only screen and (min-width: 992px) {
  .individual {
    flex-basis: 30%;
  }

  .individual p:first-child {
    font-size: 0.8em;
  }

  .individual p:last-child:not(:only-child) {
    font-size: 0.6em;
    line-height: 1.25;
  }
}

@media only screen and (min-width: 1500px) {
  .sticky {
    max-width: 350px;
  }
}

@media only screen and (max-width: 600px) {
    .logo img {
        height: calc(var(--lineHeight) * 2 * var(--multiplier));
        padding: calc(var(--lineHeight) * 0.75);
    }

    .sticky-parent {
      display: block;
      overflow-x: hidden;
    }
}

@media screen {
    .low-contrast {
        color: #333;
    }
}

@media not screen {
    .only-screen,
    .only-screen * {
        display: none !important;
    }
}

@media not print {
    .only-print,
    .only-print * {
        display: none !important;
    }
}

@media only print {
     :root {
        --fontSize: 12pt;
    }
    html {
        background: none;
    }
    body {
        padding-bottom: 0;
    }
    h1,
    h2,
    h3,
    h4 {
        break-after: avoid;
    }
    h1+p,
    h2+p,
    h3+p,
    h4+p {
        break-before: avoid;
    }
    p,
    blockquote,
    img {
        break-inside: avoid;
    }
    .logos .logo {
        height: calc(var(--lineHeight) * 2);
    }
}

.menu {
  position: fixed;
  display: flex;
  align-items: center;
  right: 10px;
  top: 0;
  z-index: 5;
}

.menu>* {
  flex-basis: 62px;
}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 15px 0;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: #f8f8f888;
  border: 0;
  margin: 0;
  overflow: visible; }
.hamburger:hover {
  opacity: 0.7; }
.hamburger.is-active:hover {
  opacity: 0.7; }
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: #000; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 40px;
  height: 4px;
  background-color: #000;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block; }
.hamburger-inner::before {
  top: -10px; }
.hamburger-inner::after {
  bottom: -10px; }

/*
   * Slider
   */
.hamburger--slider .hamburger-inner {
  top: 2px; }
  .hamburger--slider .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s; }
  .hamburger--slider .hamburger-inner::after {
    top: 20px; }

.hamburger--slider.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--slider.is-active .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0; }
  .hamburger--slider.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-90deg); }


/* Threespot's expand toggle  */
/* https://github.com/Threespot/expand-toggle */

/* Expanded state */
.expandable, .js .expandable[aria-hidden="false"] {
  background-color: #73D5FA;
  border: 3px solid #000;
  border-radius: 8px;
  overflow: hidden;
  padding: 10px;
  position: absolute;
  right: 0;
  top: var(--titleBarHeight);
  transition: max-height 400ms ease-in-out,
              visibility 0s linear 0s;
  visibility: visible;
  width: 275px;
}

.menu .when-call-to-action {
  visibility: hidden;
  display: inline-block;
}

.menu .when-call-to-action .sift-logo {
  max-height: var(--titleBarHeight);
  margin: 0 12px;
}

.menu .call-to-action {
  flex-basis: max-content;
  margin: auto;
}

.menu .button {
  padding: 8px;
  margin: 0;
  white-space: nowrap;
}

@media only screen and (max-width: 600px) {
  .menu {
    top: 0;
    width: 100%;
  }

  .menu.show-call-to-action {
    background: #f8f8f8;
    border-bottom: 2px solid #64d4f7;
  }

  .menu.show-call-to-action .when-call-to-action {
    visibility: initial;
  }
}

/* Collapsed state */
.expandable[aria-hidden="true"],
/* Selector below prevents a flash of unstyled content (FOUC) */
.js .expandable:not([aria-hidden]) {
  max-height: 0 !important; /* !important required to override inline styles added by JS */
  transition: max-height 400ms ease-in-out,
              padding 0s linear 400ms,
              border-width 0s linear 400ms,
              visibility 0s linear 400ms;
  visibility: hidden;
  /* width: 0; */
  border-width: 0;
  padding: 0;
}

/* We also suggest hiding the button when JS is disabled.
Note: Modernizr looks for a “no-js” class on the html tag and replaces it with “js” on load.
If not using Modernizr, see https://www.paulirish.com/2009/avoiding-the-fouc-v3/ */
.no-js [data-expands] {
  display: none;
}

form .field-wrapper {
  margin-bottom: 1em;
}

form .field-label {
  font-weight: bold;
}

form .additional-instructions {
  font-size: smaller;
}