@import url(//fonts.googleapis.com/css?family=Google+Sans:400);
@import url(//fonts.googleapis.com/css?family=Google+Sans+Text:400);
@import url(//fonts.googleapis.com/css?family=Google+Sans+Text:500);

html {
	scroll-behavior: smooth;
}

:root {
  /* Gap */
  --primary-gap: 24px;
  --secondary-gap: 16px;
  --content-card-gap: 24px;
  --platform-button-gap: 8px;
  --images-2-gap: 16px;
  --item-gap: 64px;
  --hero-card-gap: 24px;

  /* Border radius */
  --primary-border-radius: 32px;
  --button-border-radius: 100px;

  /* Margin */
  --full-image-margin: 30px;
  --card-bottom-margin: 64px;
  --image-description-margin-bottom: 40px;

  /* Padding */
  --card-container-padding: 64px;
  --platform-button-padding: 10px 16px;
  --redirection-button-padding: 16px 24px;

  /* Colors */
  --redirection-button-text-color: #444746;
  --redirection-button-border-color: #c4c7c5;
  --image-card-background-color: #d3e3fd;
  --platform-button-background-color: #f0f4f9;
  --platform-button-active-color: #c2e7ff;
  --platform-button-text-color: #004a77;

  /* Fonts */
  --card-title-font: 400 36px/44px 'Google Sans';
  --card-description-primary-font: 400 16px/24px 'Google Sans Text';
  --card-button-primary-font: 500 16px/24px 'Google Sans Text';
  --card-button-secondary-font: 500 14px/20px 'Google Sans Text';
  --image-description-font: 500 14px/20px 'Google Sans Text';
  --main-title-font: 400 57px/64px 'Google Sans';
  --main-description-font: 400 18px/24px 'Google Sans';

  /* Height of the image container */
  --image-container-height-1: 450px;
  --image-container-height-2: 450px;

  /* Image cut height */
  --image-cut-top: -40px;
  --image-cut-bottom: 40px;
  --image-cut-full: 40px;
  --image-cut-2-top: -40px;
  --image-cut-2-bottom: 40px;
  --image-cut-2-full: 30px;

  /* Image width */
  --img-width-1x1: 218px;
  --img-width-1x1-zoomed: 250px;
  --img-width-1x1-full: 180px;

  --img-width-1x2: 218px;
  --img-width-1x2-zoomed: 218px;
  --img-width-1x2-full: 180px;

  --img-width-2x1: 218px;
  --img-width-2x1-full-wide: 318px;

  --img-width-2x2: 247px;
  --img-width-2x2-full: 157px;

  --img-width-3x1-full: 185px;
  --img-width-3x1-d-full-wide: 318px;
}
@media (max-width: 1439px) {
  :root {
    /* Height of the image container */
    --image-container-height-1: 350px;
    --image-container-height-2: 400px;

    /* Image cut height */
    --image-cut-top: -24px;
    --image-cut-bottom: 24px;
    --image-cut-full: 40px;
    --image-cut-2-top: -24px;
    --image-cut-2-bottom: 24px;
    --image-cut-2-full: 21px;
  }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  :root {
    /* Image width */
    --img-width-1x1: 170px;
    --img-width-1x1-zoomed: 200px;
    --img-width-1x1-full: 140px;

    --img-width-1x2: 170px;
    --img-width-1x2-zoomed: 200px;
    --img-width-1x2-full: 140px;

    --img-width-2x1: 218px;
    --img-width-2x1-full-wide: 290px;

    --img-width-2x2: 247px;
    --img-width-2x2-full: 157px;

    --img-width-3x1-full: 185px;
    --img-width-3x1-d-full-wide: 290px;
    /* Height of the image container */
    --image-container-height-1: 350px;
    --image-container-height-2: 400px;
    /* Gap */
    --primary-gap: 16px;
    --content-card-gap: 24px;
    --secondary-gap: 12px;
    --item-gap: 48px;
    /* Border radius */
    --primary-border-radius: 32px;
    /* Margin */
    --full-image-margin: 30px;
    --card-bottom-margin: 48px;
    /* Padding */
    --card-container-padding: 48px;
    --redirection-button-padding: 14px 16px;
    /* Fonts */
    --main-title-font: 400 45px/52px 'Google Sans';
    --main-description-font: 400 18px/24px 'Google Sans';
    --card-title-font: 400 28px/36px 'Google Sans';
    --card-description-primary-font: 400 14px/20px 'Google Sans Text';
    --card-button-primary-font: 500 16px/24px 'Google Sans Text';
    --card-button-secondary-font: 500 14px/20px 'Google Sans Text';
    --image-description-font: 500 14px/20px 'Google Sans Text';
  }
}
@media (max-width: 1199px) and (min-width: 1025px) {
  :root {
    /* Image width */
    --img-width-1x1: 170px;
    --img-width-1x1-zoomed: 200px;
    --img-width-1x1-full: 140px;

    --img-width-1x2: 170px;
    --img-width-1x2-zoomed: 200px;
    --img-width-1x2-full: 140px;

    --img-width-2x1: 218px;
    --img-width-2x1-full-wide: 250px;

    --img-width-2x2: 247px;
    --img-width-2x2-full: 157px;

    --img-width-3x1-full: 185px;
    --img-width-3x1-d-full-wide: 250px;
    /* Height of the image container */
    --image-container-height-1: 350px;
    --image-container-height-2: 360px;
    /* Gap */
    --primary-gap: 16px;
    --content-card-gap: 16px;
    --item-gap: 48px;
    /* Padding */
    --card-container-padding: 48px;
    --redirection-button-padding: 14px 16px;
    /* Fonts */
    --main-title-font: 400 36px/44px 'Google Sans';
    --main-description-font: 500 16px/24px 'Google Sans';
    --card-title-font: 400 24px/32px 'Google Sans';
    --card-description-primary-font: 400 14px/20px 'Google Sans Text';
    --image-description-font: 500 12px/16px 'Google Sans Text';
  }
}
@media (max-width: 1024px) {
  :root {
    /* Image width */
    --img-width-1x1: 170px;
    --img-width-1x1-zoomed: 210px;
    --img-width-1x1-full: 130px;

    --img-width-1x2: 150px;
    --img-width-1x2-zoomed: 210px;
    --img-width-1x2-full: 130px;

    --img-width-2x1-full-wide: 200px;

    --img-width-3x1-d-full-wide: 200px;
    /* Height of the image container */
    --image-container-height-1: 320px;
    --image-container-height-2: 300px;
    /* Gap */
    --primary-gap: 16px;
    --content-card-gap: 16px;
    --item-gap: 48px;
    --hero-card-gap: 16px;
    /* Padding */
    --card-container-padding: 32px;
    --redirection-button-padding: 14px 16px;
    /* Fonts */
    --main-title-font: 400 32px/40px 'Google Sans';
    --main-description-font: 400 14px/20px 'Google Sans';
    --card-title-font: 400 22px/28px 'Google Sans';
    --card-description-primary-font: 400 14px/20px 'Google Sans Text';
    --image-description-font: 500 12px/16px 'Google Sans Text';
    --card-button-primary-font: 500 16px/24px 'Google Sans Text';
  }
}
@media (max-width: 840px) {
  :root {
    /* Image width */
    --img-width-2x1-full-wide: 220px;
    --img-width-3x1-d-full-wide: 220px;
    /* Gap */
    --primary-gap: 12px;
    --content-card-gap: 12px;
    --hero-card-gap: 8px;
    /* Padding */
    --card-container-padding: 24px;
    /* Fonts */
    --main-title-font: 400 24px/32px 'Google Sans';
    --main-description-font: 400 12px/16px 'Google Sans';
    --card-button-primary-font: 500 14px/20px 'Google Sans Text';
  }
}

/* --- Image card styles. --- */
.toggle-card {
  width: 100%;
  display: flex;
  gap: var(--primary-gap);
  margin-bottom: var(--item-gap);
}
.toggle-card.left,
.toggle-card.right {
  flex-direction: row;
}
@media (max-width: 1024px) {
  .toggle-card.left,
  .toggle-card.right {
    flex-direction: column-reverse;
  }
}
.toggle-card.under {
  flex-direction: column-reverse;
}
.toggle-card.left .container {
  order: 0;
}
.toggle-card.right .container {
  order: 1;
}
@media (max-width: 1024px) {
  .toggle-card.left .container,
  .toggle-card.right .container {
    width: 100%;
  }
  .toggle-card.right .container {
    order: 0;
  }
}
.container {
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  height: var(--image-container-height-1);
  width: calc(40% - var(--primary-gap)/2);
}
.multiple-2 .container,
.multiple-3 .container {
  height: var(--image-container-height-2);
}
.container-50 {
  width: calc(50% - var(--primary-gap)/2);
  gap: var(--primary-gap);
}
@media (max-width: 840px) {
  .container-50 {
    width: 100%;
  }
  .under:not(.second-image) .container-50 {
    height: 250px;
  }
}
.container-100 {
  width: 100%;
  gap: var(--primary-gap);
}
.image-wrapper-1 {
  width: 100%;
  display: flex;
  justify-content: center;
}
.single-image {
  display: flex;
  align-items: center;
}
.image-card {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--secondary-gap);
}
.image-card .container {
  width: 100%;
}
.image-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--primary-gap);
}
@media (max-width: 840px) {
  .image-container.multiple-3 {
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: 1fr 1fr;
  }
  .image-container.multiple-3 .image-item-block[data-image-index='2'] {
    grid-column: 1 / span 2;
  }
  .second-image .image-container.multiple-2 {
    display: flex;
    flex-direction: column;
  }
}
.platform-image { 
  height: auto;
  display: block;
  object-fit: cover;
}
.image-description {
  text-align: center;
  margin: 0 0 var(--image-description-margin-bottom) 0;
  font: var(--image-description-font);
}
.multiple-2 .image-item-block,
.multiple-3 .image-item-block,
.multiple-4 .image-item-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  box-sizing: border-box;
}

/* Content card styles */
.card-container {
  height: var(--image-container-height-1);
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--content-card-gap);
  padding: var(--card-container-padding);
  background-color: var(--Baseline-Surface-colors-Surface-Container, #F0F4F9);
  border-radius: var(--primary-border-radius);
  flex-grow: 1;
  box-sizing: border-box;
}
.left:not(.second-image) .card-container,
.right:not(.second-image)  .card-container {
  min-height: var(--image-container-height-1);
}
@media (max-width: 1024px) {
  .card-container {
    height: 100%;
  }
  .right:not(.second-image)  .card-container {
    min-height: max-content;
  }
}
@media (max-width: 1024px) {
  .right:not(.second-image)  .card-container,
  .left:not(.second-image) .card-container {
    min-height: max-content;
  }
}
.card-container.row-direction {
  height: auto;
}
.card-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--content-card-gap);
  flex-wrap: wrap;
}
.card-title {
  margin: 0;
  font: var(--card-title-font);
}
.image-card-container {
  position: relative;
  border-radius: var(--primary-border-radius);
  background-color: var(--image-card-background-color);
  height: var(--image-container-height-1);
  display: flex;
  align-items: center;
}
.multiple-2.image-card-container,
.multiple-3.image-card-container {
  height: var(--image-container-height-2);
}
@media (max-width: 840px) {
  .multiple-3.image-card-container {
    height: 100%;
  }
}
.platform-buttons {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 8px;
  background-color: var(--platform-button-background-color);
  border-radius: var(--primary-border-radius);
  display: flex;
  gap: 4px;
  box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);
}
.platform-button {
  padding: var(--platform-button-padding);
  border-radius: var(--button-border-radius);
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline-end: 0;
  cursor: pointer;
  white-space: nowrap;
  font: var(--card-button-secondary-font);
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.platform-button:hover {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  background-color: rgba(68, 71, 70, 0.08);
  color: var(--redirection-button-text-color);
}
.platform-button:focus {
  background-color: rgba(68, 71, 70, 0.1);
  border: 3px solid #0b57d0;
}
.platform-button.active {
  background-color: var(--platform-button-active-color);
  color: var(--platform-button-text-color);
}
.platform-button.active:hover {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  background-color: rgba(105, 145, 214, 0.08);
}
.platform-button.active:focus {
  background-color: rgba(105, 145, 214, 0.1);
  border: 3px solid #0b57d0;
}
.card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.card-content.row-direction {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--content-card-gap);
}
@media(max-width: 839px) {
  .card-content.row-direction {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    align-items: flex-start;
  }
}
.card-description {
  margin-bottom: var(--content-card-gap);
  font: var(--card-description-primary-font);
}
.card-content.row-direction .card-description {
  max-width: 60%;
}
.card-description li {
  margin: 0;
}
@media(max-width: 1024px) {
  .wrap .card-description.text-small {
    font: 400 12px / 16px 'Google Sans Text';
  }
}
.redirection-link {
  border-radius: var(--button-border-radius);
  border: 1px solid var(--redirection-button-border-color);
  padding: var(--redirection-button-padding);
  color: var(--redirection-button-text-color);
  text-decoration: none;
  font: var(--card-button-primary-font);
}
.redirection-link:hover {
  background-color:rgba(68, 71, 70, 0.08);
}
.redirection-link:focus {
  background-color: rgba(68, 71, 70, 0.1);
  border: 3px solid #0b57d0;
}


/* ----- Widths for individual images ----- */
.multiple-1 img {
  width: var(--img-width-1x1);
}
/* 1 card with 1 image */
.multiple-1 .cut-top-zoomed,
.multiple-1 .cut-bottom-zoomed,
.multiple-1 .cut-top-bottom-zoomed {
  width: var(--img-width-1x1-zoomed);
}
.multiple-1 .full-image {
  width: var(--img-width-1x1-full);
}

/* 1 card with 2 images */
.second-image .multiple-1 .cut-first-top-second-bottom,
.second-image .multiple-1 .cut-first-bottom-second-top {
  width: var(--img-width-1x2);
}
.second-image .multiple-1 .full-images {
  width: var(--img-width-1x2-full);
}

/* 2 cards with 1 image each + description */
.multiple-2 img {
  width: var(--img-width-2x1);
}
.multiple-2 .cut-top-zoomed,
.multiple-2 .cut-bottom-zoomed,
.multiple-2 .cut-top-bottom-zoomed {
  width: var(--img-width-2x1-zoomed);
}
.multiple-2 .full-image-wide {
  width: var(--img-width-2x1-full-wide);
}

/* 2 cards with 2 images */
.second-image .multiple-2 .cut-first-top-second-bottom,
.second-image .multiple-2 .cut-first-bottom-second-top {
  width: var(--img-width-2x2);
}
.second-image .multiple-2 .full-images {
  width: var(--img-width-2x2-full);
}

/* 3 cards with 1 image each + description */
.multiple-3 img {
  width: var(--img-width-3x1-d);
}
.multiple-3 .full-image-wide {
  width: var(--img-width-3x1-d-full-wide);
}

/* ----- Cuts for images ----- */
.container-cut-top,
.container-cut-top-zoomed {
  align-items: flex-end;
}
.container-cut-bottom,
.container-cut-bottom-zoomed {
  align-items: flex-start;
}
.container-cut-top-bottom,
.container-cut-top-bottom-zoomed,
.container-full-image,
.container-full-image-wide {
  align-items: center;
}
.image-wrapper-2.cut-first-top-second-bottom-first,
.image-wrapper-2.cut-first-top-second-bottom-zoomed-first,
.image-wrapper-2.cut-first-bottom-second-top-second,
.image-wrapper-2.cut-first-bottom-second-top-zoomed-second {
  justify-content: flex-end;
  align-items: flex-end;
}
.image-wrapper-2.cut-first-bottom-second-top-first,
.image-wrapper-2.cut-first-bottom-second-top-zoomed-first,
.image-wrapper-2.cut-first-top-second-bottom-second,
.image-wrapper-2.cut-first-top-second-bottom-zoomed-second {
  justify-content: flex-start;
  align-items: flex-start;
}
.full-image,
.full-image-wide {
  height: 100%;
  margin: var(--image-cut-full) 0;
  max-height: calc(100% - 2*var(--image-cut-full));
}
@media (max-width: 840px) {
  .image-item-block[data-image-index='2'] img {
    margin-top: 0;
  }
}
.description .full-image-wide {
  margin: var(--image-cut-full) 0 0 0;
}
.cut-bottom,
.cut-bottom-zoomed {
  object-position: center var(--image-cut-bottom);
}
.cut-top,
.cut-top-zoomed {
  object-position: center var(--image-cut-top);
}
.cut-first-top-second-bottom.first,
.cut-first-top-second-bottom-zoomed.first,
.cut-first-bottom-second-top.second,
.cut-first-bottom-second-top-zoomed.second {
  object-position: center var(--image-cut-2-top);
}
.cut-first-top-second-bottom.second,
.cut-first-top-second-bottom-zoomed.second,
.cut-first-bottom-second-top.first,
.cut-first-bottom-second-top-zoomed.first {
  object-position: center var(--image-cut-2-bottom);
}
.multiple-1 .full-images {
  margin: var(--image-cut-2-full) 0;
}
.multiple-2 .full-images {
  margin: var(--image-cut-2-full) 0;
  max-height: calc(100% - 2*var(--image-cut-2-full));
}

/* ----- Responsive styles for the main content ----- */
body[layout=docs][concierge] .devsite-content {
  margin: 0;
}
body[layout=docs][concierge] devsite-content {
    max-width: 1272px;
}
body[layout=docs][concierge] .devsite-main-content {
  grid-template-columns: 1fr 1272px 1fr;
}
@media (max-width: 1650px) {
  body[layout=docs][concierge] .devsite-main-content {
    grid-template-columns: 1fr 1154px 5fr;
  }
}
@media (max-width: 1439px) {
  body[layout=docs][concierge] .devsite-main-content {
    grid-template-columns: 1fr;
  }
  body[layout][concierge][template='landing'] .devsite-main-content devsite-toc.devsite-toc-embedded:not(:empty),
  .devsite-toc {
    display: none;
  }
  body[layout=docs][concierge] .devsite-content {
    margin: 0 60px;
  }
}
@media (max-width: 1200px) {
  body[layout=docs][concierge] .devsite-content {
    margin: 0 48px;
  }
}

/* ----- Responsive styles for the hero ----- */
.rcs-messaging-hero {
  display: flex;
  margin: 60px 0;
  gap: 56px;
}
@media (max-width: 1650px) and (min-width: 1440px) {
  .rcs-messaging-hero {
    gap: 28px;
  }
}
@media (max-width: 1439px) and (min-width: 1201px) {
  .rcs-messaging-hero {
    gap: 20px;
  }
}
@media (max-width: 1200px) {
  .rcs-messaging-hero {
    gap: 94px;
  }
}
@media (max-width: 1024px) {
  .rcs-messaging-hero {
    gap: 16px;
    margin: 48px 0;
  }
}
@media (max-width: 600px) {
  .rcs-messaging-hero-description {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}
.rcs-messaging-hero-description {
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--hero-card-gap);
}
.rcs-messaging-hero-media {
  flex-shrink: 0;
  flex-grow: 0;
}
.rcs-messaging-hero-description h1 {
  font: var(--main-title-font);
  margin: 0;
}
.rcs-messaging-hero-description p {
  font: var(--main-description-font);
  margin: 0;
}
.rcs-messaging-hero-media figure img {
  width: auto;
  height: 415px;
  display: block;
  max-width: 100%;
}
@media (max-width: 1650px) and (min-width: 1440px) {
  .rcs-messaging-hero-media figure img {
    height: 377px;
  }
}
@media (max-width: 1439px) and (min-width: 1201px) {
  .rcs-messaging-hero-media figure img {
    height: 350px;
  }
}
@media (max-width: 1200px) {
  .rcs-messaging-hero-media figure img {
    height: 300px;
  }
}
@media (max-width: 1024px) {
  .rcs-messaging-hero-media figure img {
    height: 216px;
  }
}
@media (max-width: 840px) {
  .rcs-messaging-hero-media figure img {
    height: 180px;
  }
}
.rcs-messaging-hero-media figure {
  margin: 0;
}

/* ----- Responsive styles for the left nav ----- */
.devsite-nav-title {
  padding: 10px 24px;
}
.devsite-nav-text {
  font: 500 14px/20px 'Google Sans Text';
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #444746;
}
.devsite-nav-list > :first-child > .devsite-nav-title {
  padding: 10px 16px;
}
.devsite-nav-heading > .devsite-nav-title .devsite-nav-text  {
  font: 700 14px/20px 'Google Sans Text';
  color: #444746;
}
.devsite-sidebar devsite-toc>.devsite-nav-list {
  border: none;
  padding: 0;
  padding-bottom: 1px;
}
.devsite-sidebar[fixed] .devsite-sidebar-content {
  background: transparent;
  max-width: 216px;
}
[has-sidebar] .devsite-sidebar {
  width: 100%;
  max-width: unset;
  margin-top: 12px;
  display: flex;
  margin-left: 24px;
}
@media (max-width: 1650px) {
  [has-sidebar] .devsite-sidebar {
    margin-left: 4px;
  }
}
@media (max-width: 1439px) {
  [has-sidebar] .devsite-sidebar {
    margin: 0;
  }
}
.devsite-main-content {
  background-color: white;
}
.body[layout=docs] devsite-content  {
  margin: 0;
}
body[layout=docs] .devsite-article  {
  box-shadow: none;
}
.devsite-nav-title[href]:hover,
.devsite-nav-title[href]:focus {
  background-color: #1d1b2014;
  outline: 1px solid #1d1b2014;
  border-radius: 100px;
  color: #444746;
}
.devsite-nav-title[href]:hover .devsite-nav-text,
.devsite-nav-title[href]:focus .devsite-nav-text {
  font-weight: 500;
  color: #444746;
}
.devsite-nav-active.devsite-nav-title .devsite-nav-text,
.devsite-nav-active.devsite-nav-title:hover .devsite-nav-text {
  font-weight: 700;
  color: #444759;
}
.devsite-nav-active,
.devsite-nav-active[href]:hover,
.devsite-nav-active.devsite-nav-title,
.devsite-nav-active.devsite-nav-title[href]:hover {
  outline: 1px solid #c4c7c5;
  border-radius: 100px;
  color: #4a4459;
  font-weight: 700;
}
devsite-toc>.devsite-nav-list>:last-child>.devsite-nav-title:only-child {
  padding-bottom: 10px;
}
.devsite-nav-item {
  margin-left: 1px;
}

/* ----- Responsive styles for the sticky button group ----- */
.sticky-button-group {
  position: fixed;
  width: max-content;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  border-radius: 100px;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  padding: 8px 24px;
}
.sticky-button-group span {
  font: 400 16px/24px 'Google Sans Text';
}
@media (max-width: 840px) {
  .sticky-button-group {
    font: 400 14px/20px 'Google Sans Text';
  }
  .sticky-button-group span {
    font: 400 14px/20px 'Google Sans Text';
  }
}
.sticky-button-group a {
  border: none;
  padding: 8px 16px;
  font: 500 16px/24px 'Google Sans Text';
  cursor: pointer;
}
.sticky-button-group a.active {
  font: 700 16px/24px 'Google Sans Text';
  color: #0b57d0;
}
@media (max-width: 840px) {
  .sticky-button-group a {
    font: 500 14px/20px 'Google Sans Text';
  }
  .sticky-button-group a.active {
    font: 700 14px/20px 'Google Sans Text';
  }
}
.sticky-button-group a:hover {
  background-color: #1d1b2014;
  border-radius: 100px;
}
.sticky-button-group a.active:hover {
  border-radius: 100px;
  background-color: #0b57d014;
}

/* Fade animations */
.fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
}

.fade-out {
  animation: fadeOut 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}