html, body  { 
	margin: 0;
	padding: 0;
	font-family: MetaWebPro-Light, sans-serif;
}

#background-grey {
	width: 100%;
	min-height: 850px;
	background-image: url("../img/papier.png");
	display: block;
	background-size: cover;
	background-repeat: no-repeat;
	left: 0;
	top: 0;

}

.mockup {
	margin-top: 60%;	
	-webkit-filter: drop-shadow(5px 5px 5px #494949);
 	filter: drop-shadow(5px 5px 5px #494949);
}

.zoom {
	transition: transform 0.8s;
	-moz-transition: transform 0.8s;
	-webkit-transition: transform 0.8s;
	-o-transition: transform 0.8s;
	-ms-transition: transform 0.8s;
}

.zoom:hover {
	cursor: zoom-in; 
	 cursor: -moz-zoom-in;
	 cursor: -webkit-zoom-in;
	 transform: scale(1.2, 1.2);
	 -moz-transform: scale(1.2, 1.2);
	 -webkit-transform: scale(1.2, 1.2);
	 -o-transform: scale(1.2, 1.2);
	 -ms-transform: scale(1.2, 1.2);
}

#background-grey h1 {
	font-size: 50px;
	line-height: 50px;
	color: #107727;
}

#background-grey p {
	color: #000;		
	font-size: 1.4em;

}

#background-grey ul {
	color: #000;
	font-size: 1.4em;
	margin-bottom: 10%;
	list-style-type: square;
	margin-left: -18px;
}

#background-grey a {
	color: #FFF;
	font-size: 22px;
	padding: 15px 12px 12px;
	background-color: #107727;
}

#background-grey a:hover {
	background-color: #0d5f20;
	text-decoration: none;
	color: #FFF;

}

.runter {
	margin-top: 20%; 
}


#header-bild { 
	width: 100%;
	height: 800px;
	background-image: url(../img/23_Bausch_1.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	left: 0;
	top: 0;
	margin-top: 18%;
}

#text {
	margin-top: 10%;
}

#text h2  {
	color: #107727;
	font-weight: bold;
	font-size: 4.2em;
}

#text h3  {
	color: #107727;
}

#text h4  {
	color: #107727;
	text-align: center;
	font-size: 1.5em;
}

#text p {
line-height: 1.4em;
font-size: 1.5em;
}

#text td {
line-height: 1.4em;
font-size: 1.5em;	
color: #107727;
}

#text a {
	color: #107727;
}

#text a:hover {
	font-family: MetaWeb-Medium;
	text-decoration: none;
}

#text ul {
line-height: 1.4em;
font-size: 1.5em;
}

.mockup-bild {
	width: 1109px;
	height: 500px;
	overflow: hidden;
	margin: 20% auto 0;
	margin-bottom: 5%;
}

.vorteilsboxen {
	text-align: center;
}

.vorteilsboxen img {
	width: 150px;
}

#facts-background {
	width: 100%;
	min-height: 200px;
	margin-top: 5%;
	padding-bottom: 7%;
		background-image: url("../img/papier.png");
	display: block;
		background-size: cover;
	background-repeat: no-repeat;
	left: 0;
	top: 0;

	border-bottom: 50px solid #FFF;
}

.tabellenfoto {
	width: 385px;
}

.table {
	background-color: #FFF;
}

.tabelle-bold {
	font-weight: bold;
}

#footer h2  {
	color: #107727;
	font-weight: bold;
	font-size: 4.2em;
}

#footer {
	margin-top: 10%;	
		

}

#footer p {
	line-height: 1.4em;
	font-size: 1.5em;
	color: #107727;
}

#footer a {
	color: #107727;
}

#footer a:hover {
	font-weight: bold;
	text-decoration: none;
}

#footer img {
	padding-left: 70px;
}


@media only screen and (max-width: 767px) {
	
	.navbar-header {
		width: 90%;
	}
	
	
	#background-grey {
	width: 120%;
	min-height: 850px;
	background-image: url("../img/papier.png");
	display: block;
	background-size: cover;
	background-repeat: no-repeat;
	left: 0;
	top: 0;

}

	#header-bild { 
	width:120%;
	height: 200px;
	background-image: url(../img/23_Bausch_1.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	left: 0;
	top: 0;
	margin-top: 18%;
}
	
	
	#text h2  {
	color: #107727;
	font-weight: bold;
	font-size: 3.5em;
}
	
	
	.mockup {
		width: 80%;
		margin-top: 50px;
	}
	
	.tabellenfoto {
	width: 325px;
}
	
	.runter {
		margin-top: 0;
	}
	
	table {
		display: none;
	}
	
	
	#footer {
		width: 120%;	
	}
	
	
	#footer img {
		width: 90%;
		padding-left: 0;
 	}

	
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
	
	#background-grey {
	width: 100%;
	min-height: 750px;
	}
	
	.mockup {
		width: 90%;
	}
	
	#header-bild {
		width:100%;
		height: 500px;		
	}
	
	#footer img {
		width: 95%;
		padding-left: 0;
		}	
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
	
	.mockup {
		margin-top: 30%;	
	}
	
	#header-bild {
		width:100%;
		height: 400px;		
	}
}


/* //////////// FONTS //////////// */
/* first for IE 4–8 */
@font-face {
  font-family: MetaWebPro-Light;
  src: url("font/MetaWebPro-Light.eot");
}

/* then for WOFF-capable browsers */
@font-face {
  font-family: MetaWebPro-Light;
  src: url("font/MetaWebPro-Light.woff") format("woff");  
}


/* first for IE 4–8 */
@font-face {
	font-family: MetaWeb-Medium;
	src: url("font/MetaWeb-Medium.eot");
}

/* then for WOFF-capable browsers */
@font-face {
	font-family: MetaWeb-Medium;
	src: url("font/MetaWeb-Medium.woff") format("woff");
}