div#header
  width: 100%
div#main-container
  width: 95%
  max-width: 1440px
  overflow: hidden
  margin: auto
div#pay-off
  width: 415px
  left: 180px
div#logo
  left: 0
div#main-menu
  width: 100%
div#content
  width: 100%
  z-index: 100
span.interiew-pay-off
  margin-bottom: 15px
div.pagetop
  width: 100%
  -webkit-box-shadow: 0px -3px 10px -2px rgba(0,0,0,0.41)
  -moz-box-shadow: 0px -3px 10px -2px rgba(0,0,0,0.41)
  box-shadow: 0px -3px 10px -2px rgba(0,0,0,0.41)

div#banner-holder
  -webkit-box-shadow: 0px -3px 10px -2px rgba(0,0,0,0.41)
  -moz-box-shadow: 0px -3px 10px -2px rgba(0,0,0,0.41)
  box-shadow: 0px -3px 10px -2px rgba(0,0,0,0.41)
  width: 100%
  min-height: 304px
  box-sizing: border-box
  background-image: none
  background: #ffffff
  background: -moz-linear-gradient(top,  #ffffff 0%, #ededed 100%)
  background: -webkit-linear-gradient(top,  #ffffff 0%,#ededed 100%)
  background: linear-gradient(to bottom,  #ffffff 0%,#ededed 100%)
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 )
div.large-banner-holder
  height: 100%
  width: 100%
  a, span
    display: block
    position: absolute
    left: 0
    top: 0
    background-position: 50% 50%
    background-size: cover
    height: 100%
    width: 100%
ul#main-menu li
  margin-right: 4px
  &.active
    a
      background-image: none
      background-color: #E9510E !important
  &:hover
    a
      background-color: darken(white, 5%)
  a
    background-image: none
    background-color: white
    border-radius: 2px 2px 0 0
div.large-banner-mask
  width: 100%
  height: 100%
div.banner-shadow
  margin-left: auto
  margin-right: auto
div.quote-holder
  right: 5%
  height: auto
  width: auto
div.quote-right
  display: none
div.quote-left
  height: 16px
  left: 20px
  background: url(../images/structure/langstraat_sprite.png) -30px -412px
div.quote-mid
  width: 100%
  background-image: none
  background-color: white
  border-radius: 4px
  box-sizing: border-box
  height: auto
  float: none
  padding: 10px

.mobile-route-btn
  display: none

#mobile-menu
  display: none
  margin: 0 0 10px
  padding: 0
  li
    display: inline-block
    border-radius: 2px
    width: calc((100% - 10px) /3)
    height: 40px
    background-color: white
    margin-right: 5px
    margin-bottom: 5px
    &:nth-child(3n+3)
      margin-right: 0
    a
      display: block
      color: #777574
      height: 100%
      line-height: 40px
      text-align: center
      font-weight: bold
      letter-spacing: 0em
    &:hover
      background-color: darken(white, 5%)

    &.rent
      background-color: #3D3125
      &:hover
        background-color: lighten(#3D3125, 10%)
      a
        color: white

    &.active
      background-color: #E9510E
      a
        color: white
div.mid-content-container
  width: 100%
  margin: 0
  padding: 56px 8%
  box-sizing: border-box
  background-color: white
  h1
    max-width: 776px
    margin: 0 0 3px 0
    line-height: 34px
    padding-bottom: 10px
    border-bottom: 1px solid #C9C8C7
div.home-text-column
  padding-left: 16px
  box-sizing: border-box
  padding-bottom: 40px
  border-bottom: 1px solid #C9C8C7
  width: calc(100% - 280px)
  margin-right: 0
  max-width: 748px
  >*
    max-width: 372px
div.page-column
  width: 100%
  max-width: 500px
hr.mid-content
  width: 100%
  max-width: 776px
  visibility: hidden
#map
  right: 8%
  position: absolute
.google-maps-image
  right: 8%
.google-maps-btn
  right: 14%
div.home-btn-column
  float: right

div#footer-bar
  width: 100%
  margin: 0
  background: #6AA659
  border-radius: 2px
  position: relative
  background-image: none
  background: -moz-linear-gradient(top,  #7CC268 0%, #6AA659 100%)
  background: -webkit-linear-gradient(top,  #7CC268 0%,#6AA659 100%)
  background: linear-gradient(to bottom,  #7CC268 0%,#6AA659 100%)
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7CC268', endColorstr='#6AA659',GradientType=0 )
  -webkit-box-shadow: 0px 7px 10px -2px rgba(0,0,0,0.2)
  -moz-box-shadow: 0px 7px 10px -2px rgba(0,0,0,0.2)
  box-shadow: 0px 7px 10px -2px rgba(0,0,0,0.2)

div.footer-shadow
  display: none
div#footer
  height: 240px
  padding-top: 20px
  margin-left: 8px
  width: calc(100% - 16px)

div.footer-column, div.footer-column.contact
  width: 18%
  margin-right: 5%
  height: 160px
  display: inline-block
div.footer-column.contact
  margin-right: 0
.top-facebook-btn
  right: calc(8% - 10px)
.page-column
  .image-holder
    width: auto
    height: auto
    display: inline-block
    border: 3px solid transparent
    &:hover
      border: 3px solid #72b660
      img
        left: 0
        top: 0
    img.grayscale
      position: relative
    img.hover
      opacity: 0
div.thumb-row
  width: 100%
  .block
    width: calc((100% - 40px)/3)
    margin-right: 20px
    display: inline-block
    margin-bottom: 40px

    &:nth-child(3n + 3)
      margin-right: 0

    h2
      margin-bottom: 0
      display: block
      max-width: 100%
    span.pay-off
      display: block
      max-width: 100%

      .references &.quote
        height: 50px

    .thumbnail-telefoon
      width: 100%

    .image-holder
      width: auto
      box-sizing: border-box
      border: 3px solid transparent
      img
        position: relative
        width: 100%
        margin-bottom: -1px
        &.hover
          position: absolute
          top: 0
          opacity: 0
      &:hover
        border: 3px solid #72b660
        img
          left: 0
          top: 0

    .hover-button.web-btn
      left: 0
      margin: auto
      width: 289px
      a.hover-button span.btn-green-288
        width: 289px

div.page-column.no-mobile-margin-bottom
  margin-bottom: 0

@media screen and (max-width: 1450px)
  div.route-page.mid-content-container
    h1
      max-width: none

@media screen and (max-width: 1200px)
  div.thumb-row
    .block
      width: calc((100% - 20px)/2)
      margin-right: 20px
      display: inline-block

      &:nth-child(3n + 3)
        margin-right: 20px
      &:nth-child(2n + 2)
        margin-right: 0

@media screen and (max-width: 1320px)
  .interview-image
    margin-top: 0px

@media screen and (max-width: 1300px)
  div.mid-content-container h1
    max-width: none

@media screen and (max-width: 1120px)
  .google-maps-image, span.hover-button.google-maps-btn
    display: none
  #map
    right: 0
    position: relative
  div.route-page
    div.page-column
      max-width: 600px

@media screen and (max-width: 1050px)
  div#footer
    height: 480px

  div.footer-column, div.footer-column.contact
    width: 40%
    margin: auto 5%
    left: 0

    height: 160px
    max-width: 350px
  div.footer-column.contact
    margin-right: 5%

  div.footer-column:nth-child(3), div.footer-column:nth-child(2)
    margin-bottom: 60px

@media screen and (max-width: 950px)
  div.banner-shadow
    display: none


@media screen and (max-width: 850px)
  .route-btn-label
    display: none
  #mobile-menu
    display: block
  div#background-bar
    height: 340px
  div#main-menu
    height: auto
  ul#main-menu
    display: none

  div#header
    height: 230px
  div#pay-off
    width: calc(100% - 185px)
  #route-btn
    display: none
  .mobile-route-btn
    display: inline-block

  ul#main-menu li
    float: none


@media screen and (max-width: 750px)
  div.thumb-row
    .block
      width: 100%
      max-width: 400px
      margin-left: auto
      margin-right: auto
      &:nth-child(3n + 3)
        margin-right: auto
      &:nth-child(2n + 2)
        margin-right: auto

@media screen and (max-width: 700px)
  div.home-text-column
    float: none
    width: 100%
  div.home-btn-column
    margin-top: 60px
    float: none

@media screen and (max-width: 560px)
  div#footer
    height: auto
  div.footer-column, div.footer-column.contact
    width: 90%
    float: none
    height: auto
    margin: auto 5% 60px 5%
    .footer-more
      position: relative
      margin-top: 10px
@media screen and (max-width: 500px)
  div.quote-holder
    left: 5%

  div#pay-off
    font-size: 23px
    top: 35px
  div#header
    height: 230px
  div#background-bar
    height: 380px
  #mobile-menu
    li
      width: calc((100% - 5px) /2)
      margin-right: 5px
      &:nth-child(3n+3)
        margin-right: 5px
      &:nth-child(2n+2)
        margin-right: 0

      a
        font-size: 13px


// Centered button for AB testing
div.page-column.centered-button-holder
  box-sizing: border-box
  padding-top: 100px
  float: right

  .hover-button.w306
    position: relative

  span.hover-button span.btn-text.large
    top: 30px