/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*		Global Settings		*/

:root {
    --main-bg-color: #FFBBDD;
    --form-bg-color: #fff;
    --text-color: #FF51B0;
    --header-bg-color: #FFF65A;
    --dark-text-color: #000000;
    --blue-bg-color: #bbd8ff;
    --white-color: #fff;
    --blue-dark-color: #005785;
    --blue-light-color: #5ad0ff;
    --black-color: #000000;

	utopia.io
  --space-3xs: clamp(0.31rem, calc(0.31rem + 0.00vw), 0.31rem);
  --space-2xs: clamp(0.56rem, calc(0.54rem + 0.11vw), 0.63rem);
  --space-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem);
  --space-s: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
  --space-m: clamp(1.69rem, calc(1.62rem + 0.33vw), 1.88rem);
  --space-l: clamp(2.25rem, calc(2.16rem + 0.43vw), 2.50rem);
  --space-xl: clamp(3.38rem, calc(3.24rem + 0.65vw), 3.75rem);
  --space-2xl: clamp(4.50rem, calc(4.33rem + 0.87vw), 5.00rem);
  --space-3xl: clamp(6.75rem, calc(6.49rem + 1.30vw), 7.50rem);

/* One-up pairs */
  --space-3xs-2xs: clamp(0.31rem, calc(0.20rem + 0.54vw), 0.63rem);
  --space-2xs-xs: clamp(0.56rem, calc(0.43rem + 0.65vw), 0.94rem);
  --space-xs-s: clamp(0.88rem, calc(0.74rem + 0.65vw), 1.25rem);
  --space-s-m: clamp(1.13rem, calc(0.86rem + 1.30vw), 1.88rem);
  --space-m-l: clamp(1.69rem, calc(1.40rem + 1.41vw), 2.50rem);
  --space-l-xl: clamp(2.25rem, calc(1.73rem + 2.61vw), 3.75rem);
  --space-xl-2xl: clamp(3.38rem, calc(2.81rem + 2.83vw), 5.00rem);
  --space-2xl-3xl: clamp(4.50rem, calc(3.46rem + 5.22vw), 7.50rem);

/* Custom pairs */
  --space-s-l: clamp(1.13rem, calc(0.65rem + 2.39vw), 2.50rem);




/*		Variables to control colors, widths and transition		*/
	--primary: #ddd;
	--primaryColor: #f09d51;
	--dark: #333;
	--light: #fff;
	--text-color: #000;
	--menu-txt-color:  rgba(255, 255, 255, 1);
	--cart-colors: rgba(232, 183, 142, 0.5);
	--banner-color: rgba(213, 194, 134, 1);
	--splash-color: rgba(208, 162, 67, .8);
	--splash-color-sp: rgba(213, 194, 134, .8);
	--left-button-hover-color: rgba(161, 11, 11, 0.3);
	--right-bg-color: rgba(43, 43, 43, 0.8);
	--right-button-hover-color: hsl(17 82% 0 / 0.3);
	--mainWhite: #fff;
	--mainBlack: hsl(10 0% 0% / 1);
	

	--btn-bg: rgba(232, 183, 142, .5);
	--hover-btn-bg: linear-gradient(to left, #ff105f, #ffad06);
	--left-bg-color: rgba(223, 39, 39, 0.7);
	--container-bg-color: linear-gradient(to right, rgba(233, 233, 233, 1), rgba(223, 39, 39, 0.7));
	--rev-container-bg: linear-gradient(to right, rgba(223, 39, 39, 0.7), rgba(233, 233, 233, 1));
	--menu-bkgnd:  rgba(194, 197, 204, 1);

	
	--line-height: clamp(1rem, 2.059vw + 0.388rem, 1.5rem);
	--text-size: clamp(1rem, 2.059vw + 0.388rem, 1.1rem);
	--header-text: clamp(1.5rem, 2.59vw + 0.388rem, 2rem);
	--nav-text: 2em;

	--button-radius: 25px;

	--mainSpacing: 0.8rem;
	--hover-width: 75%;
	--other-width: 25%;

	--cartImgH: 100px;
	--cartImgW:	75px;
	--prodSizeH: 50px;
	--prodSizeW: 50px;

	--shadow:  0 1px 5px rgba(104, 104, 104, 0.8);
	
	--border-standard: 1px solid black;

	--transitions: all 280ms ease-in-out 200ms;
	--mainTransition: all 300ms linear;
	--speed: all 500ms ease-in-out 200ms;
/*	End Variables */

/* Site Wide Settings	*/
	font-size: 12px;
	font-weight: 400;
	
}




*, *::before, *::after{
	box-sizing: border-box;
}
*{
	margin: 0;
	padding: 0;
	font: inherit;
}


html, body
{
	font-family: "Lato", sans-serif;
	font-size: 1rem;
}

html:focus-within
{
	scroll-behavior: smooth;
}


body
{
	text-rendering: optimizeSpeed;
	color: var(--mainBlack);
	background: var(--mainWhite);
	font-size: var(--text-size);
	line-height: var(--line-height);
	min-height: 100svh;
	width: min(100vw, 100%);
	margin-inline: auto;
	text-align: left;
	display:flex;
	flex-flow: column nowrap;
	
/*	overflow: hidden;*/
}

button,
input,
select,
textarea
{
	font: inherit;

}

form
{
	background: hsl(201 50% 50% / 1) !important;
	padding: 15px !important;
	
}

form.form-inline
{
	background: purple !important;
}

fieldset
{
	position: relative;
	margin: 25px;
	padding: 25px;
}

.wrapper
{
	margin: auto;
	display: grid;
	max-width: 100vw;
	height: 100%;

}


main
{
	scroll-margin-top: 8rem;
	color: var(--mainBlack); 
	font-size: inherit;
	height: inherit;
	margin-inline: auto;
	margin-bottom: 5rem;
	padding-bottom: 5rem;
}

.modal-template
{
	background: hsl(1 100% 100% / 1);
	color: inherit;
	height: 100vh;
	width: 100vw;
	position: webkit-sticky;
	overflow: auto;
}

.about-us
{	background: rgb(205,205,205); 
	color: black;
	position: -webkit-sticky;
	height: 100vh;
	width: 100vw;
}

.about-list
{	background: yellow; 
	font-size: 7em; 
	color: pink;
	position: -webkit-sticky;
	height: 100vh;
	width: 100vw;
}


.about-content
{	display:block;
	margin: 0;
	max-height: 70vh;
	background: rgb(255, 155, 250);
	overflow: auto;
}

.register-bg-img
{	
	background-image: url("/images/DSC00562.JPG");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	overflow: auto;

}
	
.overlay
{	
	margin: 0;
	height: 100vh;
/*	background: rgb(255, 155, 250);
*/	overflow: auto;
}
	
.standard
{
	display: flex; 
	flex-flow: column wrap;
	gap: .5rem;
	text-align: left; 
	font-size: inherit;
	color: var(--mainBlack);
	width: clamp(90vw, 100vw + 3rem, 900px);
	height: 100%;
	margin: 5rem auto;
	padding: 5rem auto;
	overflow: auto;
	position: relative;
	line-height: var(--line-height);
}

.bordered
{
  border: var(--border-standard);
}

.colored
{
	background: hsl(1 100% 50% / 1 ) !important;
}

.shadowed
{
  	box-shadow: 3px 3em 3em black;	
}

footer
{	
	position: fixed;
	height: 50px;
	width: 100%;
	bottom: 0;
	padding: 15px;
	border-radius: 25px;
	display: flex;
	justify-content: center;
	align-content: center;
	font-size: 1.85rem;
	background-color: rgba(194, 196, 204, 1);
}
/*	https://www.sitepoint.com/hide-elements-in-css/	*/

footer a:any-link
{
	display: block;
	width: 100%;
	margin: auto;
	height: 50px;
}

footer a:hover
{
	background: rgba(232, 183, 142 .5);
	color: #fff;
	font-size: 2.5em;
	text-decoration: overline;
}
/*
footer{
	position:fixed;
	bottom: 0;
	width:100%;
	height:55px;
	border-radius:25px; 
	padding:10px;
	background: var(--banner-color);
}

footer a{
	display:block; 
	font-size:3rem; 
	color:white;
	border:none; 
}
*/


a:not([class])
{
	text-decoration-skip-ink: auto;
}

img, picture, video, canvas, svg
{
	display: block;
	max-width: 100%;
}


p, h1, h2, h3, h4, h5, h6
{
	overflow-wrap: break-word;
}

.numeric
{
	text-align: right;
}

#root, #__next
{
	isolation: isolate;
}

select
{
	isolation: isolate;
}

ul[role="list"],
ol[role="list"]{
	list-style: none;
}

a:link{
	text-decoration: none;
}


#paypal-button
{
	color: blue;
}

/*		Web Page Layout		*/

/*		End Web Page Layout		*/

/* 		Menu Navbar Settings	*/

.logo
{
	display: block;
	width: 50px;
	height: 50px;
	background: transparent cover;
}


.btn{
	min-height: 20px;
	font-size: 1.5rem;
/*	width: 100%;	*/
	background: var(--btn-bg);
	border: 1px solid black;
	transition: var(--transitions);
	text-transform: uppercase;
	cursor: pointer;
	outline: none;
	text-align: center;
	border-radius: var(--button-radius);
}

.btn:hover
{
	background: radial-gradient(red 20%, blue 40%, green 50%);
	color: #fff;
	max-font-size: 2.5em;
	text-decoration: overline;
	cursor: pointer;
}



.header-nav-icon
{
	max-height: 25px;
	max-width: 25px;
	display: block
	transition: var(--transitions);
}

.nav-icon:hover
{
	cursor: pointer;

}


.open-slide:hover
{
	display: visible;
}

.banner.active {
	display: block;
}

.banner-right{
	right: 10px;
	bottom: 10%;
	min-height: 10vh;
}

.alert-primary{
	color: #004085;
	background-color: #cce5ff;
	border-color: #b8daff;
}

.closeBtn{
	position: absolute;
	right: 1.5%;
}

.closeBtn:after{
	position: absolute;
	right: 0;
	top: 50%;
	content: '<i class="glyphicon glyphicon-remove-circle" style="font-size: 3rem; color: black;"></i>';
	color: #000;
}

.modal-close
{
	cursor: pointer;
	top: 0;
	left: 0;
	font-size: 5rem;
	color: black;
}

.ship-address-flag
{
	cursor: pointer;
}

@media(prefers-reduced-motion: reduce)
{
	html:focus-within
	{
		scroll-behavior: auto
	}
	
	*,
	*::before.
	*::after
	{
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}
/*	=============		TEMPLATE SETTINGS TO BE MOVED TO CSS	=========		*/
         .templates
         {
            display: none;
         }

         .filter
         {
            margin-bottom: 0.5em;
         }

         .template.qualifier
         {
            display: inline-block;
            /* IE 6-7 Hack */
            *display: inline;
            zoom: 1;
         }

         #results
         {
            margin: 1em auto;
            border-collapse: collapse;
         }

         #results th,
         #results td
         {
            padding: 0.2em 0.5em;
         }

         #results tr:nth-child(odd)
         {
            background-color: #71A9D6;
         }
/* *************  Webflow Normalize Settings	******************	*/

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce
 *    specificity and defer to the .w-button selector
 */
button,
html input[type="button"],
input[type="reset"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input
 * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed
 *    (similar to normalize.css >=4.0.0)
 */
input[type='search'] {
  -webkit-appearance: none;
  /* 1 */
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}


/* *********** End Webflow Settings	******************	*/