@charset "utf-8";
/* Einfache fließende Medien
   Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver-Eigenschaften für fließende Raster
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Idee durch den Artikel "Responsive Web Design" von Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	und "Golden Grid System" von Joni Korpi
	http://goldengridsystem.com/
*/

/* Layout für Mobilgeräte: 480 px oder weniger. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
	margin-top:30px;
	
	box-sizing:border-box;
	
	font-family:MTB_OpenSanRegular;
	font-size:12pt;
	color:#000000;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}


h1{
	font-family:MTB_OpenSanRegular;
	font-size:20pt;
	color:#000000;
	margin-top: 60px;
	margin-bottom: 35px;
	margin-bottom: 1.5rem;
	line-height: 3rem;
	}
	
h2{
	font-family:MTB_OpenSanRegular;
	font-size:16pt;
	color:#000000;
	margin-bottom: 2rem;
	line-height: 2rem;
	}

h3{
	font-family:MTB_OpenSanRegular;
	font-size:15pt;
	color:#000000;
	margin-bottom: 2rem;
	line-height: 2rem;
	}
	
p{
	margin-bottom: 2rem;

	line-height: 1.4rem;

	font-style: normal;
	letter-spacing: 0em;
	text-align: left;

}


/*Header*/
.DIV-CLASS-Header{
	position:fixed;
	top:45px;
	z-index:3;
	
	width: 100%;
	left:50%;
	margin-left:-50%;
	
	background-color:#FFF;
	
}

.DIV-CLASS-HeaderBackground{
	position: fixed;
	height: 150px;
	width: 100%;
	background-color: #ffffff;
	top:0;
	z-index: 2;
	border-bottom: 1px solid #dddddd;
	}

/*Logo*/
.DIV-CLASS-WrapperLogo{
		
	width:auto;
	height:auto;
	padding-left:15px;
	padding-right:0px;
	padding-top:70px;
	float:left;
	
	z-index: 90;
	position:absolute;
	
}

#IMG-ID-Logo{
	width:auto;
	height:50px;
}




/*Header Menue*/
.DIV-CLASS-HeaderMenueWrapper{
	/*display:block;
	float:right;
	margin-top:30px;*/
}

#DIV-ID-MainMenueButtonWrapper{
	padding-top:50px;
	display:block;
}

.DIV-CLASS-HeaderMenueInnerWrapper{
	
	display:block;
	width:100%;
	height:auto;
	overflow-x:hidden;
	overflow-y:-webkit-paged-x;
	float:left;
	
	border-top-width:1px;
	border-top-style:solid;
	border-top-color:#aaaaaa;
	
	padding-left:15px;
	padding-right:15px;
	
	padding-top:10px;
	padding-bottom:10px;
	
	box-sizing:border-box;
}

#DIV-ID-HeaderMenueAbteilung{
	display:none;
}
#DIV-ID-HeaderMenueAbteilung2{
		display:block;
}

#DIV-ID-MainMenueButton{
	float:right;
	margin-right:30px;
	margin-left: 20px;
	display:block;
}
#SPAN-ID-MainMenue-Button{
	font-size: 15pt;
	color:#666666;
	text-decoration:none;
	font-family: MTB_OpenSanRegular;
	float:right;
	display:none;
}
#DIV-ID-HeaderMenue {
	overflow:auto;
	display:block;
	width:100%;
	height:100%;
	
}
#DIV-ID-HeaderMenueWrapper {
	background: rgba(255,255,255,0.9);
	
	z-index: 20;
	display: block;
	height: 100%;
	width: 100%;
	min-width: 300px;
	-webkit-transition: top 200ms ease-in;
	-moz-transition: top 200ms ease-in;
	-o-transition: top 200ms ease-in;
	transition: top 200ms ease-in;
	-webkit-transition-delay: 300ms;
	-moz-transition-delay: 300ms;
	-o-transition-delay: 300ms;
	transition-delay:300ms;
	position: fixed;
	top: -200%;
	
	padding-top:150px;
	
	box-sizing:border-box;
	
}
#DIV-ID-HeaderMenueWrapper:target{
	top:0;
}


A:link.LINK-CLASS-HeaderMenue{
	
	
	
	
	
	/*
	
	padding-top: 20px;
	padding-left: 70px;
	padding-right: 30px;
	padding-bottom: 20px;
	
	*/
	
	
	display:block;
	text-decoration:none;
	
	word-break:break-word;
	
	color:#666666;
	font-family: MTB_OpenSanRegular;
	font-size: 15pt;
	
	width:100%;

	transition: all 0.2s linear;
	
	padding-left:80px;
	padding-top: 10px;
	padding-bottom: 10px;
	
	box-sizing:border-box;
	
}
A:visited.LINK-CLASS-HeaderMenue{
	color:#666666;
	border-top-color: #666666;
}
A:hover.LINK-CLASS-HeaderMenue{
	color:#00843E;
	border-top-color: #666666;
}

#LINK-ID-HeaderMenueClose{
	font-weight:bold;
	
}

#LINK-ID-HeaderMenueActiv{
	color:#E40614;
}



A:link.LINK-CLASS-HeaderMenueIcon{
	border-radius: 40px;
	width: 40px;
	height: 40px;
	background-color:#666666;
	display:block;
	text-align:center;
	text-decoration:none;
	
	transition: all 0.1s linear;
	
	overflow:visible;
	
	
	float:left;
	
	margin-left: 15px;
	
	

	
	 background-position: center center;
    background-repeat: no-repeat;

}
A:visited.LINK-CLASS-HeaderMenueIcon{
	
	background-color:#666666;
}
A:hover.LINK-CLASS-HeaderMenueIcon{
	background-color:#00843E;
}


A:link.LINK-CLASS-ButtonContent{
	border-radius: 10px;
	padding-right:15px;
	padding-left:15px;
	padding-bottom:10px;
	padding-top:10px;
	
	left:0;
	right:0;
	width: 250px;
	position:relative;
	
	
	
	
	background-color:#00843E;
	
	color:#ffffff;
	font-family:MTB_OpenSanBold;
	font-size:15pt;
	text-decoration:none;

	text-align:center;
}
A:visited.LINK-CLASS-ButtonContent{
	color:#ffffff;
}
A:hover.LINK-CLASS-ButtonContent{
	color:#ffffff;
	text-decoration:underline;
}



/*Banner*/
.DIV-CLASS-Banner{
	width:100%;
	background-color: #cccccc;
	
	padding-top:25px;
	padding-bottom:25px;
	height:auto;
	
	color:#00843E;
	
	text-align:center;
	
}

.SPAN-CLASS-BannerTitle{
	font-family: MTB_OpenSanBold;
	font-size:21pt;
	padding-bottom:20px;
	width:100%;
	display:block;
	float:left;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.SPAN-CLASS-BannerTitle>big{
	font-size:42pt;
}

.SPAN-CLASS-BannerSubTitle{
	font-family: MTB_OpenSanBold;
	font-size:14pt;
	width:100%;
	display:block;
	float:left;
	padding-bottom:2px;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

#DIV-ID-BannerTopInner {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
	/*margin-bottom:180px;*/
	height:auto;
	overflow:hidden;
}
.IMG-CLASS-Banner{
	
	width:auto;
	height: auto;
	
}

.DIV-CLASS-ContentTop{
	display:block;
	position:fixed;
	right:20px;
	bottom:70px;
	z-index:99;
	cursor:pointer;
} 


#IFRAME-ID-Konf{
	display:none;
	}


.DIV-CLASS-TurKonf{
	display: block;
	background-image: url("MTB-Baustoffe-Tuerenkatalog-Mobil.gif?OpenImageResource");
	background-repeat:no-repeat;
	background-position: center;
	background-size: contain;
	width: 100%;
	height: 0;
	
	padding-top: 	200%; /* (img-height / img-width * container-width) */
	
	margin-bottom: 20px;
	
}


/* Layout für Tablet-PCs*/

@media only screen and (min-width: 481px) {
	
	.gridContainer {
		width: 90%;
		padding-left: 70px;
		padding-right: 1.1625%;
		
		
	}
	
	
	#LayoutDiv1 {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}

	/*Header*/
	
	#SPAN-ID-MainMenue-Button{
		display:block;
	}
	.DIV-CLASS-WrapperLogo{
		padding-top:40px;
		padding-left:5%;
	}
	
	#IMG-ID-Logo{
		height:80px;
	}
	
	
	
	/*Menü*/
	#DIV-ID-HeaderMenueAbteilung{
		display:block;
	}
	#DIV-ID-HeaderMenueAbteilung2{
		display:none;
	}
	#DIV-ID-MainMenueButton{

	padding-right:30px;

	}
	.DIV-CLASS-HeaderMenueInnerWrapper{
		padding-left: 120px;
	}

	/*Banner*/
	#DIV-ID-BannerBottom{

		position:relative;
	}
	#DIV-ID-BannerTopInner {
		width: 90%;
		padding-left: 70px;
		padding-right: 1.1625%;
		/*margin-bottom:120px;*/
		height:auto;
		overflow:hidden;
		box-sizing:border-box;
		
		
	}
	.SPAN-CLASS-BannerTitle{
		font-size:28pt;
	}
	.SPAN-CLASS-BannerSubTitle{
		font-size:18pt;
	}
	

	.DIV-CLASS-TurKonf{
		background-image: url("MTB-Baustoffe-Tuerenkatalog.gif?OpenImageResource");
		padding-top: 	30%; /* (img-height / img-width * container-width) */
	}


}

/* Desktoplayout*/

@media only screen and (min-width: 1080px) {
	.gridContainer {
		width: 90%;
		max-width: 1232px;
		padding-left: 70px;
		padding-right: 0%;
		margin: auto;
		margin-top:20px;
	}
	
	p{
		text-align: justify;
	}
	#LayoutDiv1 {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	/*HEADER*/
	.DIV-CLASS-Header{
		width: 100%;
		left:50%;
		margin-left:-50%;
		
		padding-left:5%;
		padding-right:5%;
		
		box-sizing:border-box;
		top:0;
	}
	.DIV-CLASS-HeaderBackground{
	height: 110px;
	}
	.DIV-CLASS-WrapperLogo{
		padding-top:15px;
	}
	
	#IMG-ID-Logo{
	width:auto;
	height:80px;
}
	

	/*Header Menue*/
	#DIV-ID-MainMenueButton{
		display:none;
	}
	#SPAN-ID-MainMenue-Button{
		display:none;
	}
	#DIV-ID-MainMenueButtonWrapper{
		display:none;
	}
	.DIV-CLASS-HeaderMenueInnerWrapper{
		width:auto;
		
		border:none;
		
		padding-left:0;
		padding-right:0;
	}
	
	#DIV-ID-HeaderMenueWrapper {
		
		background: none;
		display: block;
		height: auto;
		width: auto;
		position: relative;
		white-space: nowrap;
		float:right;
		margin-top:70px;
		padding-top:0;
		
	}
	A:link.LINK-CLASS-HeaderMenue{
		display:block;
		float:left;
		margin-left:15px;
		font-size: 12pt;
		color:#666666;
		
		width:auto;
		
		padding:0;
		
		border:none;
		
	}
	A:visited.LINK-CLASS-HeaderMenue{
		color:#666666;
	}
	A:hover.LINK-CLASS-HeaderMenue{
		color:#00843E;
	}
	#LINK-ID-HeaderMenueClose{
		display:none;
	
	}
	A:link.LINK-CLASS-HeaderMenueIcon{
		display:none;	
	}
	
	
	/*Banner*/
	#DIV-ID-BannerBottom{

		position:relative;
	}
	#DIV-ID-BannerTopInner {
		width: 100%;
		max-width: 1232px;
		padding-left: 0%;
		padding-right: 0%;
		margin: auto;
	}
	

	.DIV-CLASS-Banner{
		height: 50px;
		margin-bottom: 0px;
	}
	
	#IFRAME-ID-Konf{
		display:block;
	}


		
}


@media only screen and (min-width: 1400px) {
	.gridContainer {
		width: 100%;
		max-width: 1240px;
		padding-left: 0.9%;
		padding-right: 0.9%;
		margin: auto;
		margin-top:20px;
	}
	#LayoutDiv1 {
		clear: both;
		float: left;
		margin-left: 0;
		width: 100%;
		display: block;
	}
	/*Header*/
	.DIV-CLASS-Header{
		width: 1240px;
		left:50%;
		margin-left:-620px;
		
		padding:0;
		padding-left:0;
		
		background-color: transparent;
		
	}
	.DIV-CLASS-WrapperLogo{
		padding-left:0px;
	}
	
	.SPAN-CLASS-BannerTitle{
		font-size:33pt;
	}
	.SPAN-CLASS-BannerSubTitle{
		font-size:22pt;
	}

}