/** General Button style **/

.btn
  position: relative
  width: 250px
  height: 50px
  border-radius: 50px
  padding: 0 30px
  +flex(space-between, center)
  transition: all 0.3s ease 0s
  vertical-align: middle

  &:hover
    cursor: pointer
    .arrow-icon
      transform: translateX(30%)
    .arrow-icon-down
      transform: translateY(30%) rotate(90deg)

  +respond-to(small-mobile)
    width: 200px
    height: 45px

.btn-primary
  border: 0
  +font-default(18px, 28.8px)
  color: white
  background: $lightBlue
  //background: -webkit-linear-gradient(45deg, #216AB1, #2151FF)
  //background: -o-linear-gradient(45deg, #216AB1, #2151FF)
  //background: -moz-linear-gradient(45deg, #216AB1, #2151FF)
  //background: linear-gradient(45deg, #216AB1, #2151FF)

  &:hover
    color: $lightGray
    background:
      color: $blue

.btn-secondary
  border: 2px solid #2151FF
  color: #216AB1
  background: transparent

  &:hover
    color: $lightBlue

.header-button
  background: rgba(255, 255, 255, 0.4)

  &:hover
    color: $lightBlue
    background:
      color: white

.btn-light
  color: white
  &:hover
    color: $lightGray

.btn-dark
  color: $darkGray

.arrow-icon
  transition: transform 0.4s ease
  width: 13px
  height: 9px
  display: inline-block


.arrow-icon-down
  transition: transform 0.4s ease
  width: 13px
  height: 9px
  display: inline-block
  transform: rotate(90deg)

.arrow-icon-left
  transition: transform 0.4s ease
  width: 13px
  height: 9px
  display: inline-block
  transform: rotate(180deg)

.scroller
  +flex(center, center)
  height: 50px
  width: 50px
  border-radius: 50px
  background-color: $lightBlue
  transition: transform ease 0.4s

  position: absolute
  bottom: -25px
  left: -25px

  img
    width: 13px
    height: 9px
    transform: rotate(90deg)

  &:hover
    cursor: pointer
    transform: rotate(360deg)

  +respond-to(mobile)
    display: none

.btn-seperator
  width: 15px