* {
 --blue: #1566ed;
 --green: #76df7a;
 --color1: #00C7B1;
 --outerCircleRadius: 25vw;
}

body {
 background: linear-gradient(-235deg, #eeeeee, #f1f1f1, #ffffff, #ffffff);
 background-size: 100% 100%;
 animation: gradient 15s ease infinite;
}

button, #donateButton {
 margin-bottom: 3em;
 background: linear-gradient(-235deg, var(--color1), #c0ede4);
}

button a {
 text-decoration: none;
 border-bottom:0px;
 color:#fff;
 font-weight:700;
 font-size:2em; 
}
#donateButton {
 color:#fff !important;
 font-weight:700 !important;
 font-size:1em !important; 
}


#donate-now {
 margin:10 auto;
 text-align: right;
 width: 100;
 padding-bottom: 50px;
}

number_sponsored {
 borer:0px;
 background: #ffffff00;
}
  
 
/* STRUCTURE */
#grid-container   { display: grid;      }
#site-title    {  grid-area: site-title;    }
#page-title    { grid-area: page-title;    }
#page-info    { grid-area: page-info;    }
#progress-bar   { grid-area: progress-bar;   }
/* #progress-bar-header { grid-area: progress-bar-header; } */
#border-box    {  grid-area: border-box;   }
#give-form    { grid-area: give-form;    }
#give-form-header   { grid-area: give-form-header;  }
#footer     {  grid-area: footer;    }


/*site-title
page-title
page-info
progress-bar
progress-bar-header
give-form
give-form-header
footer
*/

.validationError {
 margin-top: 5px;
 margin-left: 0px;
 color: red;
 font-size: 16px;
}

#site-title {
 background: #eee;
 text-align:center;
 background: url("https://image.connect.cms.org.au/lib/fe3a11717164057c721571/m/1/7323fc16-d446-4f42-98c6-c4985d0ee487.png") no-repeat center 0px;
    background-size: 7em;
 margin-top: 2em;
 padding-top: 2.5em;
}

#page-title,
#page-info,
#give-form,
#give-form-header {
}

#page-title header {
 margin-bottom: 2em;
}

.subhead {
 font-family: "Raleway", Helvetica, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.175em;
    line-height: 2.5;
    text-transform: uppercase;
}

#page-info {
 margin: 0 auto;
}

#page-title content p,
.counter p {
 text-align:right;
 line-height: 1.5em;
 letter-spacing: -0.01em;
 font-size:1.5em;
}
.counter p {
 text-align: center;
}


#page-title content p.main {
 color: var(--color1);
 font-weight: 600;
 font-size:1.5em;  
 line-height: 1.25em;
}
#page-title content p.strong {
 font-weight: 700;
 line-height: 1.25em;
}


#progress-bar {
 margin: 0 auto;
}
#progress-bar header h2 {
 text-align: center;
}
#progress-bar .counter {
 
}
#footer {
 background: var(--color1);
 color:#fff;
 font-weight: bold;
 text-align: center;
}

@media screen and (max-width:900px) {

 /* STRUCTURE FOR NARROWSCREEN */
 * {
  --outerCircleRadius: 75vw;
 }
 #grid-container {
  grid-template-areas:
   'site-title'
   'page-title'
   'page-info'
   'progress-bar'
   'progress-bar-header'
   'give-form-header'
   'give-form'
   'footer';
  grid-template-columns: 100vw;
  grid-template-rows: 10em auto 1vh auto 0em 5em 1fr;
  /* grid-template-rows: 10em calc(100vh - 10em) 1vh auto 0em 5em 1fr;*/
  /* grid-template-rows: 10em calc(100vh - 10em) auto calc(100vh - 10em) 100vh 10em 100vh 5em; */
 }
 /* STYLE FOR NARROWSCREEN */
 h1, h2, h3, h4 {
  text-align:center;
 }
 #page-title content p, 
 #donate-now,
 .subhead {
  text-align: center;
 }
}
@media screen and (min-width:900px) {
 * {
  --outerCircleRadius: 25vw;
 }
 /* STRUCTURE FOR WIDESCREEN */
 
 #grid-container {
  grid-template-areas:
   '... site-title site-title site-title ...'
   '... page-title border-box progress-bar ...'
   '... give-form-header border-box give-form ...'
   'footer footer footer footer footer';
  grid-template-columns: 1fr 40vw 5em 40vw 1fr;
  grid-template-rows: 12em calc(100vh - 12em) 100vh; 
 }
 
 /* STYLE FOR WIDESCREEN */
 header h1, header h2 {
  text-align: right;
  position:relative;
 }
 #page-title header .subhead {
  text-align:right;
  line-height: 2em;
 }
 #border-box {
  background: linear-gradient(var(--color1), var(--color1)) no-repeat center/2px 100%;
  margin-top:4em;

 }
 #border-box::before {
  content: " ";
  display:block;
 }
 header h1::after,
 header h2::after {
  display: block;
  content: " ";
  border-top: solid 2px var(--color1);
  border-right: solid 2px var(--color1);
  width: 25px;
  position: absolute;
  top: 50%;
  /* margin-left: -0.25em; */
  right: -44px; 
 }
 header h1::before,
 header h2::before {
  border: solid 5px var(--color1);
  border-radius: 10px;
  content: " ";
  position: absolute;
  top: calc(50% - 4px);
  right: -26px;
 }
}

 quote {
  font-size: 2em;
 }

 #number_sponsored {
  border:solid 0px white;
  background: #ffffff00;
  border-radius:10px; 
  font-size:1em;
  font-weight:bold;
  width:3em;
  text-align: right;
  padding: 5px;
  border:0px;
  

 }
 .label {
  color:#777;
  font-size: 2em;
  font-family: Arial;
  margin-bottom: 1px;
 
 }

 #outer-circle {
  width: var(--outerCircleRadius);
  height: var(--outerCircleRadius);
  background: url("https://image.connect.cms.org.au/lib/fe3a11717164057c721571/m/1/8d0e9593-8691-40a2-a4be-1989898d7d67.png") no-repeat;
  background-size: 100%;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
 }

 #inner-circle {
  --innerCircleWidth: 25%;
  transition-duration: 1000ms;
  transition-property: width, height, margin-left,margin-top;
  width: var(--innerCircleWidth);
  height: var(--innerCircleWidth);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: calc(-1 * var(--innerCircleWidth) / 2 - 0px);
  margin-top: calc(-1 * var(--innerCircleWidth) / 2 - 0px);
  border-radius: 50%;
  background: url("https://image.connect.cms.org.au/lib/fe3a11717164057c721571/m/1/eb57365f-93f9-44c6-9218-63d8686734d7.png") no-repeat;
  background-size: var(--outerCircleRadius);
  background-position:center;
  border: solid 10px #ffffffaa;

 }
 h1 {
  font-size:6rem;
  line-height:0.75em;
  margin: 0;
 }
 h2 {
  font-family: "Source Sans Pro";
  letter-spacing:-0.01em;
  font-size:2em;
  line-height:1em;
  text-transform: none;
 }

 #wrapper section > header h1 + p {
  letter-spacing: 0px;
 }

 #wrapper > section.intro > .content {
  padding: 8em 0em;
 }
 input#leaderQty, input#contributionQty {
  display: inline;
  width: 2em;
  margin-left:0em;
  text-align: center;
  padding:0px;
  font-weight: bold;
  font-size:1.5em;
  border-radius: 5px;
 }
 input[type="radio"] {
  appearance: none;
  display: block;
  float: left;
  margin-right: -2rem;
  opacity: 1;
  width: 2em;
  height: 2em;
  position: absolute;
  z-index: 1;
 }
 input.qty {
  width: 3em;
  display: inline;
  height:2em;
  margin:0;
  padding:0;
  font-weight: bold;
  text-align: center;
  border-radius: 7px;
 }
 input.currency {
  width: 4em;
  display: inline;
  height:2em;
  margin:0;
  padding:0;
  font-weight: bold;
  text-align: center;
  border-radius: 7px;
 }
 span.currency:before {
  content: "$";
 }
 input.no-style {
  border:0px;
  background:#fff;
  font-weight:bold;
  width:50%;
 }
 
 #header {
  padding:2em;
 }
 
 #header .logo {
  background: url("cms-logo-blue.svg") no-repeat 2EM;
  background-size: 7em;
  height:4vh;
 }
 #header h1, #header p {
  padding:2em;
  font-size:1em;
  text-align:right;
  margin-right:5em;
  margin-bottom:0em;
  padding:0em;
 }

 @media screen and (max-width: 736px) {

  #header h1 {
   text-align:center;
   margin-left:0em;
  }
  #header .logo {
   background-position: center;
  }
  section.intro header * {
   text-align:center;
  }
  #wrapper > section.intro > .content {
   padding: 0em;
  }
  * {
   --outerCircleRadius: 75vw;
  }
 section#page-title {
    padding:0rem 2rem;
 }

p.note {
 font-size: 1.2em !important;
}

section#give-form {
 padding: 0rem 2rem;
}
 
#progress-bar-header h2 {
 text-align: center;
}