@charset "UTF-8";

*, *:before, *:after {
  outline: none;

  box-sizing: border-box;
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling-y: auto;

  font-family: var(--font-default);
  font-size: var(--size-s);
  color: var(--color-text);
  
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

noscript {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-top);

  width: 100%;
  height: 100%;

  background: #fff;

  text-align:  center;
  line-height: 100vh;
}

h1, h2, h3, h4, h5 {
  margin: 0;

  line-height: 1.25;
  font-weight: 400;
  font-family: 'Forma Display', sans-serif;
}
h1 {font-size: var(--size-xl);}
h2 {font-size: var(--size-l);}
h3 {font-size: var(--size-m);}
h4 {font-size: var(--size-m);}
h5 {font-size: var(--size-m);}

p {
  line-height: var(--size-m);
}

ul, ol {
  margin: 0;
  padding: 0;

  list-style: none;
}
ul li, ol li {
  display: inline-block;
}

a {
  display: inline-block;

  text-decoration: underline solid;
  color: inherit;

  cursor: pointer;

  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
a:hover {
  color: var(--color-secondary-shaded);
  text-decoration: none;
}
a:focus, a:active {
  color: var(--color-secondary-shaded);
  text-decoration: none;

  transition: all var(--speed-fast) ease-in;
}

img {
  user-select: none;
  pointer-events: none;

  display: block;

  max-width: 100%;
}
img.updatable {
  object-fit: cover;

  pointer-events: all;
  cursor: pointer;
}

small {
  font-size: calc(var(--size-s) * .85);
  line-height: 1;
}
hr {
  margin: var(--size-m) 0;
  border-color: var(--color-text);
}

fieldset {
  border: 0;
}

input, select, textarea {
  -webkit-appearance: none;

  width: 100%;

  border-radius: 0;
}
input, input:before, input:after, label, label:before, label:after {
  transition: all var(--speed-fast) ease-in;
}
input + input {
  margin: var(--size-xs) 0 0;
}

select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="time"],
input[type="date"] {
  -webkit-appearance: none;
  height: var(--size-2xl);

  margin: var(--size-2xs) 0 0;
  border: var(--size-3xs) solid var(--color-dark);
  padding: 0 var(--size-s);
}
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="time"]:focus,
input[type="date"]:focus {
  border: var(--size-3xs) solid var(--color-primary);
}
select:disabled,
textarea:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="email"]:disabled,
input[type="search"]:disabled,
input[type="number"]:disabled,
input[type="time"]:disabled,
input[type="date"]:disabled {
  border-color: var(--color-neutro);

  background-color: var(--color-neutro-tinted);

  color: var(--color-neutro-shaded);
}
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
input[type="number"]::placeholder,
input[type="time"]::placeholder,
input[type="date"]::placeholder {
  font-family: var(--font-default);
  font-stretch: condensed;

  color: var(--color-text);
}

input[type="checkbox"],
input[type="radio"] {
  display: inline-block;

  width: var(--size-m);
  height: var(--size-m);

  margin: var(--size-xs) 0 0 0;
  border: var(--size-3xs) solid var(--color-dark);

  vertical-align: sub;
}
input[type="radio"] {
  border-radius: 50%;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  border-color: var(--color-primary);
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--color-dark);
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  border-color: var(--color-neutro);
}
input[type="checkbox"]:disabled:checked,
input[type="radio"]:disabled:checked {
  background-color: var(--color-neutro);
}

input + label,
select + label,
textarea + label
  {margin: var(--size-s) 0 0;}

label {
  display: inline-block;

  font-size:var(--size-s);
}
input[type="checkbox"] + label,
input[type="radio"] + label {
  margin: var(--size-xs) 0 0 var(--size-xs);
}

select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-dark) 50%),
    linear-gradient(135deg, var(--color-dark) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 1.1em) 50%,
    calc(100% - .75em) 50%,
    100% 0;
  background-size: .4em .4em, .4em .4em;
  background-repeat: no-repeat;
}
select:disabled {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-neutro) 50%),
    linear-gradient(135deg, var(--color-neutro) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
}

textarea {
  display: block;

  width: 100%;
  height: 100px;

  border: var(--size-3xs) solid var(--color-neutro-shaded);
  padding: 6px 8px;

  font-family: var(--font-default);
}
textarea:focus {
  color: var(--color-primary);
}

button, a.btn {
  min-width: max-content;
  width: var(--size-4xl);

  margin: var(--size-s) 0 0;
  border: 0;
  padding: var(--size-xs) var(--size-m);

  background: var(--color-dark);

  text-decoration: none;
  text-align: center;

  font-size: var(--size-m);
  font-family: var(--font-default);

  color: var(--color-text-inverted);

  cursor: pointer;

  transition: all var(--speed-fast) ease-in;
}
button:hover, a.btn:hover,
button:focus, a.btn:focus {
  background: var(--color-primary);
}
button.secondary, a.btn.secondary {
  background: var(--color-secondary);

  color: var(--color-text);
}
button.secondary:hover, a.btn.secondary:hover,
button.secondary:focus, a.btn.secondary:focus {
  background: var(--color-primary);

  color: var(--color-dark);
}


@media only screen and (min-width: 320px) {

}

@media only screen and (min-width: 480px) {

}

@media only screen and (min-width: 640px) {
  h1 {font-size: var(--size-2xl);}
  h2 {font-size: var(--size-xl);}
  h3 {font-size: var(--size-l);}
  h4 {font-size: var(--size-m);}
  h5 {font-size: var(--size-m);}
}

@media only screen and (min-width: 980px) {

}

@media only screen and (min-width: 1200px) {

}



.boxed-icon {
  display: inline-block;
  width: 1.4em;
  text-align: center;
}

.response-feedback {
  margin: 0;
}
.response-feedback > li {
  width: 100%;
  margin: 0 0 var(--size-s);
  border:transparent solid var(--size-3xs);
  padding: var(--size-xs);
  background: var(--color-neutro-shaded);
  font-weight: 700;
  color: var(--color-neutro-tinted);
}
.response-feedback > li.success {border-color:var(--color-success-shaded);background: var(--color-success-tinted);color:var(--color-success-shaded);}
.response-feedback > li.warning {border-color:var(--color-warning-shaded);background: var(--color-warning-tinted);color:var(--color-warning-shaded);}
.response-feedback > li.danger  {border-color:var(--color-danger-shaded); background: var(--color-danger-tinted); color:var(--color-danger-shaded);}
.response-feedback > li.info    {border-color:var(--color-info-shaded);   background: var(--color-info-tinted);   color:var(--color-info-shaded);}

.response-feedback > li .fa-check-circle,
.response-feedback > li .fa-exclamation-triangle {
  display: inline-block;
  width: 1.2em;
  margin: 0 var(--size-s) 0 0;
  font-size: var(--size-l);
  vertical-align: middle;
}

.hidden {display: none !important}