/******** Controls the height underneath the text block - padding-bottom, sets background colour for the component *********/
.hero_wrapper {
  background: #ffffff;
  width: 100%;
}
/******** Gradient/image on the left *********/
.left_side {
  background-image: linear-gradient(
    to bottom left,
    rgba(0, 0, 0, 0.3),
    rgba(255, 255, 255, 0.2)
  );
  height: 500px;
  width: 950px;
  margin: 0;
}
/******** Gradient/image on the right *********/

.right_side {
  background-image: linear-gradient(
    to bottom right,
    rgba(0, 0, 0, 0.3),
    rgba(255, 255, 255, 0.2)
  );
  width: 950px;
  height: 500px;
  margin: 0;
}
/******** Change the background colour - sets border at bottom *********/
.banner{
  display: flex;
  align-items: stretch;
  background-color: #414141;
  height: 500px;
}
/******** Change the background image - controls the width of image sets border either side *********/

.hero_image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2060px;
  background: url("/-/media/Images/Brand/Neff/hero/neff_l_desktop.jpg") no-repeat right;
  border-left: 8px solid #fff;
  border-right: 8px solid #fff;
}


@media only screen and (max-width: 2060px) {

    /******** Change the background image - flexbox set to percentage for NEW icon to align with edge of image *********/
  .hero_image {
    flex: 0 0 86%;
        background: url("/-/media/Images/Brand/Neff/hero/neff_l_desktop.jpg") no-repeat center;
  }
 
}
 /**** 1600 breakpoint | Banner height change - flex set to 100% - borders removed - NEW icon fixed right - text box smaller *********/
@media only screen and (max-width: 1600px) {

  .hero_image {
    flex: 0 0 100%;
border:none;
  }

}

/**** 1366 breakpoint | Banner height change 470 - Text size smaller *********/

@media only screen and (max-width: 1366px) {
  .banner {
    height: 450px;
  }

  .hero_image {
    background: url("/-/media/Images/Brand/Neff/hero/neff_l_laptop.jpg") no-repeat center;
    background-size: cover;
  }

}


@media only screen and (max-width: 767px) {
  .banner {
    height: 240px;
  }
  .hero_image {
    background: url("/-/media/Images/Brand/Neff/hero/neff_l_mob_l.jpg") no-repeat center;
    background-size: cover;
  }

}
@media only screen and (max-width: 440px) {

  .hero_image {
    background: url("/-/media/Images/Brand/Neff/hero/neff_l_mob.jpg")
      no-repeat center;
    background-size: cover;
  }
  
}