$font-size-small: 13px;

@mixin clearfix() {
  //  *zoom:1;
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin inline-block ( $vertical: top ) {
  display:        inline-block;
  *display:       inline;
  zoom:           1;
  vertical-align: $vertical;
}

@mixin placeholder($color: $input-color-placeholder) {
  &:-moz-placeholder {
    color: $color;
  }
  // Firefox 4-18
  &::-moz-placeholder {
    color: $color;
  }
  // Firefox 19+
  &:-ms-input-placeholder {
    color: $color;
  }
  // Internet Explorer 10+
  &::-webkit-input-placeholder {
    color: $color;
  }
  // Safari and Chrome
}

@mixin hex2rgba($color, $opacity : 1) {
  $result: rgba(red($color), green($color), blue($color), $opacity);
}

@mixin transition($transition: all 0.2s ease-in-out 0s) {
  -webkit-transition: $transition;
  -moz-transition:    $transition;
  -o-transition:      $transition;
  -ms-transition:     $transition;
  transition:         $transition;
}

@mixin gradient($startColor: #eee, $endColor: white) {
  background:       -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
  background:       -webkit-linear-gradient(top, $startColor, $endColor);
  background:       -moz-linear-gradient(top, $startColor, $endColor);
  background:       -ms-linear-gradient(top, $startColor, $endColor);
  background:       -o-linear-gradient(top, $startColor, $endColor);
  background-color: $startColor;
}

@mixin horizontal-gradient($startColor: #eee, $endColor: white) {
  background-color: $startColor;
  background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
  background-image: -webkit-linear-gradient(left, $startColor, $endColor);
  background-image: -moz-linear-gradient(left, $startColor, $endColor);
  background-image: -ms-linear-gradient(left, $startColor, $endColor);
  background-image: -o-linear-gradient(left, $startColor, $endColor);
}

@mixin vertical_gradient($from: #000, $to: #FFF) {
  background: $from;
  background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background: -webkit-linear-gradient($from, $to);
  background: -moz-linear-gradient(center top, $from 0%, $to 100%);
  background: gradient(center top, $from 0%, $to 100%);
}

@mixin bw-gradient($color: #F5F5F5, $start: 0, $stop: 255) {
  background: $color;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb($start,$start,$start)), color-stop(1, rgb($stop,$stop,$stop)));
  background: -ms-linear-gradient(bottom, rgb($start,$start,$start) 0%, rgb($stop,$stop,$stop) 100%);
  background: -moz-linear-gradient(center bottom, rgb($start,$start,$start) 0%, rgb($stop,$stop,$stop) 100%);
  background: -o-linear-gradient(rgb($stop,$stop,$stop), rgb($start,$start,$start));
  filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{rgb($stop,$stop,$stop)}', endColorStr='#{rgb($start,$start,$start)}');
  //filter:     e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb($stop,$stop,$stop), rgb($start,$start,$start)));
}

@mixin bordered($top-color: #EEE, $right-color: #EEE, $bottom-color: #EEE, $left-color: #EEE) {
  border-top:    solid 1px $top-color;
  border-left:   solid 1px $left-color;
  border-right:  solid 1px $right-color;
  border-bottom: solid 1px $bottom-color;
}

@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
  -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
  -moz-box-shadow:    $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
  box-shadow:         $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
}

@mixin box_shadow($shadow_x:3px, $shadow_y:3px, $shadow_rad:3px, $shadow_in:3px, $shadow_color:#888) {
  box-shadow:         $shadow_x $shadow_y $shadow_rad $shadow_in $shadow_color;
  -webkit-box-shadow: $shadow_x $shadow_y $shadow_rad $shadow_in $shadow_color;
}

@mixin inset_box_shadow($shadow_x:3px, $shadow_y:3px, $shadow_rad:3px, $shadow_in:3px, $shadow_color:#888) {
  box-shadow:         inset $shadow_x $shadow_y $shadow_rad $shadow_in $shadow_color;
  -webkit-box-shadow: inset $shadow_x $shadow_y $shadow_rad $shadow_in $shadow_color;
}

@mixin text_shadow($shadow_x:3px, $shadow_y:3px, $shadow_rad:3px, $shadow_color:#fff) {
  text-shadow: $shadow_x $shadow_y $shadow_rad $shadow_color;
}

@mixin rounded($radius: 2px) {
  -webkit-border-radius: $radius;
  -moz-border-radius:    $radius;
  border-radius:         $radius;
}

@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
  -webkit-border-top-right-radius:    $topright;
  -webkit-border-bottom-right-radius: $bottomright;
  -webkit-border-bottom-left-radius:  $bottomleft;
  -webkit-border-top-left-radius:     $topleft;
  -moz-border-radius-topright:        $topright;
  -moz-border-radius-bottomright:     $bottomright;
  -moz-border-radius-bottomleft:      $bottomleft;
  -moz-border-radius-topleft:         $topleft;
  border-top-right-radius:            $topright;
  border-bottom-right-radius:         $bottomright;
  border-bottom-left-radius:          $bottomleft;
  border-top-left-radius:             $topleft;
  @include background-clip(padding-box);
}

@mixin opacity($opacity: 0.5) {
  opacity: $opacity;
  // IE8 filter
  $opacity-ie: ($opacity * 100);
  filter: alpha(opacity=$opacity-ie);
}

@mixin transition-duration($duration: 0.2s) {
  -moz-transition-duration:    $duration;
  -webkit-transition-duration: $duration;
  -o-transition-duration:      $duration;
  transition-duration:         $duration;
}

@mixin transition-delay($delay: 0.2s) {
  -webkit-transition-delay: $delay;
  -moz-transition-delay:    $delay;
  -o-transition-delay:      $delay;
  transition-delay:         $delay;
}

@mixin transform($arguments) {
  -webkit-transform: $arguments;
  -moz-transform:    $arguments;
  -o-transform:      $arguments;
  -ms-transform:     $arguments;
  transform:         $arguments;
}

@mixin rotation($deg:5deg) {
  @include transform(rotate($deg));
}



@mixin transform($string) {
  -webkit-transform: $string;
  -moz-transform:    $string;
  -ms-transform:     $string;
  -o-transform:      $string;
}

@mixin translate ($x, $y:0) {
  -webkit-transform: translate($x, $y);
  -moz-transform:    translate($x, $y);
  -ms-transform:     translate($x, $y);
  -o-transform:      translate($x, $y);
}

@mixin translate3d ($x, $y: 0, $z: 0) {
  -webkit-transform: translate3d($x, $y, $z);
  -moz-transform:    translate3d($x, $y, $z);
  -ms-transform:     translate3d($x, $y, $z);
  -o-transform:      translate3d($x, $y, $z);
}

@mixin perspective ($value: 1000) {
  -webkit-perspective: $value;
  -moz-perspective:    $value;
  -ms-perspective:     $value;
  perspective:         $value;
}

@mixin transform-origin ($x:center, $y:center) {
  -webkit-transform-origin: $x $y;
  -moz-transform-origin:    $x $y;
  -ms-transform-origin:     $x $y;
  -o-transform-origin:      $x $y;
}

@mixin skew ($deg, $deg2) {
  -webkit-transform: skew($deg, $deg2);
  -moz-transform:    skew($deg, $deg2);
  -ms-transform:     skew($deg, $deg2);
  -o-transform:      skew($deg, $deg2);
}

@mixin animation ($name, $duration: 300ms, $delay: 0, $ease: ease) {
  -webkit-animation: $name $duration $delay $ease;
  -moz-animation:    $name $duration $delay $ease;
  -ms-animation:     $name $duration $delay $ease;
}

@mixin inner-shadow($horizontal:0, $vertical:1px, $blur:2px, $alpha: 0.4) {
  -webkit-box-shadow: inset $horizontal $vertical $blur rgba(0, 0, 0, $alpha);
  -moz-box-shadow:    inset $horizontal $vertical $blur rgba(0, 0, 0, $alpha);
  box-shadow:         inset $horizontal $vertical $blur rgba(0, 0, 0, $alpha);
}

@mixin box-shadow($arguments) {
  -webkit-box-shadow: $arguments;
  -moz-box-shadow:    $arguments;
  box-shadow:         $arguments;
}

@mixin box-sizing($sizing: border-box) {
  -ms-box-sizing:     $sizing;
  -moz-box-sizing:    $sizing;
  -webkit-box-sizing: $sizing;
  box-sizing:         $sizing;
}

@mixin user-select($argument: none) {
  -webkit-user-select: $argument;
  -moz-user-select:    $argument;
  -ms-user-select:     $argument;
  user-select:         $argument;
}

@mixin background-clip($argument: padding-box) {
  -moz-background-clip:    $argument;
  -webkit-background-clip: $argument;
  background-clip:         $argument;
}

@mixin center-block() {
  display:      block;
  margin-left:  auto;
  margin-right: auto;
}

@mixin text-truncate() {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

@mixin absolute-center() {
  margin:   auto;
  position: absolute;
  top:      0;
  left:     0;
  bottom:   0;
  right:    0;
}

@mixin backface-visibility() {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
  -o-backface-visibility:      hidden;
  backface-visibility:         hidden;
}

@mixin is-Translated ($width:100%) {
  width:             $width;
  margin:            auto;
  position:          absolute;
  top:               50%;
  left:              50%;
  -webkit-transform: translate(-50%, -50%);
  transform:         translate(-50%, -50%);
}

//****************************** VARIABLES ******************************//
// Updates for small tablets and smart phones in landscape
$xs: "only screen and (min-width: 30em)";
$xs-max: "(max-width: 767px)";
// Updates for tablets in portrait
$sm: "only screen and (min-width: 768px)";
$sm-max: "(max-width: 992px)";
// Updates for tablets in landscape
$md: "only screen and (min-width: 992px)";
$md-max: "(max-width: 1199px)";
// Updates for desktop
$lg: "only screen and (min-width: 1200px)";
// Updates for ultra desktop
$xlg: "only screen and (min-width: 100em)";
// High resolution screens e.g. Retina
$retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";


@mixin gradientAnimation( $start, $end, $transTime ){
  background-size: 100%;
  background-image: linear-gradient($start, $end);
  position: relative;
  z-index: 100;
  &:before {
    background-image: linear-gradient($end, $start);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    width: 100%;
    z-index: -100;
    transition: opacity $transTime;
  }
  &:hover {
    &:before {
      opacity: 1;
    }
  }
}