/* ----- CSS Firma DUPLICON, 2005 ----- */
body { background-color:#fff; margin:0; font-size:120%; line-height:170%; font-family: 'Open Sans', sans-serif, Arial; color:#123; }
h1 { font-size:210%; line-height:120% !important; margin:20px 0; padding:0; }
h2 { font-size:170%; line-height:120% !important; margin:50px 0 20px 0; padding:9px 0; border-bottom:#aaa 1px solid; }
h3 { font-size:140%; margin:10px; }
h4 { font-size:130%; margin:0; }
p { margin:10px 0 20px 0; }
a { color:#00f; }
a:hover { color:#006; }
h1 a { color:#fff; font-weight:normal; }
ul { margin: 4px 10px; padding:1px 20px 20px 20px; list-style-type:none; list-style-image:url(images/arrow.png); }
li { margin: 0; padding:4px 10px; }
img { max-width:100%; height:auto; }
table { width:100%; max-width:100%; margin:8px 0 20px 0; padding:0; border-top:#bbb 1px solid; border-right:#fff 0px solid; border-bottom:#fff 0px solid; border-left:#bbb 1px solid; }
td { padding:4px; vertical-align:middle; border-top:#fff 0px solid; border-right:#bbb 1px solid; border-bottom:#bbb 1px solid; border-left:#fff 0px solid; }
/* 
----- Layout -----
*/
.page { width:100%; max-width:1100px; margin:0 auto; padding:0; overflow:hidden; }
.header { width:100%; height:77px; margin:0; padding:0; text-align:center; } 
.header a:hover { line-height:0px; text-decoration:none; } 
.logo { margin:0; padding:0; border:0; }
.content { width:75%; max-width:750px; float:right; margin:10px 0 0 0; }

.st_box { padding:0; width:302px; height:296px; display:table; margin:0 auto; }
.st_button { padding:0; margin:0; width:74px; height:74px; display:table-cell; }
.st_image { padding:0; margin:0; width:150px; height:150px; display:table-cell; }
.st_deli_h { padding:0; margin:0; width:150px; height:74px; display:table-cell; text-align:center; }
.st_deli_v { padding:0; margin:0; width:74px; height:36px; display:table-cell; vertical-align: middle; }

.menu { width:25%; max-width:250px; float:left; margin:30px 0 0 0; border-right:#ccc 1px dashed; }
.menu ul { margin:0 0 8px 0; padding:0; list-style-type:none; list-style-image:none; font-weight:bold; }
.menu li { margin:0; padding:4px 30px 4px 0; border-bottom:#ccc 1px dashed }
.menu p { padding:0 30px 0 4px; }
.menu a { text-decoration:none; }

/* hide the checkbox and the label */
input#responsive-nav,
label.responsive-nav-label { display:none; float:right; }

.second-nav { width:100%; height:38px; line-height:170%; background-color:#222; margin:0 0 20px 0; padding:0; }
nav { width:100%; max-width:1100px; margin:0 auto; padding:0; }
nav ul { margin:0; padding:0; color:#ccc; }
nav li { margin:0 1px; padding:0; font-weight:bold; line-height:160%; }
nav a { display:block; text-decoration:none; color:#444; }
nav ul li { background-color:#222; color:#ddd; position:relative; float:left; list-style:none; padding:4px 10px; margin:0; text-decoration:none; }
nav ul li:hover { background-color:#000; color:#fff; text-decoration:none; }
nav ul li a { color:#ddd; padding:0; margin:0; }
nav ul li a:hover { color:#fff; text-decoration:none; }

/* Declarations for the responsive menu */
@media (max-width: 1100px) {
	label.responsive-nav-label { position:relative; display:block; padding:4px 12px; background-color:#222; cursor:pointer; color:#fff; }
	label.responsive-nav-label span { margin-right:10px; }
	nav { width:100%; height:auto !important; position:absolute; top:-9999px; padding:10px; margin-bottom:30px; }
	input#responsive-nav[type=checkbox]:checked ~ nav { position:relative; top:0; padding:0 0 10px 0; }
	nav a:after { display:none; }
	nav li { float:none !important; width:100% !important; margin:0; padding:0; }
	nav li:hover { text-decoration:none; }
	nav li a { background-color:#222; color:#ddd; padding:5px 20px !important; }
	nav li a:hover { background-color:#000; color:#fff; text-decoration:none; }
	nav ul li a { background-color:#222; color:#ddd; padding:0; }
	nav ul li a:hover { background-color:#000; color:#fff; }
}

.footer { margin:0 auto; padding:10px 0 30px 0; text-align:center; border-top:#222 1px dashed; }
.clear { clear:both; }
.clear_30 { clear:both; height:30px; }
.center { text-align:center; font-size:90%; margin:0 auto 20px auto; padding:0; }
.sehtestbild { font-size:90%; line-height:140%; text-align:center; border:0; font-style:italic; }
.sehtestbild a, .sehtestbild a:hover { border:0; }
.no_border { }
.img_big { text-align:center; margin:2px 20px 10px 0; padding:10px; background:#fff; }
.invisible { display:none; }

.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; }

.float_left { float:left; font-size:90%; line-height:140%; text-align:center; border:0; font-style:italic; margin:6px 20px 0 0; padding:10px; }
.float_right { float:right; font-size:90%; line-height:140%; text-align:center; border:0; font-style:italic; margin:6px 20px 0 0; padding:10px; }

.btn_start { font-weight:bold; line-height:140%; margin:5px 0; padding:6px 0; background:url(images/btn_weiter.png) no-repeat; border-radius:10px; }
.btn_zurueck { font-weight:bold; line-height:100%; float:left; margin:0; padding:4px 10px 8px 35px; background:url(images/pfeil-links.png) no-repeat; background-position: 9px; border-radius:10px; border:#f66 2px solid; }
.btn_zurueck:hover { border:#f00 2px solid; }
.btn_weiter { font-weight:bold; line-height:100%; float:right; margin:0; padding:4px 40px 8px 10px; background:url(images/pfeil-rechts.png) no-repeat; background-position:85px; border-radius:10px; border:#f66 2px solid; }
.btn_weiter:hover { border:#f00 2px solid; }

.float_linol { float:left; font-size:10px; line-height:14px; text-align:center; margin:6px 12px 0 0; padding:6px; background:#f4f3ed; border:1px solid #ddd; }

.img_list { float:left; text-align:center; margin:10px 3px 10px 0; width:210px; padding:10px 0; font-size:86%; line-height:120%; }
.img_list_img { width:200px; text-align:center; padding:0; margin:0; }
.img_list_img a:hover { font-size:86%; line-height:120%; }
.img_list_img a img { border:#f00 1px solid; }
.img_list_img a:hover img { border:#00f 1px solid; }

.optiker_suche { background-color:#deedff; border:#ccc 1px solid; margin:12px 0 15px 0; }
.optiker_suche h2 { font-size:130%; color:#444; margin:8px 20px 0 0; padding:0; font-weight:normal;}
.optiker_p { margin:0px 20px 14px 0; padding:0 0 0 10px; border-bottom:#ccc 1px dashed; }
.opt_name { width:100%; max-width:312px; padding:2px; border:#ccc 1px solid; background-color:#fff; font-size:14px; }
.opt_plz { width:100%; max-width:60px; padding:2px; border:#ccc 1px solid; background-color:#fff; font-size:14px; }
.opt_stadt { width:100%; max-width:180px; padding:2px; border:#ccc 1px solid; background-color:#fff; font-size:14px; }
.button { background-color:#c73b03; border:#900 1px solid; font-size:14px; color:#fff; width:100px; }

.sehtest { width:100%; max-width:620px; min-height:440px; background-color:#eee; border:10px #bbb solid; padding:0; margin:0; display:block; }
.sehtest h3 { font-size:16px; height:26px; background-color:#222; padding:7px 7px 3px 7px; margin:0; color:#fff; }
.sehtest p { font-size:14px; padding:10px; text-align:center; }
.sehtest a img { }
.sehtest-top { min-height:90px; display:block; margin:0; }
.sehtest-top-2 { min-height:60px; display:block; margin:0; }
.sehtest-farbtest { width:100%; max-height:380px; margin:10px 10px 0 10px; float:left; }
.sehtest-middle { min-height:200px; display:block; margin:0; }
.sehtest-middle-2 { min-height:230px; display:block; margin:0; }
.farbsehtest-result { font-size:16px; color:#000; padding:4px; background-color:#fff; border:#06F 1px solid; }

.video_frame { text-align:center; font-size:90%; line-height:140%; 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; }


.datenschutzhinweis { bottom:8%; left:20%; width:60%; height:auto; position:fixed; z-index:990; border:#111 3px solid; box-shadow:5px 7px 5px #333; margin:0; padding:20px; 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:#060; padding:7px 15px 9px 15px; border:#060 3px solid; border-radius:12px; font-weight: bold; }
.dsh_ok a:hover { color:#060; background-color:#fff; }
.dsh_border { padding:5px; border:#e00 3px solid; background-color: #fff; }

.produktliste { border-bottom:#99f 1px solid; font-size:90%; line-height:120%; }
.produktliste h3 { padding:4px 0 6px 10px; margin:0; font-size:120%; color:#111; font-weight:bold; }
.produktliste p { padding:4px 0 6px 10px; margin:0; }
.produktliste ul { padding:4px 0 6px 10px; margin:0; list-style-type:none; list-style-image:url(images/arrow.png); }
.produktliste img, a { border:none; }
.produktlistenheader { border-bottom:#99f 1px solid; font-size:90%; line-height:120%; font-style:italic; background-color:#eee; }
.teaser { background-color:#ffb; }

.amazon-button { text-align:center; margin:0 0 18px 0; font-weight:bold; font-size:110%; line-height:140%; }
.amazon-button a { background-color:#fd6; color:#00f; border:#eb3 2px solid; border-radius:10px; padding:4px 7px; }
.amazon-button a:hover { background-color:#c60; color:#fff; border:#930 2px solid; }

.produkttabelle { font-size:86%; line-height:140%; margin:0 0 20px 0; border: #fff 1px solid; }
.produkttabelle td { padding:3px; vertical-align:top; border-bottom:#aaa 1px solid; border-left:none; border-right:none; }
.produkttabelle h3 { font-size:110%; line-height:160%; color:#222; font-weight:bold; margin:0; padding:0; border:none; }
.produkttabelle td ul { margin:0 0 0 10px; padding:0 0 8px 5px; }
.produkttabelle img { max-width:200px; }
.produkttabelle-header { background-color:#eee; color:#555; font-weight:bold; font-style:italic; }

@media (max-width:800px) {
	.amazon-button a { background-color:#fc3; color:#00f; border:0; border-radius:0; padding:0; }
	.amazon-button a:hover { background-color:#c60; color:#fff; border:0; }
}

.search { padding:0; margin:10px 0; }
.search form { padding:0; margin:0; }
.search form input { padding:0; margin:0; }
.searchfield { margin:0; padding:5px; width:200px; height:27px; border:#000 1px solid; float:left; }
.submitbutton { margin:4px 0 0 0; padding:0; width:40px; height:29px; background-image:url(images/search-button.png); border-top:#111 1px solid; border-right:#111 1px solid; border-bottom:#111 1px solid; cursor:pointer; }

.searchresult { margin:0 0 25px 0; font-size:90%; line-height:120%; }
.searchresult h2 { margin:0; padding:0 0 2px 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; padding:0; color:#090; }
.search_thumb { float:left; margin:0 10px 0 0; padding:0; }
.search_img { padding:1; border:#bbb 1px solid; }

.dioptrien-simulator-box { box-sizing:border-box; width:100%; margin:0 auto; position:relative; }
.dioptrien-simulator-box figcaption { box-sizing: border-box; width:100%; margin:0 auto; position:relative; }
.dioptrien-bild { max-width:100%; position:absolute; left:0; top:0; }
.regler-sphaere { width:96%; max-width:400px; margin:5px auto 5px auto !important; border:#f00 3px solid; padding:3px; border-radius:12px; }
.red { color:#f00; }
.green { color:#090; }
.height556 { height:556px; }
.height500 { height:500px; }
.height420 { height:420px; }

.kliniklist li { border-bottom:#f90 2px dashed; padding:10px; }
.laserortelist { border-bottom:#f90 2px dashed; padding:8px 0; margin:0; }

.ad_in_article { width:1100px; height:430px; display:table-cell; vertical-align:middle; margin:30px 0; padding:30px 0; border-top:#999 2px dashed; border-bottom:#999 2px dashed; }
.google-auto-placed { margin:20px 0; padding:20px 0; border-top:#999 2px dashed; border-bottom:#999 2px dashed; }

@media (max-width:801px) { 
.ad_in_article { width:640px; margin:20px 0; }
}
@media (max-width:641px) { 
.ad_in_article { width:500px; }
}
@media (max-width:501px) { 
.ad_in_article { width:350px; }
}
@media (max-width:351px) { 
.ad_in_article { width:300px; }
}

@media (max-width:1000px) {
	body { font-size:110%; line-height:160%; }
	h1   { font-size:110%; line-height:120%; }
	h2   { font-size:150%; line-height:140%; }
	h3   { font-size:130%; line-height:130%; }
	h4   { font-size:110%; line-height:120%; }
	.content { width:96%; max-width:900px; float:none; margin:0 auto; }
	.menu { width:96%; max-width:900px; float:none; margin:0 auto; }
	.menu li { margin:0; padding:8px 30px 8px 4px; border-bottom:#ccc 1px dashed }
}
@media (max-width:700px) {
	body { font-size:100%; line-height:150%; }
	h1 { font-size:100%; }
	h2 { font-size:130%; }
	h3 { font-size:120%;}
	h4 { font-size:110%; }
	.logo_2 { display:none; }
	.menu li { margin:0; padding:11px 30px 11px 4px; border-bottom:#ccc 1px dashed }
	iframe { width:100%; pading:0; margin:0; border:0; }
	.float_left { float:none; width:100%; pading:0; margin:0; border:0; }
	.float_right { float:none; width:100%; pading:0; margin:0; border:0; }
	.img_left { float:none; width:100%; pading:0; margin:0; border:0; }
	.img_right { float:none; width:100%; pading:0; margin:0; border:0; }
}

@media (max-width:500px) {
	h2 { margin:16px 0 9px 0;}
 .float_right { float:none; padding:0; margin:5px; background:none; border:none; }
 .float_left { float:none; padding:0; margin:5px; background:none; border:none; }
 .img_right { float:none; padding:0; margin:5px; background:none; border:none; }
 .img_left { float:none; padding:0; margin:5px; background:none; border:none; }	
	.datenschutzhinweis { bottom:5%; left:1%; width:97%; height:auto; position:fixed; z-index:990; margin: 0; padding:0; font-size:90%; line-height:140%; overflow:hidden; }
	.datenschutzhinweis p { margin:0; padding:10px; }
}

@media (max-width:400px) {
	.dioptrie-wert { font-weight:bold; border:#03F 2px solid; background-color:#fff; padding:2px 1px; font-size:105%; line-height:120%; width:120px; position:absolute; left:240px; top:250px; text-align:center; z-index:21; visibility:visible; }
}
/* Lightbox Styles */
#lightboxOverlay, #lightbox { z-index: 99999 !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);}
}