﻿[data-inviewport=contentSlideUp] {
    opacity: 0;
    transform: translateY(20%);
}

    [data-inviewport=contentSlideUp].is-inViewport {
        transform: translateY(0%);
        opacity: 1;
        transition: 1s;
    }

[data-inviewport=contentSlideLeft] {
    opacity: 0;
    transform: translateX(-20%);
}

    [data-inviewport=contentSlideLeft].is-inViewport {
        transform: translateX(0%);
        opacity: 1;
        transition: 1s;
    }

[data-inviewport=contentSlideRight] {
    opacity: 0;
    transform: translateX(20%);
}

    [data-inviewport=contentSlideRight].is-inViewport {
        transform: translateX(0%);
        opacity: 1;
        transition: 1s;
    }

* {
    margin: 0;
    padding: 0;
}

html {
    overflow: auto;
    scroll-behavior: smooth;
}

body, body * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    width: 100%;
    height: 100%;
}

picture {
    display: block;
}

footer {
    margin-top: 12.313vw;
}

.attendee-background {
    position: absolute;
    width: 100%;
    height: 39.938vw;
    top: 0;
}

@media screen and (max-width:768px) {
    .attendee-background {
        height: 100%;
    }

        .attendee-background img {
            object-fit: cover;
            object-position: left;
        }
}

#Header {
    margin-left: 8.75vw;
    padding-top: 7.75vw;
    height: 39.938vw;
    overflow: hidden;
}

@media screen and (max-width:768px) {
    #Header {
        justify-content: normal;
        gap: 10.465vw;
        padding-top: 7vw;
        margin: 0;
        height: unset;
    }
}

#Header .text-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    #Header .text-container .header-text {
        padding-left: 1.281vw;
        font-size: 1.125vw;
        font-family: Roboto-B;
        border-left: .188vw solid #f7aa30;
    }

    #Header .text-container .align {
        display: flex;
        gap: 4.125vw;
    }

    #Header .text-container .title-text {
        margin-top: .875vw;
        font-size: 2.5vw;
        font-family: Roboto-B;
        line-height: 1.6;
    }

    #Header .text-container .subtitle-text {
        margin-top: 1vw;
        font-size: 1vw;
        font-family: Roboto-R;
        line-height: 1.5;
        border-left: solid 1px rgba(112,112,112,.3);
        padding-left: 2.813vw;
        width: 46.875vw;
    }

    #Header .text-container .navigation-text {
        display: flex;
        gap: 2.313vw;
        margin-top: 3.438vw;
    }

        #Header .text-container .navigation-text a {
            display: flex;
            align-items: center;
            color: #14428f;
            font-size: 1vw;
            font-family: Roboto-R;
            gap: .625vw;
            text-decoration: none;
        }

            #Header .text-container .navigation-text a img {
                display: flex;
                width: .688vw;
                height: auto;
            }

    #Header .text-container .linkWrap {
        position: relative;
        height: 3vw;
        border-radius: .125vw;
        width: fit-content;
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Roboto-R;
        margin-top: 2.1vw;
    }

        #Header .text-container .linkWrap .style-2 {
            align-items: center;
            color: #fff;
            text-decoration: none;
            display: flex;
            background-color: #004290;
            padding: .5vw 1.25vw;
            border-radius: 1.5vw;
        }

            #Header .text-container .linkWrap .style-2 .mask {
                position: relative;
                padding: 0;
                height: .875vw;
                overflow: hidden;
            }

                #Header .text-container .linkWrap .style-2 .mask .title {
                    display: block;
                    font-size: .875vw;
                    line-height: .875vw;
                    transition: transform .4s ease;
                }

            #Header .text-container .linkWrap .style-2 .link-icon {
                position: relative;
                width: 1.75vw;
                height: 1.75vw;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: .625vw;
                overflow: hidden;
            }

                #Header .text-container .linkWrap .style-2 .link-icon .icon {
                    display: block;
                    position: absolute;
                    transition: transform .4s ease;
                }

                    #Header .text-container .linkWrap .style-2 .link-icon .icon:nth-child(2) {
                        transform: translate(-2.5vw);
                    }

@media screen and (min-width:769px) {
    #Header .text-container .linkWrap .style-2:hover .icon:first-child {
        transform: translate(2.5vw);
    }

    #Header .text-container .linkWrap .style-2:hover .icon:nth-child(2) {
        transform: translate(0);
    }
}

@media screen and (max-width:768px) {
    #Header .text-container .linkWrap {
        height: fit-content;
        margin-top: 4vw;
    }

        #Header .text-container .linkWrap .style-2 {
            padding: 2.5vw 4.25vw;
            border-radius: 6.5vw;
        }

            #Header .text-container .linkWrap .style-2 .mask {
                height: 3.256vw;
            }

                #Header .text-container .linkWrap .style-2 .mask .title {
                    font-size: 3.256vw;
                    line-height: 3.256vw;
                }

            #Header .text-container .linkWrap .style-2 .link-icon {
                width: 6.512vw;
                height: 6.512vw;
                margin-left: 2.6vw;
            }

                #Header .text-container .linkWrap .style-2 .link-icon .icon:nth-child(2) {
                    transform: translate(-9.302vw);
                }
}

@media screen and (max-width:768px) {
    #Header .text-container {
        width: 100%;
        padding: 0 9.767vw 0 7.674vw;
    }

        #Header .text-container .header-text {
            padding-left: 4.651vw;
            font-size: 4.186vw;
            border-left: .698vw solid #f7aa30;
        }

        #Header .text-container .align {
            display: block;
        }

        #Header .text-container .title-text {
            margin-top: 6.512vw;
            font-size: 6.512vw;
        }

        #Header .text-container .subtitle-text {
            margin-top: 8.14vw;
            font-size: 3.721vw;
            width: unset;
            padding: unset;
            border: unset;
        }

        #Header .text-container .navigation-text {
            display: flex;
            flex-direction: column;
            gap: 5.605vw;
            margin-top: 12.791vw;
        }

            #Header .text-container .navigation-text a {
                display: flex;
                align-items: center;
                color: #14428f;
                font-size: 3.721vw;
                font-family: Roboto-R;
                gap: 2.326vw;
                text-decoration: none;
            }

                #Header .text-container .navigation-text a img {
                    display: flex;
                    width: 2.558vw;
                    height: auto;
                }
}

#Header .image-container {
    position: relative;
    margin-top: 42px;
}

@media screen and (max-width:768px) {
    #Header .image-container {
        margin-top: 5vw;
    }
}

#Header .image-container .image-decoration {
    position: relative;
    z-index: 1;
    width: 99.375vw;
    height: auto;
    margin-right: -7.938vw;
}

@media screen and (max-width:768px) {
    #Header .image-container .image-decoration {
        width: 180vw;
        right: -3.023vw;
    }
}

#Header .image-container .image {
    position: absolute;
    margin-top: 1.25vw;
    width: 88.539vw;
    height: 22.2vw;
    border-start-start-radius: 5.75vw;
    top: 0;
    right: 0;
    overflow: hidden;
}

    #Header .image-container .image img {
        object-fit: cover;
        object-position: 0 -16vw;
    }

@media screen and (max-width:768px) {
    #Header .image-container .image img {
        object-position: -38vw -27vw;
    }
}

@media screen and (max-width:768px) {
    #Header .image-container .image {
        width: 165.4vw;
        height: unset;
        margin-top: 1.25vw;
        right: -71vw;
    }
}

.header-undershadow {
    position: relative;
    width: 100%;
}

#Content {
    position: relative;
    margin: 1.25vw 15.625vw 0;
}

    #Content .content-container {
        position: relative;
        display: flex;
        padding: 2.188vw 3.438vw;
        box-shadow: 1.25vw 1.25vw 1.875vw rgba(64,64,64,.0901960784);
        border: .063vw solid #c6c6c6;
        border-radius: 1.25vw;
        flex-direction: column;
    }

        #Content .content-container .top-row {
            display: flex;
        }

@media screen and (max-width:768px) {
    #Content .content-container .top-row {
        flex-direction: column;
    }
}

#Content .content-container .bottom {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 2.5vw;
    padding: 3.25vw 0;
}

    #Content .content-container .bottom .header-text {
        grid-column: 1/span 3;
        position: relative;
        font-family: Roboto-M;
        font-size: 1.5vw;
    }

    #Content .content-container .bottom .board-member {
        position: relative;
        margin-top: 1.75vw;
    }

        #Content .content-container .bottom .board-member .name {
            font-family: Roboto-B;
            font-size: 1.125vw;
        }

        #Content .content-container .bottom .board-member .school {
            margin-top: .5vw;
            font-family: Roboto-R;
            font-style: italic;
            font-size: 1vw;
        }

@media screen and (max-width:768px) {
    #Content .content-container .bottom {
        width: auto;
        margin-left: 0;
        display: grid;
        grid-template-columns: auto;
        column-gap: 9.302vw;
        padding: 4.651vw 0;
    }

        #Content .content-container .bottom .header-text {
            grid-column: 1;
            position: relative;
            font-family: Roboto-M;
            font-size: 5.581vw;
        }

        #Content .content-container .bottom .board-member {
            position: relative;
            margin-top: 6.512vw;
        }

            #Content .content-container .bottom .board-member .name {
                font-family: Roboto-B;
                font-size: 4.186vw;
            }

            #Content .content-container .bottom .board-member .school {
                margin-top: 1.86vw;
                font-family: Roboto-R;
                font-style: italic;
                font-size: 3.721vw;
            }
}

#Content .content-container .left {
    width: 20vw;
    margin-right: 3.125vw;
    padding: 1.25vw 0;
}

    #Content .content-container .left .header-text {
        position: relative;
        font-family: Roboto-M;
        font-size: 1.5vw;
    }

    #Content .content-container .left .board-member {
        position: relative;
        margin-top: 1.75vw;
    }

        #Content .content-container .left .board-member .name {
            font-family: Roboto-B;
            font-size: 1.125vw;
        }

        #Content .content-container .left .board-member .school {
            margin-top: .5vw;
            font-family: Roboto-R;
            font-style: italic;
            font-size: 1vw;
        }

#Content .content-container .linebreak {
    width: .063vw;
    background-color: rgba(112,112,112,.5);
}

#Content .content-container .right {
    width: 31.25vw;
    margin-left: 6vw;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 2.5vw;
    padding: 1.25vw 0;
}

    #Content .content-container .right .header-text {
        grid-column: 1/span 2;
        position: relative;
        font-family: Roboto-M;
        font-size: 1.5vw;
    }

    #Content .content-container .right .board-member {
        position: relative;
        margin-top: 1.75vw;
    }

        #Content .content-container .right .board-member .name {
            font-family: Roboto-B;
            font-size: 1.125vw;
        }

        #Content .content-container .right .board-member .school {
            margin-top: .5vw;
            font-family: Roboto-R;
            font-style: italic;
            font-size: 1vw;
        }

@media screen and (max-width:768px) {
    #Content {
        margin: 6.25vw 6.625vw 0;
    }

        #Content .content-container {
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 8.14vw 12.791vw;
            box-shadow: 4.651vw 4.651vw 6.977vw rgba(64,64,64,.0901960784);
            border: .233vw solid #c6c6c6;
            border-radius: 4.651vw;
        }

            #Content .content-container .left {
                width: auto;
                margin-right: 0;
                padding: 4.651vw 0;
            }

                #Content .content-container .left .header-text {
                    position: relative;
                    font-family: Roboto-M;
                    font-size: 5.581vw;
                }

                #Content .content-container .left .board-member {
                    position: relative;
                    margin-top: 6.512vw;
                }

                    #Content .content-container .left .board-member .name {
                        font-family: Roboto-B;
                        font-size: 4.186vw;
                    }

                    #Content .content-container .left .board-member .school {
                        margin-top: 1.86vw;
                        font-family: Roboto-R;
                        font-style: italic;
                        font-size: 3.721vw;
                    }

            #Content .content-container .linebreak {
                display: none;
            }

            #Content .content-container .right {
                width: auto;
                margin-left: 0;
                display: grid;
                grid-template-columns: auto;
                column-gap: 9.302vw;
                padding: 4.651vw 0;
            }

                #Content .content-container .right .header-text {
                    grid-column: 1;
                    position: relative;
                    font-family: Roboto-M;
                    font-size: 5.581vw;
                }

                #Content .content-container .right .board-member {
                    position: relative;
                    margin-top: 6.512vw;
                }

                    #Content .content-container .right .board-member .name {
                        font-family: Roboto-B;
                        font-size: 4.186vw;
                    }

                    #Content .content-container .right .board-member .school {
                        margin-top: 1.86vw;
                        font-family: Roboto-R;
                        font-style: italic;
                        font-size: 3.721vw;
                    }
}
