/* 
		Eric Meyer's CSS Reset
		http://meyerweb.com/eric/tools/css/reset/ 
		v2.0 | 20110126
   		License: none (public domain)
	*/
	
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
		margin: 		0;
		padding: 		0;
		border: 		0;
		font: 			inherit;
		vertical-align: baseline;
	}
		
	}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
		display: 		block;
	}
	
.viewport-1275,
.viewport-1000,
.viewport-464,
.viewport-300 {
	display:				none;
}

.show-on-desktops {
	display:				block;
}

.show-on-phones,
.email-pre {
	display:				none;
}

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


/* ----------------------- Seitenweite Definitionen, die in allen Viewports Gültigkeit haben ---------------------  */


body { 
	font-family: 			arial, verdana, helvetica, 'sans-serif';
	font-size: 				1em;
	font-weight:			300;
	line-height: 			18px;
	color: 					#fff; 
	position: 				relative; 
	-webkit-font-smoothing: antialiased;
	padding: 				15px;
	background:				#ff6600 url('../img/bng-small.png') 0 0 no-repeat;
}

body.page-2 {
	background:				#ff6600 url('../img/bng-small-page-2.png') 0 0 no-repeat;
	
}

/* -----------------------   logo  ------------------  */

.logo, .logo h1, .logo h1 a {
	width:					125px;
	height:					30px;
}

.logo {
	clear:					both;
	margin: 				0 0 0 0;
	padding-top:			0;
}

.logo h1, .logo h1 a {
	display:				block;
	position:				relative;
	font-size:				12px;
}
.logo h1 a span {
	width:					100%;
	height:					100%;
	position:				absolute;
	background:				url('../img/sprite.png') 0px 0px no-repeat; 
}
/* -----------------------   servicemenu  ------------------  */

.servicemenu {
	position: 				absolute;
	width: 					100%;
	bottom:					10px;
	right:					10px;
	list-style:		 		none;
	overflow:				hidden;
}

.servicemenu a {
	display:				block;
	float: 					left;
	color:					#4F483B;
	text-decoration:		none;
	font-size:				75%;
	float:					right;
	margin-left: 			10px;
}

.servicemenu a:hover {
	color:					#fff;
	text-decoration:		none;
}

/* -----------------------   mainmenu  ------------------  */


.mainmenu {
	margin:					300px 0 20px 0;
	height:					120px;
	list-style:		 		none;
	overflow:				hidden;
}

.page-2 .mainmenu {
	margin:					50px 0 20px 0;
}
.mainmenu li {
	width:					115px;
	height:					28px;

}

.mainmenu a {
	display: 				block;
	overflow: 				hidden;
    text-indent: 			-9999px;
	color: 					#fff;
	text-decoration:		none;
	width:					115px;
	height:					28px;
	background:				url('../img/menu-sprite-kl.png') 0px 0px no-repeat; 
}

.mainmenu a.m-portfolio:hover,
.mainmenu a.m-portfolio.active  {
	background-position:	-120px 0;	
}


.mainmenu a.m-referenzen {
	background-position:	0 -28px;
}

.mainmenu a.m-referenzen:hover, 
.mainmenu a.m-referenzen.active {
	background-position:	-120px -28px;
}

.mainmenu a.m-kontakt {
	background-position:	0 -56px;
}
.mainmenu a.m-kontakt:hover,
.mainmenu a.m-kontakt.active {
	background-position:	-120px -56px;
}


.article {
	margin: 175px 0 0 0;
}

h1 {
	font-size:			130%;
	margin-bottom:		27px;
}

h2 {
	font-weight:		700;
	font-size:				85%;
	line-height:			150%;
margin-top:					27px;	
}

p {
	font-size:				80%;
	line-height:			150%;
	margin-bottom:			4%;
}

a {
	color:					#4F483B;
	text-decoration:		none;
}

a:hover {
	color:					#fff;
	text-decoration:		underline;
}


.referenzen {
	list-style:		 		none;
	font-size:				85%;
	line-height:			135%;
	}

.referenzen li {
	margin-bottom:			10px;
	margin-bottom:			10px;
	margin-bottom:			10px;
	}
	
	
article.dtschtz {
	background-color: rgba(255,255,255,0.9);
	padding: 2em;
}

.dtschtz p {
	font-size:				100%;
	line-height:			130%;
	margin-bottom:          10px;
	color: #333;
}

.dtschtz h1,
.dtschtz h2,
.dtschtz h3,
.dtschtz li {
	color: #333;
}

.dtschtz h2 {
	font-size: 21px;
	font-weight: 600;
	margin-bottom: 14px;
}

.dtschtz h3 {
line-height:			130%;
	font-weight: 600;
	margin-bottom: 14px;
	margin-top: 14px;
}

.dtschtz ul {
margin-bottom: 14px;
}

.dtschtz li {
margin-left: 2em;	
line-height:			130%;
}
	
	

														/* 		START @media > 300  ---------- ---------- ----------  */
@media only screen and (min-width: 300px) {  


} 	/* ENDE @media 300 */




														/* START @media > 464 ---------- ---------- ----------  */
@media only screen and (min-width: 464px) {		

body { 
	padding: 				20px;
	background:				#ff6600 url('../img/bng-med.png') 0 0 no-repeat;
}

body.page-2 {
	background:				#ff6600 url('../img/bng-med-page-2.png') 0 0 no-repeat;
	
}



/* -----------------------   logo  ------------------  */

.logo, .logo h1, .logo h1 a {
	width:					170px;
	height:					40px;
}

.logo {
	margin: 				0 0 0 0;
	padding-top:			0;
}


.logo h1 a span {
	background:				url('../img/sprite.png') 0 -30px no-repeat; 
}

.mainmenu {
	margin:					350px 0 20px 0;
	height:					140px;
}


}	/* ENDE @media 464*/
















														/* START @media > 764  ---------- ---------- ----------   */
@media only screen and (min-width: 764px) {


body { 
	padding: 				30px;
	background:				#ff6600 url('../img/bng.png') 0 0 no-repeat;
}

body.page-2 {
	background:				#ff6600 url('../img/bng-page-2.png') 0 0 no-repeat;
	
}

/* -----------------------   logo  ------------------  */

.logo, .logo h1, .logo h1 a {
	width:					200px;
	height:					50px;
}

.logo {
	margin: 				0 0 0 0;
	padding-top:			0;
}


.logo h1 a span {
	background:				url('../img/sprite.png') 0 -70px no-repeat; 
}



/* -----------------------   mainmenu  ------------------  */


.mainmenu {
	margin:					600px 0 30px 0;
	height:					120px;
	list-style:		 		none;
	overflow:				hidden;
}

.page-2 .mainmenu {
	margin:					50px 0 30px 0;
}

.mainmenu li {
	width:					170px;
	height:					30px;

}

.mainmenu a {
	width:					170px;
	height:					30px;
	background:				url('../img/menu-sprite-2.png') 0px 0px no-repeat; 
}


.mainmenu a.m-portfolio:hover,
.mainmenu a.m-portfolio.active  {
	background-position:	-170px 0;	
}


.mainmenu a.m-referenzen {
	background-position:	0 -30px;
}

.mainmenu a.m-referenzen:hover, 
.mainmenu a.m-referenzen.active {
	background-position:	-170px -30px;
}

.mainmenu a.m-kontakt {
	background-position:	0 -60px;
}
.mainmenu a.m-kontakt:hover,
.mainmenu a.m-kontakt.active {
	background-position:	-170px -60px;
}



/* -----------------------   servicemenu  ------------------  */


.servicemenu {
	position: 				absolute;
	width: 					100%;
	bottom:					30px;
	right:					200px;
	list-style:		 		none;
	overflow:				hidden;
}

.servicemenu a {
	display:				block;
	float: 					left;
	color:					#4F483B;
	text-decoration:		none;
	font-size:				85%;
	float:					right;
	margin-left: 			10px;
}
	
} 														/* ENDE @media 764*/



























														/* START @media > 1000  ---------- ---------- ----------   */
@media only screen and (min-width: 1020px) {


body { 
	padding: 				40px;
	background:				#ff6600 url('../img/bng-big.png') 0 0 no-repeat;
}

body.page-2 {
	background:				#FF7D26 url('../img/bng-big-page-2.png') 0 0 no-repeat;
	
}


/* -----------------------   logo  ------------------  */

.logo, .logo h1, .logo h1 a {
	width:					270px;
	height:					70px;
}

.logo {
	margin: 				0 0 0 0;
	padding-top:			0;
}


.logo h1 a span {
	background:				url('../img/sprite.png') 0 -180px no-repeat; 
}

/* -----------------------   mainmenu  ------------------  */


.mainmenu {
	margin:					600px 0 30px 0;
	height:					120px;
	list-style:		 		none;
	overflow:				hidden;
}

.page-2 .mainmenu {
	margin:					50px 0 30px 0;
}

.mainmenu li {
	width:					170px;
	height:					30px;
	margin-bottom: 			10px;
}

.servicemenu {
	bottom:					40px;
	right:					40px;
	list-style:		 		none;
	overflow:				hidden;
}


.servicemenu a {
	font-size:				100%;
	float:					right;
	margin-left: 			20px;
}


.article {
	margin: 175px 0 0 0;
}

h1 {
	font-size:				140%;
	margin-bottom:			35px;
}

h2 {
	font-weight:			700;
	font-size:				95%;
	line-height:			150%;
	margin-top:				27px;	
}

p {
	font-size:				100%;
	line-height:			160%;
	margin-bottom:			4%;
}


	
}														/* / ENDE @media 1000 */



























														/* START @media 1275 ---------- ---------- ---------- */
@media only screen and (min-width: 1275px) {


} 														/* ENDE @media 1275 */