/**
 * General font settings, utility classes, etc.
 */

/**/
@font-face { font-family: 'Quicksand'; font-weight: normal; font-style: normal; src: url("/s/general/quicksand-r.woff?h=2J3bPvdMHZuXYzKQNOFkuFdKdz0") format('woff'); }
@font-face { font-family: 'Quicksand'; font-weight: bold;   font-style: normal; src: url("/s/general/quicksand-b.woff?h=HPIdi8td8cpAa82S5RmSy0plRio") format('woff'); }

:root {
	font-size: 110%; font-family: Quicksand, Roboto, Helvetica, sans-serif;
	letter-spacing: 0.2px; line-height: 1.45; tab-size: 4;
	box-sizing: border-box;
}
*, *::before, *::after {
	box-sizing: inherit;
	transition: color .16s, border-color .16s, background-color .24s, opacity .24s;
}
.no-transitions, .no-transitions *, .no-transitions ::before, .no-transitions ::after {
	transition: none !important; /* disable transitions e.g. during page load */
}

.hidden {
	display: none;
}
.no-select {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

/* Doesn't work: -.- */
.no-br br { content: ""; }
.no-br br::after { content: " "; }


/* links */
:link, :visited { text-decoration: none; outline: none; }
:link, :visited { /**/color:black;/**/ }
:link:hover, :visited:hover { /**/color:#387233;/**/ }
:link:focus { text-decoration: underline; text-decoration: underline dotted; }
:visited:focus { text-decoration: underline; text-decoration: underline dotted; }
label.focusable:focus-within { text-decoration: underline; text-decoration: underline dotted; }
.basic-text #main :link, .basic-text #main :visited,
#content :link, #content :visited,
#contact :link, #contact :visited,
#empty :link, #empty :visited,
#quiz :link, #quiz :visited,
#form :link, #form :visited
{ text-decoration: underline; }

.unterstrichen { text-decoration: underline; }
.unterpunktet { text-decoration: underline; text-decoration: underline dotted; }
:link:focus.unterpunktet,
:visited:focus.unterpunktet { text-decoration: underline; }

/* .if-active/.else */
:not(.active)>.if-active { display: none; }
.active>.if-active + .else { display: none; }

.check-time-range.unstarted,
.check-time-range.ended { display: none; }
.check-time-range:not(.unstarted) ~ .after-unstarted,
.check-time-range:not(.ended) ~ .after-ended,
.check-time-range.ended ~ .after-valid,
.check-time-range.unstarted ~ .after-valid { display: none; }

h1 {
	font-weight: 200; font-size: 28px; margin: 20px 20px 5px 0;
}
main header h1 {
	font-weight: 300; font-size: 28px; margin: 25px 20px 27px 0;
}

h2 {
	font-weight: 200; font-size: 22px; margin: 22px 20px 5px 0;
}

h3 {
	font-weight: bold; font-size: 20px; margin: 20px 20px 7px 0;
}
main h3 {
	font-weight: bold; font-size: 20px; margin: 24px 20px 14px 0;
}

p, ul, ol {
	margin-top: .5em; margin-bottom: .5em;
}

figure {
	margin: 1em 0;
}
figure img {
	max-width: 100%;
}

main pre, main code {
	/* we don't need <code>, so lets use `this`{style="..."} to style inline elements and ``` fences blocks for text with line breaks */
	font-family: inherit; white-space: pre-wrap;
}
main em, .em, .green {
	font-style: normal;
	/**/color:#76B82A;/**/
}
.small {
	font-size: smaller;
}
.inline {
	display: inline-block;
}

.button {
	display: block; position: relative; isolation: isolate;
	padding: 6px 10px; text-align: center;
	font-size: 16px; font-weight: 200;
	cursor: pointer;
	color: white !important; /* only ever change the background */
	background-color: transparent;
	border: none;
}
.button.secondary {
	border: 2px solid /**/#76B82A/**/;
	/**/color:#76B82A!important;/**/
}
.button::before, .button::after {
	content: ''; display: block; position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
}
.button::before {
	z-index: -2;
	/**/background-color:#76B82A;/**/
}
.button::after {
	opacity: 0; z-index: -1;
	/**/background-color:rgba(0, 50, 30, .8)/**/;
}
.button.secondary::before {
	background-color: transparent;
}
.button:hover::after, .button:active::after, .button.active::after, .button:focus::after {
	opacity: .35;
}
.button:hover:active::after, .button:hover.active::after, .button:active:focus::after, .button.active:focus::after, .button:focus:hover::after {
	opacity: .65;
}
.button:hover:active:focus::after, .button:hover.active:focus::after {
	opacity: 1;
}
.button:disabled, .button.disabled, :disabled .button, .disabled .button {
	cursor: not-allowed;
}
.button:disabled::before, .button.disabled::before, :disabled .button::before, .disabled .button::before {
	background: grey; border-color: grey;
}

.close-icon, .close-icon-before::before, .close-icon-after::after {
	background: no-repeat center/60% url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="156px" height="156px"><path style="transform: translate(-639px, -705px);" d="M730.3,782.7l60.7-60.7c3.8-3.8,3.8-9.9,0-13.6c-3.8-3.8-9.9-3.8-13.6,0L716.7,769L656,708.3c-3.8-3.8-9.9-3.8-13.6,0c-3.8,3.8-3.8,9.9,0,13.6l60.7,60.7l-60.7,60.7c-3.8,3.8-3.8,9.9,0,13.6c1.9,1.9,4.4,2.8,6.8,2.8s4.9-0.9,6.8-2.8l60.7-60.7l60.7,60.7c1.9,1.9,4.4,2.8,6.8,2.8s4.9-0.9,6.8-2.8c3.8-3.8,3.8-9.9,0-13.6L730.3,782.7z"/></svg>');
}
.close-icon.invert, .close-icon-before.invert::before, .close-icon-after.invert::after {
	filter: invert(1);
}

.envelope-icon, .envelope-icon-before::before, .envelope-icon-after::after {
	background: no-repeat center/180% url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100"><path d="M36.7,31.3c0.4-0.4,0.9-0.4,1.4-0.4c9.9,0,19.7,0,29.6,0c1.6,0,2.3,0.8,2.3,2.3c0,6.9,0,13.8,0,20.8c0,0.8,0,1.7-0.8,2.2  c-0.3,0.2-0.7,0.4-1.1,0.4c-10,0-20.1,0-30.1,0c-0.9,0-1.5-0.3-1.9-1.2C36.1,55.2,36,55,36,54.8c0-7.1,0-14.2,0-21.3  c0-0.4,0-0.8,0.1-1.2c0.1-0.3,0.4-0.6,0.5-0.9C36.7,31.3,36.7,31.3,36.7,31.3z M65.8,33.4c-0.2,0-0.3,0-0.5,0c-8.2,0-16.5,0-24.7,0  c-0.1,0-0.3,0-0.5,0c0.1,0.1,11.1,9.3,12,10.1c0.8,0.7,0.9,0.8,1.7,0.2C54.6,43.1,65.8,33.4,65.8,33.4z M53.8,47  c-0.5,0.3-1,0.2-1.5-0.1c-0.4-0.4-13.5-11.3-13.8-11.5c0,0.2,0,0.2,0,0.3c0,5.8,0,11.5,0,17.3c0,0.1,0,0.3,0,0.4  c0.1,0.4,0.3,0.6,0.7,0.7c0.2,0,0.4,0,0.6,0c8.8,0,26.7,0,26.9,0c0.1-0.1,0.2-0.1,0.3-0.2c0.4-0.3,0.5-0.7,0.5-1.1  c0-5.6,0-11.1,0-16.7c0-0.2,0-0.4,0-0.7c-0.4,0.3-0.7,0.6-1,0.9C65.3,37.2,54.3,46.6,53.8,47z"/></svg>');
}

.cart-count-before::before { content: attr(data-cart-count); }
[data-cart-count="1"] .cart-plural { display: none; }

.imageCredit {
	opacity: .75;
	font-size: 80%;
}

.framed { outline: 1px solid #888; }

#ad-note::after {
	display: inline-block;
	font-size: 13px; background-color: #f5f5f5;
	margin: 15px 0 0 20px; padding: 0.1em 0.5em;
	content: attr(data-content);
}


/**
 * fixes
 */

	/* highlight bad HTML in markdown */
	.escaped-html {
		animation: blinker .5s linear infinite;
	}
	@keyframes blinker {
		  0% { color: blue; }
		 49% { color: blue; }
		 50% { color: red; }
		100% { color: red; }
	}

	main, figcaption {
		display: block;
	}

	img {
		border: none; /* IE 10 */
	}

	b, strong { font-weight: bold; }


/**
 * Custom CSS
 */

/**/:root {
  font-size: 105%;
}
/**/