@mixin cfx {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

@mixin trans($trans: .2s) {
    -webkit-transition: all cubic-bezier(0.86, 0, 0.07, 1);
    -moz-transition: all $trans cubic-bezier(0.86, 0, 0.07, 1);
    transition: all $trans cubic-bezier(0.86, 0, 0.07, 1);
}

@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1) {
    overflow: hidden;
    position: relative;
    line-height: $lineHeight;
    max-height: $lineHeight * $lineCount;
    padding-right: 1em;
}

@mixin aspect-ratio($width, $height) {
    position: relative;
    &:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: ($height / $width) * 100%;
    }
    > img {
        position: absolute;
        display: block;
        max-width: 100%;
        max-height: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: initial;
    }
}

@mixin display_flex {
    display: flex;
    display: -webkit-flex;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
}

@mixin flex($flex_value) {
    flex: $flex_value;
    flex: -webkit- $flex_value;
    -webkit-flex: $flex_value;
    -moz-flex: $flex_value;
    -ms-flex: $flex_value;
}

// vertical alignment
@mixin flex_align_items($flex_align_value) {
    align-items: $flex_align_value;
    align-items: $flex_align_value;
    -webkit-align-items: $flex_align_value;
    -moz-align-items: $flex_align_value;
    -ms-align-items: $flex_align_value;
}

// hotizon alignment
@mixin flex_justify_content($flex_justify_value) {
    justify-content: $flex_justify_value;
    justify-content: $flex_justify_value;
    -webkit-justify-content: $flex_justify_value;
    -moz-justify-content: $flex_justify_value;
    -ms-justify-content: $flex_justify_value;
}

@mixin mqx($canvas) {
    @if $canvas == m { @media (max-width: $mobile) { @content; } }
    @else if $canvas == t { @media (max-width: $tablet) { @content;} }
    @else if $canvas == l { @media (max-width: $laptop) { @content; } }
    @else if $canvas == d { @media (max-width: $desktop) { @content; } }
}
@mixin mqn($canvas) {
    @if $canvas == m { @media (min-width: $mobile) { @content; } }
    @else if $canvas == t { @media (min-width: $tablet) { @content;} }
    @else if $canvas == l { @media (min-width: $laptop) { @content; } }
    @else if $canvas == d { @media (min-width: $desktop) { @content; } }
}
@mixin animation($anime: 1s, $delay: .1s){
    [data-animation]{
        animation-name: fadeInUp;
        animation-duration: $anime;
        animation-fill-mode: both;
        animation-delay: .7s;

        @for $i from 1 to 50 {
            &:nth-child(#{$i}) { animation-delay: $i * $delay + 0.65s; }
        }
    }
}