* {
    box-sizing: border-box;
}

body {

    background-size: cover;
    background-repeat: none;
    min-height: 100vh;
}

/* typography definitions */
.typography-grid {
    background-image: linear-gradient(#e88 1px, transparent 1px);
    background-size: 100% 32px;
}

/* typography */
:root {
    --typography__baseline: 32;
    --typography__fontsize: 18;
    --typography__lineheight: calc(var(--typography__baseline) / var(--typography__fontsize));
    --spacing__vertical-1: calc(1px * var(--typography__baseline));
    --spacing__vertical-2: calc(2px * var(--typography__baseline));
    --spacing__vertical-3: calc(3px * var(--typography__baseline));
}

.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
}

html {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-family: sans-serif;
}

body {
    font-size: calc(1px * var(--typography__fontsize));
    line-height: var(--spacing__vertical-1);
    position: relative;
}

p {
    margin-top: var(--spacing__vertical-1);
    margin-bottom: var(--spacing__vertical-1);
}

h1 {
    font-family: "Oswald", sans-serif;
    font-size: calc(2px * var(--typography__fontsize));
    line-height: var(--spacing__vertical-2);
    margin-bottom: var(--spacing__vertical-1);
    margin-top: var(--spacing__vertical-1);
    padding: 0;
}

h2 {
    font-family: "Oswald", sans-serif;
    font-size: calc(1.5px * var(--typography__fontsize));
    line-height: var(--spacing__vertical-1);
    margin-bottom: var(--spacing__vertical-1);
    margin-top: var(--spacing__vertical-1);
    padding: 0;
}

h3 {
    font-family: "Oswald", sans-serif;
    font-size: calc(1.25px * var(--typography__fontsize));
    line-height: var(--spacing__vertical-1);
    margin-bottom: var(--spacing__vertical-1);
    margin-top: var(--spacing__vertical-1);
    padding: 0;
}

h4 {
    font-family: "Oswald", sans-serif;
    font-size: calc(1.125px * var(--typography__fontsize));
    line-height: var(--spacing__vertical-1);
    margin-bottom: var(--spacing__vertical-1);
    margin-top: var(--spacing__vertical-1);
    padding: 0;
}

h5 {
    font-family: "Oswald", sans-serif;
    font-size: calc(1px * var(--typography__fontsize));
    line-height: var(--spacing__vertical-1);
    margin-bottom: var(--spacing__vertical-1);
    margin-top: var(--spacing__vertical-1);
    padding: 0;
}

h6 {
    font-family: "Oswald", sans-serif;
    font-size: calc(.9px * var(--typography__fontsize));
    line-height: var(--spacing__vertical-1);
    margin-bottom: var(--spacing__vertical-1);
    margin-top: var(--spacing__vertical-1);
    padding: 0;
}

hr {
    margin-bottom: var(--spacing__vertical-1);
    margin-top: -1px;
    border-top: 1px solid #888;
    border-bottom: none;
    border-left: none;
    border-right: none;
}

ul, ol, dl {
    margin: 0 0 var(--spacing__vertical-1) 0;
}

li {
    margin: 0;
}

ul.actions li {
    height: var(--spacing__vertical-2);
}

table th, td {
    height: var(--spacing__vertical-2);
}

input, textarea, select {
    line-height: var(--typography__lineheight);
}

input {
    margin-bottom: calc(var(--spacing__vertical-2) - 2.1em);
}

select {
    margin-bottom: calc(var(--spacing__vertical-2) - 2.2em);
}

textarea {
    margin-bottom: calc(var(--spacing__vertical-1) - 12px);
    margin-top: var(--spacing__vertical-1);
    padding: 0;
}

pre {
    margin-bottom: calc(var(--spacing__vertical-1));
    margin-top: var(--spacing__vertical-1);
    padding: 0 1rem;
}

pre code {
    font-size: 14px;
    line-height: 16px;
}

/* end typography */


/* blocks */

.hero {
    background-position: center;
    background-size: cover;
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
}

.hero.quarter-page { height: 25vh; }
.hero.half-page { height: 50vh; }
.hero.three-quarter-page { height: 75vh; }
.hero.full-page { height: 100vh; }

.hero > div {
    text-align: center;
}

.two-panel {
    display: flex;
    flex-flow: row wrap;
}

.two-panel.reverse {
    flex-direction: row-reverse;
}

.two-panel > div {
    width: 100%;
}

.two-panel.sixty-forty .content {
    background-color: #eee;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    text-align: center;
}

.two-panel.sixty-forty .image {
    background-size: cover;
}

.image > img {
    width: 100%;
}

.block-quote {
    background-color: #eee;
    padding: 4rem 0;
}

.block-quote > div {
    padding: 0 2rem;
    text-align: center;
}

.rich-text-block {
    max-width: 800px;
    margin: 0 auto;
}

.staff-quote {
    background-color: #ddd;
    padding: 1rem;
}

.staff-quote > div {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 1rem;
}

.staff-quote .content {
    border: 1px solid #ccc;
    padding: 1rem;
}

.staff-quote .content *:first-child {
    margin-top: 0;
}

.staff-quote .content *:last-child {
    margin-bottom: 0;
}

.staff-quote .person {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
}

.staff-quote .person .name {
    font-family: "Oswald", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 1rem;
}

.staff-quote .person .position {
    font-family: "Roboto", sans-serif;
    margin-top: -.25rem;
    color: #d19600;
}

.staff-quote .portrait {
    clip-path: circle();
    height: 200px;
}

.wow-block {
    background-color: #ddd;
    padding: 2rem 2rem;
}

.wow-block .heading > h2 {
    font-size: 2rem;
    line-height: 1.5;
    text-align: center;
}

.wow-block .cards {
    display: flex;
    flex-flow: row wrap;
}

.wow-block .card {
    border: 4px solid #bbb;
    padding: 2rem;
    text-align: center;
    width: 100%;
}

.wow-block .card-heading {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.wow-block .card-action {
    margin: 0 auto;
    width: auto;
}

.heading-block {
    padding: 6rem 0;
}

.heading-block h2 {
    display: block;
    font-size: 2rem;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
}

.split-block {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 4rem 0;
}

.split-block > .split-1 { width: 100%; }
.split-block > .split-2 { width: 100%; }
.split-block > .split-3 { width: 100%; }
.split-block > .split-4 { width: 100%; }
.split-block > .split-5 { width: 100%; }
.split-block > .split-6 { width: 100%; }
.split-block > .split-7 { width: 100%; }
.split-block > .split-8 { width: 100%; }

.image-row-block img {
    width: 100%;
}

.image-row-block {
    display: flex;
    flex-flow: row-wrap;
    justify-content: space-between;
    padding: 4rem 0;
}

.image-row-block.center {
    justify-content: space-around;
}

.image-row-block img {
    width: 100%;
}

.image-row-images-1 { width: 100%; }
.image-row-images-2 { width: 100%; }
.image-row-images-3 { width: 100%; }
.image-row-images-4 { width: 100%; }
.image-row-images-5 { width: 100%; }
.image-row-images-6 { width: 100%; }

.embed-block {
    max-width: 100vw;
    max-height: 450px;
}

.embed-block > div {
    margin: 0 auto;
    max-width: 800px;
}

.youtube-video {
    width: 100%;
    aspect-ratio: 16 / 9;
}

body > footer {
    padding: 2rem 2rem;
}

footer .socials {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 25%;
    margin: 0 auto;
    text-align: center;
}

footer .copyright {
    padding: 2rem 0 0 0;
    font-size: 1rem;
    text-align: center;
}

footer .taxid {
    font-size: 1rem;
    text-align: center;
}

@media screen and (max-width: 430px), print {
    .text {
        padding: 0 1rem;
    }
    
    .two-panel.sixty-forty .image {
        aspect-ratio: 1 / 1;
    }
}

@media screen and (min-width: 431px) {
    .staff-quote > div {
        flex-flow: row nowrap;
        flex-direction: row-reverse;
        justify-content: space-around;
        align-items: center;
        width: 80%;
        margin: 0 auto;
    }

    .staff-quote .content {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        width: 60%;
        padding: 4rem 8rem;
    }
}

@media screen and (min-width: 431px), print {
    .two-panel {
        flex-flow: row nowrap;
    }
    
    .two-panel > div {
        width: 50%;
    }

    .two-panel.sixty-forty {
        height: 800px;
    }
    
    .two-panel.sixty-forty > .image {
        width: 60%;
    }

    .two-panel.sixty-forty > .content {
        padding: 4rem 4rem;
        text-align: left;
        width: 40%;
    }

    .block-quote {
        padding: 8rem 0;
    }

    .block-quote > div {
        margin: 0 auto;
        width: 60%;
    }

    .rich-text-block {
        padding: 4rem 0;
    }
    
    .staff-quote {
        padding: 4rem;
    }
    
    .wow-block {
        padding: 5rem 2rem;
    }
    
    .wow-block .heading > h2 {
        font-size: 3rem;
        margin-bottom: 6rem;
    }
    
    .wow-block .cards {
        column-gap: 2rem;
        flex-flow: row nowrap;
    }

    .wow-block .cards.cards-length-1 .card { width: 100%; }
    .wow-block .cards.cards-length-2 .card { width: calc(100% / 2); }
    .wow-block .cards.cards-length-3 .card { width: calc(100% / 3); }
    .wow-block .cards.cards-length-4 .card { width: calc(100% / 4); }
    .wow-block .cards.cards-length-5 .card { width: calc(100% / 5); }
    .wow-block .cards.cards-length-6 .card { width: calc(100% / 6); }
    
    .wow-block .card {
        padding: 3rem 3rem;
    }
    
    .wow-block .card-heading {
        font-size: 3rem;
        margin-bottom: 3rem;
    }

    .heading-block h2 {
        font-size: 3.5rem;
    }
    
    .image-row-block {
        flex-flow: row-nowrap;
    }

    .image-row-images-1 { max-width: 100%; }
    .image-row-images-2 { width: 50%; }
    .image-row-images-3 { width: calc(100% / 3); }
    .image-row-images-4 { width: 25%; }
    .image-row-images-5 { width: 20%; }
    .image-row-images-6 { width: calc(100% / 6); }

    .split-block > .split-1 { width: calc(100% / 1); }
    .split-block > .split-2 { width: calc(100% / 2); }
    .split-block > .split-3 { width: calc(100% / 3); }
    .split-block > .split-4 { width: calc(100% / 4); }
    .split-block > .split-5 { width: calc(100% / 5); }
    .split-block > .split-6 { width: calc(100% / 6); }
    .split-block > .split-7 { width: calc(100% / 7); }
    .split-block > .split-8 { width: calc(100% / 8); }

}

@media print {
  * {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */
    color-adjust: exact !important;                 /* Firefox 48 – 96 */
    print-color-adjust: exact !important;           /* Firefox 97+, Safari 15.4+ */
  }
    .print-page-break {
        page-break-after: always;
    }
}
/* .print-only { */
/*     display: none; */
/* } */
/* @media print { */
/*   * { */
/*     -webkit-print-color-adjust: exact !important;   /\* Chrome, Safari 6 – 15.3, Edge *\/ */
/*     color-adjust: exact !important;                 /\* Firefox 48 – 96 *\/ */
/*     print-color-adjust: exact !important;           /\* Firefox 97+, Safari 15.4+ *\/ */
/*   } */
/*   .print-only { */
/*       display: block; */
/*   } */
/* } */