/* Fonts */
@font-face{font-family:'DOTMATRIXTSTAR';src:url('fonts/DOTMATRIXTSTAR.otf');}
@font-face{font-family:'OxfamTStar';src:url('fonts/OxfamTSTARHeavyWebEOT.eot?#iefix') format('embedded-opentype'),
url('fonts/OxfamTSTARHeavyWebWOFF.woff') format('woff');font-weight:900;}
@font-face{font-family:'OxfamTStar';src:url('fonts/OxfamTSTARRegularWebEOT.eot');src:url('fonts/OxfamTSTARRegularWebEOT.eot?#iefix') format('embedded-opentype'),
url('fonts/OxfamTSTARRegularWebWOFF.woff') format('woff');}
@font-face{font-family:'OxfamTStar';src:url('fonts/OxfamTSTARBoldWebEOT.eot');src:url('fonts/OxfamTSTARBoldWebEOT.eot?#iefix') format('embedded-opentype'),
url('fonts/OxfamTSTARBoldWebWOFF.woff') format('woff');font-weight:bold;}
@import url("https://use.fontawesome.com/releases/v5.8.2/css/all.css");

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

.green{
  color: #7ab92a !important;
}
.scoreMain h2 {
    font-family: OxfamTStar, Montserrat, sans-serif;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 2.2em;
    margin-bottom: 10px;
    padding-top: 1em;
}

.scoreMain h4 {
    font-family: OxfamTStar, Montserrat, sans-serif;
    font-size: 1.5rem;
}

/* Container Styles */
.purpleBackground{color:#fff;background-color:#5c0039;padding-bottom:3rem;position:relative;text-align: center;}
.scoreMain {
  margin: 0 auto;
  max-width: 700px;
  text-align: center;
}
.projectCards {
 margin-top: 0; 
}
.asterisks {
    font-family: DOTMATRIXTSTAR;
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 10px;
}
.scorecardDiv {
  margin: 0 auto;
  max-width: 650px;
  text-align: center;
}
.scStepsH {
  font-size: 1.2em;
}
.scSteps {
  display: flex;
}
.step {
  float:left;
  max-width: 33%;
  padding: 0px 10px;
}
.step span {
  font-family: OxfamTStar, Montserrat, sans-serif;
  width: 100%;
  display: block;
  font-size: 2rem;
}
.step img {
  display: block;
  margin: 0 auto;
}

/* Accordion Styles */
.accordion {
  font-family: OxfamTStar, Montserrat, sans-serif;
  background-color: #f2f2f2;
  color: #444;
  cursor: pointer;
  padding: 8px 18px;
  width: 100%;
  text-align: center;
  outline: none;
  font-size: 2em;
  transition: 0.4s;
  border-top: 2px dashed   #E0E0E0;
  display: table;
  position: relative;
}
.accordion:hover {
  background-color: #ddd;
}
.accordion:first-child {
  font-family:'DOTMATRIXTSTAR', OxfamTStar, Montserrat, sans-serif;
  color: #5fa630;
  font-size: 1.8em;
  line-height: 1em;
  padding-top:2em;
  border-top: none;
  cursor: auto;
  background: url(../img/scorecard/RECEIPT_top.png) no-repeat;
  background-size: 100% auto;
}
.last {
  border-bottom: none;
  background: url(../img/scorecard/RECEIPT_bottom.png) no-repeat;
  background-size: 100% auto;
  background-position: bottom;
  pointer-events: none;
  cursor: auto;
  height: 3rem;
}
.accordion:not(:first-child):not(.last):after {
  content: '\f13a';
  font-size: .8em;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  float: right;
  margin-left: 5px;
  margin-top: 7px;
}
.accordion:not(:first-child):not(.last).active:after {
  content: "\f139";
}
.panel {
  padding: 0px 18px;
  background-color: #eee;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  position: relative;
}
.sColumn1 {
  float: left;
  width: 15%;
}
.sColumn2 {
  float: left;
  width: 25%;
}
.sColumn3, .sColumn4{
  float: left;
  width: 22%;
}
.sColumn4H {
  float: left;
  width: 30%;
}
.sColumn3 span, .sColumn4 span {
  font-size: 0.5em;
  font-weight: normal;
}
.sColumn4H {
  font-weight: normal;
}
.sColumn4 {
  font-weight: 700;
}
.improvement {
  position: absolute; 
  color: #000;
}
.pColumn1 {
  font-family: OxfamTStar, Montserrat, sans-serif;
  color:#000;
  font-size: 1.2em;
  text-align: center;
  line-height: 1;
  float: left;
  width: 25%;
  padding: 10px 0px;
  position:relative;
}
.img-responsive {
    display: inline-block; 
    vertical-align: middle;
    max-width: 50%;
    height: auto;
}

/* Baskets */
.circle {
    font-size: 1.5rem;
    font-weight: 600;
    width: 95px;
    height: 2em;
    text-align: center;
    color: #fff;
    background-color: #eee;
    margin: 0 auto;
    line-height: 2em;
    margin-top: 10px;
}
.circle-text {
  font-family: OxfamTStar, Montserrat, sans-serif;
  font-size: 1.5em;
  line-height: 0.8em;
  color:#444;
  margin: 0;
  position: relative;
  padding-top: 15px;
  text-align: center;
}
.circle-text span {
  font-family: OxfamTStar, Montserrat, sans-serif;
  font-size: 0.5em;
  display:block;

}
.basketBG {
    background: url(../img/scorecard/Shopping_basket_iconbLACKv3.png) no-repeat;
    width: 100px;
    height: 80px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.introS {
  padding: 0.5em 0;
}

/*----- KEY STYLES ----- */

.scoreFooter {
  margin: 0 auto;
  max-width: 700px;
}

.keyEnd, .key, .keyMiddle {
  float: left;
}
.keyEnd {
  width: 15%;
  text-align: center;
}
.keyMiddle {
  width: 70%;
}
.dark-red{color: #db0928;}
.key {font-size:1em;vertical-align:text-top;padding:8px 0px;color:#ffffff;font-weight:500;text-align:center;width: 20%;}
.key1{background:#db0928;}
.key2{background:#ee7402;}
.key3{background:#fec800;}
.key4{background:#7ab929;}
.key5{background:#007a31;}
.scorecardkey{    
  padding: 1em 0;
  clear: both;
  }
.showKey {
  display: flex;
}
.legal {
  border-left: #ffffff 8px solid;
  background: rgb(255, 255, 255, 0.1);
  padding:0.5em;
  margin-top: 0.5em;
}
.legal a {
  font-weight: 700;
  color: #fff;
}

/*---------- MOBILE STYLES ----------- */

@media only screen and (max-width: 720px) {
  .accordion:first-child {
    padding-top: 1.5em;
}
.sColumn3, .sColumn4 {
    float: left;
    width: 20%;
}
  .accordion, .accordion:first-child {
    font-size: 1.2em;
  }
  .panel {
   /* padding: 0; */
  }
  .pColumn1, .pColumn2, .pColumn3, .pColumn4 {
    width: 50%;
    padding: 5px 0px;
    position: relative;
  }
  .sColumn1 {
    width:10%;
  }
  .sColumn2 {
    width:15%;
    word-wrap: break-word;
    margin-right: 10%;
  }
  .circle-text span {
    font-size:0.4em;
  }
 .pColumn1H { 
    font-size:1.2em;
  }
	.key {
		font-size: .8em; }
  .img-responsive {
    max-width: 100%;
}
}