body {
  color: #242420;
}
h1, h2, h3, h4, h1 a, h2 a, h3 a, h4 a, .big, .bigger, .large {
  color: #404040 !important;
}
strong {
  color: #222;
}
main section {
  box-shadow: inset 0 0 0 1px rgba(180, 180, 180, 0.4), 0 0 3px rgba(0, 0, 0, 0.1);
  background: #fffff5 url("../images/bg-art.png");
}
main section.seagreen {
  background-color: #9BF3C1;
}
main section.aqua {
  background-color: #CFF2E4;
}
main section.shade {
  background-color: #eef4eb;
}

#jade-title {
  padding-top: 1em;
  margin-bottom: 1em;
  text-align: center;
}
#jade-title, #jade-title a, #jade-title span,
#content-title, #content-title a, #content-title span,
.content-title, .content-title a, .content-title span {
  color: #0f9bc9 !important;
}
#jade-title h1, #jade-title h2, #content-title h1, #content-title h2 {
  display: inline;
  margin-right: .63em;
}
#jade-title h1, #content-title h1 { font-size: 1.2em; }
#jade-title h2, #content-title h2 { font-size: 1.1em; }
#jade-title h1 a:not(.button):hover, #jade-title h2 a:not(.button):hover {
  color: #00b9d1 !important;
  background-color: rgba(96, 255, 238, 0.13);
  border: 1px solid rgba(33, 95, 120, 0.53);
}
#homeschooling {
  width: 100%;
  background: url("../images/homeschooling.jpg") no-repeat center;
  background-size: cover;
}
#future section.fine, #campaign section.fine {
  font-size: 90%;
  padding: 1.2em .75em 1.3em .75em;
}

#future section.fine li, #future ul.fine li {
  margin-left: 1px;
  margin-bottom: 1px;
}
#future ul {
  list-style: none;
}
#future ul.fine li {
  font-size: .95em;
}
#future li:before {
  margin-left: 0;
  margin-right: 5px;
  font-size: 1em;
}
#future #masjid li:before {
  color: #20c662;
  content: '\262A';
}
#future #academy li:before {
  color: #0eabde;
  content: '\2712';
}
#future #sports li:before {
  color: #0eabde;
  content: '\26be';
}
#future #trust li {
  font-weight: bold;
  display: inline-block;
  margin-left: 1em;
  color: #ff6c00;
  border-bottom: dashed 1px #498c90;
}
#future #trust li:before {
  color: #e07200;
  margin-left: -1.2em;
  content: '\279C';
}
#future #npo li:before {
  color: #33c333;
  content: '\2714';
}
#future #wire li:before {
  font-size: 1.2em;
  color: deepskyblue;
  content: '\00a4';
}
#video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  border-radius: 7px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  margin-bottom: 1em;
}
#video > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 7px;
}
a.donate:before {
  content: '\262A';
}
a.donate:not(.compact):before {
  font-size: 1.5em;
  padding: 0 .33em;
}
#donate > h2 {
  color: #2a3332 !important;
  padding-left: 3px;
  margin-bottom: .5em;
}
#donate > hr {
  padding: 0;
  margin: 0;
}
#donate > p {
  padding-left: 5px;
  color: #35403f !important;
}
#donate > p > strong {
  color: #3c4847;
}
#donate > br {
  margin-bottom: .5em;
}
#donate > span {
  margin-left: 5px;
}
#donate #note {
  color: #129518;
  margin-bottom: .5em;
}
#donate p {
  margin: .5em 0;
}
#donate form {
  display: inline;
}
#donate form button {
  color: #feffe5;
  font-family: Spinnaker, sans-serif;
  font-weight: bold;
  font-size: 1.1em;
  padding: 10px;
  margin: 0 5px 15px 5px;
  min-width: 5em;
  background-color: #1eb1c8;;
  text-shadow: none;
  -webkit-transition: opacity .45s ease-in-out;
  transition: opacity .45s ease-in-out;
}
#donor-note {
  padding: 0 4px 7px 4px;
  color: #4c4f42;
}
#future #atm {
  -webkit-transition: size .63s ease-in-out;
  transition: height .63s ease-in-out;
}
#future #atm a.hot {
  background: #cdb8e2;
}
main section#donate {
  padding: 1.33em .91em;
  background-color: #fffdd7;
}
main section#zelle {
  padding: 1.33em .91em;
  background-color: #fffdd7;
}
main section#donate #checks {
  padding-right: 1.1em;
}
main section.border {
  border: solid 2px #b3eeff;
}

#future #donate form button, #campaign #donate form button {
  font-family: Imprima, sans-serif;
  font-size: 1em;
  padding: 3px 5px;
  margin: 0 2px 13px 3px;
  min-width: 4.75em;
  text-shadow: inherit;
}
#donate form button#other {
  background-color: #208e9b;
}
#donate form button#hot {
  background: #e73f3e;
}
#donate form button#hot:hover {
  background: #ff5251;
}
#donate form button:hover {
  background: #e04746;
  -webkit-filter: none;
  filter: none;
  -webkit-transition: none;
  transition: none;
}
#donate form button:before {
  content: none;
  padding: 0;
}
#DonateM {
  margin-top: 0;
}
#content-verse {
  position: absolute;
  left: 0; right: 0;
  bottom: 14px;
}
#content-verse.virtue {
  font-family: Spinnaker, sans-serif;
  font-size: 1.25em;
  font-weight: bolder;
}
#project #therm, #project #probe {
  max-height: 180px;
}
#project #gauge {
  position: absolute;
  height: 180px;
  padding-top: 150px;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: url("../images/project/g-full.png");
  background-position: center;
  background-clip: content-box;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
#project #percent {
  text-align: center;
  font-size: .91em;
  font-weight: bolder;
  position: absolute;
  width: 98%;
  bottom: 34px;
  color: #e7a6fa;
}
#project span#raised {
  color: #3a9249;
  text-shadow: 1px 1px rgba(0,0,0,.1);
}
#project span#remaining {
  color: #db6a21;
  text-shadow: 1px 1px rgba(0,0,0,.1);
}
#project span#cost {
  color: #376aec;
  text-shadow: 1px 1px rgba(0,0,0,.1);
}
#project #property {
  text-align: center;
}
#project #property div {
  font-size: .71em;
  line-height: .9em;
  white-space: nowrap;
  padding-left: .55em;
}
#project #property p {
  font-size: .8em;
  font-weight: bold;
  line-height: 1em;
  letter-spacing: -.01rem;
  white-space: nowrap;
  padding-left: .41em;
}
#future #project {
  padding-top: .7em;
  padding-bottom: .6em;
}
#future #project #numbers {
  display: table-cell;
  width: 80%;
  padding-right: 10px;
}
#future #project #numbers > div {
  font-size: .8em;
}
#future #project #numbers span {
  font-weight: bold;
  font-size: 1.2em;
}
#future #project #progress {
  display: table-cell;
  width: 20%;
}
#future #therm {
  vertical-align:top;
  max-height: 100px;
}
#future #gauge {
  position: absolute;
  height: 100px;
  padding-top: 70px;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: url("../images/project/g-full.png");
  background-position: center;
  background-clip: content-box;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
#future #percent {
  position: absolute;
  text-align: center;
  font-size: .63em;
  font-weight: bolder;
  width: 96%;
  bottom: 10px;
  color: #eca9ff;
}
.compact ul li {
  margin-left: 7px;
  margin-bottom: 2px;
}
.qr {
  max-width: 100%;
  max-height: 100%;
  padding: .75em;
}
#zelle a .button {
  color: white;
}
#zelle div > hr {
  margin-top: 1.5em;
  margin-bottom: 0;
}
button, .button {
  background-color: #b3f0df;
  color: #505050;
  text-shadow: none;
}
button.u-no-margin, .button.u-no-margin {
  margin: 0;
}
.button.green {
  background: #afffc1;
}
.button.purple {
  background: #cdb8e2;
}
.button.cyan {
  background: #1abc9c;
}
.button.sea {
  background: #419295;
}
.button.teal {
  background: #189090;
}
.button.orange {
  background: #fecdb9;
}
.button.brick {
  background: #e74c3c;
}
.button.red {
  background: #fcc;
}
.button.yellow {
  background: #c5a211;
}
.button.olive {
  background: #4c6b1e;
}
.button.gray {
  background: #d2dede;
}
button:hover, .button:hover {
  color: #404040;
}

/* ----------- BitPay ----------- */
.bitpay-donate { margin-right:7px}
.bitpay-donate fieldset {border:0;}
.bitpay-donate input {padding:4px 10px;}
.bitpay-donate select {padding:3px 10px;}
.bitpay-donate label {font-size: .9em; font-weight: bold; letter-spacing: -.05rem;}
.bitpay-donate-field-price { width: 8.5em; }
.bitpay-donate-button { height:3em; padding: 0; margin: .125em .1em; }
input.bitpay-donate-error {border:2px solid red;}

/* ******************************* */
/* ----------- Desktop ----------- */
/* ******************************* */
@media screen and (min-width: 750px) {
  main {
    background-image: url("../images/bg-body-l.png"), url("../images/bg-body-r.png"), radial-gradient(circle farthest-side, #ffffe6, beige);
  }
  /* Header */
  #header {
    background-image: url("../images/bg-head-l.png"), url("../images/bg-head-r.png"), linear-gradient(to top, beige, #b3ffe7);
  }
  #header.banner {
    background-position: left, right, center -18px, 70px 0;
    background-size: auto, auto, 1280px 333px, 88% 100%;
    background-repeat: no-repeat;
  }
  #header.future {
    background-image: url("../images/bg-head-l.png"), url("../images/bg-head-r.png"), url("../images/future-head.gif"), linear-gradient(to top, beige, #b3ffe7);
  }
  #header.brochure {
    background-image: url("../images/bg-head-l.png"), url("../images/bg-head-r.png"), url("../images/future-head-b.gif"), linear-gradient(to top, beige, #b3ffe7);
  }
  #header.academy {
    background-image: url("../images/bg-head-l.png"), url("../images/bg-head-r.png"), url("../images/school-head.png"), linear-gradient(to top, beige, #b3ffe7);
  }

  #header.banner #alsajdah-org {
    top: 25px;
    left: 120px;
  }
  #header.banner #alsajdah-org img:hover {
    -webkit-filter: brightness(120%);
    filter: brightness(120%);
    -webkit-transition: all .15s;
    transition: all .15s;
  }
  #header.brochure #alsajdah-org {
    top: 10px;
  }
  #header.banner #tab {
    margin-top: 253px;

  }
  #header.banner #page-title {
    font-size: 1.75em;
    right: 190px;
    bottom: 220px;
    text-align: right;
  }
  #page-title {
    text-shadow: -1px -1px #ced411;
  }
  #page-title a {
    color: #ba7b2f;
  }
  #jade-title {
    margin-top: -77px;
  }
  .content-title {
    margin-top: -27px;
    margin-bottom: 8px;
  }
  #homeschooling {
    height: 270px;
  }
  #page-lang {
    position: absolute;
    top: 10px; right: 133px;
  }
  #header.brochure #page-title {
    font-size: 1.5em;
    right: auto;
    left: 130px;
    bottom: 85px;
    text-align: left;
  }
  #header.brochure #DonateH {
    position: absolute;
    right: 130px;
    bottom: 85px;
  }
  #tab {
    box-shadow:
      -1px 1px 0 0 rgba(54, 95, 88, 0.33), /* bottom white */
      1px -1px 0 0 #808080,             /* top gray */
      inset -1px 2px 4px #5c948e,     /* top inner drop shadow */
      0 0 10px rgba(128,128,128,.5);  /* outer glow */
    background: #97e1c5 url("../images/bg-pattern.png");
  }
  #tab a {
    color: #0f4a39;
    box-shadow:
      2px 0 1px -1px rgba(128,128,128,.7), /* outer glow  */
      2px 0 0 0 #28b7b5,                   /* thick wall  */
      3px 0 0 0 rgb(85, 145, 141),         /* right white */
      inset -2px 0 2px #628c90;            /* left inner shadow + top/bottom bit */
    border-right: solid 1px #4a7a73;
    text-shadow: 1px 1px #68aeac;
  }
  #tab a.current, #tab a:hover, #tab a:active {
    color: #004032;
    text-shadow: 1px 1px #68aeac;
    background-color: rgba(0, 89, 115, 0.22);
  }
  #footer.academy #links a {
    transform: scaleX(1.1);
  }
  #zelle a .button {
    margin-top: 0;
  }
}

/* Background cropping */
@media screen and (min-width: 750px) and  (max-width: 1165px) {
  #header {
    background-position: left, right, center, 70px 0;
    background-size: auto, auto, 1140px 316px, 88% 100%;
    background-repeat: no-repeat;
  }
}

/* ****************************** */
/* ----------- Tablet ----------- */
/* ****************************** */

@media screen and (min-width: 750px) and (max-width: 1200px) {
  #header.banner #alsajdah-org  {
    top: 33px;
    left: 111px;
  }
  #header.banner #alsajdah-org img {
    width: 83%;
  }
  #header.brochure #alsajdah-org {
    top: 13px;
  }
  #header.banner #page-title {
    font-size: 1.4em;
    right: 130px;
    bottom: 210px;
  }
  #header.brochure #page-title {
    font-size: 1.25em;
    bottom: 80px;
  }
  #homeschooling {
    height: 240px;
  }
  .bitpay-donate-field-price { width: 5.7em; }
}

/* ****************************** */
/* ----------- Mobile ----------- */
/* ****************************** */

@media screen and (max-width: 749px) {
  main {
    background-image: url("../images/m-bg-body-l.png"), url("../images/m-bg-body-r.png"), radial-gradient(circle farthest-side, beige, white);
  }
  #titleBar {
    background-image: url("../images/m-bg-head-l.png"), url("../images/m-bg-head-r.png"), linear-gradient(to top, rgba(185, 236, 231, 0.7), rgba(204, 236, 228, 0.7));
  }
  #footer {
    padding-top: .5em;
  }

  #jade-title {
    padding-top: 0;
  }
  #jade-title a {
    margin-top: .5em;
  }
  h3.content-title {
    font-size: 1em;
  }
  header > #m-banner {
    margin-top: 1em;
    margin-bottom: -.5em;
  }
  #m-banner img {
    border-radius: 7px;
    width: 100%;
  }
  #donate #forms {
    text-align: center;
  }
}