/*
	Theme Name: Resilience
	Theme URI: https://blaqweb.net
	Author: Karl Shaw
	Author URI: https://blaqweb.net
	Description: A robustly designed theme.
	Version: 1.0
	Text Domain: resilience-theme
*/

/*
	GLOBAL STYLING
	-----------------------
	The following CSS covers global styling across
	the document.
*/

/* Global variables */

* {
	--type-size-menu: 20pt;
	--type-size-content: 17pt;
	--type-size-header: 30pt;
	--type-size-cover: 60pt;
	--page-margin-left: 15%;
	--page-margin-right: 15%;
	--page-content-width: 70vw;
	--padding-max: 10%;
	--padding-normal: 20px;
	--padding-min: 5px;
	--nav-bar-height: 80px;
	--nav-bar-item-height: calc(40px + (var(--padding-min) * 2));
	--front-page-height: 50vh;
	--font-header: ariel;
	--font-nav: times;
	--logo-margin-left: calc(var(--page-margin-left) + 200px);
	--site-links-width: calc(100vw - (var(--logo-margin-left) - var(--page-margin-right)));
	--navigation-line-logo-offset: 12px;
	--main-logo-width: 160px;
	--main-logo-width-crunched: calc(var(--main-logo-width) * .6);
	--main-logo-width-hover: calc(var(--main-logo-width) * 1.2);
	--main-logo-width-crunched-hover: calc(var(--main-logo-width-crunched) * 1.4);
	--main-logo-top-margin-offset: calc((var(--main-logo-width) - var(--nav-bar-height)) / 2 * -1.0);
	--main-logo-top-margin-offset-hover: calc((var(--main-logo-width-hover) - var(--nav-bar-height)) / 2 * -1.0);
	--main-logo-top-margin-crunched-offset: calc((var(--main-logo-width-crunched) - var(--nav-bar-height)) / 2 * -1.0);
	--main-logo-top-margin-crunched-offset-hover: calc((var(--main-logo-width-crunched-hover) - var(--nav-bar-height)) / 2 * -1.0);
	--main-logo-padding: 20px;
	--main-logo-width-sum: calc(var(--main-logo-width) + (var(--main-logo-padding) * 2));
	--main-logo-width-crunched-sum: calc(var(--main-logo-width-crunched) + (var(--main-logo-padding) * 2));
	--main-logo-width-difference: calc(var(--main-logo-width-sum) - var(--main-logo-width-crunched-sum));
	margin: 0;
	padding: 0;
}

/* Generic tags */

p, section {
	padding: var(--padding-min);
}

h1, h2, h3, h4, h5 {
	font-family: var(--font-header);
}

/* Inputs and buttons */

input, textarea, select {
	font-size: var(--type-size-content);
	padding: var(--padding-min);
	background: var(--color-input-background) !important;
	color: var(--color-text) !important;
	border: 2px solid var(--color-background-secondary);
	border-radius: 10px;
}

button, .button, input[type="submit"] {
	background: var(--color-input-background) !important;
	color: var(--color-primary) !important;
	padding: 10px;
	transition: 0.2s ease-in-out;
	border: none;
	cursor: pointer;
	text-decoration: none;
}

button:hover, .button:hover {
	color: var(--color-secondary) !important;
}

/* Global classes */ 

.auto_height {
	height: auto !important;
}

.hidden {
	opacity: 0;
}

.no-display {
	display: none;
}

.facebook img {
	width: 40px;
}

.page-title, .site-title {
	font-size: var(--type-size-cover);
	font-family: var(--font-header);
	display: block;
	text-shadow: 2px 2px rgba(0,0,0,0.8);
}

.site-tagline {
	font-size: var(--type-size-header);
	display: block;
	margin-bottom: 10px;
}

.transition-02 {
	transition: 0.2s ease-in-out;
}

#skip-link {
	position: fixed;
	top: -50px;
	left: 0;
	z-index: 55;
	padding: 10px;
	background: var(--color-background-alpha);
	border-radius: 5px;
}

#skip-link:focus {
	top: var(--admin-header-space);
}

/*
	WooCommerce style override
*/

.woocommerce-tabs li {
	background: var(--color-input-background) !important;
	color: var(--color-text) !important;
}

.woocommerce-notices-wrapper, .woocommerce-info {
	background: var(--color-background-secondary) !important;
	color: var(--color-text) !important;
}

.select2-selection__rendered {
	background: var(--color-input-background);
	color: var(--color-text) !important;
}

.select2-results {
	background: var(--color-background-secondary);
}

.select2-results__option[data-selected="true"] {
	background: var(--color-input-background) !important;
}

.wp-block-button__link {
	height: auto !important;
	width: auto !important;
}

.attachment-woocommerce_thumbnail {
	object-fit: contain !important;
	aspect-ratio: 1/1;
}

#payment {
	background: var(--color-background-secondary) !important;
}

/*
	HEADER STYLING
	-----------------------
	The following CSS covers the styling for the
	page header.
*/

header {
	position: relative;
	z-index: 30;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: white;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

header > .overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
}

header > .bottom-line {
	position: absolute;
	bottom: 0;
	background: var(--color-primary);
	height: 4px;
	left: 0;
	right: 0;
}

.header_logo {
	height: 300px;
	padding-bottom: 20px;
}

#content-header {
	min-height: 350px;
	height: 40%;
	height: 40vh;
	color: white;
}

#content-header > .header-content {
	margin-top: calc(10vh + 80px);
	height: calc(40vh - 80px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*
	FRONT PAGE STYLING
	-----------------------
	The following CSS covers the styling for the
	front page header.
*/

.front-page-image {
	height: var(--front-page-height);
	z-index: 50;
	min-height: 500px;
}

.front-page-image > div {
	transition: 0.2s ease-in-out;
}

.front-page-image > .logo {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
}

/*
	NAVIGATION MENU STYLING
	-----------------------
	The following CSS covers the styling for the
	navigation menus, specifically generic styling.
*/

nav .current_page_item > a, nav .current_page_parent > a, nav .current-menu-item > a {
	color: var(--color-secondary);
}

nav .menu li:hover > a, nav .menu li:focus > a, #menu-overflow li:hover > a {
	color: var(--color-secondary);
}

nav .menu li {
	list-style: none;
	transition: 0.2s ease-in-out;
	padding-left: 10px;
	padding-right: 10px;
	position: relative;
	display: block;
	white-space: nowrap;
}

nav .menu .menu-item-has-children {
	padding-right: 30px;
}

nav .menu > li {
	display: inline-block;
	height: calc(var(--nav-bar-height) - 12px);
}

nav .menu li a {
	transition: 0.2s ease-in-out;
	position: relative;
	text-shadow: 0px 0px 2px black;
}

nav a {
	color: var(--color-primary);
	text-decoration: none;
	font-size: var(--type-size-menu);
}

nav > nav-content {
	position: absolute;
	display: inline-block;
	text-align: right;
	right: 0;
	top: 0;
	bottom: 0;
	left: 0;
	height: var(--nav-bar-height);
}

nav home-link {
	position: absolute;
	left: calc(var(--logo-margin-left));
	width: calc(var(--main-logo-width) + (var(--main-logo-padding) * 2));
	text-align: center;
	z-index: 11;
	line-height: calc(var(--main-logo-width) / 2);
}

nav home-link img {
	transition: 0.2s ease-in-out;
	width: var(--main-logo-width);
	margin-top: var(--main-logo-top-margin-offset);
	display: inline-block;
}

nav home-link img:hover {
	width: var(--main-logo-width-hover);
	margin-top: var(--main-logo-top-margin-offset-hover);
}

nav > nav-content-left {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: rgba(255, 255, 255, .3);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: 0.2s ease-in-out;
}

nav > nav-content > site-links {
	position: absolute;
	right: 0;
	padding-right: var(--page-margin-right);
	left: calc(var(--logo-margin-left) + var(--main-logo-width) + (var(--main-logo-padding) * 2));
	display: inline-block;
	height: var(--nav-bar-height);
	transition: 0.2s ease-in-out;
	z-index: 20;
}

nav > nav-content > nav-background {
	position: absolute;
	right: 0;
	padding-right: var(--logo-margin-right);
	display: inline-block;
	height: var(--nav-bar-height);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: 0.2s ease-in-out;
}

nav .top-line {
	position: absolute;
	top: 11px;
	left: calc(var(--logo-margin-left) + var(--main-logo-width-sum) + var(--navigation-line-logo-offset));
	right: 0;
	height: 2px;
	background: var(--color-primary);
	z-index: 10;
}

nav .background-top {
	position: absolute;
	top: 0;
	left: calc(var(--logo-margin-left) + var(--main-logo-width-sum) + var(--navigation-line-logo-offset));
	right: 0;
	height: 11px;
	background: var(--color-menu-background);
	z-index: 10;
}

nav .bottom-line {
	position: absolute;
	bottom: 11px;
	left: calc(var(--logo-margin-left) + var(--main-logo-width-sum) + var(--navigation-line-logo-offset));
	right: 0;
	height: 2px;
	background: var(--color-primary);
	z-index: 10;
}

nav .background-bottom {
	position: absolute;
	bottom: 0;
	left: calc(var(--logo-margin-left) + var(--main-logo-width-sum) + var(--navigation-line-logo-offset));
	right: 0;
	height: 11px;
	background: var(--color-menu-background);
	z-index: 10;
}

nav .top-line-left {
	position: absolute;
	top: 11px;
	left: 0;
	height: 2px;
	background: var(--color-primary);
	z-index: 10;
}

nav .background-top-left {
	position: absolute;
	top: 0;
	left: 0;
	height: 11px;
	background: var(--color-menu-background);
	z-index: 10;
}

nav .bottom-line-left {
	position: absolute;
	bottom: 11px;
	left: 0;
	height: 2px;
	background: var(--color-primary);
	z-index: 1;
}

nav .background-bottom-left {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 11px;
	background: var(--color-menu-background);
	z-index: 10;
}

nav .border-end-right {
	position: absolute;
	top: -10px;
	left: calc(var(--logo-margin-left) + var(--main-logo-width-sum));
	height: 100px;
	z-index: 20;
	transition: 0.2s ease-in-out;
}

.border-end-right-crunched {
	left: calc((var(--logo-margin-left) + var(--main-logo-width-sum)) - (var(--main-logo-width-difference) / 2)) !important;
}

nav .border-end-left {
	position: absolute;
	top: -10px;
	right: calc(100% - var(--logo-margin-left));
	height: 100px;
	z-index: 20;
	transition: 0.2s ease-in-out;
}

.border-end-left-crunched {
	right: calc((100% - var(--logo-margin-left)) - (var(--main-logo-width-difference) / 2)) !important;
}

nav > nav-content > home-link {
	float: left;
}

.sub-menu:hover > .restricted-menu {
	bottom: 0 !important;
}

nav li > .sub-items {
	position: absolute;
	right: 0;
	top: calc(var(--nav-bar-item-height) / 2 - 12px);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 30px;
	transition: 0.2s ease-in-out;
	cursor: pointer;
}

nav .sub-menu li > .sub-items {
	top: calc(var(--nav-bar-item-height) / 2 - 25px);
	height: var(--nav-bar-item-height);
	bottom: auto;
}

.front-page-image nav li > .sub-items, #main-nav li >  .sub-items {
	bottom: 0;
}

.home-link-crunched {
	margin-top: var(--main-logo-top-margin-crunched-offset);
	width: var(--main-logo-width-crunched);
}

.home-link-crunched:hover {
	margin-top: var(--main-logo-top-margin-crunched-offset-hover);
	width: var(--main-logo-width-crunched-hover);
}

.sub-menu, .cart-content {
	border-radius: 10px;
}

.sub-menu-focussed {
	top: 100% !important;
	opacity: 1 !important;
	height: auto !important;
}

.sub-menu .sub-menu-focussed {
	top: 0 !important;
}

.sub-menu li {
	border-bottom: 1px solid var(--color-sub-menu-link-divider);
}

.sub-menu li a {
	display: inline-block;
	height: var(--nav-bar-item-height);
	line-height: var(--nav-bar-item-height);
}

.sub-menu li:last-child {
	border-bottom: none;
}

#main-nav nav .sub-menu li, .front-page-image nav .sub-menu li {
	display: block;
}

#main-nav .menu > li .sub-menu, .front-page-image .menu > li .sub-menu {
	height: 0;
	position: absolute;
	top: 110%;
	left: 0;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: 0.2s ease-in-out;
	width: auto;
	max-width: 250px;
	text-align: left;
	opacity: 0;
	overflow: hidden;
}

#main-nav .menu > li .sub-menu {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#main-nav .menu > li .sub-menu .sub-menu, .front-page-image .menu > li .sub-menu .sub-menu {
	background: transparent;
	backdrop-filter: none;
}

.front-page-image .menu > li > .sub-menu .sub-menu, #main-nav .menu > li > .sub-menu .sub-menu {
	opacity: 1;
	position: relative;
	display: block;
	box-shadow: none;
}

#main-nav .menu > li .sub-menu, .front-page-image .menu > li .sub-menu {
	z-index: 50;
}

#main-nav .sub-menu > li > .sub-menu, .front-page-image .sub-menu > li > .sub-menu {
	top: 0;
}

#main-nav .sub-menu li > .selector, .front-page-image .sub-menu li > .selector {
	position: absolute;
	top: 0;
	height: var(--nav-bar-item-height);
	left: 0;
	width: 0;
	background: var(--color-secondary);
	transition: 0.2s ease-in-out;
}

#main-nav .sub-menu > li:hover > .selector, .front-page-image .sub-menu > li:hover > .selector {
	width: 5px;
}

#main-nav .sub-menu > li:hover > .selector-fill {
	fill: var(--color-primary);
}

.nav-shadow {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--nav-bar-height);
	z-index: -1;
}

.restricted-menu-front, .restricted-menu-main {
	overflow-y: auto !important;
	top: 200% !important;
}

.fixed-nav {
	position: fixed;
	top: calc(var(--admin-header-space));
}

/* Hamgurger button */ 

hamburger {
	display: none;
	position: absolute;
	cursor: pointer;
	width: 40px;
	height: 30px;
	z-index: 40;
}

hamburger img, hamburger svg {
	width: 100%;
	transition: 0.2s ease-in-out;
}

hamburger .hamburger-top-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--color-primary);
	z-index: 1;
	opacity: 0;
	transition: 0.2s ease-in-out;
	transform-origin: top left;
}

hamburger .hamburger-bottom-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--color-primary);
	z-index: 1;
	opacity: 0;
	transition: 0.2s ease-in-out;
	transform-origin: left bottom;
}

.hamburger-top-bar-x {
	transform: rotate(36deg);
	opacity: 1 !important;
	right: -8px !important;
}

.hamburger-bottom-bar-x {
	right: -8px !important;
	transform: rotate(-36deg);
	opacity: 1 !important;
}

/* Business icons */ 

nav .svg-icon {
	transition: 0.2s ease-in-out;
	display: inline-block;
	position: relative;
}

.business-icons {
	position: absolute;
	left: var(--page-margin-left);
	z-index: 30;
}

/* Business icons */ 

header cart span {
	position: absolute;
	top: -4px;
	font-size: 12pt;
	width: 100%;
	text-align: center;
	right: 1px;
	transition: 0.2s ease-in-out;
}

#cart-image, #profile-image {
	margin-top: 20px;
	width: 40px;
	display: inline-block;
}

.cart-svg, .profile-svg, .overflow-svg {
	transition: 0.2s ease-in-out;
}

#main-nav profile:hover .profile-svg, .front-page-image profile:hover .profile-svg, menu-overflow:hover .overflow-svg {
	fill: var(--color-secondary) !important;
}

#main-nav cart:hover span, .front-page-image cart:hover span {
	color: var(--color-secondary);
}

#main-nav cart:hover .cart-svg, .front-page-image cart:hover .cart-svg {
	stroke: var(--color-secondary);
}

/* Cart content */ 

.cart-content {
	opacity: 0;
	background: var(--color-background-alpha);
	backdrop-filter: blur(10px);
	display: block;
	position: absolute;
	top: calc(var(--nav-bar-height) + 20px);
	padding: 15px;
	width: 250px;
	visibility: hidden;
	transition: 0.2s ease-in-out;
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	-ms-transition: .2s ease-in-out;
	text-align: left;
	line-height: normal;
	z-index: 30;
	left: var(--page-margin-right);
}

.cart-content #cart-total > div {
	display: inline-block;
	width: 45%;
	text-align: center;
}

.cart-content #cart-content {
	border: 2px solid var(--color-primary);
}

.cart-content #cart-border-left {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 15px;
	background: var(--color-menu-background);
}

.cart-content #cart-border-right {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 15px;
	background: var(--color-menu-background);
}

.cart-content #cart-border-bottom {
	position: absolute;
	bottom: 0;
	left: 15px;
	right: 15px;
	height: 15px;
	background: var(--color-menu-background);
}

.cart-content #cart-border-top {
	position: absolute;
	top: 0;
	left: 15px;
	right: 15px;
	height: 15px;
	background: var(--color-menu-background);
}

.cart-content a > span {
	vertical-align: top;
}

.cart-content a > div {
	display: inline-block;
	width: 25%;
	aspect-ratio: 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 20px;
}

.cart-content section > div {
	padding-top: 10px;
	padding-bottom: 10px;
}

.cart-content a {
	color: var(--color-text);
}

/* Menu overflow */

body > menu-overflow {
	display: none;
}

menu-overflow > svg {
	width: 50px;
	cursor: pointer;
}

#menu-overflow > li > .sub-menu {
	right: 0;
	left: auto !important;
}

/*
	FRONT PAGE NAVIGATION MENU STYLING
	-----------------------
	The following CSS covers the styling for the
	navigation menu on the front page.
*/

/* Nav Body */ 

header > nav {
	position: absolute;
	bottom: 10px;
	width: 100%;
}

header > nav .menu {
	display: inline-block;
}

header > nav .menu li {
	display: inline-block;
	list-style: none;
}

header > nav .menu li a, footer > nav .menu li a {
	color: var(--color-primary);
	text-decoration: none;
	font-size: var(--type-size-menu);
	padding-left: 10px;
	padding-right: 10px;
}

.front-page-image site-links .menu {
	display: inline-block;
	text-align: left;
	margin-top: 10px;
}

.front-page-image nav {
	height: var(--nav-bar-height);
	line-height: var(--nav-bar-height);
}

.front-page-image nav .sub-menu li {
	line-height: normal;
}

.restricted-menu-front {
	height: var(--restricted-menu-front) !important;
}

/* Hamburger Button */

.front-page-image hamburger {
	position: absolute;
	bottom: 10px;
	left: calc(50% - 25px);
	transition: 0.2s ease-in-out;
}

/* Menu Overflow */

.front-page-image #menu-overflow {
	position: absolute;
	top: 0;
	right: var(--page-margin-right);
}

.front-page-image .menu-overflow-svg {
	margin-top: 20px;
}

/* Business Icons */

.front-page-image > open-sign {
	position: fixed;
	display: block;
	padding: 5px;
	left: var(--page-margin-left);
	top: var(--admin-header-space);
	font-family: var(--font-header);
	background: var(--color-menu-background);
	line-height: normal;
	font-size: 12pt;
	border: 2px solid var(--color-primary);
	border-top: 0;
	transition: 0.2s ease-in-out;
}

/* Cart content */ 

.front-page-image .cart-content:hover {
	visibility: visible;
	opacity: 1;
	top: calc(var(--nav-bar-height) - 10px);
}

.front-page-image .cart-content {
	position: absolute;
}

.front-page-image cart:hover~.cart-content {
	visibility: visible;
	opacity: 1;
	top: calc(var(--nav-bar-height) - 10px);
}

header .cart-content {
	right: calc(50% - (var(--navigation-width) / 2));
}

/*
	MAIN NAVIGATION MENU STYLING
	-----------------------
	The following CSS covers the styling for the
	main navigation menu.
*/

/* Position the nav */
body > nav {
	position: absolute;
	top: 10vh;
	left: 0;
	right: 0;
	text-align: center;
	height: var(--nav-bar-height);
	z-index: 40;
}

#main-nav .menu > .current_page_item > .selector, #main-nav .menu > .current_page_parent > .selector {
	height: 10px !important;
	background: var(--color-secondary) !important;
}

#main-nav .sub-menu > .current_page_item > .selector {
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	width: 5px;
	background: var(--color-secondary);
	transition: 0.2s ease-in-out;
}

#main-nav .menu {
	line-height: var(--nav-bar-height);
	white-space: nowrap;
	text-align: left;
	margin-left: 70px;
}

#main-nav .sub-menu {
	line-height: normal !important;
}

#main-nav .menu > .current_page_item:hover > .selector, #main-nav .sub-menu > .current_page_item:hover > .selector, #main-nav .menu > .current_page_parent:hover > .selector {
	background: var(--color-secondary) !important;
}

#main-nav .menu > .page_item:hover > .selector, #main-nav .menu > .menu-item:hover > .selector {
	height: 10px;
}

#menu-overflow .selector {
	display: none;
}

#main-nav .sub-menu .current-menu-item > .selector {
	width: 5px;
}

#main-nav .menu > li > .selector {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--color-secondary);
	transition: 0.2s ease-in-out;
	height: 0;
}

.restricted-menu-main {
	height: var(--restricted-menu-main) !important;
}

/* Hamburger button */ 

#main-nav hamburger {
	right: var(--page-margin-right);
	top: 20px;
}

/* Business icons */ 

#main-nav cart, #main-nav profile {
	width: var(--navigation-cart-offset);
	text-align: center;
}

#main-nav cart span {
	position: absolute;
	top: 40%;
	font-size: 12pt;
	width: 100%;
	text-align: center;
	right: 1px;
	transition: 0.2s ease-in-out;
}

#content-header > open-sign {
	position: absolute;
	left: var(--page-margin-left);
	bottom: 0;
	font-family: var(--font-header);
	line-height: normal;
	padding: 5px;
	font-size: 15pt;
	background: var(--color-background-alpha);
	border: 2px solid var(--color-primary);
	border-bottom: 0;
	margin-bottom: 2px;
	white-space: nowrap;
}

/* Overflow button */ 

#main-nav .menu-overflow-svg {
	margin-top: 15px;
}

#main-nav #menu-overflow {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	z-index: 50;
}

/* Cart content */

#main-nav cart:hover~.cart-content {
	visibility: visible;
	opacity: 1;
	top: 100%;
}

#main-nav .cart-content:hover {
	visibility: visible;
	opacity: 1;
	top: 100%;
}

/*
	RESPONSE NAVIGATION MENU STYLING
	-----------------------
	The following CSS covers the styling for the
	responsive navigation menu.
*/

response-nav {
	display: none;
	position: absolute;
	top: calc(80px + 10vh);
	left: 0;
	right: 0;
	height: 0;
	z-index: 40;
	overflow: hidden;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

response-nav .menu > li .sub-menu {
	height: 0;
	position: absolute;
	top: 100%;
	left: 0;
	transition: 0.2s ease-in-out;
	overflow: hidden;
}

response-nav > .top-line {
	position: absolute;
	top: 0;
	right: 50%;
	left: 50%;
	height: 2px;
	background: var(--color-secondary);
	transition: 0.5s ease-in-out;
}

response-nav > .bottom-line {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 2px;
	background: var(--color-secondary);
}

response-nav .sub-menu {
	position: relative !important;
	opacity: 1 !important;
}

response-nav .menu li > .sub-items {
	position: absolute;
	right: 5px;
	width: 25px;
	aspect-ratio: 1/1;
	text-align: center;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: 0.2s ease-in-out;
}

response-nav .menu li > .selector {
	height: var(--nav-bar-item-height);
}

response-nav .menu li:hover > .selector {
	width: 5px;
}

response-nav nav {
	padding: var(--padding-normal);
}

response-nav .menu li {
	border-bottom: 1px solid var(--color-secondary);
	padding-left: var(--padding-normal);
	min-height: var(--nav-bar-item-height) !important;
	line-height: var(--nav-bar-item-height);
}

response-nav .menu li:last-child {
	border-bottom: none;
}

response-nav .current_page_item {
	text-shadow: none;
}

response-nav .current_page_item > .background, response-nav .current-menu-item > .background {
	position: absolute;
	top: 0;
	height: var(--nav-bar-item-height);
	right: 0;
	left: 0;
	background: var(--color-primary) !important;
	z-index: -1;
}

response-nav .current_page_item > .selector, response-nav .current_page_parent > .selector, response-nav .current-menu-item > .selector {
	background: var(--color-secondary) !important;
}

response-nav .current_page_item:hover > .selector, response-nav .current_page_parent:hover > .selector {
	background: var(--color-secondary) !important;
}

.response-nav-fixed {
	position: fixed;
	top: calc(80px + var(--admin-header-space));
	-webkit-backdrop: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.response-top-line-active {
	left: 0 !important;
	right: 0 !important;
}

response-nav > nav .menu .current_page_item > a, response-nav > nav .menu .current-menu-item > a {
	color: var(--color-background) !important;
}

response-nav .menu .current_page_item:hover > a, response-nav .menu .current_page_item:focus > a  {
	color: var(--color-background) !important;
}

/*
	FOOTER NAVIGATION MENU STYLING
	-----------------------
	The following CSS covers the styling for the
	footer navigation menu.
*/

footer nav .sub-menu {
	position: relative;
	height: 0;
	opacity: 1;
	overflow: hidden;
	padding: 0 !important;
}

footer nav li > .sub-items {
	bottom: auto;
	aspect-ratio: 1/1;
	width: 25px;
}

footer nav li {
	border-bottom: 1px solid var(--color-sub-menu-link-divider);
}

footer nav li:last-child {
	border-bottom: none;
}

/*
	PAGE CONTENT STYLING
	-----------------------
	The following CSS covers the styling for inner
	content on the page.
*/

.page {
	text-align: center;
	width: 100%;
	background-size: 150px 150px;
	background-repeat: repeat;
}

.page img {
	border-radius: 20px;
}

.container {
	position: relative;
	display: inline-block;
	width: var(--page-content-width);
	font-size: var(--type-size-content);
	text-align: left;
	z-index: 10;
}

.container > #left-line {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--color-secondary);
}

.container > #right-line {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--color-secondary);
}

.content {
	display: block;
	font-size: var(--type-size-content);
	padding-top: var(--padding-normal);
	padding-bottom: var(--padding-max);
	padding-left: var(--padding-normal);
	padding-right: var(--padding-normal);
}

.content > * {
	margin: var(--padding-normal);
}

.content-split .content {
	display: inline-block;
	width: 69%;
}

.content-split .sidebar {
	display: inline-block;
	width: 29%;
}

/*
	FOOTER STYLING
	-----------------------
	The following CSS covers the styling for the
	footer.
*/

footer {
	position: relative;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

footer > #footer-content {
	position: relative;
	margin-left: var(--page-margin-left);
	margin-right: var(--page-margin-right);
	text-align: center;
	background: var(--color-background-alpha);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(10px);
	padding-left: 23%;
}

footer .page-title, .site-title {
	text-shadow: none;
}

footer .footer-content {
	display: inline-block;
	width: 49%;
	vertical-align: top;
	position: relative;
	text-align: left;
}

footer #divider-left {
	position: absolute;
	top: var(--padding-normal);
	bottom: var(--padding-normal);
	width: 1px;
	background: var(--color-secondary);
	left: 33%;
}

footer #divider-right {
	position: absolute;
	top: var(--padding-normal);
	bottom: var(--padding-normal);
	width: 1px;
	background: var(--color-secondary);
	right: 33%;
}

footer .footer-content > .divider {
	display: none;
	background: var(--color-secondary);
}

footer .footer-content > section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--padding-normal);
	overflow: hidden;
}

footer .top-line {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--color-primary);
	z-index: 10;
}

footer #site-logo {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	text-align: center;
	display: flex;
	width: 32%;
}

footer #site-logo > section {
	padding: var(--padding-normal);
	width: 100%;
}

footer #footer-nav li > .selector, response-nav .menu li > .selector {
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	width: 0;
	background: var(--color-primary);
	transition: 0.2s ease-in-out;
}

footer #footer-nav .current_page_item .selector, footer #footer-nav .current_page_parent .selector {
	background: var(--color-secondary);
}

footer #footer-nav li:hover > .selector, footer #footer-nav li:focus > .selector {
	width: 5px;
	background: var(--color-secondary);
}

footer #footer-nav ul {
	list-style: none;
	padding: var(--padding-normal);
}

footer #footer-nav li, response-nav li {
	display: block !important;
	height: auto !important;
}

footer .menu li {
	padding: var(--padding-min);
	padding-left: var(--padding-normal);
}

footer .current_page_item > .selector, footer .current_page_parent > .selector {
	width: 5px !important;
}

footer .site-title {
	font-size: 35pt;
}

footer .site-tagline {
	font-size: 20pt;
}

/*
	MEDIA QUERIES
	-----------------------
	The following CSS covers the styling for media
	queries to handle responsive styling.
*/

@media (min-width: 8in) {

	#main-nav .menu > li:hover > .sub-menu, .front-page-image .menu > li:hover > .sub-menu, #menu-overflow > li:hover > .sub-menu {
		height: auto;
		opacity: 1;
		top: 100% !important;
	}

	.front-page-image .menu > li:hover > .sub-items, #main-nav .menu > li:hover > .sub-items {
		transform: rotate(90deg) !important;
	}

	.front-page-image .menu > li .sub-menu {
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
}

@media (max-height: 5in) {

	
}

@media (max-width: 20in) {

	* {
		--page-margin-left: 10%;
		--page-margin-right: 10%;
		--page-content-width: 80vw;
	}

	footer > #footer-content {
		padding-left: 26%;
	}
}

@media (max-width: 18in) {

	footer .site-title {
		font-size: 35pt;
	}

	footer .site-tagline {
		font-size: 20pt;
	}

	* {
		--page-margin-left: 7%;
		--page-margin-right: 7%;
		--page-content-width: 86vw;
	}

	footer > #footer-content {
		padding-left: 28%;
	}

}


@media (max-width: 14in) {

	* {
		--page-margin-left: 5%;
		--page-margin-right: 5%;
		--page-content-width: 90vw;
		--logo-margin-left: calc(var(--page-margin-left) + 100px);
	}

	.front-page-image cart:hover~.cart-content {
		visibility: visible;
		opacity: 1;
		top: 100%;
	}

	.front-page-image .cart-content:hover {
		visibility: visible;
		opacity: 1;
		top: 100%;
	}

	#main-nav business {
		left: 10px;
	}

	footer .site-title {
		font-size: 35pt;
	}

	footer .site-tagline {
		font-size: 20pt;
	}

	footer #site-logo {
		position: relative;
		width: 100%;
	}

	footer .footer-content {
		display: block;
		width: 100%;
		padding-bottom: var(--padding-normal);
	}

	footer > #footer-content {
		text-align: center;
		padding: 0;
	}

	footer .footer-content {
		display: inlin-block;
		width: 100%;
		text-align: left;
		padding-bottom: var(--padding-normal);
	}

	footer .footer-content > .divider {
		display: inline-block;
		position: absolute;
		right: var(--padding-normal);
		left: var(--padding-normal);
		height: 1px;
		top: inherit;
		width: auto;
	}

	footer #divider-left, footer #divider-right {
		display: none;
	}
}


@media (max-width: 8in) {

	* {
		--type-size-cover: 35pt;
		--type-size-header: 20pt;
		--main-logo-width: 140px;
	}

	.woocommerce-tabs {
		white-space: nowrap;
	}

	.woocommerce-tabs > ul {
		overflow-x: auto !important;
	}

	.woocommerce-tabs li {
		display: inline-block;
	}

	header business .svg-icon {
		position: absolute;
	}

	menu-overflow {
		display: none;
	}

	body {
		width: 100%;
		overflow-x: hidden;
	}

	#main-nav hamburger {
		display: inline-block;
		right: 20px;
	}

	header .site-tagline {
		font-size: 15pt;
	}

	.header_logo {
		height: 200px;
	}

	#main-nav hamburger {
		display: inline-block;
	}

	#main-nav .menu {
		display: none;
	}

	.sub-menu {
		max-width: 100% !important;
	}

	.front-page-image .cart-content {
		left: calc(50% - 125px);
	}

	.front-page-image cart span {
		top: 42%;
	}

	.front-page-image cart:hover~.cart-content {
		visibility: visible;
		opacity: 1;
		top: 0px;
	}

	.front-page-image .cart-content:hover {
		visibility: visible;
		opacity: 1;
		top: 0px;
	}

	.front-page-image li > .sub-items {
		display: inline-block;
		bottom: auto;
		aspect-ratio: 1/1;
		width: 25px;
	}

	site-links li {
		border-bottom: 1px solid var(--color-sub-menu-link-divider);
	}

	site-links li > a {
		display: inline-block;
		height: var(--nav-bar-item-height) !important;
		line-height: var(--nav-bar-item-height);
	}

	site-links li:last-child {
		border-bottom: none;
	}

	site-links li > .selector {
		position: absolute;
		top: 0;
		height: var(--nav-bar-item-height);
		left: 0;
		width: 0;
		background: var(--color-secondary);
		transition: 0.2s ease-in-out;
	}

	site-links li:hover > .selector {
		width: 5px;
		background: var(--color-secondary);
	}

	site-links .current_page_item > .selector {
		width: 5px !important;
	}

	response-nav {
		display: block;
	}

	.front-page-image business {
		left: 0;
		width: 100%;
		bottom: 0;
	}

	.business-icons {
		top: 5px;
	}

	header cart {
		position: absolute;
		bottom: 8px;
		left: calc(50% - 80px);
	}

	header profile {
		position: absolute;
		bottom: 8px;
		left: calc(50% + 40px);
	}

	#main-nav .cart-content {
		top: 20vh;
	}

	.cart-content {
		left: 0;
		right: auto;
		text-align: left;
	}

	.front-page-image hamburger {
		display: inline-block;
		bottom: 20px;
	}

	.front-page-image .menu li {
		display: block;
		height: auto;
		transition: 0.2s ease-in-out;
		padding-left: 10px;
	}

	.front-page-image nav {
		height: auto;
		line-height: normal;
		top: 100%;
	}

	.front-page-image site-links {
		height: 0;
		overflow: hidden;
		position: absolute;
		top: 0;
		transition: 0.2s ease-in-out;
		background: var(--color-background-alpha);
		backdrop-filter: blur(5px);
		display: block;
		text-align: center;
		width: 100%;
	}

	.front-page-image site-links > div {
		border-bottom: 4px solid var(--color-primary);
		padding: 20px;
	}

	.front-page-image site-links .menu {
		width: 100%;
	}

	.front-page-nav-expanded {
		height: var(--front-page-nav-height) !important;
		overflow-y: auto !important;
	}

	.front-page-hamburger-expanded {
		bottom: var(--front-page-nav-height) !important;
	}

	.front-page-content-moved {
		top: calc(50% - (var(--front-page-nav-height) / 2)) !important;
	}

	#cart-image, #profile-image {
		width: 32px;
	}

	#main-nav cart, #main-nav profile {
		width: auto;
	}

	#main-nav cart span {
		top: 42%;
	}

	#main-nav cart:hover~.cart-content {
		top: calc(var(--nav-bar-height) + 10vh);
	}

	#main-nav .cart-content:hover {
		top: calc(var(--nav-bar-height) + 10vh);
	}

	.fixed-nav cart:hover~.cart-content {
		top: var(--nav-bar-height) !important;
	}

	.fixed-nav .cart-content:hover {
		top: var(--nav-bar-height) !important;
	}

	.front-page-image site-links {
		transition: 0.2s ease-in-out;
		background: var(--color-background-alpha);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		display: block;
		text-align: center;
	}

	.front-page-image business > open-sign {
		font-size: 15pt;
		left: 1%;
	}

	#main-nav business > open-sign {
		top: 96%;
		padding: 5px;
		font-size: 10pt;
		left: -20px;
		border: none;
	}

	.sub-menu .menu-item {
		background-image: none !important;
	}

	.front-page-image .menu > li > .sub-menu {
		position: relative;
		height: 0;
		opacity: 1;
		text-align: left;
	}

	.front-page-image li > .sub-items {
		display: inline-block;
		bottom: auto;
		aspect-ratio: 1/1;
		width: 25px;
	}

	.cart-content {
		left: 0 !important;
		width: calc(100% - 30px);
		position: fixed;
	}

	nav .border-end-right {
		left: calc(50% + (var(--main-logo-width) / 2));
	}

	.border-end-right-crunched {
		left: calc(50% + (var(--main-logo-width-crunched) / 2)) !important;
	}

	nav .border-end-left {
		left: auto !important;
		right: calc(50% + (var(--main-logo-width) / 2));
	}

	.border-end-left-crunched {
		left: auto !important;
		right: calc(50% + (var(--main-logo-width-crunched) / 2)) !important;
	}

	nav home-link {
		left: calc(50% - (var(--main-logo-width-sum) / 2));
	}

	nav home-link img:hover {
		width: var(--main-logo-width-hover);
	}

	nav > nav-content > site-links, nav > nav-content > nav-background  {
		padding-right: 0;
		left: calc(50% + (var(--main-logo-width) / 2)) !important;
	}

	nav > nav-content-left {
		width: auto !important;
		right: calc(50% + (var(--main-logo-width) / 2)) !important;
	}

	.container {
		width: 100%;
	}

	.container > #left-line {
		width: 0;
	}

	.container > #right-line {
		width: 0;
	}

	#main-nav .menu {
		display: none;
	}

	footer > #footer-content {
		margin-left: 0;
		margin-right: 0;
		position: relative;
		padding: 0;
	}

	footer #site-logo {
		position: relative;
		width: 100%;
	}

	footer .footer-content {
		display: block;
		width: 100%;
		padding-bottom: var(--padding-normal);
	}

	footer .footer-content > .divider {
		display: inline-block;
		position: absolute;
		right: var(--padding-normal);
		left: var(--padding-normal);
		height: 1px;
		top: inherit;
		width: auto;
	}
}