/* default content */

@font-face {
  font-family: 'Trebuchet MS';
  size-adjust: 90%;
  src: local('Trebuchet MS'),
       local('TrebuchetMS');
}

:root {
  --color-white: #FFF;
  --color-gray-100: #F8F8F8;
  --color-gray-200: #E8E8E8;
  --color-gray-300: #D4D4D4;
  --color-gray-400: #B6B6B6;
  --color-gray-500: #909090;
  --color-gray-600: #686868;
  --color-gray-700: #444;
  --color-gray-800: #242424;
  --color-black: #000;
  --color-brand-title: #000B1D;
  --color-info-accent: #5C5CE0;
  --color-info-accent-hover: #4646C6;
  --color-info-accent-down: #3D3DB4;
  --color-info-accent-reverse: #eeeefc;
  --color-info-accent-reverse-down: #e6e6f4;
  --color-info-accent-light: #DEDEF9;
  --color-info-primary: #242424;
  --color-info-primary-hover: #090909;
  --color-info-primary-down: #000;
  --color-info-secondary: #E8E8E8;
  --color-info-secondary-hover: #d4d4d4;
  --color-info-secondary-down: #cdcdcd;
  --color-premium: #EBCF2D;
  --gradient-highlight-vertical: linear-gradient(15deg, #7c84fc, #ff4dd2);
  --gradient-highlight-horizontal: linear-gradient(90deg, #ff4dd2, #7c84fc);

  /* body */
  --body-background-color: var(--color-white);
  --body-alt-background-color: var(--color-gray-200);
  --body-font-family: 'adobe-clean', 'Adobe Clean', 'Trebuchet MS', sans-serif;
  --body-serif-font-family: 'adobe-clean-serif', 'Adobe Clean Serif', serif;
  --body-font-weight: normal;
  --body-color: var(--color-gray-800);
  --body-line-height: 1.5;
  --body-font-size-xxl: 1.5rem; /* 24px */
  --body-font-size-xl: 1.25rem; /* 20px */
  --body-font-size-l: 1.125rem; /* 18px */
  --body-font-size-m: 1rem; /* 16px */
  --body-font-size-s: 0.875rem; /* 14px */
  --body-font-size-xs: 0.75rem; /* 12px */
  /* headings */
  --heading-font-weight: 800;
  --heading-color: var(--color-gray-800);
  --heading-line-height: 1.25;
  --heading-font-size-xxxl: 5rem; /* 80px */
  --heading-font-size-xxl: 3.75rem; /* 60px */
  --heading-font-size-xl: 2.8125rem; /* 45px */
  --heading-font-size-l: 2.25rem; /* 36px */
  --heading-font-size-m: 1.75rem; /* 28px */
  --heading-font-size-s: 1.375rem; /* 22px */
}

@media (min-width: 900px) {
  :root {
    --heading-font-size-xxxl: 3.75rem; /* 60px */
  }
}

@media (min-width: 1200px) {
  :root {
    --heading-font-size-xxxl: 2.8125rem; /* 45px */
  }
}

body {
  background-color: var(--body-background-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  color: var(--body-color);
  margin: 0;
  padding: 0;
  display: none;
}

body.appear {
  display: block;
}

/* gnav */

header {
  box-sizing: border-box;
  border-bottom: 1px solid #EAEAEA;
  height: 143px;
  background-image: url(/express/icons/cc-express-logo.svg);
  background-repeat: no-repeat;
  background-size: auto 32px;
  background-position: bottom 24px center;
  position: relative;
  background-color: #FFF;
}

body.no-brand-header header, body.no-desktop-brand-header header {
  height: 64px;
  background-image: unset;
}

body.feds-loaded > header {
  height: auto;
}

header #feds-topnav a.feds-navLink.feds-navLink--primaryCta {
  background-color: var(--color-info-accent);
  border-color: var(--color-info-accent);
}

header #feds-topnav a.feds-navLink.feds-navLink--primaryCta:hover {
  background-color: var(--color-info-accent-hover)!important;
  border-color: var(--color-info-accent-hover)!important;
}

header #feds-topnav a.feds-navLink.feds-navLink--primaryCta:focus {
  background-color: var(--color-info-accent-hover) !important;
  border-color: var(--color-info-accent-hover) !important;
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-white),
    0 0 0 4px var(--color-info-accent-hover);
}

header #feds-header a.feds-navLink:hover .feds-navLink-text {
  color: var(--color-info-accent-hover);
}

footer {
  margin-top: 0;
}

/* buttons */

a.button:any-link {
  text-decoration: none;
  border-radius: 18px;
  padding: 5px 1.2em 6px 1.2em;
  text-align: center;
  font-size: var(--body-font-size-s);
  font-style: normal; 
  font-weight: 600;
  line-height: var(--body-line-height);
  cursor: pointer;
  transition: background-color .3s, color .3s, border .3s;
  border-width: 2px;
  border-style: solid;
  margin: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

a.button.xlarge:any-link {
  padding: 13px 1.5em 13px 1.5em;
  border-radius: 27px;
  font-size: var(--body-font-size-m);
}

a.button.large:any-link {
  padding: 10px 1.5em 10px 1.5em;
  border-radius: 22px;
}

a.button.small:any-link {
  padding: 4px 1em 4px 1em;
  border-radius: 15px;
  font-size: var(--body-font-size-xs);
}

a.button:any-link,
a.button.accent:any-link, 
a.button.primaryCTA:any-link {
  color: var(--color-white);
  background-color: var(--color-info-accent);
  border-color: var(--color-info-accent);
}

a.button:any-link:hover,
a.button.accent:any-link:hover,
a.button.primaryCTA:any-link:hover {
  background-color: var(--color-info-accent-hover);
  border-color: var(--color-info-accent-hover);
}

a.button:any-link:active,
a.button.accent:any-link:active,
a.button.primaryCTA:any-link:active {
  background-color: var(--color-info-accent-down);
  border-color: var(--color-info-accent-down);
}

a.button:focus,
a.button.accent:focus, 
a.button.primaryCTA:focus {
  background-color: var(--color-info-accent-hover);
  border-color: var(--color-info-accent-hover);
  color: var(--color-white);
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-white),
    0 0 0 4px var(--color-info-accent-hover);
}

a.button.primary:any-link {
  color: var(--color-white);
  background-color: var(--color-info-primary);
  border-color: var(--color-info-primary);
}

a.button.primary:any-link:hover {
  background-color: var(--color-info-primary-hover);
  border-color: var(--color-info-primary-hover);
}

a.button.primary:any-link:active {
  background-color: var(--color-info-primary-down);
  border-color: var(--color-info-primary-down);
}

a.button.primary:focus,
a.button.primary.reverse:focus {
  background-color: var(--color-info-primary-hover);
  border-color: var(--color-info-primary-hover);
  color: var(--color-white);
}

a.button.secondary:any-link {
  color: var(--color-black);
  background-color: var(--color-info-secondary);
  border-color: var(--color-info-secondary);
}

a.button.secondary:any-link:hover {
  background-color: var(--color-info-secondary-hover);
  border-color: var(--color-info-secondary-hover);
}

a.button.secondary:any-link:active {
  background-color: var(--color-info-secondary-down);
  border-color: var(--color-info-secondary-down);
}

a.button.secondary:focus {
  background-color: var(--color-gray-500);
  border-color: var(--color-gray-500);
  color: var(--color-white);
}

a.button.reverse:any-link {
  color: var(--color-black);
  background-color: var(--color-white);
}

a.button.reverse:any-link:hover {
  background-color: var(--color-info-secondary-hover)
}

a.button.reverse:any-link:active {
  background-color: var(--color-info-secondary-down)
}

a.button.reverse:focus,
a.button.reverse.accent:any-link:focus,
a.button.reverse.primaryCTA:any-link:focus {
  background-color: var(--color-info-accent-hover);
  border-color: var(--color-info-accent-hover);
  color: var(--color-white);
}

a.button.reverse.accent:any-link,
a.button.reverse.primaryCTA:any-link {
  color: var(--color-info-accent)
}

a.button.reverse.accent:any-link:hover,
a.button.reverse.primaryCTA:any-link:hover {
  background-color: var(--color-info-accent-reverse);
}

a.button.reverse.accent:any-link:active,
a.button.reverse.primaryCTA:any-link:active {
  background-color: var(--color-info-accent-reverse-down);
}

a.button.dark:any-link {
  color: var(--color-black);
  background-color: var(--color-white);
  border-color: var(--color-white);
}

a.button.dark:any-link:hover {
  color: var(--color-black);
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-100);
}

a.button.dark:any-link:active {
  color: var(--color-black);
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-200);
}

a.button.dark:any-link:focus {
  box-shadow:
    0 0 0 2px var(--color-info-accent),
    0 0 0 4px var(--color-white);
}

a.button.dark.reverse:any-link {
  color: var(--color-white);
  background-color: transparent;
  border-color: var(--color-white);
}

a.button.dark.reverse:any-link:hover {
  color: var(--color-white);
  background-color: rgba(0,0,0,0.1);
  border-color: var(--color-gray-100);
}

a.button.dark.reverse:any-link:active {
  color: var(--color-white);
  background-color: rgba(0,0,0,0.2);
  border-color: var(--color-gray-200);
}

a.button.dark.reverse:any-link:focus {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-info-accent-hover);
}

a.button > svg {
  float: left;
  display: inline;
  width: 20px;
  height: 20px;
  margin: 8px 8px 8px 0;
  fill: currentColor;
  color: currentColor;
}

a.button > svg > use {
  fill: currentColor;
  color: currentColor;
}

body.light-grey {
  background-color: var(--body-alt-background-color);
}

main {
  text-align: center;
}

main h1, h2, h3, h4, h5, h6 {
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
}

main h1 {
  font-size: var(--heading-font-size-xxl);
}

main h2 {
  font-size: var(--heading-font-size-l);
}

main h3 {
  font-size: var(--heading-font-size-m);
}

main h4,
main h5 {
  font-size: var(--heading-font-size-s);
}

main p {
  font-size: var(--body-font-size-xl);
  line-height: var(--body-line-height);
}

main a:any-link {
  color: var(--color-info-accent);
  text-decoration: none;
  font-weight: 600;
}

main img {
  max-width: 100%;
}

main .section-wrapper {
  padding-top: 40px;
}

main .section-wrapper:first-of-type {
  padding-top: 0;
}

main .section-wrapper:last-of-type {
  margin-bottom: 0;
}

@media (min-width:600px) {

  main h2 {
    font-size: var(--heading-font-size-l);
    text-align: center;
  }

  main h3 {
    font-size: var(--heading-font-size-l);
      text-align: center;
  }

  main h4 {
    font-size: var(--heading-font-size-m);
    margin-top: 56px;
    text-align: center;
  }

  main h1 + h5 {
    font-size: var(--body-font-size-xxl);
    font-weight: var(--body-font-weight);
    margin-top: 32px;
    margin-bottom: 16px;
  }

  main p {
    font-size: var(--body-font-size-l);
  }
}

@media (min-width:900px) {

  main h5 + p,
  main .section-wrapper p.button-container {
    text-align: unset;
  }

  main .section-wrapper.cards-container {
    background-color: unset;
  }  
}

@media(min-width:1200px) {
  main .section-wrapper h1 {
    font-size: var(--heading-font-size-l);
  }
}

/* hero */
main .hero {
  color: var(--color-white);
  position: relative;
  padding: 120px 15px;
}

main .hero.hero-noimage {
  color: var(--body-color);
  padding-top: 64px;
  padding-bottom: 0;
}

main .hero.hero-noimage + .section-wrapper {
  padding-top: 0;
}

main .hero.hero-noimage > div {
  max-width: 1024px;
}

main .hero.hero-noimage a.button:any-link {
  color: white;
}

main .hero.hero-noimage a:any-link{
  color: black;
}

main .hero h1 {
  font-size: var(--heading-font-size-xl);
  line-height: var(--heading-line-height);
  text-align: center;
  margin: 0;
}

main .hero h2 {
  font-size: var(--body-font-size-xl);
  font-weight: var(--body-font-weight);
  margin: 32px 32px;
}

main .hero h5 {
  font-size: var(--body-font-size-l);
  font-weight: var(--body-font-weight);
  margin: auto;
  margin-top: 32px;
}

main .hero.hero-noimage p {
  font-size: var(--body-font-size-s);
}

main .hero a.button:any-link {
  text-shadow: none;
}

main .icon {
  height: 1em;
  width: 1em;
  color: currentColor;
}

main .hero .icon {
  height: 2em;
  width: 2em;
}

main .icon.icon-cc-express-stacked,
main .columns .icon.icon-cc-express-stacked {
  width: unset;
  height: unset;
}

main .banner .icon.icon-facebook {
  fill: #1877f2;
}

main .hero .hero-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    z-index: -1;
}

main .hero .hero-bg img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

main .hero > div {
    padding: 0;
    margin: auto;
}

main .hero a:any-link {
  color: currentColor;
}

main .hero a.button:any-link {
  padding: 10px 1.5em 10px 1.5em;
  border-radius: 22px;
}


@media (min-width:600px) {
  main .hero h5 {
    font-size: 22px;
    font-weight: 400;
    max-width: 672px;
    margin: auto;
    margin-top: 32px;
  }

  main .hero h2,
  main .hero p {
    font-size: var(--body-font-size-xl);
    line-height: var(--body-line-height);
    text-align:center;
    margin: 24px 15px 0 15px;
  }
}

@media (min-width:900px) {
  main .hero {
    padding-left: 50px;
    padding-right: 50px;
  }

  main .hero h2,
  main .hero p {
    font-size: var(--body-font-size-xxl);
    margin: 24px 50px 0 50px;
  }
}

@media (min-width:1200px){
  main .hero h1 {
    font-size: var(--heading-font-size-xxl);
    margin: 0; 
  }
  
  main .hero .columns > div > div {
    margin: 8px;
  }
}

/* make page : default content */

main .section-wrapper {
  padding-top: 60px;
}

main .section-wrapper:first-of-type {
  padding-top: 120px;
}

main .section-wrapper:first-of-type {
  padding: 0;
}

main .section-wrapper > div {
  margin: auto;
  max-width: 375px;
  padding: 0 32px;
}

main .section-wrapper > div:empty {
  padding: 0;
}

main .section-wrapper h1,
main .section-wrapper h2,
main .section-wrapper h3,
main .section-wrapper h4,
main .section-wrapper h5 {
  margin: 0;
}

main .section-wrapper > div > h2 {
  margin-top: 80px
}


main .section-wrapper * + h2 {
  margin-top: 120px;
}

main .section-wrapper > div > h3  {
  margin-top: 64px;
}

main .section-wrapper > div > h3:first-child  {
  margin-top: 0px;
}

main .section-wrapper * + h2 {
    margin-top: 64px;
}

main .section-wrapper * + h4 {
  margin-top: 56px;
}

main .section-wrapper h1 + h5 {
  font-size: 20px;
  line-height: 28px;
  font-weight: normal;
  margin-top: 32px;
  margin-bottom: 16px;
}

main .section-wrapper h5 + p {
  font-size: 16px;
  text-align: center;
  margin: 0;
}

main .section-wrapper p {
    margin: 32px 0;
}

main .section-wrapper p.button-container {
  text-align: center;
  margin-top: 16px;
  margin-bottom: 0;
}

main .section-wrapper .hero {
  color: initial;
}

@media (min-width:900px) {
  main .section-wrapper > div {
    max-width: 830px;
  }
}

@media (min-width:1200px) {
  main .section-wrapper > div {
    max-width: 1024px;
  }
}


/* jank protection for async blocks/sections */

main .pricing, main .hero-animation, main .fragment {
  opacity: 0;
  height: 100vh;
  transition: opacity 100ms;
}

main .block[data-block-status='loading'], main .block[data-block-status='initialized'] {
  visibility: hidden;
}

main .block.template-list[data-block-status='loading'] > div , main .block.template-list[data-block-status='initialized'] > div {
  display: none;
}

main .template-list.sixcols {
  min-height: 700px;
}

main .columns.columns-marquee {
  min-height: 650px;
}

@media (min-width: 1200px) {
  main .template-list-fourcols-container > div,
  main .template-list-horizontal-container > div {
    max-width: 1200px;
  }

  main .columns-fullsize-container > div,
  main .columns-fullsize-center-container > div,
  main .template-list-sixcols-container > div {
    max-width: 1122px;
  }
}

main .template-list-sixcols-container > div {
  padding: 0;
}

/* disable budoux on small screens  */
@media (max-width: 600px) {
  h1.budoux, h2.budoux, h3.budoux, h4.budoux, h5.budoux {
    word-break: normal !important;
  }
}

/* Store icons */
img.icon-apple-store, img.icon-google-store, img.icon-galaxy-store, img.icon-microsoft-store {
  height: 70px;
  width: auto;
  margin: 8px;
}