/*
——————————————————————
Global
——————————————————————
*/
html {
	background:#1e2022 url(/Images/bg-texture.png) top center;
	font:18px/1.5 'Roboto Condensed', 'Arial Narrow', sans-serif;
}
body {
	color:#333;
	min-width:320px;
}
body.smoke:after {
	content:'';
	width:100%;
	height:100%;
	min-height:calc(8rem + 903px);
	background:url(/Images/bg-smoke.png) 0 8rem no-repeat;
	background-size:100% auto;
	pointer-events:none;
	position:absolute;
	top:0; left:0;
	z-index:1;
}
#wrapper {
	max-width:1500px;
	min-height:calc(100vh - 11.7em);
	margin:auto;
	position:relative;
	padding:0 1.6em;
}
h1 {
	font:500 4em/1 Teko, 'Arial Narrow', sans-serif;
	text-transform:uppercase;
	text-align:center;
	text-shadow:1px 1px 4px rgba(0,0,0,0.4);
	margin-bottom:0.4em;
}
h1 a.edit {
	font-size:1rem;
	position:relative;
	z-index:1;
}
h1 a.edit:hover {
	color:#f27330;
}
@media print {
	h1 a.edit {
		display:none;
	}
}
h2 {
	font:1.5em/1 Teko, 'Arial Narrow', sans-serif;
	text-transform:uppercase;
	letter-spacing:0.6px;
	margin:1.6em 0 1em 0;
}
h2:first-child {
	margin-top:0;
}
h3 {
	font-weight:bold;
	margin:1em 0 0.5em 0;
}
a {
	text-decoration:none;
	color:inherit;
}
p {
	margin-bottom:1em;
}
strong {
	font-weight:bold;
}
::selection {
	background-color:#ee6e2d;
}

/*
——————————————————————
Header
——————————————————————
*/
#header {
	height:6.5em;
	position:relative;
	z-index:3;
}
#logo {
	position:absolute;
	top:0.75em; left:10%;
	z-index:2;
	width:6.666em;
	height:5em;
	background:url(/Images/logo-oklahoma-joes.png) no-repeat;
	background-size:100%;
}
#logo strong {
	display:none;
}
#nav {
	position:absolute;
	top:1.8em; left:calc(10% + 9em);
}
#nav li.top {
	float:left;
	margin-right:0.8em;
	position:relative;
}
#nav li.top:hover ul {
	display:block;
}
#nav li.top:hover a.top {
	background:rgba(17,20,22,0.6);
	border-bottom:2px solid #f17330;
}
#nav a {
	display:block;
	color:#fff;
}
#nav a.top, #switcher a, #switcher span {
	font:1.5em/1 Teko, sans-serif;
	height:1.5rem;
	padding:0.75rem 1.2rem;
	text-shadow:1px 1px 4px rgba(0,0,0,0.6);
	text-transform:uppercase;
	letter-spacing:0.6px;
}
#nav li ul {
	background:rgba(37,40,42,1);
	display:none;
	position:absolute;
	top:calc(3em + 2px); left:0;
	width:100%;
	padding:0.7em 0;
}
#nav ul a {
	padding:0.6em 1.2em;
	line-height:1.1;
}
#nav ul a:hover {
	color:#f17330;
}
#switcher {
	position:absolute;
	top:calc(1.8em + 0.45rem); right:10%;
}
#switcher li {
	float:left;
}
#switcher li:first-child {
	border-right:1px solid rgba(255,255,255,0.3);
}
#switcher a, #switcher span, #search {
	display:block;
	padding:0.3rem 0.5rem;
	color:#fff;
	transition:opacity 150ms linear;
}
#switcher a {
	opacity:0.4;
}
#switcher a:hover {
	opacity:0.8;
}
#search {
	color:#fff;
	position:absolute;
	top:calc(1.8em + 0.45rem); right:calc(10% + 6.5em);
	padding:0.3em;
}
#search span {
	display:none;
}
#search:after {
	font-family:fa-solid;
	content:'\f002';
}
.icon {
	font-size:1.5em;
	width:1em; 
	height:1em;
	line-height:1em;
	text-align:center;
	padding:0.5em;
	color:#fff;
	background:rgba(0,0,0,0.35);
	position:absolute;
	top:1em; left:1em;
	z-index:3;
	border-radius:3px;
	cursor:pointer;
	display:none;
}
.icon:after {
	font-family:fa-solid;
}
#back-top {
	position:fixed;
	top:auto; left:auto;
	bottom:1em; right:2em;
}
#hamburger:after {
	content:'\f0c9';
}
#close:after {
	display:block;
	content:'';
	width:1.4em;
	height:1.4em;
	background-image:url(/Images/icon-close.svg);
	background-size:100% 100%;
	margin:-0.2em 0 0 -0.2em;
}
#back-top:after {
	content:'\f077';
}

/*
——————————————————————
Search
——————————————————————
*/
.search-bar {
	display:none;
	background:rgba(0,0,0,0.3);
	padding:0.8em;
	position:absolute;
	top:1.5em; right:5%;
	border-radius:7px;
}
.search-active .search-bar {
	display:block;
}
.search-bar input {
	float:left;
}
.search-bar .text {
	border:0;
	border-radius:3px 0 0 3px;
	width:12em;
	height:1.8rem;
	line-height:1.8rem;
	box-sizing:border-box;
	padding:0.2em 0.5em;
	outline:0;
}
.search-bar .button {
	font-family:fa-solid;
	border-radius:0 3px 3px 0;
	font-size:1em;
	height:1.8rem;
	line-height:1.8rem;
	min-width:3.5em;
	padding:0;
}
.search-box {
	width:22em;
	margin:0 auto 2em auto;
}
.search-box input.text {
	float:left;
	height:2.7rem;
	padding:1em 0.8em;
	line-height:1;
	box-sizing:border-box;
	border:0;
	outline:0;
	width:15rem;
}
.search-box input.button {
	float:left;
	height:2.7rem;
	border-radius:0 3px 3px 0;
	min-width:0;
	padding:0;
	width:7rem !important;
}

/*
——————————————————————
Hero Images & Headings
——————————————————————
*/
.hero {
	width:0; height:0;
	padding:20% 50%;
	margin:-6.5em 0 -8em 0;
	position:relative;
	z-index:1;
	background-repeat:no-repeat;
	background-position:center;
	background-size:100%;
	text-align:center;
}
.hero:before {
	background:url(/Images/bg-texture.png) repeat,
		linear-gradient(90deg, rgba(0,0,0,0) 70%, #1e2022 97%),
		linear-gradient(270deg, rgba(0,0,0,0) 70%, #1e2022 97%),
		linear-gradient(180deg, rgba(0,0,0,0) 50%, #1e2022 80%);
	content:'';
	display:block;
	pointer-events:none;
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	z-index:2;
}
.hero-text {
	position:absolute;
	top:35%; left:0;
	width:100%;
	color:#fff;
	z-index:3;
}
.hero-text div {
	margin:auto;
	max-width:800px;
	padding:0 5em;
}

/*
——————————————————————
Buttons
——————————————————————
*/
.button {
	display:inline-block;
	color:#fff;
	font:400 1.2em/2.25 Teko, 'Arial Narrow', sans-serif;
	letter-spacing:0.6px;
	padding:0 1.5em;
	min-width:6em;
	text-transform:uppercase;
	text-align:center;
	background-color:#c55229;
	border:0;
	border-radius:3px;
	outline:0;
	cursor:pointer;
	-webkit-appearance:none;
	transition:background-color 150ms linear;
}
.button:hover {
	background-color:#9e4221;
}
.button-black {
	background-color:#25282a;
}
.button-black:hover {
	background-color:#515355;
}
.button-download:after {
	content:'\f019';
	font:0.8em fa-solid;
	margin-left:0.5em;
}

/*
——————————————————————
Home Page
——————————————————————
*/
.home-hero {
	padding:25% 50%;
	margin-bottom:-4em;
}
.home-hero:before {
	background:url(/Images/bg-texture.png) repeat,
		linear-gradient(90deg, rgba(0,0,0,0) 70%, #1e2022 97%),
		linear-gradient(270deg, rgba(0,0,0,0) 70%, #1e2022 97%),
		linear-gradient(180deg, rgba(0,0,0,0) 70%, #1e2022 97%);
}
.home-hero h1 {
	font-size:4.7em;
	margin-bottom:0.25em;
	line-height:0.8;
}
.home-hero h1 strong {
	font:0.52em Radio;
	text-transform:none;
	color:#d2c295;
	text-align:center;
	position:absolute;
	top:-1.5em; left:0;
	width:100%;
	z-index:1;
}
.home-hero h1:after {
	content:'';
	position:absolute;
	top:-0.45em; left:calc(50% - 4.9em);
	width:9.8em;
	height:1px;
	background-image:linear-gradient(to right, #8795a1 12%, rgba(0,0,0,0) 13%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 87%, #8795a1 88%);
}
#showcase {
	position:relative;
	z-index:1;
	margin:0 -0.8em 1em -0.8em;
}
#showcase li {
	float:left;
	text-align:left;
	width:0; height:0;
	box-sizing:border-box;
	padding:14.0625% 25%;
	position:relative;
}
#showcase a {
	position:absolute;
	top:0.8em; left:0.8em;
	width:calc(100% - 1.6em);
	height:calc(100% - 1.6em);
	color:#fff;
	background:#1e2022;
}
#showcase img {
	display:block;
	width:100%;
	height:100%;
	opacity:0.6;
	transition:opacity 150ms linear;
}
#showcase a:hover img {
	opacity:0.9;
}
#showcase h2 {
	text-align:center;
	text-shadow:1px 1px 4px rgba(0,0,0,0.4);
	width:90%;
	padding:0 5%;
	position:absolute;
	top:calc(50% - 0.8em);
	left:0;
	font-size:2.4em;
	line-height:0.8;
	z-index:1;
}
#showcase h2 strong {
	display:block;
	font-weight:400;
	margin-bottom:0.3em;
}
#showcase h2 span {
	display:block;
	font-size:0.6em;
}
#showcase h2 span:after {
	content:'»';
	margin-left:0.3em;
}
#about {
	background:#f4f1ed url(/Images/bg-home-about.jpg);
	background-size:cover;
	text-align:center;
	padding:3.6em;
}
#about h2 {
	font-size:2.8em;
	margin-bottom:0.3em;
}
#about div {
	max-width:900px;
	margin:auto;
}

/*
——————————————————————
Content
——————————————————————
*/
#content {
	position:relative;
	z-index:2;
	min-height:8em;
}
#content p a,
#content .bullet a,
#content .markdown a {
	border-bottom:2px solid #f17330;
}
.box {
	padding:2.4em;
	background:#e8e7e3;
}

/*
——————————————————————
Categories
——————————————————————
*/
#categories {
	margin:0 auto 4em auto;
	text-align:center;
}
#categories li {
	display:inline-block;
	width:0; height:0;
	box-sizing:border-box;
	padding:16%;
	position:relative;
	margin-bottom:2em;
}
#categories a {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	box-sizing:border-box;
	color:#fff;
}
#categories img {
	position:absolute;
	top:0; left:13%;
	width:74%;
	height:74%;
}
#categories .text {
	position:absolute;
	text-align:center;
	width:100%;
	box-sizing:border-box;
	top:76%; left:0;
	padding:0 3em;
}
#categories .name {
	display:block;
	font:1.5em/1 Teko;
	text-transform:uppercase;
	margin-bottom:0.3em;
	text-shadow:1px 1px 4px rgba(0,0,0,0.6);
    letter-spacing:0.6px;
    transition:color 100ms linear;
}
#categories .name:after {
	content:'»';
	margin-left:0.3em;
}
#categories a:hover .name {
	color:#f17330;
}

/*
——————————————————————
Products
——————————————————————
*/
#products {
	background:#e8e7e3;
}
#products li {
	float:left;
	width:0; height:0;
	box-sizing:border-box;
	padding:16.666%;
	position:relative;
}
#products a {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	box-sizing:border-box;
	border-top:1px solid #fff;
	border-left:1px solid #fff;
	border-bottom:1px solid #cac7bb;
	border-right:1px solid #cac7bb;
	transition:background-color 150ms linear;
}
#products a.coming:before,
#products a.new:before {
	content:'Coming Soon';
	position:absolute;
	top:0; left:50%;
	text-align:center;
	text-transform:uppercase;
	line-height:1;
	letter-spacing:0.04em;
	font-weight:bold;
	padding:0.55em 1.2em 0.3em 1.2em;
	color:#fff;
	background:#e14419;
	transform:translateX(-50%);
	z-index:2;
	white-space:nowrap;
}
#products a.new:before {
	content:'New';
}
#products a:hover {
	background-color:#dcd9d5;
}
#products a:active {
	background-color:#d1ceca;
}
#products img {
	position:absolute;
	top:4%; left:15%;
	width:70%;
	height:70%;
}
#products .text {
	position:absolute;
	text-align:center;
	width:100%;
	top:78%; left:0;
	font:1.5em/1 Teko;
	text-transform:uppercase;
    letter-spacing:0.6px;
}
#products .name {
	display:block;
	padding:0 1em;
    transition: color 100ms linear;
}
#products .price {
	display:block;
	font-size:1.5em;
	font-weight:500;
}
#products .price small {
	font-size:1.5rem;
}
#related .intro {
	max-width:80%;
	margin:0 auto 1em auto;
}
#related #products {
	background:#25282a;
	border:0;
	margin-bottom:1.6em;
}
#related #products a {
	background:none;
	border:0;
}
#related #products a:hover .name {
	color:#f17330;
}
#related a.button {
	margin:0 0.3em;
}

/*
——————————————————————
Product Page
——————————————————————
*/
#product {
	margin-top:4em;
	position:relative;
	z-index:2;
}
#product-top {
	margin-bottom:2em;
}
#product-left {
	float:left;
	width:0;
	height:0;
	padding:23% 28.333%;
	position:relative;
}
#product h1 {
	position:absolute;
	top:0; left:0;
	width:100%;
	color:#fff;
	font-size:3.6em;
	line-height:0.9;
}
#product h1.the:before {
	content:'The';
	text-transform:lowercase;
	font:0.55em Radio;
	color:#d2c295;
	text-align:center;
	position:absolute;
	top:-1.4em; left:0;
	width:100%;
	z-index:1;
}
#product h1.the:after {
	content:'';
	position:absolute;
	top:-0.4em; left:35%;
	width:30%;
	height:1px;
	background-image:linear-gradient(to right, #8795a1 38%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 60%, #8795a1 62%);
}
#product h2 {
	font-size:2.6em;
	letter-spacing:0;
}
#product-left .slider {
	width:66%;
	position:absolute;
	top:10%; left:17%;
}
#product-left .slider img {
	width:100%;
}
#product-left .draggable img {
	cursor:grab;
}
.slider div {
	outline:0;
}
#product .slick-arrow {
	position:absolute;
	bottom:0;
	z-index:3;
	border:0;
	outline:0;
	width:0;
	height:0;
	padding:0;
	font-size:0;
	line-height:0;
	color:transparent;
	background:transparent;
	cursor:pointer;
}
#product .slick-arrow:before {
	position:absolute;
	bottom:0;
	width:2.5rem;
	height:2.5rem;
	font:2.5rem/1 fa-solid;
	color:#fff;
	opacity:0.3;
	text-align:center;
	transition:opacity 150ms linear;
}
#product .slick-arrow:hover:before {
	opacity:0.8;
}
#product .slick-prev {
	left:-3rem;
}
#product .slick-prev:before {
	content:'\f053';
	left:0;
}
#product .slick-next {
	right:-3rem;
}
#product .slick-next:before {
	content:'\f054';
	right:0;
}
#product .slick-dots {
	text-align:center;
	margin-top:1rem;
}
#product .slick-dots li {
	display:inline-block;
	width:5em;
	height:0.5em;
	border-top:4px solid #fff;
	margin:0 3px;
	cursor:pointer;
}
#product .slick-dots li.slick-active {
	border-color:#c55229;
}
#product .slick-dots button {
	display:none;
}
#product-right {
	float:right;
	background:#e8e7e3;
	padding:2.2em 1.6em 1.6em 1.6em;
	box-sizing:border-box;
	width:40%;
}
#product-right h2 {
	text-align:center;
	font-size:3em;
	font-weight:500;
	margin-bottom:0.5em;
}
#product-right h2 small {
	font-size:1.8rem;
}
#product-right p.buttons {
	text-align:center;
	margin:-1.5em 0 1.5em 0;
}
#product-right p.buttons .add-review {
	text-decoration:underline;
}
#product-right p.buttons .button {
	margin:1em 0.2em 0 0.2em;
}
#product-right p:last-child {
	margin-bottom:0;
}
.coming #product-right,
.new #product-right {
	position:relative;
	padding-top:4em;
}
.coming #product-right:before,
.new #product-right:before {
	content:'Coming Soon';
	position:absolute;
	top:0; left:50%;
	text-align:center;
	text-transform:uppercase;
	line-height:1;
	letter-spacing:0.04em;
	font-weight:bold;
	padding:0.55em 1.2em 0.3em 1.2em;
	color:#fff;
	background:#e14419;
	transform:translateX(-50%);
	z-index:2;
	white-space:nowrap;
}
.new #product-right:before {
	content:'New';
}

#buy-online-list {
	display:none;
	margin:1.5em 0 0.7em 0;
	text-align:center;
}
#buy-online-list li {
	display:inline-block;
	margin:0.1em 0.2em;
}
#buy-online-list img {
	display:block;
	width:5em;
	height:2.5em;
	box-shadow:0 0 9px #ddd;
	border-radius:3px;
}
#buy-online-list a:hover img {
	opacity:.93;
}
.gallery-container {
	width:0;
	height:0;
	padding:20% 50%;
	position:relative;
}
.gallery-container div {
	position:absolute;
	background-size:cover;
}
.gallery-container .gallery1 {
	top:0; left:0;
	width:79%;
	height:100%;
	background-position:center;
}
.gallery-container .video-link {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}
.gallery-container .video-link:after {
	content:'\f04b';
	position:absolute;
	width:1em;
	height:1em;
	top:calc(50% - 0.5em);
	left:calc(50% - 0.5em);
	font-family:fa-solid;
	color:#fff;
	opacity:0.7;
	font-size:6em;
	line-height:1;
	text-align:center;
	text-shadow:0 0 20px rgba(0,0,0,0.3);
	transition:opacity 150ms linear;
}
.gallery-container .video-link:hover:after {
	opacity:0.9;
}
.gallery-container .gallery2 {
	top:0; right:0;
	width:21%;
	height:60%;
	background-position:top;
}
.gallery-container .gallery3 {
	bottom:0; right:0;
	width:21%;
	height:40%;
	background-position:top;
}
.features-container {
	width:0;
	height:0;
	padding:28.333% 50%;
	position:relative;
	color:#fff;
	text-align:center;
	background:#1e2022;
}
.features-container h2 {
	position:absolute;
	top:1.2em; left:0;
	width:100%;
	z-index:3;
}
.features-container .slider {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}
.features-container div,
.features-container img {
	width:100%;
	height:100%;
}
#product .features-container .slick-dots {
	position:relative;
	z-index:2;
	margin-top:-3.5em;
}
#product .features-container .slick-arrow:before {
	bottom:1.8rem;
}
#product .features-container .slick-prev {
	left:30%;
}
#product .features-container .slick-next {
	right:30%;
}
.features-container p {
	position:absolute;
	bottom:5em; left:0;
	width:100%;
}
.features-container strong {
	display:block;
	font:1.8em/1 Teko, sans-serif;
	letter-spacing:0.6px;
	text-transform:uppercase;
	text-shadow:1px 1px 4px rgba(0,0,0,0.6);
}
.dimensions-wrapper {
	background:#e7e6e2;
	padding:2.4em 2.4em 3.6em 2.4em;
	position:relative;
}
.dimensions {
	float:left;
	width:54%;
}
.dimensions div {
	display:block;
	position:relative;
	width:0;
	height:0;
	padding:33.333% 50%;
}
.dimensions img {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}
.cooking {
	float:right;
	width:40%;
}
.cooking-tabs {
	margin-bottom:2em;
	border-bottom:1px solid #cac7bb;
}
.cooking-tabs li {
	float:left;
	width:28%;
	margin-right:8%;
	cursor:pointer;
	user-select:none;
}
.cooking-tabs li:last-child {
	margin:0;
}
.cooking-tabs strong {
	float:left;
	border-bottom:4px solid transparent;
	padding-bottom:0.2em;
	margin-bottom:-3px;
	transition:border-color 150ms linear;
	font:1.4em/1 Teko;
	text-transform:uppercase;
}
.cooking-tabs li:hover strong {
	border-bottom-color:#cac7bb;
}
.cooking-tabs li.active strong {
	border-bottom-color:#c55229;
}
.cooking-tab-content img {
	display:block;
	width:100%;
	margin-bottom:1.5em;
}
.cooking-tab-content li {
	display:none;
}
.cooking-tab-content li.active {
	display:block;
}
.cooking-tab-content p {
	padding-left:9.5%;
	margin-bottom:0.7em;
}
.divider {
	position:absolute;
	top:-1.5em; left:0;
	width:100%;
	height:1.5em;
	overflow:hidden;
}
.divider:before {
	content:'';
	position:absolute;
	top:0; left:50%;
	transform:translateX(-50%);
	border-right:750px solid #fff;
	border-top:1.5em solid transparent;
	border-left:750px solid #fff;
}
.divider-tinted:before {
	border-right-color:#e7e6e2;
	border-left-color:#e7e6e2;
}
#product-detail {
	background:#fff;
	padding:2.4em;
	position:relative;
}
.features {
	float:left;
	width:48%;
}
.specifications {
	float:right;
	width:48%;
}
.specifications table {
	width:100%;
	font-size:0.94em;
	margin-top:1.5em;
}
.specifications td {
	padding:0.3em 0.5em;
}
.specifications td:first-child {
	font-weight:bold;
}
.specifications tr:nth-child(odd) {
	background-color:#f6f6f6;
}

/*
——————————————————————
Reviews
——————————————————————
*/
#reviews {
	padding:2.4em;
	background:#fff;
	border-top:1px solid #e0ded7;
}
#reviews ul {
	margin-bottom:1.6em;
}
#reviews li.top {
	margin-bottom:2em;
}
#reviews-list h3 {
	font-size:1.5em;
	line-height:1.1;
	margin-bottom:0.3em;
}
.review-text {
	float:left;
	width:70%;
	font-size:0.94em;
	line-height:1.3;
}
#reviews-list p,
.review-text dl {
	margin-bottom:0.8em;
}
.review-text dt {
	float:left;
	clear:left;
	font-weight:bold;
	margin-right:0.3em;
}
.review-text dd {
	float:left;
}
.review-text p.recommend:before {
	content:'\f058';
	font-family:fa-solid;
	margin-right:0.3em;
	color:#f17330;
}
.review-ratings {
	float:right;
	width:calc(30% - 5em);
	padding-right:2em;
}
.review-ratings dt {
	font-size:0.94em;
}
.review-ratings dd {
	height:8px;
	background:#eee;
	margin:0.1em 0 0.9em 0;
}
.review-ratings span {
	display:block;
	height:8px;
	background:linear-gradient(#f17330, #c55229);
}

/*
——————————————————————
Where To Buy Overlay
——————————————————————
*/
#where-to-buy {
	display:none;
	background:#fff;
	width:80%;
	height:80%;
	max-height:800px;
	min-width:600px;
}
#where-to-buy h2 {
	font-weight:normal;
}
#where-to-buy a {
	font-weight:normal;
	outline:none;
}
#retailers-text {
	float:left;
	width:39%;
}
#retailers-text h4 {
	line-height:1.4;
	font-weight:normal;
	font-family:inherit;
	cursor:pointer;
	margin:0 0 0.3em 0;
}
#retailers-text ul {
	display:none;
	margin:0 0 0.8em 8px;
}
#retailers-text li {
	padding-top:0.4em;
	background:url(/Images/mapicon-retailer.png) 0 0.4em no-repeat;
	background-size:13px 20px;
	padding-left:18px;
	cursor:pointer;
}
#retailers-text address {
	display:none;
	padding-bottom:0.2em;
	font-size:14px;
}
#retailers-text li strong {
	display:block;
}
#retailers-text p.brochure {
	margin-top:1.5em;
	padding-top:10px;
	border-top:1px solid #ddd;
}
#retailers-text img.download {
	width:180px;
	height:115px;
}
#retailers-map {
	float:right;
	width:57%;
	height:100%;
}
#map {
	width:100%;
	height:100%;
}
#map.map-large {
	min-height:650px;
}
#map address a {
	border:0;
}

/*
——————————————————————
Toolbar
——————————————————————
*/
#toolbar {
	background:#e8e7e3;
	border-bottom:1px solid #cac7bb;
	padding:1.2em 1.6em;
}
.filter {
	text-align:center;
	font-size:0.9em;
}
.filter li {
	display:inline-block;
}
.filter a {
	display:block;
	text-align:center;
	padding:0 1em;
}
.filter svg {
	display:block;
	width:3em;
	height:3em;
	margin:0 auto 0.2em auto;
}
.filter a:hover svg {
	opacity:0.7;
}
.filter li.active svg {
	fill:#f17330;
}
.filter li.active a {
	color:#f17330;
}

/*
——————————————————————
Lists
——————————————————————
*/
ul.bullet {
	padding-left:1.2em;
	margin-bottom:1.3em;
}
ul.bullet li {
	list-style-type:none;
	margin-bottom:0.5em;
}
ul.bullet li:before {
	display:inline-block;
	font-family:Arial,sans-serif;
    content: "●";
    color:#f17330;
    font-size:0.8em;
	width:1.5em;
	margin-left:-1.5em;
	position:relative;
	top:-0.15em;
}
ul.bullet ul li:before {
    content: "–";
	margin-left:-1.2em;
}
ol, ul.bullet ul {
	padding-left:18px;
	margin-bottom:1em;
}
ol li,
ul.bullet ol li {
	list-style:decimal;
	background:none;
}
ol ul.bullet li, ul.bullet ul li {
	padding-left:0;
	margin:0;
}
ol {
	counter-reset:li;
	padding-left:0;
}
ol li {
	counter-increment:li;
	list-style:none;
	padding-left:1.7em;
	position:relative;	
	margin-bottom:0.7em;
}
ol li:before {
	content:counter(li)'.';
	font-weight:bold;
	color:#f17330;
	width:1.7em;
	position:absolute;
	top:0; left:0;
}

/*
——————————————————————
The Craft Page
——————————————————————
*/
.craft-landing {
	background:#25282a;
	padding:1.6em 1.6em 0 1.6em;
	display:table;
	width:calc(100% - 3.2em);
	height:27em;
}
.craft-landing .text {
	width:42%;
	display:table-cell;
	background:#e8e7e3;
	padding:4em 1.6em 1.6em 1.6em;
	text-align:center;
}
.craft-landing svg {
	width:5em;
	height:5em;
}
.craft-landing h2 {
	font-size:2.4em;
	margin:0.3em 0 0.3em 0;
}
.craft-landing p br {
	display:none;
}
.craft-landing .video {
	width:58%;
	display:table-cell;
	vertical-align:top;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;
}
.craft-landing .video a {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}
.craft-landing .video a:after {
	content:'\f04b';
	position:absolute;
	width:1em;
	height:1em;
	top:calc(50% - 0.5em);
	left:calc(50% - 0.5em);
	font-family:fa-solid;
	color:#fff;
	opacity:0.7;
	font-size:6em;
	line-height:1;
	text-align:center;
	text-shadow:0 0 20px rgba(0,0,0,0.3);
	transition:opacity 150ms linear;
}
.craft-landing .video a:hover:after {
	opacity:0.9;
}
.craft #related {
	margin-top:0;
}

/*
——————————————————————
Recipes
——————————————————————
*/
#recipes {
	padding:0.8em;
	background:#e8e7e3;
	border-top:1px solid #fff;
}
#recipes li {
	float:left;
	text-align:left;
	width:0; height:0;
	box-sizing:border-box;
	padding:16.666%;
	position:relative;
}
#recipes a {
	position:absolute;
	top:0.8em; left:0.8em;
	width:calc(100% - 1.6em);
	height:calc(100% - 1.6em);
	background:#25282a;
}
#recipes a:before,
#recipes img {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}
#recipes a:before {
	content:'';
	background:linear-gradient(rgba(37,40,42,0) 50%, #25282a 100%);
	z-index:1;
}
#recipes .featured {
	position:absolute;
	top:0; left:50%;
	text-align:center;
	width:8em;
	height:1.2em;
	line-height:1.2em;
	padding-top:0.5em;
	color:#fff;
	background:#c55229;
	transform:translateX(-50%);
	font-size:1em;
	z-index:2;
	text-shadow:none;
}
#recipes .featured:after {
	content:'';
	position:absolute;
	top:1.7em;
	left:50%;
	transform:translateX(-50%);
	border-left:4em solid transparent;
	border-right:4em solid transparent;
	border-top:10px solid #c55229;
}
#recipes img {
	transition:opacity 150ms linear;
}
#recipes a:hover img {
	opacity:0.5;
}
#recipes .text {
	position:absolute;
	bottom:0.8em; left:0.8em;
	width:calc(100% - 1.6em);
	box-sizing:border-box;
	padding-left:4.6em;
	color:#fff;
	z-index:2;
}
#recipes svg {
	position:absolute;
	bottom:0; left:0;
	width:3em;
	height:3em;
	fill:#fff;
	border-right:1px solid #fff;
	padding-right:0.8em;
}
#recipes p {
	display:table;
	height:3em;
	margin:0;
}
#recipes span {
	display:table-cell;
	vertical-align:middle;
	font:1.4em/1 Teko, sans-serif;
	letter-spacing:0.6px;
	text-transform:uppercase;
	text-shadow:1px 1px 4px rgba(0,0,0,0.6);
}
#related {
	margin-top:3em;
	text-align:center;
	color:#fff;
}
#related #recipes {
	background:#25282a;
	border:0;
	margin-bottom:1.6em;
}
#related h2 {
	font-size:2.8em;
	margin-bottom:0.3em;
}
#recipe {
	background:#e8e7e3;
	padding:1.6em;
}
.condensed-hero {
	margin-bottom:-12em;
}
#recipe-header {
	display:table;
	width:100%;
	height:25em
}
#recipe-header .image {
	display:table-cell;
	width:60%;
	vertical-align:top;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;
}
#recipe-header .video-link {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}
#recipe-header .video-link:after {
	content:'\f04b';
	position:absolute;
	width:1em;
	height:1em;
	top:calc(50% - 0.5em);
	left:calc(50% - 0.5em);
	font-family:fa-solid;
	color:#fff;
	opacity:0.7;
	font-size:6em;
	line-height:1;
	text-align:center;
	text-shadow:0 0 20px rgba(0,0,0,0.3);
	transition:opacity 150ms linear;
}
#recipe-header .video-link:hover:after {
	opacity:0.9;
}
#recipe-header .text {
	display:table-cell;
	width:40%;
	padding:1.6em;
	vertical-align:top;
	background:#fff;
	box-sizing:border-box;
}
#recipe-header .text p:last-child {
	margin-bottom:0;
}
#recipe-header .metrics {
	margin-bottom:1.5em;
	font-size:0.9em;
}
#recipe-header .metrics svg {
	width:2.6em;
	height:2.6em;
	float:left;
	margin:0.2em 1em 0 0;
}
#recipe-header dl {
	float:left;
	margin-right:1.5em;
	padding-left:0.5em;
	border-left:1px solid #cac7bb;
}
#recipe-header dt {
	font-weight:bold;
}
#recipe-bar {
	padding:0.6em 1em;
	color:#fff;
	background:#25282a url(/Images/bg-texture.png) center repeat;
}
#recipe-bar a {
	color:#f17330;
}
#recipe-bar .print {
	float:right;
	color:#fff;
}
#recipe-bar .print:before {
	content:'\f15c';
	font:1.1em/1rem fa-solid;
	margin-right:0.4em;
	transition:color 150ms linear;
}
#recipe-bar .print:hover:before {
	color:#f17330;
}
#social-share {
	float:right;
	margin-right:1.5em;
}
#social-share li {
	float:left;
}
#social-share span {
	display:none;
}
#social-share a {
	padding:0 0.4em;
	color:#fff;
}
#social-share a:hover {
	color:#f17330;
}
#social-share a:before {
	font:1.1em/1rem fa-brands;
	margin:0 0.2em;
	transition:color 150ms linear;
}
#social-share a.facebook:before  { content:'\f39e' }
#social-share a.twitter:before   { content:'\f099' }
#social-share a.pinterest:before { content:'\f0d2' }

#recipe-text {
	padding:4em;
}
#recipe-leftcol {
	float:left;
	width:30%;
}
#recipe-leftcol p {
	line-height:2em;
}
#recipe-leftcol p.caption {
	line-height:1.3em;
	font-size:0.93em;
	margin-top:0.6em;
}
#recipe-images img {
	display:block;
	width:100%;
}
#recipe-images li {
	margin-bottom:2em;
}
#recipe-rightcol {
	float:right;
	width:65%;
}
#recipe-rightcol:first-child {
	float:none;
	width:auto;
}
#recipe-rightcol ol {
	border-top:1px solid #cac7bb;
	padding-top:0.7em;
}
#recipe-rightcol ol li {
	border-bottom:1px solid #cac7bb;
	padding-bottom:0.7em;
}
#recipe-rightcol em {
	font-weight:bold;
	color:#fff;
	background:linear-gradient(#f17330, #c55229);
	display:inline-block;
	margin-top:0.7em;
	padding:0.2em 0.3em;
	border-radius:4px;
	line-height:1;
}
#recipe-rightcol #recipe-images {
	margin-top:2.4em;
	width:calc(100% + 1em);
	margin-right:-1em;
}
#recipe-rightcol #recipe-images li {
	float:left;
	width:calc(33.33% - 1em);
	margin:0 1em 1em 0;
}

/*
——————————————————————
Tabs
——————————————————————
*/
#tabs {
	width:calc(100% + 4.8em);
	height:3em;
	display:table;
	text-align:center;
	line-height:3em;
	font-weight:bold;
	position:relative;
	z-index:1;
	margin:-2.4em -2.4em 3em -2.4em;
	overflow:hidden;
	background:#d1ceca;
}
#tabs li {
	display:table-cell;
	padding:0.5em 1em;
	cursor:pointer;
	font:1.5em/1.5 Teko;
	text-transform:uppercase;
	user-select:none;
	transition:color 150ms linear, background-color 150ms linear;
}
#tabs li.active {
	color:#f17330;
	background:#e8e7e3;
	box-shadow:0 0 20px rgba(0,0,0,0.07);
}

/*
——————————————————————
FAQs
——————————————————————
*/
.faqs h2 {
	font-size:2.6em;
	text-align:center;
	letter-spacing:0;
	margin:0 0 0.5em 0;
}
#questions {
	border-bottom:1px solid #cac7bb;
	margin:0 auto 3em auto;
	max-width:1200px;
}
#questions li.top {
	border-top:1px solid #cac7bb;
}
.faqs .question {
	font-weight:bold;
	cursor:pointer;
	margin:0;
	user-select:none;
	padding:0.5em 2em 0.5em 0;
	position:relative;
	transition:color 150ms linear;
}
.faqs .question:after {
	content:'\f067';
	font-family:fa-solid;
	font-weight:normal;
	position:absolute;
	top:0; right:0;
	padding:0.5em;
}
.faqs .question:hover {
	color:#f17330;
}
.faqs .question-active:after {
	content:'\f068';
	color:#f17330;
}
.faqs .answer {
	display:none;
	background:#fff;
	padding:1em;
	border-radius:4px;
	margin-bottom:1em;
}
.faqs .answer img {
	display:block;
	width:100%;
	max-width:600px;
}
.faqs .answer-active {
	display:block;
}
.faqs .answer p:last-child {
	margin:0;
}
.faqs .answer iframe {
	display:block;
	width:400px;
	height:224px;
	margin-bottom:4px;
}


/*
——————————————————————
Videos
——————————————————————
*/
#videos {
	width:102%;
	margin:2.4em -2% -2em 0;
}
#videos li {
	float:left;
	width:31.33%;
	margin:0 2% 2em 0;
}
#videos a {
	display:block;
	padding:32% 50%;
	position:relative;
	color:inherit;
}
#videos .image-wrapper {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:87.5%;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
#videos .image-wrapper:after {
    content:'';
    background:#f17330 url(/Images/icon-play.png) center no-repeat;
    background-size:1.555em 1.777em;
    position:absolute;
    bottom:1em; left:1em;
    width:4em;
    height:3em;
    border-radius:3px;
    opacity:0.8;
    transition:opacity 100ms linear;
}
#videos a:hover .image-wrapper:after {
    opacity:1;
}
#videos span.title {
	position:absolute;
	top:87.5%; left:0;
	width:100%;
	text-align:center;
	padding-top:0.3em;
}

/*
——————————————————————
Our Story
——————————————————————
*/
.story-section {
	display:table;
	background:#e8e7e3;
}
.story-section:last-child {
	background:#f4f1ed url(/Images/bg-home-about.jpg);
	background-size:cover;
}
.tinted {
	background:#dcd9d5;
}
.story-text {
	display:table-cell;
	vertical-align:middle;
	padding:4em;
}
.story-text p:last-child {
	margin:0;
}
.story-image {
	display:table-cell;
	vertical-align:top;
	padding:1.6em;
	width:50%;
}
.story-image img {
	display:block;
	width:100%;
}
.story-quote {
	color:#fff;
	background:rgba(255,255,255,0.07);
	padding:8.5em 3em 3.5em 3em;
	text-align:center;
	position:relative;
}
.quote-red {
	background:#7b3a37 url(/Images/bg-subscribe.jpg) center no-repeat;
	background-size:cover;
}
.story-quote q {
	font:2.6em/1 Teko, 'Arial Narrow', sans-serif;
	text-transform:uppercase;
	display:block;
	margin:0 auto 0.5em auto;
	max-width:800px;
}
.story-quote:before {
	content:'\f10d';
	font-family:fa-solid;
	position:absolute;
	top:2em; left:calc(50% - 1.25em);
	width:2.5em;
	height:2.5em;
	border-radius:50%;
	text-align:center;
	background:#7b2927;
	font-size:1.5em;
	line-height:2.5em;
}
.quote-red:before {
	background:#25282a;
}
.story-quote cite:before {
	content:'— ';
}

/*
——————————————————————
Downloads
——————————————————————
*/
.document-list {
	max-width:25em;
}
.document-list ul {
	border-top:1px solid #cac7bb;
}
.document-list a {
	display:block;
	padding:0.2em 0;
	border-bottom:1px solid #cac7bb;
}
.document-list a:before {
	content:'\f1c1';
	font-family:fa-solid;
	color:#f17330;
	margin-right:0.5em;
}
.document-list a:hover {
	color:#f17330;
}

/*
——————————————————————
Contact Page
——————————————————————
*/
#contact-text {
	float:left;
	width:46%;
}
#contact-form {
	float:right;
	width:46%;
}

/*
——————————————————————
Forms
——————————————————————
*/
.signin {
	margin:auto;
	max-width:850px;
}
.form {
	max-width:33em;
	margin:auto;
}
.form-centred {
	max-width:20em;
	text-align:center;
}
h2.form-heading {
	font-size:2.6em;
	text-align:center;
	border-bottom:2px solid #f17330;
	padding-bottom:0.2em;
	margin-bottom:0.7em;
}
.form p {
	margin-bottom:0.8em;
}
.form p:last-child {
	margin-bottom:0;
}
.form label {
	display:block;
}
.form input.text,
.form textarea,
.form select {
	box-sizing:border-box;
	border-radius:3px;
	border:0;
	outline:none;
	background:#d7d4d0;
	padding:0.5em;
	width:100%;
}
.form textarea {
	height:8em;
}
::-webkit-input-placeholder {
	xcolor:#bbb;
}
.form input.text:focus,
.form textarea:focus {
	border-color:#f17330;
}
.form .recaptcha {
	margin:22px 0;
}
.form input.button {
	margin-top:0.3em;
	min-width:7em;
}
.validation-container {
	color:#DF280A;
	margin-bottom:25px;
}

/*
——————————————————————
Subscribe
——————————————————————
*/
.subscribe {
	background:#7b3a37 url(/Images/bg-subscribe.jpg) center no-repeat;
	background-size:cover;
	margin:2.4em 0 -2.4em 0;
	padding:3em;
	text-align:center;
	color:#fff;
}
.subscribe h2 {
	font-size:2.6em;
	margin-bottom:0.7em;
}
.subscribe p {
	width:22em;
	margin:auto;
}
.subscribe input.text {
	float:left;
	height:2.7rem;
	padding:1em 0.8em;
	line-height:1;
	box-sizing:border-box;
	border:0;
	border-radius:3px 0 0 3px;
	outline:0;
	width:15rem;
}
.subscribe input.button {
	float:left;
	height:2.7rem;
	border-radius:0 3px 3px 0;
	min-width:0;
	padding:0;
	width:7rem !important;
}

/*
——————————————————————
Sitemap
——————————————————————
*/
#sitemap {
	padding:0.8em;
}
#sitemap ul {
	margin-left:1.6em;
}
#sitemap h2 {
	font-size:1.8em;
	margin-bottom:0.7em;
}
#sitemap h2 a,
#sitemap h3 a {
	display:inline-block;
	border-bottom:2px solid #f17330;
}
#sitemap a:hover {
	color:#f17330;
}

/*
——————————————————————
Footer
——————————————————————
*/
#footer {
	color:#fff;
	background:#25282a;
	border-top:1px solid #18191b;
	padding:1.5em;
	margin-top:2.4em;
}
#footer-bar {
	text-align:center;
}
#footer-bar a {
	text-decoration:underline;
}
#footer-bar .copyright, #footer-bar a {
	margin:0 0.3em;
}
#social-links {
	text-align:center;
	margin-bottom:1em;
}
#social-links span {
	display:none;
}
#social-links li {
	display:inline-block;
	margin:0.3em 0.3em 0 0;
}
#social-links a {
	display:block;
	width:3em;
	height:3em;
	border-radius:1.5em;
	background:rgba(255,255,255,0.05);
	position:relative;
}
#social-links a:hover {
	background:rgba(255,255,255,0.10);
}
#social-links a:active {
	background:rgba(255,255,255,0.15);
}
#social-links a:after {
	color:#fff;
	font-family:fa-brands;
	font-size:1.5em;
	position:absolute;
	top:0; left:0;
	width:2em;
	line-height:2em;
	text-align:center;
}
#social-links a.facebook:after  { content:'\f39e' }
#social-links a.twitter:after   { content:'\f099' }
#social-links a.pinterest:after { content:'\f0d2' }
#social-links a.instagram:after { content:'\f16d' }
#social-links a.youtube:after   { content:'\f167' }


@media only screen and (min-width:1600px) {
	.story-section:not(:last-child) img {
		width:692px;
		height:624px;
	}
}