.lfr-layout-structure-item-container {padding: 0;} .lfr-layout-structure-item-row {overflow: hidden;} .portlet-borderless .portlet-content {padding: 0;}.lfr-layout-structure-item-8fddaa80-c02d-811c-8eef-8affd0851cee {
min-height: 20px !important;
padding-bottom: var(--spacer-4,1.5rem) !important;
padding-top: var(--spacer-4,1.5rem) !important;
width: fit-content !important;
}
.lfr-layout-structure-item-8fddaa80-c02d-811c-8eef-8affd0851cee {
position: relative;
z-index: 2;
}.lfr-layout-structure-item-17766a4d-cfe8-abc6-146c-3eca800e4395 {
overflow: visible !important;
text-align: center !important;
}
.lfr-layout-structure-item-17766a4d-cfe8-abc6-146c-3eca800e4395 img{
width: auto;
height: 55px;
}.lfr-layout-structure-item-3f7edae6-5cf5-4c42-9103-b46dfedcb019 {
margin-left: auto !important;
margin-right: auto !important;
max-height: 50vh !important;
min-width: 1200px !important;
width: auto !important;
}
.lfr-layout-structure-item-3f7edae6-5cf5-4c42-9103-b46dfedcb019 {
position: absolute;
bottom: 0;
margin: auto;
z-index: 1;
}.lfr-layout-structure-item-bd142d3b-82a0-2116-2c40-6b6cb99a45bf {
text-align: center !important;
}
.lfr-layout-structure-item-bd142d3b-82a0-2116-2c40-6b6cb99a45bf img{
width: auto;
height: 65px;
}.lfr-layout-structure-item-dd9b83c9-8174-b05e-5a93-335acff3e0d9 {
color: #17244A !important;
}
.lfr-layout-structure-item-dd9b83c9-8174-b05e-5a93-335acff3e0d9 .content-para h2 {
color: #17244A!important;
}.lfr-layout-structure-item-082f93e8-b76f-1edc-81aa-4a0b2d56f5aa h3 {
color: var(--vision-green);
}.lfr-layout-structure-item-b984c3fb-d897-5756-9a49-a7086f88f60d {
overflow: visible !important;
text-align: center !important;
}
.lfr-layout-structure-item-b984c3fb-d897-5756-9a49-a7086f88f60d img{
width: auto;
height: 70px;
}.lfr-layout-structure-item-54f08a6b-929b-97b5-16fc-44376e94a4d4 {
text-align: center !important;
}
.lfr-layout-structure-item-54f08a6b-929b-97b5-16fc-44376e94a4d4 img{
width: auto;
height: 40px;
}.lfr-layout-structure-item-36b343c8-27c9-bdf2-f6d7-e0cf67f42702 {
overflow: visible !important;
text-align: center !important;
}
.lfr-layout-structure-item-36b343c8-27c9-bdf2-f6d7-e0cf67f42702 img{
width: auto;
height: 45px;
}.lfr-layout-structure-item-4fa66270-091c-5be6-8ec2-a31333fb54e1 {
margin-top: var(--spacer-6,4.5rem) !important;
padding-bottom: var(--spacer-5,3rem) !important;
padding-left: var(--spacer-5,3rem) !important;
padding-right: var(--spacer-5,3rem) !important;
}
.lfr-layout-structure-item-4fa66270-091c-5be6-8ec2-a31333fb54e1 {
justify-content: space-evenly;
gap: 60px
}.lfr-layout-structure-item-19837fef-1ad9-c5d3-b6ca-bb8bdfde0d5c {
color: #17244A !important;
}
.lfr-layout-structure-item-d0fe7d9b-8cab-9d6b-ea75-5b803284f141 {
overflow: visible !important;
text-align: center !important;
}
.lfr-layout-structure-item-d0fe7d9b-8cab-9d6b-ea75-5b803284f141 img{
max-width: 300px;
height: auto;
width: 70vw;
position: static;
}.lfr-layout-structure-item-b63e8e66-7f0f-947c-f999-768e40b5ed0c {
margin-left: auto !important;
margin-right: auto !important;
max-width: 1300px !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.lfr-layout-structure-item-9ec6edaf-3694-563e-e0d5-76c15588376f {
overflow: visible !important;
text-align: center !important;
}
.lfr-layout-structure-item-9ec6edaf-3694-563e-e0d5-76c15588376f img{
width: auto;
height: 50px;
}.lfr-layout-structure-item-461ce606-ed0a-ef35-5ad7-6039b0c16f06 {
margin-bottom: var(--spacer-5,3rem) !important;
margin-right: auto !important;
overflow: hidden !important;
width: 100px !important;
}
.lfr-layout-structure-item-e2c0d2ec-bda9-a29b-e515-2d3d090b159e {
margin-left: auto !important;
margin-right: auto !important;
max-width: 400px !important;
padding-left: var(--spacer-4,1.5rem) !important;
padding-right: var(--spacer-4,1.5rem) !important;
width: 100% !important;
}
.lfr-layout-structure-item-2d58a370-5dd8-b301-0774-49b4ae51b26f h3 {
color: var(--vision-pink);
}.lfr-layout-structure-item-8ddb7050-be00-36d6-4ebb-ec23a18dd558 h3 {
color: var(--vision-teal);
}.lfr-layout-structure-item-f1d30d63-e67e-1553-1b1a-808659c6e34c {
text-align: center !important;
}
.lfr-layout-structure-item-f1d30d63-e67e-1553-1b1a-808659c6e34c img{
width: auto;
height: 90px;
padding-bottom: 25px;
}.lfr-layout-structure-item-fec7cf41-9134-119b-650e-d2be46bf5b35 {
color: #17244A !important;
}
.lfr-layout-structure-item-5ed9fd52-7f13-eb9a-164e-f5e6a7d6874b {
margin-left: auto !important;
margin-right: auto !important;
max-width: 400px !important;
padding-left: var(--spacer-4,1.5rem) !important;
padding-right: var(--spacer-4,1.5rem) !important;
width: 100% !important;
}
.lfr-layout-structure-item-7e8ecf3b-565a-3b27-eca6-6290dbde62d8 {
color: #17244A !important;
}
.lfr-layout-structure-item-8e6d1b82-287a-792d-7703-208c7f46faad {
height: 70px !important;
overflow: visible !important;
text-align: center !important;
}
.lfr-layout-structure-item-8e6d1b82-287a-792d-7703-208c7f46faad img{
width: auto;
height: 60px;
padding-top: 13px;
padding-bottom: 4px;
}
.lfr-layout-structure-item-feb9fb54-7705-921b-5f8c-a3b64360c715 {
margin-left: auto !important;
margin-right: auto !important;
max-width: 400px !important;
padding-left: var(--spacer-4,1.5rem) !important;
padding-right: var(--spacer-4,1.5rem) !important;
width: 100% !important;
}
.lfr-layout-structure-item-ab9b387c-fba4-dd79-cd90-3d892cd6b060 {
font-family: var(--font-family-sans-serif) !important;
max-width: 1300px !important;
padding-left: 20px !important;
padding-right: 20px !important;
text-align: center !important;
}
.lfr-layout-structure-item-ab9b387c-fba4-dd79-cd90-3d892cd6b060 {
position: relative;
z-index: 2;
}.lfr-layout-structure-item-8bda9ca4-5b53-8dc5-2a7d-4011ebe28b0a {

}


/* Custom */

/* --- Color styles */
:root {
  --vision-navy: #17244A;
  --vision-pink: #B745B8;
  --vision-green: #249142;
  --vision-teal: #2AB2C0;
  --vision-pink-light: #F8ECF8;
  --vision-green-light: #E9F4EC;
  --vision-teal-light: #DFF3F6;
}

/* --- Responsive Tabs */

/* Space between tabs */
.responsive-tabs {
  gap: 0 8px;
}

/* General text styling */
.responsive-tabs .content-para p {
  color: var(--vision-navy)!important;
}

/* --- END Responsive Tabs
/
/
/
/
/* --- Tab Header */

/* Tab header base style */
.tab-header {
  width: calc(33.33% - 6px) !important;
  align-content: start;
  align-items: center;
  border: none!important;
  border-bottom: 8px solid white!important;
  box-sizing: border-box;
  cursor: pointer;
  justify-content: space-between;
  position: relative;
  text-align: center;
  transition: border 300ms ease;
}

/* Tab header half background */
.tab-header:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 30%;
	bottom: 0;
	z-index: 0;
	border-radius: 4px 4px 0 0;
  transition: all 300ms cubic-bezier(.6,.2,.62,1);
}
  /* hover effects */
  .tab-header:hover:before {
    height: 50%;
  }
  /* colours */
  .tab-header.horizon-1:before {background: var(--vision-pink-light)}
  .tab-header.horizon-2:before {background: var(--vision-green-light);}
  .tab-header.horizon-3:before {background: var(--vision-teal-light);}

/* Border color for active tab */
.tab-header.horizon-1.active {border-color: var(--vision-pink-light)!important;}
.tab-header.horizon-2.active {border-color: var(--vision-green-light)!important;}
.tab-header.horizon-3.active {border-color: var(--vision-teal-light)!important;}

/* Tab header button "Horizon n" */
.tab-header .tab-header-button {
  background: #ffffff;
  border-radius: 20px;
  width: fit-content!important;
  padding: 3px 16px 5px;
  margin: 0 auto 1em;
  border: 1px solid black;
  transition: all 300ms ease;
}
  /* button size */
  .tab-header svg.button-text {
    height: 0.8rem;
  }

/* Horizon 1*/
    /* Set button color for Horizon */
    .tab-header.horizon-1 .tab-header-button {border-color:var(--vision-pink);}
    .tab-header.horizon-1 svg.button-text {fill: var(--vision-pink);}
    /* Change color on background */
    .tab-header.horizon-1.active .tab-header-button {background: var(--vision-pink)!important;}

/* Horizon 2*/
    /* Set button color for Horizon */
    .tab-header.horizon-2 .tab-header-button {border-color:var(--vision-green);}
    .tab-header.horizon-2 svg.button-text {fill: var(--vision-green)!important;}
    /* Change color on background */
    .tab-header.horizon-2.active .tab-header-button {background: var(--vision-green)!important;}

/* Horizon 3*/
    /* Set button color for Horizon */
    .tab-header.horizon-3 .tab-header-button {border-color:var(--vision-teal);}
    .tab-header.horizon-3 svg.button-text {fill: var(--vision-teal)!important;}
    /* Change color on background */
    .tab-header.horizon-3.active .tab-header-button {background: var(--vision-teal)!important;}

/* Change text to white on active */
.tab-header.active svg.button-text {
  fill: #ffffff!important;
}

/* Force image to sit above background colour */
.tab-header-img {
  position: relative;
  z-index: 10;
}

/* --- END Tab Header
/
/
/
/
/* --- Tab Content */

/* Base styling */
.tab-content {
  display: none;
  width: 100%;
	padding: 1.5em 3em;
  opacity: 0
}

/* Make visible */
.tab-content.active {
  display: block;
}

/* Removing large margin from top and bottom of element */
.tab-content .content-para {
  margin: 0;
}

/* Content background colour */
.tab-content.horizon-1 {background: var(--vision-pink-light);}
.tab-content.horizon-2 {background: var(--vision-green-light);}
.tab-content.horizon-3 {background: var(--vision-teal-light);}

/* Header colours */
.horizon-1 .content-para h3 {color: var(--vision-pink);}
.horizon-2 .content-para h3 {color: var(--vision-green);}
.horizon-3 .content-para h3 {color: var(--vision-teal);}

/* Tab content tags */

  /* Tag container */
  .tab-content .content-para ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    gap: 10px;
    margin-top: 2.5rem;
  }

  /* Individual tag styling */
  .tab-content .content-para li {
    border: 2px solid;
    border-radius: 50px;
    color: var(--vision-navy)!important;
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    padding: 0 15px;
    text-transform: uppercase;
  }

  /* Tag colours */
  .tab-content.horizon-1 .content-para li {border-color: var(--vision-pink)}
  .tab-content.horizon-2 .content-para li {border-color: var(--vision-green)}
  .tab-content.horizon-3 .content-para li {border-color: var(--vision-teal)}


/* --- END Tab Content
/
/
/
/
/* --- Responsive */

  
/* Desktop */
@media (min-width: 768px) {
  .tab-content {
    order: 99;
  }
}  

/* Accordion style on small screens */
@media (max-width: 767px) {

  .tab-header {
    border-width: 0!important;
    margin-top: 2em;
  }
  
  .tab-header, .tab-header-button, .tab-header-text {
    width: 100%!important;
  }
  
  .tab-header-text .component-html {
    max-width: 300px;
    margin: auto;
  }
  
  .tab-header-img .component-image {
    width: 80vw!important;
    max-width: 300px!important;
    margin-bottom: 50px!important;
  }

  .tab-header-img .component-image {
    margin-bottom: 60px;
  }

  .tab-header:before {
    height: 36%!important;
  }
  
  .tab-header:after {
    background: white;
    border: 1px solid;
    border-radius: 20px;
    bottom: 20px;
    color: white;
    content: 'Learn more +';
    position: absolute; 
    padding: 2px 15px 2px;
    transition: all 250ms ease;
  }
  
  .tab-header.active:after {
    content: 'See less -';
  }
  
  .tab-header.horizon-1:after {
    background: var(--vision-pink);
    border-color: var(--vision-pink);
  }
  .tab-header.horizon-2:after {
    background: var(--vision-green);
    border-color: var(--vision-green);
  }
  .tab-header.horizon-3:after {
    background: var(--vision-teal);
    border-color: var(--vision-teal);
  }
  
  .tab-content {
    padding: 0 1.5em 1em!Important;
  }
  
  .tab-content li {
    font-size: 0.9em!important;
  }
}  

/* END Responsive
/
/
/
/
/* edit mode*/
  .has-control-menu.has-edit-mode-menu.controls-visible .tab-content {
  	display: block;
    opacity: 1;
  }

.lfr-layout-structure-item-70414beb-231a-d1d0-3e2f-fdc8c7b10dcf {
margin-bottom: 0px !important;
color: #17244A !important;
}
.lfr-layout-structure-item-8481be05-e9bd-ded2-28ca-a873fc7d8ac3 {
margin-bottom: var(--spacer-3,1rem) !important;
margin-top: var(--spacer-3,1rem) !important;
max-width: 500px !important;
padding-left: var(--spacer-4,1.5rem) !important;
padding-right: var(--spacer-4,1.5rem) !important;
}
.lfr-layout-structure-item-52c3267f-568d-883a-c755-9036d873c70b {
margin-bottom: var(--spacer-3,1rem) !important;
margin-top: var(--spacer-3,1rem) !important;
max-width: 500px !important;
padding-left: var(--spacer-4,1.5rem) !important;
padding-right: var(--spacer-4,1.5rem) !important;
}
.lfr-layout-structure-item-c93eb6db-651f-d3ce-8ab4-e1c687d00b27 {
background-color: #17244A !important;
border-style: solid; border-width: 0 !important; border-width: 0px !important;
min-height: 100vh !important;
overflow: hidden !important;
padding-top: var(--spacer-8,7.5rem) !important;
text-align: center !important;
width: 100vw !important;
}
.lfr-layout-structure-item-c93eb6db-651f-d3ce-8ab4-e1c687d00b27, .top-banner {
position: relative!important;
background: #17244A;
min-height: 100vh!important;
}.lfr-layout-structure-item-53183fd8-941b-99aa-cfe1-fdda3d9f95cf {
color: #17244A !important;
}
.lfr-layout-structure-item-c91dec6f-557c-c041-e813-d645f567cbe4 {
background-color: var(--gray-200) !important;
margin-bottom: 5em !important;
margin-top: var(--spacer-5,3rem) !important;
padding-bottom: var(--spacer-2,0.5rem) !important;
padding-left: var(--spacer-5,3rem) !important;
padding-right: var(--spacer-5,3rem) !important;
padding-top: var(--spacer-1,0.25rem) !important;
text-align: center !important;
}
.lfr-layout-structure-item-782c6bb4-63bb-63cb-ff42-95c0c0fda903 {
display: none !important;
}
.lfr-layout-structure-item-aca0f3cf-d584-4e44-6bd6-7a9feeaffd6f {
color: var(--gray-500) !important;
}
.page-content .lfr-layout-structure-item-aca0f3cf-d584-4e44-6bd6-7a9feeaffd6f .content-para {
color: #ffffff!important;
margin: 10px!Important;
}.lfr-layout-structure-item-049dde4e-b320-2752-f223-bc9577c49761 {
margin-bottom: var(--spacer-4,1.5rem) !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 500px !important;
}
.lfr-layout-structure-item-049dde4e-b320-2752-f223-bc9577c49761 img {
width: 70%!important;
max-width: 500px!important;
}.lfr-layout-structure-item-8eb296d8-87b3-45d3-72ee-aba661dba884 {
background-color: #BCDFF3 !important;
border-radius: 4px !important;
max-width: 1300px !important;
padding-left: var(--spacer-4,1.5rem) !important;
padding-right: var(--spacer-4,1.5rem) !important;
padding-top: var(--spacer-5,3rem) !important;
}
.lfr-layout-structure-item-1e562d52-1627-8810-67c2-06c95ccc32a5 {

}


:root {
  --vision-blue: #00a7d5;
}
.timeline-container {
  gap: 0 130px;
  width: 100%;
  position: relative;
  padding-left: 40px;
}
.timeline-container:before {
  content: "";
  width: 100%;
  height: 2px;
border: none!important;
  background-image: linear-gradient(
    90deg,
    rgba(0, 167, 213, 0) 0%,
    rgba(0, 167, 213, 1) 5%,
    rgba(0, 167, 213, 1) 94%,
    rgba(0, 167, 213, 0) 100%
  );
  position: absolute;
  top: 50%;
  left: 0;
}

.milestone {
  width: 150px;
  height: 150px;
  padding-left: 10px;
  display: flex;
  border-left: 2px solid var(--vision-blue);
  position: relative;
}

.milestone:nth-child(1) {
  order: 1;
}
.milestone:nth-child(2) {
  order: 4;
}
.milestone:nth-child(3) {
  order: 2;
}
.milestone:nth-child(4) {
  order: 5;
}
.milestone:nth-child(5) {
  order: 3;
}

.milestone:nth-child(odd) {
  align-items: start;
  padding-bottom: 25px;
}

.milestone:nth-child(odd):before,
.milestone:nth-child(even):before {
  content: "";
  background: var(--vision-blue);
  height: 16px;
  width: 16px;
  border-radius: 10px;
  position: absolute;
  border: 2px solid white;
}

.milestone:nth-child(odd):before {
  bottom: -8px;
  left: -8px;
}

.milestone:nth-child(even):before {
  top: -8px;
  left: -8px;
}

.milestone:nth-child(even) {
  align-items: flex-end;
  padding-top: 35px;
}

.page-content .timeline-container .content-para {
  margin: 0 !important;
}
.page-content .timeline-container p {
  margin: 0 0 4px !important;
  line-height: 1.25em;
  color: #17244a !important;
  letter-spacing: -0.5px;
  font-size: 15px;
}

.page-content .timeline-container span.small {
  line-height: 1em;
  padding: 3px 5px !important;
  text-transform: uppercase;
  background: var(--vision-blue);
  color: white;
  font-weight: 500;
  font-size: 13px;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  display: inline-flex;
  letter-spacing: 0;
}

@media (max-width: 1024px) {
  .timeline-container {
    gap: 0 15%;
  }

  .milestone {
    width: 20%;
    max-width: 150px;
  }
}

@media (max-width: 767px) {
  .timeline-container.flex-row.flex-wrap.d-flex.justify-content-center {
    flex-direction: column !important;
    width: 100% !important;
    min-width: 100% !important;
    align-items: center;
    align-content: center;
padding-left: 0!Important;
  }

  .milestone {
    width: 100%;
    max-width: 180px;
    border-left: none;
    border-top: 2px solid var(--vision-blue);
    padding: 10px 0;
  }

  .timeline-container:before {
    content: "";
    width: 2px;
    height: 100%;
    border: none!important;
    background-image: linear-gradient(
      0deg,
      rgba(0, 167, 213, 0) 0%,
      rgba(0, 167, 213, 1) 5%,
      rgba(0, 167, 213, 1) 94%,
      rgba(0, 167, 213, 0) 100%
    );
    position: absolute;
    top: 0;
    left: auto;
  }

  .milestone:nth-child(1) {
    order: 1;
  }
  .milestone:nth-child(2) {
    order: 2;
  }
  .milestone:nth-child(3) {
    order: 3;
  }
  .milestone:nth-child(4) {
    order: 4;
  }
  .milestone:nth-child(5) {
    order: 5;
  }

  .milestone:nth-child(odd):before,
  .milestone:nth-child(even):before {
    content: "";
    background: var(--vision-blue);
    height: 16px;
    width: 16px;
    border-radius: 10px;
    position: absolute;
    border: 2px solid white;
  }

  .milestone:nth-child(odd):before {
    top: -8px;
    right: -8px;
    left: auto;
  }

  .milestone:nth-child(even):before {
    top: -8px;
    left: -8px;
  }

  .milestone:nth-child(odd) {
    transform: translateX(-50%);
    padding-right: 50px;
  }

  .milestone:nth-child(even) {
    align-items: flex-start !important;
    transform: translateX(50%);
    padding-left: 50px;
  }

  .milestone:first-child {
    margin-top: 80px;
  }
}
.lfr-layout-structure-item-dd4415c7-9a2e-76d7-83e6-e255c32d384a {
overflow: visible !important;
text-align: center !important;
}
.lfr-layout-structure-item-dd4415c7-9a2e-76d7-83e6-e255c32d384a img{
width: auto;
height: 30px;
}.lfr-layout-structure-item-8d872219-3c23-4374-db12-e4e0e5a58c1b {
margin-bottom: var(--spacer-3,1rem) !important;
margin-top: var(--spacer-3,1rem) !important;
max-width: 72% !important;
padding-left: var(--spacer-4,1.5rem) !important;
padding-right: var(--spacer-4,1.5rem) !important;
}
.lfr-layout-structure-item-fe3bdf6b-93b7-1ce1-60f7-e88bb60cdae4 {
margin-top: 0px !important;
}
@media screen and (max-width: 991px) {.lfr-layout-structure-item-17766a4d-cfe8-abc6-146c-3eca800e4395 img{
width: auto;
height: 45px;
}.lfr-layout-structure-item-bd142d3b-82a0-2116-2c40-6b6cb99a45bf img{
width: auto;
height: 52px;
}.lfr-layout-structure-item-b984c3fb-d897-5756-9a49-a7086f88f60d img{
width: auto;
height: 58px;
}.lfr-layout-structure-item-54f08a6b-929b-97b5-16fc-44376e94a4d4 img{
width: auto;
height: 33px;
}.lfr-layout-structure-item-36b343c8-27c9-bdf2-f6d7-e0cf67f42702 img{
width: auto;
height: 35px;
}.lfr-layout-structure-item-4fa66270-091c-5be6-8ec2-a31333fb54e1 {
padding-left: var(--spacer-4,1.5rem) !important;
padding-right: var(--spacer-4,1.5rem) !important;
}
.lfr-layout-structure-item-d0fe7d9b-8cab-9d6b-ea75-5b803284f141 {
margin-top: var(--spacer-3,1rem) !important;
}
.lfr-layout-structure-item-d0fe7d9b-8cab-9d6b-ea75-5b803284f141 img{
max-width: 275px;
height: auto;
width: 70vw;
position: static;
}.lfr-layout-structure-item-9ec6edaf-3694-563e-e0d5-76c15588376f img{
width: auto;
height: 43px;
}.lfr-layout-structure-item-f1d30d63-e67e-1553-1b1a-808659c6e34c img{
width: auto;
height: 65px;
padding-bottom: 12px;
}.lfr-layout-structure-item-8e6d1b82-287a-792d-7703-208c7f46faad img{
width: auto;
height: 50px;
padding-top: 15px;
padding-bottom: 0px;
}
.lfr-layout-structure-item-ab9b387c-fba4-dd79-cd90-3d892cd6b060 {
padding-left: var(--spacer-0,0rem) !important;
padding-right: var(--spacer-0,0rem) !important;
}
.lfr-layout-structure-item-c93eb6db-651f-d3ce-8ab4-e1c687d00b27 {
padding-left: var(--spacer-4,1.5rem) !important;
padding-right: var(--spacer-4,1.5rem) !important;
}
.lfr-layout-structure-item-dd4415c7-9a2e-76d7-83e6-e255c32d384a img{
width: auto;
height: 23px;
}}@media screen and (max-width: 767px) {.lfr-layout-structure-item-17766a4d-cfe8-abc6-146c-3eca800e4395 img{
width: auto;
height: 30px;
}.lfr-layout-structure-item-bd142d3b-82a0-2116-2c40-6b6cb99a45bf img{
width: auto;
height: 38px;
}.lfr-layout-structure-item-b984c3fb-d897-5756-9a49-a7086f88f60d img{
width: auto;
height: 43px;
}.lfr-layout-structure-item-54f08a6b-929b-97b5-16fc-44376e94a4d4 img{
width: auto;
height: 28px;
}.lfr-layout-structure-item-36b343c8-27c9-bdf2-f6d7-e0cf67f42702 img{
width: auto;
height: 27px;
}.lfr-layout-structure-item-4fa66270-091c-5be6-8ec2-a31333fb54e1 {
margin-top: var(--spacer-4,1.5rem) !important;
padding-left: var(--spacer-0,0rem) !important;
padding-right: var(--spacer-0,0rem) !important;
}
.lfr-layout-structure-item-4fa66270-091c-5be6-8ec2-a31333fb54e1 {
justify-content: space-evenly;
gap: 30px
}.lfr-layout-structure-item-d0fe7d9b-8cab-9d6b-ea75-5b803284f141 img{
max-width: 175px;
height: auto;
width: 70vw;
position: static;
}.lfr-layout-structure-item-9ec6edaf-3694-563e-e0d5-76c15588376f img{
width: auto;
height: 30px;
}.lfr-layout-structure-item-f1d30d63-e67e-1553-1b1a-808659c6e34c img{
width: auto;
height: 50px;
padding-bottom: 6px!Important;
}.lfr-layout-structure-item-8e6d1b82-287a-792d-7703-208c7f46faad img{
width: auto;
height: 47px;
padding-top: 23px;
}
.lfr-layout-structure-item-ab9b387c-fba4-dd79-cd90-3d892cd6b060 {
padding-left: var(--spacer-0,0rem) !important;
padding-right: var(--spacer-0,0rem) !important;
}
.lfr-layout-structure-item-8bda9ca4-5b53-8dc5-2a7d-4011ebe28b0a {

}


/* Custom */

/* --- Color styles */
:root {
  --vision-navy: #17244A;
  --vision-pink: #B745B8;
  --vision-green: #249142;
  --vision-teal: #2AB2C0;
  --vision-pink-light: #F8ECF8;
  --vision-green-light: #E9F4EC;
  --vision-teal-light: #DFF3F6;
}

/* --- Responsive Tabs */

/* Space between tabs */
.responsive-tabs {
  gap: 0 8px;
}

/* General text styling */
.responsive-tabs .content-para p {
  color: var(--vision-navy)!important;
}

/* --- END Responsive Tabs
/
/
/
/
/* --- Tab Header */

/* Tab header base style */
.tab-header {
  width: calc(33.33% - 6px) !important;
  align-content: start;
  align-items: center;
  border: none!important;
  border-bottom: 8px solid white!important;
  box-sizing: border-box;
  cursor: pointer;
  justify-content: space-between;
  position: relative;
  text-align: center;
  transition: border 300ms ease;
}

/* Tab header half background */
.tab-header:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 30%;
	bottom: 0;
	z-index: 0;
	border-radius: 4px 4px 0 0;
  transition: all 300ms cubic-bezier(.6,.2,.62,1);
}
  /* hover effects */
  .tab-header:hover:before {
    height: 50%;
  }
  /* colours */
  .tab-header.horizon-1:before {background: var(--vision-pink-light)}
  .tab-header.horizon-2:before {background: var(--vision-green-light);}
  .tab-header.horizon-3:before {background: var(--vision-teal-light);}

/* Border color for active tab */
.tab-header.horizon-1.active {border-color: var(--vision-pink-light)!important;}
.tab-header.horizon-2.active {border-color: var(--vision-green-light)!important;}
.tab-header.horizon-3.active {border-color: var(--vision-teal-light)!important;}

/* Tab header button "Horizon n" */
.tab-header .tab-header-button {
  background: #ffffff;
  border-radius: 20px;
  width: fit-content!important;
  padding: 3px 16px 5px;
  margin: 0 auto 1em;
  border: 1px solid black;
  transition: all 300ms ease;
}
  /* button size */
  .tab-header svg.button-text {
    height: 0.8rem;
  }

/* Horizon 1*/
    /* Set button color for Horizon */
    .tab-header.horizon-1 .tab-header-button {border-color:var(--vision-pink);}
    .tab-header.horizon-1 svg.button-text {fill: var(--vision-pink);}
    /* Change color on background */
    .tab-header.horizon-1.active .tab-header-button {background: var(--vision-pink)!important;}

/* Horizon 2*/
    /* Set button color for Horizon */
    .tab-header.horizon-2 .tab-header-button {border-color:var(--vision-green);}
    .tab-header.horizon-2 svg.button-text {fill: var(--vision-green)!important;}
    /* Change color on background */
    .tab-header.horizon-2.active .tab-header-button {background: var(--vision-green)!important;}

/* Horizon 3*/
    /* Set button color for Horizon */
    .tab-header.horizon-3 .tab-header-button {border-color:var(--vision-teal);}
    .tab-header.horizon-3 svg.button-text {fill: var(--vision-teal)!important;}
    /* Change color on background */
    .tab-header.horizon-3.active .tab-header-button {background: var(--vision-teal)!important;}

/* Change text to white on active */
.tab-header.active svg.button-text {
  fill: #ffffff!important;
}

/* Force image to sit above background colour */
.tab-header-img {
  position: relative;
  z-index: 10;
}

/* --- END Tab Header
/
/
/
/
/* --- Tab Content */

/* Base styling */
.tab-content {
  display: none;
  width: 100%;
	padding: 1.5em 3em;
  opacity: 0
}

/* Make visible */
.tab-content.active {
  display: block;
}

/* Removing large margin from top and bottom of element */
.tab-content .content-para {
  margin: 0;
}

/* Content background colour */
.tab-content.horizon-1 {background: var(--vision-pink-light);}
.tab-content.horizon-2 {background: var(--vision-green-light);}
.tab-content.horizon-3 {background: var(--vision-teal-light);}

/* Header colours */
.horizon-1 .content-para h3 {color: var(--vision-pink);}
.horizon-2 .content-para h3 {color: var(--vision-green);}
.horizon-3 .content-para h3 {color: var(--vision-teal);}

/* Tab content tags */

  /* Tag container */
  .tab-content .content-para ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    gap: 10px;
    margin-top: 2.5rem;
  }

  /* Individual tag styling */
  .tab-content .content-para li {
    border: 2px solid;
    border-radius: 50px;
    color: var(--vision-navy)!important;
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    padding: 0 15px;
    text-transform: uppercase;
  }

  /* Tag colours */
  .tab-content.horizon-1 .content-para li {border-color: var(--vision-pink)}
  .tab-content.horizon-2 .content-para li {border-color: var(--vision-green)}
  .tab-content.horizon-3 .content-para li {border-color: var(--vision-teal)}


/* --- END Tab Content
/
/
/
/
/* --- Responsive */

  
/* Desktop */
@media (min-width: 768px) {
  .tab-content {
    order: 99;
  }
}  

/* Accordion style on small screens */
@media (max-width: 767px) {

  .tab-header {
    border-width: 0!important;
    margin-top: 2em;
  }
  
  .tab-header.flex-row {
    flex-direction: column!important;
    align-items: center!important;
    align-content: center!important;
  }
  
  .tab-header, .tab-header-button, .tab-header-text {
    width: 100%!important;
  }
  
  .tab-header-text .component-html {
    max-width: 300px;
    margin: auto;
  }
  
  .tab-header-img .component-image {
    width: 80vw!important;
    max-width: 300px!important;
    margin-bottom: 20px;
  }


}

@media (max-width: 545px) {

  .tab-header-img .component-image {
    margin-bottom: 60px;
  }

  .tab-header:before {
    height: 36%!important;
  }
  
  .tab-header:after {
    background: white;
    border: 1px solid;
    border-radius: 20px;
    bottom: 20px;
    color: white;
    content: 'Learn more +';
    position: absolute; 
    padding: 2px 15px 2px;
    transition: all 250ms ease;
  }
  
  .tab-header.active:after {
    content: 'See less -';
  }
  
  .tab-header.horizon-1:after {
    background: var(--vision-pink);
    border-color: var(--vision-pink);
  }
  .tab-header.horizon-2:after {
    background: var(--vision-green);
    border-color: var(--vision-green);
  }
  .tab-header.horizon-3:after {
    background: var(--vision-teal);
    border-color: var(--vision-teal);
  }
  
  .tab-content {
    padding: 0 1.5em 1em!Important;
  }
  
  .tab-content li {
    font-size: 0.9em!important;
  }
}  

/* END Responsive
/
/
/
/
/* edit mode*/
  .has-control-menu.has-edit-mode-menu.controls-visible .tab-content {
  	display: block;
    opacity: 1;
  }

.lfr-layout-structure-item-c93eb6db-651f-d3ce-8ab4-e1c687d00b27 {
padding-left: var(--spacer-4,1.5rem) !important;
padding-right: var(--spacer-4,1.5rem) !important;
}
.lfr-layout-structure-item-8d41c4df-2a2d-21a6-02fa-c8573ad631aa {
width: 100% !important;
}
.lfr-layout-structure-item-c91dec6f-557c-c041-e813-d645f567cbe4 {
padding-left: var(--spacer-4,1.5rem) !important;
padding-right: var(--spacer-4,1.5rem) !important;
}
.lfr-layout-structure-item-8eb296d8-87b3-45d3-72ee-aba661dba884 {
padding-top: 2em !important;
}
.lfr-layout-structure-item-dd4415c7-9a2e-76d7-83e6-e255c32d384a img{
width: auto;
height: 16px;
}}@media screen and (max-width: 575px) {.lfr-layout-structure-item-ab9b387c-fba4-dd79-cd90-3d892cd6b060 {
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-4,1.5rem) !important;
}
.lfr-layout-structure-item-c93eb6db-651f-d3ce-8ab4-e1c687d00b27 {
display: block !important;
padding-left: var(--spacer-0,0rem) !important;
padding-right: var(--spacer-0,0rem) !important;
padding-top: var(--spacer-7,6rem) !important;
}
}