/* * * * * * *Diese Datei ist urheberrechtlich geschützt von "Rene Weik | www.weik.online" und darf nicht kopiert oder auf anderen Webseiten verwendet werden. * * * * * */ /* GLOBAL-------------------------------------- */ :root { --templatefarbe_hex: #1d3a8f !important; --templatefarbe_rgb: 29,58,143 !important; --akzentfarbe_hex: var(--templatefarbe_hex) !important; --akzentfarbe_rgb: var(--templatefarbe_rgb) !important; --buttonfarbe_hex: var(--templatefarbe_hex) !important; --buttontextfarbe_hex: #fff !important; --hinweisboxfarbe_rgb: var(--templatefarbe_rgb) !important; --hinweisboxtextfarbe_hex: #fff !important; --welcomeboxhintergrundfarbe_rgb: var(--templatefarbe_rgb) !important; --welcomeboxhintergrundfarbe_hell_rgb: 255,255,255 !important; --welcomeboxtextfarbe_hex: #fff !important; --welcomeboxtextfarbe_hell_hex: var(--textfarbe_hex) !important; --infobarhintergrundfarbe_hex: #070808 !important; --infobarhintergrundfarbe_rgb: 7,7,8 !important; --infobartextfarbe_hex: #fdfdfd !important; --footerhintergrundfarbe_hex: var(--infobarhintergrundfarbe_hex) !important; --footertextfarbe_hex: var(--infobartextfarbe_hex) !important; --textfarbe_hex: #030303 !important; --untermenutextfarbe_hex: #030303 !important; --hintergrundfarbe_hex: #ffffff !important; --hintergrundfarbe_rgb: 255,255,255 !important; --rahmenhintergrundfarbe_hex: #ffffff !important; --rahmenhintergrundfarbe_grau_hex: #ededee !important; --rahmenhintergrundfarbe_dunkel_hex: #444445 !important; --menuhintergrundfarbe_hex: var(--hintergrundfarbe_hex); --menuhintergrundfarbe_rgb: var(--hintergrundfarbe_rgb); --highlightboxhintergrundfarbe_rgb: 250,250,250 !important; --kachelboxenfarbe_rgb: 255,255,255 !important; --winkelfarbe_rgb: var(--highlightboxhintergrundfarbe_rgb) !important; --boxfarbe_hex: #efefef !important; --claimslidefarbe_hex: var(--templatefarbe_hex) !important; --claimboxinnerfarbe_hex: #f9f9f9 !important; --claimboxtextfarbe_hex: var(--akzentfarbe_hex) !important; --boxverlauf_dunkel_rgb: 240,240,240 !important; --boxverlauf_hell_rgb: 255,255,255 !important; } @media print { a[href]:after { content: none !important; } #kopfbereichwrap { position: relative !important; } } * { padding: 0; margin: 0; border: 0; background-repeat: no-repeat; background-position: center center; } html { overflow-y: scroll; height: 100%; } body { font-family: Arial, Helvetica, Geneva, sans-serif; color: #4d4d4d; line-height: 1.7em; margin: 0; background-color: #fff; width: 100%; font-size: 16px; position: relative; } body.startseite { height: 100% !important; } /*#wrap { height: 100%; }*/ /* FONTS */ /* ASSISTANT */ /* assistant-200 - latin */ @font-face { font-family: 'Assistant'; font-style: normal; font-weight: 200; src: url('../fonts/assistant-v2-latin-200.eot'); /* IE9 Compat Modes */ src: local('Assistant ExtraLight'), local('Assistant-ExtraLight'), url('../fonts/assistant-v2-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/assistant-v2-latin-200.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/assistant-v2-latin-200.woff') format('woff'), /* Modern Browsers */ url('../fonts/assistant-v2-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/assistant-v2-latin-200.svg#Assistant') format('svg'); /* Legacy iOS */ } /* assistant-regular - latin */ @font-face { font-family: 'Assistant'; font-style: normal; font-weight: 400; src: url('../fonts/assistant-v2-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Assistant'), local('Assistant-Regular'), url('../fonts/assistant-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/assistant-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/assistant-v2-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/assistant-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/assistant-v2-latin-regular.svg#Assistant') format('svg'); /* Legacy iOS */ } /* assistant-300 - latin */ @font-face { font-family: 'Assistant'; font-style: normal; font-weight: 300; src: url('../fonts/assistant-v2-latin-300.eot'); /* IE9 Compat Modes */ src: local('Assistant Light'), local('Assistant-Light'), url('../fonts/assistant-v2-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/assistant-v2-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/assistant-v2-latin-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/assistant-v2-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/assistant-v2-latin-300.svg#Assistant') format('svg'); /* Legacy iOS */ } /* assistant-600 - latin */ @font-face { font-family: 'Assistant'; font-style: normal; font-weight: 600; src: url('../fonts/assistant-v2-latin-600.eot'); /* IE9 Compat Modes */ src: local('Assistant SemiBold'), local('Assistant-SemiBold'), url('../fonts/assistant-v2-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/assistant-v2-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/assistant-v2-latin-600.woff') format('woff'), /* Modern Browsers */ url('../fonts/assistant-v2-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/assistant-v2-latin-600.svg#Assistant') format('svg'); /* Legacy iOS */ } /* assistant-700 - latin */ @font-face { font-family: 'Assistant'; font-style: normal; font-weight: 700; src: url('../fonts/assistant-v2-latin-700.eot'); /* IE9 Compat Modes */ src: local('Assistant Bold'), local('Assistant-Bold'), url('../fonts/assistant-v2-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/assistant-v2-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/assistant-v2-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/assistant-v2-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/assistant-v2-latin-700.svg#Assistant') format('svg'); /* Legacy iOS */ } /* assistant-800 - latin */ @font-face { font-family: 'Assistant'; font-style: normal; font-weight: 800; src: url('../fonts/assistant-v2-latin-800.eot'); /* IE9 Compat Modes */ src: local('Assistant ExtraBold'), local('Assistant-ExtraBold'), url('../fonts/assistant-v2-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/assistant-v2-latin-800.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/assistant-v2-latin-800.woff') format('woff'), /* Modern Browsers */ url('../fonts/assistant-v2-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/assistant-v2-latin-800.svg#Assistant') format('svg'); /* Legacy iOS */ } /* BOOTSTRAP-GRID wie Bootstrap 4 --------------------------------------*/ .container { width: 100%; } @media (min-width: 768px) { .container { width: 750px; max-width: 100%; } } @media (min-width: 992px) { .container { width: 960px; max-width: 100%; } } @media (min-width: 1200px) { .container { width: 1352px; max-width: 100%; } } /* FORMATIERUNGEN--------------------------------------*/ .margintop05em { margin-top:0.5em !important; } .margintop1em { margin-top:1em !important; } .margintop15em { margin-top:1.5em !important; } .margintop2em { margin-top:2em !important; } .margintop25em { margin-top:2.5em !important; } .margintop3em { margin-top:3em !important; } .margintop35em { margin-top:3.5em !important; } .margintop4em { margin-top:4em !important; } .margintop45em { margin-top:4.5em !important; } .margintop5em { margin-top:5em !important; } .marginbottom05em { margin-bottom:0.5em !important; } .marginbottom1em { margin-bottom:1em !important; } .marginbottom15em { margin-bottom:1.5em !important; } .marginbottom2em { margin-bottom:2em !important; } .marginbottom25em { margin-bottom:2.5em !important; } .marginbottom3em { margin-bottom:3em !important; } .marginbottom35em { margin-bottom:3.5em !important; } .marginbottom4em { margin-bottom:4em !important; } .marginbottom45em { margin-bottom:4.5em !important; } .marginbottom5em { margin-bottom:5em !important; } .marginright05em { margin-right:0.5em !important; } .marginright1em { margin-right:1em !important; } .marginright15em { margin-right:1.5em !important; } .marginright2em { margin-right:2em !important; } .marginright25em { margin-right:2.5em !important; } .marginright3em { margin-right:3em !important; } .marginright35em { margin-right:3.5em !important; } .marginright4em { margin-right:4em !important; } .marginright45em { margin-right:4.5em !important; } .marginright5em { margin-right:5em !important; } .marginleft05em { margin-left:0.5em !important; } .marginleft1em { margin-left:1em !important; } .marginleft15em { margin-left:1.5em !important; } .marginleft2em { margin-left:2em !important; } .marginleft25em { margin-left:2.5em !important; } .marginleft3em { margin-left:3em !important; } .marginbleft35em { margin-left:3.5em !important; } .marginleft4em { margin-left:4em !important; } .marginleft45em { margin-left:4.5em !important; } .marginleft5em { margin-left:5em !important; } .nomargintop { margin-top: 0 !important; } .nomarginright { margin-right: 0 !important; } .nomarginbottom { margin-bottom: 0 !important; } .nomarginleft { margin-left: 0 !important; } .nopaddingtop { padding-top: 0 !important; } .nopaddingright { padding-right: 0 !important; } .nopaddingbottom { padding-bottom: 0 !important; } .nopaddingleft { padding-left: 0 !important; } /* LAYOUTELEMENTE--------------------------------------*/ .centerbox { text-align: center !important; } .center { margin: 0 auto; text-align: center !important; } .untertitelbox { text-align: center !important; } .untertitelbox img { margin-bottom: 10px !important; } .untertitelbox p{ margin: 5px 0 50px 0; } @media (min-width: 768px) { .untertitelbox p{ margin: 10px 0 50px 0; } } @media (min-width: 992px) { .untertitelbox p{ margin: 10px 0 20px 0; } } #clear { clear: both; } .clear { clear: both; } .hinweisbox { padding: 2em 1em; background-color: #EFEFEF; } .kde-header { /* kennstdueinen-Farbe */ background-color: #1d3a8f !important; } /* TYPO--------------------------------------*/ /* TYPO--------------------------------------*/ /* TYPO--------------------------------------*/ /* ÜBERSCHRIFTEN--------------------------------------*/ h1, .h1 { font-size:18px; } h2, .h2 { font-size: 16px; } h3, .h3 { font-size: 15px; } h4, .h4 { font-size: 14px; } h5, .h5 { font-size: 14px; } h6, .h6 { font-size: 13px; } @media (min-width: 1200px) { h1, .h1 { font-size:28px; } h2, .h2 { font-size: 23px; } h3, .h3 { font-size: 21px; } h4, .h4 { font-size: 19px; } h5, .h5 { font-size: 18px; } h6, .h6 { font-size: 17px; } } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: inherit; font-weight: 700; line-height: 1.5em; color: inherit; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { margin-top: 2.0em; margin-bottom: 0.5em; } @media (min-width: 1200px) { h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { margin-top: 2.5em; margin-bottom: 0.6em; } } h4, .h4 { margin-top: 1.0em; margin-bottom: 1.5em; } @media (min-width: 1200px) { h4, .h4 { margin-top: 2em; } } #productcontent h1 { font-size: 18px; margin-top: 0em; margin-bottom: 0.2em; } @media (min-width: 768px) { #productcontent h1 { font-size: 26px; margin-bottom: 0.5em; } } @media (min-width: 1200px) { #productcontent h1 { font-size: 28px; margin-bottom: 0.5em; } } #productcontent h2{ font-size: 16px; margin-top: 0.4em; } @media (min-width: 768px) { #productcontent h2 { font-size: 20px; margin-top: -0.6em; } } @media (min-width: 1200px) { #productcontent h2 { font-size: 22px; margin-top: -0.6em; } } .unterseite h1 { font-size: 18px; margin-top: 0em; margin-bottom: 0.2em; } @media (min-width: 768px) { .unterseite h1 { font-size: 26px; margin-bottom: 0.5em; } } @media (min-width: 1200px) { .unterseite h1 { font-size: 28px; margin-bottom: 0.5em; } } .unterseite h2, .startseite .produktuebersicht h2{ font-size: 16px; margin-top: 0.4em; margin-bottom: 1.5em; } @media (min-width: 768px) { .unterseite h2, .startseite .produktuebersicht h2 { font-size: 20px; margin-top: -0.6em; margin-bottom: 1em; } } @media (min-width: 1200px) { .unterseite h2, .startseite .produktuebersicht h2 { font-size: 23px; margin-top: -0.6em; margin-bottom: 1em; } } p, li { font-size: 15px; } p.smallp { font-size: 12px; line-height: 1.3em; } @media (min-width: 1200px) { p, li { font-size: 19px; } p.smallp { font-size: 15px; } } p { margin: 0 0 1em; } .bold { font-weight: bold; } .facebook { color: #3b579d; text-decoration: none; } .facebook:hover, .facebook:focus { color: #3b579d; text-decoration: none; } .kursiv { font-style: italic; } .underline { text-decoration: underline; } .notextdecoration { text-decoration: none; } .tief { letter-spacing: 2px; vertical-align: -1px; font-size : 0.8em; } .hoch { letter-spacing: 2px; vertical-align: 4px; font-size : 0.8em; } del { display: none; } /* LINKS----------------------------------------------*/ a { color: inherit; text-decoration: underline; } a:link { outline: none; } a:hover, a:focus { color: #737373; text-decoration: underline; } a.nolink:hover, a.nolink:focus, a.nolink:active { text-decoration: none !important; } .tellink { text-decoration: none; } .tellink:hover, .tellink:focus, .tellink:active { text-decoration: none; cursor: default; } .tellink:hover, .tellink:focus, .tellink:active { color: inherit !important; } /* BILDER---------------------------------------------*/ img { max-width: 100%; height: auto; text-align: center; } .row img { margin-bottom: 15px; text-align: center; } @media (min-width: 768px) { .row img { margin-bottom: 30px; } } #teaser, .teaser { margin-bottom: 0 !important; } #teaser2, .teaser2 { margin-bottom: 2em !important; } .startbild { margin-top: 20px; padding: 5px; background: #fff; } @media (min-width: 768px) { .startbild { margin-top: 40px; padding: 20px 20px 0 20px; } } .bildlinks { float: left; margin-right: 35px; } .bildlinks2 { float: left; margin-right: 50px; } iframe { border: none; } .youtube, .youtube-klein { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 88%; } @media (min-width: 768px) { .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 93%; } } .youtube-klein iframe { position: absolute; top: 0; left: 0; width: 100%; height: 85%; } @media (min-width: 768px) { .youtube-klein iframe { position: absolute; top: 0; left: 0; width: 100%; height: 87%; } } @media (min-width: 992px) { .youtube-klein iframe { position: absolute; top: 0; left: 0; width: 100%; height: 86%; } } @media (min-width: 1200px) { .youtube-klein iframe { position: absolute; top: 0; left: 0; width: 100%; height: 91%; } } .dsgvo-block, .youtube-block { text-align: center; margin: 2em 0; padding: 0em 1em 2em 1em; background-color: #f9f9f9; } .dsgvo-block img, .youtube-block img { margin: 0 auto; max-width: 100%; } .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 88%; } @media (min-width: 768px) { .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 93%; } } .referenzen img { margin-bottom: 15px; } .border { border: 1px #ccc solid; } .rounded5 { border-radius: 5px; } .rounded10 { border-radius: 10px; } .rounded15 { border-radius: 15px; } .applook { border-radius: 15px; border: 1px solid #ccc; -webkit-box-shadow: 0px 5px 11px 0px rgba(204,204,204,0.86); -moz-box-shadow: 0px 5px 11px 0px rgba(204,204,204,0.86); box-shadow: 0px 5px 11px 0px rgba(204,204,204,0.86); } .shadow { -webkit-box-shadow: 0px 5px 11px 0px rgba(204,204,204,0.86); -moz-box-shadow: 0px 5px 11px 0px rgba(204,204,204,0.86); box-shadow: 0px 5px 11px 0px rgba(204,204,204,0.86); } /* AUFZÄHLUNGEN---------------------------------------*/ ul{ list-style-type: disc; margin: 1em 0 1em 1.1em; } .listcontenteinzug { font-size: 0.9em; line-height: 1.5em; margin-left: 3em; list-style:circle; } .startaufzaehlung { margin-top: 35px !important; margin-bottom: 50px !important; } .startaufzaehlung li { margin-bottom: 15px; } .informationen li { margin-bottom: 0.5em; } ul.hakenliste { margin-top: 1.5em; margin-right: 0; margin-left: 0; margin-bottom: 0em; } ul.hakenliste li { list-style-type: none; margin-bottom: 1.5em; font-size: 1.0em; } ul.hakenliste img { margin-top: -3px; margin-right: 15px; margin-bottom: 10px; float: left; } ul.hakenliste .haken2 { /*eingerückt*/ margin-left: 2.5em; } ul.hakenliste h4 { margin-top: 1em; } table.bildtabelle { width: 100%; margin-top: 10px; } table.bildtabelle td{ padding-bottom: 30px; } table.bildtabelle td.bildtabelletd1 { width: 20%; vertical-align: top; } table.bildtabelle td.bildtabelletd2 { width: 80%; vertical-align: top; } table.bildtabelle img { padding: 5px 0; max-width: 75%; height: auto; } @media (min-width: 768px) { table.bildtabelle img { padding: 5px 0; max-width: 90%; height: auto; } } /* PRODUKTÜBERSICHT------------------------------------------*/ /* PRODUKTÜBERSICHT------------------------------------------*/ /* PRODUKTÜBERSICHT------------------------------------------*/ div.produktuebersicht { width: 100%; text-align: center; margin-top: 2em; margin-bottom: 1em; } div.produktuebersicht img { height: auto; margin-bottom: 0; } div.produktuebersicht h3 { /* Links in Produktübersichten */ margin-top: 0.5em !important; margin-bottom: 2em !important; } @media (min-width: 768px) { div.produktuebersicht h2 { margin-top: 0.5em !important; margin-bottom: 2.5em !important; font-size: 17px !important; } } @media (min-width: 1200px) { div.produktuebersicht h3 { margin-top: 0.5em !important; margin-bottom: 2.5em !important; font-size: 19px !important; } } h1.produktuebersicht-h1 { /* Überschrift auf Produktseite */ font-size: 14px !important; margin-bottom: 1em !important; } @media (min-width: 768px) { h1.produktuebersicht-h1 { font-size: 16px !important; margin-top: 0.4em !important; margin-bottom: 3em !important; } } @media (min-width: 1200px) { h1.produktuebersicht-h1 { font-size: 18px !important; margin-top: 0.4em !important; margin-bottom: 3em !important; } } h2.produktuebersicht-h2 { /* Überschrift auf Produktseite */ font-size: 14px !important; margin-bottom: 1em !important; } @media (min-width: 768px) { h2.produktuebersicht-h2 { font-size: 16px !important; margin-top: 0.4em !important; margin-bottom: 3em !important; } } @media (min-width: 1200px) { h2.produktuebersicht-h2 { font-size: 18px !important; margin-top: 0.4em !important; margin-bottom: 3em !important; } } div.fullcontent h1 { font-size: 21px; margin-top: 0em; margin-bottom: 0.2em; } @media (min-width: 768px) { div.fullcontent h1 { font-size: 26px; margin-bottom: 0.5em; } } @media (min-width: 1200px) { div.fullcontent h1 { font-size: 32px; margin-bottom: 0.5em; } } div.fullcontent h2{ font-size: 16px; margin-top: -0.6em; margin-bottom: 2em; } @media (min-width: 768px) { div.fullcontent h2 { font-size: 20px; margin-top: -0.6em; margin-bottom: 1em; } } @media (min-width: 1200px) { div.fullcontent h2 { font-size: 26px; margin-top: -0.6em; margin-bottom: 1em; } } /* TABELLEN------------------------------------------*/ /* TABELLEN------------------------------------------*/ /* TABELLEN------------------------------------------*/ table.produktaufzaehlung { width: 100%; margin-top: 10px; } table.produktaufzaehlung td.produktaufzaehlungtd1 { width: 30%; vertical-align: middle; } table.produktaufzaehlung td.produktaufzaehlungtd2 { width: 70%; vertical-align: middle; } table.produktaufzaehlung img{ padding: 15px 0 15px 0; max-width: 90%; height: auto; } table.produktaufzaehlung h4{ font-size: 13px; line-height: 1.2em; margin-top: 0; } @media (min-width: 768px) { table.produktaufzaehlung h4{ font-size: 15px; line-height: 1.5em; margin-top: 0; } } @media (min-width: 992px) { table.produktaufzaehlung h4{ font-size: 17px; line-height: 1.5em; margin-top: 0; } } table.produktaufzaehlung p{ font-size: 14px; line-height: 1.4em; margin-bottom: 2em; } @media (min-width: 768px) { table.produktaufzaehlung p{ font-size: 15px; line-height: 1.5em; margin-bottom: 0em; } } td.partner-ueberblicktd1 { width: 45%; } @media (min-width: 768px) { td.partner-ueberblicktd1 { width: 20%; } } .partner-ueberblick { /*Tabelle auf Über-Uns-Seite*/ width: 100%; border: none; margin-top: 20px; } .partner-ueberblick td{ vertical-align: top; } /* ÖFFNUNGSZEITEN ------------------------------------------------- */ .zeiten p { margin: 0; } .zeiten td{ vertical-align: top; } .zeiten { float: left; font-size: 15px; } @media (min-width: 768px) { .zeiten { font-size: 15px; } } @media (min-width: 992px) { .zeiten { font-size: 15px; } } @media (min-width: 1200px) { .zeiten { float: left; font-size: 19px; } .zeiten td{ padding-right: 40px; vertical-align: top; } } @media (min-width: 1440px) { .zeiten { font-size: 19px; } } /* ÖFFNUNGSZEITEN */ .float-none { float: none; } .float-left { float: left; } .float-right { float: right; } .ziffer { margin-left: -1px; margin-bottom: 10px !important; margin-right: 10px; } .quelle { font-size: 13px; font-style: italic; margin-top: 1em; } .back-to-top-button { /* neuer nach Oben button mit Pfeil */ background: #1d3a8f; position: fixed; padding: 7px 10px 13px 10px; bottom: 15px; right: 15px; font-size: 40px; color: #fff; margin: 0; border-radius: 35px; z-index: 8000; } .back-to-top-button:hover { background: #999; } .telefon-button { /* neuer Telefon-Button */ background: #1d3a8f; position: fixed; padding: 10px; bottom: 15px; left: 15px; font-size: 40px; color: #fff; margin: 0; border-radius: 35px; z-index: 8000; } a.back-to-top-button:hover, a.back-to-top-button:focus, a.telefon-button:hover, a.telefon-button:focus { color: #fff; background: #999; } .beratung { margin-top: 4em; } .kontaktaufruf { font-size: 13px; margin-top: 1em; margin-bottom: 3em; height: 30px; line-height: 30px; text-align: left; } .kontaktaufruf a { text-decoration: none; font-weight: bold; color: #fff; text-align: center; padding: 10px 20px 10px 18px; width: 100px; background: #1d3a8f; } .kontaktaufruf a:hover, .kontaktaufruf a:focus { background: #adadad; } .noborder { border-bottom: solid transparent 0px !important; /*entfernt Trennstrich auf Startseite*/ } .pointer { cursor: pointer !important; } /* KOPFBEREICH -------------------------------*/ /* KOPFBEREICH -------------------------------*/ /* KOPFBEREICH -------------------------------*/ #kopfbereich{ background-color: #fff; padding: 0 15px; } @media (min-width: 576px) { #kopfbereich{ padding: 0 15px; } } @media (min-width: 768px) { #kopfbereich { padding: 0 30px; } } @media (min-width: 992px) { #kopfbereich { padding: 10px 30px; -webkit-transition: padding 0.4s linear; -moz-transition: padding 0.4s linear; -ms-transition: padding 0.4s linear; -o-transition: padding 0.4s linear; transition: padding 0.4s linear; } .scrolled #kopfbereich { /* damit paqdding von #logo undverändert bleiben kann und nicht flackert, bei mobil aber dennoch einen kleineren Rand hat */ padding: 0px 30px; -webkit-transition: padding 0.4s linear; -moz-transition: padding 0.4s linear; -ms-transition: padding 0.4s linear; -o-transition: padding 0.4s linear; transition: padding 0.4s linear; } } #innerkopfbereich{ height: 75px; background-color: #fff; -webkit-transition: height 0.4s linear; -moz-transition: height 0.4s linear; -ms-transition: height 0.4s linear; -o-transition: height 0.4s linear; transition: height 0.4s linear; } @media (min-width: 576px) { #innerkopfbereich{ height: 90px; } .scrolled #innerkopfbereich { height: 90px; -webkit-transition: height 0.4s linear; -moz-transition: height 0.4s linear; -ms-transition: height 0.4s linear; -o-transition: height 0.4s linear; transition: height 0.4s linear; } } @media (min-width: 768px) { #innerkopfbereich { height: 90px; } .scrolled #innerkopfbereich { height: 90px !important; } } @media (min-width: 992px) { #innerkopfbereich { height: 90px; } .scrolled #innerkopfbereich { height: 90px !important; } } @media (min-width: 1200px) { #innerkopfbereich { height: 120px; } .scrolled #innerkopfbereich { height: 90px !important; } } /*Infobar*/ #infobar{ width: 100%; height: 30px; text-align: right; background-color: #8f91c7; } @media (min-width: 768px) { #infobar{ height: 35px; } } @media (min-width: 992px) { #infobar{ height: 40px; } } #infobar p { text-align: center; margin: 0; font-family: 'Assistant', sans-serif!important; font-size: 12px; line-height: 30px; font-weight: bold; color: #fff; } @media (min-width: 768px) { #infobar p { font-size: 13px; line-height: 35px; } } @media (min-width: 992px) { #infobar p { font-size: 14px; line-height: 40px; } } @media (min-width: 1200px) { #infobar p { font-size: 15px; } } @media (min-width: 768px) { #infobar p.infobar-links { float: left; } } @media (min-width: 768px) { #infobar p.infobar-rechts { float: right; } } #infobar a { text-decoration: none; } #infobar a:hover, #infobar a:focus { color: inherit; text-decoration: underline; } .inverse-infobar, .inverse-infobar .container { background-color: #fff !important; } .inverse-infobar p { color: #4d4d4d !important; } .scroll-menu { /* Hintergrundleiste für Menü wenn es oben fixiert wird */ background-color: #444; z-index: 1000; } /* LOGO */ #logo{ height: 100%; width: 150px; float: left; padding: 10px 0; } @media (min-width: 576px) { #logo{ width: 175px; padding: 10px 0; } } @media (min-width: 768px) { #logo{ width: 200px; padding: 10px 0; } } @media (min-width: 992px) { #logo{ width: 183px; padding: 10px 0; } .scrolled #logo { padding: 10px 0; } } @media (min-width: 1200px) { #logo{ width: 270px; padding: 10px 0; } .scrolled #logo { padding: 10px 0; } } #logo img { height: 100%; width: auto; } /* TEASER -------------------------------*/ /* TEASER -------------------------------*/ /* TEASER -------------------------------*/ @media (min-width: 992px) { .startseite #teaser { -webkit-transition: margin-top 0.4s linear; -moz-transition: margin-top 0.4s linear; -ms-transition: margin-top 0.4s linear; -o-transition: margin-top 0.4s linear; transition: margin-top 0.4s linear; } .startseite.scrolled #teaser { margin-top: 140px; -webkit-transition: margin-top 0.4s linear; -moz-transition: margin-top 0.4s linear; -ms-transition: margin-top 0.4s linear; -o-transition: margin-top 0.4s linear; transition: margin-top 0.4s linear; } } /* BREADCRUMBS -------------------------------*/ /* BREADCRUMBS -------------------------------*/ /* BREADCRUMBS -------------------------------*/ .breadcrumb { padding: 0px; margin-bottom: 15px; list-style: none; background-color: inherit; border-radius: 0px; } @media (min-width: 768px) { .breadcrumb { margin-bottom: 15px; } } @media (min-width: 992px) { .breadcrumb { margin-bottom: 30px; } } .breadcrumb span, .breadcrumb .breadcrumb-item { font-size: 12px; } @media (min-width: 992px) { .breadcrumb span, .breadcrumb .breadcrumb-item { font-size: 14px; } } .breadcrumb .breadcrumb-item .active{ font-weight: bold; } /* HAUPTNAVIGATION -------------------------------*/ /* HAUPTNAVIGATION -------------------------------*/ /* HAUPTNAVIGATION -------------------------------*/ #mainmenu { font-family: 'Assistant', sans-serif!important; height: 100%; /* zentriert vertikal */ } .navbar-default, .navbar-collapse { border: none; background-color: transparent; } @media (min-width: 991px) { /* überschreibt Bootstrap (992), weil Menü zwischen 768 und 991 sonst nicht angezeigt wird) */ #mainmenu .navbar-collapse { width: auto; border-top: 0; -webkit-box-shadow: none; box-shadow: none; } #mainmenu .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; visibility: visible !important; } #mainmenu .navbar-collapse.in { overflow-y: visible; } #mainmenu .navbar-fixed-top .navbar-collapse, #mainmenu .navbar-static-top .navbar-collapse, #mainmenu .navbar-fixed-bottom .navbar-collapse { padding-right: 0; padding-left: 0; } } #mainmenu .navbar-default { display: flex; /* zentriert vertikal */ justify-content: center; flex-direction: column; height: 100%; background: transparent; position: relative; border: none; margin-top: 0px; margin-bottom: 0px; -webkit-transition: margin-top 0.4s linear; -moz-transition: margin-top 0.4s linear; -ms-transition: margin-top 0.4s linear; -o-transition: margin-top 0.4s linear; transition: margin-top 0.4s linear; } @media (min-width: 992px) { #mainmenu .navbar-default { -webkit-transition: margin-top 0s linear; -moz-transition: margin-top 0s linear; -ms-transition: margin-top 0s linear; -o-transition: margin-top 0s linear; transition: margin-top 0s linear; } .scrolled #mainmenu .navbar-default { /*margin-top: 29px;*/ -webkit-transition: margin-top 0.4s linear; -moz-transition: margin-top 0.4s linear; -ms-transition: margin-top 0.4s linear; -o-transition: margin-top 0.4s linear; transition: margin-top 0.4s linear; } } @media (min-width: 1200px) { #mainmenu .navbar-default { /*margin-top: 51px;*/ } .scrolled #mainmenu .navbar-default { /*margin-top: 26px;*/ } } #mainmenu .navbar-default ul.nav { display: inline-block; background-color: inherit; } @media (min-width: 768px) { #mainmenu .navbar-default ul.nav { margin: 0; } } #mainmenu .navbar-default ul.nav li { position: relative; display: block; margin-right: 5px; } #mainmenu .navbar-default ul.nav li:last-child { margin-right: 0px; } #mainmenu .navbar-default ul.nav li a { position: relative; display: block; padding: 5px 12px; text-decoration: none; } @media (min-width: 768px) { #mainmenu .navbar-default ul.nav li a { padding: 5px 6px; } } @media (min-width: 992px) { #mainmenu .navbar-default ul.nav li a { padding: 6px 10px; } } @media (min-width: 1200px) { #mainmenu .navbar-default ul.nav li a{ padding: 9px 5px; } } @media (min-width: 768px) { #mainmenu .navbar-default ul.nav > li > a { font-size: 16px; } } @media (min-width: 992px) { #mainmenu .navbar-default ul.nav > li > a { font-size: 18px; } } @media (min-width: 1200px) { #mainmenu .navbar-default ul.nav > li > a { font-size: 20px; } } @media (min-width: 1500px) { #mainmenu .navbar-default ul.nav > li > a { font-size: 17px; } } @media (min-width: 1750px) { #mainmenu .navbar-default ul.nav > li > a { font-size: 20px; } } #mainmenu .navbar-default ul.nav > li > a { color: #4d4d4d; font-weight: bold; } @media (min-width: 992px) { #mainmenu .navbar-default ul.nav li a.active, #mainmenu .navbar-default ul.nav li a.active:hover, #mainmenu .navbar-default ul.nav li a.active:focus, #hauptnavigation > ul > li.dropdown.m_open.open > ul > li.dropdown-submenu.m_open.grau > a { color: #fff; background-color: #1d3a8f; cursor: default; } #mainmenu .navbar-default ul.nav li a:hover, #mainmenu .navbar-default ul.nav li a:focus { color: #4d4d4d; text-decoration: none; background-color: #e3e3e3; } } .menu-right { float: right !important; } .menu-left { float: left !important; } .menu-center { display: flex; justify-content: center; flex-wrap: wrap; } .logo-right { float: right !important; } .logo-left { float: left !important; } /* SIDEBAR ---------------------------------------------*/ /* SIDEBAR ---------------------------------------------*/ /* SIDEBAR ---------------------------------------------*/ #sidebar .navbar-default { background-color: inherit; margin-bottom: 15px; } @media (min-width: 991px) { #sidebar .navbar-default { display:block; } #sidebar .navbar-default .collapse{ display:block; visibility:visible; } } #sidebar .navbar-collapse { padding-right: 0px; padding-left: 0px; } #sidebar ul.nav { margin: 0; } /* SIDEBARTITLE */ #sidebar a.sidebarnavititle { /* wie productcontent h1 */ font-size: 26px; color: inherit; text-decoration: none; font-weight: 700; line-height: 1.5em; } @media (min-width: 1200px) { #sidebar a.sidebarnavititle { font-size: 28px; } } #sidebar h2 { margin-bottom: 0.5em !important; } /* SCHRIFTGRÖßEN */ /* Ebene 1: Fenster, Türen...*/ #sidebar ul.nav li a{ color: inherit; text-decoration: none; font-size:16px; } /* Ebene 2*/ #sidebar ul.nav li ul li a{ color: inherit; font-size: 15px; } /* Ebene 3*/ #sidebar ul.nav li ul li ul li a{ color: inherit; font-size: 14px; } /* Ebene 4*/ #sidebar ul.nav li ul li ul li ul li a{ color: inherit; font-size: 13px; } @media (min-width: 1200px) { /* Ebene 1: Fenster, Türen...*/ #sidebar ul.nav li a{ font-size: 21px; } /* Ebene 2*/ #sidebar ul.nav li ul li a{ font-size: 20px; } /* Ebene 3*/ #sidebar ul.nav li ul li ul li a{ font-size: 19px; } /* Ebene 4*/ #sidebar ul.nav li ul li ul li ul li a{ font-size: 18px; } } /* EINRÜCKUNGEN */ #sidebar ul.nav li a { padding: 9px 18px 9px 12px !important; } #sidebar ul.nav li a.nav-zwei { padding: 9px 18px 9px 20px !important; } #sidebar ul.nav li ul li a.nav-drei { padding: 6px 18px 6px 30px !important; } #sidebar ul.nav li ul li ul li a.nav-vier { padding: 9px 18px 9px 42px !important; } /* FARBEN */ #sidebar ul.nav li a.active, /* Aktives Navi-Element außerhalb der grauen Box*/ #sidebar ul.nav li a.active:hover, #sidebar ul.nav li a.active:focus { color: #fff; font-weight: bold; background-color: #1d3a8f; cursor: default; } #sidebar ul.nav li a:hover, /* Hover außerhalb der grauen Box in Templatefarbe */ #sidebar ul.nav li a:focus { color: #fff; font-weight: bold; background-color: #1d3a8f; } #sidebar ul.nav-pills li { font-weight: normal; } #sidebar ul.nav-stacked > li + li { margin-top: 0px; margin-left: 0; } /* graue Box*/ ul.produkthauptseite { /* graue Box auf Produkthauptseite* */ background-color: #f0f0f0; } #sidebar ul.nav .grau { /*regelt border-radius der kompletten grauen Box*/ background-color: #f0f0f0; } #sidebar ul.nav li.grau > a.active, #sidebar ul.nav li.grau > a.active:hover, #sidebar ul.nav li.grau > a.active:focus { /*regelt obersten Punkt der grauen Box, wenn active*/ background-color: #1d3a8f; color: #fff; font-weight: bold; } #sidebar ul.nav li.grau ul li a.active { /*regelt alle mittleren aktiven Punkte*/ text-decoration: none; /*betrifft alle aktiven Punkte*/ } #sidebar ul.nav li.grau a.lastgrau, #sidebar ul.nav li.grau a.lastgrau:hover, #sidebar ul.nav li.grau a.lastgrau:focus { /*regelt border-radius des letzten Unterpunktes der grauen Box*/ } #sidebar ul.nav li.grau a:hover, /*regelt Hover innerhalb der grauen Box */ #sidebar ul.nav li.grau a:focus { font-weight: normal; text-decoration: none; color: inherit; background-color: #e3e3e3; } #sidebar ul.nav li.grau a.active, #sidebar ul.nav li.grau a.active:hover, /*regelt Hover innerhalb der grauen Box */ #sidebar ul.nav li.grau a.active:focus { text-decoration: none; background-color: #1d3a8f; color: #fff; font-weight: bold; } #sidebar ul.nav li.grau > a:hover, #sidebar ul.nav li.grau > a:focus { /*regelt Hover des obersten Punkt der grauen Box*/ } #sidebar ul.nav li.grau a.activeparent, /*regelt den Elternlink des aktiven li (in der grauen Box)*/ #sidebar ul.nav li.grau a.activeparent:hover, #sidebar ul.nav li.grau a.activeparent:focus { cursor: pointer; font-weight: bold; } /*MOBILES SIDEBARMENÜ */ @media (max-width: 991px) { #sidebar .navbar-collapse { background-color: inherit; margin-top: 15px; margin-bottom: 15px; padding-right: 0px; padding-left: 0px; overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: none; box-shadow: none; } #sidebar .navbar-collapse ul { /*zentriert die ausgeklappte Navigation */ width: 100%; background-color: #fafafa; /* bei ausgeklappter Produktnavi: macht desamte Box hellgrau */ -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } #sidebar .navbar-collapse .navbar-nav > li { /*zentriert die ausgeklappte Navigation */ float: none; display: block; width: 100%; } #sidebar .navbar-collapse ul li.grau a { /* bei ausgeklappter Produktnavi: macht graue Box etwas dunkler */ background-color: #f0f0f0; } #sidebar .navbar-collapse ul li.grau ul li + li { /*entfernt 2px Abstand innerhalb der grauen Box, durch den der hellere Jintergrund durchkam */ margin-top: 0px !important; } #sidebar .navbar-collapse ul.nav > li > a.nav-zwei { padding: 9px 18px 9px 30px !important; } #sidebar .navbar-collapse ul.nav > li > ul > li> a.nav-drei { padding: 6px 18px 6px 40px !important; } #sidebar .navbar-collapse ul.nav > li > ul > li> ul > li> a.nav-vier { padding: 9px 18px 9px 45px !important; } } /* SIDEBARLOGO */ @media (max-width: 991px) { #sidebarlogo { display: none; } } @media (min-width: 992px) { #sidebarlogo{ text-align: center; width: 100%; height: auto; position: relative; right: 0; top: 0; margin-top: 60px; } } @media (min-width: 992px) { #sidebar img { max-height: 100%; max-width: 100%; margin: 0 auto; text-align: center; position: relative; -webkit-transform: none; -ms-transform: none; transform: none; } } /* HAUPTBEREICH----------------------------------------------------*/ /* HAUPTBEREICH----------------------------------------------------*/ /* HAUPTBEREICH----------------------------------------------------*/ #hauptbereich { clear: both; background-color: #fff; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; } @media (min-width: 768px) { #hauptbereich { padding-left: 30px; padding-right: 30px; padding-bottom: 30px; } } #innerhauptbereich { overflow: hidden; padding: 30px 0; } @media (min-width: 768px) { #innerhauptbereich { padding: 30px 0; } } @media (min-width: 992px) { #innerhauptbereich { padding: 30px 0; } } /* FOOTER----------------------------------------------------*/ /* FOOTER----------------------------------------------------*/ /* FOOTER----------------------------------------------------*/ #innerfooter { padding-bottom: 70px; } @media (min-width: 768px) { #innerfooter { padding-bottom: 15px; } } #footer ul { text-align: center; } @media (min-width: 1200px) { #footer ul { text-align: right; } #footer p { text-align: left; } } .adresse { margin-bottom: 25px; } @media (min-width: 1200px) { .adresse { margin-bottom: 0px; } } .adresse p { font-size: 12px; margin-top: 13px; line-height: 1.5em; margin-bottom:0; text-align: center; font-weight: bold; } @media (min-width: 1200px) { .adresse p { font-size: 15px; } } #footer .list-inline > li { display: inline-block; } /* BUTTON FOOTER */ #footer .btn { display: inline-block; padding: 4px 4px; margin-bottom: 0; font-weight: bold; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 0px solid transparent; text-decoration: none; } #footer .btn-footer:hover, #footer .btn-footer:focus, #footer .btn-footer.focus, #footer .btn-footer:active, #footer .open > .dropdown-toggle.btn-footer { cursor: pointer; } #footer .btn-footer.active { cursor: default; } /*FOOTERZUSATZ*/ #footerzusatz { width: 100%; padding-top: 1em; } #produktangebot { color: #dedede !important; padding-top: 1em; padding-bottom: 1em; } #produktangebot ul { text-align: center; margin-top: 0 !important; margin-left: 0 !important; display: inline-block; } #produktangebot p, #produktangebot ul li { text-align: center; font-size: 12px !important; color: #fff !important; } #produktangebot ul.nav li a { padding: 4px 6px; display: inline-block; } #produktangebot ul.nav li a:hover { background-color: inherit; color: #fff; } #produktangebot h1 { display: none; } #produktangebot .nav-stacked li { float: none; display: inline; } /* cookiebanner DSGVO 2020/2021 */ .cookieConsentContainer { z-index: 9500; width: 350px; min-height: 20px; box-sizing: border-box; padding: 30px 30px 30px 30px; background: #242424; overflow: hidden; position: fixed; bottom: 30px; right: 30px; display: none; } .cookieConsentContainer .cookieTitle a, .cookieConsentContainer .cookieTitle a:hover { font-family: OpenSans, arial, "sans-serif"; color: #FFFFFF; font-size: 22px; line-height: 20px; display: block; cursor: auto; text-decoration: none; } .cookieConsentContainer .cookieDesc p { margin: 0; padding: 0; font-family: OpenSans, arial, "sans-serif"; color: #FFFFFF; font-size: 15px; line-height: 20px; display: block; margin-top: 10px; } .cookieConsentContainer .cookieDesc a { font-family: OpenSans, arial, "sans-serif"; color: #FFFFFF; text-decoration: underline; } .cookieConsentContainer .cookieButton a { display: inline-block; font-family: OpenSans, arial, "sans-serif"; color: #0F0F0F; font-size: 14px; font-weight: bold; margin-top: 14px; background: #ccc; box-sizing: border-box; padding: 10px 14px; text-align: center; transition: background 0.3s; } .cookieConsentContainer .cookieButton a:hover { cursor: pointer; background: #eee; } @media (max-width: 991px) { .cookieConsentContainer { bottom: 0px !important; left: 0px !important; width: 100% !important; } } /* start consent-tools DSGVO 2020/2021 */ .yt-video-consent-wrapper, .vimeo-video-consent-wrapper, .markilux-banner-consent-wrapper, .markilux-configurator-consent-wrapper, .markilux-consent-wrapper, .neutral1-consent-wrapper, .neutral2-consent-wrapper { padding: 15px 15px 5px 15px; background-color: #EFEFEF; } .yt-video-consent-wrapper-pic, .vimeo-video-consent-wrapper-pic, .markilux-banner-consent-wrapper-pic, .markilux-configurator-consent-wrapper-pic, .markilux-consent-wrapper-pic, .neutral1-consent-wrapper-pic, .neutral2-consent-wrapper-pic { cursor: pointer; max-width: 100%; height: auto; } .yt-video-consent-check-wrap, .vimeo-video-consent-check-wrap, .markilux-banner-consent-check-wrap, .markilux-configurator-consent-check-wrap, .markilux-consent-check-wrap, .neutral1-consent-check-wrap, .neutral2-consent-check-wrap { padding: 0px 15px 15px 15px; background-color: #EFEFEF; margin-bottom: 30px; } .yt-video-consent-text, .vimeo-video-consent-text, .markilux-banner-consent-text, .markilux-configurator-consent-text, .markilux-consent-text, .neutral1-consent-text, .neutral2-consent-text { width: 100%; height: auto; } .yt-video-consent-text p, .vimeo-video-consent-text p, .markilux-banner-consent-text p, .markilux-configurator-consent-text p, .markilux-consent-text p, .neutral1-consent-text p, .neutral2-consent-text p { margin: auto; } .yt-video-consent-wrapper iframe, .vimeo-video-consent-wrapper iframe, .markilux-banner-consent-wrapper iframe, .markilux-configurator-consent-wrapper iframe, .markilux-consent-wrapper iframe, .neutral1-consent-wrapper iframe, .neutral2-consent-wrapper iframe { height: 0px; width: 0px; } /* end consent-tools */ /* DATENSCHUTZERKLÄRUNG--------------------------------------*/ .datenschutzdiv h2 { margin-top: 3.5em !important; margin-bottom: 0.1em !important; } .datenschutzdiv h3 { margin-top: 2.5em !important; margin-bottom: 0.5em !important; } /* FROALA VEREINH. ------------------------------------------------- */ .fr-view .fr-file::after { content: none!important; } .fr-popup .fr-input-line input[type="text"], .fr-popup .fr-input-line textarea { font-size: 16px !important; height: 70px !important; } #froala-editor ul { /* Resettet den Abstand der Listen so dass man die Zahlen sieht und die Bullets eingerückt sind */ padding: 0 0 1.5em 1.5em; } #froala-editor ol { padding: 0 0 1.5em 2.5em; } .fr-view h2, .fr-view h3, .fr-view h4, .startnews h2, .startnews h3, .startnews h4 { margin-top: 0 !important; } .fr-view iframe { width: 100%; display: block; } /* FROALA VEREINH. ENDE */ /* FROALA */ .fr-popup .fr-input-line input[type="text"], .fr-popup .fr-input-line textarea { font-size: 16px !important; height: 70px !important; } @media (max-width: 767px) { .fr-view img { width: 100% !important; } } /* AKTUELLES ------------------------------------------------- */ div.rand { width: 700px; padding: 10px; border-left-style: solid; border-left-width: 20px; border-left-color: #F6F6F2; background-color: white; text-align: left; } input.mini { font-family: Verdana, Arial, Helvetica, sans-serif; color: gray; border-style: dashed; border-width: 1px; border-color: #F6F6F2; font-size: 8pt; } .linie { border-top-style: solid; border-top-width: 1px; border-color: silver; } table { background-color: white; } input.area { font-family: Arial, Helvetica, Geneva, sans-serif; border: inherit solid 1px; width: 180px; font-size: 0.9em; padding: 5px; margin: 0; margin-top: 5px; color: #333; line-height: 0.9em; } input.areaheadline { font-family: Arial, Helvetica, Geneva, sans-serif; border: inherit solid 1px; width: 360px; font-size: 0.9em; padding: 5px; margin: 0; margin-top: 5px; color: #333; line-height: 0.9em; } .red { color: #F00; } #news h2, .startnews h2{ margin-bottom: 0.6em; } #news h3, .startnews h3{ margin-bottom: 0.4em; } #news p { line-height: 1.5em; } .headline { font-weight: bold; margin-top: 0.2em !important; } .headline2 { font-size: 16px !important; font-weight: bold; } .bildunterschrift { text-align: center !important; font-size: 12px !important; display: block !important; margin-top: -10px; } .deleteformat { text-align: left !important; font-size: 14px !important; font-weight: normal !important; } .newsli { margin-top: 2em; margin-bottom: 4em; padding: 1em; background: rgb(240,240,240); background: -moz-linear-gradient(170deg, rgba(var(--boxverlauf_dunkel_rgb),1) 0%, rgba(var(--boxverlauf_hell_rgb),1) 79%); background: -webkit-linear-gradient(170deg, rgba(var(--boxverlauf_dunkel_rgb),1) 0%, rgba(var(--boxverlauf_hell_rgb),1) 79%); background: linear-gradient(170deg, rgba(var(--boxverlauf_dunkel_rgb),1) 0%, rgba(var(--boxverlauf_hell_rgb),1) 79%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0",endColorstr="#ffffff",GradientType=1); } .startseite .newsli { margin-bottom: 2em; } .listNews a:link, .listNews a:visited, .listNews a:hover, .listNews a:active, .listNews a:focus { outline: none; color: inherit; text-decoration: underline; } .listNews { list-style-type: none; } ul.listNews { margin: 0; } .datumsangabe { color: var(--templatefarbe_hex); margin: 0 !important; } .autor { font-size: 14px !important; line-height: 1.4em; border-bottom-style: solid; border-bottom-width: 1px; border-color: inherit; padding-bottom: 8px; font-style: italic; margin: 0 !important; } /* AKTUELLES ENDE */ /* STARTNEWS */ /* STARTNEWS */ /* STARTNEWS */ #startnews { background-color: #f9f9f9; padding: 15px; margin-bottom: 30px; } @media (min-width: 768px) { #startnews { padding: 30px; margin-bottom: 60px; } } #startnews h2, #startnews .h2 { font-size:21px; } @media (min-width: 1200px) { #startnews h2, #startnews .h2 { font-size:24px; } } #startnews h2 { margin-top: 0; } #startnews h4 { margin-top: 1em; border-top: 2px solid #c1c1c1; padding-top: 3em; } #startnews h4:first-of-type { border-top: 2px none; padding-top: 1em; } /* KONTAKT------------------------------------------------*/ /* KONTAKT------------------------------------------------*/ /* KONTAKT------------------------------------------------*/ label { display: inline-block; max-width: 100%; margin-top: 10px; margin-bottom: 5px; font-weight: bold; } span.rechnung { margin-left: 15px; font-size: 1.1em; } .form-control { border-color: #4d4d4d; } .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .form-control:focus { border-color: #1d3a8f; /*TEMPLATEFARBE*/ border-width: 1px; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .btn-kontakt { background:#1d3a8f; /*TEMPLATEFARBE*/ border-color: transparent; } .btn:active, .btn.active { background-image: none; outline: 0; box-shadow: none; } .sendbutton button { color: #fff; font-weight: normal; } .sendbutton .btn:hover, .sendbutton .btn:focus { color: #fff; font-weight: normal; text-decoration: none; } .btn-kontakt:hover, .btn-kontakt:focus { background-color: #999; background-position: 0 -15px; } .btn-kontakt:active, .btn-kontakt.active { background-color: #ccc; border-color: #dbdbdb; } labelred { font-size: 0.9em; color: #F00; } /* Dieser Abschnitt ist fuer das Skript wichtig */ .form input, .form textarea { position: static !important; display: block !important; speak: normal !important; } #error-Box { border: 0.01em solid #f00; background: #f1e7e6; font-weight: bold; color: #f00; padding: 0.5em; text-align: center; margin-bottom: 1em; font-size: 0.8em; } /* GOOGLE MAPS---------------------------------------------*/ /* GOOGLE MAPS---------------------------------------------*/ /* GOOGLE MAPS---------------------------------------------*/ #googlemap iframe{ width: 100%; height: 350px; border: none; margin: 0; } @media (min-width: 768px) { #googlemap iframe{ height: 560px; } } /* SLIDEBOX ---------------------------------------------*/ /* SLIDEBOX ---------------------------------------------*/ /* SLIDEBOX ---------------------------------------------*/ #slidebox{ width:315px; padding:35px 15px 30px 30px; background-color:#fff; position:fixed; bottom:0px; right:-430px; -moz-box-shadow: 0px 0px 3px #4d4d4d; -webkit-box-shadow: 0px 0px 3px #4d4d4d; box-shadow: 0px 0px 3px #4d4d4d; z-index: 5500; } #slidebox p { font-size:15px; font-weight: bold; text-transform:uppercase; font-family: Arial, Helvetica, Geneva, sans-serif; letter-spacing:1px; line-height: 1.5; color:inherit; } #slidebox img { margin: 5px 0 20px 0; } a.more{ font-size:11px; font-weight: bold; text-transform:uppercase; font-family: Arial, Helvetica, Geneva, sans-serif; letter-spacing:1px; line-height: 1.5; color:inherit; } a.more:hover{ text-decoration:underline; } #slidebox h2{ color:#1d3a8f; font-size:18px; line-height: 1.3; margin:10px 20px 10px 0px; } a.closebutton{ background:transparent url(../img/slidebox/closebutton.gif) no-repeat top left; width:80px; height:20px; position:absolute; cursor:pointer; top:10px; right:10px; } a.closebutton:hover{ } /* SITEMAP----------------------------------------------*/ /* SITEMAP----------------------------------------------*/ /* SITEMAP----------------------------------------------*/ #sitemapliste ul { margin: 0; } .sitemap1, .sitemap2, .sitemap3, .sitemap4, .sitemap5 ,.sitemap6, .sitemap7, .sitemap8 { list-style-type: none; } .sitemap1 a, .sitemap2 a, .sitemap3 a, .sitemap4 a, .sitemap5 a, .sitemap6 a, .sitemap7 a, .sitemap8 a { color: inherit; } .sitemap1 { margin-left: 0; font-size: 1.05em; line-height: 1.3em; } .sitemap2 { margin-left: 1em; font-size: 1em; line-height: 1.3em; } .sitemap3 { margin-left: 2em; font-size: 0.95em; line-height: 1.3em; } .sitemap4 { margin-left: 3em; font-size: 0.9em; line-height: 1.3em; } .sitemap5 { margin-left: 4em; font-size: 0.9em; line-height: 1.3em; } .sitemap6 { margin-left: 5em; font-size: 0.85em; line-height: 1.3em; } .sitemap7 { margin-left: 6em; font-size: 0.8em; line-height: 1.3em; } .sitemap8 { margin-left: 7em; font-size: 0.75em; line-height: 1.3em; } /* ENDE SITEMAP*/ /* TINY ---------------------------------------------*/ /* TINY ---------------------------------------------*/ /* TINY ---------------------------------------------*/ .tinyhinweis{ font-size: 12px !important; font-style: italic; font-weight: bold; } .tinybildbox { text-align: center; } .tinybild{ max-height: 500px; margin: 0 auto; padding: 0; max-width: 100%; } /*COLORBOX CSS*/ /* --------------------------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------------------- */ /* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxWrapper {max-width:none;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;} .cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;} #colorbox, #cboxContent, #cboxLoadedContent{-moz-box-sizing:content-box; -webkit-box-sizing:content-box;box-sizing:content-box;} /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:url(../img/colorboximages/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);} #colorbox{outline:0;} #cboxTopLeft{width:21px; height:21px; background:url(../img/colorboximages/controls.png) no-repeat -101px 0;} #cboxTopRight{width:21px; height:21px; background:url(../img/colorboximages/controls.png) no-repeat -130px 0;} #cboxBottomLeft{width:21px; height:21px; background:url(../img/colorboximages/controls.png) no-repeat -101px -29px;} #cboxBottomRight{width:21px; height:21px; background:url(../img/colorboximages/controls.png) no-repeat -130px -29px;} #cboxMiddleLeft{width:21px; background:url(../img/colorboximages/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px; background:url(../img/colorboximages/controls.png) right top repeat-y;} #cboxTopCenter{height:21px; background:url(../img/colorboximages/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px; background:url(../img/colorboximages/border.png) 0 -29px repeat-x;} #cboxContent{background:#fff; overflow:hidden;} .cboxIframe{background:#fff;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{margin-bottom:28px; margin-top: 60px;} #cboxTitle{position:absolute; top:4px; left:0; text-align:center; width:100%; color:#666;} #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} #cboxLoadingOverlay{background:url(../img/colorboximages/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(../img/colorboximages/loading.gif) no-repeat center center;} /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../img/colorboximages/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;} #cboxPrevious:hover{background-position:-75px -25px;} #cboxNext{position:absolute; bottom:0; left:27px; background:url(../img/colorboximages/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;} #cboxNext:hover{background-position:-50px -25px;} #cboxClose{position:absolute; top:0; right:0; background:url(../img/colorboximages/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;} #cboxClose:hover{background-position:-25px -25px;} /* The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9. See: http://jacklmoore.com/notes/ie-transparency-problems/ */ .cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); } /* REHAU--------------------------------------*/ /* REHAU--------------------------------------*/ /* REHAU--------------------------------------*/ @media (max-width: 400px) { /*Fensterübersicht*/ .hidden-400 { display: none; } } #body-wissenlightframe, #wrap-wissenlightframe, #innerwrapper-wissenlightframe, #hauptbereich-wissenlightframe, #innerhauptbereich-wissenlightframe { width: 590px !important; background-color: #fff !important; background-image: none !important; margin: 0 auto !important; } /* PRODUKTSUBNAVIGATION------------------*/ nav.produktsubnav { width: 100%; } nav.produktsubnav ul { width: 100%; float: left; margin: 10px 0 20px 0; padding-bottom: 10px; border-bottom: #ccc 2px solid; } /*RSP*/ nav.produktsubnav ul li{ float:left; display: inline; background-color: #f2f2f2; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } nav.produktsubnav ul li.produktsub1{ width: 49%; } nav.produktsubnav ul li.produktsub2{ width: 49%; margin-left: 2% !important; } nav.produktsubnav ul li.produktsub3{ width: 49%; margin-top: 15px; } nav.produktsubnav ul li.produktsub4{ width: 49%; margin-top: 15px; margin-left: 2% !important; } nav.produktsubnav .nav-pills > li + li { margin-left: 0; } @media (min-width: 768px) { nav.produktsubnav ul li{ float:left; display: inline; background-color: #f0f0f0; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } nav.produktsubnav ul li.produktsub1{ width: 18.2%; } nav.produktsubnav ul li.produktsub2{ width: 26.2%; } nav.produktsubnav ul li.produktsub3{ width: 26.2%; margin-top: 0px; } nav.produktsubnav ul li.produktsub4{ width: 26.2%; margin-top: 0px; } nav.produktsubnav .nav-pills > li + li { margin-left: 1% !important; } } nav.produktsubnav ul li a{ color: inherit; font-size: 12px; text-align: center; } @media (min-width: 768px) { nav.produktsubnav ul li a{ color: inherit; font-size: 15px; text-align: center; } } nav.produktsubnav ul.nav > li > a { padding: 6px 8px !important; } @media (min-width: 991px) and (max-width: 1199px){ nav.produktsubnav ul.nav > li > a { padding: 6px 7px !important; } } nav.produktsubnav .nav-pills li { font-weight: bold; } nav.produktsubnav ul.nav li a:hover, nav.produktsubnav ul.nav li a:focus { background-color: transparent; text-decoration: underline; border-radius: 0px; } nav.produktsubnav ul.nav li a.active, nav.produktsubnav ul.nav li a.active:hover, nav.produktsubnav ul.nav li a.active:focus { color: #fff; background-color: #1d3a8f; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; text-decoration: none; cursor: default; } /*-----------------------------------------------------------*/ /*------ Produktübersicht Showcases Fly-In Effekt -----------*/ /*-----------------------------------------------------------*/ .vertikal-zentriert { display:flex; align-items: center; justify-content: center; height: 236px; } @media (max-width: 1199px) { .vertikal-zentriert { height: 194px; } } @media (max-width: 991px) { .vertikal-zentriert { height: 145px; } } .showcase { margin-bottom: 0px; } @media (max-width: 1199px) { .showcase { font-size: 20px; margin-bottom: 20px; margin-top: 3em; } } @media (max-width: 991px) { .showcase { margin-bottom: 30px; margin-top: 3em; } } @media (max-width: 767px) { .showcase { display: none; } } .vertikal-zentriert h2 { font-size: 26px; font-weight: normal; margin-top:0px; margin-bottom:5px; } @media (max-width: 991px) { .vertikal-zentriert h2 { font-size: 18px; font-weight: bold; } } .vertikal-zentriert a { text-decoration: none; } .vonrechts { margin-left: 5000px; } .vonlinks { margin-left: -5000px; } .bild-links { height: 236px; } @media (max-width: 1199px) { .bild-links { height: 194px; } } @media (max-width: 991px) { .bild-links { height: 145px; } } /*-----------------------------------------------------------*/ /*---------------------- Parallax Boxen ---------------------*/ /*-----------------------------------------------------------*/ .background-attachment-fixed { background-attachment: fixed; } .parallax-slide { width: 100%; background-position: center; background-repeat: no-repeat; } .parallax-slide .container { margin: 0px 15px; } #slide1{ background-image: url('/img/parallax/rehau-fenster-teaser-xs.jpg'); height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-size: cover; } @media (min-width: 576px) { #slide1{ background-image: url('/img/parallax/rehau-fenster-teaser-sm.jpg'); height: 400px; } } @media (min-width: 768px) { #slide1{ background-image: url('/img/parallax/rehau-fenster-teaser-lg.jpg'); height: 500px; } } @media (min-width: 992px) { #slide1{ background-image: url('/img/parallax/rehau-fenster-teaser-xl.jpg'); height: 600px; } } /* align = right */ #slide2{ background-image: url('/img/parallax/rehau-hebeschiebetuer-synego-teaser-xs.jpg'); height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-size: cover; } @media (min-width: 576px) { #slide2{ background-image: url('/img/parallax/rehau-hebeschiebetuer-synego-teaser-sm.jpg'); height: 400px; } } @media (min-width: 768px) { #slide2{ background-image: url('/img/parallax/rehau-hebeschiebetuer-synego-teaser-lg.jpg'); height: 500px; } } @media (min-width: 992px) { #slide2{ background-image: url('/img/parallax/rehau-hebeschiebetuer-synego-teaser-xl.jpg'); height: 600px; } } /* align = left */ #slide3{ background-image: url('/img/parallax/rehau-haustueren-synego-teaser-xs.jpg'); height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-size: cover; } @media (min-width: 576px) { #slide3{ background-image: url('/img/parallax/rehau-haustueren-synego-teaser-sm.jpg'); height: 400px; } } @media (min-width: 768px) { #slide3{ background-image: url('/img/parallax/rehau-haustueren-synego-teaser-lg.jpg'); height: 500px; } } @media (min-width: 992px) { #slide3{ background-image: url('/img/parallax/rehau-haustueren-synego-teaser-xl.jpg'); height: 600px; } } /* align = left */ #slide4{ background-image: url('/img/parallax/-xs.jpg'); height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-size: cover; } @media (min-width: 576px) { #slide4{ background-image: url('/img/parallax/-sm.jpg'); height: 400px; } } @media (min-width: 768px) { #slide4{ background-image: url('/img/parallax/-lg.jpg'); height: 500px; } } @media (min-width: 992px) { #slide4{ background-image: url('/img/parallax/-xl.jpg'); height: 600px; } } /* align = left */ #slide5{ background-image: url('/img/parallax/-xs.jpg'); height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-size: cover; } @media (min-width: 576px) { #slide5{ background-image: url('/img/parallax/-sm.jpg'); height: 400px; } } @media (min-width: 768px) { #slide5{ background-image: url('/img/parallax/-lg.jpg'); height: 500px; } } @media (min-width: 992px) { #slide5{ background-image: url('/img/parallax/-xl.jpg'); height: 600px; } } /* align = left */ #slide6{ background-image: url('/img/parallax/-xs.jpg'); height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-size: cover; } @media (min-width: 576px) { #slide6{ background-image: url('/img/parallax/-sm.jpg'); height: 400px; } } @media (min-width: 768px) { #slide6{ background-image: url('/img/parallax/-lg.jpg'); height: 500px; } } @media (min-width: 992px) { #slide6{ background-image: url('/img/parallax/-xl.jpg'); height: 600px; } } /* align = left */ #slide7{ background-image: url('/img/parallax/-xs.jpg'); height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-size: cover; } @media (min-width: 576px) { #slide7{ background-image: url('/img/parallax/-sm.jpg'); height: 400px; } } @media (min-width: 768px) { #slide7{ background-image: url('/img/parallax/-lg.jpg'); height: 500px; } } @media (min-width: 992px) { #slide7{ background-image: url('/img/parallax/-xl.jpg'); height: 600px; } } /* align = left */ #slide8{ background-image: url('/img/parallax/-xs.jpg'); height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-size: cover; } @media (min-width: 576px) { #slide8{ background-image: url('/img/parallax/-sm.jpg'); height: 400px; } } @media (min-width: 768px) { #slide8{ background-image: url('/img/parallax/-lg.jpg'); height: 500px; } } @media (min-width: 992px) { #slide8{ background-image: url('/img/parallax/-xl.jpg'); height: 600px; } } /* CLAIMS */ .claim-slide{ background-image: url(../img/parallax/effekt1.png); } @media (min-width: 768px) { .claim-slide{ background-image: url(../img/parallax/effekt2.png); } } @media (min-width: 992px) { .claim-slide{ background-image: url(../img/parallax/effekt3.png); } } @media (min-width: 1200px) { .claim-slide{ background-image: url(../img/parallax/effekt4.png); } } .claim-slide { background-color: #1d3a8f; height: auto; margin: 0 auto; overflow: hidden; padding: 40px 15px; } @media (min-width: 992px) { .claim-slide { padding: 60px 15px; } } @media (min-width: 992px) { .claim-slide { padding: 80px 15px; } } .claim-slide .container, .parallax-slide .container{ width: 100%; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { .claim-slide .container, .parallax-slide .container { width: 730px; max-width: 100%; padding-left: 30px; padding-right: 30px; } } @media (min-width: 992px) { .claim-slide .container, .parallax-slide .container { width: 930px; max-width: 100%; } } @media (min-width: 1200px) { .claim-slide .container, .parallax-slide .container { width: 1110px; max-width: 100%; } } .claimbox { text-align: center; width: 100%; padding: 15px 15px; background-color: rgba(255,255,255,1); height: auto; margin: auto; overflow: hidden; } .claimbox a { text-decoration: none; } .claimbox h2 { font-size: 30px; color: #1d3a8f; margin-top: 0; margin-bottom: 0.1em; } .claimbox h3 { font-size: 18px; font-weight: normal; padding: 0!important; margin: 0; color: #444; } @media (min-width: 576px) { .claimbox { padding: 20px 20px; } } @media (min-width: 768px) { .claimbox { padding: 30px 30px; } .claimbox h2 { font-size: 32px; } .claimbox h3 { font-size: 20px; } } @media (min-width: 992px) { .claimbox h2 { font-size: 38px; } .claimbox h3 { font-size: 32px; } } @media (min-width: 1200px) { .claimbox h2 { font-size: 40px; } .claimbox h3 { font-size: 32px; } } div.parallax-slide .claimbox { background-color: rgba(255,255,255,0.85) !important; } #mapbox{ background-color: #2A2A2A; margin: 0 auto; padding: 0; overflow: hidden; height: 300px; width: 100%; } @media (min-width: 768px) { #mapbox{ height: 400px; } } @media (min-width: 992px) { #mapbox{ height: 500px; } } @media (min-width: 1200px) { #mapbox{ height: 600px; } } #mapbox iframe { width: 100%; height: 100%; } .telefon-link { font-size: 30px; margin-right: 5px; } /* CSS SLIDER START --------------------------------------*/ /* CSS SLIDER START --------------------------------------*/ /* CSS SLIDER START --------------------------------------*/ .cs_arrowprev { left: 0; background-image: none !important; /* entfernt prev. + next- Schatten-Effekt */ } .cs_arrownext { right: 0; background-image: none !important; } .csslider1 > .cs_description > label { font-family: Arial, Helvetica, Geneva, sans-serif !important; text-shadow: 0 0px 0px rgba(0, 0, 0, 0.6) !important; max-width: 80% !important; color: #ffffff !important; bottom: 0px !important; left: 0px !important; margin-top: 0px !important; margin-bottom: 0px !important; font-weight: normal; } /* TEXT */ .csslider1 > .cs_description > label .cs_title { font-size: 18px !important; margin-bottom: 0em !important; line-height: 1.3em !important; } .csslider1 label .cs_subtitle { font-size: 12px !important; } .csslider1 > .cs_description > label > .cs_title { padding: 10px 15px !important; } @media (min-width: 768px) { .csslider1 > .cs_description > label .cs_title { font-size: 22px !important; } .csslider1 label .cs_subtitle { font-size: 16px !important; } .csslider1 > .cs_description > label > .cs_title { padding: 15px 20px !important; } } @media (min-width: 992px) { .csslider1 > .cs_description > label .cs_title { font-size: 26px !important; } .csslider1 label .cs_subtitle { font-size: 20px !important; } } /* BOX */ .csslider1 > .cs_description > label > .cs_title { background: rgba(29,58,143,0.85); /* KUNDENFARBE */ } /*.csslider1 > .cs_arrowprev, .csslider1 > .cs_arrownext { top: 75px !important; bottom: 75px !important; }*/ #produktslider { width: 100%; height: auto; margin-bottom: 0 !important; } #produktslider img{ margin-bottom: 0 !important; } /* FROALA */ .fr-popup .fr-input-line input[type="text"], .fr-popup .fr-input-line textarea { font-size: 16px !important; height: 70px !important; } .fr-view .fr-file::after { content: none !important; } /* STARTNEWS */ /* STARTNEWS */ /* STARTNEWS */ #startnews { background-color: #f9f9f9; padding: 15px; } @media (min-width: 768px) { #startnews { padding: 30px; } } #startnews h2, #startnews .h2 { font-size:21px; } @media (min-width: 1200px) { #startnews h2, #startnews .h2 { font-size:24px; } } #startnews h2 { margin-top: 0; } #startnews h4 { margin-top: 1em; border-top: 2px solid #c1c1c1; padding-top: 3em; } #startnews h4:first-of-type { border-top: 2px none; padding-top: 1em; } /*REHAU*/ /* --------------------------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------------------- */ /* LOGO----------------------------------------------------*/ .rehauqualitybunt { width: 70px; height: auto; position: absolute; right: 25px; top: -2px; } @media (min-width: 992px) { .rehauqualitybunt { margin-left: 55px; width: 115px; height: auto; float: none; position: relative; top: 25px; } } @media (min-width: 1200px) { .rehauqualitybunt { margin-left: 72px; } } .inoventsiegel { width: 45px; height: auto; position: absolute; right: 104px; top: -6px; } @media (min-width: 992px) { .inoventsiegel { left: 45px; width: 125px; height: auto; float: none; position: relative; top: 70px; } } @media (min-width: 1200px) { .inoventsiegel { left: 62px; } } /* BILDER----------------------------------------------------*/ .wissentable img { padding-bottom: 0 !important; border: 0; } .aircomfortrechts{ margin-left: 3em; } .geneostart { padding-bottom: 25px !important; } .geneovorteil, .inoventvorteil, .synegovorteil { margin-top: 10px !important; margin-bottom: 20px !important; } .farbtool { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .farbtool object { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* AUFZÄHLUNGEN--------------------------------------------*/ .vorteilslinks{ font-size: 0.9em; list-style-type: none; line-height: 1.8em; margin-top: 1em; margin-bottom: 2em; } .vorteilslinks a.link:hover, .vorteilslinks a.link:focus, .vorteilslinks a.link:active { font-weight: bold; } .listpflege{ list-style-type: disc; margin-left: 1em; } /* TABELLEN-------------------------------------------------*/ /* TECHNIK */ .technik { font-size: 12px; width: 100%; margin-top: 16px; margin-bottom: 16px; border-collapse: collapse; } @media (min-width: 768px) { .technik { font-size: 15px; } } .technik td { line-height: 1.5em; padding: 5px; padding-left:10px; border: 1px solid #ccc; } .techniktd1 { width: 33%; font-weight: bold; } .techniktd2 { width: 67%; } .technik-inovent-td1 { width: 30%; } .technik-inovent-td2 { width: 18%; } .technik-inovent-td3 { width: 26%; } .technik-inovent-td4 { width: 26%; } /* WISSEN A-Z */ .wissentable, .wissentable-lightframe { font-size: 13px; line-height: inherit; width: 100%; margin-top: 16px; margin-bottom: 16px; border-collapse: collapse; } @media (min-width: 768px) { .wissentable, .wissentable-lightframe{ width: 100%; margin-top: 16px; margin-bottom: 16px; border-collapse: collapse; } } .wissentable td { padding-bottom: 20px; } .wissentd1 { width: 20%; vertical-align: top; } .wissentd2 { width: 70%; padding-left: 10%; } @media (min-width: 768px) { .wissentd2 { width: 79%; padding-left: 1%; } } .wissentable img{ max-width: 100%; height: auto; margin-top: 2px; } .wissentable h5{ margin-top: 0px; } #innerhauptbereich-wissenlightframe { padding-top: 50px; } /* GENEOVORTEILE------------------------------------------*/ .geneovorteile-start { width: 100%; margin: 1.5em 0 2em 0; text-align: center; padding-right: 0 !important; padding-left: 0 !important; } .geneovorteile-start .col-xs-2, .geneovorteile-start .col-md-2 { padding-right: 0 !important; padding-left: 0 !important; } .geneovorteile-start img { border: 0; padding: 0; margin-bottom: 7px !important; text-align: center; width: 55px; height: auto; } @media (min-width: 992px) { .geneovorteile-start img { width: 60px; margin-top: 0 !important; } } .geneovorteile-start a { font-weight: bold; text-decoration: none; font-size: 12px; } table.geneovorteile { width: 100%; text-align: left; } table.geneovorteile p{ margin: 0; font-weight: bold; } .geneovorteile a { font-weight: bold; font-size: 13px; line-height: 1.5em; } table.geneovorteile td{ vertical-align: middle; width: 73%; padding-left: 7%; padding-bottom: 15px; } @media (min-width: 768px) { table.geneovorteile td{ vertical-align: middle; width: 78%; padding-left: 2%; padding-bottom: 0px; } } .geneotd1 { width: 10% !important; padding-left: 0 !important; } .geneovorteile img{ max-width: 100%; height: auto; padding: 0; margin: 15px 0 15px 0; border: 0; } /* PRODUKTSUBNAVIGATION------------------*/ nav.produktsubnav { width: 100%; } nav.produktsubnav ul { width: 100%; float: left; margin: 10px 0 20px 0; padding-bottom: 10px; border-bottom: #ccc 2px solid; } @media (min-width: 768px) { nav.produktsubnav ul { width: 100%; float: left; margin: 10px 0 30px 0; padding-bottom: 15px; border-bottom: #ccc 2px solid; } } /*RSP*/ nav.produktsubnav ul li{ float:left; display: inline; background-color: #f2f2f2; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } nav.produktsubnav ul li.produktsub1{ width: 49%; } nav.produktsubnav ul li.produktsub2{ width: 49%; margin-left: 2% !important; } nav.produktsubnav ul li.produktsub3{ width: 49%; margin-top: 15px; } nav.produktsubnav ul li.produktsub4{ width: 49%; margin-top: 15px; margin-left: 2% !important; } nav.produktsubnav .nav-pills > li + li { margin-left: 0; } @media (min-width: 768px) { nav.produktsubnav ul li{ float:left; display: inline; background-color: #f0f0f0; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } nav.produktsubnav ul li.produktsub1{ width: 18.2%; } nav.produktsubnav ul li.produktsub2{ width: 26.2%; } nav.produktsubnav ul li.produktsub3{ width: 26.2%; margin-top: 0px; } nav.produktsubnav ul li.produktsub4{ width: 26.2%; margin-top: 0px; } nav.produktsubnav .nav-pills > li + li { margin-left: 1% !important; } } nav.produktsubnav ul li a{ color: inherit; font-size: 12px; text-align: center; text-decoration: none; } @media (min-width: 768px) { nav.produktsubnav ul li a{ color: inherit; font-size: 15px; text-align: center; } } @media (min-width: 768px) { nav.produktsubnav ul li a{ color: inherit; font-size: 15px; text-align: center; } } nav.produktsubnav .nav > li > a { padding: 6px 8px !important; } @media (min-width: 991px) and (max-width: 1199px){ nav.produktsubnav .nav > li > a { padding: 6px 7px !important; } } nav.produktsubnav .nav-pills li { font-weight: bold; } nav.produktsubnav .nav li a:hover, nav.produktsubnav .nav li a:focus { text-decoration: underline; background-color: transparent; } nav.produktsubnav .nav li a.active, nav.produktsubnav .nav li a.active:hover, nav.produktsubnav .nav li a.active:focus { color: #fff; background-color: #bacbd3; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; text-decoration: none; cursor: default; } /*wird mittels js bei IE aktiviert und behebt IE-Fehler */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .responsively-lazy { opacity: 1 !important; } } /* PFEIL_RUNTER **************************/ /* PFEIL_RUNTER **************************/ /* PFEIL_RUNTER **************************/ .pfeil-runter { display: none; } @media (min-width: 768px) { .pfeil-runter { width: 100%; bottom: 60px; display: block; position: absolute; z-index: 5000; margin: 0 auto; text-align: center; } } @media (min-width: 992px) { .pfeil-runter { bottom: 70px; } } @media (min-width: 1200px) { .pfeil-runter { bottom: 100px; } } @media (min-width: 768px) { .glyphicon-download { right: 0; left: 0; position: absolute; z-index: 200; font-size: 45px; width: 80px; margin: 0 auto; text-align: center; } } @media (min-width: 992px) { .glyphicon-download { font-size: 50px; } } @media (min-width: 1200px) { .glyphicon-download { font-size: 70px; } } .glyphicon-download { color: #1d3a8f; } .glyphicon-download:hover, .glyphicon-download:active, .glyphicon-download:focus { color: #565656; } /* BOUNCING GLYPHICON--------------------------------------*/ /*http://codepen.io/anon/pen/yyJbPL*/ @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-15px); transform: translateY(-15px); } 60% { -moz-transform: translateY(-10px); transform: translateY(-10px); } } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } 60% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -webkit-transform: translateY(-15px); transform: translateY(-15px); } 60% { -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); } } .bounce { -moz-animation: bounce 4s infinite; -webkit-animation: bounce 4s infinite; animation: bounce 4s infinite; } /* Colour Bootstrap Default Button in Kundenfabe */ .btn-default { background-color: #1d3a8f!important; /* Templatefarbe */ border-color: #1d3a8f!important; color:#FFF; } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { background-color: #ccc!important; border-color: #ccc!important; color:#FFF; } .btn-default a, .btn-default a:hover, .btn-default a:focus { text-decoration: none; color:#FFF; } /* DATENSCHUTZERKLÄRUNG--------------------------------------*/ .datenschutzdiv h2 { margin-top: 3.5em !important; margin-bottom: 0.1em !important; } .datenschutzdiv h3 { margin-top: 2.5em !important; margin-bottom: 0.5em !important; } .startsymbole-unterseite .fas, /* große FA-Icons auf Produktseiten */ .startsymbole-unterseite .far, .startsymbole-unterseite .fab, .startsymbole-unterseite .fal { color: #1d3a8f ; /* Templatefarbe */ font-size: 70px; } /* iconbox-Box */ .iconbox { background: rgb(var(--templatefarbe_rgb)); background: -moz-linear-gradient(170deg, rgba(var(--templatefarbe_rgb),1) 0%, rgba(var(--templatefarbe_rgb),0.8) 79%); background: -webkit-linear-gradient(170deg, rgba(var(--templatefarbe_rgb),1) 0%, rgba(var(--templatefarbe_rgb),0.8) 79%); background: linear-gradient(170deg, rgba(var(--templatefarbe_rgb),1) 0%, rgba(var(--templatefarbe_rgb),0.8) 79%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0",endColorstr="#ffffff",GradientType=1); color: #fff; font-weight: bold; padding: 2em 1em; margin-bottom: 30px; text-align: left !important; } @media (min-width: 768px) { .iconbox { padding: 2em 1em; } } .iconbox h2, .iconbox h2 i { font-size: 30px; margin-top: 0 !important; margin-bottom: 0 !important; text-align: left !important; } .iconbox h3, .iconbox h3 i { font-size: 25px; margin-top: 2em !important; margin-bottom: 0 !important; text-align: left !important; } .iconbox h4, .iconbox h4 i { font-size: 17px; margin-top: 0 !important; margin-bottom: 0 !important; text-align: left !important; } @media (min-width: 768px) { .iconbox h2, .iconbox h2 i { font-size: 30px; margin-top: 0 !important; margin-bottom: 0 !important; } .iconbox h3, .iconbox h3 i { font-size: 20px; margin-top: 0 !important; margin-bottom: 0 !important; } .iconbox h4, .iconbox h4 i { font-size: 17px; margin-top: 0 !important; margin-bottom: 0 !important; } } @media (min-width: 992px) { .iconbox h2, .iconbox h2 i { font-size: 35px; margin-top: 0 !important; margin-bottom: 0 !important; } .iconbox h3, .iconbox h3 i { font-size: 25px; margin-top: 0 !important; margin-bottom: 0 !important; } .iconbox h4, .iconbox h4 i { font-size: 18px; margin-top: 0 !important; margin-bottom: 0 !important; } } @media (min-width: 1200px) { .iconbox h2, .iconbox h2 i { font-size: 40px; margin-top: 0 !important; margin-bottom: 0 !important; } .iconbox h3, .iconbox h3 i { font-size: 30px; margin-top: 0 !important; margin-bottom: 0 !important; } .iconbox h4, .iconbox h4 i { font-size: 20px; margin-top: 0 !important; margin-bottom: 0 !important; } } @media (min-width: 1400px) { .iconbox h2, .iconbox h2 i { font-size: 45px; margin-top: 0 !important; margin-bottom: 0 !important; } .iconbox h3, .iconbox h3 i { font-size: 35px; margin-top: 0 !important; margin-bottom: 0 !important; } .iconbox h4, .iconbox h4 i { font-size: 22px; margin-top: 0 !important; margin-bottom: 0 !important; } } .iconbox h2 i, .iconbox h3 i, .iconbox h4 i { margin-left: 0.5em; } .iconbox i { font-size: 4em; } @media (min-width: 768px) { .iconbox i { font-size: 6em; } } @media (min-width: 992px) { .iconbox i { font-size: 8em; } } @media (min-width: 1200px) { .iconbox i { font-size: 9em; } } @media (min-width: 1400px) { .iconbox i { font-size: 10em; } .iconbox img { margin-bottom: 0 !important; } } .greenbox { color: #bc3752 !important; border: 4px solid #009964; } .divider-headline { background: rgb(128,128,128); background: -moz-linear-gradient(170deg, rgba(128,128,128,1) 0%, rgba(128,128,128,0.6) 79%); background: -webkit-linear-gradient(170deg, rgba(128,128,128,1) 0%, rgba(128,128,128,0.6) 79%); background: linear-gradient(170deg, rgba(128,128,128,1) 0%, rgba(128,128,128,0.6) 79%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0",endColorstr="#ffffff",GradientType=1); padding:10px 10px 10px 10px; margin-left: 0px; margin-top: 3em; color: white; position: relative; } @media (min-width: 992px) { .divider-headline { background: rgb(128,128,128); background: -moz-linear-gradient(170deg, rgba(128,128,128,1) 0%, rgba(128,128,128,0.6) 79%); background: -webkit-linear-gradient(170deg, rgba(128,128,128,1) 0%, rgba(128,128,128,0.6) 79%); background: linear-gradient(170deg, rgba(128,128,128,1) 0%, rgba(128,128,128,0.6) 79%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0",endColorstr="#ffffff",GradientType=1); padding:10px 10px 10px 28px; margin-top: 3em; } } .divider-headline-kunde { background: rgb(var(--templatefarbe_rgb)); background: -moz-linear-gradient(170deg, rgba(var(--templatefarbe_rgb),1) 0%, rgba(var(--templatefarbe_rgb),0.6) 79%); background: -webkit-linear-gradient(170deg, rgba(var(--templatefarbe_rgb),1) 0%, rgba(var(--templatefarbe_rgb),0.6) 79%); background: linear-gradient(170deg, rgba(var(--templatefarbe_rgb),1) 0%, rgba(var(--templatefarbe_rgb),0.6) 79%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0",endColorstr="#ffffff",GradientType=1); padding:10px 10px 10px 10px; margin-left: 0px; margin-top: 3em; color: white; position: relative; } @media (min-width: 992px) { .divider-headline-kunde { background: rgb(var(--templatefarbe_rgb)); background: -moz-linear-gradient(170deg, rgba(var(--templatefarbe_rgb),1) 0%, rgba(var(--templatefarbe_rgb),0.6) 79%); background: -webkit-linear-gradient(170deg, rgba(var(--templatefarbe_rgb),1) 0%, rgba(var(--templatefarbe_rgb),0.6) 79%); background: linear-gradient(170deg, rgba(var(--templatefarbe_rgb),1) 0%, rgba(var(--templatefarbe_rgb),0.6) 79%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0",endColorstr="#ffffff",GradientType=1); padding:10px 10px 10px 28px; margin-top: 3em; } } /* KACHELBOXEN + STARTSYMBOLE ------------------------------------------------- */ .separator { display: inline-block; vertical-align: middle; width: 80px; height: 2px; margin-top: 10px; margin-bottom: 30px; background-color: var(--akzentfarbe_hex); } .startsymbole .fas, .startsymbole .far, .startsymbole .fab, .startsymbole .fal { color: var(--akzentfarbe_hex); font-size: 100px; } .startsymbole a, .kachel-textbox a{ text-decoration: none; } .startsymbole-unterseite .fas, /* große FA-Icons auf Produktseiten */ .startsymbole-unterseite .far, .startsymbole-unterseite .fab, .startsymbole-unterseite .fal { color: var(--akzentfarbe_hex); font-size: 70px; } h2.with-icon{ margin-top: 1em !important; } .no-gutters { padding-left: 0 !important; padding-right: 0 !important; } .nomarginbottom img { margin-bottom: 0 !important; } .kachel-textbox { height: 100%; width: 95%; vertical-align: middle; display: flex; justify-content: center; flex-direction: column; position: relative; } @media (min-width: 992px) { .kachel-textbox { width: 80%; } } @media (min-width: 1200px) { .kachel-textbox { width: 80%; } } @media (min-width: 1300px) { .kachel-textbox { width: 80%; } } @media (min-width: 1440px) { .kachel-textbox { width: 70%; } } .kachelboxen { background-color: rgba(var(--kachelboxenfarbe_rgb), 0.8); } .kachelboxen h3 { margin-top: 0 !important; } .kachelboxen .btn-lg { color: #fff; background-color: var(--akzentfarbe_hex); border-color: var(--akzentfarbe_hex); font-size: 12px; } @media (min-width: 576px) { .kachelboxen .btn-lg { font-size: 13px; } } @media (min-width: 768px) { .kachelboxen .btn-lg { font-size: 14px; } } @media (min-width: 992px) { .kachelboxen .btn-lg { font-size: 15px; } } @media (min-width: 1200px) { .kachelboxen .btn-lg { font-size: 16px; } } .kachelboxen .btn-lg:hover, .kachelboxen .btn-lg:focus, .kachelboxen .btn-lg:active { color: #fff; background-color: #888; border-color: #888; } .kachel-textrahmen { text-align: center !important; padding: 30px; overflow: hidden } .kachel-textrahmen button { cursor: pointer; } .kachel-textrahmen h2 { font-size: 22px; color: var(--templatefarbe_hex); margin-top: 0; margin-bottom: 0.1em; } .kachel-textrahmen h3 { font-size: 18px; font-weight: normal; padding: 0 0 20px 0!important; margin: 0; color: var(--textfarbe_hex); } @media (min-width: 768px) { .kachel-textrahmen h2 { font-size: 28px; color: var(--templatefarbe_hex); margin-top: 0; margin-bottom: 0.1em; } .kachel-textrahmen h3 { font-size: 18px; font-weight: normal; padding: 0 0 20px 0!important; margin: 0; color: var(--textfarbe_hex); } } @media (min-width: 992px) { .kachel-textrahmen h2 { font-size: 27px; } .kachel-textrahmen h3 { font-size: 21px; } } @media (min-width: 1200px) { .kachel-textrahmen h2 { font-size: 32px; } .kachel-textrahmen h3 { font-size: 27px; } } @media (min-width: 1440px) { .kachel-textrahmen h2 { font-size: 36px; } .kachel-textrahmen h3 { font-size: 30px; } } /* KACHELBOXEN + STARTSYMBOLE ENDE------------------------------------------------- */ /* PARALLAX BOXEN ------------------------------------------------- */ .background-attachment-fixed { background-attachment: fixed; } .parallax-slide { width: 100%; background-position: center; background-repeat: no-repeat; } .parallax-slide .container { margin: 0px 15px; } /* CLAIMS */ .claim-slide{ background-image: url(../img/parallax/effekt1.png); } @media (min-width: 768px) { .claim-slide{ background-image: url(../img/parallax/effekt2.png); } } @media (min-width: 992px) { .claim-slide{ background-image: url(../img/parallax/effekt3.png); } } @media (min-width: 1200px) { .claim-slide{ background-image: url(../img/parallax/effekt4.png); } } .claim-slide { background-color: var(--claimslidefarbe_hex); height: auto; margin: 0 auto; overflow: hidden; padding: 40px 15px; } @media (min-width: 992px) { .claim-slide { padding: 60px 15px; } } @media (min-width: 992px) { .claim-slide { padding: 80px 15px; } } .claim-slide .container, .parallax-slide .container{ width: 100%; padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { .claim-slide .container, .parallax-slide .container { width: 730px; max-width: 100%; padding-left: 30px; padding-right: 30px; } } @media (min-width: 992px) { .claim-slide .container, .parallax-slide .container { width: 930px; max-width: 100%; } } @media (min-width: 1200px) { .claim-slide .container, .parallax-slide .container { width: 1110px; max-width: 100%; } } .claimbox { text-align: center; width: 100%; padding: 15px 15px; background-color: var(--claimboxinnerfarbe_hex); height: auto; margin: auto; overflow: hidden; } .claimbox a { text-decoration: none; } .claimbox h2 { font-size: 24px; color: var(--claimboxtextfarbe_hex); margin-top: 0; margin-bottom: 0.1em; } .claimbox h3 { font-size: 17px; font-weight: normal; padding: 0!important; margin: 0; color: var(--textfarbe_hex); } @media (min-width: 576px) { .claimbox { padding: 20px 20px; } } @media (min-width: 768px) { .claimbox { padding: 30px 30px; } .claimbox h2 { font-size: 32px; } .claimbox h3 { font-size: 20px; } } @media (min-width: 992px) { .claimbox h2 { font-size: 38px; } .claimbox h3 { font-size: 32px; } } @media (min-width: 1200px) { .claimbox h2 { font-size: 40px; } .claimbox h3 { font-size: 32px; } } div.parallax-slide .claimbox { background-color: rgba(255,255,255,0.85) !important; } /* PARALLAX BOXEN ENDE */ /* PARALLAX BILDER */ .slide1-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax01-xs.jpg); height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-size: cover; } @media (min-width: 576px) { .slide1-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax01-sm.jpg); height: 400px; } } @media (min-width: 768px) { .slide1-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax01-lg.jpg); height: 500px; } } @media (min-width: 992px) { .slide1-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax01-xl.jpg); height: 600px; } } /* align = right */ .slide2-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax02-xs.jpg); height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-size: cover; } @media (min-width: 576px) { .slide2-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax02-sm.jpg); height: 400px; } } @media (min-width: 768px) { .slide2-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax02-lg.jpg); height: 500px; } } @media (min-width: 992px) { .slide2-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax02-xl.jpg); height: 600px; } } /* align = left */ .slide3-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax03-xs.jpg); height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-size: cover; } @media (min-width: 576px) { .slide3-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax03-sm.jpg); height: 400px; } } @media (min-width: 768px) { .slide3-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax03-lg.jpg); height: 500px; } } @media (min-width: 992px) { .slide3-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax03-xl.jpg); height: 600px; } } /* align = left */ .slide4-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax04-xs.jpg); height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-size: cover; } @media (min-width: 576px) { .slide4-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax04-sm.jpg); height: 400px; } } @media (min-width: 768px) { .slide4-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax04-lg.jpg); height: 500px; } } @media (min-width: 992px) { .slide4-rehau { background-image: url(/config-templates/rehau/img/parallax/parallax04-xl.jpg); height: 600px; } } /* align = left */ .slide5-rehau { background-image: url(/config-templates/rehau/img/parallax/-xs.jpg); height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-size: cover; } @media (min-width: 576px) { .slide5-rehau { background-image: url(/config-templates/rehau/img/parallax/-sm.jpg); height: 400px; } } @media (min-width: 768px) { .slide5-rehau { background-image: url(/config-templates/rehau/img/parallax/-lg.jpg); height: 500px; } } @media (min-width: 992px) { .slide5-rehau { background-image: url(/config-templates/rehau/img/parallax/-xl.jpg); height: 600px; } } /* align = left */ .slide6-rehau { background-image: url(/config-templates/rehau/img/parallax/-xs.jpg); height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background-size: cover; } @media (min-width: 576px) { .slide6-rehau { background-image: url(/config-templates/rehau/img/parallax/-sm.jpg); height: 400px; } } @media (min-width: 768px) { .slide6-rehau { background-image: url(/config-templates/rehau/img/parallax/-lg.jpg); height: 500px; } } @media (min-width: 992px) { .slide6-rehau { background-image: url(/config-templates/rehau/img/parallax/-xl.jpg); height: 600px; } } /* Kachelboxen: schwacher Hintergrund */ div.kachelbg1, div.kachelbg2, div.kachelbg3, div.kachelbg4, div.kachelbg5, div.kachelbg6 { position: relative; } @media (max-width: 991px) { div.kachelbg1::before, div.kachelbg2::before, div.kachelbg3::before, div.kachelbg4::before, div.kachelbg5::before, div.kachelbg6::before { background: none !important; } } div.kachelbg1::before { content: ""; background: url(/config-templates/rehau/img/kachelboxen/kachelbox01-md.jpg); opacity: 0.1; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 0; transform: scale(1.4); } div.kachelbg2::before { content: ""; background: url(/config-templates/rehau/img/kachelboxen/kachelbox02-md.jpg); opacity: 0.1; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 0; transform: scale(1.4); } div.kachelbg3::before { content: ""; background: url(/config-templates/rehau/img/kachelboxen/kachelbox03-md.jpg); opacity: 0.1; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 0; transform: scale(1.4); } div.kachelbg4::before { content: ""; background: url(/config-templates/rehau/img/kachelboxen/kachelbox04-md.jpg); opacity: 0.1; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 0; transform: scale(1.4); } div.kachelbg5::before { content: ""; background: url(/config-templates/rehau/img/kachelboxen/kachelbox05-md.jpg); opacity: 0.1; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 0; transform: scale(1.4); } div.kachelbg6::before { content: ""; background: url(/config-templates/rehau/img/kachelboxen/kachelbox06-md.jpg); opacity: 0.1; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 0; transform: scale(1.4); } /* NEU 2023 */ /* NEU 2023 */ /* NEU 2023 */ div.kachelboxen .row { display: flex; flex-wrap: wrap; } div.kachelboxen .row:nth-child(2) div:nth-child(2) { order: 1; } div.kachelboxen .row:nth-child(2) div:nth-child(1) { order: 2; } div.kachelboxen .row:nth-child(4) div:nth-child(2) { order: 1; } div.kachelboxen .row:nth-child(4) div:nth-child(1) { order: 2; } @media (min-width: 992px) { div.kachelboxen .row { display: flex; flex-wrap: nowrap; } div.kachelboxen .row:nth-child(2) div:nth-child(2) { order: 2; } div.kachelboxen .row:nth-child(2) div:nth-child(1) { order: 1; } div.kachelboxen .row:nth-child(4) div:nth-child(2) { order: 2; } div.kachelboxen .row:nth-child(4) div:nth-child(1) { order: 1; } } .no-gutters, .no-gutters .col-lg-6 { padding-left: 0 !important; padding-right: 0 !important; margin-right: 0 !important; margin-left: 0 !important; } /* startheaders*/ @media (min-width: 1200px) { .startheaders h1 { font-size: 32px; } } /*Kontaktformular*/ @media (min-width: 1200px) { .form-control { height: 40px; font-size: 17px; } } /* iconbox-Box */ .iconbox .row { margin-bottom: 0 !important; } .equal-height-box .iconbox { margin-top: 0 !important; margin-bottom: 0 !important; text-align: center; } @media (min-width: 992px) { .equal-height-box .iconbox { display: grid; text-align: left; } } .equal-height-box { margin-bottom: 10px !important; } @media (min-width: 992px) { .equal-height-box { margin-bottom: 0px !important; } } .iconbox { background: rgb(var(--hinweisboxfarbe_rgb),1); background: -moz-linear-gradient(170deg, rgba(var(--hinweisboxfarbe_rgb),1) 0%, rgba(var(--hinweisboxfarbe_rgb),0.8) 79%); background: -webkit-linear-gradient(170deg, rgba(var(--hinweisboxfarbe_rgb),1) 0%, rgba(var(--hinweisboxfarbe_rgb),0.8) 79%); background: linear-gradient(170deg, rgba(var(--hinweisboxfarbe_rgb),1) 0%, rgba(var(--hinweisboxfarbe_rgb),0.8) 79%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f0f0f0",endColorstr="#ffffff",GradientType=1); color: var(--hinweisboxtextfarbe_hex); font-weight: bold; padding: 2em 2em; margin-top: 2em; margin-bottom: 2em;; } @media (min-width: 768px) { .iconbox { padding: 2em 2em; } } .iconbox h2 { font-size: 30px; margin-top: 0 !important; margin-bottom: 0 !important; text-align: center !important; } .iconbox h3 { font-size: 24px; margin-top: 1em !important; margin-bottom: 0.3em !important; text-align: center !important; line-height: 1.3em; } .iconbox h4 { font-size: 17px; margin-top: 1em !important; margin-bottom: 0 !important; text-align: center !important; } @media (min-width: 768px) { .iconbox h2 { font-size: 30px; margin-top: 0 !important; margin-bottom: 0 !important; text-align: center !important; } .iconbox h3 { font-size: 24px; margin-top: 0 !important; margin-bottom: 0.4em !important; text-align: center !important; } .iconbox h4 { font-size: 17px; margin-top: 1em !important; margin-bottom: 0 !important; text-align: center !important; } } @media (min-width: 992px) { .iconbox h2 { font-size: 35px; margin-top: 0 !important; margin-bottom: 0 !important; text-align: left !important; } .iconbox h3 { font-size: 25px; margin-top: 0 !important; margin-bottom: 0 !important; text-align: left !important; } .iconbox h4 { font-size: 18px; margin-top: 0 !important; margin-bottom: 0 !important; text-align: left !important; } } @media (min-width: 1200px) { .iconbox h2 { font-size: 40px; margin-top: 0 !important; margin-bottom: 0 !important; } .iconbox h3 { font-size: 27px; margin-top: 0 !important; margin-bottom: 0 !important; } .iconbox h4 { font-size: 20px; margin-top: 0 !important; margin-bottom: 0 !important; } } @media (min-width: 1400px) { .iconbox h2 { font-size: 45px; margin-top: 0 !important; margin-bottom: 0 !important; } .iconbox h3 { font-size: 30px; margin-top: 0 !important; margin-bottom: 0 !important; } .iconbox h4 { font-size: 22px; margin-top: 0 !important; margin-bottom: 0 !important; } } .iconbox i { font-size: 4em; } @media (min-width: 768px) { .iconbox i { font-size: 5em; } } @media (min-width: 992px) { .iconbox i { font-size: 5em; } } @media (min-width: 1200px) { .iconbox i { font-size: 7em; } } @media (min-width: 1440px) { .iconbox i { font-size: 8em; } } .iconbox img { margin-bottom: 0 !important; } .produktuebersicht h3 { margin-top: 0.5em; margin-bottom: 2em;} .hide-dropdown a.sidebarnavititle .caret{ display:none; } @media screen and (max-width:991px){ #mainmenu .navbar-default ul.nav li{ margin-right:1px; } } /*--- weik push menu */ @media screen and (max-width:991px){ @supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */ body {cursor: pointer;} } .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } .hide-dropdown a.sidebarnavititle .caret{ display:inline-block; } .caret { display: inline-block; float: right; margin-top: 13px; } .caret, .navbar-nav .dropdown-submenu > a:before { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-right:0 !important; border-top: 6px solid transparent !important; border-bottom: 6px solid transparent !important; border-left: 6px solid #fff !important; } .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:before, .dropdown.open a.sidebarnavititle .caret{ border-top-color: #555555 !important; border-left:6px solid transparent !important; border-right:6px solid transparent !important; border-top: 6px solid #fff !important; } .navbar-nav .dropdown-submenu > a:before { margin-top: 17px !important; } .navbar-nav .dropdown li { text-indent: 10px; background-color: #4d4d4d; } .navbar-nav .dropdown-submenu .grau { background-color: #4d4d4d; } .dropdown-menu .nav-zwei { text-indent: 20px; } .dropdown-menu .nav-drei { text-indent: 30px; } .dropdown-menu .nav-vier { text-indent: 40px; } /*.navbar-default{ height:0px; }*/ #sidebar .navbar-default{ display:none; } .navbar-toggle .icon-bar{ position:relative; } .navbar-default .navbar-toggle .icon-bar{ background:#1d3a8f; } .navbar-toggle.active .icon-bar.bar1 { top: 6px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .navbar-toggle.active .icon-bar.bar2 { background-color: transparent; } .navbar-toggle.active .icon-bar.bar3 { top: -8px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @media (min-width: 576px) { .navbar-toggle.active .icon-bar.bar3 { top: -8px; } } #mainmenu .navbar-default ul.nav{ float:left; width:100%; } #mainmenu .navbar-default ul.nav li{ float:left; width:100%; display:block; } .dropdown-menu > li > a{ height: 40px; line-height: 40px; color: #f7f7f7; } .navbar-collapse.weik-sidepmenu{ position:fixed; } .navbar-nav>li>a { height: 50px; line-height:50px; color:#fff !important; padding:0px 12px 0 25px!important; } .dropdown-submenu > a:before{ top:11px; margin-right:0px !important; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a, .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:hover, .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:focus{ background-color:#4d4d4d; color:#f7f7f7 !important; } #hauptnavigation > ul > li.dropdown.m_open.open > ul > li.dropdown-submenu.m_open.grau.open > a { font-weight: bold !important; background-color: #707070 !important; } #hauptnavigation > ul > li.dropdown.open > ul > li.dropdown-submenu.grau.open > ul > li a, #hauptnavigation > ul > li.dropdown.m_open.open > ul > li.dropdown-submenu.m_open.grau.open > ul > li > a { background-color: #707070; } #hauptnavigation > ul > li.dropdown.m_open.open > ul > li.dropdown-submenu.m_open.grau.open > ul > li > a.active { background-color: #1d3a8f !important; } li.open .sidebarnavititle { background-color: #4d4d4d !important; } #mainmenu .navbar-default ul.nav li.dropdown.open a.sidebarnavititle{ /*background-color:#4d4d4d;*/ height:40px; line-height:40px; font-weight: bold; } .sidebarnavititle.active, .dropdown-submenu.m_open.grau a, .dropdown-submenu.grau a, #mainmenu .navbar-default ul.nav li a{ height:40px; line-height:40px; padding-top:0px !important; padding-bottom:0px !important; } .dropdown-menu.main-dropdown-menu{ float:left; padding-top:0px; } .dropdown-menu { padding: 0 !important; } .sidebarnavititle.active .caret{ top:14px !important; } .navbar-nav>li>a:hover, .navbar-nav>li>a:focus, .navbar-nav>li>a:active{ color:#cc3f4a; } ul.dropdown-menu.main-dropdown-menu li.open a{ color: #1d3a8f !important; } #hauptnavigation{ background:#333; } .collapse.navbar-collapse#hauptnavigation{ right: -240px; position:fixed; width: 240px; height: 100%; top: 0; bottom: 0; z-index: 1000; visibility: visible; padding: 0; margin: 0 !important; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; display:block; overflow-y:visible; overflow-x:hidden; } .show-left-menu{ right:0px !important; } .weik-sidepmenu { background: #47a3da; position: fixed; } .weik-sidepmenu h3 { color: #afdefa; font-size: 1.9em; padding: 20px; margin: 0; font-weight: 300; background: #0d77b6; } .weik-sidepmenu a { display: block; color: #fff; font-size: 1.1em; font-weight: 300; } .weik-sidepmenu a:hover { background: #258ecd; } .weik-sidepmenu a:active { background: #afdefa; color: #47a3da; } /* Orientation-dependent styles for the content of the menu */ .weik-sidepmenu-vertical { width: 240px; height: 100%; top: 0; bottom:0; z-index: 1000; } .weik-sidepmenu { position: fixed; padding: 0; margin: 0 !important; overflow-x: hidden; overflow-y: visible; display: block; visibility: visible; } .weik-sidepmenu-vertical a { border-bottom: 1px solid #424242; padding: 1em; } .weik-sidepmenu-horizontal { width: 100%; height: 150px; left: 0; z-index: 1000; overflow: hidden; } .weik-sidepmenu-horizontal h3 { height: 100%; width: 20%; float: left; } .weik-sidepmenu-horizontal a { float: left; width: 20%; padding: 0.8em; border-left: 1px solid #258ecd; } /* Vertical menu that slides from the left or right */ .weik-sidepmenu-left { left: -260px; } .weik-sidepmenu-right { right: -260px; } .weik-sidepmenu-left.weik-sidepmenu-open { left: 0px; } .weik-sidepmenu-right.weik-sidepmenu-open { right: 0px; } /* Horizontal menu that slides from the top or bottom */ .weik-sidepmenu-top { top: -150px; } .weik-sidepmenu-bottom { bottom: -150px; } .weik-sidepmenu-top.weik-sidepmenu-open { top: 0px; } .weik-sidepmenu-bottom.weik-sidepmenu-open { bottom: 0px; } /* Push classes applied to the body */ .weik-sidepmenu-push { overflow-x:visible; position: relative; right: 0; } .weik-sidepmenu-push-toright { right: 240px; } .weik-sidepmenu-push-toleft { right: -240px; } /* Transitions */ .weik-sidepmenu, .weik-sidepmenu-push { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } } /* HAUPTNAVIGATION MOBIL-------------------------------*/ /* HAUPTNAVIGATION MOBIL-------------------------------*/ /* HAUPTNAVIGATION MOBIL-------------------------------*/ @media (max-width: 991px) { #mainmenu .navbar-collapse { padding-right: 0px; padding-left: 0px; overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: none; box-shadow: none; } #mainmenu .navbar-collapse ul.nav { /*zentriert die ausgeklappte Navigation */ margin-top: 0px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; width: 100%; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; text-align: center; float: none; display: block; } #mainmenu .navbar-collapse ul.nav li { position: relative; display: block; margin-right:0px; margin-left:0px; } #mainmenu .navbar-collapse ul.nav li a { position: relative; display: block; padding: 10px 12px; padding-left:25px; color:#f7f7f7 !important; text-decoration: none; text-align:left; } #mainmenu .navbar-collapse ul.nav > li > a { color: #4d4d4d; text-transform: uppercase; font-size: 15px !important; text-align:left; } #mainmenu .navbar-collapse ul.nav li a:hover, #mainmenu .navbar-collapse ul.nav li a:focus { color: #fff !important; text-decoration: none; background-color: #828282!important; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; } #mainmenu .navbar-collapse ul.nav li a.active, #mainmenu .navbar-collapse ul.nav li a.active:hover, #mainmenu .navbar-collapse ul.nav li a.active:focus { background-color: #1d3a8f; cursor: default; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; color: #fff !important; font-weight: bold; } #hauptnavigation > ul > li.dropdown.open > ul > li.dropdown-submenu.grau.open > a { font-weight: bold; } } @media (min-width: 768px) { /*blendet das Standardmenü schon ab 768px ein - Standard wäre 992px*/ .navbar-collapse { width: auto; border-top: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-collapse.in { overflow-y: visible; } .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { padding-right: 0; padding-left: 0; } } @media (max-width: 991px) { #mainmenu .navbar-collapse .grau { background-color: #4d4d4d; } #hauptnavigation > ul > li.dropdown.open > ul > li.dropdown-submenu.grau.open { background-color: #707070 !important; } } /* HAUPTNAVIGATION TOGGLE-SYMBOL-------------------------------*/ /* HAUPTNAVIGATION TOGGLE-SYMBOL-------------------------------*/ /* HAUPTNAVIGATION TOGGLE-SYMBOL-------------------------------*/ #mainmenu .toggle-wrap{ margin-top: 0px !important; height: 50px; width: 50px; padding-top: 0 !important; } @media (min-width: 992px) { #mainmenu .toggle-wrap{ display: none; } } #mainmenu button.navbar-toggle { position: relative; float: none; padding: 5px; margin-right: 15px; margin-top: 0px; margin-bottom: 2px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 0px; display: inline-block; } #mainmenu button.navbar-toggle:hover, #mainmenu button.navbar-toggle:focus { background-color:transparent; } @media (min-width: 992px) { #mainmenu .togglehead{ display:none !important; } } #mainmenu .togglehead p{ color: inherit; font-size: 14px; line-height: 14px; margin-right: 11px; font-weight: bold; margin-top: 0px; margin-bottom: 0px; text-align: center; } @media (min-width: 768px) { #mainmenu .togglehead p{ font-size: 14px; line-height: 14px; margin-right: 11px; } } @media (min-width: 1200px) { #mainmenu .togglehead p{ font-size: 15px; line-height: 15px; margin-right: 10px; } } @media (min-width: 1400px) { #mainmenu .togglehead p{ font-size: 17px; line-height: 17px; margin-right: 7px; } } .navbar-toggle .icon-bar { display: block; width: 24px; height: 3px; border-radius: 1px; } @media (min-width: 576px) { .navbar-toggle .icon-bar { width: 24px; height: 3px; } } @media (min-width: 768px) { .navbar-toggle .icon-bar { width: 26px; height: 3px; } } @media (min-width: 1200px) { .navbar-toggle .icon-bar { width: 28px; height: 4px; } } @media (min-width: 1400px) { .navbar-toggle .icon-bar { width: 28px; height: 4px; } .navbar-toggle .icon-bar + .icon-bar { margin-top: 3px; } } /* fixes a bug in the menu colors */ .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: inherit; border-color: inherit; } /** menu css for scroll and fix */ .navbar-inverse{ z-index: 4; width: 1110px !important; max-width: 100%; left: 0; right: 0; } .affix { top: 0; width: 100%; } .affix + .container-fluid { padding-top: 70px; } .dropdown-menu > li > label { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333333; white-space: nowrap; } .dropdown-menu > li > label:hover, .dropdown-menu > li > label:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .dropdown-menu > li > input:checked ~ label, .dropdown-menu > li > input:checked ~ label:hover, .dropdown-menu > li > input:checked ~ label:focus, .dropdown-menu > .active > label, .dropdown-menu > .active > label:hover, .dropdown-menu > .active > label:focus { color: #ffffff; text-decoration: none; outline: 0; background-color: #428bca; } .dropdown-menu > li > input[disabled] ~ label, .dropdown-menu > li > input[disabled] ~ label:hover, .dropdown-menu > li > input[disabled] ~ label:focus, .dropdown-menu > .disabled > label, .dropdown-menu > .disabled > label:hover, .dropdown-menu > .disabled > label:focus { color: #999999; } .dropdown-menu > li > input[disabled] ~ label:hover, .dropdown-menu > li > input[disabled] ~ label:focus, .dropdown-menu > .disabled > label:hover, .dropdown-menu > .disabled > label:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed; } .dropdown-menu > li > label { margin-bottom: 0; cursor: pointer; } .dropdown-menu > li > input[type="radio"], .dropdown-menu > li > input[type="checkbox"] { display: none; position: absolute; top: -9999em; left: -9999em; } .dropdown-menu > li > label:focus, .dropdown-menu > li > input:focus ~ label { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .dropdown-menu.pull-right { right: 0; left: auto; } .dropdown-menu.pull-top { bottom: 100%; top: auto; margin: 0 0 2px; -webkit-box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.175); } .dropdown-menu.pull-center { right: 50%; left: auto; } .dropdown-menu.pull-middle { right: 100%; margin: 0 2px 0 0; box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2); left: auto; } .dropdown-menu.pull-middle.pull-right { right: auto; left: 100%; margin: 0 0 0 2px; box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2); } .dropdown-menu.pull-middle.pull-center { right: 50%; margin: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .dropdown-menu.bullet { margin-top: 8px; } .dropdown-menu.bullet:before { width: 0; height: 0; content: ''; display: inline-block; position: absolute; border-color: transparent; border-style: solid; -webkit-transform: rotate(360deg); border-width: 0 7px 7px; border-bottom-color: #cccccc; border-bottom-color: rgba(0, 0, 0, 0.15); top: -7px; left: 9px; } .dropdown-menu.bullet:after { width: 0; height: 0; content: ''; display: inline-block; position: absolute; border-color: transparent; border-style: solid; -webkit-transform: rotate(360deg); border-width: 0 6px 6px; border-bottom-color: #ffffff; top: -6px; left: 10px; } .dropdown-menu.bullet.pull-right:before { left: auto; right: 9px; } .dropdown-menu.bullet.pull-right:after { left: auto; right: 10px; } .dropdown-menu.bullet.pull-top { margin-top: 0; margin-bottom: 8px; } .dropdown-menu.bullet.pull-top:before { top: auto; bottom: -7px; border-bottom-width: 0; border-top-width: 7px; border-top-color: #cccccc; border-top-color: rgba(0, 0, 0, 0.15); } .dropdown-menu.bullet.pull-top:after { top: auto; bottom: -6px; border-bottom: none; border-top-width: 6px; border-top-color: #ffffff; } .dropdown-menu.bullet.pull-center:before { left: auto; right: 50%; margin-right: -7px; } .dropdown-menu.bullet.pull-center:after { left: auto; right: 50%; margin-right: -6px; } .dropdown-menu.bullet.pull-middle { margin-right: 8px; } .dropdown-menu.bullet.pull-middle:before { top: 50%; left: 100%; right: auto; margin-top: -7px; border-right-width: 0; border-bottom-color: transparent; border-top-width: 7px; border-left-color: #cccccc; border-left-color: rgba(0, 0, 0, 0.15); } .dropdown-menu.bullet.pull-middle:after { top: 50%; left: 100%; right: auto; margin-top: -6px; border-right-width: 0; border-bottom-color: transparent; border-top-width: 6px; border-left-color: #ffffff; } .dropdown-menu.bullet.pull-middle.pull-right { margin-right: 0; margin-left: 8px; } .dropdown-menu.bullet.pull-middle.pull-right:before { left: -7px; border-left-width: 0; border-right-width: 7px; border-right-color: #cccccc; border-right-color: rgba(0, 0, 0, 0.15); } .dropdown-menu.bullet.pull-middle.pull-right:after { left: -6px; border-left-width: 0; border-right-width: 6px; border-right-color: #ffffff; } .dropdown-menu.bullet.pull-middle.pull-center { margin-left: 0; margin-right: 0; } .dropdown-menu.bullet.pull-middle.pull-center:before { border: none; display: none; } .dropdown-menu.bullet.pull-middle.pull-center:after { border: none; display: none; } .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; border-top-left-radius: 0; } .dropdown-submenu > a:before { display: block; float: right; width: 0; height: 0; content: ""; margin-top: 6px; margin-right: -8px; border-width: 4px 0 4px 4px; border-style: solid; border-left-style: dashed; border-top-color: transparent; border-bottom-color: transparent; } @media (max-width: 767px) { .navbar-nav .dropdown-submenu > a:before { margin-top: 8px; border-color: inherit; border-style: solid; border-width: 4px 4px 0; border-left-color: transparent; border-right-color: transparent; } .navbar-nav .dropdown-submenu > a { padding-left: 40px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > label { padding-left: 35px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > label { padding-left: 45px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label { padding-left: 55px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label { padding-left: 65px; } .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a, .navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label { padding-left: 75px; } } .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a, .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:hover, .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:focus { background-color: #e7e7e7; color: #555555; } @media (max-width: 767px) { .navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:before { border-top-color: #555555; } } .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a, .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:hover, .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:focus { background-color: #080808; color: #ffffff; } @media (max-width: 767px) { .navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:before { border-top-color: #ffffff; } }