.contact-button
  position: absolute
  z-index: 100
  right: 140px
  bottom: 80px
  height: 60px
  width: 60px
  border-radius: 20px 20px 0 0
  background: white

  a
    position: relative
    +flex(center, center)
    width: 100%
    height: 100%

    span
      position: absolute
      +flex(center, center)
      right: 10px
      top: 14px
      width: 16px
      height: 16px
      background-color: $red
      border-radius: 100%
      font-size: 12px
      line-height: 1
      font-weight: bold
      color: white
      opacity: 1
      transform: scale3d(1,1,1)
      transition: all 0.5s ease 1s, background-color 0.2s

    p
      display: none
      color: $darkGray
      font-family: din()
      line-height: 1
      margin: 0 0 -7px 20px

    &:before
      content: ''
      position: relative
      top: 2px
      display: block
      +sprite(-33px -23px, 26px, 15px)
      transform: scale3d(1,1,1)
      transition: all 0.2s
      +movingRight

    &:hover
      span
        background-color: $darkRed
      &:before
        opacity: 0.6
        animation-play-state: running



  &.animation-part
    a
      span
        opacity: 0
        transform: scale3d(0.5, 0.5, 1)

  +respond-to-width(1370)
    right: 120px
    bottom: 60px

  /* Mobile view
    ========================================================================== */
  +respond-to-width-or-height(500, 600)
    position: relative
    right: 0
    bottom: 0
    z-index: 70
    +flex(center, center)
    width: 100%
    height: 100px
    background-color: $lightGray
    border-radius: 0

    a
      text-decoration: none

      .wrapper
        position: relative
        display: inline-block
        width: auto
        height: auto
        margin-left: -25px
        padding-left: 20px

        span
          right: auto
          left: 17px
          top: -9px

          transition: all 0.5s ease 0.3s, background-color 0.2s

      p
        display: block