/**
* Block Name: hero_klein
*/

section.hero_klein {
  max-height: 854px;
  overflow: hidden;
}

section.hero_klein .image_wrapper {
  position: relative;
  z-index: 1;
}

section.hero_klein .image_wrapper img {
  max-height: 548px;
  height: auto;
  object-fit: cover;
  width: 100%;
}

section.hero_klein .svg_container {
  position: absolute;
  bottom: -2px;
  left: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  z-index: 2;
}

section.hero_klein .svg_container svg {
  display: block;
  position: relative;
}

section.hero_klein .svg_container .triangle {
  left: 6px;
  top: 5px;
  z-index: 2;
}

section.hero_klein .svg_container .rectangle {
  shape-rendering: crispEdges;
  left: 3px;
  width: 100vw;
  height: 99px;
  z-index: 2;
  top: 5px;
}

section.hero_klein .glass-bar {
  position: absolute;
  left: 70px;
  right: 0;
  height: 98px;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.01);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  isolation: isolate;
  pointer-events: none;
  z-index: 3;
  background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.5) 55%,
      rgba(255, 255, 255, 1) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 60%,
      rgba(255, 255, 255, 1) 100%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%;
}

section.hero_klein .title_container {
  z-index: 4;
  position: relative;
  top: -43px;
}

section.hero_klein .title_container p {
  opacity: 0.6;
}

section.hero_klein .title_container .pt_10 {
  padding-top: 10px;
}

section.hero_klein .title_container .btn-primary[target="_self"]::after {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.46 5.59082V17.6696L5.66771 11.8773L4.95996 12.5908L11.96 19.5908L18.96 12.5908L18.2522 11.8773L12.46 17.6696V5.59082H11.46Z' fill='%23273347'/%3E%3C/svg%3E%0A");
}

section.hero_klein .title_container .btn-primary:hover::after {
  transform: translateY(5px);
}

@media (min-width: 1381px) {
  section.hero_klein .glass-bar {
    left: 7.5%;
    width: 155%;
  }
}
@media (min-width: 2000px) {
  section.hero_klein .glass-bar {
    left: 7%;
    width: 200%;
  }
}

@media (min-width: 3000px) {
  section.hero_klein .glass-bar {
    left: 2%;
    width: 280%;
  }
}

@media only screen and (max-width: 1199px) and (min-width: 992px) {
  section.hero_klein .svg_container .triangle {
    left: -20px;
  }

  section.hero_klein .svg_container .rectangle {
    left: -30px;
  }
}

@media (max-width: 999px) {
  section.hero_klein .svg_container .triangle {
    z-index: 2;
  }
}

@media (max-width: 992px) {
  section.hero_klein {
    max-height: none;
  }

  section.hero_klein .svg_container {
    bottom: -8px;
    left: 0;
  }

  section.hero_klein .svg_container .rectangle {
    bottom: -50px;
    width: 100vw;
  }

  section.hero_klein .svg_container .triangle {
    display: none;
  }

  section.hero_klein .title_container {
    top: -30px;
  }

  section.hero_klein .glass-bar {
    left: 0;
    width: 100vw;
    bottom: -4px;
  }
}

@media (max-width: 767px) {
  section.hero_klein .image_wrapper img {
    min-height: 250px;
  }
}