/*
Theme Name: 	Trailblazer
Description: 	The totally nude Wordpress theme!
Version: 		1.0
Author: 		Robert Baumgartner
*/



/*** Sensible Defaults ***/

@import "css/reset.css";
@import "js/lightbox/css/lightbox.min.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
/*::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; } */

* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	   -moz-font-smoothing: antialiased;
	        font-smoothing: antialiased;
}

/* Typekit */
/* These classes make sure that no FOUC occurs.
 * All contents remain hidden, until the fonts are loaded (or until loading fails) */

.wf-loading {
	visibility: hidden;
	opacity: 0;
}

.wf-active, .wf-inactive {
	visibility: visible;
	opacity: 1;
	-webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
		 -o-transition: all 0.2s ease-in-out;
		    transition: all 0.2s ease-in-out;
}


/* Helper Classes */

.clear { clear: both; }
strong { font-weight: bold; }
em { font-style: italic; }
a, a:link, a:visited, a:hover, a:focus { color: inherit; }

html, body {
	font-family: "proxima-nova", sans-serif;
	font-size: 14px;
	line-height: 135%;
	color: #766726;
	background: #eee;
}

.pageWrap {
	width: 100%;
	max-width: 1234px;
	margin: 0 auto;
	background: #fff;
	min-height: 100vh;
	padding-bottom: 0;
}

	@media (min-width: 800px) {
		.pageWrap {
			padding-bottom: 120px;
		}
	}

.wrap {
	width: 100%;
	max-width: 1030px;
	margin: 0 auto;
	padding: 0 15px;
}

	@media (min-width: 500px) and (max-width: 799px) {
		.wrap {
			padding: 0 25px;
			max-width: 1050px;
		}
	}

.hero {
	height: 100px;
	width: 100%;
	background: #eee url(css/img/header.jpg) no-repeat top left;
	background-size: cover;
}

nav {
	background: #a86924;
	color: #fff;
	height: 44px;
	font-size: 1.285rem;
	line-height: 100%;
}

	nav .wrap {
		position: relative;
		height: 44px;
	}

	nav .navToggle {
		display: block;
		width: 44px;
		height: 44px;
		overflow: hidden;
		position: absolute;
		left: 15px;
		padding-top: 9px;
		display: block;
		cursor: pointer;
	}

		@media (min-width: 900px) {
			nav .navToggle {
				display: none;
			}
		}

		@media (min-width: 500px) and (max-width: 799px) {
			nav .navToggle {
				left: 25px;
			}
		}

		nav .navToggle span {
			width: 25px;
			height: 2px;
			background: #fff;
			display: block;
			margin: 5px 0;
		}

	nav .homeLink {
		display: block;
		width: 30px;
		height: 30px;
		background: url(css/img/home.png) no-repeat center right;
		background-size: auto;
		top: 50%;
		right: 15px;
		position: absolute;
		transform: translateY(-50%);
	}

	@media (min-width: 500px) and (max-width: 799px) {
		nav .homeLink {
			right: 25px;
		}
	}

	nav ul {
		display: none;
		flex-flow: row wrap;
	}

		@media (max-width: 899px) {
			.open nav ul {
				display: flex;
			}

			.open nav ul ul {
				display: none;
			}

				.open nav ul li.open-submenu ul,
				.open nav ul li.current_page_ancestor ul {
					display: block;
					position: relative;
					top: 0;
					left: 0;
					width: 100%;
					background: #b7aca0;
					font-size: 1.1rem;
					padding: 15px 0;
				}

					.open nav ul li.open-submenu ul li a,
					.open nav ul li.current_page_ancestor ul li a {
						display: block;
						padding: 4px 15px;
					}

			.open nav ul {
				display: block;
				position: absolute;
				top: 45px;
				width: 100%;
				width: calc(100% + 30px);
				z-index: 9;
				background: #a86924;
				left: -15px;
				padding: 10px 0;
			}

			.open nav ul li a {
				display: block;
				padding: 8px 15px;
			}

			.open nav a {
				text-decoration: none;
			}
		}

		@media (min-width: 500px) and (max-width: 799px) {
			.open nav ul {
				left: -25px;
				width: calc(100% + 50px);
			}

			.open nav ul li a {
				padding: 8px 25px;
			}

			.open nav ul li.open-submenu ul li a,
			.open nav ul li.current_page_ancestor ul li a {
				display: block;
				padding: 4px 25px;
			}
		}

		@media (min-width: 900px) {
			nav ul {
				display: flex;
			}

			nav ul li {
				margin-right: 3rem;
				line-height: 44px;
			}

				nav ul li:nth-last-child(1) {
					margin-right: 0;
				}

				nav ul li a {
					text-decoration: none;
				}

				nav ul ul {
					position: absolute;
					display: block;
					background: #b7aca0;
					color: #fff;
					z-index: 9;
					left: -20px;
					font-size: 1.1rem;
					padding: 10px 0;
					min-width: 250px;
					display: none;
				}

					nav ul li:hover ul {
						display: block;
					}

					nav ul ul li a {
						padding: 3px 20px;
						display: block;
						line-height: 120%;
					}
		}


h1,
h2 {
	color: #a86924;
	font-size: 2rem;
	line-height: 110%;
	margin: 2rem 0 1rem 0;
	font-weight: bold;
}

	* > h1,
	* > h2 {
		margin-top: 0;
	}

	p {
		margin-bottom: 1.3em;
	}

	.main img {
		max-width: 100%;
		height: auto;
	}

	.main a {
		color: #a86924;
		text-decoration: underline;
	}

	.main ul {
		list-style-type: disc;
		padding-left: 20px;
		margin: 1.3rem 0;
	}

	.main ol {
		list-style-type: decimal;
		padding-left: 1.5rem;
		margin: 1.3rem 0;
	}

.maincontent {
	min-height: calc(100vh - 144px - 140px);
}

	.maincontent .wrap.flex {
		display: flex;
		flex-flow: row wrap-reverse;
	}

		@media (min-width: 800px) {
			.maincontent .wrap.flex {
				flex-flow: row wrap;
			}
		}

	.maincontent::before {
		content: "";
		position: absolute;
		width: 100%;
		background: #f6f5ec;
		right: 0;
		height: 100%;
	}

		@media (min-width: 800px) {
			.maincontent::before {
				width: 65%;
			}
		}

	.maincontent .sidebar {
		width: 100%;
		color: #766726;
		padding: 2.5rem 0;
		padding-bottom: 5rem;
	}

		@media (min-width: 800px) {
			.maincontent .sidebar {
				width: 35%;
				padding: 5.6rem 2.5rem 2.5rem 0;
			}
		}

		@media (min-width: 1000px) {
			.maincontent .sidebar {
				width: 34%;
			}
		}

		.sidebar .tagline {
			color: #a86924;
			font-size: 1.35rem;
			line-height: 150%;
			margin-top: 2.5rem;
		}

	.maincontent .main {
		width: 100%;
		padding: 2.5rem 0;
	}

		@media (min-width: 800px) {
			.maincontent .main {
				flex: 1;
				padding: 2.5rem;
				width: auto;
			}
		}

	.list-element {
		border-top: 2px dotted #a86924;
		padding: 1rem 0;
		display: flex;
		flex-flow: row wrap;
	}

		.list-element .image {
			width: 33.33%;
			padding-right: 1rem;
		}

		.list-element .text {
			width: 66.66%;
		}

	.list .list-element:nth-last-child(1) {
		border-bottom: 2px dotted #a86924;
	}

	form {
		max-width: 400px;
	}

	form input[type='submit'],
	form input[type='text'],
	form input[type='email'],
	form textarea {
		font: inherit;
		outline: none;
		appearance: none;
		-webkit-appearance: none;
		border-radius: 0;
		background: #e0dad3;
		border: 0;
		margin-bottom: 5px;
		color: #a86924;
		padding: 0.5rem 0.8rem;
		width: 100%;
	}

		form textarea {
			height: 6rem;
		}


	form .wpcf7-recaptcha {
		margin: 1rem 0;
	}

	form input[type='submit'] {
		background: #a86924;
		color: #fff;
		color: #fff;
		font-weight: bold;
		border-radius: 20px;
		width: auto;
		padding: 0.3rem 1.6rem;
	}


footer {
	background: #b7aca0;
	padding: 2rem 0 3rem;
	color: #fff;
	width: 100%;
}

	@media (min-width: 800px) {
		footer {
			position: absolute;
			bottom: 0;
		}
	}

	footer .wrap {
		display: flex;
		flex-flow: row wrap;
		width: 100%;
	}

	.footer_area {
		width: 100%;
	}

		.footer_area p {
			margin-bottom: 0;
		}

		.footer_area:nth-last-child(1) {
			margin-top: 1.35em;
			opacity: 0.8;
		}

	@media (min-width: 700px) {
		.footer_area {
			width: 25%;
			padding-right: 1rem;
		}
	}

	@media (min-width: 1000px) {
		.footer_area {
			width: 25%;
			padding-right: 2rem;
		}
	}