//Sprite
$spriteWidth: 596px
$spriteHeight: 125px


=sprite($position, $width: auto, $height: auto)
  background: url("/img/umans-sprite.svg") $position no-repeat
  background-size: $spriteWidth $spriteHeight
  width: $width
  height: $height


=arrowBlue()
  +sprite(-385px -16px, 12px, 10px)
  display: inline-block

=arrowOrange()
  +sprite(-90px 0, 14px, 11px)
  display: inline-block

=arrowWhite()
  +sprite(-75px 0, 14px, 11px)
  display: inline-block


//Mobile menu Sprite
=socialMedia($position, $width: auto, $height: auto)
  background: url("/img/socialMediaSprite.svg") $position no-repeat
  background-size: 175px 50px
  width: $width
  height: $height

=twitter()
  +socialMedia(0 0, 24px, 24px)
  display: inline-block
=twitterWhite()
  +socialMedia(0 -25px, 24px, 24px)
  display: inline-block
=linkedin()
  +socialMedia(-25px 0, 24px, 24px)
  display: inline-block
=linkedinWhite()
  +socialMedia(-25px -25px, 24px, 24px)
  display: inline-block
=facebook()
  +socialMedia(-50px 0, 24px, 24px)
  display: inline-block
=facebookWhite()
  +socialMedia(-50px -25px, 24px, 24px)
  display: inline-block
=instagram()
  +socialMedia(-75px 0, 24px, 24px)
  display: inline-block
=instagramWhite()
  +socialMedia(-75px -25px, 24px, 24px)
  display: inline-block
=pinterest()
  +socialMedia(-100px 0, 24px, 24px)
  display: inline-block
=pinterestWhite()
  +socialMedia(100px -25px, 24px, 24px)
  display: inline-block
=youtube()
  +socialMedia(-125px 0, 24px, 24px)
  display: inline-block
=youtubeWhite()
  +socialMedia(-125px -25px, 24px, 24px)
  display: inline-block

=greenCheck()
  +sprite(-250px -40px)
  display: block
  width: 12px
  height: 13px

/* ARROWS */
=arrowRightGreen()
  +sprite(-385px -30px)
  display: block
  width: 12px
  height: 10px

=arrowRightOrange()
  +sprite(-385px -0px)
  display: block
  width: 12px
  height: 10px

=arrowRightBlue()
  +sprite(-385px -16px)
  display: block
  width: 12px
  height: 10px

=arrowRightWhite()
  +sprite(-385px -46px)
  display: block
  width: 12px
  height: 10px

=arrowRightRed()
  +sprite(-385px -60px)
  display: block
  width: 12px
  height: 10px

=arrowRightGray()
  +sprite(-385px -75px)
  display: block
  width: 12px
  height: 10px

/* CIRCLE ARROW */
=circleArrowGreen()
  +sprite(-368px -28px)
  display: block
  width: 14px
  height: 14px

=circleArrowOrange()
  +sprite(-368px -0px)
  display: block
  width: 14px
  height: 14px

=circleArrowBlue()
  +sprite(-368px -14px)
  display: block
  width: 14px
  height: 14px

=circleArrowWhite()
  +sprite(-368px -44px)
  display: block
  width: 14px
  height: 14px

=circleArrowRed()
  +sprite(-368px -60px)
  display: block
  width: 14px
  height: 14px

=star-full()
  +sprite(-280px -60px, 17px, 16px)
  display: inline-block

=star-empty()
  +sprite(-300px -60px, 17px, 16px)
  display: inline-block