/*==========================================================================
  Contact page
  ========================================================================== */
body.customerservice
  position: relative
  &:before
    content: ''
    position: absolute
    display: block
    right: 0
    bottom: 774px
    width: 648px
    height: 648px
    background: url('/img/svg/big_hamer.svg')
    background-size: 130%
    background-position: 170% -25%
    background-repeat: no-repeat
    transform: scaleX(-1)

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

  .side-block
    &.first, &.second
      display: none

    &.last
      margin-top: 60px

  div.customerservice-header
    width: 100%
    position: relative

    h1
      color: #2D323C
      font-size: 26px
      font-weight: 600
      line-height: 41px
      margin-top: 15px
      margin-bottom: 30px
      width: 80%
      display: inline-block

    a.button
      display: inline-block
      position: absolute
      right: 0
      margin-top: 15px

  .customerservice-content
    background-color: white
    box-shadow: 2px 2px 15px 5px rgba(22,57,95,0.05)
    margin-bottom: 30px
    padding: 30px 0 0 30px
    width: 100%

    > .grid-row
      width: 100%
      +flex(space-between, flex-start)

      .left, .right
        vertical-align: top

        h3
          color: #696E78
          font-size: 15px
          font-weight: 600
          line-height: 24px
          text-transform: uppercase

      .left
        width: 70%
        max-width: 550px
        padding-bottom: 30px
        overflow: visible
        ul
          list-style: none
          padding: 0
          li
            cursor: pointer
            a.button
              width: 90%
              padding-left: 5px
              color: $blue
              border-radius: 0
              border: none
              border-bottom: solid 2px $euroLighterGrey
              cursor: pointer

              &:after
                transition: transform 0.3s
                right: 10px
                background-image: url("/img/svg/arrow/arrow_blue.svg")

              &:hover
                color: $blue
                background-color: darken(white, 5%)
                box-shadow: none
                transform: none
                border: none
                border-bottom: solid 2px $euroLighterGrey
                margin-bottom: 0

                &:after
                  background-image: url("/img/svg/arrow/arrow_blue.svg")
                  transform: rotate(90deg)

            &.open
              .item-content
                height: auto
                padding: 10px 30px
                margin: 0 1%

                p, ul
                  opacity: 1

              a.button
                &:after
                  transform: rotate(90deg)

            +respond-to-width(425)
              .item-content
                height: auto
                padding: 10px 30px
                margin: 0 1% 20px 1%

                p, ul
                  opacity: 1

        h2
          color: #3C414B
          font-size: 20px
          font-weight: 600
          line-height: 32px
          margin-top: 0

        p, ul
          color: #696E78
          font-size: 16px
          line-height: 24px

        a.button
          width: 140px
          border: solid 1.5px $euroLighterGrey

          &:hover
            border:  solid 1.5px transparent

        .item-content
          background-color: $euroOffWhite
          width: 88%
          height: 0
          padding: 0 30px
          box-shadow: inset 0 3px 10px 0 rgba(0,0,0,0.05)
          margin: 0 1%
          transition: height 0.4s, margin 0.4s, padding 0.4s

          p
            margin: 0
            opacity: 0
            transition: opacity 0.4s

          ul
            list-style-type: square
            padding-left: 1rem
            opacity: 0
            transition: opacity 0.4s

      .right
        width: 30%
        .img-holder
          img
            transform: scaleX(-1)


+respond-to-width(1100)
  body.customerservice
    .customerservice-content
      padding-right: 30px
      > .grid-row
        .left
          width: 100%
          ul
            li
              a.button
                width: 100%

          .item-content
            width: 98%

        .right
          display: none
          margin-left: 0

+respond-to-width(950)
  body.customerservice
    .customerservice-header
      padding: 0 30px
      a.button
        right: 30px
    .customerservice-content
      padding-right: 0

      > .grid-row
        .right
          display: inline-block
          width: 60%

+respond-to-width(640)
  body.customerservice
    .customerservice-content
      padding-right: 30px
      > .grid-row
        .right
          display: none

+respond-to-width(425)
  body.customerservice
    .customerservice-header
      padding-left: 20px
    .customerservice-content
      margin-bottom: 0
      padding-left: 20px
      padding-right: 20px

      > .grid-row
        .left
          ul
            li
              a.button
                padding-left: 15px
                pointer-events: none
                background-color: #f2f2f2
                &:after
                  display: none
              &.open
                .item-content
                  padding: 10px 15px