@font-face {
    font-family: europa;
    src: url("europa.woff2");
}
@font-face {
    font-family: poppins;
    src: url("poppins.woff2");
}
@font-face {
    font-family: rooneysans;
    src: url("rooneysans.woff2");
}
:root {  /* global scope */
    --red: #ed1c24;
    --blue: #004e71;
    --orange: #fba91d;
    --lightblue: #108ea9;
    --white: white; /*#f5f7f8;*/
    --cream: #f5f2ed;
}
html, body {
    margin: 0;
    padding: 0;
    background: var(--cream);
    color: #004e71;
    font-family: rooneysans, sans-serif, sans;
}
.banner {
    background: var(--white);
}
.center {
    text-align: center;
}
.minipad {
    padding: 0.25em;
}
.pad {
    padding: 1em;
}
.vpad {
    padding-top: 2em;
}
.vpad2 {
    padding-top: 4em;
}
.floatleft {
    float: left;
}
.floatright {
    float: right;
}
.clear {
    clear: both;
}
.oracle {
    background: var(--orange);
    padding: 1em;
    text-align: center;
    color: black;
}
.oracle h2, .oracle .byline {
    display: none;
}
.oracle p {
    margin: 0;
}
h1 {
    display: inline-block;
    margin: 0;
}
h1 img {
    height: 4em;
}
a {
    display: inline-block;
    text-shadow: none;
    transition: color 0.25s, background 0.25s,
                padding 0.25s, border-radius 0.25s,
                text-shadow 0.25s, box-shadow 0.25s;
    color: var(--red);
}
a:hover {
    color: var(--orange);
}
a.nav {
    margin: 0 1em;
}
a.nav, a.blue {
    text-decoration: none;
    color: var(--blue);
}
a.nav:hover {
    color: var(--lightblue);
}
a.nav.red {
    font-family: poppins;
    text-decoration: underline;
    color: var(--red);
}
a.nav.red:hover {
    color: var(--orange);
    text-shadow: 0 0 1em white;
}
a.button, button.button {
    font-size: initial;
    font-family: poppins;
    text-decoration: none;
    color: var(--white);
    background: var(--red);
    padding: 1.5em 2.5em;
    margin: 0 1em;
    border: none;
    border-radius: 3em 0 3em 0;
    box-shadow: inset 0 0 0 var(--red);
}
a.button:hover, button.button:hover {
    cursor: pointer;
    box-shadow: inset 0 0 3em var(--orange);
}
a.button.white {
    background: var(--white);
    color: black;
    box-shadow: inset 0 0 0 #fff0, 1px 2px 0.5em #0008;
}
a.button.white:hover {
    box-shadow: inset 0 0 3em var(--lightblue), 1px 2px 0.5em #0008;
}
img.icon {
    height: 1.5em;
    vertical-align: middle;
    transition: transform 0.25s;
}
a:hover img.icon {
    transform: scale(1.25);
}
a.nomargin {
    margin: 0;
}
.white {
    background: var(--white);
}

@keyframes animwaves {
    0% {
        background-size: 450px;
        background-position: -225px -225px, 225px 225px;
        /*background-position: 0 0, 512px 512px;*/
        /*background-position: -256px -256px, 256px 256px;*/
    }/*
    50% {
        background-size: 540px, 480px;
    }*/
    100% {
        background-size: 450px;
        background-position: 225px 225px, -225px -225px;
        /*background-position: 512px 512px, 0 0;*/
        /*background-position: 256px 256px, -256px -256px;*/
    }
}
@keyframes animwavescurve {
    0% {
        background-size: contain, 512px, 512px;
        background-position: 50% 100.75%, 0 0, 512px 512px;
    }
    100% {
        background-size: contain, 512px, 512px;
        background-position: 50% 100.75%, 512px 512px, 0 0;
    }
}@keyframes animwavescomposite {
    0% {
        background-size: 512px, 512px, cover;
        background-position: 0 0, 512px 512px, 50% 50%;
    }
    100% {
        background-size: 512px, 512px, cover;
        background-position: 512px 512px, 0 0, 50% 50%;
    }
}

.splash {
    font-family: europa;
    font-size: min(150%, 5vw);
    color: var(--white);
    background-position: 50% 60%;
    background-size: cover;
    background-blend-mode: overlay;
    text-shadow: 1px 2px 0.25em black;
}
.splash.cream {
    color: var(--blue);
    background-color: var(--cream);
    text-shadow: none;
}
.splash.blue {
    background-color: var(--blue);
    background-image: url("/img/waves1.png"), url("/img/waves2.png");
    background-repeat: repeat;
    background-size: 256px;
    animation: animwaves 8s linear infinite;
    background-blend-mode: color-dodge;
}

.panel {
    background: var(--lightblue);
    color: var(--white);
    border-radius: 2em 0 2em 0;
    margin: 1em 0.5em;
    padding: 0.5em;
    align-content: center;
}
blockquote {
    text-align: justify;
}
.splash blockquote {
    margin: 0 20%;
}
.lake {
    background-image: url("/img/bg-lake.jpg");
    background-position: 50% 50%;
    background-color: var(--blue);
}
.computer {
    background-image: url("/img/bg-computer.jpg");
    background-position: 50% 44%;
    background-color: #ddd;
}
.wave {
    background-image: url("/img/wave.svg");
    background-position: 50% 100.75%;
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 2em;
}
.splash.blue.wave {
    background-image: url("/img/wave.svg"), url("/img/waves1.png"), url("/img/waves2.png");
    background-repeat: no-repeat, repeat, repeat;
    background-blend-mode: unset;
    animation: animwavescurve 8s linear infinite;
}
.splash.blue.1xlake {
    background-image: url("/img/waves1.png"), url("/img/waves2.png"), url("/img/bg-lake.jpg");
    background-repeat: repeat, repeat, no-repeat;
    background-blend-mode: unset;
    animation: animwavescomposite 8s linear infinite;
}
.computer.wave {
    background-image: url("/img/wave.svg"), url("/img/bg-computer.jpg");
    background-position: 50% 100.75%, bottom;
    background-size: contain, cover;
    background-color: #ddd;
    background-blend-mode: overlay;
}
.half {
    width: 44%;
}
.half img {
    width: 60%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
h2, h3 {
    margin: 0.5em 0;
    font-family: europa, sans-serif, sans;
    font-weight: normal;
    font-size: max(5vw, 20pt);
}
h3 {
    font-size: max(4vw, 18pt);
}
.flex {
    display: flex;
    position: relative;
}
.flex > * {
    flex: 1;
}
.flex div:first-child blockquote {
    margin-right: 6em;
}
.flex div:nth-child(2) img {
    margin-left: 6em;
}
.big {
    font-size: 130%;
}
.small {
    font-size: 85%;
}
.midfloat {
    padding: 1em;
    font-family: europa, sans-serif, sans;
    color: var(--white);
    background: var(--lightblue);
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 3%;
    right: 0;
    width: 8em;
    margin: auto;
}

#navbar {
    text-align: left;
}

.carousel {
    font-family: rooneysans, sans-serif, sans;
    font-size: initial;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}
.carousel h2 {
    display: none;
}
.carousel a.ctrl {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    background: #108ea988;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    text-decoration: none;
    border-radius: 100%;
    font-size: 200%;
    color: white;
}
.carousel a.ctrl:hover {
    background: var(--lightblue);
}
.carousel a.left {
    margin-left: 0;
}
.carousel a.right {
    margin-right: 0;
}
.carousel ul.blogsummary {
    margin: 0;
    padding: 0;
    font-size: initial;
}
.carousel .blogsummary .thumbnail {
    height: 8em;
    width: 12em;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    scale: 95%;
    transition: background-size 0.25s, scale 0.25s;
}
.carousel .blogsummary li:hover .thumbnail {
    scale: 100%;
}
.carousel.full .blogsummary .thumbnail {
    height: 12em;
}
.carousel .blogsummary li {
    list-style: none;
    display: inline-block;
    margin: 0 1em;
    direction: rtl;
}
.carousel.full .blogsummary li {
    background: white;
    width: 12em;
    padding: 0.25em;
}
.carousel .blogsummary li > div,
.carousel .blogsummary .byline,
.carousel .blogsummary .blurb {
    display: none;
}
.carousel.full .blogsummary li > div {
    display: block;
    color: var(--blue);
    height: 1em;
    overflow-y: hidden;
    text-align: left;
    padding: 0 0.5em 0.5em 0.5em;
}
.carousel_item {
    width: 12em;
    overflow: hidden;
    transition: width 0.25s, margin 0.25s;
}
.carousel_item.away, .carousel.full .carousel_item.away {
    width: 0 !important;
    margin: 0 !important;
}

.blocks .blog_section, .blocksection {
    font-size: initial;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.blocksection {
    grid-template-columns: 1fr 1fr 1fr;
}
.blocks .blog_section .blogpost, .blocks .block {
    flex: 1;
    color: var(--blue);
    background: var(--cream);
    text-shadow: none;
    margin: 1em;
    padding: 2em;
    border-radius: 2em 0 2em 0;
}
.blue .block {
    box-shadow: 1px 2px 0.5em #0008;
}
.blocks .blogpost h2, .blocks .block h2 {
    margin: 0;
    font-size: 125%;
}
.blocks .blogpost .byline, .blocks .blogpost .separator, .blocks .blogpost img {
    display: none;
}

form {
    text-align: left;
}
input, textarea {
    font-family: rooneysans, sans-serif, sans;
    font-size: 12pt;
    box-sizing: border-box;
    width: 20em;
    background: linear-gradient(to bottom, var(--cream), var(--white));
    border: none;
    border-bottom: thin solid var(--blue);
    padding: 0.5em 1em;
    /* border-radius: 1em 0 1em 0; */
}
textarea {
    height: 8em;
    resize: none;
}
input.mini {
    width: 9.86em;
}
input[type=checkbox] {
    width: unset;
}


.underline {
    background-image: url("/img/underline.svg");
    background-size: 0%;
    background-repeat: no-repeat;
    background-position: 0% 100%;
    transition: background-size 0.25s;
}
.underline.shown {
    background-size: 100%;
}
.slider {
    transform: translateY(24px);
    opacity: 0;
    transition: transform 0s, opacity 0s;
}
.slider.shown {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.5s, opacity 0.5s,
                color 0.25s, background 0.25s,
                padding 0.25s, border-radius 0.25s,
                width 0.25s, margin 0.25s, padding 0.25s,
                text-shadow 0.25s, box-shadow 0.25s;
}
.fade {
    opacity: 1;
    transition: opacity 0.5s;
}
.fade.out {
    opacity: 0;
}
.hidden {
    display: none !important;
}

@media (max-width: 60em) {
    #navbar {
        max-width: 9em;
        margin-right: 0;
        padding: 1em 0;
        line-height: 1.5em;
    }
    h1 img {
        height: 2.25em;
    }
    a.button {
        padding: 1em 1.5em;
        border-radius: 2em 0 2em 0;
    }
    .half {
        width: 100%;
        height: 8em;
    }
    .half img {
        width: auto;
        height: 5em;
    }
    .flex {
        display: block;
        position: initial;
    }
    .flex > * {
        display: block;
        flex: unset;
        margin: 0.5em auto;
        position: inherit;
    }
    .flex div:first-child blockquote {
        margin-right: revert;
    }
    .flex div:nth-child(2) img {
        margin-left: auto;
    }
    .midfloat {
        position: initial;
        width: unset;
        margin: 1em;
    }
    .blocks .blog_section, .blocksection {
        display: grid;
        grid-template-columns: 1fr;
    }
}
@media (max-width: 35em) {
    a.button {
        width: 70%;
        margin: 0.5em 0;
    }
    .narrowblock {
        display: block;
        float: none;
    }
    .narrowhide {
        display: none;
    }
}