/**
* Block Name: teaser_slider
*/

section.teaser_slider .bg_img {
  background-color: rgba(29, 29, 29, 0.77);
}
section.teaser_slider .bg_img > img {
  z-index: -1;
}

section.teaser_slider .swiper-container {
  height: 500px;
  padding-left: 1px;
  padding-right: 1px;
}

section.teaser_slider .swiper-slide a {
  position: relative;
  padding-top: 50px;
  height: 100%;
  width: 100%;
  /* -webkit-margin-before: 0;
      margin-block-start: 0;
      -webkit-margin-after: 0;
      margin-block-end: 0; */
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
  -webkit-transform: scaleX(-1) scaleY(-1);
  -ms-transform: scaleX(-1) scaleY(-1);
  transform: scaleX(-1) scaleY(-1);
  margin-bottom: 0;
}

section.teaser_slider .swiper-slide a:before,
section.teaser_slider .swiper-slide a:after {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0px;
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 47.59%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), color-stop(47.59%, rgba(255, 255, 255, 0)));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 47.59%);
}

section.teaser_slider .swiper-slide a:before {
  right: -1px;
}
section.teaser_slider .swiper-slide a:after {
  left: -1px;
}
section.teaser_slider .swiper-slide a:hover::before {
  background-image: -o-linear-gradient(top, rgba(230, 136, 48, 0.3) 0%, rgba(230, 136, 48, 0) 47.59%);
  background-image: -o-linear-gradient(top, rgba(230, 136, 48, 1) 0%, rgba(230, 136, 48, 0) 47.59%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(230, 136, 48, 1)), color-stop(47.59%, rgba(230, 136, 48, 0)));
  background-image: linear-gradient(to bottom, rgba(230, 136, 48, 1) 0%, rgba(230, 136, 48, 0) 47.59%);
  z-index: 10;
}

section.teaser_slider .swiper-slide a .round {
  position: absolute;
  width: 30px;
  height: 30px;
  left: calc(50% - 15px);
  bottom: 50px;
  background-color: transparent;
  border-radius: 40px;
  border: 1px solid #fff;
}
section.teaser_slider .swiper-slide a:hover .round {
  background-color: #e68830;
  -webkit-box-shadow: 0px 0px 2px 0px #000000, -3px -3px 4px 0px rgba(0, 0, 0, 0.5),
    -8px -8px 20px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 0px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 2px 0px #000000, -3px -3px 4px 0px rgba(0, 0, 0, 0.5), -8px -8px 20px 0px rgba(0, 0, 0, 0.5),
    inset 0px 0px 0px 0px rgba(0, 0, 0, 0.6);
}
section.teaser_slider .swiper-slide a:active .round,
section.teaser_slider .swiper-slide a:focus .round {
  -webkit-box-shadow: 0px 0px 0px 0px #000000, 0px 0px 0px 0px rgba(0, 0, 0, 0.5), 0px 0px 0px 0px rgba(0, 0, 0, 0.5),
    inset -3px -3px 5px -1px rgb(0 0 0 / 60%);
  box-shadow: 0px 0px 0px 0px #000000, 0px 0px 0px 0px rgba(0, 0, 0, 0.5), 0px 0px 0px 0px rgba(0, 0, 0, 0.5),
    inset -3px -3px 5px -1px rgb(0 0 0 / 60%);
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

section.teaser_slider .swiper-slide a:hover {
  background-color: rgba(158, 87, 20, 0.4);
  -webkit-backdrop-filter: brightness(2) contrast(1.5) saturate(0.5);
  backdrop-filter: brightness(2) contrast(1.5) saturate(0.5);
}

section.teaser_slider .swiper-button-prev,
section.teaser_slider .swiper-button-next {
  width: 50px;
  height: 50px;
  border-radius: 40px;
  background-color: #000000;
  -webkit-box-shadow: 0px 0px 0px 0px #000000, 0px 0px 0px 0px rgba(0, 0, 0, 0.5), 0px 0px 0px 0px rgba(0, 0, 0, 0.5),
    inset 0px 0px 0px rgba(255, 255, 255, 0.05), inset 0px 0px 0px rgba(0, 0, 0, 0.75) !important;
  box-shadow: 0px 0px 0px 0px #000000, 0px 0px 0px 0px rgba(0, 0, 0, 0.5), 0px 0px 0px 0px rgba(0, 0, 0, 0.5),
    inset 0px 0px 0px rgba(255, 255, 255, 0.05), inset 0px 0px 0px rgba(0, 0, 0, 0.75) !important;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  top: 40px;
  margin-top: 0;
}
section.teaser_slider .swiper-button-prev:hover,
section.teaser_slider .swiper-button-next:hover {
  -webkit-box-shadow: 0px 0px 2px 0px #000000, 3px 3px 4px 0px rgba(0, 0, 0, 0.5), 8px 8px 20px 0px rgba(0, 0, 0, 0.5),
    inset -4px -4px 5px rgba(255, 255, 255, 0.05), inset 4px 4px 5px rgba(0, 0, 0, 0.75) !important;
  box-shadow: 0px 0px 2px 0px #000000, 3px 3px 4px 0px rgba(0, 0, 0, 0.5), 8px 8px 20px 0px rgba(0, 0, 0, 0.5),
    inset -4px -4px 5px rgba(255, 255, 255, 0.1), inset 4px 4px 5px rgba(0, 0, 0, 0.75) !important;
}
section.teaser_slider .swiper-button-prev:active,
section.teaser_slider .swiper-button-next:active {
  background-color: #222220;
  -webkit-box-shadow: 0px 0px 2px 0px #000000, 3px 3px 4px 0px rgba(0, 0, 0, 0.5), 8px 8px 20px 0px rgba(0, 0, 0, 0.5),
    inset 0px 0px 0px rgba(255, 255, 255, 0.05), inset 0px 0px 0px rgba(0, 0, 0, 0.75) !important;
  box-shadow: 0px 0px 2px 0px #000000, 3px 3px 4px 0px rgba(0, 0, 0, 0.5), 8px 8px 20px 0px rgba(0, 0, 0, 0.5),
    inset 0px 0px 0px rgba(255, 255, 255, 0.05), inset 0px 0px 0px rgba(0, 0, 0, 0.75) !important;
}

section.teaser_slider .swiper-button-prev:after,
section.teaser_slider .swiper-button-next:after {
  font-family: "Material Icons";
  content: "";
  background-image: 0;
  color: #fff;
  font-size: 30px;
  position: absolute;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
section.teaser_slider .swiper-button-prev:after {
  content: "\f1e6";
}
section.teaser_slider .swiper-button-next:after {
  content: "\f1df";
}

section.teaser_slider .swiper-button-prev:hover::after,
section.teaser_slider .swiper-button-next:hover::after {
  color: #e68830;
}

@media (min-width: 768px) {
  section.teaser_slider .swiper-container {
    height: 550px;
  }
}
@media (min-width: 1460px) {
  section.teaser_slider .swiper-container {
    height: 660px;
  }
}