// bg color
    @mixin bg-color($color, $opacity) {
        background-color: rgba($color, $opacity);
    }

    // placeholder input
    @mixin tg-placeholder {
        &::-webkit-input-placeholder {
            @content;
        }
        &:-moz-placeholder {
            @content;
        }
        &::-moz-placeholder {
            @content;
        }
        &:-ms-input-placeholder {
            @content;
        }
    }

    // filter
    @mixin filter($value) {
        -webkit-filter: $value;
            filter: $value;
    }

    // appearance for select
    @mixin appearance($value) {
        -webkit-appearance: $value;
        -moz-appearance: $value;
        -ms-appearance: $value;
        -o-appearance: $value;
        appearance: $value;
    }

    // keyframes
    @mixin keyframes($name) {
        @-webkit-keyframes #{$name} {
            @content;
        }
        @-moz-keyframes #{$name} {
            @content;
        }
        @-ms-keyframes #{$name} {
            @content;
        }
        @keyframes #{$name} {
            @content;
        }
    }

    //Background
    @mixin background {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    //Transition
    @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;
    }

    // border--botom-default
    @mixin tgborder ($color, $bgsize, $bgsize2) {
        background-image: linear-gradient($color, $color), linear-gradient($color, $color);
        background-size: $bgsize 1px, $bgsize2 1px;
        background-position: 100% 100%, 0 100%;
        background-repeat: no-repeat;
        transition: background-size 0.3s linear;
    } 

    // Transform
    @mixin transform($transforms) {
        -webkit-transform: $transforms;
        -moz-transform: $transforms;
        -ms-transform: $transforms;
        -o-transform: $transforms;
        transform: $transforms;
    }

    //Border
    @mixin border-radius($man) {
        -webkit-border-radius: $man;
        -moz-border-radius: $man;
        -o-border-radius: $man;
        -ms-border-radius: $man;
        border-radius: $man;
    }

    // Sentence case
    @mixin sentence-case() {
        text-transform: lowercase;
        &:first-letter {
            text-transform: uppercase;
        }
    }

    // Flexbox display
    @mixin flexbox() {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

    // Box shadows
    @mixin box-shadow($shadow) {
        -webkit-box-shadow: $shadow;
        -moz-box-shadow: $shadow;
        -ms-box-shadow: $shadow;
        -o-box-shadow: $shadow;
        box-shadow: $shadow;
    }

    // Radius Box
	@mixin square-box($size, $circle: false) {
	    width: $size;
	    height: $size;
	    line-height: $size;
	    text-align: center;

	    @if $circle {
	        border-radius: 50%;
	    }
	}

    // transition specific
    @mixin tg-transition($property: all, $time: .3s,  $func : ease-out, $delay : 0s) {
        -webkit-transition: $property $time $delay $func;
        -moz-transition: $property $time $delay $func;
        -ms-transition: $property $time $delay $func;
        -o-transition: $property $time $delay $func;
        transition: $property $time $delay $func;
    }

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