// mixins
$all: all .3s ease-in-out;
@mixin Muli() {
  font-family: "Muli", sans-serif;
}

@mixin Raleway() {
  font-family: "Raleway", sans-serif;
}

@mixin Roboto() {
  font-family: "Roboto Slab", serif;
}

@mixin Montserrat() {
  font-family: 'Montserrat', sans-serif;
}
@mixin Poppins() {
  font-family: 'Poppins', sans-serif;
}
@mixin Questrial() {
  font-family: 'Questrial', sans-serif;
}
@mixin  border-radius($border-radius...) {
  border-radius: $border-radius;
  -webkit-border-radius: $border-radius;
  -moz-border-radius: $border-radius;
}
@mixin transition($transition...) {
  -moz-transition: $transition;
  -o-transition: $transition;
  -webkit-transition: $transition;
  transition: $transition;
}

@mixin transform($transform...) {
  -webkit-transform: $transform;
  -moz-transform: $transform;
  -ms-transform: $transform;
  -o-transform: $transform;
  transform: $transform;
}

@mixin transformY($transform...) {
  transform: translateY($transform);
  -moz-transform: translateY($transform);
  -webkit-transform: translateY($transform);
  -ms-transform: translateY($transform);
  -o-transform: translateY($transform);
}
@mixin transition($transition...) {
  -moz-transition: $transition;
  -o-transition: $transition;
  -webkit-transition: $transition;
  transition: $transition;
}

@mixin transition-property($property...) {
  -moz-transition-property: $property;
  -o-transition-property: $property;
  -webkit-transition-property: $property;
  transition-property: $property;
}

@mixin transition-duration($duration...) {
  -moz-transition-property: $duration;
  -o-transition-property: $duration;
  -webkit-transition-property: $duration;
  transition-property: $duration;
}

@mixin transition-timing-function($timing...) {
  -moz-transition-timing-function: $timing;
  -o-transition-timing-function: $timing;
  -webkit-transition-timing-function: $timing;
  transition-timing-function: $timing;
}

@mixin transition-delay($delay...) {
  -moz-transition-delay: $delay;
  -o-transition-delay: $delay;
  -webkit-transition-delay: $delay;
  transition-delay: $delay;
}
@mixin filter($filter...) {
  -webkit-filter: $filter;
  filter: $filter;
}
@mixin box-shadow($box-shadow...) {
  -webkit-box-shadow: $box-shadow;
  -moz-box-shadow: $box-shadow;
  box-shadow: $box-shadow;
}
@mixin animation($animation) {
  animation: $animation;
  -webkit-animation: $animation;
  -moz-animation: $animation;
  -o-animation: $animation;
}
@mixin background-img-cover {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

@mixin display-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin border($color){
  border: 1px solid $color;
}

@mixin border-bottom($color){
  border-bottom: 1px solid $color;
}

@mixin border-top($color){
  border-top: 1px solid $color;
}

@mixin clearboth{
  &:before,
  &:after{
    content: "";
    display: table;
    clear: both;
  }
}