.banner .container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto;
}


.banner .face {
  text-align: left;
  flex-shrink: 0;
  position: relative;
  width: 600px;

  margin-left:0px;
}


.banner .face img {
  width: 100%;
  height: auto;
  display: block;

}


.banner .text {
  text-align: left;
  flex-grow: 1;

  position: relative;
  z-index: 10;

  min-width: 0;
  margin-left:-80px;
}



@media (max-width: 1200px) {

  .banner .face {
     margin-left: calc(0px - (1300px - 100vw) / 3);
  }

  .banner .text {
    /* Verhoog de overlap als het scherm kleiner wordt */
    margin-left: calc(0px - (1300px - 100vw) / 3);
  }
}



@media (max-width: 720px) {

  .banner .face {
    margin-left: 0px;
  }

  .banner .container {
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .banner .face {
    width: 100%;

  }

  .banner img {
    max-width: 100%;
    height: auto;
  }

  .banner .text {
    text-align: center;
    margin-top: -50px;
    margin-left: 0px;

  }
}




/* MOBILE VIEW */
@media (max-width: 480px) {}