/*==========================================================================
  Return to top button
  ========================================================================== */

.return-top
  position: relative
  display: block
  max-width: 250px
  margin: 80px auto
  padding: 10px 18px
  font-family: rubik()
  font-size: 0.8rem
  color: $purple
  background-color: transparent
  border: 1px solid $purple
  text-decoration: none
  border-radius: 10px
  transition: all 0.3s

  &:after
    content: ''
    display: inline-block
    position: absolute
    right: 20px
    bottom: 17px
    +arrowPurple
    +translate3dRotate(0,0,0, -90deg)
    transition: transform 0.3s

  &:hover
    background-color: rgba($purple, 0.1)
    &:after
      +translate3dRotate(0,-5px,0, -90deg)

  // Because the menu side bar
  left: -40px

  +respond-to-width(1300)
    left: -30px

  +respond-to-width(750)
    left: 0