$break-sm: 576px;
$break-md: 768px;
$break-lg: 992px;
$break-xl: 1200px;

@mixin font-local($font-family, $font-file) {
      @font-face {
            font-family: $font-family;
            src: url($font-file+'.woff') format('woff'),
                  url($font-file+'.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
      }
}

@mixin media-min($media) {
      @if $media==sm {
            @media only screen and (min-width: $break-sm) {
                  @content;
            }
      }

      @else if $media==md {
            @media only screen and (min-width: $break-md) {
                  @content;
            }
      }

      @else if $media==lg {
            @media only screen and (min-width: $break-lg) {
                  @content;
            }
      }

      @else if $media==xl {
            @media only screen and (min-width: $break-xl) {
                  @content;
            }
      }

      @else {
            @media only screen and (min-width: $media) {
                  @content;
            }
      }
}

@mixin media-max($media) {
      @if $media==sm {
            @media only screen and (max-width: $break-sm - 0.02) {
                  @content;
            }
      }

      @else if $media==md {
            @media only screen and (max-width: $break-md - 0.02) {
                  @content;
            }
      }

      @else if $media==lg {
            @media only screen and (max-width: $break-lg - 0.02) {
                  @content;
            }
      }

      @else if $media==xl {
            @media only screen and (max-width: $break-xl - 0.02) {
                  @content;
            }
      }

      @else {
            @media only screen and (max-width: $media) {
                  @content;
            }
      }
}

@mixin bg-img($url) {
      @if $url !=none {
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-image: url($url);
      }
}

@mixin absolute($top, $right, $bottom: auto, $left: auto) {
      position: absolute;
      top: $top;
      right: $right;
      bottom: $bottom;
      left: $left;
}

@mixin flex($flex) {
      -ms-flex: 0 0 $flex;
      flex: 0 0 $flex;
      max-width: $flex;
}

@mixin css3($prop, $value) {
      -webkit-#{$prop}: $value;
      -moz-#{$prop}: $value;
      #{$prop}: $value;
}

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

      @-moz-keyframes #{$name} {
            @content;
      }

      @keyframes #{$name} {
            @content;
      }
}

@mixin clear {
      clear: both;

      &:after {
            content: '';
            display: table;
            clear: both;
      }
}

@mixin clear-pseudo {

      &:before,
      &:after {
            content: none unquote("!important");
      }
}

@mixin font($font-size, $line-height, $letter-spacing: 0, $font-family: '') {
      font-size: $font-size;

      @if $font-family !='' {
            font-family: $font-family;
      }

      @if $line-height < $font-size {
            line-height: $line-height;
      }

      @else {
            line-height: ($line-height / $font-size);
      }

      @if $letter-spacing !=0 {
            @if $letter-spacing < 10 {
                  letter-spacing: #{$letter-spacing}px;
            }

            @else {
                  letter-spacing: ($font-size * $letter-spacing) / 1000;
            }
      }
}

@mixin placeholder-color($color) {
      &::-webkit-input-placeholder {
            color: $color;
            opacity: 1;
      }

      &::-moz-placeholder {
            color: $color;
            opacity: 1;
      }

      &:-ms-input-placeholder {
            color: $color;
            opacity: 1;
      }

      &::-ms-input-placeholder {
            color: $color;
            opacity: 1;
      }

      &::placeholder {
            color: $color;
            opacity: 1;
      }
}