:root {
  --black: #3a3a3a;
  --white: #fff;
  --green: #42A845;
  --light-green: #BFE3C0;
  --dark-green: #265728;
}

div.resources-list ol {
  list-style: none !important;
  margin-left: 0;
}
div.resources-list ol > li {
  list-style-type: none !important;
}

div.resources-list a {
  text-decoration: none;
  color: inherit;
}

div.resources-list input[type="radio"] {
  position: absolute;
  left: -9999px;
  margin: 0;
  padding: 0;
}

div.resources-list .filters {
  text-align: center;
  margin-bottom: 20px;
  margin-left: 0;
}

div.resources-list .filters * {
  display: inline-block;
}

div.resources-list .filters label {
  padding: 5px 10px;
  margin-bottom: 2px;
  border-radius: 20px;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  transition: all 0.1s;
}

div.resources-list .filters label:hover {
  background: var(--green);
  color: var(--white);
}

div.resources-list .resources {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  margin-left: 0;
}

div.resources-list .resources .resource {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

div.resources-list .resources .resource-subtitle {
  font-size: 16px;
  margin: 10px 0 10px 0;
}

div.resources-list .resources .resource-subtitle:hover {
  text-decoration: none;
}

div.resources-list .resources .resource-title {
  margin: 10px 0 10px 0;
  font-size: 17px;
  color: var(--green);
  text-decoration: underline;
}

div.resources-list .resources .resource-title:hover {
  text-decoration: none;
}

div.resources-list .resources .image-container {
  text-align: center;
  display: block;
  width: 85%;
  height: 200px;
  margin: auto;
  margin-top: 20px;
}

div.resources-list .resources .image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

div.resources-list .resources figcaption {
  padding: 15px 10px 5px 10px;
}

div.resources-list .resources figcaption p a {
  color: var(--green);
  text-decoration: underline;
}

div.resources-list .resources figcaption p a:hover {
  font-weight: bolder;
  text-decoration: none;
}

div.resources-list .resources figcaption p {
  font-size: 15px;
}

div.resources-list .resources .resource-categories {
  margin-bottom: 7px;
  margin-left: 0;
  font-size: 15px;
}

div.resources-list .resources .resource-categories * {
  display: inline-block;
}

div.resources-list .resources .resource-categories li {
  margin-bottom: 2px;
  margin-right: 5px;
}

div.resources-list .resources .resource-categories label {
  padding: 2px 5px;
  border-radius: 20px;
  border: 1px solid;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  background: all 0.1s;
  transition: all 0.1s;
  text-align: center;
}

div.resources-list .resources .resource-categories label:hover {
  background: var(--green);
  color: var(--white);
}

@media only screen and (max-width: 1000px) {
  div.resources-list .resources {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 650px) {
  div.resources-list .resources {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* FILTERING RULES */
[value="All"]:checked ~ .filters [for="All"],
[value="Books"]:checked ~ .filters [for="Books"],
[value="Websites"]:checked ~ .filters [for="Websites"],
[value="Toys"]:checked ~ .filters [for="Toys"],
[value="Independent-Play"]:checked ~ .filters [for="Independent-Play"],
[value="10-12-Months"]:checked ~ .filters [for="10-12-Months"],
[value="7-9-Months"]:checked ~ .filters [for="7-9-Months"],
[value="2-Years"]:checked ~ .filters [for="2-Years"],
[value="Anxiety"]:checked ~ .filters [for="Anxiety"],
[value="Child-Anxiety"]:checked ~ .filters [for="Child-Anxiety"] {
  background: var(--green);
  color: var(--white);
}

[value="All"]:checked ~ .resources [data-category] {
  display: block;
}

[value="Books"]:checked ~ .resources .resource:not([data-category~="Books"]),
[value="Websites"]:checked ~ .resources .resource:not([data-category~="Websites"]),
[value="Toys"]:checked ~ .resources .resource:not([data-category~="Toys"]),
[value="Independent-Play"]:checked ~ .resources .resource:not([data-category~="Independent-Play"]),
[value="7-9-Months"]:checked ~ .resources .resource:not([data-category~="7-9-Months"]),
[value="10-12-Months"]:checked ~ .resources .resource:not([data-category~="10-12-Months"]),
[value="2-Years"]:checked ~ .resources .resource:not([data-category~="2-Years"]),
[value="Anxiety"]:checked ~ .resources .resource:not([data-category~="Anxiety"]),
[value="Child-Anxiety"]:checked ~ .resources .resource:not([data-category~="Child-Anxiety"]) {
  display: none;
}

/* Single resource CSS */
div.resource-box {
  position:relative;
  align-items: center;
  justify-content: center;
  margin: 10px;
}

div.resource-box-blog {
  position:relative;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #ccc;
}

div.resource-box a, div.resource-box-blog a {
text-decoration: none;
color: inherit;
}

div.resource-box .resource-box-ribbon {
  font-size: 15px;
  line-height: 12px;
  font-weight: 700;
  display: inline-block;
  position: absolute;
  top: -15px;
  left: -10px;
  margin: 0;
  padding: 9px 16px 8px 14px;
  color: #fff;
  background-color: var(--green);
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,.14);
}

div.resource-box .resource-box-ribbon::after {
  content: " ";
  display: block;
  position: absolute;
  left: -10px;
  bottom: -7px;
  border-color: rgba(0,0,0,0) var(--dark-green) rgba(0,0,0,0) rgba(0,0,0,0);
  border-style: inset solid inset inset;
  border-width: 0 10px 7px;
}

div.resource-box .resource-contents {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
margin: 0;
background: #fafafa;
border: 4px solid var(--green);
box-shadow: 0 0 5px 0 #80C883;
}

div.resource-box-blog .resource-contents-blog {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  margin: 0;
}

div.resource-box .resource-contents .resource-subtitle, div.resource-box-blog .resource-contents-blog .resource-subtitle {
font-size: 19px;
margin: 10px 0 10px 0;
}

div.resource-box .resource-contents .resource-subtitle:hover, div.resource-box-blog .resource-contents-blog .resource-subtitle:hover {
text-decoration: none;
}

div.resource-box .resource-contents .resource-title, div.resource-box-blog .resource-contents-blog .resource-title {
margin: 10px 0 10px 0;
font-size: 20px;
color: var(--green);
text-decoration: underline;
}

div.resource-box .resource-contents .resource-title:hover, div.resource-box-blog .resource-contents-blog .resource-title:hover {
text-decoration: none;
}

div.resource-box .resource-contents .image-container {
  text-align: center;
  display: block;
  width: 85%;
  height: 60%;
  max-height: 300px;
  margin: auto;
}

div.resource-box-blog .resource-contents-blog .image-container {
  text-align: center;
  display: block;
  width: 85%;
  height: 90%;
  max-height: 300px;
  margin: auto;
  background-color: #fff;
}

div.resource-box .resource-contents .image-container img, div.resource-box-blog .resource-contents-blog .image-container img {
width: 100%;
height: 100%;
object-fit: contain;
}

div.resource-box .resource-contents figcaption, div.resource-box-blog .resource-contents-blog figcaption {
padding: 15px 10px 5px 10px;
}

div.resource-box .resource-contents figcaption p a, div.resource-box-blog .resource-contents-blog figcaption p a {
color: var(--green);
text-decoration: underline;
}

div.resource-box .resource-contents figcaption p a:hover, div.resource-box-blog .resource-contents-blog figcaption p a:hover {
font-weight: bolder;
text-decoration: none;
}

div.resource-box .resource-contents figcaption p, div.resource-box-blog .resource-contents-blog figcaption p {
font-size: 18px;
}

@media only screen and (max-width: 650px) {
  div.resource-box .resource-contents {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
}
}

/* Multi resource CSS */
div.multi-resources {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(2, 1fr);
  margin-left: 0;
  margin-top: 20px;
}

div.multi-resource-box {
  position:relative;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
}

div.multi-resource-box a {
  text-decoration: none;
  color: inherit;
}

div.multi-resource-box .multi-resource-box-ribbon {
  font-size: 15px;
  line-height: 12px;
  font-weight: 700;
  display: inline-block;
  position: absolute;
  top: -15px;
  left: -10px;
  margin: 0;
  padding: 9px 16px 8px 14px;
  color: #fff;
  background-color: var(--green);
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,.14);
}

div.multi-resource-box .multi-resource-box-ribbon::after {
  content: " ";
  display: block;
  position: absolute;
  left: -10px;
  bottom: -7px;
  border-color: rgba(0,0,0,0) var(--dark-green) rgba(0,0,0,0) rgba(0,0,0,0);
  border-style: inset solid inset inset;
  border-width: 0 10px 7px;
}

div.multi-resource-box .multi-resource-contents {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  margin: 0;
  background: #fafafa;
  border: 4px solid var(--green);
  box-shadow: 0 0 5px 0 #80C883;
}

div.multi-resources .multi-resource-box .multi-resource-contents .multi-resource-subtitle {
  font-size: 16px;
  margin: 10px 0 10px 0;
  text-align: left;
}

div.multi-resources .multi-resource-box .multi-resource-contents .multi-resource-subtitle:hover {
  text-decoration: none;
}

div.multi-resource-box .multi-resource-contents .multi-resource-title {
  margin: 10px 0 10px 0;
  font-size: 17px;
  color: var(--green);
  text-decoration: underline;
}

div.multi-resource-box .multi-resource-contents .multi-resource-title:hover {
  text-decoration: none;
}

div.multi-resource-box .multi-resource-contents .multi-image-container {
  text-align: center;
  display: block;
  width: 85%;
  height: 200px;
  margin: auto;
  margin-top: 20px;
}

div.multi-resource-box .multi-resource-contents .multi-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

div.multi-resource-box .multi-resource-contents figcaption {
  padding: 15px 10px 5px 10px;
}

div.multi-resource-box .multi-resource-contents figcaption p a {
  color: var(--green);
  text-decoration: underline;
}

div.multi-resource-box .multi-resource-contents figcaption p a:hover {
  font-weight: bolder;
  text-decoration: none;
}

div.multi-resource-box .multi-resource-contents figcaption p {
  font-size: 15px;
}

@media only screen and (max-width: 650px) {
  div.multi-resources {
    grid-template-columns: repeat(1, 1fr);
}
}