/* -------------------------------------------------------------
  Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library
  By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets

  List of CSS3 Sass Mixins File to be @imported and @included as you need

  The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER
  ENDING css files

  note: All CSS3 Properties are being supported by Safari 5
  more info: http://www.findmebyip.com/litmus/#css3-properties

  Mixins available:
    -   background-gradient     - arguments: Start Color: #3C3C3C, End Color: #999999
    -   background-size         - arguments: Width: 100%, Height: 100%
    -   border-radius           - arguments: Radius: 5px
    -   border-radius-separate  - arguments: Top Left: 5px, Top Left: 5px, Bottom Left: 5px, Bottom Right: 5px
    -   box                     - arguments: Orientation: horizontal, Pack: center, Align: center
    -   box-rgba                - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C
    -   box-shadow              - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
    -   box-sizing              - arguments: Type: border-box
    -   columns                 - arguments: Count: 3, Gap: 10
    -   double-borders          - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0
    -   flex                    - arguments: Value: 1
    -   flip                    - arguments: ScaleX: -1
    -   font-face               - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf
    -   opacity                 - arguments: Opacity: 0.5
    -   outline radius          - arguments: Radius: 5px
    -   resize                  - arguments: Direction: both
    -   rotate                  - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0
    CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
    -   text-shadow             - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
    -   transform               - arguments: Parameters: null
    -   transition              - arguments: What: all, Length: 1s, Easing: ease-in-out
    -   triple-borders          - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0

------------------------------------------------------------- */

/* REM font sizing from http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/ */
@mixin font-size($sizeValue : 1.6)
{
    font-size: ($sizeValue * 10) + px;
    font-size: $sizeValue + rem;
}

@function strip-unit($num) {
    @return $num / ($num * 0 + 1);
}

@mixin rem-fallback($property, $values...) {
    $max: length($values);
    $pxValues: '';
    $remValues: '';

    @for $i from 1 through $max {
        $value: strip-unit(nth($values, $i));
        $pxValues: #{$pxValues + $value*16}px;

        @if $i < $max {
            $pxValues: #{$pxValues + " "};
        }
    }

    @for $i from 1 through $max {
        $value: strip-unit(nth($values, $i));
        $remValues: #{$remValues + $value}rem;

        @if $i < $max {
            $remValues: #{$remValues + " "};
        }
    }

    #{$property}: $pxValues;
    #{$property}: $remValues;
}

// assumes parent container width set
@mixin rwd-ss($pxWidth, $pxHeight, $pxWidthTotal, $pxHeightTotal, $pxBgPosX, $pxBgPosY) {

    $elScale : ($pxHeight / $pxWidth)*100;
    $ssScale : ($pxWidthTotal / $pxWidth)*100;

    $widthDiff  : $pxWidth - $pxWidthTotal;
    $heightDiff : $pxHeight - $pxHeightTotal;

    $percPosX : 0;
    $percPosY : 0;

    @if $pxBgPosX != 0 {
        $percPosX : ($pxBgPosX / $widthDiff)*100;
    }

    @if $pxBgPosY != 0 {
        $percPosY : ($pxBgPosY / $heightDiff)*100;
    }

    width: 100%;
    height: 0;
    padding-bottom: #{$elScale+'%'};
    background-size: #{$ssScale+'%'};
    background-position: #{$percPosX+'% '+$percPosY+'%'};
}

@mixin size($w, $h : auto)
{
    width:  $w;
    @if $h == auto
    {
        height : $w;
    } @else {
        height: $h;
    }
}


/* BACKGROUND GRADIENT */
@mixin background-gradient($startColor: #3C3C3C, $endColor: #999999) {
    background-color: $startColor;
    background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
    background-image: -webkit-linear-gradient(top, $startColor, $endColor);
    background-image:    -moz-linear-gradient(top, $startColor, $endColor);
    background-image:     -ms-linear-gradient(top, $startColor, $endColor);
    background-image:      -o-linear-gradient(top, $startColor, $endColor);
    background-image:         linear-gradient(top, $startColor, $endColor);
    filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}');
}


/* BACKGROUND SIZE */
@mixin background-size($width: 100%, $height: 100%) {
     -moz-background-size: $width $height;
  -webkit-background-size: $width $height;
          background-size: $width $height;
}

/* BACKGROUND SIZE */
@mixin background-size-single($param: 100%) {
    -moz-background-size: $param;
    -webkit-background-size: $param;
    background-size: $param;
}


/* BORDER RADIUS */
@mixin border-radius($radius: 5px) {
    -moz-border-radius:    $radius;
    -webkit-border-radius: $radius;
    border-radius:         $radius;
}

@mixin border-radius-separate($topLeftRadius: 5px, $topRightRadius: 5px, $bottomLeftRadius: 5px, $bottomRightRadius: 5px) {
    -webkit-border-top-left-radius:     $topLeftRadius;
    -webkit-border-top-right-radius:    $topRightRadius;
    -webkit-border-bottom-right-radius: $bottomRightRadius;
    -webkit-border-bottom-left-radius:  $bottomLeftRadius;

    -moz-border-radius-topleft:     $topLeftRadius;
    -moz-border-radius-topright:    $topRightRadius;
    -moz-border-radius-bottomright: $bottomRightRadius;
    -moz-border-radius-bottomleft:  $bottomLeftRadius;

    border-top-left-radius:     $topLeftRadius;
    border-top-right-radius:    $topRightRadius;
    border-bottom-right-radius: $bottomRightRadius;
    border-bottom-left-radius:  $bottomLeftRadius;
}

/* BOX */
@mixin box($orient: horizontal, $pack: center, $align: center) {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: $orient;
    -moz-box-orient:    $orient;
    box-orient:         $orient;

    -webkit-box-pack: $pack;
    -moz-box-pack:    $pack;
    box-pack:         $pack;

    -webkit-box-align: $align;
    -moz-box-align:    $align;
    box-align:         $align;
}

/* BOX RGBA */
@mixin box-rgba($r: 60, $g: 3, $b: 12, $opacity: 0.23, $color: #3C3C3C) {
  background-color: transparent;
  background-color: rgba($r, $g, $b, $opacity);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color}',endColorstr='#{$color}');
            zoom:   1;
}


/* BOX SHADOW */
@mixin box-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4), $inset: "") {
  @if ($inset != "") {
    -webkit-box-shadow: $inset $x $y $blur $color;
    -moz-box-shadow:    $inset $x $y $blur $color;
    box-shadow:         $inset $x $y $blur $color;
  } @else {
    -webkit-box-shadow: $x $y $blur $color;
    -moz-box-shadow:    $x $y $blur $color;
    box-shadow:         $x $y $blur $color;
  }
}

/* BOX SIZING */
@mixin box-sizing($type: border-box) {
    -webkit-box-sizing:   $type;
    -moz-box-sizing:      $type;
    box-sizing:           $type;
}

/* COLUMNS */
@mixin columns($count: 3, $gap: 10) {
    -webkit-column-count: $count;
    -moz-column-count:    $count;
    column-count:         $count;

    -webkit-column-gap:   $gap;
    -moz-column-gap:      $gap;
    column-gap:           $gap;
}

/* DOUBLE BORDERS */
@mixin double-borders($colorOne: #3C3C3C, $colorTwo: #999999, $radius: 0) {
    border: 1px solid $colorOne;

    -webkit-box-shadow: 0 0 0 1px $colorTwo;
    -moz-box-shadow:    0 0 0 1px $colorTwo;
    box-shadow:         0 0 0 1px $colorTwo;

    @include border-radius( $radius );
}

/* FLEX */
@mixin flex($value: 1) {
    -webkit-box-flex: $value;
    -moz-box-flex:    $value;
    box-flex:         $value;
}

/* FLIP */
@mixin flip($scaleX: -1) {
    -moz-transform:    scaleX($scaleX);
    -o-transform:      scaleX($scaleX);
    -webkit-transform: scaleX($scaleX);
    transform:         scaleX($scaleX);
    filter:            FlipH;
    -ms-filter:        "FlipH";
}

/* FONT FACE */
@mixin font-face($fontFamily: myFont, $eotFileSrc: 'myFont.eot', $woffFileSrc: 'myFont.woff', $ttfFileSrc: 'myFont.ttf') {
  font-family: $fontFamily;
  src: url($eotFileSrc)  format('eot'),
       url($woffFileSrc) format('woff'),
       url($ttfFileSrc)  format('truetype');
}

/* OUTLINE RADIUS */
@mixin outline-radius($radius: 5px) {
    -webkit-outline-radius: $radius;
    -moz-outline-radius:    $radius;
    outline-radius:         $radius;
}

/* RESIZE */
@mixin resize($direction: both) {
    -webkit-resize: $direction;
    -moz-resize:    $direction;
    resize:         $direction;
}

/* ROTATE*/
@mixin rotate($deg: 0, $m11: 0, $m12: 0, $m21: 0, $m22: 0) {
     -moz-transform: rotate($deg + deg);
       -o-transform: rotate($deg + deg);
  -webkit-transform: rotate($deg + deg);
      -ms-transform: rotate($deg + deg);
          transform: rotate($deg + deg);
             filter: progid:DXImageTransform.Microsoft.Matrix(
                     M11=#{$m11}, M12=#{$m12}, M21=#{$m21}, M22=#{$m22}, sizingMethod='auto expand');
               zoom: 1;
}

/* TEXT SHADOW */
@mixin text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4)) {
    text-shadow: $x $y $blur $color;
}

/* TRANSFORM  */
@mixin transform($params) {
    -webkit-transform: $params;
    -moz-transform:    $params;
    transform:         $params;
}

/* TRANSITION */
@mixin transition($what: all, $length: 1s, $easing: ease-in-out) {
    -moz-transition:    $what $length $easing;
    -o-transition:      $what $length $easing;
    -webkit-transition: $what $length $easing;
    -ms-transition:     $what $length $easing;
    transition:         $what $length $easing;

}

/* TRIPLE BORDERS */
@mixin triple-borders($colorOne: #3C3C3C, $colorTwo: #999999, $colorThree: #000000, $radius: 0) {
    border: 1px solid $colorOne;

    @include border-radius($radius);

    -webkit-box-shadow: 0 0 0 1px $colorTwo, 0 0 0 2px $colorThree;
    -moz-box-shadow:    0 0 0 1px $colorTwo, 0 0 0 2px $colorThree;
    box-shadow:         0 0 0 1px $colorTwo, 0 0 0 2px $colorThree;
}

@mixin backface-visibility( $style: visible ) {
    @each $prefix in -moz, -ms, -o, -webkit {
        #{$prefix}-backface-visibility: $style;
    }
    backface-visibility: $style;
}

@mixin perspective( $style: none ) {
    @each $prefix in -moz, -ms, -o, -webkit {
        #{$prefix}-perspective: $style;
    }
    perspective: $style;
}

@mixin retina-background( $normalFilepath, $retinaFilePath, $width, $height )
{
    background: url( $normalFilepath );
    width: $width;
    height: $height;

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        & {
            background: url( $retinaFilePath );
            @include background-size(100%, 100%);
        }
    }
}

@mixin background-image-retina($file, $type, $width: null, $height: null) {
    
    background-image: url($file + '.' + $type);
	@if $width != null {
		width: $width;
	}
	@if $height != null {
		height: $height;
	}


    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        & {
          background-image: url($file + '@2x.' + $type);
          @include background-size(100%,100%);
        }
    }
}

@mixin background-image-retina-size($file, $type, $width: null, $height: null, $bgpx: center, $bgpy: center) {
    
    background-image: url($file + '.' + $type);
	@if $width != null {
		width: $width;
	}
	@if $height != null {
		height: $height;
	}
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: $bgpx $bgpy;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        & {
          background-image: url($file + '@2x.' + $type);
        }
    }
}


@mixin rowMachine($numPerRow, $margin) {
  width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
  &:nth-child(n) {
    // margin-bottom: $margin;
    margin-right: $margin;
  }
  &:nth-child(#{$numPerRow}n) {
    margin-right: 0;
    // margin-bottom: 0;
  }
}

@mixin centerElement() {
    position: absolute;
    top: 50%;
    left: 50%;
    @include transform(translate(-50%, -50%));
}



@mixin scrollbarInternal($size:6px,$thumbColor:white,$backgroundTrackColor:rgba(255,255,255,0.2),$radius:10px){
    &::-webkit-scrollbar-track
    {
        // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: $radius;
        background-color: $backgroundTrackColor;
        // width:10px;
    }
    &::-webkit-scrollbar
    {
        width: $size;
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb
    {
        border-radius: $radius;
        // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: $thumbColor;
    }
}

// @include scrollbarInternal(6px,white,rgba(255,255,255,0.2),10px);

/**
 * Mixin scrollbar
 */
@mixin scrollbar($size, $primary, $secondary: lighten($primary, 25%)) {
    ::-webkit-scrollbar {
        width:  $size;
        height: $size;
    }

    ::-webkit-scrollbar-thumb {
        background: $primary;
    }

    ::-webkit-scrollbar-track {
        background: $secondary;
    }
  
  // For Internet Explorer
  body {
    scrollbar-face-color: $primary;
    scrollbar-track-color: $secondary;
  }
}

/**
 * Call the damn thing
 */
// @include scrollbar(.5em, tomato);


@mixin emptyContent($pos:absolute){
    content:"";
    position:$pos;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
}

// keyframes mixin
@mixin keyframes($name) {
	@-webkit-keyframes #{$name} {
		@content;
	}
	@-moz-keyframes #{$name} {
		@content;
	}
	@-ms-keyframes #{$name} {
		@content;
	}
	@keyframes #{$name} {
		@content;
	}
}

@mixin mobile-icon ($width, $height, $bgPositionX, $bgPositionY) {
    background-repeat: no-repeat;
    background-image: url($SS_SVG_M);
    background-position: $bgPositionX $bgPositionY;
    width: $width;
    height: $height;
    background-color:transparent;
}

