a {
text-decoration: none;
}
body {
background-image: url(./back_ground_n.jpg);
background-position: left top;
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
}
p {
font-size: 1rem;
font-weight: 300;
}
.image-caption{
font-size: 1.5rem;
font-weight: 400;
}
#holi_navbar .nav-item .nav-link{
font-size: 1.7rem;
}
#holi_navbar .nav-item.active .nav-link{
font-weight:600;
  color:rgba(var(--bs-success-rgb),var(--bs-text-opacity)) !important;
}

h1.display-7{
color: #0d6efd;
}
#sponsoren a img{
max-height:70px;
padding-top:1rem;
}
#kontakt_formular-7 .btn-toolbar .btn-primary{
margin:1rem;
}
#footer .nav-link{
color: #fff;
}
#footer .nav-item.active .nav-link{
font-weight:700;
text-decoration: underline;
}
#footer {
background: #506071;
color: #fff;
text-align: center;
}
#footer p {
margin-bottom: 0rem;
}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
padding: 15px 0;
margin-top: .5rem !important;
margin-bottom: .5rem !important;
background-color:#798b99;
min-height: 40px;
color: #fff;
}

.breadcrumbs h2 {
font-size: 24px;
font-weight: 300;
}

.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
}

.breadcrumbs ol li + li {
padding-left: 10px;
}

.breadcrumbs ol li + li::before {
display: inline-block;
padding-right: 10px;
color: #6c757d;
content: "/";
}

@media (max-width: 768px) {
.breadcrumbs .d-flex {
display: block !important;
}
.breadcrumbs ol {
display: block;
}
.breadcrumbs ol li {
display: inline-block;
}
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
position: fixed;
inset: 0;
z-index: 999999;
overflow: hidden;
background: var(--background-color);
transition: all 0.6s ease-out;
}

#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #ffffff;
border-color: var(--accent-color) transparent var(--accent-color) transparent;
border-radius: 50%;
width: 60px;
height: 60px;
animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 99999;
background-color: var(--accent-color);
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}

.scroll-top i {
font-size: 24px;
color: var(--contrast-color);
line-height: 0;
}

.scroll-top:hover {
background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
color: var(--contrast-color);
}

.scroll-top.active {
visibility: visible;
opacity: 1;
}

/*--#Swiper#---*/
.clients .swiper-slide img {
  opacity: 0.7;
  transition: 0.3s;
}

.clients .swiper-slide:hover img {
  opacity: 1;
}

.clients .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #0880e8;
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #0880e8;
}
.breadcrumb-item a{
  color:#fff;
}
/*animation*/
.my-element_left_1 {
  animation: fadeInLeftBig; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}
.my-element_left_2 {
  animation: fadeInLeftBig; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 3s; /* don't forget to set a duration! */
}
.my-element_left_3 {
  animation: fadeInLeftBig; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 4s; /* don't forget to set a duration! */
}
.my-element_right_1 {
  animation: fadeInRightBig; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}
.my-element_right_2 {
  animation: fadeInRightBig; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 3s; /* don't forget to set a duration! */
}
.my-element_right_3 {
  animation: fadeInRightBig; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 4s; /* don't forget to set a duration! */
}