/* -------------------- Flexslider Navigationspfeile -------------------- */

#main-flexslider .flex-direction-nav {
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 0px;
  top: 0px;
  height: 90%;
  z-index: 99;
}
.flex-control-nav {
  bottom: -10%;
}
.flex-direction-nav a {
  background-color: #fff;
  width: 25px;
  height: 60px;
}
.flex-direction-nav a:before {
  color: #333;
  padding: 16px 0px;
}
.flex-direction-nav .flex-prev {
  left: 10px;
  opacity: 0;
}
#main-flexslider:hover .flex-direction-nav .flex-prev {
  left: 25px;
}
.flex-direction-nav .flex-next {
  right: 10px;
  opacity: 0;
  left: inherit;
}
#main-flexslider:hover .flex-direction-nav .flex-next {
  right: 25px;
}
@media (min-width: 992px) {
  #main-flexslider .flex-direction-nav a {
    display: block;
  }
}

/* -------------------- Flexslider Übergang -------------------- */

.bg-slider {
	background: var(--bg-slider);
	background-position: bottom;
	width: 100%;
	height: 100%;
	z-index: 9;
	position: absolute;
	background-repeat: no-repeat;
	background-size: 100%;
    bottom: -2px;
}

/* -------------------- Flexslider Logo -------------------- */

.logo-slider {
  width: 35%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  display: none !important;
  justify-content: center;
  align-content: center;
  z-index: 8;
  background: var(--logo-slider);
  border-radius: 0% 50% 50% 0%;
}
@media (min-width: 992px) {
  .logo-slider {
    display: inline-flex !important;
  }
}
.logo-slider img {
  max-width: 75%;
}

/* -------------------- Flexslider Btn Angebot -------------------- */

.btn-angebot {
  width: 20%;
  height: auto;
  right: 2rem;
  bottom: -2rem;
  z-index: 999;
  position: absolute;
  -webkit-animation: tada 2s ease;
  animation: tada 2s ease;
  animation-delay: 2s;
}
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
    transform: scale3d(.9, .9, .9) rotate(-3deg)
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
  }
}