/* ===== Content Strip Variables ===== */
:root {
  --strip-white: hsl(0, 0%, 100%);
  --strip-light: hsl(0, 0%, 97%);
  --strip-dark: hsl(0, 0%, 10%);
  --strip-medium: hsl(0, 0%, 38%);
  --strip-accent: #155EA6;
}

/* ===== Section Base ===== */
.content-strips section,
.content-strip section {
  padding: 3.6rem 0;
  background: var(--strip-white);
}
.content-strips section .content,
.content-strip section .content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 3.2rem;
}
.content-strips section .content > *:last-child,
.content-strips section .content .editable-content > *:last-child,
.content-strip section .content > *:last-child,
.content-strip section .content .editable-content > *:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
  .content-strips section,
  .content-strip section {
    padding: 4.8rem 0;
  }
}

/* ===== Background Themes ===== */
.content-strips section.light,
.content-strip section.light {
  background: var(--strip-light);
}
.content-strips section.light-grey,
.content-strip section.light-grey {
  background: hsl(0, 0%, 93%);
}
.content-strips section.dark,
.content-strip section.dark {
  background: var(--strip-dark);
}
.content-strips section.colour,
.content-strip section.colour {
  background: var(--strip-accent);
}

/* Dark / Colour text overrides */
.content-strips section.dark :is(h1,h2,h3,h4,h5,h6,ul li,ol li,p,pre),
.content-strips section.colour :is(h1,h2,h3,h4,h5,h6,ul li,ol li,p,pre),
.content-strip section.dark :is(h1,h2,h3,h4,h5,h6,ul li,ol li,p,pre),
.content-strip section.colour :is(h1,h2,h3,h4,h5,h6,ul li,ol li,p,pre) {
  color: var(--strip-white);
}
.content-strips section.dark a,
.content-strips section.colour a,
.content-strip section.dark a,
.content-strip section.colour a {
  color: var(--strip-white);
}
.content-strips section.dark hr,
.content-strips section.colour hr,
.content-strip section.dark hr,
.content-strip section.colour hr {
  border-color: hsla(0 0% 100% / .15);
}
.content-strips section.dark :is(.btn, button),
.content-strips section.colour :is(.btn, button),
.content-strip section.dark :is(.btn, button),
.content-strip section.colour :is(.btn, button) {
  background: var(--strip-white);
  color: var(--strip-dark);
}
.content-strips section.colour :is(.btn:hover, button:hover),
.content-strip section.colour :is(.btn:hover, button:hover) {
  background: var(--strip-dark);
  color: var(--strip-white);
}
.content-strips section.dark :is(.btn:hover, button:hover),
.content-strip section.dark :is(.btn:hover, button:hover) {
  background: var(--strip-accent);
  color: var(--strip-white);
}

/* ===== Floating Image (img-float) ===== */
.content-strips .img-float .content,
.content-strip .img-float .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content-strips .img-float.img-right .content,
.content-strip .img-float.img-right .content {
  flex-direction: row-reverse;
}
.content-strips .img-float .content .img-holder,
.content-strip .img-float .content .img-holder {
  width: calc(33.3333% - 4.8rem);
  aspect-ratio: 4 / 6;
  background-size: cover;
}
.content-strips .img-float .content .editable-content,
.content-strip .img-float .content .editable-content {
  width: calc(66.6666% - 4.8rem);
}
@media screen and (max-width: 1024px) {
  .content-strips .img-float .content,
  .content-strips .img-float.img-right .content,
  .content-strip .img-float .content,
  .content-strip .img-float.img-right .content {
    flex-direction: column;
    gap: 3.2rem;
    align-items: center;
  }
  .content-strips .img-float .content .img-holder,
  .content-strip .img-float .content .img-holder {
    max-width: 30rem;
    width: 100%;
  }
  .content-strips .img-float .content .editable-content,
  .content-strip .img-float .content .editable-content {
    width: 100%;
  }
}

/* ===== Faded Image (img-fade) ===== */
.content-strips .img-fade,
.content-strip .img-fade {
  position: relative;
}
.content-strips .img-fade .img-holder,
.content-strip .img-fade .img-holder {
  width: calc(45% - 4.8rem);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  z-index: 0;
}
.content-strips .img-fade::after,
.content-strip .img-fade::after {
  content: '';
  width: calc(45% - 4.8rem);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, transparent, var(--strip-white) 100%);
  z-index: 1;
}
.content-strips .light.img-fade::after,
.content-strip .light.img-fade::after {
  background: linear-gradient(to right, transparent, var(--strip-light) 100%);
}
.content-strips .dark.img-fade::after,
.content-strip .dark.img-fade::after {
  background: linear-gradient(to right, transparent, var(--strip-dark) 100%);
}
.content-strips .colour.img-fade::after,
.content-strip .colour.img-fade::after {
  background: linear-gradient(to right, transparent, var(--strip-accent) 100%);
}
.content-strips .img-fade.img-right .img-holder,
.content-strips .img-fade.img-right::after,
.content-strip .img-fade.img-right .img-holder,
.content-strip .img-fade.img-right::after {
  left: auto;
  right: 0;
}
.content-strips .img-fade.img-right::after,
.content-strip .img-fade.img-right::after {
  background: linear-gradient(to left, transparent, var(--strip-white) 100%);
}
.content-strips .light.img-fade.img-right::after,
.content-strip .light.img-fade.img-right::after {
  background: linear-gradient(to left, transparent, var(--strip-light) 100%);
}
.content-strips .dark.img-fade.img-right::after,
.content-strip .dark.img-fade.img-right::after {
  background: linear-gradient(to left, transparent, var(--strip-dark) 100%);
}
.content-strips .colour.img-fade.img-right::after,
.content-strip .colour.img-fade.img-right::after {
  background: linear-gradient(to left, transparent, var(--strip-accent) 100%);
}
.content-strips .img-fade .content,
.content-strip .img-fade .content {
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}
.content-strips .img-fade.img-right .content,
.content-strip .img-fade.img-right .content {
  justify-content: flex-start;
}
.content-strips .img-fade .content .editable-content,
.content-strip .img-fade .content .editable-content {
  width: calc(55% - 4.8rem);
}
@media screen and (max-width: 1024px) {
  .content-strips .img-fade,
  .content-strip .img-fade {
    padding-top: 35rem;
  }
  .content-strips .img-fade .img-holder,
  .content-strips .img-fade::after,
  .content-strip .img-fade .img-holder,
  .content-strip .img-fade::after {
    height: 30rem;
    width: 100%;
  }
  .content-strips .img-fade::after,
  .content-strips .img-fade.img-right::after,
  .content-strip .img-fade::after,
  .content-strip .img-fade.img-right::after {
    background: linear-gradient(to bottom, transparent, #fff 100%);
  }
  .content-strips .light.img-fade::after,
  .content-strips .light.img-fade.img-right::after,
  .content-strip .light.img-fade::after,
  .content-strip .light.img-fade.img-right::after {
    background: linear-gradient(to bottom, transparent, var(--strip-light) 100%);
  }
  .content-strips .dark.img-fade::after,
  .content-strips .dark.img-fade.img-right::after,
  .content-strip .dark.img-fade::after,
  .content-strip .dark.img-fade.img-right::after {
    background: linear-gradient(to bottom, transparent, var(--strip-dark) 100%);
  }
  .content-strips .colour.img-fade::after,
  .content-strips .colour.img-fade.img-right::after,
  .content-strip .colour.img-fade::after,
  .content-strip .colour.img-fade.img-right::after {
    background: linear-gradient(to bottom, transparent, var(--strip-accent) 100%);
  }
  .content-strips .img-fade .content .editable-content,
  .content-strip .img-fade .content .editable-content {
    width: 100%;
  }
}

/* ===== Background Image (img-background) ===== */
.content-strips .img-background,
.content-strip .img-background {
  position: relative;
  background-size: cover;
}
.content-strips .img-background::after,
.content-strip .img-background::after {
  content: '';
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: .75;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.content-strips .light.img-background::after,
.content-strip .light.img-background::after {
  background: var(--strip-light);
}
.content-strips .dark.img-background::after,
.content-strip .dark.img-background::after {
  background: var(--strip-dark);
}
.content-strips .colour.img-background::after,
.content-strip .colour.img-background::after {
  background: var(--strip-accent);
}
.content-strips .img-background .content,
.content-strip .img-background .content {
  position: relative;
  z-index: 1;
}

/* ===== Strip List ===== */
.content-strips .strip-list,
.content-strip .strip-list {
  padding: 9.6rem 0;
  position: relative;
}
.content-strips .strip-list .img-holder,
.content-strip .strip-list .img-holder {
  background-size: cover;
  width: 33.3333%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.content-strips .strip-list .content,
.content-strip .strip-list .content {
  display: flex;
  justify-content: flex-end;
}
.content-strips .strip-list .content .editable-content,
.content-strip .strip-list .content .editable-content {
  width: calc(66.6666% - 5rem);
}
.content-strips .strip-list.img-right .img-holder,
.content-strip .strip-list.img-right .img-holder {
  left: auto;
  right: 0;
}
.content-strips .strip-list.img-right .content,
.content-strip .strip-list.img-right .content {
  justify-content: flex-start;
}
@media screen and (max-width: 1024px) {
  .content-strips .strip-list,
  .content-strip .strip-list {
    padding: 30rem 0 5rem;
  }
  .content-strips .strip-list .img-holder,
  .content-strip .strip-list .img-holder {
    width: 100%;
    height: 25rem;
  }
  .content-strips .strip-list .content .editable-content,
  .content-strip .strip-list .content .editable-content {
    width: 100%;
  }
}

/* ===== Animations ===== */
.content-strips .fadeFromLeft,
.content-strip .fadeFromLeft {
  opacity: 0;
  transform: translateX(-10rem);
  transition: 0.5s ease-in-out;
}
.content-strips .fadeFromRight,
.content-strip .fadeFromRight {
  opacity: 0;
  transform: translateX(10rem);
  transition: 0.5s ease-in-out;
}
.content-strips .fadeFromTop,
.content-strip .fadeFromTop {
  opacity: 0;
  transform: translateY(-10rem);
  transition: 0.5s ease-in-out;
}
.content-strips .fadeFromBottom,
.content-strip .fadeFromBottom {
  opacity: 0;
  transform: translateY(10rem);
  transition: 0.5s ease-in-out;
}
.content-strips .fadeFromLeft.show,
.content-strips .fadeFromRight.show,
.content-strips .fadeFromTop.show,
.content-strips .fadeFromBottom.show,
.content-strip .fadeFromLeft.show,
.content-strip .fadeFromRight.show,
.content-strip .fadeFromTop.show,
.content-strip .fadeFromBottom.show {
  opacity: 1;
  transform: translate(0);
}

/* ===== FAQ / Toggler ===== */
.content-strips .faq-block,
.content-strip .faq-block {
  margin: 20px 0;
  padding: 0 0 20px;
  border-bottom: 1px solid #ececec;
}

/* FAQ Content */
.content-strips h5.toggle_faq,
.content-strip h5.toggle_faq {
  color: var(--font-colour);
  /*text-transform: capitalize;*/
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 55px;
}

.content-strips .faq-block div.toggler,
.content-strip .faq-block div.toggler {
  padding-left: 0;
  margin: 0;
}

/* Icon Main */
.content-strips span.faq-icon,
.content-strips h5.toggle_faq,
.content-strip span.faq-icon,
.content-strip h5.toggle_faq {
  transition: 0.3s ease;
  transition-delay: 0.4s;
  cursor: pointer;
}

.content-strips span.faq-icon,
.content-strip span.faq-icon {
  background: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  margin: 0;
  left: 0;
}

/* Standard Lines */
.content-strips i.faq-icon,
.content-strip i.faq-icon {
  display: block;
  height: 2px;
  width: 15px;
  background-color: #86b738;
  position: absolute;
}

/* Plus Icon */
.content-strips span.faq-icon .one,
.content-strip span.faq-icon .one {
  transform: rotate(90deg);
  transition: 0.4s ease-in-out;
}

.content-strips span.faq-icon .two,
.content-strip span.faq-icon .two {
  transform: rotate(180deg);
  transition: 0.4s ease-in-out;
}

/* Close Icon */
.content-strips h5.toggle_faq.active .one,
.content-strip h5.toggle_faq.active .one {
  transform: rotate(-45deg);
  transition: 0.4s ease-in-out;
}

.content-strips h5.toggle_faq.active .two,
.content-strip h5.toggle_faq.active .two {
  transform: rotate(45deg);
  transition: 0.4s ease-in-out;
}

/* Icon Main Active */
.content-strips span.faq-icon,
.content-strips h5.toggle_faq,
.content-strip span.faq-icon,
.content-strip h5.toggle_faq {
  transition: 0.3s ease;
  transition-delay: 0.4s;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}

h5.toggle_faq.active span {}

#page h5.toggle_faq.active {
  margin: 0 0 20px;
}

@media (max-width: 767px) {
  .content-strips span.faq-icon,
  .content-strip span.faq-icon {
    width: 30px;
    height: 30px;
  }

  .content-strips h5.toggle_faq,
  .content-strip h5.toggle_faq {
    padding-left: 40px;
  }

  .content-strips i.faq-icon,
  .content-strip i.faq-icon {
    width: 10px;
    height: 2px;
  }
}

/* Dark/colour theme FAQ icon override */
.content-strips .dark i.faq-icon,
.content-strips .colour i.faq-icon,
.content-strip .dark i.faq-icon,
.content-strip .colour i.faq-icon {
  background: var(--strip-white);
}