a {
  text-decoration: none; }

.header-font, .employee h3, h2 {
  font-family: freehouse, serif;
  font-weight: 400;
  font-style: normal; }

.body-font, .employee h4, .toc, ul.two-column-text, p, h3, .menu a, .base-button, .body-button, .wide-button {
  font-family: sweet-sans-pro, sans-serif;
  font-weight: 700;
  font-style: normal; }

:root {
  --property: variable;
  --brown: #5a4839;
  --grey: #d6d0cd;
  --darkGrey: #212427; }

.base-button, .body-button, .wide-button {
  border: 2px solid var(--brown);
  color: var(--grey);
  background-color: var(--brown);
  font-weight: 800;
  padding: .75rem 1.25rem;
  margin: 1.75rem 0;
  cursor: pointer;
  text-transform: uppercase;
  font-size: .9375rem;
  transition-duration: 100ms;
  text-decoration: none !important; }
  @media screen and (min-width: 65em) {
    .base-button, .body-button, .wide-button {
      font-size: 1.2rem; } }
  .base-button:hover, .body-button:hover, .wide-button:hover {
    border-color: var(--grey); }

.wide-button {
  padding: .75rem 2.25rem; }

.body-button {
  padding: .75rem 3.25rem;
  color: white; }
  .body-button:hover {
    background-color: white;
    border-color: var(--brown);
    color: var(--brown); }

.hide-large-up {
  display: block; }
  @media screen and (min-width: 65em) {
    .hide-large-up {
      display: none; } }
.hide-medium-down {
  display: none; }
  @media screen and (min-width: 65em) {
    .hide-medium-down {
      display: block; } }
* {
  box-sizing: border-box; }

body {
  margin: 0; }

html {
  font-size: 16px; }

nav {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9998;
  top: 0;
  background: transparent;
  padding: 0; }
  @media screen and (min-width: 65em) {
    nav {
      padding: 3rem 0; } }
.l-constrained {
  max-width: 96%;
  padding: 0 2%;
  margin: 0 auto; }
  @media screen and (min-width: 90em) {
    .l-constrained {
      max-width: 100rem; } }
.l-extra-constrained {
  padding: 0 2%;
  max-width: 75rem;
  margin: 0 auto; }

.l-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-content: center; }

.l-span-4 {
  grid-column: span 12; }
  @media screen and (min-width: 75em) {
    .l-span-4 {
      grid-column: span 4; } }
.l-span-6 {
  grid-column: span 12; }
  @media screen and (min-width: 65em) {
    .l-span-6 {
      grid-column: span 6; } }
.l-span-8 {
  grid-column: span 12; }
  @media screen and (min-width: 65em) {
    .l-span-8 {
      grid-column: span 8; } }
.l-span-12 {
  grid-column: span 12; }

.reverse-order-medium-down {
  grid-row: 7; }
  @media screen and (min-width: 65em) {
    .reverse-order-medium-down {
      grid-row: 1; } }
figure {
  margin: 0; }

img {
  max-width: 100%;
  height: auto; }

.l-center-center {
  display: flex;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem; }
  @media screen and (min-width: 65em) {
    .l-center-center {
      margin-bottom: 0; } }
.centered-content {
  text-align: center; }

.l-hero {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  position: relative;
  top: 50%;
  transform: translateY(-50%); }
  .l-hero article {
    margin-bottom: 3rem; }
    @media screen and (min-width: 65em) {
      .l-hero article {
        margin-bottom: 0; } }
.l-tall-hero {
  height: 100vh; }

.l-short-hero {
  height: 50vh; }

footer {
  height: 33vh;
  background-color: var(--brown); }

.l-masonry {
  margin-top: -8rem;
  grid-template-columns: repeat(10, 1fr);
  max-width: 96%; }
  @media screen and (min-width: 65em) {
    .l-masonry {
      grid-gap: 3rem; } }
.l-masonry article {
  padding: 0rem; }
  @media screen and (min-width: 65em) {
    .l-masonry article {
      padding: 6rem; } }
@media screen and (min-width: 65em) {
  .l-masonry article.first {
    padding-top: 14rem; } }

.l-left-figure {
  grid-column: span 10;
  margin-bottom: -1.5rem; }
  @media screen and (min-width: 65em) {
    .l-left-figure {
      margin-bottom: 0;
      grid-row: 1 / span 2;
      grid-column: span 4; } }
.l-right-text {
  grid-column: span 10; }
  @media screen and (min-width: 65em) {
    .l-right-text {
      grid-column: span 6; } }
.l-left-text {
  grid-column: span 10; }
  @media screen and (min-width: 65em) {
    .l-left-text {
      grid-column: span 6; } }
.l-right-figure {
  grid-column: span 10;
  margin-bottom: -1.5rem; }
  @media screen and (min-width: 65em) {
    .l-right-figure {
      margin-bottom: 0;
      grid-column: 7 / span 4;
      grid-row: 2 / span 2; } }
.l-row {
  padding: 1.5rem 0; }
  @media screen and (min-width: 65em) {
    .l-row {
      padding: 3rem 0; } }
.menu_toggler {
  position: absolute;
  top: 3.5rem;
  right: 2rem;
  z-index: 9999;
  height: 2rem;
  width: 2rem;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center; }
  .menu_toggler span,
  .menu_toggler span::before,
  .menu_toggler span::after {
    position: absolute;
    content: '';
    width: 2rem;
    height: 0.25rem;
    background-color: var(--grey);
    border-radius: 1rem;
    transition: 500ms cubic-bezier(0.77, 0, 0.175, 1); }
  .menu_toggler span {
    width: 1.75rem; }
  .menu_toggler span::before {
    top: -.5rem; }
  .menu_toggler span::after {
    top: .5rem; }
  .menu_toggler.active > span {
    background: transparent; }
  .menu_toggler.active > span::before, .menu_toggler.active > span::after {
    background-color: var(--grey);
    top: 0; }
  .menu_toggler.active > span::before {
    transform: rotate(-225deg); }
  .menu_toggler.active > span::after {
    transform: rotate(225deg); }
  @media screen and (min-width: 65em) {
    .menu_toggler {
      display: none; } }
h1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem; }
  @media screen and (min-width: 65em) {
    h1 {
      padding: 1.5rem 1.5rem 1.5rem 3rem; } }
  @media screen and (min-width: 90em) {
    h1 {
      padding: 1.5rem 1.5rem 1.5rem 6rem; } }
.hide-large-up img {
  max-width: 66%; }
  @media screen and (min-width: 40em) {
    .hide-large-up img {
      max-width: 45%; } }
.menu {
  position: fixed;
  left: -100%;
  z-index: 9998;
  color: #005c9c;
  width: 100%;
  height: 100%;
  padding: 0 0 0 0;
  display: flex;
  flex-direction: column;
  transition: 300ms left cubic-bezier(0.77, 0, 0.175, 1);
  background-color: rgba(214, 208, 205, 0.95); }
  .menu ul {
    text-align: right;
    height: 100%;
    list-style-type: none; }
  .menu li {
    padding: 1rem 0; }
  .menu a {
    margin-right: 1rem;
    text-align: right;
    text-decoration: none;
    font-size: 1.66rem;
    line-height: 1.33;
    color: var(--brown);
    text-transform: uppercase; }
    @media screen and (min-width: 65em) {
      .menu a {
        color: var(--grey); } }
  @media screen and (min-width: 65em) {
    .menu {
      background: transparent;
      position: static;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      height: auto;
      z-index: 9999;
      padding: 0;
      height: 100%; }
      .menu h1 {
        grid-column: span 4;
        margin: 1.5rem 1.5rem 1.5rem 0;
        max-width: 80%; }
      .menu ul {
        grid-column: span 8;
        margin: -.1rem 0 0 0;
        display: flex;
        margin-left: 3rem;
        justify-content: space-evenly;
        align-items: center; }
      .menu li {
        display: inline-block; }
      .menu a {
        width: 100%;
        height: 100%;
        font-size: 1.2rem;
        text-align: center;
        margin: 0; }
      .menu li a:after {
        display: block;
        margin-top: .1rem;
        content: '';
        border-bottom: solid 3px var(--grey);
        transform: scaleX(0);
        transition: transform 100ms ease-in-out; }
      .menu li a:hover:after {
        transform: scaleX(1); } }
.callout {
  padding: 3rem;
  text-align: center; }
  @media screen and (min-width: 40em) {
    .callout {
      padding: 6rem; } }
.callout.masonry-follows {
  padding: 3rem 2%; }
  @media screen and (min-width: 65em) {
    .callout.masonry-follows {
      padding: 6rem 6rem 12rem 6rem; } }
.callout.grey {
  background-color: var(--grey); }

.callout.partial-grey {
  background-image: -webkit-linear-gradient(top, var(--grey), var(--grey) 70%, transparent 70%, transparent 100%);
  background-image: linear-gradient(to bottom, var(--grey), var(--grey) 70%, transparent 70%, transparent 100%); }

footer p {
  color: var(--grey); }

.figure-padding {
  padding-bottom: 1.5rem; }
  @media screen and (min-width: 65em) {
    .figure-padding {
      padding: 0 3rem; } }
.images-follow {
  padding-bottom: 3rem; }
  @media screen and (min-width: 40em) {
    .images-follow {
      padding-bottom: 6rem; } }
h2 {
  font-size: 2.333rem;
  line-height: 1.1;
  color: var(--grey);
  margin: 0; }
  @media screen and (min-width: 40em) {
    h2 {
      font-size: 2.666rem; } }
  @media screen and (min-width: 65em) {
    h2 {
      font-size: 3.625rem; } }
.brown,
.grey h2,
.images-follow h2 {
  color: var(--brown); }

.white-text {
  color: white; }

h3 {
  font-size: 1.66rem;
  line-height: 1.33;
  color: var(--grey);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0; }
  @media screen and (min-width: 65em) {
    h3 {
      padding-top: .66rem; } }
p {
  font-size: 1rem;
  line-height: 1.2;
  color: var(--brown); }
  @media screen and (min-width: 40em) {
    p {
      font-size: 1.3rem; } }
.l-tall-hero p {
  font-size: .8rem; }
  @media screen and (min-width: 65em) {
    .l-tall-hero p {
      font-size: 1.3rem; } }
.hero-paragraph,
.hero-list,
.hero-white-header {
  color: white; }

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

ul.two-column-text {
  padding-top: 1rem;
  margin: 0 auto;
  font-size: 1.3rem;
  line-height: 1.2;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2; }
  @media screen and (min-width: 40em) {
    ul.two-column-text {
      max-width: 60%;
      margin: 0 auto; } }
.toc {
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--brown);
  padding-top: 1.5rem; }

.compost-cost-line-item {
  display: grid;
  grid-template-columns: auto max-content;
  grid-template-areas: "compost-item compost-cost";
  align-items: end;
  gap: 0 .25rem;
  max-width: 40rem;
  margin: 0 auto; }

.compost-item {
  grid-area: compost-item;
  text-align: left;
  position: relative;
  overflow: hidden; }
  .compost-item:after {
    position: absolute;
    padding-left: .25ch;
    content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
    text-align: right; }

.compost-cost {
  grid-area: compost-cost; }

.centered-button {
  display: block;
  text-align: center;
  margin: 0 auto; }

.employee h3 {
  color: var(--brown);
  font-size: 1.5rem; }
  @media screen and (min-width: 90em) {
    .employee h3 {
      font-size: 2.5rem; } }
.employee h4 {
  color: var(--brown);
  font-size: 1.3rem;
  text-transform: uppercase;
  font-weight: 900;
  margin-top: 0rem; }

/* Set the size of the div element that contains the map */
#map {
  height: 33vh;
  width: 100rem;
  max-width: 96%;
  margin: 0 auto; }
  @media screen and (min-width: 65em) {
    #map {
      height: 66vh; } }
#home-hero {
  background: url(/images/homeHero.jpg);
  background-size: cover;
  background-repeat: no-repeat; }

#home-ranch-beauty-shot {
  background: url(/images/bently-ranch-mountains.jpg);
  background-size: cover;
  background-repeat: no-repeat; }

#ranch-hero {
  background: url(/images/ranch-hero.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top right; }

#compost-hero {
  background: url(/images/compost-hero.jpg);
  background-size: cover;
  background-repeat: no-repeat; }

#compost-beauty-shot {
  background: url(/images/compost-road.jpg);
  background-size: cover;
  background-repeat: no-repeat; }

#our-story-hero {
  background: url(/images/our-story-hero.jpg);
  background-size: cover;
  background-repeat: no-repeat; }

#contact-hero {
  background: url(/images/contact-hero.jpg);
  background-size: cover;
  background-repeat: no-repeat; }

.menu.active {
  left: 0; }