html, body{
font-family: 'Source Sans Pro', sans-serif;
padding: 0;
margin: 0;
}

h2{
font-weight: 500;
font-size: 32px;
margin-top: 40px;
padding-top: 0;	
margin-bottom: 0px;
}

h1{
font-weight: 500;	
font-size: 40px;
margin-top: 0px;
padding-top: 0;	
margin-bottom: 0px;
}

em{
font-size: 22px;	
}

p{
color: black;
font-size: 18px;
line-height: 26px;
margin-top: 0;
}

.wrap{
width: 500px;
margin: 0 auto;
background-image: url(img/stippel.png);
background-repeat: repeat-y;
background-size: 500px;


}



.layer{

padding-bottom: 200px;
}

.image{

width: 500px;

padding-top: 0;
margin-top: -75px;
box-sizing: border-box;
margin-bottom: 50px;
}

.image img{
width: 100%;	
}

.fader{

width: 500px;
	
}

.btn{
	clear: both;
text-decoration: none;
border: 2px solid black;

padding: 10px;
padding-left: 15px;
padding-right: 15px;
color: black;
margin-top: 25px;
text-align: center;
margin-right: 5px;
cursor: pointer;
}

.clear{
clear: both;	
}


/* --- videoplayer --- */


.videoplayer{
width: 920px;
margin: 0 auto;	
padding-left: 10px;
}

a.mov{
	position: relative;
display: inline-block !important;
width: 290px;
height: 200px;	
overflow: hidden !important;
margin: 10px;
margin-left: 0;
margin-top: 0;
border: 1px solid black;
background-size: cover;
background-position: center;
}

.descr{
	position: absolute;
	bottom: 0;
	padding: 10px;
	padding-top: 8px;
	padding-left: 15px;

	width: 100%;
	box-sizing: border-box;
	color: white;
}

.videoplayer h2{

font-size: 26px;
}

/* --- cogs ---*/

.gears
{
	position: relative;
	width: 300px;
	top: -100px;
}

#cog1
{
	width: 70px;
	position: absolute;
	left: 55px;
	top: 0px;
}

#cog2
{
	width: 70px;
	position: absolute;
	left: 0px;
	top: 40px;
}

#cog3
{
	width: 70px;
	position: absolute;
	left: 40px;
	top: 95px;	
	display: none;
}




	
	.fader{
	float: left;
	margin-left: 40px;	
	}
	
	
	.layer{
	padding-bottom: 100px;	
	}
	
	
	#house{
	 position: relative; left: 100px; width: 170px;	
	}
	
	#lawn{
	 margin-top: -180px;	
	}
	
	#mountainback{
	position: absolute; top: 0; left: 0px;	
	}
	
	#mountain-itself{
	width: 80px; position: absolute; top: 110px; left: 190px;	
	}
	
	#mountainfront{
	position: absolute; top: 0; left: 0px;
	}
	
	@media only screen and (max-width : 700px) {
		
		
		body{
		
	
		}
		
		.wrap{
		width: 320px;
		background-size: 320px;	
			overflow-x: hidden !important;	
		}
		.image{
			width: 320px;
		box-sizing: border-box;
		margin-top: -60px;
		}
		
		.fader{
		width: 270px;
		margin-left:30px;	
		}
		
		
h2{

font-size: 22px;


}

h1{
	
font-size: 30px;

}

em{
font-size: 18px;	
}

.gears{
display: none;	
}

.videoplayer{
width: 290px;

}

#house{
	 position: relative; left: 70px; width: 120px;	
	}

#lawn{
	 margin-top: -120px;	
	}
	
	
	#mountain-itself{
	width: 50px; position: absolute; top: 70px; left: 120px;	
	}

		
	}