@font-face {
  font-family: 'Gotham-Medium';
  src: url('../fonts/Gotham-Medium.woff2') format('woff2'),
    url('../fonts/Gotham-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Gotham-Regular';
  src: url('../fonts/GothamOffice-Regular.woff2') format('woff2'),
    url('../fonts/GothamOffice-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Gotham-Bold';
  src: url('../fonts/GothamOffice-Bold.woff2') format('woff2'),
    url('../fonts/GothamOffice-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Gotham-Book';
  src: url('../fonts/GothamOffice-Book.woff2') format('woff2'),
    url('../fonts/GothamOffice-Book.woff') format('woff');
}

body {
  font-family: "Gotham-Regular", Arial, Helvetica, sans-serif;
}

*.medium {
  font-family: "Gotham-Medium", Arial, Helvetica, sans-serif;
}

*.regular {
  font-family: "Gotham-Regular", Arial, Helvetica, sans-serif;
}

*.bold {
  font-family: "Gotham-Bold", Arial, Helvetica, sans-serif;
}

*.book {
  font-family: "Gotham-Book", Arial, Helvetica, sans-serif;
}

.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6,
.subtitle-m,
.subtitle-s,
.body-l-bold,
.body-m-bold,
.body-s-bold,
.body-xs-bold,
.body-xxs-bold,
.menu-tabs-s,
.menu-tabs,
.button {
  font-family: "Gotham-Medium", Arial, Helvetica, sans-serif;
}

.body-l,
.body-m,
.body-s,
.body-xs,
.body-xxs {
  font-family: "Gotham-Book", Arial, Helvetica, sans-serif;
}

caption,
.caption-s,
.caption-m,
.caption-l {
  font-family: "Gotham-Bold", Arial, Helvetica, sans-serif;
}

*.medium {
  font-family: "Gotham-Medium", Arial, Helvetica, sans-serif;
}

*.regular {
  font-family: "Gotham-Regular", Arial, Helvetica, sans-serif;
}

*.bold {
  font-family: "Gotham-Bold", Arial, Helvetica, sans-serif;
}

*.book {
  font-family: "Gotham-Book", Arial, Helvetica, sans-serif;
}

.heading-1,
.heading-2,
.heading-3,
.heading-5,
.body-l,
.body-l-bold,
.body-s-bold {
  color: var(--mrcoin-dark-blue);
}

.body-s,
.body-xs,
.body-xxs,
.body-s-bold,
.body-xs-bold {
  color: var(--color-grey-500);
}

.heading-1 {
  font-weight: 500;
  font-size: 54px;
  line-height: 110%;
  letter-spacing: 0px;
}

.heading-2 {
  font-weight: 500;
  font-size: 42px;
  line-height: 110%;
  letter-spacing: 0px;
  margin: 0;
}

.heading-3 {
  font-weight: 500;
  font-size: 32px;
  line-height: 110%;
  letter-spacing: 0px;
  margin: 0;
}

.heading-4 {
  font-weight: 500;
  font-size: 24px;
  line-height: 110%;
  letter-spacing: 0px;
}

.heading-5 {
  font-weight: 500;
  font-size: 20px;
  line-height: 110%;
  letter-spacing: 0px;
}

.heading-6 {
  font-weight: 500;
  font-size: 18px;
  line-height: 110%;
  letter-spacing: 0px;
}

.subtitle-m {
  font-weight: 500;
  font-size: 16px;
  line-height: 110%;
  letter-spacing: 0px;
  margin: 0;
}

.subtitle-s {
  font-weight: 500;
  font-size: 14px;
  line-height: 110%;
  letter-spacing: 0px;
  margin: 0;
}

.body-l {
  font-weight: 400;
  font-size: 22px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-l-bold {
  font-weight: 500;
  font-size: 22px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-m {
  font-weight: 400;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-m-bold {
  font-weight: 500;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-s {
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-s-bold {
  font-weight: 500;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-xs {
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-xs-bold {
  font-weight: 500;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-xxs {
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.body-xxs-bold {
  font-weight: 500;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
}

.caption {
  font-weight: 700;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 1px;
}

.caption-s {
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 1px;
}

.caption-m {
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mrcoin-blue);
  margin: 0;
}

.caption-l {
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mrcoin-blue);
  margin: 0;
}

.button-l {
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0.5px;
}

.button-m {
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0.5px;
}

.button-s {
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.5px;
}

.menu-tabs {
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0px;
}

.menu-tabs-s {
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0px;
}

@media (width >=64rem) {

  .lg\:heading-1 {
    font-weight: 500;
    font-size: 54px;
    line-height: 110%;
    letter-spacing: 0px;
  }

  .lg\:heading-2 {
    font-weight: 500;
    font-size: 42px;
    line-height: 110%;
    letter-spacing: 0px;
    margin: 0;
  }

  .lg\:heading-3 {
    font-weight: 500;
    font-size: 32px;
    line-height: 110%;
    letter-spacing: 0px;
    margin: 0;
  }

  .lg\:heading-4 {
    font-weight: 500;
    font-size: 24px;
    line-height: 110%;
    letter-spacing: 0px;
  }

  .lg\:heading-5 {
    font-weight: 500;
    font-size: 20px;
    line-height: 110%;
    letter-spacing: 0px;
  }

  .lg\:heading-6 {
    font-weight: 500;
    font-size: 18px;
    line-height: 110%;
    letter-spacing: 0px;
  }

  .lg\:subtitle-m {
    font-weight: 500;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0px;
  }

  .lg\:subtitle-s {
    font-weight: 500;
    font-size: 14px;
    line-height: 110%;
    letter-spacing: 0px;
  }

  .lg\:body-l {
    font-weight: 400;
    font-size: 22px;
    line-height: 140%;
    letter-spacing: 0px;
  }

  .lg\:body-m {
    font-weight: 400;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: 0px;
  }

  .lg\:body-s {
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0px;
  }

  .lg\:body-xs {
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0px;
  }

  .lg\:body-xxs {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0px;
  }

  .lg\:caption {
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 1px;
  }

  .lg\:caption-s {
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 1px;
  }

  .lg\:button-l {
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0.5px;
  }

  .lg\:button-m {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0.5px;
  }

  .lg\:button-s {
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0.5px;
  }

  .lg\:menu-tabs {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
  }

  .lg\:menu-tabs-s {
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0px;
  }
}

.opacity-0\.5 {
  opacity: 0.5;
}

.opacity-0\.75 {
  opacity: 0.75;
}

.opacity-1 {
  opacity: 1;
}

.opacity-0 {
  opacity: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0px;
}

@media (width >=1200px) {

  .lg\:heading-1 {
    font-weight: 500;
    font-size: 54px;
    line-height: 110%;
    letter-spacing: 0px;
  }

  .lg\:heading-2 {
    font-weight: 500;
    font-size: 42px;
    line-height: 110%;
    letter-spacing: 0px;
    margin: 0;
  }

  .lg\:heading-3 {
    font-weight: 500;
    font-size: 32px;
    line-height: 110%;
    letter-spacing: 0px;
    margin: 0;
  }

  .lg\:heading-4 {
    font-weight: 500;
    font-size: 24px;
    line-height: 110%;
    letter-spacing: 0px;
  }

  .lg\:heading-5 {
    font-weight: 500;
    font-size: 20px;
    line-height: 110%;
    letter-spacing: 0px;
  }

  .lg\:heading-6 {
    font-weight: 500;
    font-size: 18px;
    line-height: 110%;
    letter-spacing: 0px;
  }

  .lg\:subtitle-m {
    font-weight: 500;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0px;
  }

  .lg\:subtitle-s {
    font-weight: 500;
    font-size: 14px;
    line-height: 110%;
    letter-spacing: 0px;
  }

  .lg\:body-l {
    font-weight: 400;
    font-size: 22px;
    line-height: 140%;
    letter-spacing: 0px;
  }

  .lg\:body-m {
    font-weight: 400;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: 0px;
  }

  .lg\:body-s {
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    letter-spacing: 0px;
  }

  .lg\:body-xs {
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0px;
  }

  .lg\:body-xxs {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0px;
  }

  .lg\:caption {
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 1px;
  }

  .lg\:caption-s {
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 1px;
  }

  .lg\:button-l {
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0.5px;
  }

  .lg\:button-m {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0.5px;
  }

  .lg\:button-s {
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0.5px;
  }

  .lg\:menu-tabs {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
  }

  .lg\:menu-tabs-s {
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0px;
  }
}