/*
  Theme Name: Reloaded
  Author: Hannes Welk & Lu Kohnen
  Description: WordPress Theme für Endlich Wachstum Reloaded, erstellt am 20.04.2023
  */

  /* --------------------------------------------------
     reset
  -------------------------------------------------- */

  * { 
    box-sizing:border-box;
    outline:0;
  }

  html { 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,
  b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

  ol, ul { list-style: none; }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  ::selection { background:black; color:white; }
  ::-moz-selection { background:black; color:white; }

  body {
    color:#333;
    background:var(--colorbackground);
  }

  /* --------------------------------------------------
     font import
  -------------------------------------------------- */

  /* zilla-slab-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Zilla Slab';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/zilla-slab-v11-latin-500.eot'); /* IE9 Compat Modes */
    src: url('fonts/zilla-slab-v11-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/zilla-slab-v11-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/zilla-slab-v11-latin-500.woff') format('woff'), /* Modern Browsers */
         url('fonts/zilla-slab-v11-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/zilla-slab-v11-latin-500.svg#ZillaSlab') format('svg'); /* Legacy iOS */
  }

  /* atkinson-hyperlegible-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/atkinson-hyperlegible-v10-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/atkinson-hyperlegible-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/atkinson-hyperlegible-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/atkinson-hyperlegible-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/atkinson-hyperlegible-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/atkinson-hyperlegible-v10-latin-regular.svg#AtkinsonHyperlegible') format('svg'); /* Legacy iOS */
  }
  /* atkinson-hyperlegible-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Atkinson Hyperlegible';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/atkinson-hyperlegible-v10-latin-italic.eot'); /* IE9 Compat Modes */
    src: url('fonts/atkinson-hyperlegible-v10-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/atkinson-hyperlegible-v10-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/atkinson-hyperlegible-v10-latin-italic.woff') format('woff'), /* Modern Browsers */
         url('fonts/atkinson-hyperlegible-v10-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/atkinson-hyperlegible-v10-latin-italic.svg#AtkinsonHyperlegible') format('svg'); /* Legacy iOS */
  }
  /* atkinson-hyperlegible-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/atkinson-hyperlegible-v10-latin-700.eot'); /* IE9 Compat Modes */
    src: url('fonts/atkinson-hyperlegible-v10-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/atkinson-hyperlegible-v10-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/atkinson-hyperlegible-v10-latin-700.woff') format('woff'), /* Modern Browsers */
         url('fonts/atkinson-hyperlegible-v10-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/atkinson-hyperlegible-v10-latin-700.svg#AtkinsonHyperlegible') format('svg'); /* Legacy iOS */
  }
  /* atkinson-hyperlegible-700italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Atkinson Hyperlegible';
    font-style: italic;
    font-weight: 700;
    src: url('fonts/atkinson-hyperlegible-v10-latin-700italic.eot'); /* IE9 Compat Modes */
    src: url('fonts/atkinson-hyperlegible-v10-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/atkinson-hyperlegible-v10-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/atkinson-hyperlegible-v10-latin-700italic.woff') format('woff'), /* Modern Browsers */
         url('fonts/atkinson-hyperlegible-v10-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/atkinson-hyperlegible-v10-latin-700italic.svg#AtkinsonHyperlegible') format('svg'); /* Legacy iOS */
  }








  /* --------------------------------------------------
     typography
  -------------------------------------------------- */

  html {
    font-size:15px;
  }

    @media only screen and (min-width :  600px) { html { font-size:16px; } }
    @media only screen and (min-width :  900px) { html { font-size:17px; } }
    @media only screen and (min-width : 1200px) { html { font-size:18px; } }

  body {
    font-family:'Atkinson Hyperlegible','Roboto','Arial',sans-serif;
    font-size:1rem;
    line-height:1.5;
  }

  h1,h2,h3 {
    font-family:'Zilla Slab',serif;
    line-height: 1.1;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  h1 {
    font-size:2.3rem;
    margin-bottom:2rem;
  }

  h2 {
      font-size:1.6rem;
      margin: 2rem 0;
  }

  h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }

  p {
    margin:1.6rem 0;
  }

  p:first-child {
    margin-top:0;
  }

  p:last-child {
    margin-bottom:0;
  }

  a {
/*    color: var(--colormain);*/
    text-decoration: underline;
    color:black;
  }

  strong {
      font-weight:700;
  }

  em {
    font-style:italic;
  }

  .small {
    font-size:80%;
  }

  .button,
  .wp-block-button .wp-element-button {
    display: inline-block;
    font-weight:700;
    background-color: var(--colormain);
    color:black;
    border:2px solid black;
    border-radius:0;
    padding:.5rem;
    font-size:.8rem;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
  }

  .button--outline {
    background:transparent;
  }

  .button:hover {
  }

  table {
    width:100%;
  }

    tr {
      border-bottom:1px solid rgba(0,0,0,.25);
    }

    tr:last-child {
      border:none;
    }

      td {
        padding:.5rem 0;
      }

      .table-head td {
        font-weight: bold;
      }





  /* --------------------------------------------------
     variables
  -------------------------------------------------- */

  body:not(.admin-bar) {
    --wp-admin--admin-bar--height: 0px;
  }

  :root {
      --headerheight: 3rem;
      --maxwidth: 42rem;
      --maxwidthsmall: 30rem;
      --cardwidth: 14rem;
      --cardheight: 22rem;

      --colorbackground: #c4d4d4;
      --colorbackgrounddarker: #b7c3c3;
      --colormain: #14b6b9;
      --colorbright: #e2f6f7;

      --editorpadding: 2rem;
      
  }

  @media (min-width : 900px) { 
   :root {
      --editorpadding: 3rem;
   }
  }




  /* --------------------------------------------------
     animations
  -------------------------------------------------- */

  @keyframes plainFadeIn {
      from {opacity: 0; }
      to { opacity: 1; }
  }



  /* --------------------------------------------------
     banner
  -------------------------------------------------- */

  .banner {
    position:fixed;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    gap:1rem;
    bottom:0;
    left:0;right:0;
    z-index:3;
    padding: 1.5rem .75rem;
    background: #fcfdb0;
    border-top: 2px solid black;
    color:black;
    font-size:.9rem;
    font-style: italic;
    text-align: center;
  }

  .cookiebanner {
    bottom:-100%;
    transition:bottom .3s ease;
  }

  .cookiebanner.active {
    bottom:0;
  }

    .banner-content {
      display:flex;
      gap:2rem;
      max-width:32rem;
    }

      .banner-content-icon {
        flex: 5rem 0 0;
      }

      .banner-content-text {
        text-align:left;
        font-style:normal;
      }

        .banner-content-text h2 {
          margin:.5rem 0;
        }

    .banner-buttons {
      display:flex;
      gap:.5rem;
      width:100%;
      max-width:32rem;
    }

      .banner-buttons .button {
        background-color:#ffffe8;
        flex:1;
      }

      .banner-buttons .button-secondary {
        background-color:transparent;
      }



  /* --------------------------------------------------
     header
  -------------------------------------------------- */

  header {
    position: fixed;
    top: var(--wp-admin--admin-bar--height);
    left: 0;
    right: 0;
    height:var(--headerheight);
    background:var(--colormain);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    box-shadow:inset 0 -2px 0 black;
  }

    .header-brand {
      display:flex;
      justify-content: center;
      flex:1;
    }

      .header-brand-logo {
        display:block;
        height:var(--headerheight);
        padding:.5rem;
        border-right:2px solid black;
      }

        .header-brand-logo svg {
          height:100%;
          width:auto;
          fill:black;
        }

        .header-brand-logo:hover {
          background:var(--colorbright);
          box-shadow:inset 0 -2px 0 black;
        }

        .header-brand-logo .logo-desktop {
          display:none;
        }

        @media (min-width : 1040px) { 

          .header-brand-logo .logo-desktop { display:block; }
          .header-brand-logo .logo-mobile { display:none; }
        }

      .header-brand-claim {
        font-size:.9rem;
        color:black;
        font-weight:bold;
        padding:.5rem 1.1rem;
        line-height:1.2;
        display:flex;
        flex:1;
        align-items: center;
      }

      @media (max-width : 600px) { 

        .header-brand-claim { display:none; }
        .header-brand { flex:0; }
      }

    .header-nav {
      display: flex;
    }

      .header-nav li {
        border-left:2px solid black;
      }

        .header-nav-button {
          cursor: pointer;
          background:none;
          border:none;
          display:flex;
          align-items: center;
          height: var(--headerheight);
          padding: 1rem;
        }

          .header-nav-button-close {
            display:none;
          }

          .header-nav-button.active .header-nav-button-icon {
            display:none;
          }

          .header-nav-button.active .header-nav-button-close {
            display:block;
          }

        .header-nav-button svg {
          display:block;
          width:1rem;
          height:auto;
          animation:popIn cubic-bezier(0.34, 1.56, 0.64, 1) .5s;
          animation-fill-mode: backwards;
        }

        @keyframes popIn {
            from {opacity: .3; transform:scale(.3); }
            to { opacity: 1;transform:none; }
        }

        .header-nav-button-label {
          color:black;
          font-size:.8rem;
          font-weight:bold;
          margin-left:.5rem;
        }

        @media (max-width : 800px) { 

          .header-nav-button-label {
            display:none;
          }
        }

        .header-nav-button:hover
        {
          background:var(--colorbright);
          box-shadow:inset 0 -2px 0 black;
        }

        .header-nav-button.active,
        .header-nav-button.active:hover {
          background:var(--colorbright);
          box-shadow:none;
        }




  /* --------------------------------------------------
     overlay
  -------------------------------------------------- */

  .overlay {
    position:fixed;
    top:0;bottom:0;
    left:0;right:0;
    z-index:2;
    display:none;
  }

    .overlay > * {
      position:absolute;
      top: calc(var(--headerheight) + var(--wp-admin--admin-bar--height));
      width:100%;
      background:var(--colorbright);
      padding:1rem var(--editorpadding);
      text-align: center;
      display:none;
      animation:overlayMenuSlideIn ease .4s;
      animation-fill-mode: backwards;
      border-bottom:2px solid black;
    }

    @keyframes overlayMenuSlideIn {
        from { transform:translateY(-100%); }
        to { transform:none; }
    }


    /* overlay buttons */

      .overlay button,
      .overlay a,
      .overlay input {
        background:transparent;
        border:2px solid transparent;
        border-radius: 0.4rem;
        padding:.6rem .9rem;
        font-size:.8rem;
        font-weight:bold;
        cursor: pointer;
        display:flex;
        justify-content: center;
        text-decoration:none;
        color:black;
      }

      .overlay button:hover,
      .overlay a:hover {
        background:rgba(0,0,0,.05);
      }

        .overlay button svg {
          display:inline-block;
          width:1rem;
          height:auto;
          margin-right:.5rem;
          fill:black;
        }

      .overlay button span {
        color:black;
      }

      .overlay button.active,
      .overlay-language .wpml-ls-current-language a,
      .overlay-menu .current-menu-item a {
        color: black;
        border:2px solid black;
      }

      .overlay button.active:hover,
      .overlay-language .wpml-ls-current-language a:hover,
      .overlay-menu .current-menu-item a:hover {
        background:white;
      }


    /* filter overlay */

      .overlay-filter p {
        font-size:.8rem;
        font-weight:bold;
        text-transform:uppercase;
        margin:0 0 .35rem;
        color: black;
      }

      .overlay-filter nav {
        display:flex;
        flex-wrap:wrap;
        justify-content: center;
        gap:.3rem;
        margin-bottom:2rem;
      }

      .overlay-filter nav:last-child {
        margin:0;
      }


    /* search overlay */

    .overlay-search {
    }

      .overlay-search input {
        font-family:'Atkinson Hyperlegible',sans-serif;
        display:inline;
      }

      .overlay-search input[type=search] {
        background:rgba(0,0,0,.05);
        border:2px solid transparent;
        cursor: text;
        width:15rem;
      }

      .overlay-search input[type=submit] {
        border:2px solid black;
        cursor: pointer;
      }

      .overlay-search input[type=submit]:hover {
        background:white;
      }


    /* language overlay */

    .overlay-language {
      text-align: center;
    }

      .overlay-language ul {
        display:flex;
        gap:.5rem;
        justify-content: center;
        padding:1rem var(--editorpadding);
      }

      .overlay-language .wpml-ls-display {
        display:none;
      }
      
      .overlay-language .wpml-ls-legacy-list-horizontal a {
        padding: 0.6rem 0.9rem;
      }


    /* menu overlay */

    .overlay-menu {

    }

      .overlay-menu ul {
        display:flex;
        flex-wrap:wrap;
        justify-content: center;
        gap:.3rem;
        padding:1rem var(--editorpadding);
      }


    /* overlay background */

  .overlay-background {
    height:100%;
    background:rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    display:block;
    animation:overlayFadeIn ease .3s;
  }

  @keyframes overlayFadeIn {
      from {opacity: 0; }
      to { opacity: 1; }
  }





  /* --------------------------------------------------
     page
  -------------------------------------------------- */

  body {
    background:var(--colorbackground);
    /*background:url(img/background/13900618_5291450.jpg);
    background:url(img/background/34666024_18_1sas12das.jpg);
    background:url(img/background/22_dhans11.jpg);*/
    background-size:cover;
    background-attachment: fixed;
  }

  main {
    padding-top:var(--headerheight);
  }

  .ewpage {
    min-height: 100vh;
  }

    .ewpage-content {
      max-width:var(--maxwidth);
      margin:3rem auto;
      background:white;
      padding:var(--editorpadding);
    }


  /* --------------------------------------------------
     blocks
  -------------------------------------------------- */

  .editorcontent > *:not(.media) {
    max-width: var(--maxwidth);
    margin-left: auto;
    margin-right: auto;
    padding-left:var(--editorpadding);
    padding-right:var(--editorpadding);
  }





  /* --------------------------------------------------
     list
  -------------------------------------------------- */

  .editorcontent > ul,
  .wp-block-list {
    list-style: disc;
    margin-top:2rem;
    margin-bottom:2rem;
    padding-left:calc(var(--editorpadding) + 40px) !important;
  }

    .editorcontent > ul li,
    .wp-block-list li {
      padding:.3rem;
    }








  /* --------------------------------------------------
     methods
  -------------------------------------------------- */

    /* loader before page is ready */

    .loader {
      display:flex;
      width:100%;
      justify-content: center;
      align-items:center;
      padding:2rem;
      background:var(--colorbackgrounddarker);
      border-bottom:2px solid black;
      gap:1rem;
    }

      .loader-animation {
        width:3rem;
        height:2rem;
        position:relative;
      }

        .loader-animation-card {
          padding:.2rem;
          width:1.2rem;
          height:2rem;
          position:absolute;
          left:0;
        }

          .loader-animation-card:after {
            display:block;
            width:100%;
            height:100%;
            content:'';
            border-radius:.25rem;
            border:2px solid black;
            background:var(--colorbackground);
          }

        .loader-animation-card:nth-child(1) { z-index:1; animation: loader-animation-card-1 ease 2.5s infinite; }
        .loader-animation-card:nth-child(2) { z-index:2; animation: loader-animation-card-2 ease 2.5s infinite; }
        .loader-animation-card:nth-child(3) { z-index:3; animation: loader-animation-card-3 ease 2.5s infinite; }

    @keyframes loader-animation-card-1 {
        0%   { transform:scale(.8) translateX(0); }
        33%  { transform:scale(.8) translateX(200%); }
        66%  { transform:scale(.9) translateX(90%); }
        100% { transform:scale(.8) translateX(0); }
    }

    @keyframes loader-animation-card-2 {
        0%   { transform:scale(.9) translateX(90%); }
        33%  { transform:scale(.8) translateX(0); }
        66%  { transform:scale(.8) translateX(200%); }
        100% { transform:scale(.9) translateX(90%); }
    }

    @keyframes loader-animation-card-3 {
        0%   { transform:scale(.8) translateX(200%); }
        33%  { transform:scale(.9) translateX(90%); }
        66%  { transform:scale(.8) translateX(0); }
        100% { transform:scale(.8) translateX(200%); }
    }


    /* method topic buttons */

    .methodtopics {
      flex-wrap:wrap;
      justify-content: center;
      gap:.3rem;
      padding:2.5rem var(--editorpadding);
      display:none;
    }

    .methodtopics.ready {
      display:flex;
    }

      .methodtopics button {
        background:transparent;
        border:2px solid transparent;
        border-radius: 0.4rem;
        padding:.6rem .9rem;
        font-size:.8rem;
        font-weight:bold;
        cursor: pointer;
        display:flex;
        justify-content: center;
        text-decoration:none;
        color:black;
        animation: methodtopic-button-appear .3s ease;
        animation-fill-mode: backwards;
      }

    @keyframes methodtopic-button-appear {
        from  { transform:scale(.7) translateY(-10%); opacity:0; }
        to { transform:none; opacity:1; }
    }

    .methodtopics button:nth-child(1) { animation-delay:0.1s; }
    .methodtopics button:nth-child(2) { animation-delay:0.2s; }
    .methodtopics button:nth-child(3) { animation-delay:0.3s; }
    .methodtopics button:nth-child(4) { animation-delay:0.4s; }
    .methodtopics button:nth-child(5) { animation-delay:0.5s; }
    .methodtopics button:nth-child(6) { animation-delay:0.6s; }
    .methodtopics button:nth-child(7) { animation-delay:0.7s; }
    .methodtopics button:nth-child(8) { animation-delay:0.8s; }
    .methodtopics button:nth-child(9) { animation-delay:0.9s; }

      .methodtopics button:hover {
        background:rgba(0,0,0,.05);
      }

        .methodtopics button svg {
          display:inline-block;
          width:1rem;
          height:auto;
          margin-right:.5rem;
          fill:black;
        }

      .methodtopics button span {
        color:black;
      }

      .methodtopics button.active {
        color: black;
        border:2px solid black;
      }

      .methodtopics button.active:hover {
        background:white;
      }

  .methods {
    list-style: none;
    padding:0;
    display:flex;
    gap:.8rem;
    overflow-x:scroll;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding:2rem;
    min-height:80vh;
  }

    @media (hover: hover) { 
      .methods {
        overflow-x: auto;
        overscroll-behavior-x: unset;
        flex-wrap: wrap;
        justify-content: center;
      }
     }



    .method {
      display:flex;
      width:var(--cardwidth);
      height:var(--cardheight);
      flex-direction:column;
      flex:none;
      scroll-snap-align: center;
      position:relative;
      perspective: 1600px;
      transition:all .3s ease;
    }

    .method.new {
      animation:fadeIn ease .5s;
      animation-fill-mode: backwards;
    }

    .method:nth-child(1 of .new)  { animation-delay:  .1s; }
    .method:nth-child(2 of .new)  { animation-delay:  .2s; }
    .method:nth-child(3 of .new)  { animation-delay:  .3s; }
    .method:nth-child(4 of .new)  { animation-delay:  .4s; }
    .method:nth-child(5 of .new)  { animation-delay:  .5s; }
    .method:nth-child(6 of .new)  { animation-delay:  .6s; }
    .method:nth-child(7 of .new)  { animation-delay:  .7s; }
    .method:nth-child(8 of .new)  { animation-delay:  .8s; }
    .method:nth-child(9 of .new)  { animation-delay:  .9s; }
    .method:nth-child(10 of .new) { animation-delay: 1.0s; }
    .method:nth-child(11 of .new) { animation-delay: 1.1s; }
    .method:nth-child(12 of .new) { animation-delay: 1.2s; }
    .method:nth-child(13 of .new) { animation-delay: 1.3s; }
    .method:nth-child(14 of .new) { animation-delay: 1.4s; }

    @keyframes fadeIn {
        from {opacity: 0; transform:translateY(10%) scale(0.95); }
        to { opacity: 1; transform:none; }
    }

      .method-front,
      .method-back {
        position:absolute;
        top:0;bottom:0;
        left:0;right:0;
        backface-visibility: hidden;
        transition:all .3s ease;
        background:white;
        background:radial-gradient(white, #fbfbfb);
        border: 2px solid black;
        border-radius:.5rem;

      }

      .method.incomplete .method-front { border-color:red; }

      .method-back {
        transform: rotateY(180deg);
        }

      .method:hover .method-front,
      .method:focus .method-front,
      .method:active .method-front {
          transform: rotateY(-180deg);
      }

      .method:hover .method-back,
      .method:focus .method-back,
      .method:active .method-back {
          transform: rotateY(0);
      }

      .method-front {
        display:flex;
        flex-direction:column;
        justify-content: space-between;
        text-align: center;
      }

        .method-front-topic {
          padding:.6rem;
          display:flex;
          justify-content: space-between;
          align-items: center;
        }

          .method-front-topic-icon {
            width:1.4rem;
            color:currentColor;
          }

            .method-front-topic-icon svg {
              display:block;
              width:100%;
              height:auto;
            }

              .method-front-topic-icon svg * {
                fill:currentColor !important;
              }

          .method-front-topic-name {
            font-size:.7rem;
            font-weight:bold;
            text-transform: uppercase;
            margin:0;
            padding-left:.75rem;
          }

        .method-front-image {
          display:flex;
          justify-content: center;
          align-items: center;
          padding-top:1rem;
        }

          .method-front-image svg {
            display:inline-block;
            width:5rem;
            height:auto;
          }

        .method-front-format,
        .method-front-barrier {
          margin:0;
          position:absolute;
          writing-mode: vertical-rl;
          text-orientation: mixed;
          top:0;right:0;
          background:#ccc;
          padding:.5rem;
          font-size:.7rem;
          font-weight:bold;
        }

        .method-front-barrier {
          left:0;
          right:unset;
/*          display:none;*/
        }

        .method-front-title {
          height:6rem;
          padding:.75rem;
        }

          .method-front-title h2 {
            font-size:1.6rem;
            margin:0;
          }

        .method-front-subtitle {
          height:4rem;
          padding:.5rem;
        }

          .method-front-subtitle p {
            margin:0;
            line-height:1.1;
          }

        .method-front-details {
          display:flex;
          border-top:1px solid black;
        }

          .method-front-details > * {
            flex-basis:50%;
            font-size:.8rem;
            display:flex;
            justify-content: center;
            align-items: center;
            padding:.6rem 0;
          }

          .method-front-details-time {
            border-right:1px solid black;
          }

            .method-front-details svg {
              display:inline-block;
              width:1rem;
              height:1rem;
              margin-right:1rem;
            }

          .method-back {
            padding:1rem;
            display:flex;
            flex-direction:column;
            height:100%;
            justify-content: space-between;
            position:relative;
            overflow:hidden;
          }

            .method-back-icon {
              position: absolute;
              right: -25%;
              top: -8%;
              width: 12rem;
              opacity: .1;
              z-index:-1;
            }

              .method-back-icon svg {
                display:block;
                width:100%;
                height:auto;
                fill:currentColor;
              }

            .method-back-text {
              height:15rem;
              overflow:hidden;
              position:relative;
            }

            .method-back-text::after {
              content: "";
              text-align: right;
              position: absolute;
              bottom: 0;
              right: 0;
              width: 100%;
              height: 2rem;
/*              background: linear-gradient(to bottom, rgba(253, 253, 253, 0), rgba(253, 253, 253, 1) 50%);*/
            }

            .method-back-buttons {
              display:flex;
              width:100%;
              justify-content: center;
              gap:.5rem;
            }

              .method-back-buttons a {
/*                flex-basis:50%;*/
              }

              .method-back-buttons-home {
                display:none;
              }

            .method-back-edit {
              position:absolute;
              top:0;
              right:0;
            }

              .method-back-edit .button {
                margin-top:0;
                border-top: 0;
                border-right: 0;
              }

      .method.donationcard .method-front {
        background:linear-gradient(-45deg, 
          #fff 66%, #fdfafb 66%, 
          #fdfafb 69%, #fff 69%,
          #fff 71%, #fdfafb 71%, 
          #fdfafb 78%, #fff 78%,
          #fff 80%, #fdfafb 80%, 
          #fdfafb 91%, #fff 91%
        );
        box-shadow: inset .3rem .3rem 0 #fed7e4, inset -.3rem -.3rem 0 #fed7e4;
        border-color: #eb4578;
      }








  /* --------------------------------------------------
     single method
  -------------------------------------------------- */

  .singlemethod {
  }

    .singlemethod-method {
      max-width:var(--maxwidth);
      margin:4rem auto;
    }

    .singlemethod-method-overview {
      margin:0 auto 3rem;
    }

      .singlemethod-method-overview .method {
        margin:0 auto;
      }

        .singlemethod-method-overview .method-back-buttons-readmore {
          display:none;
        }

    .singlemethod-method-content {
      max-width:var(--maxwidth);
    }

    .singlemethod-method-content-details {
        font-size:.9rem;
      }

        .singlemethod-method-content-details p {
          padding:1rem 0;
          margin:0;
          border-top:1px solid black;
        }

        .singlemethod-method-content-details p:last-child {
          border-bottom:1px solid black;
        }

        .singlemethod-method-content-details ul {
          display: flex;
          flex-wrap: wrap;
          gap:.5rem;
          border-top:1px solid black;
          padding:1rem 0;
        }

          .singlemethod-method-overview .method-back-buttons-home {
            display:inline-block;
          }

    @media (min-width : 1000px) { 

      .singlemethod-method {
        display:flex;
        gap:2rem;
        max-width:calc(var(--maxwidth) + var(--cardwidth));
      }

      .singlemethod-method-overview { 
        position:sticky;
        top:calc(var(--headerheight) + 4rem);
        margin:0;
        height: var(--cardheight);
      }

      .singlemethod-method-content {
        min-height:100vh;
      }

    }

    .singlemethod-related {
      border-top:2px solid black;
      padding:4rem 0;
      background:var(--colorbackgrounddarker);
    }

      .singlemethod-related h3 {
        padding:0 1rem;
        text-align: center;
        font-family:'Atkinson Hyperlegible',sans-serif;
        font-weight:bold;
      }

      .singlemethod-related .methods {
        margin-top:0;
        min-height:unset;
      }








  /* --------------------------------------------------
     pagenotive
  -------------------------------------------------- */

.pagenotice {
  max-width:32rem;
  margin:0 auto;
  padding:5rem 1rem;
  text-align:center;
}

  .pagenotice svg {
    display:block;
    width:12rem;
    height:auto;
    margin:0 auto 1rem;
  }







  /* --------------------------------------------------
     donate
  -------------------------------------------------- */

  .donate {
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    gap:2rem;
    padding: 1.5rem .75rem;
    background: #97fcc6;
    border-top: 2px solid black;
    color:black;
    font-size:.9rem;
    font-style: italic;
    text-align: center;
  }

    .donate-content {
      display:flex;
      gap:2rem;
      max-width:32rem;
    }

      .donate-content-icon {
        flex: 5rem 0 0;
      }

      .donate-content-text {
        text-align:left;
        font-style:normal;
      }

        .donate-content-text h2 {
          margin:.5rem 0;
        }

        .donate-buttons {
          display:flex;
          gap:.5rem;
          width:100%;
          max-width:32rem;
        }

          .donate-buttons .button {
            font-style: normal;
            background-color:#ceffe4;
            flex:1;
          }

          .donate-buttons .button-secondary {
            background-color:transparent;
          }






  /* --------------------------------------------------
     footer
  -------------------------------------------------- */

  footer {
    display:flex;
    gap: 2rem;
    flex-direction: column;
    align-items: center;
    background: var(--colormain);
    color: black;
    padding: 2rem;
    position:relative;
    border-top:2px solid black;
  }

    .footer-logo {
      max-width:14rem;
    }

      .footer-logo svg {
        width:100%;
      }

        .footer-logo svg .ring-1 { fill:#ceedee; }
        .footer-logo svg .ring-2 { fill:#25898a; }
        .footer-logo svg .ring-3 { fill:white; }

    .footer-text {
      text-align: center;
      font-size: .8rem;
      max-width:26rem;
    }

      .footer-text a:hover {
        color:white;
      }

      .footer-text-social {
        display:flex;
        gap:.4rem;
        margin:2rem 0;
        justify-content: center;
        flex-wrap:wrap;
      }

      .footer-text-social a {
        display:block;
        border:2px solid black;
        padding:.3rem .6rem;
        text-decoration:none;
      }

      .footer-text-social a:hover {
        background:#7adbdd;
        color:black;
      }

    .footer-text-menu ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      margin-bottom: 1rem;
    }

      .footer-text-menu ul li:after {
        content: '|';
        padding: 0 .25rem;
      }

      .footer-text-menu ul li:last-of-type:after {
        content: '';
      }

    @media (min-width : 800px) { 
      footer {
        flex-direction:row;
        align-items:flex-start;
        justify-content: center;
      }

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

        .footer-text-menu ul,
        .footer-text-social {
          justify-content: flex-start;
        }
    }

    .adminfooter {
      border-top:2px solid black;
      padding:1rem;
      background:#1a2f2f;
      text-align:center;
      font-size: .8rem;
      color:white;
    }

      .adminfooter ul {
        justify-content: center;
      }

        .adminfooter a {
          color:#c5f6f6;
        }


  /* hacks, misc */

  .otgs-development-site-front-end {
    display:none;
  }