﻿/* variables */
:root {
    --bp-wide: 1200px;
}

/* reset */
html {
    font-size: 10px;
}

body {
    font-family: "Work Sans", sans-serif;
    margin: 0;
    position: relative;
}

a {
    color: unset;
    text-decoration: unset;
}

    a:hover {
        text-decoration: underline;
    }

menu, ul {
    margin: 0;
    list-style: none;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: unset;
    margin: 0;
}

fieldset {
    border: unset;
}

address {
    font-style: unset;
}

.preline {
    white-space: pre-line;
}

input {
    font-size: inherit;
}

button {
    appearance: none;
    font: inherit;
    background: transparent;
    border: none;
}

/* shared header */
header.shared {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: rgba(255,255,255,0.7);
    top: 0;
    z-index: 1000;
}

    header.shared > div {
        margin: 0 auto;
        display: flex;
        position: relative;
    }

    header.shared img {
        margin: 1rem 0;
    }

    header.shared nav {
        display: flex;
    }

    header.shared menu {
        display: flex;
        column-gap: 5rem;
    }

    header.shared li {
        display: flex;
        align-items: center;
        font-size: 3.6rem;
        font-weight: 500;
    }

        header.shared li:hover > a {
            opacity: 0.7;
        }

        header.shared li.dropdown > div {
            position: absolute;
            top: 70%;
            left: 0;
            display: none;
            background: white;
            width: 100%;
            flex-direction: column;
            font-size: 2rem;
        }

        header.shared li.dropdown:hover > div {
            display: flex;
        }

        header.shared li.dropdown div.l1 {
            font-size: 2rem;
        }

            header.shared li.dropdown div.l1 div.l1name {
                display: inline-block;
                width: 25%;
                padding: 1rem 0;
            }

            header.shared li.dropdown div.l1:hover div.l1name {
                font-weight: bolder;
                background: lightgray;
            }

        header.shared li.dropdown div.l2container {
            display: none;
            position: absolute;
            top: 0;
            left: 25%;
            width: 25%;
            height: 100%;
            flex-direction: column;
            font-weight: initial;
        }

        header.shared li.dropdown div.l1:hover > div.l2container {
            display: flex;
        }

        header.shared li.dropdown div.l2name {
            padding: 1rem 0;
        }

        header.shared li.dropdown div.l2:hover {
            font-weight: bolder;
            background: lightgray;
        }

        header.shared li.dropdown a.l2 {
            display: none;
            position: absolute;
            top: 0;
            left: 100%;
            width: 200%;
            flex-direction: column;
        }

        header.shared li.dropdown div.l2:hover > a.l2 {
            display: flex;
        }

        header.shared li.dropdown div.l2title {
            font-size: 3rem;
        }

/* shared main */
main {
    margin-top: 15rem;
}

section.banner {
    background-size: cover;
    background-position-y: 50%;
}

/* shared footer */
footer.shared {
    background-color: #272F36;
    color: #C1D0D3;
    padding: 5rem 0 3rem 0;
}

    footer.shared > section.request {
        max-width: var(--bp-wide);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        footer.shared > section.request > a {
            font-size: 7rem;
        }

    footer.shared > section.links {
        border-bottom: 1px solid lightgray;
    }

        footer.shared > section.links > div {
            max-width: var(--bp-wide);
            margin: 6rem auto;
            display: grid;
            grid-template-columns: 1fr 3fr 1fr;
            grid-column-gap: 5rem;
        }

        footer.shared > section.links h4 {
            margin: 1rem 0;
            line-height: 10rem;
            font-size: 3.6rem;
        }

        footer.shared > section.links li {
            margin: 1rem 0;
            font-size: 2.4rem;
            opacity: 0.7;
            line-height: 3rem;
        }

    footer.shared > section.copyright > div {
        max-width: var(--bp-wide);
        margin: 3rem auto 0 auto;
        opacity: 0.7;
        font-size: 2rem;
    }
