/******************
   Sass Processor */

@mixin processor($function, $params) {
    -webkit-#{$function}: $params;
    -moz-#{$function}: $params;
    -ms-#{$function}: $params;
    -o-#{$function}: $params;
    #{$function}: $params;
}

@mixin transition($property: all, $duration: 0.3s, $timing: ease-in-out) {
    @include processor(transition, $property $duration $timing);
} //@include transition(all 0.3s ease-in-out);

//linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

@mixin border-radius($params: 4px) {
    @include processor(border-radius, $params);
} //@include border-radius(4px);

@mixin box-shadow($top: 2px, $left: 2px, $blur: 3px, $color: #ccc) {
    @include processor(transition, $top $left $blur $color);
} //@include box-shadow(2px, 2px, 3px, #ccc);

@mixin rotate($method: rotate, $params: 15deg) {
    @include processor(transform, $method($params));
} //@include rotate(15deg);

@mixin scale($method: scale, $params: 2) {
    @include processor(transform, $method($params));
} //@include scale(2);

@mixin translate($method: translate, $x: 20px, $y: -20px) {
    @include processor(transform, $method($x, $y));
} //@include translate(20px, 20px);

@mixin skew($method: skew, $x: 15deg, $y: 15deg) {
    @include processor(transform, $method($x, $y));
} //@include skew(15deg, 15deg);

@mixin translate3d($method: translate3d, $x: 50px, $y: 50px, $z: 0px) {
    @include processor(transform, $method($x, $y, $z));
} //@include translate3d(50px, 50px, 0px);



/******************
   Specifics ******/

@mixin opacity($params: 0.6) {
    -khtml-opacity: $params;
    -moz-opacity: $params;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$params * 100})";
    filter: alpha(opacity=$params * 100);
    opacity: $params;
} //@include opacity(0.5);

@mixin font-smoothing($value: on) {
   @if $value == on {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
   }
   @else {
      -webkit-font-smoothing: subpixel-antialiased;
      -moz-osx-font-smoothing: auto;
   }
} //@include font-smoothing(on);

@mixin linear-gradient($from, $to) {
   background-color: $to; /* Fallback Color */
   background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to)); /* Saf4+, Chrome */
   background-image: -webkit-linear-gradient(top, $from, $to); /* Chrome 10+, Saf5.1+, iOS 5+ */
   background-image:    -moz-linear-gradient(top, $from, $to); /* FF3.6 */
   background-image:     -ms-linear-gradient(top, $from, $to); /* IE10 */
   background-image:      -o-linear-gradient(top, $from, $to); /* Opera 11.10+ */
   background-image:         linear-gradient(top, $from, $to);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$from}', EndColorStr='#{$to}');
} //@include linear-gradient(#ccc, #555);

@mixin background-cover($url) {
   background-image: url($url);
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   /*@include media-max-767 {
      background-image: url('#{$path}#{$bg-url}');
      background-position: top center;
   }*/
} //@include background-cover(img/background.jpg);

@mixin flex-align($align) {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   &, [class*="col-"] {
      -ms-flex-align: $align;
      -webkit-align-items: $align;
      -webkit-box-align: $align;
      align-items: $align;
   }
   @include media-max-767 {
      display: block !important;
   }
} //@include flex-align(center);



/******************
   Media Queries **/

$screen-xxs:  480px;
$screen-sm:   768px;
$screen-md:   992px;
$screen-lg:  1200px;

/********** Extra small devices */
@mixin media-max-479 {
    @media (max-width: ($screen-xxs - 1)) {
        @content;
    }
}
@mixin media-min-480 {
    @media (min-width: $screen-xxs) {
        @content;
    }
}

/********** Small devices */
@mixin media-max-767 {
    @media (max-width: ($screen-sm - 1)) {
        @content;
    }
}
@mixin media-min-768 {
    @media (min-width: $screen-sm) {
        @content;
    }
}

/********** Medium devices */
@mixin media-max-991 {
    @media (max-width: ($screen-md - 1)) {
        @content;
    }
}
@mixin media-min-992 {
    @media (min-width: $screen-md) {
        @content;
    }
}

/********** Large devices */
@mixin media-max-1199 {
    @media (max-width: ($screen-lg - 1)) {
        @content;
    }
}
@mixin media-min-1200 {
    @media (min-width: $screen-lg) {
        @content;
    }
}