body.production,
body.lasercutting,
body.punching,
body.folding,
body.sheetwork,
body.welding,
body.montage,
body.punchlaser,
body.various-operations,
body.logistic
  .product-icons
    background: $blue-300 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
        position: relative
        overflow: visible
        +flex(flex-start, flex-start)
        min-height: 650px

        .production-sub &
          min-height: 560px

        .list-holder
          width: 50%
          position: relative
          padding: 100px 20px 70px 0

          a.button
            position: absolute
            top: 0
            right: 0
            background-color: $semiLightBlue
            min-width: 240px
            &:hover
              background-color: lighten($semiLightBlue, 10%)
              &:after
                right: 22px
                transform: rotate(90deg) scale(1.2)
            &:after
              transform: rotate(90deg)

          p
            color: white
            font-size: 1.375rem
            font-weight: 500
            line-height: 2rem

          ul
            list-style: none
            margin: 0

            li
              color: white
              font-size: 1.375rem
              font-weight: 500
              line-height: 2rem
              padding-left: 45px
              position: relative

              + li
                margin-top: 30px

              &:before
                content: ''
                position: absolute
                left: -16px
                margin-top: 7px

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


        .bottom-triangle
          display: block
          width: 90px
          height: 90px
          position: absolute
          bottom: -45px
          left: -30px
          z-index: 2

        .icon-holder
          width: 50%
          position: relative
          padding: 100px 0 70px 0

          a.button
            position: absolute
            top: 0
            right: 0
            background-color: $semiLightBlue
            cursor: pointer
            min-width: 240px
            &:hover
              background-color: lighten($semiLightBlue, 10%)
              &:after
                right: 22px
                transform: rotate(90deg) scale(1.2)
            &:after
              transform: rotate(90deg)

          .grid-row
            width: 100%
            +flex(space-between, center)
            flex-wrap: wrap

            a
              text-decoration: none
              width: 40%
              margin: 0 5% 35px 0
              +flex(flex-start, center)

              &:nth-child(even)
                margin: 0 15% 35px 0

              .icon
                position: relative
                +flex(center, center)
                width: 125px
                height: 125px
                border-radius: 50%
                background-color: $blue-300
                margin-right: 15px
                flex-shrink: 0

                &: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

                &:hover
                  &:after
                    opacity: 1

                svg
                  //height: 100%
                  width: 100%

              &.lasercutting .icon svg
                width: 32px
                max-height: 58px

              &.folding .icon svg
                width: 34px
                max-height: 61px

              &.punching .icon svg
                width: 42px
                max-height: 56px

              &.sheetwork .icon svg
                width: 32px
                max-height: 57px

              &.welding .icon svg
                width: 45px
                max-height: 53px

              &.montage .icon svg
                width: 53px
                max-height: 47px

              &.various-operations .icon svg
                width: 42px
                max-height: 44px

              &.punchlaser .icon svg
                width: 49px
                max-height: 57px

              &.logistic .icon
                left: -6px
                svg
                  width: 69px
                  max-height: 36px

              label
                color: $pastelBlue
                font-size: 1.125rem
                line-height: 1.4rem
                display: inline-block
                cursor: pointer


        .image-holder
          position: absolute
          right: column(-1, 12)
          top: 0
          width: column(7, 12)
          height: 100%
          overflow: visible

          figure
            display: block
            width: 100%
            height: 100%
            background-size: cover
            background-position: center center

            img
              width: 100%
              display: none

.product-specs
  background-color: white
  > .grid-col
    overflow: visible
    > .grid-row
      overflow: visible
      .specs-holder
        padding: 115px column(2, 12)
        height: 100%
        width: 100%

        +respond-to-width(1222)
          padding: 115px column(1, 12)

        .spec-header
          position: relative
          +flex(space-between, center)
          padding-bottom: 30px
          border-bottom: 1.5px solid $semiLightBlue

          h2
            margin: 0
            color: $blue
            font-size: 2rem
            font-weight: 500

        .spec-content
          table
            width: 100%
            border-spacing: 0
            tbody
              //+flex(space-between, flex-start)
              //flex-wrap: wrap
              tr
                width: 100%
                margin: 0
                padding: 0
                list-style: none
                border-bottom: 0.5px solid $semiLightBlue
                +flex(space-between, flex-start)

                td
                  vertical-align: top
                  margin: 0
                  padding: 18px 0 15px
                  color: $pastelBlue
                  font-size: 1.125rem
                  line-height: 2rem
                  align-self: stretch
                  width: 30%
                  //border-bottom: 0.5px solid $semiLightBlue

                  &:nth-child(2)
                    font-weight: bold
                    line-height: 2rem

                  &:last-child
                    width: 40%

                  p
                    margin: 0

        .button
          background-color: $semiLightBlue
          border: none
          width: 200px
          padding: 12.5px 20px

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

          &.spec-mobile-machinepark
            display: none
            margin-top: 40px
            width: 100%

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

            &.spec-mobile-machinepark
              display: block


+respond-to-width(1500)
  body.production,
  body.lasercutting,
  body.punching,
  body.folding,
  body.sheetwork,
  body.welding,
  body.various-operations,
  body.montage
    .product-icons
      > .grid-col
        > .grid-row
          .icon-holder
            .grid-row
              +flex(center, center)
              a
                //width: 125px
                +flex(center, center)
                flex-wrap: wrap
                margin: 0 5% 35px 0

                &:nth-child(even)
                  margin: 0 5% 35px 0

                .icon
                  margin-right: 0

                label
                  display: block
                  margin-top: 10px
                  width: 100%
                  text-align: center




+respond-to-width(960)
  body.production,
  body.lasercutting,
  body.punching,
  body.folding,
  body.sheetwork,
  body.welding,
  body.montage,
  body.punchlaser,
  body.various-operations,
  body.logistic
    .product-icons
      > .grid-col
        > .grid-row
          flex-direction: column
          width: 100%
          min-height: 0

          .list-holder
            width: 100%
            padding: 80px column(1)

            ul
              padding: 0

              li
                padding-left: 60px

                &:before
                  left: 0

          .icon-holder
            padding: 90px column(1) 60px column(1)
            width: 100%
            .grid-row
              +flex(center, center)
              a
                width: 125px
                +flex(center, center)
                flex-wrap: wrap
                margin: 0 5% 60px 5%

                &:nth-child(even)
                  margin: 0 5% 60px 5%

                .icon
                  margin-right: 0

                label
                  display: block
                  width: 100%
                  text-align: center

          .image-holder
            position: relative
            right: 0
            width: 100%
            height: auto

            &.subpage
              height: auto

            figure
              height: auto
              background-image: none

              img
                display: block

  .product-specs
    > .grid-col
      > .grid-row
        .specs-holder
          padding: 115px 0
          .spec-content
            table
              tbody
                tr
                  flex-wrap: wrap
                  //width: 45%
                  padding: 20px 0

                  &:last-child
                    border-bottom: 1.5px solid $semiLightBlue

                  td
                    //width: 100%
                    padding: 10px 0

+respond-to-width(725)
  .product-specs
    > .grid-col
      > .grid-row
        .specs-holder
          .spec-header
            height: auto
            a.button
              position: relative
          .spec-content
            table
              tbody
                tr
                  width: 100%
                  td,
                  td:last-child
                    width: 100%
                    display: block
                    border-bottom: none

                  td
                    padding: 0

                    &:first-child
                      padding-top: 5px
                    &:last-child
                      padding-bottom: 5px
                      //border-bottom: 0.5px solid $kemiBlue-100



+respond-to-width(425)
  body.production,
  body.lasercutting,
  body.punching,
  body.folding,
  body.sheetwork,
  body.welding,
  body.montage,
  body.punchlaser,
  body.various-operations,
  body.logistic
    header
      min-height: 160px

    .product-icons
      > .grid-col
        > .grid-row

          .icon-holder
            padding-bottom: 20px

          .list-holder
            padding-bottom: 40px


+respond-to-width(360)
  body.production,
  body.lasercutting,
  body.punching,
  body.folding,
  body.sheetwork,
  body.welding,
  body.montage,
  body.punchlaser,
  body.various-operations,
  body.logistic
    .product-icons
      > .grid-col
        > .grid-row
          .list-holder
            padding-left: 5%