//----------------------------
  //Opacity
//----------------------------//
@mixin Opacity($value){
  $IEValue   : $value*100;
  opacity    : $value;
  -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
  filter     : alpha(opacity=$IEValue);
}

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

//----------------------------
  //Background with Opacity
//----------------------------//

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

//----------------------------
  // Absolute Center
//----------------------------//
@mixin absoluteCenter($val) {
  top  : 50%;
  left : 50%;
  @include translate ($val, $val);
}
@mixin absoluteCenterY($top, $val) {
  top: $top;
  @include translateY ($val);
}
@mixin absoluteCenterX($val){
  left: 50%;
  @include translateX ($val);
}
//-------------------------------------
  // Hide/Show with Opacity & Visibility
//-------------------------------------//

@mixin fade($type) {

  @if $type == 'hide' {
    visibility : hidden;
    opacity    : 0;
  }

  @else if $type == 'show' {
    visibility : visible;
    opacity    : 1;
  }

}

//----------------------------
  //Triangle
//----------------------------//
@mixin triangle($direction:up, $color:#000, $size:100px) {
  @if ($direction == up){
    border-color : transparent transparent $color;
    border-style : solid;
    border-width : 0 $size $size;
    height       : 0;
    width        : 0;
  }
  @if ($direction == down) {
    border-color : $color transparent transparent transparent;
    border-style : solid;
    border-width : $size;
    height       : 0;
    width        : 0;
  }
  @if ($direction == left) {
    border-color : transparent $color transparent transparent;
    border-style : solid;
    border-width : $size $size $size 0;
    height       : 0;
    width        : 0;
  }
  @if ($direction == right) {
    border-color : transparent transparent transparent $color;
    border-style : solid;
    border-width : $size 0 $size $size;
    height       : 0;
    width        : 0;
  }
  @if ($direction == bottomright) {
    border-color : transparent transparent $color transparent;
    border-style : solid;
    border-width : 0 0 $size $size;
    height       : 0;
    width        : 0;
  }
  @if ($direction == bottomleft) {
    border-color : transparent transparent transparent $color;
    border-style : solid;
    border-width : $size 0 0 $size;
    height       : 0;
    width        : 0;
  }
  @if ($direction == topleft) {
    border-color : $color transparent transparent transparent;
    border-style : solid;
    border-width : $size $size 0 0;
    height       : 0;
    width        : 0;
  }
  @if ($direction == topright) {
    border-color : transparent $color transparent transparent;
    border-style : solid;
    border-width : 0 $size $size 0;
    height       : 0;
    width        : 0;
  }
}


//----------------------------
  //Image Filter Style
//----------------------------//
//usage: @include filter(grayscale, 100%);
// grayscale      ex: filter: grayscale(100%);
// sepia          ex: filter: sepia(100%);
// saturate       ex: filter: saturate(0%);
// hue-rotate     ex: filter: hue-rotate(45deg);
// invert         ex: filter: invert(100%);
// brightness     ex: filter: brightness(15%);
// contrast       ex: filter: contrast(200%);
// blur           ex: filter: blur(2px);

@mixin filter($filter-type,$filter-amount) { 
  -webkit-filter : $filter-type+unquote('(#{$filter-amount})');
  -moz-filter    : $filter-type+unquote('(#{$filter-amount})');
  -ms-filter     : $filter-type+unquote('(#{$filter-amount})');
  -o-filter      : $filter-type+unquote('(#{$filter-amount})');
  filter         : $filter-type+unquote('(#{$filter-amount})');
}

//-------------------------------
  //Social Links Child Transition
//-------------------------------//
@mixin childTransition($numberofchild) {
  @for $i from 1 through $numberofchild {
    &:nth-child(#{$i}) {
      @include transition(all, 0.3s, ease-in-out, #{$i * .1}s);
    }
  }
}

//–––––––––––––––––––––––––––––––––––
//  MEDIA QUERIES
//–––––––––––––––––––––––––––––––––––

// A map of breakpoints.
$breakpoints: (
  xs: 576px,
  sm: 768px,
  md: 992px,
  lg: 1200px,
  xl: 1500px
);


//
//  RESPOND ABOVE
//––––––––––––––––––––––––––––––––––––––––––––––––––

// @include respond-above(sm) {}
@mixin respond-above($breakpoint) {

  // If the breakpoint exists in the map.
  @if map-has-key($breakpoints, $breakpoint) {

    // Get the breakpoint value.
    $breakpoint-value: map-get($breakpoints, $breakpoint);

    // Write the media query.
    @media (min-width: $breakpoint-value) {
      @content;
    }
  
  // If the breakpoint doesn't exist in the map.
  } @else {

    // Log a warning.
    @warn 'Invalid breakpoint: #{$breakpoint}.';
  }
}


//
//  RESPOND BELOW
//––––––––––––––––––––––––––––––––––––––––––––––––––

// @include respond-below(sm) {}
@mixin respond-below($breakpoint) {

  // If the breakpoint exists in the map.
  @if map-has-key($breakpoints, $breakpoint) {

    // Get the breakpoint value.
    $breakpoint-value: map-get($breakpoints, $breakpoint);

    // Write the media query.
    @media (max-width: ($breakpoint-value - 1)) {
      @content;
    }
  
  // If the breakpoint doesn't exist in the map.
  } @else {

    // Log a warning.
    @warn 'Invalid breakpoint: #{$breakpoint}.';
  }
}


//
//  RESPOND BETWEEN
//––––––––––––––––––––––––––––––––––––––––––––––––––

// @include respond-between(sm, md) {}
@mixin respond-between($lower, $upper) {

  // If both the lower and upper breakpoints exist in the map.
  @if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {

    // Get the lower and upper breakpoints.
    $lower-breakpoint: map-get($breakpoints, $lower);
    $upper-breakpoint: map-get($breakpoints, $upper);

    // Write the media query.
    @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
      @content;
    }
  
  // If one or both of the breakpoints don't exist.
  } @else {

    // If lower breakpoint is invalid.
    @if (map-has-key($breakpoints, $lower) == false) {

      // Log a warning.
      @warn 'Your lower breakpoint was invalid: #{$lower}.';
    }

    // If upper breakpoint is invalid.
    @if (map-has-key($breakpoints, $upper) == false) {

      // Log a warning.
      @warn 'Your upper breakpoint was invalid: #{$upper}.';
    }
  }
}