// out: style.css

@light-blue: #37A8C8;
@dark-blue: #202945;
@grey: #666666;

html, body {
    margin: 0;
    padding: 0;
}

.comp-logos {
    width: 1425px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    * { box-sizing: border-box; }
    padding: 30px 28px 0;

    @media (max-width: 1400px) {
        padding: 30px 34px 0;
    }
    @media (max-width: 1100px) {
        padding: 30px 36px 0;
    }

    display: flex;
    align-items: flex-start;
    gap: 45px;

    @media (max-width: 500px) {
        flex-direction: column;
        gap: 20px;
    }

    .mainlogo {
        flex: 1;
        flex-shrink: 0;

        img {
            width: 370px;
            height: auto;
            display: block;

            @media (max-width: 1400px) {
                width: 266px;
            }
            @media (max-width: 1100px) {
                width: 202px;
            }
        }
    }
    .sidelogos {
        img {
            width: 312px;
            height: auto;
            display: block;

            @media (max-width: 1400px) {
                width: 224px;
            }
            @media (max-width: 1100px) {
                width: 170px;
            }
            @media (max-width: 500px) {
                width: 120px;
                margin-left: 5px;
            }
        }
    }
}
.comp-header {
    width: 1425px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    * { box-sizing: border-box; }
    padding: 0 45px;
    margin-top: 45px;

    font-family: 'Open Sans', sans-serif;
    font-size: 54px;
    line-height: 1.148;

    @media (max-width: 1400px) {
        font-size: 38px;
    }
    @media (max-width: 1100px) {
        font-size: 30px;
    }

    .superheader {
        color: @light-blue;
        font-size: 36px;
        font-weight: bold;

        @media (max-width: 1400px) {
            font-size: 26px;
        }
        @media (max-width: 1100px) {
            font-size: 20px;
        }
    }
    .header {
        color: @dark-blue;
        font-weight: 800;
        margin-right: 7vw;
    }

}
.comp-eventsbox {
    width: 1425px;
    max-width: 100%;
    margin: 48px auto 0;
    box-sizing: border-box;
    * { box-sizing: border-box; }

    font-family: 'Open Sans', sans-serif;
    background: rgba(55, 168, 200, 0.1);
    border-top: 1px solid @light-blue;
    padding: 38px 45px 55px;
    font-size: 34px;
    line-height: 1.29;

    @media (max-width: 1400px) {
        font-size: 24px;
    }
    @media (max-width: 1100px) {
        font-size: 19px;
    }

    .copy {
        color: @grey;
    }
    .subcopy {
        color: @light-blue;
        margin-top: 1em;
    }
    .events {
        border-top: 1px solid @light-blue;
        margin-top: 25px;
        padding-top: 45px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 45px;

        @media (max-width: 767px) {
            grid-template-columns: repeat(1, 1fr);
        }

        .event {
            display: flex;
            flex-direction: column;
            
            .location {
                color: @dark-blue;
                font-size: 50px;
                line-height: 1;
                font-weight: bold;

                @media (max-width: 1400px) {
                    font-size: 36px;
                }
                @media (max-width: 1100px) {
                    font-size: 26px;
                }
            }
            .date {
                margin-top: 14px;
                color: @light-blue;
                font-size: 36px;
                line-height: 1.33;
                font-weight: 600;

                @media (max-width: 1400px) {
                    font-size: 26px;
                }
                @media (max-width: 1100px) {
                    font-size: 18px;
                }
            }
            .address {
                margin-top: 14px;
                flex: 1;
                color: @grey;
                font-size: 30px;
                line-height: 1.33;

                @media (max-width: 1400px) {
                    font-size: 22px;
                }
                @media (max-width: 1100px) {
                    font-size: 16px;
                }
            }
            .button {
                margin-top: 35px;

                a {
                    display: inline-block;
                    background: @light-blue;
                    border-radius: 8px;
                    color: #fff;
                    font-size: 32px;
                    line-height: 1.33;
                    font-weight: 800;
                    text-decoration: none;
                    padding: 23px 50px;

                    @media (max-width: 1400px) {
                        font-size: 23px;
                        padding: 17px 35px;
                    }
                    @media (max-width: 1100px) {
                        font-size: 16px;
                        padding: 15px 25px;
                    }
                }
            }
        }
    }
}
.comp-photo {
    width: 1425px;
    max-width: 100%;
    margin: 30px auto 0;

    img {
        box-shadow: 8px 10px 16px rgba(0, 0, 0, 0.16);
        display: block;
        width: 100%;
        height: auto;
    }
}
.comp-columncopy {
    width: 1425px;
    max-width: 100%;
    margin: 68px auto 100px;
    box-sizing: border-box;
    * { box-sizing: border-box; }

    font-family: 'Open Sans', sans-serif;
    position: relative;
    display: flex;
    gap: 100px;
    padding: 0 45px;

    @media (max-width: 767px) {
        flex-direction: column;
        gap: 60px;
    }

    &:after {
        content: '';
        display: block;
        background: @light-blue;
        width: 2px;
        opacity: 0.4;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -1px;

        @media (max-width: 767px) {
            display: none;
        }
    }
    .columncopy {
        flex: 1;

        .header {
            color: @light-blue;
            font-size: 37px;
            line-height: 1.15;
            font-weight: bold;

            @media (max-width: 1400px) {
                font-size: 27px;
            }
            @media (max-width: 1100px) {
                font-size: 20px;
            }
        }
        .copy {
            color: @dark-blue;
            font-size: 24px;
            line-height: 1.33;
            margin-top: 14px;

            @media (max-width: 1400px) {
                font-size: 17px;
            }
            @media (max-width: 1100px) {
                font-size: 16px;
            }
        }
    }
}