/*!
Theme Name: Totally Rawsome FrameWork
Theme URI: http://underscores.me/
Author: S2 Web Solutions
Author URI: http://www.s2websolutions.co.za
Description: Built on Underscores framework, by S2 Web Solutions, for Totally Rawsome Knysna
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: totallyrawsome_fw

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

totallyrawsome_fw is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */
html {line-height: 1.15; -webkit-text-size-adjust: 100%; }

/* Sections
	 ========================================================================== */
body {margin: 0;}

/* Grouping content
	 ========================================================================== */
hr {box-sizing: content-box; height: 0; overflow: visible;}
pre {font-family: monospace, monospace; font-size: 1em;}
a {background-color: transparent;}

abbr[title] {border-bottom: none; text-decoration: underline; text-decoration: underline dotted;}
b, strong {font-weight: bolder;}
code, kbd, samp {font-family: monospace, monospace; font-size: 1em; }
small {font-size: 80%;}

sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}

/* Embedded content
	 ========================================================================== */
img {border-style: none;}

/* Forms
	 ========================================================================== */
button, input, optgroup, select, textarea {font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}
button, input {overflow: visible;}
button, select {text-transform: none;}
button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none; padding: 0;}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset {padding: 0.35em 0.75em 0.625em;}
legend {box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal;}
progress {vertical-align: baseline;}
textarea {overflow: auto;}
[type="checkbox"], [type="radio"] {box-sizing: border-box; padding: 0;}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield; outline-offset: -2px;}
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}

/* Interactive
	 ========================================================================== */
details {display: block;}
summary {display: list-item;}

/* Misc
	 ========================================================================== */
template {display: none;}
[hidden] {display: none;}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body, button, input, select, optgroup, textarea {color: #404040; font-family: "Comic Neue", cursive; font-weight: 500; font-style: normal; font-size: 16px; font-size: 1.4rem; line-height: 1.5;}
h1, h2, h3, h4, h5, h6 {clear: both; color: #f27200; display: block; text-align: center; font-weight: bolder;}
p {margin-bottom: 1.5em;}
dfn, cite, em, i {font-style: italic;}
blockquote {margin: 0 1.5em;}
address {margin: 0 0 1.5em;}
pre {background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em;}
code, kbd, tt, var {font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-size: 0.9375rem;}
abbr, acronym {border-bottom: 1px dotted #666; cursor: help;}
mark, ins {background: #fff9c0; text-decoration: none;}
big {font-size: 125%;}

h1 {font-size: 2.2rem; margin: 1rem 0;}
h2 {font-size: 1.7rem; margin: 0.5rem 0;}
h3 {font-size: 1.5rem;}
h4, h6 {font-size: 1.3rem;}
.large-font {font-size: 1.5rem; font-weight: 600;}
.larger-font {font-size: 2.2rem; font-weight: 600;}


h2.woocommerce-loop-product__title {font-size: 1.5rem;}

#colophon {color: #ffffff;}
#colophon h3 {color: #ffffff; text-align: center; margin: 0 0 1rem 0;}
.entry-content {text-align: center;}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
body {background: #fff;}
hr {background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em;}
ul, ol {margin: 0 0 1.5em 3em;}
ul {list-style: disc;}
ol {list-style: decimal;}
li > ul, li > ol {margin-bottom: 0; margin-left: 1.5em;}
dt {font-weight: bold;}
dd {margin: 0 1.5em 1.5em;}
img {height: auto; max-width: 100%;}
figure {margin: 1em 0;}
table {margin: 0 0 1.5em; width: 100%;}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button, input[type="button"], input[type="reset"], input[type="submit"] {border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; color: rgba(0, 0, 0, 0.8); font-size: 12px; font-size: 0.75rem; line-height: 1; padding: .6em 1em .4em;}
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {border-color: #ccc #bbb #aaa;}
button:active, button:focus, input[type="button"]:active, input[type="button"]:focus,input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus {border-color: #aaa #bbb #bbb;}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px;}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus {color: #111;}
select {border: 1px solid #ccc;}
textarea {width: 100%;}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {color: inherit; text-decoration: none;}
a:visited {color: inherit;}
a:hover, a:focus, a:active {color: inherit;}
a:focus {outline: thin dotted;}
a:hover, a:active {outline: 0;}

a.black-btn, a.black-btn:visited {color: #ffffff;}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

.main-navigation {position: relative;}
.main-navigation ul {list-style: none; display: none;}
.menu-toggle, .main-navigation.toggled ul {display: block;}
button.menu-toggle {height: 50px; width: 100%; font-size: 40px; font-size: 2.4rem; padding: 0px; line-height: 1; font-weight: normal; background: none;  border: 0px; outline: 0; color:#ffffff; text-align:center;}
.main-navigation.toggled ul {max-height: max-content; position: absolute; width: 100%; height: max-content; top: 3rem; right: 0; left: 0; z-index: 2000; background: #000000; -webkit-transition: all 0.3s ease; padding: 1rem; margin:0 auto;}
.main-navigation.toggled ul li {border-bottom: 1px solid #b6b2b2;}
.main-navigation.toggled ul li a {text-decoration: none; display: block; color: inherit; width: 100%; text-align: center; padding: 0.4em 0px; }
.main-navigation.toggled ul li.menu-item-has-children a  {display: none;}
.main-navigation.toggled ul li.menu-item-has-children .mobile-label  {display: block; width: 100%; text-align: center; cursor: pointer; padding: 5px 0px;}
.main-navigation.toggled ul li.menu-item-has-children .mobile-label::after {position: absolute; display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; line-height: 2.5; content: "\f107"; padding-left: 10px;}
#footer-menu-2 li.menu-item-has-children .mobile-label::before {position: absolute; display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; line-height: 2; content: "\f067"; margin-left: -15px;}
.main-navigation [id^=drop]  {display: none;}
.main-navigation.toggled ul ul {display: none;}
.main-navigation.toggled ul li.active ul {width: 100%; transform: translateX(-230px); display: block; z-index: 999; transform: translateX(0px); position: static; padding: 10px; margin: auto; box-shadow: 0 0 1px #eee, 0 6px 18px rgba(0, 0, 0, 0.15); background: #282828; margin-bottom: 0.95rem;}
.main-navigation.toggled ul li.active ul:after {position: absolute; top: -4px; left: 0; right: 0; margin: 0 auto; content: ""; display: block; width: 16px; height: 16px; background: #282828; border-radius: 3px 0 0 0; transform: rotate(45deg); border-top: 1px solid #282828; border-left: 1px solid #282828; }
.main-navigation.toggled ul li.active ul li {border-bottom: 0px;}
.main-navigation.toggled ul li.active ul li a {display: block; font-size: 0.9rem; text-align: center;}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.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: 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;}
#content[tabindex="-1"]:focus {outline: 0;}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {display: inline; float: left; margin-right: 1.5em;}
.alignright {display: inline; float: right; margin-left: 1.5em;}
.aligncenter {clear: both; display: block; margin-left: auto; margin-right: auto;}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before, .clear:after, .comment-content:before, .comment-content:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after {content: ""; display: table; table-layout: fixed;}
.clear:after, .comment-content:after, .site-content:after, .site-footer:after {clear: both;}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {margin: 0 0 1.5em;}
.widget select {max-width: 100%;}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {display: block;}
.post, .page {margin: 0;}
.updated:not(.published) {display: none;}
.page-content, .entry-content, .entry-summary {margin: 1.5em 0 0;}
.page-links {clear: both; margin: 0 0 1.5em;}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {word-wrap: break-word;}
.bypostauthor {display: block;}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {display: none;}
.infinity-end.neverending .site-footer {display: block;}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley {border: none; margin-bottom: 0; margin-top: 0; padding: 0;}
embed, iframe, object {max-width: 100%;}
.custom-logo-link {display: inline-block;}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {margin-bottom: 1.5em; max-width: 100%;}
.wp-caption img[class*="wp-image-"] {display: block; margin-left: auto; margin-right: auto;}
.wp-caption .wp-caption-text {margin: 0.8075em 0;}
.wp-caption-text {text-align: center;}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {margin-bottom: 1.5em;}
.gallery-item {display: inline-block; text-align: center; vertical-align: top; width: 100%;}
.gallery-columns-2 .gallery-item {max-width: 50%;}
.gallery-columns-3 .gallery-item {max-width: 33.33%;}
.gallery-columns-4 .gallery-item {max-width: 25%;}
.gallery-columns-5 .gallery-item {max-width: 20%;}
.gallery-columns-6 .gallery-item {max-width: 16.66%;}
.gallery-columns-7 .gallery-item {max-width: 14.28%;}
.gallery-columns-8 .gallery-item {max-width: 12.5%;}
.gallery-columns-9 .gallery-item {max-width: 11.11%;}
.gallery-caption {display: block;}

/*--------------------------------------------------------------
## Short Code Layouts
--------------------------------------------------------------*/
.clear_all {clear: both; display:block;}
.row_start {display:inline-block; width:100%; float:none; clear:both;}
.one_half, .two_quarter, .one_quarter, .three_quarter, .one_third, .two_third, .one_fifth {display: block; float: none; list-style: none; box-sizing: border-box; margin: 0 auto; width: 100%;}

/*--------------------------------------------------------------
## Grids
--------------------------------------------------------------*/
.grid, .topbar-grid, .site-header, #colophon, .site-info, .site-info {display: grid; width: 95%; max-width: 1440px; margin: 0 auto; padding: 0;}
.one-col, .two-col, .two-col-auto, .three-col, .four-col, .footer-grid, #colophon {grid-template-columns: 100%;}
.aligned-grid {align-items: center;}
.gapped-grid-small {grid-gap: 0.5rem;}
.gapped-grid {grid-gap: 1rem;}
.grid-image {line-height: 0;}
.text-centered {text-align: center;}


.topbar-grid {grid-template-columns: 50% 50%; padding: 1rem 0;}
.topbar-grid > span:nth-of-type(2) {text-align: right;}
.topbar-grid > span:nth-of-type(2) > .topbar-list {float: right;}
.topbar-list {list-style: none; padding: 0; margin: 0; display: grid; width: 100%; max-width: 100px; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap:0.5rem;}
.topbar-list .fas, .topbar-list .fab {font-size: 1.35rem; font-display: swap;}
.footer-list {max-width: fit-content; grid-gap: 0.5rem; margin-bottom: 1.5rem; color: #000000; margin: 0 auto;}
.footer-list .fas, .footer-list .fab {font-size: 2.75rem;}
.site-header {grid-template-columns: 100%; height: 100%; align-self: center; text-align: center; padding: 1.5rem 0;}

a.site-slogan {font-weight: bold; font-size: 0.9rem;}
.header-image-grid {display: grid; width: 100%; margin: 0 auto; padding: 0; max-width: 1920px;}
.header-image-grid > .header-image-text {grid-row: 1; grid-column: 1; width:100%; text-align: center; background-color: #000000; color: #ffffff; color: #ffffff; font-weight: bold; padding: 0.75rem 0;}
.header-image-grid > .header-image {grid-row: 2; grid-column: 1; display: grid; grid-template-columns: 100%;}
.header-image-grid > .header-image > .header-btn {grid-row: 1; grid-column: 1; position: absolute; margin:0 auto; align-self: end; left: 0; right: 0;}
.header-image-grid > .header-image > .header-btn > a {display: block; border-radius: 2rem; padding:1rem; text-align: center; width:fit-content; background:#000000; color: #ffffff; margin:0 auto; margin-bottom: 1rem; text-transform: uppercase; font-weight: bold;}
.header-image-grid > .header-image > .header-btn > a:hover {background-color: #f95611;}
.header-image-grid > .header-image > picture {grid-row: 1; grid-column: 1; line-height: 0;}

#colophon {text-align: center; padding: 1.5rem 0; font-size: 1.5rem; grid-gap: 2rem;}
#footer-menu {list-style: none; padding: 0; margin: 0; display: grid; width: 100%; grid-template-columns: 1fr 1fr;}
#footer-menu a, .topbar-list a, .footer-list a {text-decoration: none; color: inherit;}
.site-info {grid-template-columns: 100%; text-align: center; grid-gap: 1rem; padding: 0.5rem 0; font-size: 1rem;}

.benefits-grid {display: grid; width: 100%; margin: 0 auto; text-align: left; list-style: none; padding: 0; grid-template-columns: 100%;}

ul.grid-list {display: grid; width: 100%; margin: 0 auto; text-align: center; list-style: none; padding: 0; grid-template-columns: 100%; grid-gap: 1rem;}
ul.grid-list.align-right-desk {text-align: center;}

ul.no-list {list-style: none; margin: 0; padding: 0;}
.icon-grid {display: grid; width: fit-content; grid-template-columns: 100%; margin: 0 auto; margin-bottom: 2rem; align-items: center;}
.icon-grid .fa {font-size: 2rem;}
.child-page-grid {height: 100%; grid-template-columns: 1; grid-gap: 1rem; align-content: center; text-align: center; padding: 1rem;}

.black-btn {display: block; background: #000000; max-width: 320px; text-align: center; margin: 0 auto; font-size: 1.85rem; text-decoration: none; color: #ffffff; border-radius: 2rem; width: 100%; padding: 0.5rem; margin-top: 2rem;}
.orange-btn, .rawsome-product-list li a.button {display: block; background: #f95611; max-width: 480px; text-align: center; margin: 0 auto; font-size: 1.85rem; text-decoration: none; color: #ffffff; border-radius: 2rem; width: 100%; padding: 0.5rem; margin-top: 2rem;}

.rounded-image {border-radius: 2rem; border: 5px solid #000000;}
.delivery-table > .delivery-table-col1 > .delivery-table-header {color:#ffffff; text-transform: uppercase; background:#ee220c; padding:1rem; font-weight:bolder; font-size:1.65rem;}
.delivery-table > .delivery-table-col2 > .delivery-table-header {color:#ffffff; text-transform: uppercase; background:#1db100; padding:1rem; font-weight:bolder; font-size:1.65rem;}
.delivery-table > .delivery-table-col3 > .delivery-table-header {color:#ffffff; text-transform: uppercase; background:#0076ba; padding:1rem; font-weight:bolder; font-size:1.65rem;}

.delivery-table > .delivery-table-col1 {color:#ee220c;}
.delivery-table > .delivery-table-col2 {color:#1db100;}
.delivery-table > .delivery-table-col3 {color:#0076ba;}

.delivery-table > .delivery-table-col1 > span, .delivery-table > .delivery-table-col2 > span, .delivery-table > .delivery-table-col3 > span {padding:0.5rem; font-weight: 600; border: 1px solid #d9d9d9;}

.delivery-table > .delivery-table-col1 > span:nth-of-type(2n), .delivery-table > .delivery-table-col2 > span:nth-of-type(2n), .delivery-table > .delivery-table-col3 > span:nth-of-type(2n) {background:#f5f5f5;}
/*--------------------------------------------------------------
## Theme Wrappers and colours
--------------------------------------------------------------*/
.wrapper, #content, .max-1280 {display: block; width: 100%; margin: 0 auto; padding: 0; position: relative;}
 #content, .max-1280, #site-navigation {max-width: 95%;}
#site-navigation {margin: 0 auto;}
.white-bg {background-color: #ffffff;}
.black-bg {color: #ffffff; background-color: #000000;}
.orange-bg {color: #A6A6A6; background-color: #f95611;}

.recommended_box {border: 1px solid; border-radius: 1rem; padding:0.5rem; font-size: 1.2rem; background-color: #ffffff;}
.calculator_label {font-size:1.2rem; font-weight:bolder;}
.calculator_field {font-size:1.2rem; font-weight:bolder; padding:0.5rem;}
.calculator_box {background:#ffffff; border:1px solid #000000; padding:1rem; border-radius:1rem;}
.calculator_box_label {font-weight:bolder; font-size:1.2rem; line-height:1.2; display:block; min-height:48px;}

/*--------------------------------------------------------------
## WooCommerce Customs
--------------------------------------------------------------*/
span.count {position: relative;}
span.count_text {position: absolute; top: -0.35rem; right: -0.5rem; font-size: 0.85rem; background: #f95611; border-radius: 50%; width: 1.2rem; height: 1.2rem; line-height: 1.5; text-align: center;  color: #ffffff;}

.rawsome-products, .rawsome-product-list {list-style: none; padding: 0; display: grid; width: 100%; margin: 0 auto; grid-template-columns: 100%; grid-gap: 1.5rem; margin-bottom: 2rem;}
.prod_cat_grid {display: grid; height: 100%; grid-template-columns: 100%; text-align: center; grid-template-rows: auto 2rem; align-items: center; grid-gap: 1rem;}
.prod_cat_grid img, .rawsome-product-list li img {margin: 0 auto; max-width: 100%; width: auto;}
.rawsome-product-list li {display: grid; height: 100%; grid-template-columns: 100%; text-align: center; grid-template-rows: auto max-content; align-items: center; grid-row-gap: 1rem; border: 1px solid #f95611; padding: 1rem; border-radius: 2rem;}
.rawsome-product-list li.sale {position: relative;}
.rawsome-product-list li.sale > a > span.onsale {background-color: #f95611;}
.rawsome-product-list li.sale ins {background-color: unset; color: #f95611; font-weight: bolder;}
.wp-singular span.onsale {top:unset; left:unset; background-color: #f95611;}

.rawsome-product-list li a.woocommerce-loop-product__link {display: grid; height: 100%; align-items: start; grid-template-rows:minmax(250px, max-content) 1fr auto; grid-row-gap: 1rem;}
.rawsome-product-list li a.button {font-size: 1.35rem; font-weight: normal; letter-spacing: 0.0635rem; line-height: 2rem; margin-top: 0;}
.tr-available-sizes {font-size: 1.05rem; display: block; margin-bottom: 0.2rem;}
.single-product div.product div.images {float: unset!important; width: unset!important;}
.single-product .summary.entry-summary {float: unset !important; clear: unset!important; width: unset!important; padding: unset!important; margin: unset!important;}
.single-product-grid-left figure {margin: unset!important;}
.single-product-grid {display: grid; width: 100%; margin: 0 auto; grid-template-columns: 100%; grid-gap: 3rem; text-align: center; align-items: center;}
.woocommerce-products-header > .term-description {text-align: center;}
.woocommerce-products-header > .term-description > ul, .text-centered > ul {text-align: left;}

.woocommerce div.product form.cart div.quantity, .woocommerce div.product form.cart .button {float: unset !important; margin: 0!important; padding: 0; height: 100%;}
.woocommerce div.product form.cart div.quantity, .rawsome-product-list li form.cart div.quantity {display: grid; grid-template-columns: 1fr 2fr 1fr; grid-gap: 0.25rem; align-items: center;}
.woocommerce div.product form.cart div.quantity .qty, .rawsome-product-list li form.cart div.quantity .qty {width: 50px;}
.woocommerce div.product form.cart div.quantity input, .rawsome-product-list li form.cart div.quantity input {text-align: center;}
.woocommerce div.product form.cart div.quantity button, .rawsome-product-list li form.cart div.quantity button {height: 100%; background: #ffffff; color: #000000; font-weight: bold; font-size: 1.12rem;}

.woocommerce-variation-add-to-cart {display: grid; grid-template-columns: 1fr 10fr; grid-gap: 0.25rem; align-items: center;}
.single-product form.cart:not(.variations_form), .rawsome-product-list li form.cart:not(.variations_form)  {display: grid; grid-template-columns: 1fr 10fr; grid-gap: 0.25rem; align-items: center;}

.woocommerce div.product form.cart::after, .woocommerce div.product form.cart::before, .rawsome-product-list li form.cart .woocommerce-variation-description {display: none!important;}

button.single_add_to_cart_button.button.alt.wp-element-button.disabled.wc-variation-selection-needed {color: #A6A6A6; background-color: #f95611;}
button.single_add_to_cart_button.button.alt.wp-element-button {color: #ffffff; background-color: #f95611; padding: 0; height: 100%; line-height: 1;}

.woocommerce div.product form.cart .variations select, .rawsome-product-list li form.cart .variations select {width: 100%; margin: 0;}
.woocommerce div.product form.cart .reset_variations, .rawsome-product-list li form.cart .reset_variations {display: none !important;}
.woocommerce div.product form.cart .variations th, .rawsome-product-list li form.cart variations th {width: 85px; font-size: 1.25rem; }
.woocommerce div.product form.cart .variations label, .rawsome-product-list li form.cart .variations label {font-weight: normal;}
.woocommerce div.product form.cart {padding: 1rem; background: #C0C0C0; border-radius: 1rem;}

.single .single_variation_wrap .woocommerce-variation-price, .archive .woocommerce-variation.single_variation {display: none!important;}

.woocommerce div.product p.price, .woocommerce div.product span.price {color: #f95611; font-weight: bold;}
.woocommerce-variation.single_variation {background: white; margin-top: -1rem; margin-bottom: 1rem; padding: 1rem 0; line-height: 1.5!important; border-radius: 1rem;}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt {color: #ffffff; background-color: #f95611;}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt:hover {color: #000000; background-color: #C0C0C0;}

#customer_details .col-1, #customer_details .col-2 {float: none; width: 100%;}
#customer_details .form-row::after, #customer_details .form-row::before, #customer_details .form-row::after, #customer_details .form-row::before {display: none;}
#customer_details .form-row {float: none; width: 100%; display: grid; grid-template-columns:100%; text-align: center; align-items: center; align-content: center; align-self: center; padding: 0.5rem; margin: 0;}
#customer_details .form-row {background: #e9e9e9;}
#customer_details .form-row:nth-of-type(2n), #recurring_options_field.form-row {background: #c0c0c0;}

.woocommerce-account.logged-in .woocommerce::after, .woocommerce-account .woocommerce::before, .woocommerce form.login .form-row::before,  .woocommerce form.login .form-row::after {display: none;}
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content {float: none; width: auto;}
.woocommerce-account.logged-in .woocommerce {background: #c0c0c0; display: grid; width: 100%; margin: 0 auto; grid-template-columns: 100%; padding: 1rem; grid-gap: 1rem;}
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {background: #f95611;}
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul {list-style: none; padding: 0; margin: 0;}
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid #ffffff; margin-bottom: 0.5rem;}
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul li a {width: 100%; display: block; padding: 0.5rem 0; color: #ffffff;}

.woocommerce form.login {background: #f95611;}
.woocommerce form.login .form-row-wide {display: grid; width: 100%; grid-template-columns: 1fr 2fr; align-content: center; align-items: center; align-self: center;}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled]:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled], .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt:disabled[disabled]:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt.disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt.disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt:disabled, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt:disabled:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt:disabled[disabled], :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt:disabled[disabled]:hover {background:#f95611;}

#recurring_options_field > .woocommerce-input-wrapper {display:grid; grid-template-columns: 10px auto; grid-gap: 0.25rem; text-align: left;}
.nf-before-form-content {display: none!important;}
.nf-field-container {margin-bottom:0!important;}

.cover-image > picture {height:100%; object-fit: cover;}
.cover-image > picture > img {height:100%!important; object-fit: cover;}

.contact-some-overlay {display:grid; grid-template-columns: 100%;}
.contact-some-overlay > .contact-some {grid-column: 1; grid-row: 1; z-index: 999;}
.contact-some-overlay > .contact-some > ul {list-style:none; padding:0; margin:1rem auto; display: flex; width:fit-content; gap: 0.5rem;}
.contact-some-overlay > .contact-some > ul > li {flex:auto; font-size: 2.25rem; color: #000000;}
.contact-some-overlay > .contact-some-image {grid-column: 1; grid-row: 1;}

#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2; background:#e16a02; border-radius: 100%; color: #ffffff; text-decoration: none;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}

.woocommerce-info[data-class="promo-alert"] {background-color: #e16a02 !important; color: #ffffff !important; border-top-color: #e16a02 !important; border-radius: 1rem;}
.woocommerce-info[data-class="promo-alert"]::before, .woocommerce-info[data-class="auto-savings-alert"]::before {display:none!important;}

.woocommerce-info[data-class="auto-savings-alert"]{background-color: #f95611 !important; color: #ffffff !important; border-top-color: #f95611 !important; border-radius: 1rem; font-weight: bold;}

.ordering-interval-radio .woocommerce-input-wrapper label .required {display: none !important;}
.ordering-interval-radio > label .required {display: none !important;}

.woocommerce-order-received ul.order_details {margin: 0 auto !important; padding: 1rem !important; width: 100% !important; border-top-color: #e16a02 !important; border-radius: 1rem; display: flex; max-width: 1440px; background-color: #e6e6e6 ;}
.woocommerce-order-received ul.order_details::after, .woocommerce-order-received ul.order_details::before {display: none!important;}
.woocommerce-order-received ul.order_details li {flex:1; float: unset!important; margin: unset !important; padding:unset!important; border:unset!important;}
.woocommerce-order-received .woocommerce-bacs-bank-details {margin:1rem auto!important; }

.woocommerce-order-received .woocommerce-bacs-bank-details h2, .woocommerce-order-received .woocommerce-bacs-bank-details h3 {margin:0; color: #ffffff !important;}
.woocommerce-order-received .woocommerce-bacs-bank-details h3 {font-size:1.45rem;}
.woocommerce-order-received .woocommerce-bacs-bank-details {background-color: #e16a02 !important; color: #ffffff !important; border-radius: 1rem 1rem; padding-bottom: 1rem!important;}
.woocommerce-order-received .woocommerce-bacs-bank-details ul.order_details {background-color: #ffffff !important; color: #000000 !important; max-width: 920px;}

.woocommerce-order-received .woocommerce-order-details, .woocommerce-order-received .woocommerce-customer-details {background-color: #e6e6e6 !important;  padding-bottom:2rem; margin-bottom: 0!important;}
.woocommerce-order-received .woocommerce-order-details {border-radius: 1rem 1rem 0 0;}
.woocommerce-order-received .woocommerce-customer-details {border-radius: 0 0 1rem 1rem; margin-bottom: 3rem!important;}
.woocommerce-order-received .woocommerce-order-details .woocommerce-table, .woocommerce-order-received .woocommerce-customer-details .woocommerce-table, .woocommerce-order-received .woocommerce-customer-details address {max-width: 920px; margin:0 auto; background: #ffffff !important;}

p#preferred_ordering_interval_field {background-color: #e16a02 !important; color: #fff !important; grid-template-columns: 100% !important; margin: 2rem auto !important; padding: 1rem !important; border-radius: 2rem;}

p#preferred_ordering_interval_field > .woocommerce-input-wrapper {display: grid; grid-template-columns: 1rem auto; grid-gap: 0.5rem; width: fit-content; margin:0 auto; font-size: 1rem; background-color: #fff; color: #000000; padding: 1rem;}

@media screen and (min-width:480px) {
	.large-font{font-size: 1.25rem;}
}

@media screen and (min-width: 720px) {
	.large-font {font-size: 1.75rem;}
	.larger-font {font-size: 2.0rem;}
	.header-image-grid > .header-image > .header-btn {align-self: center; padding-left: 20%; left: unset; right: unset; font-size: 2rem;}
	.header-image-grid > .header-image > .header-btn > a {padding:1.75rem 1.5rem;}
}

@media screen and (min-width: 978px) {
	.larger-font {font-size: 3.0rem;}
	.large-font {font-size: 2rem;}
	h1 {font-size: 2.5rem;}
	h2 {font-size: 2.2rem;}
	h3 {font-size: 2.0rem;}
	h4, h6 {font-size: 1.8rem;}

	.menu-toggle {display: none;}
	.main-navigation ul {display: flex; list-style: none; margin: 0; padding: 0; overflow: unset !important; max-height: unset !important; width:max-content; margin: 0 auto; gap: 2rem;}
	.main-navigation ul li {flex: auto; padding: 1.25rem 0; text-align: center; text-transform: uppercase; font-size: 1.5rem;}
	.main-navigation ul li.menu-item-has-children {display: grid; grid-template-columns: 1rem auto; width:fit-content; align-items: center; grid-gap: 0.25rem;}
	.main-navigation ul li.menu-item-has-children::before {font-family: "Font Awesome 5 Free"; font-display: swap;  font-weight: 900; content: "\f0d7"; color:rgba(0, 0, 0, 1); font-size: 1rem;}
	
	.main-navigation ul li.menu-item-has-children .sub-menu a {display: block; width: 100%; line-height: 1.5;}
	.main-navigation ul li a {color: #000000; text-decoration: none; font-weight: bolder;}
    .main-navigation ul ul {display: block; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; top: 100%; left: -999em; z-index: 99999; background: #f3803c;}
    .main-navigation ul ul ul {display: block;  left: -999em; top: 0;}
    .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {left: 100%;}
    .main-navigation ul ul a {width: 300px;}
    .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {left: unset;}
	.main-navigation ul li:hover {color: #f4a609;; }
	.main-navigation ul.sub-menu li {padding: 0.5rem; text-align: left; color: #ffffff; width: 320px; border-bottom: 2px solid rgba(0,0,0,0.2);}
	.main-navigation ul.sub-menu li a {text-transform: none; letter-spacing: 0;}
    /**.main-navigation li {float: left; position: relative;}**/
    .main-navigation a {display: block;	text-decoration: none;}	
	.main-navigation .current-menu-item, .main-navigation .current-menu-parent {color: #f4a609;}
	.main-navigation .current-menu-parent ul.sub-menu .current-menu-item {color: #f4a609;}

    
    .main-navigation ul li.menu-item-has-children .mobile-label {display: none;}
    	
    .one_half:first-of-type, .two_quarter:first-of-type, .one_quarter:first-of-type, .three_quarter:first-of-type, .one_third:first-of-type, .two_third:first-of-type, .one_fifth:first-of-type {margin-left: 0; clear: left;}
    .one_half, .two_quarter, .one_quarter, .three_quarter, .one_third, .two_third, .one_fifth {display: inline-block; float: left; margin: 0 0 0 3.06748466257669%;}
    .one_half, .two_quarter {width: 48.46625766871166%;}
    .one_quarter {width: 21.69938650306748%;}
    .three_quarter {width: 74.23312883435584%;}
    .one_third {width: 31.28834355828221%;}
    .two_third {width: 62.47668711656442%;}
    .one_fifth {width: 17.29938650306748%;}
	
	.two-col-auto {grid-template-columns: auto auto;}
	.two-col, .four-col, .site-info {grid-template-columns: repeat(2,1fr);}
	.three-col, .rawsome-products {grid-template-columns: repeat(3,1fr);}
	#colophon {grid-template-columns: 1.5fr 2fr; align-content: stretch; text-align: left; }
	.site-info {text-align: left;}
	.site-info span:nth-of-type(2) {text-align: right;}
	.prod_cat_grid {grid-template-rows: auto 1fr; grid-row-gap: 0.5rem; align-items: start;}
	.single-product-grid {grid-template-columns: minmax(500px, min-content) 1fr;}
	
	.benefits-grid {grid-template-columns: 1fr 1fr 1fr; grid-gap: 1rem; font-size: 1.35rem;}
	.benefit-grid-image img {height: 100%; width: 100%; object-fit: cover;}
	
	ul.grid-list li {display: grid; text-align: left; grid-template-columns: auto 1fr; width: 100%; grid-gap: 0.25rem;}
	ul.grid-list.align-right-desk li {text-align: right; grid-template-columns: 1fr auto; }
	
	ul.grid-list.align-right-desk li:after, ul.grid-list:not(ul.grid-list.align-right-desk) li:before {content: "\f1b0"; font-family: 'font awesome 5 free'; font-weight: 900; font-display: swap;}
	.icon-grid {grid-template-columns: 50px auto;}
	#colophon h3 {text-align: left;}
	.footer-list {margin: unset;}
	.site-info {font-size: 1.5rem;}

	#customer_details .form-row {grid-template-columns: 1.5fr 2fr; text-align: left;}
	#customer_details #billing_address_2_field .woocommerce-input-wrapper {grid-column: 2;}
	.woocommerce-account.logged-in .woocommerce {grid-template-columns: 1fr 3fr;}
	p#preferred_ordering_interval_field {text-align: center !important;}
	p#preferred_ordering_interval_field > .woocommerce-input-wrapper {display: flex; grid-template-columns: 1rem auto; grid-gap: 0.5rem;}
	
}

@media screen and (min-width: 1280px) {
	#content, .max-1280, .topbar-grid, .site-header, #site-navigation, #colophon, .site-info {max-width: 98%;}
	.four-col {grid-template-columns: repeat(4,1fr);}
}

@media screen and (min-width:1440px) {
	#content, .max-1280, .topbar-grid, .site-header, #site-navigation, #colophon, .site-info {max-width: 1280px;}
}

@media screen and (min-width:1920px) {
	.wrapper {width: 100%; max-width: 1920px;}
}