body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td { 
	padding: 0;
	margin: 0;
}
fieldset, img { 
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
caption, th {
	text-align: left;
}
article, aside, figure, section, header, footer { display: block; }

h1 { font-size: 1.5em; }
h2 { font-size: 1.35em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1em; }

body {
	background: #dbe3e2;
	background: linear-gradient(200deg, rgba(99,153,203,0.2) 5rem, rgba(222,147,29,0.2) 100rem, rgba(11,48,124,0.3) 150rem, rgba(11,48,124,0.3) calc(97% - 5rem), rgba(99,153,203,0.5) 100%), #fff;
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a:link {
	color: #0033aa;
}

a:link:visited {
	color: #6600aa;
}

body.admin {
	display: block;
}

header.main {
	text-align: center;
	margin: 1em;
}

header.main h1 a {
	display: inline-block;
	background: url("logo.png") no-repeat 0px 0px;
	width: 500px;
	height: 121px;
	text-indent: -70em;
	overflow: hidden;
}

header.main h2 {
	color: #003380;
	font-size: 1.4em;
	font-weight: normal;
}

header.main.small h1 a {
	background-image: url("logo_small.png");
	width: 300px;
	height: 73px;
}

header.main.small h2 {
	font-size: .8em;
}

header.main nav ul {
	margin: .8em 0;
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
}

header.main nav li {
	margin: .2em .5em;
}

header.main nav li a {
	display: inline-block;
	font-size: 1.2em;
	text-decoration: none;
	color: #000;
	background: #fff;
	border-radius: .5em;
	padding: .3em .5em;
	transition: color .25s, box-shadow .25s, background-color .25s;
}

header.main nav li a span {
	border-bottom: 2px solid #afc6e9;
	display: inline-block;
}

header.main nav li a:hover {
	box-shadow: 0px 0px 5px #003380;
	background: hsl(220, 30%, 95%);
	color: #3771c8;
}

header.main nav li a:hover span {
	border-color: #3771c8;
}

header.main nav li.current a {
	box-shadow: 0px 0px 5px #003380;
}

header.main nav li.current a span {
	border-bottom-color: #3771c8;
}

/** FOOTER *****************************/
footer.main {
	margin-top: auto;
	background: rgba(255, 255, 255, 0.5);
/*	background: linear-gradient(200deg, rgba(99,153,203,0.5) 5%, rgba(222,147,29,0.2) 45%, rgba(11,48,124,0.3) 90%), #fff;*/
	box-shadow: 0px 0px 5px #666;
	padding: 1rem;
	clear: both;
	display: grid;
	grid-template-columns: .2fr 1fr .2fr;
	justify-content: space-between;
	align-items: center;
}

footer.main .home a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
}

footer.main h3 {
	text-indent: -70em;
	overflow: hidden;
	background: url("logo_small.png") no-repeat top left;
	width: 200px;
	height: 45px;
	background-size: contain;
	margin-bottom: .5em;
	display: block;
}

footer.main h4 {
	font-weight: normal;
	font-size: 10pt;
}

footer.main a {
	color: #003380;
	background: #fff;
	background-repeat: no-repeat;
	background-position: .2em center;
	border-radius: .5em;
	padding: .3em .5em;
	transition: color .25s, box-shadow .25s;
}

footer.main .mastodon {
	text-align: right;
}

footer.main .mastodon a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	font-size: .8em;
}

footer.main .mastodon a::before {
	display: block;
	background: no-repeat center center url('data:image/svg+xml;utf8,<svg height="100%" viewBox="0 0 24 24" width="100%" fill="%233771c8" xmlns="http://www.w3.org/2000/svg"><path d="m20.94 14c-.28 1.41-2.44 2.96-4.97 3.26-1.31.15-2.6.3-3.97.24-2.25-.11-4-.54-4-.54v.62c.32 2.22 2.22 2.35 4.03 2.42 1.82.05 3.44-.46 3.44-.46l.08 1.65s-1.28.68-3.55.81c-1.25.07-2.81-.03-4.62-.5-3.92-1.05-4.6-5.24-4.7-9.5l-.01-3.43c0-4.34 2.83-5.61 2.83-5.61 1.45-.66 3.91-.96 6.47-.96h.06c2.56 0 5.02.3 6.47.96 0 0 2.83 1.27 2.83 5.61 0 0 .04 3.21-.39 5.43m-2.94-5.09c0-1.08-.3-1.91-.85-2.56-.56-.63-1.3-.96-2.23-.96-1.06 0-1.87.41-2.42 1.23l-.5.88-.5-.88c-.56-.82-1.36-1.23-2.43-1.23-.92 0-1.66.33-2.23.96-.55.65-.84 1.48-.84 2.56v5.26h2.1v-5.11c0-1.06.45-1.62 1.36-1.62 1 0 1.5.65 1.5 1.93v2.79h2.07v-2.79c0-1.28.5-1.93 1.51-1.93.9 0 1.35.56 1.35 1.62v5.11h2.11z"/></svg>');
	width: 48px;
	height: 48px;
	content: "";
	margin-bottom: .2em;
}

footer.main .eco a {
	padding-left: 2.5em;
	background-image: url('data:image/svg+xml;utf8,<svg height="26" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m42.1561026 48.217237c8.7485924 0 17.1969161-8.5354039 17.1969161-17.2839963s-14.1636103-32.67552765-14.1636103-32.67552765-17.0702343 22.11035475-18.1036889 31.50882215c-1.0334546 9.3984673 6.3217907 18.4507018 15.0703831 18.4507018z" fill="%2380d25b" transform="matrix(.80901699 .58778525 -.58778525 .80901699 21.903102 -20.936817)"/><g stroke="%2322ba8e" stroke-linecap="round"><path d="m49.7607359 15.8672252s-14.5771673 8.9472854-19.8781842 25.4261192c-5.3010168 16.4788339-21.00063818 14.6073582-21.00063818 14.6073582" stroke-width="3"/><path d="m41.946 36.659-9.744-.414-4.716-8.309" stroke-width="2"/><path d="m44.938 27.965-6.644-1.359-2.134-5.418" stroke-width="2"/></g></g></svg>');
}

footer.main .contact a {
	padding-left: 2.5em;
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" height="26" xmlns="http://www.w3.org/2000/svg" fill="%233771c8"><path d="m12 16.5a4.5 4.5 0 1 1 4.5-4.5 4.50491 4.50491 0 0 1 -4.5 4.5zm0-7a2.5 2.5 0 1 0 2.5 2.5 2.50294 2.50294 0 0 0 -2.5-2.5z"/><path d="m12 22a10 10 0 1 1 10-10v.75a3.75 3.75 0 0 1 -7.5 0v-4.25a1 1 0 0 1 2 0v4.25a1.75 1.75 0 0 0 3.5 0v-.75a8 8 0 1 0 -4 6.92822 1.00016 1.00016 0 1 1 1 1.73242 10.02069 10.02069 0 0 1 -5 1.33936z"/></svg>');
}

footer.main nav ul {
	display: flex;
	flex-wrap: wrap;
	padding: 1em;
	justify-content: center;
	gap: .8em;
}

footer.main nav ul a {
	display: block;
}

footer.main a:hover {
	text-decoration: underline;
	color: darkred;
	box-shadow: 0px 0px 5px #003380;
}

main {
	margin: 1em auto;
	max-width: 65em;
	margin-bottom: 2rem;
}

.testimonials {
	margin: 1em auto;
	display: flex;
	justify-content: flex-start;
}

.testimonials div {
	padding-top: 4em;
	margin-left: 1em;
}

.testimonials.small div {
	padding: 0;
	max-width: 50em;
	margin: 4em auto;
}

.testimonials a {
	color: inherit;
	text-decoration: none;
}

.testimonials a:hover {
	color: #003380;
}

.testimonials figure {
	margin: 0 2em;
}

.testimonials figure a {
	display: block;
	text-indent: -70em;
	overflow: hidden;
}

.testimonials.bikeshop figure a {
	background: url('pko/drawing_bikeshop-fs8.png') no-repeat center center;
	width: 300px;
	height: 254px;
}

.testimonials.cafe figure a {
	background: url('pko/drawing_cafe-fs8.png') no-repeat center center;
	width: 284px;
	height: 250px;
}

.testimonials.migrants figure a {
	background: url('pko/drawing_migrants-fs8.png') no-repeat center center;
	width: 278px;
	height: 250px;
}

.testimonials blockquote {
	font-size: 2em;
	font-style: italic;
	font-family: Georgia, "Times New Roman", Times, serif;
	position: relative;
}

.testimonials blockquote i {
	font-size: 3em;
	color: #fff;
	line-height: .5em;
	display: inline-block;
	position: absolute;
	margin-left: -.6em;
	margin-top: -.2em;
}

.testimonials blockquote i:nth-child(2) {
	margin-left: 0;
	margin-top: .2rem;
}

.testimonials cite {
	font-style: normal;
	color: #003380;
}

.testimonials p {
	margin-top: 1em;
}

.announcement {
	margin: 0 auto 1em auto;
	text-align: center;
}

.announcement a {
	display: inline-block;
	padding: .5em 1em;
	border-radius: .5em;
	background: #fff;
	color: darkred;
}

.announcement h3 {
	font-weight: normal;
}

.bg.users { background-image: url("pko/bg_users-fs8.png"); }
.bg.accounting { background-image: url("pko/bg_accounting-fs8.png"); }
.bg.documents { background-image: url("pko/bg_documents4-fs8.png"); }
.bg.web { background-image: url("pko/bg_site-fs8.png"); }
.bg.donate { background-image: url("pko/bg_donate-fs8.png"); }
.bg.services { background-image: url("pko/bg_services-fs8.png"); }
.bg.settings { background-image: url("pko/bg_settings-fs8.png"); }
.bg.bookings { background-image: url("pko/bg_bookings-fs8.png"); }

article.content, section.page {
	clear: both;
	margin-bottom: 2rem;
}

section.page header form {
	margin-bottom: 1em;
	text-align: center;
	font-size: 1.2em;
}
section.page.single header form {
	margin: 1em 0;
}
section.page header form input[type=search] {
	min-width: 15em;
}
section.page header form label {
	margin: 0 .5em;
	font-size: .8em;
	font-weight: normal;
}

section.page.single > header {
	text-align: center;
}

section.page header h1 {
	font-size: 1.7em;
	font-weight: normal;
}

section.page article header {
	text-align: center;
	margin: 1rem 0;
	padding-bottom: 1rem;
	border-bottom: 2px solid #999;
}

section.page article header h3 {
	margin-top: .5em;
	font-weight: normal;
	color: #666;
	font-size: .9em;
}

section.page.features header {
	margin: 0;
	margin-bottom: 2rem;
	border-bottom: none;
}

section.page.features header > h1 {
	font-size: 2em;
	color: #003380;
}


section.page nav.categories li {
	font-size: 1.2rem;
	margin: 1em 0;
	text-align: right;
}

section.page nav.categories a {
	color: blue;
}

section.page nav.categories a.btn {
	border-color: #999;
	background: #eee;
	font-weight: normal;
}

section.page article.extract {
	margin: 1rem 0;
}

section.page article.extract h2 {
	margin-bottom: .8rem;
	font-size: 1.3em;
	font-weight: bold;
}

section.page article.extract h2 a {
	display: block;
}

section.page article.extract h4 {
	font-size: .9em;
	margin-bottom: .8rem;
	font-weight: normal;
	color: #666;
	margin-left: 1rem;
}

section.page article.extract .content {
	margin-left: 1rem;
}

article.content h1 {
	border-bottom: .1em solid #003380;
	margin-bottom: .7em;
	text-align: center;
}

article.content h1, article.content h2, article.content h3, article.content h4, nav.buttons h2 {
	color: #003380;
	margin-bottom: 1em;
}

article.content aside {
	float: left;
	margin-right: 2em;
	margin-bottom: .5em;
}

article.content:nth-child(odd) aside {
	float: right;
	margin-left: 1em;
	margin-right: 0;
}

article.content aside img, article.content figure img {
	border-radius: .2em;
	box-shadow: 2px 2px 5px #000;
	max-width: 100%;
}

article.content figure.center {
	text-align: center;
}

article.content aside .noborder img {
	box-shadow: none;
}

article.content aside a:hover img, article.content figure a:hover img {
	box-shadow: none;
	opacity: 0.75;
}

article.content aside.left {
	float: left;
}

article.content .gallery {
	display: flex;
	margin: 1em 0;
	clear: both;
	text-align: center;
}

article.content .gallery figure {
	margin: 1em;
}

article.content .gallery figcaption {
	font-size: .8em;
	color: #666;
	margin-top: .5em;
}

.contact-form .questions {
	background: url('pko/contact-fs8.png') no-repeat top left;
	padding-left: 310px;
}

.contact-form .questions li {
	margin: 1em;
	list-style: none;
	font-size: 1em;
}

.contact-form .questions li a {
	color: blue;
}

.contact-form .questions li label {
	padding: .5em 1em;
	background: #eee;
	border-radius: .5em;
	cursor: pointer;
	transition: all 0.2s linear;
	display: flex;
}

.contact-form .questions li label input {
	width: 16px;
	height: 16px;
	margin-right: .5em;
}

.contact-form h2 {
	text-align: center;
	margin: 1em 0;
}

.contact-form .web-content {
	text-align: center;
}

article.content table th, article.content table td {
	padding: .4em .6em;
}

.content ul li, .content ol li {
	list-style-type: square;
	margin-left: 2em;
}

.content ul, .content ol {
	margin: 1em 0;
}

.content ol li {
	list-style-type: decimal;
}

.content fieldset {
	border-radius: .5em;
	background: rgba(255,255, 255, 0.75);
	padding: .5em;
	margin-bottom: .8rem;
}

.content fieldset label {
	cursor: pointer;
}

.content fieldset dd {
	margin: .5em;
}

form.optout {
	max-width: 50em;
	margin: 1em auto;
	text-align: center;
}

article.content p.demo {
	font-size: 1.3em;
	text-align: center;
}

article.content p {
	margin-bottom: .8em;
}


p.submit {
	text-align: center;
}

.alternatives {
	border-radius: 1em;
	border: .2em solid #fff;
	background: #fff;
	padding: .5em;
	width: 100%;
	overflow: auto;
	text-align: center;
}

.tableau {
	border-collapse: collapse;
	border-radius: 1em;
	border: .2em solid #fff;
	overflow: hidden;
	background: #fff;
	margin: 1em;
}

.tableau thead th, .tableau thead td {
	padding: .2em .3em;
	font-size: .8em;
}

.tableau th {
	font-weight: bold;
}

.tableau i {
	font-style: normal;
	color: darkgreen;
}


.tableau .icn {
	font-size: 2em;
}

.tableau i.icn {
	font-size: 1.2em;
}

table.tableau tbody tr:nth-child(odd) {
	background-color: #eee;
}

table.tableau tbody tr.highlight {
	background: #ffc;
}

table.tableau tbody tr.highlight b {
	font-size: 1.4em;
	color: #330;
}

.alternatives li {
	display: inline;
	margin-right: .5em;
	padding-right: .5em;
}

.btn {
	box-shadow: 0px 0px 5px #3771c8;
	border-radius: 0.5em;
	color: #003380;
	cursor: pointer;
	display: inline-block;
	font-size: 16pt;
	font-weight: bold;
	margin-bottom: 0.5em;
	margin-right: 1em;
	padding: .5em .7em;
	text-decoration: none;
	background: #fff;
	transition: color .25s, box-shadow .25s, background-color .25s;
}

.btn span {
	border-bottom: 2px solid #afc6e9;
	display: inline-block;
	transition: border-color .25s;
}

.btn:hover {
	box-shadow: 0px 0px 5px #003380;
	background: hsl(220, 30%, 95%);
	color: #3771c8;
}

.btn:hover span {
	border-color: #003380;
}

.btn.small {
	font-size: 1em;
	padding: .4rem .6rem;
}

.btn.icn::after, .btn.icn-left::before {
	content: "";
	display: inline-block;
	width: 24px;
	margin-left: 6px;
	height: 24px;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-position: center center;
}

.btn.icn-left::before {
	margin-right: 6px;
	margin-left: 0;
}

.btn.icn-left::after {
	display: none;
}

.icn-receipt::after {
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g stroke="%23003380" fill="none" stroke-linejoin="round" stroke-width="32"><path d="m160 336v-288l32 16 32-16 31.94 16 32.37-16 31.69 16 31.79-16 31.93 16 32.28-16 32.01 16 31.99-16v224"/><path d="m480 272v112a80 80 0 0 1 -80 80 80 80 0 0 1 -80-80v-48h-272a15.86 15.86 0 0 0 -16 16c0 64 6.74 112 80 112h288"/><g stroke-linecap="round"><path d="m224 144h192"/><path d="m288 224h128"/></g></g></svg>');
}

.icn-right::after {
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 8 8" fill="%23003380" xmlns="http://www.w3.org/2000/svg"><path d="m1.5 0-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4z" transform="translate(1)"/></svg>');
}

.icn-left::before {
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 8 8" fill="%23003380" xmlns="http://www.w3.org/2000/svg"><path d="m4 0-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5z" transform="translate(1)"/></svg>');
}

form input[type=submit], button[type=submit], input[type=button], a.button {
	border-radius: 1em;
	border: none;
	box-shadow: 0px 0px 5px 0 #ccc;
	cursor: pointer;
	border: 2px solid #999;
	background-color: #eee;
	display: inline-block;
	font-size: inherit;
	border-radius: .2em;
	padding: .2em .4em;
	margin: .2em .5em;
	text-decoration: none;
	transition: color .3s, background-color .3s;
	color: #000;
}

form input[type=submit]:hover, button[type=submit]:hover, input[type=button]:hover, a.button:hover {
	box-shadow: 0px 0px 5px 0 orange;
	border-color: #666;
}


button svg {
	vertical-align: middle;
	margin-right: .5em;
}

.button.selected {
	font-weight: bold;
	border-color: #000;
	text-decoration: none;
}

a.button {
	color: darkblue;
	text-decoration: underline;
}

a.button:hover {
	text-decoration: none;
}


.essai {
	padding: 1em 0;
	text-align: center;
}

.essai article h1 {
	color: #003380;
	margin-bottom: .4em;
}

.essai article h2 {
	color: #3771c8;
	margin-bottom: .5em;
}

.essai article h3 {
	font-weight: normal;
	margin-bottom: .6em;
	color: #666;
}

.essai article h3 a {
	color: #006;
}

.essai article h4 {
	color: #666;
	font-weight: normal;
	margin: 1em 0;
	font-size: .9em;
}

.essai dd u {
	text-decoration: none;
	color: #666;
}


.essai form {
	text-align: center;
	background: #fff;
	border-radius: .5em;
	max-width: 35em;
	margin: 1em auto;
}

form fieldset {
	padding: .5em;
}

form fieldset legend {
	border-bottom: 2px solid #999;
	padding: .5em;
	width: calc(100% - 1em);
	display: block;
	margin-bottom: 1em;
	font-size: 1.2em;
	color: #666;
	float: left;
}

input[type=text], input[type=email], input[type=url], input[type=search], input[type=password], select, input[type=number] {
	font-size: 1.2em;
	padding: .4rem .6rem;
	font-family: inherit;
	min-width: 20em;
	max-width: 100%;
	border: 1px solid #999;
	font-size: inherit;
	background: #fff;
	color: #000;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input:not(:placeholder-shown):focus:invalid {
	border-color: #f33;
}


input:focus, button:focus, select:focus, textarea:focus, input[type=radio]:focus + label::before, input[type=checkbox]:focus + label::before {
	box-shadow: 0 0 5px .2rem orange;
	outline: 0;
}

fieldset dt label {
	font-weight: bold;
}

.login {
	width: 100%;
	max-width: 40em;
}

.login .help {
	margin: 2em;
	color: #333;
}

.login #f_id {
	width: 70%;
}

.login h3 {
	font-weight: normal;
	font-size: 1em;
	margin-bottom: .5em !important;
	margin-left: 1em;
}

.login .id {
	display: flex;
	align-items: stretch;
	justify-content: stretch;
	border: 1px solid #666;
	padding: 0;
	background: #fff;
	border-radius: .5em;
	font-size: 1.3em;
	width: 100%;
	margin: 0 auto;
}

.login .email {
	text-align: center;
}

.login .id input, .login .id select {
	border: none;
	min-width: 0;
	max-width: auto;
	padding: .8rem;
	border-radius: .5em;
}

.login #f_id {
	border-radius: .5em 0 0 .5em;
	min-width: 15em;
}

.login .id select {
	border-left: 2px dashed #ccc;
	border-radius: 0 .5em .5em 0;
	font-size: 1rem;
	min-width: 10em;
}

.login .forgot, .login p.submit a {
	display: block;
	text-align: center;
	padding: .8rem;
	font-size: .8em;
}

.login a {
	color: #669;
}

.login a:hover {
	color: darkred;
}

.login p.submit {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.suggest input[type=text] {
	font-family: monospace;
	text-align: center;
	font-size: .9em;
	opacity: 0.6;
	cursor: pointer;
	width: auto;
	min-width: 0;
}

.suggest input[type=button] {
	font-size: .7em;
	opacity: 0.6;
}

.suggest input:focus {
	opacity: 1;
}

.suggest #f_copied {
	display: block;
	opacity: 0;
	transition: .5s;
	color: darkorange;
	padding: .5em;
	font-size: .9em;
}

fieldset input[type=text]:not([size]), fieldset input[type=email] {
	width: 90%;
}

fieldset dd {
	margin: .5em .2em;
	margin-bottom: 1em;
}

form .help, p.help {
	font-size: .8em;
	color: #666;
}

form .submit {
	margin: 2em;
}

form .submit input, form .submit button {
	padding: .4em;
	font-size: 1.2em;
	cursor: pointer;
}

fieldset label {
	cursor: pointer;
}

fieldset label em {
	color: #666;
}

.zoomFull {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
	vertical-align: middle;
	padding: 2%;
	cursor: pointer;
}

.zoomFull img {
	margin: auto;
	max-width: 90%;
	max-height: 90%;
	min-width: 320px;
	min-height: 240px;
	background: #fff;
}

.zoomFull a {
	color: #000;
	background: #ccc;
	box-shadow: 0px 0px 10px #000;
	border-radius: .5em;
	padding: .5em;
	display: block;
	width: 10em;
	margin: 1% auto;
}

#adr {
	unicode-bidi:bidi-override;
	direction: rtl;
}

#adr b {
	display: none;
}

#adr:first-letter, #adr::first-letter {
	display: none;
	color: #e9ddaf;
}

article.short {
	text-align: center;
}

p.error {
	box-shadow: 0px 0px 5px 2px darkred;
	border-radius: .5rem;
	padding: 1em;
	text-align: center;
	background: #ffd;
	color: darkred;
	font-size: 1.2em;
	margin: 2em auto !important;
}

.gentle-alert {
	box-shadow: 0px 0px 5px #cc0;
	padding: .5em;
	background: #ffe;
	margin: 1.5rem 0;
	border-radius: .5em;
}

.payment .gentle-alert {
	text-align: center;
}

.alert {
	border: 1px solid #cc0;
	border-radius: .5em;
	padding: .5em;
	background: #ffc;
	font-size: 1.2em;
	margin: 1em auto;
}

.content .alert p, .content .gentle-alert p {
	margin: .8rem 0;
}

p.alert br {
	margin-bottom: .5em;
	display: block;
	content: "";
}

p.alert mark {
	border: 1px solid #cc0;
	padding: .3em;
	border-radius: .3em;
	display: inline-block;
	background: #fff;
	font-weight: bold;
}

p.confirm {
	box-shadow: 0px 0px 5px 2px darkgreen;
	border-radius: .5em;
	padding: .5em;
	text-align: center;
	background: #dfd;
	color: darkgreen;
	font-size: 1.2em;
}

article.payment {
	margin-bottom: 3em;
}

article.payment fieldset {
	max-width: 50%;
	text-align: center;
	margin: 2em auto;
}

article.payment h2 {
	margin-top: 2em;
	border-bottom: .1em solid #003380;
	text-align: center;
}

article.payment .methods {
	text-align: center;
	margin: 1em auto;
	display: grid;
	grid-template-columns: .5fr .5fr;
}

article.payment .methods li {
	list-style: none;
	text-align: center;
	margin: 1em;
}

article.payment .methods .card {
	grid-column: 1 / span 2;
	align-self: center;
	justify-self: center;
  	width: 38em;
}

article.payment .methods h4 img {
	height: 20px;
	margin-left: 5px;
	vertical-align: middle;
}

article.payment .methods p img {
	height: 14px;
	margin-left: 5px;
}

article.payment table {
	margin: 2rem auto;
}

article.payment h1 {
	margin: 1rem 0;
}

article.payment button {
	padding: .5em 1em;
	border: .1em solid #ccc;
	background: #fff;
	border-radius: .5em;
	cursor: pointer;
	transition: all 0.2s linear;
	width: 90%;
	overflow: hidden;
}

article.payment .help {
	text-align: center;
}

article.payment .help img {
	height: 14px;
	opacity: .8;
	margin-left: 3px;
	vertical-align: bottom;
}

article.payment .methods button h3 > img {
	width: 40px;
	margin-right: .3em;
	float: left;
}

article.payment .methods button b, button[name="quick"] {
	text-decoration: underline;
}

article.payment .methods .alternative.wire {
	grid-column: 1 / span 2;
}

article.payment .methods .alternative button {
	background: #eee;
	border: none;
}

article.payment .methods .alternative small {
	color: #999;
}

article.payment .methods .alternative button h3 {
	color: #006;
	font-size: 1.2em;
}


article.payment input.amount {
	padding: .2em .4em;
	width: 5em;
	font-size: 18pt;
	min-width: 0;
}

article.payment button:hover {
	box-shadow: 0px 0px 5px #000;
	border-color: #fff;
}

article.payment button:hover b {
	color: #090;
}

article.payment h2 {
	border: none;
	margin: 0;
	padding: 0;
}

article.payment .methods h3, button[name="quick"] {
	margin: .1rem;
	padding: 0;
	font-size: 1.7em;
	font-weight: bold;
	color: blue;
}

article.payment .methods h4 {
	margin: .5rem;
	font-size: 10pt;
	font-weight: normal;
	color: #666;
}

article.payment .card h3 {
	font-size: 2.4em;
}

article.payment .card button h3 img {
	width: 90px;
}

article.payment .card h4 {
	font-size: 1.2em;
}

article.payment.card button {
	margin: .5rem;
	padding: .4rem .8rem;
	font-size: 18pt;
}

article.payment > h3 {
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	margin: .8em 0;
	padding: .5em 0;
	color: #333;
	font-weight: normal;
}

article.payment > h3 a {
	color: #66c;
}

.wire_details {
	margin: 1em auto;
	max-width: 30em;
	border-radius: .5em;
	background: #fff;
	overflow: hidden;
	text-align: center;
	border: .2em solid white;
}

.wire_details dt {
	padding: .3em;
	font-size: .9em;
	background: #ddd;
	color: #333;
}

.wire_details dd {
	padding: .3em;
	font-size: 1.2em;
}

.wire_details tt, p.ref tt {
	font-size: 1.5em;
	background: #fee;
	color: darkred;
}

tt {
	background: #666;
	color: #fff;
	border-radius: .5em;
	padding: .1em .3em;
}

.redir {
	padding-top: 50px;
	background-position: center center;
}

.admin > p {
	text-align: center;
}

.admin table tr.action td {
	text-align: center;
	padding: .2em;
}

.admin table {
	width: 100%;
	margin: 1em 0;
	border-collapse: collapse;
}

.admin table td, .admin table th {
	padding: .2em;
	vertical-align: top;
}

.admin table:not(.tableau) tbody tr:nth-child(odd) {
	background: rgba(255, 255, 255, 0.5);
}

.admin table .dates {
	font-size: .9em;
	color: #666;
}

.admin table b {
	font-size: 200%;
	line-height: 10pt;
	font-weight: normal;
	color: #fff;
	padding: .5rem;
	border-radius: .5rem;
	display: inline-block;
}

.admin table b.warn { background: darkorange; }
.admin table b.ok { background: green; }
.admin table b.error { background: red; }

.admin table .actions {
	white-space: nowrap;
}

.admin table .actions a {
	display: inline-block;
	border-radius: 50%;
	margin: .2em;
	background: #fff no-repeat center center;
	width: 2rem;
	height: 2rem;
	text-indent: -50em;
	overflow: hidden;
	background-size: 90% 90%;
}

.admin table .actions a:hover {
	box-shadow: 0px 0px 5px 2px orange;
}

.admin table .actions a.login {
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="darkblue"><path d="m416 448h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c17.7 0 32-14.3 32-32v-192c0-17.7-14.3-32-32-32h-84c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h84c53 0 96 43 96 96v192c0 53-43 96-96 96zm-47-201-168-168c-15-15-41-4.5-41 17v96h-136c-13.3 0-24 10.7-24 24v96c0 13.3 10.7 24 24 24h136v96c0 21.5 26 32 41 17l168-168c9.3-9.4 9.3-24.6 0-34z"/></svg>');
}

.admin table .actions a.details {
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="darkblue"><path d="m256 8c-136.957 0-248 111.083-248 248 0 136.997 111.043 248 248 248s248-111.003 248-248c0-136.917-111.043-248-248-248zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12z"/></svg>');
}

.admin table .actions a.receipt {
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" stroke="darkblue"><g fill="none" stroke-linejoin="round" stroke-width="32"><path d="m160 336v-288l32 16 32-16 31.94 16 32.37-16 31.69 16 31.79-16 31.93 16 32.28-16 32.01 16 31.99-16v224"/><path d="m480 272v112a80 80 0 0 1 -80 80 80 80 0 0 1 -80-80v-48h-272a15.86 15.86 0 0 0 -16 16c0 64 6.74 112 80 112h288"/><g stroke-linecap="round"><path d="m224 144h192"/><path d="m288 224h128"/></g></g></svg>');
}

.admin .stats {
	background: #ccc;
	width: 100%;
	height: 40px;
	display: flex;
	border-radius: .3rem;
	overflow: hidden;
	box-shadow: 0px 0px 5px #000;
}

.admin .stats div {
	position: relative;
	height: 100%;
}

.admin .stats span {
	display: flex;
	flex-direction: column;
	white-space: nowrap;
	padding: .3rem;
	color: #fff;
	text-shadow: 0px 0px 5px #000;
	font-size: 8pt;
}

.admin table span {
	color: #fff;
	padding: .1rem .2rem;
	border-radius: .3rem;
	font-size: .9em;
	white-space: nowrap;
}

nav.help {
	max-width: 60em;
	margin: 0 auto 1em auto;
	clear: both;
	text-align: right;
}

nav.help a {
	display: block;
	border-radius: .5em;
	padding: 2em 1%;
	margin: 1% 2%;
	background: rgba(255, 255, 255, 0.5) no-repeat 0 center;
	width: 44%;
	float: left;
	font-size: 18pt;
	color: darkblue;
	font-weight: normal;
	transition: color .5s, background-color .5s;
}

nav.help a:hover {
	background-color: #fff;
	color: blue;
}

#mobile { display: none; width: 0px; }


.offers {
	display: grid;
	grid-template-columns: 0.4fr 0.6fr;
}

.offers h1 {
	display: none;
}

.offers .offer {
	border: 1px solid #ccc;
	background: #fff;
	text-align: left;
	margin: 0;
}

.offers .offer header {
	padding: 1rem;
	background: #eee;
}

.offers .offer article {
	padding: 1rem;
}

.offers .offer ul li {
	margin: .3em 0 .3em 1.5em;
	list-style: none;
	font-size: 1.4em;
}

.offers .offer ul li a {
	color: #003380;
}

.offers .offer.free ul li {
	font-size: 1.2em;
}

.offers .offer ul li::before {
	content: "";
	background: url("check.svg") no-repeat center center;
	background-size: contain;
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: middle;
	margin-left: -1.5em;
	margin-right: .5em;
}

.offers .offer ul li.not::before {
	background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 448 512" height="16" fill="%23aaa" xmlns="http://www.w3.org/2000/svg"><path d="m416 208h-384c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"/></svg>');
}

.offers .offer ul.more li::before {
	background-image: url("check.svg");
}

.offers .offer ul li.not {
	color: #999;
}

.offers .offer ul.more {
	font-size: .7em;
	color: #666;
}

.offers .offer.paid {
	box-shadow: 0px 0px 10px #666;
	border: none;
}

.offers .offer h2 {
	text-align: left;
	margin: 0;
	margin-bottom: .6rem;
	font-size: 2rem;
}

.offers .offer sup {
	font-size: .8rem;
}

.offers .offer .suggest {
	font-size: .9rem;
	color: #666;
}

.offers .notes {
	font-size: .8em;
	color: #666;
}

section.single article {
	border-radius: .5em;
	background: #fff;
	text-align: left;
	margin: 1rem auto;
	padding: 1rem;
	max-width: 50rem;
}

section.single article footer {
	margin-top: 2rem;
	text-align: center;
}

.features .web-grid article {
	border-radius: .5em;
	background: #fff;
	padding: 1rem;
}

.features .web-grid article h2 {
	font-weight: normal;
}

.features figure {
	background: rgba(222,147,29,0.2);
	border-radius: .5em;
	padding: .5rem;
}

.features .drawing figure {
	background: none;
	border-radius: none;
	padding: 0;
}

.features .drawing figure img {
	max-width: 200px;
}

.features .web-content figure.image figcaption {
	color: #333;
	font-style: normal;
	font-size: .9em;

}

.features .web-content > h1 {
	text-align: center;
	font-weight: normal;
	color: #003380;
	margin: 2em 0;
	font-size: 1.7em;
}

.features figure img {
	border-radius: .5em;
}

.try .details {
	font-size: .8em;
	color: #666;
	margin: 1rem;
}


.hidden {
	display: none;
}

p.updated {
	font-size: .9em;
	color: #444;
	text-align: right;
	font-style: italic;
	margin-top: 3em;
}

.buttons h2 {
	text-align: center;
}

.buttons ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-bottom: 1em;
	gap: .5em;
}

.buttons li {
	display: block;
}

.bigbuttons li {
	width: 15em;
}

.buttons li a {
	display: inline-block;
	border: 1px solid #ccc;
	background: #fff no-repeat center 0;
	padding: .5em;
	border-radius: .5em;
}

.buttons li a.videos::before {
	content: "";
	padding-left: 30px;
	background: no-repeat left center;
	background-image: url('data:image/svg+xml;utf8,<svg height="24" viewBox="0 0 64 64" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="%235b68c0" height="58" rx="10" width="58" x="3" y="3"/><path d="m24 20 21 11.798-21 12.202z" fill="%23fff"/></g></svg>');
}

.buttons.primary a {
	font-size: 1.2em;
	color: #003380;
	text-decoration-color: #9ab;
}


.bigbuttons li a {
	height: 9em;
	background-size: cover;
	padding: 0;
	padding-top: 5em;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	color: #003380;
	text-decoration-color: #9ab;
}

.bigbuttons li a span {
	display: block;
	font-size: 1.1em;
	background: #fff;
	border-top: 1px solid #ccc;
	padding: .5em;
	font-weight: bold;
}

.buttons a:hover {
	box-shadow: 0px 0px 5px orange;
	color: darkred;
}

.buttons-list {
	display: flex;
	justify-content: center;
}

.buttons-list ul {
	flex-direction: column;
	text-align: left;
	align-items: flex-start;
}

.buttons-list ul li {
	margin: .5em;
}

.buttons-list li h3 {
	font-weight: inherit;
	font-size: inherit;
	margin: 0;
	padding: 0;
}

.buttons-list li a {
	display: inline-block;
	border: none;
	font-size: 1.2em;
	background: no-repeat .5em center;
	background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" fill="none" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8.001 4.001 8.012 7.999-8.012 7.999" stroke="%23bbb" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/></svg>');
	padding-left: 2em;
}

.buttons-list li a:hover {
	background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" fill="none" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8.001 4.001 8.012 7.999-8.012 7.999" stroke="darkred" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/></svg>');
}

.manual-dl {
	text-align: center;
	background: #fff;
	margin: 2em auto;
	border-radius: .5em;
	padding: 1em;
}

.manual-dl div {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.manual-dl p {
	font-size: .9em;
	color: #333;
	margin: 1em 0;
}

.manual-dl div figure {
	margin: 1em;
}

.manual-dl div figure small {
	color: #666;
}

.manual-dl div figure a {
	border: 1px solid #999;
	display: flex;
	position: relative;
	color: #003380;
	border-radius: .5em;
	overflow: hidden;
}

.manual-dl div figure a:hover {
	color: darkred;
	box-shadow: 0 0 5px orange;
}

.manual-dl div figure a img {
	opacity: .7;
}

.manual-dl div figure a:hover img {
	opacity: 1;
}

.manual-dl div figure a strong {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: .3em 0;
	padding-bottom: .4em;
	text-decoration: underline;
	display: block;
	font-size: 1.2em;
	text-align: center;
	background: #fff;
	border-top: 1px solid #999;
}

.manual-dl div figure:nth-child(2) img {
	width: 150px;
}

.manual-dl div figure:nth-child(1) strong {
	font-size: 1.3em;
}

nav.sidebar input[type=search] {
	width: 92%;
	min-width: unset;
}

input[type=submit].search-submit {
	margin-left: -30px;
	opacity: 0.7;
	padding: 0;
	font-size: 1.2em;
	background: no-repeat center center;
	box-shadow: none;
	text-indent: -100em;
	overflow: hidden;
	width: 24px;
	height: 24px;
	border: none;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTAgMGgyNHYyNGgtMjR6IiBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwIi8+PHBhdGggZD0ibTIwLjcxIDE5LjI5LTMuNC0zLjM5YTcuOTIgNy45MiAwIDAgMCAxLjY5LTQuOSA4IDggMCAxIDAgLTggOCA3LjkyIDcuOTIgMCAwIDAgNC45LTEuNjlsMy4zOSAzLjRhMSAxIDAgMCAwIDEuNDIgMCAxIDEgMCAwIDAgMC0xLjQyem0tMTUuNzEtOC4yOWE2IDYgMCAxIDEgNiA2IDYgNiAwIDAgMSAtNi02eiIgZmlsbD0iIzIzMWYyMCIvPjwvc3ZnPg==");
	transition: opacity .2s;
}

input[type=submit].search-submit:hover {
	opacity: 1;
}

.with-sidebar .breadcrumbs {
	margin: 1em 0;
}

.with-sidebar .breadcrumbs li:nth-child(1) { font-weight: bold; font-size: 1.2em; }
.with-sidebar .breadcrumbs li:nth-child(2) { font-size: 1.1em; }

.with-sidebar .breadcrumbs li::after {
	content: " ";
	width: 14px;
	height: 20px;
	background-image: url('data:image/svg+xml;utf8,<svg height="20" width="14" version="1.1" viewBox="0 0 10.39 18.36" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-38.02 -97.26)"><path d="m48.41 110.4-5.197 5.197-5.197-5.197v-2.592l4.279 4.279v-14.85h1.836v14.85l4.279-4.279z" fill="%23666" stroke-width=".2618"/></g></svg>');
	display: block;
	margin-left: .7em;
}

.breadcrumbs a {
	color: #006;
}

.page.single .breadcrumbs {
	display: flex;
	font-size: .9em;
	justify-content: center;
}

.page.single .breadcrumbs li::before {
	color: #666;
	content: ">";
	margin: 0 .5em;
	display: inline-block;
}

.with-sidebar nav.sidebar .siblings li {
	margin: .5em 0;
}

.with-sidebar nav.sidebar a {
	text-decoration: none;
	padding: .3em;
	display: inline-block;
	display: block;
}

.with-sidebar nav.sidebar a:hover {
	text-decoration: underline;
}

.with-sidebar nav.sidebar .siblings li.current a {
	color: darkred;
	background: #fff;
	padding-right: 1em;
	position: relative;
	border-radius: .5em 0 0 .5em;
	background: #fff no-repeat right center;
	padding-right: 30px;
	background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" fill="none" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8.001 4.001 8.012 7.999-8.012 7.999" stroke="%23aaa" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/></svg>');
}

.with-nav nav.sidebar form {
	display: none;
}

.with-nav .breadcrumbs {
	display: none;
}

.with-sidebar {
	display: grid;
	grid-template-columns: 25% 75%;
	grid-gap: 0em;
	width: 65em;
}

.with-sidebar > article {
	background: #fff;
	padding: .5em 2em;
	border-radius: 1em;
}

.forum-help {
	padding: 1em;
	margin-top: 1em;
	background: rgba(255, 255, 255, 0.5) no-repeat .5em .5em;
	background-image: url("pko/bg_help_forum-fs8.png");
	padding-left: 200px;
	border-radius: 1em;
	min-height: 140px;
}

.forum-help h3 {
	font-weight: normal;
	margin: .8em 0;
}

.forum-help p {
	margin: 1em 0;
}

/* Highlight text from Google Search, see https://developer.mozilla.org/en-US/docs/Web/CSS/::target-text */
::target-text {
	background: yellow;
	outline: 1px solid white;
}

body.dialog header.main {
	display: none;
}

body.dialog main {
	max-width: 60rem;
}

.thankyou img {
	margin: 1em auto;
	display: block;
	background: #fff;
	border-radius: 1em;
	padding: 1em;
}

@media handheld, screen and (max-width:980px) {
	#mobile {
		display: block;
		width: 1px;
	}

	body {
		font-size: 10pt;
	}

	header.main h1 a {
		background-image: url("logo_small.png");
		width: 300px;
		height: 73px;
	}

	.essai article, .essai form {
		float: none;
		text-align: center;
		max-width: 30em;
		margin: .5em auto;
	}

	article.content aside, article.content:nth-child(odd) aside {
		float: none !important;
		margin: .5em;
		text-align: center;
	}

	article.payment .methods .card {
		width: auto;
	}

	.testimonials {
		flex-direction: column;
	}

	.testimonials div {
		text-align: center;
		margin: 0 1em;
		padding: 0;
		font-size: .8em;
	}

	.testimonials blockquote i {
		font-size: 2em;
		color: #999;
	}

	.with-sidebar {
		display: flex;
		flex-direction: column-reverse;
		width: auto;
	}

	.with-sidebar > article {
		margin: 0;
	}

	.sidebar {
		margin: 1em 0;
	}

	.forum-help {
		display: none;
	}

	.bigbuttons li {
		margin: .5em;
		width: 12em;
	}
}

@media handheld, screen and (max-width:480px) {


	.offers, section.page > article {
		display: flex;
		flex-direction: column;
	}

	section.page nav.categories li {
		text-align: center;
	}

	article.payment .methods {
		display: block;
	}

	footer.main {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	footer.main .home {
		display: none;
	}

	.testimonials figure {
		margin: 0;
	}

	main {
		padding: 0;
	}

	.with-sidebar > article {
		margin: 0;
		border-radius: 0;
		padding: .5rem;
	}
}