.recycling-banner {
  background-color: #5fa85e;
  overflow: hidden;
}
.recycling-banner:before {
  content: "";
  width: 132vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100vw;
  background-color: #376741;
  transform: skewX(-40deg);
}
@media only screen and (min-width: 480px) {
  .recycling-banner:before {
    width: 125vw;
    transform: skewX(-50deg);
  }
}
@media only screen and (min-width: 1600px) {
  .recycling-banner:before {
    width: 131vw;
  }
}
@media only screen and (min-width: 2560px) {
  .recycling-banner:before {
    width: 136vw;
  }
}
@media only screen and (min-width: 3840px) {
  .recycling-banner:before {
    width: 141vw;
  }
}
@media only screen and (max-width: 575px) {
  .recycling-banner .container {
    padding: 0 15px !important;
  }
}
@media only screen and (min-width: 1366px) {
  .recycling-banner .container {
    max-width: 1276px;
    width: 96%;
  }
}
.recycling-banner .image {
  width: 140px;
}
@media only screen and (min-width: 768px) {
  .recycling-banner .image {
    width: 200px;
  }
}
@media only screen and (min-width: 1200px) {
  .recycling-banner .image {
    width: 300px;
  }
}
.recycling-banner .image img {
  width: 92px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media only screen and (min-width: 576px) {
  .recycling-banner .image img {
    width: calc(92px + 63 * (100vw - 576px) / 790);
  }
}
@media only screen and (min-width: 1366px) {
  .recycling-banner .image img {
    width: 155px;
  }
}
.recycling-banner .foreground {
  transition-duration: 1.2s;
  transition-delay: 0.35s;
  width: calc(100% - 140px);
  padding-top: 12px;
  padding-bottom: 12px;
  z-index: 2;
}
@media only screen and (min-width: 576px) {
  .recycling-banner .foreground {
    padding-top: calc(12px + 4 * (100vw - 576px) / 864);
    padding-bottom: calc(12px + 4 * (100vw - 576px) / 864);
  }
}
@media only screen and (min-width: 1440px) {
  .recycling-banner .foreground {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .recycling-banner .foreground {
    width: calc(100% - 200px);
  }
}
@media only screen and (min-width: 1200px) {
  .recycling-banner .foreground {
    width: calc(100% - 300px);
  }
}
.recycling-banner .text {
  margin-right: 18px;
  font-size: 14px;
}
@media only screen and (min-width: 480px) {
  .recycling-banner .text {
    margin-right: calc(18px + 42 * (100vw - 480px) / 960);
  }
}
@media only screen and (min-width: 1440px) {
  .recycling-banner .text {
    margin-right: 60px;
  }
}
@media only screen and (min-width: 576px) {
  .recycling-banner .text {
    font-size: calc(14px + 24 * (100vw - 576px) / 864);
  }
}
@media only screen and (min-width: 1440px) {
  .recycling-banner .text {
    font-size: 38px;
  }
}
.recycling-banner svg {
  width: 28px;
  height: 28px;
}
@media only screen and (min-width: 390px) {
  .recycling-banner svg {
    width: calc(28px + 27 * (100vw - 390px) / 1050);
    height: calc(28px + 27 * (100vw - 390px) / 1050);
  }
}
@media only screen and (min-width: 1440px) {
  .recycling-banner svg {
    width: 55px;
    height: 55px;
  }
}

/*# sourceMappingURL=block.css.map*/