/*
Theme Name: 	Trailblazer
Theme URI: 		http://odoson.com
Description: 	The totally nude Wordpress theme!
Version: 		1.0
Author: 		Robert Baumgartner
Author URI: 	http://odoson.com
Tags: 			trailblazer, naked, clean, basic
*/



/*** Sensible Defaults ***/

@import "css/reset.css";
@import "js/fancybox/jquery.fancybox.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) */

@media screen and (min-width: 700px) {
	.wf-loading {
		visibility: hidden;
		opacity: 0;
	}
	
	.wf-active, .wf-inactive {
		visibility: visible;
		opacity: 1;
		-webkit-transition: all 0.2s linear;
		   -moz-transition: all 0.2s linear;
			 -o-transition: all 0.2s linear;
			    transition: all 0.2s linear;
	}
}


/* 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: "myriad-pro-semi-condensed",sans-serif;
	font-size: 15px;
	color: #5e605a;
	line-height: 150%;
	height: 100%;
}


.wrap {
	width: 320px;
	margin: 0 auto;
	height: 100%;
}

.innerwrap {
	max-width: 1060px;
	width: 100%;
	margin: 0 auto;
}

@media screen and (min-width: 740px) {
	.wrap {
		width: 700px;
		margin: 0 auto;
		height: 100%;
	}
}

@media screen and (min-width: 900px) {
	.wrap {
		width: 100%;
		max-width: 2000px;
		margin: 0 auto;
		height: 100%;
	}
}

.header {
	padding: 30px 0 15px 0;
	position: relative;
}
	
	@media screen and (min-width: 900px) {
		.header {
			padding: 30px 20px 15px 20px;
		}
	}
	
	@media screen and (min-width: 1140px) {
		.header {
			padding: 30px 0 15px 90px;
		}
	}

.header h1 {
	display: block;
	float: left;
	width: 170px;
	height: 66px;
	background: url(css/img/logo.jpg) no-repeat center;
	background-size: 100% auto;
	margin-right: 20px;
	margin-left: 15px;
}

	.header h1 a {
		text-indent: -1000px;
		overflow: hidden;
		display: block;
		width: 100%;
		height: 100%;
		margin-bottom: 7px;
	}
	
	@media screen and (min-width: 740px) {
		.header h1 {
			width: 244px;
			height: 95px;
			margin-left: 0px;
		}
		
		.header h1 a {
			margin-bottom: 0;
		}
	}

.header .nav {
	display: block;
	float: right;
	text-transform: uppercase;
	border-top: 1px solid #000;
	padding-top: 5px;
	width: calc(100% - 211px);
	text-align: right;
	font-size: 13px;
	position: static;
	margin-top: 50px;
	padding-right: 10px;
}
	
	@media screen and (min-width: 740px) {
		.header .nav {
			width: calc(100% - 270px);
			padding-right: 10px;
			margin-top: 69px;
		}
	}
	
	.header .nav div {
		display: inline-block;
	}
	
	.header .nav ul {
		display: none;
	}
	
	.header .nav.open ul {
		display: block;
		position: absolute;
		left: 0;
		z-index: 999;
		background: #84847f;
		background: rgba(132,132,127, 0.9);
		width: 100%;
		text-align: left;
		color: #fff;
		margin-top: 20px;
	}
	
		.header .nav.open div {
			position: static;
		}
		
		.header .nav.open ul li {
			display: block;
		}
		
		.header .nav.open ul li a {
			padding: 5px 15px;
			border-left: 0;
			display: block;
		}
		
		.header .nav.open ul li ul {
			background: #ECE9E0;
			color: #5e605a;
			padding: 10px 0;
			font-weight: normal;
			position: relative;
			margin-top: 0;
		}
		
			.header .nav.open ul li ul a {
				font-weight: inherit;
			}
			
			.header .nav.open ul li.current-menu-item a {
				color: #fff;
			}
		
		@media screen and (min-width: 900px) {
			.header .nav {
				padding-right: 0;
			}
		}
		
		@media screen and (min-width: 1140px) {
			.header .nav {
				text-align: left;
				margin-top: 69px;
				padding-right: 0;
			}
			
			.header .nav ul {
				display: inline-block !important;
			}
			
			.header .nav ul li ul {
				display: none !important;
				position: absolute;
				text-align: left;
				z-index: 999;
				width: 200px;
				padding-top: 15px;
			}
			
				.header .nav ul li ul li {
					background: #84847f;
					background: rgba(132,132,127, 0.9);
					display: block;
					padding: 0;
				}
				
					.header .nav ul li ul li a {
						color: #fff;
						font-weight: normal;
						padding: 10px 15px !important;
						display: block;
					}
					
						.header .nav ul li ul li.current-menu-item a {
							color: #fff;
						}
			
			.header .nav ul li:hover ul {
				display: block !important;
				
			}
			
		}
	
		.header .nav ul li {
			display: inline-block;
		}
		
		.header .nav ul li a {
			text-decoration: none;
			font-weight: bold;
			letter-spacing: 0 px;
			padding: 0 12px;
			border-left: 1px solid #999;
		}
		
			.header .nav ul li.current-menu-item > a,
			.header .nav ul li.current-page-ancestor > a {
				color: #d41a24;
			}
		
			.header .nav:not(.open) ul li:first-child a {
				padding-left: 0;
				border-left: 0;
			}
		

.header .navToggle {
	display: inline-block;
	width: 38px;
	height: 28px;
	background: url(css/img/navToggle.png) no-repeat center;
	background-size: 50% 50%;
	text-indent: -1000px;
	overflow: hidden;
	margin-bottom: -8px;
	margin-left: 5 px;
	text-align: left;
	cursor: pointer;
}

	@media screen and (min-width: 1140px) {
		.header .navToggle {
			display: none !important;
		}
	}

.facebook {
	display: inline-block;
	width: 19px;
	height: 19px;
	background: url(css/img/facebook.png) no-repeat 0 0;
	text-indent: -1000px;
	overflow: hidden;
	margin-left: 5px;
	text-align: left;
}

.youtube {
	display: inline-block;
	width: 45px;
	height: 19px;
	background: url(css/img/youtube.png) no-repeat 0 0;
	text-indent: -1000px;
	overflow: hidden;
	margin-left: 15px;
	text-align: left;
}

.hero {
	height: 150px;
	background-size: cover;
	background-position: center;
	/* border-bottom: 3px solid #fff; */
	overflow: hidden;
}
	
	@media screen and (min-width: 740px) {
		.hero {
			height: 250px;
		}
	}
	
	@media screen and (min-width: 1140px) {
		.hero {
			height: 335px;
		}
	}
	
	@media screen and (min-width: 1500px) {
		.hero {
			height: 500px;
		}
	}
	
	.hero.animated .next,
	.hero.animated .prev {
		height: 55px;
		width: 32px;
		position: absolute;
		top: 50%;
		margin-top: -27px;
		z-index: 99;
		cursor: pointer;
		
		-webkit-transition: all 0.3s linear;
		-moz-transition: all 0.3s linear;
		-o-transition: all 0.3s linear;
		transition: all 0.3s linear;
	}
	
	.hero.animated .next {
		right: 0;
		background: url(css/img/weiter.png);
	}
	
	.hero.animated .prev {
		left: 0;
		background: url(css/img/zurueck.png);
	}
	
	.hero.animated .next:hover,
	.hero.animated .prev:hover {
		background-color: rgba(255,255,255,0.5);
	}
	
	.hero.animated {
		height: 120px;
	}
	
	@media screen and (min-width: 740px) {
		.hero.animated {
			height: 280px;
		}
	}
	
	@media screen and (min-width: 1140px) {
		.hero.animated {
			height: 475px;
		}
	}
	
	@media screen and (min-width: 1500px) {
		.hero.animated {
			height: 600px;
		}
	}
	
	.hero.animated .slide {
		height: 100%;
		width: 100%;
		background-color: #eee;
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: center;
		display: none;
		position: absolute;
		z-index: 9;
		top: 0;
		left: 0;
		
		-webkit-transition: all 7s linear;
		-moz-transition: all 7s linear;
		-o-transition: all 7s linear;
		transition: all 7s linear;
		
		-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	    transform: scale(1);
	}
	
	.hero.animated .slide.speed-up {
		-webkit-transition: all 0s linear;
		-moz-transition: all 0s linear;
		-o-transition: all 0s linear;
		transition: all 0s linear;
	}
	
	.hero.animated .slide.zoom-out {
		-webkit-transform: scale(1.2);
	    -ms-transform: scale(1.2);
	    transform: scale(1.2);
	}
	
	.hero.animated .slide a {
		display: block;
		height: 100%;
		width: 100%;
	}
	
	.hero.animated .slide.slide_elementbau{
		display: block;
	}
	
	.hero.animated .slide.slide_elementbau {
		background-image: url(css/img/start_elementbau.jpg);
	}
	
	.hero.animated .slide.slide_isofloc {
		background-image: url(css/img/start_isofloc.jpg);
	}
	
	.hero.animated .slide.slide_fassaden {
		background-image: url(css/img/start_fassaden.jpg);
	}
	
	.hero.animated .slide.slide_zimmerei {
		background-image: url(css/img/start_zimmerei.jpg);
	}
		
		.slide .slide-label {
			position: absolute;
			z-index: 1;
			pointer-events:none;
			
			-webkit-transition: all 7s linear;
			-moz-transition: all 7s linear;
			-o-transition: all 7s linear;
			transition: all 7s linear;
		
			-webkit-transform: scale(1);
		    -ms-transform: scale(1);
		    transform: scale(1);
		}
		
		.slide.slide_elementbau .slide-label {
			left: 30%;
			top: 24%;
		}
		
		.slide.slide_zimmerei .slide-label {
			left: 15%;
			top: 26%;
		}
		
		.slide.slide_isofloc .slide-label {
			left: 27%;
			top: 60%;
		}
		
		.slide.slide_fassaden .slide-label {
			left: 10%;
			top: 55%;
		}
		
		@media screen and (min-width: 740px) {
			.slide.slide_elementbau .slide-label {
				left: 46%;
				top: 31%;
			}
			
			.slide.slide_zimmerei .slide-label {
				left: 40%;
				top: 26%;
			}
			
			.slide.slide_isofloc .slide-label {
				left: 45%;
				top: 60%;
			}
			
			.slide.slide_fassaden .slide-label {
				left: 29%;
				top: 55%;
			}
		}
		
		@media screen and (min-width: 1140px) {
			.slide.slide_elementbau .slide-label {
				left: 54%;
				top: 31%;
			}
			
			.slide.slide_zimmerei .slide-label {
				left: 46%;
				top: 26%;
			}
			
			.slide.slide_isofloc .slide-label {
				left: 55%;
				top: 60%;
			}
			
			.slide.slide_fassaden .slide-label {
				left: 37%;
				top: 55%;
			}
		}
		
		.slide.animate .slide-label {
			-webkit-transform: scale(0.8333333);
		    -ms-transform: scale(0.8333333);
		    transform: scale(0.8333333);
		}
		
		.slide.zoom-out .slide-label {
			-webkit-transform: scale(0.8333333);
		    -ms-transform: scale(0.8333333);
		    transform: scale(0.8333333);
		}
		
		.slide.zoom-out.animate .slide-label {
			-webkit-transform: scale(1);
		    -ms-transform: scale(1);
		    transform: scale(1);
		}
	
	.hero.animated .slide.animate {
		-webkit-transform: scale(1.2);
	    -ms-transform: scale(1.2);
	    transform: scale(1.2);
	}
	
	.hero.animated .slide.zoom-out.animate {
		-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	    transform: scale(1);
	}
	
	.hero.animated .slide.move-up.animate { margin-top: -3%; }
	.hero.animated .slide.move-down.animate { margin-top: 3%; }
	.hero.animated .slide.move-left.animate { margin-left: -10%; }
	.hero.animated .slide.move-right.animate { margin-left: 10%; }

	
	.content {
		background: #E7E4E0;
		padding: 20px 15px 65px 15px;
	}
	
	@media screen and (min-width: 740px) {
		.content {
			background: #E7E4E0 url(css/img/bg.png) no-repeat top right;
			background-size: 100% auto;
			padding: 20px 40px 65px 20px;
			min-height: calc(100% - 525px);
		}
	}
	
	@media screen and (min-width: 900px) {
		.content {
			padding: 35px 20px 90px 20px;
			min-height: calc(100% - 515px);
		}
	}
	
	@media screen and (min-width: 1140px) {
		.content {
			padding: 35px 90px 50px 90px;
			min-height: calc(100% - 520px);
		}
	}
	
	@media screen and (min-width: 1500px) {
		.content {
			padding: 35px 90px 50px 90px;
			min-height: calc(100% - 682px);
		}
	}

	.content h2 {
		font-size: 1.8em;
		text-transform: uppercase;
		font-weight: bold;
		margin-bottom: 0.5em;
	}
	
	.content h3 {
		color: #d41a24;
		margin-bottom: 0.25em;
		font-weight: bold;
	}
	
	.content p {
		margin-bottom: 1em;
	}
	
	.content .main {
		width: 100%;
	} 
		
	@media screen and (min-width: 740px) {
		.content .main {
			width: 97%;
		}
	}
	
	.content .sidebar {
		margin-top: 20px;
		background: #fff;
		background: rgba(255,255,255,0.6);
		padding: 20px 15px;
		width: 290px;
		clear: both;
		margin-bottom: 35px;
	}
	
	.content .sidebar iframe {
		width: 290px;
		height: 170px;
		margin: -20px 0 0 -15px;
	}
	
	.content .main.right {
		text-align: center;
		margin: 20px 0;
	}
	
	.content .main img {
		max-width: 100%;
		height: auto;
	}
	
	@media screen and (min-width: 740px) {
		
	}
	
	@media screen and (min-width: 900px) {
		.content .main {
			width: calc(100% - 350px);
			float: left;
		}
		
		.content .main.right {
			float: right;
			text-align: center;
			margin: 20px 0;
		}
		
		.content .sidebar {
			float: right;
			margin-top: 0;
			clear: none;
		}
		
		.content .sidebar.left {
			float: left;
			margin-top: 10px;
		}
	}
	
	@media screen and (min-width: 1140px) {
		.content .main {
			width: 610px;
		}
		
	}


.content ol,
.content ul {
	padding-left: 15px;
}

.content ol li {
	list-style-type: decimal;
	margin-bottom: 0.25em;
}

.content ul li {
	list-style-type: square;
	margin-bottom: 0.25em;
}

.person {
	width: 100%;
	margin: 0 20px 20px 0;
	float: left;
	background: #F2F0EB;
}
	
	.person-image {
		height: 200px;
		background-size: cover;
		background-position: center;
		
	}
	
	.person-content {
		padding: 10px 10px 0 10px;
		height: 110px;
	}

	@media screen and (min-width: 740px) {
		.person {
			width: 50%;
			width: calc(50% - 20px);
		}
	}

.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	line-height: 100%;
	font-size: 14px;
}

	.footer-inner {
		background: #E7E4E0;
		padding: 10px 20px;
		border-top: 1px solid #fff;
	}
	
	@media screen and (min-width: 900px) {
		.footer-inner {
			padding: 10px 20px;
		}
	}
	
	@media screen and (min-width: 1140px) {
		.footer-inner {
			padding: 10px 90px;
		}
	}

.gallery br {
	display: none !important;
}
.gallery img {
	border: 0 !important;
	width: 100%;
	height: auto;
}

.gallery .wp-caption-text {
	display: none;
}

.gallery-item a {
	display: block;
	line-height: 10%;
}

.gallery-item {
	margin: 0 0 10px 0 !important;
	width: 50% !important;
	width: calc(50% - 5px) !important;
	height: 100px;
	overflow: hidden;
}
	
	.gallery-item img {
		margin-top: -20px;
	}
	
	.gallery-item:nth-of-type(odd) {
		margin-right: 5px !important;
	}
	
	.gallery-item:nth-of-type(even) {
		margin-left: 5px !important;
	}
	
	@media screen and (min-width: 740px) {
		.gallery-item,
		.gallery-item:nth-of-type(even),
		.gallery-item:nth-of-type(odd) {
			margin: 0 20px 20px 0 !important;
			width: 25% !important;
			width: calc(25% - 20px) !important;
		}	
	}

.field-wrap {
	background: #fff;
	background: rgba(255,255,255,0.6);
	margin-bottom: 5px !important;
}

	.textarea-wrap {
		vertical-align: top;
	}
	
	.submit-wrap {
		background: transparent;
	}
	
	.field-wrap label {
		width: 100%;
		padding: 10px 10px 3px 10px;
		display: inline-block !important;
	}
	
	.field-wrap input[type=text] {
		font: inherit;
		padding: 5px 10px;
		outline: none;
		border: 0;
		background: transparent;
		width: 100%;
		-webkit-appearance: none;
		margin-left: 0 !important;
	}
	
	.field-wrap textarea {
		font: inherit;
		padding: 5px 10px;
		outline: none;
		border: 0;
		background: transparent;
		width: 100% !important;
		height: 100px !important;
		-webkit-appearance: none;
		margin-left: 0 !important;
	}
	
	@media screen and (min-width: 740px) {
		.field-wrap label {
			width: 20%;
			padding: 10px 15px;
		}
		
		.field-wrap input[type=text],
		.field-wrap textarea {
			width: 78%;
			padding: 10px;
		}
	}
	
	.submit-wrap input {
		border: 0;
		background: #fff;
		background: rgba(255,255,255,0.6);
		padding: 10px 30px;
		font: inherit;
		-webkit-appearance: none;
	}

.imprint {
	display: none;
	position: absolute;
	font-size: 13px;
	color: #8c8c8c;
	bottom: 10px;
	right: 10px;
}

@media screen and (min-width: 740px) {
	.imprint {
		display: block;
	}
}