/* ----------------- reset Style ----------------- */

@import url("reset.css");


/* ----------------- Clear floated Elements ----------------- */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}


.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}



  @font-face {
    font-family: 'cardcrawlregular';
    src: url('CardCrawl-webfont.eot');
    src: url('CardCrawl-webfont.eot?#iefix') format('embedded-opentype'),
         url('CardCrawl-webfont.woff2') format('woff2'),
         url('CardCrawl-webfont.woff') format('woff'),
         url('CardCrawl-webfont.ttf') format('truetype'),
         url('CardCrawl-webfont.svg#cardcrawlregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



body { 	
/*		font-size: 62.5%; */
		font-family: 'cardcrawlregular', serif;		
		background-color: #000;
		color:#fff;
		-webkit-text-size-adjust: 100%; 
	}
	
.bodyMobile { 	
		font-size: 37.5%;
		
		 
	}
    
	 
h1 { 
	/*font-size: 2.4em;
	line-height: 1.6em;*/
	font-size: 24px;
	line-height: 42px;

	
}

p  { 
	
	
	/*font-size: 1.8em; 
	line-height: 1.6em; */
	
	font-size: 18px;
	line-height: 28px;
} 

a:link, a:visited, a:focus, a:active  { 	
			
			color: #8999f8;
			text-decoration:none;
			}
a:hover {
	position: relative;
	top: 2px;
}
			

.push { margin-top: 40px;}
.push20 {
	margin-top: 20px;
}


.divider {
	margin: 20px 0 20px 0;
}

/* ############################################################################################################################################ */

.wrapper {
	position:relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	/*border: 1px solid white; */
	overflow: hidden;
	height: 4250px;
}

.wrapperMobile {
	position:relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	/* border: 1px solid white; */
	overflow: hidden;
	height:5650px;
}

.introWrapper {
	
	width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	position: relative;
	/*border: 1px solid purple;*/
	height: 1300px;
}

.bodyBg {
	
	width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	position: relative;
	/*border: 1px solid yellow;*/
	background-color: black;
	height: 4100px;
	top: -380px;
}

.bodyBgMobile {
	
	width: 100%;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	position: relative;
	/*border: 1px solid yellow;*/
	background-color: black;
	height: 6200px;
	top: -380px;
}


.bodyWrapper{
	position: absolute;
	left: 50%;
	margin-left: -340px;
	width: 680px;
	/*border: 1px solid red;*/
	top: 440px;
	

}

.bodyWrapperMobile{
	position: absolute;
	left: 50%;
	margin-left: -340px;
	width: 680px;
	/*border: 1px solid red;*/
	top: 440px;
	

}

.front {
	position: absolute;
	left: 50%;
}

.middle {
	position: absolute;
	left: 50%;
}


.back {
	position: absolute;
	left: 50%;
}

.backMobile {
	position: absolute;
	left: 50%;
	top: 200px;
}






.sky {
	
	position: absolute;
	left: 50%;
	margin-left: -960px;
	z-index: 20;

}

.houses {
	position: absolute;
	left: 50%;
	margin-left: -960px;
	z-index: 21;
	top: 150px;

}

.tavern {
	position: absolute;
    z-index: 22;
    left: 50%;
    margin-left: -660px;
   
}

.ground {
	position: absolute;
	left: 50%;
	margin-left: -960px;
	top: 0px;
	z-index: 25;
}


.leftRail {
	
    position: absolute;
    top: 370px;
    left: -30px;
    z-index: 24;

}

.rightRail {

    position: absolute;
    right: 0px;
    z-index: 24;
	float:right;
	top: 370px;
	
	-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";

}

.leftDust {
	
    position: absolute;
    top: 250px;
    left: -20px;
    z-index: 23;

}

.rightDust {

    position: absolute;
    right: 0px;
    z-index: 23;
	float:right;
	top: 250px;
	
	-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";

}

.leftArc {
	
    position: absolute;
    top: -80px;
    left: 0;
    z-index: 15;
	margin-left: -50px;
	 pointer-events:none;  

}

.rightArc {

    position: absolute;
    z-index: 15;
	float:right;
	top: -80px;
	right: 0;
	margin-right: -50px;
	
	-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
        
        pointer-events:none;  

}


.balkenBackLeft {
	background: url("balkenBackTile.png");
    background-size: 28px 256px;
    background-position: center 0;
    display: block;
    width: 100%;
    background-repeat: repeat-y;
	position: absolute;
	z-index: 2;
	width: 28px;
	height: 5000px;
	left: 50%;
	margin-left: -380px;
}

.balkenBackRight {
	background: url("balkenBackTile.png");
    background-size: 28px 256px;
    background-position: center 0;
    display: block;
    width: 100%;
    background-repeat: repeat-y;
	position: absolute;
	z-index: 2;
	width: 28px;
	height: 5000px;
	right: 50%;
	margin-right: -380px;
	
	-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";

}

.balkenMiddleLeft {
	background: url("balkenMiddleTile.png");
    background-size: 37px 338px;
    background-position: center 0;
    display: block;
    width: 100%;
    background-repeat: repeat-y;
	position: absolute;
	z-index: 4;
	width: 37px;
	height: 5000px;
	left: 50%;
	margin-left: -449px;
}

.balkenMiddleRight {
	background: url("balkenMiddleTile.png");
    background-size: 37px 338px;
    background-position: center 0;
    display: block;
    width: 100%;
    background-repeat: repeat-y;
	position: absolute;
	z-index: 4;
	width: 37px;
	height: 5000px;
	right: 50%;
	margin-right: -449px;
	
	-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

.balkenFrontLeft {
	background: url("balkenFrontTile.png");
    background-size: 54px 869px;
    background-position: center 0;
    display: block;
    width: 100%;
    background-repeat: repeat-y;
	position: absolute;
	z-index: 13;
	width: 53px;
	height: 5500px;
	left: 50%;
	margin-left: -520px;
}

.balkenFrontRight {
	background: url("balkenFrontTile.png");
    background-size: 54px 869px;
    background-position: center 0;
    display: block;
    width: 100%;
    background-repeat: repeat-y;
	position: absolute;
	z-index: 13;
	width: 53px;
	height: 5500px;
	right: 50%;
	margin-right: -520px;
	
	
	-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

.balkenQuerLeft {
    position: absolute;
    left: 50%;
    margin-left: -447px;
    z-index: 3;

}

.balkenQuerRight {
    position: absolute;
    z-index: 3;
    right: 50%;
	float: right;
	margin-right: -447px;
	
	-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";

}

.balkenQuer1 {
	top: 400px;
}

.balkenQuer2 {
	top: 800px;
}

.balkenQuer3 {
	top: 1165px;
}

.balkenQuer4 {
	top: 1805px;
}

.balkenQuer5 {
	top: 2265px;
}


.balkenQuer6 {
	top: 2555px;
}

.balkenQuer7{
	top: 3580px;
}


.fackel1 {
    position: absolute;
    left: 50%;
    margin-left: -525px;
    z-index: 5;
    top: 650px;

}

.fackelAnim1 {
    position: absolute;
    left: 50%;
    margin-left: -453px;
     z-index: 6;
	 top: 726px;

}


.fackelAnim2 {
    position: absolute;
    z-index: 5;
    right: 50%;
	float: right;
	margin-right: -455px;
	top: 525px;

}

.fackel2 {
    position: absolute;
    z-index: 5;
    right: 50%;
	float: right;
	margin-right: -525px;
	top: 450px;
	
	-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";

}

.flaschenzug {
    position: absolute;
    right: 50%;
    margin-right: -428px;
    z-index: 3;
    top: 1258px;
    float: right;

}

.sackseil {
    position: absolute;
    left: 50%;
    margin-left: -438px;
    z-index: 3;
    top: 1920px;
    

}

.wheelBig {
    position: absolute;
    left: 50%;
    margin-left: -488px;
    z-index: 12;
    top: 508px;

}

.ropeLeft {
    position: absolute;
    left: 50%;
    margin-left: -488px;
    z-index: 12;
    top: 3180px;
    

}

.ropeLeft2 {
    position: absolute;
    right: 50%;
    margin-right: -388px;
    z-index: 12;
    top: 4320px;
    float: right;
    

}

.wheelBigMobile {
    position: absolute;
    left: 50%;
    margin-left: -488px;
    z-index: 12;
    top: 308px;

}

.ropeLeftMobile {
    position: absolute;
    left: 50%;
    margin-left: -588px;
    z-index: 12;
    top: 2630px;
    

}

.ropeLeft2Mobile {
    position: absolute;
    right: 50%;
    margin-right: -428px;
    z-index: 12;
    top: 3620px;
    float: right;
    

}


.balkenFrontMiddle {
    position: absolute;
    left: 50%;
    margin-left: -495px;
    z-index: 14;
 pointer-events:none;  
}

.balkenFront1 {
	top: 500px;
}

.balkenFront2 {
	top: 1350px;
	
	-moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
	
}

.balkenFront3 {
	top: 2280px;
}

.balkenFront4 {
	top: 2980px;
	
	-moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
	
}

.balkenFront5 {
	top: 4300px;
}

.balkenFront1Mobile {
	top: 300px;
}

.balkenFront2Mobile {
	top: 1050px;
	
	-moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
	
}

.balkenFront3Mobile {
	top: 1890px;
}

.balkenFront4Mobile {
	top: 2420px;
	
	-moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
	
}

.balkenFront5Mobile {
	top: 3590px;
}



.balkenFrontHori {
    position: absolute;
    left: 50%;
    margin-left: -419px;
    z-index: 5;

}

.frontHori1 {
	top: 1255px;
}

.frontHori2 {
	top: 1920px;
}

.frontHori3 {
	top: 2640px;
}



.frontHori4 {
	top: 3640px;
}




.balkenBackHori {
    position: absolute;
    left: 50%;
    margin-left: -357px;
    z-index: 3;

}

.backHori1 {
	top: 790px;
}
.backHori2 {
	top: 1150px;
}

.backHori3 {
	top: 1790px;
}

.backHori4 {
	top: 2550px;
}

.backHori5 {
	top: 3570px;
}

.wall {
    position: absolute;
    left: 50%;
    margin-left: -250px;
    z-index: 1;

}

.wall1 {
	top: 200px;
	
	margin-left: 0px;
	
	opacity: .75;
}

.wall2 {
	top: 400px;
	
	margin-left: -650px;
	
	opacity: .65;
}

.wall3 {
	top: 1000px;
	
	margin-left: 100px;
	
	opacity: .25;
}

.wall4 {
	top: 1300px;
	
	margin-left: -500px;
	
	opacity: .25;
	
		-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}


.wall5 {
	top: 1800px;
	
	margin-left: -720px;
	
	opacity: .25;
	
		-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

.wall6 {
	top: 1900px;
	
	margin-left: 0px;
	
	opacity: .25;
}

.wall7 {
	top: 2400px;
	
	margin-left: 0px;
	
	opacity: .25;
}

.wall8 {
	top: 2200px;
	
	margin-left: -650px;
	
	opacity: .25;
}


.wall9 {
	top: 2500px;
	
	margin-left: 0px;
	
	opacity: .25;
}

.wall10 {
	top: 2900px;
	
	margin-left: -500px;
	
	opacity: .25;
}


.logo {
    position: relative;
    left: 50%;
    margin-left: -215px;
    z-index: 4;

}


.textCenter
{
	text-align: center;
}

.youtube {
	position: relative;
	margin-top: 85px;
	z-index: 5;
}

.descText1 {
		position: relative;
margin-top: 100px;
	z-index: 4;

}

.descText2 {
		position: relative;
margin-top: 100px;
	z-index: 4;

}

.screenshots {
	position: relative;
	margin-top: 40px;
	z-index: 4;
}

.shot{
	
	margin-right: 6px;
	
}

.cards {
	position: relative;
	margin-top: 40px;
	z-index: 4;
}

.cards2 {
	position: relative;
	margin-top: 6px;
	z-index: 4;
}

.card{
	
	margin-right: 6px;
	
}


.divider {
	position: relative;
	left: 50%;
	margin-left: -17;
}

.newsletter {
	margin-top: 120px;
}

.stollen {
    position: absolute;
    left: 50%;
    margin-left: -397px;
    z-index: 5;
    top: 4080px;

}

.footerOverlay {
    position: absolute;
    left: 50%;
    margin-left: -960px;
    z-index: 20;
    top: 4250px;

}
.button { float: left }
.buttons {
	position:relative;
	left: 50%;
	width: 500px;
	margin-left: -200px;
	z-index: 5;
}
.header {
	position: relative;
	z-index: 5;
}



.textInput {
font-size: 18px;
font-family: 'cardcrawlregular', Georgia, serif;
color: #000; 
border: none; 
background-color: #fff; 
height :30px; 
width: 350px; 
padding:5px 0 5px 5px;
margin-top: 10px;

border-radius: 1px;
-moz-border-radius: 1px;
-khtml-border-radius: 1px;
-webkit-border-radius: 1px;
	
}

.buttonInput {

font-family: 'cardcrawlregular', Georgia, serif;
font-size: 18px;

color: #fff; 
border: none; 
background-color: #8999f8; 
height :40px; 
width: 120px; 
padding:0px;

border-radius: 1px;
-moz-border-radius: 1px;
-khtml-border-radius: 1px;
-webkit-border-radius: 1px;
	
}

.radioInput
{
	float: left;
	margin-bottom: 10px;
}

.radioText
{
		float: left;
		margin: -5px 20px 5px 0;
		padding-left: 5px;
}

.awardDCP 
{
	position: relative;
	z-index: 5;
}

.test {
		border: solid 1px red;

}