# This tells 11ty to write one single bundle.css file to reduce HTTP requests, using the following partial stylesheets #
# Make sure CSS files are in right order so the right cascading takes place #
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* Added to make sure screen doesn't scroll horizontally on mobile */
html, body {
  overflow-x: hidden;
  @media screen and (min-width: 1024px) {
    overflow-x: unset;
  }
}

body {
  line-height: 1.5;
  max-width: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1920,18,1.2,6,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--1: clamp(0.8333rem, 0.786rem + 0.2367vi, 0.9375rem);
  --step-0: clamp(1rem, 0.9432rem + 0.2841vi, 1.125rem);
  --step-1: clamp(1.2rem, 1.1318rem + 0.3409vi, 1.35rem);
  --step-2: clamp(1.44rem, 1.3582rem + 0.4091vi, 1.62rem);
  --step-3: clamp(1.728rem, 1.6298rem + 0.4909vi, 1.944rem);
  --step-4: clamp(2.0736rem, 1.9558rem + 0.5891vi, 2.3328rem);
  --step-5: clamp(2.4883rem, 2.3469rem + 0.7069vi, 2.7994rem);
  --step-6: clamp(2.986rem, 2.8163rem + 0.8483vi, 3.3592rem);

  --barnardos-green: #0b463d;
  --offwhite: #f7f6f1;
}

@font-face {

  font-family: "barnardos-express";
  src: url("/static/fonts/barnardos-express.woff2") format("woff2"),
    url("/static/fonts/barnardos-express.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: "barnardos-speak";
  src: url("/static/fonts/barnardos-speak.woff2") format("woff2"),
    url("/static/fonts/barnardos-speak.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

body {

  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 87.5rem;
  min-block-size: 100vh;
  position: relative;
}

body, a {
  font-family: arial, sans-serif;
  font-size: var(--step-0);
}


h1, h2, h3, h4, h5, h6 {
  color: var(--barnardos-green);
  line-height: 1.2;
}


h1 {
  font-family: barnardos-express, sans-serif;
  font-size: var(--step-6);
  font-weight: 300;
  line-height: 53.947712px;
  
}

h2 {
  font-family: barnardos-speak, sans-serif;
  font-size: var(--step-5);
  line-height: 44.78976px;
}

h3 {
  font-family: barnardos-speak, sans-serif;
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 31.104px;
}

h4 {
  font-family: barnardos-speak, sans-serif;
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 25.92px;
}

h5,
h6 {
  font-family: barnardos-speak, sans-serif;
  font-size: var(--step-1);
  font-weight: 300;
}

a {
  color: var(--barnardos-green);
}

a:hover {
  text-decoration: none;
}

:focus-visible {
  outline: .2rem solid #e86c00;
}

p {
  margin-bottom: 16px;
  max-width: 770px;
}

.skip-link {
  color: #fff;
  display: block;
  font-family: arial, sans-serif;
  font-size: var(--step-2);
  left: -100vw;
  margin: 1rem;
  padding: .5rem 2rem;
  position: absolute;
  text-align: center;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-transform: lowercase;
}

.skip-link:focus {
  background-color: #0B463D;
  left: 0;
  z-index: 1;
}

.headerBackground {
  background: #F7F6F199;
}

#mainHeader header {
  container-type: inline-size;
  margin: 0 auto;
  max-width: 87.5rem;
  padding: 27px 36px;
}

#mainHeader .header-top {
  align-items: center;
  display: flex;
  padding-bottom: 16px;
}

#logo {
  flex: 1 1 auto;
  margin-right: 1rem;
}

#logo a {
  display: inline-block;
}

#logo img {
  aspect-ratio: 16 / 4;
  display: block;
  height:auto;
  max-width: 144px;
}

@container (min-width: 800px) {
  #logo img  {
    max-width: 276px;
  }
}

#mainHeader search {
  display: flex;
  height: 35%;
  margin-left: 24px;
}

.headerBottom {
  color: var(--barnardos-green);
  font-family: barnardos-express, sans-serif;
  font-size: var(--step-3);
  display: block;
  letter-spacing: 0.586px;
  text-align: center;
  width: 100%;
}

@container (min-width: 800px) {
  .headerBottom {
    display: none;
    font-size: var(--step-5);
  }
}

.colleagueHandbookInline {
  display: inline-block;
  margin-left: 1rem;
}

#hamburger {
  background: none;
  border: none;
  display: flex;
  margin-left: 1rem;
}

#logo .colleagueHandbookInline {
  display: none;
}

@container (min-width: 800px) {

  #logo a {
    margin-right: 1rem;
  }

  #logo .logoInner {
    align-items: center;
    display: flex;
  }

  #logo a {
    text-decoration: none;
  }

  #logo .colleagueHandbookInline {
    color: var(--barnardos-green);
    display: inline-block;
    font-family: barnardos-express, sans-serif;
    font-size: var(--step-3);
  }
}



@media (width < 1024px) {
  #widenav {
    display: none;
  }

  #hamburger {
    display: flex;
  }

  #mainHeader .strapline {
    /* if you want this to fit to width, here's some brilliantly appalling CSS https://kizu.dev/fit-to-width-text/ - but you'll probably have to set the font-size as a style attribute on the actual tag because they will be different lengths */
    font-size: 1.5em;
    font-family: barnardos-speak, Impact, 'Arial Narrow Bold', sans-serif;
  }

  #mainHeader search {
    display: none;
  }

}

@media (width >=1024px) {

  #mainHeader.no-JS+#widenav {
    display: none;
  }

  #mainHeader.JS+#widenav {
    display: grid;
  }


  #mainHeader .strapline {
    display: none;
  }

  /* the Rita rule: in case user was on narrow screen, opened the burger menu, then moved to wide screen (eg tablet rotated to landscape), keep showing the burger and don't confusingly switch to the widenav */

  :has(#hamburger[aria-expanded="true"]) #widenav {
    display: none;
  }

  #mainHeader.JS #hamburger[aria-expanded="false"] {
    display: none;
  }

}

nav.mainMenu, nav.mainMenu a {
  color: var(--barnardos-green);
  font-family: barnardos-speak, sans-serif;
  font-weight: 400;
  line-height: 33.6px;
}

nav.mainMenu > .sectionLink > li > a {
  font-size: var(--step-2);
  line-height:28px;
}

nav.mainMenu .sectionLink > li > ul > li > a {
  font-size: var(--step-1);
  line-height: 26.4px;
}

nav.mainMenu .sectionLink > li > ul > li > ul a {
  line-height: 21.6px;
  margin-bottom: 1.2rem;
}

nav.mainMenu a {
  display: inline-block;
  position: relative;
  text-decoration: none;
  width: 100%;
}

nav.mainMenu a span:first-child, nav.mainMenu .sectionNumber + span  {
  padding: 0.5rem 0.5rem 0.5rem 1rem;
}

nav.mainMenuv a span.sectionNumber {
  padding-left: 1.5rem;
  padding-right: 0;
}

nav.mainMenu ul {
  list-style: none;
}


ul.sectionLink {
  padding: 0;
}

#narrownav .main-search--small-viewport {
  margin-bottom: 2rem;
}

#widenav {
  background-color: #F7F6F199;
  margin-top: 25px;
  min-width: 100%;
  padding: 2rem 0 0 2.5rem;
}

/* added sticky position to ul instead of nav and made nav display grid to stop it breaking in safari */
#widenav > ul {
  align-self: start;
  height: 100vh;
  min-width: 100%;
  overflow-y: scroll;
  position: sticky;
  top: 1rem;
}

#widenav .sectionLink {
  margin-left: -2.5rem;
}

.level1--collapsed ul {
  display: none;
}

.current-page > ul > li > ul{
  display: none;
}

.current-page > ul > li {
  display: block;
}

.level1Andlevel2--expanded > ul > li > ul {
  display: none;
}

.level1Andlevel2--expanded > ul > .level2--active ul {
  display: block;
} 

.level1Andlevel2--expanded > ul > .level2--active ul > li {
  display: flex;
}

.current-page > a, .level1Andlevel2--expanded > a, .level2--active > a {
  background-color: #F387F999; 
  margin-bottom: 5px;
}

nav.mainMenu .sectionLink > li {
  font-size: var(--step-2);
  margin-bottom: 2rem;
}

nav.mainMenu li a {
  display: flex;
}

nav.mainMenu .level2--active li a {
  padding: 0.5rem;
}

nav.mainMenu .level2--active ul {
  padding: 0 0 0 1rem;
}


.dropdown, .arrowup {
  align-self: flex-start;
  display: inline-block;
  min-height: 2rem;
  margin-left: auto;
  padding-left: 1rem;
  width: 2rem;
}

.level1--collapsed:has( > ul) > a .dropdown, 
.level1--active > ul > li:has( > ul) > a > .dropdown,
.level1Andlevel2--expanded > ul > li:has( > ul) > a > .dropdown {
  background: top 12px right 5px no-repeat url("/static/images/dropdown.svg");
}

.level1--active > ul > li:has( > ul) > a > span.dropdown, .level1--active > ul > li:has( > ul) > a > span.arrowup,
.level1Andlevel2--expanded > ul > li:has( > ul) > a > span.dropdown, .level1Andlevel2--expanded > ul > li:has( > ul) > a > span.arrowup {
  background-size: 1.5rem;
}

.sectionLink > li:has(> ul) > a > .arrowup,
.level1--active:has( > ul) > a  > .arrowup,
.level1Andlevel2--expanded > ul > li:has( > ul) > a > .arrowup { 
  background: top 12px right 5px no-repeat url("/static/images/arrowup.svg");
}

.level2--active li:first-child {
  margin-top: 1.2rem;
}

#main.searchResults {
  @media screen and (min-width: 1024px) {
    grid-column: 4 / 13 ;
    background-color: #F7F6F199;
    padding: 2rem 4rem;
  }
}

#mainHeader search .searchFormInput,
#narrownav search .searchFormInput,
.searchResults search .searchFormInput {
  appearance: none;
  border: 2px solid #0b463d;
  border-right: none;
  box-shadow: none;
  color: #1d1d1d;
  display: block;
  flex-grow: 1;
  font-family: arial, sans-serif;
  font-size: var(--step-0);
  height: 45px;
  margin-top: 0 !important;
  padding: 8px 12px;
  width: 100%;
}

.siteSearchLabel {
  flex-grow: 1;
}

.siteSearchLabel > span {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.searchResults search {
  @media screen and (min-width: 1024px) {
    width: 60%;
  }
}

.searchFormInput::placeholder {
  color: #1d1d1d;
}

search form {
  display: flex;
}

.searched {
  margin-top: 15px;
}

#mainHeader search .searchSubmit,
#narrownav search .searchSubmit,
.searchResults search .searchSubmit {
  background-color: #a5feae;
  background-image: url(static/images/magnifyingglass.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 33px 31px;
  border-radius: 0;
  border-width: 0;
  box-shadow: 4px 4px 0 #0B463D;
  box-sizing: border-box;
  height: 45px;
  text-indent: -1000em;
  width: 50px;
}

#narrownav search {
  margin: 0 1rem;
}

search .searchSubmit:hover {
  box-shadow: none;
}


#main #results {
  margin-top: 40px;
}

.searchResults h1 {
  margin-bottom: 2rem;
}

#search_query {
  color: var(--barnardos-green);
  font-weight: 700;
}

#results .searchItem {
  box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
  margin-bottom: 2rem;
}

#results .linkContainer, #results .resultContainer {
  padding: 24px 40px;
}

#results .linkContainer {
  background-color: #f6f5ef;
}

#results a {
  color: #0B463D;
  font-family: arial, sans-serif;
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .5rem;
  text-decoration: none;
}

#results a:hover {
  text-decoration: underline;
}

/* Anchor Content */
.anchor-content { 
  margin: 2rem 0 1rem -0.5rem;
  padding: 0.5rem 0 0.5rem 0.5rem;
  @media screen and (min-width: 1024px) {
    margin: 2rem 0 1rem -3rem;
    padding-left: 3rem;
  }
}

.anchor-content:first-of-type {
  margin-top: 0;
} 

/*This leadText is equivalent to the textbox lead on main site NOT the banner lede, so font set to step-2 as per main site */
.leadText {
  color: var(--barnardos-green);
  font-family: arial, sans-serif;
  font-size: var(--step-2);
  line-height: 1.2;
  margin-top: 2rem;
}

#main .anchor-content:target {
 background-color: #FFD45A66;
 clip-path: polygon(0% 100%, 0.5% 0%, 100% 0%, 100% 100%, 0% 100%);
 @media screen and (min-width: 1024px) {
  clip-path: polygon(0% 100%, 3% 0%, 100% 0%, 100% 100%, 0% 100%);
 }
}


/* QuoteBlock */
.quoteBlock {
  display: grid;
  grid-column-gap: 24px;
  grid-template-columns: repeat(12, 1fr);
  margin-top: 72px;
}
  
.quoteLayout {
  color: var(--barnardos-green);
  container-name: quoteblock;
  container-type: inline-size;
  display: grid;
  grid-column-end: span 12;
  grid-column-start: 1;
}

.quoteInner {
  align-items: center;
  background: url("/static/images/smallShape.svg") no-repeat;
  background-color: #a5feae;;
  background-position: -53px -22px;
  background-size: 48cqi auto;
  grid-template-columns: none;
  grid-template-rows: none;
  min-height: auto;
  padding: 0 20px 20px;
}

.quoteContent {
  margin: 45px 24px 40px;
}

.quote {
  background: url("/static/images/quotationMark.svg") no-repeat;
  font-family: barnardos-speak, sans-serif;
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.2;
  padding-top: 76px;
  position: relative;
}

.quote::after {
  color: var(--barnardos-green);
  content: "\201D";
}

.quoteCite {
  display: block;
  margin-top: 16px;

  @media screen and (min-width: 1024px) {
    margin-top: 24px;
  } 
}

.quoteName {
  font-family: barnardos-speak, sans-serif;
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 30px;
}

.quoteJobTitle {
  font-family: arial, sans-serif;
  font-size: var(--step-1);
  margin-top: 16px;
}

.quoteInner {
  background-size: auto;
  padding: 186px 20px 20px;
}

@container quoteblock (min-inline-size: 44.333rem) {
  .quoteInner {
    background-size: 300px auto;
    box-sizing: border-box;
    display: grid;
    gap: 24px;
    grid-template-columns: 328px auto;
    max-width: 87.5rem;
    padding: 0 50px 0 0;
    width: 100%;
  }

  .quoteInner {
    grid-template-columns: none;
    padding-left: 328px;
  }
}

#main {
  margin: 25px 0 0;
  padding: 0 1rem 2rem;

  @media screen and (min-width: 1024px) {
      margin: 25px 0 0 16px;
      padding: 0 2rem 2rem;
    }
}

/* CONTENT PAGE CSS HERE */
#main.section-page, #main.content-page {  
  margin-top: 0rem;
  @media screen and (min-width: 1024px) {
    margin-top: 25px;
  }
}

#main.content-page, #main.standalone { 
  background: #F7F6F199;
}

@media screen and (min-width: 1024px) {
  .contentLayout {
    column-gap: 25px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }

  #widenav {
    grid-column: 1 / 4;
  }

  #main {
    grid-column: 6 / 13;
  }
}

.trapeziumLinks {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem auto 0;
}

.trapeziumLinks .trapeziumParent {
  display: flex;
  flex-basis: 100%;
  justify-content: center;
  @media screen and (min-width: 500px) {
    flex-basis: 50%;
    justify-content: unset;
  }
}

@media screen and (min-width: 500px) {
  .trapeziumParent:nth-child(odd) a {
    margin-left: auto;
  }
}

.trapeziumLinks a { 
  background-color: #A4FEAE;
  color: #0B463D;
  font: 400 var(--step-0) barnardos-speak, sans-serif;
  margin-bottom: 1rem;
  min-width: 220px;
  max-width: 220px;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;

  @media screen and (min-width: 500px) {
    align-items: center; 
    display: flex;
    min-width: 170px;
    max-width: 170px;
  }
  
  @media screen and (min-width: 1024px) {
    min-width: 220px;
    max-width: 220px;
  }
}

.trapeziumLinks a span { 
  flex: 1;
}

.trapeziumLinks .trapeziumParent a { 
  clip-path: polygon(0% 0%, 100% 0%, calc(94% + 4px) calc(100% + 6px), 5% calc(100% + 6px));
}

.trapeziumLinks .trapeziumParent { 
  filter: drop-shadow(4px 6px #0B463D);
}

.trapeziumLinks .trapeziumParent:nth-child(1) a, 
.trapeziumLinks .trapeziumParent:nth-child(4n) a,
.trapeziumLinks .trapeziumParent:nth-child(4n + 1) a { 
  clip-path: polygon(5% 0%, 95% 0%, calc(99% + 4px) calc(100% + 6px), 0% calc(100% + 6px));
}

.trapeziumLinks .trapeziumParent:nth-child(1), 
.trapeziumLinks .trapeziumParent:nth-child(4n),
.trapeziumLinks .trapeziumParent:nth-child(4n + 1) { 
  filter: drop-shadow(7px 6px #0B463D);
}

#main .trapeziumLinks .trapeziumParent:focus, #main .trapeziumLinks .trapeziumParent:hover {
  filter: none;
}

#main .trapeziumLinks .trapeziumParent a:focus, .singleTrapezium a:focus {
  filter: drop-shadow(4px 6px #e86c00);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  outline: 1rem solid #e86c00  ;
}

/* make sure this css stays at the bottom of trapezium css so it's not flex like rest of the link */
.trapeziumParent:last-child:nth-child(odd), .trapeziumParent:last-child:nth-child(odd) a {
  display: block;
  margin: auto;
}

.sectionPage h1, .content-page h1 {
  font-size: var(--step-6);
  line-height: 45px;
}

/* section page */
.sectionPage h1, .content-page h1, 
.content-page h1 + h2 {
  background-color: #F8B7FB;
  clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 0% 100%);
  padding: 1rem;
  position: relative;
  z-index: 10;

  @media screen and (min-width: 1024px) {
    clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
    max-width: 60%;
    padding: 1rem 2rem;
  }
}

.content-page h1, 
.content-page h1 + h2 {
  @media screen and (min-width: 1024px) {
    margin-left: -3rem;
    padding: 1rem 2rem 1rem 3rem;
  }
}

.content-page h1 + h2 {
  clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 0% 100%);
  margin-top: 10px;

  @media screen and (min-width: 1024px) {
    clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
  }
}

 h2:first-of-type {
  margin-bottom: 2rem;
}

#main.sectionPage, #main.content-page, #main.standalone { 
  grid-column: 4 / 13;
  margin-top: 0;
  padding: 0 1rem 2rem;
  @media screen and ( min-width: 1024px) {
    margin-top: 25px;
  }
}

#main.standalone .pageNotFoundOuter {
  @media screen and (min-width: 1024px) {
    padding: 4rem 8rem;
  }
}

#main.content-page { 
  padding-left: 1rem;
  @media screen and ( min-width: 1024px) {
    padding-left: 4rem;
  }
}

.sectionPage .mainBanner {
  clip-path: polygon(3% 0%, 97% 0%, 100% 100%, 0% 100%);
  margin-top: -10px;
}

.sectionPage .mainBanner img {
  aspect-ratio: 16 / 9;
  height:auto;
  max-height: 350px;
  max-width: 100%;
  min-width: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.sectionPage .trapeziumLinks {
  margin-top: 2rem;
}

.singleTrapezium {
  filter: drop-shadow(4px 6px var(--barnardos-green));
}

.singleTrapezium:hover {
  filter:none;
}

.singleTrapezium a {
  background-color: #A4FEAE;
  clip-path: polygon(0% 5%, 100% 0%, calc(94% + 4px) calc(100% + 6px), 5% calc(100% + 6px));
  color: #0B463D;
  display: inline-block;
  font: 400 var(--step-0) barnardos-speak, sans-serif;
  padding: 1.2rem 1.5rem;
  text-align: center;
  text-decoration: none;
}

/* appendix */
.appendix h1 {
  background: none;
  clip-path: none;
  margin: 2rem 0;
}

/* Table styles */
table {
  border-collapse: collapse;
  display: block;
  margin-top: 2rem;
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;

  @media screen and (min-width: 1024px) {
    display: table;
    overflow-x: unset;
    white-space: normal;
  }
}

table th, table td {
  padding: 16px;
  text-align: left;
}

table th {
  background-color: #9DB5B1;
}

table th p {
  margin: auto 0;
}

table tbody tr:nth-child(even) {
  background-color: #F6F5EF;
}

table th:not(:last-child) {
  border-right: 1px solid #fff;
}

table tr td:not(:last-child) {
  border-right: 1px solid #9DB5B1;
}

table tbody tr:last-child {
  border-bottom:  1px solid #9DB5B1;
}

/* cookie banner */
._barnardos-cookie-overlay#overlay {
  z-index: 11;
}

._barnardos-cookie-overlay#overlay + ._barnardos-consent-banner {
  z-index: 12;
}

._barnardos-cookie-overlay#overlay + ._barnardos-consent-banner button {
  background-color: #0B463D;
  border: none;
  box-shadow: 3px 3px 0 #1d1d1d;
  font-family: barnardos-speak, sans-serif;
  font-size: var(--step-2);
  line-height: 1.2;
  outline: none;
}

._barnardos-cookie-overlay#overlay + ._barnardos-consent-banner button:hover {
  box-shadow: none;
}

._barnardos-cookie-overlay#overlay + ._barnardos-consent-banner h2 {
  color: #1d1d1d;
  font-family: barnardos-speak, sans-serif;
  font-size: max(2.4883rem,min(calc(2.4261rem + 0.311vw),2.7994rem));
  line-height: 1.2;
  margin-bottom: 0;
}

#main.home {
  grid-column: 5 / 13;
}

.homeBannerOuter {
  background-color: #a5feae;
  clip-path: polygon(0% 0%, 100% 7%, 86% 100%, 14% 97%);
}

.homeBannerOuter h1 {
  background-color: #a5feae;
  clip-path: polygon(0% 0%, 100% 23%, 97% 100%, 4% 101%);
  padding: 2rem 2.5rem 0.5rem 4rem;

  @media screen and (min-width: 1024px) {
    padding: 2.5rem 4rem 1.5rem 4rem;
  }
}

.homeBanner {
  clip-path: polygon(4% 0%, 100% 10%, 88% 100%, 10% 97%);
}

.homeBanner img {
  aspect-ratio: 16 / 9;
  height:auto;
  max-height: 300px;
  max-width: 100%;
  min-width: 100%;
  object-fit: cover;
  object-position: 50% 0;

  @media screen and (min-width: 1024px) {
    max-height: 350px;
  }
}

.home .contentUpdated {
  background-color: #0B463D;
  color: #fff;
  display: inline-block;
  font: 400 var(--step-2) barnardos-speak, sans-serif;
  margin-left: 40%;
  margin-top: -50px;
  padding: 1rem;
  position: relative;
  transform: rotate(3deg);
  width: 50%;

  @media screen and (min-width: 1024px) {
    margin-left: 55%;
    min-width: fit-content;
    max-width: 30%;
  }
}

.home .sections {
  margin-top: 2rem;
  text-align: center;;
}
.breadcrumbs ol {
  display: flex;
  margin-bottom: 5px;
  padding-left: 1rem;
}

.breadcrumbs ol li {
  align-items: center;
  background-color: var(--barnardos-green);
  color: #fff;
  display: flex;
  font: 400 var(--step-0) barnardos-speak, sans-serif;
  min-height: 60px;
  justify-content: center;
  line-height: 18px;
  margin-right: 5px;
  padding: 10px;
  text-align: center;
  width: 100px;
}

.breadcrumbs ol li a {
  align-items: center;
  color: #fff;
  display: flex;
  font: 400 var(--step-0) barnardos-speak, sans-serif;
  height: 100%;
  line-height: 18px;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.breadcrumbs ol li a:hover, .breadcrumbs ol li a:focus {
  text-decoration: underline;
}

.breadcrumbs ol li a span {
  width: 100%;
}

.breadcrumbs [aria-current="page"] {
  background-color: #F387F999;
  color: var(--barnardos-green)
}

@media screen and (min-width: 1024px) {
  .breadcrumbs {
    display:none;
  }
}


footer {
  background-color: var(--barnardos-green);
  color: var(--offwhite);
  margin-block-start: auto;
  padding: 32px 96px;
}

footer ul {
  padding: 0;
}

#footer a {
  color: var(--offwhite);
}

#footer a:hover {
  color: #bbfec2;
}

.footer-social {
  display: flex;
  flex-direction: column;
}

.follow-us {
  color: var(--offwhite);
  font-family: barnardos-speak, sans-serif;
  font-size: var(--step-2);
  font-weight: 300;
  letter-spacing: 0.58px;
}

.footer-social-icons, .footer-links, .footer-info, .footer-copyright {
  margin-top: 16px;
}

.footer-social-icons a {
  background-size: cover;
  display: inline-block;
  height: 3rem;
  overflow: hidden;
  text-indent: -100vw;
  width: 3rem;

  @media screen and (min-width: 48rem) {
    height: 2.5rem;
    margin-right: 16px;
    width: 2.5rem;
  }
}

.footer-social-icons a:hover {
  scale: 1.5;
  filter: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1029%) hue-rotate(65deg) brightness(101%) contrast(99%)
}

.footer-social-icons a:focus, .footer-social-icons a:focus-visible {
  scale: 1.5;
  outline: .2rem solid #e86c00;
}

.footer-instagram {
  background: url("/static/images/instagram.svg") no-repeat center;
}

.footer-facebook {
  background: url("/static/images/facebook.svg") no-repeat center;
}

.footer-twitter {
  background: url("/static/images/twitter-x.svg") no-repeat center;
}

.footer-youtube {
  background: url("/static/images/youtube.svg") no-repeat center;
}

.footer-tiktok {
  background: url("/static/images/tiktok.svg") no-repeat center;
}

.footer-linkedin {
  background: url("/static/images/linkedin.svg") no-repeat center;
}

a.footer-linkedin {
  background-size: 80%;
}

.footer-links, .footer-social-icons {
  list-style: none;
}

.footer-links li, .footer-social-icons li {
  display: inline-block;
  margin-right: 16px;
}

.footer-links li a {
  line-height: 2.8rem;
}

.footer-registered {
  max-width: 40rem;
}

#main.standalone:has(.pageNotFound) {
  padding: 0 0 2rem;
}

.pageNotFound {
  background:#FFAA7BCC;
  clip-path: polygon(0% 0%, 100% 8%, 100% 100%, 0% 92%);
  color: var(--barnardos-green);
  font-family: barnardos-speak, sans-serif;
  font-weight: 400;
  padding: 5rem 4rem;
  text-align: center;

  @media screen and (min-width: 1024px) {
    clip-path: polygon(0% 0%, 100% 8%, 92% 100%, 5% 92%);
    padding: 6rem 7rem;
  }
}

.pageNotFound h1 {
  font-size: 4rem;
  margin-bottom: 3rem;
  @media screen and (min-width:1024px) {
    font-size: 7rem;
  }
}

.notFoundLead {
  color: var(--barnardos-green);
  font-size: var(--step-3);
}

.pageNotFound + .singleTrapezium {    
  display: flex;
  margin-top: -2.5rem;
}

.pageNotFound + .singleTrapezium a {
  margin: auto;
}