@import 'init';
header {
    position: relative;
    padding-bottom: 1.5rem;
    background-color: #F0F1E9;
    .container {
        margin-bottom: 0;
        min-height: 85px;
    }
}
main {
    padding-top: 0;
}
#splash {
    .row {
        align-items: center;
    }
    section {
        background-image: url('/images/splash/Water_BG.jpg');
        background-size: cover;
        background-position: center;
        color: #F0F1E9;
        min-height: ~'calc(100vh - 133px)';
        display: flex;
        align-items: center;
    }
    @media only screen and (min-width: 1499px) {
        .container {
            max-width: 1400px;
        }
    }
    .image {
        background-image: url('/images/splash/poster2026.jpg');
        background-repeat: no-repeat;
        background-size: contain;
        height: ~'calc(100vh - 133px - 8rem)';
        background-position: center;
/*        padding-right: 3rem;*/
    }
    .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1rem;
        @media only screen and (min-width: 1400px) {
            padding-left: 9rem;
            min-height: ~'calc(100vh - 133px - 8rem)';
        }
    }
    .sup-title {
        font-family: 'Prompt', sans-serif;
        text-transform: uppercase;
        font-size: 1.6em;
        background-color: @blue;
        padding: 0.5rem 1.5rem;
        width: fit-content;
        margin-bottom: 1rem;
    }
    .title {
        font-size: 5.45em;
        margin-bottom: 0;
    }
    .content {
        font-size: 1.15em;
        margin-bottom: 0;
    }
    .btn {
        color: white;
        background-color: transparent;
        &:hover {
            border-color: @blue;
            background-color: @blue;
        }
    }
    @media only screen and (max-width: 1399px) {
        .title {
            font-size: 4em;
        }
    }
    @media only screen and (max-width: 1199px) {
        .title {
            font-size: 3em;
        }
    }
    @media only screen and (max-width: 991px) {
        .row {
            gap: 2rem;
        }
        .image {
            height: 476px;
        }
        .info {
            align-items: center;
        }
        .sup-title {
            font-size: 1.3em;
        }
        .title {
            font-size: 3em;
        }
        .title, .content {
            text-align: center;
        }
        .buttons {
            align-items: center;
        }
    }
    @media only screen and (max-width: 767px) {
        .title {
            font-size: 2.4em;
        }
        .title, .content {
            margin-bottom: 0;
        }
    }
}