:root {
  --general-text-color: #5d5d60;
  --title-text-color: #5d5d60;
  --subtitle-text-color: #5d5d60;
  --heading2-text-color: #e78c31;
  --heading3-text-color: #fa715e;
  --link-default-color: #5d5d60;
  --link-hover-color: #5d5d60;
  --header-cta-text-color: #ffffff;
  --header-cta-bg-color: #fa715e;
  --header-cta-hover-text-color: #ffffff;
  --header-cta-hover-bg-color: #4cd6bc
}

body {
  color: var(--general-text-color)
}

.post-info-title {
  color: var(--title-text-color)
}

.post-info-subtitle {
  color: var(--subtitle-text-color)
}

body h2 {
  color: var(--heading2-text-color)
}

body h3 {
  color: var(--heading3-text-color)
}

a {
  color: var(--link-default-color)
}

a:hover,
a:focus {
  color: var(--link-hover-color)
}

#masthead {
  background-color: #ffffff
}

.header-cta a {
  color: var(--header-cta-text-color);
  background-color: var(--header-cta-bg-color)
}

.header-cta a:focus {
  color: var(--header-cta-text-color)
}

.header-cta a:hover {
  color: var(--header-cta-hover-text-color);
  background-color: var(--header-cta-hover-bg-color)
}

ul li:before {
  background: var(--general-text-color)
}

.post-content ol.branded-list li:before {
  color: #fa715e
}

body {
  font-family: "Roboto", "Roboto Fallback Windows", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
}

@font-face {
  font-family: "Roboto Fallback Windows";
  src: local("Times New Roman");
  font-weight: 400;
  size-adjust: 109.50%;
  ascent-override: 84.73%;
  descent-override: 22.30%;
  line-gap-override: 0%
}

@font-face {
  font-family: "Roboto Fallback Windows";
  src: local("Times New Roman Bold");
  font-weight: bold;
  size-adjust: 104.51%;
  ascent-override: 88.77%;
  descent-override: 23.36%;
  line-gap-override: 0%
}

html {
  font-size: 14px;
  line-height: 1.3;
  text-align: left
}

@media(min-width:768px) {
  html {
    font-size: 15px
  }
}

@media(min-width:992px) {
  html {
    font-size: 16px
  }
}

body {
  font-size: 1.2rem;
  position: relative
}

.wrapper {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%
}

h1 {
  font-size: 1.9rem;
  line-height: 1.2;
  font-weight: 700
}

@media(min-width:768px) {
  h1 {
    line-height: 1.3
  }
}

@media(min-width:992px) {
  h1 {
    font-size: 2.4rem
  }
}

h2 {
  font-size: 1.6rem;
  line-height: 1.1;
  font-weight: 700;
  margin: 1rem 0
}

@media(min-width:768px) {
  h2 {
    font-size: 1.65rem;
    margin-top: 2rem
  }
}

a {
  text-decoration: underline
}

a:hover {
  text-decoration: underline
}

p {
  line-height: 1.95rem;
  margin-top: 1em;
  margin-bottom: 1em
}

button,
.button {
  font-size: 1.3rem;
  line-height: 2.5
}

@media(min-width:768px) {

  button,
  .button {
    font-size: 1.3rem
  }
}

.post-info-title {
  font-weight: 900;
  margin-bottom: .3rem
}

.post-content ol:not([class]),
.post-content ol.list-numbers {
  margin: 0 0 15px
}

.post-content ol:not([class]) li,
.post-content ol.list-numbers li {
  line-height: 1.5
}

.post-content ol:not([class]) li:before,
.post-content ol.list-numbers li:before {
  content: counter(index) ".";
  counter-increment: index;
  display: inline-block;
  min-width: 20px;
  margin: 0 5px 0 0;
  text-align: right
}

.post-content ol:not([class]) li:first-child,
.post-content ol.list-numbers li:first-child {
  counter-reset: index
}

.post-content ol.branded-list li,
.post-content .numbered-list-round li {
  position: relative;
  padding: .2rem 2.5rem 1rem;
  line-height: 1.5
}

.post-content ol.branded-list li:before,
.post-content .numbered-list-round li:before {
  content: counter(index);
  counter-increment: index;
  display: inline-block;
  position: absolute;
  top: 6px;
  left: 0;
  width: 26px;
  height: 26px;
  text-align: center;
  font-weight: 700;
  line-height: 1.3
}

.post-content ol.branded-list li:first-child,
.post-content .numbered-list-round li:first-child {
  counter-reset: index
}

.post-content ul[class=""],
.post-content ul:not([class]),
.post-content ul.list-dotted {
  margin: 0 0 15px
}

.post-content ul[class=""] li,
.post-content ul:not([class]) li,
.post-content ul.list-dotted li {
  line-height: 1.5;
  position: relative;
  padding: 0 0 0 25px
}

.post-content ul[class=""] li:before,
.post-content ul:not([class]) li:before,
.post-content ul.list-dotted li:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 8px;
  width: 6px;
  height: 6px;
  border-radius: 100%
}

.post-content ul[class=""] li svg,
.post-content ul:not([class]) li svg,
.post-content ul.list-dotted li svg {
  display: none
}

.post-content ul.branded-list li {
  position: relative;
  padding: .2rem 2.5rem .5rem 2.5rem;
  line-height: 1.5
}

.post-content ul.branded-list li:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 26px;
  height: 26px;
  display: block;
  border-radius: 100%
}

.post-content .benefits {
  margin: 1rem 0 2rem;
  padding: 1rem 1.8rem
}

.post-content .benefits-title {
  margin: 1rem 0;
  padding: 1rem;
  font-size: 1.6rem
}

@media(min-width:768px) {
  .post-content .benefits-title {
    font-size: 1.8rem
  }
}

.post-content .grid-cta-title {
  margin: 0 0 1rem
}

.post-content .grid-cta-title a {
  font-weight: 600
}

@media(min-width:768px) {
  .post-content .grid-cta-title a {
    line-height: 1.3
  }
}

@media(min-width:992px) {
  .post-content .grid-cta-title a {
    font-size: 2.2rem;
    font-weight: 900;
    padding: 1.2rem 0
  }
}

.post-content .grid-cta-options {
  margin: 1rem 0
}

.post-content .grid-cta-options li {
  margin-bottom: .5rem
}

.post-content .grid-cta-footer {
  font-size: 1.2rem;
  font-weight: 600;
  margin: .5rem 0
}

.footer-top * div {
  border-color: #b2b2b2
}

.flexi-comp-footer {
  --container-width: 1020px;
  --footer-padding-desktop: 32px 0;
  --footer-padding-mobile: 40px 0 70px;
  --footer-container-padding: 0 20px
}

.benefits {
  padding: 20px 0 5px 20px;
  margin-bottom: 10px
}

.benefits ul.branded-list li {
  position: relative;
  padding: .2rem 2.5rem .5rem 2.5rem;
  line-height: 1.5
}

.benefits ul.branded-list li:before {
  display: none
}

.benefits ul.branded-list li svg {
  position: absolute;
  top: 3px;
  left: 0;
  width: 26px;
  height: 26px;
  display: block
}

.benefits-footer {
  margin-top: 0;
  margin-bottom: 0
}

.grid-cta {
  --search-border: var(--cta-background);
  --search-shadow: var(--cta-background);
  --search-icon-background: var(--cta-background);
  --sorting-active-background: transparent;
  --sorting-active-border: var(--cta-background);
  --sorting-active-color: var(--cta-background);
  --cta-favourite-icon-color: currentColor;
  padding-bottom: 1rem
}

.grid-cta-title {
  margin: 0 0 .5rem
}

.grid-cta-title a {
  text-align: center;
  display: block;
  text-decoration: none;
  padding: 1rem;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 700
}

@media(min-width:576px) {
  .grid-cta-title a {
    padding: 1rem 2.4rem;
    font-size: 1.5rem
  }
}

@media(min-width:768px) {
  .grid-cta-title a {
    padding: 1.2rem 2.5rem;
    font-size: 2rem
  }
}

@media(min-width:992px) {
  .grid-cta-title a {
    padding: 1.4rem 3rem;
    line-height: 1.3
  }
}

.grid-cta-subtitle,
.grid-cta-footer {
  padding: .6rem;
  margin: .5rem 0;
  text-align: center;
  font-size: 1.2rem
}

@media(min-width:768px) {

  .grid-cta-subtitle,
  .grid-cta-footer {
    font-size: 1.5rem
  }
}

.grid-cta-search {
  position: relative;
  max-width: 400px;
  margin: 0 auto .5rem
}

.grid-cta-search-input {
  padding: .65rem 3rem .65rem 1.25rem;
  font-size: 1.125rem;
  border: 2px solid var(--search-border);
  border-radius: 50px;
  transition: .2s ease
}

.grid-cta-search-input:focus {
  border-color: var(--search-border);
  box-shadow: 0 0 0 2px var(--search-shadow)
}

.grid-cta-search-input:focus+svg {
  background-color: #fff;
  color: #000
}

.grid-cta-search svg {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 50%;
  background-color: var(--search-icon-background);
  color: #fff;
  transition: .2s ease;
  pointer-events: none
}

.grid-cta-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: .75rem;
  color: #888;
  font-size: clamp(14px, .8rem + .25vw, 16px)
}

.grid-cta-no-results.hidden {
  display: none
}

.grid-cta-no-results p {
  margin: 0;
  line-height: 1.47
}

.grid-cta-no-results-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #555;
  font-size: clamp(16px, .9rem + .35vw, 18px);
  font-weight: 600
}

.grid-cta-no-results a {
  width: auto;
  padding-inline: 1.25em
}

.grid-cta-sorting {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  font-size: 1.125rem
}

.grid-cta-sorting .sort-by {
  display: flex;
  align-items: center;
  gap: .25rem;
  border: 1px solid #ccc;
  border-radius: .25rem;
  background-color: rgba(0, 0, 0, 0);
  padding: .5rem;
  transition: .2s ease;
  cursor: pointer;
  color: #777;
  font-size: clamp(14px, .8rem + .25vw, 16px);
  font-weight: 600;
  line-height: 1
}

.grid-cta-sorting .sort-by:hover {
  color: #333;
  border-color: #666
}

.grid-cta-sorting .sort-by.active {
  background-color: var(--sorting-active-background);
  color: var(--sorting-active-color);
  border-color: var(--sorting-active-border)
}

.grid-cta-sorting .sort-by svg {
  transform: translateY(1px)
}

.grid-cta-options {
  display: grid;
  grid-auto-rows: minmax(min-content, 1fr)
}

.grid-cta-options li {
  width: 100%;
  display: flex
}

.grid-cta-options[data-columns="12"],
.grid-cta-options[data-columns="11"],
.grid-cta-options[data-columns="10"],
.grid-cta-options[data-columns="9"],
.grid-cta-options[data-columns="8"] {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px
}

@media(min-width:768px) {

  .grid-cta-options[data-columns="12"],
  .grid-cta-options[data-columns="11"],
  .grid-cta-options[data-columns="10"],
  .grid-cta-options[data-columns="9"],
  .grid-cta-options[data-columns="8"] {
    grid-template-columns: repeat(4, minmax(150px, 1fr))
  }
}

@media(min-width:992px) {

  .grid-cta-options[data-columns="12"],
  .grid-cta-options[data-columns="11"],
  .grid-cta-options[data-columns="10"],
  .grid-cta-options[data-columns="9"],
  .grid-cta-options[data-columns="8"] {
    grid-template-columns: repeat(8, 1fr);
    gap: 4px
  }
}

@media(min-width:1120px) {
  .grid-cta-options[data-columns="12"] {
    grid-template-columns: repeat(12, minmax(72px, 1fr))
  }
}

@media(min-width:1120px) {
  .grid-cta-options[data-columns="11"] {
    grid-template-columns: repeat(11, minmax(72px, 1fr))
  }
}

@media(min-width:1120px) {
  .grid-cta-options[data-columns="10"] {
    grid-template-columns: repeat(10, minmax(72px, 1fr))
  }
}

@media(min-width:1120px) {
  .grid-cta-options[data-columns="9"] {
    grid-template-columns: repeat(9, minmax(72px, 1fr))
  }
}

@media(min-width:1120px) {
  .grid-cta-options[data-columns="8"] {
    grid-template-columns: repeat(8, minmax(72px, 1fr))
  }
}

.grid-cta-options[data-columns="7"],
.grid-cta-options[data-columns="6"],
.grid-cta-options[data-columns="5"],
.grid-cta-options[data-columns="4"] {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px
}

@media(min-width:768px) {

  .grid-cta-options[data-columns="7"],
  .grid-cta-options[data-columns="6"],
  .grid-cta-options[data-columns="5"],
  .grid-cta-options[data-columns="4"] {
    grid-template-columns: repeat(3, minmax(150px, 1fr))
  }
}

@media(min-width:992px) {

  .grid-cta-options[data-columns="7"],
  .grid-cta-options[data-columns="6"],
  .grid-cta-options[data-columns="5"],
  .grid-cta-options[data-columns="4"] {
    gap: 12px
  }
}

@media(min-width:992px) {
  .grid-cta-options[data-columns="7"] {
    grid-template-columns: repeat(7, 1fr)
  }
}

@media(min-width:992px) {
  .grid-cta-options[data-columns="6"] {
    grid-template-columns: repeat(6, 1fr)
  }
}

@media(min-width:992px) {
  .grid-cta-options[data-columns="5"] {
    grid-template-columns: repeat(5, 1fr)
  }
}

@media(min-width:992px) {
  .grid-cta-options[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media(min-width:768px) {
  .grid-cta-options[data-columns="2"] {
    grid-template-columns: repeat(2, minmax(120px, 1fr))
  }
}

.grid-cta-options[data-columns="1"] {
  grid-template-columns: repeat(1, minmax(120px, 1fr))
}

@media(min-width:768px) {
  .grid-cta-options[data-columns="1"] {
    grid-template-columns: repeat(1, minmax(120px, 1fr))
  }
}

.grid-cta-options li.hidden {
  display: none
}

.grid-cta-option {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 1rem .8rem;
  width: 100%;
  text-align: center;
  color: var(--cta-color);
  background-color: var(--cta-background);
  transition: .35s
}

@media(min-width:576px) {
  .grid-cta-option {
    font-size: 1.2rem
  }
}

@media(min-width:768px) {
  .grid-cta-option {
    font-size: 1.3rem
  }
}

.grid-cta-option:visited,
.grid-cta-option:focus {
  color: var(--cta-color)
}

.grid-cta-option:hover,
.grid-cta-option:visited:hover {
  text-decoration: none;
  color: var(--cta-hover-color);
  background-color: var(--cta-hover-background)
}

.grid-cta-option:hover svg,
.grid-cta-option:visited:hover svg {
  opacity: 1;
  fill-opacity: 1
}

.grid-cta-option svg {
  position: absolute;
  top: 50%;
  left: .75rem;
  transform: translateY(-50%);
  opacity: .8;
  fill: var(--cta-favourite-icon-color);
  fill-opacity: .7;
  filter: drop-shadow(0 0 0.1em hsl(333, 79%, 35%));
  transition: .2s ease
}

.hero-image-link {
  text-decoration: none
}

.hero-image-link:hover {
  text-decoration: none
}

.hero-image-wrap img {
  width: 100%;
  height: auto;
  margin-bottom: 10px
}

@media(min-width:768px) {
  .hero-image-wrap img {
    margin-bottom: 3px
  }
}

.hero-image-caption {
  line-height: 1.5;
  font-size: 14px;
  color: #aaa
}

@media(min-width:768px) {
  .hero-image-caption {
    font-size: 15px
  }
}

@media(min-width:992px) {
  .hero-image-caption {
    font-size: 16px
  }
}

.hero-image-cta {
  display: block;
  text-align: center;
  font-weight: 700;
  width: 100%;
  margin: 1rem 0;
  padding: 1rem .4rem;
  font-size: 1.3rem;
  text-decoration: none
}

@media(min-width:768px) {
  .hero-image-cta {
    display: none
  }
}

.hero-image-cta:hover,
.hero-image-cta:focus {
  text-decoration: none
}

@media(max-width:767.98px) {
  .hero-image.hide-background-image-mobile {
    display: none
  }
}

.social-icons {
  padding-top: .5rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: flex-start
}

.social-icons-link {
  text-decoration: none;
  margin-right: .6rem;
  display: block;
  font-size: 0;
  outline: none
}

.social-icons-link:before {
  font-family: "font-icon";
  line-height: 1;
  font-size: 1.25rem
}

.social-icons-link:hover {
  text-decoration: none
}

.social-icons .facebook:before {
  content: ""
}

.social-icons .twitter:before {
  content: ""
}

.social-icons .email:before {
  content: ""
}

@media(max-width:768px) {
  .social-icons.hide-on-mobile {
    display: none
  }
}

.colourful-circular .social-icons-link {
  width: 32px;
  height: 32px;
  position: relative;
  border-radius: 50%;
  outline: none
}

.colourful-circular .social-icons-link:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff
}

.colourful-circular .facebook {
  background: #4062bb
}

.colourful-circular .twitter {
  background: #000
}

.colourful-circular .email {
  background: #ff9f1c
}