/* Website active-bioscience.de
Autor: Gerd H. Pfotzer
Version: 2.0 - 04.12.2021

Spezelle Styles für bestimmte Auflösungen und Retina Displays.
*/

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */
  /* Mobile */

	#farbbalkenfueraufloesung { height:1px; }

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* iPhone 5 und hTC getestet. Small screen, retina, stuff to override above media query */
	
	#farbbalkenfueraufloesung { height:15px; }

	#kopfnavigationMobile a { background-image:url(../images_templates/menu-2x-off.png); }
	#kopfnavigationMobile a:hover, #kopfnavigationMobile a:active { background-image:url(../images_templates/menu-2x-on.png); }

}





@media only screen and (min-width: 760px) {

  /* Medium screen, non-retina */
  /* Normaler PC Monitor und Tablets */
  /* ZWEISPALTIG */
	
	#farbbalkenfueraufloesung { background-color:orange; }
	body { font-size:1em; }

	#LoginBild {
		display:block;
	}
	#LoginBild img {
		width:55%;
	}
	#topofpageanker {
		height:2.25em;
		-webkit-transition: all 0.3s ease-in-out 0s; /* Verzögerung der Einblendung 0s */
		-moz-transition: all 0.3s ease-in-out 0s;
		-o-transition: all 0.3s ease-in-out 0s;
		-ms-transition: all 0.3s ease-in-out 0s;
		transition: all 0.3s ease-in-out 0s;
	}
	
	#topofpageanker.fixed {
		height:20px;
		-webkit-transition: all 0.1s ease-in-out 0s; /* Verzögerung der Einblendung 0s */
		-moz-transition: all 0.1s ease-in-out 0s;
		-o-transition: all 0.1s ease-in-out 0s;
		-ms-transition: all 0.1s ease-in-out 0s;
		transition: all 0.s ease-in-out 0s;
	}

	header {
		height:8em;
		-webkit-transition: all 0.3s ease-in-out 0s; /* Verzögerung der Einblendung 0.05s */
		-moz-transition: all 0.3s ease-in-out 0s;
		-o-transition: all 0.3s ease-in-out 0s;
		-ms-transition: all 0.3s ease-in-out 0s;
		transition: all 0.3s ease-in-out 0s;
	}
	
	header.fixed {
		position:fixed;
		width:100%;
		background-image:url(../images_templates/bg_unter_kopf.png);
		background-position:top;
		background-repeat:repeat-x;
		/*z-index:auto10000000;*/
		z-index:10;
		height:110px;
		overflow:hidden;
		-webkit-transition: all 0.8s ease-in-out 0.05s; /* Verzögerung der Einblendung 0.05s */
		-moz-transition: all 0.8s ease-in-out 0.05s;
		-o-transition: all 0.8s ease-in-out 0.05s;
		-ms-transition: all 0.8s ease-in-out 0.05s;
		transition: all 0.8s ease-in-out 0.05s;
	}
	#kopf {
		width:85%;
		height:6em;
		max-height:140px;
		/*max-height:7.5em;*/
		-webkit-transition:none;
		-moz-transition:none;
		-o-transition:none;
		-ms-transition:none;
		transition:none;
	}
	#kopf.fixed {
		max-height:90px;
	}
	#logo {
		/*min-height:5.9em;*/
		margin-top:0;
		padding-top:0;
	}
	#logo.fixed {
		min-height:35px;
		/*min-height:5.9em;*/
		max-height:90px;
		max-height:none;
		margin-top:0;
	}

	#kopfnavigationMobile { display:none; }
	#kopfnavigationMobileNav { display:none; display:none; background-color:#33FF66; }
	#kopfnavigation { display:block; }

	#logo img {
		width:100%;
		max-width:400px; !important
		-webkit-transition: all 0.8s ease-in-out 0.05s; /* Verzögerung der Einblendung 0.05s */
		-moz-transition: all 0.2s ease-in-out 0.05s;
		-o-transition: all 0.8s ease-in-out 0.05s;
		-ms-transition: all 0.8s ease-in-out 0.05s;
		transition: all 0.2s ease-in-out 0s;
	}
	#abstandkopfcontent {
		height:200px;
	}
	#content { 
		width:90%;
		padding-top:0.1%;
		/*max-width:900px;*/
		margin-left:auto;
		margin-right:auto;
	}
	#toplink {
		width:90%;
		padding:0% 0%;
		/*max-width:900px;*/
		margin-left:auto;
		margin-right:auto;
	}
	#fussCopyright {
		width:86%;
		padding:0% 2%;
		margin-left:auto;
		margin-right:auto;
	}
	#fuss {
		width:86%;
		padding:0% 2% 2% 2%;
		margin-left:auto;
		margin-right:auto;
	}
	
	.spalte100prozent { 
		width:95%;
		margin-left:2.5%;
		margin-right:2.5%;
	}
	.spalte50prozent {
		width:45%;
		margin-left:2.5%;
		margin-right:2.5%;
		float:left;
	}
	.spalte50prozentmitte {
		width:50%;
		margin-left:25%;
		margin-right:25%;
	}
	.spalte66prozentmitte {
		width:66%;
		margin-left:17%;
		margin-right:17%;
	}
	.spalte66prozent {
		width:60%;
		margin-left:2.5%;
		margin-right:2.5%;
		float:left;
	}
	.spalte34prozent {
		width:30%;
		margin-left:2.5%;
		margin-right:2.5%;
		float:left;
	}
	.spalte33prozentlinks { 
		width:30%;
		margin-left:2.5%;
		margin-right:1.25%;
		float:left;
	}
	.spalte33prozentmitte { 
		width:30%;
		margin-left:1.25%;
		margin-right:1.25%;
		float:left;
	}
	.spalte33prozentrechts { 
		width:30%;
		margin-left:1.25%;
		margin-right:2.5%;
		float:left;
	}

	.bildlinkscaption {
		line-height:150%;
	}
	
	#Search {
		margin-top:-175px;
		-webkit-box-shadow:  0px 0px 0px 8px rgba(255, 255, 255, 0.7); /* WebKit */
		-moz-box-shadow:  0px 0px 0px 8px rgba(255, 255, 255, 0.7); /* Firefox */
		box-shadow:  0px 0px 6px 8px rgba(255, 255, 255, 0.7); /* Standard */ 
		transition:all 0.4s ease-in-out 0.2s;
	}
	#Search:hover {
		box-shadow:  0px 0px 6px 11px rgba(255, 255, 255, 0.65); /* Standard */ 
		transition:all 0.1s ease-in-out 0.2s;
	}
	
	.ProductDescriptionUebersicht { width:70%; padding:1px 20px 0 0; display:block; font-size:90%; line-height:155%; }
	
	#CookieLayer {
		position:fixed;
		top:auto;
		bottom:2em;
		left:2em;
		width:25em;
		border:1px solid #a8101b;
	}
	#merrychristmas { 
		display:block;
	}
	.InputBlock p.CheckboxAndLabel {
		
	}
	
	#OrderForm div.InputBlock p.CheckboxAndLabel {
		float:left;
		min-width:33%;
	}
	
	div.HomeBox20 {
		float:left;
		width:29%;
		margin-right:6.5%;
	}
	div.HomeBox20:nth-of-type(3n+0) {
		margin-right:0;
	}
	
	div.HomeBox20 div.HomeBoxContent20 { 
		opacity:0.6;
		overflow:hidden;
		-webkit-transition:all 0.4s ease-in-out 0.2s;
		-moz-transition:all 0.4s ease-in-out 0.2s;
		-o-transition:all 0.4s ease-in-out 0.2s;
		-ms-transition:all 0.4s ease-in-out 0.2s;
		transition:all 0.4s ease-in-out 0.2s;
	}
	div.HomeBox20:hover div.HomeBoxContent20 { 
		opacity:1;
		-webkit-transition:all 0.3s ease-in-out 0.1s;
		-moz-transition:all 0.3s ease-in-out 0.1s;
		-o-transition:all 0.3s ease-in-out 0.1s;
		-ms-transition:all 0.3s ease-in-out 0.1s;
		transition:all 0.3s ease-in-out 0.1s;
	}

	.divTable {
		display:table;
		width:auto;
	}
	
	.divTr {
		display:table-row;
		width:auto;
	}
	
	.divTd {
		display:table-cell;
		width:auto;
		min-width:175px;
	}

	#pSuche {
		white-space:nowrap;
	}

	.table { 
		display: table;
		border-spacing:0;
	}
	.table-row { display: table-row; }
	.table-cell { display: table-cell; }
	.width63 { width:63%; }
	.width37 { width:37%; }
	.width50 { width:50%; }
	.width57 { width:57%; }
	.width43 { width:43%; }

	#TOC.fixed {
		visibility:visible;
		max-height:2.35em;
		transition:all 0.5s ease-in-out 0s;
	}
	#TOC.aufgeklappt {
		max-height:50em;
		transition:all 0.5s ease-in-out 0s;
	}
	
	.Einrueckung5em {
		padding-left:5em;
	}
	.Einrueckung4em {
		padding-left:4em;
	}
	.Einrueckung3em {
		padding-left:3em;
	}
	.Einrueckung2em {
		padding-left:2em;
	}

	.Ausrueckung10em {
		margin-right:-10em;
	}
	.Ausrueckung5em {
		margin-right:-5em;
	}
	.Ausrueckung4em {
		margin-right:-4em;
	}
	.Ausrueckung3em {
		margin-right:-3em;
	}
	.Ausrueckung2em {
		margin-right:-2em;
	}

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 760px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 760px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 760px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 760px),
only screen and (                min-resolution: 192dpi) and (min-width: 760px),
only screen and (                min-resolution: 2dppx)  and (min-width: 760px),
only screen and (    -webkit-device-pixel-ratio: 3)      and (min-width: 760px) { 

  /* Medium screen, retina, stuff to override above media query */
  /* ZWEISPALTIG */

	#farbbalkenfueraufloesung { height:15px; background-color:green; }

}


@media only screen and (min-width: 1025px) {

  /* Searchfilter anzeigen */
	#kopf.fixed { 
		max-height:80px;
	}	

	#LoginBild {
		right:0.2em;
	}
	#LoginBild img {
		width:65%;
	}

	#SearchFilter {
		display:block;
		float:right;
		width:25%;
		width:28%;
	}

	#Produkte {
		float:left;
		width:70%;
		width:65%;
		margin-top:0;
		padding-top:0;
	}

	#Suchbegriff { width:210px; }

	#OrderFormMarginal {
		display:block;
		float:right;
		width:25%;
	}

	#OrderFormContainer {
		float:left;
		width:70%;
	}

	#OrderForm label {
		min-width:31%;
	}
	
	#OrderForm input {
		width:50%;
	}

	#kopfnavigation a { color: #550000; text-decoration:none; display:inline-block; padding:1% 2.5%; -moz-hyphens:none; -o-hyphens:none; -webkit-hyphens:none; -ms-hyphens:none; -hyphens:none; }
	#kopfnavigation a { color: #550000; text-decoration:none; display:inline-block; padding:0% 2.5% 1% 2.5%; -moz-hyphens:none; -o-hyphens:none; -webkit-hyphens:none; -ms-hyphens:none; -hyphens:none; }
	
	.ui-autocomplete {
		max-width:380px;
		width:380px;
	}
	img.downloadthumb { width:90%; max-width:200px; }
	
	h1 { font-size:210%; line-height:130%; }
	h2 { font-size:150%; line-height:120%; }
	h3 { font-size:120%; }
	h4 { font-size:110%; }
	h1.Artikelnamen { font-size:190%; line-height:130%; }
	
	#logo {
		/*min-height:120px;*/
		/*min-height:5.9em;*/
	}
	#logo.fixed img {
		min-width:270px;
	}
}

@media only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 760px) {
	#kopfnavigation a { color: #550000; text-decoration:none; display:inline-block; padding:10px 10px; -moz-hyphens:none; -o-hyphens:none; -webkit-hyphens:none; -ms-hyphens:none; -hyphens:none; }
}

@media only screen and (min-width: 1281px) {

  /* Large screen, non-retina */
  /* Großer PC Monitor und Tablets */
  /* Hier steht nur noch ganz Spezielles für die hohe Auflösung. Alles Wesentliche steht weiter oben bei 700px. */

	#farbbalkenfueraufloesung { background-color:blue; }
	body { font-size:1.2em; }
	#topofpageanker { 
	}

	#LoginBild {
		right:1.35em;
	}
	#LoginBild img {
		width:80%;
	}

	#kopf { 
		width:80%;
		/*height:148px;
		max-height:150px;*/

		-webkit-transition:none; /* Verzögerung der Einblendung 0.05s */
		-moz-transition:none;
		-o-transition:none;
		-ms-transition:none;
		transition:none;
	}
	#kopf.fixed { 
		height:80px;
		max-height:80px;
	}	
	#kopfnavigation { display:none; }
	#kopfnavigationLang {
		display:block;
		/*margin-top:3.5%;*/
		margin-top:0.5em;
		min-width:55%;
		max-width:800px;
		float:right;
		text-align:right;
		font-size:0.8em;
		color:#550000;
	}
	#kopfnavigationLang a { color: #550000; text-decoration:none; display:inline-block; padding:1.5% 2.2% 1.5% 2.2%; }
	#kopfnavigationLang a:link { color: #550000; text-decoration:none; }
	#kopfnavigationLang a:visited { color: #550000; text-decoration:none; }
	#kopfnavigationLang a:active { color: #a8101b; text-decoration:none; }
	#kopfnavigationLang a:hover { color: #a8101b; text-decoration:none; }
	#kopfnavigationLang a:focus { color: #a8101b; text-decoration:none; }

	#kopfnavigationLang.fixed a { padding:0% 2.2% 1.5% 2.2%; }

	#logo img {
		width:100%;
		max-width:460px; !important
	}
	#abstandkopfcontent {
		height:250px;
	}
	#content { 
		width:80%;
	}
	
	#toplink {
		width:80%;
		padding:0% 0%;
		/*max-width:900px;*/
		margin-left:auto;
		margin-right:auto;
	}
	#fuss {
		width:76%;
		padding:0% 2% 2% 2%;
		margin-left:auto;
		margin-right:auto;
	}
	#fussCopyright {
		width:76%;
		padding:0% 4%;
		/*max-width:900px;*/
		margin-left:auto;
		margin-right:auto;
	}

	#Search {
		margin-top:-205px;
	}

	#Suchbegriff { width:220px; }
	
	div.HomeBox {
		margin-right:6%;
	}

	div.HomeBox:nth-of-type(4) { margin-right:6%; }
	
	#merrychristmas { 
		top:160px;
		left:2%;
	}
	
	#merrychristmas img { 
		width:80%;
	}
	
	img.downloadthumb { max-width:250px; }
	
	.divTd {
		min-width:200px;
	}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1281px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1281px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1281px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1281px),
only screen and (                min-resolution: 192dpi) and (min-width: 1281px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1281px) { 

  /* Large screen, retina, stuff to override above media query */

	/*#farbbalkenfueraufloesung { height:15px; background-color:blue; }
	body { font-size:2em; }*/

}




@media only screen and (min-width: 1581px) {

  /* Large screen, non-retina */
  /* Großer PC Monitor und Tablets */
  /* Hier steht nur noch ganz Spezielles für die hohe Auflösung. Alles Wesentliche steht weiter oben bei 700px. */

	#LoginBild {
		right:2.3em;
	}

	#kopfnavigationLang { 
		font-size:0.8em;
		margin-top:0.3em;
	}
	#kopfnavigationLang a { padding:1% 2.5%; }
	#kopfnavigationLang a { padding:1.5% 2.5% 1% 2.5%; }
	#kopfnavigationLang.fixed a { padding:0% 2.5% 1% 2.5%; }
	.divTd {
		min-width:250px;
	}
	#logo img {
	}
}



@media only screen and (min-width: 1940px) {

  /* Large screen, non-retina */
  /* Großer PC Monitor und Tablets */
  /* Hier steht nur noch ganz Spezielles für die hohe Auflösung. Alles Wesentliche steht weiter oben bei 700px. */

	#farbbalkenfueraufloesung { height:5px; background-color:yellow; }
	body { font-size:1.4em; }
	
	#topofpageanker { 
	}
	#kopf { 
		width:1600px;
		/*height:170px;
		max-height:170px;*/
	}
	#kopfnavigationLang {
		min-width:55%;
		max-width:1000px;
		font-size:0.75em;
		color:#550000;
	}
	#kopfnavigationLang a { padding:1% 2.5%; }
	#kopfnavigationLang a { padding:1.5% 2.5% 1% 2.5%; }
	#kopfnavigationLang.fixed a { padding:0% 2.5% 1% 2.5%; }
	#content { 
		width:1600px;
	}
	#toplink {
		width:1600px;
		padding:0% 0%;
		/*max-width:900px;*/
		margin-left:auto;
		margin-right:auto;
	}
	#LoginBild {
		right:2.5em;
	}
	#LoginBild img {
		width:100%;
	}
	#fuss {
		width:1540px;
		padding:0% 30px 30px 30px;
		margin-left:auto;
		margin-right:auto;
	}
	#fussCopyright {
		width:1540px;
		padding:0% 30px;
		/*max-width:900px;*/
		margin-left:auto;
		margin-right:auto;
	}

	#Suchbegriff { width:250px; }

	#Search {
		margin-top:-205px;
	}
	div.HomeBox {
		margin-right:6%;
	}

	div.HomeBox:nth-of-type(4) { margin-right:6%; }
	
	#merrychristmas { 
		top:120px;
		left:6%;
	}
	
	#merrychristmas img { 
		width:100%;
	}
	img.downloadthumb { width:80%; max-width:300px; }
	
	.divTd {
		min-width:302px;
	}

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1940px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1940px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1940px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1940px),
only screen and (                min-resolution: 192dpi) and (min-width: 1940px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1940px) { 

  /* Large screen, retina, stuff to override above media query */

	#farbbalkenfueraufloesung { height:15px; background-color:yellow; }
	body { font-size:3em; }

}

@media only screen and (min-width: 2400px) {
	body {
		background-image:url(../images_templates/bg_rechts.png); background-position:right bottom; background-repeat:no-repeat; background-attachment:fixed;
	}

}