:root {
  --background-white--heading: var(--swatch--green);
  --background-white--text: var(--swatch--black);
  --swatch--green: #39b54a;
  --swatch--dark-green: #2a8536;
  --background-white--background: var(--swatch--white);
  --background-white--button-background: var(--swatch--green);
  --background-white--button-background-hover: var(--swatch--dark-green);
  --background-white--button-text: var(--swatch--white);
  --swatch--coffee: #3c2415;
  --swatch--dark-beige: #dbd4c4;
  --swatch--dark-coffee: #24150c;
  --swatch--beige: #f4ebe5;
  --swatch--black: #000;
  --swatch--white: white;
  --background-green--background: var(--swatch--green);
  --background-green--text: var(--swatch--white);
  --background-green--heading: var(--swatch--white);
  --background-green--button-background: var(--swatch--white);
  --background-green--button-background-hover: var(--swatch--dark-beige);
  --background-green--button-text: var(--swatch--green);
  --background-beige--background: var(--swatch--dark-beige);
  --background-beige--text: var(--swatch--coffee);
  --background-beige--heading: var(--swatch--coffee);
  --background-beige--button-background: var(--swatch--coffee);
  --background-beige--button-background-hover: var(--swatch--dark-coffee);
  --background-beige--button-text: var(--swatch--white);
}

body {
  color: #333;
  font-family: Artegra Soft, sans-serif;
  font-size: 1vw;
  font-weight: 400;
  line-height: 20px;
}

h1 {
  color: var(--background-white--heading);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4em;
  font-weight: 600;
  line-height: 1em;
}

h2 {
  color: var(--background-white--heading);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3em;
  font-weight: 600;
  line-height: 1em;
}

p {
  color: var(--background-white--text);
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.25em;
  line-height: 1.25em;
}

a {
  color: var(--swatch--green);
  text-decoration: none;
}

a:hover {
  color: var(--swatch--dark-green);
}

ul {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
  font-size: 1.25em;
  line-height: 1.5em;
}

img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: inline-block;
}

.section.is--alignedleft {
  background-color: var(--background-white--background);
  text-align: left;
}

.container {
  width: 100%;
  max-width: 1440px;
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 9em 3em;
  display: flex;
}

.container.grid {
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.button {
  background-color: var(--background-white--button-background);
  border-radius: .8em;
  margin-left: auto;
  margin-right: auto;
  padding: 1em;
  font-size: 1.25em;
  transition: background-color .25s;
}

.button:hover {
  background-color: var(--background-white--button-background-hover);
  color: var(--background-white--button-text);
}

.list {
  line-height: 1.25em;
}

.header-section {
  width: 100%;
  height: 70vh;
  background-image: url('../images/beanwise-coffee-grounds.jpg');
  background-position: 50%;
  background-size: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.div-block {
  width: 25em;
  height: 25em;
  background-color: var(--swatch--coffee);
  background-image: url('../images/organic-waste-in-a-small-plastic-box.jpg');
  background-position: 0%;
  background-size: cover;
  border-radius: 35.2em 7em;
}

.column {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.is--alignedleft {
  width: 100%;
  text-align: left;
}

.green-line {
  width: 5em;
  height: 4px;
  background-color: var(--background-white--heading);
  border-radius: 4px;
}

.green-line.is-left {
  align-self: flex-start;
}

.family-image {
  width: 50em;
  border-radius: 2em;
  overflow: hidden;
}

.products-grid {
  width: 100%;
  grid-column-gap: 15em;
  grid-row-gap: 15em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.product-div {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-direction: column;
  display: flex;
}

.form-block {
  width: 100%;
}

.text-field {
  background-color: var(--swatch--dark-beige);
  border-radius: 1em;
  margin-top: 0;
  margin-bottom: 0;
  padding: 1.6em;
  font-size: 1.25em;
  line-height: 1.25em;
}

.form {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-direction: column;
  display: flex;
}

.footer {
  background-color: var(--swatch--dark-coffee);
}

.footer-container {
  width: 100%;
  max-width: 1440px;
  grid-column-gap: 2.5em;
  grid-row-gap: 3.5em;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 7em 3em;
  display: flex;
}

.footer-container.grid {
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.footer-logo {
  width: 20em;
}

.slogan {
  color: var(--swatch--dark-beige);
  text-align: center;
  letter-spacing: .5em;
  font-size: 1.2em;
  font-weight: 600;
}

.footer-social {
  width: 100%;
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  grid-template-rows: auto;
  grid-template-columns: .5fr .5fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.social-text {
  color: var(--swatch--dark-beige);
  font-size: 1.8em;
}

.social-div {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
}

.social-icon {
  width: 3.5em;
}

.div-block-2 {
  width: 2.5px;
  height: 100%;
  background-color: var(--swatch--dark-beige);
  border-radius: 4px;
}

.credits {
  color: var(--swatch--dark-beige);
  text-align: center;
  font-size: 1.25em;
  line-height: 1.25em;
}

.nav-bar {
  width: 100%;
  background-color: var(--swatch--beige);
  position: fixed;
  top: 0;
}

.nav-container {
  width: 100%;
  max-width: 1440px;
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 2em 3em;
  display: flex;
}

.nav-container.grid {
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.nav-logo {
  width: 20em;
}

.menu-grid {
  width: 100%;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.menu-link-text {
  text-align: center;
  font-size: 1.5em;
  font-weight: 600;
}

.menu-link-div {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  color: var(--swatch--green);
  justify-content: center;
  align-items: center;
  transition: color .35s;
  display: flex;
}

.menu-link-div:hover {
  color: var(--swatch--dark-green);
}

.menu-leaf---why, .menu-leaf---who, .menu-leaf---our, .menu-leaf---products, .menu-leaf---contact {
  width: 1.3em;
}

.mobile-nav-bar-opens {
  display: none;
}

.mobile-nav-logo {
  width: 20em;
}

.mobile-nav-container {
  width: 100%;
  max-width: 1440px;
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 2em 3em;
  display: flex;
}

.mobile-nav-container.grid {
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.mobile-menu-div {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
}

.mobile-nav-bar-closes {
  display: none;
}

@media screen and (max-width: 991px) {
  body {
    font-size: 9px;
  }
}

@media screen and (max-width: 767px) {
  .menu-link-text {
    font-size: 1em;
  }
}

@media screen and (max-width: 479px) {
  .container {
    padding-top: 14em;
    padding-bottom: 14em;
  }

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

  .family-image {
    width: 100%;
  }

  .products-grid {
    grid-column-gap: 5em;
    grid-row-gap: 5em;
    grid-template-columns: 1fr;
  }

  .footer-social {
    grid-column-gap: 2.5em;
    grid-row-gap: 2.5em;
    grid-template-columns: 1fr;
  }

  .social-div {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    flex-direction: column;
  }

  .div-block-2, .nav-bar {
    display: none;
  }

  .mobile-nav-bar-opens {
    z-index: 90;
    background-color: var(--swatch--beige);
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .burger-menu {
    width: 5em;
    height: 5em;
    grid-column-gap: .75em;
    grid-row-gap: .75em;
    background-color: var(--swatch--coffee);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .6em;
    display: flex;
  }

  .mobile-nav-container {
    z-index: 90;
    flex-direction: row;
    justify-content: space-around;
    position: relative;
  }

  .menu-line-top, .menu-line-middle, .menu-line-btm {
    background-color: var(--swatch--beige);
    padding-bottom: 3px;
    padding-right: 33px;
  }

  .full-screen-menu {
    z-index: 80;
    background-color: var(--swatch--dark-beige);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: none;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
  }

  .mobile-menu-div {
    width: 100%;
    grid-column-gap: 2.5em;
    grid-row-gap: 2.5em;
    flex-direction: column;
    grid-template-rows: 30px;
    grid-template-columns: 1fr;
    font-size: 19px;
    display: flex;
  }

  .mobile-nav-bar-closes {
    z-index: 90;
    background-color: var(--swatch--beige);
    display: none;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .menu-line-top-closes, .menu-line-middle-closes, .menu-line-btm-closes {
    background-color: var(--swatch--beige);
    padding-bottom: 3px;
    padding-right: 33px;
  }

  .full-screen-menu-closes {
    z-index: 80;
    background-color: var(--swatch--dark-beige);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
  }
}

#w-node-_758ac5ad-19af-42c9-5fb5-884c9e4ce603-ba29d00a {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_8ef07b5d-3ba1-18dc-3fcf-ad72d3b9fb79-ba29d00a {
  justify-self: end;
}

#w-node-_50f72fcc-c765-1abf-1e44-0cce570c214f-ba29d00a {
  justify-self: start;
}

#w-node-_42c14d3f-1b70-d1f5-eef8-beeb12bddb31-ba29d00a {
  grid-area: span 1 / span 2 / span 1 / span 2;
}


@font-face {
  font-family: 'Artegra Soft';
  src: url('../fonts/artegra-soft-semibold.woff2') format('woff2'), url('../fonts/artegra-soft-semibold.eot') format('embedded-opentype'), url('../fonts/artegra-soft-semibold.woff') format('woff'), url('../fonts/artegra-soft-semibold.ttf') format('truetype'), url('../fonts/artegra-soft-semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Artegra Soft';
  src: url('../fonts/artegra-soft-regular.woff2') format('woff2'), url('../fonts/artegra-soft-regular.eot') format('embedded-opentype'), url('../fonts/artegra-soft-regular.woff') format('woff'), url('../fonts/artegra-soft-regular.ttf') format('truetype'), url('../fonts/artegra-soft-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Artegra Soft';
  src: url('../fonts/artegra-soft-medium-italic.woff2') format('woff2'), url('../fonts/artegra-soft-medium-italic.eot') format('embedded-opentype'), url('../fonts/artegra-soft-medium-italic.eot') format('embedded-opentype'), url('../fonts/artegra-soft-medium-italic.woff') format('woff'), url('../fonts/artegra-soft-medium-italic.ttf') format('truetype'), url('../fonts/artegra-soft-medium-italic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Artegra Soft';
  src: url('../fonts/artegra-soft-semibold-italic.woff2') format('woff2'), url('../fonts/artegra-soft-semibold-italic.eot') format('embedded-opentype'), url('../fonts/artegra-soft-semibold-italic.woff') format('woff'), url('../fonts/artegra-soft-semibold-italic.ttf') format('truetype'), url('../fonts/artegra-soft-semibold-italic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Artegra Soft';
  src: url('../fonts/artegra-soft-regular-italic.woff2') format('woff2'), url('../fonts/artegra-soft-regular-italic.eot') format('embedded-opentype'), url('../fonts/artegra-soft-regular-italic.woff') format('woff'), url('../fonts/artegra-soft-regular-italic.ttf') format('truetype'), url('../fonts/artegra-soft-regular-italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Artegra Soft';
  src: url('../fonts/artegra-soft-medium.woff2') format('woff2'), url('../fonts/artegra-soft-medium.eot') format('embedded-opentype'), url('../fonts/artegra-soft-medium.woff') format('woff'), url('../fonts/artegra-soft-medium.ttf') format('truetype'), url('../fonts/artegra-soft-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}