@import '../styles.scss';

app-header {
  box-shadow: 0px 15px 10px rgba(0,0,0,0.21);
  position: relative;
  z-index: 5;
}

.hero-container {
  width: 100%;
  height: 500px;
  overflow: hidden;

  .hero {
    transform: scale(0.9);
    transform-origin: top left;
    margin: 0 auto;
    margin-top: -550px;
  }

  .overlay {
    background-color: rgba(255, 255, 255, 0.35);
    height: 600px;
    width: 100%;
    top: -1050px;
    display: inline-block;
    position: relative;
  }
}

.hero-container2 {
  width: 100%;
  height: 350px;
  overflow: hidden;

  .hero {
    transform: scale(0.4);
    transform-origin: top left;
    margin-top: -730px;
  }

  .overlay {
    background-color: rgba(255, 255, 255, 0.35);
    height: 600px;
    width: 100%;
    top: -3100px;
    display: inline-block;
    position: relative;
  }
}

.bold {
  font-weight: bold;
}

h2 {
  color: $primary-color;
  font-size: 30px;
  font-weight: bold;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px;
}

.alternate {
  background-color: $light;
}

#wiezijnwe .wrapper {
  display: flex;
  justify-content: space-between;

  .content {
    width: 60%;
  }

  img {
    width: 45%;
    margin-right: -2%;
    margin-bottom: -50px;
  }

  span {
    display: block;
  }
}

#vacatures {
  display: flex;
  justify-content: space-between;

  .content {
    width: 60%;
  }

  img {
    width: 45%;
    margin-left: -2%;
    margin-bottom: -50px;
  }

  span {
    display: block;
  }
}

.wrapper-contact {
  display: flex;
  padding: 20px 0;

  div {
    width: 50%;
  }
}

.footer {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 70px;
  text-align: center;

  span {
    font-size: 20px;
  }
}
