/* Set all elements to use sensible box sizing. This is probably already part of your styles. */
* {
  box-sizing: border-box;
}

/* Define flexbox sizing on each row. */
.formulate__row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Set the width of each column. */
$gutter: 10px;
@for $column from 1 through 12 {
  $blocks-per-row: 12 / $column;
  $gaps-per-column: $blocks-per-row - 1;
  $gutter-per-column: $gaps-per-column * $gutter / $blocks-per-row;
  $width-per-column: $column / 12 * 100%;
  .formulate__cell--#{$column}-columns {
    width: calc(#{$width-per-column} - #{$gutter-per-column});
  }
}

/* On mobile, use the full width of the viewport. */
@media (max-width: 767px) {
  .formulate__cell {
    width: 100%;
  }
}

/* flip label order */
.formulate__field {
    display: flex;
    flex-direction: column;
    /* This just makes sure the inputs don't take the full width of the screen. */
    align-items: flex-start;
}
.formulate__field input + .formulate__field__label,
.formulate__field select + .formulate__field__label,
.formulate__field textarea + .formulate__field__label{
    order: -1;
}

/* Decorative (so you can see the rows/columns in this example). */
.formulate__row {
  background-color: #fafafa;
  min-height: 50px;
  padding: 1rem;
  border: 1px solid #bbb;
  border-radius: .5rem;
}
.formulate__field__label{
    padding: 1px;
    color:#888;
}
.formulate__field{
    margin-bottom: 1rem;   
}

input[type="text"],
input[type="password"],
textarea {
    padding: .5rem;
    border: 1px solid #bbb;
    width: 15rem;
    /*border-radius: .25rem;*/
    box-shadow: 0 6px 6px -5px rgba(000,000,000,.2);
}


textarea {
    min-height: 4rem;
}

input::placeholder,
textarea::placeholder,
input:focus::placeholder,
textarea:focus::placeholder {
  color: transparent;
}

button[type="submit"] {
    background: #888;
    color: #fff;
    padding: .5rem 1rem;
    border-radius: .25rem;
    border: none;
    font-size: 1.1rem;
    transition: all .3s ease;
}

button[type="submit"]:hover {
    background: #333;
    color: #fff;
    padding: .5rem 1rem;
    border-radius: .25rem;
    border: none;
    font-size: 1.1rem;
}