=transition($transition)
    -webkit-transition: $transition
    transition: $transition

=transition-duration($transition-duration)
    -webkit-transition-duration: $transition-duration
    transition-duration: $transition-duration

=transition-delay($transition-delay)
    -webkit-transition-duration: $transition-delay
    transition-duration: $transition-delay

=transition-timing-function($transition-timing-function)
    -webkit-transition-duration: $transition-timing-function
    transition-duration: $transition-timing-function

=display-flex($flex)
    display: -webkit-box
    display: -ms-flexbox
    display: -webkit-flex
    display: flex

=inline-flex($flex)
    display: -webkit-inline-box
    display: -webkit-inline-flex
    display: -ms-inline-flexbox
    display: inline-flex

=flex-column($column)
    -webkit-box-orient: vertical
    -webkit-box-direction: normal
    -ms-flex-direction: column
    -webkit-flex-direction: column
    flex-direction: column

=justify-content($value)
    -webkit-box-pack: $value
    -ms-flex-pack: $value
    -webkit-justify-content: $value
    justify-content: $value

=appearance($none)
    -webkit-appearance: $none
    -moz-appearance: $none
    appearance: $none

=left_50
    left: 50%
    right: auto
    transform: translateX(-50%)
    position: absolute

=right_50
    right: 50%
    left: auto
    transform: translateX(50%)
    position: absolute

=top_50
    top: 50%
    bottom: auto
    transform: translateY(-50%)
    position: absolute

=bottom_50
    bottom: 50%
    top: auto
    transform: translateY(50%)
    position: absolute

//responsive media query mixin

=mq($mediaName)
    @if $mediaName == "mobileSm"
        @media only screen and (min-width: 0px) and (max-width: 479px)
            @content
    @else if $mediaName == "mobile"
        @media only screen and (min-width: 0px) and (max-width: 767px)
            @content
    @else if $mediaName == "mobileLg"
        @media only screen and (min-width: 480px) and (max-width: 767px)
            @content
    @else if $mediaName == "maxTab"
        @media only screen and (max-width: 991px)
            @content
    @else if $mediaName == "tab"
        @media only screen and (min-width: 768px) and (max-width: 991px)
            @content
    @else if $mediaName == "minTab"
        @media only screen and (min-width: 768px)
            @content
    @else if $mediaName == "maxMd"
        @media only screen and (max-width: 1199px)
            @content
    @else if $mediaName == "md"
        @media only screen and (min-width: 992px) and (max-width: 1199px)
            @content
    @else if $mediaName == "minMd"
        @media only screen and (min-width: 992px)
            @content
    @else if $mediaName == "lg"
        @media only screen and (min-width: 1200px)
            @content

=cmq($val1, $val2)
    @media only screen and (min-width: $val1) and (max-width: $val2)
        @content