// Load default settings and styling
@import ../../assets/sass/global/global

// Expend/overrule configuration
@import ../../assets/sass/site/config
@import ../../assets/sass/site/base
@import ../../assets/sass/site/mixins/mixins
@import ../../assets/sass/site/mobile/navigation


$blue : #0275D8
$darkBlue : #0268BF
$darkestBlue : #0F162A
$lightGrey : #F5F6F8
$yellow : #FFD756

body
  font-family: 'Hind', sans-serif
  font-size: 14px
  background-color: transparent

  a
    text-decoration: none
    color: white

    &:hover
      color: $yellow

  header
    .top-bar
      background-color: $blue
      height: 60px
      position: fixed
      z-index: 5

      .grid-col
        width: 100%
        height: 100%

      .content
        padding-top: 18px
        .left, .right
          width: 55%
          color: white
          font-size: 14px
          letter-spacing: 0.28px

          .line
            display: inline-block
            width: 15px
            margin: 0 15px 4px 15px
            height: 0
            border-bottom: solid 1px white

        .right
          width: 45%
          text-align: right

        .clock, .phone
          display: inline-block
          width: 15px
          height: 15px
          margin-right: 15px
          position: relative
          top: 2px

        .clock
          top: 3px

    nav#main-navigation,
    nav#sticky-navigation
      background-color: $lightGrey
      height: 210px

      .grid-col
        padding-top: 60px
        width: 100%
        height: 100%

      .menu
        height: 100%
        +flex(space-between, center)

        .logo
          height: 110px
          margin-left: column(0.5, 12)

        .links
          width: 100%
          text-align: right
          a
            font-size: 16px
            letter-spacing: 0.32px
            text-transform: uppercase
            color: #0A122A
            margin-left: column(1, 12)
            position: relative

            &:after
              content: ''
              display: block
              position: absolute
              left: 0
              bottom: -2px
              width: 0
              height: 5px
              z-index: 1
              background-color: $yellow
              transition: width 0.2s ease-in

            &:hover, &.active
              &:after
                width: 100%

    nav#sticky-navigation
      position: fixed
      top: 60px
      height: 100px
      opacity: 0
      z-index: 4
      transform: translate3d(0, -100px, 0)
      box-shadow: 0 10px 20px -5px rgba(0,0,0,0.1)
      transition: transform 0.3s, opacity 0.3s

      .grid-col
        padding-top: 0

      .menu
        .logo
          height: 80px

      &.active
        opacity: 1
        transform: translate3d(0, 0, 0)

  .img-header
    height: 500px
    background: transparent url(../img/header-3.jpg) no-repeat center center
    background-size: cover
    position: relative
    +flex(center, center)
    flex-direction: column

    &:after
      content: ""
      position: absolute
      width: 100%
      height: 100%
      left: 0
      top: 0
      background-color: #0F0619
      opacity: 0.7
      z-index: 0

    h1
      z-index: 2
      color: white
      text-transform: uppercase
      position: relative

    .line
      width: 60px
      border-bottom: solid 5px $yellow
      position: relative
      z-index: 2
      margin-bottom: 60px

    .buttons
      a.button
        z-index: 2
        background-color: white
        color: #0A122A
        position: relative
        height: 40px
        width: 180px
        padding-top: 20px
        text-align: center
        border: none
        cursor: pointer
        transition: background-color 0.3s

        &:hover
          background-color: darken($lightGrey, 10%)

        &:last-child
          margin-left: 30px
          background-color: $blue
          color: white

          &:hover
            background-color: darken($blue, 10%)


    .truck-logo
      display: inline-block
      position: absolute
      right: 10px
      bottom: 10px
      z-index: 2

  section
    .grid-col
      width: 100%

    h2
      width: 100%
      font-size: 20px
      text-align: center
      margin-bottom: 0
      text-transform: uppercase

    span.subtitle
      display: block
      width: 100%
      text-align: center
      color: $blue
      font-family: 'Open Sans', sans-serif
      font-size: 14px
      letter-spacing: -0.07px
      line-height: 1.6

    .line
      width: 60px
      border-bottom: solid 5px $yellow
      position: relative
      z-index: 2
      margin: 15px auto 30px auto

    &#aanbod
      padding-top: 115px
      .line
        margin-bottom: 45px
      .items-holder
        width: column(10, 12)
        margin-left: column(1, 12)
        +flex(space-between, center)
        flex-wrap: wrap

        .item
          width: column(4.5, 10)
          height: 300px

          .icon-holder
            display: inline-block
            width: column(0.5, 4.5)
            height: 100%
            vertical-align: top

            img
              width: 40px
              height: 40px

          .content
            display: inline-block
            width: column(3.9, 4.5)
            font-size: 16px
            line-height: 24px
            letter-spacing: -0.08px

            h3
              font-size: 18px
              font-weight: semibold()
              margin: 0

            p
              font-family: 'Open Sans', sans-serif
              a
                color: $blue

                &:hover
                  color: darken($darkBlue, 10%)

    &#offerte
      height: 430px
      .content
        background-color: $lightGrey
        width: column(10, 12)
        margin-left: column(1, 12)
        padding: 60px column(2, 12)

        .form-left, .form-right
          width: column(2.5, 6)

          label, input, textarea
            width: 100%
            
          label
            font-size: 12px
            line-height: 26px
            letter-spacing: -0.06px
            color: #0A122A

          span.error
            color: red
            font-size: 12px
            line-height: 26px
            float: right
            padding-top: 2px

          input, textarea
            padding: 14px
            border: none
            margin-bottom: 15px

            +placeholder
              color: #CACACC

          textarea
            height: 120px
            margin-bottom: 40px

        .form-right
          margin-left: column(1, 6)

          .button
            width: column(1.5, 2.5)
            background-color: $blue
            text-align: center
            cursor: pointer

            &:hover
              background-color: $darkBlue

    &#contact
      padding: 120px 0

      .content
        width: column(10, 12)
        margin-left: column(1, 12)
        height: 350px

        .left
          width: column(7, 10)
          height: 100%

          .map
            height: 100%
            width: 100%
            background-color: $lightGrey

        .right
          width: column(3, 10)
          background-color: $blue
          height: 100%
          padding-left: column(0.5, 12)
          color: white

          h2
            font-weight: bold
            font-size: 20px
            line-height: 68.9px
            letter-spacing: 0.4px
            text-transform: uppercase
            text-align: left
            padding-left: 30px

          .line
            margin-left: 30px

          img
            width: 15px
            height: 13px
            display: inline-block
            vertical-align: top
            margin: 6px 15px 0 0

          p
            display: inline-block
            margin: 0
            font-size: 16px
            line-height: 28px
            letter-spacing: -0.08px
            width: 80%

            a
              color: white

    &#button-block
      height: 100px
      margin-bottom: 180px

      .grid-col
        height: 100%

        .content
          width: column(10, 12)
          margin-left: column(1, 12)
          height: 100%

          .left, .right
            width: 50%
            background-color: $blue
            height: 100%
            padding: 30px column(0.6, 10)
            color: white
            font-size: 20px
            letter-spacing: 0.4px

            &:hover
              background-color: darken($blue, 3%)

            a
              display: block
              width: 100%
              height: 100%
              +inline-flex(space-between, center)
              color: white

              img
                width: 25px
                height: 25px
                display: inline-block
                vertical-align: top
                margin: 0

                &.mail
                  width: 23px
                  height: 16px

              .arrow_up
                width: 20px
                height: 10px

              p
                display: inline-block
                margin: 0
                font-size: 18px
                letter-spacing: 0.36px

                span.yellow
                  color: $yellow

          .right
            background-color: $darkBlue

            &:hover
              background-color: darken($darkBlue, 3%)

  footer
    background-color: $darkestBlue
    color: white
    width: 100%

    .grid-col
      height: 100%
      width: 100%

      .content
        width: column(10, 14)
        margin-left: column(1, 14)
        padding: 40px 0 60px 0
        height: 100%

        p
          display: block
          width: 100%

        .logo-container
          width: column(2, 10)
          margin-right: column(2, 10)

          img
            width: 100%
            vertical-align: top

        .menu-container,
        .aanbod-container,
        .contact-container
          width: column(2, 10)
          
          h2
            font-size: 16px
            line-height: 68.9px
            letter-spacing: 0.32px
            text-transform: uppercase
            color: #FFD756

          a, p
            display: block
            font-size: 16px
            line-height: 28px
            letter-spacing: -0.08px
            color: #FFFFFF
            margin: 0


+respond-to-width(1250)
  body
    section
      &#contact
        .content
          .left
            width: column(6, 10)
          .right
            width: column(4, 10)

      &#aanbod
        .items-holder
          .item
            .icon-holder
              width: column(0.75, 4.5)

            .content
              width: column(3.65, 4.5)


+respond-to-width(1100)
  body
    .img-header
      h1
        font-size: 55px
        line-height: 1.05

    section
      &#offerte,
      &#contact,
      &#button-block
        .grid-col
          .content
            width: 100%
            margin-left: 0

+respond-to-width(840)
  body
    & > .grid-row
      width: 100%

    .img-header
      h1
        font-size: 44px
      .line
        margin-bottom: 40px

    header
      nav#main-navigation,
      nav#sticky-navigation
        display: none

    section
      &#aanbod
        padding-top: 30px
        .items-holder
          .item
            width: 100%
            height: auto
            padding: 20px 0

            .icon-holder
              width: column(0.5, 4.5)

            .content
              width: column(3.9, 4.5)

      &#offerte
        height: auto
        .content
          padding: 60px column(1, 12)
          .form-left,
          .form-right
            width: 100%
            margin-left: 0

      &#contact
        padding: 0 0 2px 0
        .grid-col
          .content
            height: auto
            +flex(space-between, center)
            flex-direction: column-reverse
            .left, .right
              width: 100%
              height: auto

            .left
              height: 300px
              border-top: solid 1px $darkBlue

            .right
              .contact-header,
              .contact-details
                width: 49%
                display: inline-block
                vertical-align: top

              .contact-details
                padding: 40px 0

              p
                width: 85%

      &#button-block
        margin-bottom: 2px
        .grid-col
          .content
            .left, .right
              padding: 30px 5%

    footer
      display: none


+respond-to-width(670)
  body
    section
      &#contact
        .grid-col
          .content
            .right
              .contact-header
                h2, .line
                  padding-left: 0
                  margin-left: 0

      &#button-block
        height: 200px
        .grid-col
          .content
            .left, .right
              width: 100%
              height: 100px

+respond-to-width(540)
  body
    .img-header
      height: 400px
      h1
        font-size: 34px

    section
      &#contact
        .grid-col
          .content
            .right
              .contact-header
                width: 39%
                h2, .line
                  padding-left: 0
                  margin-left: 0
              .contact-details
                width: 59%

+respond-to-width(435)

  p
    font-size: 14px

  body
    #mobile-navigation
      .bar
        .cart
          a
            span
              display: none

    .img-header
      height: 400px
      h1
        font-size: 24px

      .line
        margin-top: 10px
        margin-bottom: 30px

      .buttons
        text-align: center
        a.button
          display: block
          &:last-child
            margin-left: 0
            margin-top: 30px


    section
      &#aanbod
        .items-holder
          .item
            .icon-holder
              position: absolute
              img
                width: 30px
                height: 30px
            .content
              width: 100%
              font-size: 14px
              h3
                font-size: 22px
                margin: 2px 0 20px 50px

      &#offerte
        .grid-col
          .content
            padding: 30px column(1, 12)

            .line
              margin: 25px auto 30px auto

      &#contact
        .grid-col
          .content
            .right
              padding-left: 0
              .contact-header,
              .contact-details
                width: 100%


              .contact-header
                h2, .line
                  margin: 0 auto
                  text-align: center

              .contact-details
                padding-left: 20px