@font-face {
  font-family: 'GoodHome';
  src: url(/spa/fonts/GoodHome-Regular.eot?#iefix) format('embedded-opentype'),
    url(/spa/fonts/GoodHome-Regular.woff2) format('woff2'),
    url(/spa/fonts/GoodHome-Regular.woff) format('woff'),
    url(/spa/fonts/GoodHome-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GoodHome';
  src: url(/spa/fonts/GoodHome-Bold.eot?#iefix) format('embedded-opentype'),
    url(/spa/fonts/GoodHome-Bold.woff2) format('woff2'),
    url(/spa/fonts/GoodHome-Bold.woff) format('woff'),
    url(/spa/fonts/GoodHome-Bold.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GoodHome';
  src: url(/spa/fonts/GoodHome-Light.eot?#iefix) format('embedded-opentype'),
    url(/spa/fonts/GoodHome-Light.woff2) format('woff2'),
    url(/spa/fonts/GoodHome-Light.woff) format('woff'),
    url(/spa/fonts/GoodHome-Light.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kingfisher';
  src: url(/spa/fonts/Kingfisher-Regular.eot?#iefix) format('embedded-opentype'),
    url(/spa/fonts/Kingfisher-Regular.woff) format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Kingfisher';
  src: url(/spa/fonts/Kingfisher-Bold.eot?#iefix) format('embedded-opentype'),
    url(/spa/fonts/Kingfisher-Bold.woff) format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Kingfisher';
  src: url(/spa/fonts/Kingfisher-Light.eot?#iefix) format('embedded-opentype'),
    url(/spa/fonts/Kingfisher-Light.woff) format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Kingfisher';
  src: url(/spa/fonts/Kingfisher-Italic.eot?#iefix) format('embedded-opentype'),
    url(/spa/fonts/Kingfisher-Italic.woff) format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Kingfisher black';
  src: url(/spa/fonts/Kingfisher-Black.eot?#iefix) format('embedded-opentype'),
    url(/spa/fonts/Kingfisher-Black.woff) format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'CastoPro24';
  src: url(/spa/fonts/CastoPro-Regular.woff2) format('woff2'),
    url(/spa/fonts/CastoPro-Regular.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CastoPro24';
  src: url(/spa/fonts/CastoPro-Bold.woff2) format('woff2'),
    url(/spa/fonts/CastoPro-Bold.woff) format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CastoPro24';
  src: url(/spa/fonts/CastoPro-Bold.woff2) format('woff2'),
    url(/spa/fonts/CastoPro-Bold.woff) format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CastoPro24';
  src: url(/spa/fonts/CastoPro-Light.woff2) format('woff2'),
    url(/spa/fonts/CastoPro-Light.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CastoPro24';
  src: url(/spa/fonts/CastoProBeta-Italic.woff2) format('woff2'),
    url(/spa/fonts/CastoProBeta-Italic.woff) format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'CastoPro24 black';
  src: url(/spa/fonts/CastoPro-Black.woff2) format('woff2'),
    url(/spa/fonts/CastoPro-Black.woff) format('woff');
  font-weight: 400;
  font-style: normal;
}

.truste_overlay {
  opacity: 0.8 !important;
}

.truste_overlay_hide {
  opacity: 0 !important;
  z-index: 1000 !important;
}

.trustArcActive {
  overflow-y: hidden;
}

.truste_box_overlay {
  position: fixed !important;
  padding: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  max-height: 100%;
}

.truste_box_overlay_hide {
  z-index: 1000 !important;
}

.truste_box_overlay_inner [id^='closebtn-'] {
  top: 6px !important;
  right: 6px !important;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

@media (min-width: 45em) {

  body .c2d81460 {
    display: none;
  }
}

body ._7879cb1b {
  display: none;
}

@media (min-width: 45em) {

  body ._7879cb1b {
    display: block;
  }
}

body ._59efbc33 {
  display: none;
}

@media (min-width: 45em) {

  body ._59efbc33 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media (min-width: 63.75em) {

  body ._7f0d8b47 {
    display: none;
  }
}

body ._4e3aaed0 {
  display: none;
}

@media (min-width: 45em) {

  body ._4e3aaed0 {
    display: block;
  }
}

@media (min-width: 63.75em) {

  body ._4e3aaed0 {
    display: none;
  }
}

body .b97c4d6d,
body ._6f215126 {
  display: none;
}

@media (min-width: 63.75em) {

  body .b97c4d6d,
body ._6f215126 {
    display: block;
  }
}

@media (min-width: 73.75em) {

  body .c19ba1ee {
    display: none;
  }
}

body ._5dc9505c {
  display: none;
}

@media (min-width: 45em) and (max-width: 73.6875em) {

  body ._5dc9505c {
    display: block;
  }
}

body .af7e1d5a {
  display: none;
}

@media (min-width: 73.75em) {

  body .af7e1d5a {
    display: block;
  }
}

@media (max-width: 44.99em) {

  body .acaa5c43 {
    display: none;
  }
}

._042bbf7f {
  padding-right: 16px;
  padding-right: 1.6rem;
  padding-left: 16px;
  padding-left: 1.6rem;
}

@media (min-width: 45em) {

  ._042bbf7f {
    padding-right: 3.2rem;
    padding-left: 3.2rem;
  }
}

/*
  WFE-3562 - The sitebuilder content has left and right padding on .wrapper-main
  that is not needed when rendered in our Content component. This
  needs to remain as long as the padding on .wrapper-main exists.
*/

._1c47c0ee {
  padding-right: calc(1.6rem - 1.188em);
  padding-left: calc(1.6rem - 1.188em);
}

@media (min-width: 45em) {

  ._1c47c0ee {
    padding-right: calc(3.2rem - 1.188em);
    padding-left: calc(3.2rem - 1.188em);
  }
}

._7b746310 {
  padding-right: 16px;
  padding-right: 1.6rem;
}

@media (min-width: 45em) {

  ._7b746310 {
    padding-right: 3.2rem;
  }
}

.ba78b083 {
  padding-left: 16px;
  padding-left: 1.6rem;
}

@media (min-width: 45em) {

  .ba78b083 {
    padding-left: 3.2rem;
  }
}

._6f431450 {
  margin-right: 16px;
  margin-right: 1.6rem;
  margin-left: 16px;
  margin-left: 1.6rem;
}

@media (min-width: 45em) {

  ._6f431450 {
    margin-right: 3.2rem;
    margin-left: 3.2rem;
  }
}

._27cbe05e {
  margin-right: -16px;
  margin-right: -1.6rem;
  margin-left: -16px;
  margin-left: -1.6rem;
}

@media (min-width: 45em) {

  ._27cbe05e {
    margin-right: -3.2rem;
    margin-left: -3.2rem;
  }
}

._357a11f4 {
  margin-right: 8px;
  margin-right: 0.8rem;
  margin-left: 8px;
  margin-left: 0.8rem;
}

@media (min-width: 45em) {

  ._357a11f4 {
    margin-right: 1.6rem;
    margin-left: 1.6rem;
  }
}

._38e857b5 {
  max-width: 352px;
  max-width: 35.2rem;
  min-width: 176px;
  min-width: 17.6rem;
}

/*
 * z-index
 */

.f5a00e1e {
  z-index: 1;
}

._0d16b253 {
  z-index: 80;
}

._4b1549db {
  z-index: 80;
}

._05d22dc1 {
  z-index: 90;
}

.b23618c5 {
  z-index: 115;
}

._4708d229 {
  z-index: 1000;
}

.ee086672 {
  z-index: 1100;
}

._74edfe10 {
  z-index: 10000;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

/*
  Why important is allowed for utils classes?
  - It is common practice (see https://github.com/twbs/bootstrap/blob/ff29c1224c20b8fcf2d1e7c28426470f1dc3e40d/scss/utilities/_visibility.scss)
  - If you put util class on element, it reads like element is having those styles, they should override any conflicting rule
  - In case if rule with !important need to be overwritten, just remove util class and write your own.
*/

/*
 * Naked Button
 */

._77abe396 {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: inherit;
}

/*
 * Naked Action, Link, Button or Anchor
 */

._64ca4dc5 {
  display: block;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
}

button._64ca4dc5:not([disabled]) {
  cursor: pointer;
}

.b06ad3c4 {
  display: inline;
}

.b824c60d {
  color: inherit;
  text-decoration: underline
}

.b824c60d:hover {
  font-weight: 500;
}

/*
 * Pullers
 */

.bfdcd798 {
  float: left !important;
}

._7552745c {
  float: right !important;
}

/* Note this wont always centralise, quick and dirty */

._3e15c9c2 {
  margin: 0 auto;
}

.b4d87c1d {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

._5fc95d1d {
  max-width: 1400px;
  max-width: 140rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 63.75em) {

  .c0b5976e {
    max-width: 36.8rem;
  }
}

@media (min-width: 45em) {

  ._92e90460 {
    max-width: 36.8rem;
  }
}

/*
 * Anchors
 */

.ad8d72bb {
  display: block;
  text-decoration: underline;
  color: inherit
}

.ad8d72bb:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

@media (hover: none) {

  .ad8d72bb:hover {
    color: #000;
    color: initial;
  }
}

/**
 * Alignment
 */

.b5b9553d {
  text-align: left;
}

.a0b9ff99 {
  text-align: center;
}

._0419302d {
  text-align: right;
}

._6418d197 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.e4e1e5cf {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._49cc79f2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._2263bdd0 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

._7acab515 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

._85e8e5d7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1
}

._85e8e5d7::before,
  ._85e8e5d7::after {
  content: ' ';
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

._29677bd8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._919cc9bf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._3ea687bc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

._49bb9a0d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.c2857d59 {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.ee7c3a63 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.aef18ec2 {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

._2ebbca7f {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._2a25a5aa {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

._6cdd2700 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.e09775ca {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.e1d89aa7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._1ef88364 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

._9b850e41 {
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important; /* Grid CSS will override when combined */
}

._3cf21e0c {
  position: relative;
}

/*
 * Sizing
 */

._2df20035 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

._0943d132 {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.b32a71b5 {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

.f0ac8b54 {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
}

.f530a384 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

._721d88b2 {
  display: block;
  width: 100%;
}

.cf1e4be3 {
  display: block;
  height: 100%;
}

._7e49e4a3 {
  width: 100vw;
}

._1bed9d2e {
  height: 100vh;
}

._468313e3 {
  overflow-x: scroll;
}

._3c50301e {
  overflow-y: scroll;
}

/*
 * Visibility
 */

.adb5d0fb {
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute;
}

._1cfe1955 {
  display: none !important;
}

._39224f25 {
  opacity: 0 !important;
  pointer-events: none !important;
}

._530b89ea {
  -webkit-perspective: 100rem;
          perspective: 100rem;
}

/*
 * Font rendering
 */

._67383a03 {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

._1d87a344 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Font styling
 */

/* Weights */

._80765f55 {
  font-weight: 300;
}

.eddf1b8e {
  font-weight: 400;
}

.b0415fc4 {
  font-weight: 500;
}

._23ee746f {
  font-weight: 600;
}

/* Sizes */

._408ec770 {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
}

.b1bfb616 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
}

._4fd271c8 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._78852320 {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._7b343263 {
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
}

._457c8830 {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 40px;
  line-height: 4rem;
}

._0fa9988e {
  font-size: 48px;
  font-size: 4.8rem;
  line-height: 56px;
  line-height: 5.6rem;
}

._5c595563 {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 16px;
    line-height: 1.6rem;
  }

._038368a4 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 20px;
    line-height: 2rem;
  }

.d751c599 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

._05e4e37c {
    font-size: 20px;
    font-size: 2rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

.c55e5d63 {
    font-size: 26px;
    font-size: 2.6rem;
    line-height: 32px;
    line-height: 3.2rem;
  }

._89e994ac {
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 40px;
    line-height: 4rem;
  }

._4d458044 {
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 56px;
    line-height: 5.6rem;
  }

@media (min-width: 45em) {
  .a03a455f {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  ._2322b13d {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ._5299a91d {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  ._75fe2d9a {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  ._197ea50d {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  .d4589306 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  ._11de0e22 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

@media (min-width: 63.75em) {
  ._2883ce69 {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  ._73c8ff04 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ._9f8fe2a5 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  ._1e305b60 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  ._2135dfb6 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._73b44b4e {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  ._582c296b {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

._3ff5d0b6 {
  line-height: 24px;
  line-height: 2.4rem;
}

._58321ce7 {
  line-height: 40px;
  line-height: 4rem;
}

._1db108aa {
  line-height: 19px;
  line-height: 1.9rem;
}

._7d090c6d {
  line-height: 13px;
  line-height: 1.3rem;
}

/* Text margins */

/* TODO: WFE-7446 put text margins to text.css file */

/* margin none rule needs to be before others as it needs to be overridden by them */

._17d3fa36 {
  margin: 0;
}

._4c7facc9 {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

._7b683f8b {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

.df59bc7a {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.bae4848b {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.afbfd92f {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.ff7f3fdb {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._691115fa {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

@media (min-width: 45em) {
  .c61cd786 {
    margin-bottom: 0.8rem;
  }
  .d87a61d1 {
    margin-bottom: 0.8rem;
  }
  ._18c65204 {
    margin-bottom: 1.6rem;
  }
  .c1c04740 {
    margin-bottom: 1.6rem;
  }
  .e40b322f {
    margin-bottom: 1.6rem;
  }
  ._640fa5bd {
    margin-bottom: 1.6rem;
  }
  .b0517d52 {
    margin-bottom: 1.6rem;
  }
}

@media (min-width: 63.75em) {
  ._63feb9bb {
    margin-bottom: 0.8rem;
  }
  .b95efc95 {
    margin-bottom: 0.8rem;
  }
  ._50455a33 {
    margin-bottom: 1.6rem;
  }
  ._19fd8db2 {
    margin-bottom: 1.6rem;
  }
  ._9c94b6ac {
    margin-bottom: 1.6rem;
  }
  ._04602cb3 {
    margin-bottom: 1.6rem;
  }
  ._1e6802ac {
    margin-bottom: 1.6rem;
  }
}

._3ebc2173 {
  margin-left: 4px;
  margin-left: 0.4rem;
}

._034ebc3d {
  margin-left: 8px;
  margin-left: 0.8rem;
}

._3134a020 {
  margin-left: 12px;
  margin-left: 1.2rem;
}

._35e7e904 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

.e44dbd0e {
  margin-left: auto;
}

.cced4919 {
  margin-right: 4px;
  margin-right: 0.4rem;
}

._7cc97297 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

.a96300da {
  margin-right: 12px;
  margin-right: 1.2rem;
}

.b01d66d6 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

._5dcfe60a {
  margin-right: auto;
}

._6fa2cb96 {
}

/* Styles */

.f3d81b24 {
  font-style: italic;
}

.e8e880a4 {
  text-transform: uppercase;
}

.d141d8d7 {
  text-transform: lowercase;
}

._082929b6 {
  text-decoration: line-through;
}

._1fe3787f {
  white-space: nowrap;
}

.a1dbe763 {
  text-decoration: underline;
}

.c8afa72e {
  font-weight: 600 !important;
}

._1da0ba5c {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/*
 * Truncation
 */

.e0d879c2 {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

._18e1add6 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

._099e681b {
  -webkit-line-clamp: 1;
}

._311cdf12 {
  -webkit-line-clamp: 2;
}

.ba788646 {
  -webkit-line-clamp: 3;
}

.d5bad389 {
  -webkit-line-clamp: 4;
}

._6b3f58d1 {
  -webkit-line-clamp: 5;
}

._94da242d {
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

.d43297ac {
  color: rgb(237, 237, 237);
}

/*
 * Color
 */

/* Text colors */

.e1dcdddb,
._3b22edf5 {
  color: rgb(255, 102, 0);
}

.cc6bbaee {
  color: rgb(50, 60, 65);
}

.fb09c024 {
  color: rgb(111, 118, 122);
}

._27ec4c0e {
  color: rgb(255, 255, 255);
}

.be0b0013 {
  color: rgb(91, 99, 103);
}

._1b9c6541 {
  color: rgb(208, 2, 27);
}

._8dbb1774 {
  color: rgb(166, 166, 166);
}

._716371d9 {
  color: inherit;
}

/* Background colors */

.ec0b9044 {
  background-color: white;
}

._7daa2084 {
  background-color: rgb(242, 242, 242);
}

.f2176795 {
  background-color: rgb(241, 239, 238);
}

._522cb301 {
  background-color: rgb(60, 60, 60);
}

._9f213839 {
  background-color: rgb(237, 234, 227);
}

._52041173 {
  background-color: rgb(202, 195, 187);
}

._72751b3c {
  background-color: rgb(250, 250, 248);
}

._1a604690 {
  background-color: rgb(242, 240, 238);
}

._2da81c43 {
  background-color: rgb(234, 235, 236);
}

/*
 * Drop shadow
 */

._08e1ec01 {
  -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
          box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
}

._37124063 {
  -webkit-box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
          box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
}

.ad708d25 {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.bc8180c5 {
  padding-top: 16px !important;
  padding-top: 1.6rem !important;
}

._71224ad4 {
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

.f8ca0ed6 {
  padding-top: 24px;
  padding-top: 2.4rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

._302cd55e {
  padding-left: 16px !important;
  padding-left: 1.6rem !important;
  padding-right: 16px !important;
  padding-right: 1.6rem !important;
}

._23fefcbc {
  padding-top: 24px;
  padding-top: 2.4rem;
}

.e7802484 {
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

._4dd0e591 {
  padding-top: 4px;
  padding-top: 0.4rem;
}

.cd9ee586 {
  padding-left: 0 !important;
}

._8722f32c {
  padding-bottom: 0 !important;
}

.da761a1a {
  padding: 0 !important;
}

.d1d05c97 {
  padding-left: 8px !important;
  padding-left: 0.8rem !important;
}

._96d47d13 {
  padding-right: 24px !important;
  padding-right: 2.4rem !important;
}

/*
 * Shaping
 */

._927c3047 {
  border-radius: 20rem;
}

._687beec8 {
  border-radius: 0.4rem;
}

/*
 * list
 */

._0811acb9 {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.cadead6e {
  text-decoration: none
}

.cadead6e:hover {
  text-decoration: underline;
}

._1a3f8161 {
  text-decoration: underline
}

._1a3f8161:hover {
  text-decoration: none;
}

.a79d626d {
  text-decoration: underline;
  -webkit-transition: color 200ms;
  transition: color 200ms
}

.a79d626d:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

.a8075c22 {
  text-transform: none;
}

._71c0ea8f {
  border-top: 1px solid rgb(166, 166, 166);
  border-top: 0.1rem solid rgb(166, 166, 166);
}

.a8f0fa18 {
  padding: 8px;
  padding: 0.8rem;
}

/*
 * Grid
 */

._22aca28e {
  padding-bottom: 40px;
  padding-bottom: 4rem;
}

.af671f94 {
  padding-bottom: 4px;
  padding-bottom: 0.4rem;
}

@media (max-width: 44.99em) {
  ._22aca28e {
    padding-bottom: 2rem;
  }
}

._22aca28e::after,
.af671f94::after {
  content: '';
  position: absolute;
  width: calc(100% - 1.8rem);
  height: 1px;
  height: 0.1rem;
  bottom: 0;
  right: 0;
  background: rgb(166, 166, 166);
  margin-left: 24px;
  margin-left: 2.4rem;
}

/*
 * Separators
 */

.ed445f61 {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-top: 0.1rem solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  border-bottom: 0.1rem solid rgba(255, 255, 255, .3);
}

.a2cf7821 {
  margin-top: 30px;
  margin-top: 3rem;
  margin-bottom: 30px;
  margin-bottom: 3rem;
}

._14c6b67a {
  border-color: rgb(237, 237, 237) !important;
}

._25456df4 {
  border-color: rgb(166, 166, 166) !important;
}

._4fc3aee3 {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237)
}

._4fc3aee3:first-child {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
}

.d212fbf1 {
  border-bottom: 1px solid rgb(210, 210, 210);
  border-bottom: 0.1rem solid rgb(210, 210, 210)
}

.d212fbf1:first-child {
  border-top: 1px solid rgb(210, 210, 210);
  border-top: 0.1rem solid rgb(210, 210, 210);
}

._571cb73f {
  border-bottom: 1px solid rgb(60, 60, 60);
  border-bottom: 0.1rem solid rgb(60, 60, 60)
}

._571cb73f:first-child {
  border-top: 1px solid rgb(60, 60, 60);
  border-top: 0.1rem solid rgb(60, 60, 60);
}

/*
 * https://webaim.org/techniques/css/invisiblecontent/
 * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_screen-reader.scss
 */

.b7c5dba4 {
  position: absolute;
  /* stylelint-disable */
  width: 1px;
  height: 1px;
  /* stylelint-enable */
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  border: 0;
}

/**
 * Remove native input clear button.
 * See https://github.com/necolas/normalize.css/commit/f7c98c4c859c15363763f10a439b63d85b9afba0#diff-bb3dde41d97f19be8ab7b4780a915d5e
 */

[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/**
 * Add outline to input boxes when in desktop view to avoid ios safari bug.
 */

._3e0a56d3 {
  outline: none;
}

@media (min-width: 63.75em) {

  ._3e0a56d3:focus {
    outline: 0.4rem auto -webkit-focus-ring-color;
  }
}

._7b8459d0 {
  pointer-events: none;
  cursor: not-allowed;
}

._449c7e8f input[type='number'] {
  -moz-appearance: textfield
}

._449c7e8f input[type='number']::-webkit-inner-spin-button,
  ._449c7e8f input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/**
 * Full width content, break out of grid
 */

.a8e4457c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (min-width: 63.75em) {

  .a8e4457c {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

._2cf5ecfb {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  ._2cf5ecfb {
    width: 140rem;
  }
}

.f2333c13 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  .f2333c13 {
    width: 100vw;
  }
}

/*
 * Margins
 */

.cfc22ca0 {
  margin: 0 !important;
}

._8fb580b5 {
  margin-top: 0 !important;
}

.f49284ee {
  margin-bottom: 0 !important;
}

._48443ec9 {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
}

._44b2bd2b {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
}

._3cdebf7e {
  margin-top: 48px !important;
  margin-top: 4.8rem !important;
}

._4f2497a7 {
  margin-top: 64px !important;
  margin-top: 6.4rem !important;
}

.e3fe5815 {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
}

._469236f5 {
  margin-top: 4px !important;
  margin-top: 0.4rem !important;
}

._5ab4ad3d {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
}

._4ee4d75b {
  margin-top: 20px !important;
  margin-top: 2rem !important;
}

._0b6c5b16 {
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

._0c0e25e7 {
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

.a3b32974 {
  margin-bottom: 40px !important;
  margin-bottom: 4rem !important;
}

.f000f876 {
  margin-bottom: 48px !important;
  margin-bottom: 4.8rem !important;
}

._24289c42 {
  margin-bottom: 56px !important;
  margin-bottom: 5.6rem !important;
}

._58ceff53 {
  margin-bottom: 64px !important;
  margin-bottom: 6.4rem !important;
}

._49e8bd5b {
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

.ee063513 {
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

.fc7d4395 {
  margin-bottom: 4px !important;
  margin-bottom: 0.4rem !important;
}

._27ae1713 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

._11397f14 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

.e11e4e7e {
  margin-right: 24px;
  margin-right: 2.4rem;
}

._53882f75 {
  margin-right: 32px;
  margin-right: 3.2rem;
}

._2cdf0ad3 {
  margin-left: 32px;
  margin-left: 3.2rem;
}

.f05c2e97 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._45144b29 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

.a7a66925 {
  margin-left: 24px;
  margin-left: 2.4rem;
}

._326aa0ae {
  margin-left: auto !important;
  margin-right: auto !important;
}

._9d1d114d {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

.c65cb41d {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

._1993f4e6 {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

.b912baae {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

/* Font Face */

._80765f55 {
  font-family: 'GoodHome-Light', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.b0415fc4 {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._23ee746f {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* Shared imports */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

html {
  font-size: 62.5%;
}

html,
body {
  width: 100%;
  max-width: 100vw;
  height: auto;
  min-height: 100%; /* https://bugs.webkit.org/show_bug.cgi?id=141832 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

dt,
h1,
h2,
h3,
h4,
legend,
strong,
th {
  font-weight: bold;
}

button,
optgroup,
select,
input,
textarea {
  font-family: 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  background-color: inherit;
}

p,
ul,
ol {
  margin: revert;
}

i {
  font-style: italic;
}

._68dc9c09 {
  font-family: 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  font-size: 10px;
  font-size: 1rem;
  color: rgb(50, 60, 65);
  width: 100%;
}

._68dc9c09 input {
    background-color: revert;
  }

/* Only show outlines when using keyboard navigation */

*:focus:not(.focus-visible) {
  outline: none;
}

input[type='password'] {
  /* -apple-system font has fat dots */
  font-family: sans-serif;
}

.font-kf-ready ._68dc9c09 {
  font-family: 'GoodHome', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif, sans-serif;
}

.font-kf-ready {/*WFE-11644 fixed overriding font-family for bazaarvoice */
}

.font-kf-ready
    #content
    *:not([class^='bv-author-'])
    *:not([id='energy-rating-label']) {/*Fix for Site Builder until they update the font */
  font-family: 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif, 'GoodHome', sans-serif !important;
}

/*
 * z-index
 */

.ff725305 {
  z-index: 1;
}

.ec5a2c81 {
  z-index: 80;
}

.fd6d49fe {
  z-index: 80;
}

.e573735c {
  z-index: 90;
}

.a4e3f11d {
  z-index: 115;
}

.b9864225 {
  z-index: 1000;
}

._02c78e89 {
  z-index: 1100;
}

._31bbe609 {
  z-index: 10000;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

.ccb9d67a {
}

.ccb9d67a > a {
    color: inherit;
  }

/*
  Pains me to keep doing this, but necessary to
  override sitebuilder css
*/

/* TODO: This it to be removed once we make sure sitebuilder css doesn't hijack our h1s */

h1._1c13b5e2 {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  font-family: inherit
}

h1._1c13b5e2._4e774eaa {
  font-weight: 400;
}

h1._1c13b5e2._266816c0 {
  font-weight: 600;
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

h1._1c13b5e2._07c259f2 {
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
}

h1._1c13b5e2.d4f5ae34 {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 40px;
  line-height: 4rem;
}

h1._1c13b5e2._13487bbc {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
}

h1._1c13b5e2.b45cdbec {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
}

h1._1c13b5e2.fae1c5c8 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

h1._1c13b5e2._6ba14bc3 {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
}

h1._1c13b5e2._46794554 {
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
}

h1._1c13b5e2._2db903fa {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 40px;
  line-height: 4rem;
}

h1._1c13b5e2.c7e4e04b {
  font-size: 48px;
  font-size: 4.8rem;
  line-height: 56px;
  line-height: 5.6rem;
}

@media (min-width: 45em) {

  h1._1c13b5e2._23a6a1d7 {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }

  h1._1c13b5e2._75c8ef92 {
    font-size: 1.4rem;
    line-height: 2rem;
  }

  h1._1c13b5e2._4a8f15b7 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }

  h1._1c13b5e2._174f76ff {
    font-size: 2rem;
    line-height: 2.4rem;
  }

  h1._1c13b5e2._5bfe1305 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }

  h1._1c13b5e2.f03bd60e {
    font-size: 3.2rem;
    line-height: 4rem;
  }

  h1._1c13b5e2._8a66fa89 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

@media (min-width: 63.75em) {

  h1._1c13b5e2._6b297b57 {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }

  h1._1c13b5e2.b6169587 {
    font-size: 1.4rem;
    line-height: 2rem;
  }

  h1._1c13b5e2._22145409 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }

  h1._1c13b5e2._7c4dee8a {
    font-size: 2rem;
    line-height: 2.4rem;
  }

  h1._1c13b5e2.fcf8ebfc {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }

  h1._1c13b5e2.c7d538a7 {
    font-size: 3.2rem;
    line-height: 4rem;
  }

  h1._1c13b5e2._9204f653 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

h1._58b3d2d9._75d33510,
h1._1c13b5e2._75d33510,
h2._75d33510 {
  text-transform: none;
}

._629706c3 {
  margin-top: 32px;
  margin-top: 3.2rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.fc3450bb {
  fill: rgb(255, 102, 0);
}

._347a72a5 {
  fill: rgb(239, 73, 0);
}

._539636fc {
  stroke: rgb(239, 73, 0);
}

._44352c34 {
  stroke: rgb(255, 102, 0);
}

._070bb028 {
  fill: rgb(50, 60, 65);
}

._54ba793a {
  fill: rgb(255, 255, 255);
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/* Some non-standard icon variables and classes */

._601b6d43 {
  display: block;
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

._601b6d43 svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

._8589b082 {
  width: 12px;
  width: 1.2rem;
  height: 12px;
  height: 1.2rem;
}

.a161d567 {
  width: 16px;
  width: 1.6rem;
  height: 16px;
  height: 1.6rem;
}

.ffcd9c17 {
  width: 24px;
  width: 2.4rem;
  height: 24px;
  height: 2.4rem;
}

.b624439c {
  width: 36px;
  width: 3.6rem;
  height: 36px;
  height: 3.6rem;
}

._1114b979 {
  width: 48px;
  width: 4.8rem;
  height: 48px;
  height: 4.8rem;
}

._378f1788 {
  width: 92px;
  width: 9.2rem;
  height: 92px;
  height: 9.2rem;
}

.a6fc7076 {
  width: 120px;
  width: 12rem;
  height: 120px;
  height: 12rem;
}

.b3095e85 {
  display: inline-block;
  vertical-align: bottom;
}

._2029ec4c {
  display: block;
  width: 60px;
  width: 6rem;
  height: 60px;
  height: 6rem;
}

._2029ec4c svg {
    position: relative;
    width: 100%;
    height: auto;
  }

._2e6dd2f4 {
  margin-right: 4px;
  margin-right: 0.4rem;
}

._78a4de80 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

.b218831e {
  margin-right: 16px;
  margin-right: 1.6rem;
}

.ca31de4a {
  margin-left: 4px;
  margin-left: 0.4rem;
}

.b342201c {
  margin-left: 8px;
  margin-left: 0.8rem;
}

._17184289 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._704f9672 svg {
    fill: currentColor;
  }

._41e35d11 svg {
    fill: rgb(50, 60, 65);
  }

._82a13eaa svg {
    fill: rgb(111, 118, 122);
  }

._6110405c svg {
    fill: rgb(255, 255, 255);
  }

._60a7f266 svg {
    fill: rgb(86, 86, 86);
  }

.ecb06f30 svg {
    fill: rgb(166, 166, 166);
  }

._5843596e svg {
    fill: rgb(237, 237, 237);
  }

.cdca40e0 svg {
    fill: rgb(50, 60, 65);
  }

._84056b2a svg {
    fill: rgb(224, 224, 224);
  }

._8de3692b svg {
    fill: rgb(255, 255, 255);
  }

._46d4dddf svg {
    fill: rgb(255, 102, 0);
  }

._3357ca93 svg {
    fill: rgb(255, 255, 255);
  }

.a3e9c2bc svg {
    fill: rgb(255, 255, 255);
  }

._9e9e93b4 svg {
    fill: rgb(50, 60, 65);
  }

._186fab3e svg {
    fill: rgb(208, 2, 27);
  }

.b6d089b2 svg {
    fill: rgb(121, 184, 67);
  }

._8138c841 svg {
    fill: white;
  }

/* These two are used in places that are liable to change design very soon
   (lazy loading error widget and facets)
   Leaving them here for now */

.f57299ce {
  width: 32px;
  width: 3.2rem;
  height: 32px;
  height: 3.2rem;
  -webkit-transition: opacity 0.1s ease-out;
  transition: opacity 0.1s ease-out;
}

._79e173c0 {
  margin-top: 3px;
  margin-top: 0.3rem;
  width: 18px;
  width: 1.8rem;
  height: 18px;
  height: 1.8rem;
}

._59dffe79 {
  width: 80px;
  width: 8rem;
  height: 26.666px;
  height: 2.66667rem;
}

._52d2ec08 {
  width: 45px;
  width: 4.5rem;
  height: 45px;
  height: 4.5rem;
}

._04c74db3 {
  width: 152px;
  width: 15.2rem;
  height: 50.666px;
  height: 5.06667rem;
}

._5aabee15 {
  width: 48px;
  width: 4.8rem;
  height: 30px;
  height: 3rem;
}

._5aabee15 svg {
    overflow: visible;
  }

._5e9b9d6e svg {
  pointer-events: none;
}

svg._0b568d92 {
  display: none;
  position: static;
  height: 46px;
  height: 4.6rem;
}

@media (min-width: 45em) {

  svg._0b568d92 {
    display: block;
  }
}

svg.e320cd3b {
  position: static;
  height: 33px;
  height: 3.3rem;
}

@media (min-width: 45em) {

  svg.e320cd3b {
    display: none;
  }
}

@media (min-width: 63.75em) {

  svg._0fedcce3 {
    width: 8rem;
    height: 5rem;
  }
}

._28217be7 {
  position: static;
  display: none;
}

@media (min-width: 63.75em) {

  ._28217be7 {
    display: block;
  }
}

.f402e929 {
  position: static;
  display: none;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  .f402e929 {
    display: block;
  }
}

.e5dbaac2 {
  position: static;
  display: none;
}

@media (max-width: 44.99em) {

  .e5dbaac2 {
    display: block;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.d8c493c8 {
  color: rgb(255, 102, 0);
}

.ca274437 {
  color: rgb(224, 224, 224);
}

._8e7098e2 {
  color: rgb(50, 60, 65);
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._89dd6ce1 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

._45e852d0 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 24px;
  height: 2.4rem;
}

._8e641aa1 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

._25e24299 {
  margin-left: 10px;
  margin-left: 1rem;
}

._6821ac21 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._50344329 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

.c8085845 {
  margin-right: 6px;
  margin-right: 0.6rem
}

.c8085845:last-of-type {
  margin-right: 0;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.dcd6ed9c {
  border-top: 1px solid rgb(242, 242, 242);
  border-top: 0.1rem solid rgb(242, 242, 242);
}

.b106558d {
  border-bottom: 1px solid rgb(242, 242, 242);
  border-bottom: 0.1rem solid rgb(242, 242, 242);
}

.b57d1e4a {
}

._1f0d4336 {
  padding: 0 8px;
  padding: 0 0.8rem;
}

._8651b34b {
  padding: 0 16px;
  padding: 0 1.6rem;
}

.add6a611 {
  padding: 0 24px;
  padding: 0 2.4rem;
}

.e5c3a4bc {
}

._66dabd6a::before,
  ._66dabd6a::after {
  content: '';
  width: 100%;
  display: table;
  overflow: hidden;
}

.dc2d5d41 {
}

.dc2d5d41::before {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

.dc2d5d41::after {
  margin-top: 8px;
  margin-top: 0.8rem;
}

._7be6e5a0 {
}

._7be6e5a0::before {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._7be6e5a0::after {
  margin-top: 16px;
  margin-top: 1.6rem;
}

._88658a14 {
}

._88658a14::before {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

._88658a14::after {
  margin-top: 24px;
  margin-top: 2.4rem;
}

._844ffc08::before {
  display: none;
}

._55befc13 {
}

._55befc13::before {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

.c915b30d {
}

.c915b30d::before {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._437b7ddd {
}

._437b7ddd::before {
  margin-bottom: 32px;
  margin-bottom: 3.2rem;
}

.e0657c31::before {
  display: none;
}

._63dd36ce {
}

._63dd36ce::after {
  margin-top: 8px;
  margin-top: 0.8rem;
}

._010bafa3 {
}

._010bafa3::after {
  margin-top: 16px;
  margin-top: 1.6rem;
}

.fb2f63bd {
}

.fb2f63bd::after {
  margin-top: 32px;
  margin-top: 3.2rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

._5db13f1e {
  z-index: 1;
}

._2408cb7b {
  z-index: 80;
}

.e4fbd8bb {
  z-index: 80;
}

._971110a5 {
  z-index: 90;
}

.d89983eb {
  z-index: 115;
}

._9c0e52f3 {
  z-index: 1000;
}

.e3c2f95d {
  z-index: 1100;
}

.f93d688d {
  z-index: 10000;
}

.de91914d {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1100;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  -webkit-animation: _94852f3c 200ms;
          animation: _94852f3c 200ms;
}

._80b20501 {
  max-height: 100%; /* iOS9 sizes too big without this for some reason */
}

._078ff184 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.c69fdf9a {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.e294a803 {
  background-color: transparent;
}

.e4656b5f {
  background-color: rgba(0, 0, 0, .2);
}

.e9bac90a {
  background-color: rgba(0, 0, 0, .5);
}

._84a70094 {
  background-color: rgba(0, 0, 0, .8);
}

._7cb823af {
  padding: 24px;
  padding: 2.4rem;
}

._28384f5c {
  padding: 0;
}

._12c51603 {
  position: relative;
}

._12c51603 > *:first-child {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.bf450d58 {
  width: 100%;
}

._9fea2803 {
  z-index: 60;
}

._791967fa ._9fea2803 {
  position: sticky;
  top: 56px;
  top: 5.6rem;
}

@media (min-width: 63.75em) {

  ._791967fa ._9fea2803 {
    top: 0;
  }
}

.e9b42d17 ._9fea2803 {
  position: sticky;
  top: 104px;
  top: 10.4rem;
}

@media (min-width: 63.75em) {

  .e9b42d17 ._9fea2803 {
    top: 0;
  }
}

._026782f5 {
  z-index: 60;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

@-webkit-keyframes _94852f3c {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes _94852f3c {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*
 * z-index
 */

._0206033d {
  z-index: 1;
}

._40aaf790 {
  z-index: 80;
}

.dd0d7330 {
  z-index: 80;
}

._79a22c9d {
  z-index: 90;
}

.f82ad378 {
  z-index: 115;
}

._60596acf {
  z-index: 1000;
}

._61cbb621 {
  z-index: 1100;
}

._98694853 {
  z-index: 10000;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.fd5208d7 {
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 60;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

.d3ee5fa9 {
  z-index: 1;
}

._222434f5 {
  z-index: 80;
}

.e2234e4c {
  z-index: 80;
}

._415f9a5d {
  z-index: 90;
}

.d95d8fe1 {
  z-index: 115;
}

._82349ffe {
  z-index: 1000;
}

._8c47f411 {
  z-index: 1100;
}

._1fb83527 {
  z-index: 10000;
}

._85e96be4 {
  margin: 0 -16px;
  margin: 0 -1.6rem;
}

._573aed22 {
}

.fa3136f2 {
}

@media (min-width: 45em) {

  .fa3136f2 {
    margin-right: 0;
    margin-left: 0;
  }
}

._925426b8 {
}

@media (min-width: 63.75em) {

  ._925426b8 {
    margin-right: 0;
    margin-left: 0;
  }
}

._3424f648 {
  margin-top: -16px;
  margin-top: -1.6rem;
}

._321a005b {
  margin-bottom: -16px;
  margin-bottom: -1.6rem;
}

._8a7bde17 {
  margin: 0 -8px;
  margin: 0 -0.8rem;
}

.caac99b5 {
  margin-top: -8px;
  margin-top: -0.8rem;
}

._25aac5b2 {
  margin-bottom: -8px;
  margin-bottom: -0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._667465c6 {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}

.f161b5c0 {
  max-width: 1020px;
  max-width: 102rem;
}

@media (min-width: 63.75em) {
  .f161b5c0 {
    max-width: 140rem;
  }
}

._2658d598 {
}

.cfff3e27 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._15dcaa09 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  padding-left: 20px;
  padding-left: 2rem;
  margin-left: 8px;
  margin-left: 0.8rem;
  list-style: disc;
}

._744df572 {
  position: relative;
}

._2fc6e0e9 {
}

.ecd7e7b7 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

._78f9416e {
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
}

.badac4ce {
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}

.b8aed383 {
  -webkit-transition-duration: 0ms;
          transition-duration: 0ms;
}

.ce5065a9 {
  -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
}

._6eab609a {
}

._691370ab {
}

._1c36caff {
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.a172d759 {
  position: relative;
  width: 48px;
  width: 4.8rem;
  height: 48px;
  height: 4.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 16px 0 0;
  margin: 0 1.6rem 0 0;
}

.a172d759 .ab2a6b26 {
    position: absolute;
    text-align: center;
    width: 48px;
    width: 4.8rem;
    height: 48px;
    height: 4.8rem;
    left: 0;
  }

.a172d759 ._0e173f78,
  .a172d759 ._5e9091c5 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 0 auto;
    font-weight: bold;
  }

.a172d759 ._0e173f78 {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1 1;
    text-transform: uppercase;
    font-size: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.6;
    margin-top: 8px;
    margin-top: 0.8rem;
  }

.a172d759 ._5e9091c5 {
    -webkit-box-flex: 2;
        -ms-flex: 2;
            flex: 2 1;
    font-size: 24px;
    font-size: 2.4rem;
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._788bb96b {
  width: 112px;
  width: 11.2rem;
  height: 60px;
  height: 6rem;
  overflow: hidden;
  border-radius: 0.4rem;
}

._564fede7 {
  top: 0;
  left: 0;
  -webkit-transform: none;
          transform: none;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.b5a99991 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

.b5a99991 a {
    color: rgb(50, 60, 65);
  }

._62387d59 {
  width: 48px;
  width: 4.8rem;
  height: 48px;
  height: 4.8rem;
  margin: 0 auto;
}

._698f2634 {
  text-align: center;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._9692743a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) {

  ._9692743a {
    margin-bottom: 0.8rem;
  }
}

.b70c07f4 {
  margin-bottom: 0;
}

.eb0abae2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.a26f4ffc {
  font-size: 16px;
  font-size: 1.6rem;
}

._786828c0 {
  float: right;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._6d1d08a2 {
  cursor: pointer;
  color: rgb(50, 60, 65);
  text-decoration: underline;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._5e8eddb3 {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
  width: 100%;
}

._5e8eddb3 th,
  ._5e8eddb3 td {
    padding: 8px 0;
    padding: 0.8rem 0;
    font-size: inherit;
    line-height: inherit;
  }

@media (min-width: 45em) {

  ._5e8eddb3 {
    font-size: 1.6rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}
/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/
/* 1180 / 16 */
/* 1179 / 16 */
/* 1020 / 16 */
/* 720 / 16 */
/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */
/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */
/* TODO: Refactor
  These media queries must match the text width in the USP bar: */
/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */
/* 350 / 16 */
/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */
/* stylelint-disable */
/* stylelint-enable */
:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}
:root {

  /* Buttons */

  /* Elements */
}
:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}
._69dddd23 {
  font-size: 14px;
  font-size: 1.4rem;
  vertical-align: super;
  line-height: 1;
}
._4e80f7be {
  white-space: nowrap;
}
.b00398fe,
._9c27b45e,
._5d0d0246,
._9535a39f {
}
.b00398fe {
  color: rgb(50, 60, 65);
}
._9c27b45e {
  color: rgb(111, 118, 122);
}
._265f0628,
.b5b9b16f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
._69ff30e4,
._7d548b10 {
  text-decoration: line-through;
  white-space: nowrap;
}
.b00398fe,
._15cfaa96 {
  white-space: nowrap;
}
._9535a39f {
  color: rgb(255, 102, 0);
}
._49aafbcf {
  display: inline-block;
  white-space: pre;
}
._36cb0914 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
._79be6f7f {
  text-align: left;
  margin-right: auto;
  margin-bottom: 0;
}
._0eba27ec {
  text-align: right;
  margin-left: auto;
}
._36cb0914:empty {
  display: none;
}
/* Variation Overrides (don't use compose as order precendence isn't affected) */
._5a52d7af {
  vertical-align: baseline;
}
._5a52d7af,
._438a21bf {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
}
._10aed182 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}
@media (max-width: 44.99em) {
  ._774163b8,
._21dc035c {
    font-size: 2rem;
    line-height: 2.4rem;
    vertical-align: baseline;
  }
}
._87a93722,
._8da52348 {
  font-weight: 400;
}
._8da52348 {
  color: rgb(50, 60, 65);
}
.d81cc86c {
}
@media (max-width: 44.99em) {
  .d81cc86c {
    font-size: 1.4rem;
  }
}
@media (min-width: 45em) {
  ._774163b8 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}
._3dd4bd94,
._92688664,
._6919e4ed {
  vertical-align: baseline;
  vertical-align: initial;
}
._2391cb65,
._3dd4bd94 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}
@media (min-width: 45em) {
  .a4fec040 {
    margin-left: 0.4rem;
  }
}
.a4fec040,
._92688664 {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
}
@media (min-width: 63.75em) {
  .a4fec040,
._92688664 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
}
._00a7db30,
._6919e4ed {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}
._032377f6 {
  vertical-align: baseline;
}
@media (min-width: 45em) {
  ._21dc035c {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}
._95f5f8c6 {
  text-align: left;
}
.d1ec951e {
  display: inline-block;
}
.cbe14bfe,
.a29199d7 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}
._874a70dc {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}
.b25ad5d5 {
  display: inline-block;
}
.e08fbcc0 {
  margin-right: 8px;
  margin-right: 0.8rem;
  white-space: nowrap;
}
._799d2135 {
  margin-left: 8px;
  margin-left: 0.8rem;
}
._86b78909 {
  display: inline
}
._86b78909::before {
  content: ' ';
}
._856efa03 {
  display: inline;
}

._6fa651f0 {
  width: 100%;
  margin: 0;
}

._543bbac0 {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._8a2e118a {
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
}

._21a702ae {
  border-color: rgb(166, 166, 166);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.fef30cae {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: wrap row;
          flex-flow: wrap row;
  margin-left: -16px;
  margin-left: -1.6rem;
  position: relative;
}

.cd501eaa {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

._668a60cf {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

._28f8457f {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._8d1a8b89 {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

._8c72692e {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.db3fa8b2 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._5f474aed {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._015f9261 {
  -webkit-box-pack: stretch;
      -ms-flex-pack: stretch;
          justify-content: stretch;
}

.f5a84fb4 {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._7d83d803 {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.c0e684dd {
  -ms-flex-flow: wrap;
      flex-flow: wrap;
}

._93d0129d {
  -ms-flex-flow: nowrap;
      flex-flow: nowrap;
}

._5c442f8c {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 16px;
  padding-left: 1.6rem;
}

._74299635 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }

.efcf0b2a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }

._8dee4360 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

._967f1a63 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }

/* The double class and decendent selector is a
    specificity hack to ensure props on GridItem
    override props on parent Grid */

.fef30cae.fef30cae > ._6c656aee,
  ._39c48f33 > ._5c442f8c {
    width: 100%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

.fef30cae.fef30cae > .d9044589,
  ._692f67b3 > ._5c442f8c {
    width: 50%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

.fef30cae.fef30cae > .d2783387,
  ._9a69862c > ._5c442f8c {
    width: 33.33333%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

.fef30cae.fef30cae > ._768105de,
  .a01f87c4 > ._5c442f8c {
    width: 25%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

.fef30cae.fef30cae > ._48bc234c,
  .f4f5fa63 > ._5c442f8c {
    width: 20%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

.fef30cae.fef30cae > ._86ee4657,
  .dda7032c > ._5c442f8c {
    width: 16.66667%;
  }

.fef30cae.fef30cae > ._22b6d98a,
  ._7ce8f676 > ._5c442f8c {
    width: 41.66667%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

.fef30cae.fef30cae > ._3ab68e5d,
  ._99a2c467 > ._5c442f8c {
    width: 66.66667%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

.fef30cae.fef30cae > ._4f957ee9,
  .aea6c50f > ._5c442f8c {
    width: 80%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

.fef30cae.fef30cae > .e9012c34,
  ._54fe1e64 > ._5c442f8c {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1 1;
    width: auto;
    width: initial;
  }

.fef30cae.fef30cae > ._337fb530,
  ._54fe1e64 > ._5c442f8c {
    width: auto;
    width: initial;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

._2e331fc6 {
    margin-left: -64px;
    margin-left: -6.4rem
  }

._2e331fc6 > ._5c442f8c {
  padding-left: 64px;
  padding-left: 6.4rem;
}

._23a6b487 {
    margin-left: -48px;
    margin-left: -4.8rem
  }

._23a6b487 > ._5c442f8c {
  padding-left: 48px;
  padding-left: 4.8rem;
}

._23b3e2bc {
    margin-left: -32px;
    margin-left: -3.2rem
  }

._23b3e2bc > ._5c442f8c {
  padding-left: 32px;
  padding-left: 3.2rem;
}

._5e7ce7a9 {
    margin-left: -24px;
    margin-left: -2.4rem
  }

._5e7ce7a9 > ._5c442f8c {
  padding-left: 24px;
  padding-left: 2.4rem;
}

._5db60f3e {
    margin-left: -16px;
    margin-left: -1.6rem
  }

._5db60f3e > ._5c442f8c {
  padding-left: 16px;
  padding-left: 1.6rem;
}

._66b53f29 {
    margin-left: -8px;
    margin-left: -0.8rem
  }

._66b53f29 > ._5c442f8c {
  padding-left: 8px;
  padding-left: 0.8rem;
}

._67db11bb {
    margin-left: -4px;
    margin-left: -0.4rem
  }

._67db11bb > ._5c442f8c {
  padding-left: 4px;
  padding-left: 0.4rem;
}

._380a0172 {
    margin-left: 0
  }

._380a0172 > ._5c442f8c {
  padding-left: 0;
}

._62954f66 {
    margin-top: -64px;
    margin-top: -6.4rem
  }

._62954f66 > ._5c442f8c {
  padding-top: 64px;
  padding-top: 6.4rem;
}

._36495152 {
    margin-top: -48px;
    margin-top: -4.8rem
  }

._36495152 > ._5c442f8c {
  padding-top: 48px;
  padding-top: 4.8rem;
}

.c49e056c {
    margin-top: -32px;
    margin-top: -3.2rem
  }

.c49e056c > ._5c442f8c {
  padding-top: 32px;
  padding-top: 3.2rem;
}

.a828f00c {
    margin-top: -24px;
    margin-top: -2.4rem
  }

.a828f00c > ._5c442f8c {
  padding-top: 24px;
  padding-top: 2.4rem;
}

._461d0ef9 {
    margin-top: -16px;
    margin-top: -1.6rem
  }

._461d0ef9 > ._5c442f8c {
  padding-top: 16px;
  padding-top: 1.6rem;
}

.eb93678b {
    margin-top: -8px;
    margin-top: -0.8rem
  }

.eb93678b > ._5c442f8c {
  padding-top: 8px;
  padding-top: 0.8rem;
}

.a17cb47e {
    margin-top: -4px;
    margin-top: -0.4rem
  }

.a17cb47e > ._5c442f8c {
  padding-top: 4px;
  padding-top: 0.4rem;
}

._22578610 {
    margin-top: 0
  }

._22578610 > ._5c442f8c {
  padding-top: 0;
}

._69515521 {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }

.d14853b2 {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }

._7473fcfd {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }

._29c81449 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }

._04aebe3f {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }

@media (min-width: 45em) {
  .d6ec0608 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  ._15f31d02 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .d495e592 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .ac14def5 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }

  /* The double class and decendent selector is a
    specificity hack to ensure props on GridItem
    override props on parent Grid */

  .fef30cae.fef30cae > ._8f3e1f04,
  ._28f32342 > ._5c442f8c {
    width: 100%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > .f591ac3e,
  .b12e4bf7 > ._5c442f8c {
    width: 50%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > .da668581,
  ._2cd52314 > ._5c442f8c {
    width: 33.33333%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > .d0e4aa27,
  .a43fcdab > ._5c442f8c {
    width: 25%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > ._731c390d,
  ._8776c544 > ._5c442f8c {
    width: 20%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > ._6305d5b3,
  ._7165493f > ._5c442f8c {
    width: 16.66667%;
  }

  .fef30cae.fef30cae > ._9f635fa1,
  ._36b463aa > ._5c442f8c {
    width: 41.66667%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > ._2a785ae9,
  ._9c8a8d00 > ._5c442f8c {
    width: 66.66667%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > ._1355e3e9,
  .eba74ee0 > ._5c442f8c {
    width: 80%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > ._63a088fa,
  ._33f454d0 > ._5c442f8c {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1 1;
    width: auto;
    width: initial;
  }

  .fef30cae.fef30cae > .bb40893f,
  ._33f454d0 > ._5c442f8c {
    width: auto;
    width: initial;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .afc5484f {
    margin-left: -6.4rem
  }

  .afc5484f > ._5c442f8c {
    padding-left: 6.4rem;
  }

  ._4986c306 {
    margin-left: -4.8rem
  }

  ._4986c306 > ._5c442f8c {
    padding-left: 4.8rem;
  }

  ._96ae37d3 {
    margin-left: -3.2rem
  }

  ._96ae37d3 > ._5c442f8c {
    padding-left: 3.2rem;
  }

  ._809630e5 {
    margin-left: -2.4rem
  }

  ._809630e5 > ._5c442f8c {
    padding-left: 2.4rem;
  }

  ._234adb76 {
    margin-left: -1.6rem
  }

  ._234adb76 > ._5c442f8c {
    padding-left: 1.6rem;
  }

  ._8fc94a0b {
    margin-left: -0.8rem
  }

  ._8fc94a0b > ._5c442f8c {
    padding-left: 0.8rem;
  }

  ._7c08c983 {
    margin-left: -0.4rem
  }

  ._7c08c983 > ._5c442f8c {
    padding-left: 0.4rem;
  }

  ._0562901a {
    margin-left: 0
  }

  ._0562901a > ._5c442f8c {
    padding-left: 0;
  }

  ._64c01ba9 {
    margin-top: -6.4rem
  }

  ._64c01ba9 > ._5c442f8c {
    padding-top: 6.4rem;
  }

  .d4281212 {
    margin-top: -4.8rem
  }

  .d4281212 > ._5c442f8c {
    padding-top: 4.8rem;
  }

  ._54241a4b {
    margin-top: -3.2rem
  }

  ._54241a4b > ._5c442f8c {
    padding-top: 3.2rem;
  }

  .bf0d960f {
    margin-top: -2.4rem
  }

  .bf0d960f > ._5c442f8c {
    padding-top: 2.4rem;
  }

  ._31e2eb3a {
    margin-top: -1.6rem
  }

  ._31e2eb3a > ._5c442f8c {
    padding-top: 1.6rem;
  }

  ._73891ad7 {
    margin-top: -0.8rem
  }

  ._73891ad7 > ._5c442f8c {
    padding-top: 0.8rem;
  }

  .f1547830 {
    margin-top: -0.4rem
  }

  .f1547830 > ._5c442f8c {
    padding-top: 0.4rem;
  }

  .ca8ebc68 {
    margin-top: 0
  }

  .ca8ebc68 > ._5c442f8c {
    padding-top: 0;
  }

  .a08a67b8 {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }

  ._7085734e {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }

  .a57807c3 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }

  .c7666214 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }

  .c0d92a84 {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}

@media (min-width: 63.75em) {
  ._7e9a1d68 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  ._1ce8c0ac {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .aee7c85a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  ._12114c5b {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }

  /* The double class and decendent selector is a
    specificity hack to ensure props on GridItem
    override props on parent Grid */

  .fef30cae.fef30cae > ._163d7375,
  ._2d120e3e > ._5c442f8c {
    width: 100%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > ._16507d1d,
  .c7f12620 > ._5c442f8c {
    width: 50%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > .b1189147,
  ._68cac309 > ._5c442f8c {
    width: 33.33333%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > ._520a0d12,
  ._8be00a1d > ._5c442f8c {
    width: 25%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > .ae468f67,
  .f79c72de > ._5c442f8c {
    width: 20%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > ._0f13f674,
  ._67942be2 > ._5c442f8c {
    width: 16.66667%;
  }

  .fef30cae.fef30cae > .c386ea9c,
  ._318688d4 > ._5c442f8c {
    width: 41.66667%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > .a5fc453e,
  .b050b860 > ._5c442f8c {
    width: 66.66667%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > .b04d3fe3,
  .c0e5b1b7 > ._5c442f8c {
    width: 80%;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  .fef30cae.fef30cae > ._65b51693,
  ._1d9b5ede > ._5c442f8c {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1 1;
    width: auto;
    width: initial;
  }

  .fef30cae.fef30cae > .b818a49b,
  ._1d9b5ede > ._5c442f8c {
    width: auto;
    width: initial;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
  }

  ._2c35ae0d {
    margin-left: -6.4rem
  }

  ._2c35ae0d > ._5c442f8c {
    padding-left: 6.4rem;
  }

  .a1f42357 {
    margin-left: -4.8rem
  }

  .a1f42357 > ._5c442f8c {
    padding-left: 4.8rem;
  }

  .c57dcf70 {
    margin-left: -3.2rem
  }

  .c57dcf70 > ._5c442f8c {
    padding-left: 3.2rem;
  }

  .bcb67041 {
    margin-left: -2.4rem
  }

  .bcb67041 > ._5c442f8c {
    padding-left: 2.4rem;
  }

  .b9c35376 {
    margin-left: -1.6rem
  }

  .b9c35376 > ._5c442f8c {
    padding-left: 1.6rem;
  }

  ._0b550a76 {
    margin-left: -0.8rem
  }

  ._0b550a76 > ._5c442f8c {
    padding-left: 0.8rem;
  }

  ._48315f41 {
    margin-left: -0.4rem
  }

  ._48315f41 > ._5c442f8c {
    padding-left: 0.4rem;
  }

  .e551c660 {
    margin-left: 0
  }

  .e551c660 > ._5c442f8c {
    padding-left: 0;
  }

  ._1d913548 {
    margin-top: -6.4rem
  }

  ._1d913548 > ._5c442f8c {
    padding-top: 6.4rem;
  }

  ._98d57167 {
    margin-top: -4.8rem
  }

  ._98d57167 > ._5c442f8c {
    padding-top: 4.8rem;
  }

  ._14a315de {
    margin-top: -3.2rem
  }

  ._14a315de > ._5c442f8c {
    padding-top: 3.2rem;
  }

  .fde64188 {
    margin-top: -2.4rem
  }

  .fde64188 > ._5c442f8c {
    padding-top: 2.4rem;
  }

  .f3a20a26 {
    margin-top: -1.6rem
  }

  .f3a20a26 > ._5c442f8c {
    padding-top: 1.6rem;
  }

  ._321950c5 {
    margin-top: -0.8rem
  }

  ._321950c5 > ._5c442f8c {
    padding-top: 0.8rem;
  }

  ._98153fd0 {
    margin-top: -0.4rem
  }

  ._98153fd0 > ._5c442f8c {
    padding-top: 0.4rem;
  }

  .b5a9a14d {
    margin-top: 0
  }

  .b5a9a14d > ._5c442f8c {
    padding-top: 0;
  }

  ._8e152247 {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }

  .fb678469 {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }

  ._068ba325 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }

  .f63bdc50 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }

  .c949bd54 {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}

._42d72338 {
}

._9e8253fa {
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

.efd1d1c9 {
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 20px;
  line-height: 2rem;
  font-weight: 400;
  color: rgb(50, 60, 65);
  margin: 0 0 8px;
  margin: 0 0 0.8rem;
  word-break: break-word;
}

._8c324afc {
  display: block;
}

.ef383166 {
  margin-top: 16px;
  margin-top: 1.6rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._5f88938e {
  font-weight: 500;
}

.af205e58 {
  margin-bottom: 4px;
  margin-bottom: 0.4rem;
}

._655cef86 {
  text-transform: uppercase;
}

.d7bfe26b {
  font-weight: 600;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/* 
  Imported from 
  https://experienceleague.adobe.com/docs/dynamic-media-developer-resources/library/viewers-aem-assets-dmc/spin/c-html5-spin-viewer-about.html?lang=en#spin
*/

.s7spinviewer {
    cursor: pointer
  }

.s7spinviewer.zoomed_out {
  cursor: url(/spa/images/_/_/kits-spin-viewer/src/assets/zoom_in.svg), pointer;
}

.s7spinviewer.zoomed_in {
  cursor: url(/spa/images/_/_/kits-spin-viewer/src/assets/zoom_out.svg), pointer;
}

.s7spinviewer .s7spinbuttons {
      visibility: hidden;
}

.s7spinviewer .s7fullscreenbutton {
      cursor: pointer;
      border-radius: 100%;
}

@media (min-width: 45em) {

  .s7spinviewer.s7touchinput .s7fullscreenbutton[selected][state] {
    width: 28px;
    width: 2.8rem;
    height: 28px;
    height: 2.8rem;
  }
}

@media (max-width: 44.99em) {

  .s7spinviewer.s7touchinput .s7fullscreenbutton[selected][state] {
    top: 20px;
    top: 2rem;
    width: 32px;
    width: 3.2rem;
    height: 32px;
    height: 3.2rem;
  }
}

@media (min-width: 45em) {

  .s7spinviewer.s7touchinput .s7fullscreenbutton[selected='true'][state] {
    top: 20px;
    top: 2rem;
  }
}

@media (min-width: 45em) and (max-width: 63.74em) {

  .s7spinviewer.s7touchinput .s7fullscreenbutton[selected='false'][state] {
    visibility: hidden;
  }
}

.s7spinviewer .s7fullscreenbutton::before {
      content: '';
      display: block;
      width: 28px;
      width: 2.8rem;
      height: 28px;
      height: 2.8rem;
      background-color: rgb(255, 255, 255);
      background-image: url(/spa/images/_/_/kits-spin-viewer/src/assets/360viewer-sprite.svg);
      background-size: 12rem 8rem;
      border-radius: 100%;
}

@media (min-width: 45em) {

  .s7spinviewer .s7fullscreenbutton::before {
    width: 28px;
    width: 2.8rem;
    height: 28px;
    height: 2.8rem;
  }
}

@media (max-width: 44.99em) {

  .s7spinviewer .s7fullscreenbutton::before {
    width: 32px;
    width: 3.2rem;
    height: 32px;
    height: 3.2rem;
  }
}

.s7spinviewer .s7fullscreenbutton[selected='true'][state='up']::before,
    .s7spinviewer .s7fullscreenbutton[selected='true'][state='over']::before,
    .s7spinviewer .s7fullscreenbutton[selected='true'][state='down']::before,
    .s7spinviewer .s7fullscreenbutton[selected='true'][state='disabled']::before {
      background-position: -46px
        74px;
      background-position: -4.6rem
        7.4rem;
      -webkit-box-shadow: 0 0 0.4rem 0 rgba(152, 152, 152, .5);
              box-shadow: 0 0 0.4rem 0 rgba(152, 152, 152, .5);
}

@media (max-width: 44.99em) {

  .s7spinviewer .s7fullscreenbutton[selected='true'][state='up']::before,
    .s7spinviewer .s7fullscreenbutton[selected='true'][state='over']::before,
    .s7spinviewer .s7fullscreenbutton[selected='true'][state='down']::before,
    .s7spinviewer .s7fullscreenbutton[selected='true'][state='disabled']::before {
    background-position: -44px
          76px;
    background-position: -4.4rem
          7.6rem;
  }
}

.s7spinviewer .s7fullscreenbutton[selected='false'][state='up']::before,
    .s7spinviewer .s7fullscreenbutton[selected='false'][state='over']::before,
    .s7spinviewer .s7fullscreenbutton[selected='false'][state='down']::before,
    .s7spinviewer .s7fullscreenbutton[selected='false'][state='disabled']::before {
      background-position: -6px
        74px;
      background-position: -0.6rem
        7.4rem;
}

.s7spinviewer .s7zoominbutton,
    .s7spinviewer .s7zoomoutbutton,
    .s7spinviewer .s7zoomresetbutton {
      visibility: hidden;
}

.s7spinviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='up'],
    .s7spinviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='over'],
    .s7spinviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='down'],
    .s7spinviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='disabled'] {
  top: 20px;
  top: 2rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
  Imported from http://kenwheeler.github.io/slick/.
*/

.slick-slider {
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

.slick-list:focus {
    outline: none;
  }

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
  }

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

.slick-slider .slick-track,
  .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    width: 100%;
  }

.slick-track::before,
  .slick-track::after {
    display: table;
    content: '';
  }

.slick-track::after {
    clear: both;
  }

.slick-loading .slick-track {
    visibility: hidden;
  }

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
  }

[dir='rtl'] .slick-slide {
    float: right;
  }

.slick-slide img {
    display: block;
  }

.slick-slide.slick-loading img {
    display: none;
  }

.slick-slide.dragging img {
    pointer-events: none;
  }

.slick-initialized .slick-slide {
    display: block;
  }

.slick-loading .slick-slide {
    visibility: hidden;
  }

.slick-arrow.slick-hidden {
    display: none;
  }

/* --------- Override Slick Carousel defaults in slick.css --------- */

.slick--ContentSlider.slick-slider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

.slick--ContentSlider .slick-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1 100%;
            flex: 1 1 100%;
    margin-bottom: 16px;
    margin-bottom: 1.6rem; /* Adjust margin to account for padding added */
    /* stylelint-disable */
    padding: 8px 0;
    padding: 0.8rem 0; /* Padding added to allow for feathered hover state on child content */
    /* stylelint-enable */
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    -webkit-transform: translateY(
      0.8rem * -1
    );
            transform: translateY(
      0.8rem * -1
    ); /* Adjust position to account for padding added */
  }

.slick--ContentSlider .slick-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    padding: 0;
  }

.slick--ContentSlider .slick-slide {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    float: none;
    height: auto;
    margin: 0;
  }

.slick--ContentSlider .slick-slide > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: auto;
            flex: auto; /* Fixes issue where slide with shrinks when the product title is short */
    margin: 0 12px;
    margin: 0 1.2rem;
    width: 100%; /* Fixes IE bug where flex width is incorrectly calculated */
  }

.slick--ContentSlider [data-arrow-direction='next'] {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
  }

.slick--ContentSlider [data-arrow-direction='previous'],
  .slick--ContentSlider [data-arrow-direction='next'] {
    margin-top: 6px;
    margin-top: 0.6rem;
  }

@media (any-pointer: none),
  (any-pointer: coarse),
  not (any-pointer: fine) {
  /* Design requested that the prev/next buttons should ideally never appear on a touch screen */

  .slick--ContentSlider [data-arrow-direction='previous'],
    .slick--ContentSlider [data-arrow-direction='next'] {
      display: none;
  }
}

/* ---------------------- Carousel Dots ---------------------- */

._7cbf2d50 {
  margin: 0 24px;
  margin: 0 2.4rem;
  padding: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

._7cbf2d50 li,
  ._7cbf2d50 button {
    width: 8px;
    width: 0.8rem;
    height: 8px;
    height: 0.8rem;
    cursor: pointer;
  }

._7cbf2d50 li {
    display: inline-block;
    border-radius: 50%;
    margin: 0;
    padding: 0;
    background: rgb(153, 153, 153);
    -webkit-transition: background 200ms ease-out;
    transition: background 200ms ease-out;
  }

._7cbf2d50 li + li {
    margin-left: 8px;
    margin-left: 0.8rem;
  }

._7cbf2d50 li.slick-active {
    background: rgb(255, 102, 0);
  }

._7cbf2d50 button {
    display: block;
    font-size: 0;
    line-height: 0;
    padding: 0;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
  }

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._20bdda9a {
  background: rgb(50, 60, 65);
  width: 24px;
  width: 2.4rem;
  height: 24px;
  height: 2.4rem;
  cursor: pointer;
}

._20bdda9a[disabled] {
  background: rgb(166, 166, 166);
  cursor: inherit;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
  Imported from http://kenwheeler.github.io/slick/.
*/

.slick-slider {
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

.slick-list:focus {
    outline: none;
  }

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
  }

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

.slick-slider .slick-track,
  .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    width: 100%;
  }

.slick-track::before,
  .slick-track::after {
    display: table;
    content: '';
  }

.slick-track::after {
    clear: both;
  }

.slick-loading .slick-track {
    visibility: hidden;
  }

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
  }

[dir='rtl'] .slick-slide {
    float: right;
  }

.slick-slide img {
    display: block;
  }

.slick-slide.slick-loading img {
    display: none;
  }

.slick-slide.dragging img {
    pointer-events: none;
  }

.slick-initialized .slick-slide {
    display: block;
  }

.slick-loading .slick-slide {
    visibility: hidden;
  }

.slick-arrow.slick-hidden {
    display: none;
  }

._91709346 {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

@media (max-width: 44.99em) {

  ._91709346._9be0cf4a {
    padding: 0.4rem;
  }
}

@media (max-width: 44.99em) {
  ._9be0cf4a {
    margin: auto 0;
  }
}

.touch .e942c5a2 {
    pointer-events: none;
  }

/* ---------------------- Main Carousel ---------------------- */

._40d18e16 {
  position: relative;
}

._40d18e16 .slick-slide {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 5px;
    padding: 0.5rem;
  }

@media (max-width: 44.99em) {

  ._40d18e16 .slick-list {
      height: calc(100vw - 11.5rem);
  }
}

.ccf4f411,
.bba00e12 {
  display: none;
  cursor: pointer;
}

@media (min-width: 63.75em) {

  .ccf4f411,
.bba00e12 {
    display: block;
  }
}

@media (min-width: 63.75em) {

  ._6d7624bf {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.e35f65df {
  width: 100%;
  outline: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 4px;
  padding: 0.4rem;
  position: relative;
}

@media (max-width: 44.99em) {

  .e35f65df {
    padding: 0 0 0 0.8rem;
  }
}

.c73bc7ba {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 16px;
  padding-top: 1.6rem;
  margin-right: auto;
  position: absolute;
  bottom: 16px;
  bottom: 1.6rem;
  left: 16px;
  left: 1.6rem;
  z-index: 1;
}

._59034fb6 {
  margin-right: 16px;
  margin-right: 1.6rem;
  cursor: pointer;
  background: rgb(255, 255, 255);
  border-radius: 1.6rem;
}

._17a657c7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  height: auto;
}

@media (min-width: 63.75em) {

  ._17a657c7 {
    height: 36.2rem;
    width: 100%;
  }
}

._17a657c7 > div:last-child {
    width: 100%;
}

._17a657c7 > div:last-child > div {
      width: 100%;
    }

/* ---------------------- Thumbnail Carousel ---------------------- */

.ab59fee9 {
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

@media (max-width: 44.99em) {

  .ab59fee9 {
    border-top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

._9be0cf4a {
  margin: auto 0
}

@media (max-width: 44.99em) {

  ._9be0cf4a > .ab59fee9 {
    display: none;
  }
}

@media (max-width: 44.99em) {

  ._9be0cf4a > ._40d18e16 .slick-list {
        height: 100%;
  }
}

._9be0cf4a .e35f65df {
  cursor: default;
}

@media (max-width: 44.99em) {

  ._9be0cf4a .e35f65df {
    padding: 0.4rem;
  }
}

.babe3b8d {
  display: block;
  position: relative;
  width: 50%;
  padding-top: 50%;
  margin: 0 auto;
}

@media (max-width: 44.99em) {

  .babe3b8d {
    width: 100%;
    padding-top: 100%;
  }
}

@media (min-width: 45em) {
  .babe3b8d {
    width: 100%;
    padding-top: 100%;
  }
}

@media (min-width: 63.75em) {
  .babe3b8d {
    width: 70%;
    padding-top: 70%;
  }
}

._9607861f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 100%;
  margin: 0 auto;
  height: 362px;
  height: 36.2rem;
  max-height: 100%;
}

@media (max-width: 44.99em) {

  ._9607861f {
    height: calc(100vw - 11.5rem);
  }
}

._9607861f._39b715d2 {
  height: 362px;
  height: 36.2rem;
  max-height: 100%;
}

@media (max-width: 44.99em) {

  ._9607861f._39b715d2 {
    height: calc(100vw - 11.5rem);
  }
}

@media (max-width: 44.99em) {

  ._39b715d2 .s7fullscreenbutton[selected='false'] {
    display: none;
  }
}

._95bd8951 {
  cursor: pointer;
}

.c1725634 {
  cursor: url("data:image/svg+xml, %3Csvg role='img' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' %3E%3Ctitle%3Ezoom%3C/title%3E%3Cpath fill='rgb(0, 0, 0)' fillRule='evenodd' d='M5 11.5C5 8.467 7.467 6 10.5 6S16 8.467 16 11.5 13.533 17 10.5 17A5.506 5.506 0 0 1 5 11.5m16.558 8.937l-4.085-4.085A8.45 8.45 0 0 0 19 11.5a8.5 8.5 0 1 0-8.5 8.5 8.45 8.45 0 0 0 4.852-1.527l4.085 4.086c.293.293.677.439 1.061.439a1.5 1.5 0 0 0 1.06-2.561' /%3E%3C/svg%3E"),
    pointer;
}

._9607861f ._4076e307 {
  position: static;
  -webkit-transform: none;
          transform: none;
  -o-object-fit: contain;
     object-fit: contain;
}

._9be0cf4a .babe3b8d {
  width: calc(100vmin - 18rem);
  padding-top: calc(100vmin - 18rem);
}

@media (max-width: 44.99em) {

  ._9be0cf4a .babe3b8d {
    width: 100%;
    padding-top: 100%;
  }
}

._9be0cf4a ._9607861f {
  width: calc(100vmin - 18rem);
  height: calc(100vmin - 18rem);
}

@media (max-width: 44.99em) {

  ._9be0cf4a ._9607861f {
    width: 100%;
    padding-top: 100%;
    height: 0;
  }
}

.d59b622a {
  position: absolute;
  padding: 7px;
  padding: 0.7rem;
  bottom: 10px;
  bottom: 1rem;
  right: 10px;
  right: 1rem;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  border-style: solid;
  border-color: rgb(50, 60, 65);
  border-width: 1px;
  border-width: 0.1rem;
}

@media (max-width: 44.99em) {
  .d59b622a {
    display: none;
  }
}

/* ---------------------- Carousel Dots ---------------------- */

._0588ef67 {
  margin: 16px auto;
  margin: 1.6rem auto;
}

._42789a35 {
  margin: 0 auto;
  position: relative;
}

@media (max-width: 44.99em) {

  ._42789a35 {
    overflow-y: scroll;
    height: calc(100vw - 11.5rem);
    scroll-behavior: smooth;
  }

  ._42789a35::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 0.2rem;
    height: 0.2rem;
    background-color: rgb(255, 255, 255);
  }

  ._42789a35::-webkit-scrollbar-thumb {
    background-color: rgb(210, 210, 210);
  }
}

@media (min-width: 45em) {
  ._42789a35 {
    width: 24.6rem;
  }
}

@media (min-width: 63.75em) {
  ._42789a35 {
    width: 32.8rem;
  }
}

.f29dd111 {
  background: none;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.f29dd111[disabled] {
  background: none;
  fill: rgb(237, 237, 237);
}

.f29dd111 svg {
  fill: inherit;
}

.f29dd111[data-arrow-direction='previous'] {
  left: -28px;
  left: -2.8rem;
}

.f29dd111[data-arrow-direction='next'] {
  right: -28px;
  right: -2.8rem;
}

/* ---------------------- Thumbnail ---------------------- */

.c98d8129 {
  width: 82px;
  width: 8.2rem;
  margin: 8px;
  margin: 0.8rem;
  outline: 0;
  padding: 0;
  border: none;
  position: relative;
}

@media (max-width: 44.99em) {

  .c98d8129 {
    width: 100%;
    margin: 0 auto 0.8rem;
  }

  .c98d8129:last-child {
    margin-bottom: 0;
  }
}

.ccd10d06 {
  cursor: pointer;
  width: 64px;
  width: 6.4rem;
  height: 64px;
  height: 6.4rem;
  border: 1px solid rgb(166, 166, 166);
  border: 0.1rem solid rgb(166, 166, 166);
  pointer-events: none;
}

@media (max-width: 44.99em) {

  .ccd10d06 {
    width: 16.5vw;
    height: 16.5vw;
  }
}

.c532aea0 {
  border: 1px solid rgb(255, 102, 0);
  border: 0.1rem solid rgb(255, 102, 0);
}

.acbda437 {
  position: relative;
  max-width: 36.2em;
  margin: auto;
}

.d98b8ae0 {
  border: none;
}

._4cc8131f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

/*
 * z-index
 */

.fd74ab7d {
  z-index: 1;
}

.ce3cc426 {
  z-index: 80;
}

._5926e1f0 {
  z-index: 80;
}

.a5c941bf {
  z-index: 90;
}

.b5801f05 {
  z-index: 115;
}

._3c1b7969 {
  z-index: 1000;
}

._21f648a7 {
  z-index: 1100;
}

.bb6584cc {
  z-index: 10000;
}

._6317a47c {
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 24px;
  line-height: 2.4rem;
  position: relative;
  width: 100%;
  background: rgb(255, 255, 255);
  color: rgb(50, 60, 65);
  cursor: pointer;
  text-decoration: none;
  margin: 16px auto;
  margin: 1.6rem auto;
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: background 200ms ease-in-out, color 200ms ease-in-out;
  transition: background 200ms ease-in-out, color 200ms ease-in-out;
  text-transform: none;
}

._6317a47c[disabled],
._6317a47c[disabled]:hover {
  background: rgb(205, 205, 205);
  color: rgb(149, 154, 157);
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
  cursor: default;
}

/* pull adjacent buttons a bit closer */

._01f019f3 + ._01f019f3 {
  margin-top: -8px;
  margin-top: -0.8rem;
}

.ef08421b {
  text-align: center;
  border-radius: 2rem;
}

.b48f4ced {
  text-align: center;
}

/*
  TODO: Remove 'a' from selector when SiteBuilder
  CSS no longer overrides the hover state
*/

.f2a1dff0,
  .f2a1dff0:focus,
  a.f2a1dff0,
  a.f2a1dff0:focus {
  background: rgb(255, 102, 0);
  color: rgb(255, 255, 255);
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
}

.f2a1dff0:hover,
  .f2a1dff0:active,
  a.f2a1dff0:hover,
  a.f2a1dff0:active {
  background: rgb(239, 73, 0);
}

._98c8d8b4,
  ._98c8d8b4:focus,
  a._98c8d8b4,
  a._98c8d8b4:focus {
  background: rgb(0, 151, 105);
}

._98c8d8b4:hover,
  ._98c8d8b4:active,
  a._98c8d8b4:hover,
  a._98c8d8b4:active {
  background: rgb(0, 132, 74);
}

/*
  TODO: Remove 'a' from selector when SiteBuilder
  CSS no longer overrides the hover state
*/

._6073bbf6,
  ._6073bbf6:focus,
  a._6073bbf6,
  a._6073bbf6:focus {
  background: rgb(50, 60, 65);
  color: rgb(255, 255, 255);
  border: 1px solid rgb(60, 60, 60);
  border: 0.1rem solid rgb(60, 60, 60);
}

._6073bbf6:hover,
  ._6073bbf6:active,
  a._6073bbf6:hover,
  a._6073bbf6:active {
  background: rgb(91, 99, 103);
}

._6073bbf6[disabled] {
  background: rgb(229, 230, 231);
  color: rgb(152, 157, 160)
}

._6073bbf6[disabled]:hover {
  background: rgb(229, 230, 231);
  color: rgb(152, 157, 160);
}

.df81d7e4 {
  border: 2px solid;
  border: 0.2rem solid;
}

/*
  TODO: Remove 'a' from selector when SiteBuilder
  CSS no longer overrides the hover state
*/

._2ca3e3e1,
  ._2ca3e3e1:focus,
  a._2ca3e3e1,
  a._2ca3e3e1:focus {
  background: rgb(255, 255, 255);
  color: rgb(50, 60, 65);
  border: 1px solid rgb(50, 60, 65);
  border: 0.1rem solid rgb(50, 60, 65);
}

._2ca3e3e1:hover,
  ._2ca3e3e1:active,
  a._2ca3e3e1:hover,
  a._2ca3e3e1:active {
  border-color: rgb(91, 99, 103);
  color: rgb(152, 157, 160);
}

/*
  TODO: Remove 'a' from selector when SiteBuilder
  CSS no longer overrides the hover state
*/

._77566ad0,
  ._77566ad0:focus,
  a._77566ad0,
  a._77566ad0:focus {
  background: rgb(60, 60, 60);
  color: rgb(255, 255, 255);
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
}

._77566ad0:hover,
  ._77566ad0:active,
  a._77566ad0:hover,
  a._77566ad0:active {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

._5a0a99a7 {
  background: transparent;
}

._849f690e {
  display: inline-block;
  width: auto;
  white-space: nowrap;
}

/*
  TODO: Remove 'button' from selector when SiteBuilder
  CSS no longer overrides the font-weight
*/

.b9523d7b,
._132bf572.b9523d7b,
button.b9523d7b {
  font-weight: 600;
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.e6577abf {
  max-width: none;
  min-width: 0;
}

.f5739bca {
  padding-top: 3px;
  padding-top: 0.3rem;
  padding-bottom: 3px;
  padding-bottom: 0.3rem;
}

.eec494cf {
  padding-top: 7px;
  padding-top: 0.7rem;
  padding-bottom: 7px;
  padding-bottom: 0.7rem;
}

.d34f02bb {
  padding-top: 11px;
  padding-top: 1.1rem;
  padding-bottom: 11px;
  padding-bottom: 1.1rem;
}

._38b77694 {
  padding-top: 0;
  padding-bottom: 0;
}

._625f48fa {
  padding-left: 8px;
  padding-left: 0.8rem;
  padding-right: 8px;
  padding-right: 0.8rem;
}

.b7d7b84f {
  padding-left: 16px;
  padding-left: 1.6rem;
  padding-right: 16px;
  padding-right: 1.6rem;
}

.ce50d0d6 {
  padding-left: 32px;
  padding-left: 3.2rem;
  padding-right: 32px;
  padding-right: 3.2rem;
}

._5a3260f4 {
  padding-left: 0;
  padding-right: 0;
}

.cf7e7c37 {
  margin: 0;
}

.cf7e7c37._01f019f3 + .cf7e7c37._01f019f3 {
  margin-top: 8px;
  margin-top: 0.8rem;
}

._9494501c {
  display: block;
}

._6ef2a9ee {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  width: 2rem;
  height: 20px;
  height: 2rem;
  overflow: hidden;
  margin: 0 auto;
  -webkit-transform: scale(0) translate3d(-50%, -70%, 0);
          transform: scale(0) translate3d(-50%, -70%, 0);
  -webkit-transform-origin: center;
          transform-origin: center;
  opacity: 0;
  -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}

.d815e7d6 {
  fill: rgb(50, 60, 65);
}

._537de439 {
  fill: rgb(255, 255, 255);
}

.d68a2aff {
  fill: rgb(50, 60, 65);
}

._2814283d {
  fill: rgb(255, 255, 255);
}

.e433fa60 {
  position: relative;
  display: block;
  z-index: 10;
  -webkit-transform: scale(0) translate3d(0, 20%, 0);
          transform: scale(0) translate3d(0, 20%, 0);
  -webkit-transform-origin: center;
          transform-origin: center;
  opacity: 0;
  -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}

._20652384 {
  -webkit-transform: scale(1) translate3d(-50%, -50%, 0);
          transform: scale(1) translate3d(-50%, -50%, 0);
  opacity: 1;
}

.f9f4120c {
  -webkit-transform: scale(1) translate3d(0, 0, 0);
          transform: scale(1) translate3d(0, 0, 0);
  opacity: 1;
}

._636fc143 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  overflow: hidden;
}

._2b1321f3 {
  border-radius: 3px;
}

._69545587 {
  display: inline-block;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.d442d10e {
  height: 24px;
  height: 2.4rem;
}

.fce6f6b5 {
  padding-left: 16px;
  padding-left: 1.6rem;
  padding-right: 16px;
  padding-right: 1.6rem;
}

.fce6f6b5[disabled] {
  background: none;
}

._2f1bc6f8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._4777ee0e {
  margin-left: 8px;
  margin-left: 0.8rem;
}

._0745ccde {
  margin-right: 8px;
  margin-right: 0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._9d73a6e8 {
  height: 32px;
  height: 3.2rem;
}

.cba18efc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  border: 0;
}

._79b6c868 {
  margin-left: 4px;
  margin-left: 0.4rem;
}

._34ae661a {
  margin-right: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.de783530 {
  margin: 16px auto;
  margin: 1.6rem auto;
}

.f836f3dd {
  z-index: 900;
}

.cfcd159b {
  padding: 0;
  margin: 0;
}

._120f4721 {
  width: 64px;
  width: 6.4rem;
  height: 64px;
  height: 6.4rem;
}

.fc381ada {
  width: 20px;
  width: 2rem;
  height: 20px;
  height: 2rem;
}

@-webkit-keyframes _6c538c9b {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes _6c538c9b {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

._20fbd13a {
  -webkit-animation: _6c538c9b 1000ms infinite linear;
          animation: _6c538c9b 1000ms infinite linear;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}

.aa6d3ab1 {
  opacity: 0;
}

.aa6d3ab1._2bdcc561 {
  opacity: 1;
  -webkit-transition: opacity 200ms ease-out;
  transition: opacity 200ms ease-out;
}

._47ed9b7c {
  opacity: 1;
}

._47ed9b7c._5e10f4d4 {
  opacity: 0;
  -webkit-transition: opacity 200ms ease-in;
  transition: opacity 200ms ease-in;
}

.f6960701 {
  opacity: 0;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.f6960701.e3318dbc {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.de5f5d6e {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.de5f5d6e.ad566411 {
  opacity: 0;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.fb988845 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

._98919ab6 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1;
          flex: 1 1;
}

/* We use max heights in order to avoid having to know the height in advance of
 * the animation, which is tricky when the component is supposed to start with a
 * height of 0. I experimented with using height rather than max-height for
 * exit transitions but it seems to be smoother with the latter. */

._2a95a544 {
  max-height: 0;
  opacity: 0;
}

._159494b2 {
  max-height: 0 !important;
  opacity: 0;
  -webkit-transition: all 600ms;
  transition: all 600ms;
}

/* We set the max height to an unreasonable large value. We intend to specify
 * a height that will never actually be reached by the underlying component.
 * For some reason, this looks a lot shorter entering than exiting. For this
 * reason, double the transition time on entry. */

._0f3f4026 {
  max-height: 500px;
  max-height: 50rem;
  opacity: 1;
  -webkit-transition: all 1200ms;
  transition: all 1200ms;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}
:root {

  /* Buttons */

  /* Elements */
}
:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}
/*
 * z-index
 */
.bf387b48 {
  z-index: 1;
}
._52ef5d13 {
  z-index: 80;
}
._394d002f {
  z-index: 80;
}
.fde47227 {
  z-index: 90;
}
.aad74788 {
  z-index: 115;
}
._52db6ac1 {
  z-index: 1000;
}
._5f0b503d {
  z-index: 1100;
}
.bf813e7f {
  z-index: 10000;
}
._1329e509 {
  position: relative;
  overflow: hidden;
}
._6debdb14 {
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  background-color: rgb(224, 224, 224);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 60;
  display: none;
}
.c37adced {
  opacity: 0;
}
.c37adced._7f4cc3d1 {
  opacity: 1;
  -webkit-transition: opacity 200ms ease-out;
  transition: opacity 200ms ease-out;
}
._7d953bd2,
._93a4b15d {
  opacity: 1;
}
._7d953bd2.cbf51a0e,
._93a4b15d.f5ecdc77 {
  opacity: 0;
  height: 0 !important; /* This is here to override the inline height set programmatically */
  overflow: hidden;
  -webkit-transition: opacity 200ms ease-in,
    height 200ms ease-in
      200ms;
  transition: opacity 200ms ease-in,
    height 200ms ease-in
      200ms;
}
._93a4b15d.f5ecdc77 {
  -webkit-transition:
    /* the hardcoded ms figure here should match SHOW_MESSAGE_TIME_MS */ opacity
      200ms ease-in 1200ms,
    height 200ms ease-in
      1400ms;
  transition:
    /* the hardcoded ms figure here should match SHOW_MESSAGE_TIME_MS */ opacity
      200ms ease-in 1200ms,
    height 200ms ease-in
      1400ms;
}
._93a4b15d ._6debdb14 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
}
._93a4b15d.f5ecdc77 ._6debdb14 {
  opacity: 1;
  -webkit-transition: opacity 200ms ease-out;
  transition: opacity 200ms ease-out;
}

.c0c9e967 {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: -webkit-transform 600ms ease-out;
  transition: -webkit-transform 600ms ease-out;
  transition: transform 600ms ease-out;
  transition: transform 600ms ease-out, -webkit-transform 600ms ease-out;
}

.c0c9e967._71de923b {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

._6676aa9c {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: -webkit-transform 600ms ease-in;
  transition: -webkit-transform 600ms ease-in;
  transition: transform 600ms ease-in;
  transition: transform 600ms ease-in, -webkit-transform 600ms ease-in;
}

._6676aa9c._50db1dd6 {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

._32945c09 {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
}

._32945c09._682961e9 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

._7e3346b1 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
}

._7e3346b1._82f3846c {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

._078d9678 {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: -webkit-transform 600ms;
  transition: -webkit-transform 600ms;
  transition: transform 600ms;
  transition: transform 600ms, -webkit-transform 600ms;
}

._078d9678._76a4e34c {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

._4936ce2a {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: -webkit-transform 600ms;
  transition: -webkit-transform 600ms;
  transition: transform 600ms;
  transition: transform 600ms, -webkit-transform 600ms;
}

._4936ce2a.f9ede25e {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

._92f5d088 {
  width: 100%;
  height: 100%;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._27004a2d {
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  letter-spacing: normal;
}

._76288da6 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  line-height: 1.6;
  font-weight: 400;
  color: rgb(255, 255, 255);
}

._3b77b23b {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: -webkit-transform 100ms ease-in;
  transition: -webkit-transform 100ms ease-in;
  transition: transform 100ms ease-in;
  transition: transform 100ms ease-in, -webkit-transform 100ms ease-in;
  fill: rgb(255, 255, 255);
}

.ccb8e0cb ._76288da6 {
  font-weight: 500;
}

._27004a2d:focus {
  outline-width: 0;
}

._27004a2d:focus ._76288da6 {
    outline: inherit;
    outline-width: medium;
    outline-width: initial;
  }

.ccb8e0cb ._3b77b23b {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}

._680c4708 {
  padding-left: 16px;
  padding-left: 1.6rem;
}

._2c33e617 {
  padding: 8px 0;
  padding: 0.8rem 0;
}

.e1bec653 {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  margin-left: 0.6rem;
}

.f40ca2fa {
  border-bottom: rgb(166, 166, 166) solid 1px;
  border-radius: 0;
  padding-bottom: 8px;
  padding-bottom: 0.8rem;
}

.e36ac124 {
  padding-bottom: 32px;
  padding-bottom: 3.2rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._3a990054 {
  padding: 16px 24px;
  padding: 1.6rem 2.4rem;
  background-color: rgb(228, 225, 221);
  margin-bottom: 48px;
  margin-bottom: 4.8rem;
}

@media (min-width: 45em) {

  ._3a990054 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

._674695e8 {
  -ms-flex-item-align: center;
      align-self: center;
}

@media (min-width: 45em) {

  ._66d972b0 {
    padding-right: 1.6rem;
  }
}

.e1ecd968 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._6bffc46c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
}

._287ea5d0 {
  color: rgb(91, 99, 103);
  line-height: 24px;
  line-height: 2.4rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  padding: 16px;
  padding: 1.6rem;
  padding-top: 24px;
  padding-top: 2.4rem;
  border-bottom: 6px solid rgb(237, 237, 237);
  border-bottom: 0.6rem solid rgb(237, 237, 237);
}

@media (min-width: 45em) {

  ._287ea5d0 {
    line-height: 3.2rem;
  }
}

._15dd7edd {
  color: inherit;
  border-bottom-color: rgb(255, 102, 0);
  font-weight: bold
}

._15dd7edd:focus {
  outline: none;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._51658e9f {
  overflow: hidden;
  display: inline-block;
  margin-top: 4px;
  margin-top: 0.4rem;
  border: 1px solid rgb(166, 166, 166);
  border: 0.1rem solid rgb(166, 166, 166);
  outline: none;
  height: 100%;
  width: 128px;
  width: 12.8rem;
  background-color: rgb(237, 237, 237);
  border-radius: 0.4rem;
}

._86779b2e {
  display: inline-block;
  background: rgb(237, 237, 237);
  width: 50%;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  padding: 0.8rem 0;
  -webkit-transition: 200ms;
  transition: 200ms;
}

.b36d428c {
  background-color: rgb(255, 255, 255);
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._5d28d058 {
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  padding-bottom: 11px;
  padding-bottom: 1.1rem;
  padding-top: 12px;
  padding-top: 1.2rem;
  padding-left: 16px;
  padding-left: 1.6rem;
  position: relative;
  text-align: left;
  width: 100%
}

._5d28d058:hover {
  text-decoration: underline;
}

@media (min-width: 45em) {

  ._5d28d058 {
    padding-left: 3.2rem;
  }
}

.d3c5a9e0 {
  padding-bottom: 8px;
  padding-bottom: 0.8rem;
  padding-top: 8px;
  padding-top: 0.8rem;
}

.c7631479:hover {
  text-decoration: none;
}

.f9e526b8::before {
  background-color: rgb(255, 102, 0);
  content: ' ';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 8px;
  width: 0.8rem;
}

.b431f293 {
  background-color: rgb(237, 237, 237);
  color: rgb(50, 60, 65);
  padding-top: 12px;
  padding-top: 1.2rem;
  padding-bottom: 12px;
  padding-bottom: 1.2rem;
}

@media (min-width: 63.75em) {

  .b431f293 {
    padding-left: 1.6rem;
  }
}

._8b4b9b8d {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (min-width: 63.75em) {

  .e60bec98 {
    padding-right: 1.6rem;
  }
}

.e60bec98 ._8b4b9b8d {
    margin-right: 24px;
    margin-right: 2.4rem;
}

.b22e7c38 {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

._6e6b828e {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
}

._18aac246 > ._8b4b9b8d {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.ac4a35f8 {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.da0dd3da {
}

@media (min-width: 45em) {

  .da0dd3da {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

.e8ee3699 > li:last-child > ._5d28d058 {
  border-bottom: none;
}

.d692d640 > li:last-child > ._5d28d058:not(.d3c5a9e0) {
  padding-bottom: 12px;
  padding-bottom: 1.2rem;
}

.eea47e0e {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
}

._97c861cb {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
}

._732d6a5e {
}

.d20bfdf3 {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
}

/* Prevent double borders when these are adjacent */

.b431f293 + ._8198f4c1,
._8198f4c1 + ._8198f4c1 {
  border-top: none;
}

._8198f4c1 + .b431f293 {
  margin-top: -1px;
  margin-top: -0.1rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

._3f10b23d {
  position: relative;
  padding: 0;
  margin: 16px 0;
  margin: 1.6rem 0;
}

._3f10b23d label {
    /* Removes grey highlight that appears on tap in WebKit browsers */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

._83e94f29 {
  position: relative;
  width: 50%;
}

.f168cdff {
  position: relative;
  width: 75%;
}

._16bc8d1f {
  position: relative;
  width: 100%;
}

._422ee87d {
  color: rgb(208, 2, 27);
  margin: 4px 0;
  margin: 0.4rem 0;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 20px;
  line-height: 2rem;
}

._0120c0c7,
._1f5809d2 {
  display: block;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  color: rgb(50, 60, 65)
}

._1f5809d2 {
  color: rgb(111, 118, 122);
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

.e7ff12fd {
  padding-top: 28px;
  padding-top: 2.8rem;
}

._1dbab0cc {
  color: rgb(255, 102, 0);
}

._1a41e483 {
  display: block;
  -webkit-appearance: none;
  width: 100%;
  padding: 7px 16px;
  padding: 0.7rem 1.6rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid rgb(166, 166, 166);
  border: 0.1rem solid rgb(166, 166, 166);
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  height: 40px;
  height: 4rem;
  /* required as line-height not respected in ie */
  color: rgb(50, 60, 65)
}

._1a41e483::-webkit-input-placeholder {
  color: rgb(111, 118, 122);
}

._1a41e483::-moz-placeholder {
  color: rgb(111, 118, 122);
}

._1a41e483::-ms-input-placeholder {
  color: rgb(111, 118, 122);
}

._1a41e483::placeholder {
  color: rgb(111, 118, 122);
}

._1a41e483:-ms-input-placeholder {
  color: rgb(111, 118, 122) !important;
  /* IE11 needs the !important flag */
}

.b0df6653 {
  padding-right: 24px;
  padding-right: 2.4rem;
}

._8b24b43a {
  display: block;
  -webkit-appearance: none;
  width: 100%;
  padding: 7px 16px;
  padding: 0.7rem 1.6rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid rgb(166, 166, 166);
  border: 0.1rem solid rgb(166, 166, 166);
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  color: rgb(50, 60, 65);
  max-width: 100%;
  min-width: 100%;
  resize: vertical
}

._7723b58e,
._7723b58e:focus {
  border-width: 1px 1px 32px;
  border-width: 0.1rem 0.1rem 3.2rem;
  border-style: solid;
  border-color: transparent;
}

.b062f081 {
  margin-bottom: 0;
}

.b062f081 input,
.b062f081 select,
.b062f081 textarea {
  border-color: rgb(208, 2, 27);
}

.e28aff65 {
  position: relative;
}

.c4bce267 select {
    padding-left: 16px;
    padding-left: 1.6rem;
  }

.c5536b03 {
  display: block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  overflow: hidden;
  width: 100%;
  padding: 0 32px 0 16px;
  padding: 0 3.2rem 0 1.6rem;
  height: 40px;
  height: 4rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 0;
  border: 1px solid rgb(166, 166, 166);
  border: 0.1rem solid rgb(166, 166, 166);
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 38px;
  line-height: 3.8rem;
  color: rgb(50, 60, 65);
  background: rgb(255, 255, 255);
  text-overflow: ellipsis
}

.c5536b03::-ms-expand {
  /* hide IE native dropdown arrow */
  display: none;
}

.c5536b03 option {
    color: rgb(50, 60, 65);
}

.c5536b03 option[value] {
    color: rgb(111, 118, 122);
}

.b83f7e44 {
  text-align: left;
}

._73bbf161 {
  color: rgb(111, 118, 122);
}

._765bfae0,
.be320b28 {
  position: absolute;
  top: 14px;
  top: 1.4rem;
  right: 14px;
  right: 1.4rem;
  width: 12px;
  width: 1.2rem;
  height: 12px;
  height: 1.2rem;
  -webkit-transition: -webkit-transform 0.177s ease-in-out;
  transition: -webkit-transform 0.177s ease-in-out;
  transition: transform 0.177s ease-in-out;
  transition: transform 0.177s ease-in-out, -webkit-transform 0.177s ease-in-out;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transform-origin: center;
          transform-origin: center;
  fill: rgb(50, 60, 65);
  pointer-events: none;
}

._765bfae0._1a439016,
.be320b28 {
  -webkit-transform: rotate(0);
          transform: rotate(0);
  top: 8px;
  top: 0.8rem;
  right: 8px;
  right: 0.8rem;
}

.a1965af3 ._3f10b23d {
    margin-top: 8px;
    margin-top: 0.8rem;
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

.a1965af3 ._3f10b23d:first-of-type {
    margin-top: 0;
    margin-top: initial;
  }

.a1965af3 ._3f10b23d:last-of-type {
    margin-bottom: 0;
    margin-bottom: initial;
  }

.baeba768 ._3f10b23d:first-of-type {
    margin-top: 0;
  }

.baeba768 ._3f10b23d:last-of-type {
    margin-bottom: 0;
  }

._245de1a1 {
  position: relative;
}

.b0f41005 {
  padding-right: 2em;
}

._34f69501 {
  position: absolute;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 8px;
  padding: 0 0.8rem;
  margin: 1px;
  margin: 0.1rem;
  font-size: 13px;
  font-size: 1.3rem;
  top: 1px;
  top: 0.1rem;
  right: 1px;
  right: 0.1rem;
  bottom: 1px;
  bottom: 0.1rem;
  border: none;
  color: rgb(50, 60, 65);
  background-color: rgb(255, 255, 255);
  border-radius: 0.4rem;
}

.d5dbb77b {
  position: relative;
  border: 1px solid rgb(166, 166, 166);
  border: 0.1rem solid rgb(166, 166, 166);
}

._394e46f9 {
  position: absolute;
  right: 30px;
  right: 3rem;
  bottom: 6px;
  bottom: 0.6rem;
  color: rgb(152, 157, 160);
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.f34b46c0 {
  position: absolute;
  width: 1px;
  width: 0.1rem;
  height: 1px;
  height: 0.1rem;
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.f4a250ff {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

._15dcdbd0 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  line-height: 24px;
  line-height: 2.4rem;
}

._0fa8876b {
  width: 24px;
  width: 2.4rem;
  height: 24px;
  height: 2.4rem;
  margin-right: 16px;
  margin-right: 1.6rem;
  border: 1px solid rgb(166, 166, 166);
  border: 0.1rem solid rgb(166, 166, 166)
}

._0fa8876b.e67f5ecb {
  border: 2px solid rgb(208, 2, 27);
  border: 0.2rem solid rgb(208, 2, 27);
}

._3cd59cd4 {
    border: 1px solid rgb(171, 171, 171);
    background: rgb(242, 242, 242);
}

._0fa8876b svg {
  fill: rgb(255, 102, 0);
  opacity: 0;
  -webkit-transition: opacity 200ms ease-out;
  transition: opacity 200ms ease-out;
}

.daf6f14e svg {
  opacity: 1;
}

.ec82384d {
  padding-left: 42px;
  padding-left: 4.2rem;
}

.f34b46c0:focus + ._0fa8876b {
  outline: none;
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
  -webkit-box-shadow: rgb(147, 204, 234) 0 0 0 0.1875rem;
          box-shadow: rgb(147, 204, 234) 0 0 0 0.1875rem;
  z-index: 1;
}

._3cd59cd4 svg {
  fill: rgb(111, 118, 121);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.ada68cd0 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ada68cd0:focus-within .fb63d080 {
  /* TODO: I wanted to create some way we could abstract
   * these styles to a utility class - it seems this is
   * not possible with our CSS setup.
   * Mixins create new classes, that's not exactly what I
   * want, I'd prefer an inherritance model.
   * Composes can't be used either, as that can not be used
   * with psuedo classes. */

  /* Firefox / IE / Edge */
  outline: 1px dotted #212121;

  /* Chrome / Safari / Opera */
  outline: 4px auto -webkit-focus-ring-color;
  outline: 0.4rem auto -webkit-focus-ring-color;
}

._79e7e923 {
  /* Do not use 'display: none;' here
   * creates accessibility problems */
  opacity: 0;
  position: absolute;
}

._365771ec {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._365771ec:last-child {
  margin-bottom: 0;
}

.ea60732f {
  border: 0;
  padding: 0;
  margin: 0;
}

.a2c13b47 {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._5285ce6c {
  overflow: visible;
  padding: 0;
  line-height: 24px;
  line-height: 2.4rem;
}

/* react-select takes classNamePrefix prop as class name 
  all inner elements will be given a className with the provided prefix */

._5285ce6c .SearchSelect__value-container,
    ._5285ce6c .SearchSelect__menu {
      padding: 0;
    }

._5285ce6c .SearchSelect__placeholder,
    ._5285ce6c .SearchSelect__single-value {
      margin: 0;
    }

._5285ce6c .SearchSelect__input {
      margin: -2px;
      margin: -0.2rem;
    }

._5285ce6c .SearchSelect__menu {
      border: 1px solid rgb(166, 166, 166);
      border: 0.1rem solid rgb(166, 166, 166);
      border-radius: 0;
    }

._5285ce6c .SearchSelect__control {
      -webkit-box-shadow: none;
              box-shadow: none;
      border: 0;
      padding: 0 32px 0 16px;
      padding: 0 3.2rem 0 1.6rem;
    }

._5285ce6c .SearchSelect__indicator-separator {
      display: none;
    }

.eaa0f55a {
  border-color: rgb(208, 2, 27);
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * Transition time is also used in JS to trigger showing/hiding the notification
 * bar, if you change the transition time here then also change it in consumers,
 * such as kits-utils-notifications/constants.js
 */

._426c391d {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: -webkit-transform ease-in 200ms;
  transition: -webkit-transform ease-in 200ms;
  transition: transform ease-in 200ms;
  transition: transform ease-in 200ms, -webkit-transform ease-in 200ms;
  border-bottom: 1px solid rgb(166, 166, 166);
}

._3331d04c {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

._0cf8dee4 {
  position: relative;
}

._8c4be8c3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

._9c8898ab {
}

.b9bf12f0 {
  width: 20px;
  width: 2rem;
  height: 20px;
  height: 2rem;
  margin-right: 12px;
  margin-right: 1.2rem;
  margin-top: 2px;
  margin-top: 0.2rem;
}

._2c47277d {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.f4fa9b06,
._457f8f2e {
  background: rgb(237, 237, 237);
}

._19307a0e {
  background: rgb(121, 184, 67);
}

._19307a0e svg {
  fill: rgb(255, 255, 255);
}

._248f29bc {
  background: rgb(208, 2, 27);
}

._248f29bc svg {
  fill: rgb(255, 255, 255);
}

._50dbb5c3 {
  background: rgb(255, 255, 255);
}

.d33e83ee {
  background: rgb(255, 255, 255);
  text-align: center;
  padding: 16px 48px 0;
  padding: 1.6rem 4.8rem 0;
}

.ffc31189 {
  background: rgb(121, 184, 67);
}

.ffc31189 svg {
  fill: rgb(255, 255, 255);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._62425357 {
  margin: 16px 0;
  margin: 1.6rem 0;
}

@media (min-width: 45em) {

  ._62425357 {
    margin: 3.2rem 0;
  }
}

.e02d61ac {
  /* Allow the review title to be first in the markup but 2nd visually */
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) {

  .e02d61ac {
    border: 0.1rem solid rgb(210, 210, 210);
    border-radius: 0.8rem;
    padding: 3.2rem;
    margin-bottom: 3.2rem;
  }
}

._12610cfd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 48px 0;
  margin: 4.8rem 0;
}

@media (max-width: 44.99em) {

  ._12610cfd {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.afedbb04 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  margin-left: 16px;
  margin-left: 1.6rem;
}

@media (max-width: 44.99em) {

  .afedbb04 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-left: 0;
  }
}

._295d21a4 {
  margin: 0;
}

._201f625d {
  margin-right: 4px;
  margin-right: 0.4rem;
  width: 100%;
}

@media (max-width: 44.99em) {

  ._201f625d {
    margin-top: 0.8rem;
    margin-bottom: 1.6rem;
  }
}

._82164010 {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}

@media (min-width: 45em) {

  ._82164010 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 0.8rem;

    /*For every child more than one, create space to the left for it
   */
  }

  ._82164010 > * + * {
    margin-left: 1.6rem;
  }
}

.ad5c5b28 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 100%;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  .ad5c5b28 {
    width: auto;
  }
}

@media (max-width: 44.99em) {

  .ad5c5b28 {
    margin-bottom: 1.6rem;
  }

  .ad5c5b28 button {
      max-width: 100% !important;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._418fd181 {
  margin: auto 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 742px;
  max-width: 74.2rem;
}

@media (min-width: 45em) {

  ._418fd181 {
    min-width: 42rem;
  }
}

.d74c8d17 {
  bottom: 0;
  left: 0;
  max-width: 100%;
  padding: 8px 16px 16px;
  padding: 0.8rem 1.6rem 1.6rem;
  position: fixed;
  width: 100%;
}

@media (min-width: 45em) {

  .d74c8d17 {
    padding: 0.8rem 3.2rem;
  }
}

.d50d2c00 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 320px;
  max-width: 32rem;
  padding: 0 64px;
  padding: 0 6.4rem;
}

@media (min-width: 45em) {

  .d50d2c00 {
    min-width: 0;
  }
}

._54ddad49 {
  position: relative;
}

._0aafab6f {
  margin-top: 24px;
  margin-top: 2.4rem;
}

@media (min-width: 45em) {

  ._0aafab6f {
    height: 3.2rem;
    margin: 0;
    min-width: 12rem;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 12rem;
  }
}

._0f48c060 {
  position: relative;
}

@media (min-width: 45em) {

  ._14a4d839 {
    margin-right: 17.6rem;
  }
}

._448b1cb6 {
  font-size: 26px;
  font-size: 2.6rem;
  font-weight: 600;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._09e5f704 {
  border: 1px solid rgb(237, 237, 237);
  border: 0.1rem solid rgb(237, 237, 237);
  border-radius: 0.5rem;
  padding: 16px;
  padding: 1.6rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.be74171d {
  color: rgb(255, 255, 255);
  background-color: rgb(255, 102, 0);
  text-decoration: none;
  border-radius: 0.8rem;
  text-align: center;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
  height: 16px;
  height: 1.6rem;
  min-width: 16px;
  min-width: 1.6rem;
}

.f21de556 {
  padding-left: 4px;
  padding-left: 0.4rem;
  padding-right: 4px;
  padding-right: 0.4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.a2407f1f {
  position: relative;
  display: block;
  padding: 16px;
  padding: 1.6rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
  background: rgb(255, 255, 255);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition-property: border-color, -webkit-box-shadow;
  transition-property: border-color, -webkit-box-shadow;
  transition-property: box-shadow, border-color;
  transition-property: box-shadow, border-color, -webkit-box-shadow;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
}

._11af8764 {
}

._6e4eecd8 {
  cursor: pointer;
}

.db94fd82 {
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 1px solid
    rgb(255, 102, 0) !important;
  border: 0.1rem solid
    rgb(255, 102, 0) !important;
  overflow: hidden;
}

.cb8eb026 {
  padding-bottom: 0;
}

._4b0d7603 {
  border-radius: 0;
  height: 100%;
}

._4b0d7603.a7b37dd6 {
  background-color: rgb(224, 224, 224);
}

.a61c5cdd {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
  text-align: right;
  padding: 8px 0;
  padding: 0.8rem 0;
  margin-top: 8px;
  margin-top: 0.8rem;
}

._45e77aaa {
  line-height: 24px;
  line-height: 2.4rem;
  white-space: nowrap;

  /* nudge put icon in line with edge */
  margin-right: -0.5em;
}

.c54ce4ff {
  position: absolute;
  top: 16px;
  top: 1.6rem;
  right: 16px;
  right: 1.6rem;
}

._3c76bad1 {
  padding: 16px;
  padding: 1.6rem;
  border: 1px solid rgb(237, 237, 237);
  border: 0.1rem solid rgb(237, 237, 237);
}

@media (min-width: 45em) {

  ._3c76bad1 {
    padding: 2.4rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._75e2e050 {
  position: absolute;
  top: calc(50% - 1.2rem);
  left: 16px;
  left: 1.6rem;
}

._22a125a2 {
  border-radius: 0;
  padding: 16px 16px 16px
    56px;
  padding: 1.6rem 1.6rem 1.6rem
    5.6rem;
  border: 1px solid rgb(210, 210, 210);
  border: 0.1rem solid rgb(210, 210, 210);
  -webkit-box-shadow: none;
          box-shadow: none;
}

._22a125a2 + ._22a125a2 {
  border-top: 0;
}

.a289b686 {
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._41bf4af9 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._03f97110 {
  padding: 0 4px;
  padding: 0 0.4rem;
  margin: 0;
}

._03f97110:first-of-type {
  padding-left: 0;
}

._03f97110:last-of-type {
  padding-right: 0;
}

._3301b14b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: rgb(255, 255, 255);
  background: rgb(50, 60, 65);
}

@media (min-width: 63.75em) {

  ._3301b14b {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}

._50a1b8ee {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (min-width: 63.75em) {

  ._50a1b8ee {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.a07e588e {
  margin-right: 16px;
  margin-right: 1.6rem;
  margin-bottom: 0;
  padding: 16px 0 8px 0;
  padding: 1.6rem 0 0.8rem 0;
}

@media (min-width: 63.75em) {

  .a07e588e {
    padding: 0;
  }
}

._0ce07221 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

@media (max-width: 44.99em) {

  ._0ce07221 {
    -ms-flex-flow: wrap;
        flex-flow: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.b6f085f6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  white-space: nowrap;
  padding-right: 8px;
  padding-right: 0.8rem;
  border-right: 1px solid rgb(255, 255, 255);
}

@media (min-width: 63.75em) {

  .b6f085f6 {
    margin-bottom: 0;
  }
}

.ae126b89 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  margin-left: 0;
  margin-right: 8px;
  margin-right: 0.8rem;
  letter-spacing: normal
}

.ae126b89:last-child .b6f085f6 {
  border-right: 0;
}

._1bfd5d06 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

.df521881 {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
  margin-right: 4px;
  margin-right: 0.4rem;
}

._3dd36c54 {
  margin: 0;
}

/* Required for iOS Safari 10.x */

._72cf25f8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._2a1df4a0 {
  background: rgb(255, 102, 0);
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  padding: 5px;
  padding: 0.5rem;
  margin-left: 16px;
  margin-left: 1.6rem;
}

._3358765a svg {
    fill: rgb(255, 255, 255);
  }

._1eca8721 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-bottom: 1px solid rgb(111, 118, 106);
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

@media (min-width: 63.75em) {

  ._1eca8721 {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    width: auto;
    border-bottom: 0;
    padding-bottom: 0;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.bdfae6a2 {
  margin-right: 4px;
  margin-right: 0.4rem;
  vertical-align: middle;
}

._00a2392f {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

@media (min-width: 45em) {

  ._00a2392f {
    margin-bottom: 0;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._414460dc ._24c0ed2a {
  padding: 5px;
  padding: 0.5rem;
}

@media (max-width: 44.99em) {

  ._414460dc ._24c0ed2a {
    background-color: transparent;
    color: rgb(50, 60, 65);
  }
}

.bef5378d {
  position: relative;
  height: 28px;
  height: 2.8rem;
  margin-right: 8px;
  margin-right: 0.8rem;
}

._7915838e {
  height: 26px;
  height: 2.6rem;
  vertical-align: bottom;
}

._06388080 {
  cursor: pointer;
}

.b08db73d {
  text-align: center;
  width: 400px;
  width: 40rem;
}

@media (max-width: 44.99em) {

  .b08db73d {
    width: auto;
  }
}

.b08db73d ._176c2ab0 {
  -webkit-transform: none;
          transform: none;
  position: static;
}

._0634bc41 {
  height: 300px;
  height: 30rem;
}

._41403159 {
  position: absolute;
  top: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.a59524c3 {
  width: 140px;
  width: 14rem;
  height: 84px;
  height: 8.4rem;
}

@media (max-width: 44.99em) {

  .a59524c3 {
    width: 7.2rem;
    height: 4.3rem;
  }
}

._591e182b {
  width: 88px;
  width: 8.8rem;
  height: 53px;
  height: 5.3rem;
}

@media (max-width: 44.99em) {

  ._591e182b {
    width: 9.6rem;
    height: 5.8rem;
  }
}

._1efa4eed {
  width: 64px;
  width: 6.4rem;
  height: 39px;
  height: 3.9rem;
}

@media (max-width: 44.99em) {

  ._1efa4eed {
    width: 7.2rem;
    height: 4.3rem;
  }
}

._7375151c {
  width: 56px;
  width: 5.6rem;
  height: 34px;
  height: 3.4rem;
}

._2aa8e266 {
  height: 100%;
}

.c489efb8 {
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._5038abd1 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) {

  ._514c3e90 {
    margin-bottom: 0 !important;

    /*Needed to override ImportantTitle
   */
  }
}

._5b606955 {
  padding-top: 0 !important; /* to remove padding if element is empty */
}

.faca4fae {
}

@media (max-width: 44.99em) {

  .faca4fae {
    margin-bottom: 1.6rem;
    padding-top: 0 !important;
  }
}

._5032f3a3 {
  margin-top: 16px;
  margin-top: 1.6rem;
}

@media (max-width: 44.99em) {

  .b2fbffe1 {
    margin-bottom: 1.2rem;
  }
}

._8d2ba573 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 8px 0;
  margin: 0.8rem 0;
}

@media (max-width: 44.99em) {

  ._8d2ba573 {
    margin: 0;
  }
}

._5c504c0d {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (max-width: 44.99em) {

  ._5c504c0d {
    margin-bottom: 0.8rem;
  }
}

._7a70c6aa {
  margin-top: 0 !important;
  font-size: 14px;
  font-size: 1.4rem;
}

@media (min-width: 63.75em) {

  ._7a70c6aa {
    font-size: 1.6rem;
  }
}

@media (max-width: 44.99em) {

  ._8522d932,
._0b888acb {
    padding-top: 0 !important;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._83569a9b {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-scroll-snap-type: proximity;
  padding: 16px 0;
  padding: 1.6rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch
}

._83569a9b::after,
  ._83569a9b::before {
  content: ' ';
  padding-left: 16px;
  padding-left: 1.6rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
}

@media (min-width: 45em) {

  ._83569a9b::after,
    ._83569a9b::before {
    padding-left: 3.2rem;
  }
}

._83569a9b::-webkit-scrollbar {
  display: none;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

/*
 * z-index
 */

.eaf46cb0 {
  z-index: 1;
}

.eb5be520 {
  z-index: 80;
}

.b70f2985 {
  z-index: 80;
}

.a2625023 {
  z-index: 90;
}

.a356c12c {
  z-index: 115;
}

._468162a8 {
  z-index: 1000;
}

.fe3e2c51 {
  z-index: 1100;
}

._5cf016e3 {
  z-index: 10000;
}

._6057a5a6 {
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 24px;
  line-height: 2.4rem;
  position: relative;
  width: 100%;
  background: rgb(255, 255, 255);
  color: rgb(50, 60, 65);
  cursor: pointer;
  text-decoration: none;
  margin: 16px auto;
  margin: 1.6rem auto;
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: background 200ms ease-in-out, color 200ms ease-in-out;
  transition: background 200ms ease-in-out, color 200ms ease-in-out;
  text-transform: none;
}

._6057a5a6[disabled],
._6057a5a6[disabled]:hover {
  background: rgb(205, 205, 205);
  color: rgb(149, 154, 157);
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
  cursor: default;
}

/* pull adjacent buttons a bit closer */

.a97c8844 + .a97c8844 {
  margin-top: -8px;
  margin-top: -0.8rem;
}

._863e36f3 {
  text-align: center;
  border-radius: 2rem;
}

.d0814556 {
  text-align: center;
}

/*
  TODO: Remove 'a' from selector when SiteBuilder
  CSS no longer overrides the hover state
*/

._5d19b1ed,
  ._5d19b1ed:focus,
  a._5d19b1ed,
  a._5d19b1ed:focus {
  background: rgb(255, 102, 0);
  color: rgb(255, 255, 255);
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
}

._5d19b1ed:hover,
  ._5d19b1ed:active,
  a._5d19b1ed:hover,
  a._5d19b1ed:active {
  background: rgb(239, 73, 0);
}

._75830372,
  ._75830372:focus,
  a._75830372,
  a._75830372:focus {
  background: rgb(0, 151, 105);
}

._75830372:hover,
  ._75830372:active,
  a._75830372:hover,
  a._75830372:active {
  background: rgb(0, 132, 74);
}

/*
  TODO: Remove 'a' from selector when SiteBuilder
  CSS no longer overrides the hover state
*/

._27b1da84,
  ._27b1da84:focus,
  a._27b1da84,
  a._27b1da84:focus {
  background: rgb(50, 60, 65);
  color: rgb(255, 255, 255);
  border: 1px solid rgb(60, 60, 60);
  border: 0.1rem solid rgb(60, 60, 60);
}

._27b1da84:hover,
  ._27b1da84:active,
  a._27b1da84:hover,
  a._27b1da84:active {
  background: rgb(91, 99, 103);
}

._27b1da84[disabled] {
  background: rgb(229, 230, 231);
  color: rgb(152, 157, 160)
}

._27b1da84[disabled]:hover {
  background: rgb(229, 230, 231);
  color: rgb(152, 157, 160);
}

._92e2ae36 {
  border: 2px solid;
  border: 0.2rem solid;
}

/*
  TODO: Remove 'a' from selector when SiteBuilder
  CSS no longer overrides the hover state
*/

._20ecb0ce,
  ._20ecb0ce:focus,
  a._20ecb0ce,
  a._20ecb0ce:focus {
  background: rgb(255, 255, 255);
  color: rgb(50, 60, 65);
  border: 1px solid rgb(50, 60, 65);
  border: 0.1rem solid rgb(50, 60, 65);
}

._20ecb0ce:hover,
  ._20ecb0ce:active,
  a._20ecb0ce:hover,
  a._20ecb0ce:active {
  border-color: rgb(91, 99, 103);
  color: rgb(152, 157, 160);
}

/*
  TODO: Remove 'a' from selector when SiteBuilder
  CSS no longer overrides the hover state
*/

._1afed11f,
  ._1afed11f:focus,
  a._1afed11f,
  a._1afed11f:focus {
  background: rgb(60, 60, 60);
  color: rgb(255, 255, 255);
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
}

._1afed11f:hover,
  ._1afed11f:active,
  a._1afed11f:hover,
  a._1afed11f:active {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

.ee877d1e {
  background: transparent;
}

._48d57ca0 {
  display: inline-block;
  width: auto;
  white-space: nowrap;
}

/*
  TODO: Remove 'button' from selector when SiteBuilder
  CSS no longer overrides the font-weight
*/

._121d2be6,
.d21d5fc6._121d2be6,
button._121d2be6 {
  font-weight: 600;
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._6f68b7b6 {
  max-width: none;
  min-width: 0;
}

._1fadc7a2 {
  padding-top: 3px;
  padding-top: 0.3rem;
  padding-bottom: 3px;
  padding-bottom: 0.3rem;
}

._4ec13723 {
  padding-top: 7px;
  padding-top: 0.7rem;
  padding-bottom: 7px;
  padding-bottom: 0.7rem;
}

.e3062003 {
  padding-top: 11px;
  padding-top: 1.1rem;
  padding-bottom: 11px;
  padding-bottom: 1.1rem;
}

.c5c72c1a {
  padding-top: 0;
  padding-bottom: 0;
}

.ab9d3259 {
  padding-left: 8px;
  padding-left: 0.8rem;
  padding-right: 8px;
  padding-right: 0.8rem;
}

._42e3c467 {
  padding-left: 16px;
  padding-left: 1.6rem;
  padding-right: 16px;
  padding-right: 1.6rem;
}

._65240b4a {
  padding-left: 32px;
  padding-left: 3.2rem;
  padding-right: 32px;
  padding-right: 3.2rem;
}

.ecf785a5 {
  padding-left: 0;
  padding-right: 0;
}

.f2c84530 {
  margin: 0;
}

.f2c84530.a97c8844 + .f2c84530.a97c8844 {
  margin-top: 8px;
  margin-top: 0.8rem;
}

._9894bf4e {
  display: block;
}

.dc51beba {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  width: 2rem;
  height: 20px;
  height: 2rem;
  overflow: hidden;
  margin: 0 auto;
  -webkit-transform: scale(0) translate3d(-50%, -70%, 0);
          transform: scale(0) translate3d(-50%, -70%, 0);
  -webkit-transform-origin: center;
          transform-origin: center;
  opacity: 0;
  -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}

.d7e37f1a {
  fill: rgb(50, 60, 65);
}

.f229cfe5 {
  fill: rgb(255, 255, 255);
}

._18497d81 {
  fill: rgb(50, 60, 65);
}

._8645d0b0 {
  fill: rgb(255, 255, 255);
}

.c7b8eb94 {
  position: relative;
  display: block;
  z-index: 10;
  -webkit-transform: scale(0) translate3d(0, 20%, 0);
          transform: scale(0) translate3d(0, 20%, 0);
  -webkit-transform-origin: center;
          transform-origin: center;
  opacity: 0;
  -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}

.a6fc5e22 {
  -webkit-transform: scale(1) translate3d(-50%, -50%, 0);
          transform: scale(1) translate3d(-50%, -50%, 0);
  opacity: 1;
}

._514a1790 {
  -webkit-transform: scale(1) translate3d(0, 0, 0);
          transform: scale(1) translate3d(0, 0, 0);
  opacity: 1;
}

._86a2da96 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  overflow: hidden;
}

.c791b2e8 {
  border-radius: 3px;
}

.eb66d755 {
  display: inline-block;
}

._4a91ac86 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._77d0ae1f {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 150%;
}

.dac4cf0d {
  width: 75vw;
  height: 192px;
  height: 19.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
  margin-bottom: 0;
}

@media (min-width: 45em) {

  .dac4cf0d {
    width: 28.9rem;
    height: 19.2rem;
  }
}

._7ba182fb {
  display: block;
  margin-right: 16px;
  margin-right: 1.6rem
}

._7ba182fb:last-child {
  margin-right: 0;
}

.ba535925 {
  font-weight: normal;
}

@media (min-width: 45em) {

  .ba535925 {
    display: inline-block;
    width: auto;
    white-space: nowrap;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.fbc0cd11 {
  background-color: rgb(254, 245, 228);
  margin: 0;
  padding: 8px;
  padding: 0.8rem;
}

._974ee56c {
  -ms-flex-item-align: start;
      align-self: start;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.fb2c5278 {
  -webkit-transition: max-height ease-out 200ms;
  transition: max-height ease-out 200ms;
  overflow: hidden;
  max-height: 0;
}

.eaab3011 {
  max-height: 100vh;
}

._21033a4f {
  margin-top: 16px;
  margin-top: 1.6rem;
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
  margin-bottom: 12px;
  margin-bottom: 1.2rem;
}

._3230a28a {
  margin-top: 0;
  border-bottom: 1px solid transparent;
  border-bottom: 0.1rem solid transparent;
}

.ca615950 {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._367e14aa ul,
  ._367e14aa li {
    margin: 0;
    padding: 0;
  }

._367e14aa header {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }

.f62b81e5 {
  margin-right: 32px;
  margin-right: 3.2rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._64f414b2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 12px 0;
  margin: 1.2rem 0;
}

@media (min-width: 45em) {

  ._64f414b2 {
    margin-top: 0.4rem;
  }
}

._268acbad {
  width: 50%;
}

.cfdee0b0 p {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._5779f5a7 p {
    margin-bottom: 0;
  }

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.af42f4e4 {
  margin-top: 16px;
  margin-top: 1.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

._02caa02d {
  padding: 16px;
  padding: 1.6rem;
  background: rgb(254, 245, 228);
}

._32a32fc7 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.b1551b68 :last-child {
    margin-bottom: 0;
  }

._66b86686 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._8955eeb4 {
  white-space: nowrap;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /*
    Full width minus number of "gaps" divided by number tiles visible (per design)
    This is specific to current design and if there are changes should review This
    implementation.
  */
}

._3b43ffd4 {
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  background: rgb(255, 255, 255);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (min-width: 45em) {

  ._3b43ffd4 {
    border-bottom: none;
  }
}

@media (min-width: 63.75em) {

  ._5e981918 {
    -webkit-transition: all 200ms;
    transition: all 200ms;
  }

  ._5e981918:hover {
    -webkit-box-shadow: 0 0 2rem 0 rgba(152, 152, 152, .5);
            box-shadow: 0 0 2rem 0 rgba(152, 152, 152, .5);
  }
}

._1d0d4327 {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
}

@media (min-width: 45em) {

  ._1d0d4327 {
    border-bottom: none;
  }
}

._66091259 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media (min-width: 45em) {

  ._66091259 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

/* Bug with flex-basis in nested flex containers */

@media (min-width: 45em) {

  .ie11 ._66091259 {
    display: block;
  }
}

._9231eeb4 {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  width: 30.3%; /* ~104px wide when the viewport width is 375px */
  max-width: 115px;
  max-width: 11.5rem;
  padding-top: 0;
  margin-right: 16px;
  margin-right: 1.6rem;
}

._9231eeb4 img {
    -o-object-fit: scale-down;
       object-fit: scale-down;
    max-height: 100%;
  }

@media (min-width: 45em) {

  ._9231eeb4 {
    width: 100%;
    height: auto;
    max-width: none;
    margin-right: 0;
    margin-bottom: 1.6rem;
  }
}

._6d98ff57 {
  width: 15%; /* ~48px wide when the viewport width is 352px */
}

@media (min-width: 45em) {

  ._6d98ff57 {
    margin-right: 1.6rem;
    margin-bottom: 0;
  }
}

.d0b5826f {
  margin: 0;
}

._8dcdcca7 {
  margin: 0 auto;
}

._4aecd339 {
  margin-left: auto;
  margin-right: 0;
}

.f1e48c67 {
  margin: 0 auto;
  width: 100%;
}

._73ba1414 {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

._5666d42c {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.c83f0b12 {
  margin-bottom: 4px;
  margin-bottom: 0.4rem;
  line-height: 24px;
  line-height: 2.4rem;
}

@media (min-width: 45em) {

  .c83f0b12 {
    margin-bottom: 0.8rem;
  }
}

.d1cb3312 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

.cc583185 {
    padding: 16px;
    padding: 1.6rem;
  }

._09ef68a0 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

._09ef68a0 ._9231eeb4 {
    max-width: 168px;
    max-width: 16.8rem;
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

@media (min-width: 45em) {
  .a76800d7 {
    padding: 1.6rem;
  }
  .c1e19c9c {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .c1e19c9c ._9231eeb4 {
    max-width: 16.8rem;
    margin-bottom: 0.8rem;
  }
}

._56639dae {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

._81b1424c {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

@media (min-width: 45em) {

  ._81b1424c {
    font-size: 2.6rem;
  }
}

._7f052cda {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._7f052cda:empty {
  display: none;
}

._442984ae {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

.e4c319ab {
  display: none;
}

._6a11f1b4 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

.fbe7d09d {
  margin: 8px 0 12px;
  margin: 0.8rem 0 1.2rem;
}

/*
 * ProductPanel Variation - 'card'
 * Used by PDP in Customers Also Browsed panel
 * and partially by relatedProductsBloomreach
 */

._01956efa {
  min-width: calc(66.66667% - 3.2rem);
}

._01956efa + ._01956efa {
    margin-left: 16px;
    margin-left: 1.6rem;
  }

@media (min-width: 45em) {

  ._01956efa {
    min-width: calc(30.76923% - 2.46154rem);
  }

  ._01956efa:only-child {
    max-width: 26.4rem;
  }
}

@media (min-width: 63.75em) {

  ._01956efa {
    min-width: calc(25% - 2.8rem);
  }
}

._1e0fdafd {
  border-bottom: none;
}

._893f7e03 {
  padding: 8px;
  padding: 0.8rem;
  border: none;
}

._84575bb3 {
  display: block;
}

._01a99141 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._40da12ac {
  -ms-flex-item-align: end;
      align-self: flex-end;
  cursor: pointer;
}

@media (max-width: 44.99em) {

  ._18d41ad9 {
    padding-left: 0.2rem;
  }
}

@media (max-width: 44.99em) {

  ._65ac93dd {
    font-size: 1.4rem;
  }
}

@media (max-width: 44.99em) {

  ._3a364e3a i {
    width: 1.4rem;
    height: 1.4rem;
  }
}

@media (max-width: 44.99em) {

  .feb80a3e {
    font-size: 1.2rem;
  }
}

@media (min-width: 45em) {

  .feb80a3e {
    font-size: 1.4rem;
  }
}

._8d531be8 {
  height: 40px;
  height: 4rem;
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-left: auto;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/*
 * z-index
 */

.e13e8a85 {
  z-index: 1;
}

._40e72e1a {
  z-index: 80;
}

._47db5213 {
  z-index: 80;
}

.a53bef91 {
  z-index: 90;
}

.ccba0c49 {
  z-index: 115;
}

._2cc00861 {
  z-index: 1000;
}

._446c3f40 {
  z-index: 1100;
}

.e1b3fa4d {
  z-index: 10000;
}

.a2388b81 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
  margin-right: 13px;
  margin-right: 1.3rem;
}

._596b53ed {
  width: 40px;
  width: 4rem;
  height: 40px;
  height: 4rem;
  padding: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  text-align: center;
}

._8abfe1e5 {
  border-radius: 0;
}

.b1ffc06d {
  border-color: rgb(208, 2, 27);
}

._4ac158a3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.e9535eff {
  width: 32px;
  width: 3.2rem;
  height: 40px;
  height: 4rem;
  border: solid 1px rgb(166, 166, 166);
  border: solid 0.1rem rgb(166, 166, 166);
  padding: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}

.e9535eff:focus {
  z-index: 60;
}

.e9535eff:disabled {
  background-color: white;
}

.e9535eff:disabled i svg {
      fill: rgb(166, 166, 166);
}

.e9535eff:disabled,
  .e9535eff:disabled:hover {
  border-color: rgb(166, 166, 166);
}

.c0f7e8d8 {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
}

._03d991e3 {
  border-right: none;
  border-radius: 0.2rem 0 0 0.2rem
}

._03d991e3:disabled,
  ._03d991e3:disabled:hover {
  border-right: none;
}

._90d977e9 {
  border-left: none;
  border-radius: 0 0.2rem 0.2rem 0
}

._90d977e9:disabled,
  ._90d977e9:disabled:hover {
  border-left: none;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.d2f42047 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 8px;
  margin-top: 0.8rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (min-width: 45em) {

  .d2f42047 {
    margin-top: 0;
  }
}

.ecc9102e {
  display: inline-block;
  width: 48px;
  width: 4.8rem;
}

.ecc9102e input {
    text-align: center;
  }

/*
 * z-index
 */

.d014c136 {
  z-index: 1;
}

._188f95a4 {
  z-index: 80;
}

._939f6443 {
  z-index: 80;
}

.d84c5c5c {
  z-index: 90;
}

._1ee4e830 {
  z-index: 115;
}

.ecce34c3 {
  z-index: 1000;
}

._07a19455 {
  z-index: 1100;
}

.e0b4e4ac {
  z-index: 10000;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

/*
  Why important is allowed for utils classes?
  - It is common practice (see https://github.com/twbs/bootstrap/blob/ff29c1224c20b8fcf2d1e7c28426470f1dc3e40d/scss/utilities/_visibility.scss)
  - If you put util class on element, it reads like element is having those styles, they should override any conflicting rule
  - In case if rule with !important need to be overwritten, just remove util class and write your own.
*/

/*
 * Naked Button
 */

._440881ae {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: inherit;
}

/*
 * Naked Action, Link, Button or Anchor
 */

._0683ec95 {
  display: block;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
}

button._0683ec95:not([disabled]) {
  cursor: pointer;
}

._4523c664 {
  display: inline;
}

.c3ce26cd {
  color: inherit;
  text-decoration: underline
}

.c3ce26cd:hover {
  font-weight: 500;
}

/*
 * Pullers
 */

._4b9b038e {
  float: left !important;
}

.fb17e416 {
  float: right !important;
}

/* Note this wont always centralise, quick and dirty */

._6d24c425 {
  margin: 0 auto;
}

.e8f1fd06 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

._2c9ecbcd {
  max-width: 1400px;
  max-width: 140rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 63.75em) {

  ._8ed90e39 {
    max-width: 36.8rem;
  }
}

@media (min-width: 45em) {

  .b592bae1 {
    max-width: 36.8rem;
  }
}

/*
 * Anchors
 */

._815561af {
  display: block;
  text-decoration: underline;
  color: inherit
}

._815561af:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

@media (hover: none) {

  ._815561af:hover {
    color: #000;
    color: initial;
  }
}

/**
 * Alignment
 */

._3842cb30 {
  text-align: left;
}

._0f1caafa {
  text-align: center;
}

._11e30e8c {
  text-align: right;
}

._83318571 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.bbd576ae {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.d5fc038c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._5556c387 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.e1abd872 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

._0f5800e3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1
}

._0f5800e3::before,
  ._0f5800e3::after {
  content: ' ';
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

.e147103d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._4a22ed96 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._1ac90e07 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

._49c3fb72 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._419d85d4 {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.fbc3b229 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.b74f3e38 {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

._73f5d35c {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._9deac505 {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

._874efbd2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

._00a6b6db {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.a0d894a7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._30d71190 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

._1af0383d {
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important; /* Grid CSS will override when combined */
}

._216ce1cf {
  position: relative;
}

/*
 * Sizing
 */

._899bb1e6 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

._2a2401e7 {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

._132a3336 {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

.ad3018bb {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
}

.ace8a8d2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

._7b2f860f {
  display: block;
  width: 100%;
}

._48d40080 {
  display: block;
  height: 100%;
}

.e3264331 {
  width: 100vw;
}

._8269229c {
  height: 100vh;
}

._9c8a1ac5 {
  overflow-x: scroll;
}

._496cb472 {
  overflow-y: scroll;
}

/*
 * Visibility
 */

.b00dd5c8 {
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute;
}

._44299c94 {
  display: none !important;
}

.e9195bc3 {
  opacity: 0 !important;
  pointer-events: none !important;
}

.da4a80ad {
  -webkit-perspective: 100rem;
          perspective: 100rem;
}

/*
 * Font rendering
 */

._7b2042f8 {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

.be9ebae4 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Font styling
 */

/* Weights */

.b7e4eb48 {
  font-weight: 300;
}

._1894e345 {
  font-weight: 400;
}

._282d7d3d {
  font-weight: 500;
}

._779a8d02 {
  font-weight: 600;
}

/* Sizes */

.cd0eb494 {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
}

._17e4cd4b {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
}

._28f1243b {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

.e8d60fe7 {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._6da3c17c {
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
}

.b1ed155e {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 40px;
  line-height: 4rem;
}

._759002b3 {
  font-size: 48px;
  font-size: 4.8rem;
  line-height: 56px;
  line-height: 5.6rem;
}

._4d1f4af0 {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 16px;
    line-height: 1.6rem;
  }

._25dacaf8 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 20px;
    line-height: 2rem;
  }

.c6513c52 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

._3d543a95 {
    font-size: 20px;
    font-size: 2rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

._0acbcd6d {
    font-size: 26px;
    font-size: 2.6rem;
    line-height: 32px;
    line-height: 3.2rem;
  }

.e4cafeed {
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 40px;
    line-height: 4rem;
  }

._4db4d690 {
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 56px;
    line-height: 5.6rem;
  }

@media (min-width: 45em) {
  ._3200ec2d {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  ._5e828290 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ._1f907af7 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  ._30c23821 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  ._3415c3f7 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._718f43a0 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  ._7dfaf3c4 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

@media (min-width: 63.75em) {
  ._9724cc87 {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  ._0720e70b {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ._0b0087bb {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  .c9c6e053 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  .ee822da0 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  .d040a2c3 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  .a25d3f71 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

.a4506742 {
  line-height: 24px;
  line-height: 2.4rem;
}

._21d479fa {
  line-height: 40px;
  line-height: 4rem;
}

._1122d422 {
  line-height: 19px;
  line-height: 1.9rem;
}

.a3906d1e {
  line-height: 13px;
  line-height: 1.3rem;
}

/* Text margins */

/* TODO: WFE-7446 put text margins to text.css file */

/* margin none rule needs to be before others as it needs to be overridden by them */

._6a1d5bf3 {
  margin: 0;
}

._490307a9 {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

.e5b54d3c {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

._09b0d7cf {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.cde87f44 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._73aca51d {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.e2dfc71f {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._5f5bf719 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

@media (min-width: 45em) {
  .de67bf49 {
    margin-bottom: 0.8rem;
  }
  .f569066c {
    margin-bottom: 0.8rem;
  }
  ._5fe1c9c1 {
    margin-bottom: 1.6rem;
  }
  .b6ac017d {
    margin-bottom: 1.6rem;
  }
  ._4c50f428 {
    margin-bottom: 1.6rem;
  }
  ._6649d46d {
    margin-bottom: 1.6rem;
  }
  ._9d16e54a {
    margin-bottom: 1.6rem;
  }
}

@media (min-width: 63.75em) {
  ._0c44295d {
    margin-bottom: 0.8rem;
  }
  ._2ddb5915 {
    margin-bottom: 0.8rem;
  }
  .b67e17ee {
    margin-bottom: 1.6rem;
  }
  .b3c91c36 {
    margin-bottom: 1.6rem;
  }
  ._4b561f33 {
    margin-bottom: 1.6rem;
  }
  .c5ba6690 {
    margin-bottom: 1.6rem;
  }
  .b6cfb76f {
    margin-bottom: 1.6rem;
  }
}

.b0a8d72a {
  margin-left: 4px;
  margin-left: 0.4rem;
}

._12c41309 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

._28e97fab {
  margin-left: 12px;
  margin-left: 1.2rem;
}

._08b3dca3 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._2b20dbb9 {
  margin-left: auto;
}

._05b62e77 {
  margin-right: 4px;
  margin-right: 0.4rem;
}

._813e5179 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._0c9743ae {
  margin-right: 12px;
  margin-right: 1.2rem;
}

._9486955e {
  margin-right: 16px;
  margin-right: 1.6rem;
}

._9c7df5a7 {
  margin-right: auto;
}

._90ee0062 {
}

/* Styles */

._113fa208 {
  font-style: italic;
}

.ae94d4a0 {
  text-transform: uppercase;
}

._80904e85 {
  text-transform: lowercase;
}

._47b93da7 {
  text-decoration: line-through;
}

._0d1926cc {
  white-space: nowrap;
}

._62786407 {
  text-decoration: underline;
}

._76eaef89 {
  font-weight: 600 !important;
}

._68a7925b {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/*
 * Truncation
 */

.d6eaa7ac {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

._52af931a {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

._287e7636 {
  -webkit-line-clamp: 1;
}

.d79277c0 {
  -webkit-line-clamp: 2;
}

.fcde916a {
  -webkit-line-clamp: 3;
}

._6577c8cd {
  -webkit-line-clamp: 4;
}

._8a882171 {
  -webkit-line-clamp: 5;
}

._96e2cfb6 {
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

._7c8babd9 {
  color: rgb(237, 237, 237);
}

/*
 * Color
 */

/* Text colors */

._4226c084,
._00331a91 {
  color: rgb(255, 102, 0);
}

.a6c874e5 {
  color: rgb(50, 60, 65);
}

._5fbda2aa {
  color: rgb(111, 118, 122);
}

._94774fa6 {
  color: rgb(255, 255, 255);
}

.c4e66b36 {
  color: rgb(91, 99, 103);
}

.f33fb69c {
  color: rgb(208, 2, 27);
}

.abb21870 {
  color: rgb(166, 166, 166);
}

._95026b43 {
  color: inherit;
}

/* Background colors */

._5dafddd7 {
  background-color: white;
}

._460f9e38 {
  background-color: rgb(242, 242, 242);
}

._085693fa {
  background-color: rgb(241, 239, 238);
}

.a88cd854 {
  background-color: rgb(60, 60, 60);
}

.a02cc240 {
  background-color: rgb(237, 234, 227);
}

._0c2608ce {
  background-color: rgb(202, 195, 187);
}

.eb333b18 {
  background-color: rgb(250, 250, 248);
}

._11e0802f {
  background-color: rgb(242, 240, 238);
}

.b33f75e6 {
  background-color: rgb(234, 235, 236);
}

/*
 * Drop shadow
 */

._6084f169 {
  -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
          box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
}

._57ff6676 {
  -webkit-box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
          box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
}

._60ea6447 {
  -webkit-box-shadow: none;
          box-shadow: none;
}

._4c906a96 {
  padding-top: 16px !important;
  padding-top: 1.6rem !important;
}

._4be019ae {
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

._8bc35a98 {
  padding-top: 24px;
  padding-top: 2.4rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

.b15310b6 {
  padding-left: 16px !important;
  padding-left: 1.6rem !important;
  padding-right: 16px !important;
  padding-right: 1.6rem !important;
}

._661d7736 {
  padding-top: 24px;
  padding-top: 2.4rem;
}

.b326728a {
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

.be9f2e84 {
  padding-top: 4px;
  padding-top: 0.4rem;
}

._256e81e6 {
  padding-left: 0 !important;
}

._31c1020a {
  padding-bottom: 0 !important;
}

._0dbe5752 {
  padding: 0 !important;
}

._2f278a0a {
  padding-left: 8px !important;
  padding-left: 0.8rem !important;
}

.cb8dd94b {
  padding-right: 24px !important;
  padding-right: 2.4rem !important;
}

/*
 * Shaping
 */

.a45a94af {
  border-radius: 20rem;
}

.b2136357 {
  border-radius: 0.4rem;
}

/*
 * list
 */

.c57f9dcf {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

._93b2abd0 {
  text-decoration: none
}

._93b2abd0:hover {
  text-decoration: underline;
}

._78e136fb {
  text-decoration: underline
}

._78e136fb:hover {
  text-decoration: none;
}

.a18676a9 {
  text-decoration: underline;
  -webkit-transition: color 200ms;
  transition: color 200ms
}

.a18676a9:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

._545fb003 {
  text-transform: none;
}

.cba9c9ba {
  border-top: 1px solid rgb(166, 166, 166);
  border-top: 0.1rem solid rgb(166, 166, 166);
}

._978dad03 {
  padding: 8px;
  padding: 0.8rem;
}

/*
 * Grid
 */

._98aa382d {
  padding-bottom: 40px;
  padding-bottom: 4rem;
}

.f9821f56 {
  padding-bottom: 4px;
  padding-bottom: 0.4rem;
}

@media (max-width: 44.99em) {
  ._98aa382d {
    padding-bottom: 2rem;
  }
}

._98aa382d::after,
.f9821f56::after {
  content: '';
  position: absolute;
  width: calc(100% - 1.8rem);
  height: 1px;
  height: 0.1rem;
  bottom: 0;
  right: 0;
  background: rgb(166, 166, 166);
  margin-left: 24px;
  margin-left: 2.4rem;
}

/*
 * Separators
 */

._2b9a76d8 {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-top: 0.1rem solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  border-bottom: 0.1rem solid rgba(255, 255, 255, .3);
}

.c759db40 {
  margin-top: 30px;
  margin-top: 3rem;
  margin-bottom: 30px;
  margin-bottom: 3rem;
}

.f1b1fecd {
  border-color: rgb(237, 237, 237) !important;
}

._6335a2a6 {
  border-color: rgb(166, 166, 166) !important;
}

._50eff27f {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237)
}

._50eff27f:first-child {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
}

.dea6b4bf {
  border-bottom: 1px solid rgb(210, 210, 210);
  border-bottom: 0.1rem solid rgb(210, 210, 210)
}

.dea6b4bf:first-child {
  border-top: 1px solid rgb(210, 210, 210);
  border-top: 0.1rem solid rgb(210, 210, 210);
}

.ebd5a8e6 {
  border-bottom: 1px solid rgb(60, 60, 60);
  border-bottom: 0.1rem solid rgb(60, 60, 60)
}

.ebd5a8e6:first-child {
  border-top: 1px solid rgb(60, 60, 60);
  border-top: 0.1rem solid rgb(60, 60, 60);
}

/*
 * https://webaim.org/techniques/css/invisiblecontent/
 * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_screen-reader.scss
 */

._7d5b2b5a {
  position: absolute;
  /* stylelint-disable */
  width: 1px;
  height: 1px;
  /* stylelint-enable */
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  border: 0;
}

/**
 * Remove native input clear button.
 * See https://github.com/necolas/normalize.css/commit/f7c98c4c859c15363763f10a439b63d85b9afba0#diff-bb3dde41d97f19be8ab7b4780a915d5e
 */

[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/**
 * Add outline to input boxes when in desktop view to avoid ios safari bug.
 */

.a7735b97 {
  outline: none;
}

@media (min-width: 63.75em) {

  .a7735b97:focus {
    outline: 0.4rem auto -webkit-focus-ring-color;
  }
}

._6177195d {
  pointer-events: none;
  cursor: not-allowed;
}

._96603f8b input[type='number'] {
  -moz-appearance: textfield
}

._96603f8b input[type='number']::-webkit-inner-spin-button,
  ._96603f8b input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/**
 * Full width content, break out of grid
 */

._75cf2d46 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (min-width: 63.75em) {

  ._75cf2d46 {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

.e1fe0ae8 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  .e1fe0ae8 {
    width: 140rem;
  }
}

._9bd15991 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  ._9bd15991 {
    width: 100vw;
  }
}

/*
 * Margins
 */

._015197b6 {
  margin: 0 !important;
}

._2d8657b8 {
  margin-top: 0 !important;
}

.d4f427ca {
  margin-bottom: 0 !important;
}

._6bdd0d6b {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
}

.fd6c8c1e {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
}

._523f4ea8 {
  margin-top: 48px !important;
  margin-top: 4.8rem !important;
}

._7ddac96d {
  margin-top: 64px !important;
  margin-top: 6.4rem !important;
}

.cf2bcb19 {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
}

.d42d1f40 {
  margin-top: 4px !important;
  margin-top: 0.4rem !important;
}

.f39e5964 {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
}

._80b87414 {
  margin-top: 20px !important;
  margin-top: 2rem !important;
}

._4e27a153 {
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

._07e95efd {
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

._5b863d0d {
  margin-bottom: 40px !important;
  margin-bottom: 4rem !important;
}

.c4f411b3 {
  margin-bottom: 48px !important;
  margin-bottom: 4.8rem !important;
}

._2205186d {
  margin-bottom: 56px !important;
  margin-bottom: 5.6rem !important;
}

._8af9e2c2 {
  margin-bottom: 64px !important;
  margin-bottom: 6.4rem !important;
}

.c9ad8f23 {
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

._12307738 {
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

._5ff17627 {
  margin-bottom: 4px !important;
  margin-bottom: 0.4rem !important;
}

.df5b709f {
  margin-right: 16px;
  margin-right: 1.6rem;
}

._60709502 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._61fac858 {
  margin-right: 24px;
  margin-right: 2.4rem;
}

.f35a0897 {
  margin-right: 32px;
  margin-right: 3.2rem;
}

._22e97b78 {
  margin-left: 32px;
  margin-left: 3.2rem;
}

._16c6f6c9 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._208ebbaa {
  margin-left: 8px;
  margin-left: 0.8rem;
}

.ebd29f38 {
  margin-left: 24px;
  margin-left: 2.4rem;
}

._04f734e2 {
  margin-left: auto !important;
  margin-right: auto !important;
}

.d44dec2f {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

.fcbd9702 {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

.cc285423 {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

._425b9e7a {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

/* Font Face */

.b7e4eb48 {
  font-family: 'GoodHome-Light', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._282d7d3d {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._779a8d02 {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._6d94ecf1 {
  display: inline-block;
  font-size: 14px;
  font-size: 1.4rem;
  padding: 4px 12px;
  padding: 0.4rem 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
  font-weight: bold;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.c3e63831 {
  display: none;
  margin: 8px 0;
  margin: 0.8rem 0;
}

@media (min-width: 45em) {

  .c3e63831 {
    display: inline-block;
  }
}

.e1fc995f {
  margin: 8px 0;
  margin: 0.8rem 0;
}

@media (max-width: 63.74em) {

  .e1fc995f {
    display: none;
  }
}

._79d27460 {
  margin: 8px 0;
  margin: 0.8rem 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.ebdb360d {
  height: 24px;
  height: 2.4rem;
}

._79c35bd6 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

@media (min-width: 45em) {

  ._79c35bd6 {
    height: 3.2rem;
  }
}

.a8222539,
._4bcba1f6,
.e69258ee,
._34dca7e7 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.b2256a8a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

._7565789c,
.c32f2db4 {
  margin-top: 8px;
  margin-top: 0.8rem;
}

.c2741267 {
  margin-top: 16px;
  margin-top: 1.6rem;
}

._46eded3b {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.cd0f0531,
.ecdf4d56 {
  margin: 8px 0;
  margin: 0.8rem 0;
}

._785a44e7 {
  margin: 8px 0;
  margin: 0.8rem 0;
}

@media (max-width: 63.74em) {

  ._785a44e7 {
    margin: 0;
  }
}

._492e97cf {
  margin-top: 16px;
  margin-top: 1.6rem;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._0c6024e4 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

@media (min-width: 45em) {

  ._0c6024e4 {
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 0.4rem 1.6rem;
  }
}

.d475e6fa {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

.a477b553 {
  display: inline-block;
  padding: 4px 12px;
  padding: 0.4rem 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

._6caf4852 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._79ec47d7 {
  height: 24px;
  height: 2.4rem;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

@media (min-width: 45em) {

  ._79ec47d7 {
    height: 3.2rem;
    font-size: 1.6rem;
    line-height: 2.4rem;
    padding: 0.4rem 1.6rem;
  }
}

.acb5f3fe,
._4591eea8,
._4002d943,
._6213bfa3,
.f5a7054c {
  height: 24px;
  height: 2.4rem;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

.c6d467f7 {
  display: none;
  margin: 8px 0;
  margin: 0.8rem 0;
}

@media (min-width: 45em) {

  .c6d467f7 {
    display: inline-block;
  }
}

._86360173 {
  margin: 8px 0;
  margin: 0.8rem 0;
}

@media (max-width: 63.74em) {

  ._86360173 {
    display: none;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._3957d262 {
  margin-bottom: 0;
}

._601d785f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 8px;
  margin-top: 0.8rem;
}

.e6a4dbaa {
  padding-top: 16px;
  padding-top: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._2a18e9c1 {
  width: auto;
  min-width: auto;
  height: 100%;
  padding: 1px;
  padding: 0.1rem;
  margin-left: 16px;
  margin-left: 1.6rem;
  border-color: rgb(166, 166, 166);
}

._2a18e9c1._0cc95cd6 {
  margin-top: 1px;
  margin-top: 0.1rem;
  border: none;
  outline: 1.5px solid rgb(50, 60, 65);
  outline: 0.15rem solid rgb(50, 60, 65);
  -webkit-box-shadow: inset 0 0 0 0.1rem rgb(50, 60, 65);
          box-shadow: inset 0 0 0 0.1rem rgb(50, 60, 65);
}

@media (max-width: 44.99em) {

  ._2a18e9c1._0cc95cd6 {
    border-right: rgb(50, 60, 65) 0.1rem
      solid;
  }
}

._2992a8de {
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
  -webkit-transform-origin: center;
          transform-origin: center;
}

._2992a8de svg {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 16px;
    width: 1.6rem;
  }

@media (min-width: 63.75em) {

  ._2992a8de:hover {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@media (max-width: 63.74em) {

  ._2992a8de:active {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._77ba0d6d {
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-left: auto;
}

._4485d983 {
  font-size: 12px;
  font-size: 1.2rem;
}

._9ec97bb3 {
  position: absolute;
  width: 1px;
  width: 0.1rem;
  height: 1px;
  height: 0.1rem;
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.d10c2120 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 8px 16px 8px
    8px;
  padding: 0.8rem 1.6rem 0.8rem
    0.8rem;
  background-color: rgb(242, 242, 242);
}

._36e0b2a9 {
  width: 16px;
  width: 1.6rem;
  height: 16px;
  height: 1.6rem;
  margin-right: 4px;
  margin-right: 0.4rem;
  border: 2px solid rgb(50, 60, 65);
  border: 0.2rem solid rgb(50, 60, 65);
  background-color: rgb(255, 255, 255);
}

._36e0b2a9 svg {
  fill: rgb(255, 255, 255);
  opacity: 0;
  -webkit-transition: opacity 200ms ease-out;
  transition: opacity 200ms ease-out;
}

.e36fac1c {
  margin: 0;
}

.e7e0f706 .d10c2120 {
  background-color: rgb(50, 60, 65);
}

.e7e0f706 ._36e0b2a9 svg {
  opacity: 1;
}

.e7e0f706 ._36e0b2a9 {
  border-color: transparent;
  background-color: transparent;
}

.e7e0f706 .e36fac1c {
  color: rgb(255, 255, 255);
}

._0da57659 ._36e0b2a9 {
  display: none;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._62fec02d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._621468ba {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0;
}

._9a07856c {
  margin: 0;
  margin-right: 8px;
  margin-right: 0.8rem;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

._3eebb410 {
  color: rgb(121, 184, 67);
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 600;
}

._732dbf2c {
  color: rgb(208, 2, 27);
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 600;
}

._6c8ab92c {
  color: rgb(111, 118, 122);
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 600;
}

.ec7084fe {
  color: rgb(111, 118, 122);
  display: inline;
  margin-right: 8px;
  margin-right: 0.8rem;
}

.ea2e7047 {
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
}

._3d919eaf {
  display: inline-block;
  vertical-align: text-top;
  cursor: pointer;
  padding-left: 8px;
  padding-left: 0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.a58345ec {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 16px;
  padding: 1.6rem;
}

@media (min-width: 45em) {

  .a58345ec {
    padding: 2.4rem;

    /*We need this to fit the alert that pops up
    when you click remove
   */
    min-height: 17.4rem;
  }
}

.e636260f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
}

.d55ba15e {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 44.99em) {

  .d55ba15e {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

._5263acf6 {
  display: none;
}

@media (min-width: 63.75em) {

  ._5263acf6 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.ea1730d2 {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  width: 100%;

  /* IE11 fix */
}

@media (min-width: 45em) {

  .ea1730d2 {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 50%;
            flex: 1 1 50%;
    width: auto;
  }
}

.bcb20e39 {
  width: 100%;
}

@media (min-width: 45em) {

  .bcb20e39 {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 50%;
            flex: 1 1 50%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media (max-width: 44.99em) {

  ._527f3206 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media (min-width: 45em) {

  ._35a83977 {
    margin-right: 1.6rem;
  }
}

._1a644c1d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) {

  ._1a644c1d {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

._2c3d13b1 {
  margin: 8px 0 8px;
  margin: 0.8rem 0 0.8rem;
}

@media (min-width: 45em) {

  ._2c3d13b1 {
    margin: 0.8rem 0 1.6rem;
  }
}

._72c1c501 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

@media (min-width: 45em) {

  ._72c1c501 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
}

._5aca8109 {
  margin-top: 4px;
  margin-top: 0.4rem;
  margin-bottom: 4px;
  margin-bottom: 0.4rem;
}

@media (min-width: 45em) {

  ._5aca8109 {
    text-align: right;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
  }
}

@media (min-width: 45em) {

  .df94d897 {
    margin-top: 0;
  }
}

.df94d897 button,
  .df94d897 input {
    width: 44px;
    width: 4.4rem;
    height: 44px;
    height: 4.4rem;
}

.af96ec7b {
  margin-right: auto;
  padding-left: 32px;
  padding-left: 3.2rem;
  padding-right: 32px;
  padding-right: 3.2rem;
}

@media (min-width: 45em) {

  .af96ec7b {
    margin-left: 0;
    margin-right: 0;
  }
}

._389003a4 {
  text-align: right;
}

@media (min-width: 45em) {

  ._389003a4 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

.e636260f + ._389003a4 .af96ec7b {
  margin-top: 8px;
  margin-top: 0.8rem;
}

@media (min-width: 45em) {

  ._622fc89f {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

@media (min-width: 45em) {

  ._33de12c3 {
    height: 100%;
    padding: 0 3.2rem;
  }

  ._33de12c3::before {
    margin-bottom: 0.8rem;
  }

  ._33de12c3::after {
    margin-top: 0.8rem;
  }
}

.fd0c7b84 {
  width: 44px;
  width: 4.4rem;
  height: 44px;
  height: 4.4rem;
  padding: 10px;
  padding: 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
}

.fd0c7b84 i {
    width: 24px;
    width: 2.4rem;
    height: 24px;
    height: 2.4rem;
  }

._85ee13be {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._85ee13be:empty {
  display: none;
}

.eef05b61 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._89ac8996 {
  margin-top: 16px;
  margin-top: 1.6rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.e2b5fa53 {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 45em) {

  .e2b5fa53 {
    margin: 0;
    margin-right: 1.6rem;
  }
}

._53c0a84f::before {
  content: '\2022';
  font-size: 16px;
  font-size: 1.6rem;
  margin: 0 8px 0 0;
  margin: 0 0.8rem 0 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (min-width: 45em) {

  ._98862620 {
    -ms-flex-item-align: center;
        align-self: center;
    margin-left: 1.6rem;
  }
}

._819b0d14 {
  width: 64px;
  width: 6.4rem;
  height: 64px;
  height: 6.4rem;
}

._586a7525 {
  -ms-flex-item-align: center;
      align-self: center;
}

@media (min-width: 45em) {

  ._586a7525 {
    margin-right: 1.6rem;
  }
}

._344ee969 {
}

._6be6b761 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

._7bf25f78 {
  padding-top: 2px;
  padding-top: 0.2rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._54728ef9 {
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 16px 0;
  padding: 1.6rem 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.db7afd45 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

.c3f9a57c {
  color: rgb(50, 60, 65);
}

._32ab21d8 {
  color: rgb(111, 118, 122);
}

._1294d39c {
  margin: 0 auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (max-width: 44.99em) {

  ._1294d39c {
    margin: 0 1.6rem;
  }
}

@media (min-width: 45em) {

  ._1294d39c {
    max-width: 49.6rem;
  }
}

@media (min-width: 63.75em) {

  ._1294d39c {
    max-width: 80.8rem;
  }
}

@media (max-width: 44.99em) {

  ._1294d39c .db7afd45 {
    margin-bottom: 2.8rem;
  }
}

@media (max-width: 44.99em) {

  ._623e0047 svg {
    width: 20.4rem;
    height: 11.2rem;
  }
}

._1294d39c .c3f9a57c p {
  margin-bottom: 32px;
  margin-bottom: 3.2rem;
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
  font-weight: bold;
  color: rgb(0, 0, 0);
}

@media (max-width: 44.99em) {

  ._1294d39c .c3f9a57c p {
    margin-bottom: 2.4rem;
    font-size: 2rem;
  }
}

._1294d39c ._32ab21d8 p {
  font-size: 20px;
  font-size: 2rem;
  font-weight: bold;
  color: rgb(0, 0, 0);
}

@media (max-width: 44.99em) {

  ._1294d39c ._32ab21d8 p {
    font-size: 1.6rem;
  }
}

._15cc9556 span {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: normal;
  color: rgb(60, 60, 60);
}

@media (max-width: 44.99em) {

  ._15cc9556 span a:last-child {
    display: block;
  }
}

._15cc9556 span a:last-child span {
  text-decoration: none;
  font-weight: bold;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._8dddbb40 {
  height: auto;
}

.bc5c115e {
  padding: 32px;
  padding: 3.2rem;
}

@media (min-width: 63.75em) {

  .bc5c115e {
    padding: 0;
  }
}

._39abd7f9 {
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 8px;
  padding-bottom: 0.8rem;
}

._39abd7f9 li {
    list-style-type: disc;
    margin-left: 20px;
    margin-left: 2rem;
  }

.f58d3b41 {
  display: none;
}

@media (min-width: 45em) {

  .f58d3b41 {
    display: block;
  }
}

@media (min-width: 63.75em) {

  .f58d3b41 {
    margin-right: 12.8rem;
  }
}

.eda79ef0 {
  padding: 16px;
  padding: 1.6rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._44d0b0d3 {
  text-align: left;
}

.d1aa5903 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._93be0a85 {
  margin-bottom: 0;
}

/*
 * z-index
 */

._04066ce2 {
  z-index: 1;
}

._3f6a5229 {
  z-index: 80;
}

.f67c6a1a {
  z-index: 80;
}

.e8619429 {
  z-index: 90;
}

.cb47c97a {
  z-index: 115;
}

.e4c9eb57 {
  z-index: 1000;
}

._2bbeccae {
  z-index: 1100;
}

._67eb9030 {
  z-index: 10000;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._0d172e49 {
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  height: 0;
  position: sticky;
}

._9e9f621e {
  top: 104px;
  top: 10.4rem;
}

@media (min-width: 63.75em) {

  ._9e9f621e {
    top: 0;
  }
}

._9e9f621e._23cc32cb {
  top: 56px;
  top: 5.6rem;
}

@media (min-width: 63.75em) {

  ._9e9f621e._23cc32cb {
    top: 0;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._0de3f6a2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.cbae4712 {
  padding: 8px;
  padding: 0.8rem;
}

.a40608c0 {
  padding: 16px;
  padding: 1.6rem;
}

.a40608c0 ._6cb0aa93 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

._0c28f1a3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.da39534c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._46c148dc {
  background: rgb(254, 245, 228);
}

.c88ea37f {
  background: rgb(251, 230, 229);
}

.dbce1435 {
  background: rgb(208, 2, 27);
}

.bddcb556 {
  background: rgb(241, 248, 229);
}

.c9aeddf4 {
  background: rgb(0, 163, 150);
}

.bc0fd387 {
  /* ensures that the link is not broken across two lines */
  white-space: nowrap;
  display: inline;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._718be1dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: rgb(255, 255, 255);
  margin: auto 0; /* prevents top being cropped on small screens */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  cursor: auto;
  overflow: hidden
}

._718be1dd > * {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media (min-width: 45em) {

  ._718be1dd {
    border-radius: 0.4rem;
    position: static;
    width: auto;
    height: auto;
  }
}

@media (min-width: 45em) {

  .b5ec6e80 {
    max-width: 60rem;
    min-height: 50rem;
  }
}

.ac84308e {
  padding: 16px;
  padding: 1.6rem;
  background-color: rgb(50, 60, 65);
  color: rgb(255, 255, 255);
  position: relative;
}

@media (min-width: 45em) {

  .ac84308e {
    padding: 1.6rem 2.4rem 0;
    color: rgb(50, 60, 65);
    background-color: transparent;
  }
}

.bebe557f {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-top: 24px;
  padding-top: 2.4rem;
}

._740cb5dd {
  cursor: pointer;
}

._0f3bf8e2 {
  margin-right: 24px;
  margin-right: 2.4rem;
  display: none;
}

@media (min-width: 45em) {

  ._0f3bf8e2 {
    display: block;
  }
}

._0518bec2 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._05108bdc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-top: 1px solid rgb(210, 210, 210);
}

._71b85067,
._05108bdc {
  padding: 16px;
  padding: 1.6rem;
}

@media (min-width: 45em) {

  ._71b85067,
._05108bdc {
    padding: 1.6rem 2.4rem;
  }
}

._71b85067 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

@media (min-width: 45em) {

  .ac84308e + ._71b85067:not(._2f00600b) {
      margin-top: 16px;
      margin-top: 1.6rem;
  }
}

.abe91f90 {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.b228ccc0 {
  padding: 0;
}

._2f00600b {
  margin: 0;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.b63b242c {
  width: 100%;
  height: 100%;
}

._712204a9 {
  background-color: rgb(50, 60, 65);
  color: rgb(255, 255, 255);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  padding: 16px;
  padding: 1.6rem;
}

._1a3fe9bd {
  font-size: 17px;
  font-size: 1.7rem;
  width: 90%;
  text-align: center;
}

.daddaff1 {
  max-width: 100%;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.df29d37d {
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

@media (min-width: 45em) {

  .df29d37d {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }
}

@media (min-width: 63.75em) {

  .df29d37d {
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
  }
}

@media (min-width: 63.75em) {

  ._1fae7c47 {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }
}

._43cb19b0 {
  padding-left: 12px;
  padding-left: 1.2rem;
}

.df29d37d .d8482fda {
  padding-left: 0;
}

@media (min-width: 45em) {

  .df29d37d .d8482fda {
    padding-left: 1.6rem;
  }
}

@media (min-width: 63.75em) {

  .df29d37d .d8482fda {
    padding-left: 2.4rem;
  }
}

@media (min-width: 63.75em) {

  .df29d37d ._0410f573 {
    padding-left: 1.6rem;
  }
}

.c885686e {
  display: inline;
}

.c3fdff89 {
  display: inline;
  font-weight: bold;
}

._518c667e {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  margin: 0;
  position: relative;
}

._28c8d51a {
  margin-right: -16px;
  margin-right: -1.6rem;
}

@media (min-width: 45em) {

  ._28c8d51a {
    margin-right: 0;
  }
}

._22d22d45 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

@media (min-width: 45em) {

  ._22d22d45 {
    margin-left: 0;
  }
}

.c72c499f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

.c9cbdde1 > svg {
  width: auto;
  fill: rgb(255, 102, 0);
}

._5a966a87 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  min-height: 24px;
  min-height: 2.4rem;
  height: auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 16px;
  padding-left: 1.6rem;
  padding-bottom: 4px;
  padding-bottom: 0.4rem;
  padding-top: 4px;
  padding-top: 0.4rem;
  border-bottom: 1px solid rgb(214, 216, 217);
  border-bottom: 0.1rem solid rgb(214, 216, 217);
}

.e48bff5f {
  font-weight: bold;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  text-transform: capitalize;
}

@media (min-width: 45em) {

  .e48bff5f {
    width: 50%;
  }
}

.edb98595 {
  text-align: right;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.edb98595 ._43d6e57a::after {
    content: ',\A0';
  }

.edb98595 ._43d6e57a:last-child::after {
    content: none;
  }

@media (min-width: 45em) {

  .edb98595 {
    width: 50%;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.df29d37d ._8347aed9 {
  padding-left: 0;
}

@media (min-width: 45em) {

  .df29d37d ._8347aed9 {
    padding-left: 1.6rem;
  }
}

@media (min-width: 63.75em) {

  .df29d37d ._8347aed9 {
    padding-left: 2.4rem;
  }
}

@media (min-width: 63.75em) {

  .df29d37d .fa4d9919 {
    padding-left: 1.6rem;
  }
}

._8e9d5b27 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 32px 16px;
  padding: 3.2rem 1.6rem;
  margin-right: -16px;
  margin-right: -1.6rem;
}

@media (min-width: 45em) {

  ._8e9d5b27 {
    margin: 0 -4rem;
    max-height: 29.6rem;
    padding: 3.2rem 4rem;
  }
}

@media (min-width: 63.75em) {

  ._8e9d5b27 {
    max-height: 20rem;
  }
}

@media (min-width: 63.75em) {

  .f5360d6b {
    margin: 0 -4rem;
    max-height: 29.6rem;
    padding: 3.2rem 4rem;
  }
}

._98b15813 {
  list-style: disc;
  padding-left: 16px;
  padding-left: 1.6rem;
}

@media (min-width: 45em) {

  ._98b15813 {
    margin-left: 1.6rem;
    padding-left: 0;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
}

@media (min-width: 63.75em) {

  ._98b15813 {
    -webkit-column-count: 4;
       -moz-column-count: 4;
            column-count: 4;
    -webkit-column-gap: 4rem;
       -moz-column-gap: 4rem;
            column-gap: 4rem;
  }
}

@media (min-width: 63.75em) {

  .bd97cb4a {
    margin-left: 1.6rem;
    padding-left: 0;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
}

.c129705d {
  position: absolute;
  right: 24px;
  right: 2.4rem;
  bottom: 16px;
  bottom: 1.6rem;
  width: 159px;
  width: 15.9rem;
}

@media (min-width: 45em) {

  .c129705d {
    right: 1.6rem;
  }
}

@media (min-width: 63.75em) {

  .c129705d {
    width: 27.6rem;
  }
}

@media (min-width: 63.75em) {

  ._620a268a {
    width: 15.9rem;
    right: 1.6rem;
  }
}

._02ab5539 {
  margin-top: 16px;
  margin-top: 1.6rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media (min-width: 45em) {

  ._613fcc14 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

.a4929bd6 {
  width: 100%;
  margin-top: 16px;
  margin-top: 1.6rem;
}

@media (min-width: 45em) {

  .a4929bd6 {
    margin-top: 0;
  }
}

@media (min-width: 63.75em) {

  .a4929bd6 {
    width: 34.3rem;
  }
}

@media (min-width: 63.75em) {

  .c5bf89f9 {
    width: 100%;
    margin-top: 0;
  }
}

.df29d37d .b11193ba {
  padding: 0;
}

@media (min-width: 45em) {

  .df29d37d .b11193ba {
    padding: 2.4rem 0 0 1.6rem;
  }
}

.dab6c827 {
  width: 100vw;
  height: 208px;
  height: 20.8rem;
  position: relative;
}

@media (min-width: 45em) {

  .dab6c827 {
    width: 100%;
    height: 100%;
  }
}

.d1e4c062 {
  width: 100%;
  height: 100%;
}

._99a73e7b {
  margin-top: 16px;
  margin-top: 1.6rem;
}

@media (min-width: 45em) {

  ._99a73e7b {
    margin-top: 0.8rem;
  }
}

._99a73e7b._8c9ce3d3 {
  margin-top: 32px;
  margin-top: 3.2rem;
}

._07033093 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin: 16px -32px 0;
  margin: 1.6rem -3.2rem 0;
  padding: 12px 32px;
  padding: 1.2rem 3.2rem;
}

@media (min-width: 63.75em) {

  ._07033093 {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 1.2rem 0;
    margin: 0;
  }
}

._07033093 > ._6bf0df52 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

@media (min-width: 63.75em) {

  ._2a5212cd {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding: 1.2rem 3.2rem;
    margin: 1.6rem -3.2rem 0;
  }
}

.fff4dac1 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._00b59139 {
  margin-bottom: 32px;
  margin-bottom: 3.2rem;
}

@media (max-width: 44.99em) {

  ._9fd4c884 {
    font-size: 2.6rem;
  }
}

._82c75e40 {
  background-color: #fbe6e5;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  margin-left: 16px;
  margin-left: 1.6rem;
  margin-top: 24px;
  margin-top: 2.4rem;
  padding: 24px;
  padding: 2.4rem;
  width: 100%;
}

@media (min-width: 63.75em) {

  ._82c75e40 {
    margin-left: 2.4rem;
  }
}

._14768f12 {
  font-weight: bold;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._6dc35f1e {
  background: rgb(242, 242, 242);
  border: 1px solid rgb(237, 237, 237);
  border: 0.1rem solid rgb(237, 237, 237);
  width: 40px;
  width: 4rem;
  height: 25px;
  height: 2.5rem;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: background ease-out 200ms,
    border-color ease-out 200ms;
  transition: background ease-out 200ms,
    border-color ease-out 200ms;
  cursor: pointer;
}

.d5a16388 {
  background: rgb(255, 102, 0);
  border-color: rgb(255, 102, 0);
}

.c380c68e {
  background: rgb(121, 184, 67);
  border-color: rgb(121, 184, 67);
}

._407e68ae {
  top: 1px;
  top: 0.1rem;
  left: 1px;
  left: 0.1rem;
  width: 21px;
  width: 2.1rem;
  height: 21px;
  height: 2.1rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 0 1px 4px 0.5px rgba(0, 0, 0, .2);
          box-shadow: 0 1px 4px 0.5px rgba(0, 0, 0, .2);
  display: block;
  position: absolute;
  background: rgb(255, 255, 255);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

._4d9d2e88 ._407e68ae {
  -webkit-transform: translate3d(1.5rem, 0, 0);
          transform: translate3d(1.5rem, 0, 0);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._46736b25 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._05634369 {
  height: 40px;
  height: 4rem;
  width: 40px;
  width: 4rem;
  display: block;
}

._05634369 img {
    width: 100%;
    height: 100%;
    -o-object-fit: scale-down;
       object-fit: scale-down;
  }

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

.edc75a22 {
  z-index: 1;
}

._8078522d {
  z-index: 80;
}

.d2fa9d7f {
  z-index: 80;
}

.dc666a07 {
  z-index: 90;
}

.b9fe51a2 {
  z-index: 115;
}

._6f7dc58f {
  z-index: 1000;
}

._1485a008 {
  z-index: 1100;
}

._7c4ddb31 {
  z-index: 10000;
}

:root { /* value chosen by design team */
}

._23e32676 {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

@media (min-width: 63.75em) {

  ._23e32676 {
    margin: auto;
    max-width: 102rem;
  }
}

._39a46aa2 {
  width: 100%;
  min-height: 200px;
  min-height: 20rem;
}

@media (min-width: 63.75em) {

  ._39a46aa2 {
    height: 22.4rem !important;
    width: 100%;
    min-height: 0;
    min-height: initial;
  }
}

._5bb74fa3 {
  position: absolute;
  right: 16px;
  right: 1.6rem;
  bottom: 16px;
  bottom: 1.6rem;
  z-index: 60;
}

._35a29f1c {
  height: 48px;
  height: 4.8rem;
  width: 48px;
  width: 4.8rem;
}

.b612c4cd {
  height: 89px;
  height: 8.9rem;
  width: 89px;
  width: 8.9rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._16bcda0b {
  margin-top: 8px;
  margin-top: 0.8rem;
}

._6ff0b825 {
  width: 40px;
  width: 4rem;
  margin-left: -8px;
  margin-left: -0.8rem;
}

._4000f451 {
  margin: 0 auto;
}

._6056853f {
  width: 40px;
  width: 4rem;
  height: 40px;
  height: 4rem;
}

._66f6d145 {
  position: relative;
}

._7f015ce7 {
  color: rgb(255, 255, 255);
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 26px;
  line-height: 2.6rem;
  position: absolute;
  top: 4px;
  top: 0.4rem;
  width: 100%;
  text-align: center;
}

._9af3b960 {
  overflow: hidden;
}

._87781d29 {
  max-height: 48px;
  max-height: 4.8rem;
}

.d1f9f651 {
  font-size: 16px;
  font-size: 1.6rem;
  text-decoration: underline;
  margin: 0 0 0 56px;
  margin: 0 0 0 5.6rem;
}

.d7f64bbb {
  padding: 0;
}

.d7f64bbb::after,
.d7f64bbb::before {
  content: none;
}

/* Modal view V2 */

._7063c800 {
  width: 30px;
  width: 3rem;
  height: 30px;
  height: 3rem;
}

._0d4932ac {
  font-size: 10px;
  font-size: 1rem;
  line-height: 20px;
  line-height: 2rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._0c543365 {
  margin-top: 16px;
  margin-top: 1.6rem;
  padding: 8px;
  padding: 0.8rem;
  border-bottom-left-radius: 4px;
  border-bottom-left-radius: 0.4rem;
  border-bottom-right-radius: 4px;
  border-bottom-right-radius: 0.4rem;
}

._76d9330f {
  padding-top: 8px;
  padding-top: 0.8rem;
  background-color: rgb(254, 245, 228);
}

._71309405 {
  padding-top: 8px;
  padding-top: 0.8rem;
  background-color: rgb(241, 248, 229);
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.b0e43fed {
  margin-left: 0;
}

._5e2c5c92 {
  margin-top: 2px;
  margin-top: 0.2rem;
  padding-left: 0;
}

._5e2c5c92 div {
  width: 40px;
  width: 4rem;
  height: 40px;
  height: 4rem;
}

/* need to reset inherited styles */

._5e2c5c92 img {
  position: static;
  position: initial;
  top: 0;
  left: 0;
  transform: none;
  -webkit-transform: none;
  margin-top: 4px;
  margin-top: 0.4rem;
  width: 40px;
  width: 4rem;
  height: auto;
  -o-object-fit: scale-down;
     object-fit: scale-down;

  /* IE fallback */
  background: rgb(255, 255, 255);
  max-width: 100%;
  max-height: 100%;
}

.c2536a23 {
  margin-bottom: 0;
}

.b14301d4 {
  margin-bottom: 4px;
  margin-bottom: 0.4rem;
  margin-left: 8px;
  margin-left: 0.8rem;
}

.cf7433a5 {
  width: 40px;
  width: 4rem;
}

.eedb1d25 {
  margin: 0 auto;
}

._147d422a .eedb1d25,
._147d422a .b14301d4 {
  margin-bottom: 0;
}

._4114eaf1 {
  padding: 0;
  margin-bottom: -8px;
  margin-bottom: -0.8rem;
  margin-left: 8px;
  margin-left: 0.8rem;
}

._4114eaf1::before {
  margin-bottom: 0;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._5572b884 {
  border-bottom: solid 4px rgb(255, 255, 255);
  border-bottom: solid 0.4rem rgb(255, 255, 255);
  margin-top: 16px;
  margin-top: 1.6rem;
}

div._90988333 div._5572b884:last-child {
  border-bottom: none;
}

div._90988333 div._5572b884:first-child {
  margin-top: 0;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._3ef2d767 {
  margin-top: 8px;
  margin-top: 0.8rem;
}

._942cf478 {
  width: 40px;
  width: 4rem;
}

._3561f39e {
  margin: 0 auto;
}

._4674d9cb {
  max-height: 48px;
  max-height: 4.8rem;
}

._8b09e6e6 {
  color: rgb(111, 118, 122);
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.abb48bdc {
  position: relative;
  min-width: 100px;
  min-width: 10rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

._12a4cb87 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
  padding: 10px 40px;
  padding: 1rem 4rem;
  line-height: normal;
  border-radius: 0.4rem;
  font-size: 16px;
  font-size: 1.6rem;
  width: 100%;
  background: rgb(255, 255, 255);
  color: rgb(50, 60, 65);
  -webkit-appearance: none;
  -webkit-transition: padding-right 0.177s ease-out;
  transition: padding-right 0.177s ease-out;
}

@media (max-width: 63.74em) {

  ._12a4cb87 {
    height: auto;
  }
}

._12a4cb87::-webkit-input-placeholder {
  color: rgb(111, 118, 122);
}

._12a4cb87::-moz-placeholder {
  color: rgb(111, 118, 122);
}

._12a4cb87::-ms-input-placeholder {
  color: rgb(111, 118, 122);
}

._12a4cb87::placeholder {
  color: rgb(111, 118, 122);
}

._12a4cb87::-ms-clear {
  display: none;
}

._9fa32b32 {
  padding-right: 8px;
  padding-right: 0.8rem;
}

._9fa32b32::-ms-clear {
  display: none;
}

._7f46479d {
  position: absolute;
  margin: 0 8px;
  margin: 0 0.8rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
  -webkit-transition: opacity 0.177s ease-out;
  transition: opacity 0.177s ease-out;
  pointer-events: auto;
}

.b57eeab4 {
  -webkit-transition: opacity 0.177s ease-out;
  transition: opacity 0.177s ease-out;
  opacity: 0;
  pointer-events: none;
}

.b7ec68be {
  position: absolute;
  margin: 8px;
  margin: 0.8rem;
  top: 0;
  left: 0;
  -webkit-transition: opacity 0.1s ease-out;
  transition: opacity 0.1s ease-out;
}

._65dd9f5f {
  margin: 16px 0;
  margin: 1.6rem 0;
}

._3a0b522b input {
    padding-left: 8px;
    padding-left: 0.8rem;
  }

._3a0b522b .b7ec68be {
    opacity: 0;
  }

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._34d0b77b input {
    border-color: rgb(166, 166, 166);
  }

.b0f8fbe3 {
  padding: 16px 0;
  padding: 1.6rem 0;
  margin-bottom: -16px;
  margin-bottom: -1.6rem;
  width: 100%;
  text-align: left;
}

.b9198538 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._26d6e429 {
  width: 100%;
  height: auto;
}

@media (min-width: 45em) {

  ._26d6e429 {
    width: 60rem;
    /* Modal content is not scrollable in IE11 with height: auto */
  }
}

@media (min-width: 45em) and (-ms-high-contrast: active),
  (-ms-high-contrast: none) {

  ._26d6e429 {
    height: 100%;
  }
}

._89dc853d {
  padding: 0;
}

._4ecc07d4 {
  padding: 16px;
  padding: 1.6rem;
}

@media (min-width: 45em) {

  ._4ecc07d4 {
    padding: 1.6rem 2.4rem;
  }
}

._582d595a {
  padding-top: 16px;
  padding-top: 1.6rem;
}

@media (min-width: 45em) {

  ._582d595a {
    padding-top: 0;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._0f52465a {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  margin-left: 16px;
  margin-left: 1.6rem;
  margin-right: 16px;
  margin-right: 1.6rem;
}

@media (min-width: 45em) {

  ._0f52465a {
    margin-left: 3.2rem;
    margin-right: 3.2rem;
  }
}

@media (min-width: 63.75em) {

  ._0f52465a {
    margin-left: 0;
    margin-right: 0;
  }
}

._0d282675 {
  background-color: rgb(242, 242, 242);
  width: 100%;
  height: 226px;
  height: 22.6rem;
}

@media (min-width: 45em) {

  ._0d282675 {
    height: 17.8rem;
  }
}

@media (min-width: 63.75em) {

  ._0d282675 {
    height: 21rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._40158784 {
  list-style: none;
  margin: 0;
  padding: 0;
}

._8e460fe6 {
    /* IE Fallback */
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    margin-left: -16px;
    margin-left: -1.6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    /* For browsers that support CSS grid */
    display: grid;
    grid-template-columns: repeat(
      3,
      minmax(22rem, 1fr)
    );
    grid-gap: 1.6rem;
    padding: 16px 32px;
    padding: 1.6rem 3.2rem;
  }

@media (min-width: 63.75em) {

  ._8e460fe6 {
    grid-gap: 2.4rem;
    padding: 1.6rem 0;
  }
}

._8e460fe6 {

  /*Override conflicting fallbacks when grid is supported
   */
}

._8e460fe6 .b9bdc658 {
      /* IE Fallback */
      -ms-flex-preferred-size: calc(33.33333% - 1.6rem);
          flex-basis: calc(33.33333% - 1.6rem);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin: 0 0 16px 16px;
      margin: 0 0 1.6rem 1.6rem;

      /** This will be the min size doubled **/
      max-width: 440px;
      max-width: 44rem;
}

._8e460fe6 .e0835e76 {
      grid-column: 1 / -1;
      max-width: 100%;
}

@supports (display: grid) {

  ._8e460fe6 {
    margin-left: 0;
  }

  ._8e460fe6 .b9bdc658 {
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
        margin: 0;
  }
}

@media (min-width: 45em) {
  ._6b5bb6a7 {
    /* IE Fallback */
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    margin-left: -1.6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    /* For browsers that support CSS grid */
    display: grid;
    grid-template-columns: repeat(
      3,
      minmax(22rem, 1fr)
    );
    grid-gap: 1.6rem;
    padding: 1.6rem 3.2rem;
  }
}

@media (min-width: 45em) and (min-width: 63.75em) {

  ._6b5bb6a7 {
    grid-gap: 2.4rem;
    padding: 1.6rem 0;
  }
}

@media (min-width: 45em) {

  ._6b5bb6a7 {

    /*Override conflicting fallbacks when grid is supported
   */
  }

  ._6b5bb6a7 .b9bdc658 {
      /* IE Fallback */
      -ms-flex-preferred-size: calc(33.33333% - 1.6rem);
          flex-basis: calc(33.33333% - 1.6rem);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin: 0 0 16px 16px;
      margin: 0 0 1.6rem 1.6rem;

      /** This will be the min size doubled **/
      max-width: 440px;
      max-width: 44rem;
  }

  ._6b5bb6a7 .e0835e76 {
      grid-column: 1 / -1;
      max-width: 100%;
  }

  @supports (display: grid) {

    ._6b5bb6a7 {
      margin-left: 0;
    }

    ._6b5bb6a7 .b9bdc658 {
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
        margin: 0;
    }
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.fb71ce15 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 0.4rem;
  padding: 12px 16px
    12px 8px;
  padding: 1.2rem 1.6rem
    1.2rem 0.8rem;
  background: rgba(255, 102, 0, .1);
}

.cb1e4775 {
  background: rgb(251, 159, 0);
  margin-right: 8px;
  margin-right: 0.8rem;
  width: 24px;
  width: 2.4rem;
  height: 24px;
  height: 2.4rem;
}

.cb1e4775 svg {
  fill: rgb(255, 255, 255);
}

.c0ce7029 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

.ff900c26 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

.c138a096 {
  margin-top: 16px;
  margin-top: 1.6rem;
}

.e2a9cd14 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

@media (min-width: 45em) {

  .e2a9cd14 {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

._1e773971 {
  border-radius: 0.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media (min-width: 45em) {

  ._1e773971 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

._6d27ac62 {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  min-height: 70px;
  min-height: 7rem;
}

._9c70cf17 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

@media (min-width: 45em) {

  ._9c70cf17 {
    margin-bottom: 0;
  }
}

._85537089 {
  color: rgb(111, 118, 122);
}

._89a97c8e {
  color: rgb(111, 118, 122);
}

.d50ab10c {
  margin-top: auto;
}

._94550eb3 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  margin-left: 16px;
  margin-left: 1.6rem;
}

.daefe1ab {
  margin-bottom: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.cdd4fbfb {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

.d1ddceaf {
}

.c41c5b34 {
  padding-top: 8px;
  padding-top: 0.8rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

._35ce2a4d {
  font-size: 15px;
  font-size: 1.5rem;
}

._2cc86f52 {
  padding: 16px;
  padding: 1.6rem;
}

@media (min-width: 45em) {

  ._2cc86f52 {
    padding: 0;
  }
}

._72d9b4eb {
  padding: 0;
}

@media (min-width: 45em) {

  ._72d9b4eb {
    padding: 1.6rem;
    background: rgb(255, 255, 255);
  }
}

.c3596acf {
  padding: 0;
}

._1b743318 {
  margin-top: 24px;
  margin-top: 2.4rem;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
}

._937aae5b {
  margin: 8px 0;
  margin: 0.8rem 0;
}

._937aae5b span::after {
  content: ' *';
  color: rgb(255, 102, 0);
}

._2d259375 {
  margin: 32px 0;
  margin: 3.2rem 0
}

._2d259375::before {
  content: none;
}

._2d259375::after {
  content: none;
}

._842b829d {
  padding: 0;
  margin-top: 8px;
  margin-top: 0.8rem;
}

._5112d3db {
  color: rgb(208, 2, 27);
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.b69215d8 {
  margin: 12px 0;
  margin: 1.2rem 0;
}

._3584e180 {
  margin-bottom: 4px;
  margin-bottom: 0.4rem;
}

.b9e3195c {
  margin: 16px 0;
  margin: 1.6rem 0;
  padding: 0;
}

._26453738 {
  padding-top: 8px;
  padding-top: 0.8rem;
}

.c0a00d17 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._3ad6459f {
  margin: 0 0 16px 0;
  margin: 0 0 1.6rem 0;
  max-width: inherit;
}

._803de6b4 {
  max-width: none;
}

._9c488d1c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

._9c488d1c .d4e80389 {
    margin-right: 40px;
    margin-right: 4rem
  }

._9c488d1c .d4e80389:focus-within > i {
  outline: none;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._6bcf5da4 {
  width: 100%;
  margin-right: 16px;
  margin-right: 1.6rem;
}

@media (min-width: 45em) {

  ._6bcf5da4 {
    width: 14.5rem;
  }
}

._027653d5 {
  color: rgb(255, 102, 0);
  padding-left: 4px;
  padding-left: 0.4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._8c8f765d {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 16px;
  margin-left: 1.6rem;
}

@media (min-width: 63.75em) {

  ._8c8f765d {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: left;
    margin-left: 0;
  }
}

@media (min-width: 63.75em) {

  .a5db4737 {
    display: none;
    width: 100%;
  }
}

.ebedea28 {
  display: none;
}

@media (min-width: 63.75em) {

  .ebedea28 {
    display: inline-block;
    margin: 1.6rem 0;
    line-height: 3.2rem;
    padding-right: 1.6rem;
    text-align: right;
    white-space: pre;
  }
}

.cbf4ebd9 {
  position: absolute;
  top: 16px;
  top: 1.6rem;
  bottom: 16px;
  bottom: 1.6rem;
  left: 0;
  right: 0;
  opacity: 0;
}

@media (min-width: 63.75em) {

  .cbf4ebd9 {
    opacity: 1;
    position: relative;
    top: auto;
    bottom: auto;
    display: inline-block;
    margin: 1.2rem 0;
  }
}

@media (max-width: 63.74em) {

  ._34c7cdbe {
    margin: 0;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._449fd635 {
  color: rgb(255, 102, 0);
}

._7d1096a3 {
  display: none;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin: 16px 0;
  margin: 1.6rem 0;
  line-height: 32px;
  line-height: 3.2rem;
}

@media (min-width: 45em) {

  ._7d1096a3 {
    display: inline;
    display: initial;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._6e2edc32 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid rgb(166, 166, 166);
  border-bottom: 0.1rem solid rgb(166, 166, 166);
}

@media (min-width: 63.75em) {

  ._6e2edc32 {
    padding: 0;
  }
}

._53c117fd {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
}

@media (min-width: 45em) {

  ._53c117fd {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
}

._53c117fd:first-child {
  margin-right: 16px;
  margin-right: 1.6rem;
}

@media (min-width: 45em) {

  ._53c117fd:first-child {
    margin-right: 0;
  }
}

._34fe103c {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  margin-right: 32px;
  margin-right: 3.2rem;
}

._40317555 {
}

.c5bc9f40 {
  margin: 16px 0;
  margin: 1.6rem 0;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._2aafb9c0 {
  background: rgb(60, 60, 60);
  padding: 40px 24px 0;
  padding: 4rem 2.4rem 0;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
  margin-bottom: 0;
}

._9b99fe21 {
  padding-bottom: 40px;
  padding-bottom: 4rem;
}

.e606ae95 {
  text-transform: none;
}

.e4cc0a6f {
  padding: 16px 0 20px;
  padding: 1.6rem 0 2rem;
  text-transform: none;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.a8657bd0::before {
  width: 3px;
  width: 0.3rem;
  height: 16px;
  height: 1.6rem;
  background-color: rgb(60, 60, 60);
  content: '';
  position: absolute;
}

.a8657bd0 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  list-style-type: none;
}

.a8657bd0:last-child {
  margin-bottom: 0;
}

._1e4cf735 {
  margin-left: 19px;
  margin-left: 1.9rem;
  padding-left: 0;
}

._956bde61 {
  margin: 0;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.a767b36e {
  background: rgb(50, 60, 65);
  border-radius: 2.4rem;
  color: rgb(255, 255, 255);
  display: block;
  font-size: 20px;
  font-size: 2rem;
  font-weight: 600;
  line-height: 24px;
  line-height: 2.4rem;
  text-align: center;
  height: 24px;
  height: 2.4rem;
  width: 24px;
  width: 2.4rem;
}

._98fef5c2 {
  padding-left: 20px;
  padding-left: 2rem;
}

._1195a05f {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._8d956a28 {
  background-color: rgb(237, 237, 237);
}

._4c0aa1e8 {
  background: rgb(50, 60, 65);
  fill: rgb(255, 255, 255);
  border-radius: 1.6rem;
  font-weight: 600;
  text-align: center;
}

.addfa09d {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

.addfa09d:last-child {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._26ab5305 {
  background: rgb(255, 255, 255);
}

.aa271285 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  width: 100%;
  height: 100%;
}

._62e5636d {
  text-transform: none;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._41def774 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
  width: 100%;
  height: 100%;
}

._90ff47ee {
  width: 100%;
  height: 100%;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._8b679ad6 {
  position: relative;
}

._8b679ad6::before,
._8b679ad6::after {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  border-style: solid;
  border-color: rgb(255, 102, 0);
  content: '';
}

._8b679ad6::before {
  border-width: 4px 0 4px 0;
  border-width: 0.4rem 0 0.4rem 0;
}

._8b679ad6::after {
  border-width: 0 4px 0 4px;
  border-width: 0 0.4rem 0 0.4rem;
}

._85acd163 {
  background: rgb(255, 255, 255);
  height: 100%;
}

._500eb2ca {
  height: 180px;
  height: 18rem;
  width: 100%;
  background-size: cover no-repeat;
  background-position: center;
}

._372783c7::before {
  width: 3px;
  width: 0.3rem;
  height: 16px;
  height: 1.6rem;
  background-color: rgb(60, 60, 60);
  content: '';
  position: absolute;
}

._372783c7 {
  margin-bottom: 12px;
  margin-bottom: 1.2rem;
}

.af7bb7fc {
  background: rgb(255, 102, 0);
}

.f364bb0b {
  background: rgb(255, 255, 255);
}

.c5dbd8e0 {
  color: rgb(255, 255, 255);
  background: rgb(255, 102, 0);
}

.d72f3c87 {
  list-style-type: none;
  padding: 4px 0 4px 0;
  padding: 0.4rem 0 0.4rem 0;
  background: rgb(255, 255, 255);
}

._84b05de9 {
  margin: 24px 12px 0 0;
  margin: 2.4rem 1.2rem 0 0;
}

._9431aaac {
  line-height: 20px;
  line-height: 2rem;
  margin-left: 12px;
  margin-left: 1.2rem;
  padding: 0 8px;
  padding: 0 0.8rem;
}

._6cf53a1f {
  height: 0;
  padding: 50% 0;
  border-radius: 50%;
  display: block;
  text-align: center;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
}

.eea438d9 {
  width: 100px;
  width: 10rem;
}

.d27f5606 {
  border: 1px solid rgb(210, 210, 210);
  border: 0.1rem solid rgb(210, 210, 210);
}

.d785b450 {
  visibility: hidden;
}

._10466bda {
  width: 40%;
  height: auto;
  stroke: rgb(255, 255, 255);
  margin-top: -12%;
}

.ea8b5979 {
  stroke: rgb(50, 60, 65);
}

._5e47f75a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._07f92fee {
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

._0601fa57 {
  width: 50%;
}

._239c7f96 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.ac28db18 {
  background: rgb(255, 255, 255);
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

.c0de1968 {
  border-left: 5px solid
    rgb(255, 102, 0);
  border-left: 0.5rem solid
    rgb(255, 102, 0);
}

._0248cadf {
  margin-right: 16px;
  margin-right: 1.6rem;
}

._53d8944e::before {
  padding-left: 0;
}

._53d8944e {
  padding: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;

  /*stylelint-disable-line
   */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.eeefd1c5 {
  background: rgb(242, 242, 242);
}

.e36cbb33 {
  padding: 0 24px;
  padding: 0 2.4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.e8c33905 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  width: 3.2rem;
  height: 32px;
  height: 3.2rem;
  border-radius: 50%;
  background-color: rgb(255, 102, 0);
  color: rgb(226, 235, 0);
  line-height: normal;
  line-height: initial;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  font-size: 1.2rem;
}

.a4e3a213 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

._1f3129a8 {
  border: 2px solid rgb(255, 255, 255);
  border: 0.2rem solid rgb(255, 255, 255);
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._1102e3a7 {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._05deb08b {
  width: 100%;
}

._87954da4 {
  width: 90%;
}

.a6802dba {
  -webkit-appearance: none;
  width: 100%;
  outline: none;
  margin: 0;
  padding: 0;
}

.a6802dba::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  height: 0.4rem;
  background: #d6d8d9;
  cursor: pointer;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 0;
  border: none;
}

.a6802dba::-webkit-slider-thumb {
  -webkit-box-shadow: none;
          box-shadow: none;
  width: 25px;
  width: 2.5rem;
  height: 25px;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(255, 102, 0);
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
  margin-top: -1rem;
}

.a6802dba::-moz-range-track {
  width: 100%;
  height: 4px;
  height: 0.4rem;
  background: #d6d8d9;
  cursor: pointer;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.a6802dba::-moz-range-thumb {
  height: 25px;
  height: 2.5rem;
  width: 25px;
  width: 2.5rem;
  border-radius: 50%;
  background: rgb(255, 102, 0);
  box-shadow: none;
  border: none;
  cursor: pointer;
}

.a6802dba::-ms-track {
  width: 100%;
  height: 4px;
  height: 0.4rem;
  border-width: 10px 0;
  border-width: 1rem 0;
  background: transparent;
  border-color: transparent;
  cursor: pointer;
  color: transparent;
}

.a6802dba::-ms-fill-lower {
  background: #d6d8d9;
}

.a6802dba::-ms-fill-upper {
  background: #d6d8d9;
}

.a6802dba::-ms-thumb {
  height: 25px;
  height: 2.5rem;
  width: 25px;
  width: 2.5rem;
  border-radius: 50%;
  background: rgb(255, 102, 0);
  cursor: pointer;
  border: none;
  box-shadow: none;

  /* fix Edge browser misalignment */
}

@supports (-ms-ime-align: auto) {

  .a6802dba::-ms-thumb {
    margin-bottom: -1rem;
  }
}

.a6802dba::-ms-tooltip {
  display: none;
}

.c091637e {
  text-align: center;
  padding-top: 16px;
  padding-top: 1.6rem;
}

.b3ee578f {
  margin-right: 6.3px;
  margin-right: 0.63rem;
}

._51969bdd {
  margin-left: 6.3px;
  margin-left: 0.63rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._481a5e4e {
  margin: 0;
  padding: 0;
}

._3832131e {
  list-style-type: none;
  margin: 0;
  padding: 0
}

._3832131e:last-child {
  margin-bottom: 0;
}

._8cdd097d {
    padding-top: 8px;
    padding-top: 0.8rem;
    padding-bottom: 8px;
    padding-bottom: 0.8rem;
  }

._42caaeb9 {
    padding-top: 16px;
    padding-top: 1.6rem;
    padding-bottom: 16px;
    padding-bottom: 1.6rem;
  }

.bd4477c4 {
    padding-top: 24px;
    padding-top: 2.4rem;
    padding-bottom: 24px;
    padding-bottom: 2.4rem;
  }

@media (min-width: 45em) {
  ._117349b3 {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
  ._0bfac7e6 {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }
  ._3a8cd412 {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }
}

@media (min-width: 63.75em) {
  ._23a69d94 {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
  .ab4e221c {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }
  ._71c0b9e5 {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }
}

.cc3ba1bb:first-child {
  border-top: none;
  padding-top: 0;
}

._16bd86a1:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.e8ee0dc6 {
  vertical-align: middle;
  margin-right: 16px;
  margin-right: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._8eb43571 {
  padding: 0 16px;
  padding: 0 1.6rem;
  margin-bottom: 0;
  min-height: 48px;
  min-height: 4.8rem;
  white-space: nowrap;
}

._96897464 {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

._1c1aa1a7 {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

.d67167df {
  line-height: 48px;
  line-height: 4.8rem;
}

.c337f804 {
  border-top-left-radius: 4px;
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 4px;
  border-top-right-radius: 0.4rem;
}

.d603c1d6 {
  padding: 12px 16px 8px;
  padding: 1.2rem 1.6rem 0.8rem;
}

.d603c1d6 .d67167df {
  line-height: normal;
}

.d603c1d6 ._96897464 {
  vertical-align: top;
}

._7b4c8ea1 {
  background-color: rgb(242, 242, 242);
}

._06f5d787 {
  background-color: rgb(60, 60, 60);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/* todo - set the thumbnail image using a variable in the product image component  */

._534cbcbe {
}

.f061fdd9 {
  height: 24px;
  height: 2.4rem;
  width: 24px;
  width: 2.4rem;
}

.ad3acf5a {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-right: 16px;
  margin-right: 1.6rem;
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
}

.e039a11d {
  text-align: right;
  font-weight: 600;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._0d46acff {
  margin-top: 0;
}

._5b104d52 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._26e61c85 {
  background: rgb(255, 255, 255);
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.e42955e0 {
  min-height: 32px;
  min-height: 3.2rem;
}

.a36c005b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 32px;
  min-height: 3.2rem;
}

.dec0cb48 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

.dec0cb48:last-child {
  margin-bottom: 0;
}

.c24907bc {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 38px;
  line-height: 3.8rem;
}

.dec0cb48 .d8c9e6f1 {
  width: 24px;
  width: 2.4rem;
  height: 24px;
  height: 2.4rem;
  margin-right: 12px;
  margin-right: 1.2rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._4cec49c1 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.b17bd612 .cde936c6 {
    padding-right: 8px;
    padding-right: 0.8rem;
  }

._7add09ad {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

._7add09ad .cde936c6 {
    padding-left: 8px;
    padding-left: 0.8rem;
  }

._5cf2d6ff {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center
}

._5cf2d6ff:hover ._809f2754 {
      text-decoration: underline;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

.f2116996 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
  font-family: 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  background-color: rgb(255, 255, 255);
}

._827ba348 {
  cursor: pointer;
}

._9c38b905 {
}

.d9648a6e {
  position: absolute;
  top: 16px;
  top: 1.6rem;
  right: 16px;
  right: 1.6rem;
}

._8ad19ed9 {
  width: 325px;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (max-width: 63.74em) {
  .e828473f {
    margin-left: 3.2rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.e25ad203 {
  margin: 16px 0;
  margin: 1.6rem 0;
  position: relative;
  padding-left: 40px;
  padding-left: 4rem;
  cursor: pointer;
}

._430fd3c6 {
  position: absolute;
  left: 0;
  top: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._1bd1fc44 {
  font-weight: 600;
  font-size: 16px;
  font-size: 1.6rem;
}

._9fd13d7e {
  display: block;
  line-height: 0;
  position: relative;
  top: 3px;
  top: 0.3rem;
  font-size: 10px;
  font-size: 1rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._9e39a473 {
  background-color: rgb(255, 255, 255);
  background-size: cover;
  text-decoration: none;
}

._8e60e719 {
  /* So that top of icon aligns with top of newIdeaCard icon */
  margin-top: 12px;
}

.ecfec35a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2px;
  margin-bottom: 0.2rem;
}

._20c3cb28 {
  margin: 0;
  font-weight: bold;
}

._20c3cb28:hover {
  text-decoration: underline;
}

.ecfec35a:last-of-type ._9b56b411 {
  display: none;
}

._8120dbfb {
  cursor: default;
}

._8120dbfb ._20c3cb28 {
  font-weight: normal;
}

._8120dbfb ._20c3cb28:hover {
  text-decoration: none;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

.d92ec586 {
  z-index: 1;
}

._1a679690 {
  z-index: 80;
}

._00082dc1 {
  z-index: 80;
}

._8d9ec849 {
  z-index: 90;
}

.ddfdcd72 {
  z-index: 115;
}

._57312c13 {
  z-index: 1000;
}

.dda39feb {
  z-index: 1100;
}

._48e38a71 {
  z-index: 10000;
}

._3f9519f5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 16px;
  margin-top: 1.6rem;
  margin-bottom: 12px;
  margin-bottom: 1.2rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 45em) {
  ._3f9519f5 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.fe25dc60 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.f1ced4a5 {
  cursor: pointer;
  border: 2px dashed rgb(173, 177, 179);
  border: 0.2rem dashed rgb(173, 177, 179);
  padding: 24px;
  padding: 2.4rem;
  margin-bottom: 32px;
  margin-bottom: 3.2rem;
  background-color: rgb(242, 240, 238);
}

._04dc0cfa {
  background-color: rgb(228, 225, 221);
}

._306b6039 {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._269aad24 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._52d99c25 {
  margin-bottom: 32px;
  margin-bottom: 3.2rem;
}

._242e6626 {
  margin-bottom: 4px;
  margin-bottom: 0.4rem;
  padding: 16px;
  padding: 1.6rem;
  background-color: rgb(242, 240, 238);
}

._0492a518 {
  cursor: pointer;
}

._8ca661b6 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.f753525d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 16px;
  padding: 1.6rem;
  background: rgb(234, 235, 236);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.d8b476e2 {
  max-width: 200px;
  max-width: 20rem;
  height: 70px;
  height: 7rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

._43246b92 {
  z-index: 1;
}

.bcac941b {
  z-index: 80;
}

._56330aa7 {
  z-index: 80;
}

._7358f47c {
  z-index: 90;
}

.d7b6f97a {
  z-index: 115;
}

._4f2bb94e {
  z-index: 1000;
}

.e99f07e9 {
  z-index: 1100;
}

._8084974a {
  z-index: 10000;
}

/* Some non-standard icon variables and classes */

.f84de690 {
  display: grid;
  position: relative;
  margin-top: 22px;
  margin-top: 2.2rem;
  margin-bottom: 10px;
  margin-bottom: 1rem;
  height: 20px;
  height: 2rem;
}

.f84de690::before {
  display: block;
  content: '';
  width: 100%;
  height: 8px;
  height: 0.8rem;
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(214, 216, 217);
  border-radius: 1.2rem;
}

._61ba7ad8 {
  max-width: 100%;
  height: 8px;
  height: 0.8rem;
  background: rgb(255, 102, 0);
  position: relative;
}

._332b3e72 {
  max-width: 100%;
  height: 8px;
  height: 0.8rem;
  background: transparent;
  position: absolute;
  width: calc(100% - 2rem);
  left: 10px;
  left: 1rem;
}

.f28fdaf4 {
  grid-column: 1;
  grid-row: 2;
  width: calc(100% - 2rem);
  height: 20px;
  height: 2rem;
  position: relative;
  background: none;
  color: rgb(0, 0, 0);
  font: inherit;
  margin: 0;
  pointer-events: none;
  -webkit-appearance: none;
  background-color: transparent !important;
}

.f28fdaf4::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  width: 2rem;
  height: 20px;
  height: 2rem;
  background: rgb(40, 48, 52);
  -webkit-box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, .5);
          box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, .5);
  border: none;
  pointer-events: auto;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -12px;
  margin-top: -1.2rem;
}

.f28fdaf4::-moz-range-thumb {
  width: 20px;
  width: 2rem;
  height: 20px;
  height: 2rem;
  background: rgb(40, 48, 52);
  box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, .5);
  border: none;
  pointer-events: auto;
  border-radius: 50%;
  margin-top: -12px;
  margin-top: -1.2rem;
  cursor: pointer;
}

.f28fdaf4::-webkit-slider-runnable-track {
  -webkit-appearance: none;
}

.f28fdaf4::-moz-range-track {
  background: none;
}

.f28fdaf4::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.f28fdaf4 ~ .f28fdaf4 {
  justify-self: end;
}

.f28fdaf4:focus {
  outline: none;
}

/* Fix Firefox double range thumbs position  */

@-moz-document url-prefix() {
  .f84de690 {
    margin-top: 1.7rem;
  }

  .f84de690::before {
    top: 0.6rem;
  }

  ._61ba7ad8 {
    top: 0.6rem;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._1d8c4fa1 {
  width: 100%;
}

._1d8c4fa1 i {
  background-color: rgb(255, 255, 255);
  margin-top: 0;
  margin-bottom: 0;
}

._1d5459b6 {
  background: white;
  opacity: 1;
  -webkit-transition: opacity 200ms ease-out;
  transition: opacity 200ms ease-out;
}

.b12d6515 {
  opacity: 0;
  pointer-events: none;
}

._12e915ff {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

._75ffd1a8 {
  border: none;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

.e6799b57 {
  position: relative;
  display: block;
  width: 100%;
  background: rgb(255, 255, 255);
  color: rgb(50, 60, 65);
  line-height: 3;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  margin: 16px auto;
  margin: 1.6rem auto;
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: background 200ms ease-in-out, color 200ms ease-in-out;
  transition: background 200ms ease-in-out, color 200ms ease-in-out;
}

._57979b48 {
  text-decoration: underline;
  font-size: 15px;
  font-size: 1.5rem;
  color: rgb(111, 118, 122);
}

._6d9ddd95 {
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: 500;
  color: rgb(50, 60, 65);
}

.bcad34f9 {
  width: 100%;
  background: rgb(255, 102, 0);
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: -0.5px;
  letter-spacing: -0.05rem;
  line-height: 40px;
  line-height: 4rem;
  text-align: center;
  border-radius: 2rem;
  padding: 0;
}

.f3eb16bd {
  width: 100%;
  background: rgb(255, 255, 255);
  color: rgb(50, 60, 65);
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: -0.5px;
  letter-spacing: -0.05rem;
  line-height: 40px;
  line-height: 4rem;
  text-align: center;
  border: 1px solid rgb(50, 60, 65);
  border: 0.1rem solid rgb(50, 60, 65);
  border-radius: 2rem;
  padding: 0;
}

._34bd72a2 {
  width: 100%;
  background: rgb(50, 60, 65);
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-size: 1.8rem;
  letter-spacing: -0.5px;
  letter-spacing: -0.05rem;
  line-height: 40px;
  line-height: 4rem;
  text-align: center;
  border-radius: 2rem;
  padding: 0;
}

._1be778a1 {
  background: rgb(205, 205, 205);
}

._1a753d23 {
  display: block;
}

.b34f4286 {
  margin: 0 auto 16px;
  margin: 0 auto 1.6rem;
}

._0cbb2026 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  width: 2rem;
  height: 20px;
  height: 2rem;
  overflow: hidden;
  margin: 0 auto;
  -webkit-transform: scale(0) translate3d(-50%, -70%, 0);
          transform: scale(0) translate3d(-50%, -70%, 0);
  -webkit-transform-origin: center;
          transform-origin: center;
  opacity: 0;
  -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}

._9c22b3d7 {
  width: 20px;
  width: 2rem;
  height: 20px;
  height: 2rem;
  fill: rgb(255, 255, 255);
}

._42795bd8 {
  position: relative;
  display: block;
  z-index: 10;
  -webkit-transform: scale(0) translate3d(0, 20%, 0);
          transform: scale(0) translate3d(0, 20%, 0);
  -webkit-transform-origin: center;
          transform-origin: center;
  opacity: 0;
  -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}

._64945b70 {
  -webkit-transform: scale(1) translate3d(-50%, -50%, 0);
          transform: scale(1) translate3d(-50%, -50%, 0);
  opacity: 1;
}

._7c3f0b58 {
  -webkit-transform: scale(1) translate3d(0, 0, 0);
          transform: scale(1) translate3d(0, 0, 0);
  opacity: 1;
}

.fec286f2 {
  margin-top: 0;
  background: transparent;
  padding: 0;
}

._5dcd3947 {
  display: inline;
  vertical-align: middle;
}

._318a35d4 {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  margin-right: 0.8rem;
  width: 24px;
  width: 2.4rem;
  height: 24px;
  height: 2.4rem;
  background: rgb(50, 60, 65);
  fill: rgb(255, 255, 255);
}

._8e5ee4ea {
  position: relative;
  display: block;
  text-align: left;
  padding: 0;
  background-color: transparent;
  width: 100%;
  border: none;
  min-height: 40px;
  min-height: 4rem;
  line-height: 20px;
  line-height: 2rem;
  font-size: 14px;
  font-size: 1.4rem;
  color: rgb(50, 60, 65);
  text-decoration: none;
  border-top: 1px solid rgb(242, 242, 242);
  border-top: 0.1rem solid rgb(242, 242, 242);
  border-bottom: 1px solid rgb(242, 242, 242);
  border-bottom: 0.1rem solid rgb(242, 242, 242);
  margin: 16px auto;
  margin: 1.6rem auto;
}

._8e5ee4ea + ._8e5ee4ea {
  margin-top: -17px;
  margin-top: -1.7rem;
}

._1485f403 {
  position: absolute;
  top: 14px;
  top: 1.4rem;
  right: 16px;
  right: 1.6rem;
  width: 12px;
  width: 1.2rem;
  height: 12px;
  height: 1.2rem;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transform-origin: center;
          transform-origin: center;
  fill: rgb(50, 60, 65);
  pointer-events: none;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._3337c76e {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._9b742bfd {
  width: 56px;
  width: 5.6rem;
}

._4a13d1f5 {
  width: 40px;
  width: 4rem;
  height: 24px;
  height: 2.4rem;
}

._582be071 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._95ce184b {
  background-color: rgb(234, 235, 236);
  position: relative;
}

.bbee2e04 {
  fill: rgb(255, 102, 0);
  margin: 0;
}

._59382ffe {
  margin-top: 8px;
  margin-top: 0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/* Some non-standard icon variables and classes */

._9dae1abb {
  margin: 0 auto;
  max-width: 1400px;
  max-width: 140rem;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.ba3554ac {
  margin: 0 !important;
  font-size: 16px;
  font-size: 1.6rem;
  white-space: nowrap;
}

@media (min-width: 63.75em) {

  .ba3554ac {
    font-size: 2rem;
  }
}

._87e0fe72 {
  width: 18px;
  width: 1.8rem;
  height: 22px;
  height: 2.2rem;
  margin: 0 10px 3px 0;
  margin: 0 1rem 0.3rem 0;
}

._046e8f2b {
  padding: 1.5px 0;
  padding: 0.15rem 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._2ab1648e {
  list-style: none;
  padding: 0;
}

@media (max-width: 44.99em) {

  ._5799023a {
    height: 2.4rem;
  }
}

@media (max-width: 44.99em) {

  ._5799023a:first-child {
    margin-left: 0;
  }
}

._8f6f8cee {
  padding: 0;
  margin-left: 10px;
  margin-left: 1rem;
}

@media (min-width: 63.75em) {

  ._8f6f8cee {
    margin-left: 1.6rem;
  }
}

@media (max-width: 63.74em) {

  ._8e72cbcc {
    width: 6rem;
  }
}

@media (max-width: 44.99em) {

  ._09946988 {
    width: 4rem;
  }
}

@media (max-width: 63.74em) {

  ._95991325 {
    width: 3.375rem;
  }
}

@media (max-width: 44.99em) {

  .a53d37f1 {
    width: 2.25rem;
  }
}

@media (max-width: 63.74em) {

  .cd0aa1b4 {
    width: 11.096rem;
  }
}

@media (max-width: 44.99em) {

  .cd0aa1b4 {
    width: 7.6rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._35f97e65 p {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._979b8f7b p {
    margin-bottom: 0;
  }

.c8d266de {
  width: 100%;
  border-top: 1px solid rgb(166, 166, 166);
  border-top: 0.1rem solid rgb(166, 166, 166);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._77a08b99 {
  margin: 16px auto;
  margin: 1.6rem auto;
}

._14849ff8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: wrap row;
          flex-flow: wrap row;
  margin-left: 16px;
  margin-left: 1.6rem;
}

._36b881cd {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

.b1cee714 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 50%;
  padding-left: 16px;
  padding-left: 1.6rem;
}

._36b881cd:last-child {
  margin-bottom: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.b8593227 {
  margin-top: 0;
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.ff8889b6 {
  width: 36px;
  width: 3.6rem;
  height: 36px;
  height: 3.6rem;
  margin-right: 12px;
  margin-right: 1.2rem;
}

.d886e905 {
  margin-top: 16px;
  margin-top: 1.6rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._6eccfaa7 {
  margin: 32px 0;
  margin: 3.2rem 0;
}

.fd5f426a {
  margin-top: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._075beb3b {
  font-weight: 400;
}

.d5c00bb0 {
  height: 24px;
  height: 2.4rem;
  width: 32px;
  width: 3.2rem;
  vertical-align: top;
}

.e2cd7439 {
  height: 16px;
  height: 1.6rem;
  width: 16px;
  width: 1.6rem;
  margin-left: 8px;
  margin-left: 0.8rem;
  vertical-align: text-bottom;
}

._70cabc38 {
  margin-top: 32px;
  margin-top: 3.2rem;
  margin-bottom: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.e92c4cd3 {
  width: 40px;
  width: 4rem;
  height: 24px;
  height: 2.4rem;
}

._2b758a4f {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._5f921820 {
  color: rgb(111, 118, 122);
}

._1939471a {
  color: rgb(208, 2, 27);
}

.a14e1d9c {
  color: rgb(111, 118, 122);
}

._34bf1b62 {
  margin-right: 32px;
  margin-right: 3.2rem;
}

._1a2147b3 {
  margin-top: 0;
  margin-bottom: 0;
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.ea536df6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column
}

._2871712a {
  color: red;
}

.a2115dff {
  margin: 8px 0;
  margin: 0.8rem 0;
}

@font-face {
  font-family: 'GoodHome';
  src: url(/spa/fonts/GoodHome-Regular.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/*
  The styling is based on the container ID defined by us
  for following reasons:
  1) To override the default widget styles for sure;
  2) To be in control of the overriding even if Optile changes
  some naming of the widget container elements
  */
#paymentNetworksIdForTheFirstPaymentStage {

    /* in order to show visa mastercard icons in a row, not column */
  }
#paymentNetworksIdForTheFirstPaymentStage .op-payment-widget-container {
      font-family: 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;

      /*
      in version 3.21 min-width was changed to 56px and margins were added to the label text
      That leads to icon's column arrangement (not raw).
      Next styles revert back the styles as per ver 3.12
      */
    }
#paymentNetworksIdForTheFirstPaymentStage .op-payment-widget-container select::-ms-expand {
        background-color: transparent;
        border: none;
      }
#paymentNetworksIdForTheFirstPaymentStage .op-payment-widget-container select:focus::-ms-value {
        background-color: transparent;
        color: rgb(66, 66, 66);
      }
#paymentNetworksIdForTheFirstPaymentStage .op-payment-widget-container a.verification-code-link {
        text-decoration: underline !important;
      }
#paymentNetworksIdForTheFirstPaymentStage .op-payment-widget-container .formContainer {
        margin: 0;
      }
#paymentNetworksIdForTheFirstPaymentStage .op-payment-widget-container .registered-account iframe {
          height: 110px;
          height: 11rem;
        }
#paymentNetworksIdForTheFirstPaymentStage .op-payment-widget-container .registered-account div[id^='formContainerregisteredTRADE-UK'] {
          /* in order to remove an empty iframe inside trde-uk block */
          display: none !important;
        }
#paymentNetworksIdForTheFirstPaymentStage .op-payment-widget-container .available-network iframe {
          height: 440px;
          height: 44rem;
        }
#paymentNetworksIdForTheFirstPaymentStage .op-payment-widget-container .available-network iframe[data-loaded^='TRADE'] {
          height: 350px;
          height: 35rem;
        }
#paymentNetworksIdForTheFirstPaymentStage .op-payment-widget-container.card-view label.imgLabel {
          min-width: 36%;
}
#paymentNetworksIdForTheFirstPaymentStage .op-payment-widget-container.card-view label.textLabel {
          margin-left: 0;
}
@media only screen and (max-device-width: 530px) {
  #paymentNetworksIdForTheFirstPaymentStage .op-payment-widget-container.card-view .imgLabel {
        display: inline-block;
  }
}
#paymentButtonContainerIdForTheSecondPaymentStage .apple-pay-button {
      width: 100%;
      height: 45px;
      height: 4.5rem;
      cursor: pointer;
    }
@supports (-webkit-appearance: -apple-pay-button) {
  #paymentButtonContainerIdForTheSecondPaymentStage .apple-pay-button {
        -apple-pay-button-style: initial;
  }
}
@supports not (-webkit-appearance: -apple-pay-button) {
  #paymentButtonContainerIdForTheSecondPaymentStage .apple-pay-button {
        background-image: -webkit-named-image(apple-pay-logo-white);
        background-color: black;
  }
}
#paymentButtonContainerIdForTheSecondPaymentStage .googlepay {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      width: 100%;
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDEiIGhlaWdodD0iMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTkuNTI2IDIuNjM1djQuMDgzaDIuNTE4Yy42IDAgMS4wOTYtLjIwMiAxLjQ4OC0uNjA1LjQwMy0uNDAyLjYwNS0uODgyLjYwNS0xLjQzNyAwLS41NDQtLjIwMi0xLjAxOC0uNjA1LTEuNDIyLS4zOTItLjQxMy0uODg4LS42Mi0xLjQ4OC0uNjJoLTIuNTE4em0wIDUuNTJ2NC43MzZoLTEuNTA0VjEuMTk4aDMuOTljMS4wMTMgMCAxLjg3My4zMzcgMi41ODIgMS4wMTIuNzIuNjc1IDEuMDggMS40OTcgMS4wOCAyLjQ2NiAwIC45OTEtLjM2IDEuODE5LTEuMDggMi40ODItLjY5Ny42NjUtMS41NTkuOTk2LTIuNTgzLjk5NmgtMi40ODV2LjAwMXptNy42NjggMi4yODdjMCAuMzkyLjE2Ni43MTguNDk5Ljk4LjMzMi4yNi43MjIuMzkxIDEuMTY4LjM5MS42MzMgMCAxLjE5Ni0uMjM0IDEuNjkyLS43MDEuNDk3LS40NjkuNzQ0LTEuMDE5Ljc0NC0xLjY1LS40NjktLjM3LTEuMTIzLS41NTUtMS45NjItLjU1NS0uNjEgMC0xLjEyLjE0OC0xLjUyOC40NDItLjQwOS4yOTQtLjYxMy42NTctLjYxMyAxLjA5M20xLjk0Ni01LjgxNWMxLjExMiAwIDEuOTg5LjI5NyAyLjYzMy44OS42NDIuNTk0Ljk2NCAxLjQwOC45NjQgMi40NDJ2NC45MzJoLTEuNDM5di0xLjExaC0uMDY1Yy0uNjIyLjkxNC0xLjQ1IDEuMzcyLTIuNDg2IDEuMzcyLS44ODIgMC0xLjYyMS0uMjYyLTIuMjE1LS43ODQtLjU5NC0uNTIzLS44OTEtMS4xNzYtLjg5MS0xLjk2IDAtLjgyOC4zMTMtMS40ODYuOTQtMS45NzZzMS40NjMtLjczNSAyLjUxLS43MzVjLjg5MiAwIDEuNjI5LjE2MyAyLjIwNi40OXYtLjM0NGMwLS41MjItLjIwNy0uOTY2LS42MjEtMS4zM2EyLjEzMiAyLjEzMiAwIDAgMC0xLjQ1NS0uNTQ3Yy0uODQgMC0xLjUwNC4zNTMtMS45OTUgMS4wNjJsLTEuMzI0LS44MzRjLjczLTEuMDQ1IDEuODEtMS41NjggMy4yMzgtMS41NjhtMTEuODUzLjI2MmwtNS4wMiAxMS41M0gzNC40MmwxLjg2NC00LjAzNC0zLjMwMi03LjQ5NmgxLjYzNWwyLjM4NyA1Ljc0OWguMDMybDIuMzIyLTUuNzV6IiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTEzLjQ0OCA3LjEzNGMwLS40NzMtLjA0LS45My0uMTE2LTEuMzY2SDYuOTg4djIuNTg4aDMuNjM0YTMuMTEgMy4xMSAwIDAgMS0xLjM0NCAyLjA0MnYxLjY4aDIuMTY5YzEuMjctMS4xNyAyLjAwMS0yLjkgMi4wMDEtNC45NDQiIGZpbGw9IiM0Mjg1RjQiLz48cGF0aCBkPSJNNi45ODggMTMuN2MxLjgxNiAwIDMuMzQ0LS41OTUgNC40NTktMS42MjFsLTIuMTY5LTEuNjgxYy0uNjAzLjQwNi0xLjM4LjY0My0yLjI5LjY0My0xLjc1NCAwLTMuMjQ0LTEuMTgyLTMuNzc2LTIuNzc0SC45Nzh2MS43MzFhNi43MjggNi43MjggMCAwIDAgNi4wMSAzLjcwMyIgZmlsbD0iIzM0QTg1MyIvPjxwYXRoIGQ9Ik0zLjIxMiA4LjI2N2E0LjAzNCA0LjAzNCAwIDAgMSAwLTIuNTcyVjMuOTY0SC45NzhBNi42NzggNi42NzggMCAwIDAgLjI2MSA2Ljk4YzAgMS4wODUuMjYgMi4xMS43MTcgMy4wMTdsMi4yMzQtMS43MzF6IiBmaWxsPSIjRkFCQjA1Ii8+PHBhdGggZD0iTTYuOTg4IDIuOTIxYy45OTIgMCAxLjg4LjM0IDIuNTggMS4wMDh2LjAwMWwxLjkyLTEuOTE4QzEwLjMyNC45MjggOC44MDQuMjYyIDYuOTg5LjI2MmE2LjcyOCA2LjcyOCAwIDAgMC02LjAxIDMuNzAybDIuMjM0IDEuNzMxYy41MzItMS41OTIgMi4wMjItMi43NzQgMy43NzYtMi43NzQiIGZpbGw9IiNFOTQyMzUiLz48L2c+PC9zdmc+);
      background-color: rgb(0, 0, 0);
}
#paymentLoadingIcon {
    display: none !important;
}
.op-payment-widget-full-loading {
    display: none !important;
}
.paypal-checkout-sandbox {
    z-index: 1000 !important;
}
._38ff402d .payment-in-progress {
      display: none !important;
    }
._9e745e83 #paymentNetworksIdForTheFirstPaymentStage .registration.options {
        display: none !important;
      }

._43849a75 {
  margin-bottom: 64px;
  margin-bottom: 6.4rem;
}

.e44b6c8f {
  margin-bottom: 81px;
  margin-bottom: 8.1rem;
}

._0f9969fc {
  display: none;
}

._9c09ca7e {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/* the sizes specific for the payment tiles */

/* base sizes */

._1c40b989 {
  width: 168px;
  width: 16.8rem;
  height: 168px;
  height: 16.8rem;
  margin: 8px;
  margin: 0.8rem;
  padding: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

.ac23879c {
  position: relative;
  height: 0;
  border: none;
  padding-top: 100%;
  width: 100%;
}

._99e4c2f0 {
  padding: 16px;
  padding: 1.6rem;
  z-index: 0;
}

._2a074f3f {
  margin: 32px auto 0;
  margin: 3.2rem auto 0;
  width: 75px;
  width: 7.5rem;
}

._002584bc {
  position: absolute;
  left: 0;
  bottom: 18px;
  bottom: 1.8rem;
  line-height: 8px;
  line-height: 0.8rem;
  height: 20px;
  height: 2rem;
}

@media screen and (max-width: 44.99em) {
  ._1c40b989 {
    width: 13.6rem;
    height: 13.6rem;
    margin: 0 0.8rem 0.8rem 0;
    padding: 1.6rem 0.8rem;
  }

  ._2a074f3f {
    margin-top: 1.6rem;
    width: 5rem;
  }

  ._002584bc {
    bottom: 1rem;
    height: 1.1rem;
    line-height: 2rem;
  }
}

._1c76ef36 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._507b638c {
  margin-bottom: 0;
}

._418e4816 {
  background-color: white;
  padding: 16px;
  padding: 1.6rem;
  border-radius: 0.4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.ede3bfd1 {
  margin-top: 16px;
  margin-top: 1.6rem;
  margin-bottom: 30px;
  margin-bottom: 3rem;
}

._0a13f454 {
  margin-top: 16px;
  margin-top: 1.6rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

.cb02c4a8 {
  width: 24px;
  width: 2.4rem;
  height: 24px;
  height: 2.4rem;
  background: rgb(70, 118, 196);
  fill: rgb(255, 255, 255);
  margin: 0 16px;
  margin: 0 1.6rem;
}

.a4f297ea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {

  /*
    All elements within the checkout package displayed on the screen (bar header)
    are nested within <PageBlock> components
    This has a dynamic padding based on view port, as such this mimics this to persist the
    required 368px width.
   */
}

.a1ab5686 {
  max-width: 400px;
  max-width: 40rem;
  margin: 0 auto;
}

@media (min-width: 45em) {

  .a1ab5686 {
    max-width: 60rem;
    padding-left: 8.4rem;
    padding-right: 8.4rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._30fe6535 {
  width: 85px;
  width: 8.5rem;
  height: 24px;
  height: 2.4rem;
}

._1734655c {
  width: 64px;
  width: 6.4rem;
  height: 48px;
  height: 4.8rem;
}

.e38541e1 {
  width: 64px;
  width: 6.4rem;
  height: 48px;
  height: 4.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.ffb9d851 {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  margin: 1.6rem 0;
}

.f4fdd8e8 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._923c6f04 {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  width: 2.4rem;
  height: 24px;
  height: 2.4rem;
  margin-right: 16px;
  margin-right: 1.6rem;
}

._923c6f04 svg g path:first-child {
      fill: rgb(255, 102, 0);
    }

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._9ae3f11a {
  color: rgb(50, 60, 65);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._9564ab80::before {
  margin-bottom: 0;
}

._9564ab80::after {
  margin-top: 0;
}

._2d4d0587 {
  text-align: center;
  padding-top: 16px;
  padding-top: 1.6rem;
}

.f50ec7b6 {
  width: 24px;
  width: 2.4rem;
  height: 24px;
  height: 2.4rem;
  margin-right: 16px;
  margin-right: 1.6rem;
}

._1565406f {
  background: rgb(255, 255, 255);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._6ad719ed {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._108bde0b {
  background: rgb(255, 255, 255);
}

._5cec64b0 {
  min-height: 100vh;
}

._751bec74 {
  display: inline-block;
  width: 120px;
  width: 12rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

.b1dcf6fb {
  z-index: 1;
}

._442a989e {
  z-index: 80;
}

._22cdf93a {
  z-index: 80;
}

._3a2a520f {
  z-index: 90;
}

._8fd90625 {
  z-index: 115;
}

.e0fc1f0e {
  z-index: 1000;
}

._678ee601 {
  z-index: 1100;
}

._61077738 {
  z-index: 10000;
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

/*
  Why important is allowed for utils classes?
  - It is common practice (see https://github.com/twbs/bootstrap/blob/ff29c1224c20b8fcf2d1e7c28426470f1dc3e40d/scss/utilities/_visibility.scss)
  - If you put util class on element, it reads like element is having those styles, they should override any conflicting rule
  - In case if rule with !important need to be overwritten, just remove util class and write your own.
*/

/*
 * Naked Button
 */

._67707b8a {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: inherit;
}

/*
 * Naked Action, Link, Button or Anchor
 */

.b0b8acfe {
  display: block;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
}

button.b0b8acfe:not([disabled]) {
  cursor: pointer;
}

._57635563 {
  display: inline;
}

.c4b41336 {
  color: inherit;
  text-decoration: underline
}

.c4b41336:hover {
  font-weight: 500;
}

/*
 * Pullers
 */

._0036e01d {
  float: left !important;
}

.db0ce55c {
  float: right !important;
}

/* Note this wont always centralise, quick and dirty */

._4bfbf724 {
  margin: 0 auto;
}

._6672adbb {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.e1e5f7f0 {
  max-width: 1400px;
  max-width: 140rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 63.75em) {

  .c9f50acb {
    max-width: 36.8rem;
  }
}

@media (min-width: 45em) {

  .b870fcfa {
    max-width: 36.8rem;
  }
}

/*
 * Anchors
 */

._5166e2b1 {
  display: block;
  text-decoration: underline;
  color: inherit
}

._5166e2b1:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

@media (hover: none) {

  ._5166e2b1:hover {
    color: #000;
    color: initial;
  }
}

/**
 * Alignment
 */

._1a7c5624 {
  text-align: left;
}

._5bc30875 {
  text-align: center;
}

._1b5a5dfa {
  text-align: right;
}

._5fa817c0 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

._505b22b6 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.f93916e7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.fb8e43ea {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.f1004004 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

._16b55f5d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1
}

._16b55f5d::before,
  ._16b55f5d::after {
  content: ' ';
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

._074990f8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c0a0e507 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.f0bb9a9a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

._3805e4c3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._7fbeed35 {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

._3a35cd55 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._2ff93381 {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

._19721e40 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._89740c53 {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.d5abe943 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.a7e6591f {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

._83e8e437 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._0663985a {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.bd22e577 {
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important; /* Grid CSS will override when combined */
}

._10c4cc27 {
  position: relative;
}

/*
 * Sizing
 */

._66b587ab {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

._6e0d06ca {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

._3c6ef971 {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

._8013fe37 {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
}

._9f10878b {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

._5c5882fc {
  display: block;
  width: 100%;
}

._261d96f6 {
  display: block;
  height: 100%;
}

._6a9c6c67 {
  width: 100vw;
}

.e23bf0f3 {
  height: 100vh;
}

._0df52e62 {
  overflow-x: scroll;
}

.ca31da6c {
  overflow-y: scroll;
}

/*
 * Visibility
 */

._1fbcd3d8 {
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute;
}

.a485f5dd {
  display: none !important;
}

.de57283e {
  opacity: 0 !important;
  pointer-events: none !important;
}

.b8c10c85 {
  -webkit-perspective: 100rem;
          perspective: 100rem;
}

/*
 * Font rendering
 */

._49c0ec9e {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

.b17d3d3f {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Font styling
 */

/* Weights */

._80839295 {
  font-weight: 300;
}

._69e875b5 {
  font-weight: 400;
}

._8441a5ac {
  font-weight: 500;
}

._33cb840b {
  font-weight: 600;
}

/* Sizes */

.a1efb65c {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
}

._12484a83 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
}

._751b975a {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._71c8a384 {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._8a4a96b2 {
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
}

.eef460af {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 40px;
  line-height: 4rem;
}

._2ba035c5 {
  font-size: 48px;
  font-size: 4.8rem;
  line-height: 56px;
  line-height: 5.6rem;
}

.b5cc6368 {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 16px;
    line-height: 1.6rem;
  }

._8d2d35bc {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 20px;
    line-height: 2rem;
  }

._2b129cf2 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

._05c63a59 {
    font-size: 20px;
    font-size: 2rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

.bfb0504b {
    font-size: 26px;
    font-size: 2.6rem;
    line-height: 32px;
    line-height: 3.2rem;
  }

._42d78fb5 {
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 40px;
    line-height: 4rem;
  }

.bbb89ae5 {
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 56px;
    line-height: 5.6rem;
  }

@media (min-width: 45em) {
  .f576f0b7 {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  .c7b58315 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  .e006d134 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  ._6c6417ca {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  .fd09d342 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._04d10933 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  ._98684517 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

@media (min-width: 63.75em) {
  .a1d1f9fb {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  ._8363b60b {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ._9ae86c59 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  .bba50922 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  .fa9a122c {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._2778cbf9 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  ._9b16d1f6 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

._2877beb8 {
  line-height: 24px;
  line-height: 2.4rem;
}

._82514681 {
  line-height: 40px;
  line-height: 4rem;
}

.a373654d {
  line-height: 19px;
  line-height: 1.9rem;
}

._88b8b26c {
  line-height: 13px;
  line-height: 1.3rem;
}

/* Text margins */

/* TODO: WFE-7446 put text margins to text.css file */

/* margin none rule needs to be before others as it needs to be overridden by them */

._2d4e295f {
  margin: 0;
}

._07381475 {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

._5655b00c {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

._41f578e9 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.d1b3fee3 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._350f2609 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.b3b9f104 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.b71ccc0f {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

@media (min-width: 45em) {
  .cd65e02e {
    margin-bottom: 0.8rem;
  }
  ._106810d1 {
    margin-bottom: 0.8rem;
  }
  .eccb72a5 {
    margin-bottom: 1.6rem;
  }
  ._449b7703 {
    margin-bottom: 1.6rem;
  }
  ._80f4dccd {
    margin-bottom: 1.6rem;
  }
  .ff0f2b23 {
    margin-bottom: 1.6rem;
  }
  ._38b87154 {
    margin-bottom: 1.6rem;
  }
}

@media (min-width: 63.75em) {
  .f6121bc5 {
    margin-bottom: 0.8rem;
  }
  .ebf80ec1 {
    margin-bottom: 0.8rem;
  }
  ._38ff2bad {
    margin-bottom: 1.6rem;
  }
  .f19a3558 {
    margin-bottom: 1.6rem;
  }
  .e9a16dd9 {
    margin-bottom: 1.6rem;
  }
  .ceb3dce7 {
    margin-bottom: 1.6rem;
  }
  .b89ac4b6 {
    margin-bottom: 1.6rem;
  }
}

.b43a0515 {
  margin-left: 4px;
  margin-left: 0.4rem;
}

._8fa2910e {
  margin-left: 8px;
  margin-left: 0.8rem;
}

.a6b7397f {
  margin-left: 12px;
  margin-left: 1.2rem;
}

._70ac6286 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._0eba47d1 {
  margin-left: auto;
}

.ebab7d72 {
  margin-right: 4px;
  margin-right: 0.4rem;
}

.da4a59c8 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._2d96c889 {
  margin-right: 12px;
  margin-right: 1.2rem;
}

.daeb3952 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

.d124f2f5 {
  margin-right: auto;
}

._398a8765 {
}

/* Styles */

._71345201 {
  font-style: italic;
}

._1d92d755 {
  text-transform: uppercase;
}

._11bc2c70 {
  text-transform: lowercase;
}

.cdebdf57 {
  text-decoration: line-through;
}

._3b0bbefa {
  white-space: nowrap;
}

.cbc0dd06 {
  text-decoration: underline;
}

.c078614d {
  font-weight: 600 !important;
}

._650c5038 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/*
 * Truncation
 */

._27d580cf {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

._62071921 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

._188d8f75 {
  -webkit-line-clamp: 1;
}

.cea291f0 {
  -webkit-line-clamp: 2;
}

.f44f3c37 {
  -webkit-line-clamp: 3;
}

._1365d430 {
  -webkit-line-clamp: 4;
}

._0a52a28e {
  -webkit-line-clamp: 5;
}

._786abeba {
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

.b59b01f8 {
  color: rgb(237, 237, 237);
}

/*
 * Color
 */

/* Text colors */

._2b04de2e,
._5479ce40 {
  color: rgb(255, 102, 0);
}

.aed0a70e {
  color: rgb(50, 60, 65);
}

._9a0f1be7 {
  color: rgb(111, 118, 122);
}

._1580634b {
  color: rgb(255, 255, 255);
}

.c93e15a4 {
  color: rgb(91, 99, 103);
}

._5cfd4ea1 {
  color: rgb(208, 2, 27);
}

._359b9b5f {
  color: rgb(166, 166, 166);
}

._66c76920 {
  color: inherit;
}

/* Background colors */

._55726f9d {
  background-color: white;
}

.b19fcefb {
  background-color: rgb(242, 242, 242);
}

._1aeabcaf {
  background-color: rgb(241, 239, 238);
}

._3c2e089d {
  background-color: rgb(60, 60, 60);
}

.cfdd6318 {
  background-color: rgb(237, 234, 227);
}

._03cc8755 {
  background-color: rgb(202, 195, 187);
}

._66d73172 {
  background-color: rgb(250, 250, 248);
}

._7ff6e78b {
  background-color: rgb(242, 240, 238);
}

._85f9cba6 {
  background-color: rgb(234, 235, 236);
}

/*
 * Drop shadow
 */

._323c7b3f {
  -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
          box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
}

.b8124f80 {
  -webkit-box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
          box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
}

._9c19b137 {
  -webkit-box-shadow: none;
          box-shadow: none;
}

._100aa66e {
  padding-top: 16px !important;
  padding-top: 1.6rem !important;
}

.f30c1e9f {
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

._529f986c {
  padding-top: 24px;
  padding-top: 2.4rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

.d85bb22f {
  padding-left: 16px !important;
  padding-left: 1.6rem !important;
  padding-right: 16px !important;
  padding-right: 1.6rem !important;
}

._07370df1 {
  padding-top: 24px;
  padding-top: 2.4rem;
}

._3e867341 {
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

._7ee858df {
  padding-top: 4px;
  padding-top: 0.4rem;
}

._7fba5eaf {
  padding-left: 0 !important;
}

._3b97aa34 {
  padding-bottom: 0 !important;
}

._5838408d {
  padding: 0 !important;
}

.f45024c6 {
  padding-left: 8px !important;
  padding-left: 0.8rem !important;
}

._599c6880 {
  padding-right: 24px !important;
  padding-right: 2.4rem !important;
}

/*
 * Shaping
 */

.e97b0b33 {
  border-radius: 20rem;
}

.ac81caaf {
  border-radius: 0.4rem;
}

/*
 * list
 */

._02af14d9 {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.f5465a57 {
  text-decoration: none
}

.f5465a57:hover {
  text-decoration: underline;
}

._8ae4b944 {
  text-decoration: underline
}

._8ae4b944:hover {
  text-decoration: none;
}

._3795b60e {
  text-decoration: underline;
  -webkit-transition: color 200ms;
  transition: color 200ms
}

._3795b60e:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

._2cc0f36e {
  text-transform: none;
}

._4baa8ce7 {
  border-top: 1px solid rgb(166, 166, 166);
  border-top: 0.1rem solid rgb(166, 166, 166);
}

.a34bf504 {
  padding: 8px;
  padding: 0.8rem;
}

/*
 * Grid
 */

._22c3f650 {
  padding-bottom: 40px;
  padding-bottom: 4rem;
}

._431457f2 {
  padding-bottom: 4px;
  padding-bottom: 0.4rem;
}

@media (max-width: 44.99em) {
  ._22c3f650 {
    padding-bottom: 2rem;
  }
}

._22c3f650::after,
._431457f2::after {
  content: '';
  position: absolute;
  width: calc(100% - 1.8rem);
  height: 1px;
  height: 0.1rem;
  bottom: 0;
  right: 0;
  background: rgb(166, 166, 166);
  margin-left: 24px;
  margin-left: 2.4rem;
}

/*
 * Separators
 */

._1a626fca {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-top: 0.1rem solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  border-bottom: 0.1rem solid rgba(255, 255, 255, .3);
}

.b364272f {
  margin-top: 30px;
  margin-top: 3rem;
  margin-bottom: 30px;
  margin-bottom: 3rem;
}

.ccb38494 {
  border-color: rgb(237, 237, 237) !important;
}

.c47515da {
  border-color: rgb(166, 166, 166) !important;
}

._1cc20b9b {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237)
}

._1cc20b9b:first-child {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
}

._35f346d0 {
  border-bottom: 1px solid rgb(210, 210, 210);
  border-bottom: 0.1rem solid rgb(210, 210, 210)
}

._35f346d0:first-child {
  border-top: 1px solid rgb(210, 210, 210);
  border-top: 0.1rem solid rgb(210, 210, 210);
}

._09c3f728 {
  border-bottom: 1px solid rgb(60, 60, 60);
  border-bottom: 0.1rem solid rgb(60, 60, 60)
}

._09c3f728:first-child {
  border-top: 1px solid rgb(60, 60, 60);
  border-top: 0.1rem solid rgb(60, 60, 60);
}

/*
 * https://webaim.org/techniques/css/invisiblecontent/
 * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_screen-reader.scss
 */

._0f66ffe8 {
  position: absolute;
  /* stylelint-disable */
  width: 1px;
  height: 1px;
  /* stylelint-enable */
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  border: 0;
}

/**
 * Remove native input clear button.
 * See https://github.com/necolas/normalize.css/commit/f7c98c4c859c15363763f10a439b63d85b9afba0#diff-bb3dde41d97f19be8ab7b4780a915d5e
 */

[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/**
 * Add outline to input boxes when in desktop view to avoid ios safari bug.
 */

.b0db4858 {
  outline: none;
}

@media (min-width: 63.75em) {

  .b0db4858:focus {
    outline: 0.4rem auto -webkit-focus-ring-color;
  }
}

._414086bf {
  pointer-events: none;
  cursor: not-allowed;
}

._5961f20e input[type='number'] {
  -moz-appearance: textfield
}

._5961f20e input[type='number']::-webkit-inner-spin-button,
  ._5961f20e input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/**
 * Full width content, break out of grid
 */

._4300f180 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (min-width: 63.75em) {

  ._4300f180 {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

._0227b911 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  ._0227b911 {
    width: 140rem;
  }
}

._8d4ce440 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  ._8d4ce440 {
    width: 100vw;
  }
}

/*
 * Margins
 */

._51407946 {
  margin: 0 !important;
}

._488a2365 {
  margin-top: 0 !important;
}

._2fb88c53 {
  margin-bottom: 0 !important;
}

.e0647e9b {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
}

._412f6bf5 {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
}

._8d78e299 {
  margin-top: 48px !important;
  margin-top: 4.8rem !important;
}

.eeea17a9 {
  margin-top: 64px !important;
  margin-top: 6.4rem !important;
}

._550b3694 {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
}

._7f7baf71 {
  margin-top: 4px !important;
  margin-top: 0.4rem !important;
}

.e85ed149 {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
}

._24707fd5 {
  margin-top: 20px !important;
  margin-top: 2rem !important;
}

.a7ad8b0d {
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

._7ec5f3c1 {
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

._417b66ff {
  margin-bottom: 40px !important;
  margin-bottom: 4rem !important;
}

._519e83b0 {
  margin-bottom: 48px !important;
  margin-bottom: 4.8rem !important;
}

._0be0e6b4 {
  margin-bottom: 56px !important;
  margin-bottom: 5.6rem !important;
}

.b4924784 {
  margin-bottom: 64px !important;
  margin-bottom: 6.4rem !important;
}

.b31fb1f0 {
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

.ae4a6888 {
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

._9327e6d4 {
  margin-bottom: 4px !important;
  margin-bottom: 0.4rem !important;
}

.c3fcac45 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

._30d4c44b {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._57d212a6 {
  margin-right: 24px;
  margin-right: 2.4rem;
}

.f4c772a3 {
  margin-right: 32px;
  margin-right: 3.2rem;
}

._27d4a011 {
  margin-left: 32px;
  margin-left: 3.2rem;
}

._8d4adaa2 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._748bbb03 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

.da347519 {
  margin-left: 24px;
  margin-left: 2.4rem;
}

.b4bc3764 {
  margin-left: auto !important;
  margin-right: auto !important;
}

.aa7270d4 {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

._08e205d6 {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

._291bad95 {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

.a3731f88 {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

/* Font Face */

._80839295 {
  font-family: 'GoodHome-Light', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._8441a5ac {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._33cb840b {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.a6a93ec4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.bebe0fed {
  margin: 60px auto;
  margin: 6rem auto;
  fill: rgb(255, 102, 0);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

._082ed8c4 {
  display: grid;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

._9b15d598 {
  grid-template-columns: 1fr;
  gap: 16px;
  gap: 1.6rem;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._9b15d598 {
    grid-template-columns: 7fr 1fr;
    gap: 0.8rem;
  }
}

._216ba6af {
  width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 44.99em) {

  .f4ef6f4c {
  }
}

@media (min-width: 63.75em) {

  .f4ef6f4c {
  }
}

._14fd6b3f {
}

@media (max-width: 44.99em) {

  ._14fd6b3f {
  }
}

@media (min-width: 63.75em) {

  ._14fd6b3f {
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.fe528a66 {
  margin-bottom: -16px;
  margin-bottom: -1.6rem;
}

.cf9fb02f {
  padding: 0 0 0 56px;
  padding: 0 0 0 5.6rem;
}

.cf9fb02f::after,
.cf9fb02f::before {
  content: none;
}

.b7bcb8f2 {
  font-size: 16px;
  font-size: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.cf691514 {
  min-height: 130px;
  min-height: 13rem;
}

._1c2c6d44 {
  min-width: auto;
  max-width: calc(100% - 2.4rem);
}

.c714e4e0 {
  -ms-flex-item-align: start;
      align-self: start;
}

._6060ffa9 {
  margin-top: 8px;
  margin-top: 0.8rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._0c35aa44 {
  margin: 0 -16px;
  margin: 0 -1.6rem;
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.bceee7c5 {
  margin: 16px -16px -16px;
  margin: 1.6rem -1.6rem -1.6rem;
  padding: 8px 16px;
  padding: 0.8rem 1.6rem;
}

._37cd2d0c {
  padding-bottom: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._237f181c {
  background-color: rgb(254, 245, 228);
  border: 1px dashed rgb(255, 102, 0);
  border: 0.1rem dashed rgb(255, 102, 0);
  max-width: 565px;
  max-width: 56.5rem;
  margin: 0 auto;
}

._9de2a5da {
  width: 80px;
  width: 8rem;
  height: 80px;
  height: 8rem;
}

._83d33968 {
  margin-bottom: 32px;
  margin-bottom: 3.2rem;
}

@media (min-width: 63.75em) {

  ._468f2b43 {
    width: 100%;
    max-width: 102rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._68b31786 {
  background-color: rgb(255, 255, 255);
  margin: 16px auto;
  margin: 1.6rem auto;
  padding: 0;
}

@media (min-width: 63.75em) {

  ._1d6c1560 {
    width: 85%;
  }
}

._3beae4da {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.a73eab60 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media (max-width: 44.99em) {

  .a73eab60 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.cdbb0c34 {
  width: 80px;
  width: 8rem;
  height: 80px;
  height: 8rem;
  margin-right: 16px;
  margin-right: 1.6rem;
}

._1828f204 {
  padding: 0;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._44e8bb91 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._290b23bc {
  margin: 0 auto;
}

@media (max-width: 63.74em) {

  ._290b23bc {
    margin-bottom: 1.6rem;
  }
}

._6ba50934 {
  margin: 0 auto;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._04647305 {
  margin: 0 auto;
}

@media (min-width: 45em) {

  ._04647305 {
    width: 30.4rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._4e026dd0 {
  padding-top: 64px;
  padding-top: 6.4rem;
}

@media (min-width: 63.75em) {

  ._4e026dd0 {
    width: 100%;
    max-width: 80.8rem;
  }
}

@media (max-width: 63.74em) {

  ._4e026dd0 {
    padding-top: 4.8rem;
  }
}

.dc712020 {
  padding: 24px;
  padding: 2.4rem;
}

@media (max-width: 63.74em) {

  ._71b3c871 {
    margin-bottom: 1.6rem;
  }
}

._426e22f7 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

.c4a7aa91 {
  padding: 0
}

.c4a7aa91::after {
  margin-top: 0;
}

._2c880bb3 {
  margin-top: 24px;
  margin-top: 2.4rem;
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

._0c02a096 {
  padding-top: 24px;
  padding-top: 2.4rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/*
 * z-index
 */

._77e5259f {
  z-index: 1;
}

.e27807be {
  z-index: 80;
}

._28339d62 {
  z-index: 80;
}

._487109d2 {
  z-index: 90;
}

.cfd8d91e {
  z-index: 115;
}

._3d1a9a0f {
  z-index: 1000;
}

._4865c309 {
  z-index: 1100;
}

._211497c8 {
  z-index: 10000;
}

.ec6996e6 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
  margin-left: 4px;
  margin-left: 0.4rem;
  cursor: default;
}

._311b8903 {
  width: 80px;
  width: 8rem;
  height: 40px;
  height: 4rem;
  border-radius: 0.4rem;
  padding: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  text-align: center;
  -webkit-box-shadow: none;
          box-shadow: none;
}

._765b3488 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._1170eb9d {
  display: inline-block;
  position: relative;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  padding-right: 80px;
  padding-right: 8rem;
}

@media (max-width: 26.5em) {

  ._1170eb9d {
    padding-right: 6rem;
  }
}

@media (max-width: 23.4em) {

  ._1170eb9d {
    padding-right: 4rem;
  }
}

._1170eb9d label {
    /* this aligns all inputs regardless of labels */
    position: absolute;
    left: 80px;
    left: 8rem;
}

._1e60abaa {
  text-align: left;
  padding-left: 12px;
  padding-left: 1.2rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._4bb22557 {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: rgb(237, 237, 237);
  border-radius: 0.4rem;
  padding: 16px;
  padding: 1.6rem;
  cursor: pointer;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._1021fc7e {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

.fa779c35 {
  margin-right: 24px;
  margin-right: 2.4rem;
}

._6729cb24 i {
  margin-right: 8px;
  margin-right: 0.8rem;
  border-color: rgb(255, 102, 0);
  background-color: rgb(255, 255, 255);
}

._9c0677c7 {
  position: absolute;
  right: 32px;
  right: 3.2rem;
  cursor: pointer;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.fef4a20e {
  margin-top: 16px;
  margin-top: 1.6rem;
}

.db6fead0 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._13bfcacd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

.ad6deabf {
  cursor: pointer;
}

.bca8fd19 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (max-width: 44.99em) {
  ._680c4d61 {
    margin-bottom: 2rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._40cf40fe {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.acaa9797 {
  width: 96px;
  width: 9.6rem;
  border-radius: 0;
}

._94b1fa5b {
  margin-top: 24px;
  margin-top: 2.4rem;
  margin-bottom: 0;
}

@media (max-width: 44.99em) {

  ._94b1fa5b {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-right: 1.6rem;
    margin-right: 2.4rem;
  }
}

._09cc0b1d {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 0;
}

@media (min-width: 63.75em) {

  ._09cc0b1d {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.c133ab8b {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
}

._3db015df {
  margin-right: 8px;
  margin-right: 0.8rem;
}

.a06e93f2 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  text-align: left;
  margin-bottom: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.a4661e2b {
  margin: 32px;
  margin: 3.2rem;
  margin-top: 16px;
  margin-top: 1.6rem;
  margin-bottom: 0;
}

._887b3f4d {
  margin-top: 8px;
  margin-top: 0.8rem;
}

._7998df4f {
  width: 100%;
  margin-top: 16px;
  margin-top: 1.6rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-bottom: 0;
}

._0d96dee4 {
  margin-left: 32px;
  margin-left: 3.2rem;
  margin-right: 32px;
  margin-right: 3.2rem;
}

._912e6db3 {
  padding-top: 2px;
  padding-top: 0.2rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.ff94970c {
  padding-top: 16px;
  padding-top: 1.6rem;
}

@media (min-width: 63.75em) {

  .ff94970c {
    width: 100%;
    max-width: 102rem;
    margin: auto;
  }
}

._1b8a4af6 {
  max-width: 400px;
  max-width: 40rem;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 45em) {

  ._1b8a4af6 {
    max-width: 60rem;
    padding-left: 8.4rem;
    padding-right: 8.4rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._38f08fda {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 40px;
  padding-top: 4rem;
}

._4aac6015,
._0b6f100c {
  text-align: center;
}

._4aac6015 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 40px;
  margin-top: 4rem;
}

._0b6f100c {
  margin-bottom: 40px;
  margin-bottom: 4rem;
}

@media (min-width: 63.75em) {

  ._0b6f100c {
    width: 70%;
  }
}

._7eb80de5 {
  width: 100%;
  -ms-flex-item-align: center;
      align-self: center;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._2a0038c4 {
  background-color: rgb(234, 235, 236);
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._76ad025b {
  background: rgb(255, 255, 255);
  font-size: 32px;
  font-size: 3.2rem;
  width: 100%;
  height: 100%;
}

@media (min-width: 45em) {

  ._76ad025b {
    width: 60rem;
    height: 33rem;
  }
}

._0ebe1041 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 16px 16px 0;
  padding: 1.6rem 1.6rem 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  background-color: rgb(255, 255, 255);
}

@media (min-width: 45em) {

  ._0ebe1041 {
    padding: 3.2rem 3.2rem 0;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._0e755e7e {
  margin-bottom: 32px;
  margin-bottom: 3.2rem;
}

.e707e3e4 {
  background-color: rgb(60, 60, 60);
  color: rgb(255, 255, 255);
  padding: 16px;
  padding: 1.6rem;
  margin-top: 0
}

.e707e3e4 h2 {
  font-size: 16px;
  font-size: 1.6rem;
  margin-left: 16px;
  margin-left: 1.6rem;
}

._3375cab8 {
  position: relative;
  width: 168px;
  width: 16.8rem;
  height: 168px;
  height: 16.8rem;
  overflow: hidden
}

._3375cab8 ._3b1c3b59 {
  outline: 4px solid rgb(255, 102, 0);
  outline: 0.4rem solid rgb(255, 102, 0);
  outline-offset: -4px;
  outline-offset: -0.4rem;
}

.c48a8e0a {
  height: 100%;
}

._10bb2306 {
  width: 168px;
  width: 16.8rem;
  font-size: 20px;
  font-size: 2rem;
  margin-top: 16px;
  margin-top: 1.6rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.afb13150 {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  min-width: 192px;
  min-width: 19.2rem;
  max-width: 192px;
  max-width: 19.2rem;
  margin-right: 16px;
  margin-right: 1.6rem;
  border: 3px solid transparent;
  border: 0.3rem solid transparent;
}

._582755ea {
  width: 100%;
}

.afb13150:last-child {
  margin-right: 0;
}

.d05aca10 {
  width: 100%;
  height: 80px;
  height: 8rem;
  margin: 0;
  display: block;
  overflow: hidden;
}

._24eac12a {
  min-width: 100%;
  min-height: 100%;
}

.bb45c3a8 {
  position: relative;
}

._53965ed1 {
  position: absolute;
  top: 16px;
  top: 1.6rem;
  right: 16px;
  right: 1.6rem;
  border-radius: 50%;
  color: rgb(255, 102, 0);
}

.ccdd02dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: rgb(255, 255, 255);
  padding: 8px 16px 16px;
  padding: 0.8rem 1.6rem 1.6rem;
  margin: 0;
}

._8b40ebdc {
  line-height: 24px;
  line-height: 2.4rem;
}

.d824c1fa {
  border: 3px solid rgb(255, 102, 0);
  border: 0.3rem solid rgb(255, 102, 0);
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.fb9111d6 {
  width: 100%;
  margin: 0 0 16px;
  margin: 0 0 1.6rem;
}

@media (min-width: 45em) {

  .fb9111d6 {
    max-width: 50%;
  }
}

._65643d45 {
  border: 1px solid rgb(210, 210, 210);
  border: 0.1rem solid rgb(210, 210, 210);
}

._8b6eb8ce {
  position: relative;
  width: 100%;
}

._41260520 {
  width: 100%;
  margin: 0;
  display: block;
  overflow: hidden;
}

._6c08380e {
  width: 100%;
}

.e1285860 {
  padding: 16px;
  padding: 1.6rem;
}

._2f918939 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: rgb(255, 255, 255);
}

._30305b3a {
  margin: 0 0 32px;
  margin: 0 0 3.2rem;
}

.f2fd0fe3 {
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin: 0;
  max-width: 120px;
  max-width: 12rem;
  min-width: auto;
}

@media (min-width: 45em) {

  .f2fd0fe3 {
    min-width: 17.6rem;
  }
}

.ab9430e4 {
  line-height: 24px;
  line-height: 2.4rem;
}

._31c1c7e0 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._220ee51c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ec6b21c0 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 48px;
  width: 4.8rem;
  height: 48px;
  height: 4.8rem;
  border: 1px solid rgb(210, 210, 210);
  border: 0.1rem solid rgb(210, 210, 210);
  margin: 0 8px 2px 0;
  margin: 0 0.8rem 0.2rem 0;
}

.cb8dbe9a {
  border: 3px solid rgb(255, 102, 0);
  border: 0.3rem solid rgb(255, 102, 0);
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._7f283111 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  z-index: 1;
  background: rgb(228, 225, 221);
}

.fc3b0fa3 {
  padding: 16px 0;
  padding: 1.6rem 0;
  -webkit-transition: padding 0.5s;
  transition: padding 0.5s;
}

._33be6d4d {
  padding: 0 16px;
  padding: 0 1.6rem;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
  overflow: hidden;
}

@media (min-width: 45em) {

  ._33be6d4d {
    padding: 0 3.2rem;
  }
}

.cb086503,
.c3f49c5c {
  font-size: 20px;
  font-size: 2rem;
  font-weight: bold;
  line-height: 32px;
  line-height: 3.2rem;
  color: rgb(60, 60, 60);
  padding: 32px 0 16px;
  padding: 3.2rem 0 1.6rem;
  margin: 0;
}

@media (min-width: 45em) {

  .cb086503,
.c3f49c5c {
    /* Please check the component if you're changing this,
      as we are setting fixed height on this element */
    font-size: 3.2rem;
    padding: 6.4rem 0 1.6rem;
  }
}

.cb086503 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._15c8da01 {
  font-size: 16px;
  font-size: 1.6rem;
}

.ac89db88 {
  text-decoration: underline
}

.ac89db88:hover {
  text-decoration: none;
}

.a362219d {
  padding: 0;
}

.a362219d::after,
.a362219d::before {
  padding-left: 16px;
  padding-left: 1.6rem;
}

@media (min-width: 45em) {

  .a362219d::after,
.a362219d::before {
    padding-left: 3.2rem;
  }
}

@media (min-width: 45em) {

  .c3f49c5c {
    padding: 6.4rem 0 3.2rem;
  }
}

.c7bc0b60 {
  background-color: rgb(255, 255, 255);
  height: 100%;
  padding: 16px;
  padding: 1.6rem;
}

@media (min-width: 45em) {

  .c7bc0b60 {
    padding: 0 3.2rem 1.6rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._2589ac8a {
  padding-top: 48px;
  padding-top: 4.8rem;
  background: rgb(255, 255, 255);
  height: 100%;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/* Media query for when full kitchen bg image should be constrained within available horizontal space to ensure anchor points align correctly */

/* Media query for when full kitchen bg image should be constrained within available vertical space to ensure anchor points align correctly */

/* Media query for when kitchen bg image should exhibit cover behaviour inside containing div
i.e. screen widths above point at which anchor points begin to move off associated areas of image */

._1dbc77da {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 72px;
  height: 7.2rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 16px;
  padding: 1.6rem;
  border-bottom: 1px solid rgb(210, 210, 210);
  border-bottom: 0.1rem solid rgb(210, 210, 210);
}

.f08ef5d3 {
  text-transform: lowercase;
}

._9da6a602 {
  width: 24px;
  width: 2.4rem;
  height: 24px;
  height: 2.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid rgb(210, 210, 210);
  border: 0.1rem solid rgb(210, 210, 210);
}

._2a150950 {
  text-align: left;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._9d7dc198 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.d4738b8d {
  padding: 0;
}

.db216011 {
  padding: 2px 0;
  padding: 0.2rem 0
}

._4c119cc8 {
  padding: 4px 0;
  padding: 0.4rem 0
}

.c782659a {
  padding: 8px 0;
  padding: 0.8rem 0
}

._57da48e1 {
  padding: 12px 0;
  padding: 1.2rem 0
}

._75836fc0 {
  padding: 16px 0;
  padding: 1.6rem 0
}

.bd6080f7 {
  padding: 24px 0;
  padding: 2.4rem 0
}

._647fa519 {
  padding: 32px 0;
  padding: 3.2rem 0
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.b8a0ca2c {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.d6d3bb88 {
  padding: 0;
}

.bb820466 {
  padding: 2px;
  padding: 0.2rem
}

._923b5d1c {
  padding: 4px;
  padding: 0.4rem
}

.a4cb2056 {
  padding: 8px;
  padding: 0.8rem
}

._7ae22a5e {
  padding: 12px;
  padding: 1.2rem
}

._844de35f {
  padding: 16px;
  padding: 1.6rem
}

._481f9484 {
  padding: 24px;
  padding: 2.4rem
}

.a28338a2 {
  padding: 24px;
  padding: 2.4rem
}

._43cb0538 {
  opacity: 0.7;
  pointer-events: none;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._824013c7 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.aa9b4190 {
  padding: 0;
}

._372f8085 {
  padding: 2px 0;
  padding: 0.2rem 0
}

._852f792b {
  padding: 4px 0;
  padding: 0.4rem 0
}

._586cba13 {
  padding: 8px 0;
  padding: 0.8rem 0
}

.cb61f6ad {
  padding: 12px 0;
  padding: 1.2rem 0
}

.d3407ecc {
  padding: 16px 0;
  padding: 1.6rem 0
}

._2b689da7 {
  padding: 24px 0;
  padding: 2.4rem 0
}

._892a547a {
  padding: 32px 0;
  padding: 3.2rem 0
}

._8ba51d3b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

._496f2070 {
  padding: 0;
}

._3e1c70e8 {
  padding: 0 2px;
  padding: 0 0.2rem
}

._09e960e6 {
  padding: 0 4px;
  padding: 0 0.4rem
}

._84db6e11 {
  padding: 0 8px;
  padding: 0 0.8rem
}

._6df2c12b {
  padding: 0 12px;
  padding: 0 1.2rem
}

.d6af1bba {
  padding: 0 16px;
  padding: 0 1.6rem
}

._81e8cf92 {
  padding: 0 24px;
  padding: 0 2.4rem
}

._20a11803 {
  padding: 0 32px;
  padding: 0 3.2rem
}

.e08590de {
  margin: 2px 0;
  margin: 0.2rem 0
}

.c962ecbc {
  margin: 4px 0;
  margin: 0.4rem 0
}

._1b9b261b {
  margin: 8px 0;
  margin: 0.8rem 0
}

._5ca1ef63 {
  margin: 12px 0;
  margin: 1.2rem 0
}

._6cd6bf27 {
  margin: 16px 0;
  margin: 1.6rem 0
}

._266ada20 {
  margin: 24px 0;
  margin: 2.4rem 0
}

._1462c9f4 {
  margin: 32px 0;
  margin: 3.2rem 0
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.f2fb593d {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.f3ba3b07 {
  padding: 0;
}

._3d242705 {
  padding: 2px 0;
  padding: 0.2rem 0
}

._562df08f {
  padding: 4px 0;
  padding: 0.4rem 0
}

.d804280a {
  padding: 8px 0;
  padding: 0.8rem 0
}

._2bef68b6 {
  padding: 12px 0;
  padding: 1.2rem 0
}

._97d05c12 {
  padding: 16px 0;
  padding: 1.6rem 0
}

._6d54dfd7 {
  padding: 24px 0;
  padding: 2.4rem 0
}

._57e3346f {
  padding: 32px 0;
  padding: 3.2rem 0
}

.cb5d3417 {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;
  -webkit-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}

.dce2a3e0 {
  opacity: 0;
}

._06c70b30 {
  display: block;
  width: 100%;
  height: 100%;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._6b17dc4d {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  border: 1px solid rgb(166, 166, 166);
  border: 0.1rem solid rgb(166, 166, 166);
  cursor: pointer;
}

.dba9a024 {
  border: 4px solid rgb(255, 102, 0);
  border: 0.4rem solid rgb(255, 102, 0);
}

._29193af0 {
  position: absolute;
  top: 8px;
  top: 0.8rem;
  right: 8px;
  right: 0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.de535b24 {
  background-color: rgb(241, 239, 238);
  padding: 16px;
  padding: 1.6rem;
  position: relative;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

._6d908526 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}

._5c209ae4 {
  background-color: rgb(241, 239, 238);
}

._3d7afd06 {
  margin-top: 16px;
  margin-top: 1.6rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  max-width: none;
}

@media (min-width: 63.75em) {

  ._3d7afd06 {
    -ms-flex-item-align: end;
        align-self: flex-end;
    margin: 0;
    margin-top: 2.4rem;
  }
}

._3a524003 {
  font-size: 20px;
  font-size: 2rem;
  line-height: normal;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._3277bfaf {
  background-color: rgb(228, 225, 221);
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin: 0 16px;
  margin: 0 1.6rem;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._3277bfaf {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

@media (min-width: 63.75em) {

  ._3277bfaf {
    margin-bottom: 1.6rem;
    padding: 2.4rem 0 0;
  }
}

._5ea9fa65 {
  padding: 24px 16px;
  padding: 2.4rem 1.6rem;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._5ea9fa65 {
    width: 50%;
  }
}

@media (min-width: 63.75em) {

  ._5ea9fa65 {
    padding: 0 1.6rem 2.4rem;
  }
}

._8acea40c {
  width: 100%;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._8acea40c {
    width: 50%;
    min-width: 36.8rem;
  }
}

@media (min-width: 63.75em) {

  ._8acea40c {
    margin-top: 0.53333rem;
  }
}

._631bd3be {
  padding: 32px 16px 16px;
  padding: 3.2rem 1.6rem 1.6rem;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._631bd3be {
    padding: 1.6rem;
  }
}

.b97ee618 {
  background-color: transparent;
}

._6ad10573 {
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._98368da2 {
  border-bottom: 1px solid rgb(214, 216, 217);
  border-bottom: 0.1rem solid rgb(214, 216, 217);
}

._8059fccf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 16px;
  padding: 1.6rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._80a7d0a7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  width: 25%;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/* Media query for when full kitchen bg image should be constrained within available horizontal space to ensure anchor points align correctly */

/* Media query for when full kitchen bg image should be constrained within available vertical space to ensure anchor points align correctly */

/* Media query for when kitchen bg image should exhibit cover behaviour inside containing div
i.e. screen widths above point at which anchor points begin to move off associated areas of image */

._76bbed5a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  left: 32px;
  left: 3.2rem;
  top: 112px;
  top: 11.2rem;
  height: calc(100% - 14.4rem);
  width: 304px;
  width: 30.4rem;
  background-color: rgb(255, 255, 255);
}

.ie11 ._2ce99da6 {
  min-height: 300px;
  min-height: 30rem;
}

._70425246 {
  padding: 0;
  overflow-y: auto;
  height: calc(100% - 7.2rem);
}

.c7a493a1 {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
  padding: 16px;
  padding: 1.6rem;
}

._7dcfd9a1 {
  height: 8px;
  height: 0.8rem;
  background-color: rgb(255, 255, 255);
  position: absolute;
  bottom: 0;
  width: 100%;
}

._2c62ece9 {
  overflow-y: auto;
  display: block;
}

@media (min-width: 63.75em) {

  ._2c62ece9 {
    padding-bottom: 0;
  }
}

.e4301ab8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 16px;
  padding: 1.6rem;
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

._58e66fd2 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 40px;
  width: 4rem;
  height: 40px;
  height: 4rem;
  border: 1px solid rgb(210, 210, 210);
  border: 0.1rem solid rgb(210, 210, 210);
  margin: 0 16px 2px 0;
  margin: 0 1.6rem 0.2rem 0;
  background-position: center;
  background-size: cover;
}

@media (min-width: 63.75em) {

  ._58e66fd2 {
    width: 4.8rem;
    height: 4.8rem;
  }
}

._00507789 {
  margin-left: auto;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/* Media query for when full kitchen bg image should be constrained within available horizontal space to ensure anchor points align correctly */

/* Media query for when full kitchen bg image should be constrained within available vertical space to ensure anchor points align correctly */

/* Media query for when kitchen bg image should exhibit cover behaviour inside containing div
i.e. screen widths above point at which anchor points begin to move off associated areas of image */

._4966049c {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  left: 32px;
  left: 3.2rem;
  top: 112px;
  top: 11.2rem;
  height: calc(100% - 14.4rem);
  width: 304px;
  width: 30.4rem;
  background-color: rgb(255, 255, 255);
}

.ie11 ._1a262bdc {
  min-height: 300px;
  min-height: 30rem;
}

._1111faf4 {
  padding: 0;
  overflow-y: auto;
  height: calc(100% - 7.2rem);
}

._2f538468 {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
  padding: 16px;
  padding: 1.6rem;
}

.c776ad40 {
  height: 8px;
  height: 0.8rem;
  background-color: rgb(255, 255, 255);
  position: absolute;
  bottom: 0;
  width: 100%;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._0f48db79 {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
}

.f0ee0af5 {
  text-align: center;
  margin: auto;
}

._13eb0f30 {
  margin: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._1060feff,
._723b12cb {
  position: relative;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._19b969a1 {
  position: absolute;
  right: 0;
  cursor: pointer;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
}

.d06eb7d7 {
  position: absolute;
  background-color: rgb(50, 60, 65);
  padding: 24px;
  padding: 2.4rem;
}

.fab3ca22 {
  color: rgb(255, 255, 255);
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._9b1806d5 {
  width: 8px;
  width: 0.8rem;
  height: 8px;
  height: 0.8rem;
  background-color: rgb(50, 60, 65);
  left: 50%;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/* Media query for when full kitchen bg image should be constrained within available horizontal space to ensure anchor points align correctly */

/* Media query for when full kitchen bg image should be constrained within available vertical space to ensure anchor points align correctly */

/* Media query for when kitchen bg image should exhibit cover behaviour inside containing div
i.e. screen widths above point at which anchor points begin to move off associated areas of image */

._68dec599 {
  width: 240px;
  width: 24rem;
}

._68dec599 .cacb5bbf {
  margin-top: 8px;
  margin-top: 0.8rem;
  display: block;
}

.b68282aa {
  left: 48px;
  left: 4.8rem;
}

._7e964248 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/* Media query for when full kitchen bg image should be constrained within available horizontal space to ensure anchor points align correctly */

/* Media query for when full kitchen bg image should be constrained within available vertical space to ensure anchor points align correctly */

/* Media query for when kitchen bg image should exhibit cover behaviour inside containing div
i.e. screen widths above point at which anchor points begin to move off associated areas of image */

._1f03e585 {
  text-align: center;
}

@media (min-width: 45em) {

  ._1f03e585 {
    padding: 1.6rem 2.4rem;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/* Media query for when full kitchen bg image should be constrained within available horizontal space to ensure anchor points align correctly */

/* Media query for when full kitchen bg image should be constrained within available vertical space to ensure anchor points align correctly */

/* Media query for when kitchen bg image should exhibit cover behaviour inside containing div
i.e. screen widths above point at which anchor points begin to move off associated areas of image */

._33a4623b {
  border: 1px solid rgb(210, 210, 210);
  border: 0.1rem solid rgb(210, 210, 210);
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

._3f15646a {
  width: 40px;
  width: 4rem;
  height: 40px;
  height: 4rem;
}

._3142b8c7 {
  width: 64px;
  width: 6.4rem;
  height: 64px;
  height: 6.4rem;
}

._31d76a97 {
  height: 30vw;
  width: 30vw;
}

@media (min-width: 63.75em) {

  ._31d76a97 {
    width: 10.4rem;
    height: 10.4rem;
  }
}

.d4b442fb {
  height: 30vw;
  width: 30vw;
}

._3ef62cce {
  margin: 8px;
  margin: 0.8rem;
}

.fa020fb6 {
  margin: 0;
}

._2d130d4a {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

.a89234e8 {
  margin-bottom: 4px;
  margin-bottom: 0.4rem;
}

._1a1d38d1 {
  position: absolute;
  top: 8px;
  top: 0.8rem;
  right: 8px;
  right: 0.8rem;
}

.d91d535b,
._356af545 {
  position: relative;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/* Media query for when full kitchen bg image should be constrained within available horizontal space to ensure anchor points align correctly */

/* Media query for when full kitchen bg image should be constrained within available vertical space to ensure anchor points align correctly */

/* Media query for when kitchen bg image should exhibit cover behaviour inside containing div
i.e. screen widths above point at which anchor points begin to move off associated areas of image */

.c89c6b9e {
  position: relative;
}

.c2507aa8::after {
  width: 32px;
  width: 3.2rem;
  height: 32px;
  height: 3.2rem;
}

._16117810::after {
  width: 56px;
  width: 5.6rem;
  height: 56px;
  height: 5.6rem;
}

.d4e544c2::after {
  width: calc(100% - 0.8rem);
  height: calc(100% - 0.8rem);
}

.fa605e59::after {
  content: close-quote;
  position: relative;
  top: -1;
  left: -1;
  display: block;
  border: 4px solid rgb(255, 102, 0);
  border: 0.4rem solid rgb(255, 102, 0);
}

._472b3a72 {
}

.c6cb4dbe {
}

._5fac7d5e {
}

._17c1f6a2 {
  position: absolute;
  top: 8px;
  top: 0.8rem;
  right: 8px;
  right: 0.8rem;
}

.acaa3e3e {
  position: relative;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._5266dc65 {
  margin-left: auto;
  padding-top: 20px;
  padding-top: 2rem;
}

._05d196cc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

._587f4724 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

._2043a65c {
  margin: auto;
  padding-left: 16px;
  padding-left: 1.6rem;
}

._88ae3bf4 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

._21fd6cc3 {
  width: 100%;
}

._806cb0e4 {
  width: 100vw;
  height: 100vh;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* 
    the mobile screen has been divided into 3 column, as a gride design. the booking button 
    fill about 2/3 of the available space in the mobile view. there is a space in between 
    the booking button and the save button with 1.6rem, it was achieved by minus 1.6rem from the booking button 
    width and then using justify-content: space-between; in th parent element, in the tablet the button has a fixed 
    size and are seperated by using the justify-content: space-between; in the parent element to make sure 
    the button are at the far end of the container.
  */

  /* in the gride the save button fill about 1/3 of the available space in the mobile view */
}

.f5e18d3c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border-bottom: 1px solid rgb(210, 210, 210);
  border-bottom: 0.1rem solid rgb(210, 210, 210);
}

._99196f58 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 12px 16px;
  padding: 1.2rem 1.6rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.a690a4d8 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 12px 16px;
  padding: 1.2rem 1.6rem;
}

._411bbdd2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

._3157d6b0 {
  line-height: 32px;
  line-height: 3.2rem;
  height: 32px;
  height: 3.2rem;
  margin: 0;
  padding: 0
}

._3157d6b0:first-of-type {
  margin-right: 16px;
  margin-right: 1.6rem;
}

@media (min-width: 45em) {

  ._3157d6b0 {
    width: auto;
    line-height: 3.2rem;
  }
}

._5dd333ab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

._6f8aed6a {
  right: 16px;
  right: 1.6rem;
  position: absolute;
}

.df92a158 {
  width: 33.33333%;
  height: 32px;
  height: 3.2rem;
  margin: 0;
  margin-right: 16px;
  margin-right: 1.6rem;
  border: 1px solid rgb(50, 60, 65);
  border: 0.1rem solid rgb(50, 60, 65);
}

@media (min-width: 45em) {

  .df92a158 {
    width: 13rem;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._9150587c {
  background-color: rgb(255, 255, 255);
}

._2b153c91 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 72px;
  height: 7.2rem;
  padding: 16px;
  padding: 1.6rem;
  border-bottom: 1px solid rgb(210, 210, 210);
  border-bottom: 0.1rem solid rgb(210, 210, 210);
}

._268ad430 {
  text-transform: lowercase;
  -ms-flex-item-align: end;
      align-self: flex-end;
  margin: 0;
}

.a38d1327 {
  position: relative;
}

.e14d671d {
  display: block;
  width: 100%;
}

._5b1a8ef6 {
  position: absolute;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.f4e0092d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: rgb(50, 60, 65);
  border-radius: 50%;
  color: rgb(255, 255, 255);
  height: 36px;
  height: 3.6rem;
  width: 36px;
  width: 3.6rem;
  cursor: pointer;
  -webkit-transition: opacity 200ms;
  transition: opacity 200ms;
  border: 1px solid rgb(255, 255, 255);
  border: 0.1rem solid rgb(255, 255, 255)
}

.f4e0092d:hover {
  background-color: rgb(152, 157, 160);
}

._5c36bc62 {
    background-color: rgb(255, 255, 255);
    color: rgb(50, 60, 65);
    border: 1px solid rgb(50, 60, 65);
    border: 0.1rem solid rgb(50, 60, 65);
}

.c164eff8 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.f005c530 {
  -ms-flex-item-align: center;
      align-self: center;
  margin: auto;
  -webkit-transition: -webkit-transform 600ms;
  transition: -webkit-transform 600ms;
  transition: transform 600ms;
  transition: transform 600ms, -webkit-transform 600ms;
}

.eece26c3 {
  cursor: pointer;
  height: 64px;
  height: 6.4rem;
  width: 64px;
  width: 6.4rem;
  position: absolute;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._52f7bbe5 {
  top: 140%;
  left: -140%;
}

.a1bb7dd8 {
  width: 200px;
  width: 20rem;
}

._174d8aa4 {
  left: 32px;
  left: 3.2rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._24e95752 {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 48px;
  height: 4.8rem;
  width: 250px;
  width: 25rem;
  bottom: 0;
  right: 0;
  background-color: rgb(255, 255, 255);
}

@media (min-width: 63.75em) {

  ._24e95752 {
    bottom: 3.2rem;
    right: 3.2rem;
    width: 28.8rem;
    height: 14.4rem;
  }
}

._026c3a1a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-weight: bold;
  width: 160px;
  width: 16rem;
  padding: 8px 16px;
  padding: 0.8rem 1.6rem;
}

@media (min-width: 63.75em) {

  ._026c3a1a {
    width: 14.4rem;
    padding: 1.6rem;
    background-color: rgb(50, 60, 65);
  }
}

._5844046f {
  position: absolute;
  bottom: 4px;
  bottom: 0.4rem;
  right: 16px;
  right: 1.6rem;
}

@media (min-width: 63.75em) {

  ._5844046f {
    bottom: 1.6rem;
    right: 1.6rem;
  }
}

.ae4efdcb {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
}

@media (min-width: 63.75em) {

  .ae4efdcb {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }
}

._6e1cd4c4 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 16px;
  line-height: 1.6rem;
}

@media (min-width: 63.75em) {

  ._6e1cd4c4 {
    color: rgb(255, 255, 255);
    font-size: 2rem;
    line-height: 2.4rem;
  }
}

._19cd527a {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
}

@media (min-width: 63.75em) {

  ._19cd527a {
    font-size: 1.4rem;
    line-height: 2rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/* Media query for when full kitchen bg image should be constrained within available horizontal space to ensure anchor points align correctly */

/* Media query for when full kitchen bg image should be constrained within available vertical space to ensure anchor points align correctly */

/* Media query for when kitchen bg image should exhibit cover behaviour inside containing div
i.e. screen widths above point at which anchor points begin to move off associated areas of image */

._86df7493 {
  padding: 16px 0;
  padding: 1.6rem 0;
  width: 304px;
  width: 30.4rem;
  height: 80px;
  height: 8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: rgb(228, 225, 221);
}

._74b68306 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._28bf5f00 {
  height: 48px;
  height: 4.8rem;
  width: 48px;
  width: 4.8rem;
  overflow: hidden;
  margin-left: 16px;
  margin-left: 1.6rem;
}

.f790c8d9 {
  height: 100%;
}

._994dfb49 {
  margin-bottom: 4px;
  margin-bottom: 0.4rem;
  margin-right: 4px;
  margin-right: 0.4rem;
}

._262c5706 span {
  color: rgb(50, 60, 65);
}

._115a8ea4:hover {
  text-decoration: underline;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

.b7841420 {
  z-index: 1;
}

._7fc10ad7 {
  z-index: 80;
}

.a1e9fdc2 {
  z-index: 80;
}

.bea13312 {
  z-index: 90;
}

._2380dc51 {
  z-index: 115;
}

.cc53f0f5 {
  z-index: 1000;
}

._80e4465a {
  z-index: 1100;
}

.b294a236 {
  z-index: 10000;
}

._55aec49b {
  width: 100%;
  height: auto;
  background-color: rgb(50, 60, 65);
  position: fixed;
  top: 0;
  display: none;
  z-index: 1000;
}

._015f35a7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.aafe4d2e {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-item-align: center;
      align-self: center;
}

._00eab304 {
  width: 50%;
  height: auto;
}

._4135570b {
  margin: 0;
}

._4188a2c7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.a181ec1a {
  border-radius: 32rem;
  background: rgb(255, 255, 255);
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  padding: 8px;
  padding: 0.8rem;
  margin-left: 16px;
  margin-left: 1.6rem;
}

._533f6182 {
  opacity: 0;
}

._8d251c4a {
  opacity: 1;
  -webkit-transition: opacity 600ms;
  transition: opacity 600ms;
}

._84cbf758 {
  opacity: 1;
}

._949d17e7 {
  opacity: 0;
  -webkit-transition: opacity 600ms;
  transition: opacity 600ms;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/* Media query for when full kitchen bg image should be constrained within available horizontal space to ensure anchor points align correctly */

/* Media query for when full kitchen bg image should be constrained within available vertical space to ensure anchor points align correctly */

/* Media query for when kitchen bg image should exhibit cover behaviour inside containing div
i.e. screen widths above point at which anchor points begin to move off associated areas of image */

.acbfb1f6 {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 32px;
  top: 3.2rem;
  right: 32px;
  right: 3.2rem;
  height: 40px;
  height: 4rem;
}

.b4cb3049 {
  width: auto;
  border: 1px solid rgb(50, 60, 65);
  border: 0.1rem solid rgb(50, 60, 65);
  margin: 0 16px;
  margin: 0 1.6rem;
}

._9baa5a59 {
  width: 100%;
}

@media (min-width: 63.75em) {

  ._9baa5a59 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: auto;
  }
}

@media print {

  ._9baa5a59 {
    display: none;
  }
}

.ie11 ._9baa5a59 {
  overflow-y: auto;
}

._153a26b5 {
  -webkit-transform: translateX(-33.6rem);
          transform: translateX(-33.6rem);
}

._9727e0c0 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: -webkit-transform 300ms;
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  transition: transform 300ms, -webkit-transform 300ms;
}

._34a344ca {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

._02c327f5 {
  -webkit-transform: translateX(-33.6rem);
          transform: translateX(-33.6rem);
  -webkit-transition: -webkit-transform 300ms;
  transition: -webkit-transform 300ms;
  transition: transform 300ms;
  transition: transform 300ms, -webkit-transform 300ms;
}

._15a15b3b {
  position: absolute;
  top: 32px;
  top: 3.2rem;
  left: 32px;
  left: 3.2rem;
}

/*  TODO: Remove as part of https://jira.kfplc.com/browse/HIP-1873 */

._0445d19d {
  position: absolute;
  top: 16px;
  top: 1.6rem;
  left: 16px;
  left: 1.6rem;
  width: auto;
  min-width: 0;
  min-width: initial;
}

/*
 * z-index
 */

._4c674094 {
  z-index: 1;
}

._71f1d9e2 {
  z-index: 80;
}

._8876db9c {
  z-index: 80;
}

._897ffd66 {
  z-index: 90;
}

._93141e9a {
  z-index: 115;
}

._96e961b8 {
  z-index: 1000;
}

.a049d426 {
  z-index: 1100;
}

._08949eaa {
  z-index: 10000;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

/*
  Why important is allowed for utils classes?
  - It is common practice (see https://github.com/twbs/bootstrap/blob/ff29c1224c20b8fcf2d1e7c28426470f1dc3e40d/scss/utilities/_visibility.scss)
  - If you put util class on element, it reads like element is having those styles, they should override any conflicting rule
  - In case if rule with !important need to be overwritten, just remove util class and write your own.
*/

/*
 * Naked Button
 */

._73695aa3 {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: inherit;
}

/*
 * Naked Action, Link, Button or Anchor
 */

.ab0a5702 {
  display: block;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
}

button.ab0a5702:not([disabled]) {
  cursor: pointer;
}

.eb8fb628 {
  display: inline;
}

._0976f7e7 {
  color: inherit;
  text-decoration: underline
}

._0976f7e7:hover {
  font-weight: 500;
}

/*
 * Pullers
 */

._62ad0933 {
  float: left !important;
}

.d6e3e4cb {
  float: right !important;
}

/* Note this wont always centralise, quick and dirty */

._8d324682 {
  margin: 0 auto;
}

._5a4daf5b {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.f44d6da9 {
  max-width: 1400px;
  max-width: 140rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 63.75em) {

  ._9957c279 {
    max-width: 36.8rem;
  }
}

@media (min-width: 45em) {

  .cb1fadf0 {
    max-width: 36.8rem;
  }
}

/*
 * Anchors
 */

.a0a39260 {
  display: block;
  text-decoration: underline;
  color: inherit
}

.a0a39260:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

@media (hover: none) {

  .a0a39260:hover {
    color: #000;
    color: initial;
  }
}

/**
 * Alignment
 */

._922d55e2 {
  text-align: left;
}

._014133bc {
  text-align: center;
}

.db8ff4e0 {
  text-align: right;
}

._5fd1e2fa {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

._205b3798 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._3bd23a83 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.d4a97500 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

._2c783d18 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.a3399326 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1
}

.a3399326::before,
  .a3399326::after {
  content: ' ';
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

._462133c0 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._4f619723 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._4d295a29 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

._4b37ad04 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.b235132e {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

._8cedadf2 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.b8d5bc6c {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.a0536a2a {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._473ab0ef {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

._3d3a3651 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.b6e47352 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.e697288b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._9aeefdf3 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

._44942573 {
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important; /* Grid CSS will override when combined */
}

.d0ad2dd0 {
  position: relative;
}

/*
 * Sizing
 */

._59a5c9ec {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

._3c1607ed {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

._6f4594fe {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

._16e62205 {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
}

._75a62294 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.faa2af0c {
  display: block;
  width: 100%;
}

._5dd05cd0 {
  display: block;
  height: 100%;
}

.cf98c946 {
  width: 100vw;
}

._0b11daa2 {
  height: 100vh;
}

._4a27537c {
  overflow-x: scroll;
}

._7cb1db83 {
  overflow-y: scroll;
}

/*
 * Visibility
 */

._1a33eaae {
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute;
}

._66f74d51 {
  display: none !important;
}

._5591b2cd {
  opacity: 0 !important;
  pointer-events: none !important;
}

._2cd86441 {
  -webkit-perspective: 100rem;
          perspective: 100rem;
}

/*
 * Font rendering
 */

.c92a1e9a {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

._55e00b8f {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Font styling
 */

/* Weights */

.edb57e31 {
  font-weight: 300;
}

._25d7df25 {
  font-weight: 400;
}

.abc8da28 {
  font-weight: 500;
}

._485ed646 {
  font-weight: 600;
}

/* Sizes */

._2a383064 {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
}

.f1ec7d6e {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
}

._58587070 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._51fab8c8 {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._0ea08504 {
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
}

._6c3572f4 {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 40px;
  line-height: 4rem;
}

._642e3acf {
  font-size: 48px;
  font-size: 4.8rem;
  line-height: 56px;
  line-height: 5.6rem;
}

.cda869ec {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 16px;
    line-height: 1.6rem;
  }

._5d9a54e5 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 20px;
    line-height: 2rem;
  }

.a7fcaf98 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

._16db7b10 {
    font-size: 20px;
    font-size: 2rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

.af778d03 {
    font-size: 26px;
    font-size: 2.6rem;
    line-height: 32px;
    line-height: 3.2rem;
  }

.ae387854 {
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 40px;
    line-height: 4rem;
  }

._4ab4917d {
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 56px;
    line-height: 5.6rem;
  }

@media (min-width: 45em) {
  .de449fed {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  .c56a4815 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  .e7c98c89 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  ._543c0454 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  ._27019905 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._70d0bdbf {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  ._955deafe {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

@media (min-width: 63.75em) {
  ._1ac0763b {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  ._1e08e9cf {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ._70c17b33 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  .ad284fa9 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  ._3ececa25 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  .b63d94bf {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  ._12b08f34 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

._449636e8 {
  line-height: 24px;
  line-height: 2.4rem;
}

._9547ac3d {
  line-height: 40px;
  line-height: 4rem;
}

.b320cd43 {
  line-height: 19px;
  line-height: 1.9rem;
}

.a5065812 {
  line-height: 13px;
  line-height: 1.3rem;
}

/* Text margins */

/* TODO: WFE-7446 put text margins to text.css file */

/* margin none rule needs to be before others as it needs to be overridden by them */

._36ba925c {
  margin: 0;
}

.d3d8992a {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

.e08480c9 {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

.fceffa6c {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.e508a996 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.f6117085 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._16421e4c {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.e7b7a81e {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

@media (min-width: 45em) {
  ._30e6038a {
    margin-bottom: 0.8rem;
  }
  .c210ad3f {
    margin-bottom: 0.8rem;
  }
  ._64ea4e66 {
    margin-bottom: 1.6rem;
  }
  ._8d175e08 {
    margin-bottom: 1.6rem;
  }
  .a34929e5 {
    margin-bottom: 1.6rem;
  }
  .cfb3f810 {
    margin-bottom: 1.6rem;
  }
  ._2b4da646 {
    margin-bottom: 1.6rem;
  }
}

@media (min-width: 63.75em) {
  ._3eea3af3 {
    margin-bottom: 0.8rem;
  }
  .bf6f4358 {
    margin-bottom: 0.8rem;
  }
  ._1303d5cf {
    margin-bottom: 1.6rem;
  }
  ._08d94ff8 {
    margin-bottom: 1.6rem;
  }
  .dae66bae {
    margin-bottom: 1.6rem;
  }
  ._1aa42f44 {
    margin-bottom: 1.6rem;
  }
  .ac56ea8d {
    margin-bottom: 1.6rem;
  }
}

.c09f1ccd {
  margin-left: 4px;
  margin-left: 0.4rem;
}

.be8c20b5 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

.c21d2cc1 {
  margin-left: 12px;
  margin-left: 1.2rem;
}

._776d9dc8 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._5dd5db2d {
  margin-left: auto;
}

.b502a717 {
  margin-right: 4px;
  margin-right: 0.4rem;
}

._381b3cf8 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._04b6952d {
  margin-right: 12px;
  margin-right: 1.2rem;
}

._4aab87f9 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

.ca7810c2 {
  margin-right: auto;
}

._679c2f89 {
}

/* Styles */

.f538a64b {
  font-style: italic;
}

._3c26c23e {
  text-transform: uppercase;
}

._0137a996 {
  text-transform: lowercase;
}

._6aeef5c1 {
  text-decoration: line-through;
}

._7d585a98 {
  white-space: nowrap;
}

._3096d12f {
  text-decoration: underline;
}

._7a38e59d {
  font-weight: 600 !important;
}

._101062d2 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/*
 * Truncation
 */

.b2f120de {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.bd5f3933 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

._3f44f70c {
  -webkit-line-clamp: 1;
}

.ade4c9f9 {
  -webkit-line-clamp: 2;
}

.b9f2c8cd {
  -webkit-line-clamp: 3;
}

.ce750f97 {
  -webkit-line-clamp: 4;
}

._267d11b3 {
  -webkit-line-clamp: 5;
}

.af7f98b1 {
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

.a83de8a5 {
  color: rgb(237, 237, 237);
}

/*
 * Color
 */

/* Text colors */

._9ff43847,
._4f416a87 {
  color: rgb(255, 102, 0);
}

.a19d89f4 {
  color: rgb(50, 60, 65);
}

.ebac5853 {
  color: rgb(111, 118, 122);
}

.abf849ef {
  color: rgb(255, 255, 255);
}

._60bdf0bd {
  color: rgb(91, 99, 103);
}

._62921e88 {
  color: rgb(208, 2, 27);
}

.fbfb5501 {
  color: rgb(166, 166, 166);
}

._686efb56 {
  color: inherit;
}

/* Background colors */

._8be9ebcd {
  background-color: white;
}

._8afecfed {
  background-color: rgb(242, 242, 242);
}

._55066164 {
  background-color: rgb(241, 239, 238);
}

._54cc237e {
  background-color: rgb(60, 60, 60);
}

._8824e4f0 {
  background-color: rgb(237, 234, 227);
}

._11189189 {
  background-color: rgb(202, 195, 187);
}

._02741c7b {
  background-color: rgb(250, 250, 248);
}

._824c2768 {
  background-color: rgb(242, 240, 238);
}

._94f0e19c {
  background-color: rgb(234, 235, 236);
}

/*
 * Drop shadow
 */

.f1962fee {
  -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
          box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
}

._46d885eb {
  -webkit-box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
          box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
}

.d41c92c6 {
  -webkit-box-shadow: none;
          box-shadow: none;
}

._63567c9f {
  padding-top: 16px !important;
  padding-top: 1.6rem !important;
}

._5df74ef2 {
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

._42b9ad28 {
  padding-top: 24px;
  padding-top: 2.4rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

.b6cbf468 {
  padding-left: 16px !important;
  padding-left: 1.6rem !important;
  padding-right: 16px !important;
  padding-right: 1.6rem !important;
}

._687cca5b {
  padding-top: 24px;
  padding-top: 2.4rem;
}

._539c9896 {
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

._1a70a0ab {
  padding-top: 4px;
  padding-top: 0.4rem;
}

._30b3dba9 {
  padding-left: 0 !important;
}

._1b962752 {
  padding-bottom: 0 !important;
}

._1b4e514b {
  padding: 0 !important;
}

._0d0947e1 {
  padding-left: 8px !important;
  padding-left: 0.8rem !important;
}

._8b6f3e29 {
  padding-right: 24px !important;
  padding-right: 2.4rem !important;
}

/*
 * Shaping
 */

.c335a690 {
  border-radius: 20rem;
}

.ab9256d1 {
  border-radius: 0.4rem;
}

/*
 * list
 */

._7711cd18 {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

._05183402 {
  text-decoration: none
}

._05183402:hover {
  text-decoration: underline;
}

.ce138dbb {
  text-decoration: underline
}

.ce138dbb:hover {
  text-decoration: none;
}

._20791992 {
  text-decoration: underline;
  -webkit-transition: color 200ms;
  transition: color 200ms
}

._20791992:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

.fc75354d {
  text-transform: none;
}

._85f50778 {
  border-top: 1px solid rgb(166, 166, 166);
  border-top: 0.1rem solid rgb(166, 166, 166);
}

.e31a4e1d {
  padding: 8px;
  padding: 0.8rem;
}

/*
 * Grid
 */

.c2d35a74 {
  padding-bottom: 40px;
  padding-bottom: 4rem;
}

._1b7ba029 {
  padding-bottom: 4px;
  padding-bottom: 0.4rem;
}

@media (max-width: 44.99em) {
  .c2d35a74 {
    padding-bottom: 2rem;
  }
}

.c2d35a74::after,
._1b7ba029::after {
  content: '';
  position: absolute;
  width: calc(100% - 1.8rem);
  height: 1px;
  height: 0.1rem;
  bottom: 0;
  right: 0;
  background: rgb(166, 166, 166);
  margin-left: 24px;
  margin-left: 2.4rem;
}

/*
 * Separators
 */

._699ee1e2 {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-top: 0.1rem solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  border-bottom: 0.1rem solid rgba(255, 255, 255, .3);
}

.c2540c3f {
  margin-top: 30px;
  margin-top: 3rem;
  margin-bottom: 30px;
  margin-bottom: 3rem;
}

._5c00047c {
  border-color: rgb(237, 237, 237) !important;
}

.bc859cfd {
  border-color: rgb(166, 166, 166) !important;
}

.ea5b7333 {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237)
}

.ea5b7333:first-child {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
}

._9cc567ac {
  border-bottom: 1px solid rgb(210, 210, 210);
  border-bottom: 0.1rem solid rgb(210, 210, 210)
}

._9cc567ac:first-child {
  border-top: 1px solid rgb(210, 210, 210);
  border-top: 0.1rem solid rgb(210, 210, 210);
}

.ec00c717 {
  border-bottom: 1px solid rgb(60, 60, 60);
  border-bottom: 0.1rem solid rgb(60, 60, 60)
}

.ec00c717:first-child {
  border-top: 1px solid rgb(60, 60, 60);
  border-top: 0.1rem solid rgb(60, 60, 60);
}

/*
 * https://webaim.org/techniques/css/invisiblecontent/
 * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_screen-reader.scss
 */

.f972ef73 {
  position: absolute;
  /* stylelint-disable */
  width: 1px;
  height: 1px;
  /* stylelint-enable */
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  border: 0;
}

/**
 * Remove native input clear button.
 * See https://github.com/necolas/normalize.css/commit/f7c98c4c859c15363763f10a439b63d85b9afba0#diff-bb3dde41d97f19be8ab7b4780a915d5e
 */

[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/**
 * Add outline to input boxes when in desktop view to avoid ios safari bug.
 */

.d400d368 {
  outline: none;
}

@media (min-width: 63.75em) {

  .d400d368:focus {
    outline: 0.4rem auto -webkit-focus-ring-color;
  }
}

._6b8331dc {
  pointer-events: none;
  cursor: not-allowed;
}

.e877e7f4 input[type='number'] {
  -moz-appearance: textfield
}

.e877e7f4 input[type='number']::-webkit-inner-spin-button,
  .e877e7f4 input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/**
 * Full width content, break out of grid
 */

._3b5835c1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (min-width: 63.75em) {

  ._3b5835c1 {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

.ff780eb6 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  .ff780eb6 {
    width: 140rem;
  }
}

.d608a282 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  .d608a282 {
    width: 100vw;
  }
}

/*
 * Margins
 */

.c62a1e0f {
  margin: 0 !important;
}

._1a80f64e {
  margin-top: 0 !important;
}

.b7521000 {
  margin-bottom: 0 !important;
}

._0faa1d61 {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
}

._9196f5c7 {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
}

._06b5028f {
  margin-top: 48px !important;
  margin-top: 4.8rem !important;
}

._0beef597 {
  margin-top: 64px !important;
  margin-top: 6.4rem !important;
}

._1ac1ea0a {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
}

._36fecd5c {
  margin-top: 4px !important;
  margin-top: 0.4rem !important;
}

.d27c13be {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
}

._3dd464d2 {
  margin-top: 20px !important;
  margin-top: 2rem !important;
}

._2c0d5cb5 {
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

._0a9c7e06 {
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

._86e70f69 {
  margin-bottom: 40px !important;
  margin-bottom: 4rem !important;
}

._8b011fa9 {
  margin-bottom: 48px !important;
  margin-bottom: 4.8rem !important;
}

.eaa901c9 {
  margin-bottom: 56px !important;
  margin-bottom: 5.6rem !important;
}

._4d1f8c2d {
  margin-bottom: 64px !important;
  margin-bottom: 6.4rem !important;
}

._41bcbad9 {
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

.a318e53d {
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

.ab0515ee {
  margin-bottom: 4px !important;
  margin-bottom: 0.4rem !important;
}

._2fa961a7 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

.da50eba6 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

.c545b1a8 {
  margin-right: 24px;
  margin-right: 2.4rem;
}

._6d593912 {
  margin-right: 32px;
  margin-right: 3.2rem;
}

._6fbdb659 {
  margin-left: 32px;
  margin-left: 3.2rem;
}

._545fd93c {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._940cae69 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

.c43f54ce {
  margin-left: 24px;
  margin-left: 2.4rem;
}

.c5ddc24e {
  margin-left: auto !important;
  margin-right: auto !important;
}

._6b87aa3f {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

._3058b937 {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

.c91a55ce {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

.d90d7632 {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

/* Font Face */

.edb57e31 {
  font-family: 'GoodHome-Light', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.abc8da28 {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._485ed646 {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.b5d164ef {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 32px;
  padding-bottom: 3.2rem;
}

._19bbd8e5 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._763feae8 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: rgb(237, 237, 237) 2px solid;
  border-top: rgb(237, 237, 237) 0.2rem solid;
  padding: 8px 0;
  padding: 0.8rem 0
}

._763feae8:last-child {
  border-bottom: rgb(237, 237, 237) 2px solid;
  border-bottom: rgb(237, 237, 237) 0.2rem solid;
}

._72b41a3f {
  width: 40px;
  width: 4rem;
  height: 40px;
  height: 4rem;
  margin-right: 8px;
  margin-right: 0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._313c8655 {
  display: none;
}

@media print {

  ._313c8655 {
    display: block;
  }
}

._9ead4817 {
  margin-top: 16px;
  margin-top: 1.6rem;
}

._724f33ce {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._1301c8f7 {
  width: 100%;
  margin: auto;
  background: rgb(255, 255, 255);
}

@media print {

  ._1301c8f7 {
    display: none;
  }
}

._07690c5c {
  position: relative;
  background: rgb(60, 60, 60);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

@media (min-width: 63.75em) {

  ._07690c5c {
    border-radius: 0.4rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.fc76bd9b {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
  width: 100%;
}

.fc76bd9b th,
  .fc76bd9b td {
    padding: 8px 0;
    padding: 0.8rem 0;
    font-size: inherit;
    line-height: inherit;
  }

@media (min-width: 45em) {

  .fc76bd9b {
    font-size: 1.6rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.fbb6fb55 {
  max-width: none;
  min-width: 248px;
  min-width: 24.8rem;
  min-height: 40px;
  min-height: 4rem
}

.fbb6fb55:focus {
  outline: -webkit-focus-ring-color auto 5px;
  outline: -webkit-focus-ring-color auto 0.5rem;
}

.fbb6fb55:active {
  outline: none;
}

.fbb6fb55:focus:active {
  outline: none;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

.cbef8a96 {
  margin: 0;
}

.cbef8a96 input,
  .cbef8a96 select {
    border-color: rgb(173, 177, 179)
  }

.cbef8a96 input:focus, .cbef8a96 select:focus {
  border-color: rgb(50, 60, 65);
}

.cbef8a96 label span {
      font-weight: 600;
      font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
      font-size: 16px;
      font-size: 1.6rem;
      margin: 0 0 8px;
      margin: 0 0 0.8rem;
    }

.cbef8a96 label span span {
        font-weight: 400;
        color: rgb(50, 60, 65);
      }

.cbef8a96 textarea {
    padding: 16px;
    padding: 1.6rem;
    color: rgb(50, 60, 65);
  }

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._4076d5cf._494c6e43 {
  border-radius: 0;
  position: relative;
  height: auto;
}

._1a24075f button {
  display: none;
}

._4076d5cf header button {
  height: 24px;
  height: 2.4rem;
}

.eec0d527 header button {
  height: auto;
}

._32586e99 {
  height: 96px;
  height: 9.6rem;
  background-color: rgb(255, 255, 255);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 24px 24px 24px
    40px;
  padding: 2.4rem 2.4rem 2.4rem
    4rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.ff6bd922 {
  border: 0;
  position: relative;
}

.c0c46181 {
  width: 100%;
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 6px;
  line-height: 0.6rem;
  padding-top: 24px;
  padding-top: 2.4rem;
  -ms-flex-item-align: center;
      align-self: center;
}

._4e8a4db8 {
  margin-left: 64px;
  margin-left: 6.4rem;
  margin-right: 24px;
  margin-right: 2.4rem;
  display: none;
}

@media (min-width: 45em) {

  ._4e8a4db8 {
    display: block;
  }
}

.b10db4be {
  padding: 0 40px 40px;
  padding: 0 4rem 4rem;
  margin: 0;
}

._4076d5cf._494c6e43 ._4baf3ffb {
  margin-top: 0;
}

._1a24075f {
  height: auto;
}

.eec0d527 {
  width: 100% !important;
  max-width: 1200px;
  max-width: 120rem;
  height: 100%;
}

._494c6e43._050f4499 {
  width: 728px;
  width: 72.8rem;
}

._494c6e43.e25177fe {
  padding: 24px 32px 24px
    40px;
  padding: 2.4rem 3.2rem 2.4rem
    4rem;
}

.eec0d527 .c0c46181 {
  width: 100%;
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  padding-top: 0;
}

._99683252 {
  padding: 0;
}

.b7852067 {
  height: 100%;
  overflow-y: auto;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.d3778618 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._9162a497 {
  fill: rgb(255, 102, 0);
}

._39accb7e {
  fill: rgb(255, 255, 255);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._1d6db6f2 {
  display: block;
}

._8c070b63 {
  list-style-type: none;
  margin: 0 0 32px 0;
  margin: 0 0 3.2rem 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (min-width: 45em) {

  ._8c070b63 {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

._9dbcc15c {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 64px;
      flex-basis: 64px;
  -ms-flex-preferred-size: 6.4rem;
      flex-basis: 6.4rem;
}

@media (min-width: 45em) {

  ._9dbcc15c {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

._9dbcc15c:not(:last-child) {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

@media (min-width: 45em) {

  ._9dbcc15c:not(:last-child) {
    margin-bottom: 0;
    margin-right: 0.8rem;
  }
}

.f6d7ac6b {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 16px;
  padding: 0 1.6rem;
  width: 100%;
  background-color: rgb(255, 255, 255);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
          box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

@media (min-width: 45em) {

  .f6d7ac6b {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding: 0.8rem 0.8rem 2.4rem;
    margin-bottom: 0.8rem;
    width: 11.6rem;
    height: 12rem;
  }
}

.f6d7ac6b:hover:not(._1878a47b) {
  background-color: rgb(239, 240, 240);
}

._1878a47b {
  background-color: rgb(50, 60, 65);
  color: rgb(255, 255, 255);
  -webkit-box-shadow: none;
          box-shadow: none;
}

@media (min-width: 45em) {

  ._825fc99b {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}

._8661785d {
  width: 42px;
  width: 4.2rem;
  height: auto;
  margin-right: 12px;
  margin-right: 1.2rem;
}

@media (min-width: 45em) {

  ._8661785d {
    width: 6.4rem;
    margin-right: 0;
  }
}

.ee807463 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (min-width: 45em) {

  .ee807463 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0 0.8rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._49ba8e67 {
  margin-bottom: 32px;
  margin-bottom: 3.2rem;
}

._82060f1a {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.c062f8ae {
  text-align: center;
}

.baff9ead {
  position: relative;
  -webkit-transform: none;
          transform: none;
  left: auto;
  top: 0;
  margin-bottom: 40px;
  margin-bottom: 4rem;
  min-height: 240px;
  min-height: 24rem;
}

.a3de88d1 {
  margin-bottom: 32px;
  margin-bottom: 3.2rem;
}

._6dc2f30a {
  max-width: 600px;
  max-width: 60rem;
}

.b7dd3a18 {
  max-width: none;
  min-width: 250px;
  min-width: 25rem;
  min-height: 40px;
  min-height: 4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._37121c31 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  min-height: 24px;
  min-height: 2.4rem;
  padding: 8px;
  padding: 0.8rem;
  border: 1px solid rgb(173, 177, 179);
  border: 0.1rem solid rgb(173, 177, 179);
}

._053b38a2 {
  background-color: rgb(228, 225, 221);
  border-bottom: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.b8857267 {
  border-top: none;
}

._9fd24ae1 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgb(228, 225, 221);
}

/*
  TableSpacer is used to visually separate sequential tables from each other as the
  elements returned in the JSX from the table components to the DynamicPage component
  cannot be wrapped in a parent element otherwise they will not split across pages 
*/

._720a2e49 {
  height: 24px;
  height: 2.4rem;
}

/*
  TableHorizontalBorder is used to create the appearance that the first table row which
  has been split onto a new page has a top border.
*/

.e6299652 {
  height: 1px;
  height: 0.1rem;
  position: absolute;
  width: 100%;
  background-color: rgb(171, 171, 171);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/*
  Root width values for table cells have been calculated by eye
  from designs. These components are primarily intended to be printed.
*/

.eedacae3 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.ab9b3f1b {
  width: 40px;
  width: 4rem;
  text-align: center;
}

._26c3f783 {
  width: 160px;
  width: 16rem;
  text-align: right;
}

/*
  Root width values for image width has been calculated by eye
  from designs. This component is primarily intended to be printed.
*/

._0a73739d {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 80px;
  width: 8rem;
  height: 80px;
  height: 8rem;
}

._0a73739d img {
    width: 80px;
    width: 8rem;
    height: 80px;
    height: 8rem;
  }

._0a953530 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-left: 16px;
  margin-left: 1.6rem;
}

._26525207 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-align: left;
}

.b0f2d673 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

.cf37a322 {
  width: 40px;
  width: 4rem;
  text-align: center;
}

.ac4d01c5 {
  width: 160px;
  width: 16rem;
  text-align: right;
}

._367e0cca {
  color: rgb(111, 118, 122);
}

._24a0ce2e {
  font-size: 60%;
}

._1c871e2a {
  line-height: 0;
  font-size: 60%;
  vertical-align: 0.45em;
}

/*
  Root width values for table cells have been calculated by eye
  from designs. These components are primarily intended to be printed.
*/

._113f27eb {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

._4d47e91b {
  width: 40px;
  width: 4rem;
  text-align: center;
}

._2ae387d4 {
  width: 160px;
  width: 16rem;
  text-align: right;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
  Root width values for table cells have been calculated by eye
  from designs. These components are primarily intended to be printed.
*/

.b38b6f10 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.a8c10896 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.bac10043 {
  text-align: right;
  width: 40px;
  width: 4rem;
}

._5d78f379 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 120px;
  width: 12rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.fd79c978 {
  margin-right: 32px;
  margin-right: 3.2rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.a037870e {
  padding-left: 16px;
  padding-left: 1.6rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.f0c343b0 {
  margin-right: 24px;
  margin-right: 2.4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._480c4f2a {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

.df962da2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}

._1a2596cb {
  margin-top: 8px;
  margin-top: 0.8rem;
  border-top: solid 1px rgb(50, 60, 65);
  border-top: solid 0.1rem rgb(50, 60, 65);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._6952aaff {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  min-height: 16px;
  min-height: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._4f56fd0c {
  margin-top: 24px;
  margin-top: 2.4rem;
}

._70119220 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ba8d1557 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  border-top: solid 1px rgb(50, 60, 65);
  border-top: solid 0.1rem rgb(50, 60, 65);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

.dee4091a {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

._5cf5bff5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: rgb(242, 240, 238);
  padding: 16px;
  padding: 1.6rem;
}

.e8790307 {
  display: grid;
  grid-gap: 1.6rem;
}

.e8790307 img {
    width: 100%;
  }

._5b6648d9 {
  border-top: 1px solid black;
  border-top: 0.1rem solid black;
}

._10bf560e {
  margin: 0;
  display: inline-block;
}

._1103adf3 {
  font-family: 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._135193e0 {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  margin-left: 4px;
  margin-left: 0.4rem;
}

._3ba8e95b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ee6c1017 {
  width: 100%;
  margin-left: 8px;
  margin-left: 0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._53fa818f {
  width: 100%;
  display: grid;
  grid-gap: 1.6rem;
  grid-template-columns: 1fr 1fr;
}

._53fa818f img {
    border: 2px rgb(171, 171, 171) solid;
    border: 0.2rem rgb(171, 171, 171) solid;
  }

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

/* --a4-height is 296mm because 297mm causes alternating blank pages in print view */

body {
  margin: 0;
  -webkit-print-color-adjust: exact;
  font-size: 62.5%;
}

._2233bdad {
  width: 100%;
  font-family: 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
}

._1436171d {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
  padding: 10mm;
  height: 296mm;
  width: 210mm;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  page-break-after: always;
  overflow: hidden;
}

._4d75f729 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  min-height: 0;
  position: relative;
}

._9e1b6319 {
  position: absolute;
  width: 100%;
}

._5dce7bfb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
}

._5dce7bfb img {
    width: 100%;
  }

@media screen {
  ._1436171d {
    margin: 2rem auto;
    border: 0.2rem rgb(171, 171, 171) solid;
  }
}

@page {
  margin: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

/* --a4-height is 296mm because 297mm causes alternating blank pages in print view */

body {
  margin: 0;
  -webkit-print-color-adjust: exact;
  font-size: 62.5%;
}

.d267f76d {
  width: 100%;
  font-family: 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
}

.ce8be627 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
  padding: 10mm;
  height: 296mm;
  width: 210mm;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  page-break-after: always;
  overflow: hidden;
}

._857eaf86 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  min-height: 0;
  position: relative;
}

._90e39d6b {
  position: absolute;
  width: 100%;
}

.b6eb63b7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
}

.b6eb63b7 img {
    width: 100%;
  }

@media screen {
  .ce8be627 {
    margin: 2rem auto;
    border: 0.2rem rgb(171, 171, 171) solid;
  }
}

@page {
  margin: 0;
}

._0234b842 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

.d05baa3d {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._31a46c0f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._6944a5aa {
  display: none;
}

.ebff92e3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 20px;
  height: 2rem;
  width: 20px;
  width: 2rem;
  border: rgb(50, 60, 65) 2px solid;
  border: rgb(50, 60, 65) 0.2rem solid;
  border-radius: 10rem;
  cursor: pointer;
}

.ba399b75 {
  height: 10px;
  height: 1rem;
  width: 10px;
  width: 1rem;
  background-color: rgb(50, 60, 65);
  border-radius: 10rem;
}

.fc3da80b {
  margin-left: 10px;
  margin-left: 1rem;
  margin-right: 24px;
  margin-right: 2.4rem;
}

.ebdb0b76 {
  opacity: 0.3;
}

.ebdb0b76 .ebff92e3 {
    cursor: auto;
    cursor: initial;
  }

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.b086f1c7 {
  background-color: rgb(255, 255, 255);
  padding: 16px;
  padding: 1.6rem;
}

.b086f1c7 > *:last-child {
    margin-bottom: 0;
  }

.b086f1c7:not(:last-child) {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.e70c743e {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

.a551859a {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._19f5256d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._0247d61a {
  background-color: rgb(208, 2, 27);
  color: rgb(255, 255, 255);
}

._5121984c {
  margin-right: 10px;
  margin-right: 1rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._017ab950 {
  position: relative;
}

._0cf5021e {
  background-color: rgb(241, 239, 238);
  padding: 8px;
  padding: 0.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

.bcf2fa36 {
  cursor: pointer;
}

._53d508d1 {
  background-color: rgb(241, 239, 238);
  position: absolute;
  right: 16px;
  right: 1.6rem;
  top: 16px;
  top: 1.6rem;
  padding: 4px 8px;
  padding: 0.4rem 0.8rem;
}

.bcc4b30a {
  width: 7px;
  width: 0.7rem;
  height: 7px;
  height: 0.7rem;
  background-color: rgb(241, 239, 238);
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translate(-50%, 50%) rotateZ(45deg);
          transform: translate(-50%, 50%) rotateZ(45deg);
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._1c6f75d9 {
  background-color: rgb(251, 230, 229);
}

._2a536dee {
  background-color: rgb(254, 245, 228);
}

._818db252 {
  list-style: none;
  padding: 0;
}

._339a20de {
  margin-right: 10px;
  margin-right: 1rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._147c5cea {
  text-align: right;
}

@media (min-width: 63.75em) {

  ._147c5cea {
    margin: 2.4rem 0 0 0;
  }
}

.cacf5f45 {
  max-height: 40px;
  max-height: 4rem;
  border: 2px solid rgb(50, 60, 65);
  border: 0.2rem solid rgb(50, 60, 65);
  background-color: transparent;
  margin: 0 0 32px 16px;
  margin: 0 0 3.2rem 1.6rem;
}

@media (max-width: 44.99em) {

  .cacf5f45 {
    width: 100%;
    margin: 0 0 3.2rem 0;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

._34c5a0df {
  width: 100%;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  padding: 16px 0;
  padding: 1.6rem 0;
}

@media (min-width: 45em) {

  ._34c5a0df {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0;
  }
}

._36f17f47 {
  display: inline-block;
  margin-right: 8px;
  margin-right: 0.8rem;
  margin-bottom: -4px;
  margin-bottom: -0.4rem;
}

.f5ce632a {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) {

  .f5ce632a {
    font-size: 2rem;
    margin-bottom: 0;
  }
}

._79701a41 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  font-size: 1.4rem;
}

@media (min-width: 45em) {

  ._79701a41 {
    font-size: 1.4rem;
  }
}

.f610c4df {
  margin-right: 16px;
  margin-right: 1.6rem;
  width: 144px;
  width: 14.4rem;
}

@media (min-width: 45em) {

  .f610c4df {
    width: 14.4rem;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._597179e0 {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

  /*
    Bless me, Father, for I have sinned.

    This "beautiful" hack is required because onFocus gets called before onClick
    And there is absolutely no way to differentiate between onFocus caused by an
    onClick and one caused by any other method, like tabs

    What this does is delay by 0.1s the outline property styling from .HeaderFocus
    Just enough so that the onClick method is called and sets the "isFocused" back to false
  */
  -webkit-transition: outline 0.0001s ease-in;
  transition: outline 0.0001s ease-in;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

._597179e0._1a1bae84 {
  outline: rgba(0, 103, 244, .247) auto 4px;
  outline: rgba(0, 103, 244, .247) auto 0.4rem;
}

.f319af68 {
  -webkit-animation: eabbf6b1 0.3s ease-in-out;
          animation: eabbf6b1 0.3s ease-in-out;
  opacity: 1;
}

.f319af68[hidden] {
  opacity: 0;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.ecfa98b5 {
  color: rgb(50, 60, 65);
  background-color: rgb(242, 240, 238);
}

._39087aea {
  min-height: 88px;
  min-height: 8.8rem;
  background-color: rgb(228, 225, 221);
  padding: 0 48px;
  padding: 0 4.8rem;
}

.d85f0bf2 {
  margin: 40px 48px;
  margin: 4rem 4.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._8194a4cb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 24px 0;
  padding: 2.4rem 0;
  border-bottom: 1px solid rgb(224, 224, 224);
  border-bottom: 0.1rem solid rgb(224, 224, 224);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column
}

._8194a4cb:last-of-type {
  border-bottom: 0;
}

@media (min-width: 45em) {

  ._8194a4cb {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.ff400b81 {
  -webkit-box-flex: 15;
      -ms-flex-positive: 15;
          flex-grow: 15;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media (min-width: 45em) {

  .ff400b81 {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}

.ac0fa57c {
  width: 100%;
  max-width: 200px;
  max-width: 20rem;
  height: 200px;
  height: 20rem;
}

.ac0fa57c img {
    width: 100%;
  }

@media (min-width: 45em) {

  .ac0fa57c {
    margin-right: 3.2rem;
    width: 10rem;
    height: 10rem;
  }

  .ac0fa57c img {
      width: 100px;
      width: 10rem;
  }
}

.bd7740c2 {
  color: rgb(111, 118, 122);
}

.f09b492d {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media (min-width: 45em) {

  .f09b492d {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

._70a17850 {
  font-weight: normal;
}

@media (min-width: 45em) {

  ._70a17850 {
    display: none;
  }
}

.ea82da8c {
  text-align: right;
}

@media (min-width: 45em) {

  .ea82da8c {
    margin-right: 4rem;
    margin-left: 2.4rem;
  }
}

.bce9a331 {
  text-align: right;
  width: 144px;
  width: 14.4rem;
}

@media (min-width: 45em) {

  .bce9a331 {
    text-align: left;
    margin-right: 4rem;
  }
}

._501b8e51 {
  margin-top: 4px;
  margin-top: 0.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.a9c08c2e h4,
.a9c08c2e p,
.a9c08c2e span {
  color: rgb(214, 216, 217);
}

.bdd8b468 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 24px;
  line-height: 2.4rem;
  position: relative;
  top: -4px;
  top: -0.4rem;
  margin-left: 2px;
  margin-left: 0.2rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

._8399fa7a {
  background-color: rgb(255, 255, 255);
}

._421edced {
  background-color: rgb(228, 225, 221);
  padding: 0 32px;
  padding: 0 3.2rem;
}

._5851092b {
  margin: 0;
  padding: 0 32px;
  padding: 0 3.2rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

.d39846f6 {
  padding: 32px;
  padding: 3.2rem;
}

@media (min-width: 63.75em) {

  .f805ee7e {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}

.cf822117 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.bab38632 {
  width: 100%;
  overflow-y: auto;
}

._4eb16357 > div:not(:last-child) {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.b32d70db {
  top: 0 !important;
}

.eebc082d {
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  margin: 24px auto 16px 0;
  margin: 2.4rem auto 1.6rem 0;
}

._95aa0c9c {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  ._95aa0c9c {
    width: 28rem;
    margin-left: 3.2rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.c76369a6 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._597974ab {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

._597974ab span:first-of-type {
    margin-right: 7px;
    margin-right: 0.7rem;
  }

.e70f131d {
  max-height: 40px;
  max-height: 4rem;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 102, 0);
  margin: 0 0 16px 0;
  margin: 0 0 1.6rem 0;
}

@media (max-width: 44.99em) {

  .e70f131d {
    width: 100%;
    margin: 0 0 1.6rem 0;
    min-width: 0;
    min-width: initial;
  }
}

/*
 * z-index
 */

.ae9b4753 {
  z-index: 1;
}

._1b3e961b {
  z-index: 80;
}

._1f85e5e9 {
  z-index: 80;
}

.a20cdd8b {
  z-index: 90;
}

._615b601d {
  z-index: 115;
}

.adb53e4f {
  z-index: 1000;
}

.c6702df7 {
  z-index: 1100;
}

._0100b3ee {
  z-index: 10000;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.f4f6dc00 {
  background-color: rgb(237, 237, 237);
  border: 1px solid rgb(166, 166, 166);
  border: 0.1rem solid rgb(166, 166, 166);
  position: fixed;
  border-radius: 0.1rem;
  z-index: 10000;
  bottom: 0;
  right: 0;
  padding: 16px;
  padding: 1.6rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root { /* Needed for iOS9 flexboxes */ /* Needed for iOS9 flexboxes */
}

.dc0d1930 {
  background: rgb(255, 255, 255);
}

._757d21b4 {
  background: rgb(234, 235, 236);
}

.ca6572c9 {
}

._741ce818 {
  min-width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 100%;
          flex: 1 0 100%; /* https://github.com/philipwalton/flexbugs#flexbug-11 */
  padding: 0;
}

@media (min-width: 45em) {
  ._741ce818 {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 25%;
            flex: 1 0 25%; /* iOS9 flexbox fix */
    min-width: 20.8rem;
    padding-right: 2.4rem;
  }
}

@media (min-width: 63.75em) {
  ._741ce818 {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1 1;
  }
}

._83168d60 {
  color: rgb(50, 60, 65);
  font-weight: bold;
  text-transform: none;
  font-size: 16px;
  font-size: 1.6rem;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

.d4d3e858 {
  list-style: none;
  padding: 0;
  padding-top: 4px;
  padding-top: 0.4rem;
  max-width: 322px;
  max-width: 32.2rem;
}

@media (min-width: 25.5em) {
  .d4d3e858 {
    max-width: 13.8rem;
  }
}

@media (min-width: 25.5em) {
  .dacfb9fd {
    max-width: 18.4rem;
  }
}

._6633227f {
  padding: 0 6px 6px 0;
  padding: 0 0.6rem 0.6rem 0;
}

._92833870 {
  width: 40px;
  width: 4rem;
  height: 24px;
  height: 2.4rem;
}

.af07fbca {
  display: inline;
  white-space: nowrap;
}

@media (min-width: 45em) {
  .af07fbca {
    display: block;
  }
}

.e667e714 {
  padding-top: 8px;
  padding-top: 0.8rem;
}

._0c21d6d2 {
  margin: 0 16px;
  margin: 0 1.6rem;
}

._20d1bd69 {
  background: rgb(50, 60, 65);
}

.e44db7eb {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._732f19ef {
  width: 100%;
}

@media (min-width: 63.75em) and (min-width: 45em) {

  ._732f19ef {
    width: auto;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root { /* Needed for iOS9 flexboxes */
}

.e0eafacb {
  background: rgb(255, 255, 255);
}

.cd0c7765 {
  background: rgb(234, 235, 236);
}

._66db7eed {
  text-align: center;
}

._66db7eed + ._66db7eed {
  border-top: 1px solid rgb(214, 216, 217);
  border-top: 0.1rem solid rgb(214, 216, 217);
}

.e9083b26 {
  color: rgb(50, 60, 65);
  font-weight: bold;
  text-transform: none;
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._203abc43 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 16px 0;
  margin: 1.6rem 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._20e60276 {
  list-style: none;
  padding: 0;
  margin: auto 0;
}

._98797765 {
  padding: 0 6px 6px 0;
  padding: 0 0.6rem 0.6rem 0;
}

._4996ae41 {
  width: 40px;
  width: 4rem;
  height: 24px;
  height: 2.4rem;
}

._3dd6caed {
  display: inline;
  white-space: nowrap;
}

._07154eaa {
  padding-top: 8px;
  padding-top: 0.8rem;
}

.d5339fe9 {
  background: rgb(50, 60, 65);
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

._7d76427a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

._321f11b5 {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._9abc651c {
  width: 76px;
  width: 7.6rem;
  height: 24px;
  height: 2.4rem;
}

._49821284 {
  margin: 0 16px;
  margin: 0 1.6rem;
}

.e351c8c9 {
  width: 107px;
  width: 10.7rem;
  height: 15px;
  height: 1.5rem;
}

._6f01af97 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

/*
 * z-index
 */

._777b3743 {
  z-index: 1;
}

._9d9de462 {
  z-index: 80;
}

.c509b308 {
  z-index: 80;
}

._124d383e {
  z-index: 90;
}

.ea9c8e8b {
  z-index: 115;
}

._32ff9a3c {
  z-index: 1000;
}

._086303a7 {
  z-index: 1100;
}

.fd53eaa0 {
  z-index: 10000;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._4f9c7dbe {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 80px;
  height: 8rem;
  padding: 0 16px;
  padding: 0 1.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: rgb(237, 237, 237);
  z-index: 10000;
}

._4f9c7dbe a {
    padding-left: 1ch;
  }

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/*
 * z-index
 */

.d893ce5d {
  z-index: 1;
}

.f882a646 {
  z-index: 80;
}

._14e3f6a3 {
  z-index: 80;
}

._499b2019 {
  z-index: 90;
}

._5dc944b2 {
  z-index: 115;
}

.f0f65f93 {
  z-index: 1000;
}

._9389b104 {
  z-index: 1100;
}

._8661b312 {
  z-index: 10000;
}

._42523aea {
  background: rgb(70, 79, 84);
}

._7a1608a1 {
  max-width: 1336px;
  max-width: 133.6rem;
  list-style: none;
}

.fe78be23 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}

.ed0df81e {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 100%;
  background-color: rgb(255, 255, 255);
  left: 0;
  width: 100%;
  padding-top: 24px;
  padding-top: 2.4rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
  visibility: hidden;
  opacity: 0;
  -webkit-transition-property: visibility, opacity;
  transition-property: visibility, opacity;
  -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
  border-top: 0 solid
    rgb(255, 255, 255);
}

.dd774155,
.a6ca5ff3 {
  padding: 0;
  text-transform: none;
}

.a72f6a91 {
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
}

._30ff2f6b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-flex-preferred-size: 112px;
      flex-basis: 112px;
  -ms-flex-preferred-size: 11.2rem;
      flex-basis: 11.2rem;
  -webkit-transition: background-color 200ms;
  transition: background-color 200ms;
  color: rgb(255, 255, 255)
}

._30ff2f6b:hover {
  background-color: rgb(255, 255, 255);
  color: rgb(50, 60, 65);
}

._30ff2f6b:hover > .ed0df81e {
  visibility: visible;
  opacity: 1;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  z-index: 110;
}

._3472b42d {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between
}

._3472b42d > ._30ff2f6b {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

._5f559bf8 {
  display: block;
  padding: 12px 8px;
  padding: 1.2rem 0.8rem;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  color: inherit;
  -webkit-transition: color 200ms;
  transition: color 200ms;
  cursor: pointer
}

._5f559bf8:focus {
  outline: none;
}

._88a972ee {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-flex-preferred-size: 20%;
      flex-basis: 20%;
  padding-left: 24px;
  padding-left: 2.4rem
}

._88a972ee:first-child {
  margin-left: -24px;
  margin-left: -2.4rem;
}

._9e151e55 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  color: rgb(50, 60, 65)
}

._9e151e55:hover {
  text-decoration: underline;
}

._2ae1420b {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  color: rgb(50, 60, 65)
}

._2ae1420b:hover {
  color: rgb(50, 60, 65);
  text-decoration: underline;
}

._2ae1420b ._43ba2ed1:last-child & {
  margin-bottom: 0;
}

._74724c2c {
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.d0188c9a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 4px 16px;
  padding: 0.4rem 1.6rem;
  -webkit-transition: background 100ms;
  transition: background 100ms;
  font-size: 16px;
  font-size: 1.6rem;
  color: rgb(50, 60, 65);
  text-decoration: none;
  cursor: pointer
}

.d0188c9a.bbcc092e,
  .d0188c9a:focus-visible,
  .d0188c9a:hover {
  background: rgba(0, 0, 0, .1);
  outline: none;
}

._97781b87,
.f11b0e2a {
  width: 40px;
  width: 4rem;
  height: 40px;
  height: 4rem;
}

.ae0fa27b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 16px;
  padding: 0 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._2eea967c {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  background: rgb(255, 255, 255);
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
  padding-top: 0;
  list-style: none;
  -webkit-box-flex: 5;
      -ms-flex-positive: 5;
          flex-grow: 5;
}

._2eea967c li {
    list-style: none;
  }

@media (min-width: 63.75em) {

  ._2eea967c {
    padding-top: 0;
  }
}

.b027dffc {
  padding: 0;
  margin: 0;
}

.c6118a84:last-of-type {
  padding: 0;
}

._4f483227 {
  text-transform: uppercase;
  color: rgb(111, 118, 122);
  padding: 0 16px;
  padding: 0 1.6rem;
}

@media (min-width: 63.75em) {

  ._4f483227 {
    padding-top: 0.8rem;
    display: block;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._07a4436c {
  padding-bottom: 12px;
  padding-bottom: 1.2rem;
  font-size: 14px;
  font-size: 1.4rem;
  color: rgb(111, 118, 122);
  text-decoration: none;
  cursor: pointer;
  display: block;
  padding: 8px 48px;
  padding: 0.8rem 4.8rem;
  -webkit-transition: background 100ms;
  transition: background 100ms
}

._07a4436c.f25c5c55,
  ._07a4436c:focus-visible,
  ._07a4436c:hover {
  background: rgba(0, 0, 0, .1);
  outline: none;
}

._9f3aff58 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  background: rgb(255, 255, 255);
  padding: 0;
  list-style: none;
  text-decoration: none;
  color: rgb(60, 60, 60);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

@media (min-width: 63.75em) {

  ._9f3aff58 {
    max-width: 63.75rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.f2e5d7ac {
  padding-bottom: 12px;
  padding-bottom: 1.2rem
}

.f2e5d7ac > a {
  font-size: 16px;
  font-size: 1.6rem;
  color: rgb(60, 60, 60);
  text-decoration: none;
  cursor: pointer;
  display: block;
}

.f2e5d7ac:last-of-type {
  padding: 0;
}

.bda8f644 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  background: rgb(255, 255, 255);
  padding: 16px;
  padding: 1.6rem;
  list-style: none;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  border: 1px solid rgb(166, 166, 166);
  border: 0.1rem solid rgb(166, 166, 166);
}

.e6397749 {
  border: 0;
}

@media (min-width: 63.75em) {

  .e6397749 {
    border: 1px solid rgb(173, 177, 179);
  }
}

.e6397749 .bda8f644 {
  padding: 20px 0;
  padding: 2rem 0;
  border: 0;
}

@media (min-width: 63.75em) {

  .e6397749 .bda8f644 {
    max-width: 63.75rem;
  }
}

.e6397749 .bda8f644 ._0c4216df {
      padding: 8px 16px;
      padding: 0.8rem 1.6rem;
      -webkit-transition: background 100ms;
      transition: background 100ms;
}

.e6397749 .bda8f644 ._0c4216df._2084a771,
      .e6397749 .bda8f644 ._0c4216df:focus-visible,
      .e6397749 .bda8f644 ._0c4216df:hover {
  background: rgba(0, 0, 0, .1);
  outline: none;
}

.e6397749 .bda8f644 .f2e5d7ac {
      padding: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/* Syte Camera Icon */

._1c5eae7b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgb(242, 242, 242);
  padding: 0 16px;
  padding: 0 1.6rem;
}

.ccf55e69 {
  position: absolute;
  background: rgb(255, 255, 255);
  top: 77px;
  right: -35px;
  border-bottom: 6px solid rgb(255, 102, 0);
  padding: 16px;
  padding: 1.6rem;
  -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
          box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
  width: 250px
}

.ccf55e69::after {
  content: '';
  position: absolute;
  top: -12px;
  right: 52px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 12px 10px;
  border-color: transparent transparent rgb(255, 255, 255) transparent;
}

.ccf55e69::before {
  content: '';
  position: absolute;
  top: -13px;
  right: 52px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 12px 10px;
  border-color: transparent transparent rgb(224, 224, 224) transparent;
}

._8bbfb7b8 {
  position: absolute;
  top: 8px;
  top: 0.8rem;
  right: 8px;
  right: 0.8rem;
  cursor: pointer;
}

._52525410 {
  margin: 0 0 4px 0;
  margin: 0 0 0.4rem 0;
  font-size: 20px;
  font-size: 2rem;
}

._803e0ce8 {
  margin: 0;
  color: rgb(153, 153, 153);
  font-size: 16px;
  font-size: 1.6rem;
}

@media (min-width: 63.75em) {

  ._803e0ce8 {
    font-size: 1.4rem;
  }
}

/* Syte ShopSimilar Icon */

._363eea42 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  padding: 16px 0;
  padding: 1.6rem 0;
}

._25c0599a {
  margin-bottom: 0;
  padding-left: 8px;
  padding-left: 0.8rem;
}

._7d1f63b7 {
  padding-bottom: 64px;
  padding-bottom: 6.4rem;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._7d1f63b7 {
    padding-bottom: 3.2rem;
  }
}

@media (max-width: 44.99em) {

  ._7d1f63b7 {
    padding-bottom: 1.6rem;
  }
}

/*
 * z-index
 */

._324888cb {
  z-index: 1;
}

._2fbbed64 {
  z-index: 80;
}

.fd32d948 {
  z-index: 80;
}

.e312d623 {
  z-index: 90;
}

.de9aac9b {
  z-index: 115;
}

.ba728b2b {
  z-index: 1000;
}

._07679918 {
  z-index: 1100;
}

._037319c3 {
  z-index: 10000;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._0653bcb8 {
  position: relative;
  -webkit-transition: -webkit-transform 200ms ease-in;
  transition: -webkit-transform 200ms ease-in;
  transition: transform 200ms ease-in;
  transition: transform 200ms ease-in, -webkit-transform 200ms ease-in;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

@media (min-width: 63.75em) {

  ._0653bcb8 {
    max-width: 63.75rem;
  }
}

._226f8f32 {
  background-color: rgb(255, 102, 0);
  border-bottom-right-radius: 4px;
  border-bottom-right-radius: 0.4rem;
  border-top-right-radius: 4px;
  border-top-right-radius: 0.4rem;
  padding: 8px;
  padding: 0.8rem;
  border: none;
}

@media (min-width: 63.75em) {

  ._226f8f32 {
    background-color: rgb(255, 255, 255);
    padding: 0 1.2rem;
    border-radius: 0;
  }
}

._269db3e6 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._5c3eaec7 svg {
    fill: rgb(255, 255, 255);
  }

@media (min-width: 63.75em) {

  ._5c3eaec7 svg {
    fill: rgb(50, 60, 65);
  }
}

.baa3f1b7 {
  position: absolute;
  top: 0;
  right: 0;
  width: 75px;
  width: 7.5rem;
  height: 100%
}

.baa3f1b7:focus {
  outline: none;
}

._7fcc3b8e {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  z-index: 80;
  -webkit-transition: margin-right 200ms ease-in;
  transition: margin-right 200ms ease-in;
}

@media (min-width: 63.75em) {

  ._7fcc3b8e {
    border: 0.1rem solid transparent;
    background-color: rgb(255, 255, 255);
  }
}

._2d96d9b3 ._7fcc3b8e {
    margin-right: 75px;
    margin-right: 7.5rem;
  }

@media (min-width: 63.75em) {

  ._2d96d9b3 ._7fcc3b8e {
      margin-right: 0;
  }
}

._6ad1b6b1 {
  border: 0 solid transparent;
  border-right: 0;
  border-radius: 0 0 0 0;
}

._6ad1b6b1 input {
    background-color: rgb(255, 255, 255);
    border-bottom-right-radius: 0;
    border-top-right-radius: 0
  }

._6ad1b6b1 input:focus {
  outline: none;
    -webkit-box-shadow: 0 0 0.2rem 0.1rem rgb(255, 255, 255) inset;
            box-shadow: 0 0 0.2rem 0.1rem rgb(255, 255, 255) inset;
}

@media (min-width: 63.75em) {

  ._6ad1b6b1 input {/*
 to meet the 48px height in designs
 */
    padding-top: 12.5px;
    padding-top: 1.25rem;
    padding-bottom: 12.5px;
    padding-bottom: 1.25rem;
    padding-left: 16px;
    padding-left: 1.6rem;
    border-radius: 0;
  }
}

@media (min-width: 63.75em) {

  ._6ad1b6b1 {
    border: 0;
  }
}

/*
 * z-index
 */

._0bfa1df8 {
  z-index: 1;
}

._6d040f06 {
  z-index: 80;
}

._773b2b8b {
  z-index: 80;
}

.d5b7dd68 {
  z-index: 90;
}

.e29fa368 {
  z-index: 115;
}

.d064bd35 {
  z-index: 1000;
}

._0c04ed18 {
  z-index: 1100;
}

.b753ba32 {
  z-index: 10000;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media print {
  * {
    -webkit-print-color-adjust: exact;
  }

  header,
  footer,
  ._4ac34f6f,
  div._253a1e40 {
    display: none;
    visibility: hidden;
  }

  ._2fc8a06f {
    display: none;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/* Header Base */

._2de2955e {
  z-index: 80;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  color: rgb(255, 255, 255);

  /* TODO we don't polyfill these, will need to revisit if ever used on Android */
  position: sticky;
}

@media (min-width: 63.75em) {

  ._2de2955e {
    position: relative;
  }
}

.dfc3072b {
  background: rgb(50, 60, 65);
}

/* Navigation */

.ab4033fc {
  z-index: 115;
  position: relative;
  color: rgb(255, 255, 255);
  background: rgb(50, 60, 65);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 44.99em) {

  .ab4033fc {
    padding: 0.8rem;
  }
}

@media (min-width: 45em) {

  .ab4033fc {
  }
}

@media (min-width: 63.75em) {

  .ab4033fc {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding: 1.6rem 3.2rem;
  }
}

.e5623a89 i {
  width: 24px;
  width: 2.4rem;
  height: 24px;
  height: 2.4rem;
}

._7d59663c {
  position: relative;
}

@media (min-width: 63.75em) {

  ._7d59663c {
    margin-right: 2.4rem;
  }
}

._7d59663c:hover {
  color: rgb(255, 255, 255);
}

._4e8413c0 {
  /* flex reordering means we can't use last-child etc */
}

@media (min-width: 63.75em) {

  ._4e8413c0 {
    margin-right: 0;
  }
}

.f900efba {
  -webkit-box-ordinal-group: 6;
      -ms-flex-order: 5;
          order: 5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  .f900efba {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-right: 1.6rem;
  }
}

@media (min-width: 73.75em) {

  .f900efba {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }
}

._6cfd4321 {
  -webkit-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
}

@media (min-width: 73.75em) {

  ._6cfd4321 {
    display: none;
  }
}

._4230310d {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  display: none;
  margin-right: auto;
}

@media (min-width: 63.75em) {

  ._4230310d {
    display: block;
  }
}

._32677715 {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  display: none;
}

@media (min-width: 63.75em) {

  ._32677715 {
    display: block;
  }
}

._1ff78987 {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}

.de07b8fc {
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6;
}

@media (min-width: 63.75em) {

  .de07b8fc {
    display: none;
  }
}

._2aa46077 {
  -webkit-box-ordinal-group: 8;
      -ms-flex-order: 7;
          order: 7;
}

.dc834cbf {
  -webkit-box-ordinal-group: 9;
      -ms-flex-order: 8;
          order: 8;
  width: 100%;
  padding-top: 8px;
  padding-top: 0.8rem;
}

@media (min-width: 63.75em) {

  .dc834cbf {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    padding-top: 0;
    width: auto;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1 1;
  }
}

._47ea9be6 .dc834cbf {
  display: none;
}

@media (min-width: 63.75em) {

  ._47ea9be6 .dc834cbf {
    display: block;
  }
}

.d69e74bc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  width: 4rem;
  height: 40px;
  height: 4rem;
}

@media (min-width: 45em) {

  .d69e74bc {
    width: 4rem;
  }
}

@media (min-width: 63.75em) {

  .d69e74bc {
    width: 4.8rem;
    height: 4.8rem;
  }
}

._4ac34f6f {
  background: rgb(50, 60, 65);
  color: rgb(255, 255, 255)
}

._4ac34f6f::before {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._4ac34f6f::after {
  margin-top: 8px;
  margin-top: 0.8rem;
}

._68b027e4 {
  display: inline-block;
  vertical-align: middle;
}

._046c4dc6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (max-width: 44.99em) {

  ._046c4dc6 {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

@media (min-width: 63.75em) {

  ._046c4dc6 {
    max-width: 96rem;
    padding: 0 1.6rem;
  }
}

._95fd07ab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (max-width: 19.75em) {

  ._95fd07ab {
    text-align: left;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

@media (max-width: 19.75em) {

  .de2d022f {
    width: 3.6rem;
    height: 3.6rem;
  }
}

._7d9eab86 {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* Margins used to position counter icon over right/upper edge of basket rim */
  margin-left: 22px;
  margin-left: 2.2rem;
  margin-top: -2px;
  margin-top: -0.2rem;
}

._431c4a1b {
  -webkit-transition: opacity 200ms ease-in-out;
  transition: opacity 200ms ease-in-out;
  position: relative; /* fix Safari button text clipping */
}

.a5f317a9 {
  opacity: 0;
}

/* Top Greeting Menu */

._05280a8c {
  padding: 8px 32px;
  padding: 0.8rem 3.2rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: none;
  height: 32px;
  height: 3.2rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._05280a8c a,
  ._05280a8c a:hover,
  ._05280a8c a:focus,
  ._05280a8c a:active {
    background-color: inherit;
    color: inherit;
  }

._72a17c7c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

@media only screen and (min-width: 63.75em) {
  ._05280a8c {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.ce1a6a07:hover {
  color: rgb(255, 255, 255);
}

.ce1a6a07::after {
  content: '|';
  padding-left: 8px;
  padding-left: 0.8rem;
  padding-right: 8px;
  padding-right: 0.8rem;
  color: rgb(255, 255, 255);
}

.ce1a6a07:last-child::after {
  display: none;
}

.b2c1711a {
  display: inline;
}

.eb48ff74 {
  vertical-align: middle;
}

.eebb641a {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.f8f2f381 {
  padding-right: 4px;
  padding-right: 0.4rem;
}

.e39c724c {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  max-width: 61px;
  max-width: 6.1rem;
}

/* Overlay and Secure Header */

.b69cbf07,
._9e7ef6ad {
  width: 100%;
  background: rgb(50, 60, 65);
}

._5b553b18,
.b08f3625 {
  height: 56px;
  height: 5.6rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._23e2ef47,
._2b18068b {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

._2b18068b {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._5d0eb3b1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center
}

._5d0eb3b1:hover {
  cursor: pointer;
}

._5d0eb3b1 i {
    margin-right: 8px;
    margin-right: 0.8rem;
}

._229ae650 {
  position: absolute;
  top: 0;
  right: 0;
  width: 75px;
  width: 7.5rem;
  height: calc(100% - 0.8rem)
}

._229ae650:focus {
  outline: none;
}

._024d8af3 {
  color: rgb(255, 255, 255);
}

._20445e0f {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-left: 10px;
  margin-left: 1rem;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
}

@media (min-width: 63.75em) {

  .e9c409a2 {
    font-weight: 600;
  }
}

._719c2e6f {
  margin-left: 4px;
  margin-left: 0.4rem;
}

._8fb3d0b4 {
  position: relative;
  height: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
}

@media (min-width: 63.75em) {

  .e489855c {
    max-width: 63.75rem;
  }
}

.d5f57d3f {
  width: 100%;
}

.e489855c .d5f57d3f {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

._093cf1b6:empty {
  display: none;
}

._7b80a167 {
  position: absolute;
  width: 100%;
}

.e6c4a778 {
  margin-right: auto;
}

._61692eea {
  color: rgb(60, 60, 60);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 16px;
  margin-right: 1.6rem;
  padding: 8px 16px;
  padding: 0.8rem 1.6rem;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start
}

._61692eea > span {
  font-size: 12px;
  font-size: 1.2rem;
}

@media (min-width: 63.75em) {

  ._61692eea {
    padding: 0.8rem 1.6rem 0;
  }
}

@media (min-width: 73.75em) {

  ._61692eea {
    padding: 0;
  }

  ._61692eea::after {
    content: '|';
    padding-left: 0.8rem;
    color: rgb(255, 255, 255);
  }
}

._36a2ad64 {
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6;
  display: none;
}

@media (max-width: 44.99em) {

  ._8d1897b9 ._36a2ad64 {
    display: block;
  }

  ._8d1897b9 ._1ff78987 {
    display: none;
  }

  ._8d1897b9 .f900efba {
    margin-right: 6.4rem;
  }
}

._38a8204e {
  position: relative;
  width: 100%;
  height: 100%;
}

._8053191f {
  background-color: rgba(0, 0, 0, .5);
  z-index: 10;
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._49439afd {
  position: relative;
  width: 32px;
  width: 3.2rem;
  height: 16px;
  height: 1.6rem;
  margin: 0 8px;
  margin: 0 0.8rem
}

._49439afd > input {
  opacity: 0;
  width: 0;
  height: 0;
}

._78c2eacc {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(70, 79, 84);
  -webkit-transition: 200ms;
  transition: 200ms
}

._78c2eacc::before {
  position: absolute;
  content: '';
  height: 12px;
  height: 1.2rem;
  width: 12px;
  width: 1.2rem;
  left: 4px;
  left: 0.4rem;
  bottom: 2px;
  bottom: 0.2rem;
  background-color: rgb(60, 60, 60);
  -webkit-transition: 200ms;
  transition: 200ms;
}

.a894d30a {
  border-radius: 0.8rem
}

.a894d30a::before {
  border-radius: 0.8rem;
}

.e754f00d + ._78c2eacc::before {
  -webkit-transform: translateX(1.2rem);
          transform: translateX(1.2rem);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.d6237da6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 40px;
  min-width: 4rem;
  height: 40px;
  height: 4rem;
}

@media (min-width: 63.75em) {

  .d6237da6 {
    min-width: 4.8rem;
    width: auto;
    height: 4.8rem;
  }
}

._1a80ac00 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

._50d546d0 {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
}

@media (min-width: 73.75em) {

  ._50d546d0 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._0333199c {
  width: 240px;
  width: 24rem;
  padding-top: 32px;
  padding-top: 3.2rem;
  padding-bottom: 32px;
  padding-bottom: 3.2rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._061779a7 {
  max-width: 1336px;
  max-width: 133.6rem;
  margin: 0 auto;
}

._9826fba3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (min-width: 63.75em) {

  ._9826fba3 {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._3ecc3a7b {
  color: rgb(255, 255, 255);
  background-color: rgb(70, 79, 84);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.bf70d941 {
  background: rgb(50, 60, 65);
  padding: 0;
}

@media (min-width: 63.75em) {

  .bf70d941 {
    padding: 0 3.2rem;
  }
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._8f7aea65 {
    padding-bottom: 13.6rem;
  }
}

@media (max-width: 44.99em) {

  ._8f7aea65 {
    padding-bottom: 8.8rem;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/*
 * z-index
 */

._5c559386 {
  z-index: 1;
}

._2ef7dfec {
  z-index: 80;
}

.b5923781 {
  z-index: 80;
}

.b32d5ac2 {
  z-index: 90;
}

._7088c1a6 {
  z-index: 115;
}

.c9d40931 {
  z-index: 1000;
}

._937c3d00 {
  z-index: 1100;
}

._76021f50 {
  z-index: 10000;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._478d9c5a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: fixed;
  z-index: 1000;
}

._31973094 {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  background-color: rgb(255, 255, 255);
}

._6a51a11c {
  padding-bottom: 160px;
  padding-bottom: 16rem;
  background-color: rgb(255, 255, 255);
}

._83fe5563 {
  position: relative;
}

._76c16225 {
  width: 88vw;
}

@media (min-width: 25.5em) {
  ._76c16225 {
    width: 36rem;
  }
}

.d14cfd58 {
  position: absolute;
  left: 0;
  top: 0;
  padding: 12px;
  padding: 1.2rem;
}

.d14cfd58 i {
  width: 24px;
  width: 2.4rem;
  height: 24px;
  height: 2.4rem;
}

._29786b8f {
  position: absolute;
  -webkit-transform: translate3d(-89vw, 0, 0);
          transform: translate3d(-89vw, 0, 0);
}

.ac177028 {
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  -webkit-transform: translate3d(-89vw, 0, 0);
          transform: translate3d(-89vw, 0, 0);
}

.ac177028 ._83fe5563 {
    opacity: 0;
  }

.ac177028._390c5e6d {
  -webkit-transform: none;
          transform: none;
}

.ac177028._390c5e6d ._83fe5563 {
    opacity: 1;
    -webkit-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
  }

.fb7f85bf {
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  -webkit-transform: translate3d(-89vw, 0, 0);
          transform: translate3d(-89vw, 0, 0);
}

/* stylelint-disable */

.fb7f85bf ._83fe5563 {
    /* stylelint-enable */
    opacity: 0;
    -webkit-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
  }

._7b8aacfd {
  background-color: rgb(255, 255, 255);
  border-bottom-color: rgb(237, 237, 237);
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/*
 * z-index
 */

._729250a8 {
  z-index: 1;
}

.ef9e8704 {
  z-index: 80;
}

.c16bcd62 {
  z-index: 80;
}

._8cb1dd18 {
  z-index: 90;
}

._090fd94e {
  z-index: 115;
}

.bded3a9a {
  z-index: 1000;
}

.e71e1e22 {
  z-index: 1100;
}

._1f91603f {
  z-index: 10000;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._57d7b351 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: fixed;
  z-index: 1000;
}

._9cf67343 {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}

._90cabc29 {
  padding-bottom: 160px;
  padding-bottom: 16rem;
}

._115216cd {
  position: relative;
}

.d4debce5 {
  width: 88vw;
}

@media (min-width: 25.5em) {
  .d4debce5 {
    width: 36rem;
  }
}

.e6c72e50 {
  position: absolute;
  -webkit-transform: translate3d(-89vw, 0, 0);
          transform: translate3d(-89vw, 0, 0);
}

._41ee3f9f {
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  -webkit-transform: translate3d(-89vw, 0, 0);
          transform: translate3d(-89vw, 0, 0);
}

._41ee3f9f ._115216cd {
    opacity: 0;
  }

._4a4e54ab {
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  -webkit-transform: translate3d(-89vw, 0, 0);
          transform: translate3d(-89vw, 0, 0);
}

._4a4e54ab ._115216cd {
    opacity: 0;
    -webkit-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
  }

._41ee3f9f._51782136 {
  -webkit-transform: none;
          transform: none;
}

._41ee3f9f._51782136 ._115216cd {
    opacity: 1;
    -webkit-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
  }

.db7a1c3c,
.e26b4aff {
  font-weight: 600;
  font-size: 20px;
  font-size: 2rem;
  padding: 20px 16px;
  padding: 2rem 1.6rem;
  background-color: rgb(255, 255, 255);
  border-bottom-color: rgb(237, 237, 237);
}

._2fd07dad,
.c33ea64b {
  padding: 20px 16px;
  padding: 2rem 1.6rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._7e1fcae3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
}

.b959d1d5 {
  padding-top: 12px;
  padding-top: 1.2rem;
  padding-bottom: 11px;
  padding-bottom: 1.1rem;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-right: 1px solid rgb(237, 237, 237);
  border-right: 0.1rem solid rgb(237, 237, 237);
  background-color: rgb(255, 255, 255)
}

.b959d1d5:last-child {
  border-right: none;
}

@media (max-width: 44.99em) {

  .b959d1d5 {
    padding: 1.2rem 1.6rem;
  }
}

@media (min-width: 45em) {

  .b959d1d5 {
    padding: 1.2rem 3.2rem;
  }
}

.ec282511 {
  min-width: 96px;
  min-width: 9.6rem;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  border-radius: 0;
  border: none;
}

._420d6007 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.ed45bf42 {
  height: 60px;
  height: 6rem;
  background: rgb(50, 60, 65);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 16px;
  padding: 1rem 1.6rem;
}

._5281931d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 40px;
  width: 4rem;
  height: 40px;
  height: 4rem;
}

.b3eb5b11 {
  padding: 0;
}

/*
 * z-index
 */

.e39fff48 {
  z-index: 1;
}

.ef446b37 {
  z-index: 80;
}

._598083f4 {
  z-index: 80;
}

._26cb43ba {
  z-index: 90;
}

._15387c32 {
  z-index: 115;
}

.f19fe7a3 {
  z-index: 1000;
}

.a4188501 {
  z-index: 1100;
}

._5a058219 {
  z-index: 10000;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._6a4735bf {
  height: 100%;
}

._75285175 {
  height: 100vh;
  overflow: hidden;
}

._32739dfb {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._1a38c35a {
  /* https://bugs.webkit.org/show_bug.cgi?id=141832 */
  min-height: 100%;
  -webkit-transition: -webkit-transform 200ms ease-in-out;
  transition: -webkit-transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  position: relative;
}

._9ab8b4d7 {
  -webkit-transform: translate3d(88vw, 0, 0);
          transform: translate3d(88vw, 0, 0);
}

._00aee20d {
  position: relative;
  width: 100%;
  height: 100%;
}

.be243365 {
  background-color: rgba(0, 0, 0, .5);
  z-index: 10;
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

._122a8589 {
  z-index: 80;
}

@media (min-width: 25.5em) {
  ._9ab8b4d7 {
    -webkit-transform: translate3d(36rem, 0, 0);
            transform: translate3d(36rem, 0, 0);
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (min-width: 45em) {

  .a556be7f {
    background-color: rgb(234, 235, 236);
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.bf38b2d0 {
  background-color: rgb(255, 255, 255);
}

@media (min-width: 45em) {

  .bf38b2d0 {
    width: 60rem;
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    border-radius: 0.4rem;
    -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
            box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

@media (min-width: 45em) and (-ms-high-contrast: active),
  (-ms-high-contrast: none) {

  .bf38b2d0 {
    display: table-cell;
  }
}

._342070bd {
}

@media (min-width: 45em) {

  ._342070bd {
    padding: 0 4.8rem;
  }
}

.f931b9aa {
  background: none;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  width: 392px;
  width: 39.2rem;
  padding: 0;
  margin: 0 auto;
}

@media (max-width: 44.99em) {

  .f931b9aa {
    width: auto;
  }
}

._3abd6d35 {
  display: block;
  height: auto;
}

@media (min-width: 45em) {

  ._3abd6d35 {
    border-radius: 0.4rem;
    min-height: 50rem;
  }
}

._010dc66b {
  background-color: rgb(234, 235, 236);
  padding: 0 16px;
  padding: 0 1.6rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 45em) {

  ._010dc66b {
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    padding: 0 3.2rem;
  }
}

@media (min-width: 63.75em) {

  ._010dc66b {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

@media (min-width: 45em) {

  .ba4d35e1 {
    background-color: rgb(234, 235, 236);
    padding: 3.2rem 0;
  }
}

._38e5b991 {
}

@media (min-width: 45em) {

  ._38e5b991 {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

._7b492ee2 {
  background-color: rgb(234, 235, 236);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0 16px;
  padding: 0 1.6rem;
}

@media (min-width: 45em) {

  ._7b492ee2 {
    padding: 3.2rem 0;
  }
}

.e74f3224 {
}

@media (min-width: 45em) {

  .e74f3224 {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

._35831662 {
  background-color: rgb(234, 235, 236);
  padding: 16px 0;
  padding: 1.6rem 0;
}

@media (min-width: 45em) {

  ._35831662 {
    padding: 3.2rem 0;
  }
}

@media (min-width: 45em) {

  ._1bf44b77 {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

._3aa89e94 {
  margin-bottom: 0;
  padding: 24px 32px 32px;
  padding: 2.4rem 3.2rem 3.2rem;
  background-color: rgb(237, 237, 237);
  font-size: 20px;
  font-size: 2rem;
  line-height: 26px;
  line-height: 2.6rem;
}

@media (min-width: 45em) {

  ._3aa89e94 {
    margin-bottom: 4.8rem;
    padding: 0;
    background-color: none;
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (min-width: 45em) {

  .dc47e658 {
    background-color: rgb(241, 239, 238);
    padding: 3.2rem 0;
  }
}

._1afcf97b {
}

@media (min-width: 45em) {

  ._1afcf97b {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

.f665d765 {
  z-index: 1;
}

._3c2b7ae9 {
  z-index: 80;
}

.bcd92375 {
  z-index: 80;
}

.b29122cb {
  z-index: 90;
}

._0ec13e25 {
  z-index: 115;
}

._9409a0d9 {
  z-index: 1000;
}

.c6697e24 {
  z-index: 1100;
}

._459802d1 {
  z-index: 10000;
}

._29510311 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(255, 255, 255);
  z-index: 60;
  -webkit-box-shadow: 0 -4px 6px 0 rgb(214, 216, 217);
          box-shadow: 0 -4px 6px 0 rgb(214, 216, 217);
}

@media (min-width: 63.75em) {

  ._29510311 {
    top: 0;
    bottom: auto;
    -webkit-box-shadow: 0 4px 6px 0 rgb(214, 216, 217);
            box-shadow: 0 4px 6px 0 rgb(214, 216, 217);
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._4db71a3c {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -ms-flex-item-align: start;
      align-self: flex-start;
  padding: 0;
}

@media (min-width: 45em) {

  ._4db71a3c {
    padding: 0 1.6rem;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
  }
}

@media (min-width: 63.75em) {

  ._2d942a1a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 18rem;
    max-width: 18rem;
  }
}

._6d704eb8 {
  padding: 16px 0;
  padding: 1.6rem 0;
  text-align: right;
}

@media (min-width: 45em) {

  ._6d704eb8 {
    min-height: 4.8rem;
    text-align: left;
  }
}

@media (min-width: 63.75em) {

  ._6d704eb8 {
    padding: 0;
    min-height: 0;
  }
}

._279de538 {
  padding: 16px 0;
  padding: 1.6rem 0;
  min-width: 175px;
  min-width: 17.5rem;
  -webkit-box-flex: 1 !important;
      -ms-flex: 1 1 auto !important;
          flex: 1 1 auto !important;
}

@media (min-width: 45em) {

  ._279de538 {
    min-width: 32rem;
    max-width: 32rem;
  }
}

@media (min-width: 63.75em) {

  ._279de538 {
    min-width: 0;
    padding: 0;
  }
}

.c8326443 {
  padding: 16px 0;
  padding: 1.6rem 0;
  min-width: 48px;
  min-width: 4.8rem;
  margin: 0;
}

@media (min-width: 45em) {

  .c8326443 {
    padding: 0 3.2rem 0 0;
  }
}

@media (min-width: 45em) {

  ._79381609 {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
  }
}

@media (max-width: 44.99em) {

  ._5aad97e8 {
    display: block;
  }
}

.cc59b8af {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._88f616f7 {
  margin: 0 16px;
  margin: 0 1.6rem;
}

@media (min-width: 63.75em) {

  .ae0608db {
    display: none;
  }
}

.ed1be23b {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

@media (min-width: 63.75em) {

  .ed1be23b {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
  }
}

.f25c45d3 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  .f25c45d3 {
    padding-bottom: 0;
  }
}

@media (min-width: 63.75em) {

  .f25c45d3 {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

._853b8f5d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 24px 0 32px;
  margin: 2.4rem 0 3.2rem;
}

@media (min-width: 45em) {

  ._853b8f5d {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

@media (min-width: 63.75em) {

  ._853b8f5d {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-left: 3.2rem;
    margin-top: 12.8rem;
    margin-bottom: auto;
  }
}

@media (min-width: 63.75em) {

  ._5768e6e7 {
    padding-left: 5.6rem;
  }
}

.fc7be089 {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 12px;
  margin-bottom: 1.2rem;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  .fc7be089 {
    margin: 0 auto 0 3.2rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

@media (min-width: 63.75em) {

  .fc7be089 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 1.6rem;
  }
}

@media (max-width: 44.99em) {

  .d52b6df2 {
    max-width: none;
    max-width: initial;
  }
}

._7da66a4e {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._7da66a4e {
    margin-top: auto;
    margin-left: 19.5rem;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    max-width: 28.8rem;
  }
}

@media (min-width: 63.75em) {

  ._7da66a4e {
    display: block;
    max-width: 20.8rem;
  }
}

._66cd143e {
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (min-width: 63.75em) {

  ._16743b8b {
    -webkit-box-flex: 1 !important;
        -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
    width: 100%;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._04c7ebf3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: start;
      align-self: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._04c7ebf3 {
    width: 20%;
  }
}

@media (min-width: 45em) {

  ._7868f168 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 18rem;
    max-width: 18rem;
  }
}

._089a9903 {
  padding: 16px 0;
  padding: 1.6rem 0;
  text-align: right;
}

@media (min-width: 45em) {

  ._089a9903 {
    min-height: 4.8rem;
    text-align: left;
  }
}

@media (min-width: 63.75em) {

  ._089a9903 {
    padding: 0;
    min-height: 0;
  }
}

._24a37b86 {
  padding: 16px 0;
  padding: 1.6rem 0;
  min-width: 175px;
  min-width: 17.5rem;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

@media (min-width: 45em) {

  ._24a37b86 {
    min-width: 32rem;
    max-width: 32rem;
  }
}

@media (min-width: 63.75em) {

  ._24a37b86 {
    min-width: 0;
    padding: 0;
  }
}

.d5d7d3d1 {
  margin: 0;
  width: 148px;
  width: 14.8rem;
  height: 148px;
  height: 14.8rem;
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
}

._122356f1 {
    border-color: rgb(255, 102, 0);
  }

@media (max-width: 44.99em) {

  .d5d7d3d1 {
    width: 6.4rem;
    height: 6.4rem;
  }
}

@media (min-width: 45em) {

  .c5b7dcda {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
}

._1bd94df4 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (min-width: 45em) {

  ._30b56280 {
    width: 100%;
  }
}

._7ae06ec8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 16px;
  padding: 0 1.6rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) {

  ._7ae06ec8 {
    padding: 0;
  }
}

@media (min-width: 63.75em) {

  ._7ae06ec8:last-child {
    margin-bottom: 0;
  }
}

._1eac2ce8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._9db610a5 {
  margin-left: auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: 8px;
  margin-right: 0.8rem
}

._9db610a5 > div {
  margin-left: 0;
  margin-right: 8px;
  margin-right: 0.8rem;
}

@media (min-width: 45em) {

  ._9db610a5 {
    margin-left: 0;
  }
}

@media (max-width: 44.99em) {

  ._9db610a5 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.b5b6ffb2,
._9db610a5 {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

@media (min-width: 45em) {

  .b5b6ffb2,
._9db610a5 {
    -ms-flex-item-align: normal;
        align-self: normal;
  }
}

._4eefeb5e {
  margin: 0 8px 0 0;
  margin: 0 0.8rem 0 0;
  white-space: nowrap;
}

._2d44ac86 {
  display: inline-block;
}

@media (max-width: 44.99em) {

  ._2d44ac86 {
    margin-top: 0.8rem;
    margin-bottom: 1.2rem;
  }
}

._859020d4 {
  display: inline-block;
}

@media (max-width: 44.99em) {

  ._859020d4 {
    display: block;
  }
}

.b2acaba3 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._567d50a7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (min-width: 45em) {

  ._567d50a7 {
    margin-top: 0.8rem;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._75d170e7 {
  margin: 0 16px;
  margin: 0 1.6rem;
}

@media (min-width: 45em) {

  ._09a4ef02 {
    display: none;
  }
}

@media (min-width: 45em) {

  .e948e899 {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
  }
}

@media (min-width: 45em) and (max-width: 63.74em) {

  .e948e899 {
    width: 20%;
  }
}

._463d3bee {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  padding: 16px;
  padding: 1.6rem;
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

@media (min-width: 45em) {

  ._463d3bee {
    border: 0.1rem solid rgb(224, 224, 224);
  }
}

@media (min-width: 63.75em) {

  ._463d3bee {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

._806de34d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
}

@media (min-width: 45em) {

  ._806de34d {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-top: 1.6rem;
  }
}

@media (min-width: 63.75em) {

  ._806de34d {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-left: 3.2rem;
    margin-bottom: auto;
  }
}

@media (min-width: 63.75em) {

  ._7e4f8e5f {
    padding-left: 5.6rem;
  }
}

.ba9c6230 {
  margin: 0;
}

@media (min-width: 63.75em) {

  .ba9c6230 {
    padding: 0;
    margin-bottom: 1.6rem;
  }
}

._4ae11c49 {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 12px;
  margin-bottom: 1.2rem;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._4ae11c49 {
    margin: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

@media (min-width: 63.75em) {

  ._4ae11c49 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 0;
  }
}

@media (max-width: 44.99em) {

  ._7d39369b {
    max-width: none;
    max-width: initial;
  }
}

.fcc70083 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 16px;
  margin-top: 1.6rem;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  .fcc70083 {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    max-width: 28.8rem;
    margin-top: 0;
  }
}

@media (min-width: 63.75em) {

  .fcc70083 {
    display: block;
    max-width: 20.8rem;
  }
}

.c64299c3 {
  width: 100%;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._162cf86c {
}

.d49815f2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._8423d4e4 {
  border-top: 1px solid rgb(224, 224, 224);
  border-top: 0.1rem solid rgb(224, 224, 224);
  padding: 16px;
  padding: 1.6rem;
}

@media (min-width: 45em) {

  ._8423d4e4 {
    padding: 0;
  }
}

._12591563 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._0a0fa172 {
  padding-left: 12px;
  padding-left: 1.2rem;
  padding-right: 12px;
  padding-right: 1.2rem;
}

._06983813 {
  width: 100%;
  max-width: none;
  margin-top: 16px 0 0 0;
  margin-top: 1.6rem 0 0 0;
  padding-right: 0;
  padding-left: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._7dca750b {
  border: 1px solid rgb(224, 224, 224);
  border: 0.1rem solid rgb(224, 224, 224);
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
  padding-top: 16px;
  padding-top: 1.6rem;
}

._0e29c7d2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ab950936 {
  width: 100%;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.ec7f864e {
  display: block;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  margin-left: 16px;
  margin-left: 1.6rem;
  margin-right: 16px;
  margin-right: 1.6rem;
}

@media (min-width: 45em) {

  .ec7f864e {
    margin: 0;
  }
}

._6bb958d0 {
  display: block;
  width: 100%;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.ae3be8e0 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.c65d20b4 .slick-track {
  margin: 0;
}

._4328f487 {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._401989a1 {
  border-top: 1px solid rgb(166, 166, 166);
  border-top: 0.1rem solid rgb(166, 166, 166);
  margin-top: 16px;
  margin-top: 1.6rem;
  padding-top: 32px;
  padding-top: 3.2rem;
}

@media (min-width: 45em) {

  ._401989a1 {
    border-top: 0;
    padding-top: 0;
  }
}

@media (min-width: 63.75em) {

  ._401989a1 {
    margin-top: 4.8rem;
  }
}

._7939cef2 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

._03e12960 {
  width: 48px;
  width: 4.8rem;
  height: 48px;
  height: 4.8rem;
  display: inline-block;
}

.f3845074 {
  font-weight: bold;
  margin-right: 16px;
  margin-right: 1.6rem;
}

._591ee4b6 {
  -ms-flex-item-align: center;
      align-self: center;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.cff68e1d {
  display: none;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 40px;
  height: 4rem;
  border-bottom: 1px solid rgb(242, 242, 242);
  border-bottom: 0.1rem solid rgb(242, 242, 242);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 44.99em) {
  .cff68e1d {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

._15b4fc0f {
  margin: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

.be0d8430 {
  z-index: 1;
}

._290b5208 {
  z-index: 80;
}

.dea08ad4 {
  z-index: 80;
}

.f947492c {
  z-index: 90;
}

.f07c35be {
  z-index: 115;
}

._78b0062b {
  z-index: 1000;
}

._86c0b7a6 {
  z-index: 1100;
}

._1b44684b {
  z-index: 10000;
}

.a3d6c897 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 16px;
  margin-top: 1.6rem;
  margin-bottom: 12px;
  margin-bottom: 1.2rem;
  z-index: 1;
  position: relative;
}

._0fe59aea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

._469e18a8 {
  margin: 0;
  cursor: pointer;
}

._8622b085:hover {
  text-decoration: underline;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.edbfc49b {
  width: auto;
  min-width: auto;
  height: 100%;
  padding: 1px;
  padding: 0.1rem;
  margin-left: 16px;
  margin-left: 1.6rem;
  border-color: rgb(166, 166, 166);
}

.edbfc49b._0f368055 {
  margin-top: 1px;
  margin-top: 0.1rem;
  border: none;
  outline: 1.5px solid rgb(50, 60, 65);
  outline: 0.15rem solid rgb(50, 60, 65);
  -webkit-box-shadow: inset 0 0 0 0.1rem rgb(50, 60, 65);
          box-shadow: inset 0 0 0 0.1rem rgb(50, 60, 65);
}

@media (max-width: 44.99em) {

  .edbfc49b._0f368055 {
    border-right: rgb(50, 60, 65) 0.1rem
      solid;
  }
}

._71bedefe {
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
  -webkit-transform-origin: center;
          transform-origin: center;
}

._71bedefe svg {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 16px;
    width: 1.6rem;
  }

@media (min-width: 63.75em) {

  ._71bedefe:hover {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@media (max-width: 63.74em) {

  ._71bedefe:active {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

.dd3f0afd {
  min-height: calc(100vh - 10.4rem);
}

._8ff264b4 {
  margin: 24px auto;
  margin: 2.4rem auto;
  min-width: 88px;
  min-width: 8.8rem;
  min-height: 88px;
  min-height: 8.8rem;
}

.fa6033c4 {
  margin-top: 0;
  margin-bottom: 15px;
  margin-bottom: 1.5rem;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 24px;
  line-height: 2.4rem;
}

.d0407191 {
  padding: 8px 16px;
  padding: 0.8rem 1.6rem;
}

.bfaf2566 {
}

._1a486741 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) {

  ._1a486741 {
    margin-bottom: 0;
  }
}

@media (max-width: 44.99em) {
  .baedb1b8 {
    position: relative;
    background: rgb(237, 237, 237);
    margin-bottom: 1.6rem
  }
  .baedb1b8::before,
    .baedb1b8::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    background: rgb(237, 237, 237);
    width: 1.6rem;
  }
  .baedb1b8::before {
    left: -1.6rem;
  }
  .baedb1b8::after {
    right: -1.6rem;
  }
}

@media (max-width: 44.99em) {
  .dae769d8 {
    background: rgb(255, 255, 255)
  }
  .dae769d8::before,
    .dae769d8::after {
    background: rgb(255, 255, 255);
  }
}

._62ed63e2 {
  display: inline-block;
  margin-right: 6px;
  margin-right: 0.6rem;
}

._48c28c7b {
  margin: 0 auto;
}

._284b3a22 {
  display: none;
}

@media (max-width: 44.99em) {

  ._8d574982 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media (max-width: 44.99em) {

  .d45cde1d {
    width: 100%;
    max-width: 100%;
    margin-top: 1.6rem;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}

.edbfc49b {
  width: auto;
  height: 100%;
  min-width: auto;
  padding: 1px;
  padding: 0.1rem;
  margin-left: 16px;
  margin-left: 1.6rem;
  border-color: rgb(166, 166, 166);
}

@media (max-width: 44.99em) {

  .edbfc49b {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

.edbfc49b._0f368055 {
  margin-top: 1px;
  margin-top: 0.1rem;
  border: none;
  outline: 1.5px solid rgb(50, 60, 65);
  outline: 0.15rem solid rgb(50, 60, 65);
  -webkit-box-shadow: inset 0 0 0 0.1rem rgb(50, 60, 65);
          box-shadow: inset 0 0 0 0.1rem rgb(50, 60, 65);
}

@media (max-width: 44.99em) {

  .edbfc49b._0f368055 {
    border-right: rgb(50, 60, 65) 0.1rem
      solid;
  }
}

._71bedefe {
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
  -webkit-transform-origin: center;
          transform-origin: center;
}

._71bedefe svg {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 16px;
    width: 1.6rem;
  }

@media (min-width: 63.75em) {

  ._71bedefe:hover {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@media (max-width: 63.74em) {

  ._71bedefe:active {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

.cc53740b {
  outline: 0;
  font-size: 16px;
  font-size: 1.6rem;
  position: relative;
}

.a2c98089 {
  background: #ededed;
  border-style: dotted;
  border-width: 1px;
  border-width: 0.1rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  padding: 16px 16px 16px 42px;
  padding: 1.6rem 1.6rem 1.6rem 4.2rem;
  background: #fbe6e5;
  border-color: #e30303;
}

._912a63dc {
  position: absolute;
  left: 12px;
  top: 14px;
}

@media (min-width: 63.75em) {

  ._912a63dc {
    top: 16px;
  }
}

.f9beb77e {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._81d6eaca {
  width: 100%;
  max-width: 528px;
  max-width: 52.8rem;
  margin: 16px 0;
  margin: 1.6rem 0;
}

._48ff2fbc {
  text-decoration: none;
}

.fb040369 {
  max-width: 528px;
  max-width: 52.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._44f3570a {
  height: 26px;
  height: 2.6rem;
  padding-top: 8px;
  padding-top: 0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.cc5cddbe {
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
  max-width: 528px;
  max-width: 52.8rem;
}

@media (max-width: 44.99em) {

  .cc5cddbe {
    padding-top: 0.8rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._73dda3c8 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._5a0f234f {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
  padding-bottom: 12px;
  padding-bottom: 1.2rem;
}

.d7c3af5c {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._364510db {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
      align-self: center;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.eca39b14 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._6586b703 {
  color: rgb(111, 118, 122);
}

@media (max-width: 44.99em) {

  ._6586b703 {
    margin-bottom: 0;
  }
}

._4e4d4d5d {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._3eed54dd {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

._8d89111f {
  color: rgb(111, 118, 122);
}

.cd0885c8 {
  margin: 0;
  top: -4px;
  top: -0.4rem;
  margin-right: 8px;
  margin-right: 0.8rem;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._93270120 {
  color: rgb(111, 118, 122);
  width: 100%;
  max-width: 100%;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._93270120 {
    max-width: 28rem;
  }
}

@media (min-width: 63.75em) {

  ._93270120 {
    max-width: 31rem;
  }
}

._90c79509 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 0 16px 0;
  margin: 0 0 1.6rem 0;
}

._5d4b27bb {
  margin-bottom: 40px;
  margin-bottom: 4rem;
}

._144b6973 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

@media (max-width: 23.4em) {

  ._144b6973 {
    margin-left: 0.4rem;
  }
}

._34c433b1 {
  width: 100%;
  min-width: 200px;
  min-width: 20rem;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._34c433b1 {
    min-width: 28rem;
  }
}

@media (min-width: 63.75em) {

  ._34c433b1 {
    min-width: 31rem;
  }
}

._0298f9fe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.b89e6c06 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  padding: 16px 16px 8px 16px;
  padding: 1.6rem 1.6rem 0.8rem 1.6rem
}

.b89e6c06:only-child {
  padding: 16px;
  padding: 1.6rem;
}

@media (min-width: 45em) {

  .b89e6c06 {
    padding: 0 2.4rem 0 2.4rem;
    width: 50%;
    border-right: 0.1rem solid rgb(214, 216, 217);
  }

  .b89e6c06:only-child {
    width: 100%;
    border-right: none;
    margin-bottom: 0;
    padding: 0 2.4rem;
  }
}

._4e8b3d68 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (min-width: 45em) {

  ._4e8b3d68 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }

  ._4e8b3d68 form {
    width: 50%;
    padding-left: 0.8rem;
  }
}

@media (min-width: 63.75em) {

  ._4e8b3d68 form {
    padding-left: 1.6rem;
  }
}

@media (min-width: 45em) {

  ._62f7d16e {
    width: 50%;
  }
}

._7d26220b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}

@media (min-width: 45em) {

  ._7d26220b {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }
}

.c72b2b1d {
  color: rgb(111, 118, 122);
}

@media (min-width: 45em) {

  .c72b2b1d {
    width: 50%;
    padding-right: 0.8rem;
  }
}

@media (min-width: 63.75em) {

  .c72b2b1d {
    padding-right: 1.6rem;
  }
}

.bc428b5f {
  width: 100%;
  margin-top: 0;
}

.e5285df1 {
  margin: 16px 0 0 0;
  margin: 1.6rem 0 0 0;
}

@media (min-width: 45em) {

  .e5285df1 {
    margin: 0 0 0 0.8rem;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

._15329bc0 {
  margin: 0;
}

._78e6adba {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._5664bff0 {
  position: absolute;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._50e6b932::before {
  display: none;
}

.f13dddc4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: rgb(254, 245, 228);
  padding: 8px;
  padding: 0.8rem;
}

.aa7ee11b {
  margin-left: 8px;
  margin-left: 0.8rem;
  margin-bottom: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.b78e34f6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 16px;
  margin-bottom: 1.6rem
}

.b78e34f6:last-child {
  margin-bottom: 0;
}

.c47f0ad1 {
  margin: 0;
  top: -8px;
  top: -0.8rem;
  margin-right: 8px;
  margin-right: 0.8rem;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

._0e983bbc {
  -ms-flex-item-align: center;
      align-self: center;
  margin-right: 8px;
  margin-right: 0.8rem;
}

.fc61ed3e {
  height: 36px;
  height: 3.6rem;
  width: 36px;
  width: 3.6rem;
  fill: rgb(255, 102, 0);
}

._37ee9191 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%
}

._37ee9191::before,
  ._37ee9191::after {
  content: none;
}

.a727e330 {
  margin-top: 20px;
  margin-top: 2rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._4d6009ba {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

._48471652 {
  margin-top: 16px;
  margin-top: 1.6rem;
}

.b797d4fa {
  max-width: 528px;
  max-width: 52.8rem;
}

._45af54ef {
  overflow-x: hidden;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._2afcfee3 {
  width: 80px;
  width: 8rem;
  height: 80px;
  height: 8rem;
}

._42928fa2 {
  width: 264px;
  width: 26.4rem;
  margin-bottom: 0;
}

@media (min-width: 63.75em) {

  ._42928fa2 {
    width: auto;
  }
}

.f132f89a {
  height: 72px;
  height: 7.2rem;
}

.ce2509e2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._699ee7cf {
  margin: 16px 0;
  margin: 1.6rem 0;
}

.c1d9dcc7 {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

._36ca3aec {
  display: none;
}

._2628ed7d {
  display: block;
}

._2628ed7d:first-of-type {
  margin-bottom: 32px;
  margin-bottom: 3.2rem;
}

@media (min-width: 45em) {
  /*
  The product description section needs to be visible in its entirety
  on tablet+ breakpoints, regardless of whether the description is hidden
  or not on mobile.
  */
  ._36ca3aec {
    display: block;
  }

  .c1d9dcc7 {
    display: none;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._8a6f7a86 {
  margin-bottom: 2px;
  margin-bottom: 0.2rem;
  padding-bottom: 0;
  padding-top: 16px;
  padding-top: 1.6rem;
}

.f16ac490 {
  color: rgb(50, 60, 65);
  border-collapse: collapse;
  width: 100%;
  border: 1px solid rgb(237, 237, 237);
  border: 0.1rem solid rgb(237, 237, 237);
}

._16e35652:nth-child(2n) {
  background: rgb(255, 255, 255);
}

._58c871b0 {
  width: 50%;
  word-break: break-word;
  vertical-align: top;
  text-align: left;
  padding: 8px 16px;
  padding: 0.8rem 1.6rem;
  border: none; /* resets sb border rule */
}

._5de00b5d {
  padding-right: 3px;
  padding-right: 0.3rem;
}

.d13cb219 {
  font-weight: normal;
  padding-left: 3px;
  padding-left: 0.3rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._69fa4157 {
  cursor: pointer;
  width: 48px;
  width: 4.8rem;
  height: 48px;
  height: 4.8rem;
  pointer-events: none;
  display: inline-block;
}

._8bfeece3 {
  margin-top: 4px;
  margin-top: 0.4rem;
}

.a6a91573 {
  -ms-flex-item-align: center;
      align-self: center;

  /* Force content width on IE11 as it does not respect flex grow behaviour on the <Grid> */
}

@media (-ms-high-contrast: active),
  (-ms-high-contrast: none) and (max-width: 63.74em) {

  .a6a91573 {
    min-width: 23rem;
  }
}

@media (-ms-high-contrast: active),
  (-ms-high-contrast: none) and (min-width: 63.75em) {

  .a6a91573 {
    min-width: 38rem;
  }
}

.adcb804b {
  cursor: pointer;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._0570cbc1:not(:last-of-type) {
  margin-bottom: 32px;
  margin-bottom: 3.2rem;
}

.ae80c7ca {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

._319c559a {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._6aa753a7 {
  padding-right: 8px;
  padding-right: 0.8rem;
  display: inline-block;
  height: 48px;
  height: 4.8rem;
}

._9bd41e30 {
  margin: 0 8px;
  margin: 0 0.8rem;
  display: inline;
  line-height: 48px;
  line-height: 4.8rem;
}

._938e61fb {
  margin-left: -6px;
  margin-left: -0.6rem;
}

.b3f8bd89 {
  margin: 16px 0;
  margin: 1.6rem 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

._2ab55424 {
  z-index: 1;
}

._005744b3 {
  z-index: 80;
}

._87d795d8 {
  z-index: 80;
}

._4d29379f {
  z-index: 90;
}

._771d774b {
  z-index: 115;
}

._0699b58d {
  z-index: 1000;
}

._2f542254 {
  z-index: 1100;
}

.d7a972af {
  z-index: 10000;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

/*
  Why important is allowed for utils classes?
  - It is common practice (see https://github.com/twbs/bootstrap/blob/ff29c1224c20b8fcf2d1e7c28426470f1dc3e40d/scss/utilities/_visibility.scss)
  - If you put util class on element, it reads like element is having those styles, they should override any conflicting rule
  - In case if rule with !important need to be overwritten, just remove util class and write your own.
*/

/*
 * Naked Button
 */

._36645772 {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: inherit;
}

/*
 * Naked Action, Link, Button or Anchor
 */

.e25d14c6 {
  display: block;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
}

button.e25d14c6:not([disabled]) {
  cursor: pointer;
}

._6135f2b8 {
  display: inline;
}

.fccc928e {
  color: inherit;
  text-decoration: underline
}

.fccc928e:hover {
  font-weight: 500;
}

/*
 * Pullers
 */

.ecf2e292 {
  float: left !important;
}

.f305c38d {
  float: right !important;
}

/* Note this wont always centralise, quick and dirty */

.d1cec0a0 {
  margin: 0 auto;
}

.d556ea9c {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

._0d79823c {
  max-width: 1400px;
  max-width: 140rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 63.75em) {

  ._7b67ae88 {
    max-width: 36.8rem;
  }
}

@media (min-width: 45em) {

  .b6019ae1 {
    max-width: 36.8rem;
  }
}

/*
 * Anchors
 */

._8e0cd42e {
  display: block;
  text-decoration: underline;
  color: inherit
}

._8e0cd42e:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

@media (hover: none) {

  ._8e0cd42e:hover {
    color: #000;
    color: initial;
  }
}

/**
 * Alignment
 */

._1623550d {
  text-align: left;
}

.d4cf8917 {
  text-align: center;
}

.fab2b8d8 {
  text-align: right;
}

.ff6582f9 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

._833d3ec2 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.cd5ff5a0 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ced839ef {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

._66f8ce25 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.f6e03fac {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1
}

.f6e03fac::before,
  .f6e03fac::after {
  content: ' ';
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

.b8463f5b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._65ff9fa0 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._2bf66757 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

._555c77ee {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.c829079c {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

._9ee9c68c {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._7dce9bab {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

._2a08e0dc {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._56c7ba60 {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.e2427c41 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

._04bfdc8f {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

._82cdc018 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.d9322ed9 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

._55b8e3dd {
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important; /* Grid CSS will override when combined */
}

.a6eb0c8f {
  position: relative;
}

/*
 * Sizing
 */

._1779bf98 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.b87842d2 {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

._87fb3fe4 {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

._553e48fb {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
}

._48f7e7d8 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

._34fc3559 {
  display: block;
  width: 100%;
}

.c5236c57 {
  display: block;
  height: 100%;
}

._8dd28136 {
  width: 100vw;
}

._316e7fbe {
  height: 100vh;
}

._401ffe8e {
  overflow-x: scroll;
}

._18ceb53a {
  overflow-y: scroll;
}

/*
 * Visibility
 */

._4b1a7457 {
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute;
}

._053945a0 {
  display: none !important;
}

._4618c3dd {
  opacity: 0 !important;
  pointer-events: none !important;
}

.ea628dfb {
  -webkit-perspective: 100rem;
          perspective: 100rem;
}

/*
 * Font rendering
 */

.dd082428 {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

.f0154951 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Font styling
 */

/* Weights */

.a382e2d5 {
  font-weight: 300;
}

._6a1d6961 {
  font-weight: 400;
}

._734b84eb {
  font-weight: 500;
}

._219809ee {
  font-weight: 600;
}

/* Sizes */

.d26201de {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
}

.b57534aa {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
}

.edd5eb92 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._507e04a2 {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._8ab80bd2 {
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
}

._86b75fee {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 40px;
  line-height: 4rem;
}

._2afc6ddd {
  font-size: 48px;
  font-size: 4.8rem;
  line-height: 56px;
  line-height: 5.6rem;
}

._99fa2f5b {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 16px;
    line-height: 1.6rem;
  }

._16b8c5d9 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 20px;
    line-height: 2rem;
  }

.a6b025d0 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

.bf340774 {
    font-size: 20px;
    font-size: 2rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

._2e0aaa26 {
    font-size: 26px;
    font-size: 2.6rem;
    line-height: 32px;
    line-height: 3.2rem;
  }

.fcc3e0f9 {
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 40px;
    line-height: 4rem;
  }

.cf300ccb {
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 56px;
    line-height: 5.6rem;
  }

@media (min-width: 45em) {
  .d43fe2d4 {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  .becf5552 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ._380cecfd {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  ._1689d836 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  ._20753c14 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._7f0b69ad {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  ._862bd991 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

@media (min-width: 63.75em) {
  ._1da087ce {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  ._113bed06 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ._4c20bee8 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  ._00cd04f6 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  ._1da22960 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._67e6407b {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  .b2ec4f57 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

.da0f65b8 {
  line-height: 24px;
  line-height: 2.4rem;
}

._3fbda73d {
  line-height: 40px;
  line-height: 4rem;
}

.ad38fc9d {
  line-height: 19px;
  line-height: 1.9rem;
}

._423fb19d {
  line-height: 13px;
  line-height: 1.3rem;
}

/* Text margins */

/* TODO: WFE-7446 put text margins to text.css file */

/* margin none rule needs to be before others as it needs to be overridden by them */

.c89b0b54 {
  margin: 0;
}

._26ce1232 {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

._22fba6d7 {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

.d8dc7ab5 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._613cc4fc {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._0f958c00 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._2163065d {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.cd74d45e {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

@media (min-width: 45em) {
  ._843c71e7 {
    margin-bottom: 0.8rem;
  }
  ._6be8bb49 {
    margin-bottom: 0.8rem;
  }
  .b8f640de {
    margin-bottom: 1.6rem;
  }
  ._22051a88 {
    margin-bottom: 1.6rem;
  }
  ._7ca2edab {
    margin-bottom: 1.6rem;
  }
  .d863f1b4 {
    margin-bottom: 1.6rem;
  }
  .b5379f82 {
    margin-bottom: 1.6rem;
  }
}

@media (min-width: 63.75em) {
  .c65dad42 {
    margin-bottom: 0.8rem;
  }
  ._6bcf6de5 {
    margin-bottom: 0.8rem;
  }
  ._2c59ee28 {
    margin-bottom: 1.6rem;
  }
  ._3ffb4e58 {
    margin-bottom: 1.6rem;
  }
  .cae1be44 {
    margin-bottom: 1.6rem;
  }
  .d3e875c0 {
    margin-bottom: 1.6rem;
  }
  ._3a2f00e1 {
    margin-bottom: 1.6rem;
  }
}

._696e4355 {
  margin-left: 4px;
  margin-left: 0.4rem;
}

._76d4da61 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

._93cbc110 {
  margin-left: 12px;
  margin-left: 1.2rem;
}

._476d1fea {
  margin-left: 16px;
  margin-left: 1.6rem;
}

.d895a56b {
  margin-left: auto;
}

._410d287d {
  margin-right: 4px;
  margin-right: 0.4rem;
}

._02a4feae {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._28a33fad {
  margin-right: 12px;
  margin-right: 1.2rem;
}

.df5c833e {
  margin-right: 16px;
  margin-right: 1.6rem;
}

._1b74a0ff {
  margin-right: auto;
}

.a41d74f2 {
}

/* Styles */

._0cd71643 {
  font-style: italic;
}

.cb45c1e0 {
  text-transform: uppercase;
}

.cd7515b7 {
  text-transform: lowercase;
}

.dd2813c1 {
  text-decoration: line-through;
}

._94772e5b {
  white-space: nowrap;
}

._09273639 {
  text-decoration: underline;
}

._47067fcf {
  font-weight: 600 !important;
}

._141db837 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/*
 * Truncation
 */

._96a11920 {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

._267b811b {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

._59acdf06 {
  -webkit-line-clamp: 1;
}

.d6e34284 {
  -webkit-line-clamp: 2;
}

._0d8cc8cb {
  -webkit-line-clamp: 3;
}

._1346d5b9 {
  -webkit-line-clamp: 4;
}

._431b513a {
  -webkit-line-clamp: 5;
}

._576ac2fa {
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

._37fd416a {
  color: rgb(237, 237, 237);
}

/*
 * Color
 */

/* Text colors */

.b0ebc82e,
.c5f69006 {
  color: rgb(255, 102, 0);
}

.a61d5345 {
  color: rgb(50, 60, 65);
}

.ff613515 {
  color: rgb(111, 118, 122);
}

._3e026989 {
  color: rgb(255, 255, 255);
}

._8f435829 {
  color: rgb(91, 99, 103);
}

._851c82af {
  color: rgb(208, 2, 27);
}

.ddd9e25e {
  color: rgb(166, 166, 166);
}

._7f64d2dc {
  color: inherit;
}

/* Background colors */

.c63e55c9 {
  background-color: white;
}

.f0f90864 {
  background-color: rgb(242, 242, 242);
}

._9a322663 {
  background-color: rgb(241, 239, 238);
}

._861bff37 {
  background-color: rgb(60, 60, 60);
}

.e8c3b4a7 {
  background-color: rgb(237, 234, 227);
}

.cb5e0290 {
  background-color: rgb(202, 195, 187);
}

._9f63c79e {
  background-color: rgb(250, 250, 248);
}

._2d1166dc {
  background-color: rgb(242, 240, 238);
}

.f029cabe {
  background-color: rgb(234, 235, 236);
}

/*
 * Drop shadow
 */

._74ca80d3 {
  -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
          box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
}

._4e894cf7 {
  -webkit-box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
          box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
}

._035f3bda {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.b7e3d372 {
  padding-top: 16px !important;
  padding-top: 1.6rem !important;
}

._226c05ef {
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

.e49ea4db {
  padding-top: 24px;
  padding-top: 2.4rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

._582a7128 {
  padding-left: 16px !important;
  padding-left: 1.6rem !important;
  padding-right: 16px !important;
  padding-right: 1.6rem !important;
}

._810d34ad {
  padding-top: 24px;
  padding-top: 2.4rem;
}

._3eee9e79 {
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

._2d6e144f {
  padding-top: 4px;
  padding-top: 0.4rem;
}

._848b5068 {
  padding-left: 0 !important;
}

._2e7c23a3 {
  padding-bottom: 0 !important;
}

.b0d3f28c {
  padding: 0 !important;
}

._25e9c7fa {
  padding-left: 8px !important;
  padding-left: 0.8rem !important;
}

.d0bd84be {
  padding-right: 24px !important;
  padding-right: 2.4rem !important;
}

/*
 * Shaping
 */

._3d6344bc {
  border-radius: 20rem;
}

._9942edd7 {
  border-radius: 0.4rem;
}

/*
 * list
 */

._5abbc07d {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.d8925c4d {
  text-decoration: none
}

.d8925c4d:hover {
  text-decoration: underline;
}

.c264c15b {
  text-decoration: underline
}

.c264c15b:hover {
  text-decoration: none;
}

.de4c9318 {
  text-decoration: underline;
  -webkit-transition: color 200ms;
  transition: color 200ms
}

.de4c9318:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

._9b858cbe {
  text-transform: none;
}

.b4b339fc {
  border-top: 1px solid rgb(166, 166, 166);
  border-top: 0.1rem solid rgb(166, 166, 166);
}

._174b1f7a {
  padding: 8px;
  padding: 0.8rem;
}

/*
 * Grid
 */

.fdee371d {
  padding-bottom: 40px;
  padding-bottom: 4rem;
}

.d58f04ad {
  padding-bottom: 4px;
  padding-bottom: 0.4rem;
}

@media (max-width: 44.99em) {
  .fdee371d {
    padding-bottom: 2rem;
  }
}

.fdee371d::after,
.d58f04ad::after {
  content: '';
  position: absolute;
  width: calc(100% - 1.8rem);
  height: 1px;
  height: 0.1rem;
  bottom: 0;
  right: 0;
  background: rgb(166, 166, 166);
  margin-left: 24px;
  margin-left: 2.4rem;
}

/*
 * Separators
 */

._8c01740f {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-top: 0.1rem solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  border-bottom: 0.1rem solid rgba(255, 255, 255, .3);
}

.c9ef00a1 {
  margin-top: 30px;
  margin-top: 3rem;
  margin-bottom: 30px;
  margin-bottom: 3rem;
}

._5b83f978 {
  border-color: rgb(237, 237, 237) !important;
}

.a70f30d9 {
  border-color: rgb(166, 166, 166) !important;
}

._2b76532c {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237)
}

._2b76532c:first-child {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
}

._52159cd2 {
  border-bottom: 1px solid rgb(210, 210, 210);
  border-bottom: 0.1rem solid rgb(210, 210, 210)
}

._52159cd2:first-child {
  border-top: 1px solid rgb(210, 210, 210);
  border-top: 0.1rem solid rgb(210, 210, 210);
}

.bd59d7ff {
  border-bottom: 1px solid rgb(60, 60, 60);
  border-bottom: 0.1rem solid rgb(60, 60, 60)
}

.bd59d7ff:first-child {
  border-top: 1px solid rgb(60, 60, 60);
  border-top: 0.1rem solid rgb(60, 60, 60);
}

/*
 * https://webaim.org/techniques/css/invisiblecontent/
 * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_screen-reader.scss
 */

.aaec8332 {
  position: absolute;
  /* stylelint-disable */
  width: 1px;
  height: 1px;
  /* stylelint-enable */
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  border: 0;
}

/**
 * Remove native input clear button.
 * See https://github.com/necolas/normalize.css/commit/f7c98c4c859c15363763f10a439b63d85b9afba0#diff-bb3dde41d97f19be8ab7b4780a915d5e
 */

[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/**
 * Add outline to input boxes when in desktop view to avoid ios safari bug.
 */

.e106bf65 {
  outline: none;
}

@media (min-width: 63.75em) {

  .e106bf65:focus {
    outline: 0.4rem auto -webkit-focus-ring-color;
  }
}

.d64feab4 {
  pointer-events: none;
  cursor: not-allowed;
}

.f43fea1c input[type='number'] {
  -moz-appearance: textfield
}

.f43fea1c input[type='number']::-webkit-inner-spin-button,
  .f43fea1c input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/**
 * Full width content, break out of grid
 */

.df899a4e {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (min-width: 63.75em) {

  .df899a4e {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

.b58ce01e {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  .b58ce01e {
    width: 140rem;
  }
}

._05056e36 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  ._05056e36 {
    width: 100vw;
  }
}

/*
 * Margins
 */

.feaa9554 {
  margin: 0 !important;
}

.bd91fe1e {
  margin-top: 0 !important;
}

._7e5b1933 {
  margin-bottom: 0 !important;
}

._034e7bda {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
}

.ebfdf6a8 {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
}

._6ccaadf5 {
  margin-top: 48px !important;
  margin-top: 4.8rem !important;
}

._011a9028 {
  margin-top: 64px !important;
  margin-top: 6.4rem !important;
}

.a887f9d3 {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
}

._4d4a5528 {
  margin-top: 4px !important;
  margin-top: 0.4rem !important;
}

._4c670d4f {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
}

._1670aac2 {
  margin-top: 20px !important;
  margin-top: 2rem !important;
}

._25e867bc {
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

.eea0ad9f {
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

.a11e32ee {
  margin-bottom: 40px !important;
  margin-bottom: 4rem !important;
}

._36002673 {
  margin-bottom: 48px !important;
  margin-bottom: 4.8rem !important;
}

.ea502e8e {
  margin-bottom: 56px !important;
  margin-bottom: 5.6rem !important;
}

._3f9e90c8 {
  margin-bottom: 64px !important;
  margin-bottom: 6.4rem !important;
}

.c57c3c24 {
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

._22efff55 {
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

._864903b3 {
  margin-bottom: 4px !important;
  margin-bottom: 0.4rem !important;
}

.aed48023 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

._333b33b8 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._6abb0da7 {
  margin-right: 24px;
  margin-right: 2.4rem;
}

._8811f593 {
  margin-right: 32px;
  margin-right: 3.2rem;
}

._8ac1b888 {
  margin-left: 32px;
  margin-left: 3.2rem;
}

.a5cbdc16 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

.bb054ae2 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

._8d0d824b {
  margin-left: 24px;
  margin-left: 2.4rem;
}

._0706a93d {
  margin-left: auto !important;
  margin-right: auto !important;
}

._7d603098 {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

._799172ce {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

._2941ce1f {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

.a5994d40 {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

/* Font Face */

.a382e2d5 {
  font-family: 'GoodHome-Light', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._734b84eb {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._219809ee {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.f02e1518 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}

@media (max-width: 44.99em) {

  .f02e1518 {
    max-height: 8.8rem;
  }
}

.ff4b5bda {
  max-width: 50%;
  margin-left: auto;
  padding-left: 8px;
  padding-left: 0.8rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 44.99em) {

  .ff4b5bda {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding-left: 0;
  }
}

._5bebd307 {
}

._4b5adf30 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

@media (max-width: 44.99em) {

  ._4b5adf30 {
    display: none;
  }
}

._055b9146 {
  width: 256px;
  width: 25.6rem;
  margin: 0;
}

@media (max-width: 44.99em) {

  ._055b9146 {
    min-width: 13.6rem;
  }
}

._3ccdf0c4 {
}

._3c82c5f3 {
  display: block;
  width: 56px;
  width: 5.6rem;
  height: 56px;
  height: 5.6rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media (max-width: 44.99em) {

  ._3c82c5f3 {
    display: none;
  }
}

.f2d7a9c6 {
  font-size: 16px;
  font-size: 1.6rem;
  width: 100%;
}

._310a2672 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style-type: none;
  padding-left: 0;
  margin: 8px 0;
  margin: 0.8rem 0;
}

._5a2aed0d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 32px 0 0;
  margin: 0 3.2rem 0 0;
  text-decoration: none;
  font-size: 14px;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0;
}

.cf64abd4 {
  margin-right: 4px;
  margin-right: 0.4rem;
}

._91a3255b {
  height: 100%;
}

.d56c61da {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 8px 16px 16px;
  padding: 0.8rem 1.6rem 1.6rem;
}

._2eb230b4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc(100% - 7.2rem);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-line-pack: center;
      align-content: center;
}

._7d0be60d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  margin-top: 24px;
  margin-top: 2.4rem;
}

@media (max-width: 44.99em) {

  ._7d0be60d {
    display: none;
  }
}

._905185a4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0 16px;
  padding: 0 1.6rem;
  border-top: 1px solid rgb(237, 237, 237);
}

@media (max-width: 44.99em) {

  ._905185a4 {
    display: none;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._78bdec5c > :last-child {
  border-bottom: 1px solid rgb(210, 210, 210);
  border-bottom: 0.1rem solid rgb(210, 210, 210);
}

._263a27f8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  border-top: 1px solid rgb(210, 210, 210);
  border-top: 0.1rem solid rgb(210, 210, 210);
  padding: 16px 0;
  padding: 1.6rem 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.c1012316 {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

@media (min-width: 63.75em) {

  .c1012316 {
    margin: 0 1.2rem;
  }
}

@media (min-width: 45em) and (max-width: 63.74em) {

  .d523d016 {
    margin: 0 -2rem;
  }
}

._1883b01b {
  margin: 0 auto;
  max-width: 1400px;
  max-width: 140rem;
}

._497ba64e,
._497ba64e[disabled] {
  background-color: transparent;
}

._497ba64e svg {
  fill: rgb(50, 60, 65);
}

@media (max-width: 44.99em) {

  .b69517b5 {
    display: none;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (min-width: 63.75em) {

  ._237c461d > div {
    padding-left: 0;
    padding-right: 0;
  }
}

._3de735c4 {
  margin: 0 32px;
  margin: 0 3.2rem;
}

@media (min-width: 63.75em) {

  ._3de735c4 {
    margin: 3.2rem 0 0;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

._0dfa0895 {
  z-index: 1;
}

.e49f981a {
  z-index: 80;
}

._8e2444a2 {
  z-index: 80;
}

.a8d1179f {
  z-index: 90;
}

.a86d7fb4 {
  z-index: 115;
}

._833cf4f0 {
  z-index: 1000;
}

._2cff4005 {
  z-index: 1100;
}

._1ee2ac89 {
  z-index: 10000;
}

.e668ab58 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  background: rgb(255, 255, 255);
}

._2329f4bf {
  position: relative;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  padding: 16px;
  padding: 1.6rem;
  min-height: 32px;
  min-height: 3.2rem;
}

._3d6c8298 {
  margin-left: auto;
}

._02a3ded1 {
  width: 32px;
  width: 3.2rem;
  height: 32px;
  height: 3.2rem;
  cursor: pointer;
}

.e23ef12c {
  margin: auto 0;
}

.c114f783 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.c2fdfaac {
  text-align: right;
}

.d3eab9d2 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  font-weight: 600;
}

._9449fd71 {
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 15px;
  line-height: 1.5rem;
  color: rgb(111, 118, 122);
  text-decoration: line-through;
  font-weight: 300;
}

._3d24b67b {
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 15px;
  line-height: 1.5rem;
  color: rgb(111, 118, 122);
  text-decoration: line-through;
  font-weight: 300;
}

.e004be72 {
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 15px;
  line-height: 1.5rem;
  margin: 0.6em 0;
  font-weight: 600;
}

.fe8dac6b {
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 15px;
  line-height: 1.5rem;
  color: rgb(111, 118, 122);
  font-weight: 300;
  white-space: nowrap;
}

._2d96ac80 {
  display: inline-block;
  white-space: pre;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._6f69be77 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.b5448e65 {
  display: inline-block;
  width: 48px;
  width: 4.8rem;
}

.b5448e65 input {
    text-align: center;
  }

.f7a31dc4 {
  width: 40px;
  width: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._0ac1aaf1 {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._94f9ca76 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
}

.e4661ec7 {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  -ms-flex-preferred-size: 30.3%;
      flex-basis: 30.3%; /* ~104px wide when the viewport width is 375px */
  max-width: 115px;
  max-width: 11.5rem;
  padding-top: 0;
  margin-right: 16px;
  margin-right: 1.6rem;
}

.e4661ec7 img {
    -o-object-fit: scale-down;
       object-fit: scale-down;
  }

.faa92180 {
  -ms-flex-preferred-size: 23.3%;
      flex-basis: 23.3%; /* ~80px wide when the viewport width is 375px */
}

.a1a157dd {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

._38e64d76 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._5b7ae38c {
  margin-bottom: 0;
  min-height: 48px;
  min-height: 4.8rem;
}

.def38c88 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.c45539db {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.fad529ab {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

.fad529ab .e4661ec7 {
    min-height: 168px;
    min-height: 16.8rem;
    max-width: 168px;
    max-width: 16.8rem;
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.fad529ab .def38c88 {
    margin-top: 4px;
    margin-top: 0.4rem;
  }

@media (min-width: 45em) {
  .b1ce5619 {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1.6rem;
  }
  ._58f04aab {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  ._58f04aab .e4661ec7 {
    min-height: 16.8rem;
    max-width: 16.8rem;
    margin-bottom: 1.6rem;
  }
  ._58f04aab .def38c88 {
    margin-top: 0.4rem;
  }

  ._38e64d76 {
    display: block;
  }
}

._9666912f {
  margin-bottom: 0;
}

._71817548 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.d4f3891c {
  text-align: left;
  margin-right: auto;
}

.b16ace4d {
  text-align: right;
  margin-left: auto;
  margin-top: 8px;
  margin-top: 0.8rem;
}

._3b0d408d {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
  font-weight: 600;
}

._3cee43ed {
  display: inline;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  color: rgb(111, 118, 122);
  text-decoration: line-through;
  font-weight: 300;

  /*
   Only on was price, otherwise content can overflow container
   */
  white-space: nowrap;
}

.d92071a9 {
  display: inline;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  color: rgb(111, 118, 122);
  text-decoration: line-through;
  font-weight: 300;
  margin-right: 0.5em;
}

._9047e2e7 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  font-weight: 600;
  color: rgb(255, 102, 0);
}

._8afa76c8 {
  margin-top: 8px;
  margin-top: 0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._6ae81cef {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._0b4870a1,
._09666d7e {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

._3051adb3 .c6028e0d,
  ._3051adb3 ._09666d7e,
  ._3051adb3 ._0b4870a1,
  ._3051adb3 .c6028e0d,
  ._3051adb3 ._09666d7e,
  ._3051adb3 ._0b4870a1 {
    width: 100%;
  }

._3051adb3 .c6028e0d,
  ._3051adb3 ._0b4870a1,
  ._3051adb3 .c6028e0d,
  ._3051adb3 ._0b4870a1 {
    padding-bottom: 16px;
    padding-bottom: 1.6rem;
  }

._3051adb3 ._6ae81cef, ._3051adb3 ._6ae81cef {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

._3051adb3 ._0b4870a1, ._3051adb3 ._0b4870a1 {
    padding-bottom: 16px;
    padding-bottom: 1.6rem;
  }

@media (min-width: 45em) {

  ._3051adb3 ._6ae81cef, ._3051adb3 ._6ae81cef {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
  }

  ._3051adb3 ._09666d7e, ._3051adb3 ._09666d7e {
      width: 30%;
  }

  ._3051adb3 ._0b4870a1, ._3051adb3 ._0b4870a1 {
      padding: 0;
      width: 70%;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.cf276ac5 {
  width: 100%;
  height: auto;
  border-radius: 0;
}

@media (min-width: 45em) {

  .cf276ac5 {
    width: 60rem;
    /* Modal content is not scrollable in IE11 with height: auto */
  }
}

@media (min-width: 45em) and (-ms-high-contrast: active),
  (-ms-high-contrast: none) {

  .cf276ac5 {
    height: 100%;
  }
}

._7341b159 {
  padding: 0;
}

._17d21499 {
  padding: 16px;
  padding: 1.6rem;
}

@media (min-width: 45em) {

  ._17d21499 {
    padding: 1.6rem 2.4rem;
  }
}

.a183176a {
  padding-top: 24px;
  padding-top: 2.4rem;
}

._3c3a7e83 {
  background: rgb(239, 240, 240);
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
  color: inherit;
}

@media (min-width: 45em) {

  ._3c3a7e83 {
    color: rgb(50, 60, 65);
  }
}

._0ea50da5 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

@media (min-width: 45em) {

  ._0ea50da5 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}

._3a0f7290 {
  padding-top: 24px;
  padding-top: 2.4rem;
}

._8cfccb66 {
  width: 104px;
  width: 10.4rem;
  height: 104px;
  height: 10.4rem;
}

@media (min-width: 45em) {

  ._8cfccb66 {
    width: 12.8rem;
    height: 12.8rem;
  }
}

.b02c010a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-right: 24px;
  padding-right: 2.4rem;
}

@media (min-width: 45em) {

  .b02c010a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

.fe8ed67b {
  max-width: 256px;
  max-width: 25.6rem;
}

._74cc6b7a {
  padding-top: 8px;
  padding-top: 0.8rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

.e5d52179 {
  border: solid rgb(173, 177, 179);
  border-width: 2px !important;
  border-width: 0.2rem !important;
  -webkit-box-shadow: none;
          box-shadow: none;
}

._26a46996 {
  border-radius: 0;
}

.ecf320fe::before {
  padding-top: 6px;
  padding-top: 0.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Should match styles in kits-bbm-ui-library/src/web/components/button/styles.css */

  /* Compute size of the continue button banner */
}

._1f6250b0 {
  margin-bottom: 62px;
  margin-bottom: 6.2rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.c33b167b p {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

._33156304 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._8f1fe0aa i {
    width: 28px;
    width: 2.8rem;
    height: 28px;
    height: 2.8rem;
    margin-right: 28px;
    margin-right: 2.8rem;
  }

._8f1fe0aa input:checked + i circle:last-of-type {
    fill: rgb(255, 102, 0);
  }

._06d69fcc {
  margin-top: 16px;
  margin-top: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._8ba750c9 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  position: relative;
}

._0baf294d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: rgb(251, 230, 229);
}

._3a7aca84 {
  margin: 0;
  padding: 16px;
  padding: 1.6rem;
  padding-left: 8px;
  padding-left: 0.8rem;
}

.a8c9ee50 ._3a7aca84 {
  padding-right: 48px;
  padding-right: 4.8rem;
}

.a1c8ed77 {
  padding-top: 12px;
  padding-top: 1.2rem;
  padding-left: 8px;
  padding-left: 0.8rem;
}

._618c0ce2 > ._0baf294d {
  background-color: rgb(254, 245, 228);
}

._3fbd1f3e > ._0baf294d {
  background-color: rgb(241, 248, 229);
}

._5dcce287 {
  position: absolute;
  top: 16px;
  top: 1.6rem;
  right: 16px;
  right: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._856d069b {
  text-align: justify;
}

._856d069b p {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 16px;
    line-height: 1.6rem;
  }

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

.eea234be {
  margin-top: 24px;
  margin-top: 2.4rem;
}

._53d2cd53 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

.c71a2242 {
  white-space: nowrap;
  margin-left: 12px;
  margin-left: 1.2rem;
}

._63766d9c {
  margin-top: 0;
}

._0d959597 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

@media (min-width: 45em) {

  ._0d959597 {
    margin-top: -1.2rem;
    margin-bottom: 1.6rem;
  }
}

._056960ff {
  margin-top: 32px;
  margin-top: 3.2rem;
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

@media (min-width: 45em) {

  ._056960ff {
    margin-top: 2.4rem;
  }
}

._518604e6 {
  padding: inherit
}

._518604e6 > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 12px;
  margin-bottom: 1.2rem;
}

.a4a21e39 {
  margin-bottom: 12px;
  margin-bottom: 1.2rem;
}

.a2a170e7 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._8b42ea88 {
  color: rgb(208, 2, 27);
  margin: 4px 0;
  margin: 0.4rem 0;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 20px;
  line-height: 2rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._97bbb82d {
  margin-top: 48px;
  margin-top: 4.8rem
}

._97bbb82d.d02388d1 {
  margin-top: 16px;
  margin-top: 1.6rem;
}

@media (min-width: 45em) {

  ._97bbb82d {
    margin-top: 0;
  }
}

._450d19e7 {
  margin-top: 32px;
  margin-top: 3.2rem
}

._450d19e7.d02388d1 {
  margin-top: 16px;
  margin-top: 1.6rem;
}

@media (min-width: 45em) {

  ._450d19e7 {
    margin-top: 2.4rem;
  }

  ._450d19e7.d02388d1 {
    margin-top: 2.4rem;
  }
}

._24cc7cda {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

@media (min-width: 45em) {

  ._24cc7cda {
    margin-bottom: 1.6rem;
  }
}

._45d5bee4 {
  display: none;
}

@media (min-width: 45em) {

  ._45d5bee4 {
    display: block;
    text-align: center;
    margin: 2.4rem 0;
  }
}

@media (min-width: 45em) {

  .be4e4aa2 {
    margin-bottom: 2.4rem;
  }
}

._7100b825 {
  text-align: center;
  padding-top: 16px;
  padding-top: 1.6rem;
}

@media (min-width: 45em) {

  ._7100b825 {
    padding-top: 0.8rem;
    margin-bottom: 3.2rem;
  }
}

.f45d47ed {
  margin: auto;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (min-width: 45em) {

  ._97579169 {
    font-size: 2.6rem;
  }
}

._110d43e6 {
  width: 100%;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

.bf86be79 {
  border-top: 1px solid rgb(214, 216, 217);
  border-top: 0.1rem solid rgb(214, 216, 217);
}

.bf86be79:last-child {
  border-bottom: 1px solid rgb(214, 216, 217);
  border-bottom: 0.1rem solid rgb(214, 216, 217);
}

._81f2890a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 0 16px;
  padding: 0 1.6rem;
  height: 56px;
  height: 5.6rem;
}

._0f5074ba {
  border-bottom: 1px solid rgb(214, 216, 217);
  border-bottom: 0.1rem solid rgb(214, 216, 217);
}

.f14c7879 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._4fe9fb1d {
  cursor: pointer;
  height: 40px;
  height: 4rem;
  width: 40px;
  width: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.dbb9a029 {
  margin: 0 -16px 16px;
  margin: 0 -1.6rem 1.6rem;
  padding: 0 16px 48px 0;
  padding: 0 1.6rem 4.8rem 0;
  border-bottom: 8px solid rgb(237, 237, 237);
  border-bottom: 0.8rem solid rgb(237, 237, 237);
  -webkit-box-sizing: border-box;
          box-sizing: border-box
}

.dbb9a029:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}

@media (min-width: 63.75em) {

  .dbb9a029 {
    margin: 0 -3.2rem 1.6rem;
    padding: 0 3.2rem 4.8rem
      0.8rem;
  }
}

._556fac03 {
  height: 450px;
  height: 45rem;
}

@media (min-width: 63.75em) {

  ._556fac03 {
    height: 50rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

.c4980192 {
  background-color: rgb(255, 255, 255);
  background-image: url('/spa/content/diyStore/img/chevron_pattern.svg');
  background-size: cover;
}

._600b5a19 {
  cursor: pointer;
  text-decoration: none;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._3b2d2dac {
  margin: auto;
  color: rgb(255, 102, 0);
  background-color: rgb(255, 255, 255);
  height: 100%;
}

._8ef22274 {
  position: relative;
  width: 100%;
  height: 40%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

.b4db249a {
  height: 60%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 24px;
  padding: 2.4rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._0f2610b3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

._0c578a00 {
  word-break: break-word;
}

.cc40d02b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 0;
  color: rgb(50, 60, 65);
}

._2c270461 {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._277f01de {
  margin: 0;
  margin-bottom: 16px;
  margin-bottom: 1.6rem
}

._277f01de:last-of-type {
  margin-bottom: 0;
}

._30c98d99 {
  width: 100%;
  color: rgb(50, 60, 65);
  margin-top: 16px;
  margin-top: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.ccaedeb8 {
  height: 450px;
  height: 45rem;
}

@media (min-width: 63.75em) {

  .ccaedeb8 {
    height: 50rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._65c36b7d {
  display: block;
  margin: 16px auto;
  margin: 1.6rem auto;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

.b1808362 {
  border-top: 1px solid rgb(214, 216, 217);
  border-top: 0.1rem solid rgb(214, 216, 217);
}

.b1808362:last-child {
  border-bottom: 1px solid rgb(214, 216, 217);
  border-bottom: 0.1rem solid rgb(214, 216, 217);
}

._9bc4a5c3 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 0 16px;
  padding: 0 1.6rem;
  height: 56px;
  height: 5.6rem;
}

.d709233f {
  border-bottom: 1px solid rgb(214, 216, 217);
  border-bottom: 0.1rem solid rgb(214, 216, 217);
}

._56c12a70 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._5b08272b {
  cursor: pointer;
  height: 40px;
  height: 4rem;
  width: 40px;
  width: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._89e743c7 {
  margin: 0 -16px 16px;
  margin: 0 -1.6rem 1.6rem;
  padding: 0 16px 16px 0;
  padding: 0 1.6rem 1.6rem 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box
}

._89e743c7:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}

@media (min-width: 63.75em) {

  ._89e743c7 {
    margin: 0 -3.2rem 1.6rem;
    padding: 0 3.2rem 1.6rem 0.8rem;
  }
}

._0c7e01e4 {
  height: 450px;
  height: 45rem;
}

@media (min-width: 63.75em) {

  ._0c7e01e4 {
    height: 50rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

.c58b9c21 {
  border-top: 1px solid rgb(214, 216, 217);
  border-top: 0.1rem solid rgb(214, 216, 217);
}

.c58b9c21:last-child {
  border-bottom: 1px solid rgb(214, 216, 217);
  border-bottom: 0.1rem solid rgb(214, 216, 217);
}

.ae99576f {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 0 16px;
  padding: 0 1.6rem;
  height: 56px;
  height: 5.6rem;
}

._5ced1c19 {
  border-bottom: 1px solid rgb(214, 216, 217);
  border-bottom: 0.1rem solid rgb(214, 216, 217);
}

.cd671d47 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._21e08f29 {
  cursor: pointer;
  height: 40px;
  height: 4rem;
  width: 40px;
  width: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._61b0c28b {
  margin: 0 -16px 16px;
  margin: 0 -1.6rem 1.6rem;
  padding: 0 16px 48px 0;
  padding: 0 1.6rem 4.8rem 0;
  border-bottom: 8px solid rgb(237, 237, 237);
  border-bottom: 0.8rem solid rgb(237, 237, 237);
  -webkit-box-sizing: border-box;
          box-sizing: border-box
}

._61b0c28b:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}

@media (min-width: 63.75em) {

  ._61b0c28b {
    margin: 0 -3.2rem 1.6rem;
    padding: 0 3.2rem 4.8rem
      0.8rem;
  }
}

.f0f0ae5f {
  height: 450px;
  height: 45rem;
}

@media (min-width: 63.75em) {

  .f0f0ae5f {
    height: 50rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._121f4755 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 40px;
  margin-bottom: 4rem;
}

._65ed745e {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.a6727e69 {
  margin: auto;
  color: rgb(255, 102, 0);
  background-color: rgb(255, 255, 255);
  height: 100%;
}

.cf888de9 {
  position: relative;
  width: 100%;
  height: 50%;
  background-size: cover;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
}

.cf888de9 > div {
    margin: auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }

@media (min-width: 45em) {

  .cf888de9 {
    height: 45%;
  }
}

@media (min-width: 63.75em) {

  .cf888de9 {
    height: 50%;
  }
}

.cae817cf {
  width: 100%;
  position: absolute;
}

._9f42ab8d {
  z-index: 1;
}

.ac59ac81 {
  color: rgb(50, 60, 65);
  -ms-flex-item-align: end;
      align-self: flex-end;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

.dca515d0 {
  margin: 0 0 16px;
  margin: 0 0 1.6rem;
  padding-bottom: 32px;
  padding-bottom: 3.2rem;
  border-bottom: 2px solid rgb(228, 225, 221);
  border-bottom: 0.2rem solid rgb(228, 225, 221);
}

.dca515d0 div {
    padding: 0;
  }

.dfe6ba29 {
  display: inline-block;
  padding-bottom: 8px;
  padding-bottom: 0.8rem;
  border-bottom: 4px solid rgb(50, 60, 65);
  border-bottom: 0.4rem solid rgb(50, 60, 65);
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._875e041c {
  height: 146px;
  height: 14.6rem;
}

@media (min-width: 45em) {

  ._875e041c {
    height: 35rem;
  }
}

@media (min-width: 63.75em) {

  ._875e041c {
    height: 38rem;
  }
}

.ec50043d {
  height: 146px;
  height: 14.6rem;
}

@media (min-width: 45em) {

  .ec50043d {
    height: 35rem;
  }
}

@media (min-width: 63.75em) {

  .ec50043d {
    height: 38rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._0cde49dd {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  padding: 24px;
  padding: 2.4rem;
  text-align: left;
}

@media (min-width: 45em) {

  ._0cde49dd {
    padding: 3.2rem;
  }
}

@media (min-width: 63.75em) {

  ._0cde49dd {
    margin-bottom: 1.6rem;
  }
}

@media (max-width: 44.99em) {

  .f2747fc3 {
    padding: 0;
  }
}

._0ba6f4dd {
  width: 100%;
}

@media (min-width: 63.75em) {

  ._0ba6f4dd {
    width: 30rem;
  }
}

._5c704d34 {
  background-color: rgb(255, 255, 255) !important;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 536px;
  max-width: 53.6rem;
  padding: 16px;
  padding: 1.6rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 45em) {

  ._5c704d34 {
    padding: 3.2rem;
  }
}

@media (min-width: 63.75em) {

  ._5c704d34 {
    -ms-flex-item-align: start;
        align-self: flex-start;
    margin-left: 2.4rem;
    max-width: none;
  }
}

._91928772 {
  margin-bottom: 0;
}

h1._309b175d {
  margin: 0 auto 24px;
  margin: 0 auto 2.4rem;
  max-width: 536px;
  max-width: 53.6rem;
  width: 100%;
}

@media (min-width: 63.75em) {

  h1._309b175d {
    max-width: none;
  }
}

@media print {
  * {
    -webkit-print-color-adjust: exact;
  }

  header,
  footer,
  ._8741cf97,
  div._879e8bab {
    display: none;
    visibility: hidden;
  }

  ._05aa5fdd {
    display: none;
  }
}

._879e8bab {
  margin-left: auto;
  margin-right: auto;
  max-width: 536px;
  max-width: 53.6rem;
}

._9c38a863 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._612c94d2 {
  border: 0;
  overflow: hidden;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  padding: 0;
}

.bdb30b80 {
  margin-right: 16px;
  margin-right: 1.6rem;
  vertical-align: middle;
  width: 24px;
  width: 2.4rem;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

._7301b0ff {
  height: 30px;
  height: 3rem;
  width: 48px;
  width: 4.8rem;
}

._7301b0ff svg {
    overflow: visible;
  }

._1a3513c8 {
  padding-left: 16px;
  padding-left: 1.6rem;
  padding-right: 16px;
  padding-right: 1.6rem;
}

.cc819b0b {
  position: absolute;
  left: 50%;
  margin: 0 0 0 -10px;
  margin: 0 0 0 -1rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._5adf816f {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  padding: 24px;
  padding: 2.4rem;
  text-align: left;
}

@media (min-width: 45em) {

  ._5adf816f {
    padding: 3.2rem;
  }
}

@media (min-width: 63.75em) {

  ._5adf816f {
    margin-bottom: 1.6rem;
  }
}

@media (max-width: 44.99em) {

  .f85a2fb0 {
    padding: 0;
  }
}

._0c14efda {
  width: 100%;
}

@media (min-width: 63.75em) {

  ._0c14efda {
    width: 30rem;
  }
}

._53894554 {
  background-color: rgb(255, 255, 255) !important;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 536px;
  max-width: 53.6rem;
  padding: 16px;
  padding: 1.6rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 45em) {

  ._53894554 {
    padding: 3.2rem;
  }
}

@media (min-width: 63.75em) {

  ._53894554 {
    -ms-flex-item-align: start;
        align-self: flex-start;
    margin-left: 2.4rem;
    max-width: none;
  }
}

.ee2d413b {
  margin-bottom: 0;
}

h1._76fdeb37 {
  margin: 0 auto 24px;
  margin: 0 auto 2.4rem;
  max-width: 536px;
  max-width: 53.6rem;
  width: 100%;
}

@media (min-width: 63.75em) {

  h1._76fdeb37 {
    max-width: none;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.de94b930 {
  max-width: 352px;
  max-width: 35.2rem;
}

@media (min-width: 63.75em) {

  .de94b930 {
    max-width: 36.8rem;
  }
}

@media (min-width: 63.75em) {

  .de94b930 > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._513af456 {
  color: rgb(237, 237, 237);
  max-width: 320px;
  max-width: 32rem;
  margin-top: 16px;
  margin-top: 1.6rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._0d9a33f1 {
  padding-top: 12px;
  padding-top: 1.2rem;
  padding-bottom: 12px;
  padding-bottom: 1.2rem;
  margin: 24px 0;
  margin: 2.4rem 0;
}

._3d199d15 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

@media (min-width: 45em) {

  ._3d199d15 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

@media (min-width: 63.75em) {

  ._3d199d15 {
    margin-bottom: 3.2rem;
  }
}

.f9512cbe {
  padding-left: 16px;
  padding-left: 1.6rem;
  padding-right: 16px;
  padding-right: 1.6rem;
}

.c385f920 {
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

@media (min-width: 45em) {

  .c385f920 {
    margin-bottom: 0;
  }
}

.c385f920:last-child {
  /* for cases when we render without the add address button */
  margin-bottom: 0;
}

._65ef696d {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.e104936c {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (max-width: 44.99em) {

  .e104936c {
    margin-bottom: 2.4rem;
  }
}

._5c90e47e {
  max-width: 100%;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._804d0ca7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: -webkit-transform 1s;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  cursor: pointer;
}

._2da264c3 {
  -webkit-perspective: 50rem;
          perspective: 50rem;
}

.f0583dc4 {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 1.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 100%;
}

._6d1bfea9 {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  background-color: rgb(255, 102, 0);
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-transform: rotateY(180deg) translate(100%, 0);
          transform: rotateY(180deg) translate(100%, 0);
}

.fc392a9c {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

._9e064453 {
  background-color: white;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  margin: 16px;
  margin: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

@media (min-width: 45em) {

  .b3f152de {
    margin-bottom: 2.4rem;
  }
}

.b8310e51 {
  max-width: 320px;
  max-width: 32rem
}

.b8310e51::before {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

@media (min-width: 63.75em) {

  .b8310e51::before {
    margin-bottom: 1.6rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.a95c45d1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

._65bc007a {
  margin-left: 8px;
  margin-left: 0.8rem;
  height: 100%;
}

._27ca65a7 {
  /* Represents a group of cards. On mobile, groups become one long column,
   * such that you aren't aware that they exist. On tablet and desktop, each
   * group is on it's own row. */

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (min-width: 63.75em) {

  ._27ca65a7 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

._61c8a458 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;

  /* On tablet and upwards, we have rows rather than a single column. We need to
   * introduce spacing between cards, excepting the last one! */
}

@media (min-width: 63.75em) {

  ._61c8a458 {
    max-width: calc(50% - 1.6rem);
    margin-right: 3.2rem;
    margin-bottom: 3.2rem;
  }

  ._61c8a458:nth-child(even) {
    margin-right: 0;
  }
}

._091898b2 {
  margin-bottom: 0;
  word-wrap: break-word;
  word-break: break-word;
}

.d2d64a7f {
  opacity: 0.4;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.c64c76b6 {
  margin-top: 32px;
  margin-top: 3.2rem;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

@media (min-width: 63.75em) {

  .c64c76b6 {
    margin-bottom: 4.8rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.e486728e {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  color: rgb(91, 99, 103);
}

._529c4b22 {
    color: rgb(121, 184, 67);
  }

._22f3051f {
    color: rgb(208, 2, 27);
    margin-top: 8px;
    margin-top: 0.8rem;
  }

._3b5c097f {
  color: currentColor;
}

._90c0fcb2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 8px;
  margin-top: 0.8rem;
}

._8de2ee5e {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    text-align: right;
  }

._1cc50b61 {
  position: relative;
  height: 4px;
  height: 0.4rem;
  width: 100%;
  background-color: currentColor
}

._1cc50b61::before,
  ._1cc50b61::after {
  content: '';
  position: absolute;
}

._1cc50b61::before {
  left: 0;
  border-top: 2px solid transparent;
  border-top: 0.2rem solid transparent;
  border-bottom: 2px solid transparent;
  border-bottom: 0.2rem solid transparent;
  border-left: 2px solid rgb(255, 255, 255);
  border-left: 0.2rem solid rgb(255, 255, 255);
}

._1cc50b61::after {
  right: -2px;
  right: -0.2rem;
  border-top: 2px solid transparent;
  border-top: 0.2rem solid transparent;
  border-bottom: 2px solid transparent;
  border-bottom: 0.2rem solid transparent;
  border-left: 2px solid currentColor;
  border-left: 0.2rem solid currentColor;
}

._811effcd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  min-width: 70px;
  min-width: 7rem;
}

@media (min-width: 45em) {

  ._811effcd {
    min-width: 8.2rem;
  }
}

._811effcd + ._811effcd {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._746bf67d ._1cc50b61 {
      color: rgb(255, 102, 0);
    }

._746bf67d p {
      color: rgb(255, 102, 0);
    }

.a4bd4564 ._1cc50b61 {
      color: rgb(111, 118, 122);
    }

.a4bd4564 p {
      color: rgb(111, 118, 122);
    }

._94bba725._811effcd + ._94bba725._811effcd {
    margin-left: 0;
    margin-right: 16px;
    margin-right: 1.6rem;
  }

._94bba725 ._1cc50b61::before {
  left: -2px;
  left: -0.2rem;
  border-left: none;
  border-right: 2px solid currentColor;
  border-right: 0.2rem solid currentColor;
}

._94bba725 ._1cc50b61::after {
  right: 0;
  border-left: none;
  border-right: 2px solid rgb(255, 255, 255);
  border-right: 0.2rem solid rgb(255, 255, 255);
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._2064b356 {
  line-height: 24px;
  line-height: 2.4rem;
  color: rgb(255, 102, 0);
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
}

._2064b356:disabled {
  color: rgb(166, 166, 166);
}

._7738bd2a {
  display: inline-block;
  vertical-align: middle;
  padding-right: 16px;
  padding-right: 1.6rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.d347a16a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 44.99em) {

  .d347a16a {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

@media (max-width: 44.99em) {

  ._4f3daedf {
    width: 100%;
    text-align: center;
    margin-top: 0.8rem;
  }
}

.b6754ea9 {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

@media (max-width: 44.99em) {

  .b6754ea9 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

._28c41a28 {
  line-height: 24px;
  line-height: 2.4rem;
  color: rgb(255, 102, 0);
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 0 16px;
  padding: 0 1.6rem;
}

@media (max-width: 44.99em) {

  ._28c41a28 {
    margin-top: 1.6rem;
  }
}

._74d0abeb {
  color: rgb(166, 166, 166);
}

._29773601 {
  display: inline-block;
  vertical-align: middle;
}

.c11085ef {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  -ms-flex-item-align: center;
      align-self: center;
  margin-top: 16px;
  margin-top: 1.6rem;
}

@media (min-width: 45em) {

  .c11085ef {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
    padding-right: 1.6rem;
    margin-top: 0;
    margin-bottom: 1.6rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._652859ab {
  margin-top: 32px;
  margin-top: 3.2rem;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

@media (min-width: 63.75em) {

  ._652859ab {
    margin-bottom: 1.6rem;
  }
}

._50fbd66a {
  margin-top: 24px;
  margin-top: 2.4rem;
  margin-bottom: -8px;
  margin-bottom: -0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.d4f02964 {
  max-width: none;
  min-width: 0;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) {

  .d4f02964 {
    max-width: 35.2rem;
    margin-bottom: 0.8rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._82f4da48 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media (min-width: 45em) {

  ._82f4da48 {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}

._75b6c233 {
  margin-right: 40px;
  margin-right: 4rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._82f4da48 section {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  min-width: 100%;
}

@media (min-width: 45em) {

  ._82f4da48 section {
    min-width: 0;
    margin-right: 1.6rem;
  }
}

._82f4da48 section:first-of-type {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

@media (min-width: 45em) {

  ._82f4da48 section:first-of-type {
    margin-bottom: 0;
  }
}

@media (min-width: 45em) {

  ._9e9767e7 {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%;
  }
}

._018f8477 {
  margin: 0;
  padding: 0;
  padding-top: 8px;
  padding-top: 0.8rem;
}

@media (min-width: 45em) {

  ._018f8477 {
    width: 2rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 0;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._9ed717d8 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.a6260624 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.c055dfd1 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) {

  .c055dfd1 {
    margin-bottom: 0.8rem;
  }
}

._74bf9d61 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

.ed1ad38c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: right;
}

@media (min-width: 45em) {

  .ed1ad38c {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    text-align: left;
  }
}

._47866960 {
  display: none;
}

@media (min-width: 45em) {

  ._47866960 {
    display: block;
  }
}

._0c1f0095 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) {

  ._0c1f0095 {
    margin-bottom: 2.4rem;
  }
}

.f58babdc {
  margin-bottom: 20px;
  margin-bottom: 2rem;
}

._4ba86e44 {
  color: rgb(111, 118, 122);
}

@media (min-width: 45em) {

  ._4ba86e44 {
    color: inherit;
  }
}

._9da8ef95 {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._061723ac {
  margin-top: 16px;
  margin-top: 1.6rem;
  margin-bottom: 32px;
  margin-bottom: 3.2rem;
}

@media (min-width: 45em) {

  ._061723ac {
    margin-top: 2.4rem;
    margin-bottom: 2.4rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.ead0abed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._93448cd7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline
}

._93448cd7._36bad4f7 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

@media (max-width: 44.99em) {
  .ead0abed,
  ._93448cd7 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  ._98b64aaf {
    width: 100%;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.bd0bf549 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 16px 24px;
  padding: 1.6rem 2.4rem;
  border: 1px solid rgb(152, 157, 160);
  border: 0.1rem solid rgb(152, 157, 160);
  border-radius: 0.4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.be235afb {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

@media (min-width: 45em) {

  .be235afb {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

._0ec7e5b6 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media (min-width: 45em) {

  .e878df7e {
    margin-bottom: 0;
  }
}

._4528bec3 {
  max-width: none;
  height: 44px;
  height: 4.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0;
  margin-right: 0;
}

@media (min-width: 45em) {

  ._4528bec3 {
    max-width: 19.2rem;
  }
}

._24f4efeb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (min-width: 45em) {

  ._24f4efeb {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (max-width: 44.99em) {

  .e836af57 {
    width: 100%;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._6effb479 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

@media (min-width: 63.75em) {

  ._6effb479 {
    margin-bottom: 3.2rem;
  }
}

._24d5d3cc {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

@media (min-width: 45em) {

  ._24d5d3cc {
    margin-bottom: 0;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._853f377b {
  padding-left: 16px;
  padding-left: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) {

  ._853f377b {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  ._853f377b:last-child {
    margin-bottom: 0;
  }
}

._5b86a457 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  word-break: break-all;
}

@media (min-width: 45em) {

  ._5b86a457 {
    -ms-flex-item-align: center;
        align-self: center;
    margin-bottom: 0;
    padding-right: 1.6rem;
  }
}

.bb9f9942 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media (min-width: 45em) {

  ._6af26ea9 {
    padding-right: 6.4rem;
    padding-left: 6.4rem;
  }
}

._0890cfaf {
  cursor: pointer;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

@media (min-width: 45em) {

  .da230b72 {
    border-top: 0.1rem solid rgb(237, 237, 237);
  }
}

.c5eec5dd {
  padding-right: 0;
}

@media (min-width: 45em) {

  .c5eec5dd {
    padding: 2.4rem;
    padding-right: 1.6rem;
  }
}

.ccac6067 {
  margin-right: 0;
}

.ccac6067[disabled],
.ccac6067[disabled]:hover {
  background: rgb(205, 205, 205);
  color: rgb(149, 154, 157);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/*
 * z-index
 */

.ac83d409 {
  z-index: 1;
}

.df2dcd09 {
  z-index: 80;
}

._1d1f4cb0 {
  z-index: 80;
}

._7b6318ef {
  z-index: 90;
}

._37e1ed5b {
  z-index: 115;
}

._093dfa9b {
  z-index: 1000;
}

.e375ca07 {
  z-index: 1100;
}

._2d3fc3a1 {
  z-index: 10000;
}

._340fbcbb {
  position: sticky;
  bottom: -56px;
  bottom: -5.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 32px;
  padding-top: 3.2rem;
  padding-bottom: 8px;
  padding-bottom: 0.8rem;
  background-color: rgb(255, 255, 255);
  z-index: 11;
}

@media (min-width: 63.75em) {

  ._340fbcbb {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-top: 1.6rem;
    bottom: 0;
  }
}

._846e85db {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (min-width: 63.75em) {

  ._846e85db {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

._30e8b07e {
  max-width: none;
  margin: 16px auto 0;
  margin: 1.6rem auto 0;
}

@media (min-width: 63.75em) {

  ._30e8b07e {
    width: auto;
    margin: 1.6rem 0 0;
  }
}

.fc466e24 {
  max-width: none;
  margin: 0;
  white-space: pre-wrap;
}

@media (min-width: 63.75em) {

  .fc466e24 {
    width: auto;
    margin-left: auto;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
}

@media (min-width: 73.75em) {

  .fc466e24 {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }
}

._7597019d,
._5356fe61 {
  max-width: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 16px 0 0;
  margin: 1.6rem 0 0;
}

@media (min-width: 63.75em) {

  ._7597019d,
._5356fe61 {
    width: auto;
    min-width: 12.8rem;
    margin: 0 1.6rem 0 0;
  }
}

@media (max-width: 63.74em) {

  ._5356fe61:hover {
    color: rgb(50, 60, 65);
    border-color: rgb(50, 60, 65);
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._9e4a9a4c {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  word-break: break-word;
}

@media (min-width: 45em) {

  ._9e4a9a4c {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 0;
  }
}

@media (min-width: 45em) {

  .e07145b9 {
    margin-right: 2.4rem;
    margin-bottom: 1.6rem;
  }
}

._7c3697d2 {
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

@media (min-width: 45em) {

  ._7c3697d2 {
    max-width: 17.6rem;
    margin: 0;
  }
}

._0eca507a {
  margin-top: 12px;
  margin-top: 1.2rem;
}

@media (min-width: 45em) {

  ._0eca507a {
    margin-top: 0.4rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.d05e6aca {
  padding: 24px 24px 0 0;
  padding: 2.4rem 2.4rem 0 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._386dd3c2 {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (min-width: 63.75em) {

  .eea7d9a0 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin: 0;
  }
}

@media (min-width: 63.75em) {

  ._1cc7dfc2 {
    margin: 0 1.6rem 0 0;
    min-width: auto;
    padding-left: 3.2rem;
    padding-right: 3.2rem;

    /*this is just an arbitrary min-width
        to make flexbox work as required
   */
    -ms-flex-preferred-size: 10rem;
        flex-basis: 10rem;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._8d210a45 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

._4d5b6e15 {
  background: white;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 24px 16px;
  padding: 2.4rem 1.6rem;
  max-width: 660px;
  max-width: 66rem;
}

@media (min-width: 45em) {

  ._4d5b6e15 {
    padding: 3.2rem
      8rem;
    margin: 3.2rem;
  }
}

@media (min-width: 45em) {

  ._22e1e856 {
    margin-bottom: 2.4rem;
    text-align: center;
  }
}

.e5cd5686 {
  margin-bottom: 0;
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._9564c4f7 {
  margin-top: 0;
  margin-bottom: 0;
}

._677fd016 {
  margin-bottom: 0;
}

._87d90051 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
  margin-top: 24px;
  margin-top: 2.4rem;
}

@media (min-width: 45em) {

  ._87d90051 {
    margin-bottom: 0;
  }
}

._9d52c6d9 {
  font-size: 15px;
  font-size: 1.5rem;
  margin-bottom: 32px;
  margin-bottom: 3.2rem;
}

._11d48e05,
.d54ce709 {
  margin: 0;
}

._39403970 {
  margin: 16px 0;
  margin: 1.6rem 0;
}

.e26d33d7 input[class*='TextInput'] {
  text-transform: uppercase;
  background-color: rgb(255, 255, 255);
  color: rgb(50, 60, 65)
}

.e26d33d7 input[class*='TextInput']::-webkit-inner-spin-button {
  display: none;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._92d3ae1a {
  margin-top: 16px;
  margin-top: 1.6rem;
}

._3af3328c {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 600;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._159aff49 {
  margin-top: 16px;
  margin-top: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._90f9f3df {
  margin-bottom: 0;
}

.a1a0c6b6 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._75d1d184 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._54019fd5 {
}

@media (min-width: 45em) {

  ._54019fd5 {
    border-bottom: none;
    text-align: center;
  }
}

@media (min-width: 45em) {

  ._54019fd5::before {
    margin-bottom: 2.4rem;
  }
}

@media (min-width: 45em) {

  ._54019fd5::after {
    margin-top: 0.8rem;
  }
}

@media (min-width: 45em) {

  h1._11504228 {
    font-size: 2.6rem;
    line-height: 3.2rem;
    margin-bottom: 0.8rem;
  }
}

.a3c5b7b5 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

@media (min-width: 45em) {

  .a3c5b7b5 {
    margin-bottom: 1.6rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._327d313d {
  position: relative;
}

._327d313d > .efa9b73c {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12px;
  font-size: 1.2rem;
  width: auto;
  font-weight: normal;
  background: transparent;
  margin: 0;
}

._0ce7966c {
  padding: inherit
}

._0ce7966c > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 4px;
  margin-bottom: 0.4rem;
}

._0ce7966c > li > p {
  margin-bottom: 0;
}

.efcf7628 {
  margin-bottom: 20px;
  margin-bottom: 2rem;
}

.c655dac1 {
  margin-top: 12px;
  margin-top: 1.2rem;
  margin-left: 32px;
  margin-left: 3.2rem;
}

._8b96ff87._5d1d49e1 {
  margin-top: 22px;
  margin-top: 2.2rem;
}

._8b96ff87 input:checked + i circle:last-of-type,
  ._8b96ff87 input:checked + i path {
    fill: rgb(255, 102, 0);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/* double = higher specificity without !important */

._8e7c15a3._8e7c15a3 {
  margin: 0 auto;
}

.a1dc9be2 {
  display: none;
}

@media (min-width: 45em) {

  .a1dc9be2 {
    display: block;
    text-align: center;
    margin: 2.4rem 0;
  }
}

.ce5fde7c {
  margin-top: 24px;
  margin-top: 2.4rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) {

  .ce5fde7c {
    margin: 2.4rem 0;
  }
}

.db39fab6 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.ec47658a {
}

@media (min-width: 63.75em) {

  .ec47658a {
    max-width: 80rem;
  }
}

@media (min-width: 45em) {

  ._31ce8efd {
    padding: 0;
  }
}

._71d62fea {
  max-width: 300px;
  max-width: 30rem;
  margin: 0 auto;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._76169754 {
  border-bottom: 1px solid rgb(242, 242, 242);
  border-bottom: 0.1rem solid rgb(242, 242, 242);
}

._6d6d814f {
}

._50dacacd,
._7bf047cd {
}

._50dacacd {
  padding-top: 32px;
  padding-top: 3.2rem;
  padding-bottom: 32px;
  padding-bottom: 3.2rem;
}

@media (min-width: 45em) {

  ._50dacacd {
    padding-bottom: 4.8rem;
  }
}

@media (min-width: 45em) {

  ._7bf047cd {
    padding: 3.2rem 3.2rem;
    padding-bottom: 0;
  }
}

@media (min-width: 63.75em) {

  ._7bf047cd {
    padding-top: 6.4rem;
  }
}

@media (min-width: 63.75em) {

  ._0764b697 {
    max-width: 136.8rem;
  }
}

._50dacacd + ._7bf047cd {
  padding-top: 16px;
  padding-top: 1.6rem;
}

._8806941f {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  padding: 16px 0 0 16px;
  padding: 1.6rem 0 0 1.6rem;
}

._68c5ddc5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (min-width: 45em) {

  ._68c5ddc5 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

@media (min-width: 45em) {

  .de73404d {
    width: 50%;
  }
}

._957d2281 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

@media (min-width: 45em) {

  ._957d2281 {
    min-width: 40.4rem;
    width: 50%;
  }
}

@media (min-width: 45em) {

  .ca8562d4 {
    width: 50%;
  }
}

._439a3c02 {
  width: 100%;
  margin-top: 0;
}

.ca4e7be9 {
  margin: 0 16px 0 8px;
  margin: 0 1.6rem 0 0.8rem;
}

.d287db9e {
  padding-bottom: 8px;
  padding-bottom: 0.8rem;
}

@media (min-width: 45em) {

  .d287db9e {
    margin: 0 -3.2rem;
  }
}

@media (min-width: 63.75em) {

  .d287db9e {
    margin: 0;
    margin: initial;
  }
}

.b5adfd03 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

._21f1da88 {
  text-align: center;
}

._89c2f984 {
  white-space: nowrap;
  margin-left: 4px;
  margin-left: 0.4rem;
}

@media (max-width: 44.99em) {

  ._43312e77 {
    max-width: 100%;
  }
}

._84920d8d {
  margin-top: 24px;
  margin-top: 2.4rem;
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cef872c9 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin: 8px;
  margin: 0.8rem;
  padding: 0 8px;
  padding: 0 0.8rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 344px;
  max-width: 34.4rem;
}

@media (min-width: 45em) {

  .cef872c9 {
    max-width: 33.6rem;
  }
}

._7756a480 {
  margin-left: 8px;
  margin-left: 0.8rem;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._1558b625 {
  width: 40px;
  width: 4rem;
  height: 24px;
  height: 2.4rem;
}

@media (min-width: 63.75em) {

  ._1558b625 {
    width: 3.19rem;
    height: 1.914rem;
  }
}

._27934225 {
  min-width: 0;
}

._4a801266 {
  padding-top: 64px;
  padding-top: 6.4rem;
}

@media (max-width: 44.99em) {

  ._4a801266 {
    padding-top: 2.4rem;
  }
}

._715e2247 {
  padding-top: 64px;
  padding-top: 6.4rem;
}

@media (max-width: 44.99em) {

  ._715e2247 {
    padding-top: 3.2rem;
  }
}

._7fee82ef {
  padding-top: 32px;
  padding-top: 3.2rem;
}

@media (min-width: 45em) {

  ._7fee82ef {
    padding-top: 6.4rem;
  }
}

@media (min-width: 63.75em) {

  ._7fee82ef {
    padding-top: 0;
  }
}

.b290ed48,
.b2a49a6c {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  padding: 16px;
  padding: 1.6rem;
}

@media (min-width: 45em) {

  .b290ed48,
.b2a49a6c {
    width: 50%;
    padding: 0 0 0 2.4rem;
    margin: 0;
  }
}

.b2a49a6c {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

.b2a49a6c {
  margin-bottom: 0;
}

@media (min-width: 45em) {

  .b2a49a6c {
    margin-bottom: 0.8rem;
    border-right: 0.1rem solid rgb(214, 216, 217);
  }
}

._1a714f03 {
  padding: 0 16px;
  padding: 0 1.6rem;
}

.fd433ebf,
._5b7b76fd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._967b1ecb,
._48177dc5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._42815cae {
  margin: 0;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.dd0a7e3c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 8px 16px 0 16px;
  padding: 0.8rem 1.6rem 0 1.6rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) {

  .dd0a7e3c {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 2.4rem;
    padding: 0;
  }
}

._3531bd7c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (min-width: 45em) {

  ._3531bd7c {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}

._3531bd7c ._69174bdf {
    margin-left: 16px;
    margin-left: 1.6rem;
}

._8c67166d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._8c67166d p {
    text-decoration: underline;
    margin-left: 4px;
    margin-left: 0.4rem;
  }

@media (min-width: 45em) {

  ._8c67166d {
    margin-bottom: 0;
  }
}

@media (min-width: 45em) {

  ._8c67166d i {
    width: 16px;
    width: 1.6rem;
    height: 16px;
    height: 1.6rem;
  }
}

h1._71c51ef1 {
  margin-bottom: 0;
}

h1._71c51ef1 ._14a4970e {
    text-transform: none;
  }

.a0ce2008 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._894212fc {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._5a1c08fe {
  padding: 16px;
  padding: 1.6rem;
  color: rgb(50, 60, 65);
  white-space: nowrap;
}

._65022370 {
  margin-bottom: 0;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  min-width: 0;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: 4px;
  padding-right: 0.4rem;
}

._5bb9905f {
  font-size: 16px;
  font-size: 1.6rem;
  color: rgb(50, 60, 65);
}

@media (min-width: 45em) {

  ._57602c9d {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2.4rem 0 2.4rem 0;
    margin-bottom: 1.6rem;
  }
}

._00c40456:nth-child(2n) {
  margin-top: 32px;
  margin-top: 3.2rem;
}

@media (min-width: 63.75em) {

  ._00c40456:nth-child(2n) {
    margin-top: 3.4rem;
  }
}

._105a4f24 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 44px;
  height: 4.4rem;
  background-color: rgb(50, 60, 65);
  padding: 12px 24px;
  padding: 1.2rem 2.4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.c5a3df3d {
  margin: 12px 0;
  margin: 1.2rem 0;
}

._284b60dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 600 !important;
  text-align: left;
}

.f318c4c8 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.bfea59ff,
.a5132e8b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.bfea59ff {
  margin-bottom: 4px;
  margin-bottom: 0.4rem;
}

._36046c2c {
  margin: 12px 0;
  margin: 1.2rem 0;
}

.ac81433b {
  color: rgb(255, 102, 0);
}

.a29b8497 {
  color: rgb(111, 118, 122);
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._3015953e {
  font-weight: normal;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

.bf7ed39a {
  z-index: 1;
}

._03702596 {
  z-index: 80;
}

._516df5bc {
  z-index: 80;
}

._95db9f93 {
  z-index: 90;
}

.c1859070 {
  z-index: 115;
}

._17705daf {
  z-index: 1000;
}

.b391dd63 {
  z-index: 1100;
}

._0176f4d1 {
  z-index: 10000;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

/*
  Why important is allowed for utils classes?
  - It is common practice (see https://github.com/twbs/bootstrap/blob/ff29c1224c20b8fcf2d1e7c28426470f1dc3e40d/scss/utilities/_visibility.scss)
  - If you put util class on element, it reads like element is having those styles, they should override any conflicting rule
  - In case if rule with !important need to be overwritten, just remove util class and write your own.
*/

/*
 * Naked Button
 */

._09b68265 {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: inherit;
}

/*
 * Naked Action, Link, Button or Anchor
 */

._43164985 {
  display: block;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
}

button._43164985:not([disabled]) {
  cursor: pointer;
}

.e29491e6 {
  display: inline;
}

._0afb4698 {
  color: inherit;
  text-decoration: underline
}

._0afb4698:hover {
  font-weight: 500;
}

/*
 * Pullers
 */

._18e5c955 {
  float: left !important;
}

._43c2c843 {
  float: right !important;
}

/* Note this wont always centralise, quick and dirty */

._6c0e6880 {
  margin: 0 auto;
}

._5bb769ed {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

._440c85f5 {
  max-width: 1400px;
  max-width: 140rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 63.75em) {

  ._64e733da {
    max-width: 36.8rem;
  }
}

@media (min-width: 45em) {

  .a58a3964 {
    max-width: 36.8rem;
  }
}

/*
 * Anchors
 */

.b8628dc6 {
  display: block;
  text-decoration: underline;
  color: inherit
}

.b8628dc6:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

@media (hover: none) {

  .b8628dc6:hover {
    color: #000;
    color: initial;
  }
}

/**
 * Alignment
 */

.f22a7b15 {
  text-align: left;
}

.fc7b1c50 {
  text-align: center;
}

._9766c124 {
  text-align: right;
}

.c863bfc3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

._429ba2fa {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._0261befa {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._0b35157b {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

._6885776d {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

._3a1ded2a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1
}

._3a1ded2a::before,
  ._3a1ded2a::after {
  content: ' ';
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

.cbc77375 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.a9f35bfe {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.aa728e7d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

._2b405c6b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._7b6f4bb9 {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

._09467fe3 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._1d5cd83e {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

._20c36123 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._0e5dee99 {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

._21e0c2be {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

._26402f19 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

._543f8ab0 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._8db6bf17 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.ae062c7c {
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important; /* Grid CSS will override when combined */
}

._2d8008fb {
  position: relative;
}

/*
 * Sizing
 */

.b198db3c {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

._461c7c9d {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.dd9a0d2f {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

._3234ab20 {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
}

._26168127 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

._5050d95d {
  display: block;
  width: 100%;
}

._682a3f80 {
  display: block;
  height: 100%;
}

._1417f154 {
  width: 100vw;
}

.d108de0c {
  height: 100vh;
}

._87299ba9 {
  overflow-x: scroll;
}

._626f538f {
  overflow-y: scroll;
}

/*
 * Visibility
 */

._9684c999 {
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute;
}

.f0643a73 {
  display: none !important;
}

._46f76d00 {
  opacity: 0 !important;
  pointer-events: none !important;
}

._81da06e6 {
  -webkit-perspective: 100rem;
          perspective: 100rem;
}

/*
 * Font rendering
 */

._37ed1cdc {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

._8b6f3adb {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Font styling
 */

/* Weights */

._2cf01791 {
  font-weight: 300;
}

.aa382348 {
  font-weight: 400;
}

._8a098b5d {
  font-weight: 500;
}

._23574f5f {
  font-weight: 600;
}

/* Sizes */

._6546f97d {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
}

._73dd4557 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
}

._6695af35 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

.b87f274c {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._09adc52b {
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
}

._831a2aa5 {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 40px;
  line-height: 4rem;
}

.c0bbb9c1 {
  font-size: 48px;
  font-size: 4.8rem;
  line-height: 56px;
  line-height: 5.6rem;
}

.f2ac5e24 {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 16px;
    line-height: 1.6rem;
  }

.b026fc85 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 20px;
    line-height: 2rem;
  }

._6530fc70 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

._36a2be8d {
    font-size: 20px;
    font-size: 2rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

.ebb5e170 {
    font-size: 26px;
    font-size: 2.6rem;
    line-height: 32px;
    line-height: 3.2rem;
  }

._01b1d2a8 {
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 40px;
    line-height: 4rem;
  }

._89fc0c1a {
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 56px;
    line-height: 5.6rem;
  }

@media (min-width: 45em) {
  ._662894bd {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  .a571b22e {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  .d3ea6e2f {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  ._827c44bf {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  ._199dacde {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._8aae0caa {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  ._893ace85 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

@media (min-width: 63.75em) {
  ._8bc5ad6f {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  ._15af2ef6 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  .c272a596 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  ._2f41a64c {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  .ce456674 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._72874403 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  ._3a2e1db3 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

._753dcc7a {
  line-height: 24px;
  line-height: 2.4rem;
}

.ff981229 {
  line-height: 40px;
  line-height: 4rem;
}

._7c0dfbeb {
  line-height: 19px;
  line-height: 1.9rem;
}

._26b917ac {
  line-height: 13px;
  line-height: 1.3rem;
}

/* Text margins */

/* TODO: WFE-7446 put text margins to text.css file */

/* margin none rule needs to be before others as it needs to be overridden by them */

._5a71f135 {
  margin: 0;
}

.ce09fd38 {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

._02f42666 {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

._4a3ee5d7 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.ad1379de {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._8a0cf804 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.de3c51cf {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.b094ec9d {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

@media (min-width: 45em) {
  .fbafa2eb {
    margin-bottom: 0.8rem;
  }
  ._7490325d {
    margin-bottom: 0.8rem;
  }
  ._950d440a {
    margin-bottom: 1.6rem;
  }
  ._77ff67be {
    margin-bottom: 1.6rem;
  }
  ._1e84429c {
    margin-bottom: 1.6rem;
  }
  ._2c301537 {
    margin-bottom: 1.6rem;
  }
  ._091d6841 {
    margin-bottom: 1.6rem;
  }
}

@media (min-width: 63.75em) {
  ._5754cc68 {
    margin-bottom: 0.8rem;
  }
  .c9e0c0a7 {
    margin-bottom: 0.8rem;
  }
  ._90b57586 {
    margin-bottom: 1.6rem;
  }
  .f5250087 {
    margin-bottom: 1.6rem;
  }
  .ac31a81e {
    margin-bottom: 1.6rem;
  }
  ._138c3823 {
    margin-bottom: 1.6rem;
  }
  ._5d9136ea {
    margin-bottom: 1.6rem;
  }
}

._98c480b6 {
  margin-left: 4px;
  margin-left: 0.4rem;
}

._67f4a2e5 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

._5f7b739c {
  margin-left: 12px;
  margin-left: 1.2rem;
}

._0457048c {
  margin-left: 16px;
  margin-left: 1.6rem;
}

.e6d8ae76 {
  margin-left: auto;
}

._12509d98 {
  margin-right: 4px;
  margin-right: 0.4rem;
}

.dc42a76a {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._6c01f04a {
  margin-right: 12px;
  margin-right: 1.2rem;
}

._15efb8bd {
  margin-right: 16px;
  margin-right: 1.6rem;
}

.c0711ab0 {
  margin-right: auto;
}

._969af6b7 {
}

/* Styles */

.f7269d9c {
  font-style: italic;
}

._07089870 {
  text-transform: uppercase;
}

._0ec2d47e {
  text-transform: lowercase;
}

.b1c735ff {
  text-decoration: line-through;
}

._183508c4 {
  white-space: nowrap;
}

._94e5e6ee {
  text-decoration: underline;
}

._34a5ae7e {
  font-weight: 600 !important;
}

.cb1d84a9 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/*
 * Truncation
 */

._541ed42b {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

._880c1b5c {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

._96aa5026 {
  -webkit-line-clamp: 1;
}

._4b931367 {
  -webkit-line-clamp: 2;
}

.c84a6cd6 {
  -webkit-line-clamp: 3;
}

.b45ab088 {
  -webkit-line-clamp: 4;
}

._46ff05f2 {
  -webkit-line-clamp: 5;
}

._72e76725 {
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

.d47d9239 {
  color: rgb(237, 237, 237);
}

/*
 * Color
 */

/* Text colors */

.fa1f2af3,
.c48239f0 {
  color: rgb(255, 102, 0);
}

.c34be2ed {
  color: rgb(50, 60, 65);
}

._50918b35 {
  color: rgb(111, 118, 122);
}

._5dcdd9c8 {
  color: rgb(255, 255, 255);
}

.f697c2c1 {
  color: rgb(91, 99, 103);
}

.bf854f5a {
  color: rgb(208, 2, 27);
}

._3b99a855 {
  color: rgb(166, 166, 166);
}

._87923da4 {
  color: inherit;
}

/* Background colors */

.d8459cca {
  background-color: white;
}

.f008aa08 {
  background-color: rgb(242, 242, 242);
}

.aafd2234 {
  background-color: rgb(241, 239, 238);
}

._3d1e9c60 {
  background-color: rgb(60, 60, 60);
}

.d6909a38 {
  background-color: rgb(237, 234, 227);
}

._0012405a {
  background-color: rgb(202, 195, 187);
}

.ae647969 {
  background-color: rgb(250, 250, 248);
}

.eec247df {
  background-color: rgb(242, 240, 238);
}

.c86da0a3 {
  background-color: rgb(234, 235, 236);
}

/*
 * Drop shadow
 */

._49e12be0 {
  -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
          box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
}

.eedec812 {
  -webkit-box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
          box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
}

.da15aa54 {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.caa0e4f4 {
  padding-top: 16px !important;
  padding-top: 1.6rem !important;
}

.cc1819e1 {
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

._5d567852 {
  padding-top: 24px;
  padding-top: 2.4rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

.e8d754e1 {
  padding-left: 16px !important;
  padding-left: 1.6rem !important;
  padding-right: 16px !important;
  padding-right: 1.6rem !important;
}

.cad4383b {
  padding-top: 24px;
  padding-top: 2.4rem;
}

._3d4b2bfd {
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

.cdc90312 {
  padding-top: 4px;
  padding-top: 0.4rem;
}

.b25ee17e {
  padding-left: 0 !important;
}

.ddbca717 {
  padding-bottom: 0 !important;
}

._25023c60 {
  padding: 0 !important;
}

.a397f4c5 {
  padding-left: 8px !important;
  padding-left: 0.8rem !important;
}

.bee921ba {
  padding-right: 24px !important;
  padding-right: 2.4rem !important;
}

/*
 * Shaping
 */

._363ab578 {
  border-radius: 20rem;
}

.e2a421a6 {
  border-radius: 0.4rem;
}

/*
 * list
 */

._3233568a {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.aad7e70e {
  text-decoration: none
}

.aad7e70e:hover {
  text-decoration: underline;
}

._05221285 {
  text-decoration: underline
}

._05221285:hover {
  text-decoration: none;
}

._5001707e {
  text-decoration: underline;
  -webkit-transition: color 200ms;
  transition: color 200ms
}

._5001707e:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

._86c61aa0 {
  text-transform: none;
}

._22ea45e5 {
  border-top: 1px solid rgb(166, 166, 166);
  border-top: 0.1rem solid rgb(166, 166, 166);
}

._5b6234bf {
  padding: 8px;
  padding: 0.8rem;
}

/*
 * Grid
 */

._34ce8982 {
  padding-bottom: 40px;
  padding-bottom: 4rem;
}

._42fd4913 {
  padding-bottom: 4px;
  padding-bottom: 0.4rem;
}

@media (max-width: 44.99em) {
  ._34ce8982 {
    padding-bottom: 2rem;
  }
}

._34ce8982::after,
._42fd4913::after {
  content: '';
  position: absolute;
  width: calc(100% - 1.8rem);
  height: 1px;
  height: 0.1rem;
  bottom: 0;
  right: 0;
  background: rgb(166, 166, 166);
  margin-left: 24px;
  margin-left: 2.4rem;
}

/*
 * Separators
 */

.d0f8fb16 {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-top: 0.1rem solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  border-bottom: 0.1rem solid rgba(255, 255, 255, .3);
}

._9b99482f {
  margin-top: 30px;
  margin-top: 3rem;
  margin-bottom: 30px;
  margin-bottom: 3rem;
}

.d792d0ed {
  border-color: rgb(237, 237, 237) !important;
}

.bab35ad3 {
  border-color: rgb(166, 166, 166) !important;
}

._029a44b2 {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237)
}

._029a44b2:first-child {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
}

._6777779e {
  border-bottom: 1px solid rgb(210, 210, 210);
  border-bottom: 0.1rem solid rgb(210, 210, 210)
}

._6777779e:first-child {
  border-top: 1px solid rgb(210, 210, 210);
  border-top: 0.1rem solid rgb(210, 210, 210);
}

.a4aff191 {
  border-bottom: 1px solid rgb(60, 60, 60);
  border-bottom: 0.1rem solid rgb(60, 60, 60)
}

.a4aff191:first-child {
  border-top: 1px solid rgb(60, 60, 60);
  border-top: 0.1rem solid rgb(60, 60, 60);
}

/*
 * https://webaim.org/techniques/css/invisiblecontent/
 * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_screen-reader.scss
 */

._2a35bc89 {
  position: absolute;
  /* stylelint-disable */
  width: 1px;
  height: 1px;
  /* stylelint-enable */
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  border: 0;
}

/**
 * Remove native input clear button.
 * See https://github.com/necolas/normalize.css/commit/f7c98c4c859c15363763f10a439b63d85b9afba0#diff-bb3dde41d97f19be8ab7b4780a915d5e
 */

[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/**
 * Add outline to input boxes when in desktop view to avoid ios safari bug.
 */

._918d01e9 {
  outline: none;
}

@media (min-width: 63.75em) {

  ._918d01e9:focus {
    outline: 0.4rem auto -webkit-focus-ring-color;
  }
}

._5b381f10 {
  pointer-events: none;
  cursor: not-allowed;
}

.a1a8ef91 input[type='number'] {
  -moz-appearance: textfield
}

.a1a8ef91 input[type='number']::-webkit-inner-spin-button,
  .a1a8ef91 input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/**
 * Full width content, break out of grid
 */

.c07f7e2c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (min-width: 63.75em) {

  .c07f7e2c {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

._0daebdc0 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  ._0daebdc0 {
    width: 140rem;
  }
}

.b4f319b0 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  .b4f319b0 {
    width: 100vw;
  }
}

/*
 * Margins
 */

._171a4cd0 {
  margin: 0 !important;
}

._9deeae4f {
  margin-top: 0 !important;
}

._4a57f7d0 {
  margin-bottom: 0 !important;
}

.f5495de9 {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
}

._05886598 {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
}

._67880cf8 {
  margin-top: 48px !important;
  margin-top: 4.8rem !important;
}

._0ff7fec7 {
  margin-top: 64px !important;
  margin-top: 6.4rem !important;
}

._548ad931 {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
}

.d1896f2b {
  margin-top: 4px !important;
  margin-top: 0.4rem !important;
}

._266557ed {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
}

._5357eebe {
  margin-top: 20px !important;
  margin-top: 2rem !important;
}

._54d90979 {
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

._8d6f039d {
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

._38777792 {
  margin-bottom: 40px !important;
  margin-bottom: 4rem !important;
}

._5a2cd248 {
  margin-bottom: 48px !important;
  margin-bottom: 4.8rem !important;
}

._2b7becdb {
  margin-bottom: 56px !important;
  margin-bottom: 5.6rem !important;
}

._232fb086 {
  margin-bottom: 64px !important;
  margin-bottom: 6.4rem !important;
}

._152009bb {
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

._32195556 {
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

.bd16aeb7 {
  margin-bottom: 4px !important;
  margin-bottom: 0.4rem !important;
}

._5064dd88 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

.f4d549e5 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

.c2c68639 {
  margin-right: 24px;
  margin-right: 2.4rem;
}

.fe16719e {
  margin-right: 32px;
  margin-right: 3.2rem;
}

._736104a7 {
  margin-left: 32px;
  margin-left: 3.2rem;
}

.eaa0571d {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._00e7bf2b {
  margin-left: 8px;
  margin-left: 0.8rem;
}

.e8de9d8f {
  margin-left: 24px;
  margin-left: 2.4rem;
}

.ff94850b {
  margin-left: auto !important;
  margin-right: auto !important;
}

._57e4a660 {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

.f626f77c {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

._39c6072c {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

.b917f1e1 {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

/* Font Face */

._2cf01791 {
  font-family: 'GoodHome-Light', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._8a098b5d {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._23574f5f {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

@media (min-width: 63.75em) {

  .e6332437 {
  }
}

@media (max-width: 44.99em) {

  .e6332437 {
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._356d1ea0 {
  margin-top: 8px;
  margin-top: 0.8rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._1633cd17 {
  overflow-x: hidden; /* Prevents container from horizontal scrolling on touch devices */
  padding-left: 16px;
  padding-left: 1.6rem;
}

@media (min-width: 45em) {

  ._1633cd17 {
    padding-left: 0;
  }
}

/*
 * z-index
 */

.e511a68b {
  z-index: 1;
}

._7236f543 {
  z-index: 80;
}

.d281095b {
  z-index: 80;
}

.f672c50a {
  z-index: 90;
}

.af55e7f9 {
  z-index: 115;
}

.d010b2a5 {
  z-index: 1000;
}

._60e57cd2 {
  z-index: 1100;
}

._858caa39 {
  z-index: 10000;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

/*
  Why important is allowed for utils classes?
  - It is common practice (see https://github.com/twbs/bootstrap/blob/ff29c1224c20b8fcf2d1e7c28426470f1dc3e40d/scss/utilities/_visibility.scss)
  - If you put util class on element, it reads like element is having those styles, they should override any conflicting rule
  - In case if rule with !important need to be overwritten, just remove util class and write your own.
*/

/*
 * Naked Button
 */

._902db54f {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: inherit;
}

/*
 * Naked Action, Link, Button or Anchor
 */

.befdfa4b {
  display: block;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
}

button.befdfa4b:not([disabled]) {
  cursor: pointer;
}

.a38e4294 {
  display: inline;
}

._9786c0c9 {
  color: inherit;
  text-decoration: underline
}

._9786c0c9:hover {
  font-weight: 500;
}

/*
 * Pullers
 */

.bcabdfd4 {
  float: left !important;
}

._395eb15c {
  float: right !important;
}

/* Note this wont always centralise, quick and dirty */

._74413436 {
  margin: 0 auto;
}

.ea3f15d5 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

._0917d4e8 {
  max-width: 1400px;
  max-width: 140rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 63.75em) {

  ._73ef7bf6 {
    max-width: 36.8rem;
  }
}

@media (min-width: 45em) {

  ._74977551 {
    max-width: 36.8rem;
  }
}

/*
 * Anchors
 */

._9d0137eb {
  display: block;
  text-decoration: underline;
  color: inherit
}

._9d0137eb:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

@media (hover: none) {

  ._9d0137eb:hover {
    color: #000;
    color: initial;
  }
}

/**
 * Alignment
 */

._4b706545 {
  text-align: left;
}

._4c733ee2 {
  text-align: center;
}

._6b6f4efd {
  text-align: right;
}

._14e391b4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.d9c1e410 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._19d7b5f0 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.e1ee3910 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

._6fc89f52 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

._05dcec9a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1
}

._05dcec9a::before,
  ._05dcec9a::after {
  content: ' ';
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

._817034b6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.f3ff10d1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._2528f57c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.f3386cb8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.aa52c22a {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

._8d28fab7 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._330cc337 {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.a90da95c {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.c03d24f1 {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

._629d0f37 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

._0bdbd7ca {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

._2cdae7f7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.bab57ae6 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

._46feca97 {
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important; /* Grid CSS will override when combined */
}

._7676ad19 {
  position: relative;
}

/*
 * Sizing
 */

._52262eac {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

._2a34a1aa {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

._26227297 {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

.f255f352 {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
}

._355a1177 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.b3088ff0 {
  display: block;
  width: 100%;
}

._18d71133 {
  display: block;
  height: 100%;
}

._4ba836fd {
  width: 100vw;
}

._74c32f64 {
  height: 100vh;
}

._16d1ec45 {
  overflow-x: scroll;
}

._7714d989 {
  overflow-y: scroll;
}

/*
 * Visibility
 */

._1b94cc89 {
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute;
}

._0d4d377a {
  display: none !important;
}

._8bc15537 {
  opacity: 0 !important;
  pointer-events: none !important;
}

.be873248 {
  -webkit-perspective: 100rem;
          perspective: 100rem;
}

/*
 * Font rendering
 */

._7220c6c4 {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

._84ac1efc {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Font styling
 */

/* Weights */

.a66e7846 {
  font-weight: 300;
}

.c124ad4d {
  font-weight: 400;
}

._68dcf88b {
  font-weight: 500;
}

.d10fb715 {
  font-weight: 600;
}

/* Sizes */

._63fd651b {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
}

._340d273d {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
}

._85c698f1 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

.fa74f5ba {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._7fb2380d {
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
}

._96a2a002 {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 40px;
  line-height: 4rem;
}

.f286d190 {
  font-size: 48px;
  font-size: 4.8rem;
  line-height: 56px;
  line-height: 5.6rem;
}

._29b99490 {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 16px;
    line-height: 1.6rem;
  }

.f0e85b56 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 20px;
    line-height: 2rem;
  }

._373ef3e7 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

._162208a8 {
    font-size: 20px;
    font-size: 2rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

._6d1ee9cb {
    font-size: 26px;
    font-size: 2.6rem;
    line-height: 32px;
    line-height: 3.2rem;
  }

._96baac14 {
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 40px;
    line-height: 4rem;
  }

.e6aed84e {
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 56px;
    line-height: 5.6rem;
  }

@media (min-width: 45em) {
  ._0f75d439 {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  ._3a1ded6a {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ._17d5e0a6 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  ._661e678c {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  ._051d96a5 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  .c6a81e7c {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  ._20da3b28 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

@media (min-width: 63.75em) {
  ._5cc3ec0d {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  .cdbd2908 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ._88095996 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  .f122d2e0 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  ._50d3e0af {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._9bf723e0 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  .a1419c5c {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

.f6f9d8dc {
  line-height: 24px;
  line-height: 2.4rem;
}

.d875a41f {
  line-height: 40px;
  line-height: 4rem;
}

._89ecae20 {
  line-height: 19px;
  line-height: 1.9rem;
}

.cc96ef4a {
  line-height: 13px;
  line-height: 1.3rem;
}

/* Text margins */

/* TODO: WFE-7446 put text margins to text.css file */

/* margin none rule needs to be before others as it needs to be overridden by them */

.c887f083 {
  margin: 0;
}

.f12024cd {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

._088b4476 {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

.e8c02732 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._45a8459f {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._4338f2ed {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._63a13a33 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.a02e76ea {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

@media (min-width: 45em) {
  ._15bca1fd {
    margin-bottom: 0.8rem;
  }
  ._015e7d76 {
    margin-bottom: 0.8rem;
  }
  ._372dcb08 {
    margin-bottom: 1.6rem;
  }
  ._954fca28 {
    margin-bottom: 1.6rem;
  }
  ._89af8c65 {
    margin-bottom: 1.6rem;
  }
  ._7fc4db64 {
    margin-bottom: 1.6rem;
  }
  ._2f75678d {
    margin-bottom: 1.6rem;
  }
}

@media (min-width: 63.75em) {
  ._69bb192c {
    margin-bottom: 0.8rem;
  }
  .fc1473b5 {
    margin-bottom: 0.8rem;
  }
  ._271c5df7 {
    margin-bottom: 1.6rem;
  }
  .a22bc374 {
    margin-bottom: 1.6rem;
  }
  ._88ba046f {
    margin-bottom: 1.6rem;
  }
  ._91003777 {
    margin-bottom: 1.6rem;
  }
  .ea561531 {
    margin-bottom: 1.6rem;
  }
}

._7b7a532a {
  margin-left: 4px;
  margin-left: 0.4rem;
}

._80edfa70 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

._1941b47e {
  margin-left: 12px;
  margin-left: 1.2rem;
}

._16c39871 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._01aa8c29 {
  margin-left: auto;
}

._1222b651 {
  margin-right: 4px;
  margin-right: 0.4rem;
}

._41b733c9 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._470645ef {
  margin-right: 12px;
  margin-right: 1.2rem;
}

._1658d144 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

._9881976f {
  margin-right: auto;
}

.bc0787e6 {
}

/* Styles */

._6e0626fb {
  font-style: italic;
}

._2e02b44b {
  text-transform: uppercase;
}

.ed6d43f6 {
  text-transform: lowercase;
}

._66581c7c {
  text-decoration: line-through;
}

.aa4af9e3 {
  white-space: nowrap;
}

.bb945fd7 {
  text-decoration: underline;
}

._009231bb {
  font-weight: 600 !important;
}

._9f8d3be4 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/*
 * Truncation
 */

._79faba79 {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.fe53e61b {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

._00e0f681 {
  -webkit-line-clamp: 1;
}

.b2685d91 {
  -webkit-line-clamp: 2;
}

.fdae3ef3 {
  -webkit-line-clamp: 3;
}

.fe855f94 {
  -webkit-line-clamp: 4;
}

._847047e1 {
  -webkit-line-clamp: 5;
}

._6ec0c574 {
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

.e0a81fdf {
  color: rgb(237, 237, 237);
}

/*
 * Color
 */

/* Text colors */

.a882b15b,
.ff885eb0 {
  color: rgb(255, 102, 0);
}

.b757b2e9 {
  color: rgb(50, 60, 65);
}

._065face5 {
  color: rgb(111, 118, 122);
}

._3a8e0eb0 {
  color: rgb(255, 255, 255);
}

.a04851d0 {
  color: rgb(91, 99, 103);
}

._0c719581 {
  color: rgb(208, 2, 27);
}

._08697dce {
  color: rgb(166, 166, 166);
}

._07f62a76 {
  color: inherit;
}

/* Background colors */

._89ada194 {
  background-color: white;
}

.fb73c807 {
  background-color: rgb(242, 242, 242);
}

.e63b047a {
  background-color: rgb(241, 239, 238);
}

._065ff7d5 {
  background-color: rgb(60, 60, 60);
}

._41c5c0ae {
  background-color: rgb(237, 234, 227);
}

.c0769348 {
  background-color: rgb(202, 195, 187);
}

.f410c342 {
  background-color: rgb(250, 250, 248);
}

._33824105 {
  background-color: rgb(242, 240, 238);
}

._7163c33e {
  background-color: rgb(234, 235, 236);
}

/*
 * Drop shadow
 */

._9c86d131 {
  -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
          box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
}

._23f0a50d {
  -webkit-box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
          box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
}

.f6d5e579 {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.e81cd7e7 {
  padding-top: 16px !important;
  padding-top: 1.6rem !important;
}

._5b9aa114 {
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

._9297820c {
  padding-top: 24px;
  padding-top: 2.4rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

._3e80c23d {
  padding-left: 16px !important;
  padding-left: 1.6rem !important;
  padding-right: 16px !important;
  padding-right: 1.6rem !important;
}

._9a5988d4 {
  padding-top: 24px;
  padding-top: 2.4rem;
}

.ae8be7aa {
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

._1a0fe58a {
  padding-top: 4px;
  padding-top: 0.4rem;
}

.b4c17c1e {
  padding-left: 0 !important;
}

.ee67ec96 {
  padding-bottom: 0 !important;
}

._3d921da2 {
  padding: 0 !important;
}

._0991a149 {
  padding-left: 8px !important;
  padding-left: 0.8rem !important;
}

._7018b008 {
  padding-right: 24px !important;
  padding-right: 2.4rem !important;
}

/*
 * Shaping
 */

.ad6ea1f4 {
  border-radius: 20rem;
}

.a2ad0b60 {
  border-radius: 0.4rem;
}

/*
 * list
 */

.e66342af {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

._0930f3e3 {
  text-decoration: none
}

._0930f3e3:hover {
  text-decoration: underline;
}

._0cb28fa0 {
  text-decoration: underline
}

._0cb28fa0:hover {
  text-decoration: none;
}

.c295b852 {
  text-decoration: underline;
  -webkit-transition: color 200ms;
  transition: color 200ms
}

.c295b852:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

.aaa94727 {
  text-transform: none;
}

.c6ec992c {
  border-top: 1px solid rgb(166, 166, 166);
  border-top: 0.1rem solid rgb(166, 166, 166);
}

.ac33200a {
  padding: 8px;
  padding: 0.8rem;
}

/*
 * Grid
 */

._74b98b1d {
  padding-bottom: 40px;
  padding-bottom: 4rem;
}

._1ddbfc1b {
  padding-bottom: 4px;
  padding-bottom: 0.4rem;
}

@media (max-width: 44.99em) {
  ._74b98b1d {
    padding-bottom: 2rem;
  }
}

._74b98b1d::after,
._1ddbfc1b::after {
  content: '';
  position: absolute;
  width: calc(100% - 1.8rem);
  height: 1px;
  height: 0.1rem;
  bottom: 0;
  right: 0;
  background: rgb(166, 166, 166);
  margin-left: 24px;
  margin-left: 2.4rem;
}

/*
 * Separators
 */

._0ae200e8 {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-top: 0.1rem solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  border-bottom: 0.1rem solid rgba(255, 255, 255, .3);
}

._53d6f604 {
  margin-top: 30px;
  margin-top: 3rem;
  margin-bottom: 30px;
  margin-bottom: 3rem;
}

._12d19104 {
  border-color: rgb(237, 237, 237) !important;
}

.c79fb8bb {
  border-color: rgb(166, 166, 166) !important;
}

.db80790a {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237)
}

.db80790a:first-child {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
}

.ec628ced {
  border-bottom: 1px solid rgb(210, 210, 210);
  border-bottom: 0.1rem solid rgb(210, 210, 210)
}

.ec628ced:first-child {
  border-top: 1px solid rgb(210, 210, 210);
  border-top: 0.1rem solid rgb(210, 210, 210);
}

._27cf5740 {
  border-bottom: 1px solid rgb(60, 60, 60);
  border-bottom: 0.1rem solid rgb(60, 60, 60)
}

._27cf5740:first-child {
  border-top: 1px solid rgb(60, 60, 60);
  border-top: 0.1rem solid rgb(60, 60, 60);
}

/*
 * https://webaim.org/techniques/css/invisiblecontent/
 * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_screen-reader.scss
 */

._1e216b2a {
  position: absolute;
  /* stylelint-disable */
  width: 1px;
  height: 1px;
  /* stylelint-enable */
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  border: 0;
}

/**
 * Remove native input clear button.
 * See https://github.com/necolas/normalize.css/commit/f7c98c4c859c15363763f10a439b63d85b9afba0#diff-bb3dde41d97f19be8ab7b4780a915d5e
 */

[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/**
 * Add outline to input boxes when in desktop view to avoid ios safari bug.
 */

._59edf849 {
  outline: none;
}

@media (min-width: 63.75em) {

  ._59edf849:focus {
    outline: 0.4rem auto -webkit-focus-ring-color;
  }
}

.e8c6d334 {
  pointer-events: none;
  cursor: not-allowed;
}

._9fac7df9 input[type='number'] {
  -moz-appearance: textfield
}

._9fac7df9 input[type='number']::-webkit-inner-spin-button,
  ._9fac7df9 input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/**
 * Full width content, break out of grid
 */

.efb27e73 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (min-width: 63.75em) {

  .efb27e73 {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

._617b29b8 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  ._617b29b8 {
    width: 140rem;
  }
}

.ad57e0d7 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  .ad57e0d7 {
    width: 100vw;
  }
}

/*
 * Margins
 */

._78ed26fe {
  margin: 0 !important;
}

.aabe25b5 {
  margin-top: 0 !important;
}

._2d67e14a {
  margin-bottom: 0 !important;
}

._4aa7d1d8 {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
}

.b48d37b9 {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
}

.c5b08216 {
  margin-top: 48px !important;
  margin-top: 4.8rem !important;
}

._79e597ea {
  margin-top: 64px !important;
  margin-top: 6.4rem !important;
}

._8c470709 {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
}

._64d88e84 {
  margin-top: 4px !important;
  margin-top: 0.4rem !important;
}

._7375178f {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
}

._1d59b0c3 {
  margin-top: 20px !important;
  margin-top: 2rem !important;
}

.a0b57be0 {
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

.ed98db8b {
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

.e863916b {
  margin-bottom: 40px !important;
  margin-bottom: 4rem !important;
}

._93b9c2ff {
  margin-bottom: 48px !important;
  margin-bottom: 4.8rem !important;
}

._741b89a5 {
  margin-bottom: 56px !important;
  margin-bottom: 5.6rem !important;
}

._3dfb66cf {
  margin-bottom: 64px !important;
  margin-bottom: 6.4rem !important;
}

.a56498f0 {
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

._48130903 {
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

.c79d6626 {
  margin-bottom: 4px !important;
  margin-bottom: 0.4rem !important;
}

._1c2b9e73 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

.e94fcd37 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._28e1d615 {
  margin-right: 24px;
  margin-right: 2.4rem;
}

.a931a359 {
  margin-right: 32px;
  margin-right: 3.2rem;
}

.b957a0f6 {
  margin-left: 32px;
  margin-left: 3.2rem;
}

._5adbd878 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._9e57e2f7 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

._2452c94d {
  margin-left: 24px;
  margin-left: 2.4rem;
}

.a67bc6b7 {
  margin-left: auto !important;
  margin-right: auto !important;
}

.f6813740 {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

._8d2fdb1f {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

.c1855a0b {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

._49187a3c {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

/* Font Face */

.a66e7846 {
  font-family: 'GoodHome-Light', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._68dcf88b {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.d10fb715 {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

#clp-content .br-wrapper {
      display: none;
    }

#clp-content #Certona_Room_Slot {
      display: none;
    }

._52633cba {
  width: 100%;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._9b1c3533 {
  width: 100vw;
}

.f4ec0264 {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.f4ec0264 h1 {
    text-align: center;
  }

.f4ec0264 ul li,
  .f4ec0264 p {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.f4ec0264 table {
    table-layout: fixed;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 20px;
    line-height: 2rem;
  }

.f4ec0264 table thead tr td {
      font-size: 14px;
      font-size: 1.4rem;
      line-height: 20px;
      line-height: 2rem;
    }

.f4ec0264 table tbody tr td {
      overflow-x: scroll;
      font-size: 14px;
      font-size: 1.4rem;
      line-height: 20px;
      line-height: 2rem;
    }

.f4ec0264 table tbody tr td ul li,
      .f4ec0264 table tbody tr td p {
        font-size: 14px;
        font-size: 1.4rem;
        line-height: 20px;
        line-height: 2rem;
      }

/*
 * Generic styling classes to apply primarily to CMS html returns
 */

.dd17c1d6 {
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

@media (min-width: 45em) {

  body ._4670f38f {
    display: none;
  }
}

body .bcadc65e {
  display: none;
}

@media (min-width: 45em) {

  body .bcadc65e {
    display: block;
  }
}

body ._9aa99622 {
  display: none;
}

@media (min-width: 45em) {

  body ._9aa99622 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media (min-width: 63.75em) {

  body ._76f7b897 {
    display: none;
  }
}

body ._3299a9e6 {
  display: none;
}

@media (min-width: 45em) {

  body ._3299a9e6 {
    display: block;
  }
}

@media (min-width: 63.75em) {

  body ._3299a9e6 {
    display: none;
  }
}

body ._3f1b6f58,
body .b0f7163b {
  display: none;
}

@media (min-width: 63.75em) {

  body ._3f1b6f58,
body .b0f7163b {
    display: block;
  }
}

@media (min-width: 73.75em) {

  body .cbd2f02e {
    display: none;
  }
}

body ._66a81f55 {
  display: none;
}

@media (min-width: 45em) and (max-width: 73.6875em) {

  body ._66a81f55 {
    display: block;
  }
}

body ._2a9bde51 {
  display: none;
}

@media (min-width: 73.75em) {

  body ._2a9bde51 {
    display: block;
  }
}

@media (max-width: 44.99em) {

  body ._77006ba4 {
    display: none;
  }
}

.cea71843 {
  padding-right: 16px;
  padding-right: 1.6rem;
  padding-left: 16px;
  padding-left: 1.6rem;
}

@media (min-width: 45em) {

  .cea71843 {
    padding-right: 3.2rem;
    padding-left: 3.2rem;
  }
}

/*
  WFE-3562 - The sitebuilder content has left and right padding on .wrapper-main
  that is not needed when rendered in our Content component. This
  needs to remain as long as the padding on .wrapper-main exists.
*/

._2f67574c {
  padding-right: calc(1.6rem - 1.188em);
  padding-left: calc(1.6rem - 1.188em);
}

@media (min-width: 45em) {

  ._2f67574c {
    padding-right: calc(3.2rem - 1.188em);
    padding-left: calc(3.2rem - 1.188em);
  }
}

._3d283fd9 {
  padding-right: 16px;
  padding-right: 1.6rem;
}

@media (min-width: 45em) {

  ._3d283fd9 {
    padding-right: 3.2rem;
  }
}

.c1749570 {
  padding-left: 16px;
  padding-left: 1.6rem;
}

@media (min-width: 45em) {

  .c1749570 {
    padding-left: 3.2rem;
  }
}

._426b3bec {
  margin-right: 16px;
  margin-right: 1.6rem;
  margin-left: 16px;
  margin-left: 1.6rem;
}

@media (min-width: 45em) {

  ._426b3bec {
    margin-right: 3.2rem;
    margin-left: 3.2rem;
  }
}

._4bcae73d {
  margin-right: -16px;
  margin-right: -1.6rem;
  margin-left: -16px;
  margin-left: -1.6rem;
}

@media (min-width: 45em) {

  ._4bcae73d {
    margin-right: -3.2rem;
    margin-left: -3.2rem;
  }
}

.f8dc3545 {
  margin-right: 8px;
  margin-right: 0.8rem;
  margin-left: 8px;
  margin-left: 0.8rem;
}

@media (min-width: 45em) {

  .f8dc3545 {
    margin-right: 1.6rem;
    margin-left: 1.6rem;
  }
}

._65cbf3cd {
  max-width: 352px;
  max-width: 35.2rem;
  min-width: 176px;
  min-width: 17.6rem;
}

/*
 * z-index
 */

._2fc62506 {
  z-index: 1;
}

._250ff5f8 {
  z-index: 80;
}

.f6b1964b {
  z-index: 80;
}

.d535403a {
  z-index: 90;
}

._626d67aa {
  z-index: 115;
}

.ec805be6 {
  z-index: 1000;
}

._68998434 {
  z-index: 1100;
}

._844961eb {
  z-index: 10000;
}

._93a9dcf6 {
  display: none;
}

.d849a9e9 {
  display: none;
}

._50a49bfd {
  display: none;
}

._80fc8286,
._41f9c2eb {
  display: none;
}

@media (min-width: 45em) {
  ._7b1042ac {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    background-color: rgb(255, 255, 255);
  }

  ._13c60d65 {
    -ms-flex-preferred-size: 0%;
        flex-basis: 0%;
  }

  ._93a9dcf6 {
    display: block;
    position: relative;
    width: 100vw;
    height: 100vh;
  }

  .fd9c9fdd {
    width: 36rem;
    -ms-flex-preferred-size: 36rem;
        flex-basis: 36rem;
  }

  .b3d618ee {
    position: absolute;
    left: 0;
    top: 0;
    padding: 1.2rem;
  }

  .b3d618ee i {
    width: 2.4rem;
    height: 2.4rem;
  }

  .d849a9e9 {
    display: block;
    position: absolute;
    -webkit-transform: translate3d(-89vw, 0, 0);
            transform: translate3d(-89vw, 0, 0);
  }

  .ff09259d {
    -webkit-transition: -webkit-transform 200ms ease-in-out;
    transition: -webkit-transform 200ms ease-in-out;
    transition: transform 200ms ease-in-out;
    transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    position: fixed;
    z-index: 1000;
    top: 0;
  }
}

@media (min-width: 45em) and (min-width: 63.75em) {

  .ff09259d {
    z-index: 0;
  }
}

@media (min-width: 45em) {

  ._80fc8286,
  ._41f9c2eb {
    -webkit-transform: translate3d(-89vw, 0, 0);
            transform: translate3d(-89vw, 0, 0);
  }

    ._80fc8286 ._93a9dcf6, ._41f9c2eb ._93a9dcf6 {
      opacity: 0;
      -webkit-transition: opacity 200ms ease-out;
      transition: opacity 200ms ease-out;
    }

  .a00c6724,
  ._5b558fc8 {
    -webkit-transform: none;
            transform: none;
  }

    .a00c6724 ._93a9dcf6, ._5b558fc8 ._93a9dcf6 {
      opacity: 1;
      -webkit-transition: opacity 200ms ease-out;
      transition: opacity 200ms ease-out;
    }

  ._80fc8286 {
    visibility: hidden;
  }

  ._21036408 {
    overflow: hidden;
    height: 100vh;
    display: block;
  }

  .bf86f627 {
    display: block;
    -webkit-transition: -webkit-transform 200ms ease-in-out;
    transition: -webkit-transform 200ms ease-in-out;
    transition: transform 200ms ease-in-out;
    transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
  }

  ._50a49bfd {
    -webkit-transform: translate3d(88vw, 0, 0);
            transform: translate3d(88vw, 0, 0);
  }
}

@media (min-width: 45em) and (min-width: 25.5em) {

  ._50a49bfd {
    -webkit-transform: translate3d(36rem, 0, 0);
            transform: translate3d(36rem, 0, 0);
  }
}

@media (min-width: 63.75em) {
  ._93a9dcf6 {
    display: none;
  }

  .ff09259d {
    position: static;
    top: auto;
  }

  ._7b1042ac {
    height: auto;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
  }

  ._80fc8286,
  ._41f9c2eb,
  ._5b558fc8,
  .a00c6724,
  .bf86f627,
  ._50a49bfd {
    -webkit-transition: none;
    transition: none;
    -webkit-transform: none;
            transform: none;
    visibility: visible;
  }

    ._80fc8286 ._93a9dcf6, ._41f9c2eb ._93a9dcf6, ._5b558fc8 ._93a9dcf6, .a00c6724 ._93a9dcf6, .bf86f627 ._93a9dcf6, ._50a49bfd ._93a9dcf6 {
      -webkit-transition: none;
      transition: none;
      -webkit-transform: none;
              transform: none;
    }

  ._21036408 {
    overflow: visible;
  }

  .fd9c9fdd {
    width: 100%;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (min-width: 63.75em) {

  .c4095b8e {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 1.6rem 3.2rem;
  }
}

@media (min-width: 63.75em) {

  .b2410306 {
    padding-top: 3.2rem;
  }
}

.a4100097 {
  min-width: 0;
}

@media (min-width: 63.75em) {

  .a4100097 {
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-right: 2.4rem;
  }
}

._9ae15bb7 {
  min-width: 0;
}

@media (min-width: 63.75em) {

  ._9ae15bb7 {
    -ms-flex-preferred-size: 4.8rem;
        flex-basis: 4.8rem;
    -webkit-box-flex: 3;
        -ms-flex-positive: 3;
            flex-grow: 3;
  }
}

._34108769 {
  display: none;
}

@media (min-width: 45em) {

  ._34108769 {
    display: block;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

._715986f2 {
  z-index: 1;
}

._586efbef {
  z-index: 80;
}

.ba73fbdc {
  z-index: 80;
}

._06c596b2 {
  z-index: 90;
}

._5800e0ec {
  z-index: 115;
}

._478cc101 {
  z-index: 1000;
}

._59d277ff {
  z-index: 1100;
}

.f902e53e {
  z-index: 10000;
}

/* Some non-standard icon variables and classes */

.cf197f4c {
}

.a220fd31 {
  position: relative;

  /* We previously used margin for these purposes. It didn't work on Safari and
   * Firefox - for some reason these platforms failed to respect the padding
   * at the bottom of the page. */
  padding: 24px;
  padding: 2.4rem;
  padding-bottom: 129px;
  padding-bottom: 12.9rem;
}

@media (min-width: 45em) {

  .a220fd31 {
    padding: 3.2rem;
    padding-bottom: 7.3rem;
  }
}

@media (min-width: 63.75em) {

  .a220fd31 {
    padding: 0;
  }
}

._02e189d9 {
  position: relative;
}

._3fe3fbf8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 100%;
  z-index: 60;
}

._8377cefe {
  position: fixed;
  top: calc(50vh - 3.2rem);
}

._0f8ef6ad {
  display: block;
  font-size: 18px;
  font-size: 1.8rem;
  padding: 0 8px;
  padding: 0 0.8rem;
  line-height: 56px;
  line-height: 5.6rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  text-align: center;
}

._04cadbe7 {
  position: absolute;
  left: 0;
  height: 100%;
  margin-left: -11px;
  margin-left: -1.1rem;
}

.db038845 {
  text-align: right;
}

._5b2c7597 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 44px;
  height: 4.4rem;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
}

._5ad4a90b {
  margin: 0 auto;
  line-height: 44px;
  line-height: 4.4rem;
  font-size: 13px;
  font-size: 1.3rem;
  color: rgb(50, 60, 65);
}

.c2ff65c6 {
  font-size: 17px;
  font-size: 1.7rem;
}

._59a8755e {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._4617220c {
  padding-top: 208px;
  padding-top: 20.8rem;
}

.ff45e396 {
  color: rgb(50, 60, 65);
  background: rgb(255, 255, 255);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._6b6fa85f {
  height: 100%;
}

._78efeb35 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
  padding-top: 12px;
  padding-top: 1.2rem;
  padding-bottom: 12px;
  padding-bottom: 1.2rem;
  border-radius: 0;
}

.f294f2cc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(255, 255, 255);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 45em) {
  .f294f2cc {
    max-width: 36rem;
  }
}

@media (min-width: 63.75em) {
  .f294f2cc {
    position: static;
  }
}

._7fd6b5e6 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237);
}

._11ce1d62 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

._7843d5f2 {
  color: rgb(255, 102, 0);
}

._74a514a1 ._3fe3fbf8,
  ._74a514a1 ._69b37780 {
    opacity: 0;
  }

.f60320cf ._3fe3fbf8,
  .f60320cf ._69b37780 {
    opacity: 1;
    -webkit-transition: opacity 600ms ease-out;
    transition: opacity 600ms ease-out;
  }

.f8f6f79a ._3fe3fbf8,
  .f8f6f79a ._69b37780 {
    opacity: 1;
  }

._72ff847e ._3fe3fbf8,
  ._72ff847e ._69b37780 {
    opacity: 0;
    -webkit-transition: opacity 600ms ease-out;
    transition: opacity 600ms ease-out;
  }

._77dfbf99 {
  width: 100%;
}

._15cefed9 {
  width: 50%;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  white-space: nowrap;
}

._9b05703b {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 44px;
  height: 4.4rem;
  padding-left: 16px;
  padding-left: 1.6rem;
  padding-right: 32px;
  padding-right: 3.2rem;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  color: rgb(50, 60, 65);
  border-radius: 0;
  border: 1px solid rgb(173, 177, 179);
  border: 0.1rem solid rgb(173, 177, 179);
}

._3d815fc4 {
  padding-left: 28px;
  padding-left: 2.8rem;
  padding-right: 16px;
  padding-right: 1.6rem;
}

._8d8c49d4 {
  margin: 0;
  padding-right: 12px;
  padding-right: 1.2rem;
  padding-left: 12px;
  padding-left: 1.2rem;
  line-height: 44px;
  line-height: 4.4rem;
}

.dadbc747 {
  border-color: rgb(208, 2, 27);
}

.e4c6cd39 {
  padding-top: 4px;
  padding-top: 0.4rem;
  font-size: 14px;
  font-size: 1.4rem;
  color: rgb(208, 2, 27);
}

._4608967b {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  top: 4px;
  top: 0.4rem;
}

._9c00a975 {
  position: absolute;
  display: block;
  right: 16px;
  right: 1.6rem;
  top: 10px;
  top: 1rem;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  color: rgb(50, 60, 65);
}

._5581f89a {
  left: 16px;
  left: 1.6rem;
  right: auto;
  right: initial;
}

._1f7ee9c8 {
  margin-top: 26px;
  margin-top: 2.6rem;
}

/* Fix Firefox */

@-moz-document url-prefix() {
  ._1f7ee9c8 {
    margin-top: 3.2rem;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._25ae3e30 {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.a67c5627 {
  text-transform: uppercase;
}

._6d8c96a3 {
  margin-bottom: 32px;
  margin-bottom: 3.2rem
}

._6d8c96a3:last-child {
  margin-bottom: 0;
}

@media (min-width: 45em) {

  ._6d8c96a3 {
    margin-bottom: 4.8rem;
  }
}

@media (min-width: 63.75em) {

  ._6d8c96a3 {
    margin-top: 2.4rem;
  }
}

.cb65f3a7 {
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgb(166, 166, 166);
  border-bottom: 0.1rem solid rgb(166, 166, 166);
}

._64b1719b {
  border-bottom: 1px solid rgb(166, 166, 166);
  border-bottom: 0.1rem solid rgb(166, 166, 166)
}

._64b1719b:last-child {
  border-bottom: none;
}

._5fc7257a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._70b0e2f3 {
  padding: 16px 0;
  padding: 1.6rem 0;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  font-weight: 600;
}

@media (min-width: 45em) {

  ._70b0e2f3 {
    padding: 2.4rem 0;
  }
}

.b64e663d {
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._8f60e6fb {
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

._560b52cd {
  width: 100%;
}

@media (min-width: 45em) {

  ._13156578 {
    display: none;
  }
}

.ecd0185d {
  display: inline;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  text-decoration: underline;
}

.ecd0185d:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

._5d8aa0b7 {
  z-index: 1;
}

._7f6f7752 {
  z-index: 80;
}

.be701430 {
  z-index: 80;
}

._38e20c53 {
  z-index: 90;
}

.cb7fbba1 {
  z-index: 115;
}

._72d270b0 {
  z-index: 1000;
}

._78c84068 {
  z-index: 1100;
}

._1ccc3328 {
  z-index: 10000;
}

._14517d81 {
  padding: 8px 0;
  padding: 0.8rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  width: 100%;
  color: rgb(60, 60, 60);
  position: relative;
}

._14517d81:hover {
  background-color: rgb(237, 237, 237)
}

._14517d81:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  left: -0.8rem;
  height: 100%;
  width: 8px;
  width: 0.8rem;
  background-color: rgb(237, 237, 237);
}

._6646a113 {
  border: 1px solid rgb(166, 166, 166);
  border: 0.1rem solid rgb(166, 166, 166);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

._6646a113:hover::before {
  content: none;
}

._226741c4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-left: 8px;
  padding-left: 0.8rem;
}

._7c7b86a5 {
  margin: 0;
}

._92d3b384 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  text-align: left;
}

.a8a85faf {
  vertical-align: text-top;
  margin: 0;
}

.e37d29cb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._6c18efe3 {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

._0ca1858e {
  z-index: 1;
}

.f7a9c478 {
  z-index: 80;
}

.ff9a32b5 {
  z-index: 80;
}

._6dd47436 {
  z-index: 90;
}

._5157997f {
  z-index: 115;
}

.ec042118 {
  z-index: 1000;
}

.faeae5e6 {
  z-index: 1100;
}

._26cbdbf2 {
  z-index: 10000;
}

._4107f915 {
  text-decoration: underline;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
  margin: 8px 0;
  margin: 0.8rem 0;
  color: rgb(60, 60, 60);
  outline: none;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.aa229676 {
  margin: 32px 0;
  margin: 3.2rem 0;
}

@media (min-width: 63.75em) {

  .aa229676 {
    margin-top: 0;
    margin-bottom: 1.6rem;
  }
}

.d244a554 {
  border-top: 1px solid rgb(60, 60, 60);
  border-top: 0.1rem solid rgb(60, 60, 60);
  background-color: rgb(255, 255, 255);
  padding: 24px 0;
  padding: 2.4rem 0;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.cf65b97f {
  text-align: center;
}

@media (min-width: 63.75em) {

  .cf65b97f {
    text-align: left;
  }
}

.cf65b97f a {
  text-decoration: underline;
}

.b2714a2a {
  /* Note that we use !important to overwrite the globally-set !important
   * styles that accompany CMS content */
  text-align: center;
}

@media (min-width: 63.75em) {

  .b2714a2a {
    text-align: left;
    margin-bottom: 0 !important;
  }
}

._6145a066 {
  margin: 0 auto;
  width: 75%;
}

._1055f949 {
  width: 100%;
  outline: none;
}

@media (min-width: 63.75em) {

  ._1055f949 {
    text-align: left;
  }
}

/*
 * z-index
 */

.a53fbf24 {
  z-index: 1;
}

._71299259 {
  z-index: 80;
}

._04af78e3 {
  z-index: 80;
}

._3b34566a {
  z-index: 90;
}

.b2652e00 {
  z-index: 115;
}

._9f93eedb {
  z-index: 1000;
}

._4ba1dab3 {
  z-index: 1100;
}

._504e80c9 {
  z-index: 10000;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

/*
  Why important is allowed for utils classes?
  - It is common practice (see https://github.com/twbs/bootstrap/blob/ff29c1224c20b8fcf2d1e7c28426470f1dc3e40d/scss/utilities/_visibility.scss)
  - If you put util class on element, it reads like element is having those styles, they should override any conflicting rule
  - In case if rule with !important need to be overwritten, just remove util class and write your own.
*/

/*
 * Naked Button
 */

._1158c20a {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: inherit;
}

/*
 * Naked Action, Link, Button or Anchor
 */

._100e83b1 {
  display: block;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
}

button._100e83b1:not([disabled]) {
  cursor: pointer;
}

._7545beab {
  display: inline;
}

.aab82275 {
  color: inherit;
  text-decoration: underline
}

.aab82275:hover {
  font-weight: 500;
}

/*
 * Pullers
 */

._1d4932a8 {
  float: left !important;
}

.c0076c34 {
  float: right !important;
}

/* Note this wont always centralise, quick and dirty */

._6ad6048b {
  margin: 0 auto;
}

._4ae1816a {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

._51a6d304 {
  max-width: 1400px;
  max-width: 140rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 63.75em) {

  ._7a5fbc03 {
    max-width: 36.8rem;
  }
}

@media (min-width: 45em) {

  ._472a14ad {
    max-width: 36.8rem;
  }
}

/*
 * Anchors
 */

.f36fbc2b {
  display: block;
  text-decoration: underline;
  color: inherit
}

.f36fbc2b:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

@media (hover: none) {

  .f36fbc2b:hover {
    color: #000;
    color: initial;
  }
}

/**
 * Alignment
 */

._8b546c56 {
  text-align: left;
}

._84523ee1 {
  text-align: center;
}

._4f720c5f {
  text-align: right;
}

.a5545a35 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.bbab3855 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._91bc2d79 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._8257c2d9 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.a592a450 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

._312476fd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1
}

._312476fd::before,
  ._312476fd::after {
  content: ' ';
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

.c9ff6f10 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._11069337 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.b58b0abf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.c71821fd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._315f587e {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.aa00db7e {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._0ad4dbd7 {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

._4d0e53ab {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._290f1d3c {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.b83512a4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

._8f5fa58d {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

._64229515 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.fdf6adf6 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.eabdffcc {
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important; /* Grid CSS will override when combined */
}

._5ebc6f75 {
  position: relative;
}

/*
 * Sizing
 */

._80a0dcfc {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.fc3eab2d {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

._57d7b56d {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

.e3ccf278 {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
}

._2c1aed70 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.c971d147 {
  display: block;
  width: 100%;
}

.b24f1983 {
  display: block;
  height: 100%;
}

.de02ffdf {
  width: 100vw;
}

.f3b64eef {
  height: 100vh;
}

._19f640ab {
  overflow-x: scroll;
}

._7519258b {
  overflow-y: scroll;
}

/*
 * Visibility
 */

.b529cfeb {
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute;
}

._5000dfe8 {
  display: none !important;
}

._59695978 {
  opacity: 0 !important;
  pointer-events: none !important;
}

.c462cabb {
  -webkit-perspective: 100rem;
          perspective: 100rem;
}

/*
 * Font rendering
 */

.b99ce641 {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

._16630298 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Font styling
 */

/* Weights */

._30dcb758 {
  font-weight: 300;
}

._4707d7a1 {
  font-weight: 400;
}

.adb43286 {
  font-weight: 500;
}

.c70935fd {
  font-weight: 600;
}

/* Sizes */

._3c8da757 {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
}

._029193f8 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
}

._7d02888c {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._172fe8e1 {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
}

.b1b3053b {
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
}

._29bcbab1 {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 40px;
  line-height: 4rem;
}

._95ad4931 {
  font-size: 48px;
  font-size: 4.8rem;
  line-height: 56px;
  line-height: 5.6rem;
}

._12a43940 {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 16px;
    line-height: 1.6rem;
  }

._54e32303 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 20px;
    line-height: 2rem;
  }

._4ddeef73 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

._26cb3b9b {
    font-size: 20px;
    font-size: 2rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

._5bd7b929 {
    font-size: 26px;
    font-size: 2.6rem;
    line-height: 32px;
    line-height: 3.2rem;
  }

.ff62d533 {
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 40px;
    line-height: 4rem;
  }

.ebfa36be {
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 56px;
    line-height: 5.6rem;
  }

@media (min-width: 45em) {
  ._0aef4c09 {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  .eefa5783 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ._840bd3fb {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  .bb5d670c {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  ._2940f19e {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._72e5cd16 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  .f328d7a9 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

@media (min-width: 63.75em) {
  .d8a7d307 {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  ._4d9b1024 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  .b1bd0420 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  .ca22b075 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  ._16833c4c {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._5d3dd9af {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  ._7b901f52 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

._868060f6 {
  line-height: 24px;
  line-height: 2.4rem;
}

.bbed7a76 {
  line-height: 40px;
  line-height: 4rem;
}

.c592347f {
  line-height: 19px;
  line-height: 1.9rem;
}

._1917d13c {
  line-height: 13px;
  line-height: 1.3rem;
}

/* Text margins */

/* TODO: WFE-7446 put text margins to text.css file */

/* margin none rule needs to be before others as it needs to be overridden by them */

._6fdba3fa {
  margin: 0;
}

._524f4210 {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

.ce60d940 {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

._87ec2024 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._14ec6b9e {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.cc4eb3ce {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._48f9610b {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._074f6b58 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

@media (min-width: 45em) {
  ._13af570a {
    margin-bottom: 0.8rem;
  }
  .fd3a9abf {
    margin-bottom: 0.8rem;
  }
  .dfc86165 {
    margin-bottom: 1.6rem;
  }
  ._5404ccf4 {
    margin-bottom: 1.6rem;
  }
  ._0c4a929b {
    margin-bottom: 1.6rem;
  }
  ._8f44b914 {
    margin-bottom: 1.6rem;
  }
  ._32d3f653 {
    margin-bottom: 1.6rem;
  }
}

@media (min-width: 63.75em) {
  .a6014d39 {
    margin-bottom: 0.8rem;
  }
  ._1ebb1114 {
    margin-bottom: 0.8rem;
  }
  ._4d11d46b {
    margin-bottom: 1.6rem;
  }
  ._2ba087fa {
    margin-bottom: 1.6rem;
  }
  ._8c99b4b7 {
    margin-bottom: 1.6rem;
  }
  ._484017ff {
    margin-bottom: 1.6rem;
  }
  ._5b48f075 {
    margin-bottom: 1.6rem;
  }
}

.bd011f93 {
  margin-left: 4px;
  margin-left: 0.4rem;
}

._14f81857 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

._35f1f377 {
  margin-left: 12px;
  margin-left: 1.2rem;
}

._32288f5c {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._9cc0670b {
  margin-left: auto;
}

._20248633 {
  margin-right: 4px;
  margin-right: 0.4rem;
}

._61126589 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

.e31d2709 {
  margin-right: 12px;
  margin-right: 1.2rem;
}

._3b37d6fa {
  margin-right: 16px;
  margin-right: 1.6rem;
}

.b8020397 {
  margin-right: auto;
}

._212d9b69 {
}

/* Styles */

.e839e124 {
  font-style: italic;
}

._5e9a661d {
  text-transform: uppercase;
}

.eb5b6081 {
  text-transform: lowercase;
}

.effa267a {
  text-decoration: line-through;
}

.dcb32f36 {
  white-space: nowrap;
}

._82606bfe {
  text-decoration: underline;
}

.e711dc1e {
  font-weight: 600 !important;
}

._3c7c76fa {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/*
 * Truncation
 */

.c3674067 {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.e7548664 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

._43462165 {
  -webkit-line-clamp: 1;
}

._590a3d58 {
  -webkit-line-clamp: 2;
}

._36a2e34d {
  -webkit-line-clamp: 3;
}

._6de19abf {
  -webkit-line-clamp: 4;
}

.cf0607d4 {
  -webkit-line-clamp: 5;
}

.c646f36e {
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

._0b2bd139 {
  color: rgb(237, 237, 237);
}

/*
 * Color
 */

/* Text colors */

._9c74df13,
._8049748c {
  color: rgb(255, 102, 0);
}

.e31d8f22 {
  color: rgb(50, 60, 65);
}

.a05b9a1a {
  color: rgb(111, 118, 122);
}

._4d5c3b07 {
  color: rgb(255, 255, 255);
}

._9f5682a2 {
  color: rgb(91, 99, 103);
}

._0a407847 {
  color: rgb(208, 2, 27);
}

._02fafff4 {
  color: rgb(166, 166, 166);
}

.d9ca63dd {
  color: inherit;
}

/* Background colors */

._6c41677f {
  background-color: white;
}

.def32146 {
  background-color: rgb(242, 242, 242);
}

._486b8bb7 {
  background-color: rgb(241, 239, 238);
}

._8c5a5447 {
  background-color: rgb(60, 60, 60);
}

.ccc0d1b6 {
  background-color: rgb(237, 234, 227);
}

.fb950488 {
  background-color: rgb(202, 195, 187);
}

._55785cb4 {
  background-color: rgb(250, 250, 248);
}

._7e638633 {
  background-color: rgb(242, 240, 238);
}

._58481c96 {
  background-color: rgb(234, 235, 236);
}

/*
 * Drop shadow
 */

._523970ca {
  -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
          box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
}

._042fe0dd {
  -webkit-box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
          box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
}

._4e71cf0a {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.cb72b577 {
  padding-top: 16px !important;
  padding-top: 1.6rem !important;
}

._38701e4a {
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

._55cf61bc {
  padding-top: 24px;
  padding-top: 2.4rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

._6311a5ab {
  padding-left: 16px !important;
  padding-left: 1.6rem !important;
  padding-right: 16px !important;
  padding-right: 1.6rem !important;
}

._82e78809 {
  padding-top: 24px;
  padding-top: 2.4rem;
}

.f752e202 {
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

.b55beaa8 {
  padding-top: 4px;
  padding-top: 0.4rem;
}

.f9c43e68 {
  padding-left: 0 !important;
}

._56a7c880 {
  padding-bottom: 0 !important;
}

.bd604af7 {
  padding: 0 !important;
}

.dcfd238e {
  padding-left: 8px !important;
  padding-left: 0.8rem !important;
}

._28fc9d4e {
  padding-right: 24px !important;
  padding-right: 2.4rem !important;
}

/*
 * Shaping
 */

._87c4c170 {
  border-radius: 20rem;
}

.fa7d0a9e {
  border-radius: 0.4rem;
}

/*
 * list
 */

.ace87701 {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.f88985bf {
  text-decoration: none
}

.f88985bf:hover {
  text-decoration: underline;
}

._5aa536b0 {
  text-decoration: underline
}

._5aa536b0:hover {
  text-decoration: none;
}

.ebd06880 {
  text-decoration: underline;
  -webkit-transition: color 200ms;
  transition: color 200ms
}

.ebd06880:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

._6b01225d {
  text-transform: none;
}

._5cd911e1 {
  border-top: 1px solid rgb(166, 166, 166);
  border-top: 0.1rem solid rgb(166, 166, 166);
}

.c48e5fa5 {
  padding: 8px;
  padding: 0.8rem;
}

/*
 * Grid
 */

._3c359d32 {
  padding-bottom: 40px;
  padding-bottom: 4rem;
}

.cdfe23a1 {
  padding-bottom: 4px;
  padding-bottom: 0.4rem;
}

@media (max-width: 44.99em) {
  ._3c359d32 {
    padding-bottom: 2rem;
  }
}

._3c359d32::after,
.cdfe23a1::after {
  content: '';
  position: absolute;
  width: calc(100% - 1.8rem);
  height: 1px;
  height: 0.1rem;
  bottom: 0;
  right: 0;
  background: rgb(166, 166, 166);
  margin-left: 24px;
  margin-left: 2.4rem;
}

/*
 * Separators
 */

.f95db737 {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-top: 0.1rem solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  border-bottom: 0.1rem solid rgba(255, 255, 255, .3);
}

._5013f92f {
  margin-top: 30px;
  margin-top: 3rem;
  margin-bottom: 30px;
  margin-bottom: 3rem;
}

._444edaeb {
  border-color: rgb(237, 237, 237) !important;
}

.a76b83cc {
  border-color: rgb(166, 166, 166) !important;
}

._088c22bc {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237)
}

._088c22bc:first-child {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
}

._17236656 {
  border-bottom: 1px solid rgb(210, 210, 210);
  border-bottom: 0.1rem solid rgb(210, 210, 210)
}

._17236656:first-child {
  border-top: 1px solid rgb(210, 210, 210);
  border-top: 0.1rem solid rgb(210, 210, 210);
}

.d2a114d6 {
  border-bottom: 1px solid rgb(60, 60, 60);
  border-bottom: 0.1rem solid rgb(60, 60, 60)
}

.d2a114d6:first-child {
  border-top: 1px solid rgb(60, 60, 60);
  border-top: 0.1rem solid rgb(60, 60, 60);
}

/*
 * https://webaim.org/techniques/css/invisiblecontent/
 * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_screen-reader.scss
 */

._4afa7f51 {
  position: absolute;
  /* stylelint-disable */
  width: 1px;
  height: 1px;
  /* stylelint-enable */
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  border: 0;
}

/**
 * Remove native input clear button.
 * See https://github.com/necolas/normalize.css/commit/f7c98c4c859c15363763f10a439b63d85b9afba0#diff-bb3dde41d97f19be8ab7b4780a915d5e
 */

[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/**
 * Add outline to input boxes when in desktop view to avoid ios safari bug.
 */

._7ee22070 {
  outline: none;
}

@media (min-width: 63.75em) {

  ._7ee22070:focus {
    outline: 0.4rem auto -webkit-focus-ring-color;
  }
}

.fdcb7424 {
  pointer-events: none;
  cursor: not-allowed;
}

._04e96203 input[type='number'] {
  -moz-appearance: textfield
}

._04e96203 input[type='number']::-webkit-inner-spin-button,
  ._04e96203 input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/**
 * Full width content, break out of grid
 */

._358dd198 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (min-width: 63.75em) {

  ._358dd198 {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

.bcbbafb5 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  .bcbbafb5 {
    width: 140rem;
  }
}

._21dfbc45 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  ._21dfbc45 {
    width: 100vw;
  }
}

/*
 * Margins
 */

.a00b9dda {
  margin: 0 !important;
}

._1399a3ef {
  margin-top: 0 !important;
}

._6ab0a87b {
  margin-bottom: 0 !important;
}

._66bced1b {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
}

.a8e3609b {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
}

._76e7fc6f {
  margin-top: 48px !important;
  margin-top: 4.8rem !important;
}

._6fe6573a {
  margin-top: 64px !important;
  margin-top: 6.4rem !important;
}

.d2dcfcc9 {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
}

._34d5ad4f {
  margin-top: 4px !important;
  margin-top: 0.4rem !important;
}

.c0070184 {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
}

.f9f22566 {
  margin-top: 20px !important;
  margin-top: 2rem !important;
}

._9120985c {
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

.bf22c08f {
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

.c62ebf35 {
  margin-bottom: 40px !important;
  margin-bottom: 4rem !important;
}

.b14840a7 {
  margin-bottom: 48px !important;
  margin-bottom: 4.8rem !important;
}

._814c47af {
  margin-bottom: 56px !important;
  margin-bottom: 5.6rem !important;
}

.f9f75fbc {
  margin-bottom: 64px !important;
  margin-bottom: 6.4rem !important;
}

._98100779 {
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

._1cbaa254 {
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

._1120bbb6 {
  margin-bottom: 4px !important;
  margin-bottom: 0.4rem !important;
}

._54fda52a {
  margin-right: 16px;
  margin-right: 1.6rem;
}

.d1fe4d9b {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._051f1d76 {
  margin-right: 24px;
  margin-right: 2.4rem;
}

.ad54da3d {
  margin-right: 32px;
  margin-right: 3.2rem;
}

._91a98b77 {
  margin-left: 32px;
  margin-left: 3.2rem;
}

._916911ca {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._09c2883b {
  margin-left: 8px;
  margin-left: 0.8rem;
}

._8cc3de21 {
  margin-left: 24px;
  margin-left: 2.4rem;
}

._5bf74959 {
  margin-left: auto !important;
  margin-right: auto !important;
}

._1412013a {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

.ce845b0b {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

._80177ba5 {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

.a5e5a040 {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

/* Font Face */

._30dcb758 {
  font-family: 'GoodHome-Light', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.adb43286 {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.c70935fd {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._47f34410 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 20%;
  max-width: 352px;
  max-width: 35.2rem;
  min-width: 220px;
  min-width: 22rem;
  margin-right: 16px;
  margin-right: 1.6rem
}

._47f34410:last-child {
  margin-right: 0;
}

@media (max-width: 73.6875em) {

  ._47f34410 {
    width: 25%;
  }
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._47f34410 {
    width: 33.33333%;
  }
}

@media (max-width: 44.99em) {

  ._47f34410 {
    width: 50%;
    min-width: 14rem;
  }
}

._69f3d5a6 {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._6f1a9607 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}

/*
 * z-index
 */

.ce0e9c54 {
  z-index: 1;
}

._23d25a1c {
  z-index: 80;
}

._2ec7eb07 {
  z-index: 80;
}

.fa5a8925 {
  z-index: 90;
}

._7b21c963 {
  z-index: 115;
}

.fdc949f5 {
  z-index: 1000;
}

._380d6e1b {
  z-index: 1100;
}

.d2945441 {
  z-index: 10000;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

/*
  Why important is allowed for utils classes?
  - It is common practice (see https://github.com/twbs/bootstrap/blob/ff29c1224c20b8fcf2d1e7c28426470f1dc3e40d/scss/utilities/_visibility.scss)
  - If you put util class on element, it reads like element is having those styles, they should override any conflicting rule
  - In case if rule with !important need to be overwritten, just remove util class and write your own.
*/

/*
 * Naked Button
 */

._02923ee8 {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: inherit;
}

/*
 * Naked Action, Link, Button or Anchor
 */

._54058821 {
  display: block;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
}

button._54058821:not([disabled]) {
  cursor: pointer;
}

.de308fc7 {
  display: inline;
}

._065dcc1d {
  color: inherit;
  text-decoration: underline
}

._065dcc1d:hover {
  font-weight: 500;
}

/*
 * Pullers
 */

._08ba1c65 {
  float: left !important;
}

.d18d6822 {
  float: right !important;
}

/* Note this wont always centralise, quick and dirty */

._3aa6dc14 {
  margin: 0 auto;
}

._25ab3a71 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

._6c904aab {
  max-width: 1400px;
  max-width: 140rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 63.75em) {

  ._00b40194 {
    max-width: 36.8rem;
  }
}

@media (min-width: 45em) {

  ._0a2266a7 {
    max-width: 36.8rem;
  }
}

/*
 * Anchors
 */

.a2f7383c {
  display: block;
  text-decoration: underline;
  color: inherit
}

.a2f7383c:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

@media (hover: none) {

  .a2f7383c:hover {
    color: #000;
    color: initial;
  }
}

/**
 * Alignment
 */

._7e096013 {
  text-align: left;
}

._21d9eba1 {
  text-align: center;
}

._0656d670 {
  text-align: right;
}

.c76a26c6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.c9fd2299 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._9c3ea01e {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._4ce5dfb5 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.a6cad630 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

._4264822c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1
}

._4264822c::before,
  ._4264822c::after {
  content: ' ';
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

.c36c0f84 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._69f3f78f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._898bd8e2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.fa968152 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.c87001d7 {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.aac2db91 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._3163985c {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

._1549b40c {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._52cbb2ee {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

._9c79b015 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.c7c188e5 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

._5dec476c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._1bcf44af {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

._97b7e208 {
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important; /* Grid CSS will override when combined */
}

._3cf85f21 {
  position: relative;
}

/*
 * Sizing
 */

._93c825b2 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

._9cf82e72 {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

._29351701 {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

._4f50623b {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
}

._1b6e6cc6 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

._56bcc2b0 {
  display: block;
  width: 100%;
}

._9d2383ae {
  display: block;
  height: 100%;
}

._5837366d {
  width: 100vw;
}

._5fc6c1c7 {
  height: 100vh;
}

.d81c7f6a {
  overflow-x: scroll;
}

._0ec5615c {
  overflow-y: scroll;
}

/*
 * Visibility
 */

._4a95d335 {
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute;
}

.aa90db21 {
  display: none !important;
}

._15d5fa96 {
  opacity: 0 !important;
  pointer-events: none !important;
}

._8c64222e {
  -webkit-perspective: 100rem;
          perspective: 100rem;
}

/*
 * Font rendering
 */

._228f0de3 {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

._81314ede {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Font styling
 */

/* Weights */

.d7039dbe {
  font-weight: 300;
}

.ffdebc61 {
  font-weight: 400;
}

.d40ac688 {
  font-weight: 500;
}

.adfcda18 {
  font-weight: 600;
}

/* Sizes */

._3cad90e4 {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
}

._658ef2c4 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
}

._1b964870 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._75c41d3d {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
}

.e9ba78af {
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
}

._68855705 {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 40px;
  line-height: 4rem;
}

._448d04d1 {
  font-size: 48px;
  font-size: 4.8rem;
  line-height: 56px;
  line-height: 5.6rem;
}

._6124a7c2 {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 16px;
    line-height: 1.6rem;
  }

.bd39aa69 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 20px;
    line-height: 2rem;
  }

.a503a570 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

.d7dc09f9 {
    font-size: 20px;
    font-size: 2rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

.a32675af {
    font-size: 26px;
    font-size: 2.6rem;
    line-height: 32px;
    line-height: 3.2rem;
  }

._8f8e0ccb {
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 40px;
    line-height: 4rem;
  }

._16feb3da {
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 56px;
    line-height: 5.6rem;
  }

@media (min-width: 45em) {
  ._89372711 {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  ._083c9b09 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ._1378c5b4 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  .a371df52 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  .b6698c61 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._1b394a3c {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  .a68c4b50 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

@media (min-width: 63.75em) {
  ._1f6dbe33 {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  ._7c729f7f {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  .de588758 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  ._819b4927 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  .b3949bd4 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._04b50b8f {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  ._3922dc11 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

._1f32f8ec {
  line-height: 24px;
  line-height: 2.4rem;
}

._95e5f963 {
  line-height: 40px;
  line-height: 4rem;
}

._7449a93b {
  line-height: 19px;
  line-height: 1.9rem;
}

.ef2a0aff {
  line-height: 13px;
  line-height: 1.3rem;
}

/* Text margins */

/* TODO: WFE-7446 put text margins to text.css file */

/* margin none rule needs to be before others as it needs to be overridden by them */

.e4c53111 {
  margin: 0;
}

.be337e1c {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

._11786f80 {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

._61ceafd2 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.f216a399 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.fad23ff6 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.e40c9082 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.bcba4aee {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

@media (min-width: 45em) {
  ._23affc87 {
    margin-bottom: 0.8rem;
  }
  ._2503bdef {
    margin-bottom: 0.8rem;
  }
  ._58ecf8b9 {
    margin-bottom: 1.6rem;
  }
  .b9c860bb {
    margin-bottom: 1.6rem;
  }
  ._70df5bb8 {
    margin-bottom: 1.6rem;
  }
  ._6c58e21b {
    margin-bottom: 1.6rem;
  }
  ._36542e23 {
    margin-bottom: 1.6rem;
  }
}

@media (min-width: 63.75em) {
  ._890fb37e {
    margin-bottom: 0.8rem;
  }
  ._804fef8d {
    margin-bottom: 0.8rem;
  }
  ._06aa9a23 {
    margin-bottom: 1.6rem;
  }
  ._1e9f262a {
    margin-bottom: 1.6rem;
  }
  .cbbdd7ce {
    margin-bottom: 1.6rem;
  }
  ._3c94becc {
    margin-bottom: 1.6rem;
  }
  ._048e749d {
    margin-bottom: 1.6rem;
  }
}

._8017c1b5 {
  margin-left: 4px;
  margin-left: 0.4rem;
}

._3b8a86af {
  margin-left: 8px;
  margin-left: 0.8rem;
}

.fb5bc27d {
  margin-left: 12px;
  margin-left: 1.2rem;
}

._7912f317 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

.c72f384a {
  margin-left: auto;
}

._2620cd9e {
  margin-right: 4px;
  margin-right: 0.4rem;
}

._1e73da37 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

.dae10fde {
  margin-right: 12px;
  margin-right: 1.2rem;
}

._4c7027ca {
  margin-right: 16px;
  margin-right: 1.6rem;
}

.ba1405ce {
  margin-right: auto;
}

.aaebadd5 {
}

/* Styles */

.add1e9f1 {
  font-style: italic;
}

._60db4090 {
  text-transform: uppercase;
}

._06c27963 {
  text-transform: lowercase;
}

.d76ad980 {
  text-decoration: line-through;
}

._17a5f0e2 {
  white-space: nowrap;
}

._4bf97fe2 {
  text-decoration: underline;
}

._162843b4 {
  font-weight: 600 !important;
}

._9d282e2a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/*
 * Truncation
 */

._6d9d63b6 {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

._09da3a4c {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

._31be313d {
  -webkit-line-clamp: 1;
}

._8b72f5da {
  -webkit-line-clamp: 2;
}

._9afae285 {
  -webkit-line-clamp: 3;
}

._1dea602b {
  -webkit-line-clamp: 4;
}

._39d36bb4 {
  -webkit-line-clamp: 5;
}

.bd6e28da {
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

.ce0966f6 {
  color: rgb(237, 237, 237);
}

/*
 * Color
 */

/* Text colors */

._4177dd82,
.e03ff18f {
  color: rgb(255, 102, 0);
}

._495d01e6 {
  color: rgb(50, 60, 65);
}

.cb725592 {
  color: rgb(111, 118, 122);
}

._90ef0a54 {
  color: rgb(255, 255, 255);
}

._30a894f9 {
  color: rgb(91, 99, 103);
}

.e52945b0 {
  color: rgb(208, 2, 27);
}

.ea88a52b {
  color: rgb(166, 166, 166);
}

.e249ddc4 {
  color: inherit;
}

/* Background colors */

._45f5e2d4 {
  background-color: white;
}

._4fb69b05 {
  background-color: rgb(242, 242, 242);
}

._2f112b62 {
  background-color: rgb(241, 239, 238);
}

._15bfd240 {
  background-color: rgb(60, 60, 60);
}

._82ba34d3 {
  background-color: rgb(237, 234, 227);
}

.f3dcf6dd {
  background-color: rgb(202, 195, 187);
}

.a91dc4fa {
  background-color: rgb(250, 250, 248);
}

._51bb84a9 {
  background-color: rgb(242, 240, 238);
}

.e1c7703b {
  background-color: rgb(234, 235, 236);
}

/*
 * Drop shadow
 */

._05229f85 {
  -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
          box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
}

._46cfbb28 {
  -webkit-box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
          box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
}

.ad20558a {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.fcd7aa5d {
  padding-top: 16px !important;
  padding-top: 1.6rem !important;
}

._2d725f9f {
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

.b0e0f1ec {
  padding-top: 24px;
  padding-top: 2.4rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

._66740f89 {
  padding-left: 16px !important;
  padding-left: 1.6rem !important;
  padding-right: 16px !important;
  padding-right: 1.6rem !important;
}

._3bf719b9 {
  padding-top: 24px;
  padding-top: 2.4rem;
}

.e7b42471 {
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

.b5a483a8 {
  padding-top: 4px;
  padding-top: 0.4rem;
}

._53009a1e {
  padding-left: 0 !important;
}

.c7c84c3a {
  padding-bottom: 0 !important;
}

.e615e054 {
  padding: 0 !important;
}

._2e952a87 {
  padding-left: 8px !important;
  padding-left: 0.8rem !important;
}

._06af1cdf {
  padding-right: 24px !important;
  padding-right: 2.4rem !important;
}

/*
 * Shaping
 */

._9a23de4d {
  border-radius: 20rem;
}

._3b96de5b {
  border-radius: 0.4rem;
}

/*
 * list
 */

.e8fb443a {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.faba3bb3 {
  text-decoration: none
}

.faba3bb3:hover {
  text-decoration: underline;
}

._0cebbc70 {
  text-decoration: underline
}

._0cebbc70:hover {
  text-decoration: none;
}

._6d431732 {
  text-decoration: underline;
  -webkit-transition: color 200ms;
  transition: color 200ms
}

._6d431732:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

._1fa216e6 {
  text-transform: none;
}

._943c0406 {
  border-top: 1px solid rgb(166, 166, 166);
  border-top: 0.1rem solid rgb(166, 166, 166);
}

._60c9f38f {
  padding: 8px;
  padding: 0.8rem;
}

/*
 * Grid
 */

._54a936dc {
  padding-bottom: 40px;
  padding-bottom: 4rem;
}

._541333ac {
  padding-bottom: 4px;
  padding-bottom: 0.4rem;
}

@media (max-width: 44.99em) {
  ._54a936dc {
    padding-bottom: 2rem;
  }
}

._54a936dc::after,
._541333ac::after {
  content: '';
  position: absolute;
  width: calc(100% - 1.8rem);
  height: 1px;
  height: 0.1rem;
  bottom: 0;
  right: 0;
  background: rgb(166, 166, 166);
  margin-left: 24px;
  margin-left: 2.4rem;
}

/*
 * Separators
 */

._8c0f9fd5 {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-top: 0.1rem solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  border-bottom: 0.1rem solid rgba(255, 255, 255, .3);
}

._2c0321a6 {
  margin-top: 30px;
  margin-top: 3rem;
  margin-bottom: 30px;
  margin-bottom: 3rem;
}

._2b0281b7 {
  border-color: rgb(237, 237, 237) !important;
}

.d1c1f625 {
  border-color: rgb(166, 166, 166) !important;
}

.f29c8a8a {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237)
}

.f29c8a8a:first-child {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
}

._4577cad1 {
  border-bottom: 1px solid rgb(210, 210, 210);
  border-bottom: 0.1rem solid rgb(210, 210, 210)
}

._4577cad1:first-child {
  border-top: 1px solid rgb(210, 210, 210);
  border-top: 0.1rem solid rgb(210, 210, 210);
}

.a6d923dc {
  border-bottom: 1px solid rgb(60, 60, 60);
  border-bottom: 0.1rem solid rgb(60, 60, 60)
}

.a6d923dc:first-child {
  border-top: 1px solid rgb(60, 60, 60);
  border-top: 0.1rem solid rgb(60, 60, 60);
}

/*
 * https://webaim.org/techniques/css/invisiblecontent/
 * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_screen-reader.scss
 */

.fb37b40d {
  position: absolute;
  /* stylelint-disable */
  width: 1px;
  height: 1px;
  /* stylelint-enable */
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  border: 0;
}

/**
 * Remove native input clear button.
 * See https://github.com/necolas/normalize.css/commit/f7c98c4c859c15363763f10a439b63d85b9afba0#diff-bb3dde41d97f19be8ab7b4780a915d5e
 */

[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/**
 * Add outline to input boxes when in desktop view to avoid ios safari bug.
 */

.ebad0380 {
  outline: none;
}

@media (min-width: 63.75em) {

  .ebad0380:focus {
    outline: 0.4rem auto -webkit-focus-ring-color;
  }
}

.edf3e907 {
  pointer-events: none;
  cursor: not-allowed;
}

._45b78b3c input[type='number'] {
  -moz-appearance: textfield
}

._45b78b3c input[type='number']::-webkit-inner-spin-button,
  ._45b78b3c input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/**
 * Full width content, break out of grid
 */

.f6ff5b95 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (min-width: 63.75em) {

  .f6ff5b95 {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

._36b0b079 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  ._36b0b079 {
    width: 140rem;
  }
}

._81750851 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  ._81750851 {
    width: 100vw;
  }
}

/*
 * Margins
 */

.adacbab0 {
  margin: 0 !important;
}

._82d82bc0 {
  margin-top: 0 !important;
}

._9961c905 {
  margin-bottom: 0 !important;
}

._55b06ee6 {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
}

.e60263e1 {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
}

._56c0999c {
  margin-top: 48px !important;
  margin-top: 4.8rem !important;
}

._04f92cf4 {
  margin-top: 64px !important;
  margin-top: 6.4rem !important;
}

._12ff1aca {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
}

._5544fdd8 {
  margin-top: 4px !important;
  margin-top: 0.4rem !important;
}

._55510689 {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
}

._19336b51 {
  margin-top: 20px !important;
  margin-top: 2rem !important;
}

._01b1012c {
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

._31bcbe32 {
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

._5a19b231 {
  margin-bottom: 40px !important;
  margin-bottom: 4rem !important;
}

._8270a9f9 {
  margin-bottom: 48px !important;
  margin-bottom: 4.8rem !important;
}

.c1f95833 {
  margin-bottom: 56px !important;
  margin-bottom: 5.6rem !important;
}

._4627264c {
  margin-bottom: 64px !important;
  margin-bottom: 6.4rem !important;
}

._5653e813 {
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

.bf379b88 {
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

._3dee7a98 {
  margin-bottom: 4px !important;
  margin-bottom: 0.4rem !important;
}

.c64777cc {
  margin-right: 16px;
  margin-right: 1.6rem;
}

._2c990af8 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._9599d0b5 {
  margin-right: 24px;
  margin-right: 2.4rem;
}

._39bd80a0 {
  margin-right: 32px;
  margin-right: 3.2rem;
}

._18591dfa {
  margin-left: 32px;
  margin-left: 3.2rem;
}

.ccce3ce2 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

.b16b438b {
  margin-left: 8px;
  margin-left: 0.8rem;
}

.f0e18b55 {
  margin-left: 24px;
  margin-left: 2.4rem;
}

._323821f6 {
  margin-left: auto !important;
  margin-right: auto !important;
}

._847e29d8 {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

._62419e6f {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

._2274d6a4 {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

.faee0cac {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

/* Font Face */

.d7039dbe {
  font-family: 'GoodHome-Light', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.d40ac688 {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.adfcda18 {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.c7b89003 {
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgb(255, 255, 255);
  border: 1px dotted rgb(166, 166, 166);
  border: 0.1rem dotted rgb(166, 166, 166);
}

.a1a76ccb {
}

._63a6052f {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

@media (max-width: 44.99em) {

  ._63a6052f {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

._931dd807 {
  width: 100%;
  max-width: none;
  margin-right: 16px;
  margin-right: 1.6rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._931dd807 {
    width: 6.4rem;
    height: 6.4rem;
  }
}

@media (min-width: 63.75em) {

  ._931dd807 {
    width: 10rem;
    height: 10rem;
  }
}

@media (max-width: 44.99em) {

  .e6d743d0 {
    font-weight: 600;
  }
}

._357b4e14 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  margin-left: 116px;
  margin-left: 11.6rem;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._357b4e14 {
    margin-left: 8rem;
  }
}

@media (max-width: 44.99em) {

  ._357b4e14 {
    margin-left: 0;
  }
}

._3b965759 {
  min-width: 100%;
  margin: 0;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

._82e918e9 {
  z-index: 1;
}

._14861ed8 {
  z-index: 80;
}

.cb8d90b5 {
  z-index: 80;
}

._285c9792 {
  z-index: 90;
}

._37f7b63a {
  z-index: 115;
}

.a8386203 {
  z-index: 1000;
}

.de782755 {
  z-index: 1100;
}

._7406923c {
  z-index: 10000;
}

._1013a3ee {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  width: 100vw;
  left: 0;
  bottom: 0;
  z-index: 60;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: rgb(255, 255, 255);
}

._0ff3ea6a {
  background: rgb(255, 255, 255);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: sticky;
  z-index: 10;
  top: 0;
  padding: 16px 16px 8px;
  padding: 1.6rem 1.6rem 0.8rem;
}

@media (max-width: 44.99em) {

  ._0ff3ea6a {
    position: static;
    padding: 0.8rem;
  }
}

._541dbdf5 {
  -webkit-box-shadow: 0 0.8rem 0.6rem -0.6rem rgba(152, 152, 152, .5);
          box-shadow: 0 0.8rem 0.6rem -0.6rem rgba(152, 152, 152, .5);
}

.fef0b0ee {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (max-width: 44.99em) {

  ._1b1d811a {
    font-size: 2rem;
    font-weight: 400;
  }
}

._20d0637c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (max-width: 44.99em) {

  ._20d0637c {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

.ce708555 {
  padding: 0;
  margin: 0 16px;
  margin: 0 1.6rem;
}

@media (max-width: 44.99em) {

  .ce708555 {
    margin: 0;
    padding: 0 0.8rem;
  }
}

._55b829c7 {
  background-color: rgb(237, 237, 237);
}

._98c697b0 {
  padding: 16px 0;
  padding: 1.6rem 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (max-width: 44.99em) {

  ._98c697b0 {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._8d5ea2bf {
  border-top: 1px solid rgb(214, 216, 217);
  border-top: 0.1rem solid rgb(214, 216, 217);
  background-color: rgb(255, 255, 255);
  padding: 24px 0;
  padding: 2.4rem 0;
}

.ad9454fd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 1400px;
  width: 140rem;
  min-width: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 32px;
  padding: 0 3.2rem;
  margin-left: 0;
}

@media (max-width: 44.99em) {

  .ad9454fd {
    padding: 0 1.6rem;
  }
}

.f4cbb383 {
  padding: 12px 0;
  padding: 1.2rem 0;
  line-height: 20px;
  line-height: 2rem;
  border: none;
}

@media (max-width: 44.99em) {

  .f4cbb383 {
    max-width: 100%;
    padding: 0.8rem 0;
    line-height: 1.6rem;
  }
}

._08c4b92e {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 16px;
  margin-right: 1.6rem;
}

@media (max-width: 44.99em) {

  ._59bbb545 span {
    display: block;
    margin: 0;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._190cafcd {
  margin-bottom: 64px;
  margin-bottom: 6.4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._11c24790 {
  position: relative;
  height: 100%;
}

.b509ec14 {
  height: 100%;
  width: 100%;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  .e2f66779 {
    padding: 0 3.2rem;
  }
}

._97238146 {
  margin-bottom: 0;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._737d48de {
  background-color: rgb(255, 255, 255);
}

@media (min-width: 63.75em) {

  ._737d48de {
    /* this is to prevent drop shadow from product cards
      awkwardly running next to the sticky filter bar */
    padding: 0 1.6rem;
    margin: 0 -1.6rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._340bc0b8 {
  margin-top: 48px;
  margin-top: 4.8rem;
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

._9d7e3e23 {
  margin-top: 24px;
  margin-top: 2.4rem;
  margin-bottom: 48px;
  margin-bottom: 4.8rem;
}

._395162dd {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

.e34307ed {
  margin: 16px 20px;
  margin: 1.6rem 2rem;
  cursor: pointer;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._51b8a30c {
  padding: 32px;
  padding: 3.2rem
}

._51b8a30c::before,
  ._51b8a30c::after {
  content: none;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._6661a2b6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 30px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 12px;
  font-size: 1.2rem;
  padding: 0 8px 0 0;
  padding: 0 0.8rem 0 0;
}

._8851413e {
  padding-top: 8px;
  padding-top: 0.8rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._4c7aed26 {
  margin-top: 16px;
  margin-top: 1.6rem;
  background: rgb(241, 239, 238);
  -webkit-box-shadow: none;
          box-shadow: none;
}

._4c7aed26 button {
    margin-left: 0;
    margin-bottom: 0;
    width: auto;
  }

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._5cdc92c5 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  padding: 24px 16px;
  padding: 2.4rem 1.6rem;
  text-align: left;
}

@media (min-width: 45em) {

  ._5cdc92c5 {
    padding: 3.2rem;
  }
}

@media (min-width: 63.75em) {

  ._5cdc92c5 {
    margin-bottom: 1.6rem;
  }
}

@media (min-width: 63.75em) {

  ._37ec03a7 {
    max-width: 102rem;
  }
}

@media (min-width: 45em) {

  .d635c354 {
    width: 49%;
  }
}

._9120c04a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media (max-width: 63.74em) {

  ._9120c04a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

._9120c04a > div {
    width: 49%;
}

@media (max-width: 44.99em) {

  ._9120c04a > div {
    width: 100%;
  }
}

@media (min-width: 63.75em) {

  ._9120c04a > div:nth-child(2) {
    margin-left: auto;
  }
}

._9120c04a ._33ff6056 {
    margin-top: 0;
}

@media (min-width: 63.75em) {

  ._9120c04a ._33ff6056 {
    margin-top: 16px;
    margin-top: 1.6rem;
    padding-top: 32px;
    padding-top: 3.2rem;
  }
}

@media (min-width: 45em) {

  ._0f1fd7c4 .b1b25dfc {
      margin-left: 0;
  }

  ._0f1fd7c4 p {
      width: 50%;
  }
}

.e5db5f4c {
  padding-top: 8px;
  padding-top: 0.8rem;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._2aede0b2 {
    width: 49%;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._1c626d3a {
  background-color: rgb(255, 255, 255);
  width: 100%;
}

@media (min-width: 45em) {

  ._1c626d3a {
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}

@media (min-width: 45em) and (-ms-high-contrast: active),
  (-ms-high-contrast: none) {

  ._1c626d3a {
    display: table-cell;
  }
}

._7e4a7963 {
}

._5c2d6b25 {
  background-color: rgb(255, 255, 255);
}

@media (min-width: 45em) {

  ._5c2d6b25 {
    padding: 0 3.2rem 0;
  }
}

@media (max-width: 44.99em) {

  ._5c2d6b25 {
    padding: 0 1.6rem 0;
  }
}

.be57cfa3 {
}

.af537c50 {
  height: 100vh;
  width: 100%;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.b2cda830 img {
  max-width: 100%;
}

.de2e8ca7 {
  max-width: 600px;
  max-width: 60rem;
}

._9ee81aaa {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._6ea729c4 {
  width: 100%;
  height: auto;
}

@media (min-width: 45em) {

  ._6ea729c4 {
    width: 60rem;
    /* Modal content is not scrollable in IE11 with height: auto */
  }
}

@media (min-width: 45em) and (-ms-high-contrast: active),
  (-ms-high-contrast: none) {

  ._6ea729c4 {
    height: 100%;
  }
}

._9d5c81e3 {
  padding: 16px 0;
  padding: 1.6rem 0;
  margin-bottom: -16px;
  margin-bottom: -1.6rem;
  width: 100%;
  text-align: left;
}

._27828576 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._74495d24 input {
  border-color: rgb(166, 166, 166);
  border-radius: 0;
  padding-left: 8px;
  padding-left: 0.8rem;
}

._0074754a {
  left: auto;
  right: 0;
}

.e2dc3e4d {
  margin: 0 auto;
}

.a83ea1cd {
  margin-left: 0;
  margin-right: 0;
}

._346c572c::before,
  ._346c572c::after {
  margin: 0;
}

._4df47ba7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._552f5e5b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 16px;
  margin-top: 1.6rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.a587b763 {
  margin-bottom: 16px;
  margin-bottom: 1.6rem
}

.a587b763:last-child {
  margin-bottom: 0;
}

@media (max-width: 44.99em) {

  .a587b763 {
    border-radius: 0;
    margin-left: -1.6rem;
    margin-right: -1.6rem;
  }
}

._27cc6a55 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 12px;
  margin-bottom: 1.2rem;
}

@media (min-width: 45em) {

  ._96ed94aa {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

._27cc6a55 > *,
._96ed94aa > * {
  margin-right: 16px;
  margin-right: 1.6rem
}

._27cc6a55 > *:last-child, ._96ed94aa > *:last-child {
  margin-right: 0;
}

._07303585 {
  width: 40px;
  width: 4rem;
  height: 40px;
  height: 4rem;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.a7e3f18d {
  margin-left: auto;
}

@media (max-width: 44.99em) {

  .ea6f08a9 {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }

  .ea6f08a9 > span {
    margin-left: 0.4rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.c9fbe002 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-right: 24px;
  padding-right: 2.4rem;
}

.eebbb9aa {
  margin: 8px 0;
  margin: 0.8rem 0;
}

._548dc9b8 {
  font-weight: bold;
}

._77107c60 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin-top: 16px;
  margin-top: 1.6rem;
}

._539d9436 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 50%;
  cursor: pointer;
}

._2c931011 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._3b2c98ad {
  margin-left: 8px;
  margin-left: 0.8rem;
}

.eab40da2 {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._6114580a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._1d277271 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

._729c54a1 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._1ae94afe {
  margin: 12px 0 8px;
  margin: 1.2rem 0 0.8rem;
  font-weight: bold;
}

._0834e478 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 40px;
}

._0834e478 i {
    width: 28px;
    width: 2.8rem;
    height: 28px;
    height: 2.8rem;
  }

._0834e478:focus-within > i {
  outline: none !important;
}

._0834e478 input:checked + i circle:last-of-type {
    fill: rgb(255, 102, 0);
}

._09b4e037 {
  margin: 8px 8px 0;
  margin: 0.8rem 0.8rem 0;
  height: 40px;
  height: 4rem;
  width: 120px;
  width: 12rem;
  min-width: 120px;
  min-width: 12rem;
}

._45200173 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 100%;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._63fb0b78 {
  margin-top: 32px;
  margin-top: 3.2rem;
}

.e604473a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 16px 12px 4px;
  margin: 1.6rem 1.2rem 0.4rem;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

/*
 * z-index
 */

.aff5a351 {
  z-index: 1;
}

._429bab68 {
  z-index: 80;
}

._1a7dac0b {
  z-index: 80;
}

.c098b0ba {
  z-index: 90;
}

.e57e6a9a {
  z-index: 115;
}

.b1616e29 {
  z-index: 1000;
}

._8ee7ffe0 {
  z-index: 1100;
}

.d928ba54 {
  z-index: 10000;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {
  /* WFE-3363: These should be removed they are not valid font sizes */
}

/*
  Why important is allowed for utils classes?
  - It is common practice (see https://github.com/twbs/bootstrap/blob/ff29c1224c20b8fcf2d1e7c28426470f1dc3e40d/scss/utilities/_visibility.scss)
  - If you put util class on element, it reads like element is having those styles, they should override any conflicting rule
  - In case if rule with !important need to be overwritten, just remove util class and write your own.
*/

/*
 * Naked Button
 */

.a4cedfb1 {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: inherit;
}

/*
 * Naked Action, Link, Button or Anchor
 */

._715d3a62 {
  display: block;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
}

button._715d3a62:not([disabled]) {
  cursor: pointer;
}

._45a8a618 {
  display: inline;
}

._69a8ba5a {
  color: inherit;
  text-decoration: underline
}

._69a8ba5a:hover {
  font-weight: 500;
}

/*
 * Pullers
 */

._43ab213a {
  float: left !important;
}

.f55d4380 {
  float: right !important;
}

/* Note this wont always centralise, quick and dirty */

._55b5870c {
  margin: 0 auto;
}

.d7f54db9 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

._6ada91a0 {
  max-width: 1400px;
  max-width: 140rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 63.75em) {

  ._05a691a9 {
    max-width: 36.8rem;
  }
}

@media (min-width: 45em) {

  ._33311ec9 {
    max-width: 36.8rem;
  }
}

/*
 * Anchors
 */

._84ffb12a {
  display: block;
  text-decoration: underline;
  color: inherit
}

._84ffb12a:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

@media (hover: none) {

  ._84ffb12a:hover {
    color: #000;
    color: initial;
  }
}

/**
 * Alignment
 */

.c6c7815a {
  text-align: left;
}

.ac77d467 {
  text-align: center;
}

._4be58476 {
  text-align: right;
}

._963b20fa {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

._69cf8180 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.dd80bdb1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.ecff9f1a {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.dbf2db64 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

._131fadd3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1
}

._131fadd3::before,
  ._131fadd3::after {
  content: ' ';
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

._5ea46551 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.e6f9e694 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

._1a4af204 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.cc8bc4eb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._3f14bf76 {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

._57b5ce49 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

._13ffa194 {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

._6e5b3059 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

._256e4340 {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.c63bb05a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

._78f2e495 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.c4eefcbc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

._8f3fdcd6 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.d66c5d67 {
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important; /* Grid CSS will override when combined */
}

._7d66376e {
  position: relative;
}

/*
 * Sizing
 */

.c222127c {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.f2c606b1 {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

._81867522 {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

.f5a2432b {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
}

.cac8be89 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.cceb4918 {
  display: block;
  width: 100%;
}

._0459ff90 {
  display: block;
  height: 100%;
}

.dd9d2240 {
  width: 100vw;
}

._72c5ad20 {
  height: 100vh;
}

._79db8c38 {
  overflow-x: scroll;
}

._695bf857 {
  overflow-y: scroll;
}

/*
 * Visibility
 */

._6ca1e7b3 {
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute;
}

.d31be547 {
  display: none !important;
}

._0793d9e4 {
  opacity: 0 !important;
  pointer-events: none !important;
}

._84db84a7 {
  -webkit-perspective: 100rem;
          perspective: 100rem;
}

/*
 * Font rendering
 */

.f734b037 {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

._0f6a8a71 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * Font styling
 */

/* Weights */

._23d0a9e0 {
  font-weight: 300;
}

._0680dbe1 {
  font-weight: 400;
}

.c72fb0e1 {
  font-weight: 500;
}

._04473c21 {
  font-weight: 600;
}

/* Sizes */

._5f95ae35 {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 16px;
  line-height: 1.6rem;
}

._3f0f08c2 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 20px;
  line-height: 2rem;
}

._72f918cd {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 24px;
  line-height: 2.4rem;
}

._95e9bc52 {
  font-size: 20px;
  font-size: 2rem;
  line-height: 24px;
  line-height: 2.4rem;
}

.e3a16a5b {
  font-size: 26px;
  font-size: 2.6rem;
  line-height: 32px;
  line-height: 3.2rem;
}

.e90d19ce {
  font-size: 32px;
  font-size: 3.2rem;
  line-height: 40px;
  line-height: 4rem;
}

._4368b9f9 {
  font-size: 48px;
  font-size: 4.8rem;
  line-height: 56px;
  line-height: 5.6rem;
}

.f06d11a5 {
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 16px;
    line-height: 1.6rem;
  }

._14684fa6 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 20px;
    line-height: 2rem;
  }

.c7f815ef {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

.fa6356d4 {
    font-size: 20px;
    font-size: 2rem;
    line-height: 24px;
    line-height: 2.4rem;
  }

.aed46490 {
    font-size: 26px;
    font-size: 2.6rem;
    line-height: 32px;
    line-height: 3.2rem;
  }

.ccbbd3b9 {
    font-size: 32px;
    font-size: 3.2rem;
    line-height: 40px;
    line-height: 4rem;
  }

._69fde0a3 {
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 56px;
    line-height: 5.6rem;
  }

@media (min-width: 45em) {
  .ad63df1d {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  ._5ad68b08 {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ._454c9ec1 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  ._0271a839 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  .be655478 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._57dbaaed {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  ._9f520158 {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

@media (min-width: 63.75em) {
  ._228ff3aa {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
  .d9f36a0a {
    font-size: 1.4rem;
    line-height: 2rem;
  }
  ._3f13bc17 {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  .c5c21107 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
  ._60ebd963 {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }
  ._95a15e06 {
    font-size: 3.2rem;
    line-height: 4rem;
  }
  .c534949a {
    font-size: 4.8rem;
    line-height: 5.6rem;
  }
}

._885a250d {
  line-height: 24px;
  line-height: 2.4rem;
}

._27c28989 {
  line-height: 40px;
  line-height: 4rem;
}

._394dafec {
  line-height: 19px;
  line-height: 1.9rem;
}

.e4551dcd {
  line-height: 13px;
  line-height: 1.3rem;
}

/* Text margins */

/* TODO: WFE-7446 put text margins to text.css file */

/* margin none rule needs to be before others as it needs to be overridden by them */

._7596f8c3 {
  margin: 0;
}

._08e85445 {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

._81d0258a {
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }

._2e24c122 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.c0a3c3e2 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._054875cf {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

.b196189a {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

._6fb96233 {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
  }

@media (min-width: 45em) {
  ._2084d9c1 {
    margin-bottom: 0.8rem;
  }
  ._7b6eb929 {
    margin-bottom: 0.8rem;
  }
  .b4672401 {
    margin-bottom: 1.6rem;
  }
  ._7ef4cd25 {
    margin-bottom: 1.6rem;
  }
  .dfc3ce33 {
    margin-bottom: 1.6rem;
  }
  ._7b8826bb {
    margin-bottom: 1.6rem;
  }
  ._1a507326 {
    margin-bottom: 1.6rem;
  }
}

@media (min-width: 63.75em) {
  ._4dbbd3b4 {
    margin-bottom: 0.8rem;
  }
  ._8fc9b2de {
    margin-bottom: 0.8rem;
  }
  .b0c37b8b {
    margin-bottom: 1.6rem;
  }
  .b01a366f {
    margin-bottom: 1.6rem;
  }
  ._431da8ed {
    margin-bottom: 1.6rem;
  }
  .d355934e {
    margin-bottom: 1.6rem;
  }
  .abc59538 {
    margin-bottom: 1.6rem;
  }
}

.ea274566 {
  margin-left: 4px;
  margin-left: 0.4rem;
}

.fe7d6033 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

._968aa0d5 {
  margin-left: 12px;
  margin-left: 1.2rem;
}

.df970d01 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

._8dfb7055 {
  margin-left: auto;
}

.cff40026 {
  margin-right: 4px;
  margin-right: 0.4rem;
}

._8d835fbe {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._06a3d658 {
  margin-right: 12px;
  margin-right: 1.2rem;
}

._6c03b168 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

._74b0d898 {
  margin-right: auto;
}

.f3b70ea2 {
}

/* Styles */

._01da1b3c {
  font-style: italic;
}

.f5bd928d {
  text-transform: uppercase;
}

._20e7b0ef {
  text-transform: lowercase;
}

._1cd83e83 {
  text-decoration: line-through;
}

._5c385967 {
  white-space: nowrap;
}

._88eb1023 {
  text-decoration: underline;
}

.d5cd41ad {
  font-weight: 600 !important;
}

.a263fefe {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/*
 * Truncation
 */

._3c6f454c {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

._9c37004b {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

._3aed7962 {
  -webkit-line-clamp: 1;
}

._897636e3 {
  -webkit-line-clamp: 2;
}

.e1df86be {
  -webkit-line-clamp: 3;
}

._7fcba466 {
  -webkit-line-clamp: 4;
}

._9cc058a8 {
  -webkit-line-clamp: 5;
}

._295a3571 {
  white-space: pre-wrap;
  word-wrap: break-word;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

.bbf20760 {
  color: rgb(237, 237, 237);
}

/*
 * Color
 */

/* Text colors */

._4d3f98f8,
.dc6c6d6b {
  color: rgb(255, 102, 0);
}

._9f1f33b5 {
  color: rgb(50, 60, 65);
}

._2b8d9db9 {
  color: rgb(111, 118, 122);
}

.c16a608d {
  color: rgb(255, 255, 255);
}

._9a761ca9 {
  color: rgb(91, 99, 103);
}

._11431643 {
  color: rgb(208, 2, 27);
}

._1dffcd9c {
  color: rgb(166, 166, 166);
}

.f8295af2 {
  color: inherit;
}

/* Background colors */

._2bd37389 {
  background-color: white;
}

._3c5b5584 {
  background-color: rgb(242, 242, 242);
}

._64272072 {
  background-color: rgb(241, 239, 238);
}

._6665e9ca {
  background-color: rgb(60, 60, 60);
}

._4ccd3ae3 {
  background-color: rgb(237, 234, 227);
}

.ed8dcde1 {
  background-color: rgb(202, 195, 187);
}

.a143685d {
  background-color: rgb(250, 250, 248);
}

._198e07f5 {
  background-color: rgb(242, 240, 238);
}

._8e7b263e {
  background-color: rgb(234, 235, 236);
}

/*
 * Drop shadow
 */

._09e243bc {
  -webkit-box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
          box-shadow: 0 0.1rem 0.5rem 0 rgba(152, 152, 152, .5);
}

._16ba7265 {
  -webkit-box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
          box-shadow: 0 0.6rem 1rem -0.1rem rgba(152, 152, 152, .5);
}

.bfe8e214 {
  -webkit-box-shadow: none;
          box-shadow: none;
}

._2c04965a {
  padding-top: 16px !important;
  padding-top: 1.6rem !important;
}

.e813f5a3 {
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

.b3dab456 {
  padding-top: 24px;
  padding-top: 2.4rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

.c7ec3655 {
  padding-left: 16px !important;
  padding-left: 1.6rem !important;
  padding-right: 16px !important;
  padding-right: 1.6rem !important;
}

.bbba273e {
  padding-top: 24px;
  padding-top: 2.4rem;
}

._4c83948a {
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

._743de6b7 {
  padding-top: 4px;
  padding-top: 0.4rem;
}

.a820bb0b {
  padding-left: 0 !important;
}

._5e6dc305 {
  padding-bottom: 0 !important;
}

.c1fe9d7b {
  padding: 0 !important;
}

._70985020 {
  padding-left: 8px !important;
  padding-left: 0.8rem !important;
}

._8bf02d0f {
  padding-right: 24px !important;
  padding-right: 2.4rem !important;
}

/*
 * Shaping
 */

.fa7df4b1 {
  border-radius: 20rem;
}

.bd13f3b2 {
  border-radius: 0.4rem;
}

/*
 * list
 */

.aadba5a6 {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

._1a6d2ecc {
  text-decoration: none
}

._1a6d2ecc:hover {
  text-decoration: underline;
}

._92b5c692 {
  text-decoration: underline
}

._92b5c692:hover {
  text-decoration: none;
}

.c220fdd1 {
  text-decoration: underline;
  -webkit-transition: color 200ms;
  transition: color 200ms
}

.c220fdd1:hover {
  color: rgb(255, 102, 0);
  text-decoration: underline;
}

._43b5e769 {
  text-transform: none;
}

._04159e7b {
  border-top: 1px solid rgb(166, 166, 166);
  border-top: 0.1rem solid rgb(166, 166, 166);
}

._5c3b72a1 {
  padding: 8px;
  padding: 0.8rem;
}

/*
 * Grid
 */

._4f70c50a {
  padding-bottom: 40px;
  padding-bottom: 4rem;
}

.d2bc88f3 {
  padding-bottom: 4px;
  padding-bottom: 0.4rem;
}

@media (max-width: 44.99em) {
  ._4f70c50a {
    padding-bottom: 2rem;
  }
}

._4f70c50a::after,
.d2bc88f3::after {
  content: '';
  position: absolute;
  width: calc(100% - 1.8rem);
  height: 1px;
  height: 0.1rem;
  bottom: 0;
  right: 0;
  background: rgb(166, 166, 166);
  margin-left: 24px;
  margin-left: 2.4rem;
}

/*
 * Separators
 */

.b676835c {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
  border-top: 0.1rem solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  border-bottom: 0.1rem solid rgba(255, 255, 255, .3);
}

.f95c2791 {
  margin-top: 30px;
  margin-top: 3rem;
  margin-bottom: 30px;
  margin-bottom: 3rem;
}

.c356745c {
  border-color: rgb(237, 237, 237) !important;
}

._0fea619a {
  border-color: rgb(166, 166, 166) !important;
}

.cbb69ca2 {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-bottom: 0.1rem solid rgb(237, 237, 237)
}

.cbb69ca2:first-child {
  border-top: 1px solid rgb(237, 237, 237);
  border-top: 0.1rem solid rgb(237, 237, 237);
}

.faecfd7a {
  border-bottom: 1px solid rgb(210, 210, 210);
  border-bottom: 0.1rem solid rgb(210, 210, 210)
}

.faecfd7a:first-child {
  border-top: 1px solid rgb(210, 210, 210);
  border-top: 0.1rem solid rgb(210, 210, 210);
}

._8ecbc7d0 {
  border-bottom: 1px solid rgb(60, 60, 60);
  border-bottom: 0.1rem solid rgb(60, 60, 60)
}

._8ecbc7d0:first-child {
  border-top: 1px solid rgb(60, 60, 60);
  border-top: 0.1rem solid rgb(60, 60, 60);
}

/*
 * https://webaim.org/techniques/css/invisiblecontent/
 * https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_screen-reader.scss
 */

.b076cf8b {
  position: absolute;
  /* stylelint-disable */
  width: 1px;
  height: 1px;
  /* stylelint-enable */
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  border: 0;
}

/**
 * Remove native input clear button.
 * See https://github.com/necolas/normalize.css/commit/f7c98c4c859c15363763f10a439b63d85b9afba0#diff-bb3dde41d97f19be8ab7b4780a915d5e
 */

[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/**
 * Add outline to input boxes when in desktop view to avoid ios safari bug.
 */

._62358070 {
  outline: none;
}

@media (min-width: 63.75em) {

  ._62358070:focus {
    outline: 0.4rem auto -webkit-focus-ring-color;
  }
}

._451c3e3b {
  pointer-events: none;
  cursor: not-allowed;
}

.f2cd1a04 input[type='number'] {
  -moz-appearance: textfield
}

.f2cd1a04 input[type='number']::-webkit-inner-spin-button,
  .f2cd1a04 input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/**
 * Full width content, break out of grid
 */

._5d1afa46 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (min-width: 63.75em) {

  ._5d1afa46 {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

.a8aed315 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  .a8aed315 {
    width: 140rem;
  }
}

._37e7ab3b {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (min-width: 63.75em) {

  ._37e7ab3b {
    width: 100vw;
  }
}

/*
 * Margins
 */

._292e7dce {
  margin: 0 !important;
}

._4e596c24 {
  margin-top: 0 !important;
}

._1b569dab {
  margin-bottom: 0 !important;
}

.b5155f0b {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
}

._9e61ad40 {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
}

._659bb526 {
  margin-top: 48px !important;
  margin-top: 4.8rem !important;
}

.aacf2a89 {
  margin-top: 64px !important;
  margin-top: 6.4rem !important;
}

._70b0f02a {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
}

._9ec60d2e {
  margin-top: 4px !important;
  margin-top: 0.4rem !important;
}

.c24353cf {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
}

._17858aa7 {
  margin-top: 20px !important;
  margin-top: 2rem !important;
}

._03b1c960 {
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

.f2c2033e {
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

._6b128168 {
  margin-bottom: 40px !important;
  margin-bottom: 4rem !important;
}

.a5ee65f8 {
  margin-bottom: 48px !important;
  margin-bottom: 4.8rem !important;
}

._5afab543 {
  margin-bottom: 56px !important;
  margin-bottom: 5.6rem !important;
}

._9052716d {
  margin-bottom: 64px !important;
  margin-bottom: 6.4rem !important;
}

._262d1b24 {
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

.ddd37b64 {
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

._3e111d8e {
  margin-bottom: 4px !important;
  margin-bottom: 0.4rem !important;
}

.de2d8915 {
  margin-right: 16px;
  margin-right: 1.6rem;
}

.bc728901 {
  margin-right: 8px;
  margin-right: 0.8rem;
}

._7b48b0fb {
  margin-right: 24px;
  margin-right: 2.4rem;
}

._142c0753 {
  margin-right: 32px;
  margin-right: 3.2rem;
}

._36d46b9a {
  margin-left: 32px;
  margin-left: 3.2rem;
}

._591bfdf0 {
  margin-left: 16px;
  margin-left: 1.6rem;
}

.dc9633b1 {
  margin-left: 8px;
  margin-left: 0.8rem;
}

.bff04ccf {
  margin-left: 24px;
  margin-left: 2.4rem;
}

._5686ec2f {
  margin-left: auto !important;
  margin-right: auto !important;
}

._3e3c8f21 {
  margin-top: 16px !important;
  margin-top: 1.6rem !important;
  margin-bottom: 16px !important;
  margin-bottom: 1.6rem !important;
}

.a97caed0 {
  margin-top: 8px !important;
  margin-top: 0.8rem !important;
  margin-bottom: 8px !important;
  margin-bottom: 0.8rem !important;
}

._78497a96 {
  margin-top: 24px !important;
  margin-top: 2.4rem !important;
  margin-bottom: 24px !important;
  margin-bottom: 2.4rem !important;
}

.a71baaf6 {
  margin-top: 32px !important;
  margin-top: 3.2rem !important;
  margin-bottom: 32px !important;
  margin-bottom: 3.2rem !important;
}

/* Font Face */

._23d0a9e0 {
  font-family: 'GoodHome-Light', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

.c72fb0e1 {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

._04473c21 {
  font-family: 'GoodHome-Bold', 'GoodHome', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
}

 {
  @-webkit-keyframes b6f5ed54 {
    0%,
    100% {
      opacity: 0.22;
    }
    1% {
      opacity: 1;
    }
  }
}

@keyframes b6f5ed54 {
    0%,
    100% {
      opacity: 0.22;
    }
    1% {
      opacity: 1;
    }
  }

.pi-main-container {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

.pi-main-container .pi-center-box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 5px;
    width: 5px;
    margin: auto;
    background-color: rgba(0, 0, 255, .5);
    z-index: 100;
  }

.pi-main-container .pi-attribution {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 4px;
    color: #444;
    text-align: right;
    font-size: 11px;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    background: rgba(255, 255, 255, .5);
  }

.pi-main-container .pi-attribution a {
    color: #444;
  }

.pi-main-container .pi-maps-container {
    position: absolute;
    height: 100%;
    width: 100%;
  }

.pi-main-container .pi-billboard-screen-svg-icons {
    position: absolute;
    height: 100%;
    width: 100%;
    pointer-events: none;
  }

.pi-main-container .pi-zoomButton {
    display: none;
    position: absolute;
    right: 15px;
    top: 20px;
    height: 36px;
    width: 42.5px;
    background-color: #fbfcfd;
    outline: none;
    margin: 0;
    padding: 0;
    line-height: 32px;
    cursor: pointer;
    color: #868e9b;
    z-index: 99;
    border: solid 1px #edf0f4;
  }

.pi-main-container .pi-zoomUp {
    right: 56px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }

.pi-main-container .pi-zoomButton[disabled] {
    background-color: #eaecee;
  }

.pi-main-container .pi-zoomButton[disabled] .pi-button-text {
    opacity: 0.28;
  }

.pi-main-container .pi-zoomDown {
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
  }

.pi-main-container .pi-compass {
    display: none;
    position: absolute;
    right: 108px;
    top: 20px;
    height: 36px;
    width: 36px;
    background-color: rgba(255, 255, 255, 0);
    outline: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    z-index: 99;
    border: solid 1px #edf0f4;
    background-color: #fbfcfd;
    border-radius: 20px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDEyIDI0Ij4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTYgLTEwKSI+CiAgICA8cGF0aCBkPSJNNjE1LDYwN2wtNiwxMmgxMloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01OTMgLTU5NykiIGZpbGw9IiNmNTM3MzciLz4KICAgIDxwYXRoIGQ9Ik02MTUsNjE3aC02bDYsMTIsNi0xMloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01OTMgLTU5NSkiIGZpbGw9IiNhM2E5YjMiLz4KICA8L2c+Cjwvc3ZnPgo=');
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
  }

.pi-main-container .pi-button-text {
    font-size: 30px;
    font-weight: 300;
    height: 36px;
    line-height: 29px;
  }

.pi-main-container .pi-zone-select {
    cursor: pointer;
    padding-right: 15px;
  }

.pi-main-container .pi-selected-zone {
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 130px;
    overflow: hidden;
    font-size: 14px;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  }

.pi-main-container .pi-caret {
    border-bottom: 7px solid #868e9b;
    border-left: 7px solid rgba(0, 0, 0, 0);
    border-right: 7px solid rgba(0, 0, 0, 0);
    content: '';
    display: inline-block;
    height: 0;
    vertical-align: top;
    width: 0;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    position: absolute;
    top: 14px;
    right: 15px;
  }

.pi-main-container .pi-dropdown-menu {
    border-radius: 10px;
    background-color: #fbfcfd;
    position: absolute;
    list-style: none;
    padding-left: 0;
    width: 200px;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    border: solid 1px #edf0f4;
    z-index: 99;
  }

.pi-main-container .pi-zone-selector {
    visibility: hidden;
    position: absolute;
    border: solid 1px #edf0f4;
    background-color: #fbfcfd;
    cursor: pointer;
    min-width: 150px;
    color: #868e9b;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    padding: 2px 15px;
    border-radius: 18px;
    line-height: 30px;
    z-index: 99;
  }

.pi-main-container .pi-zone-selector .pi-dropdown-menu {
    display: none;
    border-bottom: 1px solid #edf0f4;
    color: #868e9b;
    position: absolute;
    font-size: 14px;
  }

.pi-main-container
    .pi-zone-selector
    .pi-dropdown-menu
    .pi-dropdown-list:not(:last-child) {
    border-bottom: 1px solid #edf0f4;
  }

.pi-main-container .pi-zone-selector .pi-dropdown-menu .pi-dropdown-list {
    padding: 10px;
    position: relative;
    font-size: 14px;
  }

.pi-main-container
    .pi-zone-selector
    .pi-dropdown-menu
    .pi-dropdown-list[active] {
    font-weight: 600;
    color: #17a7e9;
    padding-right: 30px;
  }

.pi-main-container
    .pi-zone-selector
    .pi-dropdown-menu
    .pi-dropdown-list[active]
    .pi-checkMark {
    display: inline-block;
  }

.pi-main-container .pi-zone-selector .pi-dropdown-menu[active] {
    display: block;
  }

.pi-main-container .pi-zone-selector .pi-dropdown-menu.pi-vertical-top {
    top: -17px;
  }

.pi-main-container .pi-zone-selector .pi-dropdown-menu.pi-vertical-bottom {
    bottom: -17px;
  }

.pi-main-container .pi-zone-selector .pi-dropdown-menu.pi-horizontal-left {
    left: -2px;
  }

.pi-main-container .pi-zone-selector .pi-dropdown-menu.pi-horizontal-right {
    right: -2px;
  }

.pi-main-container .pi-zone-selector.pi-top-left {
    top: 20px;
    left: 20px;
  }

.pi-main-container .pi-zone-selector.pi-top-right {
    top: 20px;
    right: 110px;
  }

.pi-main-container .pi-zone-selector.pi-top-right-with-compass {
    top: 20px;
    right: 155px;
  }

.pi-main-container .pi-zone-selector.pi-bottom-left {
    bottom: 20px;
    left: 20px;
  }

.pi-main-container .pi-zone-selector.pi-bottom-right {
    bottom: 30px;
    right: 20px;
  }

.pi-main-container .pi-checkMark {
    width: 22px;
    height: 22px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    display: inline-block;
    right: 8px;
    top: 7px;
    position: absolute;
    display: none;
  }

.pi-main-container .pi-checkMark-stem {
    position: absolute;
    width: 2px;
    height: 16px;
    background-color: #17a7e9;
    left: 15px;
    top: 7px;
  }

.pi-main-container .pi-checkMark-kick {
    position: absolute;
    width: 9px;
    height: 2px;
    background-color: #17a7e9;
    left: 8px;
    top: 23px;
  }

.pi-main-container .bb-text {
    font-weight: 600;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    max-width: 10em;
  }

.pi-main-container .windows-browser .pi-plus {
    margin-bottom: -7px;
  }

.pi-main-container g#Copyright {
    display: none;
  }

.pi-main-container .pi-blue-dot-location {
    fill: #4285f4;
    stroke: white;
  }

.pi-main-container .pi-blue-dot-accuracy {
    fill: #4285f4;
    opacity: 0.3;
  }

.pi-attribution {
    display: none;
  }

.pi-main-container {
    position: relative;
    height: 100%;
    width: 100%;
    min-height: 300px;
    overflow: hidden;
  }

.pi-main-container .pi-zoomButton {
      top: inherit;
      bottom: 20px;
      border-radius: 2px;
      border: solid 1px rgb(70, 79, 84);
    }

.pi-main-container .pi-button-text {
      line-height: 34px;
    }

.pi-main-container .pi-zone-selector.pi-top-right {
      right: 15px;
    }

.pi-main-container .pi-maps-container {
      position: absolute;
      height: 100%;
      width: 100%;
    }

.pi-main-container .pi-dropdown {
      min-width: 70px;
      max-width: 70px;
      border-radius: 1px;
      border: solid 1px rgb(70, 79, 84);
    }

.pi-main-container .pi-dropdown-menu {
      min-width: 70px;
      max-width: 110px;
      border-radius: 1px;
    }

.pi-main-container .pi-zone-selector .pi-dropdown-menu .pi-dropdown-list[active] {
      color: rgb(50, 60, 65);
    }

.pi-main-container .pi-checkMark-kick,
    .pi-main-container .pi-checkMark-stem {
      background-color: rgb(50, 60, 65);
    }

@media (min-width: 45em) {

  .a77939ae {
    min-width: 600px;
  }
}

.ff531188 {
  display: block;
  width: 80px;
  height: 80px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

._4224c1b9 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 0 16px 8px;
  padding: 0 1.6rem 0.8rem;
}

._0c60c52a {
  margin: 0 0 8px 0;
  margin: 0 0 0.8rem 0;
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
}

@media (max-width: 44.99em) {

  ._0c60c52a {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
}

.c55b1db8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: rgb(128, 128, 128);
}

.e0616542 {
  font-size: 20px;
}

._1aa1175f {
  padding: 8px 16px;
  padding: 0.8rem 1.6rem;
}

@media (min-width: 45em) {

  ._1aa1175f {
    padding: 1.6rem;
    background: rgb(239, 240, 240);
  }
}

.f457c6e7 {
  display: block;
  height: 100%;
  min-height: 300px;
  width: 100%;
  background-color: rgb(245, 245, 245);
}

@media (max-width: 44.99em) {

  .f457c6e7 {
    height: auto;
    min-height: none;
    max-height: 400px;
  }
}

._95acd860 {
  text-align: center;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.a8e8f01c {
  width: 100%;
  padding-top: 2px;
  padding-top: 0.2rem;
  padding-bottom: 2px;
  padding-bottom: 0.2rem;
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  margin-top: 16px;
  margin-top: 1.6rem;
}

@media (min-width: 45em) {

  .a8e8f01c {
    width: 25.6rem;
  }
}

@media (max-width: 44.99em) {

  ._06f34db9 {
    width: 100%;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.c67ade27 {
  width: 48px;
  width: 4.8rem;
  height: 48px;
  height: 4.8rem;
  display: inline-block;
}

._8d771d24 {
  padding: 16px 16px 0;
  padding: 1.6rem 1.6rem 0;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._6257ccc8 {
  width: 100%;
  border-top: 1px solid rgb(166, 166, 166);
  border-top: 0.1rem solid rgb(166, 166, 166);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._7f987bd7 {
  padding-top: 0;
  overflow-y: overlay;
  padding-right: 16px;
  padding-right: 1.6rem;
}

@media (min-width: 45em) {

  ._7f987bd7 {
    padding-right: 2.4rem;
  }
}

._9c102d2e {
  min-height: 640px;
  min-height: 64rem;
}

@media (min-width: 45em) {

  ._9c102d2e {
    max-width: 60rem;
    width: 60rem;
  }
}

@media (min-width: 63.75em) {

  ._9c102d2e {
    max-width: 85.6rem;
    width: 85.6rem;
  }
}

._689ac771 {
  height: 348px;
  height: 34.8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._530d7c32 {
  padding-left: 16px;
  padding-left: 1.6rem;
}

@media (min-width: 45em) {

  ._530d7c32 {
    padding-left: 2.4rem;
  }
}

._9f2f0818 {
  padding: 24px 0 24px 16px;
  padding: 2.4rem 0 2.4rem 1.6rem;
}

@media (min-width: 45em) {

  ._9f2f0818 {
    padding: 2.4rem;
    padding-right: 0;
  }
}

._27d0ea67 {
  padding-left: 16px;
  padding-left: 1.6rem;
  padding-bottom: 24px;
  padding-bottom: 2.4rem;
}

@media (min-width: 45em) {

  ._27d0ea67 {
    padding-bottom: 1.6rem;
    padding-left: 2.4rem;
  }
}

@media not all and (min-resolution: 0.001dpcm) {
  ._7f987bd7 {
    padding-right: 1.2rem;
    overflow-y: scroll;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._8777d45b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
}

@media (max-width: 44.99em) {

  ._8777d45b p {
    color: rgb(255, 255, 255);
    font-weight: bold;
  }
}

._2a236f89 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

@media (max-width: 44.99em) {

  ._2a236f89 {
    margin-bottom: 0.2rem;
    margin-top: 0;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._8027dd55 {
  padding: 16px 24px 32px;
  padding: 1.6rem 2.4rem 3.2rem;
}

.c5f6db4f {
  min-height: 48px;
  min-height: 4.8rem;
  word-break: break-word;
}

._5cbfa92e {
  font-weight: 600
}

._5cbfa92e.bfbefa5d {
  margin-bottom: 0;
}

._9d845a99 {
  height: auto;
  max-width: 320px;
  max-width: 32rem;
  position: relative;
}

@media (min-width: 45em) {

  ._9d845a99 {
    max-width: 60rem;
    width: 60rem;
  }
}

@media (min-width: 63.75em) {

  ._9d845a99 {
    max-width: 45.6rem;
    width: 45.6rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.be07af7b {
  position: relative;
  height: auto;
  max-width: 320px;
  max-width: 32rem;
}

@media (min-width: 63.75em) {

  .be07af7b {
    max-width: 57.8rem;
  }
}

._1d17e738 {
  padding: 24px;
  padding: 2.4rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._9c6d085b {
  border-radius: 0;
  height: auto;
}

@media (min-width: 45em) {

  ._9c6d085b {
    width: 60rem;
  }
}

._43920678 {
  border-bottom: 1px solid rgb(173, 177, 179);
  border-bottom: 0.1rem solid rgb(173, 177, 179)
}

._43920678:first-child {
  border-top: 1px solid rgb(173, 177, 179);
  border-top: 0.1rem solid rgb(173, 177, 179);
}

.ad09ce28 {
  color: rgb(50, 60, 65);
  background-color: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

@media (min-width: 45em) {

  .ad09ce28 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.d88fb562 {
  -ms-flex-item-align: center;
      align-self: center;
}

.d31ac4e8 {
  background-color: rgb(255, 255, 255);
  border-color: rgb(173, 177, 179);
  padding-top: 0;
}

@media (min-width: 45em) {

  .d31ac4e8 {
    max-height: 36rem;
  }
}

.bd803137 {
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 16px;
  padding-top: 1.6rem;
  padding-bottom: 16px;
  padding-bottom: 1.6rem;
}

.eec6588b {
  margin: 0;
  border-width: 2px;
  border-width: 0.2rem;
}

@media (min-width: 45em) {

  .eec6588b {
    display: none;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._917ae412 {
  padding: 2px 0;
  padding: 0.2rem 0;
}

.db2c07cb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 2px 0;
  padding: 0.2rem 0;
}

@media (min-width: 45em) {

  .db2c07cb {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

._630526a5 {
  border-radius: 0.4rem;
  margin-bottom: -6px;
  margin-top: 8px;
  margin-top: 0.8rem;
}

.a93c3d61 {
  color: rgb(121, 184, 67);
  font-weight: bold;
}

._12592273 {
  width: 100%;
  padding-left: 24px;
  padding-left: 2.4rem;
  padding-right: 24px;
  padding-right: 2.4rem;
  margin-top: 16px;
  margin-top: 1.6rem;
  margin-bottom: 0;
}

@media (min-width: 45em) {

  ._12592273 {
    margin: 0;
    width: auto;
  }
}

._0aec5ae8 {
  width: 20px;
  width: 2rem;
  height: 20px;
  height: 2rem;
}

._2f0753fd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._28172014 {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  height: auto;
  min-height: auto;
  margin: 0 -24px;
  margin: 0 -2.4rem;
  border-radius: 0;
}

@media (min-width: 45em) {

  ._28172014 {
    max-width: 60rem;
    width: 60rem;
  }
}

._4faf2e1d {
  padding: 16px 16px 0;
  padding: 1.6rem 1.6rem 0;
  color: rgb(50, 60, 65);
  background-color: transparent;
}

@media (min-width: 45em) {

  ._4faf2e1d {
    padding: 2.4rem 2.4rem 0;
  }
}

@media (max-width: 44.99em) {

  ._92a65691 {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}

._22ad6ada {
  padding: 24px 16px 16px;
  padding: 2.4rem 1.6rem 1.6rem;
}

@media (min-width: 45em) {

  ._22ad6ada {
    padding: 2.4rem 2.4rem 3.2rem;
  }
}

._40e81d52 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

.aeb6245f {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 12px;
  margin-top: 1.2rem;
  cursor: pointer;
}

._8db8d1ba {
  margin-right: 9px;
  margin-right: 0.9rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._856cc85d {
  background-color: rgb(255, 255, 255);
  color: rgb(50, 60, 65);
}

@media (max-width: 44.99em) {

  ._856cc85d {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-bottom: 0;
  }
}

.bc190fce {
  width: 85%;
}

._190200ff {
  padding-top: 0;
}

._10df261d {
  resize: none;
}

._2e7a9e2a {
  width: 150px;
  width: 15rem;
  height: 50px;
  height: 5rem;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (min-width: 63.75em) {

  ._7e505938 {
    max-width: 36.8rem;
  }
}

@media (min-width: 45em) {

  ._7e505938 > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.6rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._3aa90f62 {
  margin: 16px 0;
  margin: 1.6rem 0;
  max-width: none;
}

@media (min-width: 45em) {

  ._3aa90f62 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin: 0;
  }
}

.e8c3a103 {
  margin: 16px 0;
  margin: 1.6rem 0;
  max-width: none;
}

@media (min-width: 63.75em) {

  .e8c3a103 {
    min-width: 15.2rem;
    -ms-flex-preferred-size: 15.2rem;
        flex-basis: 15.2rem;
  }
}

@media (min-width: 45em) {

  .e8c3a103 {
    margin: 0;
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._850536d4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

._62bf69df {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-left: 10px;
  margin-left: 1rem;
}

._62bf69df div {
    -ms-flex-preferred-size: 85%;
        flex-basis: 85%;
  }

@media (max-width: 44.99em) {

  ._62bf69df {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._5c667fb2 {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  height: auto;
  min-height: auto;
  margin: 0 -24px;
  margin: 0 -2.4rem;
  border-radius: 0;
}

@media (max-width: 44.99em) {

  ._5c667fb2 {
    -webkit-transform: translate3d(0, calc(50vh - 50%), 0);
            transform: translate3d(0, calc(50vh - 50%), 0);
  }
}

@media (min-width: 45em) {

  ._5c667fb2 {
    max-width: 60rem;
    width: 100%;
  }
}

._4f61fa55 {
  padding: 16px 16px 0;
  padding: 1.6rem 1.6rem 0;
  color: rgb(50, 60, 65);
  background-color: transparent;
}

@media (min-width: 45em) {

  ._4f61fa55 {
    padding: 2.4rem 2.4rem 0;
  }
}

@media (max-width: 44.99em) {

  ._7620192c {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}

.d07f9ef2 {
  padding: 24px 16px 0;
  padding: 2.4rem 1.6rem 0;
}

@media (min-width: 45em) {

  .d07f9ef2 {
    padding: 3.2rem 2.4rem 1.6rem;
  }
}

._0f69076e {
  margin-bottom: 8px;
  margin-bottom: 0.8rem;
  font-weight: bold;
}

@media (min-width: 45em) {

  ._0f69076e {
    font-size: 2rem;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (min-width: 45em) {

  ._7c455181 {
    padding: 0 3.2rem;
  }
}

@media (min-width: 45em) {

  ._86886201 {
    border-radius: 0.4rem;
    border: 0.1rem solid rgb(171, 171, 171);
    margin: 1.6rem 3.2rem;
  }
}

._7adad241 {
  margin: auto 0;
  word-wrap: break-word;
  width: calc(100% - 4.8rem);
}

@media (min-width: 45em) {

  ._7adad241 {
    width: calc(100% - 17.6rem);
  }
}

.ac2bac40 {
  margin: 0;
  width: 48px;
  width: 4.8rem;
}

@media (min-width: 45em) {

  .ac2bac40 {
    width: 17.6rem;
  }
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.c1efdb54 {
  position: relative;
  min-width: 100px;
  min-width: 10rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1 1;
}

._878af824 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid transparent;
  border: 0.1rem solid transparent;
  padding: 8px;
  padding: 0.8rem;
  padding-right: 0;
  line-height: normal;
  border-radius: 0.4rem;
  font-size: 16px;
  font-size: 1.6rem;
  width: 100%;
  background: rgb(255, 255, 255);
  color: rgb(50, 60, 65);
  -webkit-appearance: none;
}

._878af824::-webkit-input-placeholder {
  color: rgb(111, 118, 122);
}

._878af824::-moz-placeholder {
  color: rgb(111, 118, 122);
}

._878af824::-ms-input-placeholder {
  color: rgb(111, 118, 122);
}

._878af824::placeholder {
  color: rgb(111, 118, 122);
}

._878af824::-ms-clear {
  display: none;
}

._10964d71 {
  position: absolute;
  margin: 8px;
  margin: 0.8rem;
  top: 0;
  right: 0;
  pointer-events: auto;
}

._9b7722af {
  position: absolute;
  margin: 8px;
  margin: 0.8rem;
  top: 0;
  left: 0;
  -webkit-transition: opacity 0.1s ease-out;
  transition: opacity 0.1s ease-out;
}

.ae3a194e {
  padding-left: 40px;
  padding-left: 4rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._1c06b15d {
  background: rgb(237, 237, 237);
  padding: 0 16px;
  padding: 0 1.6rem;
}

@media (min-width: 45em) {

  ._1c06b15d {
    padding: 0 3.2rem;
  }
}

._420df5f2 {
  border: 1px solid rgb(166, 166, 166);
  border: 0.1rem solid rgb(166, 166, 166);
}

._6acce167,
._77a6a0a6 {
  margin-right: 0;
}

@media (min-width: 45em) {

  ._6acce167,
._77a6a0a6 {
    max-width: 50%;
  }
}

._77a6a0a6 {
  margin-top: 0;
  background-color: rgb(208, 2, 27);
}

._9980b682,
._85389f96 {
  padding: 0 16px;
  padding: 0 1.6rem;
}

@media (min-width: 45em) {

  ._9980b682,
._85389f96 {
    padding: 0 3.2rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._2052c168 {
  width: 100%;
}

@media (min-width: 45em) {

  ._2052c168 {
    width: 60rem;

    /*Modal content is not scrollable in IE11 with height: auto
   */
  }
}

@media (min-width: 45em) and (-ms-high-contrast: active),
  (-ms-high-contrast: none) {

  ._2052c168 {
    height: 100%;
  }
}

@media (min-width: 45em) {

  .bdc441a0 {
    margin: 0.8rem 2.4rem 2.4rem;
  }
}

._5f056835 {
  padding: 0;
}

@media (min-width: 45em) {

  ._5f056835 {
    padding: 0;
  }
}

._2509bfd4 {
  padding: 16px;
  padding: 1.6rem;
}

@media (min-width: 45em) {

  ._2509bfd4 {
    padding: 1.6rem 2.4rem;
  }
}

.cf336f61 {
  padding-top: 16px;
  padding-top: 1.6rem;
}

@media (min-width: 45em) {

  .cf336f61 {
    padding-top: 0;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._041a1435 {
  width: 600px;
  width: 60rem;
}

.adb4e495 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100px;
  width: 10rem;
  cursor: pointer;
}

.ccfed649 {
  margin-top: 8px;
  margin-top: 0.8rem;
}

._1e32c64a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  border-top: 1px solid rgb(214, 216, 217);
  border-top: 0.1rem solid rgb(214, 216, 217);
}

._6372768b {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 16px;
  margin-right: 1.6rem;
  padding: 0 16px 0 16px;
  padding: 0 1.6rem 0 1.6rem;
  border-radius: 0;
  border: 1px solid rgb(173, 177, 179);
  border: 0.1rem solid rgb(173, 177, 179);
  background-color: rgb(255, 255, 255);
  text-overflow: ellipsis;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.cb165f20 {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

@media (min-width: 45em) {

  .cb165f20 {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}

.fb90aa52 {
    color: rgb(255, 102, 0);
}

.b8423860 {
    color: rgb(121, 184, 67);
}

.cf6f3c95 {
    color: rgb(208, 2, 27);
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

.dd83b8d0 {
  text-transform: uppercase;
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

._85f6bf9e {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid rgb(232, 232, 232);
  border-bottom: 0.1rem solid rgb(232, 232, 232);
}

@media (min-width: 45em) and (max-width: 63.74em), (max-width: 44.99em) {

  ._85f6bf9e {
    padding-bottom: 1.6rem;
  }
}

@media (max-width: 44.99em) {

  ._85f6bf9e {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

._47dab4da {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media (min-width: 45em) and (max-width: 63.74em) {

  ._47dab4da {
    padding-right: 4rem;
  }
}

._37ca4b83 {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

@media (max-width: 44.99em) {

  ._079f21fd {
    text-align: center;
    width: 19.2rem;
    margin: 0 auto;
  }
}

._65fc0edc {
}

._4df2dd1d {
}

._4b7172e3 {
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (min-width: 45em) {

  ._9bfd7e06 {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

@media (min-width: 45em) {

  .f5fdb8aa {
    padding: 1.6rem;
  }
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

/* double = higher specificity without !important */

._9e63d7ef._9e63d7ef {
  margin: 0 auto;
}

._65c9a6a6 {
  display: none;
}

@media (min-width: 45em) {

  ._65c9a6a6 {
    display: block;
    text-align: center;
    margin: 2.4rem 0;
  }
}

._29093aa2 {
  margin-top: 24px;
  margin-top: 2.4rem;
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

@media (min-width: 45em) {

  ._29093aa2 {
    margin: 2.4rem 0;
  }
}

._142c2d77 {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

._24776ff9 {
  cursor: pointer;
}

._65c9a6a6 {
  display: block;
  text-align: left;
  margin: 0;
}

@media (min-width: 45em) {

  ._65c9a6a6 {
    margin: 2.4rem 0;
  }
}

._858c5a31 {
  padding: 16px;
  padding: 1.6rem;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(173, 177, 179);
  border: 0.1rem solid rgb(173, 177, 179);
  margin-bottom: 16px;
  margin-bottom: 1.6rem;
}

._662750ab {
  display: none;
}

._3c182fbf {
  display: block;
}

.c233494f {
  margin-right: 20px;
  margin-right: 2rem;
}

:root {
  /* Palette */

  /* Brand */

  /* Buttons - Primary */

  /* Buttons - Secondary */

  /* Buttons - Tertiary */

  /* Classes */

  /*
    Elements (as defined in the Colour Matrix)
    https://app.zeplin.io/project/5afd7fb8b7edeb431d74f807/screen/5c190fea9630f416ee2cdc1c (Jan 2019)
  */
}

:root {

  /* Buttons */

  /* Elements */
}

:root {
  /*
  highlight the old ones (top root) which we want to eventually remove / add to design spec
  should not add any vars to this one
  */
}

:root {

  /**
   * Text sizes, must be used in conjunction with the corresponding line-height.
   * These text sizes should match design guidelines: https://zpl.io/VqwOQnY
   */

  /*
  * Line height here are duplicated inside CollapsableText.tsx, any changes will
  * need updating there also until https://jira.kfplc.com/browse/WFE-2012 is complete.
  */
}

/*
  We need to use ems here and calculate based on base size of 16.

  rems behave like ems in media queries so it's confusing to use them.
  I haven't found a way to make vars or calc work inside a custom media query yet.
*/

/* 1180 / 16 */

/* 1179 / 16 */

/* 1020 / 16 */

/* 720 / 16 */

/* Using feature detection to target IE but not Edge - https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection */

/* (360 [max menu width] + 48 [close button]) / 16 = 25.5 */

/* TODO: Refactor
  These media queries must match the text width in the USP bar: */

/* Viewport width that allows the longest USP item text to display on one line in the mobile carousel format */

/* 350 / 16 */

/* Viewport width that allows the longest USP item text to display on one line
 * alongside the other shorter USPs in the tablet-up design.
 *
 * This was previously calculated as (350 * 3 USPs) / 16, which led to a
 * breakpoint at an actual pixel screen width of 1050px. This needed to become
 * 1060px to accomodate a copy change, so this is now (1060 / 16). */

/* stylelint-disable */

/* stylelint-enable */

._1edbe8cb {
  margin-top: 48px;
  margin-top: 4.8rem
}

._1edbe8cb.f269a490 {
  margin-top: 16px;
  margin-top: 1.6rem;
}

@media (min-width: 45em) {

  ._1edbe8cb {
    margin-top: 0;
  }
}

.e1daa8bf {
  margin-top: 32px;
  margin-top: 3.2rem
}

.e1daa8bf.f269a490 {
  margin-top: 16px;
  margin-top: 1.6rem;
}

@media (min-width: 45em) {

  .e1daa8bf {
    margin-top: 2.4rem;
  }

  .e1daa8bf.f269a490 {
    margin-top: 2.4rem;
  }
}

.b1bec9be {
  margin-bottom: 24px;
  margin-bottom: 2.4rem;
}

@media (min-width: 45em) {

  .b1bec9be {
    margin-bottom: 1.6rem;
  }
}

._20db2a24 {
  display: none;
}

@media (min-width: 45em) {

  ._20db2a24 {
    display: block;
    text-align: center;
    margin: 2.4rem 0;
  }
}

@media (min-width: 45em) {

  .f859b4de {
    margin-bottom: 2.4rem;
  }
}

.b631fbaf {
  text-align: center;
  padding-top: 16px;
  padding-top: 1.6rem;
}

@media (min-width: 45em) {

  .b631fbaf {
    padding-top: 0.8rem;
    margin-bottom: 3.2rem;
  }
}

.a1387eb0 {
  margin: auto;
}

._8147cd2b {
  background: rgb(255, 255, 255);
  padding: 16px;
  padding: 1.6rem;
  border: 1px solid rgb(173, 177, 179);
  border: 0.1rem solid rgb(173, 177, 179);
}

._08210835 {
  cursor: pointer;
}

.bf24bfb1 {
  margin-bottom: 0;
}

._7abef21f {
  margin: 0;
}

._0aacfe04 {
  max-width: none;
  margin-bottom: 0;
}

._4e2d8243 {
  display: none;
}

.d7462fd3 {
  display: block;
}

.c2e6ca6b {
  margin: 16px 0;
  margin: 1.6rem 0;
}

._21e8a55a {
  margin-right: 20px;
  margin-right: 2rem;
}

.d039ce8a {
  margin: 16px 0;
  margin: 1.6rem 0;
}