/* HTML5 ✰ Boilerplate
 * ==|== normalize ==========================================================
 */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {
	display:block
}

audio,canvas,video {
	display:inline-block;
	*display:inline;
	*zoom:1
}

audio:not([controls]) {
	display:none
}

[hidden] {
	display:none
}

html {
	font-size:100%;
	overflow-y:scroll;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%
}

body {
	margin:0;
	font-size:13px;
	line-height:1.231
}

body,button,input,select,textarea {
	font-family: 'Arimo', sans-serif;
	color:#222
}

::-moz-selection {
	background:#fe57a1;
	color:#fff;
	text-shadow:none
}

::selection {
	background:#fe57a1;
	color:#fff;
	text-shadow:none
}

a {
	color:#d0d0d0
}

a:visited {
	color:#d0d0d0
}

a:hover {
	color:#000
}

a:focus {
	outline:thin dotted
}

a:hover,a:active {
	outline:0
}

abbr[title] {
	border-bottom:1px dotted
}

b,strong {
	font-weight:700
}

blockquote {
	margin:1em 40px
}

dfn {
	font-style:italic
}

hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #ccc;
	margin:1em 0;
	padding:0
}

ins {
	background:#ff9;
	color:#000;
	text-decoration:none
}

mark {
	background:#ff0;
	color:#000;
	font-style:italic;
	font-weight:700
}

pre,code,kbd,samp {
	font-family:monospace,monospace;
	_font-family:'courier new',monospace;
	font-size:1em
}

pre {
	white-space:pre;
	white-space:pre-wrap;
	word-wrap:break-word
}

q {
	quotes:none
}

q:before,q:after {
	content:"";
	content:none
}

small {
	font-size:85%
}

sub,sup {
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline
}

sup {
	top:-.5em
}

sub {
	bottom:-.25em
}

ul,ol {
	margin:1em 0;
	padding:0 0 0 40px
}

dd {
	margin:0 0 0 40px
}

nav ul,nav ol {
	list-style:none;
	list-style-image:none;
	margin:0;
	padding:0
}

img {
	border:0;
	-ms-interpolation-mode:bicubic;
	vertical-align:middle
}

svg:not(:root) {
	overflow:hidden
}

figure {
	margin:0
}

form {
	margin:0
}

fieldset {
	border:0;
	margin:0;
	padding:0
}

label {
	cursor:pointer
}

legend {
	border:0;
	*margin-left:-7px;
	padding:0
}

button,input,select,textarea {
	font-size:100%;
	margin:0;
	vertical-align:baseline;
	*vertical-align:middle
}

button,input {
	line-height:normal;
	*overflow:visible
}

table button,table input {
	*overflow:auto
}

button,input[type="button"],input[type="reset"],input[type="submit"] {
	cursor:pointer;
	-webkit-appearance:button
}

input[type="checkbox"],input[type="radio"] {
	box-sizing:border-box
}

input[type="search"] {
	-webkit-appearance:textfield;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
	box-sizing:content-box
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance:none
}

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

textarea {
	overflow:auto;
	vertical-align:top;
	resize:vertical
}

input:valid,textarea:valid {
}

input:invalid,textarea:invalid {
	background-color:#f0dddd
}

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

td {
	vertical-align:top
}

/* ==|== primary styles =====================================================
   Author: Marc Bickel
   ========================================================================== */
/*
@font-face {
	font-family:GothamNarrowBook;
	src:url(../fonts/GothamNarrow-Book.otf)
}

@font-face {
	font-family:GothamNarrowLight;
	src:url(../fonts/GothamNarrow-Light.otf)
}
*/

	
body {
	font-family: 'Arimo', sans-serif;
	font-weight: 300;
	font-size:13px;
	line-height:20px;
	color:#d0d0d0;
	-khtml-user-select: none;
	-moz-user-select:none;
	background-color: #fff;
}

header {
	max-width: 1321px;
	min-width: 850px;
	height: 40px;
	margin: 0 auto;
	margin-top:40px;
	margin-left:50px;
	
}

#headLeft {
	float: left;	
}

#headRight {
	float: right;
	margin-right: 76px;
}

h1 {
	font-family: 'Arimo', sans-serif;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height:16px;
	margin:0;
	color:#000;
	font-size:14px
}

h2 {
	font-family: 'Arimo', sans-serif;
	color:#d0d0d0;
	font-weight: 300;
	font-size:13px;
	letter-spacing:.08em;
	margin:0;
}

h3 {
	font-family: 'Arimo', sans-serif;
	color:#d0d0d0;
	font-weight: 300;
	font-size:13px;
	letter-spacing:.1em;
	margin:0;
	line-height: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
}

a {
	text-decoration:none;
}


img {
	display:none
}

.spinner {
	width: 24px;
	height: 24px;
	background: url(images/ajax-loader.gif) top left no-repeat;
	z-index: 9999;
	position: absolute;
	left: 50px;
	top: 85px;
}

/*navigation*/
nav {
	text-align: right;
}

nav li {
	color: #000!important;
	text-decoration: underline;
	font-family: 'Arimo', sans-serif;
	font-weight: 300;
	letter-spacing: 0.08em;
	font-size: 13px;
	line-height: 13px;
}

#changeableContent {
	max-width: 1321px; 	
	
}

/* main container */
#main {
	max-width: 1321px;
	min-width: 650px;
	margin: 0 auto;
	margin-left:50px;
	margin-top:41px;
}


.teaser {
	margin:0px;
	margin-bottom: 26px;
	float:left;
	background-color:#fff;
	overflow: hidden;
}

.teaser h1 {
	font-size: 12px;
	line-height: 12px;
	color: #000;
	margin: 0px;
	margin-top: 14px;
}

.teaser p {
	font-size: 11px;
	line-height: 14px;
	color: #a9a9a9;
	margin: 0px;
	letter-spacing: 0.04em;
}

.scrollContent {
	position:relative;
	z-index:1;
	top:0px;
	left:0px;
}

.scrollContent img {
	float: left;
}

.textContent {
	position: relative;
	top: 8px;
	display: none;
}

.teaserOverlay {
	position: absolute;
	z-index: 2;
	top: 0px;
	background-color: #fff;
	width: 190px;
	height: 330px;
	display: none;
}

#teaserClickArea {
	position: absolute;
	z-index: 999;
	top: 0px;
	cursor: pointer;
}
/*Strecken Container */


#streckenContainer {
	height:490px;
	clear:both;
	margin-left:50px;
	margin-top:5px;
	float:left;
}

#streckenContainer h1, #streckenContainer h3 {
	display: none;
}

#streckenContainer h1 {
	font-size: 12px;
	line-height: 12px;	
	color:#d0d0d0;
	font-weight: normal;
}

#streckenContainer h3 {
	font-size: 12px;
	padding: 0px;
	margin-top: 0px;
	letter-spacing: 0.04em;
}

#streckenContainer .viewport {
	width:100%;
	height:490px;
	overflow:hidden;
	position:relative
}

#streckenContainer .overview {
	width:100%;
	position:absolute;
	left:0;
	top:0;
	float:left;
}

#streckenContainer .thumb .end,#streckenContainer .thumb {
	background-color:#000
}

#streckenContainer .scrollbar {
	position:absolute;
	right:0;
	top:0;
	width:15px;
}

#streckenContainer .track {
	background-color:#fff;
	height:100%;
	width:13px;
	position:relative;
	padding:0 1px
}

#streckenContainer .thumb {
	height:20px;
	width:13px;
	cursor:pointer;
	overflow:hidden;
	position:absolute;
	top:0
}

#streckenContainer .thumb .end {
	overflow:hidden;
	height:5px;
	width:13px
}

#streckenContainer .disable {
	display:none
}

#streckenContainer img {
	float:left
}

.imageContainer {
	position: relative;
	float:left;
	margin-bottom:15px;
	margin-right: 15px;
	overflow: hidden;
}

.imageContainerOverlay {
	position: absolute;
	z-index: 2;
	top: 0px;
	background-color: #fff;
	width: 100%;
	height: 100%;
}

#right {
	position:absolute;
	height:490px;
	float:left;
	display: none;
}

#xBtn, #xBtnInfo {
	background-image: url(images/xBtn.png);
	width: 24px;
	height: 26px;
	cursor: pointer;
	margin-top: 1px;
}


#xBtnInfo {
	margin-left: 80px;	
	margin-top: -5px;
}
#upArrow {
	position: absolute;
	bottom: 30px;
	width: 26px;
	height: 13px;
	background-image: url(images/arrow_up.png);
	cursor: pointer;
	display: none;
	
}

#upArrow:hover {
	background-image: url(images/arrow_up_bl.png);
}

#downArrow {
	position: absolute;
	bottom: -1px;
	width: 26px;
	height: 13px;
	background-image: url(images/arrow_down.png);
	margin-top: 10px;
	cursor: pointer;
	display: none;
}

#downArrow:hover {
	background-image: url(images/arrow_down_bl.png);
}

/**** INFO ****/
#infoContainer {
	width:500px;
	height:700px;
	clear:both;
	margin-left:50px;
	margin-top:24px;
	float:left;}

/**** CONTACT ****/
#contactContainer {
	width:250px;
	height:430px;
	clear:both;
	margin-left:50px;
	margin-top:41px;
	float:left;
}

#contactContainer h1{
	font-size: 20px;
	
}

#contactContainer h2 {
	font-family: 'Arimo', sans-serif;
	font-weight: 300;
	margin-top: 20px;
	font-size: 20px;
	color: #d0d0d0;
	letter-spacing: 0;
}

#contactContainer a {
	color: #000;
}

#contactContainer a:hover {
	color: #d0d0d0;
}

#portfolio, #contact, #info {
	width: 100px;
	cursor: pointer;
	color: #d0d0d0;
}

#portfolio:hover, #contact:hover, #info:hover {
	color: #000;
}

.viewport {
	position: relative;
	overflow: hidden;
}

#infoOverlay {
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	width: 500px;
	height: 800px;
	background-color: #fff;
	
}

#infoContainer a {
	color: #000;
}

/**** Transitions ****/
.masonry,.masonry .masonry-brick {
	-webkit-transition-duration:.7s;
	-moz-transition-duration:.7s;
	-o-transition-duration:.7s;
	transition-duration:.7s
}

.masonry {
	-webkit-transition-property:height,width;
	-moz-transition-property:height,width;
	-o-transition-property:height,width;
	transition-property:height,width
}

.masonry .masonry-brick {
	-webkit-transition-property:left,right,top;
	-moz-transition-property:left,right,top;
	-o-transition-property:left,right,top;
	transition-property:left,right,top
}

/* ==|== non-semantic helper classes ======================================== */
.ir {
	display:block;
	border:0;
	text-indent:-999em;
	overflow:hidden;
	background-color:transparent;
	background-repeat:no-repeat;
	text-align:left;
	direction:ltr
}

.ir br {
	display:none
}

.hidden {
	display:none!important;
	visibility:hidden
}

.visuallyhidden {
	border:0;
	clip:rect(0 0 0 0);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px
}

.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {
	clip:auto;
	height:auto;
	margin:0;
	overflow:visible;
	position:static;
	width:auto
}

.invisible {
	visibility:hidden
}

.clearfix:before,.clearfix:after {
	content:"";
	display:table
}

.clearfix:after {
	clear:both
}

.clearfix {
	zoom:1
}

/* ==|== media queries ====================================================== */
@media only screen and (max-device-width: 480px) {

	.viewport {
		width: 480px;	
	}
	
	
	header {
		margin-left: 10px;
		margin-top: 10px;
		width: 460px;
		min-width: 460px;
	}
	
	
	#headRight {
	float: right;
	margin-right: 60px;
	}
	
	
	#main {
		margin-left: 10px;
		width: 480px;
		min-width: 480px;
	}
	
	
	#streckenContainer {
		margin-left: 10px;
	}
	
	#infoContainer {
		margin-left: 10px;
	}
	
	#contactContainer {
		margin-left: 10px;
	}
	
	#right {
		position: absolute;
		z-index: 2;
		height:auto;
		clear: both;
		left:0px;
		top:0px;
	}
	
	#right p {
		position:static;
		bottom:0;
		margin:0;
		font-size:26px;
		line-height:24px
	}
	
	
}

@media only screen and(min-device-width :768px)and(max-device-width :1024px) {
		#right {
		position: absolute;
		z-index: 2;
		height:auto;
		clear: both;
		left:0px;
		top:0px;
	}
	
	#headRight {
	float: right;
	margin-right: 164px;
	}
}

/* ==|== print styles ======================================================= */
@media print {
* {
	background:transparent!important;
	color:#000!important;
	text-shadow:none!important;
	filter:none!important;
	-ms-filter:none!important
}

a,a:visited {
	text-decoration:underline
}

a[href]:after {
	content:" (" attr(href) ")"
}

abbr[title]:after {
	content:" (" attr(title) ")"
}

.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {
	content:""
}

pre,blockquote {
	border:1px solid #999;
	page-break-inside:avoid
}

thead {
	display:table-header-group
}

tr,img {
	page-break-inside:avoid
}

img {
	max-width:100%!important
}

@page {
	margin:.5cm
}

p,h2,h3 {
	orphans:3;
	widows:3
}

h2,h3 {
	page-break-after:avoid
}
}