
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  -moz-transform: $property;
  transform: $property;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -ms-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

@mixin absolute($top,$right,$bottom,$left){
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}
@mixin flex-line($justify, $align){
  display:flex;
  display: -webkit-flex;
  justify-content: $justify;
  align-items: $align;
}
@mixin background-linear($property){
  background: -webkit-linear-gradient($property);
  background: -o-linear-gradient($property);
  background: -ms-linear-gradient($property);
  background: -moz-linear-gradient($property);
  background: linear-gradient($property);
}
@mixin line-limit($line,$height,$lineHeight){
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
  max-height: $height;
  line-height: $lineHeight;
}
@mixin responsive($media) {
  @if $media == mb {
    @media only screen and (max-width: $small-screen ) { @content; }
  }
  @else if $media == mbtb {
    @media only screen and (max-width: $tab-screen - 1) { @content; }
  }
  @else if $media == tb {
    @media only screen and (min-width: $small-screen + 1) and (max-width: $tab-screen - 1) { @content; }
  }
  @else if $media == lg {
    @media only screen and (min-width: $tab-screen) { @content; }
  }
}
@import "default";
%section{
  padding: 20px;
  @include responsive(mbtb){padding: 8px}
  position: relative;
}
%button{
  outline:none!important;
  border:none;
  padding: 5px;
  text-align: center;
  background: none;
  border-radius: 5px;
  background: $default-color;
  color:white;

  &:hover{
    background: $default-light;
  }

}