diff --git a/web/donate-de.htm4 b/web/donate-de.htm4
index da16a986..b1e84f1f 100644
--- a/web/donate-de.htm4
+++ b/web/donate-de.htm4
@@ -1,84 +1,87 @@
 m4_dnl -*-html-*-
 m4_include(`template.m4')
 m4_dnl $Id$
 
 m4_define(`DE')
 m4_define(`EN_FILE', `donate.html')
 
 m4_define(`TITLE', `Spenden')
 m4_define(`MAIN', `donate')
 
 PAGE_START
 
 <div class="donate_header">
- <span class="text">
-  Wir lieben Freie Software!<br />
-  Sie auch?<br />
-  <b>Unterstützen Sie Gpg4win!</b>
- </span>
+ <div>
+  <span class="text">
+   Wir lieben Freie Software!<br />
+   Sie auch?<br />
+   <b>Unterstützen Sie Gpg4win!</b>
+  </span>
+ </div>
+ <img src="img/heart.png" alt="Bild mit drei Herzen" />
 </div>
 
 <div id="intro">
 <h2>Spenden</h2>
 <p>Ihre Spende unterstützt die Pflege und Weiterentwicklung von Gpg4win
 und hilft uns die Freie Software Initiative Gpg4win voranzutreiben.
 Wir sind dankbar für jede finanzielle Unterstützung.
 <!-- TODO Update or remove
 Eine Zusammenfassung der bisherigen Spenden finden Sie
 <a href="https://wiki.gnupg.org/Gpg4win/donations">hier</a>. -->
 </p>
 </div>
 
 <div id="main">
   m4_include(`donation-form-de.htm4')
 
   <div id="contract">
   <h2>Beauftragungen</h2>
     <p>Unterstützen Sie die Gpg4win-Weiterentwicklung mit einer konkreten Beauftragung!</p>
 
     <p><b>Als engagierter Anwender</b> können Sie einen bestimmten
     Schritt, wie z.B. Aktualisierung, Beseitigung eines Fehlers oder Hinzufügen einer Funktion
     beauftragen. Jede beauftragte Verbesserung kommt dem Gpg4win-Hauptstrom zu Gute.</p>
 
     <p><b>Als Unternehmen oder Behörde</b> können Sie umfangreiche
     Maßnahmen zur Sicherung einer nachhaltigen und eigenständigen
     Fortführung des Projekts beauftragen. Sie erhalten damit Gpg4win dauerhaft für Ihre Organisation.
     Einher geht der Kollateralnutzen, dass darüber hinaus die Sicherheit beim Datenverkehr im
     Allgemeinen verbessert wird.</p>
 
     <p>Für mehr Informationen <a href="mailto:gpg4win-professional@gpg4win.org">kontaktieren Sie uns gerne</a>.
   </div>
 
   <div id="sponsors">
     <h2>Liste der Spender</h2>
     <p>Die folgende Liste zeigt wer mehr als 10/20 EUR/USD
     für Gpg4win gespendet hatAB 2017 und uns erlaubt das zu veröffentlichen.
 
 
     (Zuletzt aktualisiert: 2020-10-23)</p>
 
     <h3>Spenden 2020 (bis einschl. Q3)</h3>
     <div class="sponsornames">
     m4_include(`SPONSORS-2020')
     </div>
 
     <h3>Spender 2019</h3>
     <div class="sponsornames">
     m4_include(`SPONSORS-2019')
     </div>
 
     <h3>Spender 2018</h3>
     <div class="sponsornames">
     m4_include(`SPONSORS-2018')
     </div>
 
     <h3>Spender 2017</h3>
     <div class="sponsornames">
     m4_include(`SPONSORS-2017')
     </div>
 
     <h3>Spender in früheren Jahren</h3>
     <p>siehe <a href="https://wiki.gnupg.org/Gpg4win/donations">https://wiki.gnupg.org/Gpg4win/donations</a></p>
 
   </div>
 </div>
diff --git a/web/donate.htm4 b/web/donate.htm4
index 2be46b4e..9b60f4fe 100644
--- a/web/donate.htm4
+++ b/web/donate.htm4
@@ -1,83 +1,86 @@
 m4_dnl                                                          -*-html-*-
 m4_include(`template.m4')
 m4_dnl $Id$
 
 m4_define(`EN')
 m4_define(`DE_FILE', `donate-de.html')
 
 m4_define(`TITLE', `Donate')
 m4_define(`MAIN', `donate')
 
 PAGE_START
 
 <div class="donate_header">
- <span class="text">
-  We love Free Software!<br />
-  You too?<br />
-  <b>Please support Gpg4win!</b>
- </span>
+ <div>
+  <span class="text">
+   We love Free Software!<br />
+   You too?<br />
+   <b>Please support Gpg4win!</b>
+  </span>
+ </div>
+ <img src="img/heart.png" alt="image with three hearts" />
 </div>
 
 <div id="intro">
 <h2>Donate</h2>
 <p>Your donation supports the maintenance and further development of
 Gpg4win and helps us to push the Free Software initiative Gpg4win. We
 are grateful for your financial contribution.<br>
 <!-- A summary of all previous donations you can find
 <a href="https://wiki.gnupg.org/Gpg4win/donations">here</a>. -->
 </p>
 </div>
 
 <div id="main">
   m4_include(`donation-form.htm4')
 
   <div id="contract">
   <h2>Contracts</h2>
     <p>Other than making donations, you could make contract and further support the development of Gpg4win!</p>
 
     <p><b>As an engaged user</b> you could also contract for some specific
     step, update, bug fix or new features.  Take care that your contracted
     improvements will be integrated into the main development of Gpg4win.</p>
 
     <p><b>As a company or authority</b> contract for more extensive measures
     that will ensure continuation of the project.  This way you will
     ensure sustainable availability of Gpg4win for your organization.
     Such measures do provide the collateral benefit of generally improving
     security for data exchange.</p>
 
     <p>For more information <a href="mailto:gpg4win-professional@gpg4win.org">please contact us</a>.
   </div>
 
   <div id="sponsors">
     <h2>List of sponsors</h2>
     <p>The following list shows sponsors who donated more than 10/20 USD/EUR
        since 2017 to support us
        and agreed to make their donation public.
 
     (Last updated: 2020-10-23)</p>
 
     <h3>Sponsors 2020 (up to Q3)</h3>
     <div class="sponsornames">
     m4_include(`SPONSORS-2020')
     </div>
 
     <h3>Sponsors 2019</h3>
     <div class="sponsornames">
     m4_include(`SPONSORS-2019')
     </div>
 
     <h3>Sponsors 2018</h3>
     <div class="sponsornames">
     m4_include(`SPONSORS-2018')
     </div>
 
     <h3>Sponsors 2017</h3>
     <div class="sponsornames">
     m4_include(`SPONSORS-2017')
     </div>
 
     <h3>Sponsors in previous years</h3>
     <p>Have a look at <a href="https://wiki.gnupg.org/Gpg4win/donations">the summary of donations.</a></p>
 
   </div>
 </div>
diff --git a/web/gpg4win.css b/web/gpg4win.css
index 140961a7..45b3f65b 100644
--- a/web/gpg4win.css
+++ b/web/gpg4win.css
@@ -1,1673 +1,1668 @@
 /* Styles for the Gpg4win Website */
 
 body {
  font-family: arial, helvetica, sans-serif;
  font-size: 13px;
  background: #FFFFFF url('img/page_bg.png') repeat-x;
  color: #333333;
  margin: 0px;
  padding:0px;
 }
 
 a {
  color: #b51a22;
  text-decoration: none;
 }
 
 a:hover {
  text-decoration: underline;
 }
 
 img {
  border: 0px;
 }
 
 .imageframe {
  border-color: #DEDEDE #AAAAAA #888888 #CECECE;
  border-style: double;
  border-width: 1px;
  padding: 5px;
 }
 
 .imgfloatleft {
  float: left;
  margin: 0px 20px 30px 0px;
  max-width: 112px;
 }
 
 td {
  vertical-align: top;
 }
 
 pre{
   margin-bottom: 10pt;
 }
 
 .flex-container{
   display: flex;
   flex-wrap: wrap;
 }
 
 .odd td {
  background: #E6E6E6;
 }
 
 .wrapper {
  width: 900px;
  margin: 0 auto;
  text-align: left;
 }
 
 .language_select {
  float:right;
  height: 100%;
 }
 
 #menu-button, #menu-button-label{
   display: none;
 }
 
 #header-logo{
   display: none;
 }
 
 .logo {
  margin-top: 20px;
  margin-left: 15px;
 }
 
 .header {
  padding: 6px 0 6px 0;
  margin-bottom: 0px;
  height: 1em;
 }
 
 .fancy_intro {
  margin: 0 20px 25px 14px;
  border-bottom:1px solid gray;
  overflow: hidden;
  width:870px;
  padding-bottom: 15px;
  display: flex;
 }
 
 .fancy_intro .h_text {
   margin-top: 0pt;
 }
 
 #fancy_bg{
   max-width: 361px;
   height: auto;
   margin-right: 10pt;
 }
 
 #intro{
   width: 600px;
 }
 
 .mini_intro {
  clear: both;
  font-size: 12px;
  line-height: 38px;
  margin-top: 8px;
 }
 
 #download-button-container{
   margin-right: 20pt;
 }
 
 #download_button {
  position: relative;
  top: 45px;
  width: 250px;
  z-index: 0;
 }
 
 #download_button a {
  background: url('img/download_button.png');
  background-repeat: no-repeat;
  display: block;
  height: 116px;
  width: 260px;
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
  font-size: 19px;
 }
 
 #download_button a:hover {
  background-position: 0px -116px;
 }
 
 #download_button .text {
  position: relative;
  top: 23px;
  left: 25px;
 }
 
 #breadcrum {
  float:left;
 }
 
 #download_button_mini {
  position: relative;
  top: 45px;
  left: 35px;
  width: 250px;
  z-index: 0;
 }
 
 #download_button_mini .links {
  position: relative;
  font-size: 10px;
  text-align: right;
 }
 
 #download_button_mini .dmini_button {
  background: url('img/download_button_mini.png');
  background-repeat: no-repeat;
  display: block;
  height: 50px;
  width: 189px;
  text-align:left;
  left: 20px;
  font-size: 14px;
  line-height:50px;
  color: #FFFFFF;
  font-weight:bold;
  text-decoration:none;
 }
 
 #download_button_mini .dmini_button:hover {
  background-position: 0px -50px;
 }
 
 #download_button_mini .text {
  position: relative;
  left: 12px;
 }
 
 .download_button_links {
  font-size:11px;
  position: relative;
  display: flex;
  left: 25px;
  top: 43px;
  width: 250px;
 }
 
 .donate_box {
   border-radius: 4px;
   background: #FDF1CD;
   border: 1px solid #CCCCCC;
   padding: 20px 20px 15px;
   min-height: 365px;
 }
 .donate_box h3 {
   margin: 0;
 }
 .donate_box #download_div {
   margin-top: 15px;
 }
 
 #currencyfield {
     font-size: 14px;
     height: 30px;
 }
 .donateButton {
     background: url('img/download-arrow.png') no-repeat 9px 9px;
     background-size: 20px 20px;
     padding-left: 36px;
     padding-right: 10px;
     font-size: 14px;
     height: 40px;
     border: 2px white;
     border-radius: 4px;
     text-align: center;
     font-weight: bold;
     text-decoration: none;
 }
 a>.donateButton{
   margin-top: 40px;
 }
 
 .donate_box blockquote {
     line-height: 150%;
 }
 .donate_box .pay-logo {
     width: 100px;
 }
 
 .donate_box .qrcode {
     width: 130px;
 }
 
 /* donation slider */
 input[type='range'] {
     -webkit-appearance: none;
     appearance: none;
     -moz-appearance: none;
     border-radius: 5px;
     box-shadow: inset 1px 1px 1px rgba(000,000,000,0.25);
     background-color: #FFF;
     height: 8px;
     vertical-align: middle;
     width: 200px;
     cursor: pointer;
     margin: 10px 0;
 }
 input[type=range]::-webkit-slider-runnable-track {
     -webkit-appearance: none;
     appearance: none;
     border-radius: 5px;
     box-shadow: inset 1px 1px 1px rgba(000,000,000,0.25);
     background-color: #FFF;
     height: 10px;
     vertical-align: middle;
     border: solid 1px rgba(0,0,0,0.25);
     cursor: pointer;
 }
 input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none;
     border-radius: 10px;
     background-color: #FFC35C;
     box-shadow: inset 0px 1px 0px rgba(000,000,000,0.5);
     border: 1px solid #999;
     height: 20px;
     width: 20px;
     border-radius: 15px;
     vertical-align:middle;
     margin-top: -6px;
     cursor: pointer;
 }
 input[type='range']::-moz-range-track {
     -moz-appearance: none;
     border-radius: 5px;
     box-shadow: inset 1px 1px 1px rgba(000,000,000,0.25);
     background-color: #FFF;
     height: 8px;
     border:solid 1px rgba(0,0,0,0.25);
     vertical-align: middle;
     margin: 0;
     padding: 0;
     cursor: pointer;
 }
 input[type='range']::-moz-range-thumb {
     -moz-appearance: none;
     border-radius: 10px;
     background-color: #FFC35C;
     box-shadow:inset 0px 1px 0px rgba(000,000,000,0.5);
     border: 1px solid #999;
     height: 20px;
     width: 20px;
     border-radius: 15px;
     cursor: pointer;
 }
 
 /* With beta this needs other offsets. Maybe someone with
  * more CSS skills could make this more relative / robust. ;-) */
 .h_text_beta {
  position: relative;
  top: -190px;
  left: 669px;
  width: 180px;
  font-size: 11px;
  border-left: 1px solid #CCCCCC;
  padding-left: 10px;
  margin-top: 12px;
  height: 220px;
 }
 
 .h_text_beta .heading {
  font-size: 23px;
  font-family: georgia, times, serif;
  padding-bottom: 9px;
 }
 
 .h_text_beta .serif_word {
  font-size: 13px;
  font-weight: bold;
 }
 
 .h_text_beta .limiter {
  border-bottom: 3px dotted #CCCCCC;
  width: 190px;
  height: 10px;
  margin-bottom: 3px;
 }
 
 .h_text {
  font-size: 11px;
  border-left: 1px solid #CCCCCC;
  padding-left: 10px;
  margin-top: 12px;
  height: 220px;
 }
 
 .h_text .heading {
  font-size: 23px;
  font-family: georgia, times, serif;
  padding-bottom: 9px;
 }
 
 .h_text .serif_word {
  font-size: 13px;
  font-weight: bold;
 }
 
 .h_text .limiter {
  border-bottom: 3px dotted #CCCCCC;
  width: 190px;
  margin: 3pt 0pt;
 }
 .center {
  text-align: center;
 }
 
 .content {
  width: 100%;
 }
 
 #intro {
  padding: 0px 250px 20px 20px;
 }
 
 /*#intro span {
  background: url('img/logo.png') no-repeat scroll 50px 0px transparent;
  height: 56px;
  margin: 0px;
  width: 250px;
  float: right;
  margin: 0px;
  line-height: 24px;
  margin: 10px 200px 0 0;
 }*/
 
 #intro h2 {
  font-family: georgia, times, serif;
  font-size: 30px;
  font-weight: normal;
  color: #333333;
  margin: 0px;
 }
 
 #intro p {
  color: #555555;
  font-size: 14px;
  font-weight: normal;
  line-height: 26px;
  margin: 10px 0 0;
  padding: 0;
 }
 
 .column1, .column2, .column3 {
  margin-right: 25px;
  position: relative;
  width: 270px;
  min-width: 270px;
 }
 
 .column3 {
  margin-right: 0px;
 }
 
 .column1 img, .column2 img, .column3 img {
  width: 270px;
 }
 
 
 #main {
  padding: 0px 0px 0px 20px;
  width: 600px;
  float: left;
 }
 
 #full {
  float: left;
  padding: 0px 20px 0px 20px;
  width: 860px;
 }
 
 #main h2, #full h2 {
  font-size: 22px;
  font-weight: normal;
  color: #333333;
  margin: 30px 0px 10px 0px;
  padding: 0px;
  clear: both;
 }
 
 #main h4, #full h4 {
  font-size: 18px;
  color: #333333;
  font-family: georgia, serif;
  font-style: italic;
  font-weight: normal;
 }
 
 #main p, #full p, #main li, #full li{
  color: #444444;
  line-height: 20px;
  margin: 0px 0px 10px;
 }
 .lineheight {
  line-height: 20px;
 }
 .cleanlist li {
  font-size: 13px;
  list-style: none;
  padding: 0px;
  clear: both;
 }
 
 #mastodon-logo {
   max-width: 20pt;
 }
 
 #main.screenshots{
   width: initial;
 }
 
 .screenshots img {
   min-width: 300px;
 }
 
 .screenshots .flex-container {
   gap: 20pt;
   row-gap: 20pt;
 }
 
 #sidebar {
  -moz-border-radius: 10px 10px 10px 10px;
  background: #FDF1CD;
  border: 1px solid #CCCCCC;
  float: right;
  margin-top: 34px;
  padding: 20px 20px 15px;
  width: 220px;
 }
 
 #sidebar h3 {
  color: #333333;
  margin: 1px 0px 10px 0px;
 }
 
 #sidebarsimple {
  float: right;
  margin-top: 34px;
 }
 
 .newslist {
  margin: 0px;
  padding: 0px;
 }
 
 .newslist li {
  font-size: 13px;
  list-style: none;
  padding: 0;
  border-bottom: 1px solid #EFEFEF;
 }
 
 .newslist > li > a {
  /*color: #555555;*/
  display: block;
  font-size: 12px;
  font-weight: bold;
  list-style: none;
  margin: 0px;
  padding: 10px 0px 10px 0px;
  text-decoration: none;
 }
 
 .newslist li p {
  color: #777777;
  font-size: 10px;
  font-weight: normal;
  margin: 4px 0px 0px;
  padding: 0px;
 }
 
 #menu {
  height:45px;
  z-index: 1;
 }
 
 #menu .active a {
  background-position: 0px -180px;
 }
 
 #menu ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
 }
 
 #menu li {
  float: left;
  margin-right: 0px;
  margin-left:0px;
  padding: 0px;
  text-align: center;
 }
 
 #menu .mlogo {
  border:0px;
 }
 
 #menu .mlogo a {
  display:block;
  /* With what's new shield */
  width: 161;
  /* Without shield
   width: 307px
  */
  height: 58px;
  position: relative;
  top: -13px;
  background: url('img/inmenulogo.png');
  background-position: 0px -116px;
 }
 
 #menu .mlogo a:hover {
  background: url('img/inmenulogo.png');
  /* With what's new shield */
  background-position: 0px -58px;
  /* Without shield
  background-position: 0px -174px */;
 }
 
 #menu .mwhatsnew  {
  border:0px;
  line-height: 2em;
 }
 
 #menu .mwhatsnew a {
  display:block;
  width: 110px;
  height: 77px;
  position: relative;
  top: -9px;
  background: url('img/whatsnew.png');
  line-height: 34px;
 }
 
 #menu .mwhatsnew a:hover {
  background: url('img/whatsnew.png');
  background-position: 0px -77px;
 }
 
 #menu .mwhatsnew div {
  padding-top: 10px;
  line-height: 24px;
 }
 
 #menu .mbetween {
  border:0px;
 }
 
 #menu .mbetween a {
  display:block;
  width: 36px;
  height: 58px;
  position: relative;
  top: -13px;
  background: url('img/inmenulogo.png');
  background-position: -100px 0px;
 }
 
 #menu .mbetween a:hover {
  background: url('img/inmenulogo.png');
  background-position: -100px -58px;
 }
 
 #menu .last {
  width:40px;
  height: 45px;
  background: url('img/last.png');
 }
 
 #menu .mdonate a {
  display: block;
  width: 148px;
  height: 45px;
  float:right;
  background: url('img/inmenudownload.png');
  color: #FFFFFF;
  text-indent: -10px;
 }
 
 #menu .mdonate a:hover {
  background: url('img/inmenudownload.png');
  background-position: 0px -45px;
 }
 
 #menu li a {
  background: #CCCCCC url('img/menubar.png') 0px -90px;
  color: #2A2A2A;
  line-height: 45px;
  width: 148px;
  display: block;
  text-decoration: none;
  font-weight: bold;
  font-size: 11px;
  height: 45px;
  overflow: hidden;
 }
 
 #menu li a:hover {
  background: #FFFFFF url('img/menubar.png') 0px -135px;
  color:#FFFFFF;
 }
 
 #menu ul li ul {
  width: 201px;
  list-style: none;
  position: absolute;
  display: none;
 }
 
 #menu ul li ul li,
 #menu .active ul li ul li {
  width: 148px;
 }
 
 #menu ul li .subcap {
  background: url('img/sub_tail.png');
  display: block;
  width: 149px;
  height: 5px;
 }
 
 #menu ul li ul li a,
 #menu .active ul li ul li a {
  background: url('img/sub_bg.png');
  line-height: 25px;
  width: 142px;
  height: 22px;
  font-weight: normal;
  color: #2A2A2A;
  text-align: left;
  display: block;
  padding-left: 5px;
  border-left: 1px solid #8B7E57;
  border-right: 1px solid #8B7E57;
 }
 
 #menu ul li ul li a:hover,
 #menu .active ul li a:hover {
  background: #FBCA4C;
  color: #2A2A2A;
  text-decoration: none;
  font-weight: bold;
 }
 
 #menu li:hover ul ul,
 #menu li:hover ul ul ul {
  display: none;
 }
 
 #menu li:hover ul,
 #menu li li:hover ul,
 #menu li li li:hover ul {
  display: block;
  z-index:3;
 }
 
 .donate_header {
- display: block;
- position: relative;
- top: -80px;
+ display: flex;
  height: 180px;
- background: url('img/heart.png') no-repeat;
- background-position: 550px 10px;
  font-size: 26px;
  border-bottom: 1px solid #CCCCCC;
- margin-bottom: -70px;
- z-index: -100;
+ margin-bottom: 20pt;
 }
 
 .donate_header .text {
  position:relative;
- left: 180px;
  top: 40px;
  text-align:center;
+ margin-right: 20pt;
 }
 
 .donate_header b {
  color: #D50D35;
 }
 
 .download_header {
  height:160px;
  background: url('img/download_bg.png') no-repeat;
  background-position: 690px 10px;
  font-size:26px;
  border-bottom: 1px solid #CCCCCC;
  margin-bottom:8px;
 }
 
 .download_header .text {
  position:relative;
  left: 120px;
  top: 40px;
  text-align:center;
 }
 
 .download_header b {
  color: #D50D35;
 }
 
 .dlbutton2 a {
  background-color: #6AC221;
  border-radius: 10px 10px 10px 10px;
  display: block;
  font-size: 150%;
  font-weight: bold;
  margin: 10px 20px 0 0;
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
 }
 
 .dlbutton2 a:hover {
  background: #81C72B;
  text-decoration: none;
 }
 
 .dlbutton2 img {
  float:right;
  position: relative;
  right: 45px;
  top: 8px;
 }
 
 .version {
  color: #FFFFFF;
  font-size: 75%;
  font-weight: normal;
 }
 
 #footer {
  background: #EBEBEB url('img/page_bg.png') repeat-x;
  font-size: 11px;
  padding-bottom: 20px;
  color: #333333;
  text-align: center;
  margin-top: 30px;
  height: 22em;
  width: 100%;
 }
 
 #sitemap {
  margin: auto;
  width: 900px;
  text-align: left;
 }
 
 #sitemap ul {
  list-style:none;
  float: left;
  width: 130px;
  margin-left: 20px;
  padding: 0px;
 }
 
 #sitemap li {
  font-size: 12px;
  line-height: 19px;
  padding: 0px;
 }
 
 #sitemap li {
  font-size: 12px;
  line-height: 19px;
  padding: 0px;
 }
 
 #sitemap ul li a {
  color: #555555;
  text-decoration: none;
 }
 
 #sitemap ul li a:hover {
  text-decoration: underline;
 }
 
 .social-icon {
   width: 32px;
   padding-right: 5px;
 }
 
 hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #ccc;
   margin: 1em 0;
   padding: 0; 
 }
 
 /* donation form */
 .tabs{
   position: relative;
 	width: 100%;
   display: grid;
   grid-template-columns: 20pt auto 2fr;
   grid-template-rows: 20pt 20pt 20pt 20pt auto;
   align-items: start;
 	padding-left: 0;
 }
 .tabs > p, #tab1, #tab2, #tab3{
   grid-column-start: 1;
 }
 .tabs > p{
   grid-column-end: 3;
 }
 #tab1, #tab2, #tab3{
   justify-self: start;
 }
 .tabs label[for="tab1"], .tabs label[for="tab2"], .tabs label[for="tab3"]{
   grid-column-start: 2;
 }
 #tab1, .tabs label[for="tab1"]{
   grid-row-start: 2;
 }
 #tab2, .tabs label[for="tab2"]{
   grid-row-start: 3;
 }
 #tab3, .tabs label[for="tab3"]{
   grid-row-start: 4;
 }
 .tabs label[for^=tab]{
 	margin-right: 10px	 !important;
 	background-color: transparent;
 	border: none;
 	border-radius: 4px;
 	width: 120px;
 }
 .tabs .tab-content{
 	display: none;
 	overflow: hidden;
 	border-left: 1px dotted #ccc;
 	padding-left: 20px;
   grid-column: 3;
   grid-row-start: 1;
   grid-row-end: 6;
 }
 .tabs #tab1:checked ~ #paypal_tab,
 .tabs #tab2:checked ~ #bitcoin_tab,
 .tabs #tab3:checked ~ #transfer_tab{
   display: block;
 }
 /*.tabs [id^="tab"]:checked ~ [id$="_tab"]{
 	display: block;
 }*/
 .tabs input{
   max-height: 20pt;
 }
 .download_div{
 	display:none;
 }
 
 textarea, select, input[type=text]{
 	box-sizing: border-box;
 	box-shadow: inset 0 1px 2px #ddd;
 	border: 1px solid #bbb;
 	border-radius: 4px;
 	padding: 5px;
 	width: 100%;
 }
 input[type=text]{
 	height: 31px;
 }
 input[type=text]:focus{
 	border: 1px solid #888;
 }
 select{
 	background-color: #fff;
 }
 
 /* donation list */
 .two-column {
     -webkit-column-count: 2; /* Chrome, Safari, Opera */
     -moz-column-count: 2; /* Firefox */
     column-count: 2;
 	list-style: none;
 	padding-left: 15px;
 }
 .three-column {
     -webkit-column-count: 3; /* Chrome, Safari, Opera */
     -moz-column-count: 3; /* Firefox */
     column-count: 3;
 	list-style: none;
 	padding-left: 15px;
 }
 .two-column > li, .three-column > li{
 	margin: 0 5px 10px !important;
 	float: none;
 }
 #sponsors > h3 {
 	margin: 20px 0px 5px;
 	padding-bottom: 5px;
 }
 .sponsornames {
 	padding: 10px;
 	background-color: #eee;
 }
 .sponsornames > h4 {
 	font-size: 17px;
 	margin: 10px 15px;
 	border-bottom: 1px dotted #555;
 	padding-bottom: 5px;
 }
 
 .pay_div{
 	width: 100%;
 }
 
 .amountlabel {
 	margin: 15px 0 20px 0;
 	width: 100%;
   margin: 15px 0 15px 0;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   row-gap: 10pt;
 }
 .amountlabel > input[type="radio"]{
 	display:none;
 }
 .amountlabel > label{
 	border-radius: 4px;
 	font-size: 16px;
 	padding: 10px 15px;
 	text-align: center;
 	margin: 0 7px 1px 3px;
 	font-weight: bold;
 	min-width: 22pt;
 }
 
 /*** donate button colors ***/
 /* inactive */
 .amountlabel > input + label,
 .switch-field input + label,
 .donateButton {
     color: white;
 }
 .amountlabel > label,
 .switch-field label {
 	background-color: rgba(180,180,180,0.75);
 }
 
 /* hover */
 .amountlabel > label:hover,
 .amountlabel > input[type="radio"]:hover + label:hover,
 .switch-field label:hover,
 .donateButton:hover {
 	background-color: #8fc8d2;
     cursor: pointer;
 }
 
 /* active */
 .amountlabel > input[type="radio"]:checked + label,
 .amountlabel > label > input[type="number"]:focus + label,
 .switch-field input:checked + label,
 .donateButton {
 	background-color: #179bd7;
 }
 
 
 
 input[type=number]::-webkit-outer-spin-button,
 input[type=number]::-webkit-inner-spin-button {
       -webkit-appearance: none;
       margin: 0;
 }
 
 input[type=number] {
       -moz-appearance:textfield;
 }
 
 .amountlabel > label > input[type="number"]{
       background-color: transparent;
       color: white;
       border: none;
       border-bottom: 1px solid;
       border-radius: 0px;
       box-shadow: none;
       height: 20px;
       font-size: 18px;
       font-family: arial, helvetica, sans-serif;      
       text-align: center;
       width: 45px;
       font-weight: normal;
 }
 
 #freeamountLabel{
      padding: 0;
 }
 
 .switch-field {
   padding: 10px 0 15px 0;
   margin: 5px 0 5px 0;
   display: flex;
   height: 16pt;
 }
 
 #donation_frq{
   clear: right;
 }
 
 .switch-title {
   margin-bottom: 6px;
 }
 
 .switch-field input {
   display: none;
 }
 
 .switch-field label {
   display: flex;
   width: 60px;
   height: 100%;
   font-size: 12px;
   font-weight: bold;
   text-align: center;
   text-shadow: none;
   padding: 3px 14px;
   border: none;
   justify-content: center;
   align-items: center;
 }
 
 .switch-field input:checked + label {
   -webkit-box-shadow: none;
   box-shadow: none;
 }
 
 .switch-field label:first-of-type {
   border-radius: 4px 0 0 4px;
   margin: 0 0 0 3px;
 }
 
 .switch-field label:last-of-type {
   border-radius: 0 4px 4px 0;
   margin: 0 11px 10px -1px;
 }
 
 .switches{
   display: flex;
   flex-wrap: wrap;
   width: max-content;
 }
 
 @media screen and (max-width: 800px){
   :root{
     --gpg4win-gradient: linear-gradient(to bottom, #ffd987, #ffc853 4%, #f4b836, #ffc343 99%, #ffdf99);
     --menu-border-color: #555555;
   }
 
   *{
     max-width: 100%;
     font-size: 1rem;
   }
 
   html{
     min-height: 100%;
     position: absolute;
   }
   
   html, body{
     position: sticky;
     overflow-y: auto;
     overflow-x: hidden !important;
     max-width: 100vw;
   }
 
   body{
     padding: 6pt 10pt;
     height: 100%;
   }
 
   .wrapper{
     width: 100%;
     margin: 0px;
   }
   
   .language_select{
     width: 100%;
     display: flex;
     justify-content: end;
     column-gap: 4pt;
     margin-bottom: 8pt;
     padding-right: 4pt;
   }
 
   .language_select *{
     font-size: 1rem;
     width: auto;
   }
 
   .language_select img{
     min-height: 100%;
     width: 20pt;
   }
 
   .header{
     height: initial;
     display: flex;
     flex-direction: column;
     padding-top: 0px;
     margin-bottom: 15pt;
   }
 
   #logo-container{
     position: relative;
     left: -10pt;
     max-width: initial;
     width: 110%;
   }
 
   #logo-container{
     background: var(--gpg4win-gradient);
     border-top: solid black 1px;
     border-bottom: solid black 1px;
   }
 
   #header-logo{
     display: block;
     height: 40pt;
     width: auto;
     margin: 8pt 0pt;
   }
 
   .header a{
     display: block;
     width: max-content;
   }
 
   #menu-container{
     height: auto;
     width: 200pt;
     background-color: white;
     z-index: 2;
     position: absolute;
     top: 0;
     right: calc(-100% + 34pt);
     overflow-y: auto;
     overflow-x: hidden;
     border-bottom-left-radius: 4pt;
   }
 
   #menu-button:checked ~ #menu-container{
     right: 0pt;
     animation-name: slide-menu-in;
     animation-duration: 0.4s;
     animation-timing-function: ease-in-out;
   }
 
   @keyframes slide-menu-in {
     0%{right: calc(-100% + 34pt)}
     100%{right: 0pt}
   }
 
   @keyframes slide-menu-out {
     0%{right: 0pt}
     100%{right: calc(-100% + 34pt)}
   }
 
   #menu{
     height: auto;
     overflow-x: hidden;
   }
 
   #menu-button{
     display: none;
     opacity: 0;
   }
 
   #menu-button-label{
     display: block;
     z-index: 2;
     order: 1;
     height: 34pt;
     width: 34pt;
     background: none;
     position: absolute;
     top: 46pt;
     right: 0pt;
   }
 
   #menu-button-image-container{
     background-color: rgba(255, 255, 255, 0);
     position: relative;
     z-index: 3;
     padding: 4pt;
   }
 
   #menu-button:checked ~ #menu-button-label{
     right: calc(240pt - 34pt);
     background: none;
     animation-name: slide-menu-button-in;
     animation-duration: 0.4s;
     animation-timing-function: ease-in-out;
   }
 
   @keyframes slide-menu-button-in {
     0%{right: 0pt;}
     100%{right: calc(240pt - 34pt);}
   }
 
   @keyframes slide-menu-button-out {
     0%{right: calc(240pt - 34pt);}
     100%{right: 0pt;}
   }
 
   #menu-shadow{
     position: fixed;
     left: 0;
     top: 0;
     max-width: unset;
     max-height: unset;
     z-index: -1;
     background-color: rgba(0, 0, 0, 0.7);
     opacity: 0;
     animation-name: fade-out;
     animation-duration: 0.3s;
   }
 
   #menu-button:checked ~ #menu-button-label #menu-shadow{
     animation-name: fade-in;
     animation-duration: 0.4s;
     opacity: 1;
     right: 0;
     bottom: 0;
   }
 
   @keyframes fade-in {
     0%{opacity: 0; right: 0;bottom: 0;}
     100%{opacity: 1; right: 0;bottom: 0;}
   }
 
   @keyframes fade-out {
     0%{opacity: 1; right: 0;bottom: 0;}
     100%{opacity: 0; right: 0;bottom: 0;}
   }
 
   #menu ul{
     display: flex;
     flex-direction: column;
   }
 
   #menu li{
     text-align: left;
   }
 
   #menu .mwhatsnew a{
     top: 0;
     height: unset;
   }
 
   #menu .mwhatsnew div {
     display: flex;
     align-items: center;
     font-size: 1rem;
     padding: 10px 0pt;
   }
 
   #menu ul a, #menu ul a:hover,
   #menu .mwhatsnew a, #menu .mwhatsnew a:hover,
   #menu .mwhatsnew a, #menu .mwhatsnew a:hover,
   #menu ul a, #menu ul a:hover,
   #menu .mdonate a, #menu .mdonate a:hover,
   #menu ul li ul li a{
     width: 100%;
     padding-left: 6pt;
     border-bottom: 1pt var(--menu-border-color) solid;
     font-size: 1rem;
   }
 
   #menu ul a, #menu ul a:hover, #menu .mwhatsnew a,
   #menu .mwhatsnew a:hover, #menu .mwhatsnew a,
   #menu .mwhatsnew a:hover, #menu ul a, #menu ul a:hover{
     background: none;
     background-color: #fde085;
   }
 
   #menu .mlogo{
     height: 34pt;
     background-color: #ffc853;
     border-bottom: 1pt var(--menu-border-color) solid;
   }
 
   #menu .mlogo a, #menu .mlogo a:hover{
     height: 100%;
     background: none;
     background-image: url('img/src/gpg4win_lock_white.png');
     background-repeat: no-repeat;
     background-size: 26pt;
     background-position-y: center;
     top: unset;
   }
 
   #menu ul li ul{
     display: flex;
     flex-direction: column;
     position: inherit;
     width: 100%;
   }
 
   #menu ul li ul li, #menu ul li ul li a:hover{
     background-color: #ffffff;
   }
 
   #menu ul li ul li{
     width: 100%;
     min-height: 30pt;
     display: flex;
     align-items: center;
     border-bottom: 1pt var(--menu-border-color) solid;
   }
 
   #menu ul li ul li a{
     width: 100%;
     background: none;
     border: none;
     line-height: -50%;
   }
 
   .mbetween{
     display: none;
   }
 
   #menu ul li .subcap{
     display: none;
   }
 
   #menu .mdonate a, #menu .mdonate a:hover{
     float: initial;
     text-indent: 0pt;
     background: none;
     background-color: #60bf24;
   }
 
   .fancy_intro{
     flex-wrap: wrap;
     border: none;
     margin-left: 0pt;
   }
 
   #fancy_bg{
     max-width: unset;
     width: 100%;
     margin-bottom: 10pt;
     margin-right: 0pt;
   }
 
   #download-button-container{
     order: 1;
     margin-bottom: 10pt;
   }
 
   #download_button{
     position: initial;
     width: 100%;
     max-height: 70pt;
     border: solid #707070 1px;
     border-radius: 4pt;
     background: linear-gradient(to bottom, #94d36b 1%, #b8e29d 2%, #92d267 3%,  #54c010 40%, #63c322);
     margin-bottom: 6pt;
   }
 
   #download_button a{
     background: none;
     height: 50pt;
     display: flex;
     justify-content: center;
     align-items: center;
   }
 
   #download_button .text{
     position: inherit;
   }
 
   .download_button_links{
     position: initial;
     font-size: 1rem;
     width: initial;
     column-gap: 3pt;
     margin-bottom: 10pt;
   }
 
   small{
     font-size: 0.9rem;
   }
 
   h4{
     margin-top: 16pt;
     margin-bottom: 10pt;
   }
 
   #main h4, #full h4{
     font-size: 1.2rem;
   }
 
   #main p, #full p{
     line-height: 24px;
   }
 
   #main ul, #main ol{
     padding-left: 18pt;
   }
 
   .h_text{
     font-size: 0.8rem;
     order: 2;
   }
 
   .h_text .serif_word{
     font-size: 1rem;
   }
 
   .content{
     margin: 0pt;
   }
 
   #intro{
     max-width: 100%;
     padding-left: 0pt;
     margin-bottom: 12pt;
   }
 
   #intro p{
     font-size: unset;
   }
 
   #main{
     padding-left: 0pt;
     float: unset;
   }
 
   #footer{
     height: initial;
     width: 100vw;
     max-width: 100vw;
     position: relative;
     left: -10pt;
     bottom: -6pt;
   }
 
   #sitemap {
     display: flex;
     flex-wrap: wrap;
   }
 
   #sitemap ul{
     float: none;
     margin-left: 10pt;
   }
 
   #sitemap li{
     line-height: 18pt;
   }
 
   #full{
     padding-left: 0pt;
   }
 
   .tabs{
     height: initial;
     grid-template-columns: 20pt auto auto;
     grid-template-rows: 20pt 20pt 20pt 40pt auto;
     padding-left: 0;
   }
 
   .tabs .tab-content{
     grid-column-start: 1;
     grid-column-end: 3;
     grid-row-start: 5;
     margin-top: 12pt;
     padding-left: 0pt;
     border-left: none;
   }
 
   .donate_box {
     margin-bottom: 4pt;
   }
 
   .amountlabel{
     margin-bottom: 20pt;
   }
 
   .switches{
     margin-bottom: 20pt;
   }
 
   .switch-field{
     margin-bottom: 10pt;
   }
 
   .amountlabel > label, .switch-field label{
     display: flex;
     justify-content: center;
     align-items: center;
     height: 32pt;
     width: 60pt;
     padding: 0pt;
   }
 
   /* Need to overwrite the color when hovering because this affects the color
   on Chrome in the mobile version */
   .amountlabel > label:hover,
   .amountlabel > input[type="radio"]:hover + label:hover,
   .switch-field label:hover,
   .donateButton:hover {
     background-color: #179bd7;
   }
 
   #paypal_tab textarea{
     min-height: 80pt;
   }
 
   .cleanlist{
     padding-left: 0pt;
   }
 
   #component-list{
     margin-top: 22pt;
   }
 
   #component-list li{
     margin-bottom: 16pt;
     display: flex;
     flex-direction: column;
   }
 
   #component-list .imgfloatleft{
     max-width: initial;
     width: 140pt;
     float: none;
     margin-bottom: 0pt;
     order: 2;
   }
 
   #component-list .imgfloatleft[src="img/gpa_logo.png"]{
     width: 70pt;
   }
 
   #component-list a{
     display: flex;
     flex-direction: column;
     order: 2;
   }
 
   .column1, .column2, .column3{
     margin-bottom: 10pt;
     margin-right: 0pt;
   }
 
   .column1, .column2, .column3,
   .column1 img, .column2 img, .column3 img{
     width: initial;
   }
 
   .dlbutton2 img{
     display: none;
   }
 
   dd{
     margin-left: 0pt;
   }
 
   dd{
     margin-bottom: 16pt;
   }
 
   dd br{
     margin-bottom: 4pt;
   }
 
   #sidebar{
     width: initial;
     float: none;
   }
 
   #sidebar li{
     margin-bottom: 3pt;
   }
 
   pre{
     overflow-x: scroll;
     padding-bottom: 8pt;
   }
 
   #breadcrum{
     float: none;
   }
 
   .mini_intro{
     line-height: initial;
     margin-bottom: 0pt;
   }
 
   .donate_header {
     margin-bottom: 0pt;
     top: 0pt;
     background-position-x: 220px;
     border-bottom: none;
   }
 
   .donate_header .text {
     left: 0;
   }
 
   .sponsornames .three-column {
     column-count: 2;
   }
 
   .sponsornames li {
     word-wrap: break-word;
   }
   
 }