/* Set all elements to use sensible box sizing. This is probably already part of your styles. */

::-webkit-input-placeholder {
   color:transparent;
}

:-moz-placeholder { /* Firefox 18- */
   color:transparent; 
}

::-moz-placeholder {  /* Firefox 19+ */
   color:transparent; 
}

:-ms-input-placeholder {  
   color:transparent;
}

* {
  box-sizing: border-box;
}

.formulate-wrapper {
	margin-bottom:4rem;
}

h2.formulate__field {
	font-size:1.125rem;
}

/* Define flexbox sizing on each row. */
.formulate__row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid #bfbfbf;
  padding: 1.25rem;
	margin-bottom:1rem;
}

/* Set the width of each column. */
$gutter: 5px;
@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%;
  }
}

/* Decorative (so you can see the rows/columns in this example). */
.formulate__row {
  
}
.formulate__cell {
  margin-bottom:1em;
}

.formulate__cell label {
	font-size:.7rem;
	margin-bottom:0;
	float:left;
	padding-right:1rem
}
.formulate__cell input {
  width:100%;
	font-size:.85rem;
	margin-bottom: 1rem;
}

.formulate__cell select {
    width: 100%;
    font-size: .85rem;
    margin-bottom: 1rem;
}

.formulate__cell textarea {
    width: 100%;
    font-size: .85rem;
	resize:both;
    margin-bottom: 1rem;
}

.formulate__field--select {
	font-size:.85rem;
}

.formulate__field--textarea {
	font-size:.85rem;
}

.formulate__validation-type--required {
	/* border-left:10px solid red; */
}

.formulate__field--button {
	font-size:.85rem;
	
}