/* ==========================================================================
   MIXIN
   ========================================================================== */

   @mixin mq($breakpoints) {
    @if ($breakpoints) {
      @media only screen and (max-width: $breakpoints) { @content; }
    } @else {
      @media only screen and (max-width: $s-small) {
        @content;
      }
    }
  }
  
  @mixin large {
    @media only screen and (max-width: 1440px) {
      @content;
    }
  }
  
  @mixin medium {
    @media only screen and (max-width: 1200px) {
      @content;
    }
  }
  
  
  @mixin tablet {
    @media only screen and (max-width: 1024px) {
      @content;
    }
  }
  
  @mixin smartphone {
    @media only screen and (max-width: 768px) {
      @content;
    }
  }
  
  @mixin phone {
    @media only screen and (max-width: 320px) {
      @content;
    }
  }
  
  @mixin border-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
  }
  
  @mixin clearfix() {
    &:before,
    &:after {
      content: " ";
      display: table;
    }
    &:after {
      clear: both;
    }
  }

  @mixin placeholder {
    ::-webkit-input-placeholder {@content}
    :-moz-placeholder           {@content}
    ::-moz-placeholder          {@content}
    :-ms-input-placeholder      {@content}  
  }



@mixin font-face($font-family, $size, $weight: normal, $line-height: normal) {
  font-family: $font-family;
  font-size: $size;
  font-weight: $weight;
  line-height: $line-height;
}

@mixin skeleton-animation() {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: shine .5s ease-in-out  infinite;
  animation-fill-mode: forwards;  
  // opacity: 0.1;
  // background: rgb(213,213,213) !important;
  // background: linear-gradient(45deg, rgba(213,213,213,1) 0%, rgba(238,238,238,1) 100%) !important;
  // background: $white;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b5b5b5+0,d5d5d5+100 */
  background: #DBDBDB; /* Old browsers */
  background: -moz-linear-gradient(left,  #DBDBDB 0%, #b5b5b5 30%, #DBDBDB 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #DBDBDB 0%,#b5b5b5 30%, #DBDBDB 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #DBDBDB 0%,#b5b5b5 30%, #DBDBDB 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5b5b5', endColorstr='#d5d5d5',GradientType=1 ); /* IE6-9 */

  // transform: skewX(-10deg);
}

@keyframes shine{
  from{
    left: 0;
  }
  to {
    left: 100%;
  }
}