:root {
  --dark-text: #111;
  --white: white;
  --black: black;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-layout-vflex {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

body {
  color: var(--dark-text);
  background-color: #e2e2e2;
  background-image: url('../images/shadows.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
  font-family: Inter Tight, sans-serif;
  font-size: 20px;
  line-height: 28px;
}

.glow {
  z-index: -1;
  opacity: .3;
  filter: blur(125px);
  pointer-events: none;
  background-image: linear-gradient(135deg, #63cef0 15%, #2f29f5 50%, #e67443 85%);
  border-radius: 50%;
  width: 100vw;
  height: 100vw;
  transition: all .8s;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}

.header {
  z-index: 8;
  padding-top: 24px;
  position: static;
  top: 0;
  left: 0;
  right: 0;
}

.headerbox {
  -webkit-backdrop-filter: blur();
  backdrop-filter: blur();
  background-color: #0000;
  border-radius: 100px;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px;
  transition: all .4s;
  display: flex;
}

.headerbox.scroll {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #fffc;
  max-width: 600px;
  box-shadow: 0 6px 16px #00000012;
}

.content {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}

.content.narrow {
  max-width: 980px;
}

.content.medium {
  max-width: 1180px;
}

.logo {
  width: 42px;
}

.logolink {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: var(--dark-text);
  justify-content: flex-start;
  align-items: center;
  font-family: Ltt recoleta, Georgia, sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 26px;
  text-decoration: none;
  display: flex;
}

.button {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #000000d9;
  border-radius: 50px;
  padding: 10px 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  transition: all .2s;
}

.button:hover {
  background-color: #000;
  transform: translate(0, -2px)scale(1.05);
  box-shadow: 0 8px 24px #0003;
}

.button.big {
  padding: 18px 50px;
  font-size: 20px;
}

.pricespan {
  opacity: .6;
  font-weight: 400;
}

.gapxl {
  height: 180px;
}

.herotitle {
  text-align: center;
  letter-spacing: -4px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Petrona, sans-serif;
  font-size: 90px;
  font-style: italic;
  font-weight: 500;
  line-height: 90px;
}

.gaps {
  height: 32px;
}

.herodesc {
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  line-height: 38px;
}

.cardwrap {
  z-index: 2;
  margin-top: 88px;
  padding-left: 48px;
  padding-right: 48px;
  position: relative;
}

.card {
  background-color: #fff;
  border-radius: 24px;
}

.gapl {
  height: 120px;
}

.btngrp {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.btngrp.left {
  justify-content: flex-start;
  align-items: center;
}

.gapm {
  height: 64px;
}

.herowrap {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.changingtext.gradient {
  opacity: .7;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(#0000000d, #0000000d), linear-gradient(135deg, #63cef0, #2f29f5 50%, #e67443);
  -webkit-background-clip: text;
  background-clip: text;
}

.h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Ltt recoleta, Georgia, sans-serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 70px;
}

.h2.left {
  text-align: left;
  font-family: Petrona, sans-serif;
  font-style: italic;
  font-weight: 500;
}

.h2.left.h3 {
  font-size: 32px;
  font-style: italic;
  font-weight: 400;
  line-height: 40px;
}

.footer {
  background-image: linear-gradient(0deg, #e6e6e6, #e6e6e6 65%, #e6e6e600);
}

.footersplit {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.footertext {
  opacity: .4;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.nbsg-link {
  color: var(--dark-text);
  text-decoration: none;
}

.nbsg-link:hover {
  opacity: .5;
}

.buysectioncols {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
}

.buysectioncols.homepage-cta-card {
  grid-template-columns: 1fr 1fr;
}

.checkitem {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.checklist {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.buysectionimgwrap {
  background-color: #f0f0f0;
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.footernav {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: center;
  align-items: center;
  max-width: 360px;
  margin-top: -36px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.footerlink {
  color: var(--dark-text);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.footerlink:hover {
  opacity: .5;
}

.socialnav {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-end;
  align-items: center;
  max-width: 360px;
  display: flex;
}

.header80_content {
  align-items: center;
  max-width: 54rem;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7rem;
  padding-bottom: 7rem;
  display: flex;
  position: relative;
}

.header80_image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.header80_images-wrapper {
  z-index: 1;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.header80_images-wrapper.images-wrapper-right {
  z-index: 0;
  inset: 0% 0% 0% auto;
}

.header80_ix-trigger {
  z-index: -1;
  margin-top: 100vh;
  position: absolute;
  inset: 0%;
}

.header80_content-wrapper {
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.section_header80 {
  position: relative;
}

.header80_component {
  height: 300vh;
  position: relative;
}

.header80_image-list {
  z-index: 1;
  grid-row-gap: 26vw;
  flex-direction: column;
  padding-top: 70vh;
  display: flex;
}

.header80_image-wrapper {
  width: 100%;
  padding-top: 120%;
  position: relative;
}

.header80_image-wrapper.is-image-2 {
  width: 22vw;
  margin-top: -46vw;
  left: 58vw;
}

.header80_image-wrapper.is-image-3 {
  width: 20vw;
  margin-top: -5vw;
  left: 4vw;
}

.header80_image-wrapper.is-image-5 {
  opacity: .75;
  width: 20vw;
}

.header80_image-wrapper.is-image-4 {
  width: 18vw;
  margin-top: -45vw;
  left: 64vw;
}

.header80_image-wrapper.is-image-6 {
  opacity: .75;
  width: 18vw;
  margin-top: -44vw;
  right: 54vw;
}

.header80_image-wrapper.is-image-1 {
  width: 22vw;
}

.padding-global {
  padding-left: 5%;
  padding-right: 5%;
}

.text-align-center {
  text-align: center;
  flex: 1;
}

.gradient {
  z-index: 0;
  background-image: linear-gradient(135deg, #63cef0 15%, #2f29f5 50%, #e67443 85%);
}

.gaps-2 {
  height: 30px;
}

.features_component {
  z-index: 7;
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
  grid-template-rows: auto;
  grid-template-columns: .75fr 1fr;
  grid-auto-columns: 1fr;
  align-items: stretch;
  display: grid;
}

.herodesc-2 {
  font-size: 31px;
  line-height: 120%;
}

.features_mobile-image {
  width: 100%;
  position: absolute;
}

.features_desktop-image-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}

.features_mobile-image-wrapper {
  display: none;
}

.divider {
  background-color: #eee;
  height: 1px;
}

.features_content {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
  display: flex;
}

.gapm-2 {
  height: 40px;
}

.features_content-wrapper {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.text-light {
  color: #fff9;
}

.features_image {
  width: 100%;
  margin-bottom: -25%;
  position: absolute;
}

.features_image.is-image2 {
  transform: rotate(-1deg);
}

.features_image.is-image1 {
  transform: rotate(2deg);
}

.features_image.is-image3 {
  transform: rotate(6deg);
}

.heroquotes {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.heroquote {
  text-align: left;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 24px;
  flex: 1;
  padding: 18px 20px 16px;
  font-size: 18px;
  line-height: 24px;
}

.heroquotesrc {
  font-size: 18px;
  font-weight: 500;
}

.gapxs {
  height: 16px;
}

.heroquotepos {
  opacity: .5;
  font-size: 14px;
  line-height: 20px;
}

.stars {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  display: flex;
}

.starrow {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

._3dstar {
  width: 22px;
  margin-bottom: -2px;
  margin-right: -7px;
}

.reviewsummary {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.facesrow {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.face {
  border: 2px solid #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  margin-right: -5px;
  display: flex;
  box-shadow: 0 2px 5px #0000000d;
}

.reviewlinktext {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.reviewsummarytext {
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  flex-flow: column;
  margin-top: -1px;
  display: flex;
}

.reviewlink {
  opacity: .5;
  color: var(--dark-text);
  text-decoration: none;
  transition: all .2s;
}

.reviewlink:hover {
  opacity: 1;
}

.hero {
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  max-width: 1400px;
  min-height: 80vh;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.herocontent {
  z-index: 2;
  position: relative;
}

.herobg {
  z-index: 1;
  height: 100vh;
  position: absolute;
  inset: 0% 0% auto;
}

.herocards1 {
  opacity: .5;
  position: absolute;
  inset: 0%;
}

.herocards2 {
  opacity: .8;
  position: absolute;
  inset: 0%;
}

.herocard {
  aspect-ratio: 250 / 350;
  background-color: #fff9;
  background-image: url('../images/herocard.png');
  background-position: 0 0;
  background-size: 100%;
  border-radius: 8px;
  width: 120px;
  position: absolute;
}

.herocard.iscard1 {
  top: 5%;
  right: 170px;
}

.herocard.iscard1.cardrotate1 {
  background-image: url('../images/05_1.avif');
  background-position: 0 0;
  background-size: 100%;
}

.herocard.iscard2 {
  bottom: 17%;
  left: 5%;
}

.herocard.iscard2.cardrotate2 {
  background-image: url('../images/06_1.avif');
}

.herocard.iscard3 {
  opacity: .3;
  bottom: 9%;
  right: 21%;
}

.herocard.iscard3.cardrotate3 {
  background-image: url('../images/07_1.avif');
}

.herocard.iscard4 {
  top: 15%;
  left: 12%;
}

.herocard.iscard4.cardrotate2 {
  background-image: url('../images/02_1.avif');
  border-radius: 8px;
}

.herocard.iscard5 {
  opacity: .5;
  bottom: 15%;
  left: 30%;
}

.herocard.iscard5.cardrotate3 {
  background-image: url('../images/03_1.avif');
  border-radius: 8px;
}

.herocard.iscard6 {
  bottom: 34%;
  right: 2%;
}

.herocard.iscard6.cardrotate4 {
  background-image: url('../images/04_1.avif');
  border-radius: 8px;
}

.herocard.iscard7 {
  opacity: .2;
  top: 10%;
  right: 29%;
}

.herocard.iscard7.cardrotate4 {
  background-image: url('../images/08_1.avif');
  background-position: 0 0;
  background-size: 100%;
}

.herocard.iscard8 {
  top: 30%;
  left: -3%;
}

.herocard.iscard8.cardrotate1 {
  background-image: url('../images/01_1.avif');
  border-radius: 8px;
}

.headernav {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.text-size-medium {
  font-size: 1.125rem;
}

.button-2 {
  border: 1px solid var(--\<unknown\|relume-variable-color-neutral-1\>);
  background-color: var(--\<unknown\|relume-variable-color-neutral-1\>);
  color: var(--\<unknown\|relume-variable-color-neutral-2\>);
  text-align: center;
  padding: .75rem 1.5rem;
  text-decoration: none;
}

.button-2.is-secondary {
  color: var(--\<unknown\|relume-variable-color-neutral-1\>);
  background-color: #0000;
}

.header80_content-2 {
  align-items: center;
  max-width: 48rem;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7rem;
  padding-bottom: 7rem;
  display: flex;
  position: relative;
}

.margin-top, .margin-top.margin-medium {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

.margin-bottom, .margin-bottom.margin-small {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.button-group {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.button-group.is-center {
  justify-content: center;
}

.text-align-center-2 {
  text-align: center;
}

.image {
  width: 100%;
}

.h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-family: Petrona, sans-serif;
  font-size: 70px;
  font-style: italic;
  font-weight: 500;
  line-height: 70px;
}

.h3.left {
  text-align: left;
}

.lighttext {
  opacity: .6;
}

.bullet {
  width: 24px;
  margin-top: -2px;
}

.testimimg {
  border-radius: 12px;
}

.hidefornow {
  display: none;
}

.disablebtn {
  opacity: .2;
  pointer-events: none;
}

.outofstock {
  color: #d33;
  font-size: 15px;
  font-weight: 500;
  line-height: 23px;
}

.text-block {
  font-size: 16px;
  line-height: 24px;
}

.text-block.head {
  font-size: 20px;
}

.text-block-2 {
  font-size: 14px;
  line-height: 22px;
}

.text-block-3, .text-block-4, .text-block-5 {
  font-family: Petrona, sans-serif;
  font-style: normal;
  font-weight: 500;
}

.text-block-6, .text-block-7, .text-block-8 {
  font-family: Petrona, sans-serif;
  font-weight: 500;
}

@media screen and (max-width: 991px) {
  .herotitle {
    letter-spacing: -3px;
    font-size: 70px;
    line-height: 70px;
  }

  .herodesc {
    font-size: 26px;
    line-height: 34px;
  }

  .gapl {
    height: 100px;
  }

  .buysectioncols {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column-reverse;
    grid-template-columns: 1fr;
    display: flex;
  }

  .footernav {
    max-width: none;
    margin-top: 20px;
    margin-left: 0;
    margin-right: 0;
  }

  .header80_content {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .header80_image-wrapper.is-image-2 {
    width: 28vw;
  }

  .header80_image-wrapper.is-image-3, .header80_image-wrapper.is-image-5 {
    width: 26vw;
  }

  .header80_image-wrapper.is-image-4, .header80_image-wrapper.is-image-6 {
    width: 24vw;
  }

  .header80_image-wrapper.is-image-1 {
    width: 28vw;
  }

  .features_component {
    grid-column-gap: 3rem;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
  }

  .herodesc-2 {
    font-size: 27px;
  }

  .header80_content-2 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .margin-top {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .content {
    padding-left: 24px;
    padding-right: 24px;
  }

  .button.big {
    padding: 16px 30px;
    font-size: 18px;
    line-height: 20px;
  }

  .gapxl {
    height: 120px;
  }

  .herotitle {
    letter-spacing: -1px;
    font-size: 40px;
    line-height: 40px;
  }

  .herodesc {
    font-size: 20px;
    line-height: 30px;
  }

  .cardwrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .gapl {
    height: 80px;
  }

  .gapm {
    height: 42px;
  }

  .h2 {
    font-size: 50px;
    line-height: 50px;
  }

  .footersplit {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
    flex-flow: column;
  }

  .footernav {
    flex-flow: column;
    margin-top: 42px;
  }

  .socialnav.headersocialnav {
    display: none;
  }

  .header80_content {
    padding-top: 4rem;
  }

  .header80_ix-trigger {
    margin-top: 35rem;
  }

  .header80_content-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .header80_component {
    height: 150vh;
  }

  .header80_image-wrapper.is-image-2 {
    width: 30vw;
    left: 52vw;
  }

  .header80_image-wrapper.is-image-3, .header80_image-wrapper.is-image-5 {
    width: 28vw;
  }

  .header80_image-wrapper.is-image-4 {
    width: 26vw;
  }

  .header80_image-wrapper.is-image-6 {
    width: 26vw;
    right: 50vw;
  }

  .header80_image-wrapper.is-image-1 {
    width: 30vw;
  }

  .features_component {
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }

  .herodesc-2 {
    font-size: 25px;
  }

  .features_mobile-image {
    border-radius: 30px;
    margin-bottom: -20%;
    position: static;
  }

  .features_desktop-image-wrapper {
    display: none;
  }

  .features_mobile-image-wrapper {
    order: -1;
    width: 100%;
    margin-bottom: 2.5rem;
    display: block;
  }

  .features_content {
    height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .gapm-2 {
    height: 25px;
  }

  .heroquotes {
    flex-flow: column;
  }

  .text-size-medium {
    font-size: 1rem;
  }

  .header80_content-2 {
    padding-top: 4rem;
  }

  .margin-top {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .h3 {
    font-size: 40px;
    line-height: 40px;
  }
}

@media screen and (max-width: 479px) {
  body {
    font-size: 17px;
    line-height: 23px;
  }

  .pricespan {
    display: none;
  }

  .h2, .h2.left {
    font-size: 40px;
    line-height: 40px;
  }

  .header80_image-wrapper {
    width: 30vw;
    height: 35vw;
  }

  .features_component {
    grid-template-columns: 1fr;
  }

  .herodesc-2 {
    font-size: 22px;
  }

  .features_mobile-image {
    border-radius: 30px;
  }

  .features_content {
    height: auto;
  }

  .headernav {
    display: none;
  }

  .margin-top {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

#w-node-d8fba63d-ee0f-3997-3e4a-ef3821b76dcb-29235a47, #w-node-e240cec1-a880-2513-c316-39ce8b6ae60d-29235a47, #w-node-e2104aca-e8ed-2401-0384-c6a823c74195-29235a47, #w-node-_86fa2ed9-d4ec-22a5-5ae5-c8b1d89f3a1d-29235a47, #w-node-_9ef4c22e-9c7c-f5e9-73ad-a9f48c6305f9-29235a47, #w-node-_4d2a6d2d-9025-8d30-cfd7-cf7dc38a1b2e-29235a47, #w-node-_7ceedb88-fe9f-7793-297d-d40293e243dd-29235a47 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}


@font-face {
  font-family: 'Ltt recoleta';
  src: url('../fonts/LttRecoleta-Regular.woff2') format('woff2'), url('../fonts/LttRecoleta-Regular.eot') format('embedded-opentype'), url('../fonts/LttRecoleta-Regular.woff') format('woff'), url('../fonts/LttRecoleta-Regular.ttf') format('truetype'), url('../fonts/LttRecoleta-Regular.svg') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-Bold.ttf') format('truetype'), url('../fonts/Petrona-ExtraBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-ExtraBoldItalic.ttf') format('truetype'), url('../fonts/Petrona-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}