@charset "UTF-8";
@import url(fontawesome-all.min.css);

/*
	Hyperspace by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

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

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

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

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

		html, body {
			min-width: 320px;
		}

	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background: #312450;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

/* Type */

	body, input, select, textarea {
		color: rgba(255, 255, 255, 0.55);
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16.5pt;
		font-weight: normal;
		line-height: 1.75;
	}

		@media screen and (max-width: 1680px) {

			body, input, select, textarea {
				font-size: 13pt;
			}

		}

		@media screen and (max-width: 1280px) {

			body, input, select, textarea {
				font-size: 12pt;
			}

		}

		@media screen and (max-width: 360px) {

			body, input, select, textarea {
				font-size: 11pt;
			}

		}

	a {
		-moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		-webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		-ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		transition: color 0.2s ease, border-bottom-color 0.2s ease;
		border-bottom: dotted 1px rgba(255, 255, 255, 0.35);
		color: inherit;
		text-decoration: none;
	}

		a:hover {
			border-bottom-color: transparent;
			color: #ffffff;
		}

	strong, b {
		color: #ffffff;
		font-weight: bold;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 2em 0;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #ffffff;
		font-weight: bold;
		line-height: 1.5;
		margin: 0 0 0.5em 0;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

	h1 {
		font-size: 2.75em;
	}

		h1.major {
			margin: 0 0 1.3em 0;
			position: relative;
			padding-bottom: 0.35em;
		}

			h1.major:after {
				background-image: -moz-linear-gradient(to right, #5e42a6, #b74e91);
				background-image: -webkit-linear-gradient(to right, #5e42a6, #b74e91);
				background-image: -ms-linear-gradient(to right, #5e42a6, #b74e91);
				background-image: linear-gradient(to right, #5e42a6, #b74e91);
				-moz-transition: max-width 0.2s ease;
				-webkit-transition: max-width 0.2s ease;
				-ms-transition: max-width 0.2s ease;
				transition: max-width 0.2s ease;
				border-radius: 0.2em;
				bottom: 0;
				content: '';
				height: 0.05em;
				position: absolute;
				right: 0;
				width: 100%;
			}

	h2 {
		font-size: 1.75em;
	}

	h3 {
		font-size: 1.1em;
	}

	h4 {
		font-size: 1em;
	}

	h5 {
		font-size: 0.8em;
	}

	h6 {
		font-size: 0.6em;
	}

	@media screen and (max-width: 736px) {

		h1 {
			font-size: 2em;
		}

		h2 {
			font-size: 1.25em;
		}

		h3 {
			font-size: 1em;
		}

		h4 {
			font-size: 0.8em;
		}

		h5 {
			font-size: 0.6em;
		}

		h6 {
			font-size: 0.6em;
		}

	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	blockquote {
		border-left: solid 4px rgba(255, 255, 255, 0.15);
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 2em;
	}

	code {
		background: rgba(255, 255, 255, 0.05);
		border-radius: 0.25em;
		border: solid 1px rgba(255, 255, 255, 0.15);
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0 2em 0;
	}

		pre code {
			display: block;
			line-height: 1.75em;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

	hr {
		border: 0;
		border-bottom: solid 1px rgba(255, 255, 255, 0.15);
		margin: 2em 0;
	}

		hr.major {
			margin: 3em 0;
		}

	.align-left {
		text-align: left;
	}

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

	.align-right {
		text-align: right;
	}

/* Row */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-uniform > * > :last-child {
			margin-bottom: 0;
		}

		.row.aln-left {
			justify-content: flex-start;
		}

		.row.aln-center {
			justify-content: center;
		}

		.row.aln-right {
			justify-content: flex-end;
		}

		.row.aln-top {
			align-items: flex-start;
		}

		.row.aln-middle {
			align-items: center;
		}

		.row.aln-bottom {
			align-items: flex-end;
		}

		.row > .imp {
			order: -1;
		}

		.row > .col-1 {
			width: 8.33333%;
		}

		.row > .off-1 {
			margin-left: 8.33333%;
		}

		.row > .col-2 {
			width: 16.66667%;
		}

		.row > .off-2 {
			margin-left: 16.66667%;
		}

		.row > .col-3 {
			width: 25%;
		}

		.row > .off-3 {
			margin-left: 25%;
		}

		.row > .col-4 {
			width: 33.33333%;
		}

		.row > .off-4 {
			margin-left: 33.33333%;
		}

		.row > .col-5 {
			width: 41.66667%;
		}

		.row > .off-5 {
			margin-left: 41.66667%;
		}

		.row > .col-6 {
			width: 50%;
		}

		.row > .off-6 {
			margin-left: 50%;
		}

		.row > .col-7 {
			width: 58.33333%;
		}

		.row > .off-7 {
			margin-left: 58.33333%;
		}

		.row > .col-8 {
			width: 66.66667%;
		}

		.row > .off-8 {
			margin-left: 66.66667%;
		}

		.row > .col-9 {
			width: 75%;
		}

		.row > .off-9 {
			margin-left: 75%;
		}

		.row > .col-10 {
			width: 83.33333%;
		}

		.row > .off-10 {
			margin-left: 83.33333%;
		}

		.row > .col-11 {
			width: 91.66667%;
		}

		.row > .off-11 {
			margin-left: 91.66667%;
		}

		.row > .col-12 {
			width: 100%;
		}

		.row > .off-12 {
			margin-left: 100%;
		}

		.row.gtr-0 {
			margin-top: 0;
			margin-left: 0em;
		}

			.row.gtr-0 > * {
				padding: 0 0 0 0em;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0em;
			}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0em;
				}

		.row.gtr-25 {
			margin-top: 0;
			margin-left: -0.375em;
		}

			.row.gtr-25 > * {
				padding: 0 0 0 0.375em;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -0.375em;
			}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 0.375em;
				}

		.row.gtr-50 {
			margin-top: 0;
			margin-left: -0.75em;
		}

			.row.gtr-50 > * {
				padding: 0 0 0 0.75em;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -0.75em;
			}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 0.75em;
				}

		.row {
			margin-top: 0;
			margin-left: -1.5em;
		}

			.row > * {
				padding: 0 0 0 1.5em;
			}

			.row.gtr-uniform {
				margin-top: -1.5em;
			}

				.row.gtr-uniform > * {
					padding-top: 1.5em;
				}

		.row.gtr-150 {
			margin-top: 0;
			margin-left: -2.25em;
		}

			.row.gtr-150 > * {
				padding: 0 0 0 2.25em;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -2.25em;
			}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 2.25em;
				}

		.row.gtr-200 {
			margin-top: 0;
			margin-left: -3em;
		}

			.row.gtr-200 > * {
				padding: 0 0 0 3em;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -3em;
			}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 3em;
				}

		@media screen and (max-width: 1680px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xlarge {
					order: -1;
				}

				.row > .col-1-xlarge {
					width: 8.33333%;
				}

				.row > .off-1-xlarge {
					margin-left: 8.33333%;
				}

				.row > .col-2-xlarge {
					width: 16.66667%;
				}

				.row > .off-2-xlarge {
					margin-left: 16.66667%;
				}

				.row > .col-3-xlarge {
					width: 25%;
				}

				.row > .off-3-xlarge {
					margin-left: 25%;
				}

				.row > .col-4-xlarge {
					width: 33.33333%;
				}

				.row > .off-4-xlarge {
					margin-left: 33.33333%;
				}

				.row > .col-5-xlarge {
					width: 41.66667%;
				}

				.row > .off-5-xlarge {
					margin-left: 41.66667%;
				}

				.row > .col-6-xlarge {
					width: 50%;
				}

				.row > .off-6-xlarge {
					margin-left: 50%;
				}

				.row > .col-7-xlarge {
					width: 58.33333%;
				}

				.row > .off-7-xlarge {
					margin-left: 58.33333%;
				}

				.row > .col-8-xlarge {
					width: 66.66667%;
				}

				.row > .off-8-xlarge {
					margin-left: 66.66667%;
				}

				.row > .col-9-xlarge {
					width: 75%;
				}

				.row > .off-9-xlarge {
					margin-left: 75%;
				}

				.row > .col-10-xlarge {
					width: 83.33333%;
				}

				.row > .off-10-xlarge {
					margin-left: 83.33333%;
				}

				.row > .col-11-xlarge {
					width: 91.66667%;
				}

				.row > .off-11-xlarge {
					margin-left: 91.66667%;
				}

				.row > .col-12-xlarge {
					width: 100%;
				}

				.row > .off-12-xlarge {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

		@media screen and (max-width: 1280px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-large {
					order: -1;
				}

				.row > .col-1-large {
					width: 8.33333%;
				}

				.row > .off-1-large {
					margin-left: 8.33333%;
				}

				.row > .col-2-large {
					width: 16.66667%;
				}

				.row > .off-2-large {
					margin-left: 16.66667%;
				}

				.row > .col-3-large {
					width: 25%;
				}

				.row > .off-3-large {
					margin-left: 25%;
				}

				.row > .col-4-large {
					width: 33.33333%;
				}

				.row > .off-4-large {
					margin-left: 33.33333%;
				}

				.row > .col-5-large {
					width: 41.66667%;
				}

				.row > .off-5-large {
					margin-left: 41.66667%;
				}

				.row > .col-6-large {
					width: 50%;
				}

				.row > .off-6-large {
					margin-left: 50%;
				}

				.row > .col-7-large {
					width: 58.33333%;
				}

				.row > .off-7-large {
					margin-left: 58.33333%;
				}

				.row > .col-8-large {
					width: 66.66667%;
				}

				.row > .off-8-large {
					margin-left: 66.66667%;
				}

				.row > .col-9-large {
					width: 75%;
				}

				.row > .off-9-large {
					margin-left: 75%;
				}

				.row > .col-10-large {
					width: 83.33333%;
				}

				.row > .off-10-large {
					margin-left: 83.33333%;
				}

				.row > .col-11-large {
					width: 91.66667%;
				}

				.row > .off-11-large {
					margin-left: 91.66667%;
				}

				.row > .col-12-large {
					width: 100%;
				}

				.row > .off-12-large {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

		@media screen and (max-width: 980px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-medium {
					order: -1;
				}

				.row > .col-1-medium {
					width: 8.33333%;
				}

				.row > .off-1-medium {
					margin-left: 8.33333%;
				}

				.row > .col-2-medium {
					width: 16.66667%;
				}

				.row > .off-2-medium {
					margin-left: 16.66667%;
				}

				.row > .col-3-medium {
					width: 25%;
				}

				.row > .off-3-medium {
					margin-left: 25%;
				}

				.row > .col-4-medium {
					width: 33.33333%;
				}

				.row > .off-4-medium {
					margin-left: 33.33333%;
				}

				.row > .col-5-medium {
					width: 41.66667%;
				}

				.row > .off-5-medium {
					margin-left: 41.66667%;
				}

				.row > .col-6-medium {
					width: 50%;
				}

				.row > .off-6-medium {
					margin-left: 50%;
				}

				.row > .col-7-medium {
					width: 58.33333%;
				}

				.row > .off-7-medium {
					margin-left: 58.33333%;
				}

				.row > .col-8-medium {
					width: 66.66667%;
				}

				.row > .off-8-medium {
					margin-left: 66.66667%;
				}

				.row > .col-9-medium {
					width: 75%;
				}

				.row > .off-9-medium {
					margin-left: 75%;
				}

				.row > .col-10-medium {
					width: 83.33333%;
				}

				.row > .off-10-medium {
					margin-left: 83.33333%;
				}

				.row > .col-11-medium {
					width: 91.66667%;
				}

				.row > .off-11-medium {
					margin-left: 91.66667%;
				}

				.row > .col-12-medium {
					width: 100%;
				}

				.row > .off-12-medium {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

		@media screen and (max-width: 736px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-small {
					order: -1;
				}

				.row > .col-1-small {
					width: 8.33333%;
				}

				.row > .off-1-small {
					margin-left: 8.33333%;
				}

				.row > .col-2-small {
					width: 16.66667%;
				}

				.row > .off-2-small {
					margin-left: 16.66667%;
				}

				.row > .col-3-small {
					width: 25%;
				}

				.row > .off-3-small {
					margin-left: 25%;
				}

				.row > .col-4-small {
					width: 33.33333%;
				}

				.row > .off-4-small {
					margin-left: 33.33333%;
				}

				.row > .col-5-small {
					width: 41.66667%;
				}

				.row > .off-5-small {
					margin-left: 41.66667%;
				}

				.row > .col-6-small {
					width: 50%;
				}

				.row > .off-6-small {
					margin-left: 50%;
				}

				.row > .col-7-small {
					width: 58.33333%;
				}

				.row > .off-7-small {
					margin-left: 58.33333%;
				}

				.row > .col-8-small {
					width: 66.66667%;
				}

				.row > .off-8-small {
					margin-left: 66.66667%;
				}

				.row > .col-9-small {
					width: 75%;
				}

				.row > .off-9-small {
					margin-left: 75%;
				}

				.row > .col-10-small {
					width: 83.33333%;
				}

				.row > .off-10-small {
					margin-left: 83.33333%;
				}

				.row > .col-11-small {
					width: 91.66667%;
				}

				.row > .off-11-small {
					margin-left: 91.66667%;
				}

				.row > .col-12-small {
					width: 100%;
				}

				.row > .off-12-small {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

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

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xsmall {
					order: -1;
				}

				.row > .col-1-xsmall {
					width: 8.33333%;
				}

				.row > .off-1-xsmall {
					margin-left: 8.33333%;
				}

				.row > .col-2-xsmall {
					width: 16.66667%;
				}

				.row > .off-2-xsmall {
					margin-left: 16.66667%;
				}

				.row > .col-3-xsmall {
					width: 25%;
				}

				.row > .off-3-xsmall {
					margin-left: 25%;
				}

				.row > .col-4-xsmall {
					width: 33.33333%;
				}

				.row > .off-4-xsmall {
					margin-left: 33.33333%;
				}

				.row > .col-5-xsmall {
					width: 41.66667%;
				}

				.row > .off-5-xsmall {
					margin-left: 41.66667%;
				}

				.row > .col-6-xsmall {
					width: 50%;
				}

				.row > .off-6-xsmall {
					margin-left: 50%;
				}

				.row > .col-7-xsmall {
					width: 58.33333%;
				}

				.row > .off-7-xsmall {
					margin-left: 58.33333%;
				}

				.row > .col-8-xsmall {
					width: 66.66667%;
				}

				.row > .off-8-xsmall {
					margin-left: 66.66667%;
				}

				.row > .col-9-xsmall {
					width: 75%;
				}

				.row > .off-9-xsmall {
					margin-left: 75%;
				}

				.row > .col-10-xsmall {
					width: 83.33333%;
				}

				.row > .off-10-xsmall {
					margin-left: 83.33333%;
				}

				.row > .col-11-xsmall {
					width: 91.66667%;
				}

				.row > .off-11-xsmall {
					margin-left: 91.66667%;
				}

				.row > .col-12-xsmall {
					width: 100%;
				}

				.row > .off-12-xsmall {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

/* Box */

	.box {
		border-radius: 0.25em;
		border: solid 1px rgba(255, 255, 255, 0.15);
		margin-bottom: 2em;
		padding: 1.5em;
	}

		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.box.alt {
			border: 0;
			border-radius: 0;
			padding: 0;
		}

/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: border-color 0.2s ease;
		-webkit-transition: border-color 0.2s ease;
		-ms-transition: border-color 0.2s ease;
		transition: border-color 0.2s ease;
		background-color: transparent;
		border: solid 1px !important;
		border-color: rgba(255, 255, 255, 0.15) !important;
		border-radius: 3em;
		color: #ffffff !important;
		cursor: pointer;
		display: inline-block;
		font-size: 0.6em;
		font-weight: bold;
		height: calc(4.75em + 2px);
		letter-spacing: 0.25em;
		line-height: 4.75em;
		outline: 0;
		padding: 0 3.75em;
		position: relative;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

		input[type="submit"]:after,
		input[type="reset"]:after,
		input[type="button"]:after,
		button:after,
		.button:after {
			-moz-transform: scale(0.25);
			-webkit-transform: scale(0.25);
			-ms-transform: scale(0.25);
			transform: scale(0.25);
			pointer-events: none;
			-moz-transition: opacity 0.2s ease, -moz-transform 0.2s ease;
			-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
			-ms-transition: opacity 0.2s ease, -ms-transform 0.2s ease;
			transition: opacity 0.2s ease, transform 0.2s ease;
			background: #ffffff;
			border-radius: 3em;
			content: '';
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {
			margin-right: 0.75em;
		}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.4em;
		}

		input[type="submit"].large,
		input[type="reset"].large,
		input[type="button"].large,
		button.large,
		.button.large {
			font-size: 0.8em;
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			background-color: #ffffff;
			color: #312450 !important;
		}

			input[type="submit"].primary:after,
			input[type="reset"].primary:after,
			input[type="button"].primary:after,
			button.primary:after,
			.button.primary:after {
				display: none;
			}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			cursor: default;
			opacity: 0.5;
			pointer-events: none;
		}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			border-color: rgba(255, 255, 255, 0.55) !important;
		}

			input[type="submit"]:hover:after,
			input[type="reset"]:hover:after,
			input[type="button"]:hover:after,
			button:hover:after,
			.button:hover:after {
				opacity: 0.05;
				-moz-transform: scale(1);
				-webkit-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1);
			}

			input[type="submit"]:hover:active,
			input[type="reset"]:hover:active,
			input[type="button"]:hover:active,
			button:hover:active,
			.button:hover:active {
				border-color: #ffffff !important;
			}

				input[type="submit"]:hover:active:after,
				input[type="reset"]:hover:active:after,
				input[type="button"]:hover:active:after,
				button:hover:active:after,
				.button:hover:active:after {
					opacity: 0.1;
				}

/* Features */

	.features {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		border-radius: 0.25em;
		border: solid 1px rgba(255, 255, 255, 0.15);
		background: rgba(255, 255, 255, 0.05);
		margin: 0 0 2em 0;
	}

		.features section {
			padding: 3.5em 3em 1em 7em ;
			width: 50%;
			border-top: solid 1px rgba(255, 255, 255, 0.15);
			position: relative;
		}

			.features section:nth-child(-n + 2) {
				border-top-width: 0;
			}

			.features section:nth-child(2n) {
				border-left: solid 1px rgba(255, 255, 255, 0.15);
			}

			.features section .icon {
				-moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease;
				-webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
				-ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease;
				transition: opacity 0.5s ease, transform 0.5s ease;
				-moz-transition-delay: 1s;
				-webkit-transition-delay: 1s;
				-ms-transition-delay: 1s;
				transition-delay: 1s;
				-moz-transform: scale(1);
				-webkit-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1);
				position: absolute;
				left: 3em;
				top: 3em;
				opacity: 1;
			}

			.features section:nth-child(1) .icon {
				-moz-transition-delay: 0.15s;
				-webkit-transition-delay: 0.15s;
				-ms-transition-delay: 0.15s;
				transition-delay: 0.15s;
			}

			.features section:nth-child(2) .icon {
				-moz-transition-delay: 0.3s;
				-webkit-transition-delay: 0.3s;
				-ms-transition-delay: 0.3s;
				transition-delay: 0.3s;
			}

			.features section:nth-child(3) .icon {
				-moz-transition-delay: 0.45s;
				-webkit-transition-delay: 0.45s;
				-ms-transition-delay: 0.45s;
				transition-delay: 0.45s;
			}

			.features section:nth-child(4) .icon {
				-moz-transition-delay: 0.6s;
				-webkit-transition-delay: 0.6s;
				-ms-transition-delay: 0.6s;
				transition-delay: 0.6s;
			}

			.features section:nth-child(5) .icon {
				-moz-transition-delay: 0.75s;
				-webkit-transition-delay: 0.75s;
				-ms-transition-delay: 0.75s;
				transition-delay: 0.75s;
			}

			.features section:nth-child(6) .icon {
				-moz-transition-delay: 0.9s;
				-webkit-transition-delay: 0.9s;
				-ms-transition-delay: 0.9s;
				transition-delay: 0.9s;
			}

			.features section:nth-child(7) .icon {
				-moz-transition-delay: 1.05s;
				-webkit-transition-delay: 1.05s;
				-ms-transition-delay: 1.05s;
				transition-delay: 1.05s;
			}

			.features section:nth-child(8) .icon {
				-moz-transition-delay: 1.2s;
				-webkit-transition-delay: 1.2s;
				-ms-transition-delay: 1.2s;
				transition-delay: 1.2s;
			}

			.features section:nth-child(9) .icon {
				-moz-transition-delay: 1.35s;
				-webkit-transition-delay: 1.35s;
				-ms-transition-delay: 1.35s;
				transition-delay: 1.35s;
			}

			.features section:nth-child(10) .icon {
				-moz-transition-delay: 1.5s;
				-webkit-transition-delay: 1.5s;
				-ms-transition-delay: 1.5s;
				transition-delay: 1.5s;
			}

			.features section:nth-child(11) .icon {
				-moz-transition-delay: 1.65s;
				-webkit-transition-delay: 1.65s;
				-ms-transition-delay: 1.65s;
				transition-delay: 1.65s;
			}

			.features section:nth-child(12) .icon {
				-moz-transition-delay: 1.8s;
				-webkit-transition-delay: 1.8s;
				-ms-transition-delay: 1.8s;
				transition-delay: 1.8s;
			}

			.features section:nth-child(13) .icon {
				-moz-transition-delay: 1.95s;
				-webkit-transition-delay: 1.95s;
				-ms-transition-delay: 1.95s;
				transition-delay: 1.95s;
			}

			.features section:nth-child(14) .icon {
				-moz-transition-delay: 2.1s;
				-webkit-transition-delay: 2.1s;
				-ms-transition-delay: 2.1s;
				transition-delay: 2.1s;
			}

			.features section:nth-child(15) .icon {
				-moz-transition-delay: 2.25s;
				-webkit-transition-delay: 2.25s;
				-ms-transition-delay: 2.25s;
				transition-delay: 2.25s;
			}

			.features section:nth-child(16) .icon {
				-moz-transition-delay: 2.4s;
				-webkit-transition-delay: 2.4s;
				-ms-transition-delay: 2.4s;
				transition-delay: 2.4s;
			}

			.features section:nth-child(17) .icon {
				-moz-transition-delay: 2.55s;
				-webkit-transition-delay: 2.55s;
				-ms-transition-delay: 2.55s;
				transition-delay: 2.55s;
			}

			.features section:nth-child(18) .icon {
				-moz-transition-delay: 2.7s;
				-webkit-transition-delay: 2.7s;
				-ms-transition-delay: 2.7s;
				transition-delay: 2.7s;
			}

			.features section:nth-child(19) .icon {
				-moz-transition-delay: 2.85s;
				-webkit-transition-delay: 2.85s;
				-ms-transition-delay: 2.85s;
				transition-delay: 2.85s;
			}

			.features section:nth-child(20) .icon {
				-moz-transition-delay: 3s;
				-webkit-transition-delay: 3s;
				-ms-transition-delay: 3s;
				transition-delay: 3s;
			}

		.features.inactive section .icon {
			-moz-transform: scale(0.5);
			-webkit-transform: scale(0.5);
			-ms-transform: scale(0.5);
			transform: scale(0.5);
			opacity: 0;
		}

		@media screen and (max-width: 980px) {

			.features {
				display: block;
			}

				.features section {
					border-top-width: 1px !important;
					border-left-width: 0 !important;
					width: 100%;
				}

					.features section:first-child {
						border-top-width: 0 !important;
					}

		}

		@media screen and (max-width: 736px) {

			.features section {
				padding: 2.5em 1.5em 0.1em 5.5em ;
			}

				.features section .icon {
					left: 1.5em;
					top: 2em;
				}

		}

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

			.features section {
				padding: 2em 1.5em 0.1em 1.5em ;
			}

				.features section .icon {
					left: 0;
					position: relative;
					top: 0;
				}

		}

/* Form */

	form {
		margin: 0 0 2em 0;
	}

		form > :last-child {
			margin-bottom: 0;
		}

		form > .fields {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			width: calc(100% + 3em);
			margin: -1.5em 0 2em -1.5em;
		}

			form > .fields > .field {
				-moz-flex-grow: 0;
				-webkit-flex-grow: 0;
				-ms-flex-grow: 0;
				flex-grow: 0;
				-moz-flex-shrink: 0;
				-webkit-flex-shrink: 0;
				-ms-flex-shrink: 0;
				flex-shrink: 0;
				padding: 1.5em 0 0 1.5em;
				width: calc(100% - 1.5em);
			}

				form > .fields > .field.half {
					width: calc(50% - 0.75em);
				}

				form > .fields > .field.third {
					width: calc(100%/3 - 0.5em);
				}

				form > .fields > .field.quarter {
					width: calc(25% - 0.375em);
				}

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

			form > .fields {
				width: calc(100% + 3em);
				margin: -1.5em 0 2em -1.5em;
			}

				form > .fields > .field {
					padding: 1.5em 0 0 1.5em;
					width: calc(100% - 1.5em);
				}

					form > .fields > .field.half {
						width: calc(100% - 1.5em);
					}

					form > .fields > .field.third {
						width: calc(100% - 1.5em);
					}

					form > .fields > .field.quarter {
						width: calc(100% - 1.5em);
					}

		}

	label {
		color: #ffffff;
		font-weight: bold;
		line-height: 1.5;
		margin: 0 0 0.7em 0;
		display: block;
		font-size: 1.1em;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 0.25em;
		border: none;
		border: solid 1px rgba(255, 255, 255, 0.15);
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		input[type="tel"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		select:focus,
		textarea:focus {
			border-color: #ffffff;
			box-shadow: 0 0 0 1px #ffffff;
		}

	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 0.15)' /%3E%3C/svg%3E");
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 2.75em;
		padding-right: 2.75em;
		text-overflow: ellipsis;
	}

		select option {
			color: #ffffff;
			background: #312450;
		}

		select:focus::-ms-value {
			background-color: transparent;
		}

		select::-ms-expand {
			display: none;
		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select {
		height: 2.75em;
	}

	textarea {
		padding: 0.75em 1em;
	}

		body.is-ie textarea {
			min-height: 10em;
		}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2em;
		opacity: 0;
		width: 1em;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			color: rgba(255, 255, 255, 0.55);
			cursor: pointer;
			display: inline-block;
			font-size: 1em;
			font-weight: normal;
			padding-left: 2.4em;
			padding-right: 0.75em;
			position: relative;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				background: rgba(255, 255, 255, 0.05);
				border-radius: 0.25em;
				border: solid 1px rgba(255, 255, 255, 0.15);
				content: '';
				display: inline-block;
				font-size: 0.8em;
				height: 2.0625em;
				left: 0;
				line-height: 2.0625em;
				position: absolute;
				text-align: center;
				top: 0;
				width: 2.0625em;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			background: #ffffff;
			border-color: #ffffff;
			color: #b74e91;
			content: '\f00c';
		}

		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			border-color: #ffffff;
			box-shadow: 0 0 0 1px #ffffff;
		}

	input[type="checkbox"] + label:before {
		border-radius: 0.25em;
	}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		color: rgba(255, 255, 255, 0.35) !important;
		opacity: 1.0;
	}

	:-moz-placeholder {
		color: rgba(255, 255, 255, 0.35) !important;
		opacity: 1.0;
	}

	::-moz-placeholder {
		color: rgba(255, 255, 255, 0.35) !important;
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		color: rgba(255, 255, 255, 0.35) !important;
		opacity: 1.0;
	}

/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon > .label {
			display: none;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

		.icon.major {
			width: 2.5em;
			height: 2.5em;
			display: block;
			background: #ffffff;
			border-radius: 100%;
			color: #312450;
			text-align: center;
			line-height: 2.5em;
			margin: 0 0 1.3em 0;
		}

			.icon.major:before {
				font-size: 1.25em;
			}

				.wrapper.style1 .icon.major:before {
					color: #5e42a6;
				}

				.wrapper.style1-alt .icon.major:before {
					color: #493382;
				}

				.wrapper.style2 .icon.major:before {
					color: #5052b5;
				}

				.wrapper.style2-alt .icon.major:before {
					color: #3e4094;
				}

				.wrapper.style3 .icon.major:before {
					color: #b74e91;
				}

				.wrapper.style3-alt .icon.major:before {
					color: #953d75;
				}

/* Image */

	.image {
		border-radius: 0.25em;
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image img {
			border-radius: 0.25em;
			display: block;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			margin: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			margin: 0 0 1em 1.5em;
			top: 0.25em;
		}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

		.image.main {
			display: block;
			margin: 0 0 3em 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}

/* List */

	ol {
		list-style: decimal;
		margin: 0 0 2em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0 0 2em 0;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px rgba(255, 255, 255, 0.15);
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

	dl {
		margin: 0 0 2em 0;
	}

		dl dt {
			display: block;
			font-weight: bold;
			margin: 0 0 1em 0;
		}

		dl dd {
			margin-left: 2em;
		}

/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1em;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 1em;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1.3em 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 1em);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

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

			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}

				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1em 0 0 0;
					text-align: center;
					width: 100%;
				}

					ul.actions:not(.fixed) li > * {
						width: 100%;
					}

					ul.actions:not(.fixed) li:first-child {
						padding-top: 0;
					}

					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {
						width: 100%;
					}

						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {
							margin-left: -0.5rem;
						}

		}

/* Contact */

	ul.contact {
		list-style: none;
		padding: 0;
	}

		ul.contact > li {
			padding: 0;
			margin: 1.5em 0 0 0;
		}

			ul.contact > li:first-child {
				margin-top: 0;
			}

/* Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}

		ul.icons li {
			display: inline-block;
			padding: 0 0.75em 0 0;
		}

			ul.icons li:last-child {
				padding-right: 0;
			}

			ul.icons li > a, ul.icons li > span {
				border: 0;
			}

				ul.icons li > a .label, ul.icons li > span .label {
					display: none;
				}

/* Menu */

	ul.menu {
		list-style: none;
		padding: 0;
	}

		ul.menu > li {
			border-left: solid 1px rgba(255, 255, 255, 0.15);
			display: inline-block;
			line-height: 1;
			margin-left: 1.5em;
			padding: 0 0 0 1.5em;
		}

			ul.menu > li:first-child {
				border-left: 0;
				margin: 0;
				padding-left: 0;
			}

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

			ul.menu > li {
				border-left: 0;
				display: block;
				line-height: inherit;
				margin: 0.5em 0 0 0;
				padding-left: 0;
			}

		}

/* Section/Article */

	section.special, article.special {
		text-align: center;
	}

	header p {
		color: rgba(255, 255, 255, 0.35);
		position: relative;
		margin: 0 0 1.5em 0;
	}

	header h2 + p {
		font-size: 1.25em;
		margin-top: -1em;
		line-height: 1.5em;
	}

	header h3 + p {
		font-size: 1.1em;
		margin-top: -0.8em;
		line-height: 1.5em;
	}

	header h4 + p,
	header h5 + p,
	header h6 + p {
		font-size: 0.9em;
		margin-top: -0.6em;
		line-height: 1.5em;
	}

/* Split */

	.split {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
	}

		.split > * {
			width: calc(50% - 2.5em);
		}

		.split > :nth-child(2n - 1) {
			padding-right: 2.5em;
			border-right: solid 1px rgba(255, 255, 255, 0.15);
		}

		.split > :nth-child(2n) {
			padding-left: 2.5em;
		}

		.split.style1 > :nth-child(2n - 1) {
			width: calc(66.66666% - 2.5em);
		}

		.split.style1 > :nth-child(2n) {
			width: calc(33.33333% - 2.5em);
		}

		@media screen and (max-width: 1680px) {

			.split > * {
				width: calc(50% - 2em);
			}

			.split > :nth-child(2n - 1) {
				padding-right: 2em;
			}

			.split > :nth-child(2n) {
				padding-left: 2em;
			}

			.split.style1 > :nth-child(2n - 1) {
				width: calc(66.66666% - 2em);
			}

			.split.style1 > :nth-child(2n) {
				width: calc(33.33333% - 2em);
			}

		}

		@media screen and (max-width: 980px) {

			.split {
				display: block;
			}

				.split > * {
					border-top: solid 1px rgba(255, 255, 255, 0.15);
					margin: 4em 0 0 0;
					padding: 4em 0 0 0;
					width: 100% !important;
				}

				.split > :nth-child(2n - 1) {
					border-right: 0;
					padding-right: 0;
				}

				.split > :nth-child(2n) {
					padding-left: 0;
				}

				.split > :first-child {
					border-top: 0;
					margin-top: 0;
					padding-top: 0;
				}

		}

		@media screen and (max-width: 736px) {

			.split > * {
				margin: 3em 0 0 0;
				padding: 3em 0 0 0;
			}

		}

/* Spotlights */

	.spotlights > section {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		min-height: 22.5em;
	}

		body.is-ie .spotlights > section {
			min-height: 0;
		}

		.spotlights > section > .image {
			background-position: center center;
			background-size: cover;
			border-radius: 0;
			display: block;
			position: relative;
			width: 25em;
		}

			.spotlights > section > .image img {
				border-radius: 0;
				display: block;
			}

			.spotlights > section > .image:before {
				-moz-transition: opacity 1s ease;
				-webkit-transition: opacity 1s ease;
				-ms-transition: opacity 1s ease;
				transition: opacity 1s ease;
				background: rgba(49, 36, 80, 0.9);
				content: '';
				display: block;
				height: 100%;
				left: 0;
				opacity: 0;
				position: absolute;
				top: 0;
				width: 100%;
			}

		.spotlights > section > .content {
			padding: 4em 5em 2em 5em ;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 50em;
			-ms-flex: 1;
		}

			.spotlights > section > .content > .inner {
				-moz-transform: translateX(0) translateY(0);
				-webkit-transform: translateX(0) translateY(0);
				-ms-transform: translateX(0) translateY(0);
				transform: translateX(0) translateY(0);
				-moz-transition: opacity 1s ease, -moz-transform 1s ease;
				-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
				-ms-transition: opacity 1s ease, -ms-transform 1s ease;
				transition: opacity 1s ease, transform 1s ease;
				opacity: 1;
			}

		.spotlights > section:nth-child(2) {
			background-color: rgba(0, 0, 0, 0.05);
		}

		.spotlights > section:nth-child(3) {
			background-color: rgba(0, 0, 0, 0.1);
		}

		.spotlights > section.inactive > .image:before,
		body.is-preload .spotlights > section > .image:before {
			opacity: 1;
		}

		.spotlights > section.inactive > .content > .inner,
		body.is-preload .spotlights > section > .content > .inner {
			-moz-transform: translateX(-1em);
			-webkit-transform: translateX(-1em);
			-ms-transform: translateX(-1em);
			transform: translateX(-1em);
			opacity: 0;
		}

		@media screen and (max-width: 1680px) {

			.spotlights > section > .content {
				padding: 4em 4em 2em 4em ;
			}

		}

		@media screen and (max-width: 980px) {

			.spotlights > section {
				display: block;
			}

				.spotlights > section > .image {
					width: 100%;
					height: 50vh;
				}

				.spotlights > section > .content {
					width: 100%;
				}

				.spotlights > section.inactive > .content > .inner,
				body.is-preload .spotlights > section > .content > .inner {
					-moz-transform: translateY(1em);
					-webkit-transform: translateY(1em);
					-ms-transform: translateY(1em);
					transform: translateY(1em);
				}

		}

		@media screen and (max-width: 736px) {

			.spotlights > section > .image {
				height: 50vh;
				min-height: 15em;
			}

			.spotlights > section > .content {
				padding: 3em 2em 1em 2em ;
			}

		}

/* Table */

	.table-wrapper {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	table {
		margin: 0 0 2em 0;
		width: 100%;
	}

		table tbody tr {
			border: solid 1px rgba(255, 255, 255, 0.15);
			border-left: 0;
			border-right: 0;
		}

			table tbody tr:nth-child(2n + 1) {
				background-color: rgba(255, 255, 255, 0.05);
			}

		table td {
			padding: 0.75em 0.75em;
		}

		table th {
			color: #ffffff;
			font-size: 1em;
			font-weight: bold;
			padding: 0 0.75em 0.75em 0.75em;
			text-align: left;
		}

		table thead {
			border-bottom: solid 2px rgba(255, 255, 255, 0.15);
		}

		table tfoot {
			border-top: solid 2px rgba(255, 255, 255, 0.15);
		}

		table.alt {
			border-collapse: separate;
		}

			table.alt tbody tr td {
				border: solid 1px rgba(255, 255, 255, 0.15);
				border-left-width: 0;
				border-top-width: 0;
			}

				table.alt tbody tr td:first-child {
					border-left-width: 1px;
				}

			table.alt tbody tr:first-child td {
				border-top-width: 1px;
			}

			table.alt thead {
				border-bottom: 0;
			}

			table.alt tfoot {
				border-top: 0;
			}

/* Wrapper */

	.wrapper {
		position: relative;
	}

		.wrapper > .inner {
			padding: 5em 5em 3em 5em ;
			max-width: 100%;
			width: 75em;
		}

			@media screen and (max-width: 1680px) {

				.wrapper > .inner {
					padding: 4em 4em 2em 4em ;
				}

			}

			@media screen and (max-width: 1280px) {

				.wrapper > .inner {
					width: 100%;
				}

			}

			@media screen and (max-width: 736px) {

				.wrapper > .inner {
					padding: 3em 2em 1em 2em ;
				}

			}

		.wrapper.alt {
			background-color: #261c3e;
		}

		.wrapper.style1 {
			background-color: #5e42a6;
		}

		.wrapper.style1-alt {
			background-color: #493382;
		}

		.wrapper.style2 {
			background-color: #5052b5;
		}

		.wrapper.style2-alt {
			background-color: #3e4094;
		}

		.wrapper.style3 {
			background-color: #b74e91;
		}

		.wrapper.style3-alt {
			background-color: #953d75;
		}

		.wrapper.fullscreen {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			min-height: 100vh;
		}

			body.is-ie .wrapper.fullscreen {
				height: 100vh;
			}

			@media screen and (max-width: 1280px) {

				.wrapper.fullscreen {
					min-height: calc(100vh - 2.5em);
				}

					body.is-ie .wrapper.fullscreen {
						height: calc(100vh - 2.5em);
					}

			}

			@media screen and (max-width: 736px) {

				.wrapper.fullscreen {
					padding: 2em 0;
					min-height: 0;
				}

					body.is-ie .wrapper.fullscreen {
						height: auto;
					}

			}

		.wrapper.fade-up > .inner {
			-moz-transform: translateY(0);
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
			-moz-transition: opacity 1s ease, -moz-transform 1s ease;
			-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
			-ms-transition: opacity 1s ease, -ms-transform 1s ease;
			transition: opacity 1s ease, transform 1s ease;
			opacity: 1.0;
		}

		.wrapper.fade-up.inactive > .inner,
		body.is-preload .wrapper.fade-up > .inner {
			opacity: 0;
			-moz-transform: translateY(1em);
			-webkit-transform: translateY(1em);
			-ms-transform: translateY(1em);
			transform: translateY(1em);
		}

		.wrapper.fade-down > .inner {
			-moz-transform: translateY(0);
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
			-moz-transition: opacity 1s ease, -moz-transform 1s ease;
			-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
			-ms-transition: opacity 1s ease, -ms-transform 1s ease;
			transition: opacity 1s ease, transform 1s ease;
			opacity: 1.0;
		}

		.wrapper.fade-down.inactive > .inner,
		body.is-preload .wrapper.fade-down > .inner {
			opacity: 0;
			-moz-transform: translateY(-1em);
			-webkit-transform: translateY(-1em);
			-ms-transform: translateY(-1em);
			transform: translateY(-1em);
		}

		.wrapper.fade > .inner {
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			opacity: 1.0;
		}

		.wrapper.fade.inactive > .inner,
		body.is-preload .wrapper.fade > .inner {
			opacity: 0;
		}

/* Header */

	#header {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		background-color: #5e42a6;
		cursor: default;
		padding: 1.75em 2em;
	}

		#header > .title {
			border: 0;
			color: #ffffff;
			display: block;
			font-size: 1.25em;
			font-weight: bold;
		}

		#header > nav {
			-moz-flex: 1;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
			text-align: right;
		}

			#header > nav > ul {
				margin: 0;
				padding: 0;
			}

				#header > nav > ul > li {
					display: inline-block;
					margin-left: 1.75em;
					padding: 0;
					vertical-align: middle;
				}

					#header > nav > ul > li:first-child {
						margin-left: 0;
					}

					#header > nav > ul > li a {
						border: 0;
						color: rgba(255, 255, 255, 0.35);
						display: inline-block;
						font-size: 0.6em;
						font-weight: bold;
						letter-spacing: 0.25em;
						text-transform: uppercase;
					}

						#header > nav > ul > li a:hover {
							color: rgba(255, 255, 255, 0.55);
						}

						#header > nav > ul > li a.active {
							color: #ffffff;
						}

		@media screen and (max-width: 736px) {

			#header {
				padding: 1em 2em;
			}

		}

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

			#header {
				display: block;
				padding: 0 2em;
				text-align: left;
			}

				#header .title {
					font-size: 1.25em;
					padding: 1em 0;
				}

				#header > nav {
					border-top: solid 1px rgba(255, 255, 255, 0.15);
					text-align: inherit;
				}

					#header > nav > ul > li {
						margin-left: 1.5em;
					}

						#header > nav > ul > li a {
							height: 6em;
							line-height: 6em;
						}

		}

/* Wrapper (main) */

	#sidebar + #wrapper {
		margin-left: 18em;
	}

		@media screen and (max-width: 1280px) {

			#sidebar + #wrapper {
				margin-left: 0;
				padding-top: 3.5em;
			}

		}

		@media screen and (max-width: 736px) {

			#sidebar + #wrapper {
				padding-top: 0;
			}

		}

	#header + #wrapper > .wrapper > .inner {
		margin: 0 auto;
	}

/* Footer */

    /* Ensure footer inner is centered on all pages */
    #footer > .inner {
        margin: 0 auto;
    }

    #sidebar + #wrapper + #footer {
        margin-left: 18em;
    }

		@media screen and (max-width: 1280px) {

			#sidebar + #wrapper + #footer {
				margin-left: 0;
			}

		}

	#footer > .inner a {
		border-bottom-color: rgba(255, 255, 255, 0.15);
	}

		#footer > .inner a:hover {
			border-bottom-color: transparent;
		}

	#footer > .inner .menu {
		font-size: 0.8em;
		color: rgba(255, 255, 255, 0.15);
	}

	#header + #wrapper + #footer > .inner {
		margin: 0 auto;
	}

/* Sidebar */

	#sidebar {
		padding: 2.5em 2.5em 0.5em 2.5em ;
		background: #312450;
		cursor: default;
		height: 100vh;
		left: 0;
		overflow-x: hidden;
		overflow-y: auto;
		position: fixed;
		text-align: right;
		top: 0;
		width: 18em;
		z-index: 10000;
	}

		#sidebar > .inner {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			-moz-transform: translateY(0);
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			min-height: 100%;
			opacity: 1;
			width: 100%;
		}

			body.is-ie #sidebar > .inner {
				height: 100%;
			}

		#sidebar nav > ul {
			list-style: none;
			padding: 0;
		}

			#sidebar nav > ul > li {
				-moz-transform: translateY(0);
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0);
				-moz-transition: opacity 0.15s ease, -moz-transform 0.75s ease;
				-webkit-transition: opacity 0.15s ease, -webkit-transform 0.75s ease;
				-ms-transition: opacity 0.15s ease, -ms-transform 0.75s ease;
				transition: opacity 0.15s ease, transform 0.75s ease;
				margin: 1.5em 0 0 0;
				opacity: 1;
				padding: 0;
				position: relative;
			}

				#sidebar nav > ul > li:first-child {
					margin: 0;
				}

				#sidebar nav > ul > li:nth-child(1) {
					-moz-transition-delay: 0.45s;
					-webkit-transition-delay: 0.45s;
					-ms-transition-delay: 0.45s;
					transition-delay: 0.45s;
				}

				#sidebar nav > ul > li:nth-child(2) {
					-moz-transition-delay: 0.65s;
					-webkit-transition-delay: 0.65s;
					-ms-transition-delay: 0.65s;
					transition-delay: 0.65s;
				}

				#sidebar nav > ul > li:nth-child(3) {
					-moz-transition-delay: 0.85s;
					-webkit-transition-delay: 0.85s;
					-ms-transition-delay: 0.85s;
					transition-delay: 0.85s;
				}

				#sidebar nav > ul > li:nth-child(4) {
					-moz-transition-delay: 1.05s;
					-webkit-transition-delay: 1.05s;
					-ms-transition-delay: 1.05s;
					transition-delay: 1.05s;
				}

				#sidebar nav > ul > li:nth-child(5) {
					-moz-transition-delay: 1.25s;
					-webkit-transition-delay: 1.25s;
					-ms-transition-delay: 1.25s;
					transition-delay: 1.25s;
				}

				#sidebar nav > ul > li:nth-child(6) {
					-moz-transition-delay: 1.45s;
					-webkit-transition-delay: 1.45s;
					-ms-transition-delay: 1.45s;
					transition-delay: 1.45s;
				}

				#sidebar nav > ul > li:nth-child(7) {
					-moz-transition-delay: 1.65s;
					-webkit-transition-delay: 1.65s;
					-ms-transition-delay: 1.65s;
					transition-delay: 1.65s;
				}

				#sidebar nav > ul > li:nth-child(8) {
					-moz-transition-delay: 1.85s;
					-webkit-transition-delay: 1.85s;
					-ms-transition-delay: 1.85s;
					transition-delay: 1.85s;
				}

				#sidebar nav > ul > li:nth-child(9) {
					-moz-transition-delay: 2.05s;
					-webkit-transition-delay: 2.05s;
					-ms-transition-delay: 2.05s;
					transition-delay: 2.05s;
				}

				#sidebar nav > ul > li:nth-child(10) {
					-moz-transition-delay: 2.25s;
					-webkit-transition-delay: 2.25s;
					-ms-transition-delay: 2.25s;
					transition-delay: 2.25s;
				}

				#sidebar nav > ul > li:nth-child(11) {
					-moz-transition-delay: 2.45s;
					-webkit-transition-delay: 2.45s;
					-ms-transition-delay: 2.45s;
					transition-delay: 2.45s;
				}

				#sidebar nav > ul > li:nth-child(12) {
					-moz-transition-delay: 2.65s;
					-webkit-transition-delay: 2.65s;
					-ms-transition-delay: 2.65s;
					transition-delay: 2.65s;
				}

				#sidebar nav > ul > li:nth-child(13) {
					-moz-transition-delay: 2.85s;
					-webkit-transition-delay: 2.85s;
					-ms-transition-delay: 2.85s;
					transition-delay: 2.85s;
				}

				#sidebar nav > ul > li:nth-child(14) {
					-moz-transition-delay: 3.05s;
					-webkit-transition-delay: 3.05s;
					-ms-transition-delay: 3.05s;
					transition-delay: 3.05s;
				}

				#sidebar nav > ul > li:nth-child(15) {
					-moz-transition-delay: 3.25s;
					-webkit-transition-delay: 3.25s;
					-ms-transition-delay: 3.25s;
					transition-delay: 3.25s;
				}

				#sidebar nav > ul > li:nth-child(16) {
					-moz-transition-delay: 3.45s;
					-webkit-transition-delay: 3.45s;
					-ms-transition-delay: 3.45s;
					transition-delay: 3.45s;
				}

				#sidebar nav > ul > li:nth-child(17) {
					-moz-transition-delay: 3.65s;
					-webkit-transition-delay: 3.65s;
					-ms-transition-delay: 3.65s;
					transition-delay: 3.65s;
				}

				#sidebar nav > ul > li:nth-child(18) {
					-moz-transition-delay: 3.85s;
					-webkit-transition-delay: 3.85s;
					-ms-transition-delay: 3.85s;
					transition-delay: 3.85s;
				}

				#sidebar nav > ul > li:nth-child(19) {
					-moz-transition-delay: 4.05s;
					-webkit-transition-delay: 4.05s;
					-ms-transition-delay: 4.05s;
					transition-delay: 4.05s;
				}

				#sidebar nav > ul > li:nth-child(20) {
					-moz-transition-delay: 4.25s;
					-webkit-transition-delay: 4.25s;
					-ms-transition-delay: 4.25s;
					transition-delay: 4.25s;
				}

		#sidebar nav a {
			-moz-transition: color 0.2s ease;
			-webkit-transition: color 0.2s ease;
			-ms-transition: color 0.2s ease;
			transition: color 0.2s ease;
			border: 0;
			color: rgba(255, 255, 255, 0.35);
			display: block;
			font-size: 0.6em;
			font-weight: bold;
			letter-spacing: 0.25em;
			line-height: 1.75;
			outline: 0;
			padding: 1.35em 0;
			position: relative;
			text-decoration: none;
			text-transform: uppercase;
		}

			#sidebar nav a:before, #sidebar nav a:after {
				border-radius: 0.2em;
				bottom: 0;
				content: '';
				height: 0.2em;
				position: absolute;
				right: 0;
				width: 100%;
			}

			#sidebar nav a:before {
				background: #3c2c62;
			}

			#sidebar nav a:after {
				background-image: -moz-linear-gradient(to right, #5e42a6, #b74e91);
				background-image: -webkit-linear-gradient(to right, #5e42a6, #b74e91);
				background-image: -ms-linear-gradient(to right, #5e42a6, #b74e91);
				background-image: linear-gradient(to right, #5e42a6, #b74e91);
				-moz-transition: max-width 0.2s ease;
				-webkit-transition: max-width 0.2s ease;
				-ms-transition: max-width 0.2s ease;
				transition: max-width 0.2s ease;
				max-width: 0;
			}

			#sidebar nav a:hover {
				color: rgba(255, 255, 255, 0.55);
			}

			#sidebar nav a.active {
				color: #ffffff;
			}

				#sidebar nav a.active:after {
					max-width: 100%;
				}

		body.is-preload #sidebar > .inner {
			opacity: 0;
		}

		body.is-preload #sidebar nav ul li {
			-moz-transform: translateY(2em);
			-webkit-transform: translateY(2em);
			-ms-transform: translateY(2em);
			transform: translateY(2em);
			opacity: 0;
		}

		@media screen and (max-width: 1280px) {

			#sidebar {
				height: 3.5em;
				left: 0;
				line-height: 3.5em;
				overflow: hidden;
				padding: 0;
				text-align: center;
				top: 0;
				width: 100%;
			}

				#sidebar > .inner {
					-moz-flex-direction: row;
					-webkit-flex-direction: row;
					-ms-flex-direction: row;
					flex-direction: row;
					-moz-align-items: -moz-stretch;
					-webkit-align-items: -webkit-stretch;
					-ms-align-items: -ms-stretch;
					align-items: stretch;
					height: inherit;
					line-height: inherit;
				}

				#sidebar nav {
					height: inherit;
					line-height: inherit;
				}

					#sidebar nav ul {
						display: -moz-flex;
						display: -webkit-flex;
						display: -ms-flex;
						display: flex;
						height: inherit;
						line-height: inherit;
						margin: 0;
					}

						#sidebar nav ul li {
							display: block;
							height: inherit;
							line-height: inherit;
							margin: 0 0 0 2em;
							padding: 0;
						}

					#sidebar nav a {
						height: inherit;
						line-height: inherit;
						padding: 0;
					}

						#sidebar nav a:after {
							background-image: none;
							background-color: #b74e91;
						}

		}

		@media screen and (max-width: 736px) {

			#sidebar {
				display: none;
			}

		}

/* Intro */

	#intro {
		background-attachment: fixed;
		background-image: url("images/intro.svg");
		background-position: top right;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

		#intro p {
			font-size: 1.25em;
		}

			@media screen and (max-width: 980px) {

				#intro p br {
					display: none;
				}

			}

			@media screen and (max-width: 736px) {

				#intro p {
					font-size: 1em;
				}

			}

		@media screen and (max-width: 1280px) {

			#intro {
				background-attachment: scroll;
			}

		}

		/* =========================
   DARK PERSONAL BRANDING OVERRIDES
   (ans Ende der main.css einfügen)
   ========================= */
:root{
  --bg: #0B0F14;          /* Haupt-Hintergrund */
  --surface: #121821;     /* Cards / Sektionen */
  --surface-2: #0F141C;   /* leichte Abstufung */
  --line: rgba(230,234,240,0.08);
  --text: #E6EAF0;
  --text-2: #9AA7B5;
  --accent: #4FB1F2;      /* Akzent: Cyan */
  --accent-2: #7DD3FC;    /* helle Akzentvariante */
}

/* Grundfarben */
body { background: var(--bg) !important; }
body, input, select, textarea { color: var(--text-2) !important; }
strong, b, h1, h2, h3, h4, h5, h6 { color: var(--text) !important; }
a { border-bottom-color: rgba(230,234,240,0.25) !important; }
a:hover { color: #fff !important; }

/* Seitenleisten/Navi/Header */
#sidebar { background: #0F1220 !important; }
#sidebar nav a { color: rgba(230,234,240,0.45) !important; }
#sidebar nav a:before { background: #111829 !important; }
#sidebar nav a:after { background-image: linear-gradient(to right, var(--accent), var(--accent-2)) !important; }
#header { background: #0F1220 !important; }

/* Wrapper/Sektionen – ersetzt die bunten style1/2/3 */
.wrapper.alt { background-color: var(--surface-2) !important; }
.wrapper.style1,
.wrapper.style2,
.wrapper.style2-alt,
.wrapper.style3,
.wrapper.style3-alt { background-color: var(--surface) !important; }
/* Footer (style1-alt) bewusst etwas dunkler für klaren Abschluss */
.wrapper.style1-alt { background-color: var(--surface-2) !important; }

/* Abschnitt-Trenner, Tabellen, Boxen */
hr, table tbody tr, .box, .features { border-color: var(--line) !important; }
table tbody tr:nth-child(2n + 1),
.features { background: rgba(255,255,255,0.03) !important; }

/* Buttons */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  border-color: rgba(230,234,240,0.18) !important;
  color: #fff !important;
}
.button.primary,
button.primary,
input[type="submit"].primary {
  background: var(--accent) !important;
  color: #0B0F14 !important;
}

/* Formulare */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
label { color: var(--text) !important; }

/* Icons */
.icon.major { background: #0F141C !important; color: var(--accent) !important; }

/* Spotlights (Bild-Overlay & Content-Flächen) */
.spotlights > section:nth-child(2),
.spotlights > section:nth-child(3) { background-color: rgba(255,255,255,0.02) !important; }
.spotlights > section > .image:before { background: rgba(11,15,20,0.65) !important; }
.spotlights > section > .content { background: transparent !important; }

/* Intro-Hintergrund: lilafarbenes SVG entfernen/neutralisieren */
#intro { background-image: none !important; background-color: var(--surface) !important; }

/* Unterstreichungen/Gradients an Überschriften neutral in Akzent */
h1.major:after { 
  background-image: linear-gradient(to right, var(--accent), var(--accent-2)) !important;
}

/* Kleine Rest-Fixes auf dunkel bringen */
select option { background: var(--bg) !important; color: var(--text) !important; }

/* Checkbox/Radio-Häkchen-Farbe (vorher Pink) */
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
  color: var(--bg) !important;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}


/* ===== Portrait Glow Card ===== */
.portrait-card{
  position:relative;
  max-width:420px;
  margin:0 auto;
  border-radius:24px;
  padding:16px;              /* etwas mehr Platz innen */
  background:#0F141C;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 12px 40px rgba(0,0,0,0.55);
  transform:none;            /* NICHT schräg */
}

/* Gradient-Kontur (nur Rand, innen hohl) */
.portrait-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:24px;
  padding:1px; /* Linienstärke */
  background:linear-gradient(135deg,
    rgba(79,177,242,0.8),
    rgba(125,211,252,0.2) 45%,
    rgba(79,177,242,0.0) 70%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}



/* Bild */
.portrait-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  object-fit: contain;
  background: #0F141C;
  margin-top: 2%; /* runtersetzen, Wert kannst du anpassen */
}


/* Optionales Badge oben links */
.portrait-badge{
  position:absolute;
  top:-10px; left:18px;
  padding:6px 12px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  color:#0B0F14;
  background:linear-gradient(180deg,#4FB1F2,#7DD3FC);
  border-radius:999px;
  box-shadow:0 8px 24px rgba(79,177,242,0.35);
}




#intro .split {
  display: flex;
  align-items: center; /* Bild und Text auf einer Linie */
}

/* ===== Empfehlungen Grid ===== */
.rec-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 2.25rem;
}

/* Card im Glow-Stil wie das Portrait */
.rec-card{
  position:relative;
  border-radius:22px;
  padding:18px 18px 20px;
  background:#0F141C;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 38px rgba(0,0,0,.55);
}

/* Gradient-Rand (nur Kontur) */
.rec-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:22px;
  padding:1px;
  background:linear-gradient(135deg,
    rgba(79,177,242,.85),
    rgba(125,211,252,.25) 45%,
    rgba(79,177,242,0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

/* weicher Außen-Glow */
.rec-card::after{
  content:"";
  position:absolute; inset:-14px;
  border-radius:28px;
  background:radial-gradient(55% 55% at 70% 25%,
    rgba(79,177,242,.25), rgba(79,177,242,0) 60%);
  filter:blur(14px);
  z-index:-1;
}

/* Badge */
.rec-badge{
  position:absolute; top:-10px; left:16px;
  padding:6px 12px;
  font-size:12px; font-weight:700;
  color:#0B0F14;
  background:linear-gradient(180deg,#4FB1F2,#7DD3FC);
  border-radius:999px;
  box-shadow:0 8px 24px rgba(79,177,242,.35);
}

/* Medienbereich */
.rec-media{
  background:#0B0F14;
  border-radius:16px;
  padding:18px;
  margin-bottom:16px;
  height:180px;               /* gleiche Höhe für alle */
  display:flex; align-items:center; justify-content:center;
}
.rec-media img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* Texte/Buttons in Cards */
.rec-card h3{ margin:6px 2px 6px; }
.rec-card p{ color:var(--text-2); margin:0 2px 14px; }
.rec-card .button.primary{ width:100%; }

/* Responsive: 2 Spalten / 1 Spalte */
@media (max-width: 1100px){
  .rec-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .rec-grid{ grid-template-columns: 1fr; }
}

/* === KEINE ROTATION MEHR === */
.portrait-card,
.portrait-card:hover {
  transform: none !important;
}

/* === Empfehlungen: Hover ohne Kipp-Effekt, nur heller + mehr Glow === */
.rec-card{
  transition: background .25s ease, box-shadow .25s ease, filter .25s ease;
  transform: none !important;         /* falls irgendwo gesetzt */
}

.rec-card:hover{
  background: #141b25;                /* etwas heller als #0F141C */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 48px rgba(0,0,0,.65);
  filter: saturate(1.05);              /* minimal mehr „Punch“ */
}

/* Kontur beim Hover etwas kräftiger, aber kein Movement */
.rec-card::before{
  transition: opacity .25s ease;
}
.rec-card:hover::before{
  opacity: 0.9;
}

/* Badge/Flag oben links – bleibt wie gehabt */
.rec-badge{
  position:absolute; top:-10px; left:16px;
  padding:6px 12px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  color:#0B0F14;
  background:linear-gradient(180deg,#4FB1F2,#7DD3FC);
  border-radius:999px;
  box-shadow:0 8px 24px rgba(79,177,242,.35);
}

/* USP-Liste */
.usp-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.usp-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 0.9em;
}

/* Icon im Glow-Style */
.usp-list .icon-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4FB1F2, #7DD3FC);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #0B0F14;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(79,177,242,.4);
}

/* ✔ Haken reinzeichnen */
.usp-list .icon-check::before {
  content: "✔";
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.disclaimer {
  background: #0B0F14;           /* passt zum Dark Theme */
  color: #9AA7B5;                /* dezentes Grau */
  font-size: 0.8em;              /* kleiner als normaler Text */
  line-height: 1.5;
  text-align: center;
  padding: 1.5em 2em;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.disclaimer a {
  color: #4FB1F2;                /* Akzentfarbe für Link */
  text-decoration: underline;
}

.disclaimer a:hover {
  color: #7DD3FC;
}

/* Disclaimer Styling */
.disclaimer {
  background: #0F141A;
  color: #9AA7B5;
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: left;               /* Text mittig */
  padding: 1.5em 2em;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.disclaimer p {
  max-width: 1100px;                /* verhindert zu breite Zeilen */
  margin: 0 auto;                   /* zentriert im Container */
}

.disclaimer a {
  color: #4FB1F2;
  text-decoration: underline;
}

.disclaimer a:hover {
  color: #7DD3FC;
}

/* === Intro: stabiles 2-Spalten-Grid (Desktop) / 1-Spalte (Mobile) === */
#intro .split {
  display: grid;
  grid-template-columns: 1fr;       /* Mobile: untereinander */
  gap: 2rem;
  align-items: start;               /* oben ausrichten */
}
@media (min-width: 981px) {
  #intro .split {
    grid-template-columns: 1.15fr 0.85fr; /* Desktop: Text/Bild-Balance */
    gap: 3rem;
  }
}

/* Falls irgendwo eine vertikale Linie per ::after gesetzt wurde: ausschalten */
#intro .split::after { content: none !important; }

/* Portrait-Karte sauber verankern und skalieren */
.portrait-card {
  position: relative;               /* Anker für die Badge */
  max-width: 520px;
  margin: 0 auto;                   /* Mobile mittig */
  padding: 12px;
  border-radius: 20px;
  /* optionales Styling hier belassen oder entfernen */
}
@media (min-width: 981px) {
  #intro .split > section:last-child { justify-self: end; }  /* rechts andocken */
  .portrait-card { margin: 0 0 0 auto; }                     /* Desktop rechts */
}
.portrait-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Badge an die Karte koppeln (nicht an den Viewport) */
.portrait-badge {
  position: absolute;
  top: -12px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
}
@media (max-width: 736px) {
  .portrait-badge { top: -10px; left: 12px; font-size: .9rem; padding: 4px 10px; }
}

/* Button darf auf Mobile umbrechen */
#intro .button.primary { white-space: normal; text-align: center; }

/* --- Intro: Zurück auf Theme-Flex + Feinschliff -------------------- */
#intro .split {
  display: flex !important;          /* Grid-Overrides aushebeln */
  align-items: center;
}

/* rechte Spalte rechts andocken (nur Desktop) */
@media (min-width: 981px) {
  #intro .split > section:last-child {
    display: flex;
    justify-content: flex-end;
  }
  /* Portrait groß innerhalb der 33%-Spalte */
  .portrait-card {
    width: 100%;
    max-width: 640px;                 /* gern auf 600–680 anpassen */
    margin: 0 0 0 auto;               /* rechts ausrichten */
  }
}

/* Mobile: Karte mittig, nicht zu groß */
@media (max-width: 980px) {
  .portrait-card {
    max-width: 420px;
    margin: 0 auto;
  }
}

/* Badge bleibt an der Karte verankert */
.portrait-card { position: relative; }
.portrait-badge {
  position: absolute; top: -10px; left: 18px;
}

/* Mobile: Bild vor Text stapeln */
@media (max-width: 980px) {
  /* Split nutzt im Theme Flex -> einfach die Richtung umdrehen */
  #intro .split {
    display: flex !important;
    flex-direction: column-reverse;   /* macht: [Bild] dann [Text] */
    gap: 2rem;
    align-items: stretch;             /* volle Breite für beide Sektionen */
  }

  /* Linie/Border zwischen den Spalten auf Mobile entfernen */
  #intro .split > section:first-child {
    border-right: none !important;
    padding-right: 0 !important;
  }

  /* Portrait-Karte mittig und angenehm groß */
  .portrait-card {
    max-width: 420px;
    margin: 0 auto;                   /* zentrieren */
  }

  /* Badge sitzt sauber an der Karte */
  .portrait-card { position: relative; }
  .portrait-badge {
    position: absolute;
    top: -10px; left: 16px;
  }

  /* Button darf umbrechen, bleibt mittig */
  #intro .button.primary {
    white-space: normal;
    text-align: center;
  }
}

/* Desktop bleibt beim Theme-Layout (66/33) */
@media (min-width: 981px) {
  #intro .split { display: flex !important; }
  #intro .split > section:last-child {
    display: flex; justify-content: flex-end;
  }
  .portrait-card { max-width: 640px; margin: 0 0 0 auto; }
}
/* Mobile: Reihenfolge im Intro umstellen */
@media (max-width: 980px) {
  #intro .split {
    display: flex !important;
    flex-direction: column;       /* stapeln */
    gap: 1.5rem;
  }

  /* Elemente in gewünschte Reihenfolge bringen */
  #intro .split h1 { order: 1; }
  #intro .split p { order: 2; }
  #intro .split .portrait-card { order: 3; }
  #intro .split .button.primary { order: 4; }

  /* zentrieren und Breitenbegrenzung fürs Bild */
  .portrait-card {
    max-width: 420px;
    margin: 0 auto;
  }

  /* Badge bleibt an der Karte */
  .portrait-card { position: relative; }
  .portrait-badge { position: absolute; top: -10px; left: 16px; }

  /* Button mittig */
  #intro .button.primary {
    display: block;
    margin: 0 auto;
    white-space: normal;
    text-align: center;
  }
}

/* Mobile: Reihenfolge im Intro sauber umstellen */
@media (max-width: 980px) {
  #intro .split {
    display: flex !important;
    flex-direction: column;  /* alles stapeln */
    gap: 1.5rem;
  }

  /* Erst Section 1 (Headline + Text + Button), dann Section 2 (Bild) */
  #intro .split > section:first-child { order: 1; }
  #intro .split > section:last-child  { order: 2; }

  /* Portrait mittig */
  .portrait-card {
    max-width: 420px;
    margin: 0 auto;
    position: relative;
  }
  .portrait-badge {
    position: absolute;
    top: -10px;
    left: 16px;
  }

  /* Button mittig */
  #intro .actions {
    text-align: center;
  }
  #intro .button.primary {
    display: inline-block;
    white-space: normal;
  }
}
/* ===== MOBILE LAYOUT: H1 -> Text -> Bild -> Button ===== */
@media (max-width: 980px) {
  /* 1) Intro mobil als Grid mit definierter Reihenfolge */
  #intro .split {
    display: grid !important;               /* Flex-Tests überstimmen */
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "text"
      "portrait"
      "actions";
    gap: 0.5rem;
    align-items: start;
	#intro h1 { margin-bottom: 0.3rem; }
#intro p { margin-bottom: 0.5rem; }
#intro .actions { margin-top: 0.6rem; }
  }

  /* 2) Erste Section "auflösen", damit H1, P, Button Grid-Items werden */
  #intro .split > section:first-child { display: contents; }

  /* 3) Elemente den Grid-Areas zuweisen */
  #intro .split h1            { grid-area: title; }
  #intro .split p             { grid-area: text; }
  #intro .split .actions      { grid-area: actions; justify-self: center; }

  /* 4) Zweite Section (Bild) sitzt als eigenes Grid-Item */
  #intro .split > section:last-child { grid-area: portrait; justify-self: center; }

  /* 5) Bildkarte zentrieren und Größe begrenzen */
  .portrait-card {
    max-width: 420px;
    margin: 0 auto;
    position: relative;
  }
  .portrait-badge { position: absolute; top: -10px; left: 16px; }

  /* 6) Button schön mittig, Umbruch erlauben */
  #intro .button.primary {
    display: inline-block;
    white-space: normal;
    text-align: center;
  }

  /* 7) Mobile-Trennlinien komplett entfernen */
  #intro .split > section { border: 0 !important; padding-right: 0 !important; }
  #intro .split::before,
  #intro .split::after,
  #intro .split > section::before,
  #intro .split > section::after { content: none !important; display: none !important; }
}

/* ===== DESKTOP BLEIBT WIE JETZT (Theme 66/33) ===== */
@media (min-width: 981px) {
  #intro .split { display: flex !important; } /* Theme-Basis beibehalten */
  #intro .split > section:last-child {
    display: flex; justify-content: flex-end;
  }
  .portrait-card { max-width: 640px; margin-left: auto; }
}

.more-details {
  text-align: center;
  margin-top: 1.5rem;
}

.button.secondary {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 6px;
  font-weight: 600;
  text-align: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  transition: all 0.2s ease;
}
.button.secondary:hover {
  background: rgba(255,255,255,0.18);
}
.more-details {
  text-align: center;
  margin-top: 2rem;
}
.button.smaller {
  padding: 0.6rem 1.2rem;   /* weniger Höhe/Breite */
  font-size: 0.7em;         /* etwas kleinere Schrift */
  max-width: 1120px;         /* optional feste Maximalbreite */
}
.button.smaller {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.more-details {
  text-align: center;
  margin-top: 1.2rem;   /* etwas höher an die Kacheln ran */
}

.more-details .button {
  padding: 0.4rem 1.4rem;   /* höher + breiter */
  min-width: 460px;         /* sorgt für etwas mehr Breite */
  font-size: 0.8em;         /* optional: leicht größere Schrift */
  margin-top: 1.2rem;
}
/* Mobile Override: Button darf auf kleinen Screens nicht zu breit werden */
@media (max-width: 736px) {
  .more-details .button {
    min-width: 0 !important;
    width: auto;
    max-width: 100%;
  }
}
/* -------- Kaufen & Verwahren – Layout -------- */
.page-wrap { padding: 52px 0 84px; }
.page-head h1 { margin: 0 0 10px; font-weight: 900; letter-spacing: .2px; }
.page-head p  { margin: 0; opacity: .8; }

.review-stack{display:flex;flex-direction:column;gap:26px;margin-top:28px;}
.review{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 18px 20px 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
}
.review:hover{border-color:rgba(20,183,227,.22);box-shadow:0 18px 42px rgba(0,0,0,.35);}

.review-head{display:flex;align-items:center;gap:14px;margin:2px 2px 12px;}
.pill{
  background: linear-gradient(180deg,#14b7e3,#0a90b9);
  color:#00161e;font-weight:800;font-size:.72rem;letter-spacing:.06em;
  padding:8px 12px;border-radius:10px;box-shadow:0 8px 22px rgba(20,183,227,.35);
  text-transform:uppercase;white-space:nowrap;
}
.review-title{margin:0 0 0 6px;font-weight:900;font-size:1.18rem;color:#fff;}
.review-cta{margin-left:auto;display:flex;align-items:center}
.review-cta .button{height:48px;border-radius:28px;font-weight:800;letter-spacing:.22em;}

/* Body: links Score/Badge – Mitte Liste */
.review-body{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;}
.score{
  background: radial-gradient(120px 90px at 50% 8%, rgba(255,255,255,.06), transparent 60%),
              rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:16px 16px 14px;
  text-align:center;
}
.score .logo{height:42px;display:block;margin:0 auto 10px;opacity:.95}

/* Badge (Ribbon + Schild + Prozent) */
.badge{position:relative;width:220px;height:230px;margin:0 auto;}
.badge .ribbon{
  position:absolute;left:50%;transform:translateX(-50%);top:6px;
  background:linear-gradient(180deg,#13A9BB,#0e7f90);
  color:#00161e;font-weight:900;letter-spacing:.08em;font-size:.74rem;text-transform:uppercase;
  padding:8px 12px;border-radius:10px;box-shadow:0 10px 26px rgba(19,169,187,.35);
}
.badge svg{position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.35));}
.badge .center{position:absolute;top:98px;left:0;right:0;display:flex;flex-direction:column;align-items:center;}
.badge .pct{font-size:2.05rem;font-weight:900;color:#ffb457;line-height:1;}
.badge .lbl{margin-top:6px;font-size:.98rem;opacity:.9}

/* Punkte-Liste */
.points{margin:6px 0 0;padding:0;list-style:none;}
.points li{display:flex;gap:12px;align-items:flex-start;margin:10px 0;line-height:1.35;}
.icon-ok,.icon-bad{
  width:18px;height:18px;border-radius:50%;flex:0 0 18px;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;
}
.icon-ok{background:#19c487;color:#05271a;box-shadow:0 0 0 3px rgba(25,196,135,.18);}
.icon-bad{background:#e1605d;color:#2b0907;box-shadow:0 0 0 3px rgba(225,96,93,.18);}

/* Responsive */
@media (max-width: 980px){
  .review-body{grid-template-columns:1fr;gap:18px;}
  .review-cta{order:2;margin:10px 0 0 auto;}
}
/* === Feinschliff: Titel ausblenden (falls im HTML noch vorhanden) === */
.review-title{ display:none; }

/* === CTA-Button sauber zentrieren & etwas „höher“ wirken lassen === */
.review-cta .button.primary{
  display:flex; align-items:center; justify-content:center;
  height:52px; line-height:52px; padding:0 28px;
  border-radius:28px; text-align:center;
}

/* === Badge: kleiner + Ribbon frei sichtbar über dem Schild === */
.score.score--badge{ padding-top:10px; } /* etwas Luft oben */

.badge{
  width:200px; height:210px;           /* kleiner als vorher */
  margin: 0 auto; position:relative;
}

.badge .ribbon{
  position:absolute; left:50%; transform:translateX(-50%);
  top:-6px;                                /* wandert über das Schild */
  background:linear-gradient(180deg,#13A9BB,#0e7f90);
  color:#00161e; font-weight:900; letter-spacing:.08em;
  font-size:.72rem; text-transform:uppercase;
  padding:8px 12px; border-radius:10px;
  box-shadow:0 10px 26px rgba(19,169,187,.35);
  z-index:2;
}

/* Schild nach unten versetzen, damit das Ribbon frei steht */
.badge svg{
  position:absolute; left:0; right:0;
  top:22px;                                 /* Schild beginnt tiefer */
  height:calc(100% - 26px);                 /* kompakter */
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.35));
  z-index:1;
}

/* Prozent/Label mittig, an die neue Höhe angepasst */
.badge .center{
  position:absolute; left:0; right:0;
  top:96px;                                 /* fein justieren nach Geschmack */
  display:flex; flex-direction:column; align-items:center;
  z-index:3; pointer-events:none;
}
.badge .pct{ font-size:1.95rem; font-weight:900; color:#ffb457; line-height:1; }
.badge .lbl{ margin-top:6px; font-size:.96rem; opacity:.9; }
/* Mehr Abstand zwischen Ribbon und Schild */
.badge svg {
  top: 34px;                    /* vorher ~22px, jetzt tiefer */
  height: calc(100% - 38px);    /* Schild proportional kleiner */
}

/* Inhalt mittig zentrieren */
.badge .center {
  top: 115px;                   /* runtergesetzt, damit es mittig sitzt */
}

/* Feintuning Textgrößen */
.badge .pct {
  font-size: 2rem;              /* leicht größer für optisches Gleichgewicht */
}
.badge .lbl {
  margin-top: 6px;
  font-size: 1rem;
}
/* ----- Badge Feintuning: Text höher im Schild platzieren ----- */

/* Schild bleibt mit Abstand unter dem Ribbon */
.badge svg{
  top: 34px;                   /* passt den Abstand zum Ribbon */
  height: calc(100% - 38px);
}

/* Textblock (95% / Sehr gut) höher setzen, engerer Block */
.badge .center{
  top: 92px;                   /* vorher ~115px -> rückt sichtbar nach oben */
  line-height: 1.05;           /* kompakter, wirkt zentrierter im Schild */
}

/* Größen/Abstände fein abstimmen */
.badge .pct{
  font-size: 2.05rem;          /* leichte Betonung der Prozentzahl */
  margin-bottom: 4px;          /* weniger Luft nach unten */
}
.badge .lbl{
  font-size: 0.98rem;
  margin-top: 0;               /* kein zusätzlicher Abstand mehr */
  opacity: 0.95;
}

/* (Optional) wenn du eine kleine Datumszeile willst – wie im Beispielbild:
.badge .date{
  margin-top: 6px;
  font-size: .8rem;
  opacity: .6;
}
*/
.review-head {
  display: flex;
  justify-content: space-between; /* Pill + Titel links, Button rechts */
  align-items: center;
  margin-bottom: 16px;
}

.head-left {
  display: flex;
  align-items: center;
  gap: 12px; /* Abstand zwischen Badge und Titel */
}

.review-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
  color: #fff;
}
/* Weniger Abstand zwischen Headline und den Review-Boxen */
.page-head {
  margin-bottom: 5px; /* vorher vermutlich 40px oder mehr */
}

.review-stack {
  margin-top: 2px; /* vorher 28px im Inline-Style */
}
/* Abstand Headline -> erste Box verkleinern */
.page-head {
  margin-bottom: 4px !important;   /* viel kleiner */
  padding-bottom: 0 !important;    /* evtl. zusätzliches Padding raus */
}

.review-stack {
  margin-top: 0 !important;        /* keine extra Lücke */
}
.back-button {
  text-align: left;       /* linksbündig */
  margin-top: 30px;       /* Abstand nach oben */
  margin-bottom: 40px;    /* Abstand zum Footer */
}
.recommendation {
  margin-bottom: 40px; /* Abstand nach unten */
}

.recommendation .back-button {
  margin-top: 20px;    /* Abstand zur Liste */
  text-align: left;    /* Links einrücken */
}
/* --- CTA-Handling Desktop vs. Mobile --- */

/* Standard (Desktop): Header-CTA sichtbar, Bottom-CTA verstecken */
.review .actions {
  display: none;
}

/* Mobile: Header-CTA ausblenden, Bottom-CTA anzeigen und ans Ende setzen */
@media (max-width: 860px) {
  .review-head .review-cta {
    display: none;
  }
  .review .actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;     /* Abstand zum Inhalt */
  }
  .review .actions .button {
    width: 100%;
  }

  /* Falls dein Body ein Grid ist: auf 1 Spalte umstellen,
     dann liegt .actions automatisch ganz unten */
  .review-body {
    display: grid;
    grid-template-columns: 1fr;   /* statt 230px 1fr 240px etc. */
    gap: 16px;
  }
}
/* --- Mobile: CTA ans Kartenende schieben --- */
@media (max-width: 820px) {
  /* Jede Karte als Grid: Header -> Body -> CTA */
  .review {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "body"
      "cta";
    row-gap: 16px;
  }

  /* Header „auflösen“, damit seine Kinder Grid-Items werden */
  .review-head {
    display: contents; /* Kinder (head-left, review-cta) sind nun direkte Grid-Items */
  }

  /* Bereiche zuweisen */
  .review .head-left { grid-area: head; }
  .review .review-body { grid-area: body; }
  .review .review-cta  { 
    grid-area: cta; 
    margin-left: 0;          /* evtl. vorhandenes auto-Pushen neutralisieren */
    justify-self: stretch;   /* Button über volle Kartenbreite */
  }

  /* CTA auf Mobile schön breit & „Primary“ */
  .review .review-cta .button {
    width: 100%;
    height: 56px;
    border-radius: 16px;
    font-weight: 800;
    letter-spacing: .22em;
    text-align: center;
  }
}
/* CTA am Kartenende auf Mobile: Optik */
@media (max-width: 820px){
  .review-cta { margin-top: 14px; }
  .review-cta .button {
    width: 100%;
    height: 56px;
    border-radius: 16px;
    font-weight: 800;
    letter-spacing: .22em;
    text-align: center;
  }
}
/* Mobile Button kleiner & kompakter */
@media (max-width: 820px) {
  .review-cta .button {
    width: auto;              /* nicht volle Breite */
    max-width: 260px;         /* maximale Breite begrenzen */
    font-size: 0.9rem;        /* kleinere Schrift */
    padding: 12px 20px;       /* weniger Innenabstand */
    height: auto;             /* Höhe automatisch */
    margin: 12px auto 0 auto; /* mittig platzieren */
    display: block;
  }
}
/* Mobile Buttons kompakter machen */
@media (max-width: 820px) {
  .review-cta .button {
    display: inline-block;     /* statt Block */
    width: auto !important;    /* Breite automatisch */
    min-width: 160px;          /* Mindestgröße */
    max-width: 220px;          /* nicht zu breit */
    font-size: 0.9rem;         /* kleinere Schrift */
    padding: 10px 18px;        /* weniger Padding */
    margin: 15px auto 0 auto;  /* mittig unter Inhalt */
  }
}
/* =========================================
   Startseite: "MEHR DETAILS" – mobile kleiner
   ========================================= */
.more-details {
  text-align: center;            /* Button zentrieren */
  margin: 2.25rem auto 0;
}

.more-details .button.smaller {
  /* Desktop/Tablet: leicht kleiner als Standard */
  font-size: 0.55em;
  height: calc(3.4em + 2px);
  line-height: 3.4em;
  padding: 0 2.25em;
  border-radius: 2em;
  display: inline-block;         /* niemals volle Breite */
  white-space: nowrap;
}

/* Phones */
@media (max-width: 736px) {
  .more-details .button.smaller {
    font-size: 0.48em;
    height: calc(3.0em + 2px);
    line-height: 3.0em;
    padding: 0 1.75em;
    border-radius: 1.75em;
  }
}

/* ganz kleine Phones */
@media (max-width: 380px) {
  .more-details .button.smaller {
    font-size: 0.45em;
    height: calc(2.8em + 2px);
    line-height: 2.8em;
    padding: 0 1.5em;
  }
}
/* =========================================
   Startseite – "MEHR DETAILS" mobil schmaler
   ========================================= */
.more-details {
  text-align: center;
}

/* Basis: niemals volle Breite */
.more-details .button.smaller {
  display: inline-flex !important;       /* kein block */
  align-items: center;
  justify-content: center;
  width: auto !important;                /* 100%-Breiten resetten */
  max-width: 520px;                      /* Deckel für große Screens */
  box-sizing: border-box;
  white-space: nowrap;
}

/* Phones */
@media (max-width: 736px) {
  .more-details .button.smaller {
    max-width: 420px;                    /* deutlich schmaler */
    padding: 0 1.6rem;                   /* weniger horizontaler Rand */
    font-size: 0.48em;                   /* wie zuvor verkleinert */
    height: calc(3.0em + 2px);
    line-height: 3.0em;
    border-radius: 1.6em;
  }
}

/* sehr kleine Phones */
@media (max-width: 380px) {
  .more-details .button.smaller {
    max-width: 320px;                    /* noch schmaler */
    padding: 0 1.3rem;
    font-size: 0.45em;
    height: calc(2.8em + 2px);
    line-height: 2.8em;
  }
}
/* =========================================
   Startseite – "MEHR DETAILS" (mobil schmal)
   ========================================= */

/* Container zentriert den Button */
.more-details {
  display: flex;
  justify-content: center;
}

/* Basis: niemals 100% Breite, als Inline-Flex rendern */
.more-details .button.smaller {
  display: inline-flex !important;      /* block -> inline-flex */
  align-items: center;
  justify-content: center;
  width: auto !important;               /* any width:100% überschreiben */
  max-width: 520px !important;          /* Deckel für große Screens */
  box-sizing: border-box;
  white-space: nowrap;
}

/* Phones */
@media (max-width: 736px) {
  .more-details .button.smaller {
    /* harte Breitenkappe per vw: zwischen 260px und 360px */
    width: clamp(260px, 72vw, 360px) !important;
    max-width: clamp(260px, 72vw, 360px) !important;
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    height: calc(2.8em + 2px);
    line-height: 2.8em;
    border-radius: 1.6em;
    font-size: 0.48em; /* wenn du ihn kleiner willst: 0.45em */
    margin: 0 auto;   /* zentriert, falls der Container doch nicht flex ist */
  }
}

/* Sehr kleine Phones */
@media (max-width: 380px) {
  .more-details .button.smaller {
    width: clamp(240px, 80vw, 320px) !important;
    max-width: clamp(240px, 80vw, 320px) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    font-size: 0.45em;
  }
}

/* =========================================
   Portrait-Karte: Bild nicht abschneiden
   ========================================= */
#intro .portrait-card { overflow: visible; }
#intro .portrait-card img {
  /* Zusätzlicher Innenabstand, damit Kopf/Hand nicht am Rand kleben */
  padding: clamp(8px, 2.5vw, 16px);
  box-sizing: border-box;
  margin-top: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
}

/* =============================
   Krypto Guide (next-level UI)
   ============================= */
/* Section background glow (subtle) */
.guide-section { position: relative; overflow: hidden; }
.guide-section::before {
  content: "";
  position: absolute; top: 72px; left: -20%; right: -20%; height: 55%;
  background: radial-gradient(60% 60% at 20% 40%, rgba(127, 211, 155, 0.07), transparent 60%),
              radial-gradient(50% 50% at 80% 20%, rgba(100, 149, 237, 0.06), transparent 60%);
  filter: blur(38px);
  transform: translateZ(0);
  pointer-events: none;
}

/* Grid */
.guide-grid { list-style: none; padding: 0; margin: 2rem 0 0 0; display: grid; gap: 2.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1100px){ .guide-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px){ .guide-grid { grid-template-columns: 1fr; } }

/* Cards */
.guide-card { position: relative; display: flex; height: 100%; }
.guide-card .guide-card-inner {
  position: relative;
  padding: clamp(18px, 2.8vw, 28px);
  border-radius: 22px;
  background: #0F141C;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 38px rgba(0,0,0,0.30);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  display: flex; flex-direction: column; height: 100%; flex: 1 1 auto; min-height: 360px;
}
.guide-card .guide-card-inner::before{
  content:""; position:absolute; inset:0; border-radius:22px; padding:1px;
  background:linear-gradient(135deg, rgba(79,177,242,.85), rgba(125,211,252,.25) 45%, rgba(79,177,242,0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:.85; transition:opacity .25s ease;
}
.guide-card .guide-card-inner::after{
  content:""; position:absolute; inset:-14px; border-radius:28px;
  background:radial-gradient(55% 55% at 70% 25%, rgba(79,177,242,.22), rgba(79,177,242,0) 60%);
  filter:blur(14px); z-index:-1;
}
.guide-card:hover .guide-card-inner { transform: none; background: #141b25; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 48px rgba(0,0,0,.65); }
.guide-card:hover .guide-card-inner::before{ opacity: 0.95; }
.guide-card h3 { margin: 0 0 .35rem 0; font-weight: 800; letter-spacing: .01em; }
.guide-card p { margin: 0 0 1.1rem 0; opacity: .9; }
.guide-step { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; font-weight: 800; letter-spacing: .08em; font-size: .9rem; margin-bottom: .6rem; background: linear-gradient(135deg, rgba(127,211,155,.35), rgba(100,149,237,.35)); color: #fff; border: 1px solid rgba(255,255,255,0.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }

/* Actions/Buttons in Guide-Cards passend zu Empfehlungen */
.guide-card .actions { margin-top: auto; display: flex; justify-content: center; padding-top: 0.5rem; }
.guide-card .actions li { width: auto; }
.guide-card .actions .button { width: auto; }


/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Tilt base (JS-enhanced) */
.tilt { transform-style: preserve-3d; perspective: 900px; }
.tilt * { transform: translateZ(0.01px); }

/* FAQ */
.faq { margin-top: clamp(22px, 4vw, 40px); }
.faq-list { display: grid; gap: 14px; }
.faq-item { position: relative; border-radius: 22px; background: #0F141C; border: 0; box-shadow: 0 14px 38px rgba(0,0,0,.30); }
.faq-item::before{
  content:""; position:absolute; inset:0; border-radius:22px; padding:1px;
  background:linear-gradient(135deg, rgba(79,177,242,.85), rgba(125,211,252,.25) 45%, rgba(79,177,242,0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; opacity:.85; transition:opacity .25s ease;
}
.faq-item:hover::before{ opacity:.95; }
.faq-q { width: 100%; text-align: left; padding: 16px 54px 16px 20px; background: transparent; color: inherit; border: 0 !important; outline: none; font-weight: 700; letter-spacing: .01em; cursor: pointer; position: relative; text-transform: none; display: flex; align-items: center; line-height: 1.3; height: auto !important; border-radius: 22px; }
.faq-q::after { content: ''; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; border-right: 2px solid rgba(255,255,255,.6); border-bottom: 2px solid rgba(255,255,255,.6); transform: translateY(-70%) rotate(-45deg); transition: transform .25s ease; }
.faq-item.open .faq-q::after { transform: translateY(-30%) rotate(135deg); }
.faq-a { padding: 0 18px 18px 18px; color: rgba(255,255,255,.85); }

/* Reduced motion: tone down animations */
@media (prefers-reduced-motion: reduce) {
  .guide-card .guide-card-inner { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Fix: Haken in USP-Punkten (Unicode, sicher gegen Encoding) */
.usp-list .icon-check::before { content: "\2713" !important; font-size: 12px; font-weight: 700; line-height: 1; }

/* ===== Einsteiger-Guide (eigene Seite): Layout + TOC ===== */
.eg-layout {
  display: grid;
  grid-template-columns: 1fr 300px;   /* Content | TOC */
  grid-template-areas: "content toc";
  align-items: start;
  gap: 28px;
}

.eg-content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.eg-section {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 22px 22px 20px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  scroll-margin-top: 90px; /* offset for sticky TOC */
}

.eg-section h2 {
  margin: 0 0 8px;
  font-size: 1.45rem;
  letter-spacing: .2px;
}

.eg-section h3 {
  margin-top: 12px;
  font-size: 1.05rem;
  opacity: .95;
}

.eg-section .lead {
  opacity: .9;
}

/* Sticky Inhaltsverzeichnis */
.eg-toc, .toc {
  grid-area: toc;
  position: sticky;
  top: 80px;
  align-self: start;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 16px 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  max-height: calc(100vh - 110px);
  overflow: auto;
  overscroll-behavior: contain;
}

/* Minimal, brand-aligned scrollbar */
.eg-toc, .toc { scrollbar-width: thin; scrollbar-color: rgba(79,177,242,.45) transparent; }
.eg-toc::-webkit-scrollbar, .toc::-webkit-scrollbar { width: 8px; }
.eg-toc::-webkit-scrollbar-track, .toc::-webkit-scrollbar-track { background: transparent; }
.eg-toc::-webkit-scrollbar-thumb, .toc::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4FB1F2, #7DD3FC);
  border-radius: 8px;
  opacity: .65;
}
.eg-toc:hover::-webkit-scrollbar-thumb, .toc:hover::-webkit-scrollbar-thumb { opacity: .9; }

.eg-toc .toc-title, .toc .toc-title {
  font-size: .95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #a7e8ff;
  margin: 2px 8px 8px;
}

.eg-toc ul, .toc ul {
  list-style: none;
  margin: 0;
  padding: 4px 0 0 0;
}

.eg-toc li + li, .toc li + li { margin-top: 2px; }

.eg-toc a, .toc a {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  color: rgba(255,255,255,.85);
}

.eg-toc a:hover, .toc a:hover {
  background: rgba(255,255,255,.045);
  color: #fff;
}

.eg-toc a.active, .toc a.active {
  background: rgba(20,183,227,.10);
  border-left-color: #14b7e3;
  color: #ffffff;
}

/* callouts */
.eg-callout, .callout {
  margin: 12px 0 2px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.eg-callout strong, .callout strong { color: #fff; }
.eg-callout.tip, .callout.tip { border-color: rgba(25,196,135,.45); box-shadow: inset 0 0 0 1px rgba(25,196,135,.18); }
.eg-callout.warn, .callout.warn{ border-color: rgba(225,96,93,.45);  box-shadow: inset 0 0 0 1px rgba(225,96,93,.18); }

.eg-checklist, .checklist { margin: 8px 0 0; padding-left: 18px; }
.eg-checklist li, .checklist li { margin: 6px 0; }

/* Mobile */
@media (max-width: 1080px) {
  .eg-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "toc";
  }
  .eg-toc { position: relative; top: 0; max-height: none; }
}

/* Startseite: Krypto Guide Heading-Feinschliff */
#guide .section-header h2 { margin: 0 0 .35rem; font-weight: 900; }
#guide .section-header .subtitle { margin: 0 0 1.2rem; opacity: .65; font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; }

/* Sauberer Abstand zwischen Empfehlungen-Button und Guide-Sektion */
.more-details { margin-bottom: 1.5rem; }





/* Prevent top-margin collapse on sections to remove dark gap */
#guide { margin-top: -24px !important; padding-top: 24px !important; }
#one { padding-bottom: 32px;  margin-bottom: 0 !important; }

/* Eliminate seam between recommendations and Guide */
#one { margin-bottom: 0 !important; padding-bottom: 32px !important; }
#one .more-details { margin-bottom: 0 !important; padding-bottom: 0 !important; }
#guide { margin-top: -24px !important; padding-top: 24px !important; }
/* Ensure backgrounds touch with same color */
#one, #guide { background-color: var(--surface) !important; }
/* Remove any accidental top borders on the next wrapper */
#guide, #guide .inner { border-top: 0 !important; }