/* HTML5 ✰ Boilerplate
* ==|== normalize ==========================================================
*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
::-moz-selection { background: #efefef; color: #444; text-shadow: none; }
::selection { background: #efefef; color: #444; text-shadow: none; }
h1, h2, h3, h4, h5, h6 { padding: 0px; margin: 0px; }
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; outline: none; }
button, input { line-height: normal; *overflow: visible; outline: none; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* ==|== non-semantic helper classes ======================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
#main figure img {width: 100%; height: auto;}
.custom img {width: 100%; height: auto;}
/* ==|== media queries ====================================================== */
@media only screen and (min-width:480px) { }
@media only screen and (min-width:768px) { }
/* ==|== print styles ======================================================= */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }
a, a:visited { text-decoration: underline; }
a[href]:after { content: " ("attr(href) ")"; }
abbr[title]:after { content: " ("attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
.clearfix { clear: both; }
.floatleft { float: left; }
/* ----------------------------------------------------------------------
Global
---------------------------------------------------------------------- */
body { font-family: 'Open Sans', sans-serif; font-size: 100%; font-style: normal; font-weight: normal; }
#main p { padding: 0 0 15px 0; margin: 0px; color: #747474; line-height: 25px; font-size: 16px; }
#main a { color: #000; border-bottom: 1px dotted #000; }
h1 { color: #535353; font-size: 35px; font-weight: 100; margin: 0 0 20px; }
h2 { color: #535353; font-size: 33px; font-weight: 100; letter-spacing: -0.02em; margin: 0 0 25px; }
h2 span { font-weight: bold; }
h3 { }
a { text-decoration: none; }
a.logo { background: url("/files/dipos.de/theme/img/dipos-logo.png") no-repeat scroll 0 0 transparent; display: block; float: left; height: 69px; margin: 15px 0 0; overflow: hidden; text-indent: 100%; white-space: nowrap; width: 162px; background-size: 160px auto; }
#main ul { margin: 0 0 20px; padding: 0; }
#main li { font-size: 14px; line-height: 18px; list-style: disc; margin: 0 0 0 20px; padding: 0 0 8px; color: #747474; font-size: 16px; }
.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.col33 { width: 30%; float: left; margin-right: 5%; }
.col33.last { margin-right: 0; }
.col50 { width: 48%; float: left; margin-right: 4%; }
.col50.last { margin-right: 0; }
#main .line { background: url("/files/dipos.de/theme/img/bg-line.gif") repeat-x scroll 0 0 transparent; clear: both; float: none; height: 1px; margin: 50px 0; text-indent: -9999px; }
#main .image_container { margin: 5px 0 0; padding: 0; }
/* ----------------------------------------------------------------------
Header
---------------------------------------------------------------------- */
#image { margin: 0 0 40px 0; }
body #header { margin: 0 0 0; }
#header { height: 93px; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .33); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .33); box-shadow: 0 0 10px rgba(0, 0, 0, .33); background: #fff; }
#header .inside { margin: 0 auto; width: 960px; }
#header nav { float: right; margin: 26px 0 0; }
#header nav a, #header nav span { color: #7d7d7d; font-size: 14px; font-family: 'Asap', sans-serif; font-weight: 700; }
#header nav a:hover, #header nav a.trail, #header nav a.active { color: #444; }
#header nav li { background: url("/files/dipos.de/theme/img/bg-nav-li.gif") no-repeat scroll right 6px transparent; float: left; margin: 0 15px 0 0; padding: 10px 15px 10px 0; }
#header nav li.last { margin: 0; background: none; }
#header ul.level_2 { background: none repeat scroll 0 0 #fff; visibility: hidden; opacity: 0; margin: 0 0 0 -11px; position: absolute; z-index: 1; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; }
#header ul.level_2 li { background: none repeat scroll 0 0 transparent; float: none; margin: 0; padding: 0; }
#header ul.level_2 li.first { padding: 37px 0 0; }
#header li:hover ul { opacity: 1; visibility: visible; }
#header ul.level_2 li a, #header ul.level_2 li span { border-bottom: 1px solid #EFEFEF; color: #7D7D7D; display: block; font-size: 13px; font-weight: 100; padding: 9px 15px 9px 15px; text-transform: none; }
#header ul.level_2 li a:hover, #header ul.level_2 li a.active { background: #efefef; }
/* ----------------------------------------------------------------------
Container - Main
---------------------------------------------------------------------- */
#main .inside { margin: 0 auto; width: 960px; }
#main .round.col50 img { border-radius: 50%; width: 430px; height: 430px; }
body.displayschutzfolien #main .col50 .caption { font-size: 18px; font-weight: 100; }
#main .col50 .caption { color: #747474; font-size: 12px; line-height: 19px; margin: 14px 0 50px; text-align: center; width: 100% !important; }
/* ----------------------------------------------------------------------
Crystalclear
---------------------------------------------------------------------- */
body.crystalclear h2 span { color: #8e238e; }
/* ----------------------------------------------------------------------
Antireflex
---------------------------------------------------------------------- */
body.antireflex h2 span { color: #8dc641; }
body.antireflex #main a { color: #8dc641; }
/* ----------------------------------------------------------------------
Sidebar
---------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
Formular
---------------------------------------------------------------------- */
label { color: #535353; display: block; font-size: 16px; font-weight: 100; padding: 10px 0 2px; vertical-align: top; width: 100%; }
body.tester .col50 { float: left; margin: 0; width: 50%; }
#main input, textarea, .customSelect { border: 1px solid #CCCCCC; border-radius: 2px 2px 2px 2px; color: #666666; display: inline-block; font-size: 14px; font-weight: 100; background: #fff; height: 30px; padding: 0 8px; vertical-align: middle; width: 299px; font-family: 'Open Sans', sans-serif; margin: 0 0 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset; }
.customSelectHover { cursor: pointer !important; }
.customSelect { height: auto; padding: 7px 8px; width: 382px; background: url("//dipos.de/files/dipos.de/theme/img/form-arrow.gif") no-repeat scroll right 11px #fff; }
textarea { height: 111px; margin: 6px 0 0; padding: 5px 8px 0; }
form h3 { color: #535353; font-size: 22px; font-weight: 100; margin: -31px 0 15px -28px; }
fieldset { background: none repeat scroll 0 0 #F8F8F8; border-radius: 4px 4px 4px 4px; padding: 0 30px 30px; }
fieldset.product { float: left; margin: 0 30px 0 0; width: 400px; }
#main fieldset.product a { color: #535353; display: block; border: none; }
fieldset.contact { float: left; width: 419px; }
legend { color: #535353; font-size: 22px; font-weight: 100; }
option { font-weight: 100; font-size: 14px; padding: 3px 0 3px 5px; }
div.half { float: left; margin: 0 30px 1px 0; }
div.half.last { margin: 0; }
#main div.half input { width: 163px; }
#main div.half .customSelect { width: 163px; }
#product_2 h3 { font-size: 18px; margin: 30px 0 0; }
#product_1 { margin: 0 0 30px; }
#product_2 { background: url("/files/dipos.de/theme/img/form-line.png") repeat-x scroll 0 0 transparent; margin: 0 0 25px; padding: 15px 0 0; }
a.product_2 { margin: 0 0 9px; padding: 0 0 0 0; }
a.product_alt { font-size: 12px; padding: 0 0 0 0; }
a.product_alt i { padding: 0 10px 0 4px; }
#main .explanation { clear: both; padding: 12px 0 0; }
#main .explanation p { font-size: 12px; line-height: 19px; }
#main fieldset .explanation p { width: 368px; }
#main .explanation .reachability-msg p { background: none repeat scroll 0 0 #F1F1F1; border-top: 2px solid #97D825; padding: 12px; }
.reachability-msg { display: none; }
select[disabled] + span { background: #f1f1f1; }
#main .submit_container { }
#main input.submit { background: none repeat scroll 0 0 #97D825; border: medium none; box-shadow: none; color: #FFFFFF; display: block; font-size: 14px; font-weight: 600; height: auto; margin: 15px 0 40px 67px; padding: 8px 18px; width: auto; }
#main p.error { background: #ff0000; color: #fff; padding: 4px 4px 4px 4px; font-weight: 100; font-size: 11px; margin: 0 0 5px 0; width: 171px; line-height: 16px; }
*/
/* ----------------------------------------------------------------------
Footer
---------------------------------------------------------------------- */
#footer { }
#footer a.logo { background: url("/files/dipos.de/theme/img/dipos-logo.png") no-repeat scroll 0 0 transparent; display: block; float: left; height: 69px; margin: 0; overflow: hidden; text-indent: 100%; white-space: nowrap; width: 110px; background-size: 110px auto; }
#footer .inside { border-top: 1px dotted #BDBDBD; margin: 30px auto; padding: 20px 0 0; width: 960px; }
#footer ul { float: right; margin: 0; padding: 0; }
#footer li { color: #7D7D7D; float: left; font-family: 'Asap', sans-serif; font-size: 12px; list-style: none outside none; margin: 7px 15px 0 0; padding: 0; }
#footer li:last-child { margin-right: 0px; }
#footer .addthis_button { float: right; margin: 3px 0 0; }
#footer a { color: #7D7D7D; }
#footer a:hover { border-bottom: 1px dotted #7D7D7D; }
.mob { display: none; }
/* ----------------------------------------------------------------------
Ab 960px
---------------------------------------------------------------------- */
@media only screen
and (max-width:960px) {
#main .inside, #footer .inside, #header .inside { width: 100%; }
#header { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
#header nav { display: none; }
#header nav.active { display: block; }
.mob { display: block; position: absolute; right: 30px; top: 30px; }
.col50 { width: 100%; }
#main p { font-size: 15px; line-height: 23px; }
.mob button { background: none; border: none; }
.mob button i { font-size: 32px; }
#header nav { float: none; position: absolute; background: #fff; top: 84px; width: 100%; z-index: 10; }
#header nav a { border-bottom: solid 1px #efefef; display: block; padding: 15px 0 15px 30px; }
#header nav li { float: none; background: none; margin: 0; padding: 0; }
#header ul.level_2 { visibility: visible; opacity: 1; position: relative; margin: 0; }
#header ul.level_2 li.first { padding: 0; }
#header ul.level_2 li a, #header ul.level_2 li span { padding: 15px 0 15px 40px; }
#container { padding: 0 30px 0 30px }
a.logo { margin: 30px 0 0 30px; }
.ce_text { clear: both; }
h1 { font-size: 25px; }
h2 { font-size: 20px; }
#main .round.col50 img { width: 0%; width: 100%; border-radius: 0px; }
#footer li { float: none; }
#footer { margin: 0 30px 0 30px; padding: 0 0 20px 0; overflow: auto; }
#footer .inside { }
#image { margin: 0 0 1% 0; }
body { background: none !important; }
body.crystalclear #header, body.crystalclear-en #header, body.antireflex #header, body.bezugsquellen #header, body.antireflex-en #header, body.mirror #header, body.secret #header, body.montageanleitung #header, body.impressum #header, body #header { margin: 0 0 30px !important; }
fieldset.product { float: none; width: 100%; margin: 0; padding: 0; background: none; }
body.tester .col50 { float: none; width: 100%; margin: 0; }
div.half { float: none; }
form h3 { margin: 0; }
#main input.submit { margin: 0; width: 100%; font-size: 13px; }
fieldset.contact { padding: 0; margin: 40px 0 0 0; background: none; width: auto; float: none; }
.tester .select { width: 90% !important; }
fieldset.contact input {width: auto!important;}
fieldset.contact .select.reachability {
width: 80%!important;}
}