/* UPDATES TO COLOURS */

ul.flame-nav-legend {
  display: flex;
  position: relative;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  flex-wrap: wrap;
  justify-content: center;
}
.flame-nav-legend li {
  display: flex;
  position: relative;
  flex-wrap: nowrap;
  height: 1.5rem;
  align-items: center;
  justify-content: flex-start;
  margin: 0.25rem 0.5rem;
}
.flame-nav-legend svg {
  display: block;
  position: relative;
  height: 100%;
  width: auto;
}
.legend-label {
  font-size: 0.75rem;
  line-height: 1.5rem;
  margin-left: 0.25rem;
}

a.flame-icon {
  height: 2rem;
  margin: 0.125rem 0.15rem;
}
a.flame-icon:hover .flame-body,
a.flame-icon:focus .flame-body {
    fill: #000;
}

.flame-category-tag {
    display: block;
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.7rem;
    fill: #ffffff;
}

.flame-section-info .resolution-status-label {
  background-color: #000;
}
.resolution-status-label.inProgress, .resolution-status-container.inProgress,
.resolution-status-label.inProgressPhaseTwo, .resolution-status-container.inProgressPhaseTwo,
.resolution-status-label.notStarted, .resolution-status-container.notStarted,
.resolution-status-label.complete, .resolution-status-container.complete {
  background-color: #000;
}

.cta-status {
    display: inline-block;
    position: relative;
    font-size: 0.6rem;
    line-height: 0.7rem;
    font-weight: bold;
    background-color: #000;
    color: #fff;
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
}

.group-link.inProgress .more-info,
.group-link.inProgressPhaseTwo .more-info,
.group-link.complete .more-info,
.group-link.notStarted .more-info {
    background-color: #fafafa;
}



.category-header.child-welfare, .hero-image.child-welfare {
    background-color: #00819D;
}
.flame-icon.child-welfare .flame-body,
.flame-nav-legend svg.child-welfare {
    fill: #00819D;
}
.child-welfare .group-link {
  border-color: #00819D;
}

.category-header.education, .hero-image.education {
    background-color: #CD4B17;
}
.flame-icon.education .flame-body,
.flame-nav-legend svg.education {
    fill: #CD4B17;
}
.education .group-link {
  border-color: #CD4B17;
}

.category-header.language-and-culture, .hero-image.language-and-culture {
    background-color: #A1628B;
}
.flame-icon.language-and-culture .flame-body,
.flame-nav-legend svg.language-and-culture {
    fill: #A1628B;
}
.language-and-culture .group-link {
  border-color: #A1628B;
}

.category-header.health, .hero-image.health {
  background-color: #097BBB;
}
.flame-icon.health .flame-body,
.flame-nav-legend svg.health {
  fill: #097BBB;
}
.health .group-link {
  border-color: #097BBB;
}

.category-header.justice, .hero-image.justice {
  background-color: #1FAF08;
}
.flame-icon.justice .flame-body,
.flame-nav-legend svg.justice {
  fill: #1FAF08;
}
.justice .group-link {
  border-color: #1FAF08;
}

.category-header.reconciliation, .hero-image.reconciliation {
  background-color: #CE2B30;
}
.flame-icon.reconciliation .flame-body,
.flame-nav-legend svg.reconciliation {
  fill: #CE2B30;
}
.reconciliation .group-link {
  border-color: #CE2B30;
}


@media only screen and (max-width: 640px) {
  a.flame-icon {
    margin: 0.125rem 0.1rem;
  }
}

@media only screen and (max-width: 480px) {
  a.flame-icon {
    height: 1.75rem;
  }
}

@media only screen and (max-width: 360px) {
  a.flame-icon {
    height: 2rem;
  }
  .cta-status {
    margin: auto 0.5rem auto 0.25rem;
  }
}