html {
  font-size: 62.5%;
  font-family: Verdana, Geneva, Tahoma, sans-serif; }
  html body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-size: 1.6rem; }

main {
  flex-grow: 1;
  width: 100%;
  max-width: calc(1040px + 2em);
  margin: auto;
  padding-bottom: 1em; }
  main > header {
    max-width: calc(100vw - 1em);
    margin: auto; }
  main > section {
    margin-top: 2em; }
    main > section > header {
      margin: auto auto .75em; }
      main > section > header > div {
        padding: 0 1em;
        background: linear-gradient(#FFF 0px, #FFF 45%, #1f1d24 49%, #1f1d24 51%, #FFF 55%, #FFF 100%); }
      main > section > header h2 {
        display: inline-block;
        margin: 0;
        padding: 0 6px;
        background-color: #FFF; }
      main > section > header p {
        padding: 0 2em; }
        main > section > header p:first-of-type {
          margin-top: .25em; }

header#sitehead {
  display: flex;
  align-items: center;
  padding: 0 .5em;
  background-color: #DDD; }
  header#sitehead h1 {
    margin: 0; }
  header#sitehead h2 {
    position: absolute;
    width: 0;
    height: 0;
    margin: -1;
    clip-path: polygon(0 0); }
  header#sitehead a {
    text-decoration: none; }
  header#sitehead div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 60px;
    max-width: calc(1040px + 2em);
    margin: auto; }
  header#sitehead nav {
    align-self: flex-end;
    display: flex;
    color: #000; }
    header#sitehead nav a {
      display: block;
      padding: 1em .75em;
      color: inherit; }
      header#sitehead nav a.active::before {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        height: 2px;
        background-color: rgba(0, 0, 0, 0.7); }
    header#sitehead nav > ul {
      display: flex; }
      header#sitehead nav > ul > li {
        position: relative; }
  header#sitehead ul {
    margin: 0;
    padding: 0;
    list-style-type: none; }
    header#sitehead ul li {
      white-space: nowrap; }
      header#sitehead ul li:hover > a, header#sitehead ul li:focus-within > a {
        color: inherit;
        background-color: rgba(0, 0, 0, 0.2); }
      header#sitehead ul li:hover ul, header#sitehead ul li:focus-within ul {
        display: flex;
        flex-direction: column;
        min-width: 100%; }
    header#sitehead ul ul {
      display: none;
      position: absolute;
      right: 0;
      background-color: #DDD; }
      header#sitehead ul ul [aria-current=page] {
        color: #FFF;
        background-color: rgba(0, 0, 0, 0.7); }

footer#sitefoot {
  height: 200px;
  background-color: #DDD; }

h4 {
  font-weight: 600; }

p {
  line-height: 1.2em; }

.btn {
  display: inline-block;
  margin: .5em auto 0;
  padding: .5em 1em;
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
  border: 3px solid #000; }
  .btn.primary {
    border-color: #F00;
    background-color: #F00; }
    .btn.primary:hover, .btn.primary:focus {
      color: #F00;
      background-color: #FFF; }
  .btn.primary.inv {
    border-color: #F00;
    background-color: #FFF;
    color: #F00; }
    .btn.primary.inv:hover, .btn.primary.inv:focus {
      color: #FFF;
      background-color: #F00; }
  .btn.secondary {
    border-color: #0F0;
    background-color: #0F0; }
    .btn.secondary:hover, .btn.secondary:focus {
      color: #0F0;
      background-color: #FFF; }
  .btn.secondary.inv {
    border-color: #0F0;
    background-color: #FFF;
    color: #0F0; }
    .btn.secondary.inv:hover, .btn.secondary.inv:focus {
      color: #FFF;
      background-color: #0F0; }
  .btn.tertiary {
    border-color: #00F;
    background-color: #00F; }
    .btn.tertiary:hover, .btn.tertiary:focus {
      color: #00F;
      background-color: #FFF; }
  .btn.tertiary.inv {
    border-color: #00F;
    background-color: #FFF;
    color: #00F; }
    .btn.tertiary.inv:hover, .btn.tertiary.inv:focus {
      color: #FFF;
      background-color: #00F; }

.vishide {
  position: absolute;
  width: 0;
  height: 0;
  margin: -1;
  clip-path: polygon(0 0); }

.comp:not(.full) {
  padding: 0 16px; }
.comp + .comp {
  margin-top: 2em; }
.comp.subsection h3 {
  margin: .75em 0 .25em; }
.comp.subsection p:first-of-type {
  margin-top: 0; }
.comp.subsection + .comp {
  margin-top: 1em; }
.comp + .subsection {
  margin-top: 3em; }
.comp.coln {
  display: grid;
  grid-gap: 32px 16px; }
  @media (min-width: 545px) {
    .comp.coln.col2 {
      grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 545px) {
    .comp.coln.col4 {
      grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 787px) {
    .comp.coln.col4 {
      grid-template-columns: repeat(4, 1fr); } }
  @media (min-width: 545px) {
    .comp.coln.col3 {
      grid-template-columns: repeat(3, 1fr); }
      .comp.coln.col3.col12 {
        grid-template-columns: repeat(2, 1fr); }
      .comp.coln.col3.col21 {
        grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 787px) {
    .comp.coln.col3.col12 {
      grid-template-columns: repeat(3, 1fr); }
      .comp.coln.col3.col12 > :last-child {
        grid-column: 2/span 2; }
    .comp.coln.col3.col21 {
      grid-template-columns: repeat(3, 1fr); }
      .comp.coln.col3.col21 > :first-child {
        grid-column: 1/span 2; } }
  .comp.coln > div {
    display: flex;
    flex-direction: column; }
  .comp.coln header {
    display: flex;
    flex-direction: column-reverse; }
  .comp.coln h3, .comp.coln h4 {
    margin: .75em 0 .25em; }
  .comp.coln img {
    display: block;
    width: 100%;
    height: auto; }
  .comp.coln header + div > :first-child {
    margin-top: 0; }
  .comp.coln footer {
    margin-top: auto; }
  @media (max-width: 512px) {
    .comp.coln {
      padding: 0; }
      .comp.coln h3, .comp.coln h4 {
        margin: .75em 16px .25em; }
      .comp.coln header + div, .comp.coln footer {
        margin: 0 16px; } }
.comp.txtimg {
  display: grid;
  grid-auto-columns: 1fr;
  grid-gap: 0 16px;
  grid-template-areas: "image" "text"; }
  .comp.txtimg h3, .comp.txtimg h4 {
    margin: 0 0 .25em; }
  .comp.txtimg header + div > :first-child {
    margin-top: 0; }
  .comp.txtimg picture {
    display: block; }
  .comp.txtimg img {
    display: block;
    width: 100%;
    height: auto; }
  .comp.txtimg > :first-child {
    grid-area: text;
    align-self: center; }
  .comp.txtimg > :last-child {
    grid-area: image; }
  @media (min-width: 545px) {
    .comp.txtimg.col2 {
      grid-template-areas: "text image"; }
      .comp.txtimg.col2.inv {
        grid-template-areas: "image text"; } }
  @media (min-width: 545px) {
    .comp.txtimg.col3.col12 {
      grid-template-areas: "text image"; }
      .comp.txtimg.col3.col12.inv {
        grid-template-areas: "image text"; }
    .comp.txtimg.col3.col21 {
      grid-template-areas: "text text image"; }
      .comp.txtimg.col3.col21.inv {
        grid-template-areas: "image text text"; } }
  @media (min-width: 787px) {
    .comp.txtimg.col3.col12 {
      grid-template-areas: "text image image"; }
      .comp.txtimg.col3.col12.inv {
        grid-template-areas: "image image text"; } }
  @media (max-width: 544px) {
    .comp.txtimg h3, .comp.txtimg h4 {
      margin-top: .75em; } }
  @media (max-width: 512px) {
    .comp.txtimg {
      padding: 0; }
      .comp.txtimg h3, .comp.txtimg h4 {
        margin: .75em 16px .25em; }
      .comp.txtimg header + div, .comp.txtimg footer {
        margin: 0 16px; } }

form.validate svg path {
  fill: none; }
form.validate .validated:valid + svg .valid {
  fill: #00D994; }
form.validate .validated:invalid + svg .invalid {
  fill: #FF486E; }

/*# sourceMappingURL=style.css.map */