@font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Regular.woff2') format('woff2'), local("?"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Bold.woff2') format('woff2'), local("?"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenSans-Condensed'; src: url('../fonts/OpenSans-Condensed-Bold.woff2') format('woff2'), local("?"); font-weight: 700; font-style: normal; font-display: swap; } @keyframes rotate_a1 { 0% { top: 33%; transform: rotate(45deg); } 50% { top: 33%; transform: none; } 100% { top: 25%; transform: none; } } @keyframes rotate_a2 { 0% { top: 33%; transform: rotate(-45deg); } 50% { top: 33%; transform: none; } 100% { top: 41%; transform: none; } } @keyframes rotate_b1 { 0% { top: 25%; transform: none; } 50% { top: 33%; transform: none; } 100% { top: 33%; transform: rotate(45deg); } } @keyframes rotate_b2 { 0% { top: 41%; transform: none; } 50% { top: 33%; transform: none; } 100% { top: 33%; transform: rotate(-45deg); } } html { box-sizing: border-box } *, *:before, *:after { box-sizing: inherit } body { padding: 80px 0px 0px 0px; margin: 0px; color: #717777; font-size: 14px; line-height: 24px; font-weight: 400; font-family: 'Roboto', Helvetica, Arial, sans-serif } h1 { margin: 0px; font-size: 36px; line-height: 60px; font-weight: 400 } h2 { margin: 0px; font-size: 30px; line-height: 48px; font-weight: 400 } h3 { margin: 0px; font-size: 24px; line-height: 36px; font-weight: 400 } h4, h5 { margin: 0px; font-size: 18px; line-height: 30px; font-weight: 400 } h4.texterror { color: #ff0000 } ul { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px; list-style-type: square } ol { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px } img { border: none } b { font-weight: 700 } a { color: #717777; text-decoration: none } fieldset { display: flex; flex-flow: row wrap; float: left; width: calc(100% + 40px); padding: 10px; border: none; margin: -20px } fieldset legend { float: left; width: 100%; padding: 10px } fieldset div { position: relative; float: left; padding: 10px } fieldset div.slim { width: 25% } fieldset div.medium { width: 50% } fieldset div.wide { width: 75% } fieldset div.full { width: 100% } fieldset div input[type=radio], fieldset div input[type=checkbox] { display: none } fieldset div input[type=radio] + label, fieldset div input[type=checkbox] + label { display: block; position: relative; float: left; width: 100%; padding: 0px 0px 20px 60px; font-size: 14px; line-height: 24px; text-align: left } fieldset div input[type=radio] + label b { display: block; position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: 50%; border: solid 1px #90a0a0; border-radius: 50% } fieldset div input[type=checkbox] + label b { display: block; position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: 50%; border: solid 1px #90a0a0; border-radius: 6px } fieldset div input[type=radio].error + label b, fieldset div input[type=checkbox].error + label b { border-color: #ff0000 } fieldset div input[type=radio]:checked + label b { background-image: url(../images/layout/radio.svg); border-color: #717777 } fieldset div input[type=checkbox]:checked + label b { background-image: url(../images/layout/checkbox.svg); border-color: #717777 } fieldset div select, fieldset div textarea, fieldset div input[type=text] { float: left; width: 100%; padding: 17px; background: #ffffff; border: solid 1px #90a0a0; border-radius: 6px; color: #717777; font-size: 14px; line-height: 24px; font-weight: 400; font-family: 'Roboto', Arial, Helvetica, sans-serif; transition: 0.4s ease-in-out; -webkit-appearance: none; -moz-appearance: textfield } fieldset div select.error, fieldset div textarea.error, fieldset div input[type=text].error { border-color: #ff0000 } fieldset div select:focus, fieldset div textarea:focus, fieldset div input[type=text]:focus, fieldset div select:not([value=""]), fieldset div textarea:not(:placeholder-shown), fieldset div input[type=text]:not(:placeholder-shown) { border-color: #717777; outline: none } fieldset div select + label, fieldset div textarea + label, fieldset div input[type=text] + label { display: block; position: absolute; left: 20px; top: 20px; padding: 8px; background: #ffffff; font-size: 14px; line-height: 24px; pointer-events: none; transition: 0.4s ease-in-out } fieldset div select:focus + label, fieldset div textarea:focus + label, fieldset div input[type=text]:focus + label, fieldset div select:not([value=""]) + label, fieldset div textarea:not(:placeholder-shown) + label, fieldset div input[type=text]:not(:placeholder-shown) + label { top: 0px; padding: 2px 8px 2px 8px; font-size: 12px; line-height: 18px } fieldset div select { background-image: url(../images/layout/select.svg); background-repeat: no-repeat; background-position: right center; background-size: contain; -webkit-appearance: none } fieldset div textarea { height: 320px; overflow: auto; resize: none } fieldset div input[type=submit] { float: left; width: 100%; height: 60px; padding: 21px; background: #90a0a0; border: none; border-radius: 6px; color: #ffffff; font-size: 18px; line-height: 18px; font-weight: 400; font-family: 'Roboto', Arial, Helvetica, sans-serif; cursor: pointer; transition: 0.4s ease-in-out } fieldset div input[type=submit]:hover { background: #ff922e } a.scrollto { display: none } a.show_cookiemanager { z-index: 1000; left: 40px; bottom: 40px; width: 40px; height: 40px; padding: 4px; background: #90a0a0; overflow: visible; transition: 0.4s ease-in-out } a.show_cookiemanager:hover { background: #ff922e } a.show_cookiemanager:before { display: block; position: absolute; left: 50px; top: 0px; padding: 14px 20px 14px 20px; background: #ff922e; border-radius: 20px; color: #ffffff; font-size: 12px; line-height: 12px; white-space: nowrap; pointer-events: none; transform: translateX(40px); filter: opacity(0); transition: 0.4s ease-in-out; content: 'Cookie-Einstellungen' } a.show_cookiemanager:hover:before { transform: none; filter: none } a.show_cookiemanager svg { fill: none; stroke: #ffffff; stroke-width: 1.5px } div.preloader { position: fixed; z-index: 5000; left: 0%; top: 0%; width: 100%; height: 100%; background: #ffffff } div.preloader:before { display: block; position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; background: url(../images/layout/preloader.svg) no-repeat center; background-size: 50%; content: ''; transform: translate(-50%,-50%) } div.scrolldown { display: block; position: fixed; z-index: 1000; right: 40px; bottom: 40px } div.scrolldown a { display: block; position: relative; float: left; width: 40px; height: 40px; background: #90a0a0 url(../images/layout/scrolldown.svg) no-repeat center; background-size: 50%; border-radius: 50%; transition: 0.4s ease-in-out } div.scrolldown a:hover { background-color: #ff922e } div.scrolldown a:before { display: block; position: absolute; right: 50px; top: 0px; padding: 14px 20px 14px 20px; background: #ff922e; border-radius: 20px; color: #ffffff; font-size: 12px; line-height: 12px; white-space: nowrap; pointer-events: none; transform: translateX(-40px); filter: opacity(0); transition: 0.4s ease-in-out; content: 'nach unten scrollen' } div.scrolldown a:hover:before { transform: none; filter: none } div.scrolltop { display: none; position: fixed; z-index: 1000; right: 40px; bottom: 40px } div.scrolltop a { display: block; position: relative; float: left; width: 40px; height: 40px; background: #90a0a0 url(../images/layout/scrolltop.svg) no-repeat center; background-size: 50%; border-radius: 50%; transition: 0.4s ease-in-out } div.scrolltop a:hover { background-color: #ff922e } div.scrolltop a:before { display: block; position: absolute; right: 50px; top: 0px; padding: 14px 20px 14px 20px; background: #ff922e; border-radius: 20px; color: #ffffff; font-size: 12px; line-height: 12px; white-space: nowrap; pointer-events: none; transform: translateX(-40px); filter: opacity(0); transition: 0.4s ease-in-out; content: 'nach oben scrollen' } div.scrolltop a:hover:before { transform: none; filter: none } div.switch { display: none } nav { position: fixed; z-index: 3000; left: 50%; top: 0%; transform: translateX(-50%) } nav ul { float: left; padding: 10px; margin: 0px; list-style-type: none } nav ul li { display: block; float: left; margin: 10px } nav ul li a { display: block; float: left; padding: 11px; font-size: 18px; line-height: 18px; font-weight: 700; transition: 0.4s ease-in-out } nav ul li a:hover { color: #ff922e } nav ul li:nth-child(4), nav ul li:nth-child(5) { display: none } header { position: fixed; z-index: 2000; left: 0%; top: 0%; width: 100%; padding: 20px calc(50% - 600px) 20px calc(50% - 600px); background: #ffffff; box-shadow: 0px 0px 4px #00000033 } header .cta { float: right; padding: 5px; margin: -10px; list-style-type: none } header .cta li { display: block; float: left; margin: 5px } header .cta li a { display: block; float: left; width: 40px; height: 40px; background-color: #90a0a0; background-repeat: no-repeat; background-position: center; background-size: 50%; border-radius: 50%; transition: 0.4s ease-in-out } header .cta li a:hover { background-color: #ff922e } header .cta li a.phone { background-image: url(../images/layout/phone.svg) } header .cta li a.english { background-image: url(../images/layout/english.svg) } header .cta li a.user { background-image: url(../images/layout/user.svg) } header .logo { display: block; float: left; width: 160px; height: 40px; background: url(../images/layout/logo_lubecontrol.svg) no-repeat center; background-size: contain } ul.panel { position: absolute; z-index: 1000; right: calc(50% - 610px); top: 510px; padding: 5px; margin: 0px; list-style-type: none; transform: translate(0px,80px); filter: opacity(0); transition: 0.4s ease-in-out } ul.panel.active { transform: none; filter: none } ul.panel li { display: block; float: left; margin: 5px } ul.panel li a { display: block; float: left; width: 40px; height: 40px; background-color: #90a0a0; background-repeat: no-repeat; background-position: center; background-size: 50%; border-radius: 50%; transition: 0.4s ease-in-out } ul.panel li a:hover { background-color: #ff922e } ul.panel li a.print { background-image: url(../images/layout/print.svg) } ul.panel li a.user { background-image: url(../images/layout/user.svg) } section.themes { position: relative; float: left; width: 100%; padding: 40px 0px 40px 0px; overflow: hidden; margin: 0px 0px -40px 0px; transform: translate(0px,80px); filter: opacity(0); transition: 0.4s ease-in-out } section.themes.active { transform: none; filter: none } section.themes .entry { display: flex; flex-flow: row wrap; justify-content: center; float: left; width: 100% } section.themes .entry div { display: flex; flex-flow: row wrap; justify-content: center; align-content: flex-end; float: left; width: 1200px; height: 400px; padding: 50px; background: url(../images/layout/theme_mask.svg) no-repeat center; background-size: contain } section.themes .entry div h2 { float: left; width: calc(100% - 20px); margin: 10px; font-size: 48px; line-height: 36px; font-weight: 700; font-family: 'OpenSans-Condensed', Arial, Helvetica, sans-serif; text-transform: uppercase; text-align: center } section.themes .entry div h3 { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; font-size: 48px; line-height: 36px; font-weight: 700; font-family: 'OpenSans-Condensed', Arial, Helvetica, sans-serif; text-transform: uppercase; text-align: center } section.themes .entry div h4 { float: left; width: calc(100% - 20px); margin: 10px; font-size: 24px; text-align: center } section.themes .entry div a { display: block; float: left; padding: 12px 29px 12px 29px; border: solid 1px #ffffff; border-radius: 6px; margin: 10px; color: #ffffff; line-height: 14px; transition: 0.4s ease-in-out } section.themes .entry div a:hover { background: #ffffff; color: #ff922e } section.themes .slick-dots { position: absolute; z-index: 1; left: calc(50% - 610px); bottom: 0px; padding: 5px; margin: 0px; list-style-type: none } section.themes .slick-dots li { display: block; float: left; margin: 5px } section.themes .slick-dots li button { float: left; width: 20px; height: 20px; background: #90a0a0; padding: 0px; border: none; border-radius: 10px; color: transparent; font-size: 0px; line-height: 0px; cursor: pointer; transition: 0.4s ease-in-out } section.themes .slick-dots li button:hover { background: #ff922e } section.themes .slick-dots li.slick-active button { width: 40px; background: #ff922e } section.content { display: flex; flex-flow: row wrap; justify-content: center; position: relative; float: left; width: 100%; padding: 40px calc(50% - 640px) 40px calc(50% - 640px); overflow: hidden } section.content hr { float: left; width: calc(80% - 80px); height: 1px; background: #90a0a0; border: none; margin: 40px; transform: translate(0px,80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content hr.active { transform: none; filter: none } section.content .column { float: left; padding: 20px } section.content .column.full { width: 100% } section.content .column.wide { width: 66.6666% } section.content .column.medium { width: 50% } section.content .column.slim { width: 33.3333% } section.content .column.hidden { display: none } section.content .column .pic { display: block; position: relative; float: left; width: calc(100% - 40px); padding: 0% 0% calc(100% - 40px) 0%; border-radius: 24px; overflow: hidden; margin: 20px; transform: translate(0px,80px); filter: opacity(0); transition: 0.4s ease-out } section.content .column .pic.landscape { padding: 0% 0% calc(75% - 30px) 0% } section.content .column .pic.portrait { padding: 0% 0% calc(125% - 50px) 0% } section.content .column .pic.icon { width: calc(50% - 40px); padding: 0% 0% calc(50% - 40px) 0%; background-color: #90a0a0; background-repeat: no-repeat; background-position: center; background-size: 50%; border-radius: 50% } section.content .column .pic.active { transform: none; filter: none } section.content .column .pic img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover } section.content .column .entry { float: left; width: calc(100% - 40px); margin: 20px; transform: translate(0px,80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .entry.active { transform: none; filter: none } section.content .column.full .entry { text-align: center } section.content .column .entry h1, section.content .column .entry h2 { font-size: 36px; line-height: 48px; font-weight: 700; font-family: 'OpenSans-Condensed', Arial, Helvetica, sans-serif } section.content .column .entry h3 { line-height: 30px } section.content .column .entry #map { float: left; width: 100%; padding: 0% 0% 175% 0%; border-radius: 24px; filter: grayscale(0.8) } section.content .column .entry #map .leaflet-popup-content { font-size: 12px; line-height: 18px; white-space: nowrap } section.content .column .entry #map .leaflet-popup-content h4 { font-size: 14px; line-height: 24px } section.content .column .list { display: flex; flex-flow: row wrap; justify-content: center; float: left; width: 100%; padding: 10px; margin: 0px; list-style-type: none; transform: translate(0px,80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .list.active { transform: none; filter: none } section.content .column .list li { display: block; float: left; width: calc(100% - 20px); padding: 0px 0px 0px 36px; background: url(../images/layout/lube.svg) no-repeat left top; background-size: 30px; margin: 10px; font-size: 18px; line-height: 30px } section.content .column.full .list li { width: auto } section.content .column .flags { float: left; width: 100%; padding: 15px; margin: 0px; list-style-type: none; transform: translate(0px,80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .flags.active { transform: none; filter: none } section.content .column .flags li { display: block; float: left; width: calc(50% - 10px); margin: 5px } section.content .column .flags li a { display: block; float: left; width: 100%; padding: 10px; background: #90a0a0; border-radius: 20px; transition: 0.4s ease-in-out } section.content .column .flags li a:hover { background: #ff922e } section.content .column .flags li a img { display: block; float: left; width: 40px; height: 40px; object-fit: cover; border-radius: 50%; outline: solid 5px #ffffff; margin: -10px 10px -10px -10px } section.content .column .flags li a h4 { float: left; width: calc(100% - 40px); padding: 3px; color: #ffffff; font-size: 14px; line-height: 14px } section.content .column .cta { display: flex; flex-flow: row wrap; float: left; padding: 10px; margin: 0px; list-style-type: none; transform: translate(0px,80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column.full .cta { justify-content: center; width: 100% } section.content .column .cta.active { transform: none; filter: none } section.content .column .cta li { display: block; float: left; margin: 10px } section.content .column .cta li a { display: block; float: left; padding: 13px 30px 13px 30px; background: #90a0a0; border-radius: 6px; color: #ffffff; line-height: 14px; transition: 0.4s ease-in-out } section.content .column .cta li a:hover { background: #ff922e } section.content .column .cta li a.apps { width: 135px; height: 40px; padding: 0px; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; border-radius: 0px } section.content .column .cta li a.apps.apple_store { background-image: url(../images/layout/apple_store.svg) } section.content .column .cta li a.apps.google_play { background-image: url(../images/layout/google_play.svg) } section.content .column .cta li a.jumper, section.content .column .cta li a.show_content { padding: 13px; background: transparent; border: solid 1px #90a0a0; color: #90a0a0; font-size: 12px; line-height: 12px } section.content .column .cta li a.show_content:after { content: 'anzeigen' } section.content .column .cta li a.show_content.hide_again:after { content: 'verbergen' } section.content .column .cta li a.jumper:hover, section.content .column .cta li a.show_content:hover { background: #ff922e; border-color: #ff922e; color: #ffffff } section.content .column .tablebox { float: left; width: calc(100% - 40px); overflow-x: scroll; margin: 20px } section.content .column .tablebox table { float: left; width: auto; min-width: 100%; padding: 0px; border-style: none; border-spacing: 0px; margin: 0px } section.content .column .tablebox table tr td { padding: 10px; border-bottom: solid 1px #90a0a0; font-size: 12px; line-height: 18px; text-align: center; vertical-align: top } section.content .column .tablebox table tr td img { height: 20px; margin: -4px } section.content .column .tablebox table tr td:first-child { position: sticky; z-index: 1; left: 0px; width: 400px; padding: 10px 10px 10px 0px; background: #ffffff; box-shadow: 0px 0px 4px #00000033; text-align: left } section.content .column .tablebox table tr:first-child td { padding: 0px } section.content .column .tablebox table tr:first-child td img { display: block; float: left; width: 100%; height: 0px; margin: 0px } section.content .column .tablebox table tr:first-child td:first-child img { width: 400px } section.content .column .info { float: left; padding: 28px 20px 28px 20px; transform: translate(0px,80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .info.active { transform: none; filter: none } section.content .column .info a { color: #ff922e; font-weight: 700 } section.content .column .faq { float: left; width: 100%; padding: 10px; margin: 0px; list-style-type: none } section.content .column .faq > li { display: block; float: left; width: calc(100% - 20px); background: #90a0a0; border-radius: 24px; margin: 10px; transform: translate(0px,80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .faq > li.active { transform: none; filter: none } section.content .column .faq > li h4 { position: relative; float: left; width: 100%; min-height: 100px; padding: 20px 20px 20px 80px; color: #ffffff; font-size: 24px; font-weight: 900; cursor: pointer } section.content .column .faq > li h4:before { position: absolute; left: 20px; top: 15px; width: 40px; padding: 8px 0px 8px 0px; background: #717777; border-radius: 50%; line-height: 24px; text-align: center; content: 'F' } section.content .column .faq > li h4:after { position: absolute; left: 20px; top: 45px; width: 40px; height: 40px; background: #ffffff url(../images/layout/plus.svg) no-repeat center; background-size: 80%; border-radius: 50%; content: ''; transition: 0.4s ease-in-out } section.content .column .faq > li h4.active:after { background-image: url(../images/layout/minus.svg); transform: rotate(360deg) } section.content .column .faq > li div { display: none; position: relative; float: left; width: 100%; padding: 0px 20px 20px 80px; color: #ffffff; line-height: 18px } section.content .column .faq > li div:before { position: absolute; left: 20px; top: 0px; width: 40px; padding: 8px 0px 8px 0px; background: #717777; border-radius: 50%; font-size: 24px; line-height: 24px; font-weight: 900; text-align: center; content: 'A' } section.fields { position: relative; float: left; width: 100%; padding: 160px 0px 0px 0px; background: url(../images/layout/lubes.svg) no-repeat center top; background-size: 40px; overflow: hidden; margin: -40px 0px -120px 0px; transform: translate(0px,80px); filter: opacity(0); transition: 0.4s ease-in-out } section.fields.active { transform: none; filter: none } section.fields .entry { display: flex; flex-flow: row wrap; justify-content: center; float: left; width: 100% } section.fields .entry div { display: flex; flex-flow: row wrap; align-content: flex-start; position: relative; float: left; width: 1200px; height: 480px; padding: 50px; background: url(../images/layout/field_mask.svg) no-repeat center; background-size: contain } section.fields .entry div h2 { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; font-size: 48px; line-height: 36px; font-weight: 700; font-family: 'OpenSans-Condensed', Arial, Helvetica, sans-serif; text-transform: uppercase; text-align: center } section.fields .entry div h3 { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; line-height: 30px; letter-spacing: -0.05em; text-indent: -0.05em; text-align: center } section.fields .entry div h4 { float: left; width: 350px; margin: 10px; color: #ffffff; line-height: 24px; font-weight: 700 } section.fields .entry div h5 { float: left; width: 710px; margin: 10px; color: #ffffff; line-height: 24px } section.fields .entry div a { display: block; float: left; padding: 12px 29px 12px 29px; border: solid 1px #ffffff; border-radius: 6px; margin: 10px 10px 10px 380px; color: #ffffff; line-height: 14px; transition: 0.4s ease-in-out } section.fields .entry div a:hover { background: #ffffff; color: #90a0a0 } section.fields .entry div ul { position: absolute; right: 140px; bottom: 20px; padding: 10px; margin: 0px; list-style-type: none } section.fields .entry div ul li { display: block; float: right; width: 120px; height: 120px; background-repeat: no-repeat; background-position: center; background-size: contain; margin: 10px } section.fields .slick-dots { display: flex; flex-flow: row wrap; justify-content: center; position: absolute; z-index: 1; left: calc(50% - 640px); top: 40px; width: 1280px; padding: 30px 0px 30px 0px; margin: 0px; list-style-type: none } section.fields .slick-dots li { display: block; float: left; margin: 10px } section.fields .slick-dots li button { float: left; height: 40px; padding: 13px; background: none; border: solid 1px #90a0a0; border-radius: 6px; color: transparent; font-size: 0px; line-height: 0px; cursor: pointer; transition: 0.4s ease-in-out } section.fields .slick-dots li button:hover, section.fields .slick-dots li.slick-active button { background: #ff922e; border-color: #ff922e } section.fields .slick-dots li button:after { color: #90a0a0; font-size: 12px; line-height: 12px; transition: 0.4s ease-in-out } section.fields .slick-dots li button:hover:after, section.fields .slick-dots li.slick-active button:after { color: #ffffff } section.fields .slick-dots li:nth-child(1) button:after { content: 'Motoren' } section.fields .slick-dots li:nth-child(2) button:after { content: 'Gasmotoren' } section.fields .slick-dots li:nth-child(3) button:after { content: 'Industrie' } section.fields .slick-dots li:nth-child(4) button:after { content: 'Kraftstoffe' } section.fields .slick-dots li:nth-child(5) button:after { content: 'Kühlmittel' } section.fields .slick-dots li:nth-child(6) button:after { content: 'Aggregate' } section.fields .slick-dots li:nth-child(7) button:after { content: 'Schmierfette' } section.fields .slick-dots li:nth-child(8) button:after { content: 'Windkraft' } section.fields .slick-dots li:nth-child(9) button:after { content: 'Turbinen' } section.fields .slick-dots li:nth-child(10) button:after { content: 'Transformatoren' } section.fields .slick-dots li:nth-child(11) button:after { content: 'Kundenspezifisch' } footer { display: flex; flex-flow: row wrap; justify-content: center; float: left; width: 100%; padding: 40px calc(50% - 640px) 60px calc(50% - 640px); overflow: hidden; background: #717777 } footer ul { float: left; width: 20%; padding: 30px; margin: 0px; list-style-type: none; transform: translate(0px,80px); filter: opacity(0); transition: 0.4s ease-in-out } footer ul.active { transform: none !important; filter: none } footer ul li { display: flex; flex-flow: row wrap; float: left; width: calc(100% - 20px); margin: 10px } footer ul li a { display: block; float: left; padding: 6px 0px 6px 0px; color: #ffffff; line-height: 14px; font-weight: 700 } footer ul:first-child { width: 40% } footer ul:first-child li { justify-content: flex-end } footer ul:first-child li a.logo { width: 160px; height: 40px; padding: 0px; background: url(../images/layout/logo_lubecontrol_white.svg) no-repeat center; background-size: contain } footer ul:first-child li a.location { padding: 4px 0px 4px 0px; font-size: 12px; line-height: 18px } footer ul:first-child li a.location b { font-size: 18px } footer ul:first-child li a.phone { padding: 6px 0px 6px 40px; background: url(../images/layout/phone.svg) no-repeat; background-position: left center; background-size: 30px; font-size: 30px; line-height: 30px } footer ul:first-child li a.email { padding: 12px 0px 12px 40px; background: url(../images/layout/email.svg) no-repeat; background-position: left center; background-size: 30px; font-size: 18px; line-height: 18px } footer hr { float: left; width: calc(80% - 80px); height: 1px; background: #ffffff; border: none; margin: 40px; transform: translate(0px,80px); filter: opacity(0); transition: 0.4s ease-in-out } footer hr.active { transform: none; filter: none } footer div { float: left; width: 80%; padding: 40px; color: #ffffff; text-align: center; transform: translate(0px,80px); filter: opacity(0); transition: 0.4s ease-in-out } footer div.active { transform: none; filter: none } footer div a { color: #ffffff } @media only screen and (max-width: 1279px) { body { font-size: 9px; line-height: 14px } h1 { font-size: 24px; line-height: 36px } h2 { font-size: 18px; line-height: 30px } h3 { font-size: 14px; line-height: 24px } h4, h5 { font-size: 12px; line-height: 18px } ul, ol { padding: 0px 0px 0px 5px; margin: 0px 0px 0px 5px; list-style-type: none } fieldset { width: calc(100% + 20px); padding: 5px; margin: -10px } fieldset legend, fieldset div { padding: 5px } fieldset div.medium { width: 100% } fieldset div input[type=radio] + label, fieldset div input[type=checkbox] + label { padding: 0px 0px 10px 30px; font-size: 9px; line-height: 14px } fieldset div input[type=radio] + label b { width: 20px; height: 20px; border-width: 0.5px } fieldset div input[type=checkbox] + label b { width: 20px; height: 20px; border-width: 0.5px; border-radius: 3px } fieldset div select, fieldset div textarea, fieldset div input[type=text] { padding: 12.5px; border-width: 0.5px; border-radius: 3px; font-size: 9px; line-height: 14px } fieldset div select + label, fieldset div textarea + label, fieldset div input[type=text] + label { left: 10px; top: 10px; font-size: 9px; line-height: 14px } fieldset div select:focus + label, fieldset div textarea:focus + label, fieldset div input[type=text]:focus + label, fieldset div select:not([value=""]) + label, fieldset div textarea:not(:placeholder-shown) + label, fieldset div input[type=text]:not(:placeholder-shown) + label { padding: 1px 8px 1px 8px; font-size: 7px; line-height: 12px } fieldset div textarea { height: 240px } fieldset div input[type=submit] { height: 40px; padding: 14px; border-radius: 3px; font-size: 12px; line-height: 12px } a.show_cookiemanager { left: 20px; bottom: 20px; width: 30px; height: 30px; padding: 3px } a.show_cookiemanager:before { display: none } div.preloader:before { width: 120px; height: 120px } div.scrolldown { right: 20px; bottom: 20px } div.scrolldown a { width: 30px; height: 30px } div.scrolldown a:before { display: none } div.scrolltop { right: 20px; bottom: 20px } div.scrolltop a { width: 30px; height: 30px } div.scrolltop a:before { display: none } div.switch { display: block; position: fixed; z-index: 4000; right: 20px; top: 20px; width: 40px; height: 40px; padding: 26px 0px 6px 0px; border-radius: 3px; font-size: 8px; line-height: 8px; text-transform: uppercase; text-align: center; cursor: pointer; transition: 0.4s ease-in-out } div.switch:before { display: block; position: absolute; left: 25%; width: 50%; height: 3%; background: #90a0a0; content: ''; animation: rotate_a1 0.4s forwards; transition: 0.4s ease-in-out } div.switch:after { display: block; position: absolute; left: 25%; width: 25%; height: 3%; background: #90a0a0; content: ''; animation: rotate_a2 0.4s forwards; transition: 0.4s ease-in-out } div.switch.active:before { left: 30%; width: 40%; animation: rotate_b1 0.4s forwards } div.switch.active:after { left: 30%; width: 40%; animation: rotate_b2 0.4s forwards } nav { display: flex; flex-flow: row wrap; align-content: center; left: 0%; width: 100%; height: 100%; padding: 20px 60px 100px 60px; background: #ffffff; transform: none; filter: opacity(0); pointer-events: none; transition: 0.4s ease-in-out } nav.active { padding: 60px; filter: none; pointer-events: auto } nav ul { width: 100%; padding: 0px; border-top: solid 0.5px #90a0a0 } nav ul li { width: 100%; border-bottom: solid 0.5px #90a0a0; margin: 0px } nav ul li a { width: 100%; padding: 13px; font-size: 14px; line-height: 14px; text-align: center } nav ul li:nth-child(4), nav ul li:nth-child(5) { display: block } header { padding: 25px calc(50% - 95px) 25px calc(50% - 140px); box-shadow: 0px 0px 2px #00000033 } header .cta { padding: 2.5px; margin: -5px } header .cta li { margin: 2.5px } header .cta li a { width: 30px; height: 30px } header .logo { width: 120px; height: 30px } ul.panel { right: calc(50% - 145px); top: 260px; padding: 2.5px; transform: translate(0px,40px) } ul.panel li { margin: 2.5px } ul.panel li a { width: 30px; height: 30px } section.themes { padding: 20px 0px 30px 0px; margin: 0px 0px -20px 0px; transform: translate(0px,40px) } section.themes .entry div { width: 280px; height: 160px; padding: 17.5px; background-image: url(../images/layout/theme_mask_mobile.svg) } section.themes .entry div h2, section.themes .entry div h3 { width: calc(100% - 5px); margin: 2.5px; font-size: 18px; line-height: 14px } section.themes .entry div h4 { width: calc(100% - 5px); margin: 2.5px; font-size: 12px; line-height: 14px } section.themes .entry div a { padding: 10px 14.5px 10px 14.5px; border-width: 0.5px; border-radius: 3px; margin: 2.5px; line-height: 9px } section.themes .slick-dots { left: calc(50% - 145px); padding: 2.5px } section.themes .slick-dots li { margin: 2.5px } section.themes .slick-dots li button { width: 10px; height: 10px; border-radius: 5px } section.themes .slick-dots li.slick-active button { width: 20px } section.content { padding: 20px calc(50% - 160px) 20px calc(50% - 160px) } section.content hr { width: calc(60% - 40px); height: 0.5px; margin: 20px; transform: translate(0px,40px) } section.content .column { display: flex; flex-flow: row wrap; justify-content: center; width: 100% !important; padding: 10px } section.content .column .pic { width: calc(80% - 20px) !important; padding: 0% 0% calc(80% - 20px) 0% !important; border-radius: 8px; margin: 10px; transform: translate(0px,40px) } section.content .column .pic.icon { width: calc(40% - 20px) !important; padding: 0% 0% calc(40% - 20px) 0% !important } section.content .column .entry { width: calc(100% - 20px); margin: 10px; font-size: 12px; line-height: 18px; text-align: center; transform: translate(0px,40px) } section.content .column .entry h1, section.content .column .entry h2 { font-size: 18px; line-height: 24px } section.content .column .entry h3 { line-height: 18px } section.content .column .entry #map { border-radius: 12px } section.content .column .entry #map .leaflet-popup-content { font-size: 9px; line-height: 14px; text-align: center } section.content .column .entry #map .leaflet-popup-content h4 { font-size: 12px; line-height: 18px } section.content .column .list { padding: 5px; transform: translate(0px,40px) } section.content .column .list li { width: auto; padding: 0px 0px 0px 18px; background-size: 14px; margin: 5px; font-size: 9px; line-height: 14px } section.content .column .flags { padding: 7.5px; transform: translate(0px,40px) } section.content .column .flags li { width: calc(50% - 5px); margin: 2.5px } section.content .column .flags li a { padding: 5px; border-radius: 15px } section.content .column .flags li a img { width: 30px; height: 30px; outline-width: 2.5px; margin: -5px 5px -5px -5px } section.content .column .flags li a h4 { width: calc(100% - 30px); padding: 4px; font-size: 12px; line-height: 12px } section.content .column .cta { justify-content: center; width: 100%; padding: 7.5px; transform: translate(0px,40px) } section.content .column .cta li { margin: 2.5px } section.content .column .cta li a { padding: 10.5px 15px 10.5px 15px; border-radius: 3px; line-height: 9px } section.content .column .cta li a.apps { width: 101.25px; height: 30px } section.content .column .cta li a.jumper, section.content .column .cta li a.show_content { padding: 10px; border-width: 0.5px; font-size: 9px; line-height: 9px } section.content .column .tablebox { width: calc(100% - 20px); margin: 10px } section.content .column .tablebox table tr td { padding: 5px; border-width: 0.5px; font-size: 9px; line-height: 14px } section.content .column .tablebox table tr td img { height: 15px; margin: -3px } section.content .column .tablebox table tr td:first-child { width: 140px; padding: 5px 5px 5px 0px; box-shadow: 0px 0px 2px #00000033 } section.content .column .tablebox table tr:first-child td { padding: 0px } section.content .column .tablebox table tr:first-child td img { height: 0px; margin: 0px } section.content .column .tablebox table tr:first-child td:first-child img { width: 140px } section.content .column .info { width: 100%; padding: 0px 10px 0px 10px; text-align: center; transform: translate(0px,40px) } section.content .column .faq { padding: 5px } section.content .column .faq > li { width: calc(100% - 10px); border-radius: 12px; margin: 5px; transform: translate(0px,40px) } section.content .column .faq > li h4 { min-height: 50px; padding: 10px 10px 10px 40px; font-size: 12px; line-height: 14px } section.content .column .faq > li h4:before { left: 10px; top: 7.5px; width: 20px; padding: 4px 0px 4px 0px; line-height: 12px } section.content .column .faq > li h4:after { left: 10px; top: 22.5px; width: 20px; height: 20px } section.content .column .faq > li div { padding: 0px 10px 10px 40px; line-height: 12px } section.content .column .faq > li div:before { left: 10px; width: 20px; padding: 4px 0px 4px 0px; font-size: 12px; line-height: 12px } section.fields { padding: 160px 0px 0px 0px; background-size: 20px; margin: -20px 0px -20px 0px; transform: translate(0px,40px) } section.fields .entry div { justify-content: center; width: 280px; height: 360px; padding: 15px; background-image: url(../images/layout/field_mask_mobile.svg) } section.fields .entry div h2 { width: calc(100% - 10px); margin: 5px; font-size: 18px; line-height: 14px } section.fields .entry div h3 { width: calc(100% - 10px); margin: 5px; font-size: 12px; line-height: 14px } section.fields .entry div h4, section.fields .entry div h5 { width: calc(100% - 10px); margin: 5px; font-size: 9px; line-height: 12px; text-align: center } section.fields .entry div a { padding: 10px 14.5px 10px 14.5px; border-width: 0.5px; border-radius: 3px; margin: 5px; line-height: 9px } section.fields .entry div ul { right: 10px; bottom: 0px; padding: 5px } section.fields .entry div ul li { width: 60px; height: 60px; margin: 5px } section.fields .slick-dots { left: calc(50% - 160px); top: 20px; width: 320px; padding: 17.5px 0px 17.5px 0px } section.fields .slick-dots li { margin: 2.5px } section.fields .slick-dots li button { height: 30px; padding: 10px; border-width: 0.5px; border-radius: 3px } section.fields .slick-dots li button:after { font-size: 9px; line-height: 9px } footer { padding: 30px calc(50% - 150px) 45px calc(50% - 150px) } footer ul { width: 50%; padding: 10px; transform: translate(0px,40px) } footer ul li { width: 100%; margin: 0px } footer ul li a { padding: 9px 0px 9px 0px; font-size: 12px; line-height: 12px } footer ul:first-child { width: 100% } footer ul:first-child li { justify-content: center } footer ul:first-child li a.logo { width: 120px; height: 30px } footer ul:first-child li a.location { padding: 9px 0px 9px 0px; font-size: 7px; line-height: 12px } footer ul:first-child li a.location b { font-size: 12px } footer ul:first-child li a.phone { padding: 4px 0px 4px 30px; background-position: left center; background-size: 20px; font-size: 18px; line-height: 18px } footer ul:first-child li a.email { padding: 8px 0px 8px 30px; background-position: left center; background-size: 20px; font-size: 12px; line-height: 12px } footer ul:nth-child(2) li { justify-content: flex-end } footer hr { width: calc(60% - 20px); height: 0.5px; margin: 10px; transform: translate(0px,40px) } footer div { width: 100%; padding: 10px; transform: translate(0px,40px) } }