:root {
    --bg-banner: #09263A;
    --bg-restricted-specs: #09263A;
}

#page-home #page-content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

.home-intro, .restricted-specs {
    position: relative;
    background: var(--bg-banner);
    background-image: url(/img/home/bg-index-banner.jpg);
    background-repeat: no-repeat;
    background-position: right center; /*-360px*/
    background-size: cover;
    color: var(--text-primary-invert);
    min-height: 216px;

    .wrapper {
        padding: 3.5rem var(--gutter-x);
        /*position: relative;*/
        /*top: 50%;
        transform: translateY(-50%);*/

        h1.title {
            font-size: 55px;
            color: inherit;
            font-weight: 700;
            line-height: 1.1;
            /*text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);*/
            margin-bottom: 1rem;
        }

        .text {
            font-weight: 500;
            line-height: 1.2;
            margin: 0 auto;
            font-size: 24px;
        }
    }
}

.restricted-specs {
    min-height: 80px;

    .wrapper {
        /*
        width: 100%;
        max-width: 800px;
        padding: 0;
        */
        padding: var(--gutter-x);
        text-align: center;

        .text {
            font-size: 16px;
            display: inline-block;
            /*font-size: 20px;
            line-height: 35px;*/
            vertical-align: middle;

            .btn {
                margin-left: 3rem;
            }
        }
    }
}

.content-section {
    padding: 2rem 0;

    .wrapper {
        padding-left: calc(var(--gutter-x) - .75rem);
        padding-right: calc(var(--gutter-x) - .75rem);
    }

    h2 {
        margin: 0 0 1rem;
        font-size: 28px;
        color: inherit;
    }

    p {
        margin-bottom: 1rem;
    }

    .container, .container-fluid {
        margin-bottom: calc(-1 * var(--bs-gutter-x));
    }

    .col {
        margin-bottom: var(--bs-gutter-x);
    }

    &.col {
        padding: 2rem 0;
    }
}

.why-account {
    /*background: url(/img/create-account-min.png) 50% 50%/cover no-repeat var(--bg-primary);*/

    h2 {
        text-align: center;
    }

    .btn {
        width: 240px;
        max-width: 100%;
    }
}

.product-card {
    border-radius: 8px;
    min-height: 200px;
    height: 100%;
    box-shadow: 0 3px 6px 0 rgba(0, 4, 15, 0.15);
    margin: 0;

    &:hover,
    &:focus {
        transition: background 0.15s;
        box-shadow: 0 6px 12px 0 rgba(0, 4, 15, 0.15);
        text-decoration: none;
        cursor: pointer;
    }

    /*box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);*/

    .bottom-label .label {
        height: 16px;
        line-height: 16px;
        font-size: 10px;
    }
}

.featured-products {
    background: var(--bg-featured-products);
    color: var(--text-primary);

    .col {
        position: relative;
    }

    .product-card {
        /*height: 300px;*/
        border-top: 4px solid #40C2CC;
        min-height: 16em;

        /*@media (min-width: 480px) and (max-width: 767.98px) {
            height: 275px;
        }*/

        .name {
            min-height: 30px;
            padding-top: 5px;

            img {
                max-height: 30px;
            }
        }

        &.wsh {
            border-width: 4px 0 0;
            background-color: #339ba3;
            background-image: url(/img/home/bg-wsh-events.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            color: #fff;
        }

        &.vetta {
            border-width: 4px 0 0;
            background-color: #46338A;
            color: #fff;

            .name {
                padding: 0;
            }
        }

        &.term-corra-card {
            border-width: 4px 0 0;
            background: #18242F url(/img/home/bg-term-corra.png) center/cover no-repeat;
            color: #fff;

            .name {
                .corra {
                    color: #B8F5EF;
                }
            }
        }

        &.esg {
            border-width: 4px 0 0;
            background: #4c7220 url(/img/home/bg-esg-data-hub.png) center/cover no-repeat;
            color: #fff;
        }
    }
}

.launch-applications {
    background: var(--bg-launch-applications);

    .product-card {
        padding-left: 4.25em;
        min-height: 0;

        &:hover, &:focus {
            background: var(--bg-body);
        }

        .product-icon-box {
            position: absolute;
            width: 30px;
            height: 30px;
            left: 1.5em;

            .product-icon, svg {
                max-height: 30px;
                max-width: 30px;
            }
        }

        .name {
            font-weight: 700;
            font-size: 1.5em;
            margin-bottom: 0.55em;
            margin-top: 2px;
            line-height: 1.2em;
        }

        .description {
            margin-bottom: 1rem;
        }

        .btn {
            --bs-btn-bg: transparent;
        }
    }
}

.popular-products {
    background: #40C2CC;

    .product-card {
        border: 0;
        min-height: 0;
    }
}

.featured-products, .popular-products {
    .product-card {
        height: auto;

        &.other {
            .description {
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 5;
                line-clamp: 5;
                line-height: 1.4;
                min-height: calc(5em * 1.4);
                overflow: hidden;
            }

            &:hover {
                .description {
                    -webkit-line-clamp: none;
                    line-clamp: none;
                    overflow: initial;
                }
            }
        }
    }
}

/*#home-future-releases {
    background: url("/img/bg-future-releases.png") no-repeat 50% 50%;
    background-size: cover;
    color: var(--text-primary-invert);
}

.new-products {
    background: url(/img/bg-future-releases.png) 50% 50%/cover no-repeat var(--bg-new-products);
    color: var(--text-primary-invert);
}*/

/*.home-sticky-highlight {
    display: none;
    position: sticky;
    left: 0;
    top: 140px;
    width: 100%;
    z-index: 30;

    @media (max-width: 767.98px) {
        top: 117px;
    }

    @media (max-width: 479px) {
        top: 113px;
    }
}

.home-sticky-highlight-active {
    background: var(--bg-login-button);
    border-top: 1px solid var(--border-sticky-highlight);
    box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.2);
    border-bottom: 0;

    a {
        background: var(--bg-login-button);
        color: var(--text-light);
        border: 1px solid var(--border-sticky-highlight);
    }
}*/

@media (max-width: 991.98px) {
    .restricted-specs .text {
        font-size: 18px
    }

    .content-section {
        padding: 1.5rem 0;

        h2 {
            font-size: 26px
        }
    }

    .why-account {
        .btn.btn-none, .btn.btn-teal {
            font-size: 16px
        }
    }
}

@media (max-width: 767.98px) {
    .home-intro {
        min-height: 0;

        .wrapper {
            padding: 2rem var(--gutter-x);

            h1.title {
                font-size: 50px;
            }

            .text {
                font-size: 20px;
            }
        }
    }

    .restricted-specs {
        top: 117px;

        .text {
            line-height: 1.4
        }

        .btn-restricted-specs {
            float: none;
            display: block;
            margin-top: 1em
        }
    }

    .content-section h2 {
        font-size: 18px;
        margin-bottom: 1em;
    }

    .why-account {
        .btn.btn-none, .btn.btn-teal {
            font-size: 14px
        }
    }
}

@media (max-width: 575.98px) {
    .home-intro {
        .wrapper {
            padding: var(--gutter-x);

            h1.title {
                font-size: 45px;
            }

            .text {
                font-size: 18px;
            }
        }
    }
}

@media (max-width: 575.98px) {
    .content-section {
        padding: 2em 0;

        /*.row {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            padding-bottom: 0
        }*/

        .row > div {
            white-space: normal
        }
    }
}

@media (min-width: 992px) {
    .main-products {
        .featured-products {
            padding-right: 1.25rem;
            padding-left: 1.25rem;
        }

        .launch-applications {
            padding-right: 1.25rem;
            padding-left: 1.25rem;
        }
    }
}

@media (min-width: 1200px) {
    .main-products {
        position: relative;
        background: linear-gradient(90deg, #fff 0%, #fff 66%, var(--bg-launch-applications) 66%, var(--bg-launch-applications) 100%);

        .wrapper {
            display: flex;
            /*max-width: calc(1500px + 1.5rem);*/
        }

        & > .container, & > .container-fluid {
            /*margin-left: calc(-.5 * var(--bs-gutter-x));
            margin-right: calc(-.5 * var(--bs-gutter-x));
            width: auto;*/
        }
    }
}