.header-photo
  //height: 100vh
  width: 100%
  background-image: url("/img/header-foto-1.jpg")
  background-position: center
  background-size: cover
  +flex(center, center)
  position: relative

  .overlay
    position: absolute
    top: 0
    left: 0
    height: 100%
    width: 100%
    background-color: $darkBlue
    opacity: 0.15

  .logo
    //padding: 12.5vh 0
    padding: 170px 0 130px

    h1
      +font-header(56px, 44px)
      color: white
      text-transform: uppercase
      text-align: center
      letter-spacing: 11.7px
      margin-bottom: 12px
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.25)

    h2
      +font-header(28px, 34px)
      color: white
      text-align: center
      letter-spacing: 3.5px
      text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25)

  .header-photo__content
    position: relative
    z-index: 2
    padding-bottom: 120px
    width: 100%

  .header-photo__buttons
    +flex(center, stretch)

  .header-photo__item
    width: 50%
    max-width: 360px
    padding: 25px
    text-align: center

  .header-photo__label
    margin: 0 0 15px
    +font-bold(20px, 24px)

  .header-photo__button
    display: inline-block
    width: 100%
    max-width: 225px

  .header-photo__item--blue
    background-color: $darkBlue

    .header-photo__label
      color: white

  .header-photo__item--beige
    background-color: $beige

    .header-photo__label
      color: $darkBlue

.more-info
  position: relative
  top: -110px
  margin-top: -57px
  cursor: pointer
  text-align: center
  a
    display: inline-block
    p
      +font-header(20px)
      color: white
      text-align: center
      margin: 0 0 5px

    span
      +sprite(0 -90px, 20px, 20px)
      margin: auto
      display: block
      +translate3dRotateScale(0, 0, 0, 0deg, 1)
      transform-origin: 50% 50%
      transition: all 0.3s
      position: relative

    &:hover
      span
        +translate3dRotateScale(0, 8px, 0, 0deg, 1.2)

.more-info--blue
  a
    span
      +sprite(-85px -135px, 20px, 20px)

.more-info--clean
  top: 0
  margin-top: 0

.landing-global-information
  background-image: url("/img/sky-background.jpg")
  background-size: cover
  background-position: center

  .main-info
    position: relative
    margin-top: -60px
    +flex(space-between, center)
    background-color: white


    .content
      padding: 60px 4% 80px
      width: $contentGrid*5

      h1
        +font-header(26px, 26px)
        color: $beige

      p
        +font-default(16px, 22px)
        color: $darkBlue

        &.intro
          +font-semi-bold(16px, 22px)

        em
          +font-default(16px, 22px)

    .image
      position: absolute
      right: 0
      top: 0
      height: 100%
      width: $contentGrid*7
      background-size: cover
      background-position: center
  .subscribe-mail-block
    position: relative
    //top: -100px
    width: $contentGrid*8
    margin: -40px auto 0
    padding: 60px 0
    background-color: $beige

    .text-row
      width: 80%
      margin: auto
      text-align: center
      //+flex(space-between, flex-start)

      //.left, .right
      //  width: 45%

      h3
        margin: 0 0 30px
        +font-semi-bold(46px, 48px)
        color: $darkBlue
        text-transform: uppercase

      .text
        color: $darkBlue

        p
          +font-default(20px, 26px)

      //.left
      //
      //  .map-button
      //    +font-bold(16px, 16px)
      //    color: $darkBlue
      //    cursor: pointer
      //    display: inline-block
      //    padding-bottom: 4px
      //    border-bottom: 2px solid $darkBlue
      //.right
      //  .text
      //    p
      //      margin: 0 0 20px

    .map
      width: 100%
      margin-top: 45px
      overflow: hidden
      transition: all 0.75s ease-in-out
      cursor: pointer
      &.in-active
        height: 0 !important
        margin-top: 0
      img
        width: 100%
    .subscribe-form
      .thanks
        width: 80%
        margin: auto
        padding: 40px 0
        max-width: 580px
        overflow: hidden
        transition: all 0.3s
        text-align: center

        h2
          +font-header(22px, 26px)
          color: $darkBlue
        p
          +font-default(18px, 24px)
          color: $darkBlue
          margin-bottom: 0

        &.inactive
          height: 0 !important
          padding: 0

    #subscribeMail
      width: 80%
      max-width: 480px
      margin: 40px auto 0
      +flex(flex-start, center)
      .form-element
        width: 59%
        display: inline-block
        transition: all 0.3s
        input
          height: 50px
          width: 100%
          +font-default(16px, 50px)
          font-style: italic
          background-color: #f3f3f3
          color: $darkBlue
          padding: 0 20px
          border: 1.5px white solid
          +placeholder
            +font-default(15px, 45px)
            color: rgba(0, 60, 78, 0.5)
          &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active
            transition: 9999s background-color
            -webkit-text-fill-color: $darkBlue
            transition-delay: 9999s

          &:focus
            box-shadow: none
            border: none
            border-radius: 0
            outline: none

          &.false
            border-color: $red
        &.success
          width: 0
      .submit
        width: 40%
        height: 50px
        +flex(center,center)
        background-color: $darkBlue
        transition: all 0.3s
        cursor: pointer
        p
          +font-header(20px, 20px)
          color: white
          margin: 0
          +flex(space-between, center)
          width: 75%
          transition: all 0.3s
          &:after
            content: ''
            +sprite(-25px -90px, 16px, 12px)
            display: inline-block
          span
            width: calc(100% - 20px)
            +font-header(20px, 20px)
            color: white
            +order(2)
        input
          display: none
        &:hover
          background-color: darken($darkBlue, 5%)
        &.success
          background-color: $green
          width: 100%
          cursor: auto
          max-width: none
          p
            &:after
              +order(1)

    .new-project-button
      border-radius: 9999px
      background-color: $orange
      height: 160px
      width: 160px
      +flex(center, center)
      position: absolute
      left: -12%
      bottom: -60px
      box-shadow: 10px 10px 30px 1px rgba(0,0,0,0.2)
      span
        text-align: center
        +font-header(30px, 36px)
        color: white
        transform: rotate(-12deg)

  .invest-row
    width: $contentGrid*8
    margin: auto
    padding-bottom: 100px
    +flex(space-between, flex-start)
    .content
      width: 45%
      margin-right: 5%
      h2
        +font-header(45px, 47px)
        color: white

        span
          +font-header(35px, 42px)
          color: $beige
      p
        +font-default(18px, 26px)
        color: white
        max-width: 325px

    .usp
      width: 50%
      ul
        list-style: none
        padding-left: 5px
        li
          +font-header(24px, 32px)
          color: white
          margin-bottom: 40px
          +flex(flex-start, center)
          &:last-of-type
            margin-bottom: 0
          span
            +flex(center, center)
            height: 45px
            width: 45px
            margin-right: 30px
            &:before
              content: ''
              display: inline-block

          &.reason1 span:before
            +sprite(0px -135px, 40px, 38px)

          &.reason2 span:before
            +sprite(-42px -135px, 40px, 38px)

          &.reason3 span:before
            +sprite(-130px -90px, 40px, 38px)
            position: relative
            right: -3px

  .more-info
    top: 0
    //top: -70px
    margin: 40px 0 60px
    padding-bottom: 0

    p
      color: $beige

.area-row
  margin-top: 120px
  .content-container
    +flex(space-between, flex-start)
    background-color: $beige
    position: relative

  .content
    padding: 140px 4% 40px
    width: $contentGrid*5
    margin-left: $contentGrid*7

    > h2
      +font-header(30px, 30px)
      color: white
      margin-bottom: 40px

    > p
      +font-default(16px, 22px)
      color: $darkBlue
      &.intro
        +font-semi-bold(16px, 22px)

  .image
    position: absolute
    right: 0
    left: 0
    height: 100%
    width: $contentGrid*7
    background-size: cover
    background-position: center

  .more-info
    margin-top: 60px

    a
      p
        color: $darkBlue



.landing-slider
  position: relative
  padding-bottom: 120px

  .background
    background-image: url("/img/sky-background-white.jpg")
    background-size: cover
    background-position: center
    opacity: 0.5
    position: absolute
    width: 100%
    height: 100%
    z-index: -1
    left: 0
    margin-top: -120px
    padding-bottom: 120px
    box-sizing: content-box
  .slider
    +flex(space-between, flex-start)
    position: relative
    height: 600px
    .nav
      width: 25%
      background-color: $darkBlue
      position: absolute
      height: 100%
      z-index: 2
      left: 0
      top: 0
      .nav-item
        height: 90px
        background-color: transparent
        +flex(center, center)
        cursor: pointer
        transition: all 0.3s
        p
          +font-header(24px, 30px)
          color: white
          padding: 0 15%
          display: block
          width: 100%
        &:hover
          background-color: darken($darkBlue, 5%)
        &.active
          background-color: $beige
    .slider-content
      width: 75%
      position: absolute
      right: 0
      top: 0
      height: 100%
    .content
      width: 100%
      height: 100%
      position: absolute
      right: 0
      top: 0
      opacity: 0
      background-position: center
      background-size: cover
      transition: all 0.4s

      &.active
        opacity: 1
        .text-holder
          z-index: 5
          +translate3d(0,0,0)
      .text-holder
        width: 44.4444444%
        background-color: rgba(0, 60, 78, 0.65)
        position: absolute
        left: 0
        top: 0
        height: 100%
        z-index: 2
        +translate3d(-60px, 0, 0)
        transition: all 0.4s
        +flex(center, center)

        .inner
          width: 85%
          h4
            +font-header(24px, 28px)
            color: white
          p
            +font-default(18px, 24px)
            color: white
          strong
            color: white
            +font-bold(18px, 24px)
            a
              +font-bold(18px, 24px)
              em
                +font-bold(18px, 24px)
                color: white
            em
              +font-bold(18px, 24px)
              color: white
          a
            color: white

  .mobile
    display: none
    .mobile-slider-items
      .header-image
        background-position: center
        background-size: cover
        height: 250px

      .text-holder
        padding: 35px 15%
        background-color: $darkBlue
        h4
          +font-header(24px, 28px)
          color: white
        p
          +font-default(18px, 24px)
          color: white
        strong
          color: white
          +font-bold(18px, 24px)
          em
            +font-bold(18px, 24px)
            color: white
          a
            +font-bold(18px, 24px)
            em
              +font-bold(18px, 24px)
              color: white
        a
          color: white
      &:nth-child(even)
        .text-holder
          background-color: $beige
          p
            color: $darkBlue
          strong
            color: $darkBlue
            +font-bold(18px, 24px)
            a
              +font-bold(18px, 24px)
              em
                +font-bold(18px, 24px)
                color: white
            em
              +font-bold(18px, 24px)
              color: white
          a
            color: $darkBlue
  &.slider-ouddorp
    padding-top: 120px
    padding-bottom: 60px
    .background
      background-image: url('/img/ocean-background.jpg')  
      padding-bottom: 0

    .more-info
      top: 0
      margin-top: 50px
      p
        color: $darkBlue
  &.slider-area

    .more-info
      top: 0
      margin-top: 70px
      p
        color: $darkBlue
      span
        +sprite(-85px -135px, 20px, 20px)

footer.landing
  background-color: $darkBlue
  padding: 100px 0

  .placeholder
    width: $contentGrid*10
    margin: auto
    position: relative
    +flex(space-between, flex-start)
    .contact-info
      width: 50%

      h3
        +font-header(28px, 21px)
        letter-spacing: 8.7px
        color: white
        text-transform: uppercase
        margin-bottom: 35px

      p
        +font-default(18px, 24px)
        color: white
        margin-bottom: 20px
        a
          +font-semi-bold(18px, 24px)
          color: $beige

    .copyright
      width: 50%
      position: absolute
      left: 0
      bottom: 0

      .komma
        opacity: 0.5
        transition: all 0.3s
        a
          +flex(flex-start, center)
          +font-default(18px, 21px)
          color: white
          max-width: 275px
          span
            +sprite(0 -112px, 20px, 20px)
            display: inline-block
            margin-right: 15px
        &:hover
          opacity: 0.85
      p
        +font-default(18px, 21px)
        color: white

    .contact-form
      width: 50%
      h3
        +font-default(18px, 21px)
        color: white
        margin-bottom: 40px
      .form
        padding: 0
        .form-element
          label, p, p a
            padding-left: 0
            +font-semi-bold(13px, 16px)
            color: $beige
          input
            margin-top: 5px

        .submit
          padding: 0
          display: inline-block
          input
            display: none

          p
            background-color: $beige
            height: 50px
            width: 200px
            +flex(space-between, center)
            cursor: pointer
            padding: 0 20px
            +font-header(20px, 20px)
            color: $darkBlue
            transition: all 0.3s
            span
              +sprite(-25px -105px, 18px, 15px)
              display: inline-block
            &:hover
              background-color: darken($beige, 10%)
      .thanks
        display: block
        &.inactive
          display: none
        h2
          +font-header(21px, 24px)
          color: white
          margin: 50px 0 15px
        p
          +font-default(18px, 24px)
          color: white
+media-query(1200px)
  .landing-global-information
    .invest-row
      width: $contentGrid*10
  .landing-slider
    .slider
      .nav
        width: 40%
      .slider-content
        width: 60%
        .text-holder
          width: 60%

+media-query(1150px)
  footer.landing
    .placeholder
      .contact-form
        .form
          .form-element.multiple-elements
            display: block
            margin-bottom: 0
            >*
              width: 100%
              margin-bottom: 30px

+media-query(1050px)
  .landing-global-information
    .subscribe-mail-block
      width: $contentGrid*10
    .invest-row
      .content
        h2
          +font-header(38px, 42px)

          span
            +font-header(32px, 42px)
  .landing-slider
    .slider
      .slider-content
        .text-holder
          width: 100%
+media-query(800px)
  .landing-global-information
    .content-container
      width: 90%
    .main-info
      +flex-rows
      .image
        position: relative
        width: 100%
        height: 350px

      .content
        +order(2)
        width: 100%
        padding: 45px 7.5%
    .more-info
      top: 30px
    .subscribe-mail-block
      width: $contentGrid*12
      top: 0
      margin-top: 80px
      padding-top: 60px
      .text-row
        //+flex-rows
        //.left, .right
        //  width: 100%
        //.left
        //  margin-bottom: 40px
      .new-project-button
        left: 20px
        bottom: auto
        top: -90px
        height: 130px
        width: 130px
    .invest-row
      margin-top: 100px
      display: block
      .content
        width: 100%
        text-align: center
        margin-bottom: 40px
        p
          max-width: none
      .usp
        width: 100%
        max-width: 365px
        margin: auto
  .area-row
    .content-container
      +flex-rows
    .image
      position: relative
      width: 100%
      height: 350px

    .content
      +order(2)
      width: 100%
      margin-left: 0
      padding: 45px 7.5%
+media-query(600px)
  .landing-global-information
    .main-info
      .image
        height: 250px
    .subscribe-mail-block
      #subscribeMail
        .submit
          p
            text-align: center
            display: block
            &:after
              display: none
  .landing-slider
    .slider
      display: none
    .mobile
      display: block
  footer.landing
    .placeholder
      display: block
      .contact-info
        width: 100%
        text-align: center
        margin-bottom: 60px
        h3
          font-size: 27px

      .copyright
        width: 100%
        position: relative
        text-align: center
        .komma
          a
            +flex(center, center)
            max-width: none
      .contact-form
        width: 100%
        margin-bottom: 60px
        p
          font-size: 15px
+media-query(500px)
  .landing-global-information
    .invest-row
      margin-top: 140px
      width: 100%
      .usp
        ul
          li
            +font-header(20px, 26px)
  .header-photo
    .logo
      h1
        font-size: 28px
        line-height: 21px
        letter-spacing: 8.7px
      h2
        font-size: 21px
        line-height: 24px
        letter-spacing: 1.8px
  .area-row
    .content-container
      width: 100%
  .landing-slider
    .mobile
      width: 100%

+media-query(450px)
  .landing-global-information
    .subscribe-mail-block
      #subscribeMail
        display: block
        .form-element
          width: 100%
        .submit
          width: 100%
          max-width: 185px
          margin-left: auto
          p
            +flex(space-between, center)
            &:after
              display: inline-block