/***************** Variablen *************************/
:root {
  --dl-c1: #a60a33/*Weinrot*/;
  --dl-c2: #808080/*Grau*/;
}

.sppb-row-container {
  max-width: 1320px;
}

@media (min-width: 576px) {
  .sppb-row-container {
    width: 540px;
  }
}
@media (min-width: 768px) {
  .sppb-row-container {
    width: 720px;
  }
}
@media (min-width: 992px) {
  .sppb-row-container {
    width: 960px;
  }
}
@media (min-width: 1200px) {
  .sppb-row-container {
    width: 1140px;
  }
}
@media (min-width: 1400px) {
  .sppb-row-container {
    width: 1320px;
  }
}

/***************** Header, Menü, Offcanvas-Toggler *********************/
#sp-header {
  box-shadow: unset;
  background-color: rgba(255,255,255,0);
  padding: 0 2.5vw;
}

#sp-header a:not(a:hover) {
  color: #fff;
}

.sp-megamenu-parent {
  margin: 0;
}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li span {
  padding: 0 15px;
}

.sp-megamenu-parent > li:last-child > a {
  padding-left: 15px !important;
}

.sp-megamenu-parent > li > a:hover, .sp-megamenu-parent > li.active:hover > a {
  color: var(--dl-c2);
}

@media (max-width: 575.98px) {
  #sp-header {
    padding: 0 5vw;
  }
}

@media (max-width: 389.98px) {
  #sp-logo .logo {
    display: none;
  }
}

/************************* Offcanvas ***************************/
.offcanvas-overlay {
  background: rgba(166, 10, 51, 0.43);
}

.offcanvas-menu .offcanvas-inner ul.menu > li > a {
  opacity: 1;
  text-transform: uppercase;
  padding: 15px 0;
}

.offcanvas-menu .offcanvas-inner ul.menu > li > a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li > a:focus {
  color: var(--dl-c1);
}

.offcanvas-menu .offcanvas-inner ul.menu > li.active > a {
  opacity: 0.7;
}

/*************** Elemente, Funktion, Abstände ***********************/
@media (max-width: 767.98px) {
  .dl-trennung {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

p:last-child, ul li:last-child {
  margin-bottom: 0;
}

/************************ Elemente, Design ******************************/
a:hover {
  transition: ease-in-out 0.35s;
  color: var(--dl-c2);
}

.dl-sec-dark .dl-img img {
  box-shadow: 0px 0px 5px 2px rgba(255,255,255,.7);
}

.dl-sec-bright .dl-img img {
  box-shadow: 0px 0px 5px 2px rgba(128,128,128,.7);
}

/*Home*/.page-1 .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon), #dl-home-vorteile .sppb-addon-text-block, #dl-firma-referenzen .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon) {
  width: 500px;
  margin: 0 auto;
}

.sppb-btn {
  width: 250px;
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: var(--dl-c2);
  color: #fff;
  font-weight: 400;
  font-size: unset;
  text-transform: uppercase;
  -webkit-hyphens: auto;
  hyphens: auto;
  border-radius: 20px;
  padding: 12px 0;
}

.sppb-btn:hover {
  background-color: #fff;
  color: var(--dl-c2);
}

#dl-404-hero .sppb-btn {
  margin: 0 auto;
}

.sp-scroll-up {
  bottom: 30px; right: 30px;
  content: url(/images/dachdecker-maik-lamm-icon-white-angle-double-up.svg);
  width: 80px; height: 80px;
  padding: 20px;
}

.sp-scroll-up:hover {
  background: var(--dl-c2);
}

@media (max-width: 1399.98px) {
  /*Home*/.page-1 .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon), .page-1 #dl-home-vorteile .sppb-addon-text-block, #dl-firma-referenzen .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon) {
    width: 480px;
  }
}

@media (max-width: 1199.98px) {
  /*Home*/.page-1 .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon), .page-1 #dl-home-vorteile .sppb-addon-text-block, #dl-firma-referenzen .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon) {
    width: 410px;
  }
}

@media (max-width: 991.98px) {
  /*Home*/.page-1 .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon), #dl-firma-referenzen .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon) {
    width: 330px;
  }
  /*Home*/.page-1 #dl-home-vorteile .sppb-addon-text-block, #dl-firma-referenzen .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon) {
    width: 315px;
  }
}

@media (max-width: 767.98px) {
  /*Home*/.page-1 .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon), .page-1 #dl-home-vorteile .sppb-addon-text-block, #dl-firma-referenzen .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon) {
    width: 450px;
  }
}

@media (max-width: 575.98px) {
  /*Home*/.page-1 .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon), .page-1 #dl-home-vorteile .sppb-addon-text-block, #dl-firma-referenzen .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon) {
    width: 360px;
  }
}

@media (max-width: 399.98px) {
  /*Home*/.page-1 .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon), .page-1 #dl-home-vorteile .sppb-addon-text-block, #dl-firma-referenzen .sppb-addon-single-image:not(.sppb-addon-single-image.dl-icon) {
    width: 260px;
  }
}

/*************** Formulare ***********************/
.sppb-addon-form-builder .sppb-form-check, .sppb-addon-form-builder .sppb-form-check-label {
  max-width: 99%;
}

.sppb-addon-form-builder .sppb-form-check-label {
  margin-left: 15px;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.sppb-addon-form-builder .sppb-form-check-label:before, .form-builder-checkbox-item label::before {
  border: 2px solid #fff;
  border-radius: 30% !important;
}

.form-builder-checkbox-item label::after, .sppb-addon-form-builder .sppb-form-check-label::after {
  color: var(--dl-c2);
}

.form-builder-checkbox-item label::before, .form-builder-checkbox-item label::after {
  margin-top: 4px;
}

.form-builder-checkbox-item label {
  margin-left: 32px;
}

.form-builder-checkbox-item, .sppb-form-check .sppb-form-check-label {
  line-height: 1.2;
}

.sppb-form-control {
  margin-bottom: 20px;
}

.sppb-ajax-contact-status {
  margin: 50px auto 20px 30px !important;
}

.sppb-text-success, .sppb-text-danger {
  font-weight: 400 !important;
  font-style: normal;
  color: #fff !important;
}

@media (max-width: 575.98px) {
  .sppb-form-group {
	margin-bottom: 0px;
  }
  .form-builder-checkbox-item {
    margin: 20px 0;
  }
  input#captcha-BZXyJ9_6AO0cDCcXUe3uB.sppb-form-control::placeholder {
    color: transparent !important;
  }
}

/************** Slider ****************/
.sp-slider .sp-nav-control .nav-control {
  background: unset !important;
}

.sp-slider .next-control i, .sp-slider .prev-control i  {
  height: 30px;
  vertical-align: middle;
}

.sp-slider .next-control i  {
  content: url(/images/dachdecker-maik-lamm-icon-white-angle-double-right.svg);
}

.sp-slider .prev-control i {
  content: url(/images/dachdecker-maik-lamm-icon-white-angle-double-left.svg);
}

@media (max-width: 767px) {
  .sp-slider .sp-nav-control {
    top: 50% !important;
  }
} 

@media (max-width: 399px) {
  .sp-slider .sp-nav-control {
    display: none;
  }
}

/*************** Sections, Größen und Abstände ********************/
#sp-main-body {
  margin-top: -80px;
}

.dl-sec-hero, .dl-col-hero, .sp-slider-outer-stage {
  height: calc(100vh + 80px);
  min-height: 740px;
}

#dl-home-hero-inhalt {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dl-sec-content {
  padding: 120px 0 250px;
}

@media (max-width: 1199.98px) {
  .dl-sec-content {
    padding: 100px 0 180px;
  }
}

@media (max-width: 991.98px) {
  .dl-sec-hero, .dl-sec-bright {
	background-attachment: scroll !important;
  }
  #dl-404-hero, #dl-404-hero .dl-col-hero {
    min-height: 800px;
  }
}

@media (max-width: 575.98px) {
  .dl-sec-hero, .dl-col-hero, .sp-slider-outer-stage {
    min-height: 500px;
  }
  .dl-sec-content {
    padding: 100px 3% 180px;
  }
  #dl-404-hero, #dl-404-hero .dl-col-hero {
    min-height: 700px;
  }
}

/******************** Sections, Design ********************/
.dl-sec-dark, .dl-sec-dark a:not(a:hover), #sp-footer a:not(a:hover) {
  color: #fff;
}

.dl-sec-bright, .dl-sec-bright a {
  color: var(--dl-c2);
}

.dl-sec-bright a:hover {
  color: var(--dl-c1);
}

#sp-footer {
  background: var(--dl-c2);
}

#sp-footer a:hover {
  color: var(--dl-c1);
}

/**************** Fonts ********************/
/* lato-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../local-fonts/lato-v24-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../local-fonts/lato-v24-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../local-fonts/lato-v24-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../local-fonts/lato-v24-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* lato-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../local-fonts/lato-v24-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../local-fonts/lato-v24-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

body, p, .sp-megamenu-parent > li > a, h1, h2, h3 {
  font-family: 'Lato', sans-serif !important;
}

#sp-header a, #sp-header .logo a {
  font-size: 1rem;
  text-transform: uppercase;
}

h1, h2, h3, #dl-home-intro {
  text-transform: uppercase;
}

#dl-home-hero h1 {
  font-size: 6rem;
}

#dl-home-intro p {
  font-size: 2.4rem;
  font-weight: 700;
}

#dl-ds-ds h3 {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

#dl-ds-ds .ds-zwischen-hl-klein {
  font-size: 1.5rem;
  font-weight: bolder;
  margin-top: 2rem;
}

#dl-ds-ds .ds-hervorhebung {
  margin-top: 2rem;
}

#sp-footer {
  font-size: unset;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  h3 {
    font-size: 2.25rem !important;
  }
}

@media (max-width: 991.98px) {
  #dl-home-hero h1 {
    font-size: 4.8rem;
  }
  #dl-home-intro p {
    font-size: 2rem;
  }
}

@media (max-width: 767.98px) {
  h1 {
    font-size: 3.75rem !important;
  }
}

@media (max-width: 399.98px) {
  body {
    font-size: 1.2rem !important;
  }
  #dl-home-intro p {
    font-size: 1.6rem;
  }
  h1 {
    font-size: 2.8rem !important;
  }
  h2 {
    font-size: 2.4rem !important;
  }
  h3 {
    font-size: 1.75rem !important;
  }
}

@media (max-width: 349.98px) {
  h1  {
    font-size: 2.5rem !important;
  }
}