.banner {
  overflow: hidden;
  background-size: auto 100%
}
.banner__background {
  overflow: hidden
}
.banner__image {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
@media (max-width:1600px) {
  .banner__image {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
  }
}
@media screen and (max-width:400px) {
  .banner__image {
    height: 180px
  }
  .banner__image-wrapper {
    width: 697px
  }
}
.banner__image.banner__image img {
  min-height: unset;
  display: block;
  position: absolute;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain
}
@media screen and (max-width:200px) {
  .banner__image.banner__image img {
    width: 209px;
    right: 32px
  }
}
@media screen and (min-width:200.1px) and (max-width:500px) {
  .banner__image.banner__image img {
    width: calc(209px + (100vw - 200px)/ 300 * 580)
  }
}
@media screen and (min-width:200.1px) and (max-width:500px) {
  .banner__image.banner__image img {
    right: calc(32px + (100vw - 200px)/ 300 * -32)
  }
}
@media screen and (max-width:200px) {
  .banner__image.banner__image img {
    top: -18px
  }
  .banner__text {
    padding-right: 70px
  }
}
@media screen and (min-width:200.1px) and (max-width:500px) {
  .banner__image.banner__image img {
    top: calc(-18px + (100vw - 200px)/ 300 * 18)
  }
}
@media screen and (min-width:500.1px) {
  .banner__image.banner__image img {
    width: 100%;
    right: 0;
    top: 0
  }
}
.banner__image-wrapper {
  position: absolute
}
@media screen and (min-width:400.1px) and (max-width:1024px) {
  .banner__image {
    height: calc(180px + (100vw - 400px)/ 624 * 150)
  }
  .banner__image-wrapper {
    width: calc(697px + (100vw - 400px)/ 624 * 581)
  }
}
@media screen and (min-width:1024.1px) and (max-width:1420px) {
  .banner__image {
    height: calc(330px + (100vw - 1024px)/ 396 * 100)
  }
  .banner__image-wrapper {
    width: calc(1278px + (100vw - 1024px)/ 396 * 382)
  }
}
@media screen and (min-width:1420.1px) {
  .banner__image {
    height: 430px
  }
  .banner__image-wrapper {
    width: 1660px
  }
}
@media screen and (max-width:400px) {
  .banner__image-wrapper {
    height: 234px;
    right: -33.6px
  }
}
@media screen and (min-width:400.1px) and (max-width:1024px) {
  .banner__image-wrapper {
    height: calc(234px + (100vw - 400px)/ 624 * 196)
  }
}
@media screen and (min-width:1024.1px) and (max-width:1420px) {
  .banner__image-wrapper {
    height: calc(430px + (100vw - 1024px)/ 396 * 130)
  }
}
@media screen and (min-width:1420.1px) {
  .banner__image-wrapper {
    height: 560px
  }
}
@media screen and (min-width:400.1px) and (max-width:768px) {
  .banner__image-wrapper {
    right: calc(-33.6px + (100vw - 400px)/ 368 * -16.32)
  }
}
@media screen and (min-width:768.1px) and (max-width:1024px) {
  .banner__image-wrapper {
    right: calc(-43.68px + (100vw - 768px)/ 256 * -10.22)
  }
}
@media (min-width:1660px) {
  .banner__image-wrapper::after,
  .banner__image-wrapper::before {
    content: "";
    display: block;
    width: 100px;
    height: 100%;
    z-index: 1;
    position: absolute;
    top: 0
  }
  .banner__image-wrapper::before {
    left: 0
  }
  .banner__image-wrapper::after {
    right: 0
  }
}
.banner__text {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  max-width: 1660px
}
@media screen and (max-width:500px) {
  .banner__text {
    padding-left: 20px
  }
}
@media screen and (min-width:500.1px) and (max-width:768px) {
  .banner__text {
    padding-left: 40px
  }
}
@media screen and (min-width:768.1px) and (max-width:1200px) {
  .banner__text {
    padding-left: 60px
  }
}
@media screen and (min-width:1200.1px) and (max-width:1600px) {
  .banner__text {
    padding-left: 70px
  }
}
@media screen and (min-width:200.1px) and (max-width:500px) {
  .banner__text {
    padding-right: calc(70px + (100vw - 200px)/ 300 * 137)
  }
}
@media screen and (min-width:500.1px) and (max-width:768px) {
  .banner__text {
    padding-right: calc(207px + (100vw - 500px)/ 268 * 72)
  }
}
@media screen and (min-width:768.1px) and (max-width:1024px) {
  .banner__text {
    padding-right: calc(309px + (100vw - 768px)/ 256 * 51)
  }
}
@media screen and (min-width:1024.1px) and (max-width:1200px) {
  .banner__image-wrapper {
    right: calc(-53.9px + (100vw - 1024px)/ 176 * -7)
  }
  .banner__text {
    padding-right: calc(360px + (100vw - 1024px)/ 176 * 35)
  }
}
@media screen and (min-width:1200.1px) and (max-width:1420px) {
  .banner__image-wrapper {
    right: calc(-26.1px + (100vw - 1200px)/ 220 * -3.9)
  }
  .banner__text {
    padding-right: calc(445px + (100vw - 1200px)/ 220 * 45)
  }
}
@media screen and (min-width:1420.1px) and (max-width:1600px) {
  .banner__image-wrapper {
    right: -30px
  }
  .banner__text {
    padding-right: 490px
  }
}
@media screen and (min-width:1600.1px) {
  .banner__image-wrapper {
    right: unset
  }
  .banner__text {
    padding-left: 70px;
    padding-right: 490px
  }
}
.banner__title {
  display: block;
  line-height: 1.3
}
@media screen and (max-width:50px) {
  .banner__title {
    font-size: 5px
  }
}
@media screen and (min-width:50.1px) and (max-width:200px) {
  .banner__title {
    font-size: calc(5px + (100vw - 50px)/ 150 * 7)
  }
}
@media screen and (min-width:200.1px) and (max-width:500px) {
  .banner__title {
    font-size: calc(12px + (100vw - 200px)/ 300 * 10)
  }
}
@media screen and (min-width:500.1px) and (max-width:768px) {
  .banner__title {
    font-size: calc(22px + (100vw - 500px)/ 268 * 10)
  }
}
.banner .banner__text .field-name-field-c-text p {
  margin-bottom: 0
}
@media screen and (max-width:768px) {
  .banner .banner__text .field-name-field-c-text p {
    margin-top: 8px
  }
}
@media screen and (min-width:768.1px) and (max-width:1024px) {
  .banner__title {
    font-size: calc(32px + (100vw - 768px)/ 256 * 14)
  }
  .banner .banner__text .field-name-field-c-text p {
    margin-top: calc(8px + (100vw - 768px)/ 256 * 10)
  }
}
@media screen and (min-width:1024.1px) {
  .banner__title {
    font-size: 46px
  }
  .banner .banner__text .field-name-field-c-text p {
    margin-top: 18px
  }
}
.banner .banner__text .field-name-field-c-text p,
.banner__subtitle {
  display: block;
  line-height: 1.3
}
@media screen and (max-width:50px) {
  .banner .banner__text .field-name-field-c-text p,
  .banner__subtitle {
    font-size: 3px
  }
}
@media screen and (min-width:50.1px) and (max-width:200px) {
  .banner .banner__text .field-name-field-c-text p,
  .banner__subtitle {
    font-size: calc(3px + (100vw - 50px)/ 150 * 5)
  }
}
@media screen and (min-width:200.1px) and (max-width:500px) {
  .banner .banner__text .field-name-field-c-text p,
  .banner__subtitle {
    font-size: calc(8px + (100vw - 200px)/ 300 * 6)
  }
}
@media screen and (min-width:500.1px) and (max-width:768px) {
  .banner .banner__text .field-name-field-c-text p,
  .banner__subtitle {
    font-size: calc(14px + (100vw - 500px)/ 268 * 4)
  }
}
@media screen and (max-width:768px) {
  .banner .banner__text .field-name-field-c-text p,
  .banner__subtitle {
    margin-top: 8px;
    margin-bottom: 8px
  }
}
@media screen and (min-width:768.1px) and (max-width:1024px) {
  .banner .banner__text .field-name-field-c-text p,
  .banner__subtitle {
    font-size: 18px;
    margin-top: calc(8px + (100vw - 768px)/ 256 * 10);
    margin-bottom: calc(8px + (100vw - 768px)/ 256 * 10)
  }
}
@media screen and (min-width:1024.1px) {
  .banner .banner__text .field-name-field-c-text p,
  .banner__subtitle {
    font-size: 18px;
    margin-top: 18px;
    margin-bottom: 18px
  }
}
.banner__subtitle:first-child {
  margin-top: 0
}
.banner__subtitle:last-child {
  margin-bottom: 0
}
.banner__overlap.banner__overlap.banner__overlap {
  margin-top: 0;
  height: auto;
  z-index: 1;
  background-color: #fff;
  min-height: 6.25rem;
  border-top-left-radius: 6.25rem
}
.banner__breadcrumbs {
  position: relative;
  z-index: 2;
  min-height: 6.25rem;
  margin-top: -6.25rem
}
.section-coffee-recipes .banner__breadcrumbs,
.section-nash-kofe .banner__breadcrumbs {
  padding-top: 14px
}
.banner__breadcrumbs .block-system-breadcrumb-block.block-system-breadcrumb-block {
  -webkit-transform: unset;
  -ms-transform: unset;
  transform: unset;
  position: static;
  padding: 20px 30px 10px 90px
}
@media screen and (max-width:1023px) {
  .banner__overlap.banner__overlap.banner__overlap {
    min-height: 1.565rem;
    border-top-left-radius: 1.565rem
  }
  .banner__breadcrumbs {
    min-height: 1.565rem;
    margin-top: -1.565rem
  }
  .banner__breadcrumbs .block-system-breadcrumb-block.block-system-breadcrumb-block {
    padding: 10px 30px
  }
}
.banner__breadcrumbs .headline-h2 {
  font-size: 25px;
  line-height: 1.32
}
@media screen and (min-width:768px) {
  .banner__breadcrumbs .headline-h2 {
    font-size: 31px
  }
}
@media screen and (min-width:1024px) {
  .banner__breadcrumbs .headline-h2 {
    font-size: 34px
  }
}
.banner__wrapper.topic-intro {
  background: #fff;
  margin-bottom: 0
}
.banner__wrapper.topic-intro .intro-links {
  z-index: unset;
  border: unset;
  max-height: unset;
  margin-bottom: unset;
  background: unset;
  margin-top: unset
}
.banner__wrapper.topic-intro .intro-links .simplebar-content ul {
  margin-left: 7px;
  margin-bottom: 18px;
  margin-top: 4px
}
.section-coffee-recipes .banner__wrapper.topic-intro .intro-links .simplebar-content ul,
.section-nash-kofe .banner__wrapper.topic-intro .intro-links .simplebar-content ul {
  padding-top: 12px;
  padding-bottom: 12px
}
.section-coffee-recipes .banner__wrapper.topic-intro {
  margin-bottom: 60px
}
.section-nash-kofe .banner__wrapper {
  margin-bottom: 32px
}
@media print,
screen and (min-width:64em) {
  .section-coffee-recipes .banner__breadcrumbs,
  .section-nash-kofe .banner__breadcrumbs {
    padding-top: 4px
  }
  .section-nash-kofe .banner__wrapper {
    margin-bottom: 74px
  }
}
.banner-overlap {
  margin-top: -100px;
  border-radius: 100px 0 0;
  background-color: #fff;
  position: relative;
  z-index: 1;
  padding-top: 100px
}
@media screen and (max-width:850px) {
  .banner-overlap {
    border-radius: 40px 0 0;
    margin-top: -100px;
    padding-top: 100px
  }
}