@keyframes sidescroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}

html, body {
	--lightcolor: #FFF;
	--darkcolor: #000;
	--highlightcolor: #A00;
	--maxwidth: 1000px;
	--gutter: 20px;

	margin: 0px;
	padding: 0px;
	background: var(--lightcolor);
	color: var(--darkcolor);
	font-family: arial, sans-serif;
	font-size: 16px;
}

header {

	#toggle_menu {
		display: block;
		width: 25px;
		border-top: 4px solid #000;
		border-bottom: 4px solid #000;
		background: #FFF;
		padding: 3px 0px;
		margin: var(--gutter) 0px;
		&:before {
			content: " ";
			font-size: 0px;
			display: block;
			height: 4px;
			background: #000;
		}
	}

	nav {
		padding: 0px var(--gutter);
		ul {
			display: none;
			max-width: var(--maxwidth);
			margin: 0px auto;
			padding: 0px;
			li {
				margin: var(--gutter) 0px;
				padding: 0px;
				list-style: none;
				a {
					&,
					&:link,
					&:visited,
					&:hover,
					&:active {
						color: var(--darkcolor);
						text-decoration: none;
						font-size: 20px;
						font-weight: bolder;
					}
					&:hover {
						color: var(--highlightcolor);
					}
				}
				&.active {
					a {
						&,
						&:link,
						&:visited,
						&:hover,
						&:active {
							color: var(--highlightcolor);
						}
					}
				}
			}
		}

		@media (min-width: 500px) {
			#toggle_menu {
				display: none;
			}
			ul {
				display: block;
				text-align: right;
				li {
					display: inline-block;
					text-align: left;
					margin-left: var(--gutter);
					&:first-child {
						float: left;
						margin-left: 0px;
					}
				}
			}
		}
		&.open {
			#toggle_menu {
				display: none;
			}
			ul {
				display: block;
				li {
					padding: .75em 0px;
				}
			}
		}
	}

	#banner {
		max-width: 100%;
		min-height: 200px;
		background-image: url('/assets/banner.jpg');
		background-size: cover;
		color: var(--lightcolor);
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0px var(--gutter);
		@media (min-width: 1000px) {
			padding: 0px;
		}
		h1, h2 {
			text-shadow: 1px 1px 2px var(--darkcolor);
			line-height: 1.25em;
			box-sizing: border-box;
			margin: 0px;
			@media (min-width: 500px) {
				padding: 0px 40% 0px 0px;
			}
			@media (min-width: 1000px) {
				margin: 0px auto;
				width: var(--maxwidth);
			}
		}
		h1 {
			font-size: 40px;
			font-weight: 600;
		}
		h2 {
			font-size: 30px;
			font-weight: 200;
		}
	}
}
main {
	max-width: var(--maxwidth);
	margin: 0px auto var(--gutter) auto;
	position: relative;
	padding: 0px var(--gutter);
	@media (min-width: 1000px) {
		padding: 0px;
	}
	.anchor-img {
		max-width: 80%;
		margin: var(--gutter) 10%;
		border: var(--gutter) solid var(--lightcolor);
		box-shadow: 0px 0px 8px rgba(0,0,0, .5);
		box-sizing: border-box;
		border-radius: calc(var(--gutter) / 2);
		@media (min-width: 500px) {
			position: absolute;
			top: -150px;
			right: var(--gutter);
			width: 35%;
			margin: 0px;
		}
		@media (min-width: 1000px) {
			right: 0px;
		}
	}
	article {
		box-sizing: border-box;
		margin-bottom: calc(var(--gutter));
		@media (min-width: 500px) {
			width: 60%;
			min-height: 350px;
		}
		h3, h4, p, ul, dl, form {
			margin: var(--gutter) 0px;
		}
		h3 {
			font-size: 20px;
			font-weight: bolder;
			line-height: 1em;
		}
		h4 {
			font-size: 16px;
			font-weight: bolder;
			line-height: 1em;
		}
		p {
			padding: 0px;
			&.center {
				text-align: center;
			}
		}
		a {
			&,
			&:link,
			&:visited,
			&:hover,
			&:active {
				text-decoration: underline;
				color: var(--highlightcolor);
			}
			&:hover {
				text-decoration: none;
			}
			&.button {
				display: inline-block;
				padding: var(--gutter);
				margin: 0px;
				border-radius: calc(var(--gutter) / 2);
				border: 1px solid var(--highlightcolor);
				font-weight:bolder;
				&,
				&:link,
				&:visited,
				&:hover,
				&:active {
					text-decoration: none;
					background: var(--highlightcolor);
					color: var(--lightcolor);
				}
				&:hover {
					background: var(--lightcolor);
					color: var(--highlightcolor);
				}
			}
		}

		iframe.yt {
			border-radius: calc(var(--gutter) / 2);
			width: 100%;
			height: 210px;
			@media (min-width: 500px) {
				height: 340px;
			}
		}

		dl {
			dt {
				margin: calc(var(--gutter) / 2) 0px;
				padding: 0px;
				font-weight: bolder;
			}
			dd {
				margin: 0px 0px 0px calc(var(--gutter));
				padding: 0px;
			}
			&.accordion {
				> dt {
					margin: 0px;
					margin-bottom: var(--gutter);
					font-size: 20px;
					font-weight: bolder;
					cursor: pointer;
					&:before {
						font-size: 0px;
						content: " ";
						display: inline-block;
						border-top: calc(var(--gutter) / 3) solid var(--lightcolor);
						border-right: calc(var(--gutter) / 2) solid var(--lightcolor);
						border-bottom: calc(var(--gutter) / 3) solid var(--lightcolor);
						border-left: calc(var(--gutter) / 2) solid var(--darkcolor);
						margin-right: calc(var(--gutter) / 2);
					}
					&.open {
						+ dd {
							display: block;
						}
						&:before {
							border-left: calc(var(--gutter) / 3) solid var(--lightcolor);
							border-top: calc(var(--gutter) / 2) solid var(--darkcolor);
							border-right: calc(var(--gutter) / 3) solid var(--lightcolor);
							border-bottom: 0px solid var(--lightcolor);
							margin-right: calc(var(--gutter) * 5 / 6);
						}
					}
				}
				> dd {
					display: none;
					margin: var(--gutter);
					margin-left: calc(var(--gutter) * 3 / 2);
					margin-right: 0px;
					padding: 0px;
				}
			}
		}

		&#contact {
			padding: calc(var(--gutter) / 2) var(--gutter);
			border-radius: calc(var(--gutter) / 2);
			background: #DDD;
			form {
				.filter {
					display: none;
				}
				ul, li {
					margin: calc(var(--gutter) / 2) 0px;
					padding: 0px;
					list-style: none;
				}
				input, textarea {
					padding: calc(var(--gutter) / 2);
					font-size: 16px;
					font-family: arial, sans-serif;
					width: 100%;
					box-sizing: border-box;
					border-radius: calc(var(--gutter) / 2);
					border: 1px solid;
				}
				input[type="submit"] {
					padding: var(--gutter);
					margin: 0px;
					border: 1px solid var(--highlightcolor);
					background: var(--highlightcolor);
					color: var(--lightcolor);
					font-weight:bolder;
					cursor: pointer;
					&:hover {
						background: var(--lightcolor);
						color: var(--highlightcolor);
					}
				}
			}
		}
	}
}
footer {
	margin: var(--gutter) auto;
	padding: 0px var(--gutter);
	max-width: var(--maxwidth);
	overflow-x: hidden;
	white-space: nowrap;
	position:relative;
	@media (min-width: 500px) {
		&:before {
			content: "";
			display: block;
			position: absolute;
			top: 0px;
			bottom: 0px;
			left: 0px;
			width: 30%;
			background: linear-gradient(
			  to right,
			  rgba(255,255,255,100) 1%,
			  rgba(255,255,255,0) 100%
			);
			z-index: 99;
		}
		&:after {
			content: "";
			display: block;
			position: absolute;
			top: 0px;
			bottom: 0px;
			right: 0px;
			width: 30%;
			background: linear-gradient(
			  to left,
			  rgba(255,255,255,100) 1%,
			  rgba(255,255,255,0) 100%
			);
			z-index: 99;
		}
		&:hover ul.testimonials {
			animation-play-state: paused;
		}
	}
	ul.testimonials {

		display: inline-block;
		white-space: nowrap;
		will-change: transform; /* hint to the browser what will animate */
		animation: sidescroll 30s linear infinite;
		margin: 0px;
		padding: 0px;

		li {
			display: inline-block;
			white-space: wrap;
			vertical-align: top;
			list-style: none;
			width: 320px;
			margin: 0px var(--gutter) 0px 0px;
			padding: var(--gutter);
			// border: 1px solid var(--darkcolor);
			border-radius: calc(var(--gutter) / 2);

			background: #DDD;
			// color: var(--lightcolor);

			figure {
				margin: 0px;
				padding: 0px;
				blockquote {
					margin: 0px;
					padding: 0px;
					font-size: 20px;
					font-weight: 100;
				}
				figcaption {
					margin-top: var(--gutter);
					cite {
						display: block;
						font-style: italic;
						font-weight: bolder;
					}
					span {
						display: block;
						font-style: italic;
					}
				}
			}
		}
	}
}