:root {
  font-size: 20px;
  --bs-body-font-family: 'Open Sans';
  --bs-body-font-size: 0.8rem;
  --bg-korrektur: 0px; 
}

.body {
  font-size: 20px;
  color: #ffffff !important;
}

/* galada-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Galada';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/galada-v18-latin-regular.woff2') format('woff2'),
       url('../fonts/galada-v18-latin-regular.ttf') format('truetype');
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'),
       url('../fonts/open-sans-v40-latin-regular.ttf') format('truetype'); 
}

.sp-megamenu-parent > li > a {
  font-family: 'Galada';
  font-size: 1.5rem;
}

.menu.nav-pills > li > a {
  font-family: 'Galada';
  font-size: 1.2rem;
}

.sp-contact-info > li > a:hover {
  color: #aa0000 !important;
}

@keyframes bg_slide {
	 0%    { background-position-x: calc(   0px + var(--bg-korrektur));}
	25%    { background-position-x: calc(   0px + var(--bg-korrektur));}
    26%    { background-position-x: calc(2000px + var(--bg-korrektur));}
	50%    { background-position-x: calc(2000px + var(--bg-korrektur));}
    51%    { background-position-x: calc(4000px + var(--bg-korrektur));}
	75%    { background-position-x: calc(4000px + var(--bg-korrektur));}
    76%    { background-position-x: calc(6000px + var(--bg-korrektur));}
    99%    { background-position-x: calc(6000px + var(--bg-korrektur));}
}

@keyframes img_zoom {
    0%   { transform: scale(0.5); }
   10%   { transform: scale(0.5); }
  100%   { transform: scale(1); }
}

.logo_gross {
  content:url(https://150-jahre.feuerwehr-rottendorf.de/images/logo_gross_hp.png);
  animation-name: img_zoom;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

html::before {
  content: ' ';
  display: block;
  /* hier den Pfad zu deinem Hintergrundbild einsetzen */
  background-image: url(https://150-jahre.feuerwehr-rottendorf.de/images/bg_slider.webp);
  top: 0; bottom: 0; left: 0; right: 0;
  background-position-y: center;
  position: fixed;
  z-index: -10; /* Das hier ist sehr wichtig! */
  animation-name: bg_slide; 
  animation-duration: 60s; 
  animation-iteration-count: infinite;
}

#sp-header {
  height: inherit !important;
  
}

#sp-footer {
  background-color: rgba(255, 255, 255, 0) !important; 
}

#sp-main-body {
  padding: 50px 0 !important;
}

.full-header {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

.offcanvas-menu {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

.offcanvas-menu .offcanvas-inner ul.menu > li > a {
  font-size: 1.2rem !important;
}


.special-container {
    width: 100%;
    text-align: center;
}

.special-container-logos {
    display: flex;
    justify-content: center;
    align-items: center;
}


.col-4 {
    position: relative;
    min-height: 1px;
    padding-right: calc(5rem * .5);
    padding-left: calc(5rem * .5);
    width: auto !important;
}

.col-1 {
  width: auto;
}

.col-2 {
   width: auto; 
}

.col-8 {
   width: auto; 
}

@media (max-width: 460px) {
  .logo_gross {
    content:url(https://150-jahre.feuerwehr-rottendorf.de/images/logo_gross_hf.png);
  }
}

@media (max-width: 930px) {
  :root {
    --bg-korrektur: -800px;
  }
}

@media (min-width: 720px) {
  .special-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .col-4 {
    -webkit-box-flex: 0;
  }

  .col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
}

h2 {
  font-family: 'Galada';
  font-size: 2.75rem;
  color: white;
  text-shadow: #000000 0.1em 0.1em 0.2em;
}

h3 {
  font-family: 'Galada';
  font-size: 1.5rem;
  color: #ffffff;
}

h4 {
  font-family: 'Galada';
  font-size: 1.2rem;
  color: #ffffff;
}

h5 {
  font-family: 'Open Sans';
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}


.fab {
  font-size: 20px;
}

.fab > hover {
  color: #aa00ff;
}