/* preview1.css */

/* reset */

:root {
	--framework-width: 1000px;
	--content-width: 800px;

	--font-serif: Petrona;
	--font-sans: Ubuntu;
	--size-h1: 40px;
	--size-h2: 46px;
	--size-h3: 2.5em;
	--size-p: 17px;

	--color-bg0: #fff;
	--color-bg1: #edf1e3;
	--color-head-txt: #308b2c;
	--color-head-act-bg: #d3f2c6;
	--color-head-act: #225220;

	--color-h1-bg: #094973;
	--color-h2: #094973;

	--color-btn-bg: #388817;
	--color-btn-bg-hl: #22511d;
	--color-a: #22511d;
	--color-a-bg: #d1f2c5;
	--color-a-bg-hl: #a6d695;

	--color-faq-bg0: #f8f8f8;
	--color-faq-bg1: #f0f0f0;

	--color-footer-bg: #094973;

	--color-mobile-menu-bg: #308B2C;
	--color-mobile-menu-bg-hover: #308B2C;

	--heightfix: calc(100vw * 0.087155743);

	--header-height: 80px;
	--header-height-min: 59px;
	--header-height-min2: 75px;
	--footer-height: 120px;
	--menuitem-spacing: 1em;
	--menuitem-padding-y: 0.8em;
	--menuitem-padding-x: 1.5em;
	--menuitem-fontsize: 18px;

	--display-mobile-flex: none;
	--display-desktop-flex: flex;

	--page-start-offset: 40px;

	--gradient-pos: 40%;
}

html, body, div, span, p, a, img, h1, h2, h3 {
	margin:0;
	padding:0;
	font-family: var(--font-sans);
}

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

/* fonts */

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/fa-brands-400.woff2") format("woff2");
}

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; 
}

/* ------- */

@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("/fonts/fa-light-300.woff2") format("woff2"); 
}

.fal {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 300; 
}

/* ------- */

@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/fa-regular-400.woff2") format("woff2"); 
}

.far {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 400; 
}

/* ------- */

@font-face {
  font-family: 'Font Awesome 5 Pro';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/fonts/fa-solid-900.woff2") format("woff2");
}

.fa,
.fas {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900; 
}

/* ------- */

body {
	/*
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	*/
	display:flex;
	flex-direction: column;
	align-items: center;

	header, main, footer {
		/*
		max-width:1000px;
		padding-left:auto;
		padding-right:auto;
		*/
		position:relative;
	}

	header {
		position: fixed;
		padding-left:calc(50vw - (var(--framework-width) * 0.5));
		padding-right:calc(50vw - (var(--framework-width) * 0.5));
		width:var(--framework-width);
		box-sizing: content-box;
		z-index:10;

		display:flex;
		background-color: #fff;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 0 8px 0 #0004;
		background-color: #ffffff;

		height:var(--header-height);
		padding-top:8px;
		padding-bottom:8px;

		#logo {
			height: calc(100% - 3px);
			display: flex;
			align-items: center;

			a {
				height:inherit; 

				img { 
					height:inherit; 
				}
			}
		}
		#topmenu {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top:1em;
			font-size: var(--menuitem-fontsize);
			font-weight:500;

			.menu-item {
				text-transform: uppercase;
				padding:var(--menuitem-padding-y) var(--menuitem-padding-x);
				/*margin:1.5em 2.5em;*/
				margin-right:var(--menuitem-spacing);
				color:var(--color-head-txt);

				transition:color 0.2s ease-out;
				transition:background-color 0.2s ease-out;

				a { 
					color:inherit;
				}

				&:hover {
					color:var(--color-head-act);
				}
				&.active {
					color:var(--color-head-act);
					background-color:var(--color-head-act-bg);
				}
			}
			.menu-item-social {
				padding:0 0.5em;
				color:var(--color-head-txt);
				font-size:22px;
			}
		}

		#topmenu2 {
			/*position: relative;*/

			#mobile-menu-icon {
			  cursor:pointer;
			  /*border:1px solid #000;*/
			  padding:6px;
			  margin-right:10px;
			  font-size:22px;
			  aspect-ratio:1;
				color: var(--color-mobile-menu-bg);
				/*background-color: white;*/

				span {
				  font-family: 'Font Awesome 5 Pro';
				  font-weight: 400; 
				}

				.icon-open {
					display:none;
				}
			}
			#mobile-menu {
				position: absolute;
				left:0;
				top:var(--header-height-min2);
				width:100vw;
				height:100vh;
				background-color: #0008;

				.mobile-menu-content {
					position: absolute;
					left:0;
					right:0;
					top:0;
					background-color:var(--color-mobile-menu-bg);
					color:white;
					margin:0;
					padding:1em 0;
					display:flex;
					flex-direction: column;
					/*width:10em;*/
					box-shadow:0px 2px 4px 0 #0004;

					&:after {
						position:absolute;
						content:'';
						top:0;
						bottom:-16px;
						left:-16px;
						right:-16px;
						box-shadow: inset 0 4px 4px 0 #0002;
						pointer-events: none;
					}

					li.menu-item-mobile {
						position: relative;
						display:block;
						margin:0;
						padding:0.66em 40px;
						background-color:var(--color-mobile-menu-bg);
						transition:background-color 0.2s ease-out;
						display:flex;

						&::after {
							position:absolute;
							content:'';
							bottom:0;
							height:1px;
							left:25px;
							right:25px;
							background-color: #fff;
						}

						&:last-child {
							&::after {
								display:none;
							}
						}

						&:hover {
							background-color:var(--color-mobile-menu-bg-hover);
						}

						& > a {
							display:block;
							width:100%;
						}

						.menu-item-social {
							padding:0 0.6em 0 0;
							font-size: 1.6em;
						}
					}
				}
			}

			&.collapsed {
				#mobile-menu-icon {
					.icon-close {
						display:none;
					}
					.icon-open {
						display:initial;
					}
				}
				#mobile-menu {
					display:none;
				}
			}

		}

		&.minimized {
			height:var(--header-height-min);

			#topmenu {
				margin-top:0;
			}
		}
	}

	main {
		/*background-color:#fecb00;*/
		padding-top:var(--header-height);
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height:calc(100vh - var(--footer-height) - var(--header-height));

		.page-start-offset {
			height:var(--page-start-offset);
		}

		.spacer-top {
			height:var(--header-height);
		}

		& > .container {
			padding-left:calc(50vw - (var(--content-width) * 0.5));
			padding-right:calc(50vw - (var(--content-width) * 0.5));
			width:var(--content-width);
			box-sizing: content-box;
			position:relative;
			padding-bottom:56px;

			display:flex;
			flex-direction: column;
			align-items: center;

			&.nopad {
				padding-bottom:0; /* no margin on gradients */
			}

			&.fillheight {
				flex-grow:1;
				justify-content: center;
			}

			&.bg-white {
				background: var(--color-bg0);
			}
			&.bg-green {
				background: var(--color-bg1);
			}
			&.bg-white-to-green {
				background: #ffffff;
				background: linear-gradient(355deg, var(--color-bg1) 0%, var(--color-bg1) 49.8%, var(--color-bg0) 50.2%, var(--color-bg0) 100%);
				margin-bottom:0; /* no margin on gradients */
			}
			&.bg-green-to-white {
				background: #ffffff;
				background: linear-gradient(355deg, var(--color-bg0) 0%, var(--color-bg0) calc(var(--gradient-pos) - 0.2%), var(--color-bg1) calc(var(--gradient-pos) + 0.2%), var(--color-bg1) 100%);
			}
		}

		h1,h2,h3 {
			text-align: center;
			font-style: italic;
			display: inline-block;
			font-family: var(--font-serif);
		}

		h1 {
			font-size: var(--size-h1);
			padding:0.4em 0.6em;
			background-color: var(--color-h1-bg);
			color:#fff;
			margin-top:1em;
		}
		h2 {
			font-size: var(--size-h2);
			font-weight:500;
			color:var(--color-h2);
			margin-top:56px;
			margin-bottom:0.4em;
		}
		h3 {
			font-size: var(--size-h3);
			color:var(--color-h2);
			margin-top:56px;
			margin-bottom:0.4em;
		}
		p {
			font-size: var(--size-p);
			font-weight:300;
			line-height:26px;
			padding-bottom:1em;
		}
		a {
			color:var(--color-a);
			font-weight: 400;
			background-color:var(--color-a-bg);
			transition: background-color 0.2s ease-out;
			padding:1px 3px;

			&::before {
				/*content: '\f0a9';*/
				content: '\f35a';
			  font-family: 'Font Awesome 5 Pro';
			  font-weight: 400; 
			  padding-right:0.5em;
			}

			&:hover {
				background-color:var(--color-a-bg-hl);
			}
		}

		#preview-devices {
			width:100%;
			aspect-ratio: 1.811688312;
		}

		.epaper-code {
			font-size: 2em;
			font-family: Courier;
			padding:0.5em 1.5em;
			border:2px solid var(--color-a);
			color:var(--color-a);
			background-color: #fff;
			box-shadow: 4px 4px 12px 0 #0004;
		}

		form {
			display:flex;
			flex-direction: column;
			align-items: center;
			max-width:500px;
			width:100%;

			input[type="text"],
			input[type="email"] {
				border:1px solid #ccc;
				border-radius: 6px;
				padding:0.8em;
				margin:0.2em;
				font-size: var(--size-p);
				font-weight:300;
				line-height:26px;
				color:#3e3e3e;
				width:100%;
				box-sizing: border-box;

				&::placeholder {
					color:#9c9c9c;
					opacity:1;
				}
				&:placeholder-shown {
					color:#9c9c9c;
				}
				&:hover::placeholder {
					color:#3e3e3e;
				}
			}

			.checkbox-row {
				width:100%;
				padding-top:0.75em;
			}

			input[type="checkbox"] {
				display:none;
			}

			input[type="checkbox"] + label {
				position:relative;
				padding-left:2em;
				display: inline-block;
				font-size: 13px;
				font-weight:300;
				line-height:20px;
				hyphens: auto;

				&::before {
					position: absolute;
					top:0;
					left:0;
					content:' ';
					display: inline-block;
					width:20px;
					height:20px;
					background:#fff;
					border:1px solid #ccc;
					border-radius: 6px;
				}
			}

			input[type="checkbox"]:checked + label {
				&::after {
					position: absolute;
					top:0;
					left:0;
					font-size: 20px;
					line-height: 20px;
					content:'\f00c';
				  font-family: 'Font Awesome 5 Pro';
				  font-weight: 900; 
					display: inline-block;
					width:20px;
					height:20px;
					text-align: center;
          padding-top: 2px;
          padding-left: 1px;
        }
			}

			div.error {
				font-size:16px;
				color:red;
				align-self: start;
			}

			select {
				background-color: #fff;
				border:1px solid #ccc;
				border-radius: 6px;
				padding:0.8em;
				margin:0.2em;
				font-size: var(--size-p);
				font-weight:300;
				line-height:26px;
				color:#3e3e3e;
				width:100%;
				box-sizing: border-box;

				&:invalid {
					color: #9c9c9c;

					&:hover {
						color:#3e3e3e;
					}
				}

				option[disabled] {
					color: #9c9c9c;
				}
			}

			button {
				display: inline-block;
				padding:1em 2em;
				color:#fff;
				background-color: var(--color-btn-bg);
				transition: background-color 0.2s ease-out;
				border-radius: 6px;
				border:none;
				width:fit-content;

				font-size: 16px;
				font-weight:500;
				line-height:28px;
				margin-top:1em;

				cursor: pointer;

				.icon-angle-right {
					font-family: 'Font Awesome 5 Pro';
					font-weight: 900; 
				}

				&:hover {
					background-color: var(--color-btn-bg-hl);
				}
			}
		}

		.faq-item {
			margin-bottom: 0.5em;
			background-color: var(--color-faq-bg0);
			border-radius:6px;
			width:100%;

			.faq-question {
				color:#050;
				background-color: var(--color-faq-bg1);
				border-radius:6px;
				padding:1em;
				box-shadow: 0 1px 2px 0 #0004;
				cursor: pointer;
				display: flex;
				align-items: center;

				.icon-collapsible {
					display:inline-block;
					width:36px;
					height:36px;
					background-color: var(--color-a-bg);
					border:1px solid var(--color-a);
					border-radius:50%;
					text-align: center;
					place-content: center;
					margin-right:0.5em;
					flex-grow: 0;
					flex-shrink: 0;
				}

				.text {
					display: inline-block;
				}
			}

			.faq-answer {
				overflow: clip;
				height: auto;
				transition: height 0.33s ease-out;

				.faq-answer-inner {
					padding:1em;
					padding-left:4em;

					p:last-child {
						padding-bottom: 0;
					}

					ul {
						padding: 0;

						li {
							font-size: var(--size-p);
							font-weight: 300;
							line-height: 26px;
							padding-bottom:1em;
						}
					}
				}
			}

			&.collapsed .faq-answer {
				height:0px !important;
			}
		}

		#preview-devices {
			margin-top:-1em;
		}

		.heightfix-insert {
			height:var(--heightfix);
			z-index:1;
		}
		.heightfix-pre {
			margin-bottom:-2em;
		}
		.heightfix-post {
			margin-top:-1em;
		}

		.anchorfix {
			height:0px;
			width:100%;
			position:absolute;
			top:calc(var(--header-height) * -1);
		}
	}

	footer {
		display:flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--color-footer-bg);
		padding-left:calc(50vw - (var(--framework-width) * 0.5));
		padding-right:calc(50vw - (var(--framework-width) * 0.5));
		width:var(--framework-width);
		box-sizing: content-box;
		height:var(--footer-height);
		z-index:1;
		color:#fff;

		#footermenu {
			display:flex;
			flex-wrap:wrap;
			font-size: 15px;
			font-weight: 500;

			div {
				padding:0 0.75em;
				border-right:1px solid #fff;

				&:last-child {
					border-right: none;
				}
			}
		}

		#logo2 {
			height:53px;

			* {
				height: inherit;
			}
		}
	}
}

/* helpers */

.align-left {
	align-self:start;
}

/* mobile responsiveness */

.mobile-only {
	display:var(--display-mobile-flex) !important;
}
.desktop-only {
	display:var(--display-desktop-flex) !important;
}

@media (max-width:1024px) {
	:root {
		--framework-width: 800px;
		--menuitem-spacing: 0.25em;
		--menuitem-padding-y: 0.6em;
		--menuitem-padding-x: 1.0em;
	}
	#logo2 {
		display: none !important;
	}
	body {
		main {
			h1 {
				border-radius:12px;
			}
		}
		footer {
			justify-content: center;
		}
	}
}

@media (max-width:820px) {
	:root {
		--framework-width: 512px;
		--content-width: 512px;
		--header-height: var(--header-height-min);
		--menuitem-fontsize: 14px;
		--menuitem-spacing: 4px;
		--menuitem-padding-y: 0.5em;
		--menuitem-padding-x: 0.5em;
		--gradient-pos: 33%;

		--display-mobile-flex: flex;
		--display-desktop-flex: none;
	}

	body {
		header {
			height:var(--header-height-min);

			#topmenu {
				margin-top:0;
			}
		}

		footer {
		}
	}

}

@media (max-width:512px) {
	:root {
		--framework-width: 100vw;
		--content-width: calc(100vw - 50px);
		--header-height: var(--header-height-min2);

		--page-start-offset: 10px;

		--gradient-pos: 28%;
	}
	body {
		header, footer {
			padding-left:8px;
			padding-right:8px;
			box-sizing: border-box;
		}
		main > .container {
			padding-left:25px;
			padding-right:25px;
		}
		header {
			height: var(--header-height-min2);

			&.minimized {
				height:var(--header-height-min2);
			}

			#logo {
				height:calc(var(--header-height-min) - 6px);

				img {
					margin-left:16px;
				}
			}
		}
		main {
			h1 {
				font-size: 30px;
/*				padding:0.4em 0.6em;
				background-color: var(--color-h1-bg);
				color:#fff;
				margin-top:1em;
*/			}
			h2 {
				font-size: 36px;
/*				font-weight:500;
				color:var(--color-h2);
				margin-top:56px;
				margin-bottom:0.4em;
*/			}

		}
	}
}