/*
  Theme Name: Funders Together Child Theme - Collaboration Circle
  Template: funders-together
  Author: Effusion
  Author URI: https://www.effusion.co.uk/
*/
:root {
  /*	Colours - Generics: Use these values in styling
  ***********************************  */
  --color__pageBackground: white;
  /*	Sizes
  ***********************************  */
  /*	Assets
  ***********************************  */
  --colabcirc__asset__pullQuote--color--red: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 37.1 27.6'%3E%3Cpath d='M7.6 27.6c-2.2 0-4.1-.7-5.5-2.2Q0 23.15 0 19.4C0 15.1 1.5 11.2 4.4 8s6.5-5.9 10.7-8l1 1.7c-1.7 1.1-3.3 2.5-4.7 4.1C9.9 7.5 8.8 9.4 8 11.3l2.9 2.1c1.2.7 2.1 1.7 2.9 3 .7 1.3 1.1 2.4 1.1 3.6 0 2.2-.7 4-2 5.4-1.4 1.5-3.2 2.2-5.3 2.2m21 0c-2.2 0-4.1-.7-5.5-2.2q-2.1-2.25-2.1-6c0-4.4 1.5-8.2 4.4-11.4 3-3.2 6.5-5.9 10.7-8l1 1.7c-1.7 1.1-3.3 2.5-4.7 4.1-1.5 1.7-2.6 3.5-3.4 5.5l2.9 2.1c1.2.7 2.1 1.7 2.9 3 .7 1.3 1.1 2.4 1.1 3.6 0 2.2-.7 4-2 5.4-1.4 1.5-3.2 2.2-5.3 2.2' style='fill:%23e83c62'/%3E%3C/svg%3E");
}

/*	Webfonts
		- if the project requires selfhosted webfonts,
		place @font-face rules here
*********************************** */
/* Set Initial grid values
   'fixed' means it is a fixed numerical value
*********************************** */
/*	Size variables
***********************************  */
/*	Transition variables
***********************************  */
/*	Selector variables
***********************************  */
/* Media Queries
*********************************** */
/*
  I am working with REMs for the whole site, except for the media queries which is not viable
  These media queries are better suited to mobile first.
*/
/*  SVG
*********************************** */
/*  PNG
*********************************** */
/*  Display mixins
*********************************** */
/*  Show/hide mixins
*********************************** */
/*  Type hierarchy size mixins
    - Do not use typeHierarchySizes to set type styles on text elements!
    The purpose of this is to use relative units on non-text elements
    (without applying the entire type style, which is unnecessary)
*********************************** */
/*  'Paragraph style' Mixins
    - These are actual type styles, apply these to text elements
*********************************** */
.pane__header .funders-together-link {
  display: inline-block !important;
}
@media only screen and (max-width: 695px) {
  .pane__header .funders-together-link {
    display: none !important;
  }
}

@media only screen {
  .site-logo {
    width: clamp(13.125rem, 17.5vw, 15.75rem);
    aspect-ratio: 1/0.15936255;
    background-image: url("./img/logo/logo_collaboration_circle.png");
  }
}
@media only screen and (max-width: 372px) {
  .site-logo {
    width: 11.25rem;
  }
}
@media only screen and (max-width: 335px) {
  .site-logo {
    width: 10rem;
  }
}

.pane__banner.style__collaboration-circle-home {
  font-size: clamp(2.75rem, 5.5555555556vw, 5rem);
  margin-bottom: clamp(2.5rem, 8.4722222222vw, 7.625rem);
}
.pane__banner.style__collaboration-circle-home .pane-inner {
  line-height: 0;
}
.pane__banner.style__collaboration-circle-home .txt-box {
  line-height: 0;
  max-width: 55rem;
}
.pane__banner.style__collaboration-circle-home .img-box {
  padding-left: 0.72em;
}
.pane__banner.style__collaboration-circle-home .circles {
  display: flex;
  width: calc(100% + 300px);
  margin-top: 0.4em;
}
.pane__banner.style__collaboration-circle-home .circle {
  flex-shrink: 0;
  position: relative;
  width: clamp(11.6875rem, 24.6527777778vw, 22.1875rem);
  aspect-ratio: 1/1;
  background: conic-gradient(var(--color__magenta), var(--color__yellow) 0deg, var(--color__magenta) 270deg);
  border-radius: 50%;
  overflow: hidden;
}
.pane__banner.style__collaboration-circle-home .circle video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.pane__banner.style__collaboration-circle-home .circle:nth-child(4) {
  background: conic-gradient(var(--color__purple), var(--color__blue) 180deg, var(--color__purple) 90deg);
  border-radius: 50%;
  overflow: hidden;
}
.pane__banner.style__collaboration-circle-home .circle.spin {
  animation: circle-spin 30s linear infinite;
}
@keyframes circle-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media only screen and (max-width: 767px) {
  .pane__banner.style__collaboration-circle-home .circles {
    margin-top: 0.8em;
  }
}
@media only screen and (min-width: 768px) {
  .pane__banner.style__collaboration-circle-home .img-box {
    display: grid;
    grid-gap: clamp(1.625rem, 2.7586206897vw, 2.5rem);
    grid-template-columns: repeat(12, 1fr);
  }
  .pane__banner.style__collaboration-circle-home .img-box > * {
    grid-column: 3/13;
  }
}
.pane__banner.style__learning-hub-stage {
  font-size: clamp(2rem, 3.75vw, 3.375rem);
  margin-bottom: 2.5rem;
}
.pane__banner.style__learning-hub-stage h1 {
  font-family: var(--font__a);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0;
  font-size: clamp(2rem, 3.75vw, 3.375rem);
  margin-top: 0;
  margin-bottom: 0.5em;
}
.pane__banner.style__learning-hub-stage p {
  font-family: var(--font__b);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  font-size: clamp(1.125rem, 2.0833333333vw, 1.1875rem);
}
@media print {
  .pane__banner.style__learning-hub-stage p {
    font-size: 10pt;
  }
}
.pane__banner.style__learning-hub-stage .text {
  max-width: 30rem;
}
.pane__banner.style__learning-hub-stage .img-box {
  flex-shrink: 0;
  border-radius: var(--borderRadius--large);
  overflow: hidden;
}
.pane__banner.style__learning-hub-stage .pane-inner {
  background-color: var(--color__vanilla);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: clamp(0.625rem, 3.75vw, 3.75rem);
  padding-right: clamp(0.625rem, 3.75vw, 3.75rem);
  border-radius: var(--borderRadius--large);
  overflow: hidden;
}
@media only screen and (max-width: 839px) {
  .pane__banner.style__learning-hub-stage p {
    font-family: var(--font__a);
    font-weight: 400;
    line-height: 1.34;
    letter-spacing: 0;
    font-size: 1.0625rem;
  }
}
@media only screen and (max-width: 623px) {
  .pane__banner.style__learning-hub-stage .txt-box {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-bottom: 0.625rem;
  }
  .pane__banner.style__learning-hub-stage .img-box {
    aspect-ratio: 315/200;
    margin-top: 0.75em;
  }
}
@media only screen and (min-width: 624px) {
  .pane__banner.style__learning-hub-stage .pane-inner {
    display: flex;
    justify-content: space-between;
    gap: clamp(1.875rem, 5.5555555556vw, 5rem);
  }
  .pane__banner.style__learning-hub-stage .txt-box,
  .pane__banner.style__learning-hub-stage .img-box-area {
    width: 45.5%;
  }
  .pane__banner.style__learning-hub-stage .txt-box {
    margin-top: 1.11em;
  }
  .pane__banner.style__learning-hub-stage .img-box {
    position: relative;
    aspect-ratio: 553/506;
  }
  .pane__banner.style__learning-hub-stage .img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

.ft-quicklinks a {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding-top: 0.32em;
  padding-bottom: 0.32em;
  padding-left: 0.32em;
  padding-right: 1.2em;
  margin-bottom: 0.55em;
}
.ft-quicklinks a::before {
  flex-shrink: 0;
  content: " ";
  display: block;
  width: 2.278em;
  height: 2.278em;
}
.ft-quicklinks li:nth-child(6n+1) a::before {
  background: conic-gradient(var(--color__magenta), var(--color__yellow) 90deg, var(--color__magenta) 0deg);
  border-radius: 50%;
  overflow: hidden;
}
.ft-quicklinks li:nth-child(6n+2) a::before {
  background: conic-gradient(var(--color__purple), var(--color__orange) 180deg, var(--color__purple) 90deg);
  border-radius: 50%;
  overflow: hidden;
}
.ft-quicklinks li:nth-child(6n+3) a::before {
  background: conic-gradient(var(--color__yellow), var(--color__lightTeal) 0deg, var(--color__yellow) 270deg);
  border-radius: 50%;
  overflow: hidden;
}
.ft-quicklinks li:nth-child(6n+4) a::before {
  background: conic-gradient(var(--color__blue), var(--color__purple) 180deg, var(--color__blue) 90deg);
  border-radius: 50%;
  overflow: hidden;
}
.ft-quicklinks li:nth-child(6n+5) a::before {
  background: conic-gradient(var(--color__green), var(--color__lime) 270deg, var(--color__green) 180deg);
  border-radius: 50%;
  overflow: hidden;
}
.ft-quicklinks li:nth-child(6n+6) a::before {
  background: conic-gradient(var(--color__greyBg), var(--color__vanilla) 90deg, var(--color__greyBg) 0deg);
  border-radius: 50%;
  overflow: hidden;
}

.card.style__minimal.sub_style__large {
  background: linear-gradient(282deg, var(--color__vanilla) 0%, var(--color__stone) 59.83%, var(--color__greyBg) 87.96%);
  border: 0;
}
.card.style__stage {
  font-size: clamp(1.5625rem, 3.2894736842vw, 1.875rem);
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 0.625rem;
}
.card.style__stage h2 {
  min-height: 2.2em;
}
.card.style__stage .txt-box {
  flex-grow: 1;
  padding: 0.5em;
}
.card.style__stage,
.card.style__stage .img-box {
  border-radius: var(--borderRadius--medium);
  overflow: hidden;
}
@media only screen and (max-width: 479px) {
  .card.style__stage .img-box {
    aspect-ratio: 315/116;
  }
  .card.style__stage .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

.card-list.style__stage-cards li {
  display: flex;
  flex-direction: column;
}
.card-list.style__stage-cards li .card {
  flex-grow: 1;
}

.explainer-card-carousel::before {
  content: " ";
  display: block;
  width: 100%;
  height: 2.9em;
  background-image: url("./img/explainer-card-carousel-header-comp.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.stage-meta {
  font-family: var(--font__a);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  line-height: 1.4;
  font-size: clamp(0.875rem, 3.125vw, 0.9375rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(0.9375rem, 2.380952381vw, 3.125rem);
  margin-bottom: 1em;
}
.stage-meta::after {
  order: 2;
  flex-shrink: 1;
  content: " ";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color__borderDefault);
}
.stage-meta .stage-status {
  order: 1;
  flex-shrink: 0;
}
.stage-meta .stage-number {
  order: 3;
  flex-shrink: 0;
  color: var(--color__vanilla);
  background-color: var(--color__aubergine);
  padding-top: 0.36em;
  padding-bottom: 0.31em;
  padding-left: 1em;
  padding-right: 1em;
  border-radius: 2em;
}

.flexible-row.text-section .explainer-accordion {
  border-radius: var(--borderRadius--medium);
}
.flexible-row.pull-quote {
  font-size: clamp(1.5625rem, 3.2894736842vw, 1.875rem);
}
.flexible-row.pull-quote blockquote {
  padding-left: clamp(1.25rem, 3.125vw, 2.8125rem);
  padding-right: clamp(1.25rem, 3.125vw, 2.8125rem);
  padding-top: 1em;
  padding-bottom: 1.25em;
  border: 1px solid var(--color__borderDefault);
  border-radius: var(--borderRadius--medium);
}
.flexible-row.pull-quote blockquote::before {
  content: " ";
  display: block;
  width: 1.238em;
  height: 0.97em;
  background-image: var(--colabcirc__asset__pullQuote--color--red);
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: 0.45em;
}
.flexible-row.call-to-action {
  font-size: clamp(1.75rem, 4.3859649123vw, 2.5rem);
  position: relative;
}
.flexible-row.call-to-action .txt-box {
  max-width: none;
}
.flexible-row.call-to-action .text {
  font-size: clamp(1.125rem, 2.0833333333vw, 1.1875rem);
}
@media print {
  .flexible-row.call-to-action .text {
    font-size: 10pt;
  }
}
.flexible-row.call-to-action .text {
  min-height: 6em;
}
.flexible-row.call-to-action .link-area {
  font-size: clamp(1.125rem, 2.0833333333vw, 1.1875rem);
}
@media print {
  .flexible-row.call-to-action .link-area {
    font-size: 10pt;
  }
}
.flexible-row.call-to-action .link-area {
  margin-top: 1em;
}
.flexible-row.call-to-action {
  background: linear-gradient(282deg, var(--color__vanilla) 0%, var(--color__stone) 59.83%, var(--color__greyBg) 87.96%);
}
.flexible-row.call-to-action::after {
  content: " ";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 336/198;
  background-image: url("./img/collaboration-circle-logomark_variation2_1600_comp.png");
  background-repeat: no-repeat;
  background-size: 175% auto;
  background-position: 15% 0%;
}
@media only screen and (max-width: 695px) {
  .flexible-row.call-to-action .link-area .img-box {
    display: none;
  }
}
@media only screen and (max-width: 551px) {
  .flexible-row.call-to-action {
    padding-bottom: 76%;
  }
}
@media only screen and (min-width: 552px) {
  .flexible-row.call-to-action::after {
    background-position: 0% 0%;
    background-size: 280% auto;
    width: 35%;
    aspect-ratio: 1/1;
  }
  .flexible-row.call-to-action .txt-box {
    width: 62%;
  }
}
@media only screen and (min-width: 696px) {
  .flexible-row.call-to-action::after {
    aspect-ratio: 3/2;
    background-size: 184% auto;
  }
}
@media only screen and (min-width: 768px) {
  .flexible-row.call-to-action {
    min-height: 9em;
  }
}
@media only screen and (min-width: 1200px) {
  .flexible-row.call-to-action::after {
    background-size: 145% auto;
    width: 47.5%;
    aspect-ratio: 636/287;
  }
  .flexible-row.call-to-action .txt-box {
    width: 44%;
  }
}

@media only screen {
  .pane__footer .site-logo {
    width: 6.3125rem;
    aspect-ratio: 1/0.39800995;
    background-image: url("./img/logo/logomark_collaboration_circle.png");
  }
}

.page-template-home-page.wp-child-theme-funders-together-child-collaboration-circle .flexible-row.call-to-action {
  font-size: clamp(2rem, 3.75vw, 3.375rem);
  background: none;
  padding-top: 1.25em;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  border-top: 1px solid var(--color__borderDefault);
  border-radius: 0;
  overflow: visible;
}
.page-template-home-page.wp-child-theme-funders-together-child-collaboration-circle .flexible-row.call-to-action .text {
  min-height: 0;
}
.page-template-home-page.wp-child-theme-funders-together-child-collaboration-circle .flexible-row.call-to-action h2 {
  font-family: var(--font__a);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0;
  font-size: clamp(2rem, 3.75vw, 3.375rem);
  margin-top: 0;
  margin-bottom: 0.5em;
}
.page-template-home-page.wp-child-theme-funders-together-child-collaboration-circle .flexible-row.call-to-action .link-area {
  margin-top: 1.5em;
}
.page-template-home-page.wp-child-theme-funders-together-child-collaboration-circle .flexible-row.call-to-action::after {
  position: initial;
  right: initial;
  bottom: initial;
  aspect-ratio: 1/0.40625;
  background-size: contain;
}
@media only screen and (max-width: 767px) {
  .page-template-home-page.wp-child-theme-funders-together-child-collaboration-circle .flexible-row.call-to-action {
    padding-bottom: 0.5em;
  }
  .page-template-home-page.wp-child-theme-funders-together-child-collaboration-circle .flexible-row.call-to-action::after {
    width: calc(100% + 80px);
    margin-top: 1.75em;
  }
}
@media only screen and (min-width: 768px) {
  .page-template-home-page.wp-child-theme-funders-together-child-collaboration-circle .flexible-row.call-to-action {
    display: grid;
    grid-gap: clamp(1.625rem, 2.7586206897vw, 2.5rem);
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
  }
  .page-template-home-page.wp-child-theme-funders-together-child-collaboration-circle .flexible-row.call-to-action::after {
    grid-column: 7/13;
    width: calc(100% + 215px);
  }
  .page-template-home-page.wp-child-theme-funders-together-child-collaboration-circle .flexible-row.call-to-action .txt-box {
    grid-column: 1/6;
    width: auto;
  }
}

.page-template-learning-hub-landing,
.section__learning-hub,
.single-case_study_cpt {
  background-color: var(--color__eggShell);
}

.learning-hub-stages-list-area > h2 {
  font-family: var(--font__a);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  font-size: clamp(1.75rem, 4.3859649123vw, 2.5rem);
  margin-top: 0;
  margin-bottom: 0.5em;
  margin-bottom: 1.3em;
}
.learning-hub-stages-list-area > h3 {
  font-family: var(--font__a);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  font-size: clamp(1.3125rem, 2.4122807018vw, 1.375rem);
  margin-top: 0;
  margin-bottom: 0.35em;
  margin-top: 1.8em;
  margin-bottom: 1.1em;
}

.learning-hub-stages-marquee-area > h2 {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/*# sourceMappingURL=style.css.map */