$main-font: Lato
$gray: #999
$blue: #207CE5
$dark-blue: #004e7d
$green: #4AB253
$red: #e85834
$orange: #ffa819
$light-gray: #b3b3b3
$dark-gray: #4D4D4D
$sidebar-width: 19.5em
$sidebar-width-collapsed: 4.25em
$chat-info-width: 28em

@mixin loadFont($load-font, $style, $weight, $suffix)
  @font-face
    font:
      weight: $weight
      style: $style
      family: $load-font
    src: local('☺'), url('/skin/fonts/' + $load-font + '-' + $suffix + '.ttf') format('truetype')
    //src: local('☺'), url('/skin/fonts/' + $load-font + '-' + $suffix + '.woff2') format('woff2'), url('/skin/fonts/' + $load-font + '-' + $suffix + '.woff') format('woff')

//---------------------------
// keyframes Mix-in
//---------------------------
=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

//---------------------------
// Transisition Vendor Pre-fix Mix-in
//---------------------------
=transition($args...)
  -webkit-transition: $args
  -moz-transition: $args
  -ms-transition: $args
  -o-transition: $args
  transition: $args

=transform($args...)
  -webkit-transform: $args
  -moz-transform: $args
  -ms-transform: $args
  -o-transform: $args
  transform: $args

=animation($args...)
  -webkit-animation: $args
  -moz-animation: $args
  -ms-animation: $args
  -o-animation: $args
  animation: $args

=animation-delay($args...)
  -webkit-animation-delay: $args
  -moz-animation-delay: $args
  -ms-animation-delay: $args
  -o-animation-delay: $args
  animation-delay: $args