@mixin image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}


@mixin flex-s {
    flex-flow: column;
}

@mixin flex {
    display: flex;
    flex-direction:row;
}

@mixin linearGradient($from, $to){
    background: $from;
    background: -moz-linear-gradient(top,  $from 0%, $to 100%);
    background: -webkit-linear-gradient(top,  $from 0%,$to 100%);
    background: linear-gradient(to bottom,  $from 0%,$to 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=0 );
}

/**
 * CSS Lock
 * @param  float     $min-size:  1            Lowest value for the lock
 * @param  float     $max-size:  1.4          Highest value for the lock
 * @param  integer   $min-width: 20           Smallest width for lock
 * @param  integer   $max-width: 100          Largest width for lock
 * @param  string    $property:  font-size    Property to apply the lock on
 * @param  string    $unit:      px           Unit of the property to apply
 */
 @mixin css-lock($min-size: 1, $max-size: 1.4, $min-width: 20, $max-width: 100, $property: font-size, $unit: px) {
    #{$property}: calc(#{$min-size}#{$unit} + (#{$max-size} - #{$min-size}) * ((100vw - #{$min-width}#{$unit}) / (#{$max-width} - #{$min-width})));

    @media (max-width: #{$min-width}#{$unit}) {
        #{$property}: #{$min-size}#{$unit};
    }

    @media (min-width: #{$max-width}#{$unit}) {
        #{$property}: #{$max-size}#{$unit};
    }
}

@mixin placeholder-color($color) {
    &::-webkit-input-placeholder {
        color: $color;
    }
    &:-moz-placeholder {
        color: $color;
    }
    &::-moz-placeholder {
        color: $color;
    }
    &:-ms-input-placeholder {
        color: $color;
    }
}