/* ----- CSS Erythrozyten.net - Firma DUPLICON, 2021 -----*/
/* nunito-italic - latin */
body { margin:0; padding:0; font-size:120%; line-height:160%; font-family:Segoe, "Segoe UI", "sans-serif"; text-align:left; color:#111; background:#66B1EF; }
h1 { font-size:200%; line-height:120%; margin:30px 0 12px 0; padding:0; color:#000; }
h2 { font-size:180%; line-height:120%; color:#e00; margin:50px 0 10px 0; padding:0; }
h3 { font-size:150%; line-height:120%; color:#333; margin:40px 0  8px 0; padding:0; }
h4 { font-size:130%; line-height:120%; color:#234; margin:20px 0  6px 0; padding:0;}
p  { margin:2px 0 13px 0; }
ul { margin:0 0 0 1%; padding:0 0 8px 20px; list-style-type:none; list-style-image:url('https://www.erythrozyten.net/bilder/pfeil.png') }
li { margin:0; padding:4px 0;}
table   { margin:10px 1% 30px 2%; padding:0; font-size:90%; }
td      { border-bottom:#ccc 1px solid; }
a       { color:#33f; text-decoration:none; font-weight:bold; }
a:hover { color:#00c; text-decoration:underline; }
img     { max-width:100%; height:auto; border:0; }
iframe  { max-width:100%; max-height:auto; }

.page   { width:100%; max-width:1160px; margin:0 auto; padding:0; background-color:#fff; }
.header { margin:0; padding:0; background-color:#fff; height:78px; }
.logo   { margin:0; padding:0 0 0 36px; float:left; line-height:0; }
.logo img   { width:100%; max-width:363px; height:auto; }
#content    { width:92%; max-width:1100px; margin:0; padding:0 4%; }
.footer     { margin:20px 4% 0 4%; padding: 0 0 50px 0; }

.content_menu    { width:25%; min-width:280px; float:right; text-align:left; margin:0 0 20px 50px; border:1px solid #e00; }
.content_menu p  { color:#fff; background-color:#e00; font-weight:bold; margin:0 !important; padding:3px 10px 4px 10px !important; }
.content_menu ul { margin:5px 0 0 20px; padding:4px 0 8px 10px; list-style-image:none; }
.content_menu li { padding:0 0 4px 4px; border-top:#fff 1px solid; list-style-image:url('https://www.erythrozyten.net/bilder/pfeil.png'); }

.blutgruppenrechner { width:100%; height:auto; text-align:center; font-size:100% !important; }
.bg_spalte   { width:45%; text-align:center; padding:0; margin:0; }
.bg_table    { width:100%; max-width:440px; margin:0; font-weight:bold; font-size:100% !important; border:#ddd 1px solid; }
.bg_table td { border:#ddd 1px solid; padding:0; }
.bg_header  { background-color:#ddd; }
.bg_A       { background-color:#bef; border:#69c 2px solid; }
.bg_B       { background-color:#fbb; border:#c44 2px solid; }
.bg_AB      { background-color:#fbf; border:#a6c 2px solid; }
.bg_O       { background-color:#efd; border:#ab4 2px solid; }
.bg_neutral { background-color:#eee; border:#aaa 2px solid; }
.bg_info { border:#aaa 2px solid; padding:10px; margin:20px; }

.bg-button         { text-align:center; margin:0; font-weight:bold; cursor:pointer; background-color:#33f; color:#fff; border-radius:10px; padding:4px 11px; display:inline-block; }
.bg-button:hover { background-color:#f00 !important; color:#fff !important; text-decoration:none  !important; }
.bg-linien { padding:0; margin:0; }

.table_no_border    { border:#fff 1px solid !important; font-weight:bold; margin: 0 auto; font-size:100% !important; }
.table_no_border td { border:#fff 1px solid !important; margin:0; padding:0; }
.visible   { display:block; }
.invisible { display:none; }

/* Navigation, Reset */
input#responsive-nav, label.responsive-nav-label { display:none; }
.nav, .nav a, .nav ul, .nav li, .nav div, .nav form, .nav input { margin: 0; padding: 0; border: none; outline: none; }
.nav a { text-decoration: none; }
.nav li { list-style: none; }
.nav > li > div { opacity: 0; visibility: hidden; overflow: hidden; }

/* hide the checkbox and the label */
.responsive-navigation { display:block; width:100%; background-color:#e00; height:35px; }
input#responsive-nav { display:none; }
label.responsive-nav-label { display:none; cursor:pointer; color:#fff; font-weight:normal; line-height: 35px; }
label.responsive-nav-label span { margin:0 10px 0 20px; }

.nav { display:inline-block; width:100%; position:relative; cursor: default; z-index: 500; background-color:#e00; }
.nav > li { display: block; float: left; }

/* Menu Links */
.nav > li > a { position: relative; top:0; display: block; z-index: 510; height: 35px; padding: 0 18px; line-height:35px; font-weight:bold; color:#fff;	background:#e00; }
.nav > li:hover > a { background: #300; }
.nav > li:first-child > a { border-left: none; }

/* Menu Dropdown */
.nav > li > div { position: absolute; display: block; width: 100%; max-width:1096px; top:35px; left:0;
    opacity: 0; visibility: hidden; overflow: hidden;
    background: #fff; border:#333 2px solid;
	box-shadow: 1px 3px 2px rgba(0, 0, 0, 0.3);
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}
.nav > li:hover > div { opacity: 1; visibility: visible; overflow: visible; }
.nav .nav-column { float: left; padding: 6px 40px 5px 20px; margin:13px 0 13px 0; }
.nav .nav-column li a { display: block; line-height: 150%; font-weight: bold; color: #e00; padding:5px 0; margin:0; }
.nav .nav-column li a:hover { color: #000; }
.nav .nav-column-right { padding:0; margin:0; }
.nav .nav-column-right p { padding:20px 40px 8px 0; margin:0; }
.nav .nav-column-right img { float:left; padding:0px; margin:20px 20px 0 40px; }
.teaser-headline { font-weight:bold; color:#e00; }


/* Declarations for the responsive menu */
@media (max-width: 980px) {
	.responsive-navigation { height: 40px; }
	label.responsive-nav-label { display:block; line-height:40px; }
	.nav { position:absolute; top:-9999px; }
	input#responsive-nav[type=checkbox]:checked ~ .nav { position:relative; top:0; }

	.nav > li { float:none !important; width:100% !important;  }
	.nav > li > a { position: relative; display: block; z-index: 510; height: 40px; line-height: 40px; }
	.nav > li > div       { opacity: 0; visibility: hidden; overflow: hidden;
    	background: #ffffff; border:none; border-radius:0; box-shadow: 0; padding:9px 0; 
    	-webkit-transition: none;
    	-moz-transition: none;
    	-o-transition: color 0 ease-in;
    	-ms-transition: none;
		transition: none; 
	}
	.nav > li > div > li { opacity: 0; visibility: hidden; overflow: hidden; padding:5px 0; }
	.nav > li:hover > div { opacity: 1; visibility: visible; overflow: visible; position:relative; top:0; z-index:600; }
	.nav .nav-column { float: none; width: 100%; margin:0; padding:0; }
	.nav .nav-column li { padding:5px 0 5px 20px; }
	.nav .nav-column-right { display:none; }
}

.breadcrumb { margin:20px 0 0 0; padding:0; font-size:90%; color:#666; }
.breadcrumb ol { margin:0; padding:0; }
.breadcrumb li { float:left; padding:1px 5px 1px 1px; margin:0 10px; }
.breadcrumb li a { font-weight:normal; }
.breadcrumblist { float:left; margin:0 15px 0 0; }

.clear      { clear:both; }
.clear_30   { clear:both; height:30px; }

.img_left   { float:left;  text-align:center; padding:5px 40px 20px 0; margin:0; }
.img_right  { float:right; text-align:center; padding:5px 0 20px 40px; margin:0; }
.img_center { float:none;  text-align:center; padding:15px 0 40px 0; margin:0; }
.img_text   { font-size:90%; line-height:130%; color:#666; font-style:italic; }

.sitelinks  { border:#f00 1px solid; margin:0 0 20px 20px; padding:10px; float:right; line-height:180%; }
.sitelinks span  { margin:0; padding:0; }
.sitelinks ul { margin:0; padding:0; list-style-image:none; }

.left        { float:left; }
.right       { float:right; }
.center      { clear:both; margin:0 auto; text-align:center;  }


.datenschutzhinweis { bottom:20%; left:20%; width:60%; height:auto; position:fixed; z-index:990; border:#111 3px solid; box-shadow:7px 10px 9px #333; margin:0; padding:30px; background-color:#f0f0f9; text-align:center; }
.datenschutzhinweis h2 { color:#000; padding:0; margin:0; }
.datenschutzhinweis a, a:hover { color:#00f; }
.dsh_ok         { }
.dsh_ok a       { color:#fff; background-color:#090; padding:7px 15px 9px 15px; border:#060 3px solid; border-radius:12px; }
.dsh_ok a:hover { color:#090; background-color:#fff; }
.dsh_border { padding:5px; border:#e00 3px solid; background-color: #fff; }

.video_frame { text-align:center; margin:16px 0; padding:4px; border:#999 1px solid; width:auto; background-color:#ddd; }
.video_box { font-style:italic; padding:0; margin:0; font-weight:normal; }

.amazon-button         { text-align:right; margin:5px 0 18px 0; font-weight:bold; }
.amazon-button a       { background-color:#33f; color:#fff; border:#00f 2px solid; border-radius:12px; padding:7px 9px; }
.amazon-button a:hover { background-color:#f11; color:#fff; border:#c00 2px solid; }

.produkttabelle        { font-size:86%; line-height:120%; margin:0 0 20px 0; }
.produkttabelle td     { border-bottom:#aaa 1px solid; padding:6px 0; vertical-align:top; }
.produkttabelle h3     { font-size:110%; line-height:130%; color:#222; font-weight:bold; margin:0; padding:0 6px 0 0; border:none; }
.produkttabelle p      { padding:0; margin:0 0 10px 0; }
.produkttabelle span   { padding:0; margin:0 0 10px 0; }
.produkttabelle td ul  { margin:0 0 0 10px; padding:0 0 15px 9px; }
.produkttabelle-header { background-color:#fcc; color:#111; text-align:center; }

.blutgruppe-header { background-color:#fcc; color:#111; text-align:left; font-weight:bold;  }

.hinweis      { background-color:#fee; border:#e00 2px solid; padding:1% 2%; margin:20px 3%; }
.hinweis p    { padding:0; margin:0; line-height:140%; font-style:italic; }

.search       { padding:0; margin:22px 20px 0 0; float:right;}
.searchfield  { margin:1px 0 0 0; padding:0 0 0 4px; width:250px; height:28px; border:#f00 1px solid; display:inline; font-size:110%; }
.submitbutton { margin:0; padding:0; width:38px; height:32px; background-image:url('https://www.erythrozyten.net/bilder/search-button.png'); border:#fff 1px solid; cursor:pointer; float:right; }

.searchresult      { margin:0 0 25px 0; font-size:90%; line-height:120%; }
.searchresult h2   { margin:0; padding:0; border:none; }
.searchresult h2 a { font-size:80%; line-height:120%; text-decoration:none; }
.searchresult h2 a:hover { text-decoration:underline; }
.searchresult p    { margin:0; padding:0; }
.searchresult .search_url { margin:0 0 3px 0 !important; padding:0; color:#090; }
.search_thumb      { float:left; margin:0 10px 0 0; padding:0; }
.search_img        { padding:1; border:#bbb 1px solid; }

@media (max-width:600px) {
	body { font-size:106%; line-height:170%; }
	h1 { font-size:140%; }
	table { margin:0; padding:2px; }
	.page   { width:100%; margin:0; padding:0; }
	.search { padding:0; margin:16px 5px; float:none; }
	.search { display:none; visibility:hidden; } 
	.header { width:100%; margin:0; padding:0; }
	.logo   { float:none; }
	.img_left    { float:none; padding:0; margin:0; }
	.img_right   { float:none; padding:0; margin:0; }
	.left    { float:none; }
	.right   { float:none; }
	.produkttabelle { display:none; }	
	.datenschutzhinweis { top:5%; left:1%; width:97%; height:90%; position:fixed; z-index:990; border:#f00 2px solid; margin: 0; padding:0; font-size:90%; line-height:140%; overflow:hidden; }
	.datenschutzhinweis p { margin:0; padding:10px; }
	.content_menu  { width:90%; min-width:280px; float:none; text-align:left; margin:10px auto; border:1px solid #e00; }
	.bg_table   { width:100%; min-width:375px; }
	.bg_spalte  { width:100%; padding:0; margin:0; }
}


/* Lightbox Styles */
#lightboxOverlay, #lightbox { z-index: 999 !important; }
.slbOverlay, .slbWrapOuter, .slbWrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
.slbOverlay { overflow: hidden; z-index: 2000; background-color: #000; opacity: 0.7; -webkit-animation: slbOverlay 0.5s; -moz-animation: slbOverlay 0.5s; animation: slbOverlay 0.5s; }
.slbWrapOuter { overflow-x: hidden; overflow-y: auto; z-index: 2010; }
.slbWrap { position: absolute; text-align: center; }
.slbWrap:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }

.slbContentOuter { position: relative; display: inline-block; vertical-align: middle; margin: 0px auto; padding: 0 1em; box-sizing: border-box; z-index: 2020; text-align: left; max-width: 100%; }
.slbContentEl .slbContentOuter { padding: 5em 1em; }
.slbContent { position: relative; }
.slbContentEl .slbContent { -webkit-animation: slbEnter 0.3s; -moz-animation: slbEnter 0.3s; animation: slbEnter 0.3s; background-color: #fff; box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.4); }
.slbImageWrap { -webkit-animation: slbEnter 0.3s; -moz-animation: slbEnter 0.3s; animation: slbEnter 0.3s; position: relative; }
.slbImageWrap:after { content: ""; position: absolute; left: 0; right: 0; top: 5em; bottom: 5em; display: block; z-index: -1; box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.6); background-color: #FFF; }
.slbDirectionNext .slbImageWrap { -webkit-animation: slbEnterNext 0.4s; -moz-animation: slbEnterNext 0.4s; animation: slbEnterNext 0.4s; }
.slbDirectionPrev .slbImageWrap { -webkit-animation: slbEnterPrev 0.4s; -moz-animation: slbEnterPrev 0.4s; animation: slbEnterPrev 0.4s; }

.slbImage { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 0; margin: 0 auto; }

.slbCaption { display: inline-block; max-width: 100%; text-overflow: ellipsis; position: absolute; left: 0; right: 0; padding: 0; color: #fff; text-align: center; background-color:#111; border-top:#777 1px solid; }

.slbCloseBtn, .slbArrow { margin: 0; padding: 0; border: 0; cursor: pointer; background: none; }
.slbCloseBtn::-moz-focus-inner, .slbArrow::-moz-focus-inner { padding: 0; border: 0; }
.slbCloseBtn:hover, .slbArrow:hover { opacity: 0.5; }
.slbCloseBtn:active, .slbArrow:active { opacity: 0.8; }
.slbCloseBtn { -webkit-animation: slbEnter 0.3s; -moz-animation: slbEnter 0.3s; animation: slbEnter 0.3s; font-size: 3em; 
	line-height: 140%; position: absolute; right: 10px; top: -50px; color: #fff; color: rgba(255, 255, 255, 0.7); text-align: center; }

.slbLoading .slbCloseBtn { display: none; }
.slbLoadingText { font-size: 1.4em; color: #fff; color: rgba(255, 255, 255, 0.9); }

.slbArrows { position: fixed; top: 50%; left: 0; right: 0; }
.slbLoading .slbArrows { display: none; }
.slbArrow { position: absolute; top: 50%; margin-top: -5em; width: 5em; height: 10em; opacity: 0.7; text-indent: -999em; overflow: hidden; }
.slbArrow:before { content: ""; position: absolute; top: 50%; left: 50%; margin: -0.8em 0 0 -0.8em; border: 0.8em solid transparent; }
.slbArrow.next { right: 0; }
.slbArrow.next:before { border-left-color: #fff; }
.slbArrow.prev { left: 0; }
.slbArrow.prev:before { border-right-color: #fff; }

@-webkit-keyframes slbOverlay {
  from { opacity: 0; }
  to   { opacity: 0.7; }
}
@-moz-keyframes slbOverlay {
  from { opacity: 0; }
  to   { opacity: 0.7; }
}
@keyframes slbOverlay {
  from { opacity: 0; }
  to   { opacity: 0.7; }
}
@-webkit-keyframes slbEnter {
  from { opacity: 0; -webkit-transform: translate3d(0, -1em, 0); }
  to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slbEnter {
  from { opacity: 0; -moz-transform: translate3d(0, -1em, 0); }
  to   { opacity: 1; -moz-transform: translate3d(0, 0, 0); }
}
@keyframes slbEnter {
  from { opacity: 0; -webkit-transform: translate3d(0, -1em, 0); -moz-transform: translate3d(0, -1em, 0); -ms-transform: translate3d(0, -1em, 0); -o-transform: translate3d(0, -1em, 0); transform: translate3d(0, -1em, 0); }

  to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slbEnterNext {
  from { opacity: 0; -webkit-transform: translate3d(4em, 0, 0); }
  to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slbEnterNext {
  from { opacity: 0; -moz-transform: translate3d(4em, 0, 0); }
  to   { opacity: 1; -moz-transform: translate3d(0, 0, 0); }
}
@keyframes slbEnterNext {
  from { opacity: 0; -webkit-transform: translate3d(4em, 0, 0); -moz-transform: translate3d(4em, 0, 0); -ms-transform: translate3d(4em, 0, 0); -o-transform: translate3d(4em, 0, 0); transform: translate3d(4em, 0, 0); }
  to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
@-webkit-keyframes slbEnterPrev {
  from { opacity: 0; -webkit-transform: translate3d(-4em, 0, 0); }
  to   { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@-moz-keyframes slbEnterPrev {
  from { opacity: 0; -moz-transform: translate3d(-4em, 0, 0); }
  to   { opacity: 1; -moz-transform: translate3d(0, 0, 0); }
}
@keyframes slbEnterPrev {
  from { opacity: 0; -webkit-transform: translate3d(-4em, 0, 0); -moz-transform: translate3d(-4em, 0, 0); -ms-transform: translate3d(-4em, 0, 0); -o-transform: translate3d(-4em, 0, 0); transform: translate3d(-4em, 0, 0);}
  to   {opacity: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}