/* =============================================================
   FONT LOADING
   ============================================================= */

/* Light */
@font-face {
  font-family: 'OpenSans'; src: url('/de/pictures/fonts/OpenSans-Light-webfont.woff') format('woff');
  font-weight: 300; font-style: normal;
}

/* Regular */
@font-face {
  font-family: 'OpenSans'; src: url('/de/pictures/fonts/OpenSans-Regular-webfont.woff') format('woff');
  font-weight: 400; font-style: normal;
}

/* Semibold */
@font-face {
  font-family: 'OpenSans'; src: url('/de/pictures/fonts/OpenSans-Semibold-webfont.woff') format('woff');
  font-weight: 600; font-style: normal;
}

/* Bold */
@font-face {
  font-family: 'OpenSans'; src: url('/de/pictures/fonts/OpenSans-Bold-webfont.woff') format('woff');
  font-weight: 700; font-style: normal;
}


/* =============================================================
   GLOBAL SETTINGS
   ============================================================= */

body { margin: 0px; padding: 0px; font-family: "OpenSans", sans-serif; font-size: 16px; background-color: #FFF; color: #000; }

h1 { font: 33px "OpenSans", sans-serif; margin: 30px 0px 10px 0px; color: #000; font-weight: 400; }
h2 { font: 27px "OpenSans", sans-serif; margin: 22px 0px 10px 0px; color: #000; font-weight: 400; }
h3 { font: 23px "OpenSans", sans-serif; margin: 20px 0px 10px 0px; color: #000; font-weight: 400; }
h4,h5,h6 { font: 21px "OpenSans", sans-serif; margin: 25px 0px 10px 0px; color: #000; }
p { font: 16px/28px "OpenSans", sans-serif; margin: 16px 0px; }

img { display: block; max-width: 100%; height: auto; border: 0px; opacity: 1; transition: all 0.4s ease; }
a:hover img { opacity: 0.85; }
table { border: 0px; }
hr { margin: 8px 0px;  height: 1px; border-top: 1px solid #f0f0f0; border-width: 1px 0px 0px 0px; }
form { margin: 0px; padding: 0px; }
input, select, textarea { font: 17px "OpenSans", sans-serif; }
a:link, a:visited { text-decoration: none; color: #007ad6; }
a:hover, a:active { color: #00A; transition: all 0.3s ease; }


/* =============================================================
   HEADER
   ============================================================= */

header { }
.headercontainer { margin: 0px auto; width: 100%; }
.headercontainer::after { content: " "; display: table; clear: both; }

#logo { margin: 25px; width: 143px; height: 30px; display: block; }

#search { margin: 25px 0px 25px 0px; padding: 0px; }
#search input[type="text"] { font: 16px "OpenSans", sans-serif; }
#searchicon { display: none; }

.separator { border-bottom: 3px solid #e3e3e3; display: block; }
.separator::before, .separator::after { content: " "; display: table; clear: both; }


/* =============================================================
   NAVIGATION
   ============================================================= */

#navigation > a { display: none; }
#navigation .mobilemenu { display: none; }

/* Navigation hide/display */
#navigation > ul { display: none; }
#navigation:target > ul { display: none; }

ul.navbar { display: none; }

ul.sublist { display: none; }



/* =============================================================
   PAGE
   ============================================================= */

.page { margin: 0px; padding: 0px; }

.content { margin: 0px auto 0px auto; padding: 0px 25px 0px 25px; }
.content::after { content: " "; display: table; clear: both; }

.margin-extra { margin: 25px 0px 25px 0px; }
.padding-extra { padding: 25px 0px 25px 0px; }

.color-white { background-color: #fff; }
.color-lightgrey { background-color: #f2f2f2; }
.color-darkgrey { background-color: #e3e3e3; }
.color-cyan { background-color: #00bbee; }
.color-darkred { background-color: #c00304; }

.page-intro { margin: 0px auto 0px auto; padding: 20px 15px 20px 15px; text-align: center;}
.page-intro h1 { font-size: 43px; font-weight: 300; color: #000; margin: 15px auto 0px auto; width: 900px; }
.page-intro p { font-size: 24px; font-weight: 300; line-height: 34px; color: #000; margin: 15px auto 40px auto; width: 900px; }
.color-lightgrey h1 { color: #000 }
.color-lightgrey p { color: #000 }

.page-outro { margin: 0px 0px 0px auto; padding: 20px 15px 20px 15px; background-color: #F2F2F2; text-align: center; }
.page-outro h1 { font-size: 33px; font-weight: 300; color: #0080ff; margin: 15px auto 0px auto; }
.page-outro p { font-size: 18px; font-weight: 300; line-height: 28px; color: #0080ff; margin: 15px auto 40px auto; }

#manual { margin-top: 50px; clear: both; background-color: #FFF; }
#manual::after { content: " "; display: table; clear: both; }
.navfooter { margin-top: 32px; }


/* =============================================================
   FOOTER
   ============================================================= */

footer { margin-top: 50px; padding: 25px; background-color: #747474; background: linear-gradient(to bottom, #7E7E7E 15%, #727272 100%); }

.sitemap { display: none; }

.sitemapheader { display: block; padding: 0px 0px 5px 0px; }
.sitemapcol1 { width: 100%; margin-bottom: 30px; }
.sitemapcol2 { width: 100%; margin-bottom: 30px; }
.sitemapcol3 { width: 100%; margin-bottom: 30px; }
.sitemapcol4 { width: 100%; margin-bottom: 30px; }
.sitemapcol5 { width: 100%; margin-bottom: 30px; }

ul.sitemap { margin: 0px; padding: 0px; list-style-type: none; }
.sitemap li { margin: 0px; padding: 0px 0px 2px 0px; }
.sitemap a:link, .sitemap a:visited, .sitemap a:active { font: 16px/27px "OpenSans", sans-serif; text-decoration: none; color: #f6f6f6; font-weight: 300; }
.sitemap a:hover { color: #FFF; }
a:link.sitemapheader, a:visited.sitemapheader, a:active.sitemapheader { padding-bottom: 10px; font: 17px "OpenSans", "Segoe UI", sans-serif; font-weight: 600; text-decoration: none; color: #f6f6f6; }
a:hover.sitemapheader { color: #FFF; }

.footnote { max-width: 900px; margin: 0px auto 0px auto; color: #485D85; font: 16px/26px "OpenSans", sans-serif; overflow: hidden; }
.footenote::after { content: " "; display: table; clear: both; }
.footnotecompany { display: block; margin: 20px 0px; float: left; }
.footnotecompany a:link, .footnotecompany a:visited, .footnotecompany a:active { color: #f6f6f6; }
.footnotecompanyflag { margin: 0px 0px 0px 70px; float: none; display: none; }
.footnotelinks { display: block; float: right; }
.footnotelinks a:link, .footnotelinks a:visited, .footnotelinks a:active { display: inline-block; margin: 20px 0px 0px 35px; color: #f6f6f6; }


/* =============================================================
   FRONTPAGE
   ============================================================= */

.frontpage1 { margin-bottom: 30px; padding: 35px 0px; }
.frontpage1 img { float: right; }
.frontpage1 h1 { font-size: 45px; font-weight: 300; color: #000; margin: 25px auto 25px auto; }
.frontpage1 p { width: 360px; font-size: 27px; font-weight: 300; line-height: 39px; color: #000; margin: 35px 0px 40px 0px; }
.frontpage1::after { content: " "; display: table; clear: both; }

.frontpage2 { margin: 15px 0px 25px 0px; padding: 35px 0px; overflow: hidden; }
.frontpage2 img { float: left; }
.frontpage-text-right { float: right; }
.frontpage2 h1 { font-size: 45px; font-weight: 300; color: #000; margin: 25px auto 0px auto; }
.frontpage2 p { width: 500px; font-size: 27px; font-weight: 300; line-height: 39px; color: #000; margin: 35px 0px 40px 0px; }
.frontpage2::after { content: " "; display: table; clear: both; }

.checksymbol { margin: 35px auto 15px auto; }
.features { padding: 20px 0px 35px 0px; }
.features h2 { font-size: 32px; font-weight: 300; color: #000; margin: 10px auto 0px auto; text-align: center; }
.features h3 { font-size: 18px; font-weight: 300; line-height: 28px; color: #000; width: 90%; margin: 30px auto 0px auto; text-align: center; }
.features::after { content: " "; display: table; clear: both; }


/* =============================================================
   ELEMENTS
   ============================================================= */

.center { margin: auto; text-align: center; }

.marginzero { margin: 0px; }

.teaser { font-size: 18px; line-height: 32px; margin: 10px 0px 50px 0px; color: #000; }

.languageflag { float: right; margin-top: 35px; }

.small { font-size: 14px; }
.smallgrey { font-size: 14px; color:#8A8F99; }
.red { font-weight: bold; color: #A0002C; }
.error { background-color: #b40000; color: #FFF; }

ul.listfrench { margin: 0px 0px 20px 0px; padding: 0px; list-style-type: none; }
.listfrench li { margin: 0px; padding: 0px 0px 4px 20px; font: 16px/28px "OpenSans", sans-serif; background: url(/de/pictures/arrow.svg) no-repeat 0px 6px; color-adjust: exact !important; }

/* Product page */

.productimage { margin: 15px 0px 0px 0px; float: left; }
.shadow-spacing { margin: 15px 0px 0px -45px; }
.productlinks { margin: 75px 0px 0px 35px; float: left; }
.productlinks ul { margin: 0px; padding: 0px; }
.productlinks ul > li { background: url(/de/pictures/arrow.svg) no-repeat 3px 7px; display: block; padding: 0px 24px 8px 27px; font: 17px/28px "OpenSans", sans-serif; display: block; }
.productlinks ul > li > a > img { display: inline-block; }
.productlinks > a > img { background-color: #F0F; margin: 20px 0px 50px 0px; }
.productappliance { margin-top: 10px; margin-left: 80px; }
.productcontainer::after { content: " "; display: table; clear: both; }

/* Standard grid layout */
.grid { margin-bottom: 35px; }
.grid::before, .grid::after { content: " "; display: table; clear: both; }
.col1_of_3 { width: 33%; }
.col2_of_3 { width: 66%; }
.col3_of_3 { width: 100%; }
.left { float: left; }
.right { float: right; }
.col-40 { width: 40%; }
.col-60 { width: 60%; }

/* Grid elements for Unternehmen/Kontakt */
.col-kontakt { display: table; box-sizing: border-box; padding-right: 35px; }
.kontakt-info { min-height: 400px; }
.kontakt-action p { min-height: 110px; }
.kontakt-icon { width: 17px; height: 17px; display: inline; margin: 0px 7px -2px 0px; vertical-align: baseline; }

/* Customer quotes */
blockquote { width: 450px; margin: 20px 20px 0px 5px; padding: 16px 0px 16px 0px; line-height: 28px; color: #444; }
.startquote { background: url(/de/pictures/quote-start.gif) no-repeat; display: inline-block; margin-bottom: -10px; width: 18px; height: 28px; }
.endquote { background: url(/de/pictures/quote-end.gif) no-repeat; display: inline-block; width: 18px; height: 14px; }
blockquote cite { display: block; margin-top: 2px; font-style: normal; font-size: 16px; color: #444; }

/* PDF element */
.item { margin: 0px; padding-bottom: 25px; clear: both; }
.item_pic { margin-left: 5px; padding: 0px; text-align: center; float: left; }
.item_text { margin: 0px 0px 10px 90px; padding: 5px 0px 0px 0px; }
.item_text p { margin: 0px; }

/* Modern look for product tables */
table.tablelines { width: 100%; margin: 35px 0px 35px 0px; border-collapse: collapse; border-spacing: 0;}
.tablelines tr th { text-align: center; }
.tablelines tr th h3 { margin-bottom: 32px; }
.tablelines tr th img, .tablelines tr td img { margin: auto; }
.tablelines tr th p { text-align: left; margin-top: -100px; }
.tablelines tr td { margin: 0px; padding: 0px; border-top: 1px solid #DDD; }
.tablelines tr td h4 { margin: 11px 0px 0px 0px; }
.tablelines tr td p { margin: 0px 0px 5px 0px; }
.tablelines tr td.footer { text-align: center; }

/* Quickform */
table.long_form { margin: 42px 0px 42px 0px; background-color: #FFF; border-spacing: 0px; border-collapse: collapse; border: 3px solid #f6f6f6; }
table.long_form th { background-color: #f6f6f6; text-align: left; }
table.long_form th h2 { margin: 5px 0px 5px 15px; }
table.long_form td { padding: 5px 10px; }
table.long_form td.data { }
table.long_form td.data input { }
table.long_form td.data_error { background-color: #b40000; }
table.long_form input.submitbutton { height: 32px; margin: 15px 0px 25px 0px; padding: 0px 20px;  }
table.long_form p.error { background-color: transparent; color: #FFF; margin-left: 8px; margin: 0px; padding: 5px; }
.required { color: #CCC; }

/* Exchange comparison */
.tableexchange { width: 100%; margin: 0px auto; }
.tableexchange-icon { margin: 35px 0px -10px 0px; }
.tableexchange h3 { font-size: 16px; font-weight: 600; }
.tableexchange th { text-align: left; border-bottom: 1px solid black; }
.tableexchange td { padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid #CCC; }
.tableexchange tr.function td { border-bottom: 1px solid black; padding-top: 30px; }

/* Testdrive */
.teststellung::after { content: " "; display: table; clear: both; }
.testzufriedenheit { min-width: 528px; min-height: 200px; background-color: #EEE; background: linear-gradient(to bottom, #f8f8f8 0%, #EEEEEE 100%); float: left; }
.testlogo { margin: 20px 0px 0px 35px; float: left; }
.testgarantie { margin: 15px 0px 0px 30px; float: left; }
.testkontakt { min-width: 290px; min-height: 185px; margin: 0px 0px 0px 40px; padding-top: 15px; background-color: #FAFAFA; background: linear-gradient(to right, #FFF 0%, #FAFAFA 100%); float: left; }

/* Partner listing */
.plz-intro { margin-bottom: 14px; }
.plz-input { margin-bottom: 18px; }
.plz-submit { }
.partner { margin-bottom: 10px; }
.partner::after { content: " "; display: table; clear: both; }
.partner_logo { float: left; margin-right: 60px; }
.partner_logo img { border: 1px solid #DDD; }
.partner_address { float: left; width: 260px; margin-right: 50px; }
.partner_phone { float: left; min-width: 350px; }
.partner_phone img { float: left; margin: 7px 20px 10px 0px; }
.action_button { padding: 5px 25px 5px 25px; }

/* Partnership */
.tablepartner tr.function th { font-weight: 600; border-bottom: 1px solid black; padding-top: 30px; }
.tablepartner td { padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid #CCC; }
.tooltip { display: inline-block; position: relative; }
.tooltip:after { content: attr(info); position: absolute; z-index: -1; top: 100%; padding: 10px; width: 160px; color: #000; background: #FFF; box-shadow: 2px 2px 2px 0px #CCC; border: 1px solid #CCC; opacity: 0; transition: all .5s; }
.tooltip:hover:after { top: 170%; opacity: 1; z-index: 1; text-decoration: none; }

/* Standard Button */
a:link.button, a:visited.button, a:hover.button, a:active.button { text-decoration: none; }
.button, input[type="submit"] { box-sizing: border-box; display: inline-block; min-width: 150px; min-height: 44px; padding: 9px 25px 9px 26px; font-family: "OpenSans", sans-serif; font-size: 16px; font-weight: bold; background-color: transparent; color: #0080ff; text-align: center; border: 2px solid #0080ff; border-radius: 9px; transition: all 0.2s ease; }
.button:hover, input[type="submit"]:hover { color: #FFF; background-color: #0080ff; }
.button-outro { margin: 60px 0px 20px 0px; text-align: center; }