@font-face { font-family: 'Outfit'; src: url('../fonts/Outfit-Light.woff2') format('woff2'), local("?"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Outfit'; src: url('../fonts/Outfit-SemiBold.woff2') format('woff2'), local("?"); font-weight: 600; font-style: normal; font-display: swap; } @keyframes rotate_a1 { 0% { top: 47%; transform: rotate(45deg); } 50% { top: 47%; transform: none; } 100% { top: 37%; transform: none; } } @keyframes rotate_a2 { 0% { top: 47%; transform: rotate(-45deg); } 50% { top: 47%; transform: none; } 100% { top: 57%; transform: none; } } @keyframes rotate_b1 { 0% { top: 37%; transform: none; } 50% { top: 47%; transform: none; } 100% { top: 47%; transform: rotate(45deg); } } @keyframes rotate_b2 { 0% { top: 57%; transform: none; } 50% { top: 47%; transform: none; } 100% { top: 47%; transform: rotate(-45deg); } } @keyframes design { 0% { filter: opacity(0); background-image: url(../images/layout/design1.svg); } 11% { filter: opacity(1); background-image: url(../images/layout/design1.svg); } 22% { filter: opacity(1); background-image: url(../images/layout/design1.svg); } 33% { filter: opacity(0); background-image: url(../images/layout/design1.svg); } 34% { filter: opacity(0); background-image: url(../images/layout/design2.svg); } 45% { filter: opacity(1); background-image: url(../images/layout/design2.svg); } 55% { filter: opacity(1); background-image: url(../images/layout/design2.svg); } 66% { filter: opacity(0); background-image: url(../images/layout/design2.svg); } 67% { filter: opacity(0); background-image: url(../images/layout/design3.svg); } 78% { filter: opacity(1); background-image: url(../images/layout/design3.svg); } 89% { filter: opacity(1); background-image: url(../images/layout/design3.svg); } 100% { filter: opacity(0); background-image: url(../images/layout/design3.svg); } } @keyframes produktion { 0% { filter: opacity(0); background-image: url(../images/layout/produktion1.svg); } 11% { filter: opacity(1); background-image: url(../images/layout/produktion1.svg); } 22% { filter: opacity(1); background-image: url(../images/layout/produktion1.svg); } 33% { filter: opacity(0); background-image: url(../images/layout/produktion1.svg); } 34% { filter: opacity(0); background-image: url(../images/layout/produktion2.svg); } 45% { filter: opacity(1); background-image: url(../images/layout/produktion2.svg); } 55% { filter: opacity(1); background-image: url(../images/layout/produktion2.svg); } 66% { filter: opacity(0); background-image: url(../images/layout/produktion2.svg); } 67% { filter: opacity(0); background-image: url(../images/layout/produktion3.svg); } 78% { filter: opacity(1); background-image: url(../images/layout/produktion3.svg); } 89% { filter: opacity(1); background-image: url(../images/layout/produktion3.svg); } 100% { filter: opacity(0); background-image: url(../images/layout/produktion3.svg); } } @keyframes installation { 0% { filter: opacity(0); background-image: url(../images/layout/installation1.svg); } 11% { filter: opacity(1); background-image: url(../images/layout/installation1.svg); } 22% { filter: opacity(1); background-image: url(../images/layout/installation1.svg); } 33% { filter: opacity(0); background-image: url(../images/layout/installation1.svg); } 34% { filter: opacity(0); background-image: url(../images/layout/installation2.svg); } 45% { filter: opacity(1); background-image: url(../images/layout/installation2.svg); } 55% { filter: opacity(1); background-image: url(../images/layout/installation2.svg); } 66% { filter: opacity(0); background-image: url(../images/layout/installation2.svg); } 67% { filter: opacity(0); background-image: url(../images/layout/installation3.svg); } 78% { filter: opacity(1); background-image: url(../images/layout/installation3.svg); } 89% { filter: opacity(1); background-image: url(../images/layout/installation3.svg); } 100% { filter: opacity(0); background-image: url(../images/layout/installation3.svg); } } @keyframes logos { from { transform: translateX(0);} to { transform: translateX(-50%);} } html { box-sizing: border-box } *, *:before, *:after { box-sizing: inherit } body { padding: 160px 0px 0px 0px; overflow-x: hidden; background: #252525; margin: 0px; color: #252525; font-size: 14px; line-height: 24px; font-weight: 300; font-family: 'Outfit', Helvetica, Arial, sans-serif } h1 { margin: 0px; font-size: 36px; line-height: 60px; font-weight: 300 } h2 { margin: 0px; font-size: 30px; line-height: 48px; font-weight: 300 } h3 { margin: 0px; font-size: 24px; line-height: 36px; font-weight: 300 } h4 { margin: 0px; font-size: 18px; line-height: 30px; font-weight: 300 } h4.texterror { color: #ff3d00 } ul { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px; list-style-type: square; text-align: left } ol { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px; text-align: left } img { border: none } b, strong { font-weight: 600 } a { color: #252525; text-decoration: none } table { float: left; width: calc(100% + 80px); padding: 20px; border-style: none; border-spacing: 0px; margin: -40px } table tr td { position: relative; padding: 20px; text-align: left; vertical-align: top } input[type=radio], input[type=checkbox] { display: none } input[type=radio] + label, input[type=checkbox] + label { display: block; position: relative; float: left; width: 100%; padding: 0px 0px 20px 50px; text-align: left } input[type=radio] + label b { display: block; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain; border: solid 2px #efefef; border-radius: 50% } input[type=checkbox] + label b { display: block; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain; border: solid 2px #efefef } input[type=radio].error + label b, input[type=checkbox].error + label b { border-color: #ff3d00 } input[type=radio]:checked + label b { background-image: url(../images/layout/radio.svg); border-color: #252525 } input[type=checkbox]:checked + label b { background-image: url(../images/layout/checkbox.svg); border-color: #252525 } select, textarea, input[type=text] { float: left; width: 100%; padding: 16px; background: #ffffff; border: solid 2px #efefef; color: #252525; font-size: 14px; line-height: 24px; font-weight: 300; font-family: 'Outfit', Helvetica, Arial, sans-serif; transition: 0.4s ease-in-out; -webkit-appearance: none; -moz-appearance: textfield } select.error, textarea.error, input[type=text].error { border-color: #ff3d00 } select + label, textarea + label, input[type=text] + label { display: block; position: absolute; left: 30px; top: 30px; padding: 8px; background: #ffffff; font-size: 14px; line-height: 24px; pointer-events: none; transition: 0.4s ease-in-out } select:focus, textarea:focus, input[type=text]:focus, select:not([value=""]), textarea:not(:placeholder-shown), input[type=text]:not(:placeholder-shown) { border-color: #252525; outline: none } select:focus + label, textarea:focus + label, input[type=text]:focus + label, select:not([value=""]) + label, textarea:not(:placeholder-shown) + label, input[type=text]:not(:placeholder-shown) + label { top: 10px; padding: 5px 8px 5px 8px; font-size: 12px; line-height: 12px } select { background-image: url(../images/layout/select.svg); background-repeat: no-repeat; background-position: right center; background-size: contain; -webkit-appearance: none } textarea { height: 320px; overflow: auto; resize: none } input[type=submit] { float: left; width: 100%; height: 60px; padding: 23px; background: #99ff01; border: none; border-radius: 30px; color: #ffffff; font-size: 14px; line-height: 14px; font-weight: 300; font-family: 'Outfit', Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; cursor: pointer; transition: 0.4s ease-in-out } input[type=submit]:hover { background: #04d9ff } a.scrollto { display: none } div.preloader { position: fixed; z-index: 7000; 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.switch { display: none } nav { position: fixed; z-index: 1000; right: 0%; top: 0%; width: 100%; padding: 20px; transition: 0.4s ease-in-out } nav.flat { padding: 0px 20px 0px 20px; background: #ffffff; box-shadow: 0px 20px 20px #25252533 } nav ul { float: right; 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: 28px; font-size: 24px; font-weight: 600; transition: 0.4s ease-in-out } nav ul li a:hover { color: #ff3d00 } nav.flat ul li a { padding: 11px; font-size: 18px; line-height: 18px } div.overlay { display: none; position: fixed; z-index: 5000; left: 0%; top: 0%; width: 100%; height: 100%; background: #252525cc } div.logo { display: block; position: fixed; z-index: 2000; left: 0%; top: 0%; padding: 40px; transition: 0.4s ease-in-out } div.logo.flat { padding: 20px 40px 20px 40px } div.logo a { display: block; float: left; width: 180px; height: 80px; transition: 0.4s ease-in-out } div.logo.flat a { width: 90px; height: 40px } div.logo a svg { display: block; float: left; width: 100%; height: 100%; fill: #252525; transition: 0.4s ease-in-out } div.logo a:hover svg { fill: #ff3d00 } div.show_assistant { position: fixed; z-index: 4000; left: 40px; bottom: 40px; width: 180px; padding: 90px 30px 30px 30px; background: #ff3d00 url(../images/layout/smile.svg) no-repeat center 20px; background-size: 40%; border-radius: 50%; overflow: hidden; box-shadow: 0px 0px 10px #25252533; color: #ffffff; line-height: 18px; font-weight: 600; text-align: center; transform: rotate(-5deg); transition: 0.4s ease-in-out; cursor: pointer } div.show_assistant:hover { transform: rotate(5deg) } div.show_assistant h4 { line-height: 24px; font-weight: 600 } div#assistant { display: none; position: fixed; z-index: 3000; left: 200px; bottom: 20px; width: 480px; max-height: 100%; overflow: auto; padding: 30px; background: #ffffff; border-radius: 20px; box-shadow: 0px 0px 10px #25252533; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none } div#assistant #header { position: relative; float: left; width: calc(100% - 20px); padding: 20px 20px 20px 120px; margin: 10px; color: #ff3d00; font-size: 18px; line-height: 24px; font-weight: 600 } div#assistant #header:before { display: block; position: absolute; left: 0%; top: 0%; width: 100px; height: 100px; background: #ff3d00 url(../images/layout/smile.svg) no-repeat center; background-size: 50%; border-radius: 50%; content: '' } div#assistant #header h4 { font-size: 30px; line-height: 36px; font-weight: 600 } div#assistant #close_it { position: absolute; right: 40px; top: 40px; width: 60px; height: 60px; background: #ff3d00 url(../images/layout/close.svg) no-repeat center; background-size: 50%; border-radius: 50%; cursor: pointer; transition: 0.4s ease-in-out } div#assistant #close_it:hover { background-color: #252525 } div#assistant #toggle_messages { float: left; padding: 14px 20px 14px 20px; background: #ff3d00; border-radius: 20px; margin: 10px; color: #ffffff; font-size: 12px; line-height: 12px; font-weight: 600; cursor: pointer; transition: 0.4s ease-in-out } div#assistant #toggle_messages:hover { background: #252525 } div#assistant #messages { float: left; width: 100% } div#assistant #messages div { position: relative; float: left; width: calc(100% - 20px); padding: 10px; background: #efefef; border-radius: 10px; margin: 10px } div#assistant #messages div:before { display: block; position: absolute; z-index: -1; left: 30px; bottom: -10px; width: 30px; height: 60px; background: #efefef; transform: rotate(45deg) skewY(30deg); content: '' } div#assistant #messages div label { display: block; position: relative; float: left; width: calc(100% - 20px); padding: 0px 0px 0px 40px; margin: 10px } div#assistant #messages div label input[type=radio] + b { display: block; position: absolute; left: 0px; top: -3px; width: 30px; height: 30px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain; border: solid 2px #ffffff; border-radius: 50% } div#assistant #messages div label input[type=radio]:checked + b { background-image: url(../images/layout/radio.svg) } div#assistant #messages div label input[type=checkbox] + b { display: block; position: absolute; left: 0px; top: -3px; width: 30px; height: 30px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: contain; border: solid 2px #ffffff } div#assistant #messages div label input[type=checkbox]:checked + b { background-image: url(../images/layout/checkbox.svg) } div#assistant #messages div textarea, div#assistant #messages div input[type=date], div#assistant #messages div input[type=file], div#assistant #messages div input[type=text], div#assistant #messages div span, div#assistant #messages div h4 { display: block; float: left; width: calc(100% - 20px); border-color: #ffffff; margin: 10px } div#assistant #messages div h4 img { display: block; float: left; width: 100%; margin: 20px 0px 0px 0px } div#assistant #messages div b.cta { display: block; float: right; padding: 23px 30px 23px 30px; background: #ff3d00; border-radius: 30px; margin: 10px; color: #ffffff; line-height: 14px; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; cursor: pointer; transition: 0.4s ease-in-out } div#assistant #messages div b.cta:hover { background: #252525 } ul.panel { display: flex; flex-flow: row wrap; position: fixed; z-index: 1000; right: 30px; bottom: 30px; width: 80px; padding: 5px; margin: 0px; list-style-type: none; transition: 0.4s ease-in-out } ul.panel li { display: block; float: left; margin: 5px } ul.panel li a { display: block; position: relative; float: left; width: 60px; height: 60px; background-color: #25252533; background-repeat: no-repeat; background-position: center; background-size: 50%; border-radius: 50%; transition: 0.4s ease-in-out } ul.panel li:hover a { background-color: #25252566 } ul.panel li.phone a { background-image: url(../images/layout/phone.svg) } ul.panel li.email a { background-image: url(../images/layout/email.svg) } ul.panel li.cookies a { background-image: url(../images/layout/cookies.svg) } ul.panel li.scrolldown a { background-image: url(../images/layout/scrolldown.svg) } ul.panel li.scrolltop a { background-image: url(../images/layout/scrolltop.svg) } ul.panel li a:before { display: block; position: absolute; right: 70px; top: 0px; padding: 23px 30px 23px 30px; background: #25252566; border-radius: 30px; color: #ffffff; line-height: 14px; text-transform: uppercase; white-space: nowrap; pointer-events: none; transform: translateX(-60px); filter: opacity(0); transition: 0.4s ease-in-out } ul.panel li:hover a:before { transform: none; filter: none } ul.panel li.phone a:before { content: 'Telefon 0345-5211420' } ul.panel li.email a:before { content: 'info@logo-werbestudio.de' } ul.panel li.cookies a:before { content: 'Cookie-Einstellungen' } ul.panel li.scrolldown a:before { content: 'nach unten scrollen' } ul.panel li.scrolltop a:before { content: 'nach oben scrollen' } header { position: relative; float: left; width: 100%; padding: 180px calc(50% - 500px) 40px calc(50% - 500px); background: url(../images/layout/header_bg.svg) no-repeat center; background-size: cover; background-attachment: fixed; overflow: hidden; margin: -160px 0px 0px 0px } header:before { display: block; position: absolute; z-index: 1; left: 0%; top: 0%; width: 100%; height: 80%; background: #ffffff; box-shadow: 0px -20px 20px #25252533; content: ''; transform: translateY(80%) skewY(-12deg) } header h1 { float: left; width: calc(100% - 40px); margin: 20px; font-size: 120px; line-height: 120px; transform: translateY(80px); filter: opacity(0); transition: 0.8s ease-in-out } header h1.active { transform: none; filter: none } header h3 { float: left; width: calc(50% - 20px); margin: 20px; background: -webkit-linear-gradient(0deg, #ff3d00 0%, #99ff01 40%, #04d9ff 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 60px; line-height: 96px; font-weight: 600; transform: translateY(80px); filter: opacity(0); transition: 0.8s ease-in-out; transition-delay: 0.4s } header h3.active { transform: none; filter: none } header ul { position: relative; z-index: 2; float: left; width: calc(100% + 280px); padding: 20px; margin: 20px -140px 20px -140px; list-style-type: none; counter-reset: number } header ul li { display: block; float: left; width: calc(33.3333% - 40px); margin: 20px; transform: scale(1.2); filter: opacity(0); transition: 0.8s ease-in-out } header ul li.active { transform: none; filter: none } header ul li a { display: block; position: relative; float: left; width: 100%; border-radius: 20px; overflow: hidden; box-shadow: 0px 20px 20px #25252533; color: #ffffff; font-size: 18px } header ul li:nth-child(1) a { padding: 30px 30px 360px 150px; text-align: right } header ul li:nth-child(2) a { padding: 30px 150px 360px 30px } header ul li:nth-child(3) a { padding: 30px 30px 360px 150px; text-align: right } header ul li a:before { display: block; color: #ffffff; font-size: 72px; line-height: 72px; font-weight: 600; counter-increment: number; content: '0'counter(number)'' } header ul li a h4 { color: #ffffff; font-size: 24px; line-height: 36px; font-weight: 600 } header ul li a svg { display: block; position: absolute; bottom: 30px; width: 60px; height: 60px; padding: 20px; background: #ffffff; border-radius: 50%; fill: #252525; transition: 0.4s ease-in-out } header ul li a:hover svg { background: #04d9ff; fill: #ffffff; transform: rotate(360deg) } header ul li:nth-child(1) a svg { right: 30px } header ul li:nth-child(2) a svg { left: 30px } header ul li:nth-child(3) a svg { right: 30px } header ul li a div { position: absolute; z-index: -1; left: 0%; top: 0%; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center top; background-size: 100%; transition: 0.4s ease-in-out } header ul li a:hover div { top: -100% } header ul li:nth-child(1) a div { background-image: url(../images/layout/green.svg) } header ul li:nth-child(2) a div { background-image: url(../images/layout/blue.svg) } header ul li:nth-child(3) a div { background-image: url(../images/layout/orange.svg) } header ul li a picture { display: block; position: absolute; z-index: -2; left: 0%; top: 0%; width: 100%; height: 100%; transform: scale(1.5); transform-origin: 50% 0%; transition: 0.4s ease-in-out } header ul li a:hover picture { transform: none; filter: brightness(0.5) grayscale(0.5) } header ul li a img { display: block; float: left; width: 100%; height: 100%; object-position: center bottom; object-fit: cover } section.content { display: flex; flex-flow: row wrap; justify-content: center; position: relative; z-index: 1; float: left; width: 100%; padding: 40px calc(50% - 600px) 40px calc(50% - 600px); background: #ffffff } section.content.dark { background: #04d9ff } section.content hr { display: block; float: left; width: 50%; height: 1px; background: #252525; border: none; margin: 40px 25% 40px 25%; transform: scaleX(0); filter: opacity(0); transition: 0.4s ease-in-out } section.content hr.active { transform: none; filter: none } section.content.dark hr { background: #ffffff } 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 picture { display: block; position: relative; float: left; width: calc(100% - 40px); padding: 0% 0% calc(75% - 30px) 0%; border-radius: 20px; overflow: hidden; margin: 20px; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-out } section.content .column picture.active { transform: none; filter: none } section.content .column picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover } section.content .column .anniversary { position: relative; float: left; width: calc(100% - 40px); margin: 20px; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-out } section.content .column .anniversary.active { transform: none; filter: none } section.content .column .anniversary div { position: absolute; left: 36%; bottom: 0%; width: 28%; padding: 0% 0% 30% 0%; background: url(../images/layout/anniversary.svg) no-repeat center; background-size: cover; transform-origin: 50% 100% } section.content .column .entry { float: left; width: calc(100% - 40px); margin: 20px; transform: translateY(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: 48px; line-height: 72px; font-weight: 600 } section.content .column .cta { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 10px; margin: 0px; list-style-type: none; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .cta.active { transform: none; filter: none } section.content .column.full .cta { justify-content: center } section.content .column .cta li { display: block; float: left; margin: 10px } section.content .column .cta li a { display: block; float: left; padding: 23px 30px 23px 30px; background: #ff3d00; border-radius: 30px; color: #ffffff; line-height: 14px; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; transition: 0.4s ease-in-out } section.content .column .cta li a:hover { background: #252525 } section.content .column .counter { display: flex; flex-flow: row wrap; justify-content: center; float: left; width: 100%; padding: 10px; margin: 0px; list-style-type: none } section.content .column .counter > li { display: block; float: left; width: 180px; padding: 50px 10px 50px 10px; border: solid 2px #ffffff; border-radius: 50%; margin: 10px; transform: scale(0); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .counter > li.active { transform: none; filter: none } section.content .column .counter > li div { display: flex; flex-flow: row wrap; justify-content: center; float: left; width: calc(100% - 10px); height: 40px; overflow: hidden; margin: 5px } section.content .column .counter > li div ul { float: left; padding: 0px; list-style-type: none; transition: 1.6s ease-out } section.content .column .counter > li:nth-child(1) div ul { margin: -200px 0px 120px 0px } section.content .column .counter > li:nth-child(2) div ul { margin: -160px 0px 80px 0px } section.content .column .counter > li:nth-child(3) div ul { margin: -120px 0px 40px 0px } section.content .column .counter > li:nth-child(4) div ul { margin: -80px 0px 0px 0px } section.content .column .counter > li.active div ul:nth-child(1) { transform: translateY(40px) } section.content .column .counter > li.active div ul:nth-child(2) { transform: translateY(-40px) } section.content .column .counter > li.active div ul:nth-child(3) { transform: translateY(-160px) } section.content .column .counter > li div ul li { display: block; height: 40px; color: #ffffff; font-size: 40px; line-height: 40px; font-weight: 600; text-align: center; letter-spacing: -0.05em; text-indent: -0.05em } section.content .column .counter > li h4 { float: left; width: calc(100% - 8px); height: 12px; margin: 4px; color: #ffffff; font-size: 12px; line-height: 12px; text-align: center } section.content .column .list { float: left; width: calc(100% - 40px); padding: 0px; border-top: solid 1px #252525; margin: 20px; list-style-type: none; transform: translateY(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: 100%; padding: 33px 10px 33px 70px; background-repeat: no-repeat; background-position: 10px 25px; background-size: 40px; border-bottom: solid 1px #252525 } section.content .column .list.design li:nth-child(1) { background-image: url(../images/layout/design1.svg) } section.content .column .list.design li:nth-child(2) { background-image: url(../images/layout/design2.svg) } section.content .column .list.design li:nth-child(3) { background-image: url(../images/layout/design3.svg) } section.content .column .list.produktion li:nth-child(1) { background-image: url(../images/layout/produktion1.svg) } section.content .column .list.produktion li:nth-child(2) { background-image: url(../images/layout/produktion2.svg) } section.content .column .list.produktion li:nth-child(3) { background-image: url(../images/layout/produktion3.svg) } section.content .column .list.installation li:nth-child(1) { background-image: url(../images/layout/installation1.svg) } section.content .column .list.installation li:nth-child(2) { background-image: url(../images/layout/installation2.svg) } section.content .column .list.installation li:nth-child(3) { background-image: url(../images/layout/installation3.svg) } section.content .column .steps { position: relative; float: left; width: 100%; padding: 20px; margin: 0px; list-style-type: none; counter-reset: number } section.content .column .steps:before { display: block; position: absolute; left: 79px; top: 40px; width: 2px; height: calc(100% - 80px); background: #04d9ff; content: '' } section.content .column .steps li { display: block; position: relative; float: left; width: calc(100% - 160px); margin: 20px 20px 20px 140px; transform: translateY(-80px); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .steps li.active { transform: none; filter: none } section.content .column .steps li:before { display: block; position: absolute; left: -120px; top: 0px; width: 80px; padding: 31px 0px 31px 0px; background: #04d9ff; border-radius: 50%; color: #ffffff; font-size: 18px; line-height: 18px; font-weight: 600; text-align: center; counter-increment: number; content: '0'counter(number)'' } section.content .column .steps li h4 { font-weight: 600 } section.content .highlight { position: relative; float: left; width: 100%; padding: 20px } section.content .highlight:before { display: block; position: absolute; z-index: 2; left: 0%; top: 0%; width: 100%; height: 100%; background: linear-gradient(#04d9ffff, #04d9ffff, #04d9ff00, #04d9ffff, #04d9ffff); background-attachment: fixed; content: '' } section.content .highlight div { position: relative; z-index: 1; float: left; width: calc(100% - 40px); margin: 20px; color: #ffffff; font-size: 72px; line-height: 72px; font-weight: 600; text-transform: uppercase; text-align: center; transform: scaleX(0); filter: opacity(0); transition: 0.4s ease-in-out } section.content .highlight div.active { transform: none; filter: none } section.content .highlight div span { display: inline-block; background: #ffffff; padding: 0px 5px 0px 5px; border-radius: 10px; margin: 0px -5px 0px -5px; color: #04d9ff } section.themes { position: relative; float: left; width: 100%; height: 800px; overflow: hidden } section.themes picture { display: none; position: absolute; left: 0%; top: 0%; width: 100%; height: 100% } section.themes picture#design_pic { background: #99ff01 } section.themes picture#produktion_pic { background: #04d9ff } section.themes picture#installation_pic { background: #ff3d00 } section.themes picture img { display: block; position: absolute; top: 0%; width: 150%; height: 100%; object-fit: cover; mix-blend-mode: overlay; filter: grayscale(1) } section.themes picture div { position: absolute; left: calc(50% - 600px); width: 1200px; padding: 30px } section.themes picture div h3 { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; font-size: 36px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4em; text-indent: 0.4em; text-align: center } section.themes picture div h4 { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; font-size: 30px; text-align: center } section.themes ul { display: flex; flex-flow: row wrap; position: absolute; left: 0%; width: 100%; padding: 20px calc(50% - 580px) 20px calc(50% - 580px); margin: 0px; list-style-type: none; counter-reset: number } section.themes ul li { display: block; float: left; width: calc(33.3333% - 40px); margin: 20px } section.themes ul li a { display: block; position: relative; float: left; width: 100%; height: 100%; padding: 35px 35px 35px 115px; background: #ffffff33; border-radius: 20px; box-shadow: 0px 0px 20px #25252533; transition: 0.4s ease-in-out } section.themes ul li a:hover, section.themes ul li a.active { background: #ffffff66 } section.themes ul li a div { position: absolute; left: 40px; top: 40px; width: 60px; height: 60px; background: #ffffff; border-radius: 50%; overflow: hidden } section.themes ul li a div:before { display: block; position: absolute; left: 0%; top: 0%; width: 100%; padding: 21px 0px 21px 0px; font-size: 18px; line-height: 18px; font-weight: 600; text-align: center; counter-increment: number; content: '0'counter(number)''; transition: 0.4s ease-in-out } section.themes ul li a:hover div:before, section.themes ul li a.active div:before { left: 100% } section.themes ul li a div:after { display: block; position: absolute; left: -100%; top: 0%; width: 100%; height: 100%; background: url(../images/layout/arrow.svg) no-repeat center; background-size: 33.3333%; content: ''; transform: rotate(-45deg); transition: 0.4s ease-in-out } section.themes ul li a:hover div:after, section.themes ul li a.active div:after { left: 0% } section.themes ul li a h3 { float: left; width: calc(100% - 10px); margin: 5px; color: #ffffff; line-height: 24px; font-weight: 600 } section.themes ul li a h4 { float: left; width: calc(100% - 10px); margin: 5px; color: #ffffff; font-size: 14px; line-height: 18px } section.themes h2 { position: absolute; left: 0%; width: 100%; padding: 40px; color: #ffffff; font-size: 24px; line-height: 24px; text-align: center } section.slider { position: relative; float: left; width: 100%; padding: 40px 0px 180px 0px } section.slider:before { display: block; position: absolute; z-index: -1; left: 0%; top: 0%; width: 100%; height: 100%; background: linear-gradient(66.6666deg, #25252500, #25252566); content: '' } section.slider:after { display: block; position: absolute; z-index: -2; left: 0%; top: 0%; width: 100%; height: 100%; background: #ff3d00; content: '' } section.slider h2 { float: left; width: calc(100% - 80px); margin: 40px; color: #ffffff; font-size: 48px; line-height: 72px; font-weight: 600; text-align: center; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.slider h2.active { transform: none; filter: none } section.slider .bx-prev { display: block; position: absolute; z-index: 200; left: calc(50% - 80px); bottom: 80px; width: 60px; height: 60px; background: #ffffff33 url(../images/layout/prev.svg) no-repeat center; background-size: contain; border-radius: 50%; box-shadow: 0px 0px 20px #25252533; color: transparent; font-size: 0px; line-height: 0px; transition: 0.4s ease-in-out } section.slider .bx-next { display: block; position: absolute; z-index: 200; right: calc(50% - 80px); bottom: 80px; width: 60px; height: 60px; background: #ffffff33 url(../images/layout/next.svg) no-repeat center; background-size: contain; border-radius: 50%; box-shadow: 0px 0px 20px #25252533; color: transparent; font-size: 0px; line-height: 0px; transition: 0.4s ease-in-out } section.slider .bx-prev:hover, section.slider .bx-next:hover { background-color: #ffffff66 } section.slider ul { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 0%; margin: 0% calc(50% - 600px) 0% calc(50% - 600px); list-style-type: none } section.slider ul li { float: left; width: 600px !important; padding: 20px } section.slider ul li a { display: block; position: relative; float: left; width: calc(100% - 40px); height: calc(100% - 40px); padding: 70px 70px 170px 70px; background: #ffffff; border-radius: 20px; margin: 20px; transform: scale(0); filter: opacity(0); transition: 0.4s ease-in-out } section.slider ul li a.active { transform: none; filter: none } section.slider ul li a:after { display: block; position: absolute; left: 50%; bottom: 80px; padding: 23px 30px 23px 30px; background: #ff3d00; border-radius: 30px; color: #ffffff; line-height: 14px; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; white-space: nowrap; content: 'hier informieren'; transform: translateX(-50%); transition: 0.4s ease-in-out } section.slider ul li a:hover:after { background: #252525 } section.slider ul li a div { float: left; width: calc(100% - 20px); margin: 10px; text-align: center } section.slider ul li a h4 { float: left; width: calc(100% - 20px); margin: 10px; font-weight: 600; text-align: center } section.teaser { display: flex; flex-flow: row wrap; align-items: flex-end; float: left; width: 100%; padding: 40px; background: linear-gradient(#ffffff, #efefef); overflow: hidden } section.teaser:nth-child(odd) { flex-direction: row-reverse } section.teaser .pic { position: relative; float: left; width: calc(50% - 80px); padding: 0% 0% calc(37.5% - 60px) 0%; border-radius: 20px; overflow: hidden; margin: 40px; transform: translateX(-50%); filter: opacity(0); transition: 0.4s ease-out } section.teaser:nth-child(odd) .pic { transform: translateX(50%) } section.teaser .pic.active { transform: none !important; filter: none } section.teaser .pic img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover } section.teaser .osm { float: left; width: calc(50% - 80px); padding: 0% 0% calc(37.5% - 60px) 0%; border-radius: 20px; margin: 40px; transform: translateX(-50%); filter: opacity(0) grayscale(1); transition: 0.4s ease-in-out } section.teaser:nth-child(odd) .osm { transform: translateX(50%) } section.teaser .osm.active { transform: none !important; filter: opacity(1) grayscale(0.8) } section.teaser .osm .leaflet-popup-content { font-size: 12px; line-height: 14px; text-align: center } section.teaser .entry { float: left; width: 50%; padding: 40px calc(50% - 560px) 40px 40px; transform: translateX(50%); filter: opacity(0); transition: 0.4s ease-in-out } section.teaser:nth-child(odd) .entry { padding: 40px 40px 40px calc(50% - 560px); text-align: right; transform: translateX(-50%) } section.teaser .entry.active { transform: none !important; filter: none } section.teaser .entry h2 { font-size: 48px; line-height: 72px; font-weight: 600 } section.teaser .entry .cta { display: flex; flex-flow: row wrap; float: left; width: calc(100% + 40px); padding: 10px; margin: -20px; list-style-type: none } section.teaser:nth-child(odd) .entry .cta { justify-content: flex-end } section.teaser .entry .cta li { display: block; float: left; margin: 10px } section.teaser .entry .cta li a { display: block; float: left; padding: 23px 30px 23px 30px; background: #ff3d00; border-radius: 30px; color: #ffffff; line-height: 14px; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; transition: 0.4s ease-in-out } section.teaser .entry .cta li a:hover { background: #252525 } section.icons { position: relative; float: left; width: 100%; padding: 40px calc(50% - 600px) 40px calc(50% - 600px) } section.icons:before { display: block; position: absolute; z-index: -1; left: 0%; top: 0%; width: 100%; height: 100%; background: linear-gradient(66.6666deg, #25252500, #25252566); content: '' } section.icons:after { display: block; position: absolute; z-index: -2; left: 0%; top: 0%; width: 100%; height: 100%; background: #ff3d00; content: '' } section.icons h2 { float: left; width: calc(100% - 80px); margin: 40px; color: #ffffff; font-size: 48px; line-height: 72px; font-weight: 600; text-align: center; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.icons h2.active { transform: none; filter: none } section.icons div { float: left; width: 100%; padding: 30px; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } section.icons div.active { transform: none; filter: none } section.icons div a { display: block; position: relative; float: left; width: calc(33.3333% - 20px); padding: 150px 10px 10px 10px; margin: 10px; transition: 0.4s ease-in-out } section.icons div a:hover { transform: scale(1.2) } section.icons div a:before { display: block; position: absolute; z-index: 2; left: calc(50% - 60px); top: 20px; width: 120px; height: 120px; background-repeat: no-repeat; background-position: center; background-size: 50%; content: '' } section.icons div a:after { display: block; position: absolute; z-index: 1; left: calc(50% - 60px); top: 20px; width: 120px; height: 120px; background: #ffffff; border-radius: 50%; content: '' } section.icons div a.design:before { animation: design 4s infinite } section.icons div a.produktion:before { animation: produktion 4s infinite } section.icons div a.installation:before { animation: installation 4s infinite } section.icons div a h4 { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; line-height: 18px; text-align: center } footer { float: left; width: 100%; padding: 60px calc(50% - 580px) 60px calc(50% - 580px) } footer ul { float: left; width: 31%; padding: 10px; margin: 0px; list-style-type: none; transform: translateY(80px); filter: opacity(0); transition: 0.4s ease-in-out } footer ul:first-child { width: 38% } footer ul.active { transform: none; filter: none } footer ul li { display: block; float: left; width: calc(100% - 20px); margin: 10px } footer ul li a { display: block; float: left; width: 100%; padding: 6px 0px 6px 0px; color: #ffffff; font-size: 18px; line-height: 18px } footer ul li.logo a { width: 180px; height: 80px; padding: 0px } footer ul li.logo a svg { display: block; float: left; width: 100%; height: 100%; fill: #ffffff } footer ul li.phone a { padding: 3px 0px 3px 30px; background: url(../images/layout/phone.svg) no-repeat left center; background-size: 20px; font-size: 24px; line-height: 24px; font-weight: 600 } footer ul li.location a { padding: 8px 0px 8px 30px; background: url(../images/layout/location.svg) no-repeat 2px center; background-size: 16px; font-size: 14px; line-height: 14px } footer ul li.email a { padding: 8px 0px 8px 30px; background: url(../images/layout/email.svg) no-repeat 2px center; background-size: 16px; font-size: 14px; line-height: 14px } footer ul li.facebook a { padding: 8px 0px 8px 30px; background: url(../images/layout/facebook.svg) no-repeat 2px center; background-size: 16px; font-size: 14px; line-height: 14px } footer hr { display: block; float: left; width: 50%; height: 1px; background: #ffffff; border: none; margin: 40px 25% 40px 25%; transform: scaleX(0); filter: opacity(0); transition: 0.4s ease-in-out } footer hr.active { transform: none; filter: none } footer div { float: left; width: calc(100% - 40px); margin: 20px; color: #ffffff; text-align: center; transform: translateY(-80px); filter: opacity(0); transition: 0.4s ease-in-out } footer div.active { transform: none; filter: none } footer div a { color: #ffffff } .logos { width: 100%; overflow: clip; display: flex; } .logos-track { display: flex; width: max-content; animation: logos 65s linear infinite; } .logos:hover .logos-track, .logos:focus .logos-track { animation-play-state: paused; } .logos-item { display: flex; flex: 0 0 auto; width: 200px; height: 130px; margin: 0 20px; align-items: center; justify-content: center; } .logos-item img { width: 100%; height: 100%; transition: filter 0.3s ease, transform 0.3s ease; } .logos-item:hover img, .logos-item:focus img { transform: scale(1.2); } @media only screen and (max-width: 1279px) { body { padding: 80px 0px 0px 0px; 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 { font-size: 12px; line-height: 18px } ul, ol { padding: 0px 0px 0px 5px; margin: 0px 0px 0px 5px } table { width: calc(100% + 40px); padding: 10px; margin: -20px } table tr td { display: block; float: left; width: 100%; padding: 10px } input[type=radio] + label, input[type=checkbox] + label { padding: 0px 0px 10px 30px } input[type=radio] + label b, input[type=checkbox] + label b { width: 20px; height: 20px; border-width: 1px } select, textarea, input[type=text] { padding: 12px; border-width: 1px; font-size: 9px; line-height: 14px } select + label, textarea + label, input[type=text] + label { left: 15px; top: 15px; font-size: 9px; line-height: 14px } select:focus + label, textarea:focus + label, input[type=text]:focus + label, select:not([value=""]) + label, textarea:not(:placeholder-shown) + label, input[type=text]:not(:placeholder-shown) + label { top: 5px; padding: 2px 8px 2px 8px; font-size: 7px; line-height: 7px } textarea { height: 240px } input[type=submit] { height: 40px; padding: 15.5px; font-size: 9px; line-height: 9px } div.preloader:before { width: 100px; height: 100px } div.switch { display: block; position: fixed; z-index: 6000; right: 20px; top: 20px; width: 40px; height: 40px; background: #ffffff; border-radius: 50%; cursor: pointer; transition: 0.4s ease-in-out } div.switch:before { display: block; position: absolute; left: 30%; width: 40%; height: 6%; background: #000000; content: ''; animation: rotate_a1 0.4s forwards; transition: 0.4s ease-in-out } div.switch:after { display: block; position: absolute; left: 30%; width: 25%; height: 6%; background: #000000; content: ''; animation: rotate_a2 0.4s forwards; transition: 0.4s ease-in-out } div.switch.active { right: 180px } 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 { z-index: 6000; right: -160px; width: 160px; height: 100%; padding: 10px !important; background: #ffffff; box-shadow: none !important } nav.active { right: 0px } nav ul { width: 100%; padding: 5px } nav ul li { width: calc(100% - 10px); margin: 5px } nav ul li a { width: 100%; padding: 14px 10px 14px 10px !important; font-size: 12px !important; line-height: 12px !important } div.logo { width: 100%; padding: 20px !important } div.logo.flat { background: #ffffff; box-shadow: 0px 10px 10px #25252533 } div.logo a { width: 90px; height: 40px } div.show_assistant { z-index: 3000; left: 5px; bottom: 5px; width: 90px; padding: 45px 15px 15px 15px; background-position: center 10px; box-shadow: 0px 0px 5px #25252533; font-size: 7px; line-height: 9px } div.show_assistant h4 { font-size: 9px; line-height: 12px } div#assistant { z-index: 4000; left: 65px; bottom: 15px; width: 240px; padding: 15px; border-radius: 10px; box-shadow: 0px 0px 5px #25252533 } div#assistant #header { width: calc(100% - 10px); padding: 10px 10px 10px 60px; margin: 5px; font-size: 9px; line-height: 12px } div#assistant #header:before { width: 50px; height: 50px } div#assistant #header h4 { font-size: 14px; line-height: 18px } div#assistant #close_it { right: 20px; top: 20px; width: 30px; height: 30px } div#assistant #toggle_messages { padding: 10.5px 15px 10.5px 15px; border-radius: 15px; margin: 5px; font-size: 9px; line-height: 9px } div#assistant #messages div { width: calc(100% - 10px); padding: 5px; border-radius: 5px; margin: 5px } div#assistant #messages div:before { left: 15px; bottom: -5px; width: 15px; height: 30px } div#assistant #messages div label { width: calc(100% - 10px); padding: 0px 0px 0px 20px; margin: 5px } div#assistant #messages div label input[type=radio] + b, div#assistant #messages div label input[type=checkbox] + b { top: -1.5px; width: 15px; height: 15px; border-width: 1px } div#assistant #messages div textarea, div#assistant #messages div input[type=date], div#assistant #messages div input[type=file], div#assistant #messages div input[type=text], div#assistant #messages div span, div#assistant #messages div h4 { width: calc(100% - 10px); margin: 5px } div#assistant #messages div h4 img { margin: 10px 0px 0px 0px } div#assistant #messages div b.cta { padding: 10.5px 15px 10.5px 15px; border-radius: 15px; margin: 5px; line-height: 9px } ul.panel { justify-content: flex-end; right: 0%; bottom: 0%; width: 100%; padding: 17.5px; background: #ffffff; box-shadow: 0px -10px 10px #25252533 } ul.panel li { margin: 2.5px } ul.panel li a { width: 40px; height: 40px } ul.panel li a:before { display: none } header { padding: 100px calc(50% - 150px) 40px calc(50% - 150px); margin: -80px 0px 0px 0px } header:before { box-shadow: 0px -10px 10px #25252533; transform: translateY(40%) skewY(-12deg) } header h1 { width: calc(100% - 20px); margin: 10px; font-size: 36px; line-height: 36px; transform: translateY(40px) } header h3 { width: calc(75% - 15px); margin: 10px; font-size: 24px; line-height: 36px; transform: translateY(40px) } header ul { width: calc(100% + 20px); padding: 10px; margin: 10px -10px 10px -10px } header ul li { width: calc(100% - 20px); margin: 10px; transform: none; filter: none } header ul li a { bottom: 0% !important; border-radius: 10px; box-shadow: 0px 10px 10px #25252533; font-size: 14px; line-height: 18px } header ul li:nth-child(1) a { padding: 20px 20px 120px 100px } header ul li:nth-child(2) a { padding: 20px 100px 120px 20px } header ul li:nth-child(3) a { padding: 20px 20px 120px 100px } header ul li a:before { font-size: 60px; line-height: 60px } header ul li a h4 { font-size: 18px; line-height: 30px } header ul li a svg { bottom: 20px; width: 40px; height: 40px; padding: 12px } header ul li:nth-child(1) a svg { right: 20px } header ul li:nth-child(2) a svg { left: 20px } header ul li:nth-child(3) a svg { right: 20px } section.content { padding: 20px calc(50% - 160px) 20px calc(50% - 160px) } section.content hr { margin: 20px 25% 20px 25%; transform: translateY(40px) } section.content .column { width: 100% !important; padding: 10px } section.content .column picture { width: calc(100% - 20px); padding: 0% 0% calc(75% - 15px) 0%; border-radius: 10px; margin: 10px; transform: translateY(40px) } section.content .column .anniversary { width: calc(100% - 20px); margin: 10px; transform: translateY(40px) } section.content .column .entry { width: calc(100% - 20px); margin: 10px; text-align: center; transform: translateY(40px) } section.content .column .entry h1, section.content .column .entry h2 { font-size: 24px; line-height: 36px } section.content .column .cta { justify-content: center; padding: 5px; transform: translateY(40px) } section.content .column .cta li { margin: 5px } section.content .column .cta li a { padding: 15.5px 20px 15.5px 20px; border-radius: 20px; line-height: 9px } section.content .column .counter { padding: 5px } section.content .column .counter > li { width: 90px; padding: 25px 5px 25px 5px; border-width: 1px; margin: 5px } section.content .column .counter > li div { width: calc(100% - 5px); height: 20px; margin: 2.5px } section.content .column .counter > li:nth-child(1) div ul { margin: -100px 0px 60px 0px } section.content .column .counter > li:nth-child(2) div ul { margin: -80px 0px 40px 0px } section.content .column .counter > li:nth-child(3) div ul { margin: -60px 0px 20px 0px } section.content .column .counter > li:nth-child(4) div ul { margin: -40px 0px 0px 0px } section.content .column .counter > li.active div ul:nth-child(1) { transform: translateY(20px) } section.content .column .counter > li.active div ul:nth-child(2) { transform: translateY(-20px) } section.content .column .counter > li.active div ul:nth-child(3) { transform: translateY(-80px) } section.content .column .counter > li div ul li { height: 20px; font-size: 20px; line-height: 20px } section.content .column .counter > li h4 { width: calc(100% - 4px); height: 6px; margin: 2px; font-size: 6px; line-height: 6px } section.content .column .list { width: calc(100% - 20px); margin: 10px; transform: translateY(40px) } section.content .column .list li { padding: 21px 5px 21px 50px; background-position: 5px 15px; background-size: 30px; font-size: 12px; line-height: 18px } section.content .column .steps { padding: 10px } section.content .column .steps:before { left: 44.5px; top: 20px; width: 1px; height: calc(100% - 40px) } section.content .column .steps li { width: calc(100% - 80px); margin: 10px 10px 10px 70px; transform: translateY(-40px) } section.content .column .steps li:before { left: -60px; width: 50px; padding: 19px 0px 19px 0px; font-size: 12px; line-height: 12px } section.content .highlight { padding: 10px } section.content .highlight div { width: calc(100% - 20px); margin: 10px; font-size: 18px; line-height: 18px } section.content .highlight div span { padding: 0px 1.5px 0px 1.5px; border-radius: 3px; margin: 0px -1.5px 0px -1.5px } section.themes { height: 320px } section.themes picture img { width: 200% } section.themes picture div { left: calc(50% - 160px); width: 320px; padding: 15px } section.themes picture div h3 { width: calc(100% - 10px); margin: 5px; font-size: 14px; line-height: 14px } section.themes picture div h4 { width: calc(100% - 10px); margin: 5px; font-size: 12px; line-height: 14px } section.themes ul { padding: 5px calc(50% - 145px) 5px calc(50% - 145px) } section.themes ul li { width: calc(33.3333% - 10px); margin: 5px } section.themes ul li a { padding: 10.5px; border-radius: 15px; box-shadow: 0px 0px 10px #25252533 } section.themes ul li a div { display: none } section.themes ul li a h3 { width: 100%; margin: 0px; font-size: 9px; line-height: 9px; text-align: center } section.themes ul li a h4 { display: none } section.themes h2 { padding: 20px; font-size: 12px; line-height: 14px } section.slider { padding: 20px 0px 100px 0px } section.slider h2 { width: calc(100% - 40px); margin: 20px; font-size: 24px; line-height: 36px; transform: translateY(40px) } section.slider .bx-prev { left: calc(50% - 50px); bottom: 40px; width: 40px; height: 40px } section.slider .bx-next { right: calc(50% - 50px); bottom: 40px; width: 40px; height: 40px } section.slider ul { margin: 0% calc(50% - 160px) 0% calc(50% - 160px) } section.slider ul li { width: 320px !important; padding: 10px } section.slider ul li a { width: calc(100% - 20px); height: calc(100% - 20px); padding: 35px 35px 95px 35px; border-radius: 10px; margin: 10px } section.slider ul li a:after { bottom: 40px; padding: 15.5px 20px 15.5px 20px; border-radius: 20px; line-height: 9px } section.slider ul li a div, section.slider ul li a h4 { width: calc(100% - 10px); margin: 5px } section.teaser { padding: 40px 20px 20px 20px } section.teaser .pic, section.teaser .osm { width: 100%; padding: 0% 0% 75% 0%; border-radius: 10px; margin: 0px } section.teaser .osm .leaflet-popup-content { margin: 10px; font-size: 7px; line-height: 9px } section.teaser .entry { width: 100%; padding: 20px calc(50% - 140px) 20px calc(50% - 140px) !important; text-align: center !important } section.teaser .entry h2 { font-size: 24px; line-height: 36px } section.teaser .entry .cta { justify-content: center !important; width: calc(100% + 20px); padding: 5px; margin: -10px } section.teaser .entry .cta li { margin: 5px } section.teaser .entry .cta li a { padding: 15.5px 20px 15.5px 20px; border-radius: 20px; line-height: 9px } section.icons { padding: 20px calc(50% - 160px) 20px calc(50% - 160px) } section.icons h2 { width: calc(100% - 40px); margin: 20px; font-size: 24px; line-height: 36px; transform: translateY(40px) } section.icons div { padding: 15px; transform: translateY(40px) } section.icons div a { width: calc(33.3333% - 10px); padding: 75px 5px 5px 5px; margin: 5px } section.icons div a:before, section.icons div a:after { left: calc(50% - 30px); top: 10px; width: 60px; height: 60px } section.icons div a h4 { width: calc(100% - 10px); margin: 5px; line-height: 12px } footer { padding: 30px calc(50% - 150px) 110px calc(50% - 150px) } footer ul { width: 50%; padding: 5px; transform: translateY(40px) } footer ul:first-child { width: 100% } footer ul li { width: calc(100% - 10px); margin: 5px } footer ul li a { padding: 4px 0px 4px 0px; font-size: 12px; line-height: 12px } footer ul li.logo a { width: 90px; height: 40px } footer ul li.phone a { padding: 6px 0px 6px 30px; font-size: 18px; line-height: 18px } footer ul li.location a, footer ul li.email a, footer ul li.facebook a { padding: 9px 0px 9px 30px; font-size: 12px; line-height: 12px } footer hr { margin: 20px 25% 20px 25% } footer div { width: calc(100% - 20px); margin: 10px; transform: translateY(-40px); font-size: 7px; line-height: 12px } footer div h4 { font-size: 9px; line-height: 14px } }