@font-face {
font-family: 'PT Sans';
src: url('pt-sans.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}

body {
color: #000;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
line-height: 1.25em;
font-family: 'PT Sans', Tahoma, Verdana, Arial, sans-serif;
font-size: 16px;
}

@media (max-width: 48em) {
	body { font-size: 1.2em; }
}

body, main nav { background-color: #fff; }

h1, h2, h3, h4, strong { color: #000; line-height: normal; }
#page-order h3, h4 { margin: .25em 0; }

body { padding: 0; margin: 0; }
main,
body > footer,
header aside,
body > section
{ padding: 0 .75em; }
body > header { padding: 0 0; }
body > header h2 { padding: 0 0; margin: 0; }
header a { display: block; }
/* header > nav { margin-top: 1em; } */

@media (min-width: 48em) {
	main,
	/* body > header, */
	header > section,
	/* header > nav > div, */
	body > header,
	body > footer,
	header aside,
	body > section
	{ padding: 0 3em; }
	/* header > section { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; column-gap: 1rem; row-gap: 1rem; } */
}

header > section { padding-top: .75em; padding-bottom: .75em; margin: 0; }
header > section > div { font-size: .9em; color: #666; }
header > nav { margin: 0; padding: 0; }

header { position: sticky; top: 0; z-index: 1 }
@media (max-width: 48em) {
	/* header > section { text-align: center; padding: 0;} */
	/* header > section > div { display: none; } */
	header > section { display: none; }
	header { position: sticky; top: 0; z-index: 1 }
}

body > footer { margin-top: 2em; padding-top: 1em; padding-bottom: 2em; }

ul > li { margin-bottom: .5em; }
nav ul { list-style: none; padding: 0; margin: 0; }
nav ul > li { padding: 0; margin: 0; }
p { margin: 1em 0; padding: 0; }

main { margin-top: 1em; }

/* breadcrumbs */
main nav { margin-bottom: .25em; }
main nav ul > li > a { display: block; }

h1 { margin: 0; }

footer { font-size: .75em; }
@media (min-width: 48em) {
	footer { text-align: center; }
	footer nav ul { line-height: 1; display: block; margin: .25em 0; }
	footer nav ul > li { display: inline-block; vertical-align: middle; line-height: normal; box-sizing: border-box; }
	footer nav ul { margin-left: -.5rem; margin-right: -.5rem; }
	footer nav ul > li { padding-left: .5rem; padding-right: .5rem; }
}
section + section { margin-top: 1em; }

/* GRID */
@media (min-width: 48em) {
	[class*="pw-grid-"] { display: grid; column-gap: 1em; row-gap: 1em; }
	[class*="pw-grid-"] > section + section { margin-top: 0em; }
	[class*="pw-grid-"] > article + article { margin-top: 0em; }
	.pw-grid-left-right { align-items:center; grid-template-columns: repeat(2, 1fr); }
	.pw-grid-left-right > :first-child { text-align: start; }
	.pw-grid-left-right > :last-child { text-align: end; }
	.pw-grid-2 { grid-template-columns: repeat(2, 1fr); }
	.pw-grid-3 { grid-template-columns: repeat(3, 1fr); }
	.pw-grid-4 { grid-template-columns: repeat(4, 1fr); }
	.pw-grid-5 { grid-template-columns: repeat(5, 1fr); }
	.pw-grid-6 { grid-template-columns: repeat(6, 1fr); }
	.pw-grid-7 { grid-template-columns: repeat(7, 1fr); }
	.pw-grid-1-2-1 { grid-template-columns: 1fr 2fr 1fr; }
	.pw-grid-2-1-1 { grid-template-columns: 2fr 1fr 1fr; }
	.pw-grid-1-2-2 { grid-template-columns: 1fr 2fr 2fr; }
	.pw-grid-2-2-1 { grid-template-columns: 1.5fr 1.5fr 1fr; }
	.pw-grid-1-3 { grid-template-columns: 1fr 3fr; }
	.pw-grid-3-1 { grid-template-columns: 3fr 1fr; }
	.pw-grid-2-1 { grid-template-columns: 2fr 1fr; }
}
@media (max-width: 48em) {
	[class*="pw-grid-"] > * { margin-bottom: .5em; }
}
.pw-inline-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; column-gap: .5rem; row-gap: 1rem; }
.pw-inline-list > * { margin: 0 0 0 0; padding: 0 0 0 0; }
/* END OF GRID */

/* ICONS */
h1 > i.material-icons, h2 > i.material-icons, h3 > i.material-icons, h4 > i.material-icons { display: block; font-size: 2em; }

article { display: block; border-style: solid; border-color: rgba(0,0,0,.25); border-width: 1px; padding: 1em 1em; }
article + article { margin-top: 1em; }
article header { margin-bottom: .5em; }
article header a { display: block; font-weight: 600; }

#page-updates article { border-width: 0; padding: 0 0; }
#page-updates article + article { margin-top: 2em; }
#page-updates article li { margin: 0 0; padding: 0; }
#page-updates article strong, #page-updates article em { font-size: 1.25em; }

footer { background-color: #eee; padding: 1em; }
strong > a { display: block; text-align: center; padding: 1em; border-radius: .25em; font-size: 1.2em; }
strong > a { background-color: #eee; }

/* ORDER PAGE */
article.order h3 { text-align: center; }
article.order > h2, #page-order article > h3 { text-align: center; }
article.order > h2 {	background-color: #ccc; padding: .5em; }
article.order > h2 {	background-color: inherit; padding: 0; font-weight: 600; }

a > i, a > span, button > span { display: inline-block; text-decoration: none; margin-right: .25em; margin-left: .25em; color: initial; }
pre {
display: block; padding: 1em; border: #999 1px solid; margin-bottom: 1em; font-size: 0.9em; overflow: auto;
background: #f9f9f9;
border: 1px solid #ddd;
border-left: 3px solid #ddd;
color: #333;
font-family: monospace;
font-size: 0.8em;
max-width: 100%;
word-wrap: break-word;
line-height: 1.25em;
}

mark { display: inline-block; padding: 0 0.25em; }
s { opacity: .5; }

@media (min-width: 48em) { #page-order .pw-grid-2 {gap: 2em;} }
@media (max-width: 48em) { #page-order .pw-grid-2 div + div {margin-top: 2em;} }

article.order { box-shadow: rgba(0, 0, 0, 0.1) 0 1em 3em 0; border-color: transparent; border-radius: .25em; }
.order b { display: block; text-align: center; padding: .75em 1em; border-radius: .25em; font-size: 1.2em; }
.order b > a { display: block; }
.order b { background-color: #eee; }
.order b > small { font-size: .9em; font-weight: normal; }

img { padding: .25em; border_: #bbb 1px solid; border-radius_: .25em; max-width: 100%; }
@media (max-width: 48em) {
	img { max-width: 100%; height: auto; }
}

/* responsive navigation */
nav label { display: none; }
nav input[type=checkbox] { display: none; }
@media (max-width: 48em) {
	nav label { display: block; cursor: pointer; padding: .75em 1em; }
	nav input[type=checkbox] ~ * { display: none; }
	nav input[type=checkbox]:checked ~ * { display: block; }
}

header nav { padding: .25em 0; font-size: 1.2em; }
header nav {  }
header nav ul { list-style: none; padding: 0 0 0 0; margin: 0 0 0 0; }

@media (max-width: 48em) {
	header nav ul { display: block; }
	header nav ul > li { display: block; border-bottom_: #ddd 1px solid; }
	header nav ul > li > a { display: block; padding: .5em 1em; }
}

label i { font-style: inherit; text-decoration: none; color: inherit; font-weight: inherit; display: inline-block; }
span + i, i + span, i + i { margin-inline-start: .25em; }

@media (min-width: 48em) {
	header nav { text-align: end;  }
	header nav { padding: .75em 1em; font-size: 1.1em; }
	header nav ul { line-height: 1; display: block; }
	header nav ul > li { display: inline-block; vertical-align: middle; line-height: normal; box-sizing: border-box; }
	header nav ul { margin-left: -.25rem; margin-right: -.25rem; }
	header nav ul > li { padding-left: .25rem; padding-right: .25rem; }
	header nav ul > li > a { padding: .25em .5em; }
}

h4 { margin: 0; }

ul.pw-separated, ol.pw-separated { padding: 0 1em; }
.pw-separated li + li { margin-top: .5em; }

li > a, a.pw-block { display: block; }
@media (max-width: 48em) {
	a.pw-block { padding: .25em 0; }
	.pw-desktop { display: none; }
}
@media (min-width: 48em) {
	.pw-mobile { display: none; }
}

/* colors */
h2 { color: #379392; font-weight: normal; }
h2 { color: #076362; font-weight: normal; }
body > header, body > header nav { background-color: #449; color: #fff; vertical-align: middle; }
/* header nav { background-color: #449; color: #fff; } */
header a { color: #fff; text-decoration: none; }
header nav a:hover { background-color: #66c; }
header .pw-logo { font-size: 1.25em; }

a { color: #449; }
nav label { background-color: #449; color: #fff; }
main nav h4 { color: #449; }

.pw-hero { background-color: #eaf2e5; color: #000; vertical-align: middle; }
figure { width: 100%; padding: 0; margin: 0; }
figcaption { opacity: 0.6; }

@media (max-width: 48em) {
	footer { text-align: center; }
	footer a { padding: .5em 0;}
}