inkShio

function styles(s, d) {
  return src(s)
    .pipe(eval(preprocessor)())
    .pipe(concat("style.css"))
    .pipe(
      autoprefixer({ overrideBrowserslist: ["last 10 versions"], grid: true })
    )
    .pipe(
      cleancss({
        level: { 1: { specialComments: 0 } } /* , format: 'beautify' */,
      })
    )
    .pipe(dest(d))
    .pipe(browserSync.stream());
}

styles('scss', 'css');
styles('scss2', 'css2');

@mixin placeholder-color($color)
{
	&::-webkit-input-placeholder
	{
		/* WebKit, Blink, Edge */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&:-moz-placeholder
	{
		/* Mozilla Firefox 4 to 18 */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&::-moz-placeholder
	{
		/* Mozilla Firefox 19+ */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&:-ms-input-placeholder
	{
		/* Internet Explorer 10-11 */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&::-ms-input-placeholder
	{
		/* Microsoft Edge */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
	&::placeholder
	{
		/* Most modern browsers support this now. */
		text-overflow: ellipsis;

		opacity: 1;
		color: $color;
	}
}

.link {
  @include placeholder-color(#ccc);
  &:hover {
    @include placeholder-color(#000);
  }
}

position: absolute;
width: 100%;
z-index: 10;
top: 0;
left: 0;

.benefit {
  text-align: center;
  @media only screen and (min-width: $phones) {
    display: flex;
  }
}