﻿@charset "utf-8";
/* CSS Document */
/* Be Ambitious Hero */
.topFrame {
    background-image: url(/pub/images/pattern-background-grey-full-large.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto;
}

    .topFrame .midFrame {
        /* background-image: url(/pub/images/be-ambitious-homepage-hero-no-overlay.jpg); */
        background-color: #222;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        min-height: 475px;
    }

        .topFrame .midFrame .inFrame {
            background-image: url(/pub/images/pattern-background-gradient-full-large.png);
            background-repeat: no-repeat;
            background-position: top center;
            background-size: auto;
            min-height: 475px;
            overflow: hidden;
        }

            .topFrame .midFrame .inFrame .frameContainer {
                margin: 6% auto 6%;
            }

                .topFrame .midFrame .inFrame .frameContainer h1 {
                    color: rgb(255, 255, 255);
                    font-family: allumi-2-std, Verdana, sans-serif;
                    font-size: 1.5em;
                    font-weight: 100;
                    line-height: 1.25em;
                    margin-left: auto;
                    margin-right: auto;
                    margin-bottom: 10.0px;
                }

                .topFrame .midFrame .inFrame .frameContainer h2 {
                    color: rgb(255, 255, 255);
                    font-size: 4.0em;
                    margin: 0px 0 30px;
                    line-height: 1em;
                }
 
.beUnderLine {
    border-bottom: 6px solid rgb(174, 10, 70);
    display: inline-block;
    padding-bottom: 0px;
}

@media only screen and (max-width: 1016px) {
    .topFrame .midFrame .inFrame .frameContainer h2 {
        font-size: 3.0em;
    }
}

@media only screen and (max-width: 768px) {
    .topFrame .midFrame .inFrame .frameContainer {
        margin: 10% auto 6%;
    }
}

@media only screen and (max-width: 376px) {
    .topFrame {
        background-image: none;
    }

        .topFrame .midFrame, .topFrame .midFrame .inFrame {
            min-height: 400px;
        }

            .topFrame .midFrame .inFrame .frameContainer {
                margin: 20% auto 6%;
            }

                .topFrame .midFrame .inFrame .frameContainer h1 {
                    font-size: 1.275em;
                }

                .topFrame .midFrame .inFrame .frameContainer h2 {
                    font-size: 2.575em;
                }
}
/* Card overlays */
.top-cards {
    margin: -100px auto 0;
}

.shadow-box-new {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    background-color: #f7f6f5;
    padding: 30px;
    margin-top: 10px;
    width: 49%
}

    .shadow-box-new h2 {
        margin-bottom: 15px;
    }

        .shadow-box-new h2 b, .shadow-box-new h2 strong {
            font-weight: 400;
        }

    .shadow-box-new p {
        margin: 0 0 20px;
    }

.areaBox {
    padding: 10px 10px;
}

    .areaBox a img {
        width: 60px;
        height: auto;
        margin-bottom: 10px;
    }

        .areaBox a img.outcomeIcon {
            width: 90px;
            height: auto;
            margin-bottom: 0px;
        }

    .areaBox a h3 {
        color: #222;
        font-size: 22.0px;
        margin-bottom: 10.0px;
        font-weight: 400;
        line-height: 1.25em;
    }

    .areaBox a p {
        color: #3e332d;
        font-size: 16px;
    }

        .areaBox a p span {
            display: block;
            margin-top: 10px;
            color: #AE0A46
        }

            .areaBox a p span b, .areaBox a p span strong {
                font-weight: 400;
            }

                .areaBox a p span b .arrow, .areaBox a p span strong .arrow, .bottomButton .arrow {
                    font-style: normal;
                }

    .areaBox a:hover h3, .areaBox a:hover p span {
        color: #6F062D;
    }

        .areaBox a:hover p span b .arrow, .areaBox a:hover p span strong .arrow, .areaBox a:hover span b .arrow, .areaBox a:hover span strong .arrow, .bottomButton:hover .arrow {
            padding-left: 8px;
            transition: .3s ease-in;
        }

.section-headline {
    font-size: 24px !important;
    font-weight: 400;
    line-height: 1.25em !important;
    color: #5f5753;
    text-rendering: optimizeLegibility;
}

.supportTxt {
    font-size: 1.775em;
    font-weight: 100;
    color: #3e332d;
    margin-bottom: 10px;
}

    .supportTxt b, .supportTxt strong {
        font-weight: 400;
    }

.width20 {
    width: 20%;
    display: grid;
}

.padding10 {
    padding: 10px;
}

.paddingT15 {
    padding-top: 15px;
}

.paddingB15 {
    padding-bottom: 15px;
}

@media screen and (max-width: 1182px) {
    .top-cards {
        margin: -55px auto 0;
    }
}

@media screen and (max-width: 415px) {
    .top-cards {
        margin: -55px auto 0;
    }

    .shadow-box-new {
        padding: 10px;
    }

    .padding10 {
        padding: 10px;
    }

    .paddingT15, .paddingB15 {
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;
    }

    .padFix {
        margin: 10px 0;
    }
}

@media screen and (max-width: 999px) {
    .width20 {
        width: 50%;
    }
    /********* Industry heros ********/
    .btn-spacer {
        display: inline-block !important;
        padding: 0 10px !important;
    }

    .btn-section {
        margin: auto;
        padding: 0;
    }

        .btn-section .small {
            margin: 0 !important;
        }

    .marginAuto {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    @media only screen and (max-width: 776px) {
        .btn-spacer, .hide-down {
            display: none !important;
        }
    }
}
