@charset "utf-8";
/* CSS Document */
/*
html 	 			 	{ box-sizing: border-box;}
*,
*:before,
*:after  			 	{ box-sizing: inherit;}
*  					 	{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box;}
*/

border 			 	 	{ margin:0px;background-color:#fff}
#main			 	 	{ margin-left:auto;margin-right:auto;width:100%;min-height:100%;max-width:1600px;text-align:left}
.row			 	 	{ display:inline-block;width:100%;clear:both}
.r2,.r3,.r4,.r5,.r6	 	{}
#r1				 	 	{ position:fixed;background-color:#fff;z-index:99}
#r1mobile		 	 	{ position:fixed;background-color:#fff;z-index:99;}
#r2 			 	 	{ margin-top:30px;}
#r3						{ margin-top:30px;}

.rand 			 	 	{ float:left; width:8.2%;min-height:4px;border:0px solid #fff;}
.col 			 	 	{ float:left;/*display:inline-table;*/ position:relative; width:16.6%;border-right:0px solid #ccc}
.double 		 	 	{ width:33.2%}
.triple 		 	 	{ width:49.8%}
.quad					{ width:66.4%}
.full					{ width:83.6%; border:0px solid red}
.separator 		 	 	{}
.c1,.c2,.c3,.c4,.c5 	{ border-left:0px solid #ccc}


.c5 			 	 	{ width:15.1%;padding-left:1.5%;border-left:0px solid #ccc}


.last 			 	 	{ margin-right:0}

/******   HEADER     ****************************/
header 			 		{ border-top-width:3px;height:53px;z-index:100;padding-top:20px}

#headerclassic 	 		{}
#headermobile 	 		{ display:none}

#logo					{ text-align:center}
#logo img 		 	 	{ width:90%;padding:10px 5% 0px 5%}

#title h1, h3 			{text-align: center}
.roundCorners			{ border:1px solid #ccc; -moz-border-radius: 4px; border-radius: 4px;}


/********** Content *********/
#content 				{}
#content p 				{ padding-left:5%}
#article				{ margin-right:1.2%}
article.c1 				{ width:42.8%;padding-left:5%;padding-right:6%} 
#side 					{ margin-top:3px}
.liste					{ float:left;width:45%;padding-left:0%;padding-right:5%;margin-top:-20px}
#bilder					{ padding-left:0%;border:1px solid #ccc;width:100%}
#technical  			{ float:left; border:1px solid #ccc;padding:10px 20px 20px 40px;width:70%;margin-top:10px} 	


#mainpic 				{ max-height:500px; overflow:hidden} 	
#mainpic img 			{ margin-top:-5%}

/********** Sidemenu + Navigation *********/

#hamburger 			 	{ position:fixed; font-size:40px;cursor:pointer;margin-top:-12px;left:5%}
#katmenu 			 	{ width:89%;border:0px solid #ccc;padding-left:5%;padding-right:5%;height:416px;min-width:89%;margin-bottom: 50px} 
#katmenu 			 	{ z-index:1} 
.hidden 		 		{ display:hidden}
.fade 			 		{ opacity: 0.90;transition:0.5s}
.fade:hover 	 		{ opacity:1;transition:0.5s} 
.fade img 		 		{ width:96px;height:65px}
.balken 		 		{ float:left;width:96.4%;padding-left:2.6%;}
.cimg 			 		{ float:left;position:relative;width:48%;width:96px;height:60px; margin-top:6.8px;z-index:10;overflow:hidden} 
.mtext 			 		{ margin-top:-25px;position:relative;color:#fff;font-size:12px; padding-left:5%;z-index:20;
						  text-shadow: 2px 2px 1px #666 }
.mtext a,.mtext a:hover	{ color:#fff}
.mtext a:hover 		 	{ text-decoration:underline}

.left 				 	{ margin-right:1.5%}
.right 				 	{ margin-left:2%}

.sidenav  			 	{ height: 416px; width: 0; position: fixed; z-index: 30; margin-top:0; left: 0; background-color: #fff; 
						  border:0px solid #c1c1c1; overflow-x: hidden; overflow: hidden; transition: 0.5s; padding-top: 0px;
							/* position: absolute; top: 0; left: 0; bottom: 0; height: 100% */}

.sidenav a  		 	{ text-decoration: none; display: block; transition: 0.3s;}
.sidenav a:hover,
.offcanvas a:focus  	{}
.close 			 		{ top:20px}
.sidenav ul 	 		{ margin-left:37%;/*line-height: 18px*/}
.sidenav ul ul 	 		{ margin-left:0%}
.sidenav li 	 		{ list-style-type: none;padding-left: 0px;margin-left: 0px;text-indent: 0px}
.sidenav .row 	 		{ height:14px;top:0px;margin-top:-12px}
.sidenav .closebtn   	{ position: absolute; top: 0;	left: 30%;	margin-top:-12px;font-size: 32px;}




/*
@media screen and (max-height: 450px)  			 	{
  .sidenav  			 	{padding-top: 15px;}
  .sidenav a  			 	{font-size: 18px;}
}
*/


/* Intro Animation */
/*
.introcenter 	 		{ position:absolute;top:165px;left:0px;width:100%;height:200px;z-index:0;font-size:90px;color:#ffffff;
						  text-align:center;}
.introright 		 	{ position:absolute;top:35px;left:4px;width:700px;height:400px;z-index:0;font-size:50px;color:#fff;
						  text-align:right;}
.introsubtitle 	 		{ position:absolute;top:390px;left:4px;width:700px;height:400px;z-index:0;font-size:20px;color:#fff;
						  text-align:right;}
*/


.regButton 		 		{ align-content: center;width:92%;padding:8px;text-align: center;-moz-border-radius: 4px; border-radius: 4px;margin:30px auto 30px auto; }
.regButton:hover 	 	{ background-color:#d6881a }
.regButton a:hover 	 	{ color:#fff }



/*
section 		 		{ padding:0px;margin-bottom:60px;border:0px dotted #c1c1c1;}
section:hover 	 		{ background-color: #D3D3D3}
*/






footer 			 		{ width:100%;border-top:4px solid #d6881a;padding-top:20px;background-image: url(../graphics/ralf-meyer-38.png);background-repeat: no-repeat; }

#footerlinks 			{ padding-left:5%}

#haendlerbund 	 		{ width:50%;margin-left:0%;margin-top:20px;border:1px solid #c1c1c1}

/*** Back to top-button ***/ 
#myBtn  			 	{ display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; 
						  background-color:#d58719 ; color: white; cursor: pointer; padding: 15px; border-radius: 10px; }
#myBtn:hover  	 		{ background-color: #555; }



/********** Form Elemente *********/
/*
.etabs 					{ margin: 0; padding: 0; }
.tab 					{ display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; 
						border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a 					{ font-size: 18px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a:hover 			{ text-decoration: underline; }
.tab.active 			{ background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #ccc; }
.tab a.active 			{ font-weight: bold; }
.tab-container .panel-container { background: #fff; border-top: solid #ccc 1px; padding: 10px; margin-top: 0px;
						-moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }

*/


/********** Form Elemente *********/

.formField				{ width:80%; height:24px; border:1px solid #ccc; -moz-border-radius: 4px; border-radius: 4px;
						font-size:18px;padding:10px	}
.radioField				{ width:5%; height: 24px; border:1px solid #ccc; font-size:18px;padding:10px;padding-right:20px }
.required				{ border:1px solid #9cbf10 }
.formText				{ width:91%; }
/* .formText p 			{ font-size:24px } */


@media (max-width:370px) 	{
	.container 			{ width:750px}
}	

@media (max-width:767px) 	{
	#main 				{ width:100%;max-width:750px;border:0px solid green}
	
	.col 			 	{ float:left;width:23%;border-right:0px solid #ccc}
	.c5				 	{ display:none} 
	.rand			 	{ float:left;width:4%;min-height:4px;border:0px solid #fff;}
	.double			 	{ width:46%}
	.triple			 	{ width:69%}
	.quad 				{ width:80%}
	.full 				{ width:92%}
	.separator		 	{}

	#r4b			 	{ display:block}
	.sidenav 		 	{ margin-top:-5px;}
	#headerclassic .c1 {display:none}
	#logo  		 	 	{ width:100%;padding:0px 0 0px 0}
	
	/********** Content *********/
	#content 				{}
	#content p 				{ padding-left:0%}
	#article				{ margin-right:1.2%}
	article.c1 				{ width:80%;padding-left:5%;padding-right:6%} 

	#side 			 		{ padding-left:10%; margin-top:20px;width:100%;border:0px solid red } 
	.liste					{ float:left;width:40%;padding-left:0%;padding-right:0%;margin-top:-20px}	
	
	#bilder					{ padding-left:0%;border:1px solid #ccc;width:100%}
	#technical  			{ float:left; border:1px solid #ccc;padding:10px 20px 20px 40px;width:70%;margin-top:10px} 	


	#mainpic 				{ max-height:500px; overflow:hidden} 	
	#mainpic img 			{ margin-top:-5%}

	footer.triple 			{border:1px solid #fff}
	#footercontact 			{ width:52%;padding-left:10%}
	#footerlinks 			{ padding-left:5%;width:17%}
	.bar 					{ display:none}	
	
	#logo img  		 	{ width:150px;padding:10px 5% 0px 5%;z-index:100}


	#jssor_1		 	{ width:680px; width:100%; clear:both;margin-left:5%;}
	

	
	#hamburger		 	{ float:right; font-size:30px;cursor:pointer;margin-top:-8px}
	.sidenav 		 	{ height: 416px;  width: 0; margin-top:0; left: 0; padding-top: 0px;}

	#mm06 			 	{ float:right; height:14px;text-align: left; width:88%;padding-left:2%;margin-bottom:10px /*left:1% */}
	.sidenav a 		 	{ text-decoration: none; display: block; transition: 0.3s;}
	.sidenav a:hover, 
	.offcanvas a:focus 	{}
	.close			 	{ top:20px}
	.sidenav ul 	 	{ margin-left:10%;/*line-height: 18px*/}
	.sidenav ul ul 	 	{ margin-left:0%}
	.sidenav li 	 	{ list-style-type: none;padding-left: 0px;margin-left: 0px;text-indent: 0px}
	.sidenav .row	 	{ height:14px;top:0px;margin-top:-12px}
	.sidenav .closebtn  { position: absolute; top: 0;	left: 5%;	margin-top:-12px;font-size: 32px;}
}	



@media (min-width:768px) and (max-width:992px) 	{.container 	{width:970px}
	#main			 	{ min-width:700px;/* width:100%;*/ border:0px solid red}
	.col 			 	{ float:left;width:23%;border-right:0px solid #ccc}
	.c5				 	{ display:none} 
	.rand			 	{ float:left;width:4%;min-height:4px;border:0px solid #fff;}
	.double			 	{ width:46%}
	.triple			 	{ width:69%}
	.quad 				{ width:80%}
	.full 				{ width:92%}
	.separator		 	{}

	#r4b			 	{ display:block}
	.sidenav 		 	{ margin-top:-5px;}
	#headerclassic .c1 {display:none}
	#logo  		 	 	{ width:100%;padding:0px 0 0px 0}
	
	/********** Content *********/
	#content 				{}
	#content p 				{ padding-left:0%}
	#article				{ margin-right:1.2%}
	article.c1 				{ width:80%;padding-left:5%;padding-right:6%} 

	#side 			 		{ padding-left:10%; margin-top:20px;width:100%;border:0px solid red } 
	.liste					{ float:left;width:40%;padding-left:0%;padding-right:0%;margin-top:-20px}	
	
	#bilder					{ padding-left:0%;border:1px solid #ccc;width:100%}
	#technical  			{ float:left; border:1px solid #ccc;padding:10px 20px 20px 40px;width:80%;margin-top:10px} 	


	#mainpic 				{ max-height:500px; overflow:hidden} 	
	#mainpic img 			{ margin-top:-5%}

	footer.triple 			{border:1px solid #fff}
	#footercontact 			{ width:52%;padding-left:10%}
	#footerlinks 			{ padding-left:5%;width:17%}
	.bar 					{ display:none}	

}
@media (min-width:1200px) 	{.container 	{width:1170px}
}	
@media (min-width:768px)and (max-width:991px) 	{.visible-sm-block 	{display:block!important}
	



}
@media (min-width:992px)and (max-width:1199px) 	{.visible-md 	{display:block!important}
}









/*

#lupe
 			 	{
 font-size: 3em; 
 display: inline-block;
 width: 0.4em;
 height: 0.4em;
 border: 0.1em solid #fff;
 position: relative;
 border-radius: 0.35em;
}
#lupe::before
 			 	{
 content: "";
 display: inline-block;
 position: absolute;
 right: -0.25em;
 bottom: -0.1em;
 border-width: 0;
 background: #fff;
 width: 0.35em;
 height: 0.08em;
 -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
}


#magnifying-glass
 			 	{
 font-size: 10em; 
 display: inline-block;
 width: 0.4em;
 height: 0.4em;
 border: 0.1em solid #B10B14;
 position: relative;
 border-radius: 0.35em;
}
#magnifying-glass::before
 			 	{
 content: "";
 display: inline-block;
 position: absolute;
 right: -0.25em;
 bottom: -0.1em;
 border-width: 0;
 background: #B10B14;
 width: 0.35em;
 height: 0.08em;
 -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
}

*/