@mixin respond($breakpoints){
    @if $breakpoints == sm{
        @media (max-width: 575.98px) { 
            @content
        }
    }
    @if $breakpoints == md{
        @media (max-width: 767.98px) { 
            @content
        }
    }
    @if $breakpoints == sm_md{
        @media (min-width: 575.98px) and (max-width: 767.98px) {
            @content
        }
    }
    @if $breakpoints == lg{
        @media screen and (max-width: 991.98px) {
            @content
        }
    }
    @if $breakpoints == xl{
        @media screen and (max-width: 1199.98px) { 
            @content
        }
    }
    @if $breakpoints == lg_xl{
        @media screen and (min-width: 991.98px) and (max-width: 1199.98px) { 
            @content
        }
    }
    @if $breakpoints == xxl{
        @media (max-width: 1399.98px) {
            @content
        }
    }
    @if $breakpoints == xxxl{
        @media (max-width: 1650px) {
            @content
        }
    }
}



@mixin transition($time) {
	-webkit-transition: all $time ease-out 0s;
	-moz-transition: all $time ease-out 0s;
	-ms-transition: all $time ease-out 0s;
	-o-transition: all $time ease-out 0s;
	transition: all $time ease-out 0s;
  }
  
  
  @mixin transform($value) {
	-webkit-transform: $value;
	   -moz-transform: $value;
		-ms-transform: $value;
		 -o-transform: $value;
			transform: $value;
  }
  
  @mixin box-sizing($value) {
	-webkit-box-sizing: $value;
	   -moz-box-sizing: $value;
			box-sizing: $value;
  }

  @mixin border-radius($value) {
			border-radius: $value;
  }

  
  @mixin box-shadow($value) {
	-webkit-box-shadow: $value;
	   -moz-box-shadow: $value;
			box-shadow: $value;
  }
  
  
  // Placeholder Mixins
@mixin placeholder {
	  &.placeholder { @content; }
	  &:-moz-placeholder { @content; }
	  &::-moz-placeholder { @content; }
	  &::-webkit-input-placeholder { @content; }
}