@font-face {
  font-family: Bricolagegrotesque;
  src: url('../fonts/BricolageGrotesque_24pt-Bold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Bricolagegrotesque;
  src: url('../fonts/BricolageGrotesque_24pt-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Bricolagegrotesque;
  src: url('../fonts/BricolageGrotesque_24pt-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Bricolagegrotesque;
  src: url('../fonts/BricolageGrotesque_24pt-ExtraLight.ttf') format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Bricolagegrotesque;
  src: url('../fonts/BricolageGrotesque_24pt-SemiBold.ttf') format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Bricolagegrotesque;
  src: url('../fonts/BricolageGrotesque_24pt-ExtraBold.ttf') format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Bricolagegrotesque;
  src: url('../fonts/BricolageGrotesque_24pt-Light.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolagegrotesque 24 Pt Semicondensed";
  src: url('../fonts/BricolageGrotesque_24pt_SemiCondensed-SemiBold.ttf') format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolagegrotesque 24 Pt Semicondensed";
  src: url('../fonts/BricolageGrotesque_24pt_SemiCondensed-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolagegrotesque 24 Pt Semicondensed";
  src: url('../fonts/BricolageGrotesque_24pt_SemiCondensed-ExtraBold.ttf') format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolagegrotesque 24 Pt Semicondensed";
  src: url('../fonts/BricolageGrotesque_24pt_SemiCondensed-ExtraLight.ttf') format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolagegrotesque 24 Pt Semicondensed";
  src: url('../fonts/BricolageGrotesque_24pt_SemiCondensed-Light.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolagegrotesque 24 Pt Semicondensed";
  src: url('../fonts/BricolageGrotesque_24pt_SemiCondensed-Bold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolagegrotesque 24 Pt Semicondensed";
  src: url('../fonts/BricolageGrotesque_24pt_SemiCondensed-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --yellow: #ffee4d;
  --black: #010101;
  --blue: #97a6ff;
  --gray: #f9f6ef;
  --white: white;
}

body {
  background-color: var(--yellow);
  color: var(--black);
  font-family: "Bricolagegrotesque 24 Pt Semicondensed", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 120%;
}

h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3rem;
  font-weight: 700;
  line-height: 120%;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 120%;
}

h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 130%;
}

h5 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 120%;
}

h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 140%;
}

p {
  margin-bottom: 0;
}

a {
  text-decoration: underline;
  transition: opacity .2s;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2.5rem;
}

blockquote {
  border-left: .3125rem solid #e2e2e2;
  margin-bottom: 0;
  padding: .625rem 1.25rem;
  font-size: 1.125rem;
  line-height: 1.375rem;
}

.simple-text {
  letter-spacing: -.03em;
  font-size: 1.5rem;
  line-height: 1.3;
}

.simple-text p {
  margin-bottom: 2.5rem;
}

.simple-text h1, .simple-text h2, .simple-text h3, .simple-text h4 {
  margin-bottom: 1.5rem;
}

.simple-text h5 {
  margin-bottom: .75rem;
}

.simple-text h6 {
  margin-bottom: 1rem;
}

.simple-text ol {
  margin-bottom: 1.5rem;
}

.simple-text ul {
  margin-bottom: 1.5rem;
  padding-left: 1.25rem;
}

.simple-text blockquote {
  border-left-color: var(--blue);
  margin-bottom: 1.5rem;
}

.simple-text.is-hero-excerpt {
  font-size: 1.75rem;
  font-weight: 500;
}

.simple-text.is-pricing-box {
  line-height: 1.5;
}

.navbar {
  background-color: #0000;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  position: absolute;
  inset: 0% 0% auto;
}

.container-fluid {
  width: 100%;
  max-width: 96rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3rem;
  padding-right: 3rem;
}

.nav-flex {
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
  display: flex;
}

.image-logo {
  width: 18.375rem;
  display: block;
}

.navlink {
  text-transform: uppercase;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 600;
  transition: color .2s, opacity .2s;
  display: block;
}

.navlink:hover {
  color: var(--blue);
}

.navlink.w--current {
  color: var(--black);
  text-decoration: underline;
}

.navlink.w--current:hover {
  color: var(--blue);
}

.navmenu-flex {
  grid-column-gap: 4.5rem;
  grid-row-gap: 4.5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.hero_section {
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  padding-top: 13rem;
  padding-bottom: 5.125rem;
  display: flex;
}

.hero-grid-main {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.image-hero {
  width: 100%;
  max-width: 29.5rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.h1-hero {
  letter-spacing: -.03em;
  font-size: 8.75rem;
  line-height: 95%;
}

.margin-top-medium {
  margin-top: 2rem;
}

.max-width-excerpt {
  width: 100%;
  max-width: 41.5rem;
}

.margin-top-xlarge {
  margin-top: 5.125rem;
}

.text-align-center, .hero-button-align {
  text-align: center;
}

.hero-button {
  background-color: var(--black);
  color: var(--gray);
  text-transform: uppercase;
  border-radius: 3rem;
  padding: 1.25rem 2.5rem;
  font-family: Bricolagegrotesque, sans-serif;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .2s, color .2s, opacity .2s;
}

.hero-button:hover {
  background-color: var(--blue);
  color: var(--black);
}

.section_main {
  background-color: var(--gray);
  padding-top: 5.125rem;
  padding-bottom: 5.125rem;
}

.section_main.section_blue {
  background-color: var(--blue);
}

.section_main.is-more-padding {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.section_main.section_photo {
  color: var(--gray);
}

.h2-main {
  letter-spacing: -.03em;
  font-size: 6.25rem;
  line-height: 105%;
}

.gird-home-about {
  grid-column-gap: 4.5rem;
  grid-row-gap: 4.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.grid-home-item {
  grid-column-gap: .875rem;
  grid-row-gap: .875rem;
  text-align: center;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.icon-grid-home {
  object-fit: contain;
  width: 8.75rem;
  height: 8.75rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.text-grid-title {
  letter-spacing: -.03em;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.button {
  background-color: var(--black);
  color: var(--gray);
  text-transform: uppercase;
  border-radius: 2rem;
  padding: 1rem 1.5rem;
  font-family: Bricolagegrotesque, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .2s, color .2s, opacity .2s;
}

.button:hover {
  background-color: var(--yellow);
  color: var(--black);
}

.grid-top-flex {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-flow: column;
  align-items: center;
  display: flex;
}

.background-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0%;
}

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

.footer_section {
  background-color: var(--black);
  color: var(--gray);
  padding-top: 5.125rem;
  padding-bottom: 5.125rem;
}

.footer_section.section_blue {
  background-color: var(--blue);
}

.footer_section.is-more-padding {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.footer_section.section_photo {
  color: var(--gray);
}

.footer-flex {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: wrap;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.text-footer {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
}

.footer-simple-link {
  text-decoration: none;
  transition: color .2s, opacity .2s;
}

.footer-simple-link:hover {
  color: var(--yellow);
}

.footer_button {
  background-color: var(--gray);
  color: var(--black);
  text-transform: uppercase;
  border-radius: 2rem;
  padding: 1rem 1.5rem;
  font-family: Bricolagegrotesque, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .2s, color .2s, opacity .2s;
}

.footer_button:hover {
  background-color: var(--yellow);
  color: var(--black);
}

.margin-top-large {
  margin-top: 3rem;
}

.image-logo-footer {
  width: 100%;
  height: auto;
  display: block;
}

.image-main-page {
  width: 100%;
  display: block;
}

.h3-main {
  font-size: 2.5rem;
}

.pricing-wrapper {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  flex-flow: column;
  display: flex;
}

.grid-pricings {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-flow: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}

.pricing-item-grid {
  border: 1px solid var(--black);
  flex: 1 0 30%;
  padding: 1.5rem;
}

.pricing-heading {
  text-transform: uppercase;
  font-size: 1.5rem;
}

.margin-top-regular {
  margin-top: 1.5rem;
}

.span-size {
  min-width: 2.5rem;
  margin-right: 1rem;
  display: inline-block;
}

@media screen and (max-width: 991px) {
  .navbar {
    background-color: var(--yellow);
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: fixed;
    inset: 0% 0% auto;
  }

  .container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .a-brand-logo {
    z-index: 2;
  }

  .navmenu {
    background-color: var(--blue);
    padding-top: 10rem;
    padding-bottom: 4rem;
    position: fixed;
    inset: 0%;
  }

  .menubutton {
    z-index: 2;
    transition: background-color .2s;
  }

  .menubutton.w--open {
    background-color: var(--black);
  }

  .navlink {
    font-size: 2.5rem;
  }

  .navlink:hover {
    color: var(--yellow);
  }

  .navmenu-flex {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column;
  }

  .gird-home-about {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }
}

@media screen and (max-width: 767px) {
  .navbar {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }

  .nav-flex, .a-brand-logo {
    padding-left: 0;
  }

  .navmenu {
    background-color: var(--yellow);
  }

  .menubutton {
    padding: 12px;
    transition: color .2s, background-color .2s;
  }

  .menubutton.w--open {
    color: var(--yellow);
  }

  .image-logo {
    width: 12rem;
  }

  .hero_section {
    padding-top: 8rem;
  }

  .hero-grid-main {
    flex-flow: column-reverse;
    align-items: center;
    display: flex;
  }

  .image-hero {
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
  }

  .h1-hero {
    font-size: 6rem;
  }

  .margin-top-xlarge {
    margin-top: 4rem;
  }

  .hero-button.w--current {
    font-size: 2rem;
  }

  .section_main, .section_main.is-more-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .h2-main {
    font-size: 4rem;
  }

  .gird-home-about {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    flex-flow: column;
    display: flex;
  }

  .footer-flex {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: column;
  }

  .grid-pricings {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: column;
  }

  .pricing-item-grid {
    flex: 0 auto;
  }
}

@media screen and (max-width: 479px) {
  .h1-hero {
    font-size: 5rem;
    line-height: 105%;
  }

  .hero-button {
    padding: 1.125rem 1.5rem;
    font-size: 1.5rem;
  }

  .hero-button.w--current {
    padding: 1rem 1.875rem;
    font-size: 1.35rem;
  }

  .hero-button.booksy-button {
    text-align: center;
    width: 100%;
    display: block;
  }

  .h2-main {
    font-size: 3.5rem;
  }

  .margin-top-large {
    margin-top: 2.5rem;
  }
}


@font-face {
  font-family: 'Bricolagegrotesque';
  src: url('../fonts/BricolageGrotesque_24pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolagegrotesque';
  src: url('../fonts/BricolageGrotesque_24pt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolagegrotesque';
  src: url('../fonts/BricolageGrotesque_24pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolagegrotesque';
  src: url('../fonts/BricolageGrotesque_24pt-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolagegrotesque';
  src: url('../fonts/BricolageGrotesque_24pt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolagegrotesque';
  src: url('../fonts/BricolageGrotesque_24pt-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolagegrotesque';
  src: url('../fonts/BricolageGrotesque_24pt-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolagegrotesque 24 Pt Semicondensed';
  src: url('../fonts/BricolageGrotesque_24pt_SemiCondensed-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolagegrotesque 24 Pt Semicondensed';
  src: url('../fonts/BricolageGrotesque_24pt_SemiCondensed-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolagegrotesque 24 Pt Semicondensed';
  src: url('../fonts/BricolageGrotesque_24pt_SemiCondensed-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolagegrotesque 24 Pt Semicondensed';
  src: url('../fonts/BricolageGrotesque_24pt_SemiCondensed-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolagegrotesque 24 Pt Semicondensed';
  src: url('../fonts/BricolageGrotesque_24pt_SemiCondensed-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolagegrotesque 24 Pt Semicondensed';
  src: url('../fonts/BricolageGrotesque_24pt_SemiCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolagegrotesque 24 Pt Semicondensed';
  src: url('../fonts/BricolageGrotesque_24pt_SemiCondensed-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}