@charset "UTF-8";
/*
  # Based on Kirby's Starterkit CSS

  ## Table of Contents

  1 Global Rules & Definitions
  1.1 Font Definitions
  1.2 Reset & Normalization
  1.3 General Typography
  1.4 Images & Figures
  1.5 Tables

  2 Layout Helpers & Reusable Components
  2.1 Kirbytext
  2.2 Button
  2.3 Grid & Layout
  2.4 Pagination
  2.5 Showcase
  2.6 Floats
  2.7 Forms
  2.8 Gallery

  3 Site Layout
  3.1 Header
  3.2 Menu
  3.3 Footer
  3.4 Main Content

  4 Template-specific Components
  4.1 Homepage
  4.2 Blog Article
  4.3 Events Table
  4.4 Media
  4.5 "About Us" site (paypal donate btn)
*/

/* =====  1 Global Rules & Definitions  ===================================== */


/* ## Color Definitions */

:root {
  --color-white-100: white;
  --color-white-90: #e6e6e6;
  --color-white-80: #cccccc;
  --color-white-70: #b3b3b3;
  --color-white-10: #191919;
  --color-choriosity-red: #be0519;
  --color-choriosity-red--medium: #990514;
  --color-choriosity-red--darker: #66030d;
  --color-choriosity-red--rgba: 190, 5, 25;
  --color-choriosity-red--light: #faeaea;
  --color-background: #fffffa;
  --color-tap: var(--color-choriosity-red--darker);
  --color-callout-bg: var(--color-background);
}


/* -----  1.1 Font Definitions  --------------------------------------------- */

/* Fira Sans */
@font-face {
  font-family: 'Fira Sans';
  src: url(../fonts/fira-sans/FiraSans-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Fira Sans';
  src: url(../fonts/fira-sans/FiraSans-Italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Fira Sans';
  src: url(../fonts/fira-sans/FiraSans-Medium.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Fira Sans';
  src: url(../fonts/fira-sans/FiraSans-SemiBold.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
}

/* -----  1.2 Reset & Normalization  ---------------------------------------- */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  /* Add correct display for IE 9- and some newer browsers */
  display: block;
}

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

::selection {
  background: var(--color-choriosity-red);
  color: var(--color-white-100);
}

/* -----  1.3 General Typography  ------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
pre {
  /* Reset font-sizes and normalize margins */
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 .6rem;
}

/* Headings */
h1,
h2,
h3 {
  font-family: Fira Sans, Helvetica, Arial, sans-serif;
  clear: both;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

h1 {
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1.25;
  text-shadow: 1px 1px 0px var(--color-choriosity-red);
}

h2 {
  font-size: 1.75rem;
  line-height: 2.2rem;
}

h2.article-title {
  margin-top: 0;
}

h3 {
  font-size: 1.25em;
  line-height: 1.2;
}

h2,
h3 {
  font-weight: 600;
}

h2,
h3:not(.showcase-title):not(.youtube-hint-text__headline) {
  margin-top: 2.5rem;
}

h4 {
  font-size: 1em;
}

p {
  line-height: 1.45;
}

/* Vertical lines around headings */
h1:before,
h1:after,
h2:before,
h2:after,
h3:before,
h3:after {
  content: '';
  border-top: 2px solid var(--color-choriosity-red);
  flex: 1 0 20px;
}

h1:before {
  margin: 0 20px 0 0;
}

h2:before,
h3:before {
  margin: 0 15px 0 0;
}

h1:after {
  margin: 0 0 0 20px;
}

h2:after,
h3:after {
  margin: 0 0 0 15px;
}

h2.article-title:before,
h2.article-title:after,
h3.showcase-title:before,
h3.showcase-title:after,
h3.youtube-hint-text__headline:before,
h3.youtube-hint-text__headline:after {
  content: none;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--color-choriosity-red);
}

a.vbox-item {
  border-bottom: none;
}

a:hover,
a:focus,
a:active {
  color: var(--color-choriosity-red);
}

/* Misc */
hr {
  font-size: 1.25rem;
  height: 2.2rem;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-choriosity-red);
}

hr::before {
  content: "";
  position: relative;
  display: block;
  background: currentColor;
  height: 2px;
  top: calc(50% + 1px);
}

hr::after {
  content: "";
  background: var(--color-background) url('../images/Notenschluessel_rot_rgb.svg') no-repeat 0% 0%/1.8rem 1.8rem;
  position: relative;
  padding: .25rem .8rem;
  top: 6px;
}

b,
strong {
  font-weight: 600;
}

p {
  hyphens: auto;
}

/* -----  1.4 Images & Figures  --------------------------------------------- */

img {
  border-style: none;
  width: 100%;
  height: auto;
}

/* Float the figures (alternating left/right) on bigger screens, but
   not the "embed" figures, those are mostly videos which should be full-width */
@media all and (min-width: 576px) {
  figure:nth-child(odd) {
    float: left;
    width: 40%;
    margin-right: 1rem;
  }

  figure:nth-child(even) {
    float: right;
    width: 40%;
    margin-left: 1rem;
  }

  figure.embed,
  figure.video,
  figure.wide {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}

/* With more available horizontal space, move the images more out of the text bounds */
@media all and (min-width: 1000px) {
  article.single figure:nth-child(odd) {
    margin-left: -2rem;
  }

  article.single blockquote figure:nth-child(odd) {
    margin-left: 0;
  }

  article.single figure:nth-child(even) {
    margin-right: -2rem;
  }

  article.single blockquote figure:nth-child(even) {
    margin-right: 0;
  }
}

@media all and (min-width: 1130px) {
  article.single figure:nth-child(odd) {
    margin-left: -5rem;
  }

  article.single blockquote figure:nth-child(odd) {
    margin-left: 0;
  }

  article.single figure:nth-child(even) {
    margin-right: -5rem;
  }

  article.single blockquote figure:nth-child(even) {
    margin-right: 0;
  }
}

figcaption {
  font-size: .75rem;
  line-height: 1rem;
  margin-top: -5px;
}

figure.video {
  height: 30rem;
  max-width: 60rem;
}

figure.video iframe {
  width: 100%;
  height: 100%;
}
figure.video video {
  width: 100%;
}


/* -----  1.5 Tables  ------------------------------------------------------- */

table {
  width: 100%;
  margin: auto;
  border-collapse: collapse;
}

td,
th {
  padding: 5px;
}


/* =====  2 Layout Helpers & Reusable Components  =========================== */

/* The Clearfix™: A classic … */
.cf::after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

.fade-bottom {
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
}

.card {
  background-color: var(--color-white-100);
  padding: 10px 20px 15px;
  margin-top: 25px;
  border: 1px solid var(--color-choriosity-red);
  border-radius: 5px;
  box-shadow: 4px 4px 8px var(--color-white-90);
}

.card.article {
  padding-bottom: 0;
}

/* -----  2.1 Kirbytext  ---------------------------------------------------- */

.intro {
  text-align: center;
  font-size: 1.125rem;
  margin-bottom: 3rem;
}

.text ul,
.text ol {
  margin-left: 1.5em;
}

.text blockquote {
  font-style: italic;
  border-left: 4px solid var(--color-choriosity-red);
  padding: .75rem;
  overflow: auto;
}

.text blockquote :last-child {
  margin-bottom: 0;
}

.text blockquote+* {
  margin-top: 1.5rem;
}

/* -----  2.2 Button  ------------------------------------------------------- */

.btn {
  display: inline-block;
  border-radius: 3px;
  padding: .6em .75em;
  white-space: nowrap;
  font-size: .8em;
  background: var(--color-choriosity-red);
  color: var(--color-white-100);
  box-shadow: 2px 2px 5px var(--color-white-70);
  text-shadow: 1px 1px 2px var(--color-choriosity-red--medium);
  border-bottom: none;
  cursor: pointer;
}

.btn:hover,
.btn:focus {
  color: var(--color-white-100);
  background: var(--color-choriosity-red--medium);
}

.btn:active {
  background: var(--color-choriosity-red--darker);
  box-shadow: 2px 2px 3px var(--color-white-70);
}

/* -----  2.3 Grid & Layout  ------------------------------------------------ */

.grid {
  font-size: 0;
}

.grid.gutter-1 {
  /* We don’t use the shorthand attribute `margin: …` here
     to make vertical margin easily overridable by other
     styles with a lower specifity. */
  margin-left: -.375rem;
  margin-right: -.375rem;
}

.grid.gutter-1 .column {
  padding-left: .375rem;
  padding-right: .375rem;
}

.column {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 1rem;
  vertical-align: top;
}

.wrap {
  box-sizing: content-box;
  margin: 0 auto;
  padding-left: .75rem;
  padding-right: .75rem;
  max-width: 36rem;
}

.wrap.wide {
  max-width: 40rem;
}

.red {
  background-color: var(--color-choriosity-red);
}

@media all and (min-width: 31.5em) {
  .wrap:not(.wide) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media all and (min-width: 38.25em) {
  .wrap {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .wrap.wide {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* -----  2.4 Pagination  --------------------------------------------------- */

nav.pagination {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  font-size: .8rem;
  margin-top: 25px;
}

nav.pagination .pagination-inactive {
  color: var(--color-white-70);
}

/* ----- 2.5 Projects Showcase ---------------------------------------------- */

.showcase {
  position: relative;
}

.showcase-item {
  list-style: none;
  margin-bottom: .75rem;
  position: relative;
}

@media all and (min-width: 38em) {
  .showcase-item {
    width: 33.33%;
  }

  .showcase-item:nth-last-child(3n+2):first-child,
  .showcase-item:nth-last-child(3n+2):first-child+.showcase-item,
  .showcase-item:nth-last-child(3n+1):first-child,
  .showcase-item:nth-last-child(3n+1):first-child~.showcase-item:nth-child(-n+4) {
    /* x = items
       When x % 3 = 2, select first and second item:
       When x % 3 = 1, select first 4 items: */
    width: 50%;
  }
}

.showcase-link {
  display: block;
  position: relative;
  padding-top: 100%;
  z-index: 0;
  border-bottom: 0;
}

.showcase-caption {
  position: absolute;
  inset: .75rem;
  background: rgba(var(--color-choriosity-red--rgba), .85);
  color: var(--color-white-100);
  letter-spacing: .05em;
  opacity: 0;
  transition: .5s opacity;
  will-change: opacity;
  border: 2px solid white;
}

.showcase-title {
  margin-bottom: 0;
  text-align: center;
  width: 100%;
  padding: 0 1.5rem;
  /* Vertically center the caption */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  hyphens: auto;
  text-shadow: 2px 2px 2px var(--color-choriosity-red--darker);
}

.showcase-image {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.showcase-link:hover .showcase-caption,
.showcase-link:focus .showcase-caption {
  opacity: 1;
}

@media (any-hover: none) {
  .showcase-caption {
    /* The media query, enclosing these rules matches only
       touch-screen devices that do not support hover due
       to the lack of a pointing device like a mouse.
       It does not work in all mobile browsers, but
       progressively enhances the experience on supported
       devices. Tested in Safari (iOS) 9.3 */
    opacity: 1.0;
    /* Reset will-change property to keep it from eating
       up unneccessary resources on touch-only devices */
    will-change: auto;
  }

  .showcase-title {
    font-size: .85em;
  }
}

/* -----  2.6 Floats -------------------------------------------------------- */

.float-left {
  float: left;
  margin: 5px 10px 5px 0;
  width: 40%;
}

.float-right {
  float: right;
  margin: 5px 0 5px 10px;
  width: 40%;
}

/* ----- 2.7 Forms ---------------------------------------------------------- */
.lbl {
  font-size: 80%;
  font-variant-caps: small-caps;
}

.inp {
  box-sizing: border-box;
  display: block;
  color: var(--color-white-10);
  width: 100%;
  padding: 7px;
  border: 1px solid var(--color-white-10);
  border-radius: 2px;
  background: transparent;
  margin-bottom: 20px;
  height: 45px;
  font-size: .9rem;
}

.inp:focus {
  border: 1px solid var(--color-choriosity-red);
  outline: none;
}

::placeholder {
  color: #999999;
  /* Firefox */
  opacity: 1;
}

input[type="submit"] {
  margin-bottom: 20px;
}

.honey {
  position: absolute;
  left: -9999px;
}

/* ----- 2.8 Gallery -------------------------------------------------------- */

div.gallery {
  margin-top: 2rem;
  background-color: var(--color-white-80);
  padding: 1rem;
}

div.gallery a {
  border: none;
}

ul.showcase,
ul.menu {
  margin-bottom: 0;
}

/* The Lightbox plugin wraps images in <a></a>. Since links are normally
underlined, an underline is also applied to the image. Prevent this.*/
a[data-lightbox] {
  border-bottom: none;
}


/* =====  3 Site Layout  ==================================================== */

html {
  background: var(--color-background);
  color: var(--color-white-10);
  font: normal 400 1.5em/1.5 "Fira Sans", Helvetica, Arial, sans-serif;
  /* Always show the vertical scrollbar to prevent `jumps`
     of page content after navigating from a very short page
     that does not scroll to a long pager */
  overflow-y: scroll;
  /* Neccessary for sticky footer. */
  position: relative;
  min-height: 100%;
  /* Prevent adjustments of font size after orientation
     changes in IE and iOS. */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* Highlight color for WebKit-bases touch devices. */
  -webkit-tap-highlight-color: var(--color-tap);
}

@media all and (max-width: 50em) {
  html {
    /* We decrease the font-size a little-bit for tiny
       screens. Because this stylesheet uses relative units
       everywhere, everything scales nicely. */
    font-size: 1.25em;
  }
}

/* ----- 3.1  Header  ------------------------------------------------------- */

.header {
  background-image: url('/assets/images/title-image_3000w.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media all and (min-width: 1920px) {
  .header {
    background-image: url('/assets/images/title-image_2560w.webp');
  }
}

@media all and (max-width: 1920px) {
  .header {
    background-image: url('/assets/images/title-image_1920w.webp');
  }
}

@media all and (max-width: 1366px) {
  .header {
    background-image: url('/assets/images/title-image_1366w.webp');
  }
}

@media all and (max-width: 1080px) {
  .header {
    background-image: url('/assets/images/title-image_1080w.webp');
  }
}

@media all and (max-width: 1024px) {
  .header {
    background-image: url('/assets/images/title-image_1024w.webp');
  }
}

@media all and (max-width: 800px) {
  .header {
    background-image: url('/assets/images/title-image_800w.webp');
  }
}

.title-image {
  display: block;
  opacity: 0;
}


/* -----  3.2 Menu  --------------------------------------------------------- */

.navbar {
  color: var(--color-white-100);
  position: sticky;
  position: -webkit-sticky;
  height: 72px;
  padding-right: 8vw;
  /* needed for javascript intersection detection */
  top: -1px;
  z-index: 100;
  display: flex;
  justify-content: center;
  gap: 10vw;
  transition: height .5s ease-out;
}

.navbar-sticky {
  box-shadow: 0 2px 6px 2px var(--color-white-80);
}

.navbar__end {
  display: flex;
  height: 100%;
  justify-content: space-evenly;
  align-items: center;
  gap: 10vw;
}

#title-logo {
  vertical-align: middle;
  max-height: 5rem;
  transform: scale(1);
  transform-origin: top center;
  margin-top: -17px;
  width: auto;
  transition: transform .04s ease-in-out;
  filter: drop-shadow(0 0 1px var(--color-choriosity-red--medium));
}

.navbar-sticky #title-logo {
  transform: scale(0.7);
  margin-top: 5px;
}

.navbar__home,
.navbar__social-media>a {
  border-bottom: none;
}

.navbar__social-media>a {
  height: 1.4em;
}

.navbar__social-media>a+a {
  margin-left: .5rem;
}

.social-media__logo {
  width: 1.4em;
  height: 1.4em;
  transition: all 300ms ease;
  filter: invert(99%) sepia(5%) saturate(485%) hue-rotate(304deg) brightness(115%) contrast(100%);
}

.social-media__logo:hover {
  transform: scale(1.2);
}

.side-menu {
  display: none;
}

.navigation,
.navbar__social-media {
  display: flex;
  align-items: center;
}

.menu {
  text-align: center;
}

.menu-item {
  display: inline-block;
  text-shadow: 1px 1px 2px var(--color-choriosity-red--medium);
}

.menu-item a {
  border-bottom: 0;
  position: relative;
}

.menu-item a:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: -6px;
  left: 0;
  background-color: #fff;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.menu-item.is-active a::before,
.menu-item a:hover::before {
  transform: scaleX(1);
}

.menu-item a:hover,
.menu-item a:focus,
.menu-item a:active {
  color: var(--color-white-100);
}

.menu-item+.menu-item {
  margin-left: 1em;
}

/* 1024px with 16px font-size */
@media all and (max-width: 64em) {
  #title-logo {
    max-height: 4rem;
    margin-top: 0;
  }

  .navbar-sticky #title-logo {
    margin-top: 10px;
  }

  .navbar {
    padding-right: 0;
    gap: 4vw;
  }

  .navbar__end {
    gap: 4vw;
  }
}

/* 768px with 16px font-size */
@media (max-width: 48em) {
  /* Hide scrollbar for Chrome, Safari, Edge and Opera when burger menu is open */
  body:has(.side-menu:checked)::-webkit-scrollbar {
    display: none;
  }

  .icon-menu {
    cursor: pointer;
    float: right;
    padding: 35px 40px;
    display: none;
  }

  .icon-menu-line {
    background: var(--color-white-100);
    display: block;
    height: 2px;
    position: relative;
    width: 24px;
  }

  .icon-menu-line::before,
  .icon-menu-line::after {
    background: var(--color-white-100);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
  }

  .icon-menu-line::before {
    top: 5px;
  }

  .icon-menu-line::after {
    top: -5px;
  }

  .icon-menu {
    display: block;
  }

  /* Toggle menu icon */
  .side-menu:checked~nav {
    max-height: 100%;
  }

  .side-menu:checked~.icon-menu .icon-menu-line {
    background: transparent;
  }

  .side-menu:checked~.icon-menu .icon-menu-line::before {
    transform: rotate(-45deg);
    top: 0;
  }

  .side-menu:checked~.icon-menu .icon-menu-line::after {
    transform: rotate(45deg);
    top: 0;
  }

  .navbar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .navbar__start {
    height: 72px
  }

  .navbar__end {
    flex-direction: column;
    font-size: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .1s 0s;
  }

  .navbar:has(.side-menu:checked) {
    height: 100vh;
    bottom: 0;
  }

  .navbar:has(.side-menu:checked) #title-logo {
    transform: scale(0.7);
    margin-top: 10px;
  }

  .navbar:has(.side-menu:checked) .navbar__end {
    visibility: visible;
    opacity: 1;
    transition: opacity .5s .15s;
  }

  .menu {
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }

  .menu-item+.menu-item {
    margin-left: 0;
  }
}

/* -----  3.3 Footer  ------------------------------------------------------- */

@keyframes pulsing-heart {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

.footer {
  bottom: 0;
  width: 100%;
  text-align: center;
  font-size: .875rem;
  padding-bottom: .5rem;
}

.footer a {
  border-bottom: 0;
}

.footer hr {
  margin-top: 0;
  margin-bottom: 0;
}

.footer .heart {
  /* The heart character of Arial Unicode MS just looks surprisingly nice … */
  font-family: "Arial Unicode MS", Arial, sans-serif;
  display: inline-block;
}

.footer-madewithkirby a:hover .heart {
  animation: pulsing-heart .6s linear infinite;
}

/* On wider screens: put all footer links in one line with separator dashes */
@media all and (min-width: 48em) {
  .footer p {
    display: inline;
    margin-bottom: 0;
  }

  .footer p+p::before {
    content: "—";
    color: var(--color-choriosity-red);
    margin: 0 .2em;
  }
}

/* -----  3.4 Main Content  ------------------------------------------------- */

.main {
  padding-top: 3rem;
  padding-bottom: 1.5rem;
}

/* =====  4 Template-specific Components ==================================== */

/* -----  4.1 Homepage  ----------------------------------------------------- */

.blog-section {
  background: var(--color-callout-bg);
  margin-top: 3rem;
  padding-bottom: .75rem;
}

.blog-section-more {
  text-align: center;
}

.link-all-events {
  margin-top: 20px;
}

/* ----- 4.2 Blog Article  -------------------------------------------------- */

.article-title {
  font-weight: 600;
  margin-bottom: 0;
}

.article-title a {
  border-bottom: 0;
}

.article-details {
  text-align: center;
  font-size: 90%;
}

.article-more {
  font-size: 75%;
  text-transform: uppercase;
  letter-spacing: .025em;
  white-space: nowrap;
  border-bottom: 2px solid var(--color-choriosity-red);
}

/* -----  4.3 Events Table -------------------------------------------------- */

.event {
  display: flex;
}

.event__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
  margin-top: 10px;
  min-width: 65px;
  height: 100%;
  border: 1px solid var(--color-white-90);
  border-radius: 3px;
  box-shadow: 2px 2px 5px var(--color-white-90);
}

.event__date p,
.event-details__misc p {
  margin-bottom: 0;
}

.event-date__month {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  background-color: var(--color-choriosity-red);
  color: var(--color-white-100);
  border-radius: 3px 3px 0 0;
}

.event-date__day,
.event-details__title {
  font-size: 1.5rem;
  font-weight: 600;
}

.event-date__weekday {
  font-size: .9rem;
  margin-top: -8px;
}

.event-details__misc {
  display: flex;
  flex-direction: column;
}

.event-details__misc p {
  font-size: .9rem;
}

.event-details__misc>* {
  display: flex;
}

.event-details__label {
  width: 75px;
  margin-right: 10px;
  text-align: right;
}

tr.border-bottom:not(:last-child) {
  border-bottom: 1px solid var(--color-choriosity-red);
}

/* -----  4.4 Media -------------------------------------------------- */

.youtube-hint-button {
  width: 100%;
}

/* -----  4.5 About Us ----------------------------------------------- */

.donate-paypal__logo {
  width: 8rem;
}