s-footer {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: var(--page-max-width);
    color: white;

    display: flex;
    flex-direction: row;

    margin: 0;

    justify-content: center;
    align-items: center;
    padding: 20px;
    margin-top: 20px;
    color: var(--color-white);
    font-size: 1.2rem;
    margin-bottom: 70px;
}

s-top,
s-section {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0px;
    margin-bottom: 0px;
}

s-top,
s-section {
    display: flex;
    background-color: var(--color-white);
    color: var(--color-text);
}

s-top {
    background-image: url('../images/DSCN0122.JPG');
    background-position: 0 32%;
    background-size: 120%;
}

s-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    height: 200px;
}

s-section {
    flex-direction: column;
    padding: 0px;
    margin-top: 0px;
    color: var(--color-text);
    padding-bottom: 2rem;
    align-items: center;

    &.alternate, &.no-color {
        background-color: unset;

        p {
            color: var(--color-text-alternate);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--color-text-alternate);
        }
    }
}

s-section.split-section {
    flex-direction: row;
    justify-content: center;
}

s-section-area {
    position: relative;
    max-width: calc(var(--page-max-inner-width) / 2 - 10px);
    box-sizing: border-box;
    min-height: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
}
s-section-area:first-child {
     margin-right: 10px;
} 
s-section-area:last-child {
     margin-left: 10px; 
}

s-card {

    font-size: var(--font-size-normal);

    box-sizing: border-box;

    width: 100%;
    max-width: var(--page-max-width);

    display: flex;
    flex-direction: column;

    color: var(--color-text);

    padding: 0 1rem 0.25rem;
    margin: 0;

    overflow: hidden;

    h1 {
        text-align: center;
    }

    &:first-of-type {
        margin-top: 2rem;
    }

    &+s-card {
        margin-top: 0rem;
    }
}

s-card.white {
    color: var(--color-text);
    background-color: var(--color-white);
}

s-card.full-width {

    max-width: unset;
    width: 100%;

    margin: 0;
    margin-bottom: 2rem;
    border-radius: 0;
    background-color: var(--color-white);
    color: var(--color-white);
    background-image: url('/image-assets/ibAKtyHWVKJ0FcL-1mXg8vsoPkZ0S6i');
    background-size: 100% auto;

    justify-content: center;
    align-items: center;

    h1 {
        max-width: 800px;
        text-align: center;
        color: var(--color-white);
        padding: 2rem 3rem;
    }
}

s-card.centered {
    align-items: center;
}

s-card.narrow {
    max-width: 600px;
    width: 100%;
}

s-card.flow {
    background-color: unset;
    padding: 0 3rem;
    color: var(--color-text);
    box-shadow: none;

    &+& {
        margin-top: 1rem;
    }

    &.row {
        flex-direction: row;
    }
}

s-card.cols2 {
    display: block;
    columns: 2;

    h2 {
        column-span: all;
        margin-bottom: 1rem;
    }

    h3 {
        break-after: avoid;
    }

    p {
        margin-top: 0;
        break-inside: avoid;
    }
}

s-card.split {
    flex-direction: row;

    &>s-part {
        flex: 1;
        margin: 0 1rem;
    }

    &>s-part:first-child {
        margin: 0 1rem 0 0;
    }

    &>s-part:last-child {
        margin: 0 0 0 1rem;
    }

    s-part {
        display: flex;
        flex-direction: column;
        margin: 0 0 1rem;
    }

    s-part.image {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        border-radius: 0.5rem;
    }
}

s-card.split.s6040 {

    &>s-part {
        flex: unset;
    }

    &>:first-child {
        width: 60%;
    }

    &>:last-child {
        width: 40%;
    }
}

s-card.split.s7525 {

    &>s-part {
        flex: unset;
    }

    &>:first-child {
        width: 75%;
    }

    &>:last-child {
        width: 40%;
    }
}

s-card.split.s8020 {

    &>s-part {
        flex: unset;
    }

    &>:first-child {
        width: 80%;
    }

    &>:last-child {
        width: 20%;
    }
}

s-card.filelist-card{
    div{
        padding: 0.1rem 0;
        color: var(--color-blue-dark);
        text-decoration: none;
        cursor: pointer;

        &:hover{
            text-decoration: underline;
            color: var(--color-blue);
        }
    }
}

button {

    --btn-bg-color: var(--color-grey-dark);
    --btn-bg-color-busy: var(--color-grey-light);
    --btn-bg-color-hover: var(--color-grey);
    --btn-bg-color-focus: var(--color-grey-darker);

    font-family: var(--font-main);
    font-size: var(--font-size-normal);
    line-height: 1.5;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1.5rem 0.6rem;
    border-radius: 2rem;
    min-width: 60px;
    min-height: 3rem;
    border: 0;
    background-color: var(--btn-bg-color);
    color: var(--color-text-menu);
    font-weight: bold;
    cursor: pointer;
    user-select: none;

    &.default {
        --btn-bg-color: var(--color-gold-dark);
        --btn-bg-color-hover: var(--color-gold);
        --btn-bg-color-busy: var(--color-gold-lighter);
        --btn-bg-color-focus: var(--color-gold-darker);
    }

    &.busy {
        box-shadow: inset 0 0 4px 2px var(--btn-bg-color);
        background: linear-gradient(90deg, var(--btn-bg-color), var(--btn-bg-color-busy), var(--btn-bg-color));
        background-size: 200% 100%;
        background-repeat: repeat-x;
        animation: menu-gradient-marquee 1s linear infinite;
        cursor: wait;
        pointer-events: none;
    }

    &.error {
        background-color: var(--color-red);
        color: var(--color-white);
        pointer-events: none;
    }

    &:focus {
        outline: 1px solid var(--btn-bg-color-focus);
        outline-offset: 1px;
    }

    &:hover {
        background-color: var(--btn-bg-color-hover);
        transition: background-color .3s ease-in-out;
    }

    span.icon {
        font-size: 2rem;
        padding: 0;
        margin: 0;
    }

    &.disabled {
        background-color: var(--color-grey-light);
        color: var(--color-text-menu);
        cursor: default;
        pointer-events: none;
    }

}

/*-------- MEDIA -------- */
/* Responsive breakpoints 
    Switch to smaller fonts: 800px
    Switch to even smaller fonts: 680px
    Switch to Single column layout: 540px
    mobile: 420px
    tiny: 320px
*/

@media only screen and (max-width: 800px) {

    a.btn {
        line-height: 1.3;
        font-size: var(--font-size-small);
    }

    button span.icon {
        font-size: 1.5rem;
    }

}

/* Adjust margins */
@media only screen and (max-width: 680px) {
    s-section {
        padding-bottom: 1.5rem;
    }

    s-card.flow {
        padding: 0 1.5rem;
        margin-top: 1rem;
    }

    s-card.full-width {
        padding: 0 .5rem;
        margin-bottom: 1rem;

        h1 {
            padding: 1rem 1rem;
        }
    }

    s-card.split {
        &>s-part:first-child {
            margin: 0 .5rem 0 0;
        }

        &>s-part:last-child {
            margin: 0 0 0 .5rem;
        }
    }
}

/* Switch to Single column layout */
@media only screen and (max-width: 540px) {

    s-section {
        padding-bottom: 1rem;
    }

    s-card.flow.row {
        flex-direction: column;

    }

    s-card.cols2 {
        columns: 1;
    }

    s-card.split,
    s-card.split.s6040 {
        flex-direction: column;

        &>s-part,
        &>s-part:last-child,
        &>s-part:first-child {
            margin: 0 0 1rem;
            width: 100%;
        }

    }
}

@media only screen and (max-width: 420px) {

    s-footer {
        p {
            font-size: var(--font-size-small);
        }
    }

}