/* Remove white margin on page */

#pagebody {
  margin-left: -2em;
}

#content {
  padding: 0;
}

.row {
  margin-left: 0;
  margin-right: -2em;
  padding-left: 35px;
}

/* Left part */

#feature {
  margin-bottom: 2em;
}

#feature img {
  display: block;
  margin: auto;
  width: 400px;
  height: auto;
}

@media (max-width: 550px) {
#feature img {
  width: 100%;
}
}

#feature h2 {
  margin: 1em 0;
}

#feature h3 {
  font-size: 20px;
  font-style: italic;
  margin-bottom: 1em;
  text-transform: none;
  letter-spacing: 0;
}

#feature p, #feature ul {
  font-size: 16px;
  line-height: 1.5em;
  margin-right: 3.5em;
}

/* Hide version with JavaScript by default */

#paypal-with-js {
  display: none;
}

/* JavaScript version */

#currency .col-md-12 {
  margin-bottom: 1em;
  padding: 0;
  border: solid 3px white;
}

#donate-paypal-button {
  width: 100%;
  border: solid 3px white;
}

.btn-primary {
  background-color: var(--medium-light-green) !important;
  border-color: var(--medium-light-green) !important;
  color: black;
}

.btn-primary.active, .btn-primary.active:hover {
  background-color: var(--dark-green) !important;
  border-color: var(--dark-green) !important;
  color: white;
}

.amounts .btn-primary.active:hover {
  border-color: white !important;
}

.btn-primary:hover {
  background-color: var(--medium-dark-green) !important;
  border-color: var(--medium-dark-green) !important;
  color: black;
}

#currency, #dollar-amounts, #euro-amounts, #frequency-buttons,
#frequency-explanation, #donate-paypal-button, .tax-deductible {
  display: inline-block;
}

#frequency-buttons, #frequency-explanation, #require-paypal, #paypal-with-js .tax-deductible, #newsletter {
  padding: 0 4px;
}

#frequency-buttons {
  margin-top: 0.5em;
  padding-bottom: 0.2em;
  border-bottom: 2px solid transparent;
  width: 100%;
  text-align: center;
}

#frequency-buttons input {
  position: relative;
  margin-right: 6px;
}

.shake {
  animation: shake 1s;
  display: inline-block;
  border-color: var(--red) !important;
}

@keyframes shake {
  10% { transform: translateX(-1px); }
  20% { transform: translateX(2px); }
  30% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  50% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  70% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
  90% { transform: translateX(-1px); }
}

.tax-deductible {
  font-size: 11px;
  color: var(--medium-dark-gray);
}

.amounts .btn {
  padding-top: 19px;
  height: 65px;
  border: solid 3px white !important;
}

.amounts .other {
  padding: 13px 4px;
}

.amounts .other .input-group-addon {
  padding: 2px;
}

.amounts .other .form-control {
  padding: 4px;
}

/* Newsletter */

#newsletter {
  margin-top: 1.5em;
  min-height: 3em;
}

#newsletter label {
  margin-bottom: 0;
}

#email {
  display: none;
  font-size: 11px;
  color: var(--medium-dark-gray);
  margin-bottom: 0;
}

p.email {
  font-size: 11px;
  color: var(--medium-dark-gray);
}

/* Version without JavaScript */

#paypal-without-js h2 {
  font-size: 24px;
  margin-top: 0;
}

#paypal-without-js h3 {
  font-size: 14px;
  margin-top: 5px;
}

#paypal-without-js form {
  margin-bottom: 1em;
}

#paypal-without-js form label {
  font-size: 12px;
}

/* Other ways */

h4 {
  color: var(--medium-purple);
}

p+h4, div+h4 {
  margin-top: 3em;
}

@media (max-width: 986px) {
h4 {
  margin-top: 3em;
}
}

h5 {
  font-weight: bold;
}

#other-ways-1, #other-ways-2, #other-ways-3, #income {
  margin-top: 2em;
  background: var(--background-gray);
  box-sizing: border-box;
  padding-bottom: 1.5em;
}

#other-ways-1 {
  margin-right: -15px;
  margin-left: -25px;
  padding-left: 25px;
}

#other-ways-1 h3 {
  margin-top: 1em;
  padding-top: 25px;
}

#other-ways-2, #other-ways-3 {
  margin-top: 0;
  padding-top: 20px;
}

#cryptos {
  overflow-wrap: break-word;
  padding-right: 2em;
}

/* Indent bank account details for wire transfers */

.indent {
  margin-left: 2em;
}

/* Hide euros until we solve #11868 */

#currency, #dollars-without-js h2, #euros-without-js {
  display: none;
}

/* Other sections */

h3 {
  margin: 1.5em 0;
}

@media (max-width: 986px) {
#users .image img {
  max-width: 100%;
  height: auto;
}
}