@charset "UTF-8";
/********************************************************************************************* 

x. Variables

*********************************************************************************************/
/*
font-family: "termina",sans-serif;
*/
/********************************************************************************************* 

x. CSS Reset 

*********************************************************************************************/
* { margin: 0; padding: 0; min-height: 0; outline: none; }

/********************************************************************************************* 

x. Typekit

*********************************************************************************************/
.wf-loading { visibility: hidden; }

.wf-active { visibility: visible; }

/*********************************************************************************************

x. Basic Setup (Body, Fonts, etc.) 

********************************************************************************************/
html, body { font-family: din-condensed, sans-serif; font-style: normal; font-weight: 300; color: #36261f; width: auto; height: auto; font-size: 20px; }

a { color: #648a24; text-decoration: none; }

a:hover { color: #fd9d30; }

a img { border: none; }

.center { text-align: center; }

.clear:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }

h1, .h1 { font-family: din-condensed, sans-serif; font-size: 100px; font-weight: 400; line-height: 1.25em; }

h2, .h2 { font-family: din-condensed, sans-serif; font-size: 80px; font-weight: 400; line-height: 1.25em; }

h3, .h3 { font-family: din-condensed, sans-serif; font-size: 50px; font-weight: 400; line-height: 1.5em; }

h4, .h4 { font-family: din-condensed, sans-serif; font-size: 40px; font-weight: 400; line-height: 1.5em; }

h5, .h5 { font-family: din-condensed, sans-serif; font-size: 30px; font-weight: 400; line-height: 1.75em; }

h6, .h6 { font-family: din-condensed, sans-serif; font-size: 24px; font-weight: 400; line-height: 1.75em; }

.image img { width: 100%; height: auto; display: block; }

.font-size-small { font-size: 12px; }

.font-size-large { font-size: 24px; line-height: 1.75em; }

.left { float: left; }

p { line-height: 1.5em; }

.right { float: right; }

svg { display: block; overflow: hidden; }

.uppercase { text-transform: uppercase; }

.wrapper { margin: 0 auto; position: relative; overflow: hidden; }

.wrapper.large { width: 1200px; }

.wrapper.medium { width: 1050px; }

.wrapper.small { width: 880px; }

/********************************************************************************************* 

x. Margin + Padding

*********************************************************************************************/
h1, h2, h3, h4, h5, h6 { margin-bottom: 30px !important; }

.content ol, .content ul, .icon, p, .wp-caption { margin-bottom: 30px !important; }

.no-margin { margin: 0 !important; }

.no-padding { padding: 0 !important; }

/********************************************************************************************* 

x. Columns & Widths

*********************************************************************************************/
.width-10 { width: 10%; }

.width-15 { width: 15%; }

.width-20 { width: 20%; }

.width-25 { width: 25%; }

.width-30 { width: 30%; }

.width-33 { width: 33.33%; }

.width-35 { width: 35%; }

.width-40 { width: 40%; }

.width-45 { width: 45%; }

.width-50 { width: 50%; }

.width-55 { width: 55%; }

.width-60 { width: 60%; }

.width-65 { width: 65%; }

.width-66 { width: 66.66%; }

.width-70 { width: 70%; }

.width-75 { width: 75%; }

.width-80 { width: 80%; }

.width-85 { width: 85%; }

.width-90 { width: 80%; }

.width-95 { width: 95%; }

.width-100 { width: 100%; }

/********************************************************************************************* 

x. Content

*********************************************************************************************/
.content ol, .content ul { line-height: 1.5em; margin-left: 40px; }

.content > :last-child { margin-bottom: 0; }

/********************************************************************************************* 

x. Header

*********************************************************************************************/
header { position: relative; z-index: 20; overflow: visible; }

/********************************************************************************************* 

x. Header - Hamburger

*********************************************************************************************/
header .hamburger { width: 50px; height: 25px; display: block; position: absolute; top: 50px; left: 80px; z-index: 20; }

header .hamburger:hover .line.first { top: 2px; }

header .hamburger:hover .line.fourth { top: 21px; }

header .hamburger.open .line { background: white; }

header .hamburger.open .line.first, header .hamburger.open .line.fourth { width: 0%; top: 11px; left: 50%; }

header .hamburger.open .line.second { transform: rotate(45deg); }

header .hamburger.open .line.third { transform: rotate(-45deg); }

header .hamburger .line { width: 100%; height: 2px; background: white; display: block; position: absolute; left: 0; }

header .hamburger .line.first { top: 0; }

header .hamburger .line.second, header .hamburger .line.third { top: 11px; }

header .hamburger .line.fourth { top: 23px; }

/********************************************************************************************* 

x. Header - Navigation

*********************************************************************************************/
header .navigation a { color: white; font-family: din-condensed, sans-serif; font-size: 40px; font-weight: 400; line-height: 1em; text-align: center; text-transform: uppercase; display: block; }

header .navigation a:hover { color: #fd9d30; }

header .navigation li { margin: 0 0 20px 0; }

header .navigation li.current-menu-item a { color: #fd9d30; }

header .navigation li:last-of-type { margin: 0; }

header .navigation-wrapper { background: rgba(54, 38, 31, 0.95); padding: 60px 0; transform: translateY(-150%); position: absolute; top: 0; left: 0; right: 0; z-index: 10; }

header .navigation-wrapper.open { transform: translateY(0); }

header .navigation-wrapper .smear { opacity: 0.95; }

/********************************************************************************************* 

x. Main

*********************************************************************************************/
main { overflow: hidden; }

/********************************************************************************************* 

x. Footer

*********************************************************************************************/
footer { color: white; font-size: 15px; text-align: center; background: #36261f; padding: 70px 0; position: relative; }

footer a { color: #fd9d30; }

footer a:hover { color: #648a24; }

footer .column { text-align: left; margin: 0 30px; display: inline-block; zoom: 1; *display: inline; vertical-align: middle; float: none; }

footer .columns { margin: 0 -30px; }

footer .logo { max-width: 135px; display: block; }

footer .navigation { margin: 10px 0; list-style: none; }

footer .navigation.center a svg { fill: #fd9d30; max-width: 50px; }

footer .navigation.center a:hover svg { fill: #648a24; }

footer .navigation.center li { margin: 0 5px; }

footer .navigation.center .icon { margin: 0; }

footer .navigation.right { float: none; }

footer .navigation.right a { text-transform: uppercase; }

footer .navigation.right a.fa { color: white; }

footer .navigation.right a.fa:hover { color: #fd9d30; }

footer .navigation.right li { margin: 0 10px 0 0; padding: 0 10px 0 0; font-size: 25px; }

footer .navigation.right li:last-of-type { border: none; margin: 0; padding: 0; }

footer .navigation li { display: inline-block; zoom: 1; *display: inline; }

footer .smear.top { display: block; display: none; }

footer span.address, footer span.credits { margin: 10px 0; display: block; }

/********************************************************************************************* 

x. Smears

*********************************************************************************************/
.smear { position: absolute; left: 0; right: 0; z-index: 10; display: none; }

.smear.bottom { top: 100%; }

.smear.top { bottom: 100%; }

/********************************************************************************************* 

x. Icon

*********************************************************************************************/
.icon { display: inline-block; zoom: 1; *display: inline; }

.icon svg { width: auto; height: auto; }

p .icon { margin: 0 15px !important; }

ul.dropdown-links { list-style: none; margin-left: 0; min-height: 100px; display: inline-block; }

ul.dropdown-links:hover li { display: block; }

ul.dropdown-links li { display: none; }

ul.dropdown-links li:first-child { display: block; cursor: pointer; text-transform: uppercase; font-size: 15px; }

ul.dropdown-links li:hover, ul.dropdown-links li:hover ~ li { display: block; }

/********************************************************************************************* 

x. Button

*********************************************************************************************/
.button { color: #789920; font-family: din-condensed, sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 0.05em; line-height: 1em; text-transform: uppercase; border: 2px solid #789920; padding: 10px 30px; display: inline-block; zoom: 1; *display: inline; position: relative; overflow: hidden; }

.button:before { content: ""; background: #36261f; transform: translateY(-100%); position: absolute; top: -10px; bottom: -10px; left: -10px; right: -10px; z-index: 10; }

.button:hover { color: white; border-color: #36261f; }

.button:hover:before { transform: translateY(0); }

.button.white { color: white; border-color: white; }

.button.white:hover { color: #789920; border-color: #789920; }

.button span.label { display: block; position: relative; z-index: 20; }

/********************************************************************************************* 

x. Categories

*********************************************************************************************/
.categories li { border-right: 1px solid #36261f; margin: 0 10px 20px 0; padding: 0 10px 0 0; display: inline-block; zoom: 1; *display: inline; }

.categories li a { font-size: 14px; line-height: 1em; display: block; }

.categories li:last-child { border: none; margin: 0 0 20px 0; padding: 0; }

/********************************************************************************************* 

x. Section

*********************************************************************************************/
section { padding: 70px 0; position: relative; }

section.anchor-links + section.certification, section.anchor-links + section.text.white, section.carousel.brown + section.text.brown, section.carousel.white + section.text.white, section.certification + section.anchor-links, section.certification + section.certification, section.grid-of-images + section.text.white, section.list + section.text.white, section.text.brown + section.carousel.brown, section.text.brown + section.text.brown, section.text.white + section.anchor-links, section.text.white + section.carousel.white, section.text.white + section.grid-of-images, section.text.white + section.list, section.text.white + section.text.white { padding-top: 0; }

section:last-of-type, section.extra-padding-bottom { padding-bottom: 140px; }

section.extra-padding-top { padding-top: 140px; }

/********************************************************************************************* 

x. Section - Anchor Links

*********************************************************************************************/
.anchor-links .links { font-size: 0; text-align: center; margin: 0 0 -30px 0; }

.anchor-links .links a { font-family: din-condensed, sans-serif; font-size: 24px; font-weight: 400; line-height: 1em; text-transform: uppercase; display: block; }

.anchor-links .links li { border-right: 1px solid #36261f; margin: 0 20px 30px 0; padding: 0 30px 0 0; display: inline-block; zoom: 1; *display: inline; }

.anchor-links .links li:last-child { border-right: none; margin-right: 0; padding: 0; }

/********************************************************************************************* 

x. Section - Carousel

*********************************************************************************************/
.carousel { position: relative; }

.carousel.brown { color: white; background: #36261f; }

/********************************************************************************************* 

x. Section - Certification

*********************************************************************************************/
.certification table .image img { width: auto; height: auto; max-width: 200px; max-height: 200px; }

.certification table td { vertical-align: middle; }

.certification table td:first-of-type .image { margin: 0 40px 0 0; }

.certification table td:last-of-type .image { margin: 0 0 0 40px; }

.certification .wrapper { border-top: 1px solid #cccccc; padding: 70px 0 0 0; }

/********************************************************************************************* 

x. Section - Grid Of Images

*********************************************************************************************/
.grid-of-images:last-of-type { padding-bottom: 70px2; }

.grid-of-images .grid { font-size: 0; margin: 0 -35px 0; }

.grid-of-images .grid a { display: block; }

.grid-of-images .grid .image { display: inline-block; zoom: 1; *display: inline; vertical-align: top; float: none; }

.grid-of-images .grid .image:hover img { opacity: 0.4; }

.grid-of-images .grid h6 { display: none; font-size: 19px; }

.grid-of-images .grid .inside { padding: 20px; position: relative; }

/********************************************************************************************* 

x. List

*********************************************************************************************/
.list .column:first-of-type .inside { position: relative; }

.list .column:first-of-type .inside:after { content: ""; width: 3px; height: 100%; background: #36261f; position: absolute; top: 0; bottom: 0; right: 0; }

.list .column:last-of-type p { min-height: 60px; position: relative; padding: 0 0 0 90px; }

.list .column:last-of-type p.font-size-large { line-height: 1.25em; }

.list .column:last-of-type .icon { width: 60px; height: 60px; display: block; position: absolute; top: -13px; left: 0; }

.list .column:last-of-type .icon svg { width: 100%; height: 100%; }

.list .columns { margin: 0 -70px; }

.list .inside { padding: 0 70px; }

.list svg { fill: #648a24; }

/********************************************************************************************* 

x. Section - Map

*********************************************************************************************/
#map { width: 100%; height: 800px; }

/********************************************************************************************* 

x. Section - Masthead

*********************************************************************************************/
.masthead { max-height: 100vh; min-height: 740px; background: #36261f; }

.masthead .arrow { text-align: center; display: block; position: absolute; bottom: 40px; left: 0; right: 0; z-index: 10; }

.masthead .arrow svg { display: inline-block; zoom: 1; *display: inline; }

.masthead .background { background-size: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.masthead .background .overlay { background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.masthead .content { color: white; transform: translateY(-50%); position: absolute; top: 50%; left: 0; right: 0; }

.masthead .content h1, .masthead .content h2, .masthead .content h3, .masthead .content h4, .masthead .content h5, .masthead .content h6 { margin-bottom: 0 !important; }

.masthead .content h1 sup, .masthead .content h2 sup, .masthead .content h3 sup, .masthead .content h4 sup, .masthead .content h5 sup, .masthead .content h6 sup { font-size: 35%; position: absolute; top: -.75em; }

@media (min-width: 940px) { .masthead .content h1, .masthead .content h2, .masthead .content h3, .masthead .content h4, .masthead .content h5, .masthead .content h6 { width: 80%; margin: 0 auto; } }

.masthead .gallery-wrapper { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.masthead .gallery-wrapper .bx-wrapper, .masthead .gallery-wrapper .bx-viewport, .masthead .gallery-wrapper .bx-viewport ul, .masthead .gallery-wrapper .bx-viewport ul li { background-size: cover; position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; }

.masthead .gallery-wrapper .overlay { background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.masthead .logo { width: auto; height: 150px; padding: 50px 0 0 0; display: block; transform: translateX(-50%); position: absolute; top: 0; left: 50%; z-index: 10; }

.masthead .logo img { width: auto; height: 100%; }

.masthead .wrapper { transform: translateX(-50%); position: absolute; top: 220px; bottom: 0; left: 50%; z-index: 10; }

/********************************************************************************************* 

x. Section - Pagination

*********************************************************************************************/
.pagination .navigation { font-size: 0; }

.pagination .navigation a { font-family: din-condensed, sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 0.025em; text-transform: uppercase; display: block; }

.pagination .navigation li { border-right: 1px solid #fd9d30; margin: 0 15px 0 0; padding: 0 15px 0 0; display: inline-block; zoom: 1; *display: inline; }

.pagination .navigation li:last-of-type { border: none; margin: 0; padding: 0; }

.pagination .number { color: #fd9d30; font-family: din-condensed, sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 0.025em; text-transform: uppercase; display: block; }

/********************************************************************************************* 

x. Section - Recent Posts

*********************************************************************************************/
.recent-posts .column:first-of-type .inside { position: relative; }

.recent-posts .column:first-of-type .inside:after { content: ""; width: 3px; height: 100%; background: #36261f; position: absolute; top: 0; bottom: 0; right: 0; }

.recent-posts .columns { margin: 0 -70px; }

.recent-posts .inside { padding: 0 70px; }

.recent-posts .post { margin: 0 0 60px 0; }

.recent-posts .post:last-of-type { margin: 0; }

.recent-posts .post h5 { line-height: 1.25em; }

.recent-posts .post h5 a { color: #fd9d30; }

.recent-posts .post .date { color: #789920; }

.recent-posts svg { fill: #648a24; }

/********************************************************************************************* 

x. Section - Posts

*********************************************************************************************/
.posts { color: white; background: #36261f; }

.posts .no-posts { padding: 80px 0; }

.posts .post { border-bottom: 1px solid white; }

.posts .post:last-of-type { border-bottom: none; }

.posts .post .column.first { position: absolute; top: 0; bottom: 0; right: 0; }

.posts .post .column.first .background { background-size: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.posts .post .column.first .background .overlay { background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.posts .post .column.second .content .button { color: white; border-color: white; }

.posts .post .column.second .content .button:before { background: white; }

.posts .post .column.second .content .button:hover { color: #36261f; border-color: white; }

.posts .post .column.second .content h1 a, .posts .post .column.second .content h2 a, .posts .post .column.second .content h3 a, .posts .post .column.second .content h4 a, .posts .post .column.second .content h5 a, .posts .post .column.second .content h6 a { color: #fd9d30; }

.posts .post .column.second .content h1 a:hover, .posts .post .column.second .content h2 a:hover, .posts .post .column.second .content h3 a:hover, .posts .post .column.second .content h4 a:hover, .posts .post .column.second .content h5 a:hover, .posts .post .column.second .content h6 a:hover { color: #648a24; }

.posts .post .column.second .inside { padding: 80px; }

.posts .post .columns { position: relative; }

/********************************************************************************************* 

x. Section - Text

*********************************************************************************************/
.text { position: relative; }

.text.brown { background: #36261f; }

.text.brown .content { color: white; }

.text.brown svg { fill: #fd9d30; }

.text.image .content { color: white; }

.text.image .content h5:last-of-type { margin-bottom: 0 !important; }

.text.image svg { fill: white; }

.text .background { background-position: center center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.text .background .overlay { background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.text .columns { margin: 70px -35px 0 -35px; }

.text .columns .inside { padding: 0 35px; }

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

.text .wrapper { z-index: 10; }

/********************************************************************************************* 

x. Section - Video

*********************************************************************************************/
.video { background: #36261f; }

.video .column.first .content { color: white; }

.video .column.first .content h1, .video .column.first .content h2, .video .column.first .content h3, .video .column.first .content h4, .video .column.first .content h5, .video .column.first .content h6 { color: #fd9d30; }

.video .column.first .inside { padding: 0 80px; }

.video .column.second { position: absolute; top: 0; bottom: 0; right: 0; }

.video .column.second .background { background-size: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.video .column.second .background .overlay { background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

.video .column.second .content { color: white; padding: 0 80px; transform: translateY(-50%); position: absolute; top: 50%; left: 0; right: 0; z-index: 10; }

#video { max-width: 1024px; min-width: 600px; display: none; }

/********************************************************************************************* 

x. WordPress Core

*********************************************************************************************/
.alignnone { margin: 0; }

.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }

.alignright { float: right; margin: 5px 0 20px 20px; }

.alignleft { float: left; margin: 5px 20px 20px 0; }

a img.alignright { float: right; margin: 5px 0 20px 20px; }

a img.alignnone { margin: 0; }

a img.alignleft { float: left; margin: 5px 20px 20px 0; }

a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.wp-caption { background: #fff; max-width: 100%; text-align: center; }

.wp-caption.alignnone { margin: 0; }

.wp-caption.alignleft { margin: 5px 20px 20px 0; }

.wp-caption.alignright { margin: 5px 0 20px 20px; }

.wp-caption img { width: auto; height: auto; max-width: 100%; border: none; margin: 0; padding: 0; display: block; }

.wp-caption p.wp-caption-text { color: white; font-size: 12px; font-style: italic; background: #36261f; margin: 0; padding: 15px; }

.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }

.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; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }

/********************************************************************************************* 

x. HOP Page

*********************************************************************************************/
.hops-overview { display: flex; flex-direction: column; margin-top: 50px; }

@media (min-width: 940px) { .hops-overview { flex-direction: row; justify-content: space-between; } }

.hops-overview-styles, .hops-overview-aromas { padding: 0 10px; text-align: center; width: 100%; }

@media (min-width: 940px) { .hops-overview-styles { padding: 0 40px; max-width: 30%; } }

.hops-overview-styles ul { margin: 20px 0 0; padding: 0; text-align: left; }

.hops-overview-styles ul > li { display:flex; align-items:center; list-style: none; margin: 0; padding: 0; }

.hops-overview-styles ul[data-count] {
	display: flex;
	flex-wrap: wrap;
}
.hops-overview-styles ul[data-count] > li {
	width: 33%;
}

@media (min-width: 940px) {
	.hops-overview-styles ul[data-count="1"] > li,
	.hops-overview-styles ul[data-count="2"] > li,
	.hops-overview-styles ul[data-count="3"] > li {
		width: 100%;
	}
	.hops-overview-styles ul[data-count="4"] > li,
	.hops-overview-styles ul[data-count="5"] > li,
	.hops-overview-styles ul[data-count="6"] > li {
		width: 50%;
	}
}

.hops-overview-aromas { border-top: 1px solid #36261f; margin-top: 40px; padding-top: 40px; }

@media (min-width: 940px) { 
	.hops-overview-aromas { 
		border-top: none; 
		border-left: 1px solid #36261f; 
		margin-top: 0; 
		padding: 0 40px; 
		max-width: 60%; 
	}
}

.hops-overview-aromas ul { 
	column-count: 3; 
	column-gap: 10px;
	margin: 20px 0 0;
	padding: 0;
	text-align: left;
}

@media (min-width: 940px) {
	.hops-overview-aromas ul[data-count="1"],
	.hops-overview-aromas ul[data-count="2"],
	.hops-overview-aromas ul[data-count="3"] {
		text-align: center;
	}
}

.hops-overview-aromas ul > li { list-style: none; margin: 0 0 .5em; padding: 0; white-space: nowrap; }

.hops-overview-aromas ul > li:before { content: '•'; margin-right: .5em; }

.hops-distributor { display: flex; flex-direction: column; margin-top: 50px; margin-bottom: 50px; }

@media (min-width: 940px) { .hops-distributor { flex-direction: row; justify-content: space-between; } }

.hops-distributor-column { margin-top: 40px; text-align: center; width: 100%; }

.hops-distributor-column img { max-width: 100%; }

.hops-distributor-column .button { margin-top: 40px; }

@media (min-width: 736px) { .hops-distributor-column { margin-top: 0; max-width: calc(100%/3 - 40px); } }

.hops-science { margin-bottom: 40px; }

.hops-science--row { border-top: 2px solid #80bc00; border-bottom: 2px solid #80bc00; display: flex; flex-direction: column; margin-top: 40px; }

.hops-science--title { align-self: center; color: #80bc00; flex: 1; text-align: center; }

.hops-science--subrows { align-self: center; width: 100%; }

.hops-science--subrow { display: flex; }

.hops-science--subrow:nth-child(odd) { background-color: #80bc00; }

.hops-science--subcol { font-size: 17px; padding: 10px; text-align: center; width: 100%; }

@media (min-width: 599px) { .hops-science--row { flex-direction: row; } .hops-science--subrows { max-width: 50%; } }