/* *************************************************************************************************************************************** Distributoren-Layer */

#Distributors {background:white;}

#Distributors h1 {border:none; font-size:1.8em;}

#Distributors .zweisp { padding-left:2%; padding-right:2%; }

#Distributors img { max-width:100%; }

#Distributors a { padding:0; margin:0; background:none; border:none; }


/* *************************************************************************************************************************************** SHOP-HINWEIS */

/* ================================================================ über Bild */
.Shophinweis.Bild {
	/*position:absolute;*/
	display:block;
	float:right;
	bottom:0;
	right:20%;
	z-index:40;
	/*margin-right: 170px;*/
	/*margin-top: 370px;*/
	padding:0;
	font-family: 'michromaregular', sans-serif;
	font-size:1.3em;
	text-align:right;
}

/* ================================================================ normal */
.Shophinweis {
	position:static;
	display:block;
	float:right;
	right:40%;
	z-index:40;
	margin:-10px 0px 20px 0px;
	padding:0;
	font-family: 'michromaregular', sans-serif;
	font-size:1.3em;
	text-align:right;
	width:200px;
}
#Shopinfo {
	float:right; 
	right:20%; 
	margin-top: 20px; 
	color:#000000; 
	text-align:center; 
}
@media (min-width:1600px) 	and 	(max-width:1919px) 	{ #Shopinfo { right:15% !important; } }
@media (min-width:1280px) 	and 	(max-width:1599px) 	{ #Shopinfo { right:10% !important; } }
@media (min-width:1200px) 	and 	(max-width:1279px) 	{ #Shopinfo { right:10% !important; } }
@media (min-width:992px) 	and 	(max-width:1199px) 	{ #Shopinfo { right:10% !important; } }
@media (min-width:768px) 	and 	(max-width:991px) 	{ #Shopinfo { right: 5% !important; } }
@media (min-width:480px) 	and 	(max-width:767px) 	{ #Shopinfo { right: 3% !important; } }
@media (min-width:320px) 	and 	(max-width:479px) 	{ #Shopinfo { right: 1% !important; } }

.Hinweis {
	float:right;
	position: absolute;
	z-index: 41;
	font-family: 'michromaregular', sans-serif;
	font-size:0.9em;
	padding: 10px;
	width: auto;
	/*display: none;*/
	border-radius: 8px;
	border: 1px solid #777777;
	background-color:/*#FFFBE5 #FFF5AD*/rgba(245,245,245,1.00);
	max-width: 280px;
	webkit-box-shadow: 2px 2px 6px 2px rgba(0,0,0,0.30);
	box-shadow: 2px 2px 6px 2px rgba(0,0,0,0.30);
}

#CORONA { 
	position:absolute; 
	z-index:9898989; 
	width:100vw; height:150vh; 
	background:rgba(0,0,0,0.56); 
	margin-top:100px;
	display:none; 
}

/* ======================================================================= */

.info {
	position: absolute;
	z-index: 41;
	padding: 10px;
	width: auto;
	display: none;
	border-radius: 8px;
	border: 1px solid #777777;
	background-color:/*#FFFBE5 #FFF5AD*/rgba(245,245,245,1.00);
	max-width: 280px;
	webkit-box-shadow: 2px 2px 6px 2px rgba(0,0,0,0.30);
	box-shadow: 2px 2px 6px 2px rgba(0,0,0,0.30);
}
/* ======================================================================= */

.Shophinweis a {color:#777777 !important;}
.Shophinweis a:hover {color:rgb(0,148,117) !important;}

.Shophinweis.Bild:hover + .Hinweis,
.Shophinweis:hover + .Hinweis,
.Shophinweis.Bild:hover + .info,
.Shophinweis:hover + .info { display:block; }


/* ================================================================================================================================== über Kapitelbildern */
.ShophinweisChapterImage {
	position: absolute;
	display: block;
	z-index: 40;
	padding-top: 0px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 5px;
	font-family: 'michromaregular', sans-serif;
	font-size: 1.8em;
	line-height: 1.8em;
	background-color: rgba(0,0,0,0.26);
	border-radius: 8px;
	border:1px solid white;
}
.ShophinweisChapterImage.left {
	float: left;
	margin: 15% auto auto auto;
	left: 20%;
}
.ShophinweisChapterImage.right {
	float: right;
	margin: 15% auto auto auto;
	right: 20%;
}
.ShophinweisChapterImage a { text-decoration:none; color: rgba(255,255,255,1.00);}
.ShophinweisChapterImage a:hover { color: rgba(255,255,255,0.50);}

/* ================================================================================================================================== über Slideshowbildern */
.ShophinweisSlide {
	position: absolute;
	display: block;
	z-index: 40;
	padding-top: 0px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 5px;
	font-family: 'michromaregular', sans-serif;
	font-size: 1.8em;
	line-height: 1.8em;
	background-color: rgba(0,0,0,0.26);
	border-radius: 8px;
	border:1px solid white;
}
.ShophinweisSlide.left {
	float: left;
	margin: 13% auto auto auto;
	left: 20%;
}
.ShophinweisSlide.right {
	float: right;
	margin: 13% auto auto auto;
	right: 20%;
}


.ShophinweisSlide a { text-decoration:none; color: rgba(255,255,255,1.00);}
.ShophinweisSlide a:hover { color: rgba(255,255,255,0.50);}

.ShophinweisText {
	font-family: 'michromaregular', sans-serif;
	font-size:1.3em;
}

.ShophinweisText a { color:#777777 !important; }
.ShophinweisText a:hover { color:#555555 !important; }

#ShophinweisTextinfo {float:right; right:20%; /*margin-right: 100px;*/ margin-top: 50px; color:#000000; text-align:center;}
.ShophinweisText:hover + .info { display:block; }



/* *************************************************************************************************************************************** SPECIAL-POPUP */
#SPECIAL {
	position: absolute;
	z-index: 33000;
	display: block;
	background-color:rgba(255,255,255,1.00);
	top: 40%;
	margin-top: -230px;
	left: 50%;
	margin-left: -280px;
	width: 560px;
	/*height: 400px;*/
	border-radius: 12px;
	/*border: 2px solid rgba(0,135,99,0.70);*/
	webkit-box-shadow: 4px 4px 8px 4px rgba(99,99,99,0.80);
	box-shadow: 4px 4px 8px 4px rgba(0,0,0,0.40);
	font-size:14px;
	line-height:17px;
}

#SPECIAL a { border:none; outline:none; color: rgba(88,88,88,1.00); text-decoration:none; } 

#SPECIAL h2 {
	color: rgba(88,88,88,1.00);
	/*font-family:Arial;
	font-weight:normal;*/
	/*color: rgba(178,146,21,1.00);*/
	font-size: 36px;
	line-height: 60px;
	text-shadow: 2px 2px 6px rgba(0,0,0,0.30);
}

#SPECIAL .h2LOGO { height:50px; width:auto; vertical-align:middle; margin-top:-14px; } 

#SPECIAL .SpecialBox {
	margin:2%;
	width:96%;
	height:94%;
}
#SPECIAL .SpecialBox .quit {
	width: 100%;
	height: 24px;
	margin-bottom:10px;
	text-align:right;
}

#SPECIAL .SpecialBox .SpecialContent {
	width: 100%;
}

@media only screen and (max-width: 767px)	{ 
	#SPECIAL { top:0; margin-top:20px; width:300px; margin-left: -150px; } 
	#SPECIAL h2 { font-size:20px; line-height:28px; } 
	#SPECIAL img { max-width:280px; } 
}


/* *************************************************************************************************************************************** SONDERLABEL */

.Extralabel { position:absolute; z-index:12345; }

.Extralabel.JUBI { width:148px; height:113px; left:50%; margin-left:420px; margin-top:-5px; background-image:url(css-images/20Jahre_glow.png); background-repeat:no-repeat; background-size:100%; }
@media only screen and (min-width: 1024px)	and (max-width: 1279px)	{ .Extralabel.JUBI { margin-left:310px; } }
@media only screen and (min-width: 768px)	and (max-width: 1023px)	{ .Extralabel.JUBI { margin-left:220px; } }
@media only screen and (min-width: 480px)	and (max-width: 767px)	{ .Extralabel.JUBI { width:110px; height:84px; margin-left:140px; margin-top:0px; } }
@media only screen and (min-width: 320px)	and (max-width: 479px)	{ .Extralabel.JUBI { width:110px; height:84px; margin-left:60px;  margin-top:0px; } }

/* *************************************************************************************************************************************** OVERLAY */

.Overlay {
	position: absolute;
	height:100%;
	width: 100%;
	background-image: url(css-images/bg/transp-black60.png);
}

/* ************************************************************************************************************************************* FAKEBILD (Original=20x20px) */
@media only screen and (min-width: 768px) and (max-width: 1279px)	{
	img.fakeimg { vertical-align:middle; margin-top:-1px; width:550px !important; height:16px; }
}
@media only screen and (min-width: 480px) and (max-width: 767px)	{
	img.fakeimg { vertical-align:middle; margin-top:-1px; width:320px !important; height:16px; }
}
@media only screen and (min-width: 320px) and (max-width: 479px)	{
	img.fakeimg { vertical-align:middle; margin-top:-1px; width:160px !important; height:16px; }
}

/* ############################################################################################ */
/*										2- und 3-spaltig										*/
/* ############################################################################################ */

.zweisp { float:left; width:48%; } 
.zweisp { margin:1% 1%;}


.zweisp { margin:2% 0%; }
.zweisp:first-child { margin: 2% 2% 2% 0%; }
.zweisp:last-child { margin: 2% 0% 2% 2%; }

@media only screen and (max-width: 991px){ 
	.zweisp { float:left; width:100%; } 
	.zweisp:first-child { margin:2% 0%;}
	.zweisp, 
	.zweisp:first-child, 
	.zweisp:last-child { float:left; width:100%; margin:2% 0%;}
	
}

.dreisp { float:left; width:31.33%; } 
.dreisp { margin:2% 0%; }
.dreisp:first-child { margin: 2% 3% 2% 0%; }
.dreisp:last-child { margin: 2% 0% 2% 3%; }

@media only screen and (max-width: 991px){ 
	.dreisp, 
	.dreisp:first-child, 
	.dreisp:last-child { float:left; width:100%; margin:2% 0%;}
}

.zweisp img.image_left,
.dreisp img.image_left {
	align: left;
	margin-right: 20px;
	float: left;
	display:block;
	margin-bottom: 20px;
	max-width: 100%;
}
.zweisp img.image_right,
.dreisp img.image_right {
	align: right;
	margin-left: 20px;
	float: right;
	position: static;
	margin-bottom: 20px;
	max-width: 100%;
}
.zweisp img,
.dreisp img { max-width:100%; height:auto; }

@media (max-width:767px){ 
	.zweisp img.image_left,
	.dreisp img.image_left,
	.zweisp img.image_right,
	.dreisp img.image_right {float:none; margin-left:0px; margin-right:0px; }
}



/* ############################################################################################ */
/*										BUTTONBLOCK												*/
/* ############################################################################################ */
	
.Buttonblock, .Buttonblock2 { float: left; width:100% !important; }

.ButtonLink, .ButtonLink.zwei { 
	display:table;
	float: left; 
	margin: 0.5% 1%;
	height:48px;
}
.ButtonLink 		{ width: 18%; }
.ButtonLink.zwei 	{ width: 48%; }

.ButtonLink .icon {
	float:left;
	margin:0px 6px 0px 0px;
	
}
.ButtonLink .LinkText { 
	display:table-cell;
	width:150px;
	text-align:left;
	vertical-align:middle;
	height:48px;
	line-height:18px;
}

@media (min-width: 480px) {
	.ButtonLink a { font-size: 0.9em; }
}

@media (min-width: 1024px) and (max-width: 1279px)					{
	.ButtonLink { width: 23%; }
}
@media only screen and (min-width: 768px) and (max-width: 1023px)	{  
	.Buttonblock .ButtonLink { width: 31.3%; }
	/*.Buttonblock .ButtonLink a { font-size:14px;}*/
}
@media only screen and (min-width: 480px) and (max-width: 767px)	{  
	.Buttonblock .ButtonLink { width:48%; }
}
@media only screen and (max-width: 479px)							{  
	.Buttonblock .ButtonLink, .Buttonblock2 .ButtonLink { width:100%; }
	.Buttonblock .ButtonLink a, .Buttonblock2 .ButtonLink a { font-size:18px; }
}

/* ############################################################################################ */
/*									functionBlock												*/
/* ############################################################################################ */

.functionBlock {
	float:right;
	display:block;
	min-width:200px;
	max-width: 50%;
	padding: 15px 10px 10px 10px;
	margin-left: 3%;
	margin-bottom:20px;
	border-radius: 8px;
	background-color: #EFEFEF;
	border: 1px solid #999999;
}
@media only screen and (min-width: 480px) and (max-width: 767px)	{ .functionBlock { margin-left:10px; margin-top:0px; padding: 5px; } }
@media only screen and (min-width: 320px) and (max-width: 479px)	{ .functionBlock { float:left; min-width:100% !important; margin: 0px 0px 15px 0px; font-size:18px; }  }

.functionBlock i.fa { 
	font-size:28px;
	vertical-align:middle;
	align:center;
	margin:3px 10px 3px 0px;
	min-width:28px;
}
.functionBlock i.fa.download 		{ color:rgba(96,96,96,1.00);  	padding:0px 4px 5px 3px; }
.functionBlock i.fa.component 		{ color:rgba(96,96,96,0.70);  	padding:0px 0px 5px 2px; }
.functionBlock i.fa.zip 			{ color:rgba(235,140,0,1.00); 	padding:0px 6px 5px 3px; }
.functionBlock i.fa.pdf 			{ color:rgba(220,38,33,1.00); 	padding:0px 6px 5px 3px; }
.functionBlock i.fa.information 	{ color:rgba(0,94,179,1.00); 	padding:1px 6px 4px 3px; }
.functionBlock i.fa.write 			{ color:rgba(96,96,96,1.00); 	padding:2px 3px 3px 3px; }
.functionBlock i.fa.external		{ color:rgba(24,149,118,1.00);	padding:3px 6px 2px 3px; }
.functionBlock i.fa.shop			{ color:rgba(92,92,92,1.00);	padding:1px 3px 4px 3px; }
.functionBlock i.fa.TD				{ color:rgba(96,96,96,1.00);	padding:3px 0px 2px 3px; }

.functionBlock img.icon 			{width:32px; height:auto; margin:3px 10px 3px 0px;}
	
/* ############################################################################################ */
/*										SONDERAKTIONEN											*/
/* ############################################################################################ */
	
.Sonderaktion {
	margin-top: 120px;
	margin-left:-30px;
	padding-top: 10px; padding-right: 15px; 	padding-left: 15px; padding-bottom: 15px;
	position: absolute;
	width: auto;
	height: auto;
	background-image: url(css-images/bg/transp-green_80.png);
	z-index: 1000;
	border-radius: 12px;
	border: 0px;
	-webkit-box-shadow: 3px 3px 10px 0px #000000;
	box-shadow: 3px 3px 10px 0px #000000;
	color: #FFFFFF;
}

.Sonderaktion h3 { color:#FFFFFF !important; font-size:17px; line-height:20px; margin-bottom:0px; }

.Sonderaktion a, .Sonderaktion h3 a { color:#FFFFFF !important; }

.Sonderaktion a:hover { color:#000000 !important; }

@media only screen and (min-width: 1024px) and (max-width: 1279px)	{ 
	.Sonderaktion { font-size:14px !important; line-height:17px !important; margin-top: 60px; margin-left:-40px; border-radius: 10px; padding-top: 10px; padding-right: 10px; padding-left: 10px; }
	.Sonderaktion h3 { font-size:15px; line-height:18px; margin-bottom:0px; } 
}
@media only screen and (min-width: 768px) and (max-width: 1023px)	{ 
	.Sonderaktion { font-size:14px !important; line-height:14px !important; margin-top: 40px; padding-top: 10px; padding-right: 10px; padding-left: 10px; border-radius: 8px; }
	.Sonderaktion h3 { font-size:14px; line-height:16px; margin-bottom:0px; } 
}
@media only screen and (min-width: 480px) and (max-width: 767px)		{ 
	.Sonderaktion { /*float:right;*/ font-size:14px !important; line-height:14px !important; margin-top: 0px; margin-left:180px; padding-top: 6px; padding-right: 10px; padding-left: 10px; border-radius: 8px; } 
	.Sonderaktion h3 { font-size:14px; line-height:14px; margin-bottom:0px; }
}
@media only screen and (min-width: 320px) and (max-width: 479px)		{ 
	.Sonderaktion { /*float:right;*/ font-size:14px !important; line-height:13px !important; margin-top: 0px; margin-left:160px; padding-top: 6px; padding-right: 10px; padding-left: 10px; border-radius: 8px; } 
	.Sonderaktion h3 { font-size:14px; line-height:14px; margin-bottom:0px; }
}

.Dokumentblock { float: left; width: auto; margin-right:60px; margin-bottom:20px; }
.Dokumentblock table {
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-top: 1px solid #CCCCCC;
	background-color:#FFFFFF;
}

.Dokumentblock td { border-bottom: 1px solid #CCCCCC; padding-left:6px; padding-right:6px; }

@media only screen and (min-width: 480px) and (max-width: 767px)		{ .Dokumentblock { margin-right:40px; margin-bottom:15px; } }
@media only screen and (min-width: 320px) and (max-width: 479px)		{ .Dokumentblock { margin-right:0px; margin-bottom:15px; width:100%; } }


.btn.btn-primary, a.btn.btn-primary, 
.btn.btn-danger, a.btn.btn-danger, 
.btn.btn-success, a.btn.btn-success {color:rgba(255,255,255,1.00) !important;}