@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,500,500i|Roboto+Condensed:400,700");
* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box; }

html, body {
  background-color: #FFFFFF;
  color: #231F20;
  font-family: 'Fira Sans', sans-serif;
  font-size: 16px;
  overflow-x: hidden; }

header, footer {
  max-width: 1500px;
  margin: auto; }

section {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto; }

body .clearfix::after {
  display: block;
  content: "";
  clear: both; }

.heading-1, .heading-2, .heading-3, .heading-4 {
  font-family: 'Roboto Condensed', sans-serif;
  color: #333333;
  text-transform: uppercase; }

.heading-1 {
  font-size: 36px; }

.heading-2 {
  font-size: 24px; }

.heading-3 {
  font-size: 21px;
  font-weight: 500; }

.heading-4 {
  font-size: 18px; }

.intro, .body-text {
  color: #333333; }

.text-link {
  color: #998574; }

.label {
  color: #242424;
  font-weight: 500; }

.btn {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  font-family: 'Fira Sans', sans-serif;
  transition: all .2s ease-in;
  cursor: pointer; }
  .btn:hover {
    box-shadow: 0 0.5em 0.5em -0.4em rgba(0, 0, 0, 0.5);
    transform: translateY(-0.1em);
    transition: all .1s ease-in; }

.btn-primary {
  background-color: #EDCFB5;
  border: none;
  padding: 14px; }

.btn-secondary {
  background-color: transparent;
  border: 2px solid #231F20;
  padding: 12px; }

.font-nav {
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  color: #231F20; }

.title {
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase; }

.container {
  height: 100%;
  width: 100%; }

.project {
  background-size: cover !important;
  background: center center;
  position: relative; }
  .project .project-info-dark, .project .project-info-light {
    position: absolute;
    bottom: 0;
    z-index: 1; }
    .project .project-info-dark .project-title, .project .project-info-dark .project-link, .project .project-info-light .project-title, .project .project-info-light .project-link {
      display: block;
      text-align: left;
      text-transform: uppercase; }
    .project .project-info-dark .project-title, .project .project-info-light .project-title {
      padding-bottom: 6px; }
    .project .project-info-dark .project-link span, .project .project-info-light .project-link span {
      font-size: 16px;
      font-weight: 500;
      transition: all 0.05s ease-in; }
      .project .project-info-dark .project-link span:hover, .project .project-info-light .project-link span:hover {
        color: #EDCFB5;
        transition: all 0.05s ease-in; }
    .project .project-info-dark .project-detail ul, .project .project-info-light .project-detail ul {
      display: flex;
      position: relative; }
      .project .project-info-dark .project-detail ul li, .project .project-info-light .project-detail ul li {
        margin-right: 12px;
        list-style: none;
        font-size: 16px;
        color: #999999; }
      .project .project-info-dark .project-detail ul li:first-of-type:after, .project .project-info-light .project-detail ul li:first-of-type:after {
        content: ".";
        font-size: 16px;
        padding-left: 4px;
        vertical-align: middle;
        line-height: 20px;
        position: absolute;
        top: -4px; }
  .project .project-info-light {
    background-color: #FFFFFF;
    padding-top: 20px;
    padding-bottom: 18px;
    padding-right: 16px;
    left: 0; }
    .project .project-info-light .project-title a {
      color: #231F20;
      text-decoration: none; }
      .project .project-info-light .project-title a:hover {
        text-decoration: underline; }
      .project .project-info-light .project-title a:active {
        color: #666666; }
    .project .project-info-light .project-link {
      color: #231F20; }
  .project .project-info-dark {
    background-color: #231F20;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 32px;
    left: 20%;
    width: 80%; }
    .project .project-info-dark .project-title, .project .project-info-dark .project-link {
      color: #FFFFFF; }

.scale-container {
  display: block; }
  .scale-container > div img {
    width: 100%;
    object-fit: cover;
    display: block; }
  @media (min-width: 576px) {
    .scale-container > div:nth-of-type(1) {
      padding-right: 16px; }
    .scale-container > div:nth-of-type(2) {
      padding-left: 16px; } }
  .scale-container > div .project, .scale-container > div img {
    height: 512px;
    width: 100%; }
  .scale-container > div .container {
    padding: 45px 32px 80px; }
    .scale-container > div .container .title {
      font-size: 1.6em; }
      @media (min-width: 992px) {
        .scale-container > div .container .title {
          font-size: 36px; } }
    .scale-container > div .container .sub-title {
      text-transform: none;
      margin: 14px 0;
      line-height: 1.4; }
    .scale-container > div .container .content {
      margin: 24px 0 30px;
      line-height: 1.5; }
    .scale-container > div .container table {
      border-collapse: collapse;
      margin: 24px 0 34px;
      width: 100%; }
      .scale-container > div .container table tr:first-of-type td {
        border-top: 1px solid #D8D8D8; }
      .scale-container > div .container table tr td {
        padding: 18px 0;
        border-bottom: 1px solid #D8D8D8; }
        .scale-container > div .container table tr td img {
          object-fit: contain;
          height: 44px;
          width: 44px; }
    .scale-container > div .container a {
      font-size: 16px;
      font-weight: 500;
      color: #231F20;
      text-transform: uppercase; }
  .scale-container .one, .scale-container .two, .scale-container .half {
    width: 100%; }
  @media (min-width: 576px) {
    .scale-container {
      display: flex; }
      .scale-container .one, .scale-container .two, .scale-container .half {
        width: 50%; } }
  @media (min-width: 768px) {
    .scale-container .two {
      width: 61.5%; }
    .scale-container .one {
      width: 38.5%; } }

nav {
  position: fixed;
  height: 125px;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
  transition: all .3s ease-in; }
  nav .container {
    max-width: 1200px;
    padding: 32px 5% 32px 10%;
    margin: auto; }
    @media (min-width: 1200px) {
      nav .container {
        padding: 32px 0; } }
    nav .container img {
      float: left; }
    nav .container .menu {
      display: none;
      float: right;
      padding: 12px; }
      nav .container .menu a {
        padding: 8px 14px;
        transition: all .1s ease-in; }
        nav .container .menu a:hover, nav .container .menu a:active, nav .container .menu a.active {
          background-color: #EDCFB5;
          transition: all .1s ease-in; }
    nav .container .menubar {
      position: fixed;
      height: 100%;
      top: 0;
      bottom: 0;
      left: -240px;
      right: 0;
      width: 200px;
      background-color: #FFFFFF;
      padding: 50px;
      box-shadow: 3px 2px 5px 0 rgba(0, 0, 0, 0.2);
      transition: left .3s ease; }
      nav .container .menubar .logo {
        float: none;
        display: block;
        margin: 0 auto 50px; }
      nav .container .menubar > a {
        position: relative;
        display: block;
        transition: all .1s ease-in;
        margin-bottom: 10px;
        font-size: 21px; }
        nav .container .menubar > a::before {
          display: none;
          position: absolute;
          top: 8px;
          left: -50px;
          content: "";
          width: 30px;
          height: 5px;
          background-color: #EDCFB5; }
        nav .container .menubar > a:hover, nav .container .menubar > a:active, nav .container .menubar > a.active {
          font-weight: 500;
          transition: transform .1s ease-in; }
          nav .container .menubar > a:hover::before, nav .container .menubar > a:active::before, nav .container .menubar > a.active::before {
            display: block; }
      nav .container .menubar .contact-details {
        position: absolute;
        left: 20px;
        right: 0;
        bottom: 40px;
        margin: 0; }
        nav .container .menubar .contact-details .phone, nav .container .menubar .contact-details .email {
          margin-bottom: 12px; }
          nav .container .menubar .contact-details .phone img, nav .container .menubar .contact-details .email img {
            display: inline-block;
            vertical-align: middle;
            padding-right: 12px;
            filter: grayscale(100%) opacity(60%); }
          nav .container .menubar .contact-details .phone a, nav .container .menubar .contact-details .email a {
            display: inline-block;
            font-size: 14px;
            color: #998574;
            text-decoration: none; }
            nav .container .menubar .contact-details .phone a:hover, nav .container .menubar .contact-details .email a:hover {
              color: #EDCFB5; }
    nav .container .hamburger {
      margin-top: 16px;
      height: 30px;
      width: 40px;
      float: right;
      cursor: pointer;
      position: relative; }
      nav .container .hamburger div {
        position: absolute;
        background-color: #231F20;
        height: 4px;
        width: 100%;
        transition: all .3s linear; }
      nav .container .hamburger .top {
        top: 0; }
      nav .container .hamburger .middle {
        display: flex;
        top: 44%; }
      nav .container .hamburger .bottom {
        bottom: 0; }
    @media (min-width: 768px) {
      nav .container .menu {
        display: block; }
      nav .container .hamburger {
        display: none; } }

@media (max-width: 768px) {
  body.menu-active .menubar {
    left: 0; } }
body.menu-active .hamburger .top {
  top: 44%;
  transform: rotate(225deg); }
body.menu-active .hamburger .middle {
  opacity: 0; }
body.menu-active .hamburger .bottom {
  bottom: 44%;
  transform: rotate(-225deg); }

nav.hide {
  top: -125px; }
nav.showup {
  position: fixed;
  background-color: #FFFFFF;
  box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);
  top: 0; }

header {
  position: relative; }
  header .bg-grey {
    padding: 11em 5% 14em;
    width: 100%;
    height: 100%;
    background-color: #F2F2F2; }
    @media (min-width: 768px) {
      header .bg-grey {
        margin-left: 5%;
        width: 95%; } }
    @media (min-width: 1200px) {
      header .bg-grey {
        padding: 205px 5% 285px; } }
    header .bg-grey .container {
      width: 100%; }
      @media (min-width: 992px) {
        header .bg-grey .container {
          max-width: 50%; } }
      @media (min-width: 1200px) {
        header .bg-grey .container {
          max-width: 480px; } }
      header .bg-grey .container .title {
        font-size: 48px;
        font-weight: 700;
        margin-bottom: 45px;
        line-height: 1.13em; }
        @media (min-width: 1200px) {
          header .bg-grey .container .title {
            font-size: 72px; } }
      header .bg-grey .container .content {
        margin-bottom: 52px;
        line-height: 2em; }
      header .bg-grey .container button:first-of-type {
        margin-right: 24px; }
      header .bg-grey .container button {
        display: block;
        width: 100%;
        margin-bottom: 8px; }
      @media (min-width: 768px) {
        header .bg-grey .container button {
          display: inline-block;
          width: auto;
          margin-bottom: 0; } }
    header .bg-grey > .project {
      margin-top: 32px;
      position: relative;
      width: 100%;
      height: 300px;
      background: url("../images/bekijk-project-img.png") no-repeat center center; }
      @media (min-width: 992px) {
        header .bg-grey > .project {
          margin-top: 0;
          position: absolute;
          width: 44%;
          max-width: calc(100% - 480px);
          height: 85%;
          top: 0;
          right: 0;
          background: url("../images/bekijk-project-img.png") no-repeat center center; } }
      header .bg-grey > .project .project-title {
        padding-bottom: 4px; }
    header .bg-grey .header-right {
      position: relative;
      height: 300px;
      margin-top: 32px; }
      @media (min-width: 992px) {
        header .bg-grey .header-right {
          margin-top: 0;
          position: absolute;
          min-width: 44%;
          max-width: calc(100% - 480px);
          height: 100%;
          top: 0;
          right: 0; } }
      header .bg-grey .header-right .header-quote {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #231F20;
        color: #FFFFFF;
        padding: 32px;
        font-style: italic;
        width: 45%;
        line-height: 1.55em; }
        @media (min-width: 992px) {
          header .bg-grey .header-right .header-quote {
            position: absolute;
            bottom: -80px;
            left: 0;
            padding: 32px 40px 80px 28px;
            width: 360px;
            height: 272px;
            font-size: 21px; }
            header .bg-grey .header-right .header-quote .quote {
              margin-top: 14px; } }

.projects {
  position: relative;
  top: -74px;
  padding: 0 2%; }
  @media (min-width: 1200px) {
    .projects {
      padding: 0; } }
  .projects .scale-container .one, .projects .scale-container .two, .projects .scale-container .half {
    margin-bottom: 28px; }
  @media (min-width: 576px) {
    .projects .scale-container {
      margin-bottom: 32px; }
      .projects .scale-container .one, .projects .scale-container .two, .projects .scale-container .half {
        margin-bottom: 0; } }
  .projects .projects-1 .two .project {
    background-image: url("../images/bekijk-project-img.png"); }
  .projects .projects-1 .one .project {
    background-image: url("../images/malengo.png"); }
  .projects .projects-2 .one .container {
    background-color: #F2F2F2; }
  .projects .projects-2 .two .project {
    background-image: url("../images/skybox.png"); }
  .projects .projects-3 .two .project {
    background-image: url("../images/skybox.png"); }
  .projects .projects-4 .half .project, .projects .projects-4 .half img {
    height: 368px; }
  .projects .projects-4 .half:nth-of-type(1) .project {
    background-image: url("../images/malengo.png"); }
  .projects .projects-4 .half:nth-of-type(2) .project {
    background-image: url("../images/skybox.png"); }

footer {
  background-color: #231F20;
  height: 150px;
  padding: 56px 75px 100px;
  text-align: center; }
  @media (min-width: 768px) {
    footer {
      display: flex;
      justify-content: space-between; } }
  @media (min-width: 992px) {
    footer {
      padding: 56px 130px 60px; } }
  footer .title {
    color: white; }
  footer ul {
    display: flex;
    justify-content: center; }
    footer ul li:last-of-type {
      margin-right: 0;
      padding-right: 0; }
    @media (min-width: 768px) {
      footer ul {
        justify-content: flex-start; } }
  footer ul, footer div {
    margin-bottom: 6px; }
    @media (min-width: 768px) {
      footer ul, footer div {
        display: flex; } }
  footer ul {
    color: white; }
    footer ul li {
      margin-right: 20px;
      padding-right: 10px; }
      footer ul li:first-of-type {
        list-style: none; }
      footer ul li a {
        text-decoration: none;
        transition: all .1s ease-in; }
        footer ul li a:hover {
          color: #EDCFB5;
          transition: all .1s ease-in; }
  footer div div {
    margin-left: 20px; }
    footer div div a {
      padding-left: 8px;
      color: #EDCFB5;
      transition: all .1s ease-in;
      text-decoration: none; }
      footer div div a:hover {
        color: #998574;
        transition: all .1s ease-in; }

.clients {
  text-align: center; }
  .clients .content {
    margin: 25px auto 42px;
    max-width: 552px;
    line-height: 1.45em; }
  .clients .logos img {
    display: block;
    filter: grayscale(100%) opacity(60%);
    text-align: center;
    margin: 32px auto; }
  @media (min-width: 576px) {
    .clients .logos {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around; }
      .clients .logos img {
        margin: 12px;
        transition: filter .1s ease-in; } }
    @media (min-width: 576px) and (min-width: 1200px) {
      .clients .logos img {
        margin: 0; } }
  @media (min-width: 576px) {
      .clients .logos img:hover {
        filter: none; } }
  @media (min-width: 1200px) {
    .clients .logos {
      justify-content: space-between; } }

.overzicht .clients .title {
  margin-bottom: 32px; }
.overzicht .clients .logos {
  margin-bottom: 32px; }

.klanten .container table tr td:nth-of-type(2) {
  padding-left: 12px !important; }

.projects-2 .one, .projects-3 .one {
  width: 100%; }
.projects-2 .two, .projects-3 .two {
  display: none; }

@media (min-width: 576px) {
  .projects-2 .one {
    width: 61.5%; }
  .projects-2 .two {
    width: 38.5%;
    display: block; } }
@media (min-width: 768px) {
  .projects-3 .one {
    width: 61.5%;
    background-color: #F2F2F2;
    padding-left: 0;
    margin-left: 16px; }
  .projects-3 .two {
    width: 38.5%;
    display: block; } }
@media (min-width: 992px) {
  .projects-2 .one, .projects-3 .one {
    width: 38.5%; }
  .projects-2 .two, .projects-3 .two {
    width: 61.5%; } }
.about section {
  margin-bottom: 100px;
  padding: 0 2%; }
  @media (min-width: 1200px) {
    .about section {
      padding: 0; } }

body.about header .bg-grey {
  margin-top: 130px;
  margin-bottom: 170px;
  height: 100%;
  padding-top: 50px;
  padding-bottom: 50px; }
  @media (min-width: 992px) {
    body.about header .bg-grey {
      height: 560px;
      padding-top: 122px;
      padding-left: 72px;
      padding-bottom: 200px; } }
  body.about header .bg-grey .title {
    margin-bottom: 32px; }
  body.about header .bg-grey .header-right {
    background: url("../images/about-header.png") no-repeat center center;
    background-size: cover; }
  body.about header .bg-grey .header-right.about {
    position: relative;
    width: 100%;
    height: 100%; }
    body.about header .bg-grey .header-right.about:after {
      content: "";
      display: block;
      padding-bottom: 100%; }
    body.about header .bg-grey .header-right.about .header-quote img {
      height: 38px; }
  @media (max-width: 450px) {
    body.about header .bg-grey .header-right.about .header-quote {
      width: 100%;
      bottom: -40px;
      padding: 15px 25px; }
      body.about header .bg-grey .header-right.about .header-quote img {
        margin-top: 0;
        height: 20px; } }
  @media (min-width: 992px) {
    body.about header .bg-grey .header-right.about {
      position: absolute;
      width: 44%; }
      body.about header .bg-grey .header-right.about:after {
        display: none; }
      body.about header .bg-grey .header-right.about .header-quote img {
        height: 48px; } }

.about .services {
  margin-top: -50px; }
  @media (min-width: 1200px) {
    .about .services {
      margin-top: 0; } }
  .about .services .title {
    margin-bottom: 20px;
    text-align: center; }
    @media (min-width: 576px) {
      .about .services .title {
        text-align: left; } }
  .about .services .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    margin: auto; }
    @media (min-width: 576px) {
      .about .services .cards {
        padding: 0;
        width: 100%; } }
    .about .services .cards .card {
      width: 100%;
      margin-bottom: 36px;
      text-align: center; }
      @media (min-width: 576px) {
        .about .services .cards .card {
          width: calc(50% - 10px);
          margin-bottom: 36px;
          text-align: left; } }
      @media (min-width: 992px) {
        .about .services .cards .card {
          width: calc(25% - 10px);
          margin-bottom: 0; } }
      .about .services .cards .card .card-header {
        display: flex;
        justify-content: center;
        font-size: 21px;
        line-height: 32px; }
        @media (min-width: 576px) {
          .about .services .cards .card .card-header {
            justify-content: flex-start; }
            .about .services .cards .card .card-header img {
              padding-right: 28px; } }
        .about .services .cards .card .card-header img {
          padding-right: 12px; }
        .about .services .cards .card .card-header span {
          vertical-align: middle; }

.about .method {
  margin-bottom: 60px; }
  .about .method .heading-1 {
    margin-bottom: 36px;
    text-align: center; }
    @media (min-width: 576px) {
      .about .method .heading-1 {
        text-align: left; } }
  .about .method .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    @media (min-width: 576px) {
      .about .method .cards {
        justify-content: space-between; } }
    .about .method .cards .card {
      width: 90%;
      background-color: #F2F2F2;
      padding: 32px;
      margin-bottom: 1.5em; }
      @media (min-width: 576px) {
        .about .method .cards .card {
          width: 49%; } }
      @media (min-width: 1200px) {
        .about .method .cards .card {
          max-width: 385px; } }
      .about .method .cards .card .number {
        color: #EDCFB5;
        font-size: 42px;
        margin-bottom: 0px; }
      .about .method .cards .card .title {
        font-size: 21px; }
      .about .method .cards .card .content {
        margin: 15px 0 30px; }

.about .contact {
  padding: 0;
  background-color: #EDCFB5;
  margin-left: auto;
  margin-right: auto;
  width: 96%; }
  @media (min-width: 992px) {
    .about .contact {
      max-width: calc(1200px * 0.72); } }
  .about .contact .overlay {
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 28px 14px 44px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center; }
    @media (min-width: 1200px) {
      .about .contact .overlay {
        padding: 28px 28px 44px; } }
    .about .contact .overlay .container {
      padding: 0 2%;
      width: 100%; }
      @media (min-width: 768px) {
        .about .contact .overlay .container {
          width: 48%; } }
      @media (min-width: 1200px) {
        .about .contact .overlay .container {
          padding: 0 32px; } }
    .about .contact .overlay .contact-container-first {
      text-align: center;
      padding-bottom: 32px;
      margin-bottom: 32px;
      border-bottom: 1px solid #D8D8D8; }
      @media (min-width: 768px) {
        .about .contact .overlay .contact-container-first {
          text-align: left;
          padding-bottom: 0;
          margin-bottom: 0;
          border-bottom: none;
          border-right: 1px solid #D8D8D8; } }
      .about .contact .overlay .contact-container-first .title {
        margin: 10px 0 20px; }
      .about .contact .overlay .contact-container-first .content {
        margin: 15px 0;
        line-height: 1.5em; }
      .about .contact .overlay .contact-container-first .btn {
        margin-top: 8px;
        border-radius: 5%;
        padding: 14px 48px; }
    .about .contact .overlay .contact-container-second {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 2%; }
      @media (min-width: 1200px) {
        .about .contact .overlay .contact-container-second {
          padding-left: 64px; } }
      .about .contact .overlay .contact-container-second .profile-img {
        height: 64px;
        width: 64px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 18px; }
      .about .contact .overlay .contact-container-second .contact-details {
        display: inline-block;
        vertical-align: middle; }
        .about .contact .overlay .contact-container-second .contact-details * {
          margin-bottom: 5px; }
        .about .contact .overlay .contact-container-second .contact-details .name {
          font-size: 21px; }
        .about .contact .overlay .contact-container-second .contact-details .phone img, .about .contact .overlay .contact-container-second .contact-details .email img {
          display: inline-block;
          vertical-align: middle;
          padding-right: 18px;
          filter: grayscale(100%) opacity(60%); }
        .about .contact .overlay .contact-container-second .contact-details .phone a, .about .contact .overlay .contact-container-second .contact-details .email a {
          color: #998574; }
          .about .contact .overlay .contact-container-second .contact-details .phone a:hover, .about .contact .overlay .contact-container-second .contact-details .email a:hover {
            color: #EDCFB5; }

body.overzicht header .bg-grey {
  margin-top: 130px;
  margin-bottom: 170px;
  height: 100%;
  padding-top: 50px;
  padding-bottom: 50px; }
  @media (min-width: 992px) {
    body.overzicht header .bg-grey {
      height: 560px;
      padding-top: 122px;
      padding-bottom: 200px; } }
  body.overzicht header .bg-grey .title {
    margin-bottom: 32px; }
  body.overzicht header .bg-grey .header-right .project {
    width: 100%;
    height: 100%;
    background-image: url("../images/malengo.png"); }

.overzicht .projects .scale-container .half .project {
  height: 368px; }
.overzicht .projects .scale-container {
  margin-bottom: 0; }
@media (min-width: 576px) {
  .overzicht .projects .scale-container {
    margin-bottom: 28px; } }

.overzicht .clients {
  margin-top: -15px;
  margin-bottom: 100px; }
  .overzicht .clients .title {
    margin-bottom: 25px; }

.detail header .bg-grey {
  margin-top: 130px;
  margin-bottom: 170px;
  height: 100%;
  padding-top: 50px;
  padding-bottom: 50px; }
  @media (min-width: 992px) {
    .detail header .bg-grey {
      height: 560px;
      padding-top: 122px;
      padding-bottom: 200px; } }
  .detail header .bg-grey .title {
    margin-bottom: 18px; }
  .detail header .bg-grey .header-details {
    margin-bottom: 28px; }
    .detail header .bg-grey .header-details .header-detail {
      margin-bottom: 6px; }
      .detail header .bg-grey .header-details .header-detail .detail-title {
        display: inline-block; }
      .detail header .bg-grey .header-details .header-detail .detail {
        color: #999999;
        display: inline-block; }
      .detail header .bg-grey .header-details .header-detail:nth-of-type(1) {
        margin-right: 14px; }
      @media (min-width: 992px) {
        .detail header .bg-grey .header-details .header-detail:nth-of-type(1), .detail header .bg-grey .header-details .header-detail:nth-of-type(2) {
          display: inline-block; } }
  .detail header .bg-grey .header-right {
    background: url("../images/bekijk-project-img.png") no-repeat center center;
    background-size: cover; }

.desc-section {
  margin-top: -95px;
  margin-bottom: 48px;
  max-width: 800px;
  width: 90%;
  padding: 0 2%; }
  @media (min-width: 992px) {
    .desc-section {
      padding: 0;
      width: 100%; } }
  .desc-section .title {
    margin-bottom: 25px; }
  .desc-section .content {
    line-height: 1.5em; }

.images-section {
  margin-bottom: 94px;
  padding: 0 2%; }
  @media (min-width: 1200px) {
    .images-section {
      padding: 0; } }
  .images-section .scale-container {
    margin-bottom: 0; }
    @media (min-width: 576px) {
      .images-section .scale-container {
        margin-bottom: 28px; }
        .images-section .scale-container .half {
          margin-bottom: 0; } }
    .images-section .scale-container .half {
      margin-bottom: 28px; }
      .images-section .scale-container .half img {
        max-height: 448px;
        max-width: 592px;
        object-fit: cover; }
      .images-section .scale-container .half div {
        color: #999999;
        margin-top: 16px;
        font-style: italic;
        font-weight: 500; }

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