.site-nav {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  justify-content: space-evenly;
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 8px;
}

.site-nav__logo-button-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, .85);
}

.site-nav__button {
  width:               var(--button-size);
  height:              var(--button-size);
  #font-size:           16px;
  margin:              auto 0;
  cursor:              pointer;
  border-radius:       4px;
  border:              1px solid transparent;
  background-color:    var(--button-background-color);
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' width='18' height='18'%3E%3Crect width='20' height='3' style='fill:rgb(255,255,255);' %3E%3C/rect%3E%3Crect y='7' width='20' height='3' style='fill:rgb(255,255,255);'%3E%3C/rect%3E%3Crect y='14' width='20' height='3' style='fill:rgb(255,255,255);'%3E%3C/rect%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  -webkit-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out;
}

.js-site-nav__button--active {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 17' width='20' height='17'%3E%3Cline x1='4' y1='1' x2='16' y2='13' style='stroke:rgb(255,255,255);stroke-width:3' /%3E%3Cline x1='4' y1='13' x2='16' y2='1' style='stroke:rgb(255,255,255);stroke-width:3' /%3E%3Crect x='2' y='16' width='16' height='1' style='fill:rgb(255,255,255);'%3E%3C/rect%3E%3C/svg%3E");
  -webkit-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out;
}

.site-menu {
  overflow:   hidden;
}

.site-menu__list-wrapper {
  overflow:      hidden;
  display:       none;
  margin-top:    8px;
  margin-bottom: 0px;
}

.js-site-menu__list-wrapper--active {
  display: block;
}

.js-site-menu__list-wrapper--visible {
  display: block;
}

.js-site-menu__list-wrapper--transition {
  transition: height 0.4s ease;
}

.js-site-menu__list-wrapper--hidden {
  display: block;
}

.site-menu__list {
  padding:    0;
  margin:     0;
  list-style: none;
}

.site-menu__list-item {
  height:           var(--button-size);
  background-color: rgba(105, 95, 80, .85);
  #background-color: var(--mobile-menu-bgcolor);
  border-radius:    4px;
  display:          flex;
}

.site-menu__list-item:not(:last-child) {
  margin-bottom:    5px;
}

.site-menu__link {
  display:         flex;
  width:           100%;
  height:          100%;
  align-items:     center;
  justify-content: center;
  font-family:     "Karla";
  font-size:       15px;
  letter-spacing:  2px;
  text-decoration: none;
  color:           #ffffff;
  /* font smoothing */
  text-rendering:  optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-menu__link:hover {
  transition: 0.4s ease;
  color:      #D2BEA0;
}

.site-menu__link.site-menu__link--active {
  color: #D2BEA0;
}

@media only screen and (min-width: 780px) {

  .site-nav {
    flex-direction: row;
    background-color: rgba(255, 255, 255, .75);
  }

  .site-nav__logo-button-wrapper {
    background-color: unset;
  }

  .site-nav__button {
    display: none;
  }

  .site-menu__list-wrapper {
    display: block;
  }

  .site-menu__list {
    display: inline-flex;
  }

  .site-menu__list-item {
    background-color: unset;
    border-radius: 0px;
  }

  .site-menu__list-item:not(:last-child):after {
    padding-left: 1em;
    padding-right: 1em;
    color: #D2BEA0;
    content: "|";
    margin-top: auto;
    margin-bottom: auto;
  }

  .site-menu__link {
    letter-spacing:  0.1rem;
    color: #524E4E;
  }

  .site-menu__link.site-menu__link--active {
    color: #9D8F78;
  }

}