.seperator { height:150px; } .seperator.half { height:75px; } .seperator.quater { height:35px; } .seperator.x2 { height:300px; } .no-outline { outline:0; } .pointer { cursor:pointer; } .default-cursor { cursor:default; } .uc { text-transform:uppercase; } .hyphens { -moz-hyphens:auto; -o-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; } .no-break { word-break:keep-all; white-space:nowrap; } .absolute { position:absolute; } .relative { position:relative; } .no-min-height { min-height:0 !important; } .no-deco { text-decoration:none; color:inherit; font-size:inherit; text-shadow:none; } .no-deco:hover { text-decoration:none; color:inherit; } .bg-extralightgray { background-color:#f9f9f9; } .color-blue, .text-blue { color:#0069af; } .color-pink, .text-pink { color:#d63384; } .color-white, .text-white { color:white !important; } .color-black, .text-black { color:black !important; } .bold { font-weight:bold; } .fs-small { font-size:13px; } .fs-micro { font-size:11px; } .fs-2xl { font-size:60px; } .fs-xl { font-size:40px; } .stronger { font-weight:600 !important; } .btn, .form-control, .well, .dropdown-menu, .btn-group-sm { border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; } .nav-tabs > li > a { border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; } .table>:not(caption)>*>* { background-color:transparent; } .form-label { font-weight:bold; } .btn { font-family:"bebas-neue-pro", sans-serif; font-size:1.3rem; } .btn-primary { background-color:#0069af; border-color:#0069af; color:#fff; } .btn-primary:hover { background-color:#0069af; border-color:#0069af; } .form-control { box-shadow:0 0 0 transparent; -moz-box-shadow:0 0 0 transparent; -webkit-box-shadow:0 0 0 transparent; } .label { border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; margin-right:3px; } .label.label-primary { background-color:#546272; } .disabled { color:#eff0f1 !important; } .disabled .filter-option { color:#333 !important; } .modal-content { border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; } .container { position:relative; } .btn-outline-secondary { text-transform:uppercase; } .btn-outline-secondary.btn-lg { font-size:1rem; padding:.5rem 3rem; } .form-control { border-top:1px solid transparent !important; border-left:1px solid transparent !important; border-right:1px solid transparent !important; } .modal { z-index:9999; } .w-90 { width:90% !important; } .w-80 { width:80% !important; } .w-70 { width:70% !important; } .w-60 { width:60% !important; } .w-50 { width:50% !important; } .w-40 { width:40% !important; } .p-5 { padding:3rem !important; } .p-6 { padding:3.25rem !important; } .p-7 { padding:3.50rem !important; } .p-8 { padding:4rem !important; } .modal-content-loading, .modal-content-response { position:relative; display:flex; flex-direction:column; width:100%; color:var(--bs-modal-color); pointer-events:auto; justify-content:center; align-items:center; background-color:var(--bs-modal-bg); background-clip:padding-box; border:var(--bs-modal-border-width) solid var(--bs-modal-border-color); outline:0; } .hidden { display:none; } .bg-gray { background-color:#eff0f1; } .bg-darkgray { background-color:#323232; } .bg-brand { background-color:#0069af; } .bg-extralightgray { background-color:#f9f9f9; } .basefont { font-family:"bebas-neue-pro", sans-serif; } .text-brand { color:#0069af; } body, html { width:100%; position:relative; color:#666666; font-size:16px; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight:400; font-family:"bebas-neue-pro", sans-serif; } a { color:#323232; } a:hover { color:#666666; } .test { border:1px solid red; } .offcanvas { transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; } #header { background-color:#0069af; border-bottom:7px solid white; z-index:2; position:relative; height:131px; } #header .logoCol { display:flex; justify-content:center; align-items:center; } #header .navCol { display:flex; justify-content:end; align-items:end; } #header .logo_name { display:none; } #header .logo { align-self:flex-start; width:186px; aspect-ratio:1; margin-top:35px; position:absolute; left:0; } #header .slogan { margin-left:185px; align-self:end; color:white; font-size:1.5rem; font-family:"bebas-neue-pro", sans-serif; bottom:0; margin-bottom:10px; } #header #navigation { height:calc(124px); width:auto; } .nav-menu { font-family:"bebas-neue-pro", sans-serif; } .nav-menu > li { position:relative; } .nav-menu > li > a { font-family:"bebas-neue-pro", sans-serif; font-weight:300; font-size:1.5rem; } .nav-menu > li > a:hover { color:white; font-weight:400; } .nav-menu > li.active::after { content:''; position:absolute; width:0px; height:0px; bottom:0; left:0; margin-left:calc(40%); -webkit-transform:rotate(360deg); border-style:solid; border-width:0 9px 7px 9px; border-color:transparent transparent white transparent; } .nav-menu .megamenu-lists li.last { margin-bottom:15px; } .nav-menu .megamenu-lists li a { font-weight:300; padding-left:15px; } .nav-menu .megamenu-lists li.megamenu-list-title, .nav-menu .megamenu-lists li.megamenu-list-title > a { font-size:17px; font-weight:300; color:#0069af; } .nav-menu .megamenu-lists li.megamenu-list-title > a { color:#0069af; } .nav-menu .megamenu-lists li.megamenu-list-title > a:hover { color:#ffffff; background-color:#0069af; } .nav-menu .megamenu-lists li:not(.megamenu-list-title) > a:hover { color:#ffffff; background-color:#0069af; } .nav-menu > li > .nav-dropdown { box-shadow:0 6px 12px rgba(0,0,0,0.1176); -moz-box-shadow:0 6px 12px rgba(0,0,0,0.1176); -webkit-box-shadow:0 6px 12px rgba(0,0,0,0.1176); } .saftyline { background-image:url(/assets/images/saftey_line.gif); background-repeat:repeat-x; height:50px; border-top:5px solid #f9f9f9; border-bottom:5px solid #f9f9f9; -moz-transform:scaleX(-1); -o-transform:scaleX(-1); -webkit-transform:scaleX(-1); transform:scaleX(-1); filter:FlipH; -ms-filter:"FlipH"; } .saftyline.borderLess { border-top:0; border-bottom:0; } footer { background-color:#f9f9f9; font-size:14px; color:white; } .section { padding:80px 0; } .section:nth-child(even) { background-color:#f9f9f9; } .section:nth-child(odd) { background-color:white; } .section-blank { padding:80px 0; } .benefit { display:flex; flex-direction:column; align-items:center; text-align:center; } .icon-brand { width:50px; height:50px; aspect-ratio:1; } .icon-circle { width:100px; aspect-ratio:1; border-radius:100%; background-color:#f3f3f3; display:flex; justify-content:center; align-items:center; } .section-block { aspect-ratio:1; } footer > .bg-darkgray > .container, footer > .bg-brand > .container { padding-right:180px; } .logo_element { position:absolute; right:0; bottom:0; width:250px; aspect-ratio:1; background-size:cover; } .home .section:nth-child(odd) .content-col, .schuettgut-sortiment .section:nth-child(odd) .content-col, .lieferung .section:nth-child(odd) .content-col, .kontakt .section:nth-child(odd) .content-col, .frischer-beton .section:nth-child(odd) .content-col { order:1; } .home .section:nth-child(odd) .image-col, .schuettgut-sortiment .section:nth-child(odd) .image-col, .lieferung .section:nth-child(odd) .image-col, .kontakt .section:nth-child(odd) .image-col, .frischer-beton .section:nth-child(odd) .image-col { order:2; } .home .section:nth-child(even) .content-col, .schuettgut-sortiment .section:nth-child(even) .content-col, .lieferung .section:nth-child(even) .content-col, .kontakt .section:nth-child(even) .content-col, .frischer-beton .section:nth-child(even) .content-col { order:2; } .home .section:nth-child(even) .image-col, .schuettgut-sortiment .section:nth-child(even) .image-col, .lieferung .section:nth-child(even) .image-col, .kontakt .section:nth-child(even) .image-col, .frischer-beton .section:nth-child(even) .image-col { order:1; } .list { list-style-type:square; } .list li { margin-bottom:15px; } .list li::marker { color:#0069af; } ul.productList { list-style-type:none; padding-left:0; } ul.productList li { border:1px solid #cecece; margin-bottom:15px; } .hero-container { padding:80px 0; } .hero-container .h1 { font-size:90px; line-height:90px; } .hero-container .h4 { font-size:30px; line-height:30px; } .hero-home, .hero-fahrzeuge, .hero-sortiment, .hero-beton, .hero-kontakt, .hero-base { background-position:center center; background-size:cover; width:100%; aspect-ratio:2.3333333333333; display:flex; justify-content:center; align-items:center; } .home-section-products { background-size:cover; background-position:right center; background-repeat:no-repeat; } .home-section-betontankstelle { background-size:cover; background-position:right center; background-repeat:no-repeat; background-position:center center; } .section-sortiment-sand, section-sortiment-kies, .section-sortiment-splitt, .section-sortiment-kalkstein, .section-sortiment-sonstiges, .section-fahrzeuge-zweiachser, .section-fahrzeuge-dreiachser, .section-fahrzeuge-liefergebiet, .section-fahrzeuge-anfahrt, .section-fahrzeuge-radlader, .section-beton-vonoben { background-size:cover; background-position:right center; background-repeat:no-repeat; background-position:center center; } .icon-sm { width:25px; aspect-ratio:1; } .icon-md { width:25px; aspect-ratio:1; width:50px; } .icon-lg { width:25px; aspect-ratio:1; width:100px; } .icon-xl { width:25px; aspect-ratio:1; width:150px; } .icon-2xl { width:25px; aspect-ratio:1; width:200px; } .no-webp .logo_element { background-image:url('/assets/images/logo_part_bottom.png'); } .no-webp .hero-home { background-image:url(/assets/images/hero-background.jpg); } .no-webp .hero-fahrzeuge { background-image:url(/assets/images/hero-lkw.jpg); } .no-webp .hero-sortiment { background-image:url(/assets/images/hero-sortiment.jpg); } .no-webp .hero-beton { background-image:url(/assets/images/hero-beton.jpg); } .no-webp .hero-kontakt { background-image:url(/assets/images/hero-kontakt.jpg); } .no-webp .hero-sand { background-image:url(/assets/images/hero-sand.jpg); } .no-webp .hero-kies { background-image:url(/assets/images/hero-kies.jpg); } .no-webp .hero-kalkstein { background-image:url(/assets/images/hero-kalkstein.jpg); } .no-webp .hero-sonstiges { background-image:url(/assets/images/hero-sonstiges.jpg); } .no-webp .home-section-products { background-image:url('/assets/images/drone_topview.jpg'); } .no-webp .home-section-betontankstelle { background-image:url('/assets/images/betontankstelle.jpg'); } .no-webp .section-sortiment-sand { background-image:url('/assets/images/bg_sand.jpg'); } .no-webp .section-sortiment-kies { background-image:url('/assets/images/bg_kies.jpg'); } .no-webp .section-sortiment-splitt { background-image:url('/assets/images/kies_1.jpg'); } .no-webp .section-sortiment-kalkstein { background-image:url('/assets/images/bg_kalkstein.jpg'); } .no-webp .section-sortiment-sonstiges { background-image:url('/assets/images/bg_sonstiges.jpg'); } .no-webp .section-fahrzeuge-zweiachser { background-image:url('/assets/images/lkw_zweiachser.jpg'); } .no-webp .section-fahrzeuge-dreiachser { background-image:url('/assets/images/lkw_dreiachser.jpg'); } .no-webp .section-fahrzeuge-liefergebiet { background-image:url('/assets/images/liefergebiet.jpg'); } .no-webp .section-fahrzeuge-radlader { background-image:url('/assets/images/radlader.jpg'); } .no-webp .section-beton-vonoben { background-image:url('/assets/images/betontankstelle_vonoben.jpg'); } .no-webp .section-fahrzeuge-anfahrt { background-image:url('/assets/images/anfahrtsskizze.jpg'); } .webp .logo_element { background-image:url('/assets/images/logo_part_bottom.webp'); } .webp .hero-home { background-image:url(/assets/images/hero-background.webp); } .webp .hero-fahrzeuge { background-image:url(/assets/images/hero-lkw.webp); } .webp .hero-sortiment { background-image:url(/assets/images/hero-sortiment.webp); } .webp .hero-beton { background-image:url(/assets/images/hero-beton.webp); } .webp .hero-kontakt { background-image:url(/assets/images/hero-kontakt.webp); } .webp .hero-sand { background-image:url(/assets/images/hero-sand.webp); } .webp .hero-kies { background-image:url(/assets/images/hero-kies.webp); } .webp .hero-kalkstein { background-image:url(/assets/images/hero-kalkstein.webp); } .webp .hero-sonstiges { background-image:url(/assets/images/hero-sonstiges.webp); } .webp .home-section-products { background-image:url('/assets/images/drone_topview.webp'); } .webp .home-section-betontankstelle { background-image:url('/assets/images/betontankstelle.webp'); } .webp .section-sortiment-sand { background-image:url('/assets/images/bg_sand.webp'); } .webp .section-sortiment-kies { background-image:url('/assets/images/bg_kies.webp'); } .webp .section-sortiment-splitt { background-image:url('/assets/images/kies_1.webp'); } .webp .section-sortiment-kalkstein { background-image:url('/assets/images/bg_kalkstein.webp'); } .webp .section-sortiment-sonstiges { background-image:url('/assets/images/bg_sonstiges.webp'); } .webp .section-fahrzeuge-zweiachser { background-image:url('/assets/images/lkw_zweiachser.webp'); } .webp .section-fahrzeuge-liefergebiet { background-image:url('/assets/images/liefergebiet.webp'); } .webp .section-fahrzeuge-dreiachser { background-image:url('/assets/images/lkw_dreiachser.webp'); } .webp .section-fahrzeuge-radlader { background-image:url('/assets/images/radlader.webp'); } .webp .section-beton-vonoben { background-image:url('/assets/images/betontankstelle_vonoben.webp'); } .webp .section-fahrzeuge-anfahrt { background-image:url('/assets/images/anfahrtsskizze.webp'); } @media only screen and (min-width:768px) and (max-width:1023px) { .p-5 {  padding:1rem !important; } .p-6 {  padding:1.25rem !important; } .p-7 {  padding:1.50rem !important; } .p-8 {  padding:2rem !important; } .navToggle {  display:block; } .navToggle img {  width:30px;  aspect-ratio:1; } footer > .bg-darkgray > .container, footer > .bg-brand > .container {  padding-right:calc(var(--bs-gutter-x)* .5); } .logo_element {  display:none; } #offcanvasNavigation.offcanvas-end {  width:90%;  background-color:#0069af; } #offcanvasNavigation ul {  list-style-type:none;  padding:0; } #offcanvasNavigation ul li {  text-align:center; } #offcanvasNavigation ul li a {  color:white;  text-decoration:none;  display:block;  padding:10px 0;  font-size:40px;  font-family:"bebas-neue-pro", sans-serif; } #offcanvasNavigation ul li.active a {  font-weight:bold; } #offcanvasNavigation .offcanvas-body {  padding:0; } #offcanvasNavigation .offcanvas-body .saftyline {  border:0;  width:100%;  height:40px; } #header {  height:auto;  padding:10px 0; } #header .logoCol {  display:flex;  justify-content:center;  align-items:center; } #header .navCol {  display:flex;  justify-content:end;  align-items:center; } #header .slogan {  display:none; } #header .logo_name {  display:block;  color:white;  font-family:"bebas-neue-pro", sans-serif;  text-decoration:none;  font-size:29px;  margin-left:10px; } #header .logo {  position:relative;  width:50px;  margin-top:0; } .hero-container {  padding-bottom:50px;  padding-top:50px;  text-align:center; } .productTable {  display:block; } .productTable tbody {  display:block;  width:100%; } .productTable .p-2, .productTable p-3 {  padding:0 !important; } .productTable tr {  display:block;  width:100%; } .productTable tr td:nth-child(1) {  display:block;  width:100%;  font-weight:bold; } .productTable tr td:nth-child(2) {  display:block;  width:100%; } .productTable tr td:nth-child(2) table {  width:100%;  display:block; } .productTable tr td:nth-child(2) table tr {  display:flex; } .productTable tr td:nth-child(2) table tr td:nth-child(1) {  order:2;  flex:3;  font-weight:normal; } .productTable tr td:nth-child(2) table tr td:nth-child(2) {  order:1;  flex:1; } .productTable tr td:nth-child(2) table tr td:nth-child(3) {  order:3;  flex:3; } .productTable thead {  display:block;  width:100%; } .productTable thead tr {  display:flex;  width:100%; } .productTable thead tr th:nth-child(1) {  display:none !important; } .home .section:nth-child(odd) .content-col, .schuettgut-sortiment .section:nth-child(odd) .content-col, .lieferung .section:nth-child(odd) .content-col, .frischer-beton .section:nth-child(odd) .content-col {  order:1;  flex:2; } .home .section:nth-child(odd) .image-col, .schuettgut-sortiment .section:nth-child(odd) .image-col, .lieferung .section:nth-child(odd) .image-col, .frischer-beton .section:nth-child(odd) .image-col {  order:2;  flex:1; } .home .section:nth-child(even) .content-col, .schuettgut-sortiment .section:nth-child(even) .content-col, .lieferung .section:nth-child(even) .content-col, .frischer-beton .section:nth-child(even) .content-col {  order:1;  flex:2; } .home .section:nth-child(even) .image-col, .schuettgut-sortiment .section:nth-child(even) .image-col, .lieferung .section:nth-child(even) .image-col, .frischer-beton .section:nth-child(even) .image-col {  order:2;  flex:1; } } @media only screen and (max-width:769px) { .p-5 {  padding:1rem !important; } .p-6 {  padding:1.25rem !important; } .p-7 {  padding:1.50rem !important; } .p-8 {  padding:2rem !important; } .navToggle {  display:block; } .navToggle img {  width:30px;  aspect-ratio:1; } footer > .bg-darkgray > .container, footer > .bg-brand > .container {  padding-right:calc(var(--bs-gutter-x)* .5); } .logo_element {  display:none; } #offcanvasNavigation.offcanvas-end {  width:90%;  background-color:#0069af; } #offcanvasNavigation ul {  list-style-type:none;  padding:0; } #offcanvasNavigation ul li {  text-align:center; } #offcanvasNavigation ul li a {  color:white;  text-decoration:none;  display:block;  padding:10px 0;  font-size:40px;  font-family:"bebas-neue-pro", sans-serif; } #offcanvasNavigation ul li.active a {  font-weight:bold; } #offcanvasNavigation .offcanvas-body {  padding:0; } #offcanvasNavigation .offcanvas-body .saftyline {  border:0;  width:100%;  height:40px; } #header {  height:auto;  padding:10px 0; } #header .logoCol {  display:flex;  justify-content:center;  align-items:center; } #header .navCol {  display:flex;  justify-content:end;  align-items:center; } #header .slogan {  display:none; } #header .logo_name {  display:block;  color:white;  font-family:"bebas-neue-pro", sans-serif;  text-decoration:none;  font-size:29px;  margin-left:10px; } #header .logo {  position:relative;  width:50px;  margin-top:0; } .hero-container {  padding-bottom:50px;  padding-top:50px;  text-align:center; } .productTable {  display:block; } .productTable tbody {  display:block;  width:100%; } .productTable .p-2, .productTable p-3 {  padding:0 !important; } .productTable tr {  display:block;  width:100%; } .productTable tr td:nth-child(1) {  display:block;  width:100%;  font-weight:bold; } .productTable tr td:nth-child(2) {  display:block;  width:100%; } .productTable tr td:nth-child(2) table {  width:100%;  display:block; } .productTable tr td:nth-child(2) table tr {  display:flex; } .productTable tr td:nth-child(2) table tr td:nth-child(1) {  order:2;  flex:3;  font-weight:normal; } .productTable tr td:nth-child(2) table tr td:nth-child(2) {  order:1;  flex:1; } .productTable tr td:nth-child(2) table tr td:nth-child(3) {  order:3;  flex:3; } .productTable thead {  display:block;  width:100%; } .productTable thead tr {  display:flex;  width:100%; } .productTable thead tr th:nth-child(1) {  display:none !important; } .home .section:nth-child(odd) .content-col, .schuettgut-sortiment .section:nth-child(odd) .content-col, .lieferung .section:nth-child(odd) .content-col, .frischer-beton .section:nth-child(odd) .content-col {  order:2; } .home .section:nth-child(odd) .image-col, .schuettgut-sortiment .section:nth-child(odd) .image-col, .lieferung .section:nth-child(odd) .image-col, .frischer-beton .section:nth-child(odd) .image-col {  order:1; } .home .section:nth-child(even) .content-col, .schuettgut-sortiment .section:nth-child(even) .content-col, .lieferung .section:nth-child(even) .content-col, .frischer-beton .section:nth-child(even) .content-col {  order:2; } .home .section:nth-child(even) .image-col, .schuettgut-sortiment .section:nth-child(even) .image-col, .lieferung .section:nth-child(even) .image-col, .frischer-beton .section:nth-child(even) .image-col {  order:1; } }