/* css priorities (specificity)
inline styles -> 1
id's -> 2
classes -> 3
elements -> 4
!important overrides all
*/

/* html5 reset and normalize - updated April 2026 */

:root {
	--site-font-scale: 100%;
}

* {
	margin: 0;
	border-style: none;
	outline: 0;
	vertical-align: baseline;
	background-color: transparent;
}

html {
	font-size: var(--site-font-scale);
	line-height: normal;
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; /* prevent font size adjustment after orientation change in iOS */
}

body {
	cursor: default;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
}

a {
	cursor: pointer;
}

div, main, article, aside, details, figcaption, figure, footer, header, input, textarea, hgroup, menu, nav, label, section, hr {
	display: block;
}

summary {
	display: list-item;
}

nav ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	content: none;
}

mark {
	background-color: #ff9;
	color: #000;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

input, select {
	vertical-align: middle;
}

b, strong, mark {
	font-weight: bolder;
}

dfn, mark {
	font-style: italic;
}

p {
	-webkit-hyphens: auto;
	-webkit-hyphenate-character: "\2010";
	-webkit-hyphenate-limit-after: 1;
	-webkit-hyphenate-limit-before: 3;
	-moz-hyphens: auto;
}

small {
	font-size: 0.8rem;
}

sub, sup {
	font-size: 0.75rem;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

svg:not(:root) {
	overflow: hidden;
}

audio, canvas, progress, video {
	display: inline-block;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden], template {
	display: none;
}

figure {
	margin: 1em 40px;
}

pre {
	overflow: auto;
}

code, kbd, pre, samp {
	font-family: monospace, monospace;
	font-size: 1rem;
}

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	white-space: normal;
}

textarea {
	overflow: auto;
}

button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

optgroup {
	font-weight: bold;
}

button, input {
	overflow: visible;
}

button, select {
	text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

input[disabled], textarea[disabled], button[disabled] {
	cursor: not-allowed;
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
	border-style: none;
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

[type="checkbox"], [type="radio"] {
	box-sizing: border-box;
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/* Chrome, Safari, Edge, Opera *//* hide up down arrows */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox *//* hide up down arrows */
input[type="number"] {
	-moz-appearance: textfield;
}

[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font-family: inherit;
	cursor: pointer;
}

::-webkit-selection, ::-moz-selection, ::selection {
	background: rgb(23,119,175);
	color: rgb(250,250,250);
	text-shadow: none;
}

::-webkit-input-placeholder, input:-moz-placeholder {
	font-size: 0.875rem;
	line-height: 1.4;
}

.cfx::after { /* Clearfix. If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. Clearfix will prevent this from happening. */
	content: "";
	clear: both;
	display: table;
}
/*///////////////////////// end reset css /////////////////////////*/


/*//////////////////////////// layout /////////////////////////////*/

	html { scroll-behavior: smooth; }

	@font-face {
		font-family: 'robotoregular';
		src: url('Roboto-Regular-webfont.eot');
		src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('Roboto-Regular-webfont.woff') format('woff'), url('Roboto-Regular-webfont.ttf') format('truetype'), url('Roboto-Regular-webfont.svg#robotoregular') format('svg');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	body, input, textarea, #cm, figure, .dark, .captcha { background-color: #191917; color: #fefed7; }
	body {
		font-family: Verdana, Helvetica, Arial, sans-serif;
		/* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';*/
	}

	#jsMsg {
		z-index: 999;
		background: #32322d;
		text-align: center;
		position: fixed;
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
	}

	section, article, .img-wrap, nav, .nav { overflow: auto; }
	#jsMsg, header, section, article, #sidebar, #txt, .img-wrap, .c-4321 { background-color: #32322d; }
	.lime { color: #33ff33; }
	.wh { background-color: #fff; }

	h1, #cm p, .flag, .ctr, .latest p, nav, .nav, .navP, .pf-box a, footer p, footer, #showHide,/* .qty,*//* .sub, */ #cartLogo, .captcha, button, figcaption {
		text-align: center;
	}
	
	img, #topBtn a, .cell a, a.login, .pf-box a, #cartLogo, .sidebar a, button, .pwa a, a.reply-to, #flag a, svg {
		display: block;
	}

	.flex { display: flex; }
	.flex-ctr { display: flex; align-items: center; }
	.flex-j-ctr { display: flex; align-items: center; justify-content: center; }
	.tar { text-align: right; }
	hr { height: 2px; color: #fefed7; background-color: #fefed7; margin: 4em auto 2.8em auto; }
	.caps{ text-transform: capitalize; }
	.u-line { text-decoration: underline lightblue; text-underline-offset: 3px; }
	.ri { width: 100%; height: auto; } /* responsive image */
	figure { margin: 0 4.1666666% 8% 4.1666666%; padding: 0; }
	figure img { margin: 0 0 12px 0; }
	figcaption { font-style: italic; padding: 10px 0 12px 0; }
	header { padding: 14% 0 0 0; margin: 0 0 2% 0; }
	.logo { margin: 0 2% 12% 2%; }
	.logo img { margin: 0 auto; max-width: 600px; }
	.gr { width: 100%; height: 150px; }
	.grad1 { margin: 8% 0 0 0; background-image: url('https://www.andrewbirchphotography.com/images/grad1.png'); }
	.grad2 { background-image: url('https://www.andrewbirchphotography.com/images/grad2.png'); }
	.grad1, .grad2 { background-repeat: no-repeat; background-size: 100% 100%; }

	h1, h2, h3 {
		font-family: 'robotoregular', arial, sans-serif;
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		letter-spacing: 0.05em;
		margin: 0 0 3% 0;
	}
	
	header h1 { margin: 0; }
	h1 { font-size: 3.2rem; }
	h2 { font-size: 2.4rem; }
	h3 { font-size: 1.6rem; }
	h4 { font-size: 1.4rem; }
	h5 { font-size: 1.2rem; }
	h6 { font-size: 1.1rem; line-height: 175%; }
	.hxm { margin: 0 0 5.6% 0; } /* heading extra margin */
	#jsMsg h2, audio { width: 100%; }
	audio { max-width: 600px; }	
	.mp3 { font-size: 0.8rem; }

	@media only screen and (max-width: 1024px) {
		header { padding: 16% 0 0 0; }
		.grad1 { margin: 10% 0 0 0; }
		.gr { height: 125px; }
		h1 { font-size: 2.8rem; }
		h2 { font-size: 2rem; }
		h3 { font-size: 1.4rem; }
		h3.hxm { font-size: 1.6rem; }
		h4 { font-size: 1.3rem; }
		h5 { font-size: 1.2rem; }
		h6 { font-size: 1.1rem; }
	}

	@media only screen and (max-width: 800px) {
		header { padding: 20% 0 0 0; }
		.grad1 { margin: 11% 0 0 0; }
		.gr { height: 100px; }
		h1 { font-size: 2.4rem; }
		h2 { font-size: 1.7rem; }
		h3 { font-size: 1.2rem; }
		h3.hxm { font-size: 1.6rem; }
		h4 { font-size: 1.1rem; }
		h5, h6 { font-size: 1rem; }
		#restrict { width: 100%; margin: 0; }
	}

	@media only screen and (max-width: 600px) {
		header { padding: 24% 0 0 0; }
		.grad1 { margin: 13% 0 0 0; }
		.gr { height: 75px; }
		h1 { font-size: 2rem; }
		h2 { font-size: 1.5rem; }
		h3 { font-size: 1.2rem; }
		h3.hxm { font-size: 1.6rem; }
		h4 { font-size: 1.1rem; }
		h5, h6 { font-size: 1rem; }
	}


/* ******************** COLUMNS ******************** */

[class*="c-"] { float: left; box-sizing: border-box; }
/* For mobile phones: *//* default */
[class*="c-"] { width: 100%; }

/* For tablets: */
@media only screen and (min-width: 600px) {
	.c-8a {width: 8.3333333333%;}
	.c-17a {width: 16.6666666666%;}
	.c-25a {width: 25%;}
	.c-33a {width: 33.3333333333%;}
	.c-42a {width: 41.6666666666%;}
	.c-50a {width: 50%;}
	.c-58a {width: 58.3333333333%;}
	.c-67a {width: 66.6666666666%;}
	.c-75a {width: 75%;}
	.c-83a {width: 83.3333333333%;}
	.c-92a {width: 91.6666666666%;}
	.c-100a {width: 100%;}
}

/* For desktop: */
@media only screen and (min-width: 900px) {
	.c-8 {width: 8.3333333333%;}
	.c-17 {width: 16.6666666666%;}
	.c-25 {width: 25%;}
	.c-33 {width: 33.3333333333%;}
	.c-42 {width: 41.6666666666%;}
	.c-50 {width: 50%;}
	.c-58 {width: 58.3333333333%;}
	.c-67 {width: 66.6666666666%;}
	.c-75 {width: 75%;}
	.c-83 {width: 83.3333333333%;}
	.c-92 {width: 91.6666666666%;}
	.c-100 {width: 100%;}
}

/* *********************  END  ********************* */

	#cm { margin: 5% 0 0 0; padding: 1em; }
	#cm p { line-height: 165%; }
	img { margin: 0 auto 0 auto; }
	.menu { position: fixed; top: 0; right: 0; z-index: 9999; }
	#login, #topBtn { padding: 20px; }
	.txt, #showHide, .pseudoLink:hover { cursor: pointer; }
	.ig { padding: 1%; }
	.ig img { width: 50px; max-width: 50px; }
	.bug { max-width: 48px; margin: 30px auto 0 auto; }

	a, .pseudoLink {
		color: #9af; /* color: #acf; *//* color: #33ff33; */
		text-decoration: none;
		/*font-family: verdana, 'trebuchet ms', sans-serif;*/
	}
	
	a, button, .txt, .ppal, .pseudoLink {
		transition: all 0.3s ease;
	}

/* test new button code ---------------------------------------------- */	
	button {
		width: 100%;
		max-width: 180px;
		margin: auto;
		padding: 1.3em 0;
		background-color: #42423b;
	}
	#send { margin: 12% auto 16% auto; }
	.pwb { max-width: 92%; margin: 0 4% 4% 4%; /* photowalk buttons */ }
	#add { margin: 0 auto 3% auto; }
	#pay, #add { max-width: 280px; }
	#pay { background-color: orange; color: #191917; }
	#send, #add { background-color: #8af; color: #202020; }
	.menu-btn { width: 90px; height: 90px; padding: 20px; background: transparent; }
	button > svg { width: 100%; height: 100%; pointer-events: none;	 }
	#send, .pwb, #add, #pay { border-radius: 12px; }
	.close-btn { padding: 0; width: 50px; height: 50px; background: red; cursor: pointer; }
	.resetBtn { margin: 0 auto 2.2%; background: transparent; color: #9af; }
/* end ---------------------------------------------------------------------- */

	nav a, .nav a, .navP a, #steps a, .pf-box a, p a:hover, .pseudoLink:hover, .resetBtn:hover/*, .resetBtn:focus, .resetBtn:active*/ { color: #fefed7; }
	.pf-box a, nav a, .nav a, .pwa a, .txt, .sidebar a { padding: 1.3em 0; } /* rollovers */
	/*p, label { font-size: 1rem; padding: 0 0 2em 0; }*/
	p, label { font-size: 1rem; }
	p { padding: 0 0 2em 0; }
	section, article { padding: 5%; margin: 0 4.1666666% 4.1666666% 4.1666666%; }
	section p, article p, .pw p { line-height: 175%; padding: 0 1% 2em 1%; }
	.latest div { margin: 1em 0 4em 0; }
	.latest p { margin: 3em 0 0 0; }
	.cp p { margin-bottom: 2.8%; }
	.pf-box p { padding: 0; }
	.cb, section, article { clear: both; }
	footer { padding: 6% 5% 6% 5%; }
	footer p { line-height: 165%; padding-bottom: 0; }
	.nbc, figure { background-color: transparent; } /* .nbc, portfolio.php */
	
	#topBtn { display: none; position: fixed; right: 0; bottom: 0; z-index: 99; }

	#topBtn a {
		background-color: red;
		color: #fefed7;
		padding: 15px 25px;
		border-radius: 10px;
	}

	.gallery-wrap {
		margin: 0 0 0 4.1666666%;
	}

	.c-4321 { /* 3 cols (default) */
		margin: 0 4.34782601436673% 4.34782601436673% 0;
		width: 28.9855073189666%;
		float: left;
	}
	
	.wrap-margin { margin: 0 4.1666666%; }
	.img-wrap { width: 100%; margin: 0 auto 4.5% auto; }
	.img-box, .cell { width: 100%; }
	.cell a img { cursor: zoom-in; max-width:350px; }
	footer img { max-width: 450px; margin-bottom: 1.5%; }
	.hide, #hint { display: none; }


/* **************** PHOTOWALK PAGES **************** */

	.pw { max-width: 350px; margin: auto; }
	.pw p, .pw h3 { padding: 1.5em 1em 0 1em; }
	.pw img { width: 96%; height: auto; margin: 2%; }
	.spaces { margin: 4em 0 0 0; }
	.qr { max-width: 451.4px; margin: 12% auto 1% auto; }
	.info { margin: 0 0 10% 0; }
	.x3 { float: left; width: 33.3333333%; }
	#avail { margin-bottom: 2.8%; padding: 0 0 2em 0; }
	#avail p { margin: 0; padding: 0; }
	#avail > p:first-of-type { padding: 0 0 1% 1%; }
	/*.option { max-width: 700px; margin: 0 auto 1em auto; padding: 0 0 0 1em; }*/
	.option { padding: 0 0 0 1em; } /* am/pm checkbox text */


/* ******************* SHOWCASE ******************** */

	#gwrap1, #gwrap2 { opacity: 0; width: 86%; margin: auto; }
	@media only screen and (max-width: 800px) { #gwrap1, #gwrap2 { width: 98%; } }
	.row img { padding: 1%; float: left; cursor: zoom-in; }


/* ***************** PORTFOLIO PAGE ***************** */

	.pf-box { padding: 1em 0 0 0; overflow: hidden; }

	.pf-box img {
		float: left;
		width: 100%;
		max-width: 350px;
		height: auto;
		max-height: 230px!important;
		margin: 0 5% 6% 0;
	}

	.pf-box a { margin: 10% 0 0 0; clear: both; float: right; width: 100%; max-width: 350px; }


/* ******************* SHOP / CART ******************* */

	#steps { margin: 0 4.1666666% 0 4.1666666%; }

	#steps a {
		display: inline-block;
		width: 19.25%;
		padding: 1em 0 1em 5%;
		margin: 0 1% 1% 0;
		background: url("https://www.andrewbirchphotography.com/images/chevron_.png") no-repeat right center;
	}

	#steps a:last-child {
		text-align: center;
		width: 24.25%;
		padding: 1em 0 1em 0;
		margin: 0 0 1% 0;
		background-image: none;
	}

	.pp, .pp img { max-width: 159px; margin: auto; }

	/* //////////// CART FLEXBOX VERSION - 2026 //////////// */
	/* //////////////// TEST LARGE FONT SIZE ///////////////// */

	.item-pic { padding: 4% 0; width: 65%; background-color: #555; }
	.pic-wrap { padding: 10px; background-color: white; width: fit-content; }
	.pic-wrap img { max-width: 200px; }
	.item-qty { padding: 6% 0; justify-content:space-around; flex-direction:column; width:35%; background-color: #666555; }
	.btn-wrap { background-color: #777;	border-radius:8px; }
	.qty-btn { background-color: #8af; padding: 6px; font-size: 0; border-radius: 8px; }
	.strokeColour { stroke: black; }
	.qty-btn:hover { background-color: #fefed7; }
	.num { padding: 0 25px; }
	.rule { height: 20px; }
	.num, #tot { font-size: 1.4rem; }
	p#tot, p#info { text-align: right; }
	p#tot { padding: 1% 20px 2.5% 0; }
	button > svg { pointer-events: none; }

	#cartLogo {
		background-color: orange; /*#9fa*//*#3af8af*/
		color: #191917;
		border-radius: 8px;
		line-height: 1.3;
		padding: 0.6em 0;
		margin: 0 20px;
	}

	@media only screen and (max-width: 1023px) {
		.item-pic { width: 60%; }
		.item-qty { width: 40%; }
	}

	@media only screen and (max-width: 959px) {
		#steps a { padding: 1em 0 1em 2%; width: 22.25%; }
		.cart-item { flex-direction: column; }
		.item-pic { padding: 35px 0 30px 0; }
		.item-pic, .item-qty {width: 100%;}
		.item-qty {padding: 25px 0; row-gap: 1.4em;}		
		p#tot { padding: 1% 20px 5% 0; }
		p#info { text-align: center; }
	}

	@media only screen and (max-width: 350px) {
		.item-pic {padding: 0;}
		.item-pic img {max-width:350px;}
		.num {padding: 0 20px;}
	}
	
/* ///////////////// end //////////////// */


/* ************** NAVIGATION ROLLOVERS ************** */

	nav a, .nav a, .navP a, .txt, nav a:link, .nav a:link, .navP a:link, nav a:visited, .nav a:visited,
	.navP a:visited, #steps a, #steps a:link, #steps a:visited, .pf-box a:link, .pf-box a:visited,
	a.reply-to:link, a.reply-to:visited, a.login:link, a.login:visited { background-color: #42423b; }

	@media(hover: hover) and (pointer: fine) { /* detect mouse device (desktop pc) */
		/*.cell a:link img { opacity: 0.85; transition: opacity 0.5s; }*/
		/*.cell a:hover img { opacity: 1; transition: opacity 0.5s; }*/
		.cell a:link img { filter: blur(0px); transition: filter 0.5s; }
		.cell a:hover img { filter: blur(50px); transition: filter 0.5s; }
		#steps a, #steps a:link, #steps a:visited { opacity: 0.6; }
		#steps a:hover, #steps a:active { opacity: 1; }	
		#add:focus, #add:hover, #add:active, #pay:focus, #pay:hover, #pay:active,
		#send:focus, #send:hover, #send:active, nav a:focus, nav a:hover, nav a:active,
		.nav a:focus, .nav a:hover, .nav a:active, .navP a:focus, .navP a:hover, .navP a:active,
		.txt:hover, .pf-box a:focus, .pf-box a:hover, .pf-box a:active,
		a.reply-to:focus, a.reply-to:hover, a.reply-to:active, a.login:focus, a.login:hover, a.login:active,
		#topBtn a:focus, #topBtn a:hover, #topBtn a:active { background-color: #fefed7; color: #191917; }
		#hint { display: block; padding: 0 0 2em 0; }
		#hint::after { content: "Hint - Press (fn) F11 for full screen"; }
		.pw-cell img { transition: filter 1s ease; filter: grayscale(100%); }
		.pw-cell:hover img { filter: grayscale(0%); }
	}

	.actif { background-color: #fefed7!important; color: #191917!important; }


/* ***************** NAVIGATION BARS ***************** */

	nav, .nav, .lower { padding: 2% 4% 0 4%; }
	.cell img, nav a, .nav a, .navP a, #steps a, .txt, .pf-box a, a.reply-to, a.login, #flag a, .bug { border-radius: 12px; }

	nav a, .nav a, .txt {
		display: inline-block;
		/* top and bottom margins added 'inline-block' */
		/* top and bottom margins collapse into largest value 'block' */
		width: 18%;
		max-width: 18%;
		margin: 0 1% 2% 1%;
	}

	#sidebar {
		box-shadow: 0px 2px 15px 3px #000;
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		max-width: 224px;
		animation-name: slide;
		animation-duration: 0.2s;
	}

	@keyframes slide { from { left: -300px; } to { left: 0; } } /* sidebar animation */
	.sidebar { padding: 11% 9% 8% 9%; }
	.sidebar a { width: 100%; max-width: 100%; margin: 0 0 5% 0; }
	.sidebar a:last-of-type { margin: 0 0 10% 0; }

	@media only screen and (max-width: 1023px) {
		nav a, .nav a, .txt { width: 31.33333333%; max-width: 31.33333333%; }
		footer { padding: 10% 5% 10% 5%; }
	}

	@media only screen and (max-width: 800px) { footer { padding: 12% 5% 12% 5%; } }	

	@media only screen and (max-width: 599px) {
		nav, .nav, .lower { padding: 0 4% 2% 4%; }
		nav a, .nav a, .txt { width: 98%; max-width: 98%; margin: 1% auto 1% auto; }
		.small { padding-top: 2%; }
		.small a { width: 31.33333333%; max-width: 31.33333333%; margin: 0 1% 2% 1%; }
		#steps a { background: url("https://www.andrewbirchphotography.com/images/chevronV3.png") no-repeat center bottom;
			width: 92%; margin: 0 0 2% 0; padding: 1em 0 1em 8%; }
		#steps a:last-child { width: 100%; margin: 0 0 2% 0; }
	}

	.pwa a { width: 100%; max-width: 100%; margin: 0 0 4% 0; }


/* **************** GALLERY COLUMNS **************** */

	@media only screen and (min-width: 1770px) { /* for screen res. 1770px + */
		#wrapper { /* restrict page width *//* is set for 350px portfolio thumbs !!!DO NOT CHANGE!!! */
			width: 1769px; max-width: 1769px; margin: auto; }
		header { padding: 10% 0 0 0; }
		.grad1 { margin: 8% 0 0 0; }
	}

	@media only screen and (min-width: 1281px) {
		.c-4321 { /* 4 cols */ width: 20.652176%; }
	}

	@media only screen and (max-width: 768px) {
		section, article { padding: 6% 5% 5% 5%; }
		.c-4321 { /* 2 cols */ width: 45.652177%; }
		.pf-box img { margin-bottom: 8%; }
	}

	@media only screen and (max-width: 396px) {
		.c-4321 { /* 1 col full width */ width: 95.65218%; }
		.c-4321, section, article, .pf-box { margin-bottom: 8%; }
		section, article { padding: 8% 5% 5% 5%; }
		.pf-box img { margin-bottom: 10%; }
		.pf-box a { margin-top: 16%; }
	}


/* **************** RESPONSIVE FORMS **************** */

	#showHide { width: 100%; padding: 0 0 1.5em 0; }
	/*label { border-radius: 10px 10px 0px 0px; padding: 60px 0 0.7em 4px; }*/
	label { border-radius: 10px 10px 0px 0px; }
	.dark { margin: 8px 0 0 0; padding: 0.5em 0.7em 0 0.7em; }

	#e4, #g3, #f6 { /* captcha inputs */
		display: inline-block;
		width: 120px;
		max-width: 120px;
		margin: 1em 0 1em 0;
		border-radius: 10px;
		border: 2px solid #505048;
	}

	form { max-width: 600px; padding: 6% 0 0 0; margin: auto; }
	.red, p.red, span.red { color: #f02020; }
	.red-bg { background-color: #f02020; }
	.green { color: #11ee55; }
	.green-bg { background-color: #11ee55; }

	input, textarea {
		font-style: italic;
		color: #c0c0b0;
		box-sizing: border-box;
		padding: 8px 8px 8px 15px;
		line-height: 150%;
		width: 100%;
	}

	input, textarea, .captcha { border-radius: 0 0 10px 10px; }
	.captcha { padding: 0 0 1em 0; }
	.captcha input { font-style: normal; }
	.captcha img { display: inline-block; width: 98px; height: 40px; vertical-align: middle; }
	a.reply-to { color: #fefed7; margin-top: 4em; padding: 1.3em 4.5em 1.3em 4.5em; }
	/*.cbox label, .cbox input { *//* AM, PM checkboxes *//* border-radius: 0; display: initial; }*/
	/*input[type="checkbox"]*//*.cbox input*//* { width: 20px!important; height: 20px!important; flex-shrink: 0; cursor: pointer; }*/
	/*.cbox label { padding: 0 0 0 10px; vertical-align: middle; }*/
	/*.cbox input { padding: 0; width: initial; }*/
	/*.cbox ul { list-style-type: none; }*/
	.pwa a { width: 92%; margin: 0 4% 4% 4%; }
	#flag a, .pwb, #pay, #add, .pwa a, .pwa, #notify { letter-spacing: 0.2em; }

	@media only screen and (max-width: 600px) {
		p#tot { padding: 1% 20px 8% 0; }
		#add { max-width: 98%; margin: 0 auto 4% auto; }
		.menu-btn, #login, #topBtn { padding: 10px; }
		#topBtn { padding-bottom: 20px; }
		.menu-btn { width: 70px; }
		#cartLogo { margin: 0 10px 0 10px; }
	}

	a.reply-to {
		margin-top: 3em;
		padding: 1em 2em 1.1em 2em;
		float: right;
	}
	
	#login { position: absolute; top: 0; left: 0; }	
	a.login { padding: 1em 2em 1.1em 2em; color: #fefed7; }
	.reply { padding: 5% 0 0 5%; }


/* ************ ERROR MESSAGE ANIMATION ************ */

	#flag { width: 100%; position: absolute; left: 0; top: 2%; }

	#flag a {
		width: 350px;
		text-align: center;
		font-size: 1rem;
		padding: 1.2em 0 1.2em 0;
		margin: 0 auto 0 auto;
		color: #32322d;
	}

	.flash {
		animation-name: flash;
		animation-duration: 1s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
		animation-delay: 1s;
	}

	.fail { background-color: #ee2020; }
	.ok { background-color: #11ee55; }
	@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0.1; } }
	@media only screen and (max-width: 599px) { /* < 600px */ #flag a { margin: 0 2% 0 2%; width: 96%; } }
	
	.nm { margin: 0; } /* remove margin */
	.np { padding: 0; } /* remove padding */