/* ==========================================================================
   Home page
   ========================================================================== */
body.home
  background-color: $neutral-200

  +respond-to-width-beyond(960)
    overflow-x: hidden

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

      .content-block,
      .two-text-columns
        +flex(space-between, center)
        margin-top: 0
        height: 100%

        .kms-content
          order: inherit
          overflow: visible


  .experience
    margin-top: 0
    background-color: white
    //height: 895px
    position: relative
    padding: 200px 0 165px

    .kms-content
      margin-bottom: 60px

    h2
      color: $blue
      font-size: 2rem
      font-weight: 500
      line-height: 2.875rem
      position: relative
      z-index: 1

      &:after
        content: ''
        display: block
        position: absolute
        width: 300px
        height: 300px
        background-image: url('/img/circles_and_triangles.png')
        top: -95px
        left: -120px
        opacity: 0.5
        z-index: 0
        pointer-events: none

    .dynamic-block.content-block
      .content
        width: column(4, 12)

    p
      color: $pastelBlue
      font-size: 1.125rem
      line-height: 2rem
      margin-bottom: 30px

    a.button
      background-color: $blue-300
      color: white
      text-decoration: none
      font-size: 1rem
      font-weight: 500
      line-height: 1.1875rem
      padding: 15.5px 20px

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

    .image
      width: 50%
      height: 100%
      position: absolute
      right: 0
      top: 0
      figure
        display: block
        width: 100%
        max-width: 850px
        height: 100%
        background-size: cover
        background-position: center center

        img
          display: none
          width: 100%
          max-width: 450px
          margin: 0 auto


  .solutions
    background-color: $neutral-200

    > .grid-col
      > .grid-row
        padding: 120px 0

    h2
      color: $blue
      font-size: 2rem
      font-weight: 500
      line-height: 2.875rem

    p
      color: $pastelBlue
      font-size: 1.125rem
      line-height: 2rem
      margin-bottom: 30px

    ul
      list-style: none
      width: column(3, 6)

      +respond-to-width(1440)
        width: column(4, 6)

      li
        color: $blue-700
        font-size: 1.125rem
        line-height: 2rem
        margin-bottom: 30px
        position: relative

        &:before
          content: ''
          margin-top: 7px

          width: 0
          height: 0
          border-bottom: 16px solid $blue-300
          border-left: 16px solid transparent

    a.button
      background-color: $blue-300
      color: white
      text-decoration: none
      font-size: 1rem
      font-weight: 500
      line-height: 1.1875rem
      padding: 15.5px 20px
      &:hover
        background-color: lighten($blue-300, 10%)

  .product-icons
    padding: 130px 0 30px 0

    background: $blue url('/img/circles_and_triangles.png') repeat
    background-image: url('/img/circles_and_triangles.png'), linear-gradient(0deg, $blue-300 0%, $blue 100%)

    > .grid-col
      overflow: visible
      > .grid-row
        overflow: visible
        position: relative

        .title-holder
          width: column(0.5, 12)
          overflow: visible

          h3
            color: white
            font-size: 1.5rem
            font-weight: bold
            line-height: 2rem


          .diagonal-line
            width: 160px
            left: -26%
            top: 53%

            &.second
              width: 300px
              left: -88%
              top: 103%

        .icon-holder
          position: relative
          z-index: 21
          width: column(11, 12)
          .grid-row
            width: 100%
            +flex(center, center)
            flex-wrap: wrap

            a
              margin: 0 7% 100px 7%
              position: relative
              cursor: pointer

              .icon
                position: relative
                display: block
                width: 175px
                height: 175px
                border-radius: 50%
                background-color: $blue-300
                +flex(center, center)

                &:after
                  content: ''
                  position: absolute
                  opacity: 0
                  top: 0
                  left: 0
                  height: 100%
                  width: 100%
                  border-radius: 50%
                  background-color: $semiLightBlue
                  background-position: center center
                  background-repeat: no-repeat
                  background-size: 17.5%
                  background-image: url("/img/svg/arrow_white.svg")
                  transition: opacity 0.3s

              &.lasercutting .icon svg
                width: 45px
                max-height: 82px

              &.folding .icon svg
                width: 47px
                max-height: 84px

              &.punching .icon svg
                width: 58px
                max-height: 77px

              &.sheetwork .icon svg
                width: 43px
                max-height: 76px

              &.welding .icon svg
                width: 66px
                max-height: 77px

              &.montage .icon svg
                width: 67px
                max-height: 59px

              &.various-operations .icon svg
                width: 50px
                max-height: 52px

              &.punchlaser .icon svg
                width: 66px
                max-height: 77px

              &.logistic .icon
                left: -8px
                svg
                  width: 85px
                  max-height: 45px

              label
                display: block
                margin-top: 20px
                color: $pastelBlue
                font-size: 1.125rem
                line-height: 1.2
                text-align: center
                width: 100%
                cursor: pointer
                transition: color 0.3s

              &:hover
                .icon
                  &:after
                    opacity: 1

                label
                  color: white

        .floating-triangle
          position: absolute
          display: block
          width: 71px
          height: 71px
          bottom: -71px
          margin-left: column(-1, 12)


  .dual-display
    background-color: white
    > .grid-col
      > .grid-row
        padding: 120px 0
        position: relative
        +flex()

        &:after
          content: ''
          position: absolute
          display: block
          top: 33%
          right: 16.25%
          width: 50vw
          height: 625px
          opacity: 0.5
          z-index: 0
          +transform(rotate(135deg) skew(-45deg))
          background-color: $blue-300

          +respond-to-width(1085)
            right: -126px

          +respond-to-width(768)
            display: none

        .job-holder, .project-holder
          position: relative
          overflow: visible
          z-index: 1
          width: column(5.5, 12)
          background-color: white
          text-decoration: none
          color: $pastelBlue
          box-shadow: 0 0 100px 0 rgba(0,40,105,0.2)
          transition: all 0.3s


          h3
            position: relative
            overflow: visible
            width: 100%
            color: white
            font-size: 1.125rem
            font-weight: normal
            line-height: 2rem
            padding: 22px 30px
            margin: 0
            background-color: $blue-300

            span.counter
              position: absolute
              top: -1rem
              right: -1rem

          .job, .project
            padding: 60px
            position: relative
            overflow: hidden

            figure
              display: block

              img
                width: 100%

            h4
              color: $blue
              font-size: 1.5rem
              font-weight: bold
              line-height: 2rem
              margin-bottom: 10px

            p.description
              margin-top: 0
              color: $pastelBlue
              font-size: 1rem
              line-height: 1.4

            p.description--more
              font-size: 1.2rem

          .more
            display: block
            overflow: hidden
            position: absolute
            right: 0
            bottom: 0
            width: 160px
            height: 160px

            .more-button-placeholder
              position: absolute
              right: -76px
              bottom: -35px
              width: 213px
              height: 127px
              background-color: rgba($blue-300, 0.2)
              transform: rotate(-45deg)
              +flex(center, center)
              flex-direction: column
              cursor: pointer

              color: $pastelBlue
              font-size: 0.75rem
              font-weight: bold
              letter-spacing: 1px
              line-height: 1rem
              text-transform: uppercase
              transition: background-color 0.3s, color 0.3s

              .arrow-down
                width: 0
                height: 0
                border-left: 10px solid transparent
                border-right: 10px solid transparent
                border-top: 10px solid $blue-300
                margin-top: 10px
                transition: border 0.3s

          &:hover
            background-color: #edf3fd
            box-shadow: 0 0 100px 0 rgba(0,40,105,0)

            .more
              .more-button-placeholder
                color: white
                background-color: $blue-300

                .arrow-down
                  border-top-color: white

        .project-holder
          margin-left: column(0.5, 12)

+respond-to-width(1400)
  body.home
    .product-icons
      padding-top: 80px
      > .grid-col
        > .grid-row
          .title-holder
            width: 100%
            display: block
            margin-bottom: 40px

            h3
              text-align: center
              margin-bottom: 60px

            .diagonal-line
              left: 0

              &.second
                left: 0

          .icon-holder
            width: 100%

+respond-to-width(960)
  body.home
    > .grid-row
      > .grid-col
          width: 100%
          height: auto

          .two-text-columns
            padding: 30px 0 60px 0
            flex-direction: column

    .experience
      padding: 0
      +flex(flex-end, center)
      flex-direction: column-reverse
      height: auto

      > .grid-col
        height: auto

        .content-block
          margin-top: 20px

          .content
            width: 100%
            //margin-left: auto
            //margin-right: auto

      .image
        position: relative
        height: auto
        width: 100%

        figure
          max-width: none
          background-image: none !important

          img
            display: block
            margin-top: 40px

            +respond-to-width(550)
              max-width: none
              margin-top: 0


    .solutions
      .grid-col
        > .grid-row
          .list
            +order(2)
            margin-top: 60px


      ul
        width: 100%

        +respond-to-width-beyond(800)
          +flex()
          flex-wrap: wrap

          li
            width: 45%

        li

          p
            margin: 0 !important


    .dual-display
      > .grid-col
        > .grid-row
          padding: 60px 0
          flex-wrap: wrap
          .job-holder,
          .project-holder
            width: 100%
            margin-bottom: 60px
          .project-holder
            margin-left: 0
            margin-bottom: 0


+respond-to-width(700)
  body.home
    .product-icons
      > .grid-col
        > .grid-row
          .icon-holder
            .grid-row
              a
                margin-bottom: 60px

                .icon
                  width: 140px
                  height: 140px
                  margin-bottom: 10px

                label
                  position: relative
                  display: block
                  text-align: center
                  max-width: 140px

+respond-to-width(425)
  body.home
    .solutions
      ul
        li
          width: 100%

    .product-icons
      > .grid-col
        > .grid-row
          width: 100%

          .icon-holder
            .grid-row
              width: 100%
              display: block

              a
                display: block
                max-width: 140px
                margin-left: auto
                margin-right: auto

                .icon
                  margin-left: auto
                  margin-right: auto

          .floating-triangle
            bottom: 0

    .dual-display
      > .grid-col
        > .grid-row
          width: 100%
          padding: 1px 0

          .job-holder,
          .project-holder
            margin-bottom: 0

            .job,
            .project
              padding: 30px 30px 60px 30px


          .job-holder
            a
              h3
                span.counter
                  top: calc(50% - 1rem)
                  right: 1rem