@font-face {
    font-family: "Open Sans";
    font-weight: normal;
    src: url("fonts/open-sans.woff2?v=576c5284f4230a3f");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    src: url("fonts/open-sans-italic.woff2?v=9a6c50ee552794c8");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 500;
    src: url("fonts/open-sans-medium.woff2?v=92315dc6c482736e");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 600;
    src: url("fonts/open-sans-semi-bold.woff2?v=6f1eb1fbef58ccde");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 700;
    src: url("fonts/open-sans-bold.woff2?v=8f3a528cb6e98420");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 800;
    src: url("fonts/open-sans-extra-bold.woff2?v=58d7008611146c80");
}

@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: bold;
    src: url("fonts/pt-serif-bold-italic.woff2?v=d57fd0b969ef681d");
}

* {
    all: unset;
    box-sizing: border-box;
}

*:focus {
    outline: 1px dotted;
}

:root {
    scroll-behavior: smooth;
}

html {
    display: block;
}

head {
    display: none;
}

body {
    color: #222;
    display: flex;
    flex-direction: column;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    line-height: 1.7;
    min-height: 100vh;
    
    @media screen and (max-width: 1063px) {
        font-size: 16px;
        line-height: 1.6;
    }
}

a {
    color: #067444;
    cursor: pointer;
    text-decoration: underline;
}

img {
    overflow: clip;
}

h1 {
    display: block;
    
    @media screen and (max-width: 1063px) {
        border-bottom: 5px #00974a solid;
    }
    
    & > span {
        display: block;
        max-width: 1000px;
        margin: auto;
        padding: 1.5rem 4rem;
        
        @media screen and (max-width: 1063px) {
            display: flex;
            justify-content: center;
            max-width: none;
            padding: 1.5rem;
        }
        
        & > a {
            background: url("images/logo.svg?v=e9695adba000eab1") no-repeat center / 100%;
            display: block;
            font-family: "PT Serif", serif;
            font-size: 19px;
            font-style: italic;
            font-weight: bold;
            height: 60px;
            line-height: 60px;
            overflow: hidden;
            position: relative;
            text-align: center;
            text-decoration: none;
            width: 287px;
            
            & > span {
                position: relative;
                z-index: -1;
            }
        }
    }
}

.navigation {
    background: linear-gradient(#067444, #00974a);
    display: block;
    
    & > div {
        display: flex;
        gap: 1.5rem;
        justify-content: space-between;
        max-width: 1000px;
        margin: auto;
        padding: 0 4rem;
        
        & > ul {
            display: flex;
            
            & > li {
                color: white;
                cursor: default;
                font-size: 15px;
                font-weight: bold;
                line-height: 30px;
                
                @media screen and (max-width: 1063px) {
                    color: #067444;
                }
                
                & > a {
                    color: inherit;
                    display: inline-block;
                    line-height: 30px;
                    text-decoration: none;
                }
            }
            
            &.languages {
                order: 1;
                column-gap: 0.5rem;
                
                @media screen and (max-width: 1063px) {
                    display: block;
                    position: absolute;
                    right: 1rem;
                    top: 0.5rem;
                }
                
                & > li > a {
                    color: #eee;
                    font-weight: normal;
                    
                    @media screen and (max-width: 1063px) {
                        color: #067444;
                    }
                    
                    &:hover {
                        color: white;
                        
                        @media screen and (max-width: 1063px) {
                            color: #067444;
                        }
                    }
                }
            }
            
            &.sections {
                flex-wrap: wrap;
                
                @media screen and (max-width: 1063px) {
                    display: none;
                }
                
                & > li {
                    border-right: 1px solid white;
                    
                    &:last-child {
                        border-right: unset;
                    }
                    
                    & > a {
                        padding: 0 1rem;
                        
                        &:hover {
                            background-color: #c0a439;
                        }
                    }
                }
            }
        }
    }
}

.cover {
    background: #00974a url("images/cover.webp?v=ad9b01fad425f4a0") bottom left / cover;
    height: 32rem;
    text-align: center;
    
    @media screen and (max-width: 1063px) {
        background-image: none;
        height: auto;
    }
    
    & > div {
        display: block;
        margin: auto;
        max-width: 900px;
        padding: 4rem 4rem 0 4rem;
        
        @media screen and (max-width: 1063px) {
            padding: 2rem;
        }
        
        & > div {
            background-color: white;
            display: block;
            padding: 2.25rem 3rem;
            
            @media screen and (max-width: 1063px) {
                background-color: transparent;
                padding: 0;
            }
            
            & > h2 {
                color: #00974a;
                display: block;
                font-family: "PT Serif", serif;
                font-size: 45px;
                font-style: italic;
                font-weight: bold;
                line-height: 1.3;
                
                @media screen and (max-width: 1063px) {
                    color: white;
                    font-size: 40px
                }
            }
            
            & > p {
                color: #444;
                display: block;
                font-size: 20px;
                font-weight: 800;
                letter-spacing: 2px;
                margin-top: 1.25rem;
                line-height: 1.7;
                text-transform: uppercase;
                
                @media screen and (max-width: 1063px) {
                    color: white;
                    font-size: 18px;
                    letter-spacing: 1px;
                    line-height: 1.6;
                }
            }
        }
    }
}

.section {
    padding: 3rem 4rem;
    
    @media screen and (max-width: 1063px) {
        padding: 2rem 1.5rem;
    }
    
    & > h2 {
        color: #444;
        display: block;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: 2px;
        text-align: center;
        text-transform: uppercase;
        
        @media screen and (max-width: 1063px) {
            font-size: 18px;
            letter-spacing: 1px;
        }
    }
    
    & > p {
        display: block;
        margin-top: 1rem;
        text-align: center;
        
        @media screen and (max-width: 1063px) {
            margin-top: 0.75rem;
        }
    }
    
    & > .logos {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
        margin: 2rem 0;
        
        @media screen and (max-width: 1063px) {
            align-items: center;
            flex-direction: column;
        }
        
        & > a {
            border: 1px solid #eee;
            display: inline-block;
            
            & > img {
                display: block;
                height: 10rem;
                width: 10rem;
            }
        }
    }
    
    & > .map {
        display: block;
        margin: auto;
        width: calc(1000px - 4rem);
        
        @media screen and (max-width: 1063px) {
            width: auto;
        }
        
        & > iframe {
            display: block;
            height: 526px;
            margin-top: 2rem;
            width: calc(1000px - 4rem);
            
            @media screen and (max-width: 1063px) {
                display: none;
            }
        }
        
        & > div {
            display: block;
            font-size: 16px;
            margin-top: 0.5rem;
            text-align: right;
            
            @media screen and (max-width: 1063px) {
                font-size: 14px;
                text-align: center;
            }
        }
    }
}

.alternate-section {
    background-color: #00974a;
    color: white;
    
    & > div {
        display: block;
        margin: auto;
        max-width: 1064px;
        padding: 2.5rem 4rem;
        
        @media screen and (max-width: 1063px) {
            max-width: none;
            padding: 2rem 1.5rem;
        }
        
        a {
            color: inherit;
        }
        
        & > h2 {
            display: block;
            font-family: "PT Serif", serif;
            font-size: 27px;
            font-style: italic;
            font-weight: bold;
            
            @media screen and (max-width: 1063px) {
                font-size: 24px;
                line-height: 1.4;
                text-align: center;
            }
        }
        
        & > p {
            display: block;
            font-size: 20px;
            font-weight: 500;
            line-height: 1.6;
            margin-top: 0.5rem;
            
            @media screen and (max-width: 1063px) {
                font-size: 18px;
                hyphens: auto;
            }
        }
        
        & > dl {
            display: flex;
            gap: 1.5rem;
            justify-content: flex-end;
            margin-top: 1.5rem;
            
            @media screen and (max-width: 1063px) {
                flex-direction: column;
                gap: 0.25rem;
            }
            
            & > dt {
                display: none;
            }
            
            & > dd {
                background: no-repeat top 4px left / auto 30px;
                font-size: 20px;
                font-weight: 500;
                
                @media screen and (max-width: 1063px) {
                    background-position: top 3px left;
                    background-size: auto 26px;
                    font-size: 18px;
                }
                
                &:nth-of-type(1) {
                    background-image: url("images/contact/mail.webp?v=58feb082bbf6f83c");
                    padding-left: 38px;
                    
                    @media screen and (max-width: 1063px) {
                        padding-left: 34px;
                    }
                }
                
                &:nth-of-type(2) {
                    background-image: url("images/contact/phone.webp?v=c58455c17ab26bb3");
                    padding-left: 36px;
                    
                    @media screen and (max-width: 1063px) {
                        padding-left: 34px;
                    }
                }
            }
        }
        
        & > form {
            @media screen and (max-width: 1063px) {
                display: block;
                margin: auto;
                max-width: fit-content;
            }
            
            & > dl {
                column-gap: 2rem;
                display: inline-grid;
                grid-template-columns: auto auto auto;
                grid-template-rows: auto auto;
                margin-top: 1rem;
                
                @media screen and (max-width: 1063px) {
                    display: flex;
                    flex-direction: column;
                }
                
                & > dt {
                    font-weight: 500;
                    
                    @media screen and (max-width: 1063px) {
                        margin-top: 1rem;
                    }
                    
                    &:nth-of-type(2) {
                        grid-area: 1 / 2;
                    }
                    
                    &:nth-of-type(3) {
                        grid-area: 1 / 3;
                    }
                }
                
                & > dd > input {
                    border-bottom: 1px solid;
                    display: inline-block;
                    padding-bottom: 1px;
                    
                    &:hover {
                        border-bottom-width: 2px;
                        padding-bottom: 0;
                    }
                    
                    &:focus {
                        border-bottom-width: 2px;
                        outline-width: 0;
                        padding-bottom: 0;
                    }
                    
                    &:disabled {
                        opacity: 50%;
                        
                        &:hover {
                            border-bottom-width: 1px;
                            padding-bottom: 1px;
                        }
                    }
                }
            }
            
            & > p {
                display: block;
                margin-top: 2rem;
                
                @media screen and (max-width: 1063px) {
                    text-align: center;
                }
                
                & > button {
                    cursor: default;
                    border: 1px solid;
                    font-weight: 600;
                    padding: 3px 15px;
                    
                    &:focus {
                        border-width: 2px;
                        padding: 2px 14px;
                        outline-width: 0;
                    }
                    
                    &:hover {
                        background-color: #c0a439;
                        border-color: white;
                    }
                    
                    &:disabled {
                        opacity: 50%;
                        
                        &:hover {
                            background-color: transparent;
                        }
                    }
                }
                
                & > small {
                    @media screen and (max-width: 1063px) {
                        display: block;
                        margin-top: 0.5rem;
                    }
                    
                    & > a {
                        font-size: 16px;
                        font-weight: 500;
                        margin-left: 1rem;
                        
                        @media screen and (max-width: 1063px) {
                            font-size: 14px;
                            margin-left: 0;
                        }
                    }
                }
            }
        }
        
        & > .photos {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            justify-content: center;
            margin-top: 1.5rem;
            
            @media screen and (max-width: 1063px) {
                align-items: center;
                flex-direction: column;
            }
            
            & > img {
                border: 2px solid white;
                height: 197px;
                width: 296px;
            }
        }
    }
}

.cfp {
    font-size: 22px;
    padding: 3rem 4rem;
    text-align: center;
    
    @media screen and (max-width: 1063px) {
        font-size: 20px;
        padding: 2rem 1.5rem;
    }
    
    & > p {
        display: block;
        font-style: italic;
    }
}

.socials {
    font-size: 22px;
    padding: 3rem 4rem;
    text-align: center;
    
    @media screen and (max-width: 1063px) {
        font-size: 20px;
        padding: 2rem 1.5rem;
    }
    
    & > p {
        display: block;
        font-style: italic;
    }
    
    & > ul {
        display: inline-flex;
        gap: 1rem;
        margin-top: 1rem;
        
        & > li {
            & > a > span {
                display: block;
                height: 48px;
                width: 48px;
                
                & > img {
                    display: block;
                    height: 48px;
                    width: 48px;
                }
                
                &:hover > img {
                    display: none;
                }
            }
            
            &:nth-child(1) > a > span {
                background: url("images/social/facebook.webp?v=f11dba4b3abc831a") center / contain;
            }
            
            &:nth-child(2) > a > span {
                background: url("images/social/instagram.webp?v=c80fe9dd36a82b6b") center / contain;
            }
            
            &:nth-child(3) > a > span {
                background: url("images/social/linkedin.webp?v=561493b9a7d16e99") center / contain;
            }
        }
    }
}

.title > h2 {
    color: #067444;
    display: block;
    font-family: "PT Serif", serif;
    font-size: 27px;
    font-style: italic;
    font-weight: bold;
    line-height: 1.4;
    max-width: 1000px;
    margin: auto;
    margin-top: 3rem;
    padding: 0 4rem;
    
    @media screen and (max-width: 1063px) {
        font-size: 24px;
        max-width: none;
        padding: 0 2rem;
    }
}

.content {
    padding-bottom: 4rem;
    
    @media screen and (max-width: 1063px) {
        padding-bottom: 3rem;
    }
    
    strong {
        font-weight: 600;
    }
    
    & > h3 {
        display: block;
        font-weight: 600;
        max-width: 1000px;
        margin: auto;
        margin-top: 2rem;
        padding: 0 4rem;
        
        @media screen and (max-width: 1063px) {
            max-width: none;
            padding: 0 2rem;
        }
    }
    
    & > p {
        display: block;
        max-width: 1000px;
        margin: auto;
        margin-top: 0.75rem;
        padding: 0 4rem;
        
        @media screen and (max-width: 1063px) {
            hyphens: auto;
            max-width: none;
            padding: 0 2rem;
        }
    }
    
    & > ul {
        display: block;
        max-width: 1000px;
        margin: auto;
        margin-top: 0.75rem;
        padding: 0 4rem;
        
        @media screen and (max-width: 1063px) {
            hyphens: auto;
            max-width: none;
            padding: 0 2rem;
        }
        
        & > li {
            display: list-item;
            margin-left: 1rem;
            margin-top: 0.75rem;
        }
    }
    
    & > dl {
        display: block;
        max-width: 1000px;
        margin: auto;
        margin-top: 0.75rem;
        padding: 0 4rem;
        
        @media screen and (max-width: 1063px) {
            max-width: none;
            padding: 0 2rem;
        }
        
        & > dt {
            display: block;
            font-weight: 600;
        }
        
        & > dd {
            display: block;
            margin-left: 2rem;
        }
    }
    
    & > .table {
        display: block;
        margin: auto;
        margin-top: 2rem;
        max-width: 1000px;
        padding: 0 4rem;
        
        @media screen and (max-width: 1063px) {
            max-width: none;
            overflow: scroll;
            padding: 0 2rem;
            white-space: nowrap;
        }
        
        & > table {
            border-collapse: collapse;
            display: table;
            font-size: 17px;
            width: 100%;
            
            @media screen and (max-width: 1063px) {
                font-size: 15px;
            }
            
            & > thead {
                display: table-header-group;
                
                & > tr > th {
                    font-weight: bold;
                    text-align: center;
                    padding: 6px 0.5rem;
                }
            }
            
            & > tbody {
                display: table-row-group;
                
                & > tr > td {
                    color: #067444;
                    font-size: 24px;
                    position: relative;
                    
                    & > sup {
                        color: #222;
                        font-size: 14px;
                        margin-left: 2px;
                        position: absolute;
                    }
                }
            }
            
            & > tfoot {
                display: table-footer-group;
                
                & > tr > td {
                    padding: 6px 0.5rem;
                    white-space: nowrap;
                }
            }
            
            tr {
                display: table-row;
                border-bottom: 1px solid #eee;
                
                & > th {
                    display: table-cell;
                    font-weight: 600;
                    vertical-align: middle;
                }
                
                & > td {
                    display: table-cell;
                    padding: 0 0.5rem;
                    text-align: center;
                    vertical-align: middle;
                }
            }
        }
    }
    
    & > .note {
        color: #666;
        display: block;
        margin-bottom: 2rem;
        margin-top: 1rem;
        font-size: 14px;
        
        @media screen and (max-width: 1063px) {
            font-size: 12px;
        }
    }
}

.footer {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
    & > p {
        background: linear-gradient(#00974a, #067444);
        padding: 6px 4rem;
        text-align: center;
        
        & > small {
            color: white;
            display: block;
            font-size: 15px;
            line-height: 1.6;
            
            @media screen and (max-width: 1063px) {
                font-size: 13px;
            }
            
            & > a {
                color: inherit;
            }
        }
    }
}