@mixin transition-prop($arguments...) {
	transition-duration: $time;
	transition-timing-function: ease-in-out;
	transition-property: #{$arguments};
}

@mixin position-center($top, $left){
	display: block;
	position: absolute;
	top: #{$top};
	left: #{$left};
	@include vendor-prefix(transform, translate(-#{$left},-#{$top}));
}

@mixin triangle($top, $right, $bottom, $left){
  display: block;
  width: 0;
  height: 0;
  border-top: #{$top};
  border-right: #{$right};
  border-bottom: #{$bottom};
  border-left: #{$left};
  border-style: solid;
}

//-------------font face--------------------
@mixin font-face($font-name, $file-name) {
  @font-face {
    font-family: quote($font-name);
    src: url('../fonts/'+ $file-name + '.eot');
    src: url('../fonts/'+ $file-name + '.eot?#iefix') format('embedded-opentype'),
    url('../fonts/'+ $file-name + '.woff') format('woff'),
    url('../fonts/'+ $file-name + '.ttf') format('truetype'),
    url('../fonts/'+ $file-name + '.svg##{$font-name}') format('svg');
    font-weight: normal;
    font-style: normal;
  }
}