@font-face {
	font-family: 'fa-viber';
	src:url('../fonts/fa-viber.eot?-3dwksg');
	src:url('../fonts/fa-viber.eot?#iefix-3dwksg') format('embedded-opentype'),
		url('../fonts/fa-viber.ttf?-3dwksg') format('truetype'),
		url('../fonts/fa-viber.woff?-3dwksg') format('woff'),
		url('../fonts/fa-viber.svg?-3dwksg#fa-viber') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*MIXIN*/
@mixin flex() {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

@mixin flex-wrap() {
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

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

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@mixin radius($val) {
    border-radius: $val;
    -webkit-border-radius: $val;
    -moz-border-radius: $val;
    border-border-radius: $val;
}

@mixin transition($args) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    -o-transition: $args;
    transition: $args;
}

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

// rotate
@mixin rotate ($deg) {
  @include transform(rotate(#{$deg}deg));
}
 
// scale
@mixin scale($scale) {
	 @include transform(scale($scale));
} 
// translate
@mixin translate ($x, $y) {
   @include transform(translate($x, $y));
}
// skew
@mixin skew ($x, $y) {
   @include transform(skew(#{$x}deg, #{$y}deg));
}
//transform origin
@mixin transform-origin ($origin) {
    moz-transform-origin: $origin;
	     -o-transform-origin: $origin;
	    -ms-transform-origin: $origin;
	-webkit-transform-origin: $origin;
          transform-origin: $origin;
}

@mixin headingSize($size) {
    font-size: $size*$step-size-heading + em;
}

@mixin cover-background($img-url) {
    @if $img-url {
        background: url($img-url) no-repeat;
    }
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

@mixin cover-background-wo-image(){
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color;
    background: rgba($color, $opacity);
}

@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &:-moz-placeholder           {@content}
  &::-moz-placeholder          {@content}
  &:-ms-input-placeholder      {@content}  
}

@mixin blur ($radius) {
    -webkit-filter: blur($radius+px);
    /* Chrome, Safari */
    
    -ms-filter: blur($radius+px);
    /* IE12? */
    
    filter: url("data:image/svg+xml;utf8,
 <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">
 <filter id=\"blur\">
 <feGaussianBlur stdDeviation=\"#{$radius}\" />
 </filter> </svg> #blur");

    /* Firefox, Safari, Chrome*/
}

@mixin box-shadow($top,
$left,
$blur,
$size,
$color,
$inset: false) {
    @if $inset {
        -webkit-box-shadow: inset $top $left $blur $size $color;
        -moz-box-shadow: inset $top $left $blur $size $color;
        box-shadow: inset $top $left $blur $size $color;
    }
    @else {
        -webkit-box-shadow: $top $left $blur $size $color;
        -moz-box-shadow: $top $left $blur $size $color;
        box-shadow: $top $left $blur $size $color;
    }
}

@mixin border( $coordinates: 0 0 0 0, $color: #000000, $style: solid) {
    $top: nth($coordinates, 1);
    $right: nth($coordinates, 2);
    $bottom: nth($coordinates, 3);
    $left: nth($coordinates, 4);
    @if not(unitless($top)) {
        border-top: $top $style $color;
    }
    @if not(unitless($right)) {
        border-right: $right $style $color;
    }
    @if not(unitless($bottom)) {
        border-bottom: $bottom $style $color;
    }
    @if not(unitless($left)) {
        border-left: $left $style $color;
    }
}

/*
    Example usage: 
    @include animation(10s, 5s, changecolour)
 */
 
@mixin keyframe ($animation-name){
    @keyframes $animation-name {
        @content;
    }
} 
 
@mixin keyframee ($animation_name) {
    @-webkit-keyframes $animation_name {
        @content;
    }

    @-moz-keyframes $animation_name {
        @content;
    }

    @-o-keyframes $animation_name {
        @content;
    }

    @keyframes $animation_name {
        @content;
    }
} 
 
@mixin animation ($animation, $duration, $transition, $iteration) {
    -webkit-animation-name: $animation;
    -webkit-animation-duration: $duration;
    -webkit-animation-timing-function: $transition;
    -webkit-animation-iteration-count: $iteration;
    
    -moz-animation-name: $animation;
    -moz-animation-duration: $duration;
    -moz-animation-timing-function: $transition;
    -moz-animation-iteration-count: $iteration;
    
    -o-animation-name: $animation;
    -o-animation-duration: $duration;
    -o-animation-timing-function: $transition;
    -o-animation-iteration-count: $iteration;
    
    animation-name: $animation;
    animation-duration: $duration;
    animation-timing-function: $transition;
    animation-iteration-count: $iteration;
}