:root {
	--body-font: 'poppins', sans-serif;
	--body-font-weight: 300;
	--body-font-bold-weight: 500;
	--heading-font: 'griffon', serif;
	--heading-font-weight: 700;
	--subheading-font: 'poppins', sans-serif;
	--subheading-font-weight: 300;
	--subheading-font-bold-weight: 500;
	--subheading-font-size: 0.7em;
	--subheading-font-letter-spacing: 0.05em;
	--subheading-alt-font: 'mrs-eaves', serif;
	--subheading-alt-font-weight: 700;
	--subheading-alt-font-bold-weight: 700;
	--script-font: 'austin-pen', sans-serif;
	--condensed-font: 'alternate-gothic-condensed-a', sans-serif;
	--script-font-weight: 700;
	--full-width: 100%;
	--body-width: 1280px;
	--medium-width: 1000px;
	--narrow-width: 750px;
	--brown:#5d423b;
	--brown-text:#3f160f;
	--orange:#a85e38;
	--orange-text:#a85e38;
	--green:#3c4125;
	--green-text:#3c4125;
	--old-green:#8c8945;
	--old-green-text:#8c8945;
	--maroon:#3f160f;
	--maroon-text:#3f160f;
	--white:#ffffff;
	--white-text:#ffffff;
	--alt-tan: #faf3ec;
	--tan: #f8efe6;
	--tan-text: #f8efe6;
	--dark-tan: #e7c7a6;
	--dark-tan-text: #e7c7a6;
	--black: #000000;
	--black-text: #000000;
}
html, body {overscroll-behavior: none;}
body {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-family: var(--body-font);font-weight: var(--body-font-weight);font-size: 1.3em;}
@media all and (max-width: 768px) {
	body {font-size: 1.1em;}
}
:focus {outline: none;}
.static-image-header {width:100%;height:100px;background-size:cover;background-position:center center;background-image:url('/img/coffee-bean-header.webp');}
.static-coffee-image-header {width:100%;height:500px;background-size:cover;background-position:center center;}
.template-coffee-product {background-position:center center;background-image:url('/img/coffee-page-bg2.png');}
.btn-primary, .btn {background-color:var(--orange);border:1px solid var(--orange-text);color:var(--white-text);text-decoration:none;padding:0.3rem 0.5rem;text-transform:uppercase;font-size:var(--subheading-font-size);font-weight:var(--subheading-font-bold-weight);letter-spacing:var(--subheading-font-letter-spacing);transition: background-color 0.3s ease, color 0.3s ease;}
.btn:hover {background-color:transparent;color:var(--orange-text);}
.btn.disabled, .btn:disabled, fieldset:disabled .btn{background-color:#ccc;border-color:#ccc;}
.btn.orange {background-color:var(--orange);border:1px solid var(--orange-text);color:var(--white-text);}
.btn.orange:hover {background-color:transparent;color:var(--orange-text);}

#slideout-menu {display:none;position: fixed;top: 20vh;right: -300px;transform: translateY(-20%);width: 250px;background-color: var(--black);color: var(--orange-text);box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);transition: right 0.3s ease;z-index: 1000;padding: 0.8em;border: 1px solid var(--orange-text);}
body.loadedMenu #slideout-menu,body.loadedMenu #menu-tab {opacity: 1;display: block;}
#slideout-menu ul {list-style: none;padding: 0;margin: 0;margin-left:50px;}
#slideout-menu ul li {margin: 0;line-height:1.7;}
#slideout-menu ul li a,#slideout-menu ul li.cart-menu-button {color: var(--orange-text);text-decoration: none;font-size: 0.8em;font-weight:400;}
#slideout-menu ul li a:hover,#slideout-menu ul li.cart-menu-button:hover {cursor:pointer;color: var(--white-text);text-decoration: none;}
#menu-tab {display:none;position: fixed;top: 20vh;right: 0;transform: translateY(-20%);width: 49px;background-color: var(--black);color: var(--orange-text);text-align: center;cursor: pointer;z-index: 1001;padding: 0.5em 0 1em;writing-mode: vertical-lr;text-orientation: mixed;font-size: 1em;box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);transition: right 0.3s ease;border: 1px solid var(--orange-text);border-right:0;font-weight:900;letter-spacing:0.12em;}
#menu-tab span {margin-left:10px;display:inline-block;transform:rotate(180deg);}
#menu-tab img {width: 40px;height: 40px;margin-bottom: 0.5em;position:relative;left:-7px}
.os-windows {
	#menu-tab span {margin-left:auto;transform:rotate(180deg) translateX(-10px);}
	#menu-tab img {padding-left:5px;left:auto;}
}
#menu-close {position: absolute;top: 50%;left: 15px;transform: translateY(-50%);width: 50px;height:200px;background-color: var(--black);color: var(--orange-text);text-align: center;cursor: pointer;writing-mode: vertical-lr;text-orientation: mixed;font-size: 1em;font-weight:900;letter-spacing:0.12em;}
#menu-close span {display:inline-block;transform:rotate(180deg);}
#menu-close img {width:40px;height:40px;margin-bottom: 0.5em;margin-left:-8px;}


.brown-bg {background-color:var(--brown);color:var(--white-text);}
.brown-bg a {color:var(--white-text);}
.brown-bg a[title~=button] {border-color:var(--white-text);color:var(--white-text);}
.brown-bg a[title~=button]:hover {background-color:var(--white);color:var(--brown-text);}
.brown-bg .heading {color:var(--orange-text);}
.brown-bg .subheading {color:var(--white-text);}

.orange-bg {background-color:var(--orange);color:var(--brown-text);}
.orange-bg a {color:var(--white-text);}
.orange-bg a[title~=button] {border-color:var(--maroon-text);color:var(--maroon-text);}
.orange-bg a[title~=button]:hover {background-color:var(--maroon);color:var(--orange-text);}
.orange-bg .heading {color:var(--maroon-text);}
.orange-bg .subheading {color:var(--white-text);}

.maroon-bg {background-color:var(--maroon);color:var(--white-text);}
.maroon-bg a {color:var(--white-text);}
.maroon-bg a[title~=button] {border-color:var(--white-text);color:var(--white-text);}
.maroon-bg a[title~=button]:hover {background-color:var(--white);color:var(--maroon-text);}
.maroon-bg .heading {color:var(--orange-text);}
.maroon-bg .subheading {color:var(--white-text);}

.black-bg {background-color:var(--black);color:var(--white-text);}
.black-bg a {color:var(--white-text);}
.black-bg a[title~=button] {border-color:var(--orange-text);color:var(--orange-text);}
.black-bg a[title~=button]:hover {background-color:var(--orange);color:var(--black-text);}
.black-bg .heading {color:var(--orange-text);}
.black-bg .subheading {color:var(--white-text);}

.green-bg {background-color:var(--green);color:var(--white-text);}
.green-bg a {color:var(--white-text);}
.green-bg a[title~=button] {border-color:var(--white-text);color:var(--white-text);}
.green-bg a[title~=button]:hover {background-color:var(--white);color:var(--green-text);}
.green-bg .heading {color:var(--maroon-text);}
.green-bg .subheading {color:var(--white-text);}

.tan-bg {background-color:var(--tan);color:var(--black-text);}
.tan-bg a {color:var(--black-text);}
.tan-bg a[title~=button] {border-color:var(--black-text);color:var(--black-text);}
.tan-bg a[title~=button]:hover {background-color:var(--black);color:var(--tan-text);}
.tan-bg .heading {color:var(--orange-text);}
.tan-bg .subheading {color:var(--black-text);}

.white-bg {background-color:var(--white);color:var(--black-text);}
.white-bg a {color:var(--black-text);}
.white-bg a[title~=button] {border-color:var(--black-text);color:var(--black-text);}
.white-bg a[title~=button]:hover {background-color:var(--black);color:var(--white-text);}
.white-bg .heading {color:var(--orange-text);}
.white-bg .subheading {color:var(--black-text);}

.form-control {display: block;width: 100%;padding: 0.375rem 0.75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: 0.25rem;transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;margin-bottom:1rem;}
.form-control:focus {color: #495057;background-color: #fff;border-color: #80bdff;outline: 0;box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);}
.form-control-group label {text-transform:uppercase;font-size:0.8em;letter-spacing:0.1em;}
.template-image-section .kona-logo-icon {max-width:10vw;opacity:0.8;position: absolute;bottom: -100px;right: 60px;width: 100px;z-index: 1;transition: transform 0.1s linear;}
.template-image-section .grid {position: relative;}
.template-image-section .grid img {width: 100%; display: block;}
@media all and (max-width: 768px) {
	.template-image-section .kona-logo-icon {max-width: 100px;bottom:-30px}
}

.page-title-on-label {z-index:99;position:fixed;top:100px;margin:1em;left:100px;background: var(--tan);padding: 1em;border: 10px solid var(--orange);text-align: center;max-width:420px;min-width:250px;transition: opacity 0.5s ease-in-out;}
@media all and (max-width: 768px) {
	.page-title-on-label {left:0;}
}

.page-title-on-label h2 {margin-top: 2em;letter-spacing: 0.1em;font-size: 0.6em;color: var(--black);font-family: var(--subheading-font);font-weight: var(--heading-font-weight);text-transform: uppercase;}
.page-title-on-label h1 {margin-top:0;color: var(--orange);font-size: 1em;font-family: var(--subheading-font);font-weight: 700;letter-spacing: 0.05em;text-transform: uppercase;line-height: 1.3em;}
.os-windows .page-title-on-label h1 {margin-top:0.125em;}
.page-title-on-label h3 {padding-top: 0.5em;padding-bottom: 0.5em;border-top: 1px solid var(--black);border-bottom: 1px solid var(--black);letter-spacing: 0.07em;font-size: 0.7em;color: var(--black);font-family: var(--subheading-alt-font);font-weight: 400;text-transform: uppercase;margin-bottom: 0rem;}

.page-title-on-label .secondary-grid {margin-top:-1px;display:grid;grid-template-columns:1fr 1fr;grid-gap:1em;border-top:1px solid var(--black);border-bottom:1px solid var(--black);overflow: hidden;gap: 1rem;}
.page-title-on-label .secondary-grid div {padding:0.5rem 0;position:relative;display:grid;grid-template-columns:3rem 2fr;letter-spacing:0.07em;font-size:0.6em;color:var(--black);font-family:var(--subheading-alt-font);font-weight:400;text-transform:uppercase;}
.page-title-on-label .secondary-grid div strong {align-self:center;text-align:left;display:block;color:var(--orange);font-size:1.9em;font-family:var(--condensed-font);font-weight:600;letter-spacing:0.001em;}
.os-windows .page-title-on-label .secondary-grid div strong {margin-top:0.125em;line-height:1px;}
.page-title-on-label .secondary-grid div span {display:block;text-align:left;align-self:center;line-height: 1.15;}
.page-title-on-label .secondary-grid div::before, 
.page-title-on-label .secondary-grid div::after {content: '';position: absolute;background-color: var(--black);z-index: 1;}
.page-title-on-label .secondary-grid div::after {inline-size: 100vw;block-size: 1px;inset-inline-start: 0;inset-block-start: calc(0.5rem * -1);}
.page-title-on-label .secondary-grid div::before {inline-size:1px;block-size: 100vh;inset-inline-start: calc(0.5rem * -1);}

.page-title-on-label .scripted-section em {display:block;width:100%;font-family:var(--script-font);font-size:0.9em;text-transform:none;font-style:normal;margin-bottom:-0.45em;margin-top:0.5em;}
.page-title-on-label .scripted-section span {padding-top: 0;padding-bottom: 0.5em;letter-spacing: 0.07em;font-size: 0.7em;color: var(--black);font-family: var(--subheading-alt-font);font-weight: 400;text-transform: uppercase;}

footer {background-color:#000000;}
footer a {color:#ffffff;text-decoration:none;}
footer a:hover {color:var(--orange-text);}
footer .grid {background-color:#000000 !important;color:#ffffff;display:grid;grid-template-columns:175px 1fr 175px;grid-gap:1em;padding:2em 1em 3em;text-align:center;max-width:1100px;width:calc(100% - 6em);margin:0 auto;font-size:0.9em;font-weight:400;line-height:var(--text-line-height)}
footer .logo-contact-info {grid-column:2/3;}
footer .logo-contact-info>a {display:inline-block;}
footer .logo-contact-info img {width:350px;max-width: 80vw;}
footer .logo-contact-info span {color:var(--orange-text);font-size:0.8em;letter-spacing:0.1em;font-family:var(--heading-font);}
footer .logo-contact-info .email {display:inline-block;padding:0 0.5em;}
footer .logo-contact-info .phone {display:inline-block;padding:0 0.5em;}
footer .social-links {margin-top:1em;}
footer .social-links a {text-decoration:none;}
footer .social-links svg {margin:0 5px;}
footer .social-links a.newsletter {top:13px;margin-left:6px;background:var(--orange);border-radius:50%;width:35px;height:35px;display:inline-block;position:relative;}
footer .social-links a.newsletter svg {width:23px;height:21px;margin:0;position:absolute;top:7px;left:6px;}
footer .footer-links {grid-column:4/5;align-self:end;margin-bottom:4em;text-align:left;}
footer .footer-links a {display:block;font-size:0.8em;text-transform:uppercase;}
footer .footer-links a:hover {color:var(--orange-text);}

footer .organic img {width:60px;height:60px;margin-right:20px;justify-self:end;}
footer .organic {margin-top:3em;grid-column:1/4;display:grid;grid-template-columns:210px 1fr 164px;align-items:center;font-size:0.7em;text-align:left}
@media (max-width: 1200px) {
	footer .grid {grid-template-columns: 1fr;padding:3em 0;}
	footer .logo-contact-info {grid-column: 1/2;grid-row:1/2;}
	footer .logo-contact-info .email {padding: 0; margin-top:0.5em;display:block;}
	footer .logo-contact-info .email span {display:block;margin-bottom:0.25em;}
	footer .logo-contact-info .phone {padding: 0; margin-top:0.5em;display:block;}
	footer .logo-contact-info .phone span {display:block;margin-bottom:0.25em;}
	footer .logo-contact-info .address {padding: 0; margin-top:0.5em;display:block;margin-bottom:3em;}
	footer .logo-contact-info .address span {display:block;margin-bottom:0.25em;}
	footer .footer-links {grid-column: 1/2;grid-row:2/3;margin-bottom:0;text-align: center;display: flex;gap:1em;justify-content: center;}
	footer .footer-links svg {display: none;}
	footer .organic {grid-column: 1/2;grid-row:3/4;grid-template-columns: 1fr;gap:20px;margin-top:1em;}
	footer .organic img {margin: 0;grid-column:1/2;grid-row:1/2;justify-self:center;}
	footer .organic span {margin: 0;grid-column:1/2;grid-row:2/3;}
}
@media (max-width: 640px) {
	footer .grid {width: calc(100% - 3em);}
}

.hidden {display:none;visibility: hidden;}
/* body #body-container {transform: translateX(100%);transition:none;overflow-x:clip;}
body.leaving #body-container {transform: translateX(100%) !important;}
body.loaded #body-container {transform: none;transition: transform 0.75s ease-in-out;} */

body #body-container {opacity:0;}
body.loaded #body-container {opacity:1;transition:opacity 0.75s ease-in-out;}

.account-label {margin-top:1em;color:var(--black);z-index:99;top:100px;left:100px;background: var(--tan);padding: 1em;border: 10px solid var(--orange);text-align: left;max-width:420px;min-width:250px;transition: opacity 0.5s ease-in-out;}
.account-label a {color:var(--black) !important;text-decoration:none;}
.account-label a:hover {color:var(--orange-text) !important;text-decoration:none;}
.account-label h2 {text-align:left;margin-top:0em;letter-spacing: 0.1em;font-size: 0.6em;color: var(--black);font-family: var(--subheading-font);font-weight: var(--heading-font-weight);text-transform: uppercase;}
.account-label h1 {margin-top:0;color: var(--orange);font-size: 1em;font-family: var(--subheading-font);font-weight: 700;letter-spacing: 0.05em;text-transform: uppercase;line-height: 1.3em;}
.account-label h3 {padding-top: 0.5em;padding-bottom: 0.5em;border-top: 1px solid var(--black);border-bottom: 1px solid var(--black);letter-spacing: 0.07em;font-size: 0.7em;color: var(--black);font-family: var(--subheading-alt-font);font-weight: 400;text-transform: uppercase;}
.account-label .secondary-grid {margin-top:-1px;display:grid;grid-template-columns:1fr 1fr;grid-gap:1em;border-top:1px solid var(--black);border-bottom:1px solid var(--black);overflow: hidden;gap: 1rem;}
.account-label .secondary-grid div {padding:0.5rem 0;position:relative;display:grid;grid-template-columns:3rem 2fr;letter-spacing:0.07em;font-size:0.6em;color:var(--black);font-family:var(--subheading-alt-font);font-weight:400;text-transform:uppercase;}
.account-label .secondary-grid div strong {align-self:center;text-align:left;display:block;float:left;font-weight:700;color:var(--orange);font-size:1.9em;font-family:var(--condensed-font);font-weight:700;letter-spacing:0.001em;}
.account-label .secondary-grid div span {display:block;float:left;text-align:left;align-self:center;}
.account-label .secondary-grid div::before, 
.account-label .secondary-grid div::after {content: '';position: absolute;background-color: var(--black);z-index: 1;}
.account-label .secondary-grid div::after {inline-size: 100vw;block-size: 1px;inset-inline-start: 0;inset-block-start: calc(0.5rem * -1);}
.account-label .secondary-grid div::before {inline-size:1px;block-size: 100vh;inset-inline-start: calc(0.5rem * -1);}
.account-label .scripted-section em {display:block;width:100%;font-family:var(--script-font);font-size:1em;text-transform:none;font-style:normal;margin-bottom:-0.75em;margin-top:0.5em;}
.account-label .scripted-section span {padding-top: 0;padding-bottom: 0.5em;letter-spacing: 0.07em;font-size: 0.7em;color: var(--black);font-family: var(--subheading-alt-font);font-weight: 400;text-transform: uppercase;}
.account-label .edit {float:right;}
.account-label a.edit:hover svg path {fill:var(--orange);}
.account-label a.edit svg {width:21px;}
.account-box-grid {margin:3em auto 0;display:grid;grid-template-columns:1fr 1fr;grid-gap:1em;}
.no-account-box-grid {margin:3em auto 0;display:grid;grid-template-columns:1fr;grid-gap:1em;}
@media all and (max-width: 768px) {
	.account-box-grid {grid-template-columns:1fr;}
}

input[type="checkbox"]:checked + label {color: var(--orange-text);font-weight: bold;}
input[type="checkbox"] {appearance: none;-webkit-appearance: none;-moz-appearance: none;width: 19px;height: 19px;border: 1px solid var(--orange-text);border-radius: 50%;outline: none;cursor: pointer;position: relative;top: 3px;margin-right: 5px;}
input[type="checkbox"]:checked {background-color: var(--orange-text);border: 1px solid var(--orange-text);}
input[type="checkbox"]:focus {box-shadow: 0 0 5px rgba(255, 165, 0, 0.5);}	

.modal {display: none;position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100vh;overflow: auto;background-color: rgba(0, 0, 0, 0.8);}
.modal .modal-content {background-color:var(--dark-tan);margin: 0 auto;padding: 20px;border: 10px solid var(--orange);width:800px;max-width: 80%;position: relative;line-height:var(--text-line-height);transform: translateY(calc(50vh - 50%));}
.modal .close {position: absolute;top: 0;right: 0;color: var(--brown);font-size: 28px;font-weight: bold;padding: 4px 4px;cursor: pointer;line-height:1em;}
.modal .close:hover,.modal .close:focus {color: var(--orange);text-decoration: none;cursor: pointer;}
.modal input.form-control {width:calc(100% - 2em);margin-bottom:0;}
.modal select.form-control {width:calc(100% - 0.5em);margin-bottom:0;}
#shippingAddressModal.modal .modal-content {width:500px;}
#billingAddressModal.modal .modal-content {width:500px;}
.modal .form-group label {text-transform:uppercase;font-size:0.7em;letter-spacing:0.1em;position:relative;bottom:-0.5em;}
.modal h2 {text-transform:uppercase;font-size:0.8em;}
.modal .button {font-size:13px;background-color:var(--orange);font-family:var(--body-font);border:1px solid var(--white-text);color:var(--white-text);text-decoration:none;padding:0.6rem 0.6rem;text-transform:uppercase;font-weight:var(--subheading-font-bold-weight);letter-spacing:var(--subheading-font-letter-spacing);transition: background-color 0.3s ease, color 0.3s ease;}
.modal .button:hover {background-color:var(--brown);color:var(--white);cursor:pointer}
.modal .save-button-div {margin-top:1em;}
body.modal-open {padding-right:var(--scrollbar-width);overflow: hidden;}

#cartModal {display: none;position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100vh;overflow: auto;background-color: rgba(0, 0, 0, 0.8);}
#cartModal .modal-content {border-radius:0;background-color:var(--dark-tan);margin: 0 auto;padding: 20px;border: 10px solid var(--orange);width:800px;max-width: 80%;position: relative;line-height:normal;transform: translateY(calc(50vh - 50%));}
#cartModal .close {position: absolute;top: 0;right: 0;color: var(--brown);font-size: 28px;font-weight: bold;padding: 4px 4px 0 0;cursor: pointer;line-height:1em;}
#cartModal .close:hover,#cartModal .close:focus {color: var(--orange);text-decoration: none;cursor: pointer;}

#cartModal .cart-thumbnail {width: 75px;height: 75px;object-fit: cover;object-position: center;}
#cartModal .quantity {font-size:0.75em;line-height: 1.3;}
#cartModal .quantity span {background:var(--orange);color:var(--tan);text-align:center;font-size:17px;line-height:21px;display:inline-block;border:1px solid var(--orange);width:17px;height:17px;border-radius:50%;}
#cartModal .quantity span:hover {cursor:pointer;background:var(--tan);color:var(--orange);}
#cartModal .quantity div.amount {text-align:center;font-size:14px;line-height:10px;font-family:var(--subheading-font);color:var(--black);display:inline-block;width:30px;}
#cartModal #cartItems table {border-top:1px solid var(--black);font-size:0.7em;width:100%;border-collapse:collapse;}
#cartModal #cartItems table tr.cart-item td {border-bottom:1px solid var(--black);padding:10px 0;}
#cartModal #cartItems table tr.cart-item:last-child td {border-bottom:0;}
#cartModal h3 {line-height:1;font-size:1em;display:inline-block;margin-right:1em;margin-bottom:0;}
#cartModal p {margin:0;padding:0;line-height:1.3;font-size:0.9em;}
#cartModal img {margin:10px 0;}
#cartModal h2 {font-family: var(--subheading-font);text-transform: uppercase;line-height: 1;font-size:0.9em;}
.text-right {text-align:right;}
.text-center {text-align:center;}
#cartModal .cart-total {font-size:1em;line-height:4;font-family: var(--subheading-font);text-transform: uppercase;}
#cartModal .cart-modal-item-delete {width: 18px;display: inline-block;border:1px solid var(--orange);background: var(--orange);border-radius: 50%;height: 18px;line-height: 17px;text-align: center;font-size: 13px;color: #fff;}
#cartModal .cart-modal-item-delete:hover {background: var(--tan);color: var(--orange);cursor: pointer;}
#cartModal .button {font-size:0.9em;background-color:var(--orange);font-family:var(--body-font);border:1px solid var(--white-text);color:var(--white-text);text-decoration:none;padding:0.6rem 0.6rem;text-transform:uppercase;font-weight:var(--subheading-font-bold-weight);letter-spacing:var(--subheading-font-letter-spacing);transition: background-color 0.3s ease, color 0.3s ease;}
#cartModal .button:hover {background-color:var(--brown);color:var(--white);cursor:pointer}
#cartModal .modal-content tr.cart-item td:last-child {width:35px;}

@media all and (max-width: 500px) {
	#cartModal .modal-content {width:100%;max-width:100%;}
	#cartModal .modal-content tr.cart-item td:first-child {display:none;}
	#cartModal .modal-content tr.cart-item td:last-child {display:none;}
	#cartModal .modal-content tr.cart-total td:last-child {display:none;}
}

#fixed-mobile-menu {position: fixed;top: 0;left: 0;width: 100%;background-color: black;color: var(--orange);z-index: 1000;display: flex;justify-content: space-between;align-items: center;}
/* #fixed-mobile-menu .menu-icon {font-size: 35px;padding:0 10px;cursor: pointer;}
#fixed-mobile-menu .menu-icon:hover {opacity: 0.8;} */
#fixed-mobile-menu .logo-icon img {height: 30px;}
#fixed-mobile-menu .logo-icon {padding:10px;}

@media all and (max-width: 768px) {
	#fixed-mobile-menu {display:flex !important;}
	#menu-tab {display:none !important;}
	#menu-close {display:none !important;}
	#slideout-menu {font-size:2em;right:-100%;width:100%;border-color:#000;top:144px;}
	#slideout-menu ul li {text-align:center;}
	#slideout-menu ul {margin-left:0;}
}

/* Hamburger Styles */
.menu-icon {
	display: inline-block;
	cursor: pointer;
	padding:0 10px;
}

.bar {
	width: 30px;
	height: 3px;
	background-color: var(--orange);
	margin: 6px 0;
	transition: 0.4s;
}

/* Animate Hamburger to X */
.menu-icon.change .bar:nth-child(1) {
	transform: rotate(-45deg) translate(-4px, 6px);
}

.menu-icon.change .bar:nth-child(2) {opacity: 0;}

.menu-icon.change .bar:nth-child(3) {
	transform: rotate(45deg) translate(-7px, -8px);
}

.magic-login-button {border-radius:0;}
.magic-login-button:hover {border-color:var(--orange);background-color:var(--white);color:var(--orange);}
.form-label {text-transform: uppercase;font-size: 0.7em;margin-bottom: 0;}

@media all and (max-width: 768px) {
	.page-title-on-label {position:relative;top:50px;left:0;margin:0;width:100%;opacity:1 !important;}
	.mobile-font-header a {text-decoration: none;margin-top: 0;color: var(--orange);font-size: 19px;font-family: var(--subheading-font);font-weight: 700;letter-spacing: 0.05em;text-transform: uppercase;line-height: 50px;margin-left: 16px;position: relative;top: 2px;}
}
@media all and (max-width: 500px) {
	.mobile-font-header a {font-size:16px;}
}
@media all and (max-width: 420px) {
	.mobile-font-header a {font-size:14px;}
}
@media all and (max-width: 360px) {
	.mobile-font-header a {font-size:12px;}
}