.hidden {
  display: none;
}

.clear {
  clear: both;
}

.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

.green {
  color: green;
}

.red {
  color: red;
}

.white {
  color: white;
}

.grey {
  color: #aaa;
}

.block-center {
  margin-left: auto;
  margin-right: auto;
}

.bg-white {
  background-color: white;
}

.invalid {
  border: 1px solid red !important;
}

.error-message {
  color: red;
}

.equal-cols {
  display: flex;            /* makes columns equal height */
  flex-wrap: wrap;          /* keeps wrapping on small screens */
}

.equal-cols > [class*="col-"] {
  display: flex;            /* allow inner box to stretch */
}

@media screen and (max-width: 768px) {
  .equal-cols {
    display: block;         /* stack columns normally on small screens */
  }

  .equal-cols > [class*="col-"] {
    display: block;         /* inner columns no longer flex containers */
  }
}

.box {
  background: #eee;
  padding: 20px;
  flex: 1;                  /* fill full height of column */
}

a.white {
  color: white;
  line-height: 1.8em;
  text-underline-offset: 10px;
  text-decoration: underline;
}