/*==========================================
 *
 * 		/commons/css/globals.css 
 * 
 * =========================================
*//* margin: 
	the first position is top; 
	the second is the  bottom
	third is and right
	the fourth is left

*/

/*! 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{
/*		Variables to control colors, widths and transition		*/
	--primary: #ddd;
	--primary--cornflower: #ddd;
	--primary-pineapple: #ddd;
	--primary-dawn: #ddd;
	--primary-red: #f09d51;
	--dark: #000000;
	--light: #FFFFFF;
	--text-color: #000000;
	--menu-txt-color:  cmyk(0%, 0%, 3%, 3%);
	--cart-colors: cmyk(0%, 22%, 68%, 18%);
	--banner-color: cmyk(0%, 9%, 37%, 16%%);
	--banner-color-sp: cmyk(0%, 9%, 37%, 16%);
	--splash-color: cmyk(0%, 9%, 37%, 16%);
	--left-button-hover-color: rgba(161, 11, 11, 0.3);
	--right-bg-color: rgba(43, 43, 43, 0.8);
	--right-button-hover-color: cmyk(0%, 21%, 39%,9%);
	--mainWhite: #fff;
	--mainRed: cmyk(0%,11%, 54%, 33%);
	--mainBlack: #ececec;
	

	--btn-bg: linear-gradient(to right, #ff105f, #ffad06);
	--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, cmyk(0%, 22%,68%, 18%), cmyk(0%, 22%, 68%,18%));
	--menu-bkgnd:  cmyk(0%, 11%, 54% 33%);

	
	--text-size: clamp(1.2rem, 1.5vh, 1.5rem);
	--nav-text: 2em;

	--button-radius: 25px;

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

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

	--shadow:  0 1px 5px rgba(104, 104, 104, 0.8);

	--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;
	min-height: 100vh;
}

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


body
{
	text-rendering: optimizeSpeed;
	color: var(--mainBlack);
	background: var(--mainWhite);
	font-size: 1rem;
	line-height: 1.5em;
	min-height: 100vh;
	text-align: justify;
	display:flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	
/*	overflow: hidden;*/
}

img{
	display:block;
}



main{
	flex-grow: 1;
	overflow:scroll;
	color:black;
	width: 980;	
}

.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;
}

.overlay
{	
	margin: 0;
	height: 100vh;
	background: rgb(255, 155, 250);
	overflow: auto;
}


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;
}

.red-font
{
	color:var(--mainRed);
}

.white-font
{
	color:var(--mainWhite);
}

#root, #__next
{
	isolation: isolate;
}

ul,
ol{
	list-style: none;
}

li{
	margin-left: 3rem;
	font-size: 1.5rem;
}
a{
	text-decoration: none;
}

.splash-screen {
	display: grid;
	background: var(--banner-color);
}

.splash-screen-sp {
	display: grid;
	background: var(--banner-color);
}

.banner.active {
	display: block;
}

.banner-title {
	display: block;
	color: white;
	font-family: artistic;
	font-size: 30vw;
}

.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: #69f;
}

@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;
	}
}


footer{
	margin-bottom: 0;
	position: sticky;
}
/*
form{
	background: #fff;
	display: flex;
	flex-direction: column;
	min-width: 100%;
	border-radius: 10px;
}


form h3{
	color: #555;
	font-weight: 800;
	margin-bottom: 20px;
	text-align: center;
}

.input-div{
	display: flex; 
	flex-wrap: wrap; 
	align-content: space-between;
}

.btn{
	width: 50px;
	background-color: redcoral;
}


form input, form textarea{
	border: 0;
	margin: 10px 0;
	padding: 20px;
	outline: none;
	background: #f5f5f5;
	font-size: 16px;
}
*/
li{
	list-style: none;
}

li a,
li a:visited
{
	text-decoration: none;
	display:inline-block;
}

.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: red;"></i>';
	color: #69f;
}

.modal-bgnd{
	background:rgb(205, 205, 205); 
	color: black; 
}

.modal-bgnd a{
	color: orange; 
}
/*	=============		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;
 }