// Variables Sass

//  Radius
@mixin rounded($radius...) {
  -webkit-border-radius:$radius;
  -moz-border-radius:$radius;
  border-radius:$radius;
}


//  Transform Scale 3D
@mixin transform-scale3d ($x, $y, $z) {
  -webkit-transform: scale3d ($x, $y, $z);
  -moz-transform: scale3d ($x, $y, $z);
  -ms-transform: scale3d ($x, $y, $z);
  -o-transform: scale3d ($x, $y, $z);
  transform: scale3d ($x, $y, $z);
}


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

//  Transform Translate 3D
@mixin transform-translate3d ($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
  -moz-transform: translate3d($x, $y, $z);
  -ms-transform: translate3d($x, $y, $z);
  -o-transform: translate3d($x, $y, $z);
  transform: translate3d($x, $y, $z);
}



//  Transform Rotate 3D
@mixin transform-rotate3d ($x, $y, $z, $deg) {
  -webkit-transform: rotate3d($x, $y, $z, $deg);
  -moz-transform: rotate3d($x, $y, $z, $deg);
  -ms-transform: rotate3d($x, $y, $z, $deg);
  -o-transform: rotate3d($x, $y, $z, $deg);
  transform: rotate3d($x, $y, $z, $deg);
}


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


//  Transform matrix
@mixin transform-matrix($a, $c, $b, $d, $tx, $ty) {
  -webkit-transform: matrix($a, $c, $b, $d, $tx, $ty);
  -moz-transform: matrix($a, $c, $b, $d, $tx, $ty);
  -ms-transform: matrix($a, $c, $b, $d, $tx, $ty);
  -o-transform: matrix($a, $c, $b, $d, $tx, $ty);
  transform: matrix($a, $c, $b, $d, $tx, $ty);
}

//  Transform matrix3d
@mixin transform-matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4) {
  -webkit-transform: matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4);
  -moz-transform: matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4);
  -ms-transform: matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4);
  -o-transform: matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4);
  transform: matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4);
}

//  Transition
//  effect :
// - linear
// - ease
// - ease-in
// - ease-out
// - ease-in-out
// - cubic-bezier(n,n,n,n)




//  Linear Gradient
@mixin linear-gradient ($from, $to){
  // Couleur de secours pour les vieux navigateurs
  background-color: $to;
  //  Modzilla Firefox
  background-image: -moz-linear-gradient($from, $to);
  //  Opera
  background-image: -o-linear-gradient($from, $to);
  //  Webkit
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to));
  //  Webkit (Chrome)
  background-image: -webkit-linear-gradient($from, $to);
  //  IE 10
  background-image: -ms-linear-gradient($from, $to);
  //  W3C
  background-image: linear-gradient($from, $to);
}

//  Linear Gradient
@mixin linear-gradient-p ($param, $from, $to){
  // Couleur de secours pour les vieux navigateurs
  background-color: $to;
  //  Modzilla Firefox
  background-image: -moz-linear-gradient($param, $from, $to);
  //  Opera
  background-image: -o-linear-gradient($param, $from, $to);
  // Webkit
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $from), color-stop(1, $to));
  //  Webkit (Chrome)
  background-image: -webkit-linear-gradient($param, $from, $to);
  //  IE 10
  background-image: -ms-linear-gradient($param, $from, $to);
  //  W3C
  background-image: linear-gradient($param, $from, $to);
}
@mixin repeating-gradient ($color-1, $color-2, $color-3){
  background: $color-1; //  For browsers that do not support gradients
  // Safari 5.1 to 6.0
  background: -webkit-repeating-linear-gradient($color-1, $color-2, $color-3);
  //  Opera 11.1 to 12.0
  background: -o-repeating-linear-gradient($color-1, $color-2, $color-3);
  //  Firefox 3.6 to 15
  background: -moz-repeating-linear-gradient($color-1, $color-2, $color-3);
  // Standard syntax
  background: repeating-linear-gradient($color-1, $color-2, $color-3);
}
@mixin radial-gradient($color-1, $color-2) {
  background: $color-1; //  For browsers that do not support gradients
  background: -webkit-radial-gradient($color-1, $color-2); //  Safari 5.1 to 6.0
  background: -o-radial-gradient($color-1, $color-2); //  For Opera 11.6 to 12.0
  background: -moz-radial-gradient($color-1, $color-2); //  For Firefox 3.6 to 15
  background: radial-gradient($color-1, $color-2); //  Standard syntax
}
@mixin transform-style($x) {
  -webkit-transform-style: $x;
  -moz-transform-style: $x;
  -ms-transform-style: $x;
  transform-style: $x;
}
@mixin transform($transforms...) {
  -webkit-transform: $transforms ;
  -moz-transform: $transforms ;
  -ms-transform: $transforms;
  -o-transform: $transforms;
  transform: $transforms;
}
@mixin animation-multi($animate...) {
  $max: length($animate);
  $animations: '';

  @for $i from 1 through $max {
    $animations: #{$animations + nth($animate, $i)};

    @if $i < $max {
      $animations: #{$animations + ", "};
    }
  }
  -webkit-animation: $animations;
  -moz-animation:    $animations;
  -o-animation:      $animations;
  animation:         $animations;
}

@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; //  16:9
  padding-top: 25px;
  height: 0;
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}