body {
  --margin: 0.35em;
  --text-focus-color: #222;
  --font-size: 1em;
  --placeholder-color: var(--text-faded-color);
  --placeholder-focus-color: hsla(var(--text-hue),var(--text-sat),var(--text-brightness),.7);
  --border: none;
  --transition: all 0.2s ease-out;
  --padding: 1em;
  --color-good: var(--text-color);
  --color-bad: var(--text-color);
  --color-warn: var(--text-color);
  --background: var(--background-off-color);
  --background-hover: var(--background-off-active-color);
  --locked-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M19 10h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1V9a7 7 0 1 1 14 0v1zm-2 0V9A5 5 0 0 0 7 9v1h10zm-6 4v4h2v-4h-2z'/%3E%3C/svg%3E");
  --textarea-height-min: 6em;
  --textarea-height-max: 12em;
}

/* start boilerplate */

form {
  width: 100%;
}
input,
textarea,
label,
select {
  font-family: inherit;
  font-size: var(--font-size);
  color: var(--text-color);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
select {
  -webkit-appearance: none;
}
select:focus {
  padding-left: 2em;
}
input,
textarea {
  font-family: inherit;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
.checkbox-wrapper {
  display: inline-block;
  white-space: nowrap;
}
input[type="email"],
input[type="text"],
input[type="datetime-local"],
input[type="number"],
input[type="range"],
input[type="password"],
input[type="date"],
input[type="submit"],
textarea,
select,
button,
.button,
.subnav a {
  font-family: inherit;
  font-size: inherit;
  background: var(--background-off-color);
  width: 100%;
  padding: var(--padding);
  border: var(--border);
  border-radius: var(--border-radius);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  margin-top: var(--margin);
}
input[type="submit"],
.subnav a {
  width: auto;
  background: var(--text-color);
  color: var(--placeholder-color);
}
input[type="email"],
input[type="password"],
input[type="text"],
input[type="datetime-local"],
input[type="number"],
input[type="range"],
input[type="date"],
select,
textarea {
  resize: none;
  outline: none;
}
input[type="email"]:not(:placeholder-shown),
input[type="password"]:not(:placeholder-shown),
input[type="text"]:not(:placeholder-shown),
input[type="datetime-local"]:not(:placeholder-shown)
input[type="number"]:not(:placeholder-shown),
input[type="range"]:not(:placeholder-shown),
input[type="date"]:not(:placeholder-shown),
/*select:not(:placeholder-shown),*/
textarea:not(:placeholder-shown) {
  padding-top: calc(1.5 * var(--padding));
  padding-bottom: calc(0.5 * var(--padding));
}
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="text"]:disabled,
input[type="datetime-local"]:disabled,
input[type="number"]:disabled,
input[type="range"]:disabled,
input[type="date"]:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}
input[type="email"]:disabled + label::after,
input[type="password"]:disabled + label::after,
input[type="text"]:disabled + label::after,
input[type="datetime-local"]:disabled + label::after
input[type="number"]:disabled + label::after,
input[type="range"]:disabled + label::after,
input[type="date"]:disabled + label::after,
select:disabled + label::after,
textarea:disabled + label::after {
  content: var(--locked-img);
  width: 1em;
  position: absolute;
  opacity: 0.1;
  top: -0.2em;
  left: calc(100% - 2.5em);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
input[type="email"]:disabled:active + label,
input[type="password"]:disabled:active + label,
input[type="text"]:disabled:active + label,
input[type="datetime-local"]:disabled:active + label,
input[type="number"]:disabled:active + label,
input[type="range"]:disabled:active + label,
input[type="date"]:disabled:active + label,
select:disabled:active + label,
textarea:disabled:active + label {
  -webkit-animation: nope 0.3s;
  animation: nope 0.3s;
}
input[type="email"]:disabled:active + label::after,
input[type="password"]:disabled:active + label::after,
input[type="text"]:disabled:active + label::after,
input[type="datetime-local"]:disabled:active + label::after,
input[type="number"]:disabled:active + label::after,
input[type="range"]:disabled:active + label::after,
input[type="date"]:disabled:active + label::after,
select:disabled:active + label::after,
textarea:disabled:active + label::after {
  opacity: 0.15;
}
input[type="email"]:required + label span::after,
input[type="password"]:required + label span::after,
input[type="text"]:required + label span::after,
input[type="datetime-local"]:required + label span::after,
input[type="number"]:required + label span::after,
input[type="range"]:required + label span::after,
input[type="date"]:required + label span::after,
select:required + label span::after,
textarea:required + label span::after {
  content: "*";
}
input[type="email"]:hover,
input[type="password"]:hover,
input[type="text"]:hover,
input[type="datetime-local"]:hover,
input[type="number"]:hover,
input[type="range"]:hover,
input[type="date"]:hover,
select:hover,
textarea:hover {
  background: var(--background-off-active-color);
  color: var(--text-focus-color);
}
input[type="email"]:hover:placeholder-shown:not(:focus) + label span,
input[type="password"]:hover:placeholder-shown:not(:focus) + label span,
input[type="text"]:hover:placeholder-shown:not(:focus) + label span,
input[type="datetime-local"]:hover:placeholder-shown:not(:focus) + label span,
input[type="number"]:hover:placeholder-shown:not(:focus) + label span,
input[type="range"]:hover:placeholder-shown:not(:focus) + label span,
input[type="date"]:hover:placeholder-shown:not(:focus) + label span,
select:hover:placeholder-shown:not(:focus) + label span,
textarea:hover:placeholder-shown:not(:focus) + label span {
  color: var(--placeholder-focus-color);
}
input[type="email"]:hover:required:valid,
input[type="password"]:hover:required:valid,
input[type="text"]:hover:required:valid,
input[type="datetime-local"]:hover:required:valid,
input[type="number"]:hover:required:valid,
input[type="range"]:hover:required:valid,
input[type="date"]:hover:required:valid,
select:hover:required:valid,
textarea:hover:required:valid {
  color: var(--color-good);
  border-color: var(--color-good);
}
input[type="email"]:hover:placeholder-shown:invalid,
input[type="password"]:hover:placeholder-shown:invalid,
input[type="text"]:hover:placeholder-shown:invalid,
input[type="datetime-local"]:hover:placeholder-shown:invalid,
input[type="number"]:hover:placeholder-shown:invalid,
input[type="range"]:hover:placeholder-shown:invalid,
input[type="date"]:hover:placeholder-shown:invalid,
select:hover:placeholder-shown:invalid,
textarea:hover:placeholder-shown:invalid {
  color: var(--color-warn);
  border-color: var(--color-warn);
}
input[type="email"]:hover:placeholder-shown:invalid:placeholder-shown
  + label
  span,
input[type="password"]:hover:placeholder-shown:invalid:placeholder-shown
  + label
  span,
input[type="text"]:hover:placeholder-shown:invalid:placeholder-shown
  + label
  span,
input[type="number"]:hover:placeholder-shown:invalid:placeholder-shown
  + label
  span,
input[type="range"]:hover:placeholder-shown:invalid:placeholder-shown
  + label
  span,
input[type="date"]:hover:placeholder-shown:invalid:placeholder-shown
  + label
  span,
select:hover:placeholder-shown:invalid:placeholder-shown + label span,
textarea:hover:placeholder-shown:invalid:placeholder-shown + label span {
  color: var(--color-warn);
}
input[type="email"]:hover:invalid,
input[type="password"]:hover:invalid,
input[type="text"]:hover:invalid,
input[type="datetime-local"]:hover:invalid,
input[type="number"]:hover:invalid,
input[type="range"]:hover:invalid,
input[type="date"]:hover:invalid,
select:hover:invalid,
textarea:hover:invalid {
  color: var(--color-bad);
  border-color: var(--color-bad);
}
input[type="email"]:hover:invalid:placeholder-shown + label span,
input[type="password"]:hover:invalid:placeholder-shown + label span,
input[type="text"]:hover:invalid:placeholder-shown + label span,
input[type="datetime-local"]:hover:invalid:placeholder-shown + label span,
input[type="number"]:hover:invalid:placeholder-shown + label span,
input[type="range"]:hover:invalid:placeholder-shown + label span,
input[type="date"]:hover:invalid:placeholder-shown + label span,
select:hover:invalid:placeholder-shown + label span,
textarea:hover:invalid:placeholder-shown + label span {
  color: var(--color-bad);
}
input[type="email"]:hover:invalid:focus + label span,
input[type="password"]:hover:invalid:focus + label span,
input[type="text"]:hover:invalid:focus + label span,
input[type="datetime-local"]:hover:invalid:focus + label span,
input[type="number"]:hover:invalid:focus + label span,
input[type="range"]:hover:invalid:focus + label span,
input[type="date"]:hover:invalid:focus + label span,
select:hover:invalid:focus + label span,
textarea:hover:invalid:focus + label span {
  color: var(--placeholder-color);
}
input[type="email"] + label,
input[type="password"] + label,
input[type="text"] + label,
input[type="datetime-local"] + label,
input[type="number"] + label,
input[type="range"] + label,
input[type="date"] + label,
select + label,
textarea + label {
  display: block;
  height: calc(1.2em + var(--padding));
  position: relative;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  padding-left: var(--padding);
  z-index: 1;
  margin-top: calc((1.2em + var(--padding)) * -1);
  margin-bottom: var(--margin);
  pointer-events: none;
}
input[type="email"] + label span,
input[type="password"] + label span,
input[type="text"] + label span,
input[type="datetime-local"] + label span,
input[type="number"] + label span,
input[type="range"] + label span,
input[type="date"] + label span,
select + label span,
textarea + label span {
  display: inline-block;
  color: var(--placeholder-color);
  white-space: nowrap;
  -webkit-transition-property: color, -webkit-transform;
  transition-property: color, -webkit-transform;
  transition-property: transform, color;
  transition-property: transform, color, -webkit-transform;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-delay: 0;
  transition-delay: 0;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
input[type="email"]:focus + label span,
input[type="email"]:not(:placeholder-shown) + label span,
input[type="password"]:focus + label span,
input[type="password"]:not(:placeholder-shown) + label span,
input[type="text"]:focus + label span,
input[type="datetime-local"]:focus + label span,
input[type="text"]:not(:placeholder-shown) + label span,
input[type="datetime-local"]:not(:placeholder-shown) + label span,
input[type="number"]:focus + label span,
input[type="number"]:not(:placeholder-shown) + label span,
input[type="range"]:focus + label span,
input[type="range"]:not(:placeholder-shown) + label span,
input[type="date"]:focus + label span,
input[type="date"]:not(:placeholder-shown) + label span,
select:focus + label span,
select:not(:placeholder-shown) + label span,
textarea:focus + label span,
textarea:not(:placeholder-shown) + label span {
  color: var(--placeholder-color);
  line-height: 1;
  padding: 0 1.5px;
  -webkit-transform: translateY(-70%) scale(0.8);
  transform: translateY(-70%) scale(0.8);
}
textarea {
  height: var(--textarea-height-min);
}
textarea + label {
  position: absolute;
  margin-top: calc(-1 * var(--textarea-height-min) + 1em);
}
textarea:focus {
  height: var(--textarea-height-max);
}
textarea:focus + label {
  margin-top: calc(-1 * var(--textarea-height-max) + 1em);
}
input[type="submit"],
.button,
button {
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  background: var(--color);
  color: var(--color-contrast);
  display: block;
  padding: calc(var(--padding) * 0.65) calc(var(--padding) * 1.8);
  /*margin-bottom: 1em;*/
  cursor: pointer;
  width: auto;
}
input[type="submit"]:hover,
.button:hover,
button:hover {
  background: var(--text-focus-color);
}
input[type="submit"].wide,
.button.wide,
button.wide {
  width: 100%;
}
input[type="checkbox"],
input[type="radio"] {
  display: none;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
  border-radius: var(--border-radius);
  background: var(--background-off-color);
  display: inline-block;
  vertical-align: middle;
  z-index: 2;
  padding: 0.25em;
  position: relative;
  top: -0.15em;
  height: 2em;
  margin: 1em 0.5em;
  width: 2em;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
input[type="checkbox"] + label::before,
input[type="radio"] + label::before {
  content: " ";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  opacity: 0;
  -webkit-transform: scale(0.01);
  transform: scale(0.01);
  border-radius: 50%;
  vertical-align: middle;
  position: absolute;
  z-index: 2;
  background: white;
  -webkit-transition: all 0.5s cubic-bezier(0.8, 0, 0.05, 1);
  transition: all 0.5s cubic-bezier(0.8, 0, 0.05, 1);
}
input[type="checkbox"]:checked:disabled + label::after,
input[type="radio"]:checked:disabled + label::after {
  opacity: 0.15;
}
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
  background: var(--color-good);
}
input[type="checkbox"]:checked + label::before,
input[type="radio"]:checked + label::before {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
input[type="checkbox"]:enabled:hover + label,
input[type="radio"]:enabled:hover + label {
  background: var(--background-off-active-color);
}
input[type="checkbox"]:disabled:focus + label,
input[type="checkbox"]:disabled:active + label,
input[type="radio"]:disabled:focus + label,
input[type="radio"]:disabled:active + label {
  -webkit-animation: nope 0.3s;
  animation: nope 0.3s;
}
input[type="checkbox"]:disabled + label,
input[type="radio"]:disabled + label {
  cursor: not-allowed;
}
input[type="checkbox"]:disabled + label::after,
input[type="radio"]:disabled + label::after {
  content: " ";
  background-image: var(--locked-img);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 1em;
  height: 1em;
  display: block;
  position: absolute;
  opacity: 0.1;
  z-index: 2;
  top: 50%;
  left: 0;
  -webkit-transform: translate(43%, -53%);
  transform: translate(43%, -53%);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}
input[type="checkbox"] + label {
  width: 3.5em;
  border-radius: 1em;
}
input[type="checkbox"] + label::before {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}
input[type="checkbox"]:checked + label::before {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
@-webkit-keyframes nope {
  40%,
  80% {
    -webkit-transform: translateX(-0.4em);
    transform: translateX(-0.4em);
  }
  20%,
  60% {
    -webkit-transform: translateX(0.4em);
    transform: translateX(0.4em);
  }
}
@keyframes nope {
  40%,
  80% {
    -webkit-transform: translateX(-0.4em);
    transform: translateX(-0.4em);
  }
  20%,
  60% {
    -webkit-transform: translateX(0.4em);
    transform: translateX(0.4em);
  }
}
form.oneliner {
  position: relative;
  padding: 0;
  max-width: 30em;
  margin: 0 auto;
}
form.oneliner input {
  width: 100%;
  margin: 0;
}
form.oneliner label {
  position: absolute;
}
form.oneliner input[type="submit"] {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: auto;
  min-width: 5em;
  padding: 0 var(--padding);
}

.button,
.subnav a {
  text-align: center;
  padding: 0.5em 0.95em 0.45em !important;
  background: var(--color);
  color: var(--color-contrast);
  display: inline-block;
  white-space: nowrap;
  line-height: 1.4;
  border-radius: var(--border-radius);
  text-decoration: none;
  outline: none;
  border: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.button-blue {
  background: var(--blue-color);
  margin-right: 0.35em;
}

button.loadmore {
  margin: 2em;
  display: block;
  width: calc(100% - 4em);
  background-color: var(--background-off-color);
  color: var(--text-color);
}
button:disabled,
input[type="submit"]:disabled {
  transform: scale(0, 0);
}

fieldset {
border: none;
padding: 0;
margin-top: 3em;
}
fieldset legend {
  font-family: 'AvenirNextLTPro-Bold';
  padding: 0;
}

div.checkbox {
  display: flex;
  align-items: center;
}
div.checkbox p {
  display: inline-block;
  max-width: 14em;
  line-height: 1.15;
  margin: 0;
}
form p {
  font-size: 1em;
}