/* Mail Form PlaceHolder
========================================================*/
@mixin placeholder-fade-up() {
  *:-webkit-autofill ~ & {
    opacity: 0;
    @include transform(translateY(-33%) scale(0.8));
   
  }

  &.state-1 {
    opacity: 0;
    @include transform(translateY(-33%) scale(0.8));

  }
}

@mixin placeholder-fade-left() {
  *:-webkit-autofill ~ & {
    opacity: 0;
    @include transform(translateX(-100%));
  }

  &.state-1 {
    opacity: 0;
    @include transform(translateX(-100%));
  }

  @media (max-width: 1365px) {
    .container > .mailform &,
    .grid_12 & {
      @include placeholder-fade-up;
    }
  }

  @media (max-width: 979px) {
    .grid_10 & {
      @include placeholder-fade-up();
    }
  }

  @media (max-width: 767px) {
    @include placeholder-fade-up();
  }
}

.mfPlaceHolder {
  font: inherit;
  cursor: text;
  position: absolute;
  left: 0;
  top: 0;
  padding: $input-padding;
  line-height: $input-line-height;
  color: $placeholder-clr;
  opacity: $placeholder-opacity;
  font-size: $input-font-size;
  font-weight: $input-font-weight;
  @include placeholder-fade-up();
  @include transition(.3s all ease);
}