.button-container {
	padding: 1rem 0 .5rem 0;
	width: 100%;
	display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
	gap: .75rem;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: .875rem 1.25rem .75rem;
	border: .125rem solid transparent;
	border-radius: var(--radius-4);
	font-family: var(--type-sink);
	font-size: var(--font-size-h5);
	font-weight: normal;
	letter-spacing: var(--tracking-wide);
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--transition-standard), background-color var(--transition-standard), border-color var(--transition-standard), transform var(--transition-standard);
}

ul.menu-right li:last-child a {
	border-radius: var(--radius-4);
}

.button:hover,
.button:focus-visible {
	transform: translateY(-.125rem);
}

.button.primary {
	background: var(--color-brown);
	color: var(--color-white);
}

.button.secondary {
	background: var(--color-olive);
	color: var(--color-white);
}

.button.tertiary {
	border-color: currentColor;
	background: transparent;
	color: inherit;
}

.background-brown .button.primary,
.background-green .button.primary,
.background-red .button.primary {
	background: var(--color-yellow);
	color: var(--color-brown);
}

.background-brown .button.secondary,
.background-green .button.secondary,
.background-red .button.secondary {
	background: var(--color-pink);
	color: var(--color-brown);
}

.background-green .button.secondary {
	background: var(--color-lilac);
}

/******/
/*** BUTTON COLOR OVERRIDES ***/
/******/

a.button.brown {
	background-color: var(--color-brown);
	color: var(--color-white);
}

a.button.green {
	background-color: var(--color-green);
	color: var(--color-white);
}

a.button.lilac {
	background-color: var(--color-lilac);
	color: var(--color-brown);
}

a.button.olive {
	background-color: var(--color-olive);
	color: var(--color-brown);
}

a.button.pink {
	background-color: var(--color-pink);
	color: var(--color-brown);
}

a.button.red {
	background-color: var(--color-red);
	color: var(--color-white);
}

a.button.teal {
	background-color: var(--color-teal);
	color: var(--color-brown);
}

a.button.white {
	background-color: var(--color-white);
	color: var(--color-brown);
}

a.button.yellow {
	background-color: var(--color-yellow);
	color: var(--color-brown);
}