// VARIABLE COLLECTIONS.
// ----------------------------------------------

// Enable or disable responsive.
$responsive-transform   : false;

// Default Input Placeholder Color.
$def-pld-clr            : #555;

// Default border shortand size and color.
$def-brd                : 1px;
$def-bcl                : #cccccc;

// Default Display Property.
$def-display-val        : block;

// Default position value.
$def-pos-val            : none none none none;

// Long shadow config.
$def-shadow-depth       : 1;        // from 0.5 to 5.

// Default effect timing.
$def-etime              : .3s;      // Normal.
$def-etime-f            : .2s;      // Fast.
$def-etime-s            : .6s;      // Slow.

// Default Grid Option.
$def-grid-option        : 960 12 10;

// Default font-styles.
$def-font-style         : Hairline HairlineItalic Thin ThinItalic Light LightItalic Regular Italic Medium MediumItalic Semibold SemiboldItalic Bold BoldItalic 'Black' BlackItalic Heavy HeavyItalic;

// Concat list or map.
@function concat($list...) {
    $value: '';

    @for $i from 1 through length($list) {
        $com: ',';

        @if ($i == 1) {
            $value: nth($list, $i)#{$com};
        }
        @else if ($i == length($list)) {
            $value: $value nth($list, $i);
        }
        @else {
            $value: $value nth($list, $i)#{$com};
        }
    }

    @return $value;
}

// Concat prefixed value.
@function concat-prefix($prop, $list) {
    $value: '';

    @for $i from 1 through length($list) {
        $com: ',';

        @if ($i == 1) {
            $value: #{$prop}#{'('}nth($list, $i)#{')'}#{$com};
        }
        @else if ($i > 1 and $i < length($list)) {
            $value: $value #{$prop}#{'('}nth($list, $i)#{')'}#{$com};
        }
        @else {
            $value: $value #{$prop}#{'('}nth($list, $i)#{')'};
        }
    }

    @return $value;
}

// Shadow value maker.
@function shadow-value($top, $left, $distance, $blur, $color) {
    $value: none; $deca: 1; $decb: 0;

    @if ($blur > 0) {
        $decb: (1 / ($distance - $blur));
    }

    @for $i from 1 through $distance {
        // Negative increament.
        @if ($top < 0) {
            $top: ($top - 1);
        }
        @else if ($top > 0) {
            $top: ($top + 1);
        }
        @else {
            $top: 0;
        }

        @if ($left < 0) {
            $left: ($left - 1);
        }
        @else if ($left > 0) {
            $left: ($left + 1);
        }
        @else {
            $left: 0;
        }

        @if ($i == 1) {
            $value: #{$top}px #{$left}px rgba($color, 1);
        }
        @else {
            @if ($i >= $blur) {
                $deca: ($deca - $decb);

                $value: #{$value}, #{$top}px #{$left}px rgba($color, $deca);
            }
            @else {
                $value: #{$value}, #{$top}px #{$left}px rgba($color, 1);
            }
        }
    }

    @return $value;
}
// Important configurator.
$important : '';

@mixin unimportant {
    $important : '' !global;
}

@mixin important {
    $important : ' !important' !global; @content; @include unimportant;
}

// CSS3 PREFIXER
// @include prefixer(property, value, default);
@mixin prefixer($prop : none, $value : none, $native : true) {
    @if ($prop != none and $value != none) {
        -webkit-#{$prop}: $value#{$important};
        -moz-#{$prop}   : $value#{$important};
        -ms-#{$prop}    : $value#{$important};
        -o-#{$prop}     : $value#{$important};

        @if ($native == true) {
            #{$prop}: $value#{$important};
        }
    }
}

// MEDIA QUERY PREFIXER
// @include media(only screen and (max-width: 800px)) { }
@mixin media($query : none) {
    @if ($query != none) {
        @media #{$query} {
            @content;
        }
    }
}

// FONT-FACE GENERATOR MIXINS.
// @include font-family(NAME SOURCE STYLE STRETCH WEIGHT);
@mixin font-family($font : 'arial' 'font/arial' 400 normal normal) {
    $name : nth($font, 1);
    $src : nth($font, 2);
    $style : normal;
    $weight : 400;
    $stretch : normal;

    @if length($font) == 3 {
        $style : nth($font, 4);
    }
    @if length($font) == 4 {
        $stretch : nth($font, 5);
    }
    @if length($font) == 5 {
        $weight : nth($font, 3);
    }

    @font-face {
        font-family  : "#{$name}";
        src          : local("#{$name}");

        src          : url("#{$src}.eot");
        src          : url("#{$src}.eot#iefix") format("embedded-opentype"),
        url("#{$src}.svg") format("svg"),
        url("#{$src}.ttf") format("truetype"),
        url("#{$src}.woff") format("woff");

        font-style   : $style;
        font-weight  : $weight;
        font-stretch : $stretch;
    }
}

// COMPLEX FONT GENERATOR.
// @include font-faces(FONT-NAME SOURCE-FOLDER, STYLE);
@mixin font-faces($font : 'arial' 'assets/font/', $style : regular) {
    @for $i from 1 through length($style) {
        @include font-family('#{nth($font, 1)} #{nth($style, $i)}' '#{nth($font, 2)}#{nth($font, 1)}-#{nth($style, $i)}');
    }
}

// Font Definitions
// @include font($family, $size, $line-height, $color, $weight);
@mixin font($option : none) {
    @if ($option != none) {
        // Creating variables.
        $name : none;
        $size : none;
        $height : none;
        $color : none;
        $weight : none;

        // Getting values from $options and set to variable if defined.
        @if (length($option) >= 1) {
            $name : nth($option, 1);
        }
        @if (length($option) >= 2) {
            $size : nth($option, 2);
        }
        @if (length($option) >= 3) {
            $height : nth($option, 3);
        }
        @if (length($option) >= 4) {
            $color : nth($option, 4);
        }
        @if (length($option) >= 5) {
            $weight : nth($option, 5);
        }

        // Appliying properties.
        @if ($name != none) {
            font-family : $name#{$important};
        }
        @if ($size != none) {
            font-size : $size#{$important};
        }
        @if ($height != none) {
            line-height : $height#{$important};
        }
        @if ($color != none) {
            color : $color#{$important};
        }
        @if ($weight != none) {
            font-weight : $weight#{$important};
        }
    }
}

// BORDER SHORTHAND MIXINS.
// @include border(0 10px solid #333);
// @include border (0 10px 16px 20px solid #333);
@mixin border($borval : 0 0 solid #000000) {
    $brtop : none;
    $brrgt : none;
    $brbtm : none;
    $brlft : none;
    $brstl : none;
    $brclr : none;

    // top-bottom left-right
    @if (length($borval) >= 4) {
        $brtop : nth($borval, 1);
        $brrgt : nth($borval, 2);
        $brbtm : nth($borval, 1);
        $brlft : nth($borval, 2);

        $brstl : nth($borval, 3);
        $brclr : nth($borval, 4);
    }

    // top right bottom
    @if (length($mobile) >= 5) {
        $brbtm : nth($borval, 3);
        $brlft : none;

        $brstl : nth($borval, 4);
        $brclr : nth($borval, 5);
    }

    // top right bottom left
    @if (length($borval) == 6) {
        $brbtm : nth($borval, 3);
        $brlft : nth($borval, 4);

        $brstl : nth($borval, 5);
        $brclr : nth($borval, 6);
    }

    @if ($brtop != none) {
        border-top : $brtop $brstl $brclr#{$important};
    }
    @if ($brrgt != none) {
        border-right : $brrgt $brstl $brclr#{$important};
    }
    @if ($brbtm != none) {
        border-bottom : $brbtm $brstl $brclr#{$important};
    }
    @if ($brlft != none) {
        border-left : $brlft $brstl $brclr#{$important};
    }
}

// LONG SHADOW GENERATOR.
// @include long-shadow-generator(top, left, distance, blur, color);
@mixin long-shadow-generator($type, $config) {
    @if (length($config) == 5) {
        $tpe : nth($type, 1);
        $top : nth($config, 1);
        $lft : nth($config, 2);
        $dis : nth($config, 3);
        $blr : nth($config, 4);
        $clr : nth($config, 5);

        $value : shadow-value($top, $lft, $dis, $blr, $clr);

        @include prefixer($type, $value, true);
    }
}

// DISPLAY SETTER.
@mixin set-display($display : none, $size : none) {
    display : $display#{$important};

    @if ($size != none) {
        @if (length($size) == 1) {
            @if (nth($size, 1) != none) {
                width  : #{nth($size, 1)}#{$important};
                height : #{nth($size, 1)}#{$important};
            }
        } @else if (length($size) == 2) {
            @if (nth($size, 1) != none) {
                width : #{nth($size, 1)}#{$important};
            }
            @if (nth($size, 2) != none) {
                height : #{nth($size, 2)}#{$important};
            }
        }
    }
}

// CSS3 Standards.
@mixin background-clip($value) {
	@include prefixer(background-clip, $value, true);
}

@mixin background-origin($value) {
	@include prefixer(background-origin, $value, true);
}

@mixin background-size($value) {
	@include prefixer(background-size, $value, true);
}

@mixin box-align($value) {
	@include prefixer(box-align, $value, true);
}

@mixin box-direction($value) {
	@include prefixer(box-direction, $value, true);
}

@mixin box-decoration-break($value) {
	@include prefixer(box-decoration-break, $value, true);
}

@mixin box-flex($value) {
	@include prefixer(box-flex, $value, true);
}

@mixin box-flex-group($value) {
	@include prefixer(box-flex-group, $value, true);
}

@mixin box-lines($value) {
	@include prefixer(box-lines, $value, true);
}

@mixin box-ordinal-group($value) {
	@include prefixer(box-ordinal-group, $value, true);
}

@mixin box-orient($value) {
	@include prefixer(box-orient, $value, true);
}

@mixin box-pack($value) {
	@include prefixer(box-pack, $value, true);
}

@mixin break-after($value) {
	@include prefixer(break-after, $value, true);
}

@mixin break-before($value) {
	@include prefixer(break-before, $value, true);
}

@mixin break-inside($value) {
	@include prefixer(break-inside, $value, true);
}

@mixin columns($value) {
	@include prefixer(columns, $value, true);
}

@mixin column-count($value) {
	@include prefixer(column-count, $value, true);
}

@mixin column-fill($value) {
	@include prefixer(column-fill, $value, true);
}

@mixin column-gap($value) {
	@include prefixer(column-gap, $value, true);
}

@mixin column-rule($value) {
	@include prefixer(column-rule, $value, true);
}

@mixin column-rule-color($value) {
	@include prefixer(column-rule-color, $value, true);
}

@mixin column-rule-style($value) {
	@include prefixer(column-rule-style, $value, true);
}

@mixin column-rule-width($value) {
	@include prefixer(column-rule-width, $value, true);
}

@mixin column-span($value) {
	@include prefixer(column-span, $value, true);
}

@mixin column-width($value) {
	@include prefixer(column-width, $value, true);
}

@mixin marquee-direction($value) {
	@include prefixer(marquee-direction, $value, true);
}

@mixin marquee-play-count($value) {
	@include prefixer(marquee-play-count, $value, true);
}

@mixin marquee-speed($value) {
	@include prefixer(marquee-speed, $value, true);
}

@mixin marquee-style($value) {
	@include prefixer(marquee-style, $value, true);
}

@mixin nav-index($value) {
	@include prefixer(nav-index, $value, true);
}

@mixin nav-left($value) {
	@include prefixer(nav-left, $value, true);
}

@mixin nav-right($value) {
	@include prefixer(nav-right, $value, true);
}

@mixin nav-up($value) {
	@include prefixer(nav-up, $value, true);
}

@mixin rotation($value) {
	@include prefixer(rotation, $value, true);
}

@mixin rotation-point($value) {
	@include prefixer(rotation-point, $value, true);
}

@mixin text-wrap($value) {
	@include prefixer(text-wrap, $value, true);
}

@mixin grid-columns($value) {
	@include prefixer(grid-columns, $value, true);
}

@mixin grid-rows($value) {
	@include prefixer(grid-rows, $value, true);
}

@mixin hanging-punctuation($value) {
	@include prefixer(hanging-punctuation, $value, true);
}

@mixin icon($value) {
	@include prefixer(icon, $value, true);
}

@mixin punctuation-trim($value) {
	@include prefixer(punctuation-trim, $value, true);
}

@mixin resize($value) {
	@include prefixer(resize, $value, true);
}

@mixin filter($value) {
	@include prefixer(filter, $value, true);
}

@mixin text-size-adjust($value) {
	@include prefixer(text-size-adjust, $value, true);
}

@mixin clip-path($value) {
	@include prefixer(clip-path, $value, true);
}

@mixin target($value) {
	@include prefixer(target, $value, true);
}

@mixin target-name($value) {
	@include prefixer(target-name, $value, true);
}

@mixin target-new($value) {
	@include prefixer(target-new, $value, true);
}

@mixin target-position($value) {
	@include prefixer(target-position, $value, true);
}

@mixin word-break($value) {
	@include prefixer(word-break, $value, true);
}

@mixin word-wrap($value) {
	@include prefixer(word-wrap, $value, true);
}

// Appearance.
@mixin appearance($value) {
	@include prefixer(appearance, $value, true);
}

// Box Sizing.
@mixin box-sizing($value) {
	@include prefixer(box-sizing, $value, true);
}

// Backface Visibility.
@mixin backface-visibility($value) {
	@include prefixer(backface-visibility, $value, true);
}

// User select.
@mixin user-select($value) {
	@include prefixer(user-select, $value, true);
}


// Opacity.
@mixin opacity($arg) {
    @include prefixer(opacity, $arg, true);

    filter: "alpha(opacity=#{($arg * 100)})"#{$important};
}

// Text Overflow.
@mixin text-overflow {
    overflow: hidden#{$important};
    text-overflow: ellipsis#{$important};
    white-space: nowrap#{$important};
}
@mixin hyphens($value: auto) {
    @include prefixer(hyphens, $value, true);

    word-wrap: break-word#{$important};
}

// Clearfix.
@mixin clearfix {
    *zoom: 1#{$important};

    &:before, &:after { content: ""#{$important}; display: table#{$important}; }
    &:after { clear: both#{$important}; }
}

// Container.
@mixin container($arg: 960px 0 0) {
    width: 100%#{$important};
    max-width: #{nth($arg, 1)}#{$important};
    margin: 0 auto#{$important};

    @if (length($arg) >= 2) {
        padding-left: #{nth($arg, 2)}#{$important};
    }
    @if (length($arg) == 3) {
        padding-right: #{nth($arg, 3)}#{$important};
    }
}

// Text Transform
@mixin uppercase {
    text-transform: uppercase#{$important};
}
@mixin lowercase {
    text-transform: lowercase#{$important};
}
@mixin capitalize {
    text-transform: capitalize#{$important};
}
@mixin normal-case {
    text-transform: none#{$important};
}

// Text Decoration
@mixin underline {
    text-decoration: underline#{$important};
}
@mixin line-through {
    text-decoration: line-through#{$important};
}
@mixin overline {
    text-decoration: overline#{$important};
}
@mixin no-decoration {
    text-decoration: none#{$important};
}

// Text Util
@mixin jutify {
    text-align: justify#{$important};
}
@mixin subscript {
    vertical-align: sub#{$important};
}
@mixin superscript {
    vertical-align: super#{$important};
}
@mixin text-top {
    vertical-align: text-top#{$important};
}
@mixin text-bottom {
    vertical-align: text-bottom#{$important};
}
@mixin normal-wrap {
    white-space: normal#{$important};
}
@mixin no-wrap {
    white-space: nowrap#{$important};
}
@mixin pre-wrap {
    white-space: pre-wrap#{$important};
}
@mixin pre-line {
    white-space: pre-line#{$important};
}
@mixin break-word {
    word-wrap: break-word#{$important};
}
@mixin break-all {
    word-break: break-all#{$important};
}
@mixin keep-all {
    word-break: keep-all#{$important};
}

// Font Smoothing.
@mixin font-smoothing {
    speak: none#{$important};
    font-variant: normal#{$important};

    -webkit-font-smoothing: antialiased#{$important};
    -moz-osx-font-smoothing: grayscale#{$important};
}

// Font style wrapper @2.0.0
@mixin italic {
    font-style: italic#{$important};
}
@mixin oblique {
    font-style: oblique#{$important};
}

// Text Overflow wrapper @2.0.0
@mixin text-clip {
    text-overflow: clip#{$important};
}
@mixin text-ellipsis {
    text-overflow: ellipsis#{$important};
}


// X Alignment
@mixin center-align {
    text-align: center#{$important};
}
@mixin middle-align {
    vertical-align: middle#{$important};
}
@mixin align-left {
    text-align: left#{$important};
}
@mixin align-right {
    text-align: right#{$important};
}
@mixin align-center {
    text-align: center#{$important};
}

// Y Alignment
@mixin align-top {
    vertical-align: top#{$important};
}
@mixin align-middle {
    vertical-align: middle#{$important};
}
@mixin align-bottom {
    vertical-align: bottom#{$important};
}
@mixin align-baseline {
    vertical-align: baseline#{$important};
}

// Mixed Alignment
@mixin align-top-left {
    @include align-left;
    @include align-top;
}
@mixin align-top-center {
    @include align-center;
    @include align-top;
}
@mixin align-top-right {
    @include align-right;
    @include align-top;
}
@mixin align-middle-left {
    @include align-left;
    @include align-middle;
}
@mixin align-middle-center {
    @include align-center;
    @include align-middle;
}
@mixin align-middle-right {
    @include align-right;
    @include align-middle;
}
@mixin align-bottom-left {
    @include align-left;
    @include align-bottom;
}
@mixin align-bottom-center {
    @include align-center;
    @include align-bottom;
}
@mixin align-bottom-right {
    @include align-right;
    @include align-bottom;
}
@mixin align-baseline-left {
    @include align-left;
    @include align-baseline;
}
@mixin align-baseline-center {
    @include align-center;
    @include align-baseline;
}
@mixin align-baseline-right {
    @include align-right;
    @include align-baseline;
}
// Temporary Variables
$tmp-transition-value: none;

// Animation Mixins.
@mixin animation($value) {
    @include prefixer(animation, $value, true);
}
@mixin animation-name($value) {
    @include prefixer(animation-name, $value, true);
}
@mixin animation-duration($value) {
    @include prefixer(animation-duration, $value, true);
}
@mixin animation-timing-function($value) {
    @include prefixer(animation-timing-function, $value, true);
}
@mixin animation-delay($value) {
    @include prefixer(animation-delay, $value, true);
}
@mixin animation-iteration-count($value) {
    @include prefixer(animation-iteration-count, $value, true);
}
@mixin animation-direction($value) {
    @include prefixer(animation-direction, $value, true);
}
@mixin animation-fill-mode($value) {
    @include prefixer(animation-fill-mode, $value, true);
}
@mixin animation-play-state($value) {
    @include prefixer(animation-play-state, $value, true);
}

// Transition.
@mixin transitions($value...) {
    @include prefixer(transition, $value, true);
}
@mixin transition($value, $append: false) {
    @if ($tmp-transition-value == none) {
        $tmp-transition-value: $value !global;
    }
    @else {
        $tmp-transition-value: ($tmp-transition-value, $value) !global;
    }

    @if ($append == false) {
        @include prefixer(transition, $tmp-transition-value, true);

        $tmp-transition-value: none !global;
    }
}

@mixin transition-property($value) {
    @include prefixer(transition-property, $value, true);
}
@mixin transition-duration($value) {
    @include prefixer(transition-duration, $value, true);
}
@mixin transition-timing-function($value) {
    @include prefixer(transition-timing-function, $value, true);
}
@mixin transition-delay($value) {
    @include prefixer(transition-delay, $value, true);
}

// Prebuilt Transitions.
@mixin public-effect() {
    @include transition(all $def-etime ease-in-out);
}
@mixin public-effect-fast() {
    @include transition(all $def-etime-f ease-in-out);
}
@mixin public-effect-slow() {
    @include transition(all $def-etime-s ease-in-out);
}

// Keyframe Mixin @2.1.0
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}

@mixin block($size: none) {
	@include set-display(block, $size);
}

@mixin inline($size: none) {
	@include set-display(inline, $size);
}

@mixin inline-block($size: none) {
	@include set-display(inline-block, $size);

    *display: inline#{$important};
    zoom: 1#{$important};
}

@mixin table($size: none) {
	@include set-display(table, $size);
}

@mixin table-row($size: none) {
	@include set-display(table-row, $size);
}

@mixin table-cell($size: none) {
	@include set-display(table-cell, $size);
}

@mixin table-caption($size: none) {
	@include set-display(table-caption, $size);
}

@mixin table-column-group($size: none) {
	@include set-display(table-column-group, $size);
}

@mixin table-header-group($size: none) {
	@include set-display(table-header-group, $size);
}

@mixin table-footer-group($size: none) {
	@include set-display(table-footer-group, $size);
}

@mixin table-row-group($size: none) {
	@include set-display(table-caption, $size);
}

@mixin inline-table($size: none) {
	@include set-display(inline-table, $size);
}

@mixin inline-flex($size: none) {
	@include set-display(inline-flex, $size);
}


@mixin list-item($size: none) {
	@include set-display(list-item, $size);
}

@mixin run-in($size: none) {
	@include set-display(run-in, $size);
}

// Visibility.
@mixin invisible {
    visibility: hidden#{$important};
    opacity: 0#{$important};
}

@mixin visible {
    visibility: visible#{$important};
    opacity: 1#{$important};
}

@mixin hide {
    display: none !important;
}

@mixin show {
    display: block !important;
}

@mixin hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

// Dimensions
@mixin size($size: none) {
    @if ($size != none) {
        @if (length($size) == 1) {
            @if (nth($size, 1) != none) {
                width: #{nth($size, 1)}#{$important};
                height: #{nth($size, 1)}#{$important};
            }
        }
        @else if (length($size) == 2) {
            @if (nth($size, 1) != none) {
                width: #{nth($size, 1)}#{$important};
            }
            @if (nth($size, 2) != none) {
                height: #{nth($size, 2)}#{$important};
            }
        }
    }
}
@mixin max-size($size: none) {
    @if ($size != none) {
        @if (length($size) == 1) {
            @if (nth($size, 1) != none) {
                max-width: #{nth($size, 1)}#{$important};
                max-height: #{nth($size, 1)}#{$important};
            }
        }
        @else if (length($size) == 2) {
            @if (nth($size, 1) != none) {
                max-width: #{nth($size, 1)}#{$important};
            }
            @if (nth($size, 2) != none) {
                max-height: #{nth($size, 2)}#{$important};
            }
        }
    }
}
@mixin min-size($size: none) {
    @if ($size != none) {
        @if (length($size) == 1) {
            @if (nth($size, 1) != none) {
                min-width: #{nth($size, 1)}#{$important};
                min-height: #{nth($size, 1)}#{$important};
            }
        }
        @else if (length($size) == 2) {
            @if (nth($size, 1) != none) {
                min-width: #{nth($size, 1)}#{$important};
            }
            @if (nth($size, 2) != none) {
                min-height: #{nth($size, 2)}#{$important};
            }
        }
    }
}

// Default grid options.
$tmp-grid-box-width: 960;
$tmp-grid-box-column: 12;
$tmp-grid-box-gutter: 10;

$tmp-grid-gutter-size: (($tmp-grid-box-gutter / $tmp-grid-box-width) * 100%);
$tmp-grid-column-size: ((100% / $tmp-grid-box-column) - $tmp-grid-gutter-size);

// Grid container generator.
@mixin grid-box($opt: 960 12 20) {
    @if (length($opt) >= 1) {
        $tmp-grid-box-width: nth($opt, 1) !global;
    }
    @if (length($opt) >= 2) {
        $tmp-grid-box-column: nth($opt, 2) !global;
    }
    @if (length($opt) >= 3) {
        $tmp-grid-box-gutter: nth($opt, 3) !global;
    }

    $tmp-grid-gutter-size: (($tmp-grid-box-gutter / $tmp-grid-box-width) * 100%) !global;
    $tmp-grid-column-size: ((100% / $tmp-grid-box-column) - $tmp-grid-gutter-size) !global;

    @include clearfix;

    display: block#{$important};
    width: (100% + $tmp-grid-gutter-size)#{$important};
    margin-left: -($tmp-grid-gutter-size)#{$important};
}

// Grid column generator.
@mixin grid-box-col($opt: 12) {
    display: block#{$important};
    width: (($tmp-grid-column-size * $opt) + ($tmp-grid-gutter-size * ($opt - 1)))#{$important};
    margin-left: $tmp-grid-gutter-size#{$important};
    float: left#{$important};
}

@mixin grid-box-push($opt: 12) {
    padding-left: (($tmp-grid-column-size * $opt) + ($tmp-grid-gutter-size * $opt))#{$important};
}

@mixin grid-box-pull($opt: 12) {
    padding-right: (($tmp-grid-column-size * $opt) + ($tmp-grid-gutter-size * $opt))#{$important};
}

// Default grid options.
$tmp-flex-box-width: 960;
$tmp-flex-box-column: 12;
$tmp-flex-box-gutter: 10;

$tmp-flex-gutter-size: (($tmp-flex-box-gutter / $tmp-flex-box-width) * 100%);
$tmp-flex-column-size: ((100% / $tmp-flex-box-column) - $tmp-flex-gutter-size);

// Grid container generator.
@mixin grid($opt: 960 12 20 none none) {
    $xa: start;
    $ya: stretch;

    @if (length($opt) >= 1) {
        $tmp-flex-box-width: nth($opt, 1) !global;
    }
    @if (length($opt) >= 2) {
        $tmp-flex-box-column: nth($opt, 2) !global;
    }
    @if (length($opt) >= 3) {
        $tmp-flex-box-gutter: nth($opt, 3) !global;
    }
    @if (length($opt) >= 4) {
        $xa: nth($opt, 4);
    }
    @if (length($opt) >= 5) {
        $ya: nth($opt, 5);
    }

    $tmp-flex-gutter-size: (($tmp-flex-box-gutter / $tmp-flex-box-width) * 100%) !global;
    $tmp-flex-column-size: ((100% / $tmp-flex-box-column) - $tmp-flex-gutter-size) !global;

    @include flex-block((100% + $tmp-flex-gutter-size) none);
    @include flex-direction(row);
    @include flex-wrap;

    @if ($xa != none) {
        @include flex-align-content($xa);
    }

    @if ($ya != none) {
        @include flex-align-items($ya);
    }

    margin-left: -($tmp-flex-gutter-size)#{$important};
}

// Grid column generator.
@mixin grid-col($opt: 12 none none) {
    @if (length($opt) >= 1) {
        @include flex-basis((($tmp-flex-column-size * nth($opt, 1)) + ($tmp-flex-gutter-size * (nth($opt, 1) - 1))));
    }

    margin-left: $tmp-flex-gutter-size#{$important};
    margin-bottom: #{$tmp-flex-box-gutter}px#{$important};

    @if (length($opt) >= 2) {
        @include flex-block;
        @include flex-align-content(nth($opt, 2));
    }

    @if (length($opt) == 3) {
        @include flex-align-items(nth($opt, 3));
    }
}

@mixin grid-push($opt: 12) {
    padding-left: (($tmp-flex-column-size * $opt) + ($tmp-flex-gutter-size * $opt))#{$important};
}

@mixin grid-pull($opt: 12) {
    padding-right: (($tmp-flex-column-size * $opt) + ($tmp-flex-gutter-size * $opt))#{$important};
}

// Temporary Value
$tmp-transform-value: none;

// TRANSFORMS
@mixin transforms($trans...) {
    @include prefixer(transform, $trans, true);
}
@mixin transform($trans: none, $append: false) {
    @if ($tmp-transform-value == none) {
        @if ($trans != none) {
            $tmp-transform-value: #{$trans} !global;
        }
    }
    @else {
        @if ($trans != none) {
            $tmp-transform-value: $tmp-transform-value #{$trans} !global;
        }
    }

    @if ($append == false) {
        @include prefixer(transform, #{$tmp-transform-value}, true);

        $tmp-transform-value: none !global;
    }
}

@mixin transform-origin($value) {
    @include prefixer(transform-origin, $value, true);
}
@mixin transform-style($value) {
    @include prefixer(transform-style, $value, true);
}

// PERSPECTIVE
@mixin perspective($value) {
    @include prefixer(perspective, $value, true);
}
@mixin perspective-origin($value) {
    @include prefixer(perspective-origin, $value, true);
}

// TRANSLATE TRANSFORMS
@mixin translate($trans: none, $append: false) {
    @if (length($trans) == 1) {
        @include transform(translate($trans), $append);
    }
    @else if (length($trans) == 2) {
        @include transform(translate(nth($trans, 1), nth($trans, 2)), $append);
    }
    @else if (length($trans) == 3) {
        @include transform(translate3d(nth($trans, 1), nth($trans, 2), nth($trans, 3)), $append);
    }
}
@mixin translateX($trans, $append: false) {
    @include transform(translateX($trans), $append);
}
@mixin translateY($trans, $append: false) {
    @include transform(translateY($trans), $append);
}
@mixin translateZ($trans, $append: false) {
    @include transform(translateZ($trans), $append);
}

// ROTATE TRANSFORMS
@mixin rotate($trans: none, $append: false) {
    @if (length($trans) == 1) {
        @include transform(rotate($trans), $append);
    }
    @else if (length($trans) == 2) {
        @include transform(rotate(nth($trans, 1), nth($trans, 2)), $append);
    }
    @else if (length($trans) == 3) {
        @include transform(rotate3d(nth($trans, 1), nth($trans, 2), nth($trans, 3)), $append);
    }
}
@mixin rotateX($trans, $append: false) {
    @include transform(rotateX($trans), $append);
}
@mixin rotateY($trans, $append: false) {
    @include transform(rotateY($trans), $append);
}
@mixin rotateZ($trans, $append: false) {
    @include transform(rotateZ($trans), $append);
}

// SCALE TRANSFORMS
@mixin scale($trans: none, $append: false) {
    @if (length($trans) == 1) {
        @include transform(scale($trans), $append);
    }
    @else if (length($trans) == 2) {
        @include transform(scale(nth($trans, 1), nth($trans, 2)), $append);
    }
    @else if (length($trans) == 3) {
        @include transform(scale3d(nth($trans, 1), nth($trans, 2), nth($trans, 3)), $append);
    }
}
@mixin scaleX($trans, $append: false) {
    @include transform(scaleX($trans), $append);
}
@mixin scaleY($trans, $append: false) {
    @include transform(scaleY($trans), $append);
}
@mixin scaleZ($trans, $append: false) {
    @include transform(scaleZ($trans), $append);
}

// SKEW TRANSFORMS
@mixin skew($trans: none, $append: false) {
    @if (length($trans) == 1) {
        @include transform(skew($trans), $append);
    }
    @else if (length($trans) == 2) {
        @include transform(skew(nth($trans, 1), nth($trans, 2)), $append);
    }
}
@mixin skewX($trans, $append: false) {
    @include transform(skewX($trans), $append);
}
@mixin skewY($trans, $append: false) {
    @include transform(skewY($trans), $append);
}

@mixin position($pos: none, $off: none) {
    @if ($pos != none) {
        position: $pos#{$important};
    }

    @if ($off != none) {
        @if (length($off) >= 1) {
            @if (nth($off, 1) != none) {
                top: #{nth($off, 1)}#{$important};
            }
        }
        @if (length($off) >= 2) {
            @if (nth($off, 2) != none) {
                right: #{nth($off, 2)}#{$important};
            }
        }
        @if (length($off) >= 3) {
            @if (nth($off, 3) != none) {
                bottom: #{nth($off, 3)}#{$important};
            }
        }
        @if (length($off) >= 4) {
            @if (nth($off, 4) != none) {
                left: #{nth($off, 4)}#{$important};
            }
        }

        @if (length($off) >= 5) {
            @if (nth($off, 5) != none) {
                @include translateX(nth($off, 5), true);
            }
        }
        @if (length($off) >= 6) {
            @if (nth($off, 6) != none) {
                @include translateY(nth($off, 6), true);
            }
        }

        @if (length($off) >= 5) {
            @include transform;
        }
    }
}

// Absolute Alignment.
@mixin absolute($arg: none) {
    @include position(absolute, $arg);
}
@mixin absolute-left {
    @include absolute(none none none 0);
}
@mixin absolute-center {
    @include absolute(none none none 50% -50%);
}
@mixin absolute-right {
    @include absolute(none 0);
}

@mixin absolute-top {
    @include absolute(0);
}
@mixin absolute-middle {
    @include absolute(50% none none none none -50%);
}
@mixin absolute-bottom {
    @include absolute(none none 0);
}

@mixin absolute-top-left {
    @include absolute(0 none none 0);
}
@mixin absolute-top-center {
    @include absolute(0 none none 50% -50%);
}
@mixin absolute-top-right {
    @include absolute(0 0);
}

@mixin absolute-middle-left {
    @include absolute(50% none none 0 none -50%);
}
@mixin absolute-middle-center {
    @include absolute(50% none none 50% -50% -50%);
}
@mixin absolute-middle-right {
    @include absolute(50% 0 none none none -50%);
}

@mixin absolute-bottom-left {
    @include absolute(none none 0 0);
}
@mixin absolute-bottom-center {
    @include absolute(none none 0 50% -50%);
}
@mixin absolute-bottom-right {
    @include absolute(none 0 0);
}

// FIXED POSITIONS
@mixin fixed($arg: none) {
    @include position(fixed, $arg);
}
@mixin fixed-left {
    @include fixed(none none none 0);
}
@mixin fixed-center {
    @include fixed(none none none 50% -50%);
}
@mixin fixed-right {
    @include fixed(none 0);
}

@mixin fixed-top {
    @include fixed(0);
}
@mixin fixed-middle {
    @include fixed(50% none none none none -50%);
}
@mixin fixed-bottom {
    @include fixed(none none 0);
}

@mixin fixed-top-left {
    @include fixed(0 none none 0);
}
@mixin fixed-top-center {
    @include fixed(0 none none 50% -50%);
}
@mixin fixed-top-right {
    @include fixed(0 0);
}

@mixin fixed-middle-left {
    @include fixed(50% none none 0 none -50%);
}
@mixin fixed-middle-center {
    @include fixed(50% none none 50% -50% -50%);
}
@mixin fixed-middle-right {
    @include fixed(50% 0 none none none -50%);
}

@mixin fixed-bottom-left {
    @include fixed(none none 0 0);
}
@mixin fixed-bottom-center {
    @include fixed(none none 0 50% -50%);
}
@mixin fixed-bottom-right {
    @include fixed(none 0 0);
}

// RELATIVE POSITIONS
@mixin relative($arg: none) {
    @include position(relative, $arg);
}
@mixin relative-left {
    @include relative(none none none 0);
}
@mixin relative-center {
    @include relative(none none none 50% -50%);
}
@mixin relative-right {
    @include relative(none 0);
}

@mixin relative-top {
    @include relative(0);
}
@mixin relative-middle {
    @include relative(50% none none none none -50%);
}
@mixin relative-bottom {
    @include relative(none none 0);
}

@mixin relative-top-left {
    @include relative(0 none none 0);
}
@mixin relative-top-center {
    @include relative(0 none none 50% -50%);
}
@mixin relative-top-right {
    @include relative(0 0);
}

@mixin relative-middle-left {
    @include relative(50% none none 0 none -50%);
}
@mixin relative-middle-center {
    @include relative(50% none none 50% -50% -50%);
}
@mixin relative-middle-right {
    @include relative(50% 0 none none none -50%);
}

@mixin relative-bottom-left {
    @include relative(none none 0 0);
}
@mixin relative-bottom-center {
    @include relative(none none 0 50% -50%);
}
@mixin relative-bottom-right {
    @include relative(none 0 0);
}

// Flex box display.
@mixin flex-block($size: none) {
    box-sizing: border-box#{$important};

    // Old Syntax
    display: -webkit-box#{$important};
    display: -moz-box#{$important};

    // New Syntax
    display: -ms-flexbox#{$important};
    display: -webkit-flex#{$important};

    // Global Support
    display: flex#{$important};

    @if ($size != none) {
        @include size($size);
    }
}

// Flex display.
@mixin flex($prop: none) {
    @if ($prop != none) {
        @if ($prop == false) {
            // Old Syntax
            -webkit-box-flex: 0 0 0%#{$important};
            -moz-box-flex: 0 0 0%#{$important};

            // New Syntax
            -webkit-flex: 0 0 0%#{$important};
            -ms-flex: 0 0 0%;

            // Global Support
            flex: 0 0 0%#{$important};
        }
        @else {
            // Old Syntax
            -webkit-box-flex: $prop#{$important};
            -moz-box-flex: $prop#{$important};

            // New Syntax
            -webkit-flex: $prop#{$important};
            -ms-flex: $prop#{$important};

            // Global Support
            flex: $prop#{$important};
        }
    }
    @else {
        // Old Syntax
        -webkit-box-flex: 1#{$important};
        -moz-box-flex: 1#{$important};

        // New Syntax
        -webkit-flex: 1#{$important};
        -ms-flex: 1#{$important};

        // Global Support
        flex: 1#{$important};
    }
}

// Flex Direction
@mixin flex-direction($dir: none) {
    @if ($dir != none) {
        // Old Syntax
        -webkit-box-direction: $dir#{$important};
        -webkit-box-orient: $dir#{$important};
        -webkit-moz-direction: $dir#{$important};
        -webkit-moz-orient: $dir#{$important};

        // New Syntax
        -webkit-flex-direction: $dir#{$important};
        -ms-flex-direction: $dir#{$important};

        // Global Syntax
        flex-direction: $dir#{$important};
    }
}

// Flex Flow
@mixin flex-flow($prop: none) {
    @if ($prop != none) {
        -webkit-flex-flow: $prop#{$important};
        -ms-flex-flow: $prop#{$important};

        flex-flow: $prop#{$important};
    }
}

// Flex Basis
@mixin flex-basis($prop: none) {
    @if ($prop != none) {
        -ms-flex-preferred-size: $prop#{$important};
        -webkit-flex-basis: $prop#{$important};

        flex-basis: $prop#{$important};
    }
}

// Flex Shrink
@mixin flex-shrink($prop: none) {
    @if ($prop != none) {
        -webkit-flex-shrink: $prop#{$important};
        -ms-flex-negative: $prop#{$important};

        flex-shrink: $prop#{$important};
    }
}

// Flex Shrink
@mixin flex-grow($prop: none) {
    @if ($prop != none) {
        -webkit-box-flex: $prop#{$important};
        -moz-box-flex: $prop#{$important};

        -webkit-flex-grow: $prop#{$important};
        -ms-flex-positive: $prop#{$important};

        flex-grow: $prop#{$important};
    }
}

// Flex Order
@mixin flex-order($prop: none) {
    @if ($prop != none) {
        -webkit-box-ordinal-group: $prop#{$important};
        -moz-box-ordinal-group: $prop#{$important};

        -ms-flex-order: $prop#{$important};
        -webkit-order: $prop#{$important};

        order: #{$important};
    }
}

// Flex Justify Content (Horizontal)
@mixin flex-align-content($align: none) {
    @if ($align != none) {
        $x: $align;

        @if ($x != none) {
            @if ($x == space-around) {
                -webkit-box-pack: $x#{$important};
                -moz-box-pack: $x#{$important};

                -webkit-justify-content: $x#{$important};
                -ms-flex-pack: distribute#{$important};

                justify-content: $x#{$important};
            }
            @else if ($x == space-between) {
                -webkit-box-pack: $x#{$important};
                -moz-box-pack: $x#{$important};

                -webkit-justify-content: $x#{$important};
                -ms-flex-pack: justify#{$important};

                justify-content: $x#{$important};
            }
            @else if ($x == start or $x == end) {
                -webkit-box-pack: flex-#{$x}#{$important};
                -moz-box-pack: flex-#{$x}#{$important};

                -webkit-justify-content: flex-#{$x}#{$important};
                -ms-flex-pack: $x#{$important};

                justify-content: flex-#{$x}#{$important};
            }
            @else {
                -webkit-box-pack: $x#{$important};
                -moz-box-pack: $x#{$important};

                -webkit-justify-content: $x#{$important};
                -ms-flex-pack: $x#{$important};

                justify-content: $x#{$important};
            }
        }
    }
}

// Flex Align Items (Vertical)
@mixin flex-align-items($align: none) {
    @if ($align != none) {
        $y: $align;

        @if ($y != none) {
            @if ($y == start or $y == end) {
                -webkit-box-align: flex-#{$y}#{$important};
                -moz-box-align: flex-#{$y}#{$important};

                -webkit-align-items: flex-#{$y}#{$important};
                align-items: flex-#{$y}#{$important};
            }
            @else {
                -webkit-box-align: $y#{$important};
                -moz-box-align: $y#{$important};

                -webkit-align-items: $y#{$important};
                align-items: $y#{$important};
            }

            -ms-flex-align: $y#{$important};
        }
    }
}

// Flex Align Self
@mixin flex-align-self($align: none) {
    @if ($align != none) {
        $y: $align;

        @if ($y != none) {
            @if ($y == start or $y == end) {
                -webkit-align-self: flex-#{$y}#{$important};
                align-self: flex-#{$y}#{$important};
            }
            @else {
                -webkit-align-self: $y#{$important};
                align-self: $y#{$important};
            }

            -ms-flex-item-align: $y#{$important};
        }
    }
}

// Flex Wrap
@mixin flex-wrap {
    -webkit-flex-wrap: wrap#{$important};
    -ms-flex-wrap: wrap#{$important};
    flex-wrap: wrap#{$important};
}

// Flex Fill
@mixin flex-fill {
    width: 100%#{$important};
    min-height: 100%#{$important};
    margin: 0#{$important};

    @-moz-document url-prefix() {
        width: 100%#{$important};
        height: inherit#{$important};
        min-height: auto#{$important};
        margin: 0#{$important};
    }
}

// Clean Flex
@mixin no-flex {
    @include flex(false);
}

// Flex box shorthand.
@mixin flex-box($direction: none, $option: none) {
    $align: none;
    $size: none;

    @if ($option != none) {
        @if (length($option) >= 2) {
            $align: nth($option, 1) nth($option, 2);
        }
        @if (length($option) >= 3) {
            $size: nth($option, 3);
        }
        @if (length($option) == 4) {
            $size: nth($option, 3) nth($option, 4);
        }
    }

    @include flex-block($size);
    @include flex-direction($direction);

    @if ($align != none and length($align) == 2) {
        @include flex-align-content(nth($align, 1));
        @include flex-align-items(nth($align, 2));
    }
}

// Flex box as column.
@mixin flex-box-column($prop: none) {
    @if ($prop != none) {
        @include flex-box(column, $prop);
    }
}

// Flex box as column reversed.
@mixin flex-box-column-reverse($prop: none) {
    @if ($prop != none) {
        @include flex-box(column-reverse, $prop);
    }
}

// Flex box as row
@mixin flex-box-row($prop: none) {
    @if ($prop != none) {
        @include flex-box(row, $prop);
    }
}

// Flex box as row reserved.
@mixin flex-box-row-reverse($prop: none) {
    @if ($prop != none) {
        @include flex-box(row-reverse, $prop);
    }
}

// Border Radius
@mixin border-radius($value...) {
    @include prefixer(border-radius, $value, true);
}
@mixin border-top-left-radius($value...) {
    @include prefixer(border-top-left-radius, $value, true);
}
@mixin border-top-right-radius($value...) {
    @include prefixer(border-top-right-radius, $value, true);
}
@mixin border-bottom-left-radius($value...) {
    @include prefixer(border-bottom-left-radius, $value, true);
}
@mixin border-bottom-right-radius($value...) {
    @include prefixer(border-bottom-right-radius, $value, true);
}

// Border Image
@mixin border-image($value...) {
    @include prefixer(border-image, $value, true);
}
@mixin border-image-outset($value...) {
    @include prefixer(border-image-outset, $value, true);
}
@mixin border-image-repeat($value...) {
    @include prefixer(border-image-repeat, $value, true);
}
@mixin border-image-slice($value...) {
    @include prefixer(border-image-slice, $value, true);
}
@mixin border-image-source($value...) {
    @include prefixer(border-image-source, $value, true);
}
@mixin border-image-width($value...) {
    @include prefixer(border-image-width, $value, true);
}

// Two side radius.
@mixin border-top-radius($value) {
    @include border-top-left-radius($value);
    @include border-top-right-radius($value);
}
@mixin border-right-radius($value) {
    @include border-top-right-radius($value);
    @include border-bottom-right-radius($value);
}
@mixin border-bottom-radius($value) {
    @include border-bottom-left-radius($value);
    @include border-bottom-right-radius($value);
}
@mixin border-left-radius($value) {
    @include border-top-left-radius($value);
    @include border-bottom-left-radius($value);
}
@mixin border-upright-radius($value) {
    @include border-top-right-radius($value);
    @include border-bottom-left-radius($value);
}
@mixin border-upleft-radius($value) {
    @include border-top-left-radius($value);
    @include border-bottom-right-radius($value);
}

// New line value additions holder.
$tmp-box-shadow-value: none;
$tmp-text-shadow-e-value: none;

// Single/multiple box shadows in arguments.
// @include box-shadows(0 0 1px #000);
// @include box-shadows(0 0 1px #000, 0 0 2px #ccc, 0 0 1px #ddd);
@mixin box-shadows($value...) {
    @include prefixer(box-shadow, $value, true);
}

// Single box-shadow value set, supporting additions.
// @include box-shadow(0 0 1px #fff, true);
@mixin box-shadow($value, $append: false) {
    @if ($tmp-box-shadow-value == none) {
        $tmp-box-shadow-value: $value !global;
    }
    @else {
        $tmp-box-shadow-value: ($tmp-box-shadow-value, $value) !global;
    }

    // Insert box-shadow property if it's end of additions.
    @if ($append == false) {
        @include prefixer(box-shadow, $tmp-box-shadow-value, true);

        // Resetting box shadow value.
        $tmp-box-shadow-value: none !global;
    }
}

// Single/multiple text-shadows in arguments.
// @include text-shadows(0 0 1px #000);
// @include text-shadows(0 0 1px #000, 0 0 2px #ccc, 0 0 1px #ddd);
@mixin text-shadows($value...) {
    @include prefixer(text-shadow, $value, true);
}

// New line value additions holder.

// Single text-shadow value set, supporting additions.
// @include text-shadow(0 0 1px #fff, true);
@mixin text-shadow($value, $append: false) {
    @if ($tmp-text-shadow-e-value == none) {
        $tmp-text-shadow-e-value: $value !global;
    }
    @else {
        $tmp-text-shadow-e-value: ($tmp-text-shadow-e-value, $value) !global;
    }

    // Insert text-shadow property if it's end of additions.
    @if ($append == false) {
        @include prefixer(text-shadow, $tmp-text-shadow-e-value, true);

        // Resetting box shadow value.
        $tmp-text-shadow-e-value: none !global;
    }
}

// Drop shadow.
@mixin drop-shadows($value) {
    @include box-shadow($value);
}
@mixin drop-shadow($value, $append: false) {
    @include box-shadow($value, $append);
}

// Inner Shadow.
@mixin inner-shadows($value) {
    @include box-shadows(inset $value);
}
@mixin inner-shadow($value, $append: false) {
    @include box-shadow(inset $value, $append);
}

// LONG DROP SHADOW
// @include long-drop-shadow(top left distance blur color);
@mixin long-drop-shadow($config: none) {
    @if ($config != none and length($config) == 5) {
        @include long-shadow-generator(box-shadow, $config);
    }
}

// LONG TEXT SHADOW
// @include long-text-shadow(top left distance blur color);
@mixin long-text-shadow($config: none) {
    @if ($config != none and length($config) == 5) {
        @include long-shadow-generator(text-shadow, $config);
    }
}


// GRADIENT GENERATOR
$tmp-w-gradient: none;
$tmp-m-gradient: none;
$tmp-s-gradient: none;
$tmp-o-gradient: none;

@mixin gradient($type, $value, $append: false) {
    @if ($tmp-w-gradient == none) {
        // Create First Value
        $tmp-w-gradient: -webkit-#{$type}#{'-gradient('}#{$value}#{')'} !global;
        $tmp-m-gradient: -moz-#{$type}#{'-gradient('}#{$value}#{')'} !global;
        $tmp-s-gradient: -ms-#{$type}#{'-gradient('}#{$value}#{')'} !global;
        $tmp-o-gradient: -o-#{$type}#{'-gradient('}#{$value}#{')'} !global;
    }
    @else {
        // Appending Value
        $tmp-w-gradient: ($tmp-w-gradient, -webkit-#{$type}#{'-gradient('}#{$value}#{')'}) !global;
        $tmp-m-gradient: ($tmp-m-gradient, -moz-#{$type}#{'-gradient('}#{$value}#{')'}) !global;
        $tmp-s-gradient: ($tmp-s-gradient, -ms-#{$type}#{'-gradient('}#{$value}#{')'}) !global;
        $tmp-o-gradient: ($tmp-o-gradient, -o-#{$type}#{'-gradient('}#{$value}#{')'}) !global;
    }

    @if ($append == false) {
        // Applying Styles
        background-image: $tmp-w-gradient#{$important};
        background-image: $tmp-m-gradient#{$important};
        background-image: $tmp-s-gradient#{$important};
        background-image: $tmp-o-gradient#{$important};

        // Resetting Temporary Value
        $tmp-w-gradient: none !global;
        $tmp-m-gradient: none !global;
        $tmp-s-gradient: none !global;
        $tmp-o-gradient: none !global;
    }
}

// LINEAR GRADIENT GENERATOR
@mixin linear-gradient($value, $append: false) {
    @include gradient(linear, $value, $append);
}

// RADIAL GRADIENT GENERATOR
@mixin radial-gradient($value, $append: false) {
    @include gradient(radial, $value, $append);
}

// Media Queries.
$retina                 : "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)";

$mobile                 : "only screen and (min-device-width : 320px) and (max-device-width : 767px)";
$mobile-portrait        : "only screen and (max-width: 509px) and (min-device-width: 1024px), (max-device-width: 480px) and (orientation: portrait)";
$mobile-landscape       : "only screen and (max-width: 509px) and (min-device-width: 1024px), (max-device-width: 480px) and (orientation: landscape)";

$tablet                 : "only screen and (min-device-width : 768px) and (max-device-width : 1024px), (min-width: 768px) and (max-width: 1200px)";
$tablet-portrait        : "only screen and (max-device-width: 1024px) and (min-device-width: 480px) and (orientation: portrait)";
$tablet-landscape       : "only screen and (max-device-width: 1024px) and (min-device-width: 480px) and (orientation: landscape)";

$desktop                : "only screen and (min-width: 1200px)";
$desktop-mdm            : "only screen and (min-width: 1400px)";
$desktop-fhd            : "only screen and (min-width: 1800px)";
$desktop-whd            : "only screen and (min-width: 2500px)";
$desktop-qhd            : "only screen and (min-width: 3400px)";
$desktop-uhd            : "only screen and (min-width: 3800px)";

// CREATING BREAKPOINT MIXINS
@mixin retina {
    @include media($retina) {
        @content;
    }
}

@mixin mobile {
    @include media($mobile) {
        @content;
    }
}

@mixin mobile-landscape {
    @include media($mobile-landscape) {
        @content;
    }
}

@mixin mobile-portrait {
    @include media($mobile-portrait) {
        @content;
    }
}

@mixin tablet {
    @include media($tablet) {
        @content;
    }
}

@mixin tablet-landscape {
    @include media($tablet-landscape) {
        @content;
    }
}

@mixin tablet-portrait {
    @include media($tablet-portrait) {
        @content;
    }
}

@mixin desktop {
    @include media($desktop) {
        @content;
    }
}

@mixin desktop-mdm {
    @include media($desktop-mdm) {
        @content;
    }
}

@mixin desktop-fhd {
    @include media($desktop-fhd) {
        @content;
    }
}

@mixin desktop-qhd {
    @include media($desktop-qhd) {
        @content;
    }
}

@mixin desktop-whd {
    @include media($desktop-whd) {
        @content;
    }
}

@mixin desktop-uhd {
    @include media($desktop-uhd) {
        @content;
    }
}

@mixin normalize() {
    /*
     * ADAPTING BOILERPLATE.CSS
     * ---------------------------------------------------------------------------
     * HTML5 ✰ Boilerplate
     *
     * What follows is the result of much research on cross-browser styling.
     * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
     * Kroc Camen, and the H5BP dev community and team.
     *
     * Detailed information about this CSS: h5bp.com/css
     *
     * normalize -----------------------------------------------------------------
     */

    html {
        font-size: 100%;
        height: 100%;
        overflow-y: auto;

        @include text-size-adjust(100%);
    }

    body {
        font-size: 100%;
        line-height: 1.231;
        position: relative;
    }

    article,
    aside,
    details,
    figcaption,
    footer,
    header,
    hgroup,
    nav,
    section,
    figure {
        display: block;
    }

    figure {
        margin: 0;
    }

    ::selection {
        background-color: #cbcbcb;

        @include text-shadow(none);
    }

    ::-moz-selection {
        background-color: #cbcbcb;

        @include text-shadow(none);
    }

    abbr[title] {
        border-bottom: 1px dotted;
    }

    b {
        font-weight: bold;
    }

    strong {
        font-weight: bold;
    }

    blockquote {
        margin: 1em 40px;
    }

    dfn {
        font-style: italic;
    }

    hr {
        border: 0;
        border-top: 1px solid #ccc;
        display: block;
        height: 1px;
        margin: 1em 0;
        padding: 0;
    }

    ins {
        background: #ff9;
        color: #000;
        text-decoration: none;
    }

    mark {
        background: #ff0;
        color: #000;
        font-style: italic;
        font-weight: bold;
    }

    pre {
        font-family: monospace, serif;
        font-size: 1em;
        white-space: pre-wrap;
        white-space: pre;

        @include word-wrap(break-word);
    }

    code {
        font-family: monospace, serif;
        font-size: 1em;
    }

    kbd {
        font-family: monospace, serif;
        font-size: 1em;
    }

    samp {
        font-family: monospace, serif;
        font-size: 1em;
    }

    q {
        quotes: none;
    }

    q:before {
        content: "";
        content: none;
    }

    q:after {
        content: "";
        content: none;
    }

    small {
        font-size: 85%;
    }

    sub {
        bottom: -0.25em;
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        top: -0.5em;
        vertical-align: baseline;
    }

    ul {
        margin: 1em 0;
        padding: 0 0 0 40px;
    }

    ol {
        margin: 1em 0;
        padding: 0 0 0 40px;
    }

    dd {
        margin: 0 0 0 40px;
    }

    nav ul {
        list-style: none;
        list-style-image: none;
        margin: 0;
        padding: 0;
    }

    nav ol {
        list-style: none;
        list-style-image: none;
        margin: 0;
        padding: 0;
    }

    img {
        -ms-interpolation-mode: bicubic;
        border: 0;
        display: inline-block;
        vertical-align: middle;
    }

    svg:not(:root) {
        overflow: hidden;
    }

    form {
        margin: 0;
    }

    fieldset {
        border: 0;
        margin: 0;
        padding: 0;
    }

    label {
        cursor: pointer;
    }

    legend {
        *margin-left: -7px;
        border: 0;
        padding: 0;
    }

    button {
        @include appearance(none);

        *overflow: visible;
        *vertical-align: middle;
        cursor: pointer;
        font-size: 100%;
        line-height: normal;
        margin: 0;
        vertical-align: baseline;
    }

    input {
        *vertical-align: middle;
        font-size: 100%;
        line-height: normal;
        margin: 0;
        vertical-align: baseline;
    }

    select {
        *vertical-align: middle;
        font-size: 100%;
        margin: 0;
        vertical-align: baseline;
    }

    textarea {
        *vertical-align: middle;
        font-size: 100%;
        margin: 0;
        vertical-align: baseline;
    }

    input[type="button"], input[type="reset"], input[type="submit"], input[type="text"] {
        @include appearance(none);

        *overflow: visible;
    }

    input[type="button"], input[type="reset"], input[type="submit"], {
        cursor: pointer;
    }

    input[type="checkbox"], input[type="radio"] {
        padding: 0;
        cursor: pointer;
    }

    input[type="search"] {
        @include appearance(textfield);
    }

    input[type="search"]::-webkit-search-decoration {
        @include appearance(none);
    }

    button::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    input::moz-focus-inner {
        border: 0;
        padding: 0;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    td {
        vertical-align: top;
    }

    p {
        margin: 0;
    }

    span {
        display: inline-block;
    }
}
// Reset Default Browser Style.
@mixin reset() {
    // Resetting HTML and BODY layout.
    html, body {
        @include size(100%);
        @include font-smoothing();

        margin: 0;
    }

    // Force elements box sizing to border box.
    body * {
        @include box-sizing(border-box);
    }

    // Resetting.
    ul {
        @include block();

        margin: 0;
        padding: 0;
        list-style: none;
    }

    // Reseting.
    input {
        @include appearance(none);

        &:focus {
            outline: none;
        }
    }

    // Resetting Headings.
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
    }

    // Resetting Anchor.
    a {
        @include inline-block();

        text-decoration: none;

        &:focus, &:hover, &:visited {
            outline: none;
        }
    }
}

// Block Debugger. Show box rectangles to debug layout.
@mixin debug-block {
    body * {
        box-shadow: 0 0 0 1px red !important;
    }
}
/* Print Styles ----------------------------------------- */
@mixin printer-style {
    @media print {
        * {
            background: transparent !important;
            color: #000 !important; /* Black prints faster: h5bp.com/s */
            box-shadow: none !important;
            text-shadow: none !important;
        }

        a,
        a:visited {
            text-decoration: underline;
        }

        a[href]:after {
            content: " (" attr(href) ")";
        }

        abbr[title]:after {
            content: " (" attr(title) ")";
        }

        /*
         * Don't show links for images, or javascript/internal links
         */

        .ir a:after,
        a[href^="javascript:"]:after,
        a[href^="#"]:after {
            content: "";
        }

        pre,
        blockquote {
            border: 1px solid #999;
            page-break-inside: avoid;
        }

        thead {
            display: table-header-group; /* h5bp.com/t */
        }

        tr,
        img {
            page-break-inside: avoid;
        }

        img {
            max-width: 100% !important;
        }

        @page {
            margin: 0.5cm;
        }

        p,
        h2,
        h3 {
            orphans: 3;
            widows: 3;
        }

        h2,
        h3 {
            page-break-after: avoid;
        }
    }
}
// Input Placeholder Wrapper
@mixin input-placeholder {
    &::-webkit-input-placeholder {
        @content;
    }
    &::-moz-input-placeholder {
        @content;
    }
    &::-ms-input-placeholder {
        @content;
    }
    &::-o-input-placeholder {
        @content;
    }
}

// Selection Wrapper
@mixin text-selection {
    &::selection {
        @content;
    }
    &::-moz-selection {
        @content;
    }
}

// Focus inner border
@mixin focus-inner-border {
    &::-moz-focus-inner {
        @content;
    }
}

// Mouse pointer mixins @2.0.0
@mixin csr-default {
    cursor: default#{$important};
}
@mixin csr-pointer {
    cursor: pointer#{$important};
}
@mixin csr-wait {
    cursor : wait#{$important};
}
@mixin csr-crosshair {
    cursor : crosshair#{$important};
}
@mixin csr-text {
    cursor : text#{$important};
}
@mixin csr-not-allowed {
    cursor : not-allowed#{$important};
}
@mixin csr-all-scroll {
    cursor : all-scroll#{$important};
}
@mixin csr-zoom-in {
    cursor : zoom-in#{$important};
}
@mixin csr-zoom-out {
    cursor : zoom-out#{$important};
}

// Box Decoration Break wrapper @2.0.0
@mixin box-slice {
    @include box-decoration-break(slice);
}
@mixin box-clone {
    @include box-decoration-break(clone);
}

// Box Sizing wrapper @2.0.0
@mixin resize-inherit {
    @include box-sizing(inherit);
}
@mixin resize-content {
    @include box-sizing(content-box);
}
@mixin resize-padding {
    @include box-sizing(padding-box);
}
@mixin resize-border {
    @include box-sizing(border-box);
}

// Direction wrapper @2.0.0.
@mixin dir-inherit {
    direction: inheri#{$important}t;
}
@mixin dir-ltr {
    direction: ltr#{$important};
}
@mixin dir-rtl {
    direction: rtl#{$important};
}


// Overflow wrapper @2.0.0
@mixin of-visible {
    overflow : visible#{$important};
}
@mixin of-visible-x {
    overflow-x: visible#{$important};
}
@mixin of-visible-y {
    overflow-y: visible#{$important};
}
@mixin of-hidden {
    overflow : hidden#{$important};
}
@mixin of-hidden-x {
    overflow-x: hidden#{$important};
}
@mixin of-hidden-y {
    overflow-y: hidden#{$important};
}
@mixin of-scroll {
    overflow : scroll#{$important};
}
@mixin of-scroll-x {
    overflow-x: scroll#{$important};
}
@mixin of-scroll-y {
    overflow-y: scroll#{$important};
}
@mixin of-auto {
    overflow : auto#{$important};
}
@mixin of-auto-x {
    overflow-x: auto#{$important};
}
@mixin of-auto-y {
    overflow-y: auto#{$important};
}

// Touch scroll wrapper @2.1.0
@mixin touch-scroll {
    @include of-scroll;

    -webkit-overflow-scrolling: touch#{$important};
}
@mixin touch-scroll-x {
    @include of-scroll-x;

    -webkit-overflow-scrolling: touch#{$important};
}
@mixin touch-scroll-y {
    @include of-scroll-y;

    -webkit-overflow-scrolling: touch#{$important};
}