/*
Theme Name: Upcycle
Text Domain: upcycle
Version: 1.1
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Unknown
Author URI: https://www.upcycleandcompany.com/
Theme URI: https://www.upcycleandcompany.com/
License: Unknown
License URI: https://www.upcycleandcompany.com/

Unknown

*//* Custom properties
--------------------------------------------- */

:root {
	--brown: #483B33;
	--darker-brown: #201917;
	--bright-green: #8CC63E;
	--darker-green: #4DA52B;
	--light: #F7F7F7;
	--tan: #F4F2EE;
}

/* Typography
--------------------------------------------- */
@font-face {
	font-family: "MetricRegular";
	src: url("fonts/metric/metric-web-regular.woff2") format("woff2"),
		url("fonts/metric/metric-web-regular.woff") format("woff"),
		url("fonts/metric/metric-web-regular.eot") format("embedded-opentype");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "MetricRegularItalic";
	src: url("fonts/metric/metric-web-regular-italic.woff2") format("woff2"),
		url("fonts/metric/metric-web-regular-italic.woff") format("woff"),
		url("fonts/metric/metric-web-regular-italic.eot") format("embedded-opentype");
	font-weight: 400;
}

@font-face {
	font-family: "MetricMedium";
	src: url("fonts/metric/metric-web-medium.woff2") format("woff2"),
		url("fonts/metric/metric-web-medium.woff") format("woff"),
		url("fonts/metric/metric-web-medium.eot") format("embedded-opentype");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "MetricMediumItalic";
	src: url("fonts/metric/metric-web-medium-italic.woff2") format("woff2"),
		url("fonts/metric/metric-web-medium-italic.woff") format("woff"),
		url("fonts/metric/metric-web-medium-italic.eot") format("embedded-opentype");
	font-weight: 500;
}

@font-face {
	font-family: "MetricSemibold";
	src: url("fonts/metric/metric-web-semibold.woff2") format("woff2"),
		url("fonts/metric/metric-web-semiboldwoff") format("woff"),
		url("fonts/metric/metric-web-semibold.eot") format("embedded-opentype");
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: "Veneer";
	src: url("fonts/VeneerTwo/veneer-two.woff2") format("woff2"),
		url("fonts/VeneerTwo/veneer-two.woff") format("woff");
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: "TrendSlabOne";
	src: url("fonts/TrendSlabOne/trend-slab-one.woff2") format("woff2"),
		url("fonts/TrendSlabOne/trend-slab-one.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

body {
	color: var(--brown);
	font-family: "MetricRegular", "Helvetica Neue", sans-serif;
	font-size: 24px;
	line-height: 30px;
	margin: 0;
}

main {
	display: block;
	padding-top: 122px;
}

details {
	display: block;
}

summary {
	display: list-item;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

h1,
h2,
h3 {
	font-family: "Veneer", Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	letter-spacing: .2px;
	color: var(--brown);
	font-weight: 100;
	margin-block-start: 0;
	margin-block-end: 0;
}

h1 {
	font-size: 70px;
	line-height: 65px;
	margin-bottom: 22px;
}

h2 {
	font-size: 50px;
	line-height: 50px;
}

h3 {
	font-size: 29px;
	line-height: 34px;
}

h4 {
	font-family: "TrendSlabOne", sans-serif;
	font-size: 20px;
	letter-spacing: -2px;
}

h5 {
	font-family: "MetricSemiBold", "Helvetica Neue", sans-serif;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

p {
	margin-bottom: 30px;
	margin-block-start: 0;
	margin-block-end: 0;
}

p.small {
	font-size: 18px;
	line-height: 20px;
}

em,
i {
	font-style: italic;
}

strong {
	font-family: "MetricSemibold", "Helvetica Neue", sans-serif;
}

sup,
sub {
	font-size: 60%;
	vertical-align: baseline;
	position: relative;
	top: -0.8em;
}

sub {
	top: 0.8em;
}


/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change its value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */

button,
input {
	/* 1 */
	overflow: visible;
}

/**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */

button,
select {
	/* 1 */
	text-transform: none;
}

/**
  * Correct the inability to style clickable types in iOS and Safari.
  */

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button {
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
}


/* Links
--------------------------------------------- */
a {
	color: inherit;
	text-decoration: none;
	background-color: transparent;
}

a:visited {
	color: inherit;
}

a:hover,
a:focus,
a:active {
	color: var(--darker-green);
	transition: 0.3s;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}


/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li>ul,
li>ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

.green {
	color: var(--bright-green);
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

img {
	max-width: 100%;
	border-style: none;
}

/* ---------------------------------------------
COMPONENTS
--------------------------------------------- */

/* Header-Home
--------------------------------------------- */
.header-content-wrapper {
	position: relative;
}

.main-header .header-content-wrapper {
	margin-top: 5vw;
}

.main-header .hero-wrapper {
	max-width: 100%;
	overflow: hidden;
}

.main-header .headline-wrapper {
	position: absolute;
	top: 2.7vw;
	left: 48vw;
	width: 26vw;
}

.main-header .big-stat-wrapper {
	position: absolute;
	bottom: 3.8vw;
	right: 20%;
	left: 20%;
	text-align: center;
}

.main-header .big-stat-wrapper .icon {
	width: 6vw;
	margin: 0 auto;
}

.main-header .big-stat-wrapper,
.main-header .big-stat-wrapper h1 {
	color: #fff;
}

.main-header .big-stat-wrapper h1 {
	margin: .5vw 0 0 0;
}

.main-header .headline-wrapper h1 {
	font-size: 6vw;
	line-height: 5.2vw;
	margin-bottom: 1.1vw;
}

.main-header p {
	font-size: 1.6vw;
	line-height: 2.1vw;
}


/* Header-Retail
--------------------------------------------- */
.retail-header {
	position: relative;
	height: 60vw;
	margin-bottom: 14vw;
}

.retail-header .header-content-wrapper {
	position: relative;
	margin: 0;
}

.retail-header .package-wrapper {
	position: absolute;
}

.retail-header .headline-wrapper {
	position: relative;
	width: 39vw;
	left: 37vw;
	top: 46vw;
}

.retail-header h1 {
	font-size: 4.8vw;
	line-height: 5.2vw;
	margin-bottom: 0.5vw;
}

.retail-header p {
	font-size: 1.6vw;
	line-height: 2.1vw;
}

img#mobile {
	display: none;
}

/* Header-Commercial
--------------------------------------------- */
.commercial-header {
	background: var(--bright-green);
	color: #fff;
	padding: 7vw 9vw 10vw 12vw;
	min-height: 47vw;
}

.commercial-header .header-content-wrapper {
	display: flex;
	align-items: flex-end;
}

.commercial-header .headline-wrapper {
	flex: 0 1 50%;
	padding-right: 5vw;
	width: 100%;
}

.commercial-header .info-wrapper {
	display: flex;
	flex-direction: column;
	flex: 0 1 45%;
	padding: 0 0 0 5vw;
	margin: 0 0 -1vw;
	/* min-height: 27vw; */
}

.commercial-header .image-wrapper {
	padding: 3vw 9vw 0 6vw;
	min-height: 22vw;
}

.commercial-header img {
	width: 100%;
}

.commercial-header h1,
.commercial-header h2,
.commercial-header h3 {
	color: #fff;
}

.commercial-header h1 {
	font-size: 19.5vw;
	line-height: 18vw;
	letter-spacing: -8px;
	margin-bottom: 0;
}

.commercial-header h2 {
	font-size: 11vw;
	line-height: 7.2vw;
}

.commercial-header h3 {
	font-size: 6.3vw;
	line-height: 4vw;
}

.commercial-header p {
	font-size: 1.7vw;
	line-height: 2vw;
}

/* Full width statistic-Home
--------------------------------------------- */
.page-home .stats-wrapper {
	background: var(--darker-brown);
	width: 100%;
	padding: 3vw 8vw 7vw;
	color: #fff;
	text-align: center;
}

.page-home .stats-wrapper .image {
	width: 10%;
	margin: 0 auto 1vw;
}

.page-home .stats-wrapper h1 {
	color: #fff;
	margin-bottom: .2vw;
}

.page-home .stats-wrapper p {
	font-family: "MetricMedium", "Helvetica Neue", sans-serif;
	font-size: 20px;
}

/* Full width statistic
--------------------------------------------- */
.stats-wrapper {
	background: var(--bright-green);
	width: 100%;
	padding: 8vw;
	text-align: center;
}

.stats-wrapper h1 {
	color: #fff;
	margin-bottom: 1vw;
}

.stats-wrapper h4 {
	margin: 0;
}

.stats-wrapper a {
	margin: 0;
	border-bottom: 1px solid;
	display: inline;
	transition: 0.3s;
}

.stats-wrapper a:hover {
	color: #fff;
}


/* Video
--------------------------------------------- */
.video-wrapper {
	width: 100%;
	margin-top: -7px;
	/* padding: 7vw 8vw 10vw; */
}

.video-wrapper h2 {
	text-align: center;
	margin-bottom: 4vw;
}

.video-wrapper iframe {
	display: block;
	margin: 0 auto;
	width: 100%;
}

/* Full width bg img
--------------------------------------------- */

.full-width-wrapper {
	position: relative;
}

.full-width-wrapper img {
	width: 100%;
}

.full-width-text {
	position: absolute;
	width: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.full-width-text h1 {
	color: #FFF;
	text-shadow: 0px 3px 6px #000000BA;
	text-align: center;
}

.full-width-wrapper.inset {
	padding: 0 10vw;
}

.full-width-wrapper.inset-carrots {
	padding: 8vw 10vw 0;
}

/* Full width paragraph
--------------------------------------------- */
.full-width-paragraph {
	width: 60%;
	max-width: 600px;
	margin: 0 auto;
	padding: 10vw 0;
}



/* Split content
--------------------------------------------- */
.split-wrapper {
	display: flex;
	align-items: stretch;
}

.split-wrapper .left-side {
	/* padding: 6vw 1vw 6vw 10vw; */
	flex: 0 1 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.split-wrapper .right-side {
	/* padding: 6vw 10vw 6vw 3vw; */
	flex: 0 1 50%;
}

.split-wrapper img {
	width: 100%;
	height: auto;
}

.split-wrapper p {
	margin-bottom: 30px;
}

footnote {
	font-size: 12px;
	line-height: 16px;
	display: block;
}

footnote a {
	text-decoration: underline;
	color: inherit;
	transition: 0.3s;
}

footnote a:hover {
	color: var(--darker-green);
}

/* Split content-Home
--------------------------------------------- */
.split-wrapper.not-just-nutrients {
	background: var(--bright-green);
	padding: 6vw 10vw;
	justify-content: space-between;
}

.split-wrapper.not-just-nutrients .left-side {
	max-width: 476px;
}

.split-wrapper.not-just-nutrients .right-side {
	padding-left: 6vw;
}


/* Split content-Retail
--------------------------------------------- */
.split-wrapper.tests {
	padding: 12vw 17vw 8vw;
	justify-content: space-between;
	align-items: center;
}

.split-wrapper.tests .left-side {
	flex: 0 1 40%;
	padding: 0;
}

.split-wrapper.tests .right-side {
	flex: 0 1 44%;
	padding: 0;
}

.split-wrapper.tests p.stat {
	font-size: 32px;
	font-family: 'MetricMedium';
	margin: 17px 0;
	padding-bottom: 1.5vw;
	border-bottom: 1px solid;
}

.split-wrapper.tests .emphasized {
	font-family: "Veneer", Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	letter-spacing: .2px;
	font-weight: 100;
	font-size: 40px;
	line-height: 40px;
}

.split-wrapper.tests p:nth-of-type(2) {
	margin-top: 0;
}

.split-wrapper.tests p:nth-of-type(4) {
	border-bottom: none;
	margin-bottom: 0;
}

.split-wrapper.reuse {
	padding: 8vw 14vw;
	justify-content: space-between;
}

.split-wrapper.reuse .left-side {
	padding-right: 3vw;
	max-width: 500px;
}

.split-wrapper.reuse .right-side {
	padding-left: 4vw;
}

.split-wrapper.reuse img {
	max-width: 380px;
}



/* Split content-About
--------------------------------------------- */
.split-wrapper.future-friendly,
.split-wrapper.our-secret,
.split-wrapper.upcycle {
	padding: 6vw 70px 3vw;

}

.split-wrapper.future-friendly .left-side {
	padding-right: 6vw;
}

.split-wrapper.the-idea {
	padding: 6vw 10vw 3vw;
}

.split-wrapper.the-idea .left-side {
	flex: 0 1 45%;
	padding-right: 7vw;
}

.split-wrapper.our-secret .left-side {
	padding-right: 6vw;
}

.split-wrapper.upcycle .left-side {
	justify-content: start;
}

.split-wrapper.upcycle .right-side {
	padding-left: 6vw;
}

.split-wrapper.one-percent {
	padding: 6vw 8vw 6vw 70px;
}

.split-wrapper.one-percent .left-side {
	flex: 0 1 60%;
	padding-right: 8vw;
}

.split-wrapper.one-percent .right-side {
	flex: 0 1 40%;
}


/* Split table
--------------------------------------------- */
.split-table {
	display: flex;
	justify-content: space-between;
	padding: 8vw 8vw 0;
}

.split-table .left-side {
	flex: 0 10 40%;
	margin-right: 3vw;
}

.split-table .left-side p {
	max-width: 500px;
}

.table-wrapper {
	display: flex;
	flex: 0 1 60%;
}

.left-table,
.right-table {
	width: calc(50% - 1.5vw);
}

.left-table {
	margin-right: 1.5vw;
}

.right-table {
	margin-left: 1.5vw;
}

tr {
	font-size: 20px;
	border-bottom: 1px solid;
	margin-bottom: 4px;
	padding-bottom: 2px;
	display: flex;
	justify-content: space-between;
}

sub {
	font-size: .7rem;
	vertical-align: -2px;
}


/* CTA
--------------------------------------------- */
.cta-wrapper {
	display: flex;
	justify-content: center;
	align-items: stretch;
	width: 100%;
	padding: 7vw 3vw 11vw;
}

.cta-wrapper .left {
	text-align: right;
	padding-right: 4vw;
	flex: 0 1 33%;
}

.cta-wrapper .middle {
	position: relative;
	flex: 0 1 33%;
}

.cta-wrapper .right {
	padding-left: 4vw;
	flex: 0 1 33%;
}

.cta-wrapper h2 {
	margin-bottom: -7px;
}

.cta-wrapper p a {
	color: var(--darker-green);
	font-family: "TrendSlabOne";
	font-size: 12px;
	letter-spacing: -1.2px;
	padding-bottom: 2px;
	border-bottom: 2px solid;
	transition: 0.3s;
}

.cta-wrapper p a:hover {
	color: var(--brown);
}

.cta-wrapper button {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 5.3vw 0 6.3vw;
	margin-top: -3vw;
	border: none;
	background: var(--bright-green);
	text-align: center;
	text-decoration: none;
	display: inline-block;
	transition: 0.3s;
}

.cta-wrapper button:hover {
	background: var(--brown);
	color: #fff;
}


/* Full width quote
--------------------------------------------- */
.quote {
	background: var(--light);
	padding: 10vw 7vw 6vw 9vw;
	display: flex;
	align-items: flex-start;
}

.quote .quote-open {
	margin-top: .7vw;
	flex: 0 1 8%;
}

.quote-text {
	flex: 0 1 70%;
	margin: 0 2vw 0 4vw;
	font-family: "MetricMedium", "Helvetica Neue", sans-serif;
	font-size: 3vw;
	line-height: 3.5vw;
}

.quote-text p {
	padding-bottom: 3vw;
}

.quote-text p:last-of-type {
	padding-bottom: 0;
}

.quote .quote-close {
	flex: 0 1 20%;
	margin-top: -4vw;
}

.quote .quote-open img,
.quote .quote-close img {
	max-width: 100%;
}


/* Video quote
--------------------------------------------- */
.video-quote {
	background: var(--tan);
	padding: 12vw 7vw 7vw;
	display: flex;
	align-items: flex-start;
}

.video-quote .quote-open {
	flex: 0 1 15%;
}

.video-quote .quote-open img {
	width: 46%;
}

.video-quote .quote-container {
	flex: 0 1 39%;
	margin: -95px 0 0;
}

.video-quote .video-wrapper {
	flex: 0 1 40%;
	margin-left: 5vw;
	padding: 0;
}

.video-quote .eyebrow {
	color: var(--darker-green);
}

.video-quote .video {
	margin-bottom: 2vw;
}

.video-quote p.quote {
	padding: 0;
	font-family: "MetricMedium", "Helvetica Neue", sans-serif;
	font-size: 2.5vw;
	line-height: 3vw;
	background: inherit;
}

.video-quote .attribution::before {
	content: url(images/rule.png);
	display: block;
	margin: 2vw 0 1vw;
}


/* 3 column
--------------------------------------------- */
.three-column {
	display: flex;
	align-items: center;
	margin: 8vw 7vw;
}

.three-column-illustration {
	flex: 0 1 18%;
	margin-top: -3vw;
	padding-right: 4vw;
}

.three-column-illustration img {
	width: 100%;
}

.three-column-text {
	flex: 0 1 60%;
	padding: 3.5vw 5vw;
	border-left: 1px solid;
	border-right: 1px solid;
}

.three-column-text h2 {
	font-size: 70px;
	line-height: 70px;
	margin-bottom: 1vw;
}

.three-column-text p {
	font-size: 26px;
	line-height: 34px;
	max-width: 590px;
}

.stat-text {
	flex: 0 1 25%;
	padding-left: 5vw;
}

.stat-text p {
	font-family: "MetricMediumItalic", "Helvetica Neue", sans-serif;
	font-style: italic;
	font-size: 18px;
	line-height: 22px;
	margin-bottom: 12px;
}

.stat-text h1 {
	font-size: 121px;
	line-height: 112px;
}


/* Logo carousel
--------------------------------------------- */
.logo-wrapper {
	margin: 7vw 7vw 3vw 7vw;
}

.logo-wrapper .logo-header {
	margin-bottom: 1vw;
	text-align: center;
}

.logo-wrapper .logo-image-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo-image {
	max-width: 16vw;
	padding: 2vw;
}

.logo-image:first-of-type {
	padding-left: 0;
}

.logo-image:last-of-type {
	padding-right: 0;
}

.logo-wrapper.commercial-logos .logo-image-wrapper {
	justify-content: center;
}

.logo-wrapper.commercial-logos .logo-image {
	margin: 0 4vw;
}


/* Follow us
--------------------------------------------- */
.follow-wrapper {
	padding: 14vw 9vw;
	display: flex;
	flex-direction: column;
}

.follow-wrapper .headline {
	flex: 0 0 100%;
}

.follow-wrapper h2 {
	font-size: 40px;
	margin-bottom: 2vw;
}

.follow-wrapper .image-wrapper {
	display: flex;
	justify-content: space-between;
}

.follow-wrapper .image {
	flex: 0 1 21.5%;
}


/* FAQ
--------------------------------------------- */
.faq-wrapper {
	border-top: 1px solid;
	margin: 0 70px 7vw;
	padding-top: 6vw;
}

.faq-items-wrapper {
	max-width: 650px;
}

.question {
	cursor: pointer;
	font-family: "MetricMedium", "Helvetica Neue", sans-serif;
	margin-bottom: 6px;
}

.answer {
	margin-bottom: 20px;
	display: none;
	width: 100% !important;
}

.faq-wrapper .fa {
	font-size: .8rem;
	margin-left: 7px;
	transition: all .3s ease-in-out;
}

.faq-wrapper h1 {
	margin-bottom: 3vw;
}


/* Contact
--------------------------------------------- */
.page-contact-us .full-width-paragraph {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 8vw 10vw 0;
}

.page-contact-us .full-width-paragraph h2 {
	font-size: 40px;
	font-size: 40px;
}

.page-contact-us .full-width-paragraph h4 {
	padding-bottom: 20px;
}

.page-contact-us .full-width-paragraph p {
	max-width: 600px;
	padding: 1.5vw 0 3vw;
}

.split-wrapper.contact {
	padding: 0 10vw 10vw;
}

.split-wrapper.contact .left-side {
	flex: 0 1 60%;
}

.split-wrapper.contact .right-side {
	flex: 0 1 40%;
	padding-left: 6vw;
}

.split-wrapper.contact .right-side h4::after {
	content: url(images/horiz-rule.png);
	display: block;
	margin: -12px 0 6px;
}

.split-wrapper.contact .right-side p:first-of-type {
	padding-bottom: 65px;
}

.top-form {
	display: flex;
	justify-content: space-between;
}

.top-form label {
	flex: 0 1 48.5%;
}

.page-contact-us h4,
select,
#send-btn input {
	font-size: 12px;
	letter-spacing: -1px;
	margin: 0;
}

.dropdown select {
	-webkit-appearance: none;
}

.wpcf7-form-control-wrap.your-subject:after {
	content: "⌄";
	font-size: 36px;
	line-height: 20px;
	position: absolute;
	right: 16px;
	top: calc(50% - 8px);
	pointer-events: none;
}

select,
#send-btn input {
	font-family: "TrendSlabOne", sans-serif;
}

.split-wrapper.contact .right-side p,
input,
textarea {
	font-size: 16px;
	line-height: 21px;
	font-family: "MetricRegular", "Helvetica Neue", sans-serif;
}

input,
select,
textarea {
	width: 100%;
	padding: 20px;
	margin-bottom: 20px;
}

input {
	border: 1px solid #707070;
	border-radius: 2px;
}

select,
#send-btn input {
	background: var(--bright-green);
	border: none;
	border-radius: 2px;
}

#send-btn input {
	width: 35%;
	padding: 30px;
	cursor: pointer;
	transition: 0.3s;
	margin-top: -8px;
}

#send-btn input:hover {
	background: var(--brown);
	color: #fff;
}

/* Store locator
--------------------------------------------- */
.page-store-locator .full-width-paragraph {
	width: 90%;
	max-width: 90%;
	padding: 4vw 0;
}

#wpsl-wrap {
	font-size: 17px;
	line-height: 20px;
}

#wpsl-search-wrap .wpsl-input label,
#wpsl-search-wrap div label {
	line-height: 40px;
}

#wpsl-search-btn {
	box-shadow: none;
}

#wpsl-result-list a {
	text-decoration: underline;
}

/* Privacy policy
--------------------------------------------- */
.page-privacy-policy h2 {
	padding: 4vw 0 2vw;
}

.page-privacy-policy p {
	padding-bottom: 20px;
}

.page-privacy-policy .full-width-paragraph {
	padding: 5vw 0 12vw;
}


/* Navigation
--------------------------------------------- */
.site-header {
	width: 100%;
	height: 122px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 70px;
	background-color: var(--light);
	position: fixed;
	top: 0;
	z-index: 100;
	box-shadow: 0px 3px 30px #00000029;
	transition: all 0.4s ease-in-out;
}

.site-header ul {
	list-style: none;
}

.site-header li {
	font-size: 18px;
	letter-spacing: 0.9px;
	color: var(--brown);
	text-transform: uppercase;
}

.site-header a {
	text-decoration: none;
	color: inherit;
	transition: 0.3s;
}

.site-header a:hover {
	color: var(--darker-green);
}

.current-menu-item a {
	color: var(--darker-green);
}

#menu-left,
#menu-right {
	display: flex;
	padding-inline-start: 0;
}

.site-branding {
	width: 335px;
}

#menu-item-8919,
#menu-item-8915 {
	padding-right: 40px;
}
#menu-item-9184 {
	padding-right: 40px;
}
#menu-item-9189  {
	padding-right: 40px;
}
.scroll-down .site-header {
	transform: translate3d(0, -100%, 0);
	box-shadow: none;
}

.scroll-up .site-header {
	transform: none;
}

nav.mobile,
.hamburger {
	display: none;
}

/* Footer
--------------------------------------------- */
.site-footer {
	display: flex;
	padding: 60px 2vw 40px 6vw;
	background: var(--brown);
	color: #fff;
	font-size: 12px;
	line-height: 16px;
}

.footer-logo-wrapper {
	flex: 0 1 30%;
}

.footer-text-wrapper {
	display: flex;
	flex-direction: column;
	flex: 0 1 70%;
}

.footer-widgets {
	display: flex;
	justify-content: space-between;
	flex: 0 1 90%;
}

.footer-copyright {
	flex: 0 1 10%;
	padding-top: 4vw;
}

.site-footer #text-4 {
	flex: 0 1 33%;
}

.site-footer #text-3 {
	flex: 0 0 33%;
}

.site-footer #nav_menu-2 {
	flex: 0 1 33%;
}

.site-footer #text-4,
.site-footer #text-3 {
	margin-right: 24px;
}

ul#menu-footer-menu {
	padding: 0;
}

.site-footer img {
	width: 130px;
	height: 100%;
}

.site-footer p {
	margin: 0;
}

.site-footer h2,
.site-footer li a {
	font-family: "MetricSemibold", "Helvetica Neue", sans-serif;
	color: #fff;
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: .5px;
	margin-bottom: 2px;
	transition: 0.3s;
}

.footer-copyright a {
	text-decoration: underline;
}

.footer-copyright a:hover,
.site-footer li a:hover {
	color: var(--darker-green);
}

.site-footer ul {
	list-style: none;
	margin: 0;
}

.site-footer li {
	margin-bottom: 2px;
}


/* animation
--------------------------------------------- */
.image-fade {
	opacity: 0;
	transform: translateY(5vw);
	will-change: transform, opacity;
}

.image-fade.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition: transform 2s,
		opacity 2s;
}

.text-fade {
	opacity: 0;
	transform: translateY(2vw);
	will-change: transform, opacity;
}

.text-fade.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition: transform 1s, opacity 1s;
	animation-delay: 1s;
}

/* for animations at the top of the page */
.page-top-fade {
	opacity: 0;
	animation: fade-in 0.5s linear 0.5s 1 normal forwards;
	-webkit-animation: fade-in 0.5s linear 0.5s 1 normal forwards;
}

.delay {
	animation-delay: 1s;
}

@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(1vw);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* MOBILE
	 ========================================================================== */

@media only screen and (max-width: 950px) {

	/* Navigation-mobile
	--------------------------------------------- */
	main {
		padding-top: 70px;
	}

	.site-header nav {
		display: none;
	}

	.site-header {
		height: 70px;
		justify-content: center;
	}

	.site-branding {
		width: 153px;
		justify-content: center;
	}

	.site-header nav.mobile {
		display: block;
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0px;
		top: 70px;
		z-index: -1;
		background-color: var(--brown);
		opacity: 0;
		pointer-events: none;
		transition: all .3s ease-in-out;
	}

	.active nav.mobile {
		opacity: 1;
		pointer-events: initial;
		transition: all .3s ease-in-out;
	}

	#masthead .hamburger {
		display: block;
		position: fixed;
		width: 26px;
		right: 40px;
		cursor: pointer;
	}

	#masthead .hamburger span {
		width: 26px;
		height: 2px;
		background-color: #000;
		margin-bottom: 4px;
		display: block;
		transition: all .3s ease-in-out;
	}

	#masthead .hamburger span:last-of-type {
		margin-bottom: 0;
	}

	#masthead .hamburger.clicked span {
		transition: all .3s ease-in-out;
	}

	#masthead .hamburger.clicked span:nth-of-type(1) {
		transform: rotate(45deg);
		margin-bottom: -2px;
	}

	#masthead .hamburger.clicked span:nth-of-type(2) {
		display: none;
	}

	#masthead .hamburger.clicked span:nth-of-type(3) {
		transform: rotate(-45deg);
	}

	.menu-mobile-container {
		padding: 44px 35px;
	}

	ul#menu-mobile {
		margin: 0;
		padding: 0;
	}

	#menu-mobile li {
		margin-bottom: 54px;
	}

	#menu-mobile li a {
		font-size: 42px;
		line-height: 42px;
		letter-spacing: 2px;
		color: #fff;
	}

	#menu-mobile li a:hover {
		color: var(--bright-green);
	}
}


@media only screen and (max-width: 600px) {

	h1,
	.full-width-text h1,
	.split-table h2,
	.three-column-text h2,
	.page-contact-us .full-width-paragraph h2 {
		font-size: 35px;
		line-height: 32px;
	}

	h2 {
		font-size: 25px;
		line-height: 26px;
	}

	h3 {
		font-size: 20px;
	}

	h4 {
		font-size: 15px;
	}

	h5 {
		font-size: 11px;
	}

	p.small {
		font-size: 12px;
		line-height: 15px;
	}

	body {
		font-size: 12px;
		line-height: 15px;
	}

	/* Header-Home-mobile
--------------------------------------------- */
	.main-header .hero-wrapper {
		height: 100vw;
	}

	.main-header .hero-wrapper img {
		width: 160%;
		max-width: 160%;
		margin: 4vw 0 -7px -28vw;
	}

	.main-header .headline-wrapper {
		top: 9vw;
		left: 51vw;
		width: 38vw;
	}

	.main-header .big-stat-wrapper {
		bottom: 7vw;
		right: 10%;
		left: 10%;
	}

	.main-header .big-stat.wrapper h1 {
		font-size: 45px;
		line-height: 45px;
		margin: 0 0 1vw 0;
	}

	.main-header .big-stat.wrapper p {
		font-size: 10px;
	}

	.main-header .big-stat-wrapper .icon {
		position: absolute;
		top: -0.5vw;
		right: 12vw;
		width: 9%;
	}

	.main-header h1,
	.retail-header h1 {
		font-size: 8vw;
		line-height: 7vw;
		margin-bottom: 8px;
	}

	.main-header p,
	.retail-header p,
	.commercial-header p,
	.three-column-text p,
	.stat-text p {
		font-size: 12px;
		line-height: 15px;
	}


	/* Header-Retail-mobile
--------------------------------------------- */

	.retail-header {
		height: 100vw;
	}

	.retail-header .package-wrapper {
		width: 100%;
		top: 0;
		right: 0;
	}

	.retail-header .headline-wrapper {
		width: 41vw;
		left: 52vw;
		top: 63vw;
	}

	img#mobile {
		display: block;
	}

	img#desktop {
		display: none;
	}

	/* Header-Commercial-mobile
--------------------------------------------- */
	.commercial-header {
		padding: 12vw 22vw;
	}

	.commercial-header .header-content-wrapper {
		flex-direction: column;
		align-items: flex-start;
	}

	.commercial-header .headline-wrapper {
		padding: 0 0 3vw;
	}

	.commercial-header .info-wrapper {
		padding: 0;
		margin: 0;
	}

	.commercial-header .info-wrapper p {
		max-width: 370px;
	}

	.commercial-header .paragraph-wrapper {
		margin-bottom: 3.5vw;
	}

	.commercial-header .headline-wrapper h1 {
		letter-spacing: -3px;
	}


	/* Full width bg img-mobile
--------------------------------------------- */
	.full-width-wrapper.inset {
		padding: 0;
	}

	.full-width-wrapper.inset .full-width-text {
		width: 80%;
	}


	/* Full width statistic-mobile
--------------------------------------------- */
	.stats-wrapper {
		padding: 16vw 8vw;
	}

	.stats-wrapper h1 {
		margin-bottom: 4vw;
	}


	/* Full width text-mobile
--------------------------------------------- */
	.full-width-text {
		width: 70%;
	}

	.full-width-text h1 {
		margin-bottom: 0;
	}


	/* Full width paragraph-mobile
--------------------------------------------- */
	.full-width-paragraph {
		width: 63%;
		max-width: 250px;
	}


	/* Split content-Home-mobile
--------------------------------------------- */
	.split-wrapper.not-just-nutrients {
		padding: 10vw 15vw 12vw;
	}

	.split-wrapper.not-just-nutrients .right-side {
		padding-left: 0;
	}

	.split-wrapper.not-just-nutrients .right-side p {
		margin: 0;
	}


	/* Split content-mobile
--------------------------------------------- */
	.split-wrapper {
		flex-direction: column;
	}

	.split-wrapper .right-side {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.split-wrapper h1 {
		font-size: 40px;
		line-height: 36px;
	}

	.split-wrapper .right-side p {
		flex: 0 1 100%;
	}


	/* Split content-Retail-mobile
--------------------------------------------- */
	.split-wrapper.tests {
		padding: 8vw 26vw 8vw 17vw;
	}

	.split-wrapper.tests .left-side {
		order: 2;
		margin-top: 10vw;
	}

	.split-wrapper.tests .right-side p {
		margin-bottom: 0;
		max-width: 200px;
	}

	.split-wrapper.tests p.stat {
		font-size: 18px;
		line-height: 22px;
		margin-top: 10px;
	}

	.split-wrapper.tests p:nth-of-type(2) {
		margin-top: 18px;
	}

	.split-wrapper.tests .emphasized {
		font-size: 20px;
		line-height: 22px;
		letter-spacing: -0.3px;
	}

	.split-wrapper.reuse {
		padding: 10vw 20vw;
	}

	.split-wrapper.reuse .left-side,
	.split-wrapper.reuse .right-side {
		margin: 0;
		padding: 0;
	}

	.split-wrapper.reuse img {
		max-width: 276px;
		margin-top: 7vw;
	}

	.split-wrapper.reuse p {
		margin-bottom: 15px;
	}


	/* Split content-About-mobile
--------------------------------------------- */
	.split-wrapper.future-friendly,
	.split-wrapper.split-wrapper.future-friendly .right-side,
	.split-wrapper.split-wrapper.the-idea,
	.split-wrapper.the-idea .left-side,
	.split-wrapper.split-wrapper.our-secret,
	.split-wrapper.our-secret .right-side,
	.split-wrapper.upcycle,
	.split-wrapper.upcycle .left-side,
	.split-wrapper.one-percent {
		padding: 0;
		margin: 0;
	}

	.page-about h1 {
		margin: 0 0 16px !important;
	}

	.page-about p {
		margin: 0 0 15px;
	}

	.split-wrapper.future-friendly .left-side,
	.split-wrapper.the-idea .right-side {
		padding: 9vw 36px 2vw;
	}

	.split-wrapper.our-secret .left-side,
	.split-wrapper.upcycle .right-side {
		padding: 2vw 36px 12vw;
	}

	.split-wrapper.future-friendly .left-side p,
	.split-wrapper.the-idea .right-side p,
	.split-wrapper.our-secret .left-side p,
	.split-wrapper.upcycle .right-side p,
	.split-wrapper.one-percent .left-side p {
		max-width: 340px;
	}

	.split-wrapper.the-idea .left-side,
	.split-wrapper.upcycle .left-side {
		order: 2;
	}

	.split-wrapper.the-idea img {
		padding: 0 17vw;
	}

	.split-wrapper.one-percent {
		padding: 10vw 36px;
	}

	.split-wrapper.one-percent .left-side {
		padding: 0 0 4vw;
	}

	.split-wrapper.one-percent img {
		max-width: 240px;
	}


	/* Split table-mobile
--------------------------------------------- */
	.split-table,
	.table-wrapper {
		flex-direction: column;
	}

	.split-table {
		padding: 10vw 8vw 6vw;
	}

	.left-table,
	.right-table {
		width: 100%
	}

	.left-table {
		margin-right: 0;
	}

	.right-table {
		margin-left: 0;
	}

	.table-wrapper {
		max-width: 420px;
	}

	.split-table tr {
		margin-bottom: 9px;
		padding-bottom: 8px;
	}

	.split-table h2 {
		padding-bottom: 8vw;
	}

	/* Three column-mobile
--------------------------------------------- */
	.three-column {
		flex-direction: column;
		align-items: flex-start;
		margin: 9vw 8vw 18vw;
	}

	.three-column-illustration {
		margin: 0 53vw 4vw 0;
		padding: 0;
	}

	.three-column-text {
		padding: 0;
		border: none;
	}

	.three-column .stat-text {
		padding: 5vw 40vw 0 0;
		border-top: 1px solid;
	}

	.three-column-text h1 {
		font-size: 80px;
		line-height: 73px;
	}

	.three-column-text h2 {
		margin-bottom: 3vw;
	}

	.three-column-text p {
		margin: 0px 13vw 5vw 0;
		max-width: 350px;
	}

	.three-column .stat-text h1 {
		font-size: 80px;
		line-height: 70px;
		margin: 0;
	}

	/* Full width quote-mobile
--------------------------------------------- */
	.quote {
		flex-wrap: wrap;
		padding: 6vw 6vw 2vw 11vw;
	}

	.quote .quote-open {
		flex: 0 1 100%;
		margin: .7vw 0 3vw;
	}

	.quote .quote-open img {
		width: 30px;
	}

	.quote-text {
		flex: 0 1 60%;
		margin: 0 0 4vw;
		font-size: 18px;
		line-height: 22px;
	}

	.quote-close,
	.quote .quote-close {
		flex: 0 1 33%;
		margin: -10vw 0 0 2vw;
	}


	/* Video quote-mobile
--------------------------------------------- */
	.video-quote p.quote {
		font-size: 18px;
		line-height: 22px;
	}

	.video-quote {
		flex-direction: column;
		padding: 8vw 0 11vw;
	}

	.video-quote .quote-open {
		margin: 0 8vw;
	}

	.video-quote .quote-container {
		margin: 0 8vw;
	}

	.video-quote .eyebrow {
		margin: 2vw 0 4vw;
	}

	.video-quote h5 {
		font-size: 15px;
		line-height: 22px;
	}

	.video-quote .quote {
		margin: 0 10vw 5vw 0;
	}

	.video-quote .video-wrapper {
		padding: 8vw 0 0;
		margin: 0;
	}

	.video-quote .attribution::before {
		transform: scaleY(0.4);
	}

	.video-quote .video-caption {
		margin: 5vw 8vw 0;
	}

	p.video-caption.small {
		max-width: 254px;
	}


	/* Logo carousel-mobile
--------------------------------------------- */
	.logo-wrapper {
		margin: 1vw 7vw 5vw;
	}

	.logo-image {
		max-width: 20vw;
	}

	.page-commercial .logo-wrapper {
		margin-bottom: 10vw;
	}


	/* Follow us-mobile
--------------------------------------------- */
	.follow-wrapper {
		margin: 0;
		padding: 14vw 5vw;
	}

	.follow-wrapper .headline {
		margin: 0 8vw 4vw
	}

	.follow-wrapper h2 {
		font-size: 20px;
	}


	/* CTA-mobile
--------------------------------------------- */
	.cta-wrapper {
		flex-wrap: wrap;
		padding: 9vw 12vw 25vw;
	}

	.cta-wrapper .left,
	.cta-wrapper .right {
		flex: 0 1 50%;
	}

	.cta-wrapper .left {
		text-align: left;
		padding-right: 3vw;
	}

	.cta-wrapper .middle {
		order: 3;
		flex: 0 1 100%;
	}

	.cta-wrapper .right {
		text-align: right;
		padding-left: 3vw;
	}

	.cta-wrapper button {
		padding: 30px 0 40px;
	}

	.cta-wrapper h2 {
		margin-bottom: 0;
	}

	.cta-wrapper p {
		margin: -1px 0 10px;
	}

	.cta-wrapper p a {
		font-size: 5px;
		letter-spacing: -0.5px;
		border-bottom: 1px solid;
	}


	/* FAQ-mobile
--------------------------------------------- */
	.faq-wrapper {
		margin: 0;
		padding: 10vw 36px 10vw;
	}

	.faq-wrapper h1 {
		padding-bottom: 10px;
	}

	.faq-item p.question {
		margin-bottom: 4px;
	}

	.fa-chevron-right:before {
		font-size: 9px;
	}


	/* Contact-mobile
--------------------------------------------- */
	.page-contact-us .full-width-paragraph p {
		padding: 16px 0 20px;
	}

	.page-contact-us .full-width-paragraph h4 {
		padding-bottom: 16px;
	}

	.page-contact-us h4,
	select,
	#send-btn input {
		font-size: 10px;
	}

	.top-form {
		display: block;
	}

	#send-btn input {
		width: 50%;
		padding: 25px;
		margin: 0;
	}

	.split-wrapper.contact .right-side {
		padding: 60px 0 0;
	}

	.split-wrapper.contact .right-side p:first-of-type {
		padding-bottom: 10px;
	}

	.split-wrapper.contact .right-side h4::after {
		margin-top: 0;
	}


	/* Footer-mobile
--------------------------------------------- */
	.site-footer {
		padding: 40px 40px 25px;
		flex-direction: column;
	}

	.site-footer .footer-logo-wrapper {
		padding-bottom: 20px;
	}

	.site-footer img {
		width: 78px;
	}

	.footer-widgets {
		flex-wrap: wrap;
	}

	.site-footer #text-2 {
		flex: 0 1 100%;
		padding-bottom: 25px;
	}

	.site-footer #text-4 {
		flex: 0 1 48%;
		padding-right: 10px;
		margin: 0;
	}

	.site-footer #text-3 {
		flex: 0 1 48%;
		margin: 0;
	}

	.site-footer #nav-menu-2 {
		flex: 0 1 100%;
		margin: 25px 0 0;
	}

	.footer-copyright {
		padding-top: 25px;
	}

}