@font-face { font-family: 'PT-Sans Regular'; src: url('../fonts/PT-Sans-Regular.eot'); src: url('../fonts/PT-Sans-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/PT-Sans-Regular.ttf') format('truetype'), local("?"); font-weight: normal; font-style: normal; } @font-face { font-family: 'PT-Sans Bold'; src: url('../fonts/PT-Sans-Bold.eot'); src: url('../fonts/PT-Sans-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/PT-Sans-Bold.ttf') format('truetype'), local("?"); font-weight: normal; font-style: normal; } @font-face { font-family: 'PT-Sans Italic'; src: url('../fonts/PT-Sans-Italic.eot'); src: url('../fonts/PT-Sans-Italic.eot?#iefix') format('embedded-opentype'), url('../fonts/PT-Sans-Italic.ttf') format('truetype'), local("?"); font-weight: normal; font-style: normal; } body { background-image: url(../images/layout/beton.jpg); background-size: cover; background-attachment: fixed; margin: 0px; color: #000000; font-size: 14px; line-height: 24px; font-family: 'PT-Sans Regular', Helvetica, Arial, sans-serif } h1 { margin: 0px; font-weight: normal; font-size: 36px; line-height: 60px; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase } h2 { margin: 0px; font-weight: normal; font-size: 30px; line-height: 48px; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase } h3 { margin: 0px; font-weight: normal; font-size: 24px; line-height: 36px; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase } h4 { margin: 0px; font-weight: normal; font-size: 18px; line-height: 30px; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase } h5 { margin: 0px; font-weight: normal; font-size: 14px; line-height: 24px; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase } ul { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 15px; list-style-type: square } ol { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 15px } img { border: none } b { font-weight: normal; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif } i { font-style: normal; font-family: 'PT-Sans Italic', Helvetica, Arial, sans-serif } a { color: #24972b; text-decoration: none } table { border-style: none; border-spacing: 0px } th { padding: 0px 0px 20px 0px; vertical-align: top; font-size: 18px; line-height: 30px; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase; text-align: left; font-weight: normal } td { padding: 0px 0px 10px 0px; vertical-align: top } input[type=radio], input[type=checkbox] { margin: 0px; padding: 0px } select, textarea, input[type=password], input[type=text] { padding: 8px; background: #ffffff; border: solid 2px #ececec; color: #000000; font-size: 14px; font-family: 'PT-Sans Regular', Helvetica, Arial, sans-serif } select.error, textarea.error, input[type=password].error, input[type=checkbox].error, input[type=text].error { border-color: #ff0000 } input[type=submit] { padding: 10px; background: #24972b; border: none; color: #ffffff; font-size: 14px; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase; cursor: pointer } textarea { overflow: auto; resize: none } #refresh_captcha { position: relative; float: left } #refresh_captcha div { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background: #24972b url(../images/layout/update.svg) no-repeat center; border-radius: 20px; cursor: pointer } .cookiewarning { position: fixed; z-index: 100000; bottom: 0px; width: calc(100% - 96px); padding: 18px 78px 18px 18px; background: #000000; color: #ffffff } .cookiewarning a { color: #ffffff; text-decoration: underline } .cookiewarning a.accept_cookie_policy { float: right; padding: 8px 24px 8px 24px; background: #24972b; border-radius: 3px; margin: -4px -68px -8px -8px; color: #ffffff; font-size: 14px; line-height: 14px; cursor: pointer; text-decoration: none } .clearer { display: block; clear: both } .top { display: none; position: fixed; z-index: 5000; bottom: 40px; right: 40px; width: 40px; height: 40px; background: rgba(0,0,0,0.6) url(../images/layout/up.svg) no-repeat center; background-size: 30px; border-radius: 20px; cursor: pointer } header { position: absolute; z-index: 2000; top: 0px; left: 0px; width: 70%; padding: 5px 15% 5px 15%; background: rgba(0,0,0,0.4) } header ul { float: left; padding: 0px; margin: 0px; list-style-type: none } header ul li { display: block; float: left; margin: 10px } header ul li a { display: block; float: left; height: 14px; padding: 8px 0px 8px 0px; color: #ffffff; line-height: 14px } header a[title=Temas], header a[title=контакт], header a[title=Kontakt] { display: block; float: right; height: 14px; padding: 8px 0px 8px 40px; background: url(../images/layout/location.svg) no-repeat left; margin: 10px; color: #ffffff; line-height: 14px; font-family: 'PT-Sans Italic', Helvetica, Arial, sans-serif } header a[title=Facebook] { display: block; float: right; width: 30px; height: 30px; background: url(../images/layout/facebook_round.svg) no-repeat center; margin: 10px } nav { position: absolute; z-index: 3000; top: 60px; left: 0px; width: 70%; padding: 15px 15% 15px 15%; background: rgba(255,255,255,0.8) } nav .switch { display: none } nav .logo { display: block; float: left; width: 220px; height: 52px; background: url(../images/layout/logo_mobau.svg) no-repeat; margin: 4px 10px 4px 10px } nav .zeiten { float: right; height: 12px; margin: 9px 10px 9px 10px; color: #24972b; font-size: 12px; line-height: 12px } nav ul { clear: right; float: right; padding: 0px; margin: 0px; list-style-type: none } nav ul li { display: block; position: relative; float: left } nav ul li a { display: block; float: left; height: 14px; padding: 8px 10px 8px 10px; color: #000000; line-height: 14px; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase } nav ul li ul { display: none; position: absolute; top: 30px; left: -10px; width: 260px; padding: 14px 10px 14px 10px; background: #ffffff } nav ul li ul li a { width: 240px; height: 12px; color: #24972b !important; font-size: 12px; line-height: 12px; font-family: 'PT-Sans Regular', Helvetica, Arial, sans-serif } .topic { position: absolute; z-index: 2000; top: 170px; right: calc(15% + 10px); width: 280px; height: 260px; padding: 20px 240px 20px 20px; background-color: rgba(36,151,43,0.8); background-repeat: no-repeat; background-position: 320px 20px; color: #ffffff; font-size: 18px; line-height: 30px; text-align: right } .topic a { display: block; float: right; height: 14px; padding: 13px 20px 13px 20px; background: #ffffff; font-size: 14px; line-height: 14px; text-transform: uppercase } .themebox { position: relative; z-index: 1000; float: left; width: 100% } .themebox .bx-wrapper, .themebox .bx-wrapper .bx-window { width: 100% !important; height: 540px !important } .themebox .theme { width: 100%; height: 540px; background-repeat: no-repeat; background-position: center 50%; background-size: cover } .notheme { float: left; width: 100%; height: 216px; background: rgba(255,255,255,0.4) } .partner { position: relative; z-index: 2000; float: left; width: 100%; border-top: solid 10px #ffffff } .partner .box { width: 640px; padding: 10px; margin: 0px auto 0px auto } .partner .box a { display: block; float: left; width: 140px; height: 96px; padding: 10px; margin: -66px 0px 0px 0px } .partner .box a b { display: block; float: left; width: 140px; height: 36px; border-bottom: solid 10px #24972b; margin: 0px 0px 8px 0px; font-size: 36px; line-height: 36px; text-transform: uppercase; text-align: center; text-shadow: 0px 0px 2px rgba(0,0,0,0.6) } .partner .box a span { display: block; float: left; width: 140px; height: 14px; color: #000000; line-height: 14px; text-align: center } .partner .box a i { display: block; float: left; width: 140px; height: 28px; color: #000000; font-size: 12px; line-height: 14px; text-align: center } .teaser { width: 960px; margin: 10px auto 10px auto } .teaser > h2 { float: left; width: 940px; margin: 50px 10px 10px 10px; text-align: center; opacity: 0.6 } .teaser > a, .teaser > div { display: block; float: left; padding: 15px; overflow: hidden; background-color: #24972b; background-position: center; background-size: cover; border: solid 5px #ffffff; box-shadow: 0px 0px 5px rgba(0,0,0,0.4); margin: 10px; color: #ffffff; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase; text-shadow: 0px 0px 2px rgba(0,0,0,0.6) } .teaser > .teaser_10 { width: 36px; height: 36px } .teaser > .teaser_20_flat { width: 132px; height: 132px } .teaser > .teaser_20_high { width: 132px; height: 324px } .teaser > .teaser_40 { width: 324px; height: 132px } .teaser > .teaser_60_flat { width: 516px; height: 132px } .teaser > .teaser_60_high { width: 516px; height: 324px } .teaser > .teaser_80 { width: 708px; height: 132px } .teaser > .teaser_80 .whatsapp { float: left; width: 298px; height: 122px; padding: 20px 20px 20px 420px; background: #019c26 url(../images/layout/whatsapp_logo.svg) no-repeat left center; background-size: 420px; margin: -15px } .teaser > .teaser_80 .whatsapp h4 { font-size: 36px; line-height: 48px } .teaser > .teaser_80 .newsletter { float: left; width: 298px; height: 122px; padding: 20px 20px 20px 420px; margin: -15px } .teaser > .teaser_80 .newsletter h4 { font-size: 20px; line-height: 40px } .teaser > .right { float: right } .teaser > .sortiment { height: 56px; padding: 96px 20px 20px 20px; background-position: center -60px; background-size: 220px; border: none; font-size: 12px; line-height: 14px; text-align: center } .teaser > .partnerlogo { background-color: #ffffff; background-repeat: no-repeat; background-size: 120px } .teaser > a b, .teaser > div b { display: block; font-size: 24px } .teaser > div a { color: #ffffff } .teaser > div iframe { float: left; width: 800px; height: 450px; border: none; margin: -63px -142px -63px -142px } .main { float: left; width: 70%; padding: 0px 15% 0px 15% } .main .container { float: left; width: calc(90% - 30px); padding: 5%; background: #d6d6d4; border: solid 5px #ffffff; box-shadow: 0px 0px 5px rgba(0,0,0,0.4); margin: 10px } .main .container .logo { float: left; width: 220px; height: 52px; background: url(../images/layout/logo_mobau.svg) no-repeat } .main .container .service_head { float: left; width: 100%; padding: 140px 0px 0px 0px; background-repeat: no-repeat; background-position: center top; margin: 0px 0px 40px 0px; text-align: center } .main .container .columns { float: left; width: 100%; column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; text-align: justify } .main .container .theme { position: relative; float: left; width: calc(100% - 2px); margin: 1px } .main .container .theme img { float: left; width: 100% } .main .container .theme div { position: absolute; bottom: -40px; right: 40px; width: 120px; height: 66px; padding: 43px 20px 51px 20px; background: #24972b; border-radius: 80px; color: #ffffff; font-size: 18px; line-height: 18px; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase; text-align: center } .main .container .theme div h3 { color: #ffffff; font-size: 48px; line-height: 48px; font-family: 'PT-Sans Italic', Helvetica, Arial, sans-serif; text-transform: none } .main .container .column { float: left; width: 50% } .main .container .wide { width: 60% } .main .container .slim { width: 40% } .main .container .slim .spezialisten b { height: 20px; padding: 5px 0px 5px 40px; background: url(../images/layout/phone_black.svg) no-repeat left center; background-size:30px; margin: 5px 0px 0px 0px; line-height: 30px; font-size:20px; } .main .container .column .entry { position: relative; float: left; width: calc(100% - 80px); padding: 39px; background: #ffffff; margin: 1px } .main .container .column .entry img { float: left; width: 100% } .main .container .column .animation img { width: calc(100% - 78px) } .main .container .column .entry iframe { float: left; width: 100%; height: 240px; border: none } .main .container .column .entry table { float: left; width: 100%; overflow:hidden; } .main .container .column .entry table tr th { position: relative;} .main .container .column .entry table tr th .besetzt { position: absolute; z-index: 1000; top: 65px; right: -80px; width: 280px; height: 145px; padding: 10px; background: url(../images/content/stelle_besetzt.png) no-repeat; background-size:180px; transform: rotate(30deg); -webkit-transform: rotate(35deg);} .main .container .column .entry table tr td i.besetzt { text-decoration: line-through } .main .container .column .entry table tr td:first-child { width: 25%; padding: 0px 10px 10px 0px } .main .container .column .entry table tr td textarea, .main .container .column .entry table tr td input[type=text] { width: calc(100% - 20px) !important } .main .container .column .entry table tr td input[name=nummer], .main .container .column .entry table tr td input[name=plz] { width: calc(25% - 20px) !important } .main .container .column .entry table tr td input[name=strasse], .main .container .column .entry table tr td input[name=ort] { width: calc(75% - 30px) !important } .main .container .column .entry table tr td select, .main .container .column .entry table tr td input[type=submit] { width: 100% !important } .main .container .column .entry .button { display: block; float: left; width: 100px; height: 14px; padding: 8px 20px 8px 20px; background: #24972b; color: #ffffff; font-size: 14px; line-height: 14px; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase } .main .container .column .entry .groups { float: left; width: calc(100% + 10px); padding: 0px; margin: -5px; list-style-type: none } .main .container .column .entry .groups li { display: block; float: left; width: calc(50% - 30px); padding: 10px; background: #03315d; margin: 5px; color: #ffffff; font-size: 12px; line-height: 18px } .main .container .column .entry .groups li:nth-child(odd) { clear: left } .main .container .column .entry figure { float: left; width: calc(100% + 10px); margin: -5px } .main .container .column .entry figure img { float: left; width: calc(30% - 10px); margin: 5px } .main .container .column .entry figure figcaption { float: left; width: calc(70% - 10px); margin: 5px } .main .container .column .entry figure p { float: left; width: calc(70% - 10px); margin: 5px; font-size: 12px; line-height: 18px } .main .container .column .spezial_fliesen { width: calc(100% - 200px); padding: 39px 159px 39px 39px; background: #ececec url(../images/content/produktkatalog_fliesentrend.png) no-repeat calc(100% - 10px) calc(100% - 10px); background-size: 140px } .main .container .column .spezial_parkett { width: calc(100% - 200px); padding: 39px 159px 39px 39px; background: #ececec url(../images/content/produktkatalog_parkett.png) no-repeat calc(100% - 10px) calc(100% - 10px); background-size: 140px } .main .container .column .withlogo { width: calc(100% - 220px); padding: 39px 39px 39px 179px; background-repeat: no-repeat; background-position: 40px 40px; background-size: 100px } .main .container .column .withlogo .button { width: calc(100% + 100px); margin: 0px 0px 0px -140px; text-align: center } .main .container .column .whatsapp { width: calc(100% - 170px); padding: 39px 39px 39px 129px; background: #24972b url(../images/layout/whatsapp_logo.svg) no-repeat 30px 30px; background-size: 90px; color: #ffffff } .main .container .column .whatsapp .button { width: calc(100% + 46px); border: solid 2px #ffffff; margin: 0px 0px 0px -90px; text-align: center } .main .container .column .imageentry { position: relative; float: left; width: calc(100% - 240px); padding: 39px 199px 39px 39px; background: #ffffff; margin: 1px } .main .container .column .imageentry .button { display: block; position: absolute; z-index: 1000; top: -20px; right: -20px; width: 120px; height: 120px; padding: 30px; background: #24972b; border-radius: 90px; transform: rotate(-7deg); -webkit-transform: rotate(-7deg); color: #ffffff; font-size: 18px; line-height: 24px; text-align: center } .main .container .column .baulogistik { background: #03315d; color: #ffffff } .main .container .column .baulogistik .button { width: calc(100% - 44px); background: #03315d; border: solid 2px #ffffff; text-align: center } .main .container .animation img { position: absolute; z-index: 0; opacity: 0; animation-duration: 18s; animation-timing-function: ease-in-out; animation-iteration-count: infinite } .main .container .animation img:nth-of-type(1) { z-index: 1; -webkit-animation: fade 18s ease-in-out infinite; animation: fade 18s ease-in-out infinite } .main .container .animation img:nth-of-type(2) { z-index: 2; -webkit-animation: fade 18s 3s ease-in-out infinite; animation: fade 18s 3s ease-in-out infinite } .main .container .animation img:nth-of-type(3) { z-index: 3; -webkit-animation: fade 18s 6s ease-in-out infinite; animation: fade 18s 6s ease-in-out infinite } .main .container .animation img:nth-of-type(4) { z-index: 4; -webkit-animation: fade 18s 9s ease-in-out infinite; animation: fade 18s 9s ease-in-out infinite } .main .container .animation img:nth-of-type(5) { z-index: 5; -webkit-animation: fade 18s 12s ease-in-out infinite; animation: fade 18s 12s ease-in-out infinite } .main .container .animation img:nth-of-type(6) { z-index: 6; -webkit-animation: fade 18s 15s ease-in-out infinite; animation: fade 18s 15s ease-in-out infinite } .main .container .animation img:nth-of-type(7) { z-index: 7; -webkit-animation: fade 18s 18s ease-in-out infinite; animation: fade 18s 18s ease-in-out infinite } @keyframes fade { 6.66%, 20% { opacity: 1 } 0%, 26.66%, 100% { opacity: 0 } } @-webkit-keyframes fade { 6.66%, 20% { opacity: 1 } 0%, 26.66%, 100% { opacity: 0 } } .main .container .prospektbox { position: relative; float: left; width: calc(100% - 440px); min-height: 140px; padding: 40px 360px 40px 40px; background: linear-gradient(160deg, #ffffff 0%, #ececec 100%); background-repeat: no-repeat; background-position: right bottom; border: solid 20px #ececec } .main .container .prospektbox a { display: block; position: absolute; bottom: -40px; right: 180px; width: 140px; height: 72px; padding: 44px 10px 44px 10px; background: #24972b; border-radius: 80px; color: #ffffff; font-size: 16px; line-height: 24px; text-align: center } .main .container .highlights { float: left; width: 66.6%; padding: 0px; margin: 0px; list-style-type: none } .main .container .highlights li { display: block; float: left; width: calc(100% - 40px); height: 60px; padding: 19px; background: #03315d; margin: 1px; color: #ffffff; font-family: 'PT-Sans Italic', Helvetica, Arial, sans-serif } .main .container .overview { float: left; width: 66.6%; padding: 0px; margin: 0px; list-style-type: none } .main .container .overview li { display: block; float: left; width: calc(100% - 2px); margin: 1px } .main .container .overview li a { display: block; float: left; width: calc(100% - 68px); height: 60px; padding: 19px 49px 19px 19px; background: #24972b url(../images/layout/right.svg) no-repeat center right; color: #ffffff; line-height: 18px } .main .container .overview li a span { display: block; font-size: 18px; line-height: 24px; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase } .main .container .services { float: left; width: 100%; padding: 0px; margin: 40px 0px 0px 0px; list-style-type: none } .main .container .services li { display: block; float: left; width: calc(33.3% - 2px); margin: 1px } .main .container .services li a { display: block; float: left; width: calc(100% - 38px); height: 150px; padding: 139px 19px 19px 19px; background-color: #24972b; background-repeat: no-repeat; background-position: center top; color: #ffffff; line-height: 18px; text-align: center } .main .container .services li a span { display: block; font-size: 18px; line-height: 24px; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase } .main .container .prospekte { position: relative; float: left; width: calc(33.3% - 40px); height: 160px; padding: 19px; background: #03315d url(../images/layout/kataloge.svg) no-repeat right bottom; background-size: 80px; margin: 1px; color: #ffffff } .main .container .azubi_bericht { position: relative; float: left; width: calc(33.3% - 40px); height: 160px; padding: 19px; background: #03315d; background-repeat: no-repeat; background-position: calc(100% - 10px) calc(100% - 10px); background-size: 80px; margin: 1px; color: #ffffff } .main .container .unterwegs { position: relative; float: left; width: calc(33.3% - 40px); height: 160px; padding: 19px; background: #03315d url(../images/layout/unternehmen.svg) no-repeat right bottom; background-size: 80px; margin: 1px; color: #ffffff } .main .container .stellen { position: relative; float: left; width: calc(33.3% - 40px); height: 160px; padding: 19px; background: #03315d url(../images/layout/stellen.svg) no-repeat right bottom; background-size: 80px; margin: 1px; color: #ffffff } .main .container .prospekte a, .main .container .unterwegs a, .main .container .stellen a { display: block; position: absolute; bottom: 19px; left: 19px; width: 100px; height: 14px; padding: 13px 20px 13px 20px; background: #ffffff; color: #03315d; line-height: 14px; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase } .main .container .azubi_bericht a { display: block; position: absolute; bottom: 19px; left: 19px; width: calc(75% - 40px); height: 14px; padding: 13px 10px 13px 10px; background: #ffffff; color: #03315d; line-height: 14px; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; text-transform: uppercase } .main .container .spezial_beton { background-image: url(../images/content/produktkatalog_spezialbaustoffe.png); background-position: calc(100% - 10px) calc(100% - 10px); background-size: 80px } .main .container .spezial_trockenbau { background-image: url(../images/content/produktkatalog_trockenbau.png); background-position: calc(100% - 10px) calc(100% - 10px); background-size: 80px } .main .container .spezial_garten { background-image: url(../images/content/produktkatalog_garten.png); background-position: calc(100% - 10px) calc(100% - 10px); background-size: 80px } .main .container .spezial_stein { background-image: url(../images/content/produktkatalog_steintrend.png); background-position: calc(100% - 10px) calc(100% - 10px); background-size: 80px } .main .container .spezial_fliesen { background-image: url(../images/content/produktkatalog_fliesentrend.png); background-position: calc(100% - 10px) calc(100% - 10px); background-size: 80px } .main .container .spezial_parkett { background-image: url(../images/content/produktkatalog_parkett.png); background-position: calc(100% - 10px) calc(100% - 10px); background-size: 80px } .main .container .bauzeit { background-image: url(../images/content/produktkatalog_bauplan2018.png); background-position: calc(100% - 10px) calc(100% - 10px); background-size: 80px } .main .container .chat b { display: block; position: relative; clear: both; float: right; padding: 20px; background: #24972b; border-radius: 5px 0px 5px 5px; margin: 20px 20px 0px 80px; color: #ffffff; font-family: 'PT-Sans Regular', Helvetica, Arial, sans-serif } .main .container .chat b:before { display: block; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; content: 'Frage:' } .main .container .chat b span { display: block; position: absolute; right: -10px; top: 0px; width: 0px; height: 0px; border-style: solid; border-width: 10px 10px 0px 0px; border-color: #24972b transparent transparent transparent } .main .container .chat i { display: block; position: relative; clear: both; float: left; padding: 20px; background: #03315d; border-radius: 0px 5px 5px 5px; margin: 20px 80px 0px 20px; color: #ffffff; font-family: 'PT-Sans Regular', Helvetica, Arial, sans-serif } .main .container .chat i:before { display: block; font-family: 'PT-Sans Bold', Helvetica, Arial, sans-serif; content: 'Antwort:' } .main .container .chat i span { display: block; position: absolute; left: -10px; top: 0px; width: 0px; height: 0px; border-style: solid; border-width: 0px 10px 10px 0px; border-color: transparent #03315d transparent transparent } .main .container .mobau_direkt1 { position: relative; float: left; width: 100%; height: 480px; background: url(../images/mobau_direkt/mobau_direkt1.jpg) no-repeat center; background-size: cover } .main .container .mobau_direkt1 div { position: absolute; right: 50px; top: -50px; width: 200px; height: 200px; background: url(../images/mobau_direkt/mobau_direkt.svg) no-repeat; background-size: contain } .main .container .mobau_direkt1 h1 { position: absolute; right: -20px; top: 160px; padding: 10px 20px 10px 20px; background: #24972b; color: #ffffff; font-size: 60px } .main .container .mobau_direkt1 h2 { position: absolute; right: -20px; top: 250px; padding: 10px 20px 10px 20px; background: #24972b; color: #ffffff; line-height: 30px } .main .container .mobau_direkt2 { float: left; width: calc(100% - 80px); padding: 40px; background: #ffffff url(../images/mobau_direkt/mobau_direkt2.jpg) no-repeat left bottom; text-align: center } .main .container .mobau_direkt2 div { float: left; width: calc(100% - 300px); padding: 200px 0px 0px 0px; background: url(../images/mobau_direkt/pickup.jpg) no-repeat center 10px; margin: 0px 0px 0px 300px; text-align: left } .main .container .mobau_direkt3 { float: left; width: calc(100% - 80px); padding: 40px; background: #f1f1f1 url(../images/mobau_direkt/mobau_direkt3.jpg) no-repeat right bottom; text-align: center } .main .container .mobau_direkt3 ul { float: left; width: calc(100% - 400px); margin: 0px 400px 0px 0px; padding: 0px; list-style-type: none } .main .container .mobau_direkt3 ul li { display: block; float: left; width: calc(100% - 70px); padding: 30px 0px 0px 70px; background: url(../images/mobau_direkt/haken.png) no-repeat 0px 30px; text-align: left } .main .container .mobau_direkt4 { float: left; width: calc(100% - 80px); padding: 40px; background: #ffffff url(../images/mobau_direkt/mobau_direkt4.jpg) no-repeat 66% bottom; text-align: center } .main .container .mobau_direkt4 div { float: left; width: calc(62% - 150px); margin: 40px 150px 0px 0px; text-align: left } .main .container .mobau_direkt4 div:last-child { width: calc(38% - 150px); margin: 40px 0px 0px 150px } .main .container .mobau_direkt4 div a[title=Facebook] { display: block; float: left; width: 40px; height: 40px; background: #00225a url(../images/layout/facebook.svg) no-repeat center; background-size: 60px; border-radius: 5px } .main #map_canvas { float: left; width: calc(100% - 30px); height: 500px; border: solid 5px #ffffff; box-shadow: 0px 0px 5px rgba(0,0,0,0.4); margin: 10px } .main #map_canvas .gm-style { -webkit-filter: grayscale(1); filter: grayscale(1) } .main #map_canvas .gm-style-iw div { float: left !important; width: auto !important; height: auto !important; overflow: visible !important; font-size: 12px !important; line-height: 18px !important; font-family: 'PT-Sans Regular', Helvetica, Arial, sans-serif !important } .main #map_canvas .gm-style-iw div h4 { font-size: 14px !important; line-height: 24px !important } .history { float: left; width: 70%; padding: 0px 15% 0px 15% } .history .container { float: left; width: calc(90% - 30px); padding: 5%; background: #d6d6d4; border: solid 5px #ffffff; box-shadow: 0px 0px 5px rgba(0,0,0,0.4); margin: 10px } .history .container .slider { float: left; width: calc(100% - 20px); padding: 10px; background: #ececec } .history .container .slider .bx-wrapper { position: relative !important; float: left !important; width: 100% !important; height: 400px !important } .history .container .slider .bx-wrapper .bx-prev { display: block; position: absolute; z-index: 200; top: calc(50% - 20px); left: -50px; width: 40px; height: 40px; background: url(../images/layout/left.svg) no-repeat center; background-size: 100px; text-indent: -9999px } .history .container .slider .bx-wrapper .bx-next { display: block; position: absolute; z-index: 200; top: calc(50% - 20px); right: -50px; width: 40px; height: 40px; background: url(../images/layout/right.svg) no-repeat center; background-size: 100px; text-indent: -9999px } .history .container .slider .bx-wrapper .disabled { display: none } .history .container .slider ul { float: left; width: 100%; padding: 0px; margin: 0px; list-style-type: none } .history .container .slider ul li h4 { float: left; width: calc(100% - 20px); height: 30px; margin: 50px 10px 0px 10px; color: #ffffff; font-size: 60px; line-height: 30px; text-align: right } .history .container .slider ul li .image { float: left; width: calc(100% - 20px); height: 180px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; margin: 0px 10px 0px 10px } .history .container .slider ul li .text { float: left; width: calc(100% - 60px); height: 90px; padding: 20px; background: #ffffff; margin: 0px 10px 0px 10px; line-height: 18px; text-align: center } .logistik { float: left; width: 70%; padding: 0px 15% 0px 15% } .logistik .container { float: left; width: calc(90% - 30px); padding: 5%; background: #d6d6d4; border: solid 5px #ffffff; box-shadow: 0px 0px 5px rgba(0,0,0,0.4); margin: 10px } .logistik .container .slider { float: left; width: calc(100% - 20px); padding: 10px; background: #ececec } .logistik .container .slider .bx-wrapper { position: relative !important; float: left !important; width: 100% !important; height: 155px !important } .logistik .container .slider .bx-wrapper .bx-prev { display: block; position: absolute; z-index: 200; top: calc(50% - 20px); left: -50px; width: 40px; height: 40px; background: url(../images/layout/left.svg) no-repeat center; background-size: 100px; text-indent: -9999px } .logistik .container .slider .bx-wrapper .bx-next { display: block; position: absolute; z-index: 200; top: calc(50% - 20px); right: -50px; width: 40px; height: 40px; background: url(../images/layout/right.svg) no-repeat center; background-size: 100px; text-indent: -9999px } .logistik .container .slider .bx-wrapper .disabled { display: none } .logistik .container .slider ul { float: left; width: 100%; padding: 0px; margin: 0px; list-style-type: none } .logistik .container .slider ul li .image { float: left; width: calc(100% - 20px); height: 135px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; margin: 10px } .gallery { float: left; width: 70%; padding: 0px 15% 0px 15% } .gallery .container { float: left; width: calc(90% - 30px); padding: 5%; background: #d6d6d4; border: solid 5px #ffffff; box-shadow: 0px 0px 5px rgba(0,0,0,0.4); margin: 10px } .gallery .container .slider { float: left; width: calc(100% - 20px); padding: 10px; background: #ececec } .gallery .container .slider .bx-wrapper { position: relative !important; float: left !important; width: 100% !important; height: 155px !important } .gallery .container .slider .bx-wrapper .bx-prev { display: block; position: absolute; z-index: 200; top: calc(50% - 20px); left: -50px; width: 40px; height: 40px; background: url(../images/layout/left.svg) no-repeat center; background-size: 100px; text-indent: -9999px } .gallery .container .slider .bx-wrapper .bx-next { display: block; position: absolute; z-index: 200; top: calc(50% - 20px); right: -50px; width: 40px; height: 40px; background: url(../images/layout/right.svg) no-repeat center; background-size: 100px; text-indent: -9999px } .gallery .container .slider .bx-wrapper .disabled { display: none } .gallery .container .slider ul { float: left; width: 100%; padding: 0px; margin: 0px; list-style-type: none } .gallery .container .slider ul li a { display: block; float: left; width: calc(100% - 20px); height: 135px; background-color: #24972b; background-repeat: no-repeat; background-position: center; background-size: cover; margin: 10px } .gallery .container .slider ul.sortimente li a { width: calc(100% - 50px); height: 30px; padding: 90px 15px 15px 15px; background-position: center -35px; background-size: 180px; color: #ffffff; font-size: 12px; line-height: 14px; text-align: center; text-transform: uppercase } .footer_mobau { float: left; width: 100%; height: 100px; background: url(../images/layout/footer_mobau.svg) no-repeat center 20px; opacity: 0.6 } footer { float: left; width: 70%; padding: 30px 15% 30px 15%; background: #000000; opacity: 0.6 } footer ul { float: left; width: 100%; padding: 0px; margin: 0px; list-style-type: none; text-align: center } footer ul li { display: inline-block; margin: 10px } footer ul li a { color: #ffffff; line-height: 14px; text-transform: uppercase } footer .container { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; text-align: center } footer .container h2 { display: inline-block; height: 30px; padding: 5px 0px 5px 40px; background: url(../images/layout/phone.svg) no-repeat left center; margin: 5px 0px 0px 0px; line-height: 30px } footer .container a { color: #ffffff } @media only screen and (max-width: 1199px) { body { font-size: 12px; line-height: 18px } h1 { font-size: 24px; line-height: 36px } h2 { font-size: 18px; line-height: 30px } h3 { font-size: 14px; line-height: 24px } h4, h5, th { font-size: 12px; line-height: 18px } select, textarea, input[type=password], input[type=text], input[type=submit] { font-size: 12px } .top { bottom: 20px; right: 20px } header { width: 90%; padding: 5px 5% 5px 5% } header ul li { margin: 5px } header ul li a { height: 12px; padding: 4px 0px 4px 0px; line-height: 12px } header a[title=Temas], header a[title=контакт], header a[title=Kontakt] { height: 12px; padding: 4px 0px 4px 30px; background-size: 20px; margin: 5px; line-height: 12px } header a[title=Facebook] { width: 20px; height: 20px; background-size: 20px; margin: 5px } nav { top: 40px; width: 90%; padding: 5px 5% 5px 5%; background: #ffffff; box-shadow: 0px 0px 5px rgba(0,0,0,0.4) } nav .switch { display: block; float: left; width: 30px; height: 30px; background: #24972b url(../images/layout/menu.svg) no-repeat center; background-size: cover; margin: 5px; cursor: pointer } nav .logo { float: right; width: 110px; height: 26px; background-size: contain; margin: 7px 5px 7px 5px } nav .zeiten { display: none } nav ul { display: none; width: 100%; margin: 20px 0px 0px 0px } nav ul li { width: 100% } nav ul li a { width: calc(100% - 20px); height: 14px; padding: 13px 10px 13px 10px; font-size: 14px } nav ul li ul { display: none !important } .topic { top: 110px; right: calc(5% + 10px); width: 100px; height: 160px; padding: 10px 140px 10px 10px; background-position: 120px 10px; background-size: 120px; font-size: 10px; line-height: 14px } .topic h2 { font-size: 12px; line-height: 18px } .topic a { height: 10px; padding: 5px 10px 5px 10px; font-size: 10px; line-height: 10px } .themebox .bx-wrapper, .themebox .bx-wrapper .bx-window, .themebox .theme { height: 340px !important } .notheme { height: 145px } .partner .box { width: 440px; padding: 0px } .partner .box a { width: 100px; height: 60px; padding: 5px; margin: -45px 0px 0px 0px } .partner .box a b { width: 100px; height: 30px; margin: 0px 0px 10px 0px; font-size: 30px; line-height: 30px } .partner .box a span { width: 100px; height: 10px; font-size: 10px; line-height: 10px } .partner .box a i { display: none } .teaser { width: 640px } .teaser > h2 { width: 620px; margin: 20px 10px 10px 10px } .teaser > a, .teaser > div { padding: 10px; border: none; font-size: 10px; line-height: 14px } .teaser > .teaser_10 { width: 24px; height: 24px } .teaser > .teaser_20_flat { width: 88px; height: 88px } .teaser > .teaser_20_high { width: 88px; height: 216px } .teaser > .teaser_40 { width: 216px; height: 88px } .teaser > .teaser_60_flat { width: 344px; height: 88px } .teaser > .teaser_60_high { width: 344px; height: 216px } .teaser > .teaser_80 { width: 472px; height: 88px } .teaser > .teaser_80 .whatsapp { width: 192px; height: 68px; padding: 20px 20px 20px 280px; background-size: 280px; margin: -10px } .teaser > .teaser_80 .whatsapp h4 { font-size: 24px; line-height: 30px } .teaser > .teaser_80 .newsletter { width: 140px; height: 68px; padding: 10px 20px 20px 140px; margin: -10px } .teaser > .teaser_80 .newsletter h4 { font-size: 12px; line-height: 10px } .teaser > .sortiment { height: 40px; padding: 58px 10px 10px 10px; background-position: center -40px; background-size: 140px; font-size: 8px; line-height: 10px } .teaser > .partnerlogo { background-size: 80px } .teaser > a b, .teaser > div b { font-size: 14px } .teaser > div iframe { width: 540px; height: 304px; margin: -44px -98px -44px -98px } .main { width: 90%; padding: 10px 5% 0px 5% } .main .container { width: calc(90% - 20px); border: none } .main .container .logo { width: 110px; height: 26px; background-size: contain } .main .container .columns { column-count: 1; -moz-column-count: 1; -webkit-column-count: 1; text-align: left } .main .container .column { width: 100% !important } .main .container .column .entry { width: calc(100% - 40px); padding: 19px } .main .container .column .animation img { width: calc(100% - 38px) } .main .container .column .entry iframe { height: 120px } .main .container .column .entry table { width: calc(100% + 10px); margin: -5px } .main .container .column .entry table tr th, .main .container .column .entry table tr td { display: block; float: left; width: calc(100% - 10px) !important; padding: 5px !important } .main .container .column .entry table tr th .besetzt { top:20px; right:-40px; width: 140px; height: 10px; font-size: 10px; line-height: 10px } .main .container .column .entry .button { height: 10px; padding: 10px 20px 10px 20px; font-size: 10px; line-height: 10px } .main .container .column .entry .groups li { width: calc(50% - 20px); padding: 5px; font-size: 10px; line-height: 14px } .main .container .column .entry figure p { font-size: 10px; line-height: 14px } .main .container .column .spezial_fliesen { width: calc(100% - 140px); padding: 19px 119px 19px 19px; background-size: 100px } .main .container .column .withlogo { width: calc(100% - 120px); padding: 19px 19px 19px 99px; background-position: 20px 20px; background-size: 60px } .main .container .column .withlogo .button { width: calc(100% + 40px); margin: 0px 0px 0px -80px } .main .container .column .whatsapp { width: calc(100% - 120px); padding: 19px 19px 19px 99px; background-position: 10px 10px; background-size: 80px } .main .container .column .whatsapp .button { width: calc(100% + 36px); margin: 0px 0px 0px -80px } .main .container .column .imageentry { width: calc(100% - 140px); padding: 19px 119px 19px 19px } .main .container .column .imageentry .button { top: -30px; right: -30px; width: 100px; height: 100px; padding: 20px; border-radius: 70px; font-size: 14px; line-height: 18px } .main .container .prospektbox { width: calc(100% - 40px); min-height: 0px; padding: 20px 20px 220px 20px; border: none } .main .container .prospektbox a { bottom: 20px; right: 20px; width: 100px; height: 54px; padding: 33px 10px 33px 10px; border-radius: 60px; font-size: 14px; line-height: 18px } .main .container .highlights, .main .container .overview { width: 100% } .main .container .highlights li { height: auto } .main .container .overview li a { height: auto; background-position: calc(100% + 5px) top; line-height: 14px } .main .container .overview li a span { font-size: 14px; line-height: 18px } .main .container .services li { width: calc(50% - 2px) } .main .container .services li a { line-height: 14px } .main .container .services li a span { font-size: 14px; line-height: 18px } .main .container .prospekte, .main .container .unterwegs, .main .container .azubi_bericht, .main .container .stellen { width: calc(100% - 40px); height: auto; padding: 19px 19px 59px 19px } .main .container .prospekte a, .main .container .azubi_bericht a, .main .container .unterwegs a, .main .container .stellen a { height: 10px; padding: 10px 20px 10px 20px; font-size: 10px; line-height: 10px } .main .container .spezial_beton, .main .container .spezial_trockenbau, .main .container .spezial_garten, .main .container .spezial_stein, .main .container .spezial_fliesen { background-size: 60px } .main .container .mobau_direkt1 { height: 360px } .main .container .mobau_direkt1 div { right: 20px; top: -30px; width: 120px; height: 120px } .main .container .mobau_direkt1 h1 { right: -10px; top: 100px; padding: 5px 10px 5px 10px; font-size: 36px } .main .container .mobau_direkt1 h2 { right: -10px; top: 150px; padding: 5px 10px 5px 10px; line-height: 18px } .main .container .mobau_direkt2 { width: calc(100% - 40px); padding: 20px; background-size: 200px } .main .container .mobau_direkt2 div { width: calc(100% - 200px); padding: 160px 0px 0px 0px; background-size: 300px; margin: 0px 0px 0px 200px } .main .container .mobau_direkt3 { width: calc(100% - 40px); padding: 20px; background-size: 300px } .main .container .mobau_direkt3 ul { width: calc(100% - 300px); margin: 0px 300px 0px 0px } .main .container .mobau_direkt3 ul li { width: calc(100% - 40px); padding: 20px 0px 0px 40px; background-position: 0px 20px; background-size: 30px } .main .container .mobau_direkt4 { width: calc(100% - 40px); padding: 20px; background-size: 200px } .main .container .mobau_direkt4 div { width: calc(62% - 100px); margin: 20px 100px 0px 0px } .main .container .mobau_direkt4 div:last-child { width: calc(38% - 100px); margin: 20px 0px 0px 100px } .main .container .mobau_direkt4 div a[title=Facebook] { width: 30px; height: 30px; background-size: 40px; border-radius: 3px } .main #map_canvas { width: calc(100% - 20px); height: 300px; border: none } .main #map_canvas .gm-style-iw div { font-size: 10px !important; line-height: 14px !important } .main #map_canvas .gm-style-iw div h4 { font-size: 12px !important; line-height: 18px !important } .history { width: 90%; padding: 10px 5% 0px 5% } .history .container { width: calc(90% - 20px); border: none } .history .container .slider .bx-wrapper { height: 340px !important } .history .container .slider ul li h4 { margin: 30px 10px 0px 10px } .history .container .slider ul li .image { height: 160px } .history .container .slider ul li .text { height: 70px; line-height: 14px } .logistik { width: 90%; padding: 0px 5% 0px 5% } .logistik .container { width: calc(90% - 20px); border: none } .logistik .container .slider .bx-wrapper { height: 80px !important } .logistik .container .slider ul li .image { height: 60px; background-size: cover } .gallery { width: 90%; padding: 0px 5% 0px 5% } .gallery .container { width: calc(90% - 20px); border: none } .gallery .container .slider .bx-wrapper { height: 80px !important } .gallery .container .slider ul li a { height: 60px } .gallery .container .slider ul.sortimente li a { width: calc(100% - 30px); height: 20px; padding: 35px 5px 5px 5px; background-position: center -20px; background-size: 80px; font-size: 8px; line-height: 10px } .footer_mobau { height: 70px; background-size: 110px } footer { width: 90%; padding: 20px 5% 60px 5% } footer ul:first-child li { display: block; float: left; width: calc(100% - 20px) } footer ul li a { line-height: 12px } } @media only screen and (max-width: 799px) { header ul li a { height: 10px; padding: 5px 0px 5px 0px; font-size: 10px; line-height: 10px } header a[title=Temas], header a[title=контакт], header a[title=Kontakt] { height: 10px; padding: 5px 0px 5px 30px; font-size: 10px; line-height: 10px } .partner .box { width: 360px } .partner .box a { width: 80px; height: 53px } .partner .box a b { width: 80px; height: 30px; margin: 0px 0px 5px 0px; font-size: 30px; line-height: 30px } .partner .box a span { width: 80px; height: 8px; font-size: 8px; line-height: 8px } .teaser { width: 360px } .teaser > h2 { width: 350px; margin: 10px 5px 5px 5px } .teaser > a, .teaser > div { padding: 5px; margin: 5px; font-size: 6px; line-height: 8px } .teaser > .teaser_10 { width: 16px; height: 16px } .teaser > .teaser_20_flat { width: 52px; height: 52px } .teaser > .teaser_20_high { width: 52px; height: 124px } .teaser > .teaser_40 { width: 124px; height: 52px } .teaser > .teaser_60_flat { width: 196px; height: 52px } .teaser > .teaser_60_high { width: 196px; height: 124px } .teaser > .teaser_80 { width: 268px; height: 52px } .teaser > .teaser_80 .whatsapp { width: 108px; height: 42px; padding: 10px 10px 10px 160px; background-size: 160px; margin: -5px } .teaser > .teaser_80 .whatsapp h4 { font-size: 14px; line-height: 18px } .teaser > .sortiment { height: 24px; padding: 33px 5px 5px 5px; background-position: center -20px; background-size: 75px; font-size: 4.5px; line-height: 6px } .teaser > .partnerlogo { background-size: 50px } .teaser > a b, .teaser > div b { font-size: 8px } .teaser > div iframe { width: 370px; height: 208px; margin: -42px -87px -42px -87px } .main .container .mobau_direkt1 { height: 160px } .main .container .mobau_direkt1 div { right: 10px; top: -10px; width: 80px; height: 80px } .main .container .mobau_direkt1 h1 { right: -5px; top: 70px; padding: 5px 10px 5px 10px; font-size: 24px; line-height: 24px } .main .container .mobau_direkt1 h2 { right: -5px; top: 110px; padding: 5px 10px 5px 10px; font-size: 12px; line-height: 12px } .main .container .mobau_direkt2 { background-image: none; text-align: left } .main .container .mobau_direkt2 div { width: 100%; padding: 120px 0px 0px 0px; background-size: 240px; margin: 0px } .main .container .mobau_direkt3 { background-image: none; text-align: left } .main .container .mobau_direkt3 ul { width: 100%; margin: 0px } .main .container .mobau_direkt4 { background-image: none; text-align: left } .main .container .mobau_direkt4 div, .main .container .mobau_direkt4 div:last-child { width: 100%; margin: 20px 0px 0px 0px } }